design-zystem 1.0.263 → 1.0.264

package/dist/index.d.mts

@@ -906,6 +906,21 @@ interface CardProps {
 }
 declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
 
+interface BannerAction {
+    label: string;
+    icon?: string;
+    onClick?: () => void;
+}
+interface BannerProps {
+    variant?: 'blue' | 'red';
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+    message?: string;
+    action?: BannerAction;
+}
+declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -1175,4 +1190,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, 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 };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, 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

@@ -906,6 +906,21 @@ interface CardProps {
 }
 declare const Card: ({ children, onClick, accentColor, backgroundColor, padding, borderRadius, }: CardProps) => react_jsx_runtime.JSX.Element;
 
+interface BannerAction {
+    label: string;
+    icon?: string;
+    onClick?: () => void;
+}
+interface BannerProps {
+    variant?: 'blue' | 'red';
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+    message?: string;
+    action?: BannerAction;
+}
+declare const Banner: ({ variant, badge, title, subtitle, message, action, }: BannerProps) => react_jsx_runtime.JSX.Element;
+
 interface TooltipProps {
     children?: ReactNode;
     backgroundColor?: string;
@@ -1175,4 +1190,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, 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 };
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, 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

@@ -61,6 +61,7 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   Avatar: () => Avatar,
+  Banner: () => Banner,
   Box: () => Box,
   Bubble: () => Bubble,
   Bulk: () => Bulk,
@@ -5178,16 +5179,106 @@ var Card2 = ({
   }
 );
 
-// src/Components/Tooltip/Tooltip.tsx
-var import_react27 = require("react");
+// src/Components/Banner/Banner.tsx
 var import_styled_components45 = __toESM(require("styled-components"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var StyledTooltipWrapper = import_styled_components45.default.div`
+var variantStyles = {
+  blue: {
+    background: "rgba(219, 233, 254, 0.4)",
+    borderColor: "#BEDBFF",
+    badgeBackground: colors.badge_blue_bg,
+    badgeColor: colors.badge_blue_text,
+    action: "blue_950"
+  },
+  red: {
+    background: "rgba(252, 221, 222, 0.4)",
+    borderColor: "#FFD2D2",
+    badgeBackground: "#FCDDDE",
+    badgeColor: colors.red_950,
+    action: "red_950"
+  }
+};
+var StyledBanner = import_styled_components45.default.div`
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid ${(p) => p.$borderColor};
+  background: ${(p) => p.$background};
+`;
+var Content2 = import_styled_components45.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+`;
+var Heading = import_styled_components45.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var Banner = ({
+  variant = "blue",
+  badge,
+  title,
+  subtitle,
+  message,
+  action
+}) => {
+  const style2 = variantStyles[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    StyledBanner,
+    {
+      $background: style2.background,
+      $borderColor: style2.borderColor,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Content2, { children: message ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", children: message }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Heading, { children: [
+            badge && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              Bubble,
+              {
+                backgroundColor: style2.badgeBackground,
+                color: style2.badgeColor,
+                borderRadius: "6px",
+                padding: "2px 8px",
+                style: { fontSize: "11px", lineHeight: "16.5px" },
+                children: badge
+              }
+            ),
+            title && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "s", weight: "700", children: title })
+          ] }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Text, { size: "xs", children: subtitle })
+        ] }) }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          Button,
+          {
+            outline: true,
+            size: "xs",
+            variant: style2.action,
+            iconLeft: action.icon,
+            label: action.label,
+            onClick: action.onClick
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Components/Tooltip/Tooltip.tsx
+var import_react27 = require("react");
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var StyledTooltipWrapper = import_styled_components46.default.div`
   position: relative;
   display: inline-block;
   cursor: pointer;
 `;
-var StyledTooltipContent = import_styled_components45.default.div`
+var StyledTooltipContent = import_styled_components46.default.div`
   visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
   background-color: ${(props) => props.$backgroundColor || colors.black};
   color: ${colors.white};
@@ -5286,14 +5377,14 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -5301,7 +5392,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            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" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -5311,7 +5402,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 var import_react28 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -5341,15 +5432,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_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        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)(
+        showSummary && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", color: colors.grey_500, children: summary }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Button,
             {
               size: "xs",
@@ -5360,7 +5451,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (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)(
+            (page, index) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               Button,
               {
                 size: "xs",
@@ -5371,7 +5462,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             Button,
             {
               size: "xs",
@@ -5389,8 +5480,8 @@ var Pagination = ({
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
 var import_react29 = require("react");
-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 ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -5406,7 +5497,7 @@ var getMimeTypes = (accept) => {
   return accept.map((ext) => ACCEPT_MAP[ext.toLowerCase()] || ext);
 };
 var isPdf = (type) => type === "application/pdf";
-var StyledDropZone = import_styled_components46.default.label`
+var StyledDropZone = import_styled_components47.default.label`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5430,7 +5521,7 @@ var StyledDropZone = import_styled_components46.default.label`
     border-color: ${(p) => p.$disabled ? colors.blue_50 : colors.blue_100};
   }
 `;
-var StyledPreview = import_styled_components46.default.div`
+var StyledPreview = import_styled_components47.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5441,18 +5532,18 @@ var StyledPreview = import_styled_components46.default.div`
   width: ${(p) => p.$fullWidth ? "100%" : "auto"};
   box-sizing: border-box;
 `;
-var StyledImage2 = import_styled_components46.default.img`
+var StyledImage2 = import_styled_components47.default.img`
   max-width: 100%;
   max-height: 400px;
   border-radius: 4px;
   object-fit: contain;
 `;
-var StyledEmbed = import_styled_components46.default.embed`
+var StyledEmbed = import_styled_components47.default.embed`
   width: 100%;
   height: 500px;
   border-radius: 4px;
 `;
-var HiddenInput2 = import_styled_components46.default.input`
+var HiddenInput2 = import_styled_components47.default.input`
   display: none;
 `;
 var FileUploadZone = ({
@@ -5588,9 +5679,9 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(StyledPreview, { $fullWidth: fullWidth, children: [
+      fileType && isPdf(fileType) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         Button,
         {
           onClick: handleRemove,
@@ -5604,8 +5695,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Col, { gap: "4", fullWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Col, { gap: "4", fullWidth, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -5616,7 +5707,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             HiddenInput2,
             {
               ref: inputRef,
@@ -5627,7 +5718,7 @@ var FileUploadZone = ({
               multiple
             }
           ),
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Icon,
             {
               name: icon,
@@ -5636,9 +5727,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__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)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             Button,
             {
               outline: true,
@@ -5651,31 +5742,31 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
-    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 })
+    showFileName && fileName && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var SIZES3 = {
   s: 20,
   m: 32,
   l: 48
 };
-var spin = import_styled_components47.keyframes`
+var spin = import_styled_components48.keyframes`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;
-var StyledSpinner = import_styled_components47.default.span`
+var StyledSpinner = import_styled_components48.default.span`
   display: inline-block;
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
@@ -5688,7 +5779,7 @@ var StyledSpinner = import_styled_components47.default.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -5700,7 +5791,7 @@ var Spinner = ({ size = "m", color = "primary" }) => {
 };
 
 // src/Components/EmptyState/EmptyState.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var EmptyState = ({
   icon = "inbox",
   title = "Aucun r\xE9sultat",
@@ -5708,7 +5799,7 @@ var EmptyState = ({
   actionLabel,
   onAction
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     Col,
     {
       fullWidth: true,
@@ -5717,20 +5808,20 @@ var EmptyState = ({
       gap: "24",
       padding: "24px 16px",
       children: [
-        /* @__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 })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { size: "s", variant: "grey_500", align: "center", children: description })
         ] }),
-        actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { label: actionLabel, onClick: onAction })
+        actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { label: actionLabel, onClick: onAction })
       ]
     }
   );
 };
 
 // src/Components/FloatingButton/FloatingButton.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 FloatingButton = ({
   isOpen,
   onToggle,
@@ -5742,10 +5833,10 @@ var FloatingButton = ({
   variant = "blue_700"
 }) => {
   const accent = colors[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Container6, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Container6, { children: [
     actions.map((action, index) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
         SubButton,
         {
           type: "button",
@@ -5754,14 +5845,14 @@ var FloatingButton = ({
           $transform: arcTransform(index, actions.length),
           onClick: action.onClick,
           children: [
-            /* @__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 })
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CountBadge, { children: action.badge })
           ]
         },
         action.id
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       MainButton,
       {
         type: "button",
@@ -5770,7 +5861,7 @@ var FloatingButton = ({
         $accent: accent,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             Icon,
             {
               name: isOpen ? openIcon : icon,
@@ -5779,7 +5870,7 @@ var FloatingButton = ({
               color: colors.white
             }
           ),
-          !isOpen && mainBadge > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CountBadge, { children: mainBadge })
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CountBadge, { children: mainBadge })
         ]
       }
     )
@@ -5798,7 +5889,7 @@ var arcTransform = (index, total) => {
   const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
   return `translate(${x}px, ${y}px)`;
 };
-var Container6 = import_styled_components48.default.div`
+var Container6 = import_styled_components49.default.div`
   position: fixed;
   right: 32px;
   bottom: 32px;
@@ -5806,7 +5897,7 @@ var Container6 = import_styled_components48.default.div`
   height: ${FAB_SIZE}px;
   z-index: 1000;
 `;
-var MainButton = import_styled_components48.default.button`
+var MainButton = import_styled_components49.default.button`
   position: absolute;
   inset: 0;
   display: flex;
@@ -5820,7 +5911,7 @@ var MainButton = import_styled_components48.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_components48.default.button`
+var SubButton = import_styled_components49.default.button`
   position: absolute;
   left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
   top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
@@ -5843,7 +5934,7 @@ var SubButton = import_styled_components48.default.button`
   opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
   pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
 `;
-var CountBadge = import_styled_components48.default.span`
+var CountBadge = import_styled_components49.default.span`
   position: absolute;
   top: -4px;
   right: -4px;
@@ -5861,16 +5952,16 @@ var CountBadge = import_styled_components48.default.span`
 `;
 
 // src/Components/ProgressBar/ProgressBar.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper6 = import_styled_components49.default.div`
+var Wrapper6 = import_styled_components50.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = import_styled_components49.default.div`
+var Track2 = import_styled_components50.default.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5878,7 +5969,7 @@ var Track2 = import_styled_components49.default.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = import_styled_components49.default.div`
+var Fill = import_styled_components50.default.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5893,9 +5984,9 @@ var ProgressBar2 = ({
   showLabel = false
 }) => {
   const percent = clampPercent(value);
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Wrapper6, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5903,24 +5994,24 @@ var ProgressBar2 = ({
 };
 
 // src/Components/Timeline/Timeline.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var List2 = import_styled_components50.default.div`
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var List2 = import_styled_components51.default.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = import_styled_components50.default.div`
+var Item2 = import_styled_components51.default.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = import_styled_components50.default.div`
+var Rail = import_styled_components51.default.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = import_styled_components50.default.div`
+var Dot2 = import_styled_components51.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5928,13 +6019,13 @@ var Dot2 = import_styled_components50.default.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = import_styled_components50.default.div`
+var Line = import_styled_components51.default.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content2 = import_styled_components50.default.div`
+var Content3 = import_styled_components51.default.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5946,21 +6037,21 @@ var Timeline = ({
   emptyLabel = "Aucun \xE9v\xE9nement"
 }) => {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.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_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 })
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Item2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Rail, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Line, { $color: lineColor })
       ] }),
-      /* @__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 })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Content3, { $last: isLast, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Text, { size: "xs", fontStyle: "italic", children: item.description })
       ] })
     ] }, item.id);
   }) });
@@ -6589,6 +6680,7 @@ var parseAmount = (value) => {
 0 && (module.exports = {
   Accordion,
   Avatar,
+  Banner,
   Box,
   Bubble,
   Bulk,

package/dist/index.mjs

@@ -5063,16 +5063,106 @@ var Card2 = ({
   }
 );
 
+// src/Components/Banner/Banner.tsx
+import styled45 from "styled-components";
+import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+var variantStyles = {
+  blue: {
+    background: "rgba(219, 233, 254, 0.4)",
+    borderColor: "#BEDBFF",
+    badgeBackground: colors.badge_blue_bg,
+    badgeColor: colors.badge_blue_text,
+    action: "blue_950"
+  },
+  red: {
+    background: "rgba(252, 221, 222, 0.4)",
+    borderColor: "#FFD2D2",
+    badgeBackground: "#FCDDDE",
+    badgeColor: colors.red_950,
+    action: "red_950"
+  }
+};
+var StyledBanner = styled45.div`
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid ${(p) => p.$borderColor};
+  background: ${(p) => p.$background};
+`;
+var Content2 = styled45.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+`;
+var Heading = styled45.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var Banner = ({
+  variant = "blue",
+  badge,
+  title,
+  subtitle,
+  message,
+  action
+}) => {
+  const style2 = variantStyles[variant];
+  return /* @__PURE__ */ jsxs28(
+    StyledBanner,
+    {
+      $background: style2.background,
+      $borderColor: style2.borderColor,
+      children: [
+        /* @__PURE__ */ jsx54(Content2, { children: message ? /* @__PURE__ */ jsx54(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
+          /* @__PURE__ */ jsxs28(Heading, { children: [
+            badge && /* @__PURE__ */ jsx54(
+              Bubble,
+              {
+                backgroundColor: style2.badgeBackground,
+                color: style2.badgeColor,
+                borderRadius: "6px",
+                padding: "2px 8px",
+                style: { fontSize: "11px", lineHeight: "16.5px" },
+                children: badge
+              }
+            ),
+            title && /* @__PURE__ */ jsx54(Text, { size: "s", weight: "700", children: title })
+          ] }),
+          subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", children: subtitle })
+        ] }) }),
+        action && /* @__PURE__ */ jsx54(
+          Button,
+          {
+            outline: true,
+            size: "xs",
+            variant: style2.action,
+            iconLeft: action.icon,
+            label: action.label,
+            onClick: action.onClick
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/Components/Tooltip/Tooltip.tsx
 import { useState as useState17 } from "react";
-import styled45 from "styled-components";
-import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
-var StyledTooltipWrapper = styled45.div`
+import styled46 from "styled-components";
+import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+var StyledTooltipWrapper = styled46.div`
   position: relative;
   display: inline-block;
   cursor: pointer;
 `;
-var StyledTooltipContent = styled45.div`
+var StyledTooltipContent = styled46.div`
   visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
   background-color: ${(props) => props.$backgroundColor || colors.black};
   color: ${colors.white};
@@ -5171,14 +5261,14 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = useState17(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
         children,
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           StyledTooltipContent,
           {
             $isVisible: isVisible,
@@ -5186,7 +5276,7 @@ var Tooltip = ({
             $width: width,
             $height: height,
             $direction: direction,
-            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" })
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx55(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx55(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
           }
         )
       ]
@@ -5196,7 +5286,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -5226,15 +5316,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__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
-        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__ */ jsx55(
+        showSummary && /* @__PURE__ */ jsx56(Text, { size: "s", color: colors.grey_500, children: summary }),
+        /* @__PURE__ */ jsxs30(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+          /* @__PURE__ */ jsx56(
             Button,
             {
               size: "xs",
@@ -5245,7 +5335,7 @@ var Pagination = ({
             }
           ),
           pages.map(
-            (page, index) => page === "..." ? /* @__PURE__ */ jsx55(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx55(
+            (page, index) => page === "..." ? /* @__PURE__ */ jsx56(Text, { size: "s", color: colors.grey_500, children: "..." }, `ellipsis-${index}`) : /* @__PURE__ */ jsx56(
               Button,
               {
                 size: "xs",
@@ -5256,7 +5346,7 @@ var Pagination = ({
               page
             )
           ),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             Button,
             {
               size: "xs",
@@ -5274,8 +5364,8 @@ var Pagination = ({
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
 import { useState as useState18, useRef as useRef13, useCallback as useCallback6 } from "react";
-import styled46 from "styled-components";
-import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import styled47 from "styled-components";
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -5291,7 +5381,7 @@ var getMimeTypes = (accept) => {
   return accept.map((ext) => ACCEPT_MAP[ext.toLowerCase()] || ext);
 };
 var isPdf = (type) => type === "application/pdf";
-var StyledDropZone = styled46.label`
+var StyledDropZone = styled47.label`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5315,7 +5405,7 @@ var StyledDropZone = styled46.label`
     border-color: ${(p) => p.$disabled ? colors.blue_50 : colors.blue_100};
   }
 `;
-var StyledPreview = styled46.div`
+var StyledPreview = styled47.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -5326,18 +5416,18 @@ var StyledPreview = styled46.div`
   width: ${(p) => p.$fullWidth ? "100%" : "auto"};
   box-sizing: border-box;
 `;
-var StyledImage2 = styled46.img`
+var StyledImage2 = styled47.img`
   max-width: 100%;
   max-height: 400px;
   border-radius: 4px;
   object-fit: contain;
 `;
-var StyledEmbed = styled46.embed`
+var StyledEmbed = styled47.embed`
   width: 100%;
   height: 500px;
   border-radius: 4px;
 `;
-var HiddenInput2 = styled46.input`
+var HiddenInput2 = styled47.input`
   display: none;
 `;
 var FileUploadZone = ({
@@ -5473,9 +5563,9 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ jsxs30(StyledPreview, { $fullWidth: fullWidth, children: [
-      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(
+    return /* @__PURE__ */ jsxs31(StyledPreview, { $fullWidth: fullWidth, children: [
+      fileType && isPdf(fileType) ? /* @__PURE__ */ jsx57(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx57(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
+      /* @__PURE__ */ jsx57(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx57(
         Button,
         {
           onClick: handleRemove,
@@ -5489,8 +5579,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ jsxs30(Col, { gap: "4", fullWidth, children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(Col, { gap: "4", fullWidth, children: [
+    /* @__PURE__ */ jsxs31(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -5501,7 +5591,7 @@ var FileUploadZone = ({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx57(
             HiddenInput2,
             {
               ref: inputRef,
@@ -5512,7 +5602,7 @@ var FileUploadZone = ({
               multiple
             }
           ),
-          showIcon && /* @__PURE__ */ jsx56(
+          showIcon && /* @__PURE__ */ jsx57(
             Icon,
             {
               name: icon,
@@ -5521,9 +5611,9 @@ var FileUploadZone = ({
               color: "blue_700"
             }
           ),
-          /* @__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(
+          /* @__PURE__ */ jsx57(Text, { size: "s", variant: "grey_600", align: "center", children: label }),
+          showBrowse && /* @__PURE__ */ jsx57(Text, { size: "xs", variant: "grey_600", align: "center", children: "ou" }),
+          showBrowse && /* @__PURE__ */ jsx57(
             Button,
             {
               outline: true,
@@ -5536,21 +5626,21 @@ var FileUploadZone = ({
               }
             }
           ),
-          sublabel && /* @__PURE__ */ jsx56(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
+          sublabel && /* @__PURE__ */ jsx57(Text, { size: "xs", variant: "grey_500", align: "center", children: sublabel })
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ jsxs30(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx56(Icon, { name: "file", size: "s", color: "green_700" }),
-      /* @__PURE__ */ jsx56(Text, { size: "s", color: "green_700", children: fileName })
+    showFileName && fileName && /* @__PURE__ */ jsxs31(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx57(Icon, { name: "file", size: "s", color: "green_700" }),
+      /* @__PURE__ */ jsx57(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
-    inlineError && /* @__PURE__ */ jsx56(Text, { size: "s", color: "danger", align: "center", children: inlineError })
+    inlineError && /* @__PURE__ */ jsx57(Text, { size: "s", color: "danger", align: "center", children: inlineError })
   ] });
 };
 
 // src/Components/Spinner/Spinner.tsx
-import styled47, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import styled48, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var SIZES3 = {
   s: 20,
   m: 32,
@@ -5560,7 +5650,7 @@ var spin = keyframes2`
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 `;
-var StyledSpinner = styled47.span`
+var StyledSpinner = styled48.span`
   display: inline-block;
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
@@ -5573,7 +5663,7 @@ var StyledSpinner = styled47.span`
 var Spinner = ({ size = "m", color = "primary" }) => {
   const resolvedSize = SIZES3[size];
   const resolvedColor = colors[color] || color || colors.primary;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     StyledSpinner,
     {
       $size: resolvedSize,
@@ -5585,7 +5675,7 @@ var Spinner = ({ size = "m", color = "primary" }) => {
 };
 
 // src/Components/EmptyState/EmptyState.tsx
-import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
 var EmptyState = ({
   icon = "inbox",
   title = "Aucun r\xE9sultat",
@@ -5593,7 +5683,7 @@ var EmptyState = ({
   actionLabel,
   onAction
 }) => {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     Col,
     {
       fullWidth: true,
@@ -5602,20 +5692,20 @@ var EmptyState = ({
       gap: "24",
       padding: "24px 16px",
       children: [
-        /* @__PURE__ */ jsx58(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
-        /* @__PURE__ */ jsxs31(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
-          /* @__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 })
+        /* @__PURE__ */ jsx59(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
+        /* @__PURE__ */ jsxs32(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+          /* @__PURE__ */ jsx59(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
+          description && /* @__PURE__ */ jsx59(Text, { size: "s", variant: "grey_500", align: "center", children: description })
         ] }),
-        actionLabel && onAction && /* @__PURE__ */ jsx58(Button, { label: actionLabel, onClick: onAction })
+        actionLabel && onAction && /* @__PURE__ */ jsx59(Button, { label: actionLabel, onClick: onAction })
       ]
     }
   );
 };
 
 // src/Components/FloatingButton/FloatingButton.tsx
-import styled48 from "styled-components";
-import { jsx as jsx59, jsxs as jsxs32 } from "react/jsx-runtime";
+import styled49 from "styled-components";
+import { jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
 var FloatingButton = ({
   isOpen,
   onToggle,
@@ -5627,10 +5717,10 @@ var FloatingButton = ({
   variant = "blue_700"
 }) => {
   const accent = colors[variant];
-  return /* @__PURE__ */ jsxs32(Container6, { children: [
+  return /* @__PURE__ */ jsxs33(Container6, { children: [
     actions.map((action, index) => {
       var _a;
-      return /* @__PURE__ */ jsxs32(
+      return /* @__PURE__ */ jsxs33(
         SubButton,
         {
           type: "button",
@@ -5639,14 +5729,14 @@ var FloatingButton = ({
           $transform: arcTransform(index, actions.length),
           onClick: action.onClick,
           children: [
-            /* @__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 })
+            /* @__PURE__ */ jsx60(Icon, { name: action.icon, family: "regular", size: "s", color: accent }),
+            ((_a = action.badge) != null ? _a : 0) > 0 && /* @__PURE__ */ jsx60(CountBadge, { children: action.badge })
           ]
         },
         action.id
       );
     }),
-    /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsxs33(
       MainButton,
       {
         type: "button",
@@ -5655,7 +5745,7 @@ var FloatingButton = ({
         $accent: accent,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ jsx59(
+          /* @__PURE__ */ jsx60(
             Icon,
             {
               name: isOpen ? openIcon : icon,
@@ -5664,7 +5754,7 @@ var FloatingButton = ({
               color: colors.white
             }
           ),
-          !isOpen && mainBadge > 0 && /* @__PURE__ */ jsx59(CountBadge, { children: mainBadge })
+          !isOpen && mainBadge > 0 && /* @__PURE__ */ jsx60(CountBadge, { children: mainBadge })
         ]
       }
     )
@@ -5683,7 +5773,7 @@ var arcTransform = (index, total) => {
   const y = Math.round(-Math.sin(angle) * ARC_RADIUS);
   return `translate(${x}px, ${y}px)`;
 };
-var Container6 = styled48.div`
+var Container6 = styled49.div`
   position: fixed;
   right: 32px;
   bottom: 32px;
@@ -5691,7 +5781,7 @@ var Container6 = styled48.div`
   height: ${FAB_SIZE}px;
   z-index: 1000;
 `;
-var MainButton = styled48.button`
+var MainButton = styled49.button`
   position: absolute;
   inset: 0;
   display: flex;
@@ -5705,7 +5795,7 @@ var MainButton = styled48.button`
     0 8px 5px rgba(0, 0, 0, 0.1),
     0 20px 12.5px rgba(0, 0, 0, 0.1);
 `;
-var SubButton = styled48.button`
+var SubButton = styled49.button`
   position: absolute;
   left: ${(FAB_SIZE - SUB_SIZE) / 2}px;
   top: ${(FAB_SIZE - SUB_SIZE) / 2}px;
@@ -5728,7 +5818,7 @@ var SubButton = styled48.button`
   opacity: ${({ $isOpen }) => $isOpen ? 1 : 0};
   pointer-events: ${({ $isOpen }) => $isOpen ? "auto" : "none"};
 `;
-var CountBadge = styled48.span`
+var CountBadge = styled49.span`
   position: absolute;
   top: -4px;
   right: -4px;
@@ -5746,16 +5836,16 @@ var CountBadge = styled48.span`
 `;
 
 // src/Components/ProgressBar/ProgressBar.tsx
-import styled49 from "styled-components";
-import { jsx as jsx60, jsxs as jsxs33 } from "react/jsx-runtime";
+import styled50 from "styled-components";
+import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper6 = styled49.div`
+var Wrapper6 = styled50.div`
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
 `;
-var Track2 = styled49.div`
+var Track2 = styled50.div`
   position: relative;
   flex: 1;
   height: ${({ $height }) => $height}px;
@@ -5763,7 +5853,7 @@ var Track2 = styled49.div`
   border-radius: ${({ $height }) => $height}px;
   overflow: hidden;
 `;
-var Fill = styled49.div`
+var Fill = styled50.div`
   height: 100%;
   width: ${({ $percent }) => $percent}%;
   background: ${({ $color }) => $color};
@@ -5778,9 +5868,9 @@ var ProgressBar2 = ({
   showLabel = false
 }) => {
   const percent = clampPercent(value);
-  return /* @__PURE__ */ jsxs33(Wrapper6, { children: [
-    /* @__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: [
+  return /* @__PURE__ */ jsxs34(Wrapper6, { children: [
+    /* @__PURE__ */ jsx61(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx61(Fill, { $height: height, $color: color, $percent: percent }) }),
+    showLabel && /* @__PURE__ */ jsxs34(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5788,24 +5878,24 @@ var ProgressBar2 = ({
 };
 
 // src/Components/Timeline/Timeline.tsx
-import styled50 from "styled-components";
-import { jsx as jsx61, jsxs as jsxs34 } from "react/jsx-runtime";
-var List2 = styled50.div`
+import styled51 from "styled-components";
+import { jsx as jsx62, jsxs as jsxs35 } from "react/jsx-runtime";
+var List2 = styled51.div`
   display: flex;
   flex-direction: column;
 `;
-var Item2 = styled50.div`
+var Item2 = styled51.div`
   display: flex;
   gap: 12px;
   align-items: stretch;
 `;
-var Rail = styled50.div`
+var Rail = styled51.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 16px;
 `;
-var Dot2 = styled50.div`
+var Dot2 = styled51.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -5813,13 +5903,13 @@ var Dot2 = styled50.div`
   flex: 0 0 auto;
   background: ${({ $color }) => $color};
 `;
-var Line = styled50.div`
+var Line = styled51.div`
   width: 2px;
   flex: 1;
   min-height: 16px;
   background: ${({ $color }) => $color};
 `;
-var Content2 = styled50.div`
+var Content3 = styled51.div`
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -5831,21 +5921,21 @@ var Timeline = ({
   emptyLabel = "Aucun \xE9v\xE9nement"
 }) => {
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx61(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
+    return /* @__PURE__ */ jsx62(Text, { size: "s", color: colors.grey_600, children: emptyLabel });
   }
-  return /* @__PURE__ */ jsx61(List2, { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx62(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__ */ jsx61(Dot2, { $color: dotColor }),
-        !isLast && /* @__PURE__ */ jsx61(Line, { $color: lineColor })
+    return /* @__PURE__ */ jsxs35(Item2, { children: [
+      /* @__PURE__ */ jsxs35(Rail, { children: [
+        /* @__PURE__ */ jsx62(Dot2, { $color: dotColor }),
+        !isLast && /* @__PURE__ */ jsx62(Line, { $color: lineColor })
       ] }),
-      /* @__PURE__ */ jsxs34(Content2, { $last: isLast, children: [
-        /* @__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 })
+      /* @__PURE__ */ jsxs35(Content3, { $last: isLast, children: [
+        /* @__PURE__ */ jsx62(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
+        item.subtitle && /* @__PURE__ */ jsx62(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
+        item.description && /* @__PURE__ */ jsx62(Text, { size: "xs", fontStyle: "italic", children: item.description })
       ] })
     ] }, item.id);
   }) });
@@ -6473,6 +6563,7 @@ var parseAmount = (value) => {
 export {
   Accordion,
   Avatar,
+  Banner,
   Box,
   Bubble,
   Bulk,

package/package.json

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