design-zystem 1.0.236 → 1.0.238

package/dist/index.d.mts

@@ -641,10 +641,12 @@ interface TableCellProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const TableCell: (props: TableCellProps) => react_jsx_runtime.JSX.Element;
 
+type SortOrder = 'asc' | 'desc' | null;
 interface TableHeaderCellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     useSort?: boolean;
     isSort?: boolean;
+    sortOrder?: SortOrder;
     flexGrow?: string | number;
     flexShrink?: string | number;
     width?: string;
@@ -932,4 +934,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -641,10 +641,12 @@ interface TableCellProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const TableCell: (props: TableCellProps) => react_jsx_runtime.JSX.Element;
 
+type SortOrder = 'asc' | 'desc' | null;
 interface TableHeaderCellProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     useSort?: boolean;
     isSort?: boolean;
+    sortOrder?: SortOrder;
     flexGrow?: string | number;
     flexShrink?: string | number;
     width?: string;
@@ -932,4 +934,4 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };
+export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, Divider, Drawer, FileUploadZone, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Tooltip, colors, formatDate, formatDistance, formatDuration, optimizeImage, truncateFileName, truncateText };

package/dist/index.js

@@ -3363,6 +3363,7 @@ var TableCell = (props) => {
 };
 
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
+var import_react16 = require("react");
 var import_styled_components31 = __toESM(require("styled-components"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var shouldForwardPropTableHeaderCell = (prop) => !["useSort", "isSort", "flexGrow", "flexShrink", "width"].includes(prop);
@@ -3382,24 +3383,45 @@ var StyledTableHeaderCell = import_styled_components31.default.div.withConfig({
   font-weight: bold;
   max-width: ${(props) => props.width || "auto"};
   min-width: ${(props) => props.width || "auto"};
-
-  .sortingButton {
-    display: ${(props) => props.useSort ? "inline-flex" : "block"};
-    align-items: center;
-    padding: ${(props) => props.useSort ? "2px 10px" : "none"};
-    background: ${(props) => props.useSort ? props.isSort ? "#f8af2d" : "#FFF5" : "none"};
-    border-radius: ${(props) => props.useSort ? "20px" : "0"};
-    gap: ${(props) => props.useSort ? "8px" : "0"};
-  }
+`;
+var SortingButton = import_styled_components31.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+`;
+var SortArrow = import_styled_components31.default.span`
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  transition: opacity 0.15s;
+  opacity: ${(props) => props.$opacity};
 `;
 var TableHeaderCell = (props) => {
-  const _a = props, { children, useSort, isSort } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort"]);
+  const _a = props, { children, useSort, isSort, sortOrder } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort", "sortOrder"]);
+  const [hovered, setHovered] = (0, import_react16.useState)(false);
+  const showArrow = useSort && (isSort || hovered);
+  const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
+  const arrowOpacity = isSort ? 1 : 0.35;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     StyledTableHeaderCell,
     __spreadProps(__spreadValues({}, otherProps), {
       useSort,
       isSort,
-      children: useSort ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "sortingButton", children }) : children
+      onMouseEnter: (e) => {
+        var _a2;
+        if (useSort) setHovered(true);
+        (_a2 = otherProps.onMouseEnter) == null ? void 0 : _a2.call(otherProps, e);
+      },
+      onMouseLeave: (e) => {
+        var _a2;
+        if (useSort) setHovered(false);
+        (_a2 = otherProps.onMouseLeave) == null ? void 0 : _a2.call(otherProps, e);
+      },
+      children: useSort ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SortingButton, { children: [
+        children,
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SortArrow, { $opacity: arrowOpacity, children: arrowChar })
+      ] }) : children
     })
   );
 };
@@ -3525,7 +3547,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime40.
 ] });
 
 // src/Components/Switch/Switch.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components36 = __toESM(require("styled-components"));
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var BASE = {
@@ -3606,7 +3628,7 @@ var Knob = import_styled_components36.default.span`
     transform: translateY(-50%) scale(0.96);
   }
 `;
-var Switch = (0, import_react16.forwardRef)(
+var Switch = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -3662,7 +3684,7 @@ var CardSkeleton = () => {
 };
 
 // src/Components/Options/Options.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Options = ({
   icon,
@@ -3672,8 +3694,8 @@ var Options = ({
   onChange,
   disabled = false
 }) => {
-  const [state, setState] = (0, import_react17.useState)(0);
-  (0, import_react17.useEffect)(() => {
+  const [state, setState] = (0, import_react18.useState)(0);
+  (0, import_react18.useEffect)(() => {
     if (defaultId) {
       const defaultIndex = options.findIndex(
         (option) => option.id === defaultId
@@ -3731,7 +3753,7 @@ var Options = ({
 };
 
 // src/Components/Stepper/Stepper.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var Wrapper4 = import_styled_components37.default.nav`
@@ -3770,7 +3792,7 @@ var Stepper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Wrapper4, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
     const isActive = i === current;
     const isCompleted = i < current;
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react18.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react19.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Circle,
         {
@@ -3787,7 +3809,7 @@ var Stepper = ({
 };
 
 // src/Components/Tabs/Tabs.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components38 = __toESM(require("styled-components"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var TOKENS = {
@@ -3937,13 +3959,13 @@ var Tabs = (_a) => {
     "baselineColor",
     "children"
   ]);
-  const rootRef = (0, import_react19.useRef)(null);
-  const refsMap = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
-  const [bar, setBar] = (0, import_react19.useState)({ left: 0, width: 0 });
+  const rootRef = (0, import_react20.useRef)(null);
+  const refsMap = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
+  const [bar, setBar] = (0, import_react20.useState)({ left: 0, width: 0 });
   const setTabRef = (id) => (el) => {
     if (el) refsMap.current.set(id, el);
   };
-  const updateBar = (0, import_react19.useCallback)(() => {
+  const updateBar = (0, import_react20.useCallback)(() => {
     const root = rootRef.current;
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
     if (!root || !activeEl) return;
@@ -3951,7 +3973,7 @@ var Tabs = (_a) => {
     const box = activeEl.getBoundingClientRect();
     setBar({ left: box.left - rootBox.left, width: box.width });
   }, [value]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
@@ -3959,14 +3981,14 @@ var Tabs = (_a) => {
     if (activeEl) ro.observe(activeEl);
     return () => ro.disconnect();
   }, [value, updateBar]);
-  const handleSelect = (0, import_react19.useCallback)(
+  const handleSelect = (0, import_react20.useCallback)(
     (id) => {
       if (id !== value && onChange) onChange(id);
     },
     [onChange, value]
   );
   const isPillsFullWidth = variant === "pills" && align === "start";
-  const rendered = (0, import_react19.useMemo)(() => {
+  const rendered = (0, import_react20.useMemo)(() => {
     if (items && items.length) {
       return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Tab,
@@ -3983,12 +4005,12 @@ var Tabs = (_a) => {
         it.id
       ));
     }
-    return import_react19.Children.map(children, (child) => {
+    return import_react20.Children.map(children, (child) => {
       var _a2;
-      if (!(0, import_react19.isValidElement)(child)) return child;
+      if (!(0, import_react20.isValidElement)(child)) return child;
       const id = (_a2 = child.props.id) != null ? _a2 : child.key;
       const active = id === value;
-      return (0, import_react19.cloneElement)(child, {
+      return (0, import_react20.cloneElement)(child, {
         active,
         variant,
         fullWidth: isPillsFullWidth,
@@ -4016,7 +4038,7 @@ var Tabs = (_a) => {
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var Container5 = import_styled_components39.default.div`
@@ -4059,8 +4081,8 @@ var MultiSelect = ({
   width,
   align = "left"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const dropdownRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
+  const dropdownRef = (0, import_react21.useRef)(null);
   const toggleOption = (value) => {
     if (!onChange) return;
     if (selectedValues.includes(value)) {
@@ -4070,7 +4092,7 @@ var MultiSelect = ({
       onChange([...selectedValues, value]);
     }
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -4112,15 +4134,15 @@ var MultiSelect = ({
 };
 
 // src/Components/DatePicker/DatePicker.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var DatePicker = ({ onChange, size = "s" }) => {
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [startDate, setStartDate] = (0, import_react21.useState)(null);
-  const [endDate, setEndDate] = (0, import_react21.useState)(null);
-  const [currentMonth, setCurrentMonth] = (0, import_react21.useState)(/* @__PURE__ */ new Date());
-  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react21.useState)(false);
-  const ref = (0, import_react21.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const [startDate, setStartDate] = (0, import_react22.useState)(null);
+  const [endDate, setEndDate] = (0, import_react22.useState)(null);
+  const [currentMonth, setCurrentMonth] = (0, import_react22.useState)(/* @__PURE__ */ new Date());
+  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react22.useState)(false);
+  const ref = (0, import_react22.useRef)(null);
   const isFiltered = !!startDate && !!endDate;
   const toggleCalendar = () => setIsOpen((prev) => !prev);
   const resetDates = () => {
@@ -4180,7 +4202,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
   };
   const isDateStart = (date) => !!startDate && date.getTime() === startDate.getTime();
   const isDateEnd = (date) => !!endDate && date.getTime() === endDate.getTime();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsOpen(false);
@@ -4330,7 +4352,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
 };
 
 // src/Components/IconTabs/IconTabs.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var TabsContainer = import_styled_components40.default.div`
@@ -4392,10 +4414,10 @@ var IconTabs = ({
   defaultTabIndex = 0
 }) => {
   var _a;
-  const [selectedTab, setSelectedTab] = (0, import_react22.useState)(defaultTabIndex);
-  const sliderRef = (0, import_react22.useRef)(null);
-  const tabRefs = (0, import_react22.useRef)([]);
-  (0, import_react22.useEffect)(() => {
+  const [selectedTab, setSelectedTab] = (0, import_react23.useState)(defaultTabIndex);
+  const sliderRef = (0, import_react23.useRef)(null);
+  const tabRefs = (0, import_react23.useRef)([]);
+  (0, import_react23.useEffect)(() => {
     if (defaultTabIndex >= 0 && defaultTabIndex !== selectedTab) {
       setSelectedTab(defaultTabIndex);
     }
@@ -4406,7 +4428,7 @@ var IconTabs = ({
       onTabChange(index);
     }
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (sliderRef.current && tabRefs.current[selectedTab]) {
       const selectedTabRect = tabRefs.current[selectedTab].getBoundingClientRect();
       const parentRect = tabRefs.current[selectedTab].parentElement.getBoundingClientRect();
@@ -4445,7 +4467,7 @@ var IconTabs = ({
 };
 
 // src/Components/Popover/Popover.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -4481,11 +4503,11 @@ var PopoverItem = import_styled_components41.default.div`
   }
 `;
 var Popover = ({ items = [], children }) => {
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const ref = (0, import_react23.useRef)(null);
-  const menuRef = (0, import_react23.useRef)(null);
-  const [menuPosition, setMenuPosition] = (0, import_react23.useState)({ top: 0, left: 0 });
-  const updatePosition = (0, import_react23.useCallback)(() => {
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const ref = (0, import_react24.useRef)(null);
+  const menuRef = (0, import_react24.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, import_react24.useState)({ top: 0, left: 0 });
+  const updatePosition = (0, import_react24.useCallback)(() => {
     var _a;
     if (!ref.current) {
       return;
@@ -4505,7 +4527,7 @@ var Popover = ({ items = [], children }) => {
       left: rect.right
     });
   }, [items.length]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
       const isInTrigger = (_a = ref.current) == null ? void 0 : _a.contains(event.target);
@@ -4610,7 +4632,7 @@ var MetricCard = ({
 };
 
 // src/Components/Tooltip/Tooltip.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var StyledTooltipWrapper = import_styled_components42.default.div`
@@ -4714,7 +4736,7 @@ var Tooltip = ({
   direction = "top",
   children
 }) => {
-  const [isVisible, setIsVisible] = (0, import_react24.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react25.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
@@ -4741,7 +4763,7 @@ var Tooltip = ({
 };
 
 // src/Components/Pagination/Pagination.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
@@ -4765,7 +4787,7 @@ var Pagination = ({
   summaryLabel
 }) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  const pages = (0, import_react25.useMemo)(
+  const pages = (0, import_react26.useMemo)(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
@@ -4819,7 +4841,7 @@ var Pagination = ({
 };
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
@@ -4906,19 +4928,19 @@ var FileUploadZone = ({
   icon = "cloud-arrow-up",
   showFileName = false
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react26.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react26.useState)(
+  const [isDragging, setIsDragging] = (0, import_react27.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react27.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react26.useState)(null);
-  const [fileName, setFileName] = (0, import_react26.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react26.useState)(null);
-  const inputRef = (0, import_react26.useRef)(null);
+  const [fileType, setFileType] = (0, import_react27.useState)(null);
+  const [fileName, setFileName] = (0, import_react27.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react27.useState)(null);
+  const inputRef = (0, import_react27.useRef)(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
   const previewUrl = multiple ? null : controlledPreviewUrl || (showPreview ? internalPreviewUrl : null);
-  const emitError = (0, import_react26.useCallback)(
+  const emitError = (0, import_react27.useCallback)(
     (message) => {
       if (onError) {
         onError(message);
@@ -4928,7 +4950,7 @@ var FileUploadZone = ({
     },
     [onError]
   );
-  const validateFile = (0, import_react26.useCallback)(
+  const validateFile = (0, import_react27.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type)) {
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -4943,7 +4965,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react26.useCallback)(
+  const processFile = (0, import_react27.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -4961,7 +4983,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react26.useCallback)(
+  const processFiles = (0, import_react27.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {

package/dist/index.mjs

@@ -3276,8 +3276,9 @@ var TableCell = (props) => {
 };
 
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
+import { useState as useState9 } from "react";
 import styled31 from "styled-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
 var shouldForwardPropTableHeaderCell = (prop) => !["useSort", "isSort", "flexGrow", "flexShrink", "width"].includes(prop);
 var StyledTableHeaderCell = styled31.div.withConfig({
   shouldForwardProp: shouldForwardPropTableHeaderCell
@@ -3295,24 +3296,45 @@ var StyledTableHeaderCell = styled31.div.withConfig({
   font-weight: bold;
   max-width: ${(props) => props.width || "auto"};
   min-width: ${(props) => props.width || "auto"};
-
-  .sortingButton {
-    display: ${(props) => props.useSort ? "inline-flex" : "block"};
-    align-items: center;
-    padding: ${(props) => props.useSort ? "2px 10px" : "none"};
-    background: ${(props) => props.useSort ? props.isSort ? "#f8af2d" : "#FFF5" : "none"};
-    border-radius: ${(props) => props.useSort ? "20px" : "0"};
-    gap: ${(props) => props.useSort ? "8px" : "0"};
-  }
+`;
+var SortingButton = styled31.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+`;
+var SortArrow = styled31.span`
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  transition: opacity 0.15s;
+  opacity: ${(props) => props.$opacity};
 `;
 var TableHeaderCell = (props) => {
-  const _a = props, { children, useSort, isSort } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort"]);
+  const _a = props, { children, useSort, isSort, sortOrder } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort", "sortOrder"]);
+  const [hovered, setHovered] = useState9(false);
+  const showArrow = useSort && (isSort || hovered);
+  const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
+  const arrowOpacity = isSort ? 1 : 0.35;
   return /* @__PURE__ */ jsx35(
     StyledTableHeaderCell,
     __spreadProps(__spreadValues({}, otherProps), {
       useSort,
       isSort,
-      children: useSort ? /* @__PURE__ */ jsx35("div", { className: "sortingButton", children }) : children
+      onMouseEnter: (e) => {
+        var _a2;
+        if (useSort) setHovered(true);
+        (_a2 = otherProps.onMouseEnter) == null ? void 0 : _a2.call(otherProps, e);
+      },
+      onMouseLeave: (e) => {
+        var _a2;
+        if (useSort) setHovered(false);
+        (_a2 = otherProps.onMouseLeave) == null ? void 0 : _a2.call(otherProps, e);
+      },
+      children: useSort ? /* @__PURE__ */ jsxs15(SortingButton, { children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx35(SortArrow, { $opacity: arrowOpacity, children: arrowChar })
+      ] }) : children
     })
   );
 };
@@ -3413,7 +3435,7 @@ var TableFooterCell = (props) => {
 };
 
 // src/Components/Table/SkeletonRow/SkeletonRow.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var style = `
 .skeleton-loader {
   width: 100%;
@@ -3432,7 +3454,7 @@ var style = `
   }
 }
 `;
-var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs15(Fragment4, { children: [
+var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs16(Fragment4, { children: [
   /* @__PURE__ */ jsx40("style", { children: style }),
   /* @__PURE__ */ jsx40(TableRow, { children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx40(TableCell, { children: /* @__PURE__ */ jsx40("div", { className: "skeleton-loader" }) }, index)) })
 ] });
@@ -3440,7 +3462,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs15(Fragment4, { child
 // src/Components/Switch/Switch.tsx
 import { forwardRef as forwardRef7 } from "react";
 import styled36, { css } from "styled-components";
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var BASE = {
   s: { w: 36, h: 20, knob: 16, pad: 2 },
   m: { w: 48, h: 28, knob: 24, pad: 2 },
@@ -3541,7 +3563,7 @@ var Switch = forwardRef7(
       if (disabled) return;
       onChange == null ? void 0 : onChange(!!e.target.checked, e);
     };
-    return /* @__PURE__ */ jsxs16(Container4, { $disabled: disabled, htmlFor: id, children: [
+    return /* @__PURE__ */ jsxs17(Container4, { $disabled: disabled, htmlFor: id, children: [
       /* @__PURE__ */ jsx41(
         HiddenCheckbox,
         __spreadValues({
@@ -3575,8 +3597,8 @@ var CardSkeleton = () => {
 };
 
 // src/Components/Options/Options.tsx
-import { useState as useState9, useEffect as useEffect8 } from "react";
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState10, useEffect as useEffect8 } from "react";
+import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var Options = ({
   icon,
   options,
@@ -3585,7 +3607,7 @@ var Options = ({
   onChange,
   disabled = false
 }) => {
-  const [state, setState] = useState9(0);
+  const [state, setState] = useState10(0);
   useEffect8(() => {
     if (defaultId) {
       const defaultIndex = options.findIndex(
@@ -3635,7 +3657,7 @@ var Options = ({
           e.currentTarget.style.transform = "translateY(0px)";
         }
       },
-      children: /* @__PURE__ */ jsxs17(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      children: /* @__PURE__ */ jsxs18(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ jsx43(Col_default, { children: /* @__PURE__ */ jsx43(Icon_default, { name: icon, type: "regular", color: "#414652" }) }),
         /* @__PURE__ */ jsx43(Col_default, { children: label })
       ] })
@@ -3646,7 +3668,7 @@ var Options = ({
 // src/Components/Stepper/Stepper.tsx
 import { Fragment as Fragment5 } from "react";
 import styled37 from "styled-components";
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var Wrapper4 = styled37.nav`
   width: 100%;
   display: flex;
@@ -3683,7 +3705,7 @@ var Stepper = ({
   return /* @__PURE__ */ jsx44(Wrapper4, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
     const isActive = i === current;
     const isCompleted = i < current;
-    return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs19(Fragment5, { children: [
       /* @__PURE__ */ jsx44(
         Circle,
         {
@@ -3705,13 +3727,13 @@ import {
   useEffect as useEffect9,
   useMemo,
   useRef as useRef8,
-  useState as useState10,
+  useState as useState11,
   Children,
   isValidElement,
   cloneElement
 } from "react";
 import styled38 from "styled-components";
-import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
@@ -3861,7 +3883,7 @@ var Tabs = (_a) => {
   ]);
   const rootRef = useRef8(null);
   const refsMap = useRef8(/* @__PURE__ */ new Map());
-  const [bar, setBar] = useState10({ left: 0, width: 0 });
+  const [bar, setBar] = useState11({ left: 0, width: 0 });
   const setTabRef = (id) => (el) => {
     if (el) refsMap.current.set(id, el);
   };
@@ -3919,7 +3941,7 @@ var Tabs = (_a) => {
       });
     });
   }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     TabsRoot,
     __spreadProps(__spreadValues({
       ref: rootRef,
@@ -3938,9 +3960,9 @@ var Tabs = (_a) => {
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-import { useState as useState11, useRef as useRef9, useEffect as useEffect10 } from "react";
+import { useState as useState12, useRef as useRef9, useEffect as useEffect10 } from "react";
 import styled39 from "styled-components";
-import { jsx as jsx46, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
 var Container5 = styled39.div`
   position: relative;
   display: inline-block;
@@ -3981,7 +4003,7 @@ var MultiSelect = ({
   width,
   align = "left"
 }) => {
-  const [isOpen, setIsOpen] = useState11(false);
+  const [isOpen, setIsOpen] = useState12(false);
   const dropdownRef = useRef9(null);
   const toggleOption = (value) => {
     if (!onChange) return;
@@ -4001,7 +4023,7 @@ var MultiSelect = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs20(Container5, { ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs21(Container5, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsx46(
       Button,
       {
@@ -4012,10 +4034,10 @@ var MultiSelect = ({
         disabled
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs20(Dropdown2, { $width: width, $align: align, children: [
+    isOpen && /* @__PURE__ */ jsxs21(Dropdown2, { $width: width, $align: align, children: [
       options.map(({ label: optLabel, value }) => {
         const active = selectedValues.includes(value);
-        return /* @__PURE__ */ jsxs20(Item, { onClick: () => toggleOption(value), children: [
+        return /* @__PURE__ */ jsxs21(Item, { onClick: () => toggleOption(value), children: [
           /* @__PURE__ */ jsx46(
             Icon,
             {
@@ -4034,14 +4056,14 @@ var MultiSelect = ({
 };
 
 // src/Components/DatePicker/DatePicker.tsx
-import { useState as useState12, useRef as useRef10, useEffect as useEffect11 } from "react";
-import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState13, useRef as useRef10, useEffect as useEffect11 } from "react";
+import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 var DatePicker = ({ onChange, size = "s" }) => {
-  const [isOpen, setIsOpen] = useState12(false);
-  const [startDate, setStartDate] = useState12(null);
-  const [endDate, setEndDate] = useState12(null);
-  const [currentMonth, setCurrentMonth] = useState12(/* @__PURE__ */ new Date());
-  const [isSelectingEnd, setIsSelectingEnd] = useState12(false);
+  const [isOpen, setIsOpen] = useState13(false);
+  const [startDate, setStartDate] = useState13(null);
+  const [endDate, setEndDate] = useState13(null);
+  const [currentMonth, setCurrentMonth] = useState13(/* @__PURE__ */ new Date());
+  const [isSelectingEnd, setIsSelectingEnd] = useState13(false);
   const ref = useRef10(null);
   const isFiltered = !!startDate && !!endDate;
   const toggleCalendar = () => setIsOpen((prev) => !prev);
@@ -4126,7 +4148,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
     "D\xE9cembre"
   ];
   const dayNames = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
-  return /* @__PURE__ */ jsxs21("div", { className: "date-picker-container", ref, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "date-picker-container", ref, children: [
     /* @__PURE__ */ jsx47(Button, { onClick: toggleCalendar, size, iconLeft: "calendar" }),
     isFiltered && /* @__PURE__ */ jsx47(
       "span",
@@ -4149,8 +4171,8 @@ var DatePicker = ({ onChange, size = "s" }) => {
         children: /* @__PURE__ */ jsx47(Icon, { name: "xmark", size: "s", color: colors.white })
       }
     ),
-    isOpen && /* @__PURE__ */ jsx47("div", { className: "date-picker-popup", children: /* @__PURE__ */ jsx47("div", { className: "date-picker-content", children: /* @__PURE__ */ jsxs21("div", { className: "calendar-container", children: [
-      /* @__PURE__ */ jsxs21("div", { className: "calendar-header", children: [
+    isOpen && /* @__PURE__ */ jsx47("div", { className: "date-picker-popup", children: /* @__PURE__ */ jsx47("div", { className: "date-picker-content", children: /* @__PURE__ */ jsxs22("div", { className: "calendar-container", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "calendar-header", children: [
         /* @__PURE__ */ jsx47(
           "button",
           {
@@ -4177,7 +4199,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs21("h3", { className: "calendar-month-title", children: [
+        /* @__PURE__ */ jsxs22("h3", { className: "calendar-month-title", children: [
           monthNames[currentMonth.getMonth()],
           " ",
           currentMonth.getFullYear()
@@ -4232,7 +4254,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
           index
         );
       }) }),
-      startDate && /* @__PURE__ */ jsx47("div", { className: "selected-dates-display", children: /* @__PURE__ */ jsx47("div", { className: "selected-dates-text", children: endDate ? /* @__PURE__ */ jsxs21("span", { children: [
+      startDate && /* @__PURE__ */ jsx47("div", { className: "selected-dates-display", children: /* @__PURE__ */ jsx47("div", { className: "selected-dates-text", children: endDate ? /* @__PURE__ */ jsxs22("span", { children: [
         /* @__PURE__ */ jsx47("strong", { children: "Du:" }),
         " ",
         formatDate(startDate, "weekday", "fr"),
@@ -4240,7 +4262,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
         /* @__PURE__ */ jsx47("strong", { children: "Au:" }),
         " ",
         formatDate(endDate, "weekday", "fr")
-      ] }) : /* @__PURE__ */ jsxs21("span", { children: [
+      ] }) : /* @__PURE__ */ jsxs22("span", { children: [
         /* @__PURE__ */ jsx47("strong", { children: "D\xE9but:" }),
         " ",
         formatDate(startDate, "weekday", "fr"),
@@ -4252,9 +4274,9 @@ var DatePicker = ({ onChange, size = "s" }) => {
 };
 
 // src/Components/IconTabs/IconTabs.tsx
-import { useState as useState13, useEffect as useEffect12, useRef as useRef11 } from "react";
+import { useState as useState14, useEffect as useEffect12, useRef as useRef11 } from "react";
 import styled40, { css as css2 } from "styled-components";
-import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
 var TabsContainer = styled40.div`
   display: flex;
   flex-direction: column;
@@ -4314,7 +4336,7 @@ var IconTabs = ({
   defaultTabIndex = 0
 }) => {
   var _a;
-  const [selectedTab, setSelectedTab] = useState13(defaultTabIndex);
+  const [selectedTab, setSelectedTab] = useState14(defaultTabIndex);
   const sliderRef = useRef11(null);
   const tabRefs = useRef11([]);
   useEffect12(() => {
@@ -4337,8 +4359,8 @@ var IconTabs = ({
       sliderRef.current.style.backgroundColor = colors[selectedColor];
     }
   }, [selectedTab, selectedColor]);
-  return /* @__PURE__ */ jsxs22(TabsContainer, { children: [
-    /* @__PURE__ */ jsxs22(IconsRow, { children: [
+  return /* @__PURE__ */ jsxs23(TabsContainer, { children: [
+    /* @__PURE__ */ jsxs23(IconsRow, { children: [
       items.map((item, index) => /* @__PURE__ */ jsx48(
         Tab2,
         {
@@ -4367,10 +4389,10 @@ var IconTabs = ({
 };
 
 // src/Components/Popover/Popover.tsx
-import { useState as useState14, useRef as useRef12, useEffect as useEffect13, useCallback as useCallback4 } from "react";
+import { useState as useState15, useRef as useRef12, useEffect as useEffect13, useCallback as useCallback4 } from "react";
 import { createPortal } from "react-dom";
 import styled41 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
 var PopoverWrapper = styled41.div`
   position: relative;
   display: inline-block;
@@ -4403,10 +4425,10 @@ var PopoverItem = styled41.div`
   }
 `;
 var Popover = ({ items = [], children }) => {
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState15(false);
   const ref = useRef12(null);
   const menuRef = useRef12(null);
-  const [menuPosition, setMenuPosition] = useState14({ top: 0, left: 0 });
+  const [menuPosition, setMenuPosition] = useState15({ top: 0, left: 0 });
   const updatePosition = useCallback4(() => {
     var _a;
     if (!ref.current) {
@@ -4448,7 +4470,7 @@ var Popover = ({ items = [], children }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, updatePosition]);
-  return /* @__PURE__ */ jsxs23(PopoverWrapper, { ref, children: [
+  return /* @__PURE__ */ jsxs24(PopoverWrapper, { ref, children: [
     /* @__PURE__ */ jsx49(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
     open && createPortal(
       /* @__PURE__ */ jsx49(
@@ -4481,7 +4503,7 @@ var Popover = ({ items = [], children }) => {
 };
 
 // src/Components/MetricCard/MetricCard.tsx
-import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var MetricCard = ({
   icon,
   title,
@@ -4504,7 +4526,7 @@ var MetricCard = ({
         cursor: onClick ? "pointer" : "default"
       },
       onClick,
-      children: /* @__PURE__ */ jsxs24(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
+      children: /* @__PURE__ */ jsxs25(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
         /* @__PURE__ */ jsx50(
           Box,
           {
@@ -4519,10 +4541,10 @@ var MetricCard = ({
             children: /* @__PURE__ */ jsx50(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
           }
         ),
-        contentLayout === "row" ? /* @__PURE__ */ jsxs24(Row, { gap: "6", alignItems: "center", children: [
+        contentLayout === "row" ? /* @__PURE__ */ jsxs25(Row, { gap: "6", alignItems: "center", children: [
           /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title })
-        ] }) : /* @__PURE__ */ jsxs24(Col, { gap: "4", children: [
+        ] }) : /* @__PURE__ */ jsxs25(Col, { gap: "4", children: [
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title }),
           /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value })
         ] })
@@ -4532,9 +4554,9 @@ var MetricCard = ({
 };
 
 // src/Components/Tooltip/Tooltip.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import styled42 from "styled-components";
-import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 var StyledTooltipWrapper = styled42.div`
   position: relative;
   display: inline-block;
@@ -4636,10 +4658,10 @@ var Tooltip = ({
   direction = "top",
   children
 }) => {
-  const [isVisible, setIsVisible] = useState15(false);
+  const [isVisible, setIsVisible] = useState16(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
@@ -4664,7 +4686,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -4694,14 +4716,14 @@ var Pagination = ({
   const startItem = (currentPage - 1) * itemsPerPage + 1;
   const endItem = Math.min(currentPage * itemsPerPage, totalItems);
   const summary = summaryLabel || defaultSummary(startItem, endItem, totalItems);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
         showSummary && /* @__PURE__ */ jsx52(Text, { size: "s", color: colors.grey_500, children: summary }),
-        /* @__PURE__ */ jsxs26(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+        /* @__PURE__ */ jsxs27(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
           /* @__PURE__ */ jsx52(
             Button,
             {
@@ -4741,9 +4763,9 @@ var Pagination = ({
 };
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
-import { useState as useState16, useRef as useRef13, useCallback as useCallback5 } from "react";
+import { useState as useState17, useRef as useRef13, useCallback as useCallback5 } from "react";
 import styled43 from "styled-components";
-import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -4828,13 +4850,13 @@ var FileUploadZone = ({
   icon = "cloud-arrow-up",
   showFileName = false
 }) => {
-  const [isDragging, setIsDragging] = useState16(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = useState16(
+  const [isDragging, setIsDragging] = useState17(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = useState17(
     null
   );
-  const [fileType, setFileType] = useState16(null);
-  const [fileName, setFileName] = useState16(null);
-  const [inlineError, setInlineError] = useState16(null);
+  const [fileType, setFileType] = useState17(null);
+  const [fileName, setFileName] = useState17(null);
+  const [inlineError, setInlineError] = useState17(null);
   const inputRef = useRef13(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
@@ -4941,7 +4963,7 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ jsxs27(StyledPreview, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxs28(StyledPreview, { $fullWidth: fullWidth, children: [
       fileType && isPdf(fileType) ? /* @__PURE__ */ jsx53(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx53(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
       /* @__PURE__ */ jsx53(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx53(
         Button,
@@ -4957,8 +4979,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ jsxs27(Col, { gap: "4", children: [
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(Col, { gap: "4", children: [
+    /* @__PURE__ */ jsxs28(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -5008,7 +5030,7 @@ var FileUploadZone = ({
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ jsxs27(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+    showFileName && fileName && /* @__PURE__ */ jsxs28(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
       /* @__PURE__ */ jsx53(Icon, { name: "file", size: "s", color: "green_700" }),
       /* @__PURE__ */ jsx53(Text, { size: "s", color: "green_700", children: fileName })
     ] }),

package/package.json

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