asma-ui-core 3.109.0 → 3.111.0

package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js

@@ -1,34 +1,35 @@
-import { cn as f } from "../../../helpers/cn.js";
+import { cn as h } from "../../../helpers/cn.js";
 import { firstTabbable as me } from "../../../helpers/focusable.js";
 import { StyledTooltip as u } from "../../data-display/tooltip/StyledTooltip.js";
-import { DotsVerticalIcon as he } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { DotsVerticalIcon as fe } from "../../icons/dots-vertical-icon/DotsVerticalIcon.js";
 import { CloseIcon as K } from "../../icons/close-icon/CloseIcon.js";
-import { MinimizeIcon as fe } from "../../icons/minimize-icon/MinimizeIcon.js";
+import { MinimizeIcon as he } from "../../icons/minimize-icon/MinimizeIcon.js";
 import { KeyboardCapslockIcon as ue } from "../../icons/keyboard-capslock-icon/KeyboardCapslockIcon.js";
 import { ArrowExpandIcon as ve } from "../../icons/arrow-expand-icon/ArrowExpandIcon.js";
 import { ArrowShrinkIcon as be } from "../../icons/arrow-shrink-icon/ArrowShrinkIcon.js";
 import { StyledButton as r } from "../../inputs/button/StyledButton.js";
-import { OverlayBackOwnerContext as pe, useBackCloses as ge } from "../../../hooks/useBackCloses.hook.js";
-import { useFocusTrap as xe } from "../../../hooks/useFocusTrap.hook.js";
+import { OverlayBackOwnerContext as pe, isOverlayBackNavigationPending as ge, useBackCloses as xe } from "../../../hooks/useBackCloses.hook.js";
+import { useFocusTrap as ke } from "../../../hooks/useFocusTrap.hook.js";
 import { StyledMenu as ye } from "../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as ke } from "../../navigation/menu/StyledMenuItem.js";
+import { StyledMenuItem as we } from "../../navigation/menu/StyledMenuItem.js";
+import { fullScreenFieldWidthVars as ze } from "../../inputs/field-styles.js";
 import T from "./MinimizableDialog.module.js";
-import { useToggleMenuVisibility as we } from "../../../hooks/useToggleMenuVisibility.hook.js";
+import { useToggleMenuVisibility as Ne } from "../../../hooks/useToggleMenuVisibility.hook.js";
 import H from "clsx";
-import { useLayoutEffect as ze, useRef as J, useState as Q } from "react";
+import { useLayoutEffect as Ce, useRef as J, useState as Q } from "react";
 import { Fragment as p, jsx as e, jsxs as l } from "react/jsx-runtime";
-var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: y, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: k, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: E, actionNode: te, extraActions: d, extraActionsText: h, btnContainerClassName: G, footerClassName: ie, footerInfo: D, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: q }) => {
-  const [i, re] = Q(!1), [V, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = we(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
+var Qe = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: R = !0, showMinimizeIcon: X = !0, showExpandIcon: Y = !0, showFullScreenIcon: Z = !0, title: m, label: g, children: x, open: k, onClose: L, className: j = "", primaryButtonText: S, primaryButtonLoading: n = !1, primaryButtonDisabled: B, primaryButtonDisabledReason: ee, secondaryButtonText: y, onPrimaryButtonClick: F, onSecondaryButtonClick: _, dataTest: q, actionNode: te, extraActions: d, extraActionsText: f, btnContainerClassName: E, footerClassName: ie, footerInfo: G, locale: t = "en", enableFullscreen: le = !0, fullScreenState: O, handleFullScreenState: D }) => {
+  const [i, re] = Q(!1), [V, ne] = Q(!1), { open: de, anchorEl: ae, handleOpen: oe, handleClose: se } = Ne(), s = J(null), w = J(null), z = t === "en" ? "Wait until saved" : "Vent til lagringen er ferdig", b = () => {
     if (n) return !1;
     L();
   }, o = O ?? V, a = o && !i;
-  if (xe(y && a, s, b), ge({
-    active: y && a,
-    requestClose: b,
+  if (ke(k && a, s, b), xe({
+    active: k && !i,
+    requestClose: () => !a && ge() ? !1 : b(),
     ownerRef: s
-  }), ze(() => {
+  }), Ce(() => {
     s.current?.toggleAttribute("inert", i), w.current?.toggleAttribute("inert", !i);
-  }, [i]), !y) return null;
+  }, [i]), !k) return null;
   const ce = a ? {
     right: "auto",
     bottom: "auto",
@@ -36,15 +37,16 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
     top: "50%",
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
-    height: "95dvh"
-  } : void 0, P = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", U = S ?? n, W = U || k, $ = /* @__PURE__ */ l(p, { children: [k && _ && /* @__PURE__ */ e(r, {
+    height: "95dvh",
+    ...ze
+  } : void 0, P = o ? t === "en" ? "Exit full screen" : "Avslutt fullskjerm" : t === "en" ? "Full screen" : "Fullskjerm", W = S ?? n, U = W || y, $ = /* @__PURE__ */ l(p, { children: [y && _ && /* @__PURE__ */ e(r, {
     dataTest: "cancel-button",
     variant: "outlined",
     disabled: n,
     disabledReason: z,
     onClick: _,
-    children: k
-  }), U && F && /* @__PURE__ */ e(r, {
+    children: y
+  }), W && F && /* @__PURE__ */ e(r, {
     dataTest: "save-button",
     loading: n,
     locale: t,
@@ -64,10 +66,10 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
     /* @__PURE__ */ e("div", {
       ref: w,
       style: { zIndex: 51 },
-      className: f(T.dialog, !i && T.hidden),
+      className: h(T.dialog, !i && T.hidden),
       children: /* @__PURE__ */ l("div", {
         className: H("flex items-center justify-between", !i && "hidden"),
-        "data-testid": E,
+        "data-testid": q,
         children: [/* @__PURE__ */ e("div", {
           className: "truncate text-lg font-semibold text-delta-800",
           children: m
@@ -116,8 +118,8 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
       role: a ? "dialog" : void 0,
       "aria-modal": a ? !0 : void 0,
       "aria-label": a && typeof m == "string" ? m : void 0,
-      className: f("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", j && !i && !o ? j : "", i && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
-      "data-testid": E,
+      className: h("fixed bottom-4 right-4 z-[51] rounded-lg bg-white shadow-[0_4px_40px_0px_rgba(34,33,51,0.4)] transition-all duration-300", j && !i && !o ? j : "", i && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
+      "data-testid": q,
       children: /* @__PURE__ */ l(pe.Provider, {
         value: s,
         children: [/* @__PURE__ */ l("div", {
@@ -142,7 +144,7 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
                     variant: "textGray",
                     size: "small",
                     onClick: A,
-                    endIcon: /* @__PURE__ */ e(fe, {
+                    endIcon: /* @__PURE__ */ e(he, {
                       height: 20,
                       width: 20,
                       color: "text-delta-700"
@@ -158,7 +160,7 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
                     variant: "textGray",
                     size: "small",
                     onClick: () => {
-                      O !== void 0 && q ? q() : ne(!V);
+                      O !== void 0 && D ? D() : ne(!V);
                     },
                     endIcon: o ? /* @__PURE__ */ e(be, {
                       width: 20,
@@ -202,42 +204,42 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
           children: [/* @__PURE__ */ e("div", {
             className: "flex-grow overflow-y-auto overscroll-contain",
             children: typeof x == "function" ? x({ fullScreen: o }) : x
-          }), (Array.isArray(d) && d.length || typeof d == "function") && h || D ? /* @__PURE__ */ l("div", {
-            className: f("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", ie),
+          }), (Array.isArray(d) && d.length || typeof d == "function") && f || G ? /* @__PURE__ */ l("div", {
+            className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", ie),
             children: [
-              Array.isArray(d) && d.length && h ? /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ e(r, {
+              Array.isArray(d) && d.length && f ? /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ e(r, {
                 dataTest: "extra-actions-button",
                 variant: "textGray",
-                startIcon: /* @__PURE__ */ e(he, {
+                startIcon: /* @__PURE__ */ e(fe, {
                   width: 24,
                   height: 24
                 }),
                 onClick: oe,
-                children: h
+                children: f
               }), /* @__PURE__ */ e(ye, {
                 open: de,
                 anchorEl: ae,
                 onClose: se,
-                children: d.map((c) => /* @__PURE__ */ e(ke, {
+                children: d.map((c) => /* @__PURE__ */ e(we, {
                   className: c.className,
                   onClick: c.onClick,
                   children: c.label
                 }, c.label))
-              })] }) : h && typeof d == "function" && /* @__PURE__ */ e(r, {
+              })] }) : f && typeof d == "function" && /* @__PURE__ */ e(r, {
                 dataTest: "extra-action-button",
                 variant: "text",
                 onClick: d,
-                children: h
+                children: f
               }),
               " ",
-              D,
-              W ? /* @__PURE__ */ e("div", {
-                className: f("flex justify-end gap-x-2", G),
+              G,
+              U ? /* @__PURE__ */ e("div", {
+                className: h("flex justify-end gap-x-2", E),
                 children: $
               }) : null
             ]
-          }) : /* @__PURE__ */ e(p, { children: W ? /* @__PURE__ */ e("div", {
-            className: f("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", G),
+          }) : /* @__PURE__ */ e(p, { children: U ? /* @__PURE__ */ e("div", {
+            className: h("flex justify-end gap-x-2 border-t-[1px] border-delta-200 p-4", E),
             children: $
           }) : null })]
         })]
@@ -246,5 +248,5 @@ var Ke = ({ onCloseText: v = "", onMinimizeText: C = "", onExpandText: I = "", o
   ] });
 };
 export {
-  Ke as MinimizableDialog
+  Qe as MinimizableDialog
 };

package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js

@@ -1,56 +1,57 @@
 import { cn as a } from "../../../../helpers/cn.js";
-import { firstTabbable as O } from "../../../../helpers/focusable.js";
+import { firstTabbable as q } from "../../../../helpers/focusable.js";
 import { StyledTooltip as te } from "../../../data-display/tooltip/StyledTooltip.js";
-import { DialogBusyContext as A, useDialogBusyBoundary as ie } from "../../dialog/DialogBusyContext.js";
+import { DialogBusyContext as D, useDialogBusyBoundary as ie } from "../../dialog/DialogBusyContext.js";
 import { useMobileMediaQuery as le } from "../../../../hooks/useMediaQuery.hook.js";
-import { OverlayBackOwnerContext as ne, useBackCloses as oe } from "../../../../hooks/useBackCloses.hook.js";
-import { useFocusTrap as re } from "../../../../hooks/useFocusTrap.hook.js";
-import { CloseBtn as $ } from "../components/CloseBtn.js";
-import { MinimizeBtn as q } from "../components/MinimizeBtn.js";
-import { FullScreenBtn as se } from "../components/FullscreenBtn.js";
+import { OverlayBackOwnerContext as ne, isOverlayBackNavigationPending as oe, useBackCloses as re } from "../../../../hooks/useBackCloses.hook.js";
+import { useFocusTrap as se } from "../../../../hooks/useFocusTrap.hook.js";
+import { fullScreenFieldWidthVars as ce } from "../../../inputs/field-styles.js";
+import { CloseBtn as A } from "../components/CloseBtn.js";
+import { MinimizeBtn as V } from "../components/MinimizeBtn.js";
+import { FullScreenBtn as ae } from "../components/FullscreenBtn.js";
 import h from "./MinimizableDialogV2.module.js";
-import { useTranslations as ce } from "./useTranslations.js";
-import { useControlledProps as ae } from "./useControlledProps.js";
-import de from "clsx";
-import { useId as V, useLayoutEffect as H, useRef as d } from "react";
-import { Fragment as me, jsx as e, jsxs as r } from "react/jsx-runtime";
-var Te = (C) => {
-  const { showCloseIcon: R = !0, showMinimizeIcon: L = !0, showExpandIcon: W = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
+import { useTranslations as de } from "./useTranslations.js";
+import { useControlledProps as me } from "./useControlledProps.js";
+import ue from "clsx";
+import { useId as $, useLayoutEffect as W, useRef as d } from "react";
+import { Fragment as fe, jsx as e, jsxs as r } from "react/jsx-runtime";
+var Ee = (w) => {
+  const { showCloseIcon: N = !0, showMinimizeIcon: H = !0, showExpandIcon: L = !0, enableFullscreen: _ = !0, title: u, label: f, children: Q, open: i, onClose: U, classNameOverrides: b = {
     maximized: "",
     minimized: "",
     fullscreen: ""
-  }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: N, initialFocusRef: S } = C, s = le(), l = ce(K), n = d(null), p = d(null), F = d(null), B = d(null), g = d(!1), y = d(null), x = V(), T = V(), { minimized: t, setMinimized: I, fullScreen: o, setFullScreen: M } = ae(C), c = o && !t, { busy: z, busyReason: k, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
+  }, dataTest: G, actionNode: J, locale: K = "en", busyReason: X, style: R, initialFocusRef: B } = w, s = le(), l = de(K), n = d(null), p = d(null), S = d(null), F = d(null), g = d(!1), y = d(null), x = $(), k = $(), { minimized: t, setMinimized: T, fullScreen: o, setFullScreen: I } = me(w), c = o && !t, { busy: z, busyReason: M, contextValue: E } = ie(X ?? l.waitUntilSaved), v = () => {
     if (z) return !1;
-    I(!1), U();
+    T(!1), U();
   };
-  H(() => {
+  W(() => {
     n.current?.toggleAttribute("inert", t), p.current?.toggleAttribute("inert", !t);
-  }, [t]), H(() => {
-    const w = i && !g.current, m = !i && g.current;
+  }, [t]), W(() => {
+    const C = i && !g.current, m = !i && g.current;
     if (g.current = i, m) {
-      const D = y.current;
-      y.current = null, (!document.activeElement || document.activeElement === document.body) && D?.isConnected && D.focus({ preventScroll: !0 });
+      const O = y.current;
+      y.current = null, (!document.activeElement || document.activeElement === document.body) && O?.isConnected && O.focus({ preventScroll: !0 });
       return;
     }
-    if (!w) return;
+    if (!C) return;
     y.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const P = t ? p.current : n.current, ee = t ? B.current : F.current;
-    (S?.current ?? ee ?? (P ? O(P) : void 0))?.focus({ preventScroll: !0 });
+    const j = t ? p.current : n.current, ee = t ? F.current : S.current;
+    (B?.current ?? ee ?? (j ? q(j) : void 0))?.focus({ preventScroll: !0 });
   }, [
-    S,
+    B,
     t,
     i
   ]);
-  const j = () => {
-    const w = t ? n : p;
-    I(!t), requestAnimationFrame(() => {
-      const m = w.current;
-      m && (m.querySelector('[data-testid="toggle-minimize-btn"]') ?? O(m))?.focus({ preventScroll: !0 });
+  const P = () => {
+    const C = t ? n : p;
+    T(!t), requestAnimationFrame(() => {
+      const m = C.current;
+      m && (m.querySelector('[data-testid="toggle-minimize-btn"]') ?? q(m))?.focus({ preventScroll: !0 });
     });
   };
-  re(i && c, n, v), oe({
-    active: i && c,
-    requestClose: v,
+  se(i && c, n, v), re({
+    active: i && !t,
+    requestClose: () => !c && oe() ? !1 : v(),
     ownerRef: n
   });
   const Y = c ? s ? {
@@ -68,20 +69,21 @@ var Te = (C) => {
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
     maxWidth: "min(1000px, calc(100vw - 32px))",
-    height: "95dvh"
+    height: "95dvh",
+    ...ce
   } : void 0;
   if (!i) return null;
-  const Z = f ? `${T} ${x}` : x;
-  return /* @__PURE__ */ r(me, { children: [
+  const Z = f ? `${k} ${x}` : x;
+  return /* @__PURE__ */ r(fe, { children: [
     /* @__PURE__ */ e("div", {
       ref: p,
       style: {
         zIndex: 51,
-        ...N
+        ...R
       },
       className: a(h["minimized-dialog"], !t && h.hidden, b.minimized),
       children: /* @__PURE__ */ r("div", {
-        className: de("flex items-center justify-between", !t && "hidden"),
+        className: ue("flex items-center justify-between", !t && "hidden"),
         "data-testid": G,
         children: [/* @__PURE__ */ e("div", {
           className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
@@ -95,16 +97,16 @@ var Te = (C) => {
           })
         }), /* @__PURE__ */ r("div", {
           className: "flex items-center gap-x-1",
-          children: [/* @__PURE__ */ e(q, {
+          children: [/* @__PURE__ */ e(V, {
             type: "expand",
-            visibility: W,
-            onClick: j,
+            visibility: L,
+            onClick: P,
             tooltipTitle: l.expand
-          }), /* @__PURE__ */ e($, {
-            buttonRef: B,
-            showCloseIcon: R,
+          }), /* @__PURE__ */ e(A, {
+            buttonRef: F,
+            showCloseIcon: N,
             onClick: v,
-            disabledReason: z ? k : void 0,
+            disabledReason: z ? M : void 0,
             tooltipTitle: l.close
           })]
         })]
@@ -113,13 +115,13 @@ var Te = (C) => {
     c && /* @__PURE__ */ e("div", {
       className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
       onClick: () => {
-        M(!1);
+        I(!1);
       }
     }),
     /* @__PURE__ */ e("div", {
       style: {
         zIndex: 51,
-        ...N,
+        ...R,
         ...Y
       },
       ref: n,
@@ -134,7 +136,7 @@ var Te = (C) => {
           children: [/* @__PURE__ */ r("div", {
             className: "flex items-center justify-between",
             children: [f ? /* @__PURE__ */ e("div", {
-              id: T,
+              id: k,
               className: "text-sm text-delta-700",
               children: f
             }) : /* @__PURE__ */ e("div", {
@@ -144,29 +146,29 @@ var Te = (C) => {
             }), /* @__PURE__ */ r("div", {
               className: "flex items-center gap-x-1",
               children: [
-                /* @__PURE__ */ e(A.Provider, {
+                /* @__PURE__ */ e(D.Provider, {
                   value: E,
                   children: J
                 }),
-                /* @__PURE__ */ e(q, {
-                  visibility: L && !s && !o,
+                /* @__PURE__ */ e(V, {
+                  visibility: H && !s && !o,
                   type: "minimize",
-                  onClick: j,
+                  onClick: P,
                   tooltipTitle: l.minimize
                 }),
-                /* @__PURE__ */ e(se, {
+                /* @__PURE__ */ e(ae, {
                   showFullScreenIcon: _ && !s,
                   fullScreen: o,
                   onClick: () => {
-                    M(!o);
+                    I(!o);
                   },
                   tooltipTitle: o ? l.exitFullscreen : l.fullscreen
                 }),
-                /* @__PURE__ */ e($, {
-                  buttonRef: F,
-                  showCloseIcon: R,
+                /* @__PURE__ */ e(A, {
+                  buttonRef: S,
+                  showCloseIcon: N,
                   onClick: v,
-                  disabledReason: z ? k : void 0,
+                  disabledReason: z ? M : void 0,
                   tooltipTitle: l.close
                 })
               ]
@@ -178,7 +180,7 @@ var Te = (C) => {
           })]
         }), /* @__PURE__ */ e("div", {
           className: a(t && "hidden", "flex flex-grow flex-col overflow-y-auto overscroll-contain"),
-          children: /* @__PURE__ */ e(A.Provider, {
+          children: /* @__PURE__ */ e(D.Provider, {
             value: E,
             children: Q
           })
@@ -188,5 +190,5 @@ var Te = (C) => {
   ] });
 };
 export {
-  Te as MinimizableDialogV2
+  Ee as MinimizableDialogV2
 };

package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js

@@ -1,61 +1,64 @@
 import { cn as v } from "../../../../helpers/cn.js";
-import { StyledTooltip as P } from "../../../data-display/tooltip/StyledTooltip.js";
-import { CloseIcon as k } from "../../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as Q } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledChip as U } from "../../../data-display/chip/StyledChip.js";
-import { StyledInteractiveChip as j } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
-import { StyledButton as X } from "../../button/StyledButton.js";
-import { useHelperAlertRole as Y } from "../../../../helpers/useHelperAlertRole.js";
-import { warnMissingErrorMessage as Z } from "../../../../helpers/warnMissingErrorMessage.js";
-import { useWrap as _ } from "../helpers/useWrap.js";
-import { DynamicSelectTitle as ee } from "./DynamicSelectTitle.js";
+import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
+import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as U } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as X } from "../../../data-display/chip/StyledChip.js";
+import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledButton as Y } from "../../button/StyledButton.js";
+import { useHelperAlertRole as Z } from "../../../../helpers/useHelperAlertRole.js";
+import { warnMissingErrorMessage as _ } from "../../../../helpers/warnMissingErrorMessage.js";
+import { fieldWidthStyle as ee } from "../../field-styles.js";
+import { useWrap as te } from "../helpers/useWrap.js";
+import { DynamicSelectTitle as le } from "./DynamicSelectTitle.js";
 import { Skeleton as N } from "../../../mui-compat/Skeleton.js";
-import { forwardRef as te, useEffect as le, useId as re } from "react";
-import { jsx as t, jsxs as T } from "react/jsx-runtime";
-var ge = te((O, V) => {
-  const { options: d, dataTest: A, value: r, readOnly: i, multiple: n, title: D, titleSize: R, disabled: b, onChange: p, required: z, error: f, helperText: S, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: C, loading: $, size: g, locale: B = "en", clearSelectionLabel: q } = O, G = re();
-  Z("DynamicInteractiveChipGroup", f, S);
-  const K = Y(f), { containerRef: m, wrapDisabled: y } = _({ dependencyList: [d, d.length] });
-  le(() => {
+import { forwardRef as re, useEffect as ie, useId as ae } from "react";
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+var ve = re((V, A) => {
+  const { options: d, dataTest: D, value: r, readOnly: a, multiple: n, title: R, titleSize: z, width: T = "full", disabled: b, onChange: p, required: E, error: f, helperText: C, valueKey: L = "value", labelKey: $ = "label", renderLabel: o, getOptionTooltip: I, loading: B, size: y, locale: q = "en", clearSelectionLabel: G } = V, K = ae();
+  _("DynamicInteractiveChipGroup", f, C);
+  const M = Z(f), { containerRef: m, wrapDisabled: w } = te({ dependencyList: [d, d.length] });
+  ie(() => {
     m.current && (m.current.inert = !0);
   }, [m]);
-  const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
-    const l = w(e);
+  const u = (e) => typeof e == "object" ? e?.[$]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[L] : e, c = (e) => {
+    const l = g(e);
     return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
-  }, s = (e, l) => w(e) === w(l), M = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
+  }, s = (e, l) => g(e) === g(l), W = n ? Array.isArray(r) && r.length > 0 : r != null, F = (e) => {
     if (!n) {
-      const a = s(e, r) ? null : e;
-      if (a === null) return;
-      p(a);
+      const i = s(e, r) ? null : e;
+      if (i === null) return;
+      p(i);
       return;
     }
     const l = r ?? [];
-    p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
-  }, h = i ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !i);
-  return /* @__PURE__ */ T("div", {
-    "data-testid": `${A}-dynamic-radio-group`,
+    p(l.find((i) => s(i, e)) ? l.filter((i) => !s(i, e)) : [...l, e]);
+  }, h = a ? d.filter((e) => !!(n ? r?.find((l) => s(l, e)) : s(r, e))) : d, H = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !a);
+  return /* @__PURE__ */ S("div", {
+    "data-testid": `${D}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
+    "data-field-width": T,
+    style: ee(T),
     children: [
-      /* @__PURE__ */ t(ee, {
-        title: D,
-        titleSize: R
+      /* @__PURE__ */ t(le, {
+        title: R,
+        titleSize: z
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
         ref: m,
         className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: h.map((e) => /* @__PURE__ */ t(j, {
+        children: h.map((e) => /* @__PURE__ */ t(O, {
           className: "w-fit",
-          readOnly: i,
+          readOnly: a,
           type: n ? "checkbox" : "radio",
           dataTest: `ic-${c(e)}-hidden`,
           label: o ? o(e) : u(e)
         }, c(e)))
       }),
       /* @__PURE__ */ t("div", {
-        className: v("flex flex-wrap gap-2", y && "flex-col gap-1"),
-        children: $ ? /* @__PURE__ */ T("div", {
+        className: v("flex flex-wrap gap-2", w && "flex-col gap-1"),
+        children: B ? /* @__PURE__ */ S("div", {
           className: "flex flex-wrap gap-2",
           children: [
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" }),
@@ -63,34 +66,34 @@ var ge = te((O, V) => {
             /* @__PURE__ */ t(N, { className: "h-[32px] w-[60px]" })
           ]
         }) : h?.length ? h.map((e, l) => {
-          const a = !!(n ? r?.find((J) => s(J, e)) : s(r, e)), W = C ? C(e) : null;
-          if (i && !a) return null;
-          const x = typeof e == "object" ? !!e?.disabled : !1, I = !x && !i && l === H ? V : void 0;
-          return /* @__PURE__ */ t(P, {
-            title: W,
+          const i = !!(n ? r?.find((P) => s(P, e)) : s(r, e)), J = I ? I(e) : null;
+          if (a && !i) return null;
+          const x = typeof e == "object" ? !!e?.disabled : !1, k = !x && !a && l === H ? A : void 0;
+          return /* @__PURE__ */ t(Q, {
+            title: J,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
               className: v(x && "cursor-not-allowed"),
-              children: i && !y ? /* @__PURE__ */ t(U, {
-                ref: I,
+              children: a && !w ? /* @__PURE__ */ t(X, {
+                ref: k,
                 disabled: !!b || x,
                 classes: { root: "min-h-[32px] h-full" },
                 className: "w-fit",
                 dataTest: `ic-${c(e)}`,
                 label: o ? o(e) : u(e)
-              }) : /* @__PURE__ */ t(j, {
-                ref: I,
+              }) : /* @__PURE__ */ t(O, {
+                ref: k,
                 disabled: !!b || x,
-                classes: y ? {
+                classes: w ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
                 } : { root: "min-h-[32px] h-full" },
                 className: "w-fit",
-                readOnly: i,
+                readOnly: a,
                 type: n ? "checkbox" : "radio",
                 dataTest: `ic-${c(e)}`,
-                checked: a,
-                size: g,
+                checked: i,
+                size: y,
                 onClick: () => F(e),
                 label: o ? o(e) : u(e)
               })
@@ -98,39 +101,39 @@ var ge = te((O, V) => {
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !z && M && !i && !b && /* @__PURE__ */ t(X, {
+      !E && W && !a && !b && /* @__PURE__ */ t(Y, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: g === "medium" ? /* @__PURE__ */ t(k, {
+        startIcon: y === "medium" ? /* @__PURE__ */ t(j, {
           height: 24,
           width: 24,
           className: "size-6"
-        }) : /* @__PURE__ */ t(k, {
+        }) : /* @__PURE__ */ t(j, {
           height: 20,
           width: 20,
           className: "size-5"
         }),
         className: "w-fit",
-        size: g,
+        size: y,
         onClick: () => p(n ? [] : null),
-        children: q ?? (B === "en" ? "Clear selection" : "Fjern valget")
+        children: G ?? (q === "en" ? "Clear selection" : "Fjern valget")
       }),
-      /* @__PURE__ */ T("div", {
-        id: G,
-        role: K,
+      /* @__PURE__ */ S("div", {
+        id: K,
+        role: M,
         className: v("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
-        children: [f && /* @__PURE__ */ t(Q, {
+        children: [f && /* @__PURE__ */ t(U, {
           width: 20,
           height: 20,
           className: "min-w-5"
         }), /* @__PURE__ */ t("span", {
           className: "line-clamp-1",
-          children: S
+          children: C
         })]
       })
     ]
   });
 });
 export {
-  ge as DynamicInteractiveChipGroup
+  ve as DynamicInteractiveChipGroup
 };