@connectif/ui-components 8.1.0 → 9.0.0

package/dist/index.js

@@ -1560,6 +1560,7 @@ import {
   mdiFileCloud,
   mdiFileDelimited,
   mdiFileDocument,
+  mdiFileDocumentOutline,
   mdiTextBox,
   mdiFileExcel,
   mdiFileExcelBox,
@@ -3373,6 +3374,7 @@ var icons = {
   "file-delimited": mdiFileDelimited,
   "file-document": mdiFileDocument,
   "file-document-box": mdiTextBox,
+  "file-document-outline": mdiFileDocumentOutline,
   "file-excel": mdiFileExcel,
   "file-excel-box": mdiFileExcelBox,
   "file-export": mdiFileExport,
@@ -5991,8 +5993,11 @@ function getContainerQuery(theme2, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     if (true) {
-      throw new Error(true ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : formatMuiErrorMessage(18, `(${shorthand})`));
+      throw (
+        /* minify-error */
+        new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.`)
+      );
     }
     return null;
   }
@@ -11813,7 +11818,7 @@ var ChipViewer = ({
       return 0;
     }
     rootNodeRef.current.appendChild(clonedContainer);
-    const parentWidth = rootNodeRef.current.parentElement ? rootNodeRef.current.parentElement.getBoundingClientRect().width : 0;
+    const parentWidth = rootNodeRef.current.getBoundingClientRect().width;
     rootNodeRef.current.removeChild(clonedContainer);
     return parentWidth;
   }, [getRenderGhostChipsContainer]);
@@ -11836,7 +11841,7 @@ var ChipViewer = ({
               `+${chips.length - count}`,
               true
             );
-            if (Math.ceil(rowWidth - widthChip + plusNumberWidth) >= maxWidth2) {
+            if (rowWidth - widthChip + plusNumberWidth >= maxWidth2) {
               count--;
             }
             break;
@@ -11875,7 +11880,8 @@ var ChipViewer = ({
   };
   const calculateVisibleChips = React31.useCallback(() => {
     const container = rootNodeRef.current;
-    if (!container || areArraysEqual(lastDataCalculated.current?.chips ?? [], values2) && lastDataCalculated.current?.numberLines === numberLines && lastDataCalculated.current?.forceRecalculate === forceRecalculate) {
+    const maxParentWidth = getMaxParentWidth();
+    if (!container || areArraysEqual(lastDataCalculated.current?.chips ?? [], values2) && lastDataCalculated.current?.numberLines === numberLines && lastDataCalculated.current?.forceRecalculate === forceRecalculate && lastDataCalculated.current?.parentWidth === maxParentWidth) {
       return;
     }
     if (numberLines === 0) {
@@ -11884,7 +11890,8 @@ var ChipViewer = ({
       lastDataCalculated.current = {
         chips: values2,
         numberLines,
-        forceRecalculate
+        forceRecalculate,
+        parentWidth: maxParentWidth
       };
       return;
     }
@@ -11894,16 +11901,17 @@ var ChipViewer = ({
       lastDataCalculated.current = {
         chips: values2,
         numberLines,
-        forceRecalculate
+        forceRecalculate,
+        parentWidth: maxParentWidth
       };
       return;
     }
-    const maxParentWidth = getMaxParentWidth();
     const visibleChipsCount = maxParentWidth && maxParentWidth > 0 ? getVisibleChipsCounter(values2, maxParentWidth) : values2.length;
     lastDataCalculated.current = {
       chips: values2,
       numberLines,
-      forceRecalculate
+      forceRecalculate,
+      parentWidth: maxParentWidth
     };
     if (visibleChipsCount < values2.length) {
       setVisibleChips(values2.slice(0, visibleChipsCount));
@@ -11924,7 +11932,7 @@ var ChipViewer = ({
     calculateVisibleChips();
   }, [calculateVisibleChips, values2, numberLines]);
   React31.useEffect(() => {
-    const container = containerRef.current;
+    const container = rootNodeRef.current;
     if (!container) {
       return;
     }
@@ -15537,7 +15545,7 @@ var DATE_INTERVAL_PICKER3 = {
   START_HOUR: "Heure de d\xE9but"
 };
 var PAGE_SELECTOR3 = {
-  SHOWING_ITEMS: "Affichage <b>{from}-{to}</b> de {total}"
+  SHOWING_ITEMS: "Montrer <b>{from}-{to}</b> de {total}"
 };
 var SELECT_POPOVER3 = {
   APPLY: "Appliquer",
@@ -15828,7 +15836,7 @@ var DATE_INTERVAL_PICKER4 = {
   START_HOUR: "Ora di inizio"
 };
 var PAGE_SELECTOR4 = {
-  SHOWING_ITEMS: "Visualizzazione <b>{from}-{to}</b> di {total}"
+  SHOWING_ITEMS: "Mostra <b>{from}-{to}</b> di {total}"
 };
 var SELECT_POPOVER4 = {
   APPLY: "Applica",
@@ -16104,7 +16112,7 @@ var DATE_INTERVAL_PICKER5 = {
   START_HOUR: "Hora de in\xEDcio"
 };
 var PAGE_SELECTOR5 = {
-  SHOWING_ITEMS: "Mostrando <b>{from}-{to}</b> de {total}"
+  SHOWING_ITEMS: "Exibindo <b>{from}-{to}</b> de {total}"
 };
 var SELECT_POPOVER5 = {
   APPLY: "Aplicar",
@@ -19760,7 +19768,7 @@ var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value
 var DebouncedTextField_default = DebouncedTextField;
 
 // src/components/input/date-interval-picker/DateIntervalPicker.tsx
-import * as React63 from "react";
+import * as React60 from "react";
 
 // src/components/input/date-interval-picker/DateIntervalPickerPopover.tsx
 import * as React59 from "react";
@@ -21288,12 +21296,12 @@ var DateIntervalPickerPopover = ({
 var DateIntervalPickerPopover_default = DateIntervalPickerPopover;
 
 // src/components/input/date-interval-picker/DateIntervalPicker.tsx
-import { tz as tz9 } from "moment-timezone";
+import { tz as tz6 } from "moment-timezone";
 
-// src/components/input/date-interval-picker/DateIntervalPickerDefaultButton.tsx
+// src/components/input/date-interval-picker/DateIntervalPickerButton.tsx
 import { ButtonBase } from "@mui/material";
 import { jsx as jsx114, jsxs as jsxs53 } from "react/jsx-runtime";
-var DateIntervalPickerDefaultButton = ({
+var DateIntervalPickerButton = ({
   interval,
   startDate,
   endDate,
@@ -21409,17 +21417,100 @@ var DateIntervalPickerDefaultButton = ({
     }
   );
 };
-var DateIntervalPickerDefaultButton_default = DateIntervalPickerDefaultButton;
+var DateIntervalPickerButton_default = DateIntervalPickerButton;
+
+// src/components/input/date-interval-picker/DateIntervalPicker.tsx
+import { jsx as jsx115, jsxs as jsxs54 } from "react/jsx-runtime";
+var DateIntervalPicker = ({
+  color: color2,
+  maxSelectableDays,
+  disabled,
+  minDate,
+  maxDate,
+  startDate,
+  endDate,
+  interval,
+  allowCompare,
+  showTime,
+  allowedIntervals,
+  comparisonInterval,
+  comparisonStartDate,
+  comparisonEndDate,
+  comparisonColor,
+  intersectionColor,
+  onChange
+}) => {
+  const { timezone } = React60.useContext(IntlContext);
+  const [anchorEl, setAnchorEl] = React60.useState(
+    null
+  );
+  const isSameDate = (date1, date2) => date1?.getTime() === date2?.getTime();
+  const handlePopoverCancel = () => {
+    setAnchorEl(null);
+  };
+  const handleComparisonChanges = (values2) => values2.comparisonInterval !== comparisonInterval || !isSameDate(values2.comparisonStartDate, comparisonStartDate) || !isSameDate(values2.comparisonEndDate, comparisonEndDate);
+  const handleApply = (values2) => {
+    if (onChange && (!isSameDate(values2.startDate, startDate) || !isSameDate(values2.endDate, endDate) || values2.interval !== interval || handleComparisonChanges(values2))) {
+      onChange(values2);
+    }
+    setAnchorEl(null);
+  };
+  const internalMaxDate = maxDate ?? tz6(timezone).toDate();
+  const internalMinDate = minDate ?? tz6(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
+  const displayEndDate = getDisplayEndDate(endDate, timezone, !!showTime);
+  const isEndDateVisible = !isSameDate(startDate, displayEndDate);
+  return /* @__PURE__ */ jsxs54("div", { style: { display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx115(
+      DateIntervalPickerButton_default,
+      {
+        startDate,
+        endDate: displayEndDate,
+        interval,
+        comparisonEndDate,
+        comparisonStartDate,
+        disabled,
+        showTime,
+        isEndDateVisible,
+        onClick: setAnchorEl
+      }
+    ),
+    anchorEl !== null && /* @__PURE__ */ jsx115(
+      DateIntervalPickerPopover_default,
+      {
+        anchorEl,
+        startDate,
+        endDate,
+        color: color2 ?? primaryMain,
+        maxSelectableDays,
+        disabled,
+        minDate: internalMinDate,
+        maxDate: internalMaxDate,
+        interval,
+        comparisonColor: comparisonColor ?? yellow,
+        intersectionColor: intersectionColor ?? oliveGreen,
+        allowCompare,
+        comparisonInterval,
+        comparisonStartDate,
+        comparisonEndDate,
+        allowedIntervals,
+        showTime,
+        onCancel: handlePopoverCancel,
+        onApply: handleApply
+      }
+    )
+  ] });
+};
+var DateIntervalPicker_default = DateIntervalPicker;
 
 // src/components/input/date-range-picker/DateRangePicker.tsx
-import * as React62 from "react";
-import { tz as tz8 } from "moment-timezone";
+import * as React63 from "react";
+import { tz as tz9 } from "moment-timezone";
 
-// src/components/input/date-interval-picker/DateIntervalPickerInputButton.tsx
-import * as React60 from "react";
-import { tz as tz6 } from "moment-timezone";
-import { jsx as jsx115 } from "react/jsx-runtime";
-var DateIntervalPickerInputButton = ({
+// src/components/input/date-range-picker/DateRangePickerButton.tsx
+import * as React61 from "react";
+import { tz as tz7 } from "moment-timezone";
+import { jsx as jsx116 } from "react/jsx-runtime";
+var DateRangePickerButton = ({
   startDate,
   endDate,
   disabled,
@@ -21428,20 +21519,21 @@ var DateIntervalPickerInputButton = ({
   onClick
 }) => {
   const { t } = useTranslation();
-  const inputRef = React60.useRef(null);
-  const { locale, timezone } = React60.useContext(IntlContext);
-  const [dateText, setDateText] = React60.useState("");
+  const inputRef = React61.useRef(null);
+  const { locale, timezone } = React61.useContext(IntlContext);
+  const [dateText, setDateText] = React61.useState("");
   const dateInputFormat = getDateInputFormatForLocale(locale);
-  const dateInputFormatPlaceholder = React60.useMemo(() => {
+  const dateInputFormatPlaceholder = React61.useMemo(() => {
     const formatString = dateInputFormat.replace(/Y/g, t("DATE_COMPONENTS.YEAR_LETTER")).replace(/M/g, t("DATE_COMPONENTS.MONTH_LETTER")).replace(/D/g, t("DATE_COMPONENTS.DAY_LETTER"));
     return `${formatString} - ${formatString}`;
   }, [dateInputFormat, t]);
-  const getDateString = React60.useCallback(
-    (date) => !isNaN(date.getTime()) ? tz6(date, timezone).format(dateInputFormat) : "",
+  const getDateString = React61.useCallback(
+    (date) => !isNaN(date.getTime()) ? tz7(date, timezone).format(dateInputFormat) : "",
     [dateInputFormat, timezone]
   );
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     if (!startDate || !endDate) {
+      setDateText("");
       return;
     }
     const startDateText = getDateString(startDate);
@@ -21455,13 +21547,13 @@ var DateIntervalPickerInputButton = ({
       onClick(inputRef.current);
     }
   };
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx116(
     Box_default2,
     {
       onClick: handleButtonClick,
       sx: { cursor: "pointer" },
-      "data-testid": "date-interval-picker-input-button",
-      children: /* @__PURE__ */ jsx115(
+      "data-testid": "date-range-picker-button",
+      children: /* @__PURE__ */ jsx116(
         TextField_default,
         {
           ref: inputRef,
@@ -21469,7 +21561,7 @@ var DateIntervalPickerInputButton = ({
           inputSx: {
             minWidth: "166px"
           },
-          endAdornment: /* @__PURE__ */ jsx115(
+          endAdornment: /* @__PURE__ */ jsx116(
             Icon_default,
             {
               id: isPopoverOpen ? "chevron-up" : "chevron-down",
@@ -21485,12 +21577,12 @@ var DateIntervalPickerInputButton = ({
     }
   );
 };
-var DateIntervalPickerInputButton_default = DateIntervalPickerInputButton;
+var DateRangePickerButton_default = DateRangePickerButton;
 
 // src/components/input/date-range-picker/DateRangePickerPopover.tsx
-import * as React61 from "react";
-import { tz as tz7 } from "moment-timezone";
-import { jsx as jsx116, jsxs as jsxs54 } from "react/jsx-runtime";
+import * as React62 from "react";
+import { tz as tz8 } from "moment-timezone";
+import { jsx as jsx117, jsxs as jsxs55 } from "react/jsx-runtime";
 var CALENDAR_COLUMN_WIDTH2 = 250;
 var DateRangePickerPopover = ({
   startDate,
@@ -21503,10 +21595,10 @@ var DateRangePickerPopover = ({
   onApply,
   onCancel
 }) => {
-  const { locale, timezone } = React61.useContext(IntlContext);
+  const { locale, timezone } = React62.useContext(IntlContext);
   const dateInputFormat = getDateInputFormatForLocale(locale);
   const { t } = useTranslation();
-  const dateInputFormatter = (date) => tz7(date, timezone).format(dateInputFormat);
+  const dateInputFormatter = (date) => tz8(date, timezone).format(dateInputFormat);
   const initialState = {
     interval: "custom",
     highlightedInput: "startDate",
@@ -21526,7 +21618,7 @@ var DateRangePickerPopover = ({
     comparisonEndSimpleDate: null,
     isComparing: false
   };
-  const [state, setState] = React61.useState(initialState);
+  const [state, setState] = React62.useState(initialState);
   const handleApply = () => {
     const safeParseDate = (dateString, simpleDate) => {
       if (!dateString || !simpleDate) {
@@ -21536,7 +21628,7 @@ var DateRangePickerPopover = ({
         Date.UTC(simpleDate.year, simpleDate.month, simpleDate.day)
       );
       if (isNaN(parsed.getTime()) || parsed < minDate || parsed > maxDate) {
-        return tz7(
+        return tz8(
           {
             year: simpleDate.year,
             month: simpleDate.month,
@@ -21557,8 +21649,8 @@ var DateRangePickerPopover = ({
     setState(initialState);
   };
   const isApplyButtonDisabled = () => !state.startSimpleDate || !state.endSimpleDate;
-  return /* @__PURE__ */ jsxs54(Popover_default, { onClose: handleCancel, anchorEl, children: [
-    /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsxs55(Popover_default, { onClose: handleCancel, anchorEl, children: [
+    /* @__PURE__ */ jsx117(
       Box_default2,
       {
         sx: {
@@ -21573,7 +21665,7 @@ var DateRangePickerPopover = ({
           minHeight: "300px",
           maxHeight: "580px"
         },
-        children: /* @__PURE__ */ jsx116(
+        children: /* @__PURE__ */ jsx117(
           DateIntervalRangeSelector_default,
           {
             state,
@@ -21590,11 +21682,11 @@ var DateRangePickerPopover = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx116(
+    /* @__PURE__ */ jsx117(
       PopoverActions_default,
       {
         sx: { padding: "16px 24px" },
-        leftContent: /* @__PURE__ */ jsx116(
+        leftContent: /* @__PURE__ */ jsx117(
           Button_default,
           {
             "data-testid": "date-interval-picker-cancel-button",
@@ -21604,7 +21696,7 @@ var DateRangePickerPopover = ({
             text: t("DATE_INTERVAL_PICKER.CANCEL")
           }
         ),
-        rightContent: /* @__PURE__ */ jsx116(
+        rightContent: /* @__PURE__ */ jsx117(
           Button_default,
           {
             "data-testid": "date-interval-picker-apply-button",
@@ -21621,7 +21713,7 @@ var DateRangePickerPopover = ({
 var DateRangePickerPopover_default = DateRangePickerPopover;
 
 // src/components/input/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx117, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs56 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = { year: 1900, month: 0, date: 1 };
 var DEFAULT_MAX_DATE = { year: 2100, month: 11, date: 31 };
 var DateRangePicker = ({
@@ -21634,8 +21726,8 @@ var DateRangePicker = ({
   minDate,
   maxDate
 }) => {
-  const { timezone } = React62.useContext(IntlContext);
-  const [anchorEl, setAnchorEl] = React62.useState(
+  const { timezone } = React63.useContext(IntlContext);
+  const [anchorEl, setAnchorEl] = React63.useState(
     null
   );
   const isSameDate = (date1, date2) => date1?.getTime() === date2?.getTime();
@@ -21648,12 +21740,12 @@ var DateRangePicker = ({
     }
     setAnchorEl(null);
   };
-  const internalMaxDate = maxDate ?? tz8(DEFAULT_MAX_DATE, timezone).toDate();
-  const internalMinDate = minDate ?? tz8(DEFAULT_MIN_DATE, timezone).toDate();
+  const internalMaxDate = maxDate ?? tz9(DEFAULT_MAX_DATE, timezone).toDate();
+  const internalMinDate = minDate ?? tz9(DEFAULT_MIN_DATE, timezone).toDate();
   const isEndDateVisible = endDate !== void 0 && !isSameDate(startDate, endDate);
-  return /* @__PURE__ */ jsxs55("div", { style: { display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx117(
-      DateIntervalPickerInputButton_default,
+  return /* @__PURE__ */ jsxs56("div", { style: { display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx118(
+      DateRangePickerButton_default,
       {
         isPopoverOpen: anchorEl !== null,
         startDate,
@@ -21663,7 +21755,7 @@ var DateRangePicker = ({
         onClick: setAnchorEl
       }
     ),
-    anchorEl !== null && /* @__PURE__ */ jsx117(
+    anchorEl !== null && /* @__PURE__ */ jsx118(
       DateRangePickerPopover_default,
       {
         anchorEl,
@@ -21681,97 +21773,6 @@ var DateRangePicker = ({
 };
 var DateRangePicker_default = DateRangePicker;
 
-// src/components/input/date-interval-picker/DateIntervalPicker.tsx
-import { jsx as jsx118, jsxs as jsxs56 } from "react/jsx-runtime";
-var DateIntervalPicker = ({
-  color: color2,
-  maxSelectableDays,
-  disabled,
-  minDate,
-  maxDate,
-  ...rest
-}) => {
-  const { timezone } = React63.useContext(IntlContext);
-  const [anchorEl, setAnchorEl] = React63.useState(
-    null
-  );
-  if (rest.variant === "input") {
-    return /* @__PURE__ */ jsx118(
-      DateRangePicker_default,
-      {
-        startDate: rest.startDate,
-        endDate: rest.endDate,
-        onChange: rest.onChange,
-        color: color2,
-        maxSelectableDays,
-        disabled,
-        minDate,
-        maxDate
-      }
-    );
-  }
-  const isSameDate = (date1, date2) => date1?.getTime() === date2?.getTime();
-  const handlePopoverCancel = () => {
-    setAnchorEl(null);
-  };
-  const handleComparisonChanges = (values2) => values2.comparisonInterval !== rest.comparisonInterval || !isSameDate(values2.comparisonStartDate, rest.comparisonStartDate) || !isSameDate(values2.comparisonEndDate, rest.comparisonEndDate);
-  const handleApply = (values2) => {
-    if (rest.onChange && (!isSameDate(values2.startDate, rest.startDate) || !isSameDate(values2.endDate, rest.endDate) || values2.interval !== rest.interval || handleComparisonChanges(values2))) {
-      rest.onChange(values2);
-    }
-    setAnchorEl(null);
-  };
-  const internalMaxDate = maxDate ?? tz9(timezone).toDate();
-  const internalMinDate = minDate ?? tz9(internalMaxDate, timezone).subtract(maxSelectableDays - 1, "days").toDate();
-  const displayEndDate = getDisplayEndDate(
-    rest.endDate,
-    timezone,
-    !!rest.showTime
-  );
-  const isEndDateVisible = !isSameDate(rest.startDate, displayEndDate);
-  return /* @__PURE__ */ jsxs56("div", { style: { display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx118(
-      DateIntervalPickerDefaultButton_default,
-      {
-        startDate: rest.startDate,
-        endDate: displayEndDate,
-        interval: rest.interval,
-        comparisonEndDate: rest.comparisonEndDate,
-        comparisonStartDate: rest.comparisonStartDate,
-        disabled,
-        showTime: rest.showTime,
-        isEndDateVisible,
-        onClick: setAnchorEl
-      }
-    ),
-    anchorEl !== null && /* @__PURE__ */ jsx118(
-      DateIntervalPickerPopover_default,
-      {
-        anchorEl,
-        startDate: rest.startDate,
-        endDate: rest.endDate,
-        color: color2 ?? primaryMain,
-        maxSelectableDays,
-        disabled,
-        minDate: internalMinDate,
-        maxDate: internalMaxDate,
-        interval: rest.interval,
-        comparisonColor: rest.comparisonColor ?? yellow,
-        intersectionColor: rest.intersectionColor ?? oliveGreen,
-        allowCompare: rest.allowCompare,
-        comparisonInterval: rest.comparisonInterval,
-        comparisonStartDate: rest.comparisonStartDate,
-        comparisonEndDate: rest.comparisonEndDate,
-        allowedIntervals: rest.allowedIntervals,
-        showTime: rest.showTime,
-        onCancel: handlePopoverCancel,
-        onApply: handleApply
-      }
-    )
-  ] });
-};
-var DateIntervalPicker_default = DateIntervalPicker;
-
 // src/components/input/SelectPopoverItem.tsx
 import { Grid as Grid2, Stack as Stack9 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
@@ -26417,11 +26418,14 @@ var PageSelector = ({
   const handleNext = React86.useCallback(() => {
     onPageChange(Math.min(totalPages, currentPage + 1));
   }, [currentPage, onPageChange, totalPages]);
-  const displayText = hideText ? "" : text || t("PAGE_SELECTOR.SHOWING_ITEMS", {
-    from: pageSize * (currentPage - 1) + 1,
-    to: Math.min(pageSize * currentPage, totalItems),
-    total: totalItems
-  });
+  const displayText = hideText ? "" : text || t(
+    "PAGE_SELECTOR.SHOWING_ITEMS",
+    totalItems === 0 ? { from: 0, to: 0, total: 0 } : {
+      from: pageSize * (currentPage - 1) + 1,
+      to: Math.min(pageSize * currentPage, totalItems),
+      total: totalItems
+    }
+  );
   return /* @__PURE__ */ jsxs76(
     Stack_default,
     {
@@ -28472,7 +28476,7 @@ import {
   Table as MuiTable
 } from "@mui/material";
 import { jsx as jsx172 } from "react/jsx-runtime";
-var Table = ({ children, sx, className }) => /* @__PURE__ */ jsx172(TableContainer, { className: "Slim-Horizontal-Scroll", children: /* @__PURE__ */ jsx172(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
+var Table = ({ children, sx, className, containerSx }) => /* @__PURE__ */ jsx172(TableContainer, { className: "Slim-Horizontal-Scroll", sx: containerSx, children: /* @__PURE__ */ jsx172(MuiTable, { sx: { backgroundColor: white, ...sx }, className, children }) });
 var Table_default = Table;
 
 // src/components/table/TableBody.tsx
@@ -29542,7 +29546,7 @@ react-is/cjs/react-is.development.js:
 
 @mui/styled-engine/esm/index.js:
   (**
-   * @mui/styled-engine v7.3.7
+   * @mui/styled-engine v7.3.10
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the
@@ -29551,7 +29555,7 @@ react-is/cjs/react-is.development.js:
 
 @mui/system/esm/index.js:
   (**
-   * @mui/system v7.3.7
+   * @mui/system v7.3.11
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the