asma-ui-core 3.25.0 → 3.26.0

package/dist/components/custom/module/header-layout/estimateToolbarLayout.js

@@ -0,0 +1,189 @@
+import { resolveToolbarActionWidth as U } from "./planToolbarActions.js";
+var l = 8, y = 12, w = 168, C = 44, G = 92, H = 44, Y = 148, D = 44, V = 168, J = 11, K = 96, B = 360, j = 12;
+function m(t) {
+  return {
+    leading: t?.leadingUtilityWidthPx ?? C,
+    search: t?.searchWidthPx ?? w,
+    selectionIndicator: t?.selectionIndicatorWidthPx ?? V,
+    filter: (i) => i ? t?.filterIconWidthPx ?? H : t?.filterLabelWidthPx ?? G,
+    trailing: (i) => i ? t?.trailingIconWidthPx ?? D : t?.trailingLabelWidthPx ?? Y
+  };
+}
+function q(t) {
+  return t ? typeof t == "string" ? t.length : j : 0;
+}
+function z(t) {
+  const i = q(t), e = i > 0 ? i * J + 24 : 0;
+  return Math.min(B, Math.max(K, e));
+}
+function Q(t, i) {
+  return i != null && i > 0 ? Math.min(B, i) : z(t);
+}
+function v(t, i, e) {
+  const n = t.filter((r) => !r.hidden);
+  return n.length ? n.reduce((r, c) => r + U(c, i, e) + l, 0) - l : 0;
+}
+function E(t, i, e) {
+  const n = t.filter((s) => !s.hidden).sort((s, u) => (u.priority ?? 0) - (s.priority ?? 0));
+  if (!n.length) return 0;
+  const r = n.slice(0, i), c = v(r, !0, e);
+  return n.length === r.length ? c : c + (r.length ? l : 0) + 40;
+}
+function tt(t, i, e, n = 3) {
+  return t > 0 ? t : E(i, n, e);
+}
+function S(t) {
+  const { hasLeadingUtility: i, hasFilter: e, hasSearch: n, hasTrailingUtility: r, showPageActions: c, showBulkActions: s, filterIconOnly: u, trailingIconOnly: h, pageActionsWidthPx: I, bulkActionsWidthPx: O, searchBeforeFilter: W = !1, measured: g } = t, d = m(g);
+  let o = 0;
+  c && i && (o += d.leading + l);
+  const f = e ? d.filter(u) + l : 0, p = n ? d.search + l : 0;
+  return W ? o += p + f : o += f + p, c && (I > 0 && (o += I + l), r && (o += d.trailing(h) + l)), s && O > 0 && (o += O + l), Math.max(0, o - l);
+}
+function it(t) {
+  const { containerWidth: i, isMobile: e, isSelectionMode: n, compactBreakpointPx: r, reserveBulkActionsWidthPx: c, title: s, hasLeadingUtility: u, hasFilter: h, hasSearch: I, hasTrailingUtility: O, pageActions: W, bulkActions: g, maxVisibleBulkActions: d = 2, measured: o } = t, f = i > 0 ? i : Number.POSITIVE_INFINITY, p = !n, F = n, M = n ? 0 : c, b = m(o), _ = Q(s, o?.titleWidthPx), P = v(W, !0, o?.actionWidthPx), L = v(W, !1, o?.actionWidthPx), k = E(g, d, o?.actionWidthPx), A = (a) => S({
+    hasLeadingUtility: u,
+    hasFilter: h,
+    hasSearch: I,
+    hasTrailingUtility: O,
+    showPageActions: p,
+    showBulkActions: F,
+    bulkActionsWidthPx: 0,
+    measured: o,
+    ...a
+  });
+  if (e || f < r) {
+    const a = (x) => f >= A({
+      ...x,
+      searchBeforeFilter: !0
+    }), T = (x) => n ? !0 : x;
+    return a({
+      filterIconOnly: !1,
+      trailingIconOnly: !1,
+      pageActionsWidthPx: P
+    }) ? {
+      mode: "compact",
+      filterIconOnly: !1,
+      trailingIconOnly: T(!1)
+    } : a({
+      filterIconOnly: !1,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: P
+    }) ? {
+      mode: "compact",
+      filterIconOnly: !1,
+      trailingIconOnly: !0
+    } : a({
+      filterIconOnly: !1,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: L
+    }) ? {
+      mode: "compact",
+      filterIconOnly: !1,
+      trailingIconOnly: !0
+    } : {
+      mode: "compact",
+      filterIconOnly: !0,
+      trailingIconOnly: !0
+    };
+  }
+  if (n) {
+    const a = (R) => S({
+      hasLeadingUtility: !1,
+      hasFilter: h,
+      hasSearch: I,
+      hasTrailingUtility: !1,
+      showPageActions: !1,
+      showBulkActions: !1,
+      filterIconOnly: R,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: 0,
+      bulkActionsWidthPx: 0,
+      measured: o
+    });
+    if (f >= _ + b.selectionIndicator + A({
+      filterIconOnly: !1,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: 0,
+      bulkActionsWidthPx: k
+    }) + y) return {
+      mode: "inline",
+      filterIconOnly: !1,
+      trailingIconOnly: !0
+    };
+    const T = _ + a(!1) + y, x = b.selectionIndicator + k + y;
+    return f >= Math.max(T, x) ? {
+      mode: "selection-split",
+      filterIconOnly: f < _ + a(!0) + y,
+      trailingIconOnly: !0
+    } : {
+      mode: "compact",
+      filterIconOnly: !0,
+      trailingIconOnly: !0
+    };
+  }
+  const N = (a) => f >= _ + A(a) + M + y, X = [
+    {
+      filterIconOnly: !1,
+      trailingIconOnly: !1,
+      pageActionsWidthPx: P
+    },
+    {
+      filterIconOnly: !1,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: P
+    },
+    {
+      filterIconOnly: !1,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: L
+    },
+    {
+      filterIconOnly: !0,
+      trailingIconOnly: !0,
+      pageActionsWidthPx: L
+    }
+  ];
+  for (const a of X) if (N(a)) return {
+    mode: "inline",
+    filterIconOnly: a.filterIconOnly,
+    trailingIconOnly: a.trailingIconOnly
+  };
+  return f >= A({
+    filterIconOnly: !1,
+    trailingIconOnly: !1,
+    pageActionsWidthPx: P,
+    searchBeforeFilter: !0
+  }) ? {
+    mode: "stacked",
+    filterIconOnly: !1,
+    trailingIconOnly: !1
+  } : f >= A({
+    filterIconOnly: !0,
+    trailingIconOnly: !0,
+    pageActionsWidthPx: L,
+    searchBeforeFilter: !0
+  }) ? {
+    mode: "stacked",
+    filterIconOnly: !0,
+    trailingIconOnly: !0
+  } : {
+    mode: "compact",
+    filterIconOnly: !0,
+    trailingIconOnly: !0
+  };
+}
+function nt(t) {
+  const { layoutMode: i, containerWidth: e, titleWidth: n, filterIconOnly: r, trailingIconOnly: c, hasFilter: s, hasSearch: u, hasLeadingUtility: h, hasTrailingUtility: I, reserveBulkActionsWidthPx: O, measured: W } = t, g = m(W), d = (h ? g.leading + l : 0) + (s ? g.filter(r) + l : 0) + (u ? g.search + l : 0) + (I ? g.trailing(c) + l : 0);
+  return i === "stacked" || i === "compact" ? Math.max(80, e - d) : Math.max(80, e - n - d - y - O);
+}
+function et(t) {
+  const { layoutMode: i, containerWidth: e, titleWidth: n, filterIconOnly: r, hasFilter: c, hasSearch: s, measured: u } = t, h = m(u), I = (c ? h.filter(r) + l : 0) + (s ? h.search + l : 0);
+  return i === "inline" ? Math.max(120, e - n - h.selectionIndicator - I - y * 2) : Math.max(120, e - h.selectionIndicator - y);
+}
+export {
+  et as resolveBulkActionsAvailableWidth,
+  nt as resolvePageActionsAvailableWidth,
+  tt as resolveReserveBulkActionsWidthPx,
+  Q as resolveTitleAreaWidth,
+  it as resolveToolbarLayout
+};

package/dist/components/custom/module/header-layout/planToolbarActions.js

@@ -0,0 +1,130 @@
+var y = 8, C = 40, I = 40, P = 42, W = 22, m = 7, _ = 26, b = 0.55;
+function T(t, e) {
+  if (t.estimatedWidthPx) return e ? t.estimatedWidthPx : Math.max(I, Math.floor(t.estimatedWidthPx * b));
+  const n = t.icon ? W : 0, i = e ? Math.max(_, t.label.length * m) : 0;
+  return P + n + i;
+}
+function A(t, e, n) {
+  return n?.(t, e) ?? T(t, e);
+}
+function p(t) {
+  return t.length ? t.reduce((e, n) => e + n.width, 0) + (t.length - 1) * 8 : 0;
+}
+function g(t, e, n) {
+  const i = p(t);
+  return e ? i + (t.length ? 8 : 0) + n : i;
+}
+function w(t) {
+  return t.filter((e) => !e.hidden).sort((e, n) => (n.priority ?? 0) - (e.priority ?? 0));
+}
+function x(t) {
+  return [...t].sort((e, n) => (n.priority ?? 0) - (e.priority ?? 0));
+}
+function N(t, e, n) {
+  const i = [...t];
+  for (let s = i.length - 1; s >= 0 && p(i) > e; s -= 1) {
+    const r = i[s];
+    !r || !r.showLabel || r.action.canHideLabel === !1 || (i[s] = {
+      ...r,
+      showLabel: !1,
+      width: A(r.action, !1, n)
+    });
+  }
+  return i;
+}
+function O(t) {
+  const { planned: e, availableWidth: n, preOverflow: i, moreButtonWidthPx: s, ignoreKeepVisible: r = !1 } = t, o = [...e], l = [], h = () => {
+    let d = -1, c = Number.POSITIVE_INFINITY;
+    for (let u = o.length - 1; u >= 0; u -= 1) {
+      const v = o[u];
+      if (!v || !r && (v.action.keepVisible || v.action.canOverflow === !1)) continue;
+      const f = v.action.priority ?? 0;
+      f < c && (c = f, d = u);
+    }
+    return d;
+  }, a = () => i.length > 0 || l.length > 0;
+  for (; o.length && g(o, a(), s) > n; ) {
+    const d = h();
+    if (d < 0) break;
+    const [c] = o.splice(d, 1);
+    c && l.unshift(c.action);
+  }
+  return {
+    inlineActions: o,
+    overflowActions: x([...i, ...l])
+  };
+}
+function M(t) {
+  const { inlineActions: e, overflowActions: n, availableWidth: i, resolveActionWidth: s, allowIconOnlyPromotion: r = !0 } = t, o = n.length === 1 ? n[0] : void 0;
+  if (o) {
+    const l = (a) => ({
+      inlineActions: [...e, {
+        action: o,
+        showLabel: a,
+        width: A(o, a, s)
+      }],
+      overflowActions: [],
+      showMoreMenu: !1
+    }), h = (a) => p(l(a).inlineActions) <= i;
+    if (h(!0)) return l(!0);
+    if (r && o.canHideLabel !== !1 && h(!1)) return l(!1);
+  }
+  return {
+    inlineActions: e,
+    overflowActions: n,
+    showMoreMenu: n.length >= 1
+  };
+}
+function B(t) {
+  const { actions: e, availableWidth: n, maxInlineActions: i, collapseLabels: s = !0, resolveActionWidth: r, moreButtonWidthPx: o = 40 } = t, l = w(e), h = i ? l.slice(0, i) : l, a = i ? l.slice(i) : [], d = new Set(h.map((f) => f.id));
+  let c = e.filter((f) => !f.hidden && d.has(f.id)).map((f) => ({
+    action: f,
+    showLabel: !0,
+    width: A(f, !0, r)
+  }));
+  s && (c = N(c, n, r));
+  const { inlineActions: u, overflowActions: v } = O({
+    planned: c,
+    availableWidth: n,
+    preOverflow: a,
+    moreButtonWidthPx: o
+  });
+  return M({
+    inlineActions: u,
+    overflowActions: v,
+    availableWidth: n,
+    resolveActionWidth: r
+  });
+}
+function X(t) {
+  const { actions: e, availableWidth: n, maxVisibleBulkActions: i = 3, resolveActionWidth: s, moreButtonWidthPx: r = 40 } = t, o = w(e);
+  if (o.length === 0) return {
+    inlineActions: [],
+    overflowActions: [],
+    showMoreMenu: !1
+  };
+  const l = o.slice(0, i), h = o.slice(i), { inlineActions: a, overflowActions: d } = O({
+    planned: l.map((c) => ({
+      action: c,
+      showLabel: !0,
+      width: A(c, !0, s)
+    })),
+    availableWidth: n,
+    preOverflow: h,
+    moreButtonWidthPx: r,
+    ignoreKeepVisible: !0
+  });
+  return {
+    inlineActions: a,
+    overflowActions: d,
+    showMoreMenu: d.length >= 1
+  };
+}
+export {
+  y as ACTION_GAP_PX,
+  C as MORE_BUTTON_PX,
+  T as estimateToolbarActionWidth,
+  X as planBulkToolbarActions,
+  B as planToolbarActions,
+  A as resolveToolbarActionWidth
+};

package/dist/components/custom/module/header-layout/useTranslations.js

@@ -0,0 +1,23 @@
+import { useMemo as t } from "react";
+var r = {
+  en: {
+    more: "More",
+    clearSelection: "Clear selection",
+    selected: "selected"
+  },
+  no: {
+    more: "Mer",
+    clearSelection: "Fjern valg",
+    selected: "valgt"
+  }
+};
+function l(e = "en") {
+  return t(() => r[e] ?? r.en, [e]);
+}
+function a(e, n) {
+  return `${e} ${n.selected}`;
+}
+export {
+  a as formatSelectionLabel,
+  l as useToolbarTranslations
+};

package/dist/components/custom/widget/widget-header/StyledWidgetHeader.js

@@ -1,15 +1,18 @@
-import { cn as m } from "../../../../helpers/cn.js";
-import { StyledWidgetTitle as l } from "../widget-title/StyledWidgetTitle.js";
-import o from "./StyledWidgetHeader.module.js";
+import { cn as l } from "../../../../helpers/cn.js";
+import { StyledWidgetTitle as o } from "../widget-title/StyledWidgetTitle.js";
+import a from "./StyledWidgetHeader.module.js";
 import "react";
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-var h = ({ actions: r, title: d, containerClassname: t, actionsClassname: i }) => /* @__PURE__ */ a("div", {
-  className: m(o["styled-widget-header"], t),
-  children: [/* @__PURE__ */ e(l, { children: d }), /* @__PURE__ */ e("div", {
-    className: i,
-    children: r
-  })]
-});
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+var g = ({ actions: d, title: e, containerClassname: i, actionsClassname: m }) => {
+  const r = e != null && e !== "";
+  return /* @__PURE__ */ s("div", {
+    className: l(a["styled-widget-header"], i, !r && d && "!block"),
+    children: [r && /* @__PURE__ */ t(o, { children: e }), /* @__PURE__ */ t("div", {
+      className: l(m, !r && "w-full"),
+      children: d
+    })]
+  });
+};
 export {
-  h as StyledWidgetHeader
+  g as StyledWidgetHeader
 };

package/dist/components/utils/filter-menu/StyledFilterButton.js

@@ -1,21 +1,25 @@
-import { FilterIcon as m } from "../../icons/filter-icon/FilterIcon.js";
-import { StyledButton as n } from "../../inputs/button/StyledButton.js";
-import d from "clsx";
+import { FilterIcon as d } from "../../icons/filter-icon/FilterIcon.js";
+import { StyledButton as m } from "../../inputs/button/StyledButton.js";
+import { useDynamicToolbarLayout as c } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
+import s from "clsx";
 import { Fragment as g, jsx as r, jsxs as h } from "react/jsx-runtime";
-var u = ({ filterIsActive: e, label: l, hideLabel: o = !1, size: t = "large", variant: i = "outlined", ...a }) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ h("div", {
-  className: "relative h-fit w-fit",
-  children: [/* @__PURE__ */ r(n, {
-    ...a,
-    type: "button",
-    startIcon: /* @__PURE__ */ r(m, {
-      width: t === "large" ? 24 : 20,
-      height: t === "large" ? 24 : 20
-    }),
-    variant: i,
-    size: t,
-    children: !o && (l ?? "Filter")
-  }), e && /* @__PURE__ */ r("div", { className: d("absolute h-2 w-2 rounded-full bg-gama-400", t === "large" ? "right-2 top-2" : "right-1 top-1") })]
-}) });
+var x = ({ filterIsActive: e, label: o, hideLabel: l, size: t = "large", variant: i = "outlined", ...a }) => {
+  const { filterIconOnly: n } = c();
+  return /* @__PURE__ */ r(g, { children: /* @__PURE__ */ h("div", {
+    className: "relative h-fit w-fit",
+    children: [/* @__PURE__ */ r(m, {
+      ...a,
+      type: "button",
+      startIcon: /* @__PURE__ */ r(d, {
+        width: t === "large" ? 24 : 20,
+        height: t === "large" ? 24 : 20
+      }),
+      variant: i,
+      size: t,
+      children: !(l ?? n) && (o ?? "Filter")
+    }), e && /* @__PURE__ */ r("div", { className: s("absolute h-2 w-2 rounded-full bg-gama-400", t === "large" ? "right-2 top-2" : "right-1 top-1") })]
+  }) });
+};
 export {
-  u as StyledFilterButton
+  x as StyledFilterButton
 };

package/dist/components/utils/filter-menu/StyledFilterMenu.js

@@ -1,11 +1,12 @@
-import { FilterIcon as p } from "../../icons/filter-icon/FilterIcon.js";
-import { StyledButton as A } from "../../inputs/button/StyledButton.js";
-import { StyledPopover as O } from "../popover/StyledPopover.js";
-import v from "clsx";
-import h, { useState as E } from "react";
-import { Fragment as b, jsx as e, jsxs as d } from "react/jsx-runtime";
-var k = () => {
-  const [r, t] = E(null), c = (o) => {
+import { FilterIcon as O } from "../../icons/filter-icon/FilterIcon.js";
+import { StyledButton as b } from "../../inputs/button/StyledButton.js";
+import { StyledPopover as v } from "../popover/StyledPopover.js";
+import { useDynamicToolbarLayout as E } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
+import k from "clsx";
+import m, { useState as C } from "react";
+import { Fragment as F, jsx as e, jsxs as g } from "react/jsx-runtime";
+var x = () => {
+  const [r, t] = C(null), c = (o) => {
     t(() => o.currentTarget);
   }, l = () => {
     t(() => null);
@@ -17,28 +18,28 @@ var k = () => {
       r ? l() : c(o);
     }
   };
-}, C = (r) => h.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), I = ({ filterIsActive: r, popoverContent: t, dataTest: c, disabled: l, size: n = "large", variant: o = "outlined", popoverProps: a, anchorNode: m, label: f, hideLabel: y }) => {
-  const { onAnchorClick: g, onClose: s, anchorEl: i } = k(), u = m?.({
+}, N = (r) => m.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), V = ({ filterIsActive: r, popoverContent: t, dataTest: c, disabled: l, size: n = "large", variant: o = "outlined", popoverProps: a, anchorNode: h, label: f, hideLabel: y }) => {
+  const { onAnchorClick: u, onClose: s, anchorEl: i } = x(), { filterIconOnly: p } = E(), A = y ?? p, d = h?.({
     isOpen: !!i,
     onClose: s
   });
-  return /* @__PURE__ */ d(b, { children: [/* @__PURE__ */ d("div", {
+  return /* @__PURE__ */ g(F, { children: [/* @__PURE__ */ g("div", {
     className: "relative h-fit w-fit",
-    children: [m && h.isValidElement(u) ? h.cloneElement(u, { onClick: g }) : /* @__PURE__ */ e(A, {
+    children: [h && m.isValidElement(d) ? m.cloneElement(d, { onClick: u }) : /* @__PURE__ */ e(b, {
       type: "button",
       disabled: l,
       variant: o,
-      startIcon: /* @__PURE__ */ e(p, {
+      startIcon: /* @__PURE__ */ e(O, {
         width: n === "large" ? 24 : 20,
         height: n === "large" ? 24 : 20
       }),
-      onClick: g,
+      onClick: u,
       size: n,
       dataTest: c,
       "data-popover-open": !!i || void 0,
-      children: !y && (f ?? "Filter")
-    }), r && /* @__PURE__ */ e("div", { className: v("absolute h-2 w-2 rounded-full bg-gama-400", n === "large" ? "right-2 top-2" : "right-1 top-1") })]
-  }), /* @__PURE__ */ e(O, {
+      children: !A && (f ?? "Filter")
+    }), r && /* @__PURE__ */ e("div", { className: k("absolute h-2 w-2 rounded-full bg-gama-400", n === "large" ? "right-2 top-2" : "right-1 top-1") })]
+  }), /* @__PURE__ */ e(v, {
     ...a,
     open: !!i,
     anchorEl: i,
@@ -52,12 +53,12 @@ var k = () => {
       horizontal: "right"
     },
     className: a?.className ?? "my-1",
-    children: C(t) ? t : t({
+    children: N(t) ? t : t({
       isOpen: !!i,
       onClose: s
     })
   })] });
 };
 export {
-  I as StyledFilterMenu
+  V as StyledFilterMenu
 };

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

@@ -2,23 +2,23 @@ import { StyledInputField as w } from "../../shared-components/StyledInputField.
 import { HelperText as y } from "./components/HelperText.js";
 import { ClockOutlineIcon as E } from "../../shared-components/ClockOutlineIcon.js";
 import { useEffect as R, useRef as v } from "react";
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
 import { useMask as M } from "@react-input/mask";
 import "material-ui-popup-state/hooks";
 var S = (c) => {
-  const { placeholder: f, disabled: i, inputClassName: h, dataTest: n, width: l, error: u, helperText: x, label: T, locale: k = "en", popupState: e, handleChange: C, isValidTime: s, isValidEndTime: p, localValue: b, title: m, readOnly: t } = c, g = M({
+  const { placeholder: f, disabled: r, inputClassName: h, dataTest: n, width: i, error: u, helperText: x, label: T, locale: k = "en", popupState: l, handleChange: C, isValidTime: s, isValidEndTime: p, localValue: b, title: m, readOnly: e } = c, g = M({
     mask: "xx:xx",
     replacement: { x: /\d/ },
     showMask: !1
   }), d = !s || !p || !!u, a = v(null);
   return R(() => {
-    a.current && e.setAnchorEl(a.current);
-  }, [e]), /* @__PURE__ */ I("div", {
-    style: { height: t ? "40px" : "75px" },
-    children: [m && /* @__PURE__ */ r("div", {
+    a.current && l.setAnchorEl(a.current);
+  }, []), /* @__PURE__ */ I("div", {
+    style: { height: e ? "40px" : "75px" },
+    children: [m && /* @__PURE__ */ o("div", {
       className: "pb-1 font-roboto font-semibold text-delta-800",
       children: m
-    }), /* @__PURE__ */ r(w, {
+    }), /* @__PURE__ */ o(w, {
       inputRef: g,
       autoComplete: "off",
       type: "text",
@@ -27,7 +27,7 @@ var S = (c) => {
       placeholder: f,
       size: "small",
       error: d,
-      helperText: /* @__PURE__ */ r(y, {
+      helperText: /* @__PURE__ */ o(y, {
         isValidTime: s,
         isValidEndTime: p,
         error: d,
@@ -37,25 +37,25 @@ var S = (c) => {
       onChange: C,
       slotProps: { input: {
         ref: a,
-        onMouseDown: (o) => {
-          !i && !t && e.open(o);
+        onMouseDown: (t) => {
+          !r && !e && l.open(t);
         },
-        endAdornment: /* @__PURE__ */ r(E, {
+        endAdornment: /* @__PURE__ */ o(E, {
           width: 24,
           height: 24,
-          onClick: (o) => {
-            o.stopPropagation(), !i && !t && e.open(o);
+          onClick: (t) => {
+            t.stopPropagation(), !r && !e && l.open(t);
           }
         })
       } },
       value: b,
       sx: {
-        maxWidth: l ?? 130,
-        width: l,
-        minWidth: l
+        maxWidth: i ?? 130,
+        width: i,
+        minWidth: i
       },
-      disabled: i,
-      readOnly: t,
+      disabled: r,
+      readOnly: e,
       className: h,
       label: T
     })]

package/dist/hooks/useElementWidthPx.js

@@ -0,0 +1,26 @@
+import { useLayoutEffect as a, useRef as d, useState as l } from "react";
+function h() {
+  const n = d(null), [s, m] = l(0);
+  return a(() => {
+    const e = n.current;
+    if (!e) return;
+    let t = 0;
+    const r = () => {
+      const c = Math.round(e.getBoundingClientRect().width);
+      m((i) => i === c ? i : c);
+    }, u = () => {
+      cancelAnimationFrame(t), t = requestAnimationFrame(r);
+    };
+    r();
+    const o = new ResizeObserver(u);
+    return o.observe(e), () => {
+      cancelAnimationFrame(t), o.disconnect();
+    };
+  }, []), {
+    ref: n,
+    widthPx: s
+  };
+}
+export {
+  h as useElementWidthPx
+};

package/dist/hooks/useWidthRegistry.js

@@ -0,0 +1,37 @@
+import { useCallback as g, useEffect as m, useRef as i, useState as p } from "react";
+function M() {
+  const [h, R] = p({}), s = i(/* @__PURE__ */ new Map()), f = i(/* @__PURE__ */ new Map()), b = i(/* @__PURE__ */ new Map()), o = i(null), u = g((e) => {
+    const t = s.current.get(e);
+    if (!t) return;
+    const r = t.mode === "scroll" ? t.element.scrollWidth : t.element.getBoundingClientRect().width, c = Math.ceil(r);
+    R((n) => n[e] === c ? n : {
+      ...n,
+      [e]: c
+    });
+  }, []), a = g(() => (o.current ??= new ResizeObserver((e) => {
+    for (const { target: t } of e) {
+      const r = f.current.get(t);
+      r && u(r);
+    }
+  }), o.current), [u]), w = g((e, t = "box") => {
+    const r = `${e}|${t}`, c = b.current.get(r);
+    if (c) return c;
+    const n = (l) => {
+      const d = s.current.get(e);
+      d && (a().unobserve(d.element), f.current.delete(d.element), s.current.delete(e)), l && (s.current.set(e, {
+        element: l,
+        mode: t
+      }), f.current.set(l, e), a().observe(l), u(e));
+    };
+    return b.current.set(r, n), n;
+  }, [a, u]);
+  return m(() => () => {
+    o.current?.disconnect(), o.current = null;
+  }, []), {
+    register: w,
+    widths: h
+  };
+}
+export {
+  M as useWidthRegistry
+};