asma-ui-core 3.23.0 → 3.25.0

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -4,7 +4,7 @@ import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
 import { StyledInputField as p } from "../input-field/StyledInputField.js";
 import { useState as u } from "react";
 import { jsx as o, jsxs as h } from "react/jsx-runtime";
-var g = ({ value: t, onClear: i, ...e }) => {
+var g = ({ value: t, onClear: n, ...e }) => {
   const [l, s] = u(!1), a = l || t;
   return /* @__PURE__ */ h("div", {
     className: "relative w-full",
@@ -18,37 +18,39 @@ var g = ({ value: t, onClear: i, ...e }) => {
       onBlur: () => {
         s(!1);
       },
-      InputProps: {
-        className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
-        sx: { "& input": {
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          overflow: "hidden"
-        } },
-        endAdornment: t ? /* @__PURE__ */ o("div", {
-          "data-testid": "styled-search-clear-icon",
-          className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
-          style: {
-            width: 24,
-            height: 24,
-            flexShrink: 0
-          },
-          onClick: (n) => {
-            n.preventDefault(), n.stopPropagation(), i?.();
-          },
-          children: /* @__PURE__ */ o(d, {
-            width: 20,
-            height: 20,
-            color: "var(--colors-delta-700)",
-            className: "pointer-events-none"
-          })
-        }) : null
+      slotProps: {
+        input: {
+          className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
+          sx: { "& input": {
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden"
+          } },
+          endAdornment: t ? /* @__PURE__ */ o("div", {
+            "data-testid": "styled-search-clear-icon",
+            className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
+            style: {
+              width: 24,
+              height: 24,
+              flexShrink: 0
+            },
+            onClick: (i) => {
+              i.preventDefault(), i.stopPropagation(), n?.();
+            },
+            children: /* @__PURE__ */ o(d, {
+              width: 20,
+              height: 20,
+              color: "var(--colors-delta-700)",
+              className: "pointer-events-none"
+            })
+          }) : null
+        },
+        inputLabel: { sx: {
+          transform: "translate(34px, 9px) scale(1)",
+          width: a ? void 0 : "calc(100% - 42px)",
+          "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
+        } }
       },
-      InputLabelProps: { sx: {
-        transform: "translate(34px, 9px) scale(1)",
-        width: a ? void 0 : "calc(100% - 42px)",
-        "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
-      } },
       ...e,
       sx: {
         ...e.fullWidth ? { width: "100%" } : { width: 160 },

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -1,146 +1,154 @@
 import { cn as v } from "../../../helpers/cn.js";
-import { ChevronDownIcon as re } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as le } from "../../icons/close-icon/CloseIcon.js";
-import { CheckIcon as oe } from "../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ae } from "../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as ne } from "../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as H } from "../checkbox/base-ui/StyledCheckbox.js";
-import B from "./StyledSelectAutocomplete.module.js";
-import D from "clsx";
-import { createElement as C, useLayoutEffect as se, useRef as ce, useState as z } from "react";
-import { Autocomplete as ie, Paper as de } from "@mui/material";
-import { jsx as l, jsxs as T } from "react/jsx-runtime";
-function Me({ dataTest: i, autoHeight: m, getOptionLabel: d, wrapperClassName: W, multiple: n, allowSelectAll: _, selectAllLabel: M, className: F, defaultValue: N, isOptionEqualToValue: p, ListboxProps: k, onChange: G, options: h, popupIcon: K, readOnly: f, renderOption: L, renderTags: O, sx: U, value: x, ...V }) {
-  const [A, E] = z("auto"), g = ce(null), o = n === !0 && _ === !0 && !f, w = x !== void 0, b = (e) => Array.isArray(e) ? e : [], [J, Q] = z(() => b(N));
-  se(() => {
-    if (!m) return;
-    const e = g.current?.getBoundingClientRect().height ?? 0, t = g.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
-    E(r > 0 ? r : "auto");
-  }, [m]);
-  const y = m ? {
-    style: { maxHeight: A === "auto" ? "auto" : `${A}px` },
-    ...k
-  } : k, s = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), X = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, I = {
+import { ChevronDownIcon as le } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as ae } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as se } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ne } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as ce } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as R } from "../checkbox/base-ui/StyledCheckbox.js";
+import H from "./StyledSelectAutocomplete.module.js";
+import B from "clsx";
+import { createElement as A, useLayoutEffect as ie, useRef as de, useState as D } from "react";
+import { Autocomplete as ue, Paper as me } from "@mui/material";
+import { jsx as o, jsxs as L } from "react/jsx-runtime";
+import { mergeSlotProps as pe } from "@mui/material/utils";
+function he(s, c) {
+  return pe(s, c);
+}
+function Ie({ dataTest: s, autoHeight: c, getOptionLabel: u, wrapperClassName: z, multiple: n, allowSelectAll: W, selectAllLabel: C, className: V, defaultValue: M, isOptionEqualToValue: p, onChange: _, options: h, popupIcon: F, readOnly: f, renderOption: G, renderValue: K, sx: O, value: x, ...T }) {
+  const { slots: U, slotProps: g, ...E } = T, [N, J] = D("auto"), b = de(null), l = n === !0 && W === !0 && !f, k = x !== void 0, S = (e) => Array.isArray(e) ? e : [], [Q, X] = D(() => S(M));
+  ie(() => {
+    if (!c) return;
+    const e = b.current?.getBoundingClientRect().height ?? 0, t = b.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
+    J(r > 0 ? r : "auto");
+  }, [c]);
+  const i = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), Y = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, Z = {
     padding: 0,
     "& .MuiAutocomplete-option": { paddingLeft: n ? "12px !important" : "6px !important" }
-  }, Y = y?.sx ? [I, y.sx] : I, $ = o ? b(w ? x : J) : [], c = o ? h.filter((e) => !X(e)) : h, Z = (e, t) => {
+  }, w = c ? { maxHeight: N === "auto" ? "auto" : `${N}px` } : void 0, I = l ? S(k ? x : Q) : [], d = l ? h.filter((e) => !Y(e)) : h, q = (e, t) => {
     const r = typeof e == "object" && e !== null;
     return r !== (typeof t == "object" && t !== null) || !r && typeof e != typeof t ? !1 : p ? p(e, t) : e === t;
-  }, j = o ? c.filter((e) => $.some((t) => Z(e, t))).length : 0, R = o && c.length > 0 && j === c.length, q = o && j > 0 && !R, P = (e, t, r, a) => {
-    o && !w && Q(b(t)), G?.(e, t, r, a);
-  }, ee = (e, t) => {
-    P(e, t ? [...c] : [], t ? "selectOption" : "clear", void 0);
-  }, te = (e, t) => e.map((r, a) => {
-    const u = t({ index: a }), S = d?.(r) ?? s(r);
-    return /* @__PURE__ */ C(ne, {
-      ...u,
-      key: `selected-chip-${S}-${a}`,
-      dataTest: `selected-chip-${S}`,
-      label: S,
+  }, P = l ? d.filter((e) => I.some((t) => q(e, t))).length : 0, $ = l && d.length > 0 && P === d.length, ee = l && P > 0 && !$, j = (e, t, r, a) => {
+    l && !k && X(S(t)), _?.(e, t, r, a);
+  }, te = (e, t) => {
+    j(e, t ? [...d] : [], t ? "selectOption" : "clear", void 0);
+  }, re = (e, t) => Array.isArray(e) ? e.map((r, a) => {
+    const m = t({ index: a }), y = u?.(r) ?? i(r);
+    return /* @__PURE__ */ A(ce, {
+      ...m,
+      key: `selected-chip-${y}-${a}`,
+      dataTest: `selected-chip-${y}`,
+      label: y,
       variant: "outlined"
     });
-  });
-  return /* @__PURE__ */ l("div", {
-    className: v(B.styledSelectAutocompleteWrapper, W),
-    ref: g,
-    children: /* @__PURE__ */ l(ie, {
-      ...V,
+  }) : null, oe = {
+    sx: Z,
+    ...w ? { style: w } : {}
+  };
+  return /* @__PURE__ */ o("div", {
+    className: v(H.styledSelectAutocompleteWrapper, z),
+    ref: b,
+    children: /* @__PURE__ */ o(ue, {
+      ...E,
       multiple: n,
-      defaultValue: o ? void 0 : N,
-      getOptionLabel: d,
+      defaultValue: l ? void 0 : M,
+      getOptionLabel: u,
       isOptionEqualToValue: p,
-      ListboxProps: {
-        ...y,
-        sx: Y
-      },
-      className: D("!text-sm", F),
-      onChange: P,
+      className: B("!text-sm", V),
+      onChange: j,
       options: h,
-      renderTags: O ?? (n ? te : void 0),
-      popupIcon: f ? null : K ?? n ? /* @__PURE__ */ l(ae, {
+      renderValue: K ?? (n ? re : void 0),
+      popupIcon: f ? null : F ?? n ? /* @__PURE__ */ o(ne, {
         width: 24,
         height: 24
-      }) : /* @__PURE__ */ l(re, {
+      }) : /* @__PURE__ */ o(le, {
         width: 24,
         height: 24,
-        className: D(B["select-custom-icon"])
+        className: B(H["select-custom-icon"])
       }),
       readOnly: f,
-      "data-testid": i,
-      value: o ? $ : x,
-      PaperComponent: ({ children: e }) => /* @__PURE__ */ T(de, {
-        "data-testid": `paper-${i}`,
-        sx: {
-          padding: "0 !important",
-          marginTop: "0px !important",
-          "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
-          "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
-          "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" },
-          "&:has([data-select-all-header]:hover) .MuiAutocomplete-option.Mui-focused": { background: "transparent !important" },
-          "&:has([data-select-all-header]:hover) li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
-        },
-        children: [o && c.length > 0 && /* @__PURE__ */ T("div", {
-          "data-select-all-header": !0,
-          className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
-          onMouseDown: (t) => t.preventDefault(),
-          role: "presentation",
-          children: [/* @__PURE__ */ l(H, {
-            size: "small",
-            dataTest: `${i}-select-all`,
-            checked: R,
-            indeterminate: q,
-            hideWrapper: !0,
-            onChange: ee,
-            "aria-label": M ?? "Select all"
-          }), /* @__PURE__ */ l("span", {
-            className: "truncate text-[10px] font-semibold uppercase text-delta-600",
-            children: M ?? "Select all"
-          })]
-        }), e]
-      }),
-      renderOption: L ?? ((e, t, { selected: r }) => {
-        const a = e, u = e.id ?? s(t);
-        return n ? /* @__PURE__ */ C("li", {
+      "data-testid": s,
+      value: l ? I : x,
+      slots: {
+        ...U,
+        paper: ({ children: e }) => /* @__PURE__ */ L(me, {
+          "data-testid": `paper-${s}`,
+          sx: {
+            padding: "0 !important",
+            marginTop: "0px !important",
+            "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
+            "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
+            "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" },
+            "&:has([data-select-all-header]:hover) .MuiAutocomplete-option.Mui-focused": { background: "transparent !important" },
+            "&:has([data-select-all-header]:hover) li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
+          },
+          children: [l && d.length > 0 && /* @__PURE__ */ L("div", {
+            "data-select-all-header": !0,
+            className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
+            onMouseDown: (t) => t.preventDefault(),
+            role: "presentation",
+            children: [/* @__PURE__ */ o(R, {
+              size: "small",
+              dataTest: `${s}-select-all`,
+              checked: $,
+              indeterminate: ee,
+              hideWrapper: !0,
+              onChange: te,
+              "aria-label": C ?? "Select all"
+            }), /* @__PURE__ */ o("span", {
+              className: "truncate text-[10px] font-semibold uppercase text-delta-600",
+              children: C ?? "Select all"
+            })]
+          }), e]
+        })
+      },
+      renderOption: G ?? ((e, t, { selected: r }) => {
+        const a = e, m = e.id ?? i(t);
+        return n ? /* @__PURE__ */ A("li", {
           ...a,
-          key: u,
+          key: m,
           className: v(e.className, "flex items-center gap-x-[10px] border-0 border-b border-solid border-delta-200")
-        }, /* @__PURE__ */ l(H, {
-          dataTest: `${i}-${s(t)}-checkbox`,
+        }, /* @__PURE__ */ o(R, {
+          dataTest: `${s}-${i(t)}-checkbox`,
           checked: r,
           size: "small",
           hideWrapper: !0
-        }), /* @__PURE__ */ l("span", {
+        }), /* @__PURE__ */ o("span", {
           className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: d?.(t) ?? s(t)
-        })) : /* @__PURE__ */ C("li", {
+          children: u?.(t) ?? i(t)
+        })) : /* @__PURE__ */ A("li", {
           ...a,
-          key: u,
+          key: m,
           className: v(e.className, "flex items-center gap-x-1")
-        }, /* @__PURE__ */ l("span", {
+        }, /* @__PURE__ */ o("span", {
           className: "w-5",
-          children: r && /* @__PURE__ */ l(oe, {
+          children: r && /* @__PURE__ */ o(se, {
             width: 20,
             height: 20,
             style: { color: "var(--colors-gama-500)" }
           })
-        }), /* @__PURE__ */ l("span", {
+        }), /* @__PURE__ */ o("span", {
           className: "flex-1 truncate py-2 text-sm text-delta-700",
-          children: d?.(t) ?? s(t)
+          children: u?.(t) ?? i(t)
         }));
       }),
       sx: {
-        ...U,
+        ...O,
         "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
         "& .select-custom-icon": { marginTop: "-0.5px !important" },
         "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
       },
-      slotProps: { clearIndicator: {
-        disableRipple: !0,
-        disableFocusRipple: !0
-      } },
-      clearIcon: /* @__PURE__ */ l("span", {
+      slotProps: {
+        ...g,
+        clearIndicator: {
+          disableRipple: !0,
+          disableFocusRipple: !0,
+          ...g?.clearIndicator ?? {}
+        },
+        listbox: he(g?.listbox, oe)
+      },
+      clearIcon: /* @__PURE__ */ o("span", {
         className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
-        children: /* @__PURE__ */ l(le, {
+        children: /* @__PURE__ */ o(ae, {
           width: 20,
           height: 20,
           className: "text-delta-700"
@@ -150,5 +158,5 @@ function Me({ dataTest: i, autoHeight: m, getOptionLabel: d, wrapperClassName: W
   });
 }
 export {
-  Me as StyledSelectAutocomplete
+  Ie as StyledSelectAutocomplete
 };

package/dist/components/navigation/tabs/StyledTabs.js

@@ -46,16 +46,22 @@ var p = {
     paddingTop: "8px",
     paddingBottom: "8px"
   }
-}, f = ({ className: r, size: t = "default", sx: o, ...i }) => {
-  const a = [p];
-  return t === "small" && a.push(c), n(o) ? a.push(...o) : d(o) && a.push(o), /* @__PURE__ */ l(e, {
-    ...i,
+}, f = ({ className: r, size: i = "default", sx: o, ...a }) => {
+  const t = [p];
+  return i === "small" && t.push(c), n(o) ? t.push(...o) : d(o) && t.push(o), /* @__PURE__ */ l(e, {
+    ...a,
     className: s("relative rounded-t-lg bg-white px-4", r),
-    TabIndicatorProps: { style: {
-      background: "var(--colors-gama-500)",
-      color: "var(--colors-gama-500)"
-    } },
-    sx: a
+    slotProps: {
+      ...a.slotProps,
+      indicator: {
+        style: {
+          background: "var(--colors-gama-500)",
+          color: "var(--colors-gama-500)"
+        },
+        ...a.slotProps?.indicator ?? {}
+      }
+    },
+    sx: t
   });
 };
 export {

package/dist/components/utils/accordion/base-ui/StyledAccordion.js

@@ -2,7 +2,7 @@ import { cn as u } from "../../../../helpers/cn.js";
 import s from "./StyledAccordion.module.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
-import { Accordion as e } from "@base-ui/react";
+import { Accordion as e } from "@base-ui/react/accordion";
 var g = ({ className: c, children: i, expanded: r, defaultExpanded: l, onChange: m, ...n }) => {
   const o = "item", d = {
     ...n,

package/dist/datetime/components/date-picker/components/BaseDatePickerInput.js

@@ -9,18 +9,18 @@ import { useEffect as v, useState as X } from "react";
 import { jsx as o, jsxs as D } from "react/jsx-runtime";
 import { isValid as Z, parse as _ } from "date-fns";
 var ce = (k) => {
-  const { onClick: N, inputClassName: P, dateFormat: l, selected: t, error: V, helperText: w, errorText: F, onInputChange: g, hideCalendar: B, locale: r, disabledDays: i, label: S, title: y, readOnly: e, disallowPast: s, disallowFuture: d, validateOnCalendarClose: C, onValidatedOnce: b, hideDefaultHelperText: Y, required: n, minDate: c, ...f } = k, { validationError: E, handleValidation: p, errHelperText: I, clearValidation: T } = Q(), { maskRef: O } = L(), [a, H] = X(t ? x(t, l) : ""), W = r?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", j = Y ? void 0 : W, m = !!(E || V), R = m ? F ?? I : w ?? j;
+  const { onClick: N, inputClassName: V, dateFormat: r, selected: t, error: w, helperText: P, errorText: B, onInputChange: g, hideCalendar: F, locale: l, disabledDays: i, label: I, title: y, readOnly: e, disallowPast: s, disallowFuture: d, validateOnCalendarClose: C, onValidatedOnce: b, hideDefaultHelperText: S, required: n, minDate: c, ...f } = k, { validationError: Y, handleValidation: p, errHelperText: E, clearValidation: T } = Q(), { maskRef: O } = L(), [a, H] = X(t ? x(t, r) : ""), W = l?.code?.startsWith("nb") ? "DD/MM/ÅÅÅÅ" : "DD/MM/YYYY", j = S ? void 0 : W, m = !!(Y || w), R = m ? B ?? E : P ?? j;
   v(() => {
-    H(t ? x(t, l) : "");
-  }, [t, l]), v(() => {
+    H(t ? x(t, r) : "");
+  }, [t, r]), v(() => {
     if (!t) {
       T();
       return;
     }
     p({
-      value: x(t, l),
+      value: x(t, r),
       disabledDays: i,
-      localeCode: r?.code,
+      localeCode: l?.code,
       disallowPast: s,
       disallowFuture: d,
       required: n,
@@ -28,9 +28,9 @@ var ce = (k) => {
     });
   }, [
     t,
-    l,
+    r,
     i,
-    r?.code,
+    l?.code,
     s,
     d,
     n,
@@ -46,7 +46,7 @@ var ce = (k) => {
     C && (p({
       value: a,
       disabledDays: i,
-      localeCode: r?.code,
+      localeCode: l?.code,
       disallowPast: s,
       disallowFuture: d,
       required: n,
@@ -56,7 +56,7 @@ var ce = (k) => {
     C,
     a,
     i,
-    r?.code,
+    l?.code,
     s,
     d,
     n,
@@ -68,7 +68,7 @@ var ce = (k) => {
     if (p({
       value: a,
       disabledDays: i,
-      localeCode: r?.code,
+      localeCode: l?.code,
       disallowPast: s,
       disallowFuture: d,
       required: n,
@@ -95,7 +95,7 @@ var ce = (k) => {
           className: "relative",
           children: /* @__PURE__ */ o(G, {
             ...f,
-            label: S,
+            label: I,
             readOnly: e,
             "data-testid": f.dataTest,
             autoComplete: "off",
@@ -103,16 +103,18 @@ var ce = (k) => {
             placeholder: !e && !q ? "  /  /    " : void 0,
             size: "small",
             value: e ? a.replaceAll("/", ".") : a,
-            className: P,
+            className: V,
             style: { width: h },
             error: m,
             onBlur: e ? void 0 : A,
             helperText: null,
-            FormHelperTextProps: { sx: { m: 0 } },
-            inputProps: { ...e ? {} : {
-              inputMode: "numeric",
-              style: { fontFamily: "monospace" }
-            } },
+            slotProps: {
+              formHelperText: { sx: { m: 0 } },
+              htmlInput: { ...e ? {} : {
+                inputMode: "numeric",
+                style: { fontFamily: "monospace" }
+              } }
+            },
             onChange: z
           })
         }), !e && /* @__PURE__ */ o("div", {
@@ -127,7 +129,7 @@ var ce = (k) => {
             hasError: m
           })
         })]
-      }), !B && !e && /* @__PURE__ */ o(K, {
+      }), !F && !e && /* @__PURE__ */ o(K, {
         onClick: N,
         disabled: !!f.disabled
       })]

package/dist/datetime/components/time-picker/TimePickerInput.js

@@ -1,8 +1,8 @@
 import { StyledInputField as w } from "../../shared-components/StyledInputField.js";
 import { HelperText as y } from "./components/HelperText.js";
 import { ClockOutlineIcon as E } from "../../shared-components/ClockOutlineIcon.js";
-import { useEffect as I, useRef as R } from "react";
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useEffect as R, useRef as v } from "react";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import { useMask as M } from "@react-input/mask";
 import "material-ui-popup-state/hooks";
 var S = (c) => {
@@ -10,10 +10,10 @@ var S = (c) => {
     mask: "xx:xx",
     replacement: { x: /\d/ },
     showMask: !1
-  }), d = !s || !p || !!u, a = R(null);
-  return I(() => {
+  }), d = !s || !p || !!u, a = v(null);
+  return R(() => {
     a.current && e.setAnchorEl(a.current);
-  }, [e]), /* @__PURE__ */ v("div", {
+  }, [e]), /* @__PURE__ */ I("div", {
     style: { height: t ? "40px" : "75px" },
     children: [m && /* @__PURE__ */ r("div", {
       className: "pb-1 font-roboto font-semibold text-delta-800",
@@ -35,7 +35,7 @@ var S = (c) => {
         helperText: x
       }),
       onChange: C,
-      InputProps: {
+      slotProps: { input: {
         ref: a,
         onMouseDown: (o) => {
           !i && !t && e.open(o);
@@ -47,7 +47,7 @@ var S = (c) => {
             o.stopPropagation(), !i && !t && e.open(o);
           }
         })
-      },
+      } },
       value: b,
       sx: {
         maxWidth: l ?? 130,

package/dist/datetime/shared-components/StyledTooltip.js

@@ -1,36 +1,32 @@
-import { Fade as e, Tooltip as i } from "@mui/material";
-import { jsx as n } from "react/jsx-runtime";
-var x = (p) => {
-  const { componentsProps: t, ...r } = p, o = t?.tooltip;
-  return /* @__PURE__ */ n(i, {
-    TransitionComponent: e,
-    TransitionProps: { timeout: 300 },
+import { Fade as i, Tooltip as e } from "@mui/material";
+import { jsx as l } from "react/jsx-runtime";
+import { mergeSlotProps as t } from "@mui/material/utils";
+var a = {
+  borderRadius: "3px",
+  "& .MuiTooltip-arrow": { color: "#363E4A" },
+  color: "white",
+  boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
+  display: "flex",
+  padding: "4px 8px",
+  alignItems: "center",
+  fontSize: "12px",
+  lineHeight: "16px",
+  letterSpacing: "0.24px",
+  bgcolor: "#363E4A",
+  wordBreak: "break-word"
+}, d = (r) => {
+  const { slotProps: o, ...p } = r;
+  return /* @__PURE__ */ l(e, {
     placement: "top",
-    componentsProps: {
-      ...t,
-      tooltip: {
-        ...o ?? {},
-        style: { ...o?.style ?? {} },
-        sx: {
-          borderRadius: "3px",
-          "& .MuiTooltip-arrow": { color: "#363E4A" },
-          color: "white",
-          boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
-          display: "flex",
-          padding: "4px 8px",
-          alignItems: "center",
-          fontSize: "12px",
-          lineHeight: "16px",
-          letterSpacing: "0.24px",
-          bgcolor: "#363E4A",
-          wordBreak: "break-word",
-          ...o?.sx
-        }
-      }
-    },
-    ...r
+    ...p,
+    slots: { transition: i },
+    slotProps: {
+      ...o,
+      transition: t(o?.transition, { timeout: 300 }),
+      tooltip: t(o?.tooltip, { sx: a })
+    }
   });
 };
 export {
-  x as StyledTooltip
+  d as StyledTooltip
 };