design-zystem 1.0.261 → 1.0.263

package/dist/index.d.mts

@@ -318,6 +318,8 @@ declare const Link: ({ children, url, newTab, download, size, variant, ...rest }
 interface AvatarBadge {
     name: string;
     family?: 'solid' | 'regular' | 'light' | 'brands';
+    backgroundColor?: string;
+    iconColor?: string;
 }
 interface AvatarProps {
     name: string;
@@ -893,6 +895,17 @@ interface MetricCardProps {
 }
 declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
+interface CardProps {
+    children?: ReactNode;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /** Left accent color — e.g. colors.red for 'critique', colors.secondary for 'alerte'. */
+    accentColor?: string;
+    backgroundColor?: string;
+    padding?: string;
+    borderRadius?: string;
+}
+declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -1162,4 +1175,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -318,6 +318,8 @@ declare const Link: ({ children, url, newTab, download, size, variant, ...rest }
 interface AvatarBadge {
     name: string;
     family?: 'solid' | 'regular' | 'light' | 'brands';
+    backgroundColor?: string;
+    iconColor?: string;
 }
 interface AvatarProps {
     name: string;
@@ -893,6 +895,17 @@ interface MetricCardProps {
 }
 declare const MetricCard: ({ icon, title, value, valueColor, subtitle, iconBackgroundColor, iconColor, contentLayout, onClick, checked, }: MetricCardProps) => react_jsx_runtime.JSX.Element;
 
+interface CardProps {
+    children?: ReactNode;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    /** Left accent color — e.g. colors.red for 'critique', colors.secondary for 'alerte'. */
+    accentColor?: string;
+    backgroundColor?: string;
+    padding?: string;
+    borderRadius?: string;
+}
+declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -1162,4 +1175,4 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.js

@@ -65,6 +65,7 @@ __export(index_exports, {
   Bubble: () => Bubble,
   Bulk: () => Bulk,
   Button: () => Button,
+  Card: () => Card2,
   CardSkeleton: () => CardSkeleton,
   Checkbox: () => Checkbox,
   Col: () => Col,
@@ -2107,13 +2108,13 @@ var BadgeSlot = import_styled_components18.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${colors.white};
+  background-color: ${(props) => colors[props.$bg] || props.$bg};
   border-radius: 50%;
   box-shadow: 0 2px 6px ${colors.blue_950}66;
   line-height: 0;
 `;
 var BadgeIcon = import_styled_components18.default.i`
-  color: ${colors.blue_950};
+  color: ${(props) => colors[props.$color] || props.$color};
   font-size: ${(props) => Math.round(props.$size * 0.2)}px;
   line-height: 2;
 `;
@@ -2138,7 +2139,7 @@ var Avatar = ({
   shape = "circle",
   badge
 }) => {
-  var _a;
+  var _a, _b, _c;
   const [hasImageError, setHasImageError] = (0, import_react9.useState)(false);
   const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor(textColor, colors.dark);
@@ -2165,11 +2166,12 @@ var Avatar = ({
         ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Initials, { $textColor: resolvedText, $size: size, children: initials })
       }
     ),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BadgeIcon,
       {
         $size: size,
-        className: `fa-${(_a = badge.family) != null ? _a : "regular"} fa-${badge.name}`
+        $color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
+        className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
       }
     ) })
   ] });
@@ -5141,16 +5143,51 @@ var MetricCard = ({
   );
 };
 
-// src/Components/Tooltip/Tooltip.tsx
-var import_react27 = require("react");
+// src/Components/Card/Card.tsx
 var import_styled_components44 = __toESM(require("styled-components"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var StyledTooltipWrapper = import_styled_components44.default.div`
+var StyledCard = import_styled_components44.default.div`
+  overflow: hidden;
+  transition: box-shadow 0.15s ease;
+  background-color: ${(p) => p.$backgroundColor};
+  border-radius: ${(p) => p.$borderRadius};
+  ${(p) => p.$accentColor ? `border-left: 2px solid ${p.$accentColor};` : ""}
+  ${(p) => p.$clickable ? "cursor: pointer;" : ""}
+  ${(p) => p.$clickable ? "&:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }" : ""}
+`;
+var StyledCardInner = import_styled_components44.default.div`
+  width: 100%;
+  padding: ${(p) => p.$padding};
+`;
+var Card2 = ({
+  children,
+  onClick,
+  accentColor,
+  backgroundColor = "#F8FAFC",
+  padding = "10px 12px",
+  borderRadius = "8px"
+}) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  StyledCard,
+  {
+    $clickable: !!onClick,
+    $backgroundColor: backgroundColor,
+    $borderRadius: borderRadius,
+    $accentColor: accentColor,
+    onClick,
+    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StyledCardInner, { $padding: padding, children })
+  }
+);
+
+// src/Components/Tooltip/Tooltip.tsx
+var import_react27 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var StyledTooltipWrapper = import_styled_components45.default.div`
   position: relative;
   display: inline-block;
   cursor: pointer;
 `;
-var StyledTooltipContent = import_styled_components44.default.div`
+var StyledTooltipContent = import_styled_components45.default.div`
   visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
   background-color: ${(props) => props.$backgroundColor || colors.black};
   color: ${colors.white};
@@ -5249,14 +5286,14 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -5264,7 +5301,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -5274,7 +5311,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 var import_react28 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -5304,15 +5341,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_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        showSummary && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", color: colors.grey_500, children: summary }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        showSummary && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: colors.grey_500, children: summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Button,
             {
               size: "xs",
@@ -5323,7 +5360,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               Button,
               {
                 size: "xs",
@@ -5334,7 +5371,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Button,
             {
               size: "xs",
@@ -5352,8 +5389,8 @@ var Pagination = ({
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
 var import_react29 = require("react");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -5369,7 +5406,7 @@ var getMimeTypes = (accept) => {
   return accept.map((ext) => ACCEPT_MAP[ext.toLowerCase()] || ext);
 };
 var isPdf = (type) => type === "application/pdf";
-var StyledDropZone = import_styled_components45.default.label`
+var StyledDropZone = import_styled_components46.default.label`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5393,7 +5430,7 @@ var StyledDropZone = import_styled_components45.default.label`
     border-color: ${(p) => p.$disabled ? colors.blue_50 : colors.blue_100};
   }
 `;
-var StyledPreview = import_styled_components45.default.div`
+var StyledPreview = import_styled_components46.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5404,18 +5441,18 @@ var StyledPreview = import_styled_components45.default.div`
   width: ${(p) => p.$fullWidth ? "100%" : "auto"};
   box-sizing: border-box;
 `;
-var StyledImage2 = import_styled_components45.default.img`
+var StyledImage2 = import_styled_components46.default.img`
   max-width: 100%;
   max-height: 400px;
   border-radius: 4px;
   object-fit: contain;
 `;
-var StyledEmbed = import_styled_components45.default.embed`
+var StyledEmbed = import_styled_components46.default.embed`
   width: 100%;
   height: 500px;
   border-radius: 4px;
 `;
-var HiddenInput2 = import_styled_components45.default.input`
+var HiddenInput2 = import_styled_components46.default.input`
   display: none;
 `;
 var FileUploadZone = ({
@@ -5551,9 +5588,9 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(StyledPreview, { $fullWidth: fullWidth, children: [
-      fileType && isPdf(fileType) ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(StyledPreview, { $fullWidth: fullWidth, children: [
+      fileType && isPdf(fileType) ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Button,
         {
           onClick: handleRemove,
@@ -5567,8 +5604,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Col, { gap: "4", fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Col, { gap: "4", fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -5579,7 +5616,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             HiddenInput2,
             {
               ref: inputRef,
@@ -5590,7 +5627,7 @@ var FileUploadZone = ({
               multiple
             }
           ),
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Icon,
             {
               name: icon,
@@ -5599,9 +5636,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
-          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
-          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Button,
             {
               outline: true,
@@ -5614,31 +5651,31 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "file", size: "s", color: "green_700" }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: "green_700", children: fileName })
+    showFileName && fileName && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SIZES3 = {
   s: 20,
   m: 32,
   l: 48
 };
-var spin = import_styled_components46.keyframes`
+var spin = import_styled_components47.keyframes`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;
-var StyledSpinner = import_styled_components46.default.span`
+var StyledSpinner = import_styled_components47.default.span`
   display: inline-block;
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
@@ -5651,7 +5688,7 @@ var StyledSpinner = import_styled_components46.default.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -5663,7 +5700,7 @@ var Spinner = ({ size = "m", color = "primary" }) => {
 };
 
 // src/Components/EmptyState/EmptyState.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var EmptyState = ({
   icon = "inbox",
   title = "Aucun r\xE9sultat",
@@ -5671,7 +5708,7 @@ var EmptyState = ({
   actionLabel,
   onAction
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     Col,
     {
       fullWidth: true,
@@ -5680,20 +5717,20 @@ var EmptyState = ({
       gap: "24",
       padding: "24px 16px",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", variant: "grey_500", align: "center", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { size: "s", variant: "grey_500", align: "center", children: description })
         ] }),
-        actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button, { label: actionLabel, onClick: onAction })
+        actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { label: actionLabel, onClick: onAction })
       ]
     }
   );
 };
 
 // src/Components/FloatingButton/FloatingButton.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var FloatingButton = ({
   isOpen,
   onToggle,
@@ -5705,10 +5742,10 @@ var FloatingButton = ({
   variant = "blue_700"
 }) => {
   const accent = colors[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Container6, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Container6, { children: [
     actions.map((action, index) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         SubButton,
         {
           type: "button",
@@ -5717,14 +5754,14 @@ var FloatingButton = ({
           $transform: arcTransform(index, actions.length),
           onClick: action.onClick,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
-            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CountBadge, { children: action.badge })
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CountBadge, { children: action.badge })
           ]
         },
         action.id
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       MainButton,
       {
         type: "button",
@@ -5733,7 +5770,7 @@ var FloatingButton = ({
         $accent: accent,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Icon,
             {
               name: isOpen ? openIcon : icon,
@@ -5742,7 +5779,7 @@ var FloatingButton = ({
               color: colors.white
             }
           ),
-          !isOpen && mainBadge > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CountBadge, { children: mainBadge })
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CountBadge, { children: mainBadge })
         ]
       }
     )
@@ -5761,7 +5798,7 @@ var arcTransform = (index, total) => {
   const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
   return `translate(${x}px, ${y}px)`;
 };
-var Container6 = import_styled_components47.default.div`
+var Container6 = import_styled_components48.default.div`
   position: fixed;
   right: 32px;
   bottom: 32px;
@@ -5769,7 +5806,7 @@ var Container6 = import_styled_components47.default.div`
   height: ${FAB_SIZE}px;
   z-index: 1000;
 `;
-var MainButton = import_styled_components47.default.button`
+var MainButton = import_styled_components48.default.button`
   position: absolute;
   inset: 0;
   display: flex;
@@ -5783,7 +5820,7 @@ var MainButton = import_styled_components47.default.button`
     0 8px 5px rgba(0, 0, 0, 0.1),
     0 20px 12.5px rgba(0, 0, 0, 0.1);
 `;
-var SubButton = import_styled_components47.default.button`
+var SubButton = import_styled_components48.default.button`
   position: absolute;
   left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
   top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
@@ -5806,7 +5843,7 @@ var SubButton = import_styled_components47.default.button`
   opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
   pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
 `;
-var CountBadge = import_styled_components47.default.span`
+var CountBadge = import_styled_components48.default.span`
   position: absolute;
   top: -4px;
   right: -4px;
@@ -5824,16 +5861,16 @@ var CountBadge = import_styled_components47.default.span`
 `;
 
 // src/Components/ProgressBar/ProgressBar.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper6 = import_styled_components48.default.div`
+var Wrapper6 = import_styled_components49.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = import_styled_components48.default.div`
+var Track2 = import_styled_components49.default.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5841,7 +5878,7 @@ var Track2 = import_styled_components48.default.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = import_styled_components48.default.div`
+var Fill = import_styled_components49.default.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5856,9 +5893,9 @@ var ProgressBar2 = ({
   showLabel = false
 }) => {
   const percent = clampPercent(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Wrapper6, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Text, { size: "s", weight: "600", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Wrapper6, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5866,24 +5903,24 @@ var ProgressBar2 = ({
 };
 
 // src/Components/Timeline/Timeline.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var List2 = import_styled_components49.default.div`
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var List2 = import_styled_components50.default.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = import_styled_components49.default.div`
+var Item2 = import_styled_components50.default.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = import_styled_components49.default.div`
+var Rail = import_styled_components50.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = import_styled_components49.default.div`
+var Dot2 = import_styled_components50.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5891,13 +5928,13 @@ var Dot2 = import_styled_components49.default.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = import_styled_components49.default.div`
+var Line = import_styled_components50.default.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content2 = import_styled_components49.default.div`
+var Content2 = import_styled_components50.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5909,21 +5946,21 @@ var Timeline = ({
   emptyLabel = "Aucun \xE9v\xE9nement"
 }) => {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(List2, { children: items.map((item, index) => {
     var _a;
     const isLast = index === items.length - 1;
     const dotColor = (_a = item.color) != null ? _a : colors.blue_700;
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Item2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Rail, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Dot2, { $color: dotColor }),
-        !isLast && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Line, { $color: lineColor })
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Item2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Rail, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Line, { $color: lineColor })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Content2, { $last: isLast, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
-        item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
-        item.description && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { size: "xs", fontStyle: "italic", children: item.description })
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Content2, { $last: isLast, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { size: "xs", fontStyle: "italic", children: item.description })
       ] })
     ] }, item.id);
   }) });
@@ -6556,6 +6593,7 @@ var parseAmount = (value) => {
   Bubble,
   Bulk,
   Button,
+  Card,
   CardSkeleton,
   Checkbox,
   Col,

package/dist/index.mjs

@@ -1973,13 +1973,13 @@ var BadgeSlot = styled18.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${colors.white};
+  background-color: ${(props) => colors[props.$bg] || props.$bg};
   border-radius: 50%;
   box-shadow: 0 2px 6px ${colors.blue_950}66;
   line-height: 0;
 `;
 var BadgeIcon = styled18.i`
-  color: ${colors.blue_950};
+  color: ${(props) => colors[props.$color] || props.$color};
   font-size: ${(props) => Math.round(props.$size * 0.2)}px;
   line-height: 2;
 `;
@@ -2004,7 +2004,7 @@ var Avatar = ({
   shape = "circle",
   badge
 }) => {
-  var _a;
+  var _a, _b, _c;
   const [hasImageError, setHasImageError] = useState5(false);
   const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor(textColor, colors.dark);
@@ -2031,11 +2031,12 @@ var Avatar = ({
         ) : /* @__PURE__ */ jsx22(Initials, { $textColor: resolvedText, $size: size, children: initials })
       }
     ),
-    badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, children: /* @__PURE__ */ jsx22(
+    badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ jsx22(
       BadgeIcon,
       {
         $size: size,
-        className: `fa-${(_a = badge.family) != null ? _a : "regular"} fa-${badge.name}`
+        $color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
+        className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
       }
     ) })
   ] });
@@ -5027,16 +5028,51 @@ var MetricCard = ({
   );
 };
 
+// src/Components/Card/Card.tsx
+import styled44 from "styled-components";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var StyledCard = styled44.div`
+  overflow: hidden;
+  transition: box-shadow 0.15s ease;
+  background-color: ${(p) => p.$backgroundColor};
+  border-radius: ${(p) => p.$borderRadius};
+  ${(p) => p.$accentColor ? `border-left: 2px solid ${p.$accentColor};` : ""}
+  ${(p) => p.$clickable ? "cursor: pointer;" : ""}
+  ${(p) => p.$clickable ? "&:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }" : ""}
+`;
+var StyledCardInner = styled44.div`
+  width: 100%;
+  padding: ${(p) => p.$padding};
+`;
+var Card2 = ({
+  children,
+  onClick,
+  accentColor,
+  backgroundColor = "#F8FAFC",
+  padding = "10px 12px",
+  borderRadius = "8px"
+}) => /* @__PURE__ */ jsx53(
+  StyledCard,
+  {
+    $clickable: !!onClick,
+    $backgroundColor: backgroundColor,
+    $borderRadius: borderRadius,
+    $accentColor: accentColor,
+    onClick,
+    children: /* @__PURE__ */ jsx53(StyledCardInner, { $padding: padding, children })
+  }
+);
+
 // src/Components/Tooltip/Tooltip.tsx
 import { useState as useState17 } from "react";
-import styled44 from "styled-components";
-import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledTooltipWrapper = styled44.div`
+import styled45 from "styled-components";
+import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledTooltipWrapper = styled45.div`
   position: relative;
   display: inline-block;
   cursor: pointer;
 `;
-var StyledTooltipContent = styled44.div`
+var StyledTooltipContent = styled45.div`
   visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
   background-color: ${(props) => props.$backgroundColor || colors.black};
   color: ${colors.white};
@@ -5142,7 +5178,7 @@ var Tooltip = ({
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -5150,7 +5186,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx53(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx53(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx54(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx54(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -5160,7 +5196,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -5196,9 +5232,9 @@ var Pagination = ({
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        showSummary && /* @__PURE__ */ jsx54(Text, { size: "s", color: colors.grey_500, children: summary }),
+        showSummary && /* @__PURE__ */ jsx55(Text, { size: "s", color: colors.grey_500, children: summary }),
         /* @__PURE__ */ jsxs29(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
-          /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx55(
             Button,
             {
               size: "xs",
@@ -5209,7 +5245,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (page, index) => page === "..." ? /* @__PURE__ */ jsx54(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx54(
+            (page, index) => page === "..." ? /* @__PURE__ */ jsx55(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx55(
               Button,
               {
                 size: "xs",
@@ -5220,7 +5256,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx55(
             Button,
             {
               size: "xs",
@@ -5238,8 +5274,8 @@ var Pagination = ({
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
 import { useState as useState18, useRef as useRef13, useCallback as useCallback6 } from "react";
-import styled45 from "styled-components";
-import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+import styled46 from "styled-components";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -5255,7 +5291,7 @@ var getMimeTypes = (accept) => {
   return accept.map((ext) => ACCEPT_MAP[ext.toLowerCase()] || ext);
 };
 var isPdf = (type) => type === "application/pdf";
-var StyledDropZone = styled45.label`
+var StyledDropZone = styled46.label`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5279,7 +5315,7 @@ var StyledDropZone = styled45.label`
     border-color: ${(p) => p.$disabled ? colors.blue_50 : colors.blue_100};
   }
 `;
-var StyledPreview = styled45.div`
+var StyledPreview = styled46.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5290,18 +5326,18 @@ var StyledPreview = styled45.div`
   width: ${(p) => p.$fullWidth ? "100%" : "auto"};
   box-sizing: border-box;
 `;
-var StyledImage2 = styled45.img`
+var StyledImage2 = styled46.img`
   max-width: 100%;
   max-height: 400px;
   border-radius: 4px;
   object-fit: contain;
 `;
-var StyledEmbed = styled45.embed`
+var StyledEmbed = styled46.embed`
   width: 100%;
   height: 500px;
   border-radius: 4px;
 `;
-var HiddenInput2 = styled45.input`
+var HiddenInput2 = styled46.input`
   display: none;
 `;
 var FileUploadZone = ({
@@ -5438,8 +5474,8 @@ var FileUploadZone = ({
   };
   if (previewUrl) {
     return /* @__PURE__ */ jsxs30(StyledPreview, { $fullWidth: fullWidth, children: [
-      fileType && isPdf(fileType) ? /* @__PURE__ */ jsx55(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx55(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
-      /* @__PURE__ */ jsx55(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx55(
+      fileType && isPdf(fileType) ? /* @__PURE__ */ jsx56(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx56(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ jsx56(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx56(
         Button,
         {
           onClick: handleRemove,
@@ -5465,7 +5501,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             HiddenInput2,
             {
               ref: inputRef,
@@ -5476,7 +5512,7 @@ var FileUploadZone = ({
               multiple
             }
           ),
-          showIcon && /* @__PURE__ */ jsx55(
+          showIcon && /* @__PURE__ */ jsx56(
             Icon,
             {
               name: icon,
@@ -5485,9 +5521,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__PURE__ */ jsx55(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
-          showBrowse && /* @__PURE__ */ jsx55(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
-          showBrowse && /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ jsx56(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ jsx56(
             Button,
             {
               outline: true,
@@ -5500,21 +5536,21 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ jsx55(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ jsx56(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
     showFileName && fileName && /* @__PURE__ */ jsxs30(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx55(Icon, { name: "file", size: "s", color: "green_700" }),
-      /* @__PURE__ */ jsx55(Text, { size: "s", color: "green_700", children: fileName })
+      /* @__PURE__ */ jsx56(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ jsx56(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ jsx55(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ jsx56(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
-import styled46, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import styled47, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var SIZES3 = {
   s: 20,
   m: 32,
@@ -5524,7 +5560,7 @@ var spin = keyframes2`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;
-var StyledSpinner = styled46.span`
+var StyledSpinner = styled47.span`
   display: inline-block;
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
@@ -5537,7 +5573,7 @@ var StyledSpinner = styled46.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -5549,7 +5585,7 @@ var Spinner = ({ size = "m", color = "primary" }) => {
 };
 
 // src/Components/EmptyState/EmptyState.tsx
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 var EmptyState = ({
   icon = "inbox",
   title = "Aucun r\xE9sultat",
@@ -5566,20 +5602,20 @@ var EmptyState = ({
       gap: "24",
       padding: "24px 16px",
       children: [
-        /* @__PURE__ */ jsx57(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ jsx58(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
         /* @__PURE__ */ jsxs31(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
-          /* @__PURE__ */ jsx57(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
-          description && /* @__PURE__ */ jsx57(Text, { size: "s", variant: "grey_500", align: "center", children: description })
+          /* @__PURE__ */ jsx58(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ jsx58(Text, { size: "s", variant: "grey_500", align: "center", children: description })
         ] }),
-        actionLabel && onAction && /* @__PURE__ */ jsx57(Button, { label: actionLabel, onClick: onAction })
+        actionLabel && onAction && /* @__PURE__ */ jsx58(Button, { label: actionLabel, onClick: onAction })
       ]
     }
   );
 };
 
 // src/Components/FloatingButton/FloatingButton.tsx
-import styled47 from "styled-components";
-import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+import styled48 from "styled-components";
+import { jsx as jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
 var FloatingButton = ({
   isOpen,
   onToggle,
@@ -5603,8 +5639,8 @@ var FloatingButton = ({
           $transform: arcTransform(index, actions.length),
           onClick: action.onClick,
           children: [
-            /* @__PURE__ */ jsx58(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
-            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ jsx58(CountBadge, { children: action.badge })
+            /* @__PURE__ */ jsx59(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ jsx59(CountBadge, { children: action.badge })
           ]
         },
         action.id
@@ -5619,7 +5655,7 @@ var FloatingButton = ({
         $accent: accent,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ jsx58(
+          /* @__PURE__ */ jsx59(
             Icon,
             {
               name: isOpen ? openIcon : icon,
@@ -5628,7 +5664,7 @@ var FloatingButton = ({
               color: colors.white
             }
           ),
-          !isOpen && mainBadge > 0 && /* @__PURE__ */ jsx58(CountBadge, { children: mainBadge })
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ jsx59(CountBadge, { children: mainBadge })
         ]
       }
     )
@@ -5647,7 +5683,7 @@ var arcTransform = (index, total) => {
   const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
   return `translate(${x}px, ${y}px)`;
 };
-var Container6 = styled47.div`
+var Container6 = styled48.div`
   position: fixed;
   right: 32px;
   bottom: 32px;
@@ -5655,7 +5691,7 @@ var Container6 = styled47.div`
   height: ${FAB_SIZE}px;
   z-index: 1000;
 `;
-var MainButton = styled47.button`
+var MainButton = styled48.button`
   position: absolute;
   inset: 0;
   display: flex;
@@ -5669,7 +5705,7 @@ var MainButton = styled47.button`
     0 8px 5px rgba(0, 0, 0, 0.1),
     0 20px 12.5px rgba(0, 0, 0, 0.1);
 `;
-var SubButton = styled47.button`
+var SubButton = styled48.button`
   position: absolute;
   left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
   top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
@@ -5692,7 +5728,7 @@ var SubButton = styled47.button`
   opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
   pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
 `;
-var CountBadge = styled47.span`
+var CountBadge = styled48.span`
   position: absolute;
   top: -4px;
   right: -4px;
@@ -5710,16 +5746,16 @@ var CountBadge = styled47.span`
 `;
 
 // src/Components/ProgressBar/ProgressBar.tsx
-import styled48 from "styled-components";
-import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import styled49 from "styled-components";
+import { jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper6 = styled48.div`
+var Wrapper6 = styled49.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = styled48.div`
+var Track2 = styled49.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5727,7 +5763,7 @@ var Track2 = styled48.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = styled48.div`
+var Fill = styled49.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5743,7 +5779,7 @@ var ProgressBar2 = ({
 }) => {
   const percent = clampPercent(value);
   return /* @__PURE__ */ jsxs33(Wrapper6, { children: [
-    /* @__PURE__ */ jsx59(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx59(Fill, { $height: height, $color: color, $percent: percent }) }),
+    /* @__PURE__ */ jsx60(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx60(Fill, { $height: height, $color: color, $percent: percent }) }),
     showLabel && /* @__PURE__ */ jsxs33(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
@@ -5752,24 +5788,24 @@ var ProgressBar2 = ({
 };
 
 // src/Components/Timeline/Timeline.tsx
-import styled49 from "styled-components";
-import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
-var List2 = styled49.div`
+import styled50 from "styled-components";
+import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
+var List2 = styled50.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = styled49.div`
+var Item2 = styled50.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = styled49.div`
+var Rail = styled50.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = styled49.div`
+var Dot2 = styled50.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5777,13 +5813,13 @@ var Dot2 = styled49.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = styled49.div`
+var Line = styled50.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content2 = styled49.div`
+var Content2 = styled50.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5795,21 +5831,21 @@ var Timeline = ({
   emptyLabel = "Aucun \xE9v\xE9nement"
 }) => {
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx60(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+    return /* @__PURE__ */ jsx61(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ jsx60(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx61(List2, { children: items.map((item, index) => {
     var _a;
     const isLast = index === items.length - 1;
     const dotColor = (_a = item.color) != null ? _a : colors.blue_700;
     return /* @__PURE__ */ jsxs34(Item2, { children: [
       /* @__PURE__ */ jsxs34(Rail, { children: [
-        /* @__PURE__ */ jsx60(Dot2, { $color: dotColor }),
-        !isLast && /* @__PURE__ */ jsx60(Line, { $color: lineColor })
+        /* @__PURE__ */ jsx61(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ jsx61(Line, { $color: lineColor })
       ] }),
       /* @__PURE__ */ jsxs34(Content2, { $last: isLast, children: [
-        /* @__PURE__ */ jsx60(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
-        item.subtitle && /* @__PURE__ */ jsx60(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
-        item.description && /* @__PURE__ */ jsx60(Text, { size: "xs", fontStyle: "italic", children: item.description })
+        /* @__PURE__ */ jsx61(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ jsx61(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ jsx61(Text, { size: "xs", fontStyle: "italic", children: item.description })
       ] })
     ] }, item.id);
   }) });
@@ -6441,6 +6477,7 @@ export {
   Bubble,
   Bulk,
   Button,
+  Card2 as Card,
   CardSkeleton,
   Checkbox,
   Col,

package/package.json

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