undp · Jura · Jan 22, 2025 · Dec 24, 2024 · Jan 14, 2025 · Jan 14, 2025
diff --git a/docs/js/accordion.min.js b/docs/js/accordion.min.js
diff --git a/docs/js/all.min.js b/docs/js/all.min.js
diff --git a/docs/js/download-modal.min.js b/docs/js/download-modal.min.js
diff --git a/docs/js/expand-search.min.js b/docs/js/expand-search.min.js
diff --git a/docs/js/filter-search-bar.min.js b/docs/js/filter-search-bar.min.js
diff --git a/docs/js/fitText.min.js b/docs/js/fitText.min.js
diff --git a/docs/js/lang-switcher.min.js b/docs/js/lang-switcher.min.js
diff --git a/docs/js/lazyload.min.js b/docs/js/lazyload.min.js
diff --git a/docs/js/lightbox-gallery.min.js b/docs/js/lightbox-gallery.min.js
diff --git a/docs/js/multi-select.min.js b/docs/js/multi-select.min.js
diff --git a/docs/js/navigation-data.min.js b/docs/js/navigation-data.min.js
diff --git a/docs/js/navigation.min.js b/docs/js/navigation.min.js
diff --git a/docs/js/our-expertise.min.js b/docs/js/our-expertise.min.js
diff --git a/docs/js/parallax.min.js b/docs/js/parallax.min.js
diff --git a/docs/js/resize.min.js b/docs/js/resize.min.js
diff --git a/docs/js/sdg-modal.min.js b/docs/js/sdg-modal.min.js
diff --git a/docs/js/select.min.js b/docs/js/select.min.js
diff --git a/docs/js/sidebar.min.js b/docs/js/sidebar.min.js
diff --git a/docs/js/smartresize.min.js b/docs/js/smartresize.min.js
diff --git a/docs/js/smooth-bg-change.min.js b/docs/js/smooth-bg-change.min.js
diff --git a/docs/js/sticky.min.js b/docs/js/sticky.min.js
diff --git a/docs/js/swiper.min.js b/docs/js/swiper.min.js
diff --git a/figma-tokens/input/tokens.json b/figma-tokens/input/tokens.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system",
-  "version": "1.3.4",
+  "version": "1.3.9",
   "description": "UNDP Design System",
   "homepage": "https://design.undp.org",
   "main": "index.js",

diff --git a/stories/Components/UIcomponents/Cards/StatsCards/StatsCards.jsx b/stories/Components/UIcomponents/Cards/StatsCards/StatsCards.jsx
@@ -1,57 +1,73 @@
-import React, { useEffect } from 'react';
-import { fitText } from '../../../../assets/js/fitText';
-import './stats-cards.scss';
-import { Heading } from '../../../../Atom/Typography/Heading/Heading';
-import { P } from '../../../../Atom/BaseTypography/Paragraph/Paragraph';
+import React, { useEffect } from "react";
+import { fitText } from "../../../../assets/js/fitText";
+import "./stats-cards.scss";
+import { Heading } from "../../../../Atom/Typography/Heading/Heading";
+import { P } from "../../../../Atom/BaseTypography/Paragraph/Paragraph";
 
 const cls = (...classes) => {
-  if (typeof fitText == 'function') {
-    setTimeout(() => { fitText('.stats-card h2'); }, 200);
+  if (typeof fitText == "function") {
+    setTimeout(() => {
+      fitText(".stats-card h2");
+    }, 200);
   }
-  return classes.filter(Boolean).length > 0 ? classes.filter(Boolean).join(' ') : null;
+  return classes.filter(Boolean).length > 0
+    ? classes.filter(Boolean).join(" ")
+    : null;
 };
 
 export const accent_color_options = {
-  yellow: 'yellow',
-  red: 'red',
-  green: 'green',
-  blue: 'blue',
+  yellow: "yellow",
+  red: "red",
+  green: "green",
+  blue: "blue",
 };
 
-export function StatsCards({
-  title, number, percent, content, Size, ...args
-}) {
+export function StatsCards({ title, number, percent, content, Size, ...args }) {
   let size;
   switch (Size) {
-    case 'Small':
-      size = 'small';
+    case "Small":
+      size = "small";
       break;
-    case 'Medium':
-      size = 'medium';
+    case "Medium":
+      size = "medium";
       break;
-    case 'Large':
-      size = 'large';
+    case "Large":
+      size = "large";
       break;
-    case 'Extra large':
-      size = 'x-large';
+    case "Extra large":
+      size = "x-large";
       break;
     default:
-      size = 'medium';
+      size = "medium";
   }
 
   useEffect(() => {
-    if (typeof fitText == 'function') {
-      fitText('.stats-card h2');
+    if (typeof fitText == "function") {
+      fitText(".stats-card h2");
     }
   }, []);
-  let color = (args.Hovercolor) ? accent_color_options[`${args.Hovercolor}`] : accent_color_options[`${args.accent}`];
-  let accent_color = color ? `accent-${color}` : '';
+  let color = args.Hovercolor
+    ? accent_color_options[`${args.Hovercolor}`]
+    : accent_color_options[`${args.accent}`];
+  let accent_color = color ? `accent-${color}` : "";
+  let max_width = args.MaxWidth === "No" ? "full-width" : "";
 
   return (
-    <div className={cls('stats-card', `${size}`, `${accent_color}`)}>
+    <div
+      className={cls(
+        "stats-card",
+        `${size}`,
+        `${accent_color}`,
+        `${max_width}`,
+      )}
+    >
       <div>
-        {size == 'x-large' || size == 'large' ? (<Heading type="3" label={title} />) : null}
-        <div><Heading type="2" label={number} /></div>
+        {size == "x-large" || size == "large" ? (
+          <Heading type="3" label={title} />
+        ) : null}
+        <div>
+          <Heading type="2" label={number} />
+        </div>
       </div>
       <div>
         <Heading type="4" label={percent} />