asma-ui-core 3.104.0 → 3.106.0

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

@@ -1,54 +1,55 @@
-import { cn as f } from "../../../../helpers/cn.js";
-import { CloseIcon as T } from "../../../icons/close-icon/CloseIcon.js";
-import { StyledButton as b } from "../../../inputs/button/StyledButton.js";
-import { ToolbarActionGroup as c, hasPlannedActions as u } from "./ToolbarActionGroup.js";
-import { formatSelectionLabel as j } from "./useTranslations.js";
-import { StyledWidgetTitle as k } from "../../widget/widget-title/StyledWidgetTitle.js";
+import { cn as h } from "../../../../helpers/cn.js";
+import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { StyledButton as k } from "../../../inputs/button/StyledButton.js";
+import { ToolbarActionGroup as c, hasPlannedActions as f } from "./ToolbarActionGroup.js";
+import { formatSelectionLabel as b } from "./useTranslations.js";
+import { StyledWidgetTitle as I } from "../../widget/widget-title/StyledWidgetTitle.js";
 import { Fragment as o, jsx as i, jsxs as r } from "react/jsx-runtime";
-function I({ selectedCount: e, onClearSelection: n, translations: t }) {
+function F({ selectedCount: e, onClearSelection: n, translations: t }) {
   return /* @__PURE__ */ i("div", {
     className: "flex shrink-0 items-center whitespace-nowrap",
     "aria-live": "polite",
     "aria-atomic": "true",
-    children: /* @__PURE__ */ i(b, {
+    children: /* @__PURE__ */ i(k, {
       dataTest: "dynamic-toolbar-clear-selection",
       variant: "text",
       className: "!min-w-0 !px-1 !font-semibold",
-      startIcon: n ? /* @__PURE__ */ i(T, {
+      startIcon: n ? /* @__PURE__ */ i(j, {
         width: 20,
         height: 20
       }) : void 0,
       onClick: n,
       "aria-label": t.clearSelection,
-      children: j(e, t)
+      children: b(e, t)
     })
   });
 }
-function z({ selectedCount: e, onClearSelection: n, translations: t, bulkActionsPlan: l }) {
+function D({ selectedCount: e, onClearSelection: n, translations: t, bulkActionsPlan: l }) {
   return /* @__PURE__ */ r("div", {
     className: "flex w-full min-w-0 flex-nowrap items-center justify-between gap-3",
-    children: [/* @__PURE__ */ i(I, {
+    children: [/* @__PURE__ */ i(F, {
       selectedCount: e,
       onClearSelection: n,
       translations: t
     }), /* @__PURE__ */ i(c, {
       plan: l,
       overflowMenuLabel: t.more,
+      inProgressLabel: t.inProgress,
       selectionTone: !0
     })]
   });
 }
-function N({ search: e, expanded: n, measureRef: t }) {
+function S({ search: e, expanded: n, measureRef: t }) {
   return /* @__PURE__ */ i("div", {
     ref: n ? void 0 : t,
     style: n ? { "--dynamic-toolbar-search-width": "100%" } : void 0,
-    className: f(n ? "min-w-0 flex-1" : "w-40 shrink-0"),
+    className: h(n ? "min-w-0 flex-1" : "w-40 shrink-0"),
     children: e
   });
 }
-function S({ visible: e, children: n }) {
+function g({ visible: e, children: n }) {
   return /* @__PURE__ */ i("div", {
-    className: f("overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-in-out", e ? "max-w-[2000px] opacity-100" : "pointer-events-none max-w-0 opacity-0"),
+    className: h("overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-in-out", e ? "max-w-[2000px] opacity-100" : "pointer-events-none max-w-0 opacity-0"),
     "aria-hidden": !e,
     children: /* @__PURE__ */ i("div", {
       className: "inline-flex items-center gap-2",
@@ -56,8 +57,8 @@ function S({ visible: e, children: n }) {
     })
   });
 }
-function F({ title: e, measureRef: n }) {
-  return typeof e == "string" ? /* @__PURE__ */ i(k, {
+function C({ title: e, measureRef: n }) {
+  return typeof e == "string" ? /* @__PURE__ */ i(I, {
     ref: n,
     className: "!min-w-0 truncate",
     children: e
@@ -67,10 +68,10 @@ function F({ title: e, measureRef: n }) {
     children: e
   });
 }
-function D({ title: e, helperText: n, titleMeasureRef: t }) {
+function E({ title: e, helperText: n, titleMeasureRef: t }) {
   return !e && !n ? null : /* @__PURE__ */ r("div", {
     className: "min-w-0 max-w-full",
-    children: [e && /* @__PURE__ */ i(F, {
+    children: [e && /* @__PURE__ */ i(C, {
       title: e,
       measureRef: t
     }), n && /* @__PURE__ */ i("div", {
@@ -79,58 +80,61 @@ function D({ title: e, helperText: n, titleMeasureRef: t }) {
     })]
   });
 }
-function E({ variant: e, beforeFilterActionsPlan: n, filter: t, search: l, afterSearchActionsPlan: h, bulkActionsPlan: a, showPageActions: p, overflowMenuLabel: s, searchMeasureRef: g, align: B = "end" }) {
-  const m = p && u(n), d = p && u(h), w = e === "inline-selection" && u(a);
-  if (!(t != null || l != null) && !m && !d && !w) return null;
-  const x = m ? /* @__PURE__ */ i(S, {
-    visible: m,
+function H({ variant: e, beforeFilterActionsPlan: n, filter: t, search: l, afterSearchActionsPlan: p, bulkActionsPlan: a, showPageActions: w, overflowMenuLabel: s, inProgressLabel: m, searchMeasureRef: B, align: T = "end" }) {
+  const d = w && f(n), u = w && f(p), x = e === "inline-selection" && f(a);
+  if (!(t != null || l != null) && !d && !u && !x) return null;
+  const v = d ? /* @__PURE__ */ i(g, {
+    visible: d,
     children: /* @__PURE__ */ i(c, {
       plan: n,
-      overflowMenuLabel: s
+      overflowMenuLabel: s,
+      inProgressLabel: m
     })
-  }) : null, v = d ? /* @__PURE__ */ i(S, {
-    visible: d,
+  }) : null, y = u ? /* @__PURE__ */ i(g, {
+    visible: u,
     children: /* @__PURE__ */ i("div", {
       className: "flex flex-nowrap items-center gap-2",
       children: /* @__PURE__ */ i(c, {
-        plan: h,
-        overflowMenuLabel: s
+        plan: p,
+        overflowMenuLabel: s,
+        inProgressLabel: m
       })
     })
-  }) : null, y = /* @__PURE__ */ r(o, { children: [t, l != null && /* @__PURE__ */ i(N, {
+  }) : null, N = /* @__PURE__ */ r(o, { children: [t, l != null && /* @__PURE__ */ i(S, {
     search: l,
-    measureRef: g
+    measureRef: B
   })] });
   return /* @__PURE__ */ r("div", {
-    className: f("flex w-full min-w-0 flex-nowrap items-center gap-2", B === "end" ? "justify-end" : "justify-start"),
+    className: h("flex w-full min-w-0 flex-nowrap items-center gap-2", T === "end" ? "justify-end" : "justify-start"),
     children: [
-      e === "inline-selection" && /* @__PURE__ */ r(o, { children: [w && a && /* @__PURE__ */ i(c, {
+      e === "inline-selection" && /* @__PURE__ */ r(o, { children: [x && a && /* @__PURE__ */ i(c, {
         plan: a,
         overflowMenuLabel: s,
+        inProgressLabel: m,
         selectionTone: !0
-      }), y] }),
+      }), N] }),
       e === "inline-normal" && /* @__PURE__ */ r(o, { children: [
-        x,
-        y,
-        v
+        v,
+        N,
+        y
       ] }),
       e === "utility-row" && /* @__PURE__ */ r(o, { children: [
-        x,
-        l != null && /* @__PURE__ */ i(N, {
+        v,
+        l != null && /* @__PURE__ */ i(S, {
           search: l,
           expanded: !0
         }),
         t,
-        v
+        y
       ] })
     ]
   });
 }
 export {
-  N as SearchSlot,
-  I as SelectionIndicator,
-  z as SelectionRow,
-  D as TitleBlock,
-  F as TitleText,
-  E as UtilityCluster
+  S as SearchSlot,
+  F as SelectionIndicator,
+  D as SelectionRow,
+  E as TitleBlock,
+  C as TitleText,
+  H as UtilityCluster
 };

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

@@ -1,12 +1,13 @@
-import { useMemo as r } from "react";
-var n = {
+import { useMemo as o } from "react";
+var r = {
   en: {
     more: "More",
     clearSelection: "Clear selection",
     selected: "selected",
     back: "Back",
     menu: "Menu",
-    close: "Close"
+    close: "Close",
+    inProgress: "In progress"
   },
   no: {
     more: "Mer",
@@ -14,16 +15,17 @@ var n = {
     selected: "valgt",
     back: "Tilbake",
     menu: "Meny",
-    close: "Lukk"
+    close: "Lukk",
+    inProgress: "Pågår"
   }
 };
-function t(e = "en") {
-  return r(() => n[e] ?? n.en, [e]);
+function l(e = "en") {
+  return o(() => r[e] ?? r.en, [e]);
 }
-function a(e, o) {
-  return `${e} ${o.selected}`;
+function t(e, n) {
+  return `${e} ${n.selected}`;
 }
 export {
-  a as formatSelectionLabel,
-  t as useToolbarTranslations
+  t as formatSelectionLabel,
+  l as useToolbarTranslations
 };

package/dist/components/custom/page/page-header/PageHeader.js

@@ -9,24 +9,24 @@ import { planToolbarActions as ce } from "../../module/header-layout/planToolbar
 import { ToolbarActionButton as de, ToolbarActionGroup as me } from "../../module/header-layout/ToolbarActionGroup.js";
 import { useToolbarTranslations as ue } from "../../module/header-layout/useTranslations.js";
 import { KEY_MORE_BUTTON as he, ToolbarMeasurementStrip as fe, actionKey as z } from "../../module/header-layout/ToolbarMeasurement.js";
-import { useIsTitleClamped as pe, useSearchFocus as xe, useStickyScrollPadding as ge, useStuckOnScroll as be } from "./PageHeader.hooks.js";
+import { useIsTitleClamped as pe, useSearchFocus as ge, useStickyScrollPadding as xe, useStuckOnScroll as be } from "./PageHeader.hooks.js";
 import { useMemo as G, useRef as E } from "react";
-import { Fragment as ve, jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Fragment as ve, jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useMergeRefs as we } from "@floating-ui/react";
-var Ne = 744, Te = 8, Ae = 32, Le = 120, Me = (t) => {
-  const { badgeCount: r, ...o } = t, a = {
+var Ne = 744, Te = 8, Ae = 32, Le = 120, Pe = (t) => {
+  const { badgeCount: c, ...o } = t, a = {
     ...o,
     canHideLabel: o.icon != null && o.canHideLabel !== !1
   };
-  if (r == null || a.render) return a;
-  const l = `${a.label} (${r})`;
+  if (c == null || a.render) return a;
+  const l = `${a.label} (${c})`;
   return {
     ...a,
     label: l,
     ariaLabel: l,
     render: ({ showLabel: u }) => /* @__PURE__ */ e(le, {
       dataTest: `${a.dataTest ?? `page-header-action-${a.id}`}-badge`,
-      badgeContent: r,
+      badgeContent: c,
       statusMessage: l,
       slotProps: { badge: { style: {
         right: -8,
@@ -43,50 +43,50 @@ var Ne = 744, Te = 8, Ae = 32, Le = 120, Me = (t) => {
     })
   };
 };
-function Pe({ compact: t }) {
-  return /* @__PURE__ */ s("div", {
+function Me({ compact: t }) {
+  return /* @__PURE__ */ r("div", {
     className: "flex w-full min-w-0 items-center justify-between gap-2",
     "aria-hidden": !0,
     children: [/* @__PURE__ */ e("div", { className: m("animate-pulse rounded bg-delta-100", t ? "h-6 w-3/5" : "h-8 w-2/5 max-w-[500px]") }), /* @__PURE__ */ e("div", { className: "h-10 w-14 shrink-0 animate-pulse rounded bg-delta-100" })]
   });
 }
-function Ye({ title: t, titleAs: r = "h1", titleDataTest: o, titleRef: a, subtitle: l, status: u, leading: h, onLeadingClick: I, leadingLabel: X, leadingSlot: W, actions: k = [], search: w, searchOpen: y = !1, onSearchClose: Y, searchCloseLabel: F, loading: f = !1, sticky: p = !1, locale: D = "en", className: U, dataTest: x = "page-header" }) {
-  const c = ue(D), { ref: S, widthPx: N } = se(), { register: g, widths: i } = re(), T = E(null), C = E(null), B = E(null), n = N > 0 && N < Ne, V = we([T, a]), A = y && w != null, b = f || A;
-  xe(w != null, y, B, T);
+function Ye({ title: t, titleAs: c = "h1", titleDataTest: o, titleRef: a, subtitle: l, status: u, leading: h, onLeadingClick: I, leadingLabel: X, leadingSlot: W, actions: k = [], search: w, searchOpen: y = !1, onSearchClose: Y, searchCloseLabel: F, loading: f = !1, sticky: p = !1, locale: D = "en", className: U, dataTest: g = "page-header" }) {
+  const i = ue(D), { ref: S, widthPx: N } = se(), { register: x, widths: s } = re(), T = E(null), C = E(null), B = E(null), n = N > 0 && N < Ne, V = we([T, a]), A = y && w != null, b = f || A;
+  ge(w != null, y, B, T);
   const v = be(p, C);
-  ge(p, S);
-  const Z = pe(T, t, !b), L = G(() => k.filter((d) => !d.hidden).map(Me), [k]), $ = Math.max(0, N - Ae), H = h != null || W != null, M = u != null, q = H ? i["slot:leading"] ?? 0 : 0, J = M ? i["slot:status"] ?? 0 : 0, Q = i.title ?? 0, ee = Math.max(Le, Math.min(Q, Math.floor($ * 0.5))), te = 1 + (H ? 1 : 0) + (M ? 1 : 0), K = Math.max(0, $ - q - J - ee - Te * te), ae = G(() => ce({
+  xe(p, S);
+  const Z = pe(T, t, !b), L = G(() => k.filter((d) => !d.hidden).map(Pe), [k]), $ = Math.max(0, N - Ae), H = h != null || W != null, P = u != null, q = H ? s["slot:leading"] ?? 0 : 0, J = P ? s["slot:status"] ?? 0 : 0, Q = s.title ?? 0, ee = Math.max(Le, Math.min(Q, Math.floor($ * 0.5))), te = 1 + (H ? 1 : 0) + (P ? 1 : 0), K = Math.max(0, $ - q - J - ee - Te * te), ae = G(() => ce({
     actions: L,
     availableWidth: K,
     collapseLabels: !0,
-    resolveActionWidth: (d, R) => i[z(d.id, R)],
-    moreButtonWidthPx: i[he]
+    resolveActionWidth: (d, R) => s[z(d.id, R)],
+    moreButtonWidthPx: s[he]
   }), [
     L,
     K,
-    i
-  ]), P = X ?? (h === "menu" ? c.menu : c.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(_, {
-    dataTest: `${x}-menu`,
+    s
+  ]), M = X ?? (h === "menu" ? i.menu : i.back), O = W ?? (h === "menu" ? /* @__PURE__ */ e(_, {
+    dataTest: `${g}-menu`,
     variant: "text",
     size: "large",
     onClick: I,
-    "aria-label": P,
+    "aria-label": M,
     startIcon: /* @__PURE__ */ e(oe, {
       width: 24,
       height: 24
     })
   }) : h === "back" ? /* @__PURE__ */ e(_, {
-    dataTest: `${x}-back`,
+    dataTest: `${g}-back`,
     variant: n ? "text" : "outlined",
     size: "large",
     onClick: I,
-    "aria-label": n ? P : void 0,
+    "aria-label": n ? M : void 0,
     startIcon: /* @__PURE__ */ e(ie, {
       width: n ? 24 : 20,
       height: n ? 24 : 20
     }),
-    children: n ? void 0 : P
-  }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(r, {
+    children: n ? void 0 : M
+  }) : null), j = n || v, ne = t === "" ? null : /* @__PURE__ */ e(c, {
     ref: V,
     tabIndex: -1,
     "data-test": o,
@@ -95,14 +95,14 @@ function Ye({ title: t, titleAs: r = "h1", titleDataTest: o, titleRef: a, subtit
     className: m("m-0 line-clamp-2 min-w-0 break-words font-semibold text-delta-800 outline-none", j ? "text-xl leading-7" : "text-2xl leading-8"),
     children: t
   });
-  return /* @__PURE__ */ s(ve, { children: [p && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ r(ve, { children: [p && /* @__PURE__ */ e("div", {
     ref: C,
     "aria-hidden": !0,
     className: "h-px w-full",
     style: { marginBottom: -1 }
-  }), /* @__PURE__ */ s("div", {
+  }), /* @__PURE__ */ r("div", {
     ref: S,
-    "data-testid": x,
+    "data-testid": g,
     "data-compact": n ? "true" : "false",
     "data-stuck": v ? "true" : "false",
     "aria-busy": f || void 0,
@@ -110,22 +110,22 @@ function Ye({ title: t, titleAs: r = "h1", titleDataTest: o, titleRef: a, subtit
     children: [
       /* @__PURE__ */ e(fe, {
         actions: L,
-        register: g,
-        overflowMenuLabel: c.more,
+        register: x,
+        overflowMenuLabel: i.more,
         title: t,
         titleClassName: m("font-semibold", j ? "text-xl leading-7" : "text-2xl leading-8")
       }),
       O != null && /* @__PURE__ */ e("span", {
-        ref: g("slot:leading"),
+        ref: x("slot:leading"),
         className: "inline-flex shrink-0",
         children: O
       }),
-      /* @__PURE__ */ s("div", {
+      /* @__PURE__ */ r("div", {
         className: m(b ? "sr-only" : "flex min-w-0 flex-1 flex-col justify-center"),
-        children: [/* @__PURE__ */ s("div", {
+        children: [/* @__PURE__ */ r("div", {
           className: "flex min-w-0 items-center gap-2",
-          children: [ne, M && !b && /* @__PURE__ */ e("span", {
-            ref: g("slot:status"),
+          children: [ne, P && !b && /* @__PURE__ */ e("span", {
+            ref: x("slot:status"),
             className: "inline-flex shrink-0 items-center",
             children: u
           })]
@@ -134,25 +134,26 @@ function Ye({ title: t, titleAs: r = "h1", titleDataTest: o, titleRef: a, subtit
           children: l
         })]
       }),
-      f && /* @__PURE__ */ e(Pe, { compact: n }),
-      A && /* @__PURE__ */ s("div", {
+      f && /* @__PURE__ */ e(Me, { compact: n }),
+      A && /* @__PURE__ */ r("div", {
         ref: B,
         className: "flex w-full min-w-0 items-center gap-2",
         children: [/* @__PURE__ */ e("div", {
           className: "min-w-0 flex-1",
           children: w
         }), /* @__PURE__ */ e(_, {
-          dataTest: `${x}-search-close`,
+          dataTest: `${g}-search-close`,
           variant: "text",
           size: "large",
           onClick: Y,
-          children: F ?? c.close
+          children: F ?? i.close
         })]
       }),
       !f && !A && /* @__PURE__ */ e(me, {
         plan: ae,
-        overflowMenuLabel: c.more,
-        registerActionWidth: (d, R) => g(z(d, R))
+        overflowMenuLabel: i.more,
+        inProgressLabel: i.inProgress,
+        registerActionWidth: (d, R) => x(z(d, R))
       })
     ]
   })] });

package/dist/components/custom/widget/widget/StyledWidget.js

@@ -1,23 +1,23 @@
-import v from "../icons/ChevronDownIcon.js";
-import { StyledButton as x } from "../../../inputs/button/StyledButton.js";
+import x from "../icons/ChevronDownIcon.js";
+import { StyledButton as v } from "../../../inputs/button/StyledButton.js";
 import { StyledEmptyPage as y } from "../../../feedback/empty-page/StyledEmptyPage.js";
 import { StyledLoading as C } from "../../../feedback/loading/StyledLoading.js";
 import { StyledLink as N } from "../../../navigation/link/StyledLink.js";
-import { StyledWidgetTitle as I } from "../widget-title/StyledWidgetTitle.js";
+import { StyledWidgetTitle as b } from "../widget-title/StyledWidgetTitle.js";
 import d from "./StyledWidget.module.js";
-import T from "../icons/ChevronUpIcon.js";
-import { useState as $ } from "react";
-import { Fragment as L, jsx as e, jsxs as a } from "react/jsx-runtime";
-var P = ({ children: l, title: m, titleNode: c, icon: s, link: i, viewMore: t, persistKey: o, isLoading: h, isEmpty: n, emptyText: g, headerRight: f, headerRightClassName: p }) => {
-  const [r, u] = $(() => o ? localStorage.getItem(o) === "true" : !1), S = !!i && !i.hide, w = !!t && !t.hide;
-  return /* @__PURE__ */ a("div", {
+import I from "../icons/ChevronUpIcon.js";
+import { useState as T } from "react";
+import { Fragment as $, jsx as e, jsxs as r } from "react/jsx-runtime";
+var E = ({ children: l, title: m, titleNode: s, icon: c, link: i, viewMore: t, persistKey: o, isLoading: h, isEmpty: n, emptyText: g, headerRight: f, headerRightClassName: p }) => {
+  const [a, u] = T(() => o ? localStorage.getItem(o) === "true" : !1), S = !!i && !i.hide, w = !!t && !t.hide;
+  return /* @__PURE__ */ r("div", {
     className: `${d["asma-ui-core-styled-widget"]} ${n ? d["empty-state"] : ""}`,
     children: [
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ r("div", {
         className: d["widget-header-left"],
         children: [
-          s,
-          c ?? /* @__PURE__ */ e(I, { children: m }),
+          c,
+          s ?? /* @__PURE__ */ e(b, { children: m }),
           /* @__PURE__ */ e("div", {
             className: `${d["widget-header-right"]} ${p ?? ""}`,
             children: f
@@ -26,7 +26,7 @@ var P = ({ children: l, title: m, titleNode: c, icon: s, link: i, viewMore: t, p
       }),
       /* @__PURE__ */ e("div", {
         className: d["widget-content"],
-        children: /* @__PURE__ */ a(L, { children: [
+        children: /* @__PURE__ */ r($, { children: [
           l,
           /* @__PURE__ */ e(C, { isLoading: h }),
           /* @__PURE__ */ e(y, {
@@ -35,23 +35,24 @@ var P = ({ children: l, title: m, titleNode: c, icon: s, link: i, viewMore: t, p
           })
         ] })
       }),
-      w && /* @__PURE__ */ a("div", {
+      w && /* @__PURE__ */ r("div", {
         className: d["widget-footer"],
-        children: [t.hide ? /* @__PURE__ */ e("div", {}) : /* @__PURE__ */ e(x, {
+        children: [t.hide ? /* @__PURE__ */ e("div", {}) : /* @__PURE__ */ e(v, {
           disabled: t.disabled,
+          disabledReason: t.disabledReason,
           dataTest: "view-more",
           variant: "text",
-          endIcon: r ? /* @__PURE__ */ e(T, {
+          endIcon: a ? /* @__PURE__ */ e(I, {
             width: 20,
             height: 20
-          }) : /* @__PURE__ */ e(v, {
+          }) : /* @__PURE__ */ e(x, {
             width: 20,
             height: 20
           }),
           onClick: () => {
-            u(!r), o && localStorage.setItem(o, String(!r)), t.onClick?.();
+            u(!a), o && localStorage.setItem(o, String(!a)), t.onClick?.();
           },
-          children: r ? t.viewLessText : t.viewMoreText
+          children: a ? t.viewLessText : t.viewMoreText
         }), S ? /* @__PURE__ */ e(N, {
           dataTest: "go-to-button",
           className: d["widget-link"],
@@ -65,5 +66,5 @@ var P = ({ children: l, title: m, titleNode: c, icon: s, link: i, viewMore: t, p
   });
 };
 export {
-  P as StyledWidget
+  E as StyledWidget
 };

package/dist/components/data-display/chip/StyledChip.js

@@ -1,67 +1,85 @@
-import { cn as i } from "../../../helpers/cn.js";
-import { resolveSx as E } from "../../../helpers/sx.js";
-import { CloseIcon as L } from "../../icons/close-icon/CloseIcon.js";
-import { consumerOverrides as x } from "../../../helpers/classOverride.js";
-import { getChipPadding as U } from "./chipPadding.js";
-import q from "./StyledChip.module.js";
-import { forwardRef as A } from "react";
-import { jsx as m, jsxs as F } from "react/jsx-runtime";
-var O = A(({ dataTest: u, label: c, size: r = "medium", disabled: t, readOnly: o, clickable: b, icon: w, avatar: g, deleteIcon: y, onDelete: l, onClick: p, onMouseDown: _, onMouseUp: k, className: h, classes: a, sx: S, tabIndex: v, deleteButtonTabIndex: j, "aria-label": C, role: s, "aria-checked": R, "aria-readonly": B, "data-hovered": D, "data-focus": I, variant: G, color: H }, M) => {
-  const n = !o && !t && (!!b || !!p), f = g ?? w, d = U(r, !!f, !!(l && !o)), N = {
-    paddingTop: d.top,
-    paddingRight: d.right,
-    paddingBottom: d.bottom,
-    paddingLeft: d.left
-  }, K = (e) => {
-    e.stopPropagation(), l?.(e);
-  }, P = (e) => {
-    n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p?.(e));
-  }, W = x(h, "width"), $ = x(h, "max-width");
-  return /* @__PURE__ */ F("div", {
-    ref: M,
-    "data-testid": u,
-    "aria-label": C,
-    "data-hovered": D,
-    "data-focus": I,
-    role: s ?? (n ? "button" : void 0),
-    "aria-checked": s ? R : void 0,
-    "aria-readonly": s ? B : void 0,
-    tabIndex: o || t ? void 0 : n ? v ?? 0 : v,
-    onClick: t || o ? void 0 : p,
-    onKeyDown: t || o ? void 0 : P,
-    onMouseDown: t || o ? void 0 : _,
-    onMouseUp: t || o ? void 0 : k,
-    className: i("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !W && "w-fit", !$ && "max-w-full", r === "small" ? "h-6" : "h-8", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", n && i("cursor-pointer outline-none", "asma-touch-ready", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), q["focus-ring"], a?.root, h),
+import { cn as c } from "../../../helpers/cn.js";
+import { resolveSx as A } from "../../../helpers/sx.js";
+import { StyledTooltip as F } from "../tooltip/StyledTooltip.js";
+import { CloseIcon as G } from "../../icons/close-icon/CloseIcon.js";
+import { consumerOverrides as y } from "../../../helpers/classOverride.js";
+import { getChipPadding as H } from "./chipPadding.js";
+import J from "./StyledChip.module.js";
+import { forwardRef as Q } from "react";
+import { jsx as m, jsxs as V } from "react/jsx-runtime";
+var X = ({ readOnly: l, disabled: n, interactive: e, focusableDisabled: o, tabIndex: a }) => {
+  if (o) return a ?? 0;
+  if (!(l || n))
+    return e ? a ?? 0 : a;
+}, co = Q(({ dataTest: l, label: n, size: e = "medium", disabled: o, disabledReason: a, readOnly: t, clickable: S, icon: _, avatar: b, deleteIcon: k, onDelete: h, onClick: f, onMouseDown: B, onMouseUp: C, className: u, classes: i, sx: D, tabIndex: j, deleteButtonTabIndex: I, "aria-label": M, role: g, "aria-checked": N, "aria-readonly": R, "data-hovered": T, "data-focus": K, variant: Y, color: Z }, P) => {
+  const w = !t && (!!S || !!f), p = w && !o, d = w && !!o, v = d && !!a, x = b ?? _, s = H(e, !!x, !!(h && !t)), W = {
+    paddingTop: s.top,
+    paddingRight: s.right,
+    paddingBottom: s.bottom,
+    paddingLeft: s.left
+  }, $ = (r) => {
+    r.stopPropagation(), h?.(r);
+  }, E = (r) => {
+    p && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), f?.(r));
+  }, L = y(u, "width"), U = y(u, "max-width"), q = /* @__PURE__ */ V("div", {
+    ref: P,
+    "data-testid": l,
+    "aria-label": M,
+    "data-hovered": T,
+    "data-focus": K,
+    role: g ?? (p || d ? "button" : void 0),
+    "aria-disabled": d || void 0,
+    "aria-checked": g ? N : void 0,
+    "aria-readonly": g ? R : void 0,
+    tabIndex: X({
+      readOnly: t,
+      disabled: o,
+      interactive: p,
+      focusableDisabled: d,
+      tabIndex: j
+    }),
+    onClick: o || t ? void 0 : f,
+    onKeyDown: o || t ? void 0 : E,
+    onMouseDown: o || t ? void 0 : B,
+    onMouseUp: o || t ? void 0 : C,
+    className: c("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !L && "w-fit", !U && "max-w-full", e === "small" ? "h-6" : "h-8", t && "pointer-events-none", o && "opacity-[0.38]", o && (d ? "cursor-not-allowed" : "pointer-events-none"), p && c("cursor-pointer outline-none", "asma-touch-ready", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), J["focus-ring"], i?.root, u),
     style: {
-      ...N,
-      ...E(S)
+      ...W,
+      ...A(D)
     },
     children: [
-      f && /* @__PURE__ */ m("span", {
-        className: i("flex shrink-0 items-center justify-center", r === "small" ? "h-[18px] w-[18px]" : "h-6 w-6", g ? a?.avatar : a?.icon),
-        children: f
+      x && /* @__PURE__ */ m("span", {
+        className: c("flex shrink-0 items-center justify-center", e === "small" ? "h-[18px] w-[18px]" : "h-6 w-6", b ? i?.avatar : i?.icon),
+        children: x
       }),
       /* @__PURE__ */ m("span", {
-        className: i("min-w-0 truncate", a?.label),
-        children: c
+        className: c("min-w-0 truncate", i?.label),
+        children: n
       }),
-      l && !o && /* @__PURE__ */ m("button", {
+      h && !t && /* @__PURE__ */ m("button", {
         type: "button",
-        tabIndex: j,
-        "data-testid": `${u}-delete`,
-        "aria-label": typeof c == "string" ? `Remove ${c}` : "Remove",
-        onClick: K,
-        disabled: t,
-        className: i("flex shrink-0 items-center justify-center rounded-full border border-solid border-delta-100 bg-delta-50 p-0 text-delta-700 [outline:none]", r === "small" ? "h-[18px] w-[18px]" : "h-5 w-5", a?.deleteIcon),
-        children: y ?? /* @__PURE__ */ m(L, {
-          height: r === "small" ? 14 : 16,
-          width: r === "small" ? 14 : 16,
+        tabIndex: I,
+        "data-testid": `${l}-delete`,
+        "aria-label": typeof n == "string" ? `Remove ${n}` : "Remove",
+        onClick: $,
+        disabled: o,
+        className: c("flex shrink-0 items-center justify-center rounded-full border border-solid border-delta-100 bg-delta-50 p-0 text-delta-700 [outline:none]", e === "small" ? "h-[18px] w-[18px]" : "h-5 w-5", i?.deleteIcon),
+        children: k ?? /* @__PURE__ */ m(G, {
+          height: e === "small" ? 14 : 16,
+          width: e === "small" ? 14 : 16,
           className: "min-w-0 shrink-0"
         })
       })
     ]
   });
+  return /* @__PURE__ */ m(F, {
+    title: a,
+    open: v ? void 0 : !1,
+    openOnTap: v,
+    persistentDescription: v,
+    children: q
+  });
 });
 export {
-  O as StyledChip
+  co as StyledChip
 };