asma-ui-core 3.60.0 → 3.61.1

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

@@ -17,9 +17,9 @@ import H from "clsx";
 import { useRef as fe, useState as J } from "react";
 import { Fragment as z, jsx as e, jsxs as i } from "react/jsx-runtime";
 var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", onFullScreenText: M = "", showCloseIcon: j = !0, showMinimizeIcon: Q = !0, showExpandIcon: T = !0, showFullScreenIcon: W = !0, title: s, label: b, children: g, open: C, onClose: x, className: _ = "", primaryButtonText: w, primaryButtonLoading: k = !1, secondaryButtonText: c, onPrimaryButtonClick: v, onSecondaryButtonClick: p, dataTest: F, actionNode: X, extraActions: r, extraActionsText: m, btnContainerClassName: G, footerClassName: Y, footerInfo: D, locale: l = "en", enableFullscreen: Z = !0, fullScreenState: E, handleFullScreenState: L }) => {
-  const [d, A] = J(!1), [R, P] = J(!1), { open: B, anchorEl: ee, handleOpen: ie, handleClose: te } = he(), S = fe(null), o = E ?? R, a = o && !d;
-  if (se(C && a, S, x), !C) return null;
-  const le = a ? {
+  const [d, A] = J(!1), [R, P] = J(!1), { open: B, anchorEl: ee, handleOpen: ie, handleClose: te } = he(), S = fe(null), a = E ?? R, n = a && !d;
+  if (se(C && n, S, x), !C) return null;
+  const le = n ? {
     right: "auto",
     bottom: "auto",
     left: "50%",
@@ -27,11 +27,11 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
     transform: "translate(-50%, -50%)",
     width: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
-  } : void 0, O = o ? l === "en" ? "Exit full screen" : "Avslutt fullskjerm" : l === "en" ? "Full screen" : "Fullskjerm", y = w ?? k, U = y || c, V = () => {
+  } : void 0, O = a ? l === "en" ? "Exit full screen" : "Avslutt fullskjerm" : l === "en" ? "Full screen" : "Fullskjerm", y = w ?? k, U = y || c, V = () => {
     A(!d);
   };
   return /* @__PURE__ */ i(z, { children: [
-    a && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
+    n && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[51] bg-[rgb(98,110,126)] bg-opacity-70" }),
     /* @__PURE__ */ e("div", {
       style: { zIndex: 51 },
       className: h(q.dialog, !d && q.hidden),
@@ -80,10 +80,10 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
     /* @__PURE__ */ i("div", {
       ref: S,
       style: le,
-      role: a ? "dialog" : void 0,
-      "aria-modal": a ? !0 : void 0,
-      "aria-label": a && typeof s == "string" ? s : void 0,
-      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", _ && !d && !o ? _ : "", d && "!h-0 !w-0 opacity-0 duration-0", a && "fixed duration-0"),
+      role: n ? "dialog" : void 0,
+      "aria-modal": n ? !0 : void 0,
+      "aria-label": n && typeof s == "string" ? s : void 0,
+      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", _ && !d && !a ? _ : "", d && "!h-0 !w-0 opacity-0 duration-0", n && "fixed duration-0"),
       "data-testid": F,
       children: [/* @__PURE__ */ i("div", {
         className: "flex flex-col gap-y-2 border-b-[1px] border-delta-200 p-4",
@@ -99,7 +99,7 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
             className: "flex items-center gap-x-1",
             children: [
               X,
-              Q && /* @__PURE__ */ e(f, {
+              Q && !a && /* @__PURE__ */ e(f, {
                 title: l === "en" ? "Minimize" : "Minimer",
                 children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(t, {
                   dataTest: "minimize-button",
@@ -122,10 +122,10 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
                   "aria-label": M ? void 0 : O,
                   variant: "textGray",
                   size: "small",
-                  onClick: (n) => {
-                    E !== void 0 && L ? L() : P(!R), n.detail !== 0 && n.currentTarget.blur();
+                  onClick: (o) => {
+                    E !== void 0 && L ? L() : P(!R), o.detail !== 0 && o.currentTarget.blur();
                   },
-                  endIcon: o ? /* @__PURE__ */ e(oe, {
+                  endIcon: a ? /* @__PURE__ */ e(oe, {
                     width: 20,
                     height: 20,
                     color: "text-delta-700"
@@ -160,10 +160,10 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
           children: s
         })]
       }), /* @__PURE__ */ i("div", {
-        className: H("flex flex-col", o && !d && "h-[87dvh]"),
+        className: H("flex flex-col", a && !d && "h-[87dvh]"),
         children: [/* @__PURE__ */ e("div", {
           className: "flex-grow overflow-y-auto",
-          children: typeof g == "function" ? g({ fullScreen: o }) : g
+          children: typeof g == "function" ? g({ fullScreen: a }) : g
         }), (Array.isArray(r) && r.length || typeof r == "function") && m || D ? /* @__PURE__ */ i("div", {
           className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", Y),
           children: [
@@ -180,11 +180,11 @@ var Ee = ({ onCloseText: u = "", onMinimizeText: N = "", onExpandText: I = "", o
               open: B,
               anchorEl: ee,
               onClose: te,
-              children: r.map((n) => /* @__PURE__ */ e(me, {
-                className: n.className,
-                onClick: n.onClick,
-                children: n.label
-              }, n.label))
+              children: r.map((o) => /* @__PURE__ */ e(me, {
+                className: o.className,
+                onClick: o.onClick,
+                children: o.label
+              }, o.label))
             })] }) : m && typeof r == "function" && /* @__PURE__ */ e(t, {
               dataTest: "extra-action-button",
               variant: "text",

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

@@ -10,17 +10,17 @@ import { useTranslations as V } from "./useTranslations.js";
 import { useControlledProps as _ } from "./useControlledProps.js";
 import $ from "clsx";
 import { useRef as A } from "react";
-import { Fragment as E, jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Fragment as E, jsx as e, jsxs as o } from "react/jsx-runtime";
 var ee = (f) => {
-  const { showCloseIcon: u = !0, showMinimizeIcon: N = !0, showExpandIcon: w = !0, enableFullscreen: C = !0, title: o, label: m, children: F, open: h, onClose: T, classNameOverrides: d = {
+  const { showCloseIcon: u = !0, showMinimizeIcon: N = !0, showExpandIcon: w = !0, enableFullscreen: C = !0, title: n, label: m, children: F, open: h, onClose: T, classNameOverrides: d = {
     maximized: "",
     minimized: "",
     fullscreen: ""
-  }, dataTest: M, actionNode: S, locale: k = "en", style: v } = f, s = B(), n = V(k), b = A(null), { minimized: i, setMinimized: x, fullScreen: a, setFullScreen: g } = _(f), l = a && !i, p = () => {
+  }, dataTest: M, actionNode: S, locale: k = "en", style: v } = f, s = B(), a = V(k), b = A(null), { minimized: i, setMinimized: x, fullScreen: l, setFullScreen: g } = _(f), t = l && !i, p = () => {
     x(!1), T();
   };
-  D(h && l, b, p);
-  const I = l ? {
+  D(h && t, b, p);
+  const I = t ? {
     right: "auto",
     bottom: "auto",
     left: "50%",
@@ -30,27 +30,27 @@ var ee = (f) => {
     maxWidth: "min(1000px, calc(100vw - 32px))",
     height: "95dvh"
   } : void 0;
-  return h ? /* @__PURE__ */ t(E, { children: [
+  return h ? /* @__PURE__ */ o(E, { children: [
     /* @__PURE__ */ e("div", {
       style: {
         zIndex: 51,
         ...v
       },
       className: r(c["minimized-dialog"], !i && c.hidden, d.minimized),
-      children: /* @__PURE__ */ t("div", {
+      children: /* @__PURE__ */ o("div", {
         className: $("flex items-center justify-between", !i && "hidden"),
         "data-testid": M,
         children: [/* @__PURE__ */ e("div", {
           className: "max-w-[303px] truncate pr-1 text-lg font-semibold text-delta-800",
           children: /* @__PURE__ */ e(j, {
-            title: o,
+            title: n,
             placement: "top",
             children: /* @__PURE__ */ e("div", {
               className: "truncate",
-              children: o
+              children: n
             })
           })
-        }), /* @__PURE__ */ t("div", {
+        }), /* @__PURE__ */ o("div", {
           className: "flex items-center gap-x-1",
           children: [/* @__PURE__ */ e(z, {
             type: "expand",
@@ -58,72 +58,72 @@ var ee = (f) => {
             onClick: () => {
               x(!i);
             },
-            tooltipTitle: n.expand
+            tooltipTitle: a.expand
           }), /* @__PURE__ */ e(y, {
             showCloseIcon: u,
             onClick: p,
-            tooltipTitle: n.close
+            tooltipTitle: a.close
           })]
         })]
       })
     }),
-    l && /* @__PURE__ */ e("div", {
+    t && /* @__PURE__ */ e("div", {
       className: "fixed inset-0 z-[52] bg-[rgb(98,110,126)] bg-opacity-70",
       onClick: () => {
         g(!1);
       }
     }),
-    /* @__PURE__ */ t("div", {
+    /* @__PURE__ */ o("div", {
       style: {
         zIndex: 51,
         ...v,
         ...I
       },
       ref: b,
-      role: l ? "dialog" : void 0,
-      "aria-modal": l ? !0 : void 0,
-      "aria-label": l && typeof o == "string" ? o : void 0,
-      className: r(c.dialog, i && c.hidden, !a && d.maximized, a && d.fullscreen, l && "fixed z-[53] duration-0"),
-      children: [/* @__PURE__ */ t("div", {
+      role: t ? "dialog" : void 0,
+      "aria-modal": t ? !0 : void 0,
+      "aria-label": t && typeof n == "string" ? n : void 0,
+      className: r(c.dialog, i && c.hidden, !l && d.maximized, l && d.fullscreen, t && "fixed z-[53] duration-0"),
+      children: [/* @__PURE__ */ o("div", {
         className: r("flex flex-col border-b-[1px] border-delta-200 px-4", s ? "py-3" : "py-4"),
-        children: [/* @__PURE__ */ t("div", {
+        children: [/* @__PURE__ */ o("div", {
           className: "flex items-center justify-between",
           children: [m ? /* @__PURE__ */ e("div", {
             className: "text-sm text-delta-700",
             children: m
           }) : /* @__PURE__ */ e("div", {
             className: r("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-            children: o
-          }), /* @__PURE__ */ t("div", {
+            children: n
+          }), /* @__PURE__ */ o("div", {
             className: "flex items-center gap-x-1",
             children: [
               S,
               /* @__PURE__ */ e(z, {
-                visibility: N && !s,
+                visibility: N && !s && !l,
                 type: "minimize",
                 onClick: () => {
                   x(!i);
                 },
-                tooltipTitle: n.minimize
+                tooltipTitle: a.minimize
               }),
               /* @__PURE__ */ e(R, {
                 showFullScreenIcon: C && !s,
-                fullScreen: a,
+                fullScreen: l,
                 onClick: () => {
-                  g(!a);
+                  g(!l);
                 },
-                tooltipTitle: a ? n.exitFullscreen : n.fullscreen
+                tooltipTitle: l ? a.exitFullscreen : a.fullscreen
               }),
               /* @__PURE__ */ e(y, {
                 showCloseIcon: u,
                 onClick: p,
-                tooltipTitle: n.close
+                tooltipTitle: a.close
               })
             ]
           })]
         }), m && /* @__PURE__ */ e("div", {
           className: r("font-semibold text-delta-800", s ? "line-clamp-2 text-xl" : "line-clamp-1 text-2xl"),
-          children: o
+          children: n
         })]
       }), /* @__PURE__ */ e("div", {
         className: r(i && "hidden", "flex flex-grow flex-col overflow-y-auto"),

package/dist/components/inputs/select/StyledSelect.js

@@ -1,45 +1,45 @@
 import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as fe } from "../../../helpers/sx.js";
-import { ChevronDownIcon as pe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as me } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as ye } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { TOP_LAYER_PROPS as ge, TOP_LAYER_RESET_STYLE as xe, getOpenModalDialogAncestor as be, useTopLayerRef as he } from "../../../hooks/useTopLayer.hook.js";
-import { outlineClass as we } from "../field-styles.js";
-import { useFormControlContext as Ae } from "../../miscellaneous/FormControlContext.js";
-import { StyledFormHelperText as ve } from "../../miscellaneous/StyledFormHelperText.js";
-import { Children as S, cloneElement as Re, isValidElement as E, useEffect as C, useMemo as ke, useRef as De, useState as N } from "react";
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import { FloatingPortal as Fe, autoUpdate as Se, flip as Ee, offset as Ce, shift as Ne, size as _e, useClick as qe, useDismiss as Pe, useFloating as Te, useInteractions as Ve, useMergeRefs as K, useRole as je } from "@floating-ui/react";
-var Ge = ({ dataTest: _, value: q, defaultValue: L, onChange: P, error: M, errorText: H, allowClear: T, disabled: O, readOnly: c, name: p, placeholder: b, displayEmpty: h, multiple: d, renderValue: V, fullWidth: Y, className: z, style: W, sx: $, variant: G, children: w, MenuProps: J, onFocus: Q, onBlur: X, labelId: m }) => {
-  const a = Ae(), j = `${_}-listbox`, A = G === "standard", I = M ?? a?.error ?? !1, s = O ?? a?.disabled ?? !1, [o, y] = N(!1), [v, R] = N(!1), [Z, U] = N(L), k = q !== void 0, r = k ? q : Z, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, i = De(null), { refs: u, floatingStyles: ee, context: D } = Te({
+import { resolveSx as ge } from "../../../helpers/sx.js";
+import { ChevronDownIcon as xe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as ye } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as be } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { TOP_LAYER_PROPS as he, TOP_LAYER_RESET_STYLE as we, getOpenModalDialogAncestor as Ae, useTopLayerRef as ve } from "../../../hooks/useTopLayer.hook.js";
+import { outlineClass as Re } from "../field-styles.js";
+import { useFormControlContext as ke } from "../../miscellaneous/FormControlContext.js";
+import { StyledFormHelperText as Fe } from "../../miscellaneous/StyledFormHelperText.js";
+import { Children as C, cloneElement as De, isValidElement as E, useEffect as N, useMemo as Se, useRef as Ce, useState as _ } from "react";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { FloatingPortal as Ee, autoUpdate as Ne, flip as _e, offset as qe, shift as Pe, size as Te, useClick as Ve, useDismiss as je, useFloating as Be, useInteractions as Ie, useMergeRefs as L, useRole as Ue } from "@floating-ui/react";
+var Xe = ({ dataTest: q, value: P, defaultValue: M, onChange: T, error: H, errorText: O, allowClear: V, disabled: Y, readOnly: c, name: m, placeholder: w, displayEmpty: A, multiple: d, renderValue: j, fullWidth: z, className: W, style: $, sx: G, variant: J, children: v, MenuProps: Q, onFocus: X, onBlur: Z, labelId: p }) => {
+  const a = ke(), B = `${q}-listbox`, g = J === "standard", I = H ?? a?.error ?? !1, s = Y ?? a?.disabled ?? !1, [o, x] = _(!1), [y, R] = _(!1), [ee, U] = _(M), k = P !== void 0, r = k ? P : ee, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, i = Ce(null), { refs: u, floatingStyles: te, context: F } = Be({
     open: o,
-    onOpenChange: y,
+    onOpenChange: x,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: Se,
+    whileElementsMounted: Ne,
     middleware: [
-      Ce(4),
-      Ee({ padding: 8 }),
-      Ne({ padding: 8 }),
-      _e({ apply({ rects: e, elements: t }) {
+      qe(4),
+      _e({ padding: 8 }),
+      Pe({ padding: 8 }),
+      Te({ apply({ rects: e, elements: t }) {
         t.floating.style.minWidth = `${e.reference.width + 20}px`;
       } })
     ]
-  }), { getReferenceProps: te, getFloatingProps: re } = Ve([
-    qe(D, { enabled: !s && !c }),
-    Pe(D),
-    je(D, { role: "listbox" })
-  ]), oe = K([u.setReference]), se = K([he(u.setFloating), i]), ne = ke(() => o ? be(u.reference.current) : void 0, [o, u]);
-  C(() => a?.setFocused(o || v), [
+  }), { getReferenceProps: re, getFloatingProps: oe } = Ie([
+    Ve(F, { enabled: !s && !c }),
+    je(F),
+    Ue(F, { role: "listbox" })
+  ]), se = L([u.setReference]), ne = L([ve(u.setFloating), i]), le = Se(() => o ? Ae(u.reference.current) : void 0, [o, u]);
+  N(() => a?.setFocused(o || y), [
     o,
-    v,
+    y,
     a
-  ]), C(() => a?.setFilled(l || !!b || !!h), [
+  ]), N(() => a?.setFilled(l || !!w || !!A), [
     l,
-    b,
-    h,
+    w,
+    A,
     a
-  ]), C(() => {
+  ]), N(() => {
     if (!o) return;
     const e = requestAnimationFrame(() => {
       const t = i.current?.querySelector('[role="option"][aria-selected="true"]');
@@ -47,136 +47,136 @@ var Ge = ({ dataTest: _, value: q, defaultValue: L, onChange: P, error: M, error
     });
     return () => cancelAnimationFrame(e);
   }, [o]);
-  const le = (e, t) => {
-    const g = d ? Array.isArray(r) && r.includes(e) ? r.filter((F) => F !== e) : [...Array.isArray(r) ? r : [], e] : e;
-    k || U(g), P?.({ target: {
-      value: g,
-      name: p
-    } }, t), d || (y(!1), requestAnimationFrame(() => u.domReference.current?.focus()));
-  }, B = () => {
+  const ae = (e, t) => {
+    const b = d ? Array.isArray(r) && r.includes(e) ? r.filter((S) => S !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    k || U(b), T?.({ target: {
+      value: b,
+      name: m
+    } }, t), d || (x(!1), requestAnimationFrame(() => u.domReference.current?.focus()));
+  }, K = () => {
     const e = d ? [] : "";
-    k || U(e), P?.({ target: {
+    k || U(e), T?.({ target: {
       value: e,
-      name: p
-    } }, null), y(!1), R(!1);
-  }, ae = S.map(w, (e) => {
+      name: m
+    } }, null), x(!1), R(!1);
+  }, ie = C.map(v, (e) => {
     if (!E(e)) return e;
     const t = e.props.value;
-    return Re(e, {
+    return De(e, {
       selected: d ? Array.isArray(r) && r.includes(t) : t === r,
-      onClick: () => le(t, e.props.children)
+      onClick: () => ae(t, e.props.children)
     });
-  }), ie = S.toArray(w).find((e) => E(e) && e.props.value === r), ce = V ? V(r) : d && Array.isArray(r) ? S.toArray(w).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
+  }), ce = C.toArray(v).find((e) => E(e) && e.props.value === r), de = j ? j(r) : d && Array.isArray(r) ? C.toArray(v).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
     const t = e.props.children;
     return typeof t == "string" || typeof t == "number" ? String(t) : "";
-  }).join(", ") : ie?.props.children, de = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && T && l && !s && !c) {
-      e.preventDefault(), B();
+  }).join(", ") : ce?.props.children, ue = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && V && l && !s && !c) {
+      e.preventDefault(), K();
       return;
     }
-    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), y(!0), requestAnimationFrame(() => {
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || s || c || (e.preventDefault(), x(!0), requestAnimationFrame(() => {
       if (i.current?.querySelector('[role="option"][aria-selected="true"]')) return;
       const t = i.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
       t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
     }));
-  }, ue = (e) => {
+  }, fe = (e) => {
     const t = i.current ? Array.from(i.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
     if (t.length === 0) return;
-    const g = t.findIndex((F) => F === document.activeElement);
-    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(g + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  };
-  return /* @__PURE__ */ x("div", {
-    className: f("group relative inline-flex flex-col", Y && "w-full", z),
+    const b = t.findIndex((S) => S === document.activeElement);
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(b + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
+  }, D = g && (o || y), me = s ? "text-delta-300" : D ? "text-gama-500" : "text-delta-800", pe = s ? "text-delta-300" : "text-delta-700";
+  return /* @__PURE__ */ h("div", {
+    className: f("group relative inline-flex flex-col", z && "w-full", W),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...fe($),
-      ...W
+      ...ge(G),
+      ...$
     },
     children: [
-      /* @__PURE__ */ x("button", {
-        ref: oe,
+      /* @__PURE__ */ h("button", {
+        ref: se,
         type: "button",
-        "data-testid": _,
-        ...te({ onKeyDown: de }),
+        "data-testid": q,
+        ...re({ onKeyDown: ue }),
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-expanded": o,
-        "aria-controls": j,
-        "aria-labelledby": m,
-        "aria-label": m ? void 0 : p,
+        "aria-controls": B,
+        "aria-labelledby": p,
+        "aria-label": p ? void 0 : m,
         "aria-disabled": s ? !0 : void 0,
         disabled: s,
         onFocus: (e) => {
-          R(!0), Q?.(e);
+          R(!0), X?.(e);
         },
         onBlur: (e) => {
-          R(!1), X?.(e);
+          R(!1), Z?.(e);
         },
-        style: { minWidth: l && !A ? 105 : void 0 },
-        className: f("relative flex w-full items-center justify-between bg-transparent text-left text-delta-800 outline-none", "h-10 rounded-lg border-0 px-3 text-base", A && "min-w-0", s && "cursor-not-allowed text-delta-300", c && "pointer-events-none"),
+        style: { minWidth: l && !g ? 105 : void 0 },
+        className: f("relative flex w-full items-center justify-between text-left outline-none", "h-10 rounded-lg border-0 px-3 text-base transition-colors", D ? "bg-gama-50" : "bg-transparent", me, g && "min-w-0", s && "cursor-not-allowed", c && "pointer-events-none"),
         children: [
           /* @__PURE__ */ n("span", {
             className: f("min-w-0 flex-1 truncate", !l && "text-delta-500"),
-            children: l || h ? ce : b
+            children: l || A ? de : w
           }),
-          /* @__PURE__ */ x("span", {
+          /* @__PURE__ */ h("span", {
             className: "flex items-center gap-1",
-            children: [T && l && !s && /* @__PURE__ */ n("span", {
+            children: [V && l && !s && /* @__PURE__ */ n("span", {
               "aria-hidden": "true",
               "data-testid": "select-clear-button",
               className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
               onClick: (e) => {
-                e.stopPropagation(), B();
+                e.stopPropagation(), K();
               },
-              children: /* @__PURE__ */ n(me, {
+              children: /* @__PURE__ */ n(ye, {
                 width: 18,
                 height: 18
               })
-            }), /* @__PURE__ */ n(pe, {
+            }), /* @__PURE__ */ n(xe, {
               width: 24,
               height: 24,
-              className: f("shrink-0 transition-transform", s ? "text-delta-300" : "text-delta-700", o && "rotate-180")
+              className: f("shrink-0 transition-transform", D ? "text-gama-500" : pe, o && "rotate-180")
             })]
           }),
-          /* @__PURE__ */ n("div", { className: we({
-            focused: o || v,
+          /* @__PURE__ */ n("div", { className: Re({
+            focused: o || y,
             error: I,
             disabled: s,
             readOnly: c,
-            borderless: A
+            borderless: g
           }) })
         ]
       }),
-      o && /* @__PURE__ */ n(Fe, {
-        root: ne,
+      o && /* @__PURE__ */ n(Ee, {
+        root: le,
         children: /* @__PURE__ */ n("ul", {
-          ref: se,
-          id: j,
+          ref: ne,
+          id: B,
           role: "listbox",
-          "aria-labelledby": m,
-          "aria-label": m ? void 0 : p,
-          ...ge,
+          "aria-labelledby": p,
+          "aria-label": p ? void 0 : m,
+          ...he,
           style: {
-            ...xe,
-            ...ee,
+            ...we,
+            ...te,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },
-          ...re(),
-          onKeyDown: ue,
-          className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", J?.className),
-          children: ae
+          ...oe(),
+          onKeyDown: fe,
+          className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", Q?.className),
+          children: ie
         })
       }),
-      I && /* @__PURE__ */ x(ve, {
+      I && /* @__PURE__ */ h(Fe, {
         className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-        children: [/* @__PURE__ */ n(ye, {
+        children: [/* @__PURE__ */ n(be, {
           width: 20,
           height: 20
-        }), H ?? "Required"]
+        }), O ?? "Required"]
       })
     ]
   });
 };
 export {
-  Ge as StyledSelect
+  Xe as StyledSelect
 };

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.60.0",
+    "version": "3.61.1",
     "type": "module",
     "sideEffects": [
         "**/*.css",