design-zystem 1.0.208 → 1.0.209

package/dist/index.d.mts

@@ -670,6 +670,17 @@ interface PopoverProps {
 }
 declare const Popover: ({ items, children }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
+interface MetricCardProps {
+    icon: string;
+    title: string;
+    value: string | number;
+    valueColor?: string;
+    iconBackgroundColor?: string;
+    iconColor?: string;
+    contentLayout?: 'col' | 'row';
+}
+declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -825,4 +836,4 @@ declare const colors: {
     readonly light_blue: "#F1F5F9";
 };
 
-export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -670,6 +670,17 @@ interface PopoverProps {
 }
 declare const Popover: ({ items, children }: PopoverProps) => react_jsx_runtime.JSX.Element;
 
+interface MetricCardProps {
+    icon: string;
+    title: string;
+    value: string | number;
+    valueColor?: string;
+    iconBackgroundColor?: string;
+    iconColor?: string;
+    contentLayout?: 'col' | 'row';
+}
+declare const MetricCard: ({ icon, title, value, valueColor, iconBackgroundColor, iconColor, contentLayout, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -825,4 +836,4 @@ declare const colors: {
     readonly light_blue: "#F1F5F9";
 };
 
-export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, truncateFileName, truncateText };

package/dist/index.js

@@ -80,6 +80,7 @@ __export(index_exports, {
   Link: () => Link,
   List: () => List,
   ListItem: () => ListItem,
+  MetricCard: () => MetricCard,
   Modal: () => Modal,
   ModalConfirmation: () => ModalConfirmation,
   MultiSelect: () => MultiSelect,
@@ -4278,10 +4279,56 @@ var Popover = ({ items = [], children }) => {
   ] });
 };
 
+// src/Components/MetricCard/MetricCard.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var MetricCard = ({
+  icon,
+  title,
+  value,
+  valueColor,
+  iconBackgroundColor = "blue_50",
+  iconColor = "blue_950",
+  contentLayout = "col"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    Box,
+    {
+      padding: "16px",
+      borderRadius: "6px",
+      style: {
+        flex: 1
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          Box,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            background: iconBackgroundColor,
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: 50
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
+          }
+        ),
+        contentLayout === "row" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Row, { gap: "6", alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", variant: "grey_600", children: title })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Col, { gap: "4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", variant: "grey_600", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
+        ] })
+      ] })
+    }
+  );
+};
+
 // src/Components/Tooltip/Tooltip.tsx
 var import_react21 = require("react");
 var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var StyledTooltipWrapper = import_styled_components39.default.div`
   position: relative;
   display: inline-block;
@@ -4386,14 +4433,14 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -4401,7 +4448,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -4411,7 +4458,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 var import_react22 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -4441,15 +4488,15 @@ var Pagination = ({
   const startItem = (currentPage - 1) * itemsPerPage + 1;
   const endItem = Math.min(currentPage * itemsPerPage, totalItems);
   const summary = summaryLabel || defaultSummary(startItem, endItem, totalItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        showSummary && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { size: "s", color: colors.grey_500, children: summary }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        showSummary && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "s", color: colors.grey_500, children: summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Button,
             {
               size: "xs",
@@ -4460,7 +4507,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               Button,
               {
                 size: "xs",
@@ -4471,7 +4518,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Button,
             {
               size: "xs",
@@ -4490,7 +4537,7 @@ var Pagination = ({
 // src/Components/FileUploadZone/FileUploadZone.tsx
 var import_react23 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -4649,9 +4696,9 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(StyledPreview, { $fullWidth: fullWidth, children: [
-      fileType && isPdf(fileType) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(StyledPreview, { $fullWidth: fullWidth, children: [
+      fileType && isPdf(fileType) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Button,
         {
           onClick: handleRemove,
@@ -4665,8 +4712,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Col, { gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Col, { gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -4677,7 +4724,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             HiddenInput2,
             {
               ref: inputRef,
@@ -4687,7 +4734,7 @@ var FileUploadZone = ({
               disabled
             }
           ),
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Icon,
             {
               name: icon,
@@ -4696,9 +4743,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
-          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
-          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Button,
             {
               outline: true,
@@ -4711,21 +4758,21 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon, { name: "file", size: "s", color: "green_700" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "s", color: "green_700", children: fileName })
+    showFileName && fileName && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
 var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var SIZES3 = {
   s: 20,
   m: 32,
@@ -4748,7 +4795,7 @@ var StyledSpinner = import_styled_components41.default.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -4883,6 +4930,7 @@ var truncateFileName = (fileName, maxLength = 20) => {
   Link,
   List,
   ListItem,
+  MetricCard,
   Modal,
   ModalConfirmation,
   MultiSelect,

package/dist/index.mjs

@@ -4210,10 +4210,56 @@ var Popover = ({ items = [], children }) => {
   ] });
 };
 
+// src/Components/MetricCard/MetricCard.tsx
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+var MetricCard = ({
+  icon,
+  title,
+  value,
+  valueColor,
+  iconBackgroundColor = "blue_50",
+  iconColor = "blue_950",
+  contentLayout = "col"
+}) => {
+  return /* @__PURE__ */ jsx47(
+    Box,
+    {
+      padding: "16px",
+      borderRadius: "6px",
+      style: {
+        flex: 1
+      },
+      children: /* @__PURE__ */ jsxs23(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
+        /* @__PURE__ */ jsx47(
+          Box,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            background: iconBackgroundColor,
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: 50
+            },
+            children: /* @__PURE__ */ jsx47(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
+          }
+        ),
+        contentLayout === "row" ? /* @__PURE__ */ jsxs23(Row, { gap: "6", alignItems: "center", children: [
+          /* @__PURE__ */ jsx47(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+          /* @__PURE__ */ jsx47(Text, { size: "s", variant: "grey_600", children: title })
+        ] }) : /* @__PURE__ */ jsxs23(Col, { gap: "4", children: [
+          /* @__PURE__ */ jsx47(Text, { size: "s", variant: "grey_600", children: title }),
+          /* @__PURE__ */ jsx47(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
+        ] })
+      ] })
+    }
+  );
+};
+
 // src/Components/Tooltip/Tooltip.tsx
 import { useState as useState13 } from "react";
 import styled39 from "styled-components";
-import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 var StyledTooltipWrapper = styled39.div`
   position: relative;
   display: inline-block;
@@ -4318,14 +4364,14 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = useState13(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -4333,7 +4379,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx47(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx47(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx48(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx48(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -4343,7 +4389,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -4373,15 +4419,15 @@ var Pagination = ({
   const startItem = (currentPage - 1) * itemsPerPage + 1;
   const endItem = Math.min(currentPage * itemsPerPage, totalItems);
   const summary = summaryLabel || defaultSummary(startItem, endItem, totalItems);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        showSummary && /* @__PURE__ */ jsx48(Text, { size: "s", color: colors.grey_500, children: summary }),
-        /* @__PURE__ */ jsxs24(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
-          /* @__PURE__ */ jsx48(
+        showSummary && /* @__PURE__ */ jsx49(Text, { size: "s", color: colors.grey_500, children: summary }),
+        /* @__PURE__ */ jsxs25(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+          /* @__PURE__ */ jsx49(
             Button,
             {
               size: "xs",
@@ -4392,7 +4438,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (page, index) => page === "..." ? /* @__PURE__ */ jsx48(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx48(
+            (page, index) => page === "..." ? /* @__PURE__ */ jsx49(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx49(
               Button,
               {
                 size: "xs",
@@ -4403,7 +4449,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx49(
             Button,
             {
               size: "xs",
@@ -4422,7 +4468,7 @@ var Pagination = ({
 // src/Components/FileUploadZone/FileUploadZone.tsx
 import { useState as useState14, useRef as useRef13, useCallback as useCallback4 } from "react";
 import styled40 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -4581,9 +4627,9 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ jsxs25(StyledPreview, { $fullWidth: fullWidth, children: [
-      fileType && isPdf(fileType) ? /* @__PURE__ */ jsx49(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx49(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
-      /* @__PURE__ */ jsx49(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsxs26(StyledPreview, { $fullWidth: fullWidth, children: [
+      fileType && isPdf(fileType) ? /* @__PURE__ */ jsx50(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx50(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ jsx50(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx50(
         Button,
         {
           onClick: handleRemove,
@@ -4597,8 +4643,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ jsxs25(Col, { gap: "4", children: [
-    /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(Col, { gap: "4", children: [
+    /* @__PURE__ */ jsxs26(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -4609,7 +4655,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             HiddenInput2,
             {
               ref: inputRef,
@@ -4619,7 +4665,7 @@ var FileUploadZone = ({
               disabled
             }
           ),
-          showIcon && /* @__PURE__ */ jsx49(
+          showIcon && /* @__PURE__ */ jsx50(
             Icon,
             {
               name: icon,
@@ -4628,9 +4674,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__PURE__ */ jsx49(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
-          showBrowse && /* @__PURE__ */ jsx49(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
-          showBrowse && /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ jsx50(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ jsx50(
             Button,
             {
               outline: true,
@@ -4643,21 +4689,21 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ jsx49(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ jsx50(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ jsxs25(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx49(Icon, { name: "file", size: "s", color: "green_700" }),
-      /* @__PURE__ */ jsx49(Text, { size: "s", color: "green_700", children: fileName })
+    showFileName && fileName && /* @__PURE__ */ jsxs26(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx50(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ jsx50(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ jsx49(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ jsx50(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
 import styled41, { keyframes } from "styled-components";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SIZES3 = {
   s: 20,
   m: 32,
@@ -4680,7 +4726,7 @@ var StyledSpinner = styled41.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -4814,6 +4860,7 @@ export {
   Link,
   List,
   ListItem,
+  MetricCard,
   Modal,
   ModalConfirmation,
   MultiSelect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.208",
+  "version": "1.0.209",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",