impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.9

package/dist/components/forms/select/components/SelectAllRow.js

@@ -1,20 +1,20 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
 import { Checkmark as k } from "impact-nova-icons";
 import { cn as m } from "../../../../lib/utils.js";
-import { SELECT_ALL_INDEX as y } from "../select.constants.js";
+import { SELECT_ALL_INDEX as v } from "../select.constants.js";
 function j({
   selectFieldId: b,
   id: t,
   highlightedIndex: p,
-  isDisabled: f,
-  isReadOnly: u,
-  maxSelectableOptions: c,
+  isDisabled: u,
+  isReadOnly: f,
+  maxSelectableOptions: i,
   visibleStats: h,
   selectAllLabel: o,
   unselectAllLabel: d,
   onSelectAll: x
 }) {
-  const { totalVisible: a, selectedVisible: r } = h, l = c ? Math.min(a, c) : a, s = a === 0 ? !1 : r > 0 && r < l ? "indeterminate" : r >= l, n = a > 0 && r >= l, i = f || u;
+  const { totalVisible: a, selectedVisible: r } = h, n = i ? Math.min(a, i) : a, s = a === 0 ? !1 : r > 0 && r < n ? "indeterminate" : r >= n, l = a > 0 && r >= n, c = u || f;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -26,16 +26,16 @@ function j({
           type: "button",
           id: `${b}-option-select-all`,
           className: m(
-            "flex items-center justify-between cursor-pointer rounded-md hover:bg-gray-100 transition-colors py-[6px] px-3 w-full border-0 bg-transparent text-start",
-            p === y && "ring-2 ring-inset ring-primary bg-accent",
-            i && "cursor-not-allowed opacity-75"
+            "flex items-center justify-between cursor-pointer rounded-md hover:bg-canvas-muted transition-colors py-[6px] px-3 w-full border-0 bg-transparent text-start",
+            p === v && "ring-2 ring-inset ring-primary bg-accent",
+            c && "cursor-not-allowed opacity-75"
           ),
           onClick: () => {
             x();
           },
-          disabled: i,
-          "aria-pressed": n,
-          "aria-label": n ? d : o,
+          disabled: c,
+          "aria-pressed": l,
+          "aria-label": l ? d : o,
           "data-testid": `select-select-all-button-${t || "default"}`,
           children: /* @__PURE__ */ g("span", { className: "flex items-center flex-1", children: [
             /* @__PURE__ */ e(
@@ -46,7 +46,7 @@ function j({
                 className: m(
                   "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
                   (s === !0 || s === "indeterminate") && "border-brand bg-accent text-brand",
-                  i && "opacity-50"
+                  c && "opacity-50"
                 ),
                 children: s === !0 ? /* @__PURE__ */ e(k, { className: "h-3.5 w-3.5" }) : s === "indeterminate" ? /* @__PURE__ */ e("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
               }
@@ -54,9 +54,9 @@ function j({
             /* @__PURE__ */ e(
               "span",
               {
-                className: "text-sm font-medium text-gray-700",
+                className: "text-sm font-medium text-content",
                 "data-testid": `select-select-all-label-${t || "default"}`,
-                children: n ? d : o
+                children: l ? d : o
               }
             )
           ] })

package/dist/components/forms/select/components/SelectMenuFooter.js

@@ -1,22 +1,22 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { Info as d } from "impact-nova-icons";
-function x({
-  footerContent: t,
-  maxSelectableOptions: r,
-  optionCount: a
+import { Info as a } from "impact-nova-icons";
+function o({
+  footerContent: r,
+  maxSelectableOptions: t,
+  optionCount: n
 }) {
-  return !t && !r && a <= 5e3 ? null : /* @__PURE__ */ e("div", { className: "sticky bottom-0 z-10 shrink-0 rounded-b-[12px] border-t border-solid border-gray-100 bg-white px-3 py-[10px]", children: r ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-gray-500 px-2", children: [
-    /* @__PURE__ */ e(d, { size: "12px", className: "text-gray-400" }),
+  return !r && !t && n <= 5e3 ? null : /* @__PURE__ */ e("div", { className: "sticky bottom-0 z-10 shrink-0 rounded-b-[12px] border-t border-solid border-stroke-subtle bg-canvas-elevated px-3 py-[10px]", children: t ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-content-secondary px-2", children: [
+    /* @__PURE__ */ e(a, { size: "12px", className: "text-content-icon" }),
     /* @__PURE__ */ s("span", { className: "text-xs font-medium leading-4 text-secondary-foreground", children: [
       "Maximum ",
-      r,
+      t,
       " selections"
     ] })
-  ] }) : a > 5e3 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-gray-500 px-2", children: [
-    /* @__PURE__ */ e(d, { size: "12px", className: "text-gray-400" }),
+  ] }) : n > 5e3 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-content-secondary px-2", children: [
+    /* @__PURE__ */ e(a, { size: "12px", className: "text-content-icon" }),
     /* @__PURE__ */ e("span", { className: "text-xs font-medium leading-4 text-secondary-foreground", children: "Large dataset detected. Operations might be slower." })
-  ] }) : t });
+  ] }) : r });
 }
 export {
-  x as SelectMenuFooter
+  o as SelectMenuFooter
 };

package/dist/components/forms/select/components/SelectMenuHeader.js

@@ -1,90 +1,90 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Search as C } from "impact-nova-icons";
-import { cn as H } from "../../../../lib/utils.js";
-import { SelectAllRow as $ } from "./SelectAllRow.js";
+import { Search as H } from "impact-nova-icons";
+import { cn as $ } from "../../../../lib/utils.js";
+import { SelectAllRow as y } from "./SelectAllRow.js";
 import { hasSelectAllRow as D } from "../utils/getSelectableOptionIndices.js";
 function F({
-  id: t,
-  selectFieldId: i,
-  isReadOnly: o,
-  isDisabled: c,
-  isMulti: d,
-  isSearchable: p,
+  id: o,
+  selectFieldId: c,
+  isReadOnly: t,
+  isDisabled: i,
+  isMulti: p,
+  isSearchable: d,
   searchPosition: u,
-  fetchError: r,
+  fetchError: l,
   isLoading: m,
   isProcessing: x,
-  isSelectAllEnabled: b,
+  isSelectAllEnabled: h,
   flatOptionsLength: f,
-  searchInputRef: h,
+  searchInputRef: b,
   searchValue: v,
   searchPlaceholder: g,
   highlightedIndex: w,
   maxSelectableOptions: N,
   visibleStats: S,
   selectAllLabel: k,
-  unselectAllLabel: y,
-  onSearchChange: A,
-  onSearchKeyDown: j,
-  onSelectAll: z
+  unselectAllLabel: A,
+  onSearchChange: j,
+  onSearchKeyDown: z,
+  onSelectAll: B
 }) {
-  const l = p && u === "menu" && !o && !r, s = D({
+  const n = d && u === "menu" && !t && !l, r = D({
     isLoading: !!m,
     isProcessing: x,
-    fetchError: r,
-    isMulti: d,
-    isSelectAllEnabled: b,
-    isReadOnly: o,
+    fetchError: l,
+    isMulti: p,
+    isSelectAllEnabled: h,
+    isReadOnly: t,
     flatOptionsLength: f
-  }), B = !r && (l || s);
-  return !l && !s ? null : /* @__PURE__ */ a(
+  }), C = !l && (n || r);
+  return !n && !r ? null : /* @__PURE__ */ a(
     "div",
     {
-      className: H(
+      className: $(
         "sticky top-0 z-10 flex shrink-0 flex-col rounded-t-[12px] px-[6px] pt-[8px]",
-        o ? "bg-disabled-surface" : "bg-canvas-elevated",
-        B ? "border-b border-solid border-gray-100" : ""
+        t ? "bg-disabled-surface" : "bg-canvas-elevated",
+        C ? "border-b border-solid border-stroke-subtle" : ""
       ),
       children: [
-        l ? /* @__PURE__ */ e(
+        n ? /* @__PURE__ */ e(
           "div",
           {
             className: "p-0",
-            "data-testid": `select-search-container-${t || "default"}`,
+            "data-testid": `select-search-container-${o || "default"}`,
             children: /* @__PURE__ */ a("div", { className: "relative", children: [
-              /* @__PURE__ */ e("div", { className: "absolute inset-y-0 start-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ e(C, { size: "14px", className: "text-content-placeholder" }) }),
+              /* @__PURE__ */ e("div", { className: "absolute inset-y-0 start-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ e(H, { size: "14px", className: "text-content-placeholder" }) }),
               /* @__PURE__ */ e(
                 "input",
                 {
-                  ref: h,
+                  ref: b,
                   type: "text",
-                  className: "block w-full ps-[34px] pe-4 h-[35px] border-none border-b border-primary text-sm outline-none focus-visible:ring-1 focus-visible:ring-indigo-500 focus-visible:rounded-md",
+                  className: "block h-[35px] w-full border-0 bg-transparent ps-[34px] pe-4 text-sm text-content outline-none placeholder:text-content-placeholder focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
                   placeholder: g,
                   value: v,
-                  onKeyDown: j,
-                  onChange: (n) => {
-                    A(n.target.value);
+                  onKeyDown: z,
+                  onChange: (s) => {
+                    j(s.target.value);
                   },
-                  onClick: (n) => n.stopPropagation(),
-                  "data-testid": `select-search-input-${t || "default"}`
+                  onClick: (s) => s.stopPropagation(),
+                  "data-testid": `select-search-input-${o || "default"}`
                 }
               )
             ] })
           }
         ) : null,
-        s ? /* @__PURE__ */ e(
-          $,
+        r ? /* @__PURE__ */ e(
+          y,
           {
-            selectFieldId: i,
-            id: t,
+            selectFieldId: c,
+            id: o,
             highlightedIndex: w,
-            isDisabled: c,
-            isReadOnly: o,
+            isDisabled: i,
+            isReadOnly: t,
             maxSelectableOptions: N,
             visibleStats: S,
             selectAllLabel: k,
-            unselectAllLabel: y,
-            onSelectAll: z
+            unselectAllLabel: A,
+            onSelectAll: B
           }
         ) : null
       ]

package/dist/components/forms/select/components/SelectMenuListBody.js

@@ -4,16 +4,16 @@ import { isInvertedSelection as X, isOptionArray as Y } from "../utils/select.js
 import { SelectOptionRow as Z } from "./SelectOptionRow.js";
 function te({
   fetchError: S,
-  onRefetch: d,
+  onRefetch: m,
   flatOptions: p,
   isLoading: h,
   isProcessing: x,
   isMulti: s,
   isReadOnly: j,
-  enableGroups: i,
-  enableSubMenus: o,
+  enableGroups: o,
+  enableSubMenus: i,
   showSequence: P,
-  maxSelectableOptions: f,
+  maxSelectableOptions: u,
   listRef: k,
   listboxId: w,
   listboxLabel: B,
@@ -23,20 +23,20 @@ function te({
   highlightedIndex: D,
   activeSubmenu: E,
   setActiveSubmenu: I,
-  internalValue: r,
+  internalValue: a,
   selectionMode: L,
-  selectionSet: g,
+  selectionSet: f,
   resolveOptionLabel: T,
   getSequenceForOption: q,
   renderOption: H,
   onSelect: O,
-  getGroupStats: u,
+  getGroupStats: v,
   emptyMessage: W = "No options found",
   errorMessage: _ = "Something went wrong",
   refetchLabel: $ = "Refetch"
 }) {
   const z = (n) => {
-    const e = p[n.index], y = s ? L === "exclude" ? !g.has(e.value) : g.has(e.value) : r?.value === e.value, a = r || [], F = s && f ? X(a) ? !1 : Y(a) && a.length >= f : !1, v = e.isDisabled || F && !y && !(i && e.isGroup) && !(o && e.isSubmenuParent), N = i && e.isGroup || o && e.isSubmenuParent ? u(e.original) : void 0, c = N?.selected || 0, J = N?.total || 0, K = c > 0 && c < J, Q = e.isParentSelectable !== !1, m = T(e), R = typeof m == "string" ? m : String(e.value || "");
+    const e = p[n.index], g = s ? L === "exclude" ? !f.has(e.value) : f.has(e.value) : a?.value === e.value, c = a || [], F = s && u ? X(c) ? !1 : Y(c) && c.length >= u : !1, y = e.isDisabled || F && !g && !(o && e.isGroup) && !(i && e.isSubmenuParent), N = o && e.isGroup || i && e.isSubmenuParent ? v(e.original) : void 0, r = N?.selected || 0, J = N?.total || 0, K = r > 0 && r < J, Q = e.isParentSelectable !== !1, d = T(e), R = typeof d == "string" ? d : String(e.value || "");
     return /* @__PURE__ */ t(
       Z,
       {
@@ -47,24 +47,24 @@ function te({
         id: C,
         isMulti: s,
         isReadOnly: j,
-        enableGroups: i,
-        enableSubMenus: o,
+        enableGroups: o,
+        enableSubMenus: i,
         showSequence: P,
-        selected: y,
-        isOptDisabled: v,
+        selected: g,
+        isOptDisabled: y,
         indeterminate: K,
-        selectedCount: c,
+        selectedCount: r,
         isParentSelectable: Q,
-        highlighted: D === n.index && !v,
+        highlighted: D === n.index && !y,
         activeSubmenu: E,
         setActiveSubmenu: I,
-        optionLabel: m,
+        optionLabel: d,
         optionLabelString: R,
         sequence: q(e),
-        internalValue: r,
+        internalValue: a,
         renderOption: H,
         onSelect: O,
-        getGroupStats: u
+        getGroupStats: v
       },
       n.key
     );
@@ -83,15 +83,15 @@ function te({
       },
       onWheel: (n) => n.stopPropagation(),
       children: S ? /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
-        /* @__PURE__ */ t("p", { className: "text-sm text-gray-500 font-medium mb-3", children: _ }),
-        d ? /* @__PURE__ */ t(U, { size: "sm", variant: "outline", onClick: () => d(), children: $ }) : null
-      ] }) : p.length === 0 && !h && !x ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: W }) : h || x ? /* @__PURE__ */ t("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((n, e) => /* @__PURE__ */ b(
+        /* @__PURE__ */ t("p", { className: "text-sm text-content-secondary font-medium mb-3", children: _ }),
+        m ? /* @__PURE__ */ t(U, { size: "sm", variant: "outline", onClick: () => m(), children: $ }) : null
+      ] }) : p.length === 0 && !h && !x ? /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8 text-sm text-content-secondary", children: W }) : h || x ? /* @__PURE__ */ t("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((n, e) => /* @__PURE__ */ b(
         "div",
         {
           className: "flex items-center gap-2 px-3 py-2 animate-pulse",
           children: [
-            s ? /* @__PURE__ */ t("div", { className: "w-4 h-4 bg-gray-200 rounded shrink-0" }) : null,
-            /* @__PURE__ */ t("div", { className: "h-4 bg-gray-200 rounded w-full" })
+            s ? /* @__PURE__ */ t("div", { className: "w-4 h-4 bg-canvas-muted rounded shrink-0" }) : null,
+            /* @__PURE__ */ t("div", { className: "h-4 bg-canvas-muted rounded w-full" })
           ]
         },
         e

package/dist/components/forms/select/components/SelectMenuPanel.js

@@ -1,16 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-popover";
 import { cn as r } from "../../../../lib/utils.js";
-function v({
+function f({
   menuRef: n,
-  menuMinHeight: t,
+  menuMinHeight: o,
   menuWidth: l,
   isReadOnly: a,
   id: d,
   menuLabel: s,
   children: p
 }) {
-  return /* @__PURE__ */ o(i.Portal, { children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
     i.Content,
     {
       ref: n,
@@ -28,12 +28,12 @@ function v({
         maxHeight: "min(320px, var(--radix-popover-content-available-height, 320px))"
       },
       className: r(
-        "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm border-none pointer-events-auto",
+        "z-50 flex flex-col overflow-hidden rounded-[12px] p-0 text-base shadow-elevation-select focus:outline-none sm:text-sm border-none pointer-events-auto",
         a ? "bg-disabled-surface" : "bg-canvas-elevated"
       ),
       "data-testid": `select-menu-${d || "default"}`,
       "data-component": "select-menu",
-      children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ t(
         "div",
         {
           className: r(
@@ -41,7 +41,7 @@ function v({
             a ? "bg-disabled-surface" : "bg-canvas-elevated"
           ),
           style: {
-            minHeight: t ? `${t}px` : void 0
+            minHeight: o ? `${o}px` : void 0
           },
           children: p
         }
@@ -50,5 +50,5 @@ function v({
   ) });
 }
 export {
-  v as SelectMenuPanel
+  f as SelectMenuPanel
 };

package/dist/components/forms/select/components/SelectOptionRow.js

@@ -1,145 +1,145 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { memo as E } from "react";
-import { Checkmark as W, ChevronRight as Y } from "impact-nova-icons";
-import { cn as o } from "../../../../lib/utils.js";
-import { selectOptionVariants as B } from "../select.variants.js";
-import { isSelected as F } from "../utils/select.js";
-import { LabelWithSequence as G } from "./LabelWithSequence.js";
-import { Submenu as H } from "./Submenu.js";
-function J({
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { memo as z } from "react";
+import { Checkmark as E, ChevronRight as W } from "impact-nova-icons";
+import { cn as x } from "../../../../lib/utils.js";
+import { selectOptionVariants as Y } from "../select.variants.js";
+import { isSelected as B } from "../utils/select.js";
+import { LabelWithSequence as F } from "./LabelWithSequence.js";
+import { Submenu as G } from "./Submenu.js";
+function H({
   option: e,
-  virtualRow: i,
-  measureElement: P,
-  selectFieldId: S,
-  id: g,
+  virtualRow: s,
+  measureElement: S,
+  selectFieldId: y,
+  id: k,
   isMulti: l,
   isReadOnly: m,
-  enableGroups: c,
+  enableGroups: n,
   enableSubMenus: t,
   showSequence: j,
   selected: a,
-  isOptDisabled: d,
+  isOptDisabled: c,
   indeterminate: f,
-  selectedCount: k,
-  isParentSelectable: p,
+  selectedCount: p,
+  isParentSelectable: g,
   highlighted: C,
   activeSubmenu: I,
   setActiveSubmenu: N,
   optionLabel: v,
-  optionLabelString: V,
-  sequence: q,
-  internalValue: z,
+  optionLabelString: b,
+  sequence: V,
+  internalValue: q,
   renderOption: w,
   onSelect: $,
-  getGroupStats: y
+  getGroupStats: P
 }) {
-  const u = g || "default", h = String(e.value || "");
-  return /* @__PURE__ */ x(
+  const u = k || "default", o = String(e.value || "");
+  return /* @__PURE__ */ h(
     "div",
     {
-      "data-index": i.index,
-      ref: P,
+      "data-index": s.index,
+      ref: S,
       className: "absolute start-0 w-full pb-[2px]",
       style: {
-        transform: `translateY(${i.start}px)`,
+        transform: `translateY(${s.start}px)`,
         width: "100%"
       },
-      "data-testid": `select-option-wrapper-${u}-${h}`,
+      "data-testid": `select-option-wrapper-${u}-${o}`,
       children: [
         /* @__PURE__ */ r(
           "div",
           {
-            id: `${S}-option-${i.index}`,
-            className: o(
-              B({
-                disabled: d,
+            id: `${y}-option-${s.index}`,
+            className: x(
+              Y({
+                disabled: c,
                 readOnly: m,
-                selected: a && !d && !(c && e.isGroup) && !(t && e.isSubmenuParent),
-                highlighted: C && !d
+                selected: a && !c && !(n && e.isGroup) && !(t && e.isSubmenuParent),
+                highlighted: C && !c
               })
             ),
             style: {
               paddingInlineStart: `${e.depth * 16 + 12}px`
             },
             onClick: () => {
-              d || (c && e.isGroup || t && e.isSubmenuParent) && !p || $(e);
+              c || (n && e.isGroup || t && e.isSubmenuParent) && !g || $(e);
             },
             onMouseEnter: () => {
               t && e.isSubmenuParent ? N(e.value) : N(null);
             },
-            "data-testid": `select-option-${u}-${h}`,
+            "data-testid": `select-option-${u}-${o}`,
             "data-state": a ? "checked" : "unchecked",
-            "data-disabled": d || void 0,
+            "data-disabled": c || void 0,
             "data-component": "select-option",
             role: "option",
             "aria-selected": a,
-            "aria-disabled": d || void 0,
+            "aria-disabled": c || void 0,
             children: w ? w(
               {
                 onClick: () => {
                 },
                 className: "w-full",
                 selected: a,
-                disabled: d
+                disabled: c
               },
               e
-            ) : /* @__PURE__ */ x("div", { className: "flex items-center flex-1 overflow-hidden", children: [
-              l && (c && e.isGroup || t && e.isSubmenuParent ? p : !0) && /* @__PURE__ */ r(
+            ) : /* @__PURE__ */ h("div", { className: "flex items-center flex-1 overflow-hidden", children: [
+              l && (n && e.isGroup || t && e.isSubmenuParent ? g : !0) && /* @__PURE__ */ r(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: o(
+                  className: x(
                     "mr-[7px] flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border border-stroke-field bg-canvas-elevated",
                     (a || f) && "border-brand bg-accent text-brand",
-                    (d || m) && "opacity-50"
+                    (c || m) && "opacity-50"
                   ),
-                  children: a && !f ? /* @__PURE__ */ r(W, { className: "h-3.5 w-3.5" }) : f ? /* @__PURE__ */ r("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
+                  children: a && !f ? /* @__PURE__ */ r(E, { className: "h-3.5 w-3.5" }) : f ? /* @__PURE__ */ r("span", { className: "block h-0.5 w-2.5 bg-current" }) : null
                 }
               ),
-              j && !(c && e.isGroup) && !(t && e.isSubmenuParent) ? /* @__PURE__ */ r(G, { label: v, sequence: q }) : /* @__PURE__ */ x("div", { className: "flex items-center gap-2 overflow-hidden w-full", children: [
+              j && !(n && e.isGroup) && !(t && e.isSubmenuParent) ? /* @__PURE__ */ r(F, { label: v, sequence: V }) : /* @__PURE__ */ h("div", { className: "flex items-center gap-2 overflow-hidden w-full", children: [
                 /* @__PURE__ */ r(
                   "span",
                   {
-                    className: o(
+                    className: x(
                       "block truncate",
-                      c && e.isGroup ? "text-xs font-semibold text-gray-400 uppercase tracking-wider" : a && !(t && e.isSubmenuParent) ? "font-medium" : "font-normal",
-                      !(c && e.isGroup) && "text-[14px]"
+                      n && e.isGroup ? "text-xs font-semibold text-content-icon uppercase tracking-wider" : a && !(t && e.isSubmenuParent) ? "font-medium" : "font-normal",
+                      !(n && e.isGroup) && "text-[14px]"
                     ),
-                    "data-testid": `select-option-label-${u}-${h}`,
+                    "data-testid": `select-option-label-${u}-${o}`,
                     "data-state": a ? "checked" : "unchecked",
-                    title: V,
+                    title: b,
                     children: v
                   }
                 ),
-                (c && e.isGroup || t && e.isSubmenuParent) && k > 0 && /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", children: k })
+                (n && e.isGroup || t && e.isSubmenuParent) && p > 0 && /* @__PURE__ */ r("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-brand-tint text-brand-on-subtle", children: p })
               ] }),
-              t && e.isSubmenuParent && /* @__PURE__ */ r(Y, { size: "12px", className: "text-gray-400" })
+              t && e.isSubmenuParent && /* @__PURE__ */ r(W, { size: "12px", className: "text-content-icon" })
             ] })
           }
         ),
         t && I === e.value && e.isSubmenuParent && /* @__PURE__ */ r(
-          H,
+          G,
           {
             parentOption: e,
             isMulti: !!l,
             isReadOnly: !!m,
-            isSelected: (s) => F(s, z, !!l),
-            getIndeterminateState: (s) => {
-              const n = y(s);
-              return n ? n.selected > 0 && n.selected < n.total : !1;
+            isSelected: (d) => B(d, q, !!l),
+            getIndeterminateState: (d) => {
+              const i = P(d);
+              return i ? i.selected > 0 && i.selected < i.total : !1;
             },
-            getSelectedCount: (s) => y(s)?.selected || 0,
+            getSelectedCount: (d) => P(d)?.selected || 0,
             handleSelect: $,
-            id: g
+            id: k
           }
         )
       ]
     },
-    i.key
+    s.key
   );
 }
-const b = E(J);
+const _ = z(H);
 export {
-  b as SelectOptionRow,
-  J as SelectOptionRowInner
+  _ as SelectOptionRow,
+  H as SelectOptionRowInner
 };

package/dist/components/forms/select/select.d.ts

@@ -1,7 +1,8 @@
+import { default as React } from 'react';
 import { SelectProps, Option, Group } from './select.types';
-declare const Select: {
-    <OptionType extends Option = Option, IsMulti extends boolean = boolean, GroupType extends Group = Group>(props: SelectProps<OptionType, IsMulti, GroupType>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Select<OptionType extends Option = Option, IsMulti extends boolean = false, GroupType extends Group = Group>(props: SelectProps<OptionType, IsMulti, GroupType>): React.ReactElement;
+declare namespace Select {
+    var displayName: string;
+}
 export { Select };
 export type { SelectProps } from './select.types';