impact-nova 2.2.0 → 2.2.2

package/dist/components/forms/date-picker/week-range-picker.js

@@ -1,19 +1,19 @@
 import { jsx as u, jsxs as T } from "react/jsx-runtime";
 import * as l from "react";
 import { Cross as Me, CalendarMonth as Ge } from "impact-nova-icons";
-import { format as k } from "date-fns";
+import { format as g } from "date-fns";
 import { cn as G } from "../../../lib/utils.js";
-import { usePickerDismissActionsRef as Je, usePickerFooterDismissNudge as Qe, createRangePickerOpenChangeHandler as Ue, parseDateInput as J, normalizeOrderedRange as Xe, compareDates as Ze, flashRangeReorder as _e, isDateInputInvalid as ne, resolveRangeFieldBlur as V, resolveRangePickerDismissFlash as $e, deferRangeInputBlur as Ye, maskDateInput as se, resolveDateInputOnBlur as O } from "./date-input-behavior.js";
+import { usePickerDismissActionsRef as Je, usePickerFooterDismissNudge as Qe, createRangePickerOpenChangeHandler as Ue, parseDateInput as J, normalizeOrderedRange as Xe, compareDates as Ze, flashRangeReorder as _e, isDateInputInvalid as oe, resolveRangeFieldBlur as V, resolveRangePickerDismissFlash as $e, deferRangeInputBlur as Ye, maskDateInput as se, resolveDateInputOnBlur as O } from "./date-input-behavior.js";
 import { useFieldChrome as Fe } from "../../../lib/primitives/use-field-chrome.js";
 import { Popover as et, PopoverAnchor as tt, PopoverContent as rt } from "../../feedback/popover/popover.js";
-import { Calendar as ot } from "../../data-display/calendar/calendar.js";
-import { buildDateBoundsMatcher as nt } from "../../../lib/date-bounds-matcher.js";
+import { Calendar as nt } from "../../data-display/calendar/calendar.js";
+import { buildDateBoundsMatcher as ot } from "../../../lib/date-bounds-matcher.js";
 import { Tooltip as ie, TooltipTrigger as le, TooltipContent as ae } from "../../feedback/tooltip/tooltip.js";
 import { resolveWeekSelection as st } from "../../../lib/fiscal-calendar.js";
 import { useImpactNovaI18n as it } from "../../../i18n/use-impact-nova-i18n.js";
 import { getDateFnsLocale as lt } from "../../../i18n/getDateFnsLocale.js";
 import { coerceWeekRangeApply as at, isWeekRangeSelection as ct } from "./calendar-selection-adapters.js";
-const x = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, B = (t) => t?.from ? { from: t.from, to: t.to } : void 0;
+const x = (t) => t?.from ? t.to ? t.to.endDate : t.from.endDate : void 0, S = (t) => t?.from ? { from: t.from, to: t.to } : void 0;
 function ce(t, a) {
   return !t && !a ? !0 : !t || !a ? !1 : t.startDate.getTime() === a.startDate.getTime();
 }
@@ -24,13 +24,13 @@ const dt = l.forwardRef(
   ({
     value: t,
     onChange: a,
-    format: n = "MM/dd/yyyy",
+    format: o = "MM/dd/yyyy",
     placeholder: fe,
     minDate: de,
     maxDate: pe,
     startMonth: me,
     endMonth: ue,
-    showFooter: g = !0,
+    showFooter: k = !0,
     calendarType: L = "calendar",
     fiscalMode: j = "basic",
     selectionMode: K = "week",
@@ -38,8 +38,8 @@ const dt = l.forwardRef(
     fiscalYearStartMonth: z = 1,
     weekStartsOn: H = 1,
     disabled: d,
-    className: ke,
-    error: ge,
+    className: ge,
+    error: ke,
     isError: Re,
     size: Q,
     label: De,
@@ -50,7 +50,7 @@ const dt = l.forwardRef(
     prefixClick: mt,
     ...xe
   }, be) => {
-    const U = ge ?? Re, Ce = Fe({
+    const U = ke ?? Re, Ce = Fe({
       label: De,
       helperText: he,
       helperTextPosition: ye,
@@ -60,30 +60,30 @@ const dt = l.forwardRef(
       rootClassName: "w-full min-w-[240px]"
     }), { locale: X, t: E } = it(), s = l.useMemo(() => lt(X), [X]), Z = fe ?? E("datePicker.selectWeekRange"), _ = l.useRef(null), Ie = l.useRef(null), $ = l.useRef(null), N = l.useRef(null), M = l.useRef(null);
     l.useImperativeHandle(be, () => _.current);
-    const [p, R] = l.useState(!1), Y = Je(), { footerFlashKey: we, footerFlashTarget: Ee, popoverHandlers: We } = Qe(g, p, Y, $), W = l.useRef(!1), [c, D] = l.useState(t), [m, h] = l.useState(t?.from ? k(t.from.startDate, n, { locale: s }) : ""), [y, v] = l.useState(x(t) ? k(x(t), n, { locale: s }) : ""), [Pe, P] = l.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
+    const [p, R] = l.useState(!1), Y = Je(), { footerFlashKey: we, footerFlashTarget: Ee, popoverHandlers: We } = Qe(k, p, Y, $), W = l.useRef(!1), [c, D] = l.useState(t), [m, h] = l.useState(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), [y, v] = l.useState(x(t) ? g(x(t), o, { locale: s }) : ""), [Pe, P] = l.useState(t?.from?.startDate || /* @__PURE__ */ new Date());
     l.useEffect(() => {
-      h(t?.from ? k(t.from.startDate, n, { locale: s }) : ""), v(x(t) ? k(x(t), n, { locale: s }) : ""), D(t);
-    }, [t, n, s]);
+      h(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), v(x(t) ? g(x(t), o, { locale: s }) : ""), D(t);
+    }, [t, o, s]);
     const Te = l.useCallback(
       (e) => Ue({
         disabled: d ?? void 0,
-        showFooter: g,
+        showFooter: k,
         containerRef: N,
         popoverContentRef: M,
         setOpen: R
       })(e),
-      [d, g]
+      [d, k]
     ), F = l.useRef(!1);
     l.useEffect(() => {
       if (p && !F.current) {
-        const e = J(m, n, s);
+        const e = J(m, o, s);
         e.parsed ? P(e.parsed) : c?.from ? P(c.from.startDate) : t?.from && P(t.from.startDate);
       }
       F.current = p;
-    }, [p, m, n, s, c?.from, t?.from]);
+    }, [p, m, o, s, c?.from, t?.from]);
     const Se = (e) => {
       const r = ct(e) ? e : void 0;
-      D(r), r?.from ? (h(k(r.from.startDate, n, { locale: s })), v(k(x(r), n, { locale: s }))) : (h(""), v("")), !g && r?.from && r?.to && r.from.startDate.getTime() !== r.to.startDate.getTime() && (a?.(r), R(!1));
+      D(r), r?.from ? (h(g(r.from.startDate, o, { locale: s })), v(g(x(r), o, { locale: s }))) : (h(""), v("")), !k && r?.from && r?.to && r.from.startDate.getTime() !== r.to.startDate.getTime() && (a?.(r), R(!1));
     }, b = l.useCallback(
       (e) => st(e, {
         calendarType: L,
@@ -101,89 +101,90 @@ const dt = l.forwardRef(
         z,
         H
       ]
-    ), S = l.useCallback((e, r) => {
-      const o = Xe(
+    ), B = l.useCallback((e, r) => {
+      const n = Xe(
         e,
         r,
         (i, f) => Ze(i.startDate, f.startDate)
       );
-      return o.swapped && (o.from && h(k(o.from.startDate, n, { locale: s })), o.to && v(k(x({ from: o.from, to: o.to }), n, { locale: s })), _e(N.current)), { from: o.from, to: o.to };
-    }, [n, s]), ee = (e) => {
-      const r = at(e, B(c)), o = S(r?.from, r?.to), i = o.from ? { from: o.from, to: o.to } : void 0;
+      return n.swapped && (n.from && h(g(n.from.startDate, o, { locale: s })), n.to && v(g(x({ from: n.from, to: n.to }), o, { locale: s })), _e(N.current)), { from: n.from, to: n.to };
+    }, [o, s]), ee = (e) => {
+      const r = at(e, S(c)), n = B(r?.from, r?.to), i = n.from ? { from: n.from, to: n.to } : void 0;
       D(i), a?.(i), R(!1);
     }, A = () => {
-      D(t), h(t?.from ? k(t.from.startDate, n, { locale: s }) : ""), v(x(t) ? k(x(t), n, { locale: s }) : ""), R(!1);
+      D(t), h(t?.from ? g(t.from.startDate, o, { locale: s }) : ""), v(x(t) ? g(x(t), o, { locale: s }) : ""), R(!1);
     }, te = () => {
-      D(void 0), h(""), v(""), a?.(void 0), g || R(!1);
+      D(void 0), h(""), v(""), a?.(void 0), k || R(!1);
     }, Be = (e) => {
-      const r = se(e.target.value, n, m);
+      const r = se(e.target.value, o, m);
       if (h(r), r === "") {
         const f = { to: c?.to };
-        D(f), g || a?.(void 0);
+        D(f), k || a?.(void 0);
         return;
       }
-      const { parsed: o, isValid: i } = J(r, n, s);
-      if (i && o) {
-        const w = { from: b(o), to: c?.to };
-        D(w), c?.to && v(k(x(w), n, { locale: s })), P(o), g || a?.(B(w));
+      const { parsed: n, isValid: i } = J(r, o, s);
+      if (i && n) {
+        const w = { from: b(n), to: c?.to };
+        D(w), c?.to && v(g(x(w), o, { locale: s })), P(n), k || a?.(S(w));
       }
     }, Ne = (e) => {
-      const r = se(e.target.value, n, y);
+      const r = se(e.target.value, o, y);
       if (v(r), r === "") {
         const f = { from: c?.from };
-        D(f), g || a?.(B(f));
+        D(f), k || a?.(S(f));
         return;
       }
-      const { parsed: o, isValid: i } = J(r, n, s);
-      if (i && o) {
-        const f = b(o), w = { from: c?.from, to: f };
-        D(w), c?.from && h(k(c.from.startDate, n, { locale: s })), P(o), g || a?.(B(w));
+      const { parsed: n, isValid: i } = J(r, o, s);
+      if (i && n) {
+        const f = b(n), w = { from: c?.from, to: f };
+        D(w), c?.from && h(g(c.from.startDate, o, { locale: s })), P(n), k || a?.(S(w));
       }
     }, Ae = () => {
-      const e = O(m, n, C, s), r = O(y, n, I, s);
+      const e = O(m, o, C, s), r = O(y, o, I, s);
       e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(I) : r.parsed && v(r.display);
-      let o = e.parsed ? b(e.parsed) : c?.from, i = r.parsed ? b(r.parsed) : c?.to;
-      o && i && ({ from: o, to: i } = S(o, i));
-      const f = o ? { from: o, to: i } : void 0;
+      let n = e.parsed ? b(e.parsed) : c?.from, i = r.parsed ? b(r.parsed) : c?.to;
+      n && i && ({ from: n, to: i } = B(n, i));
+      const f = n ? { from: n, to: i } : void 0;
       f ? (D(f), a?.(f)) : !m && !y && (D(void 0), a?.(void 0));
     }, re = () => {
       Ye(
         N,
         M,
         () => {
-          const e = V(m, n, C, s), r = V(y, n, I, s);
+          const e = V(m, o, C, s), r = V(y, o, I, s);
           e.resetToCommitted ? h(C) : e.parsed && h(e.display), r.resetToCommitted ? v(I) : r.parsed && v(r.display);
-          let o = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
-          o && i && ({ from: o, to: i } = S(o, i));
-          const f = o || i ? { from: o, to: i } : void 0;
-          D(f), g || (f ? a?.(f) : !m && !y && a?.(void 0));
+          let n = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
+          n && i && ({ from: n, to: i } = B(n, i));
+          const f = n || i ? { from: n, to: i } : void 0;
+          D(f), k || (f ? a?.(f) : !m && !y && a?.(void 0));
         }
       );
-    }, oe = () => {
-      if (p && g) {
+    }, ne = () => {
+      if (p && k) {
         ee();
         return;
       }
       if (!p) {
-        if (g) {
+        if (k) {
           Ae();
           return;
         }
-        const e = O(m, n, C, s), r = O(y, n, I, s);
+        const e = O(m, o, C, s), r = O(y, o, I, s);
         if (e.parsed || r.parsed) return;
         W.current = !0, R(!0);
       }
-    }, C = t?.from ? k(t.from.startDate, n, { locale: s }) : "", I = x(t) ? k(x(t), n, { locale: s }) : "", Ve = C !== m, Oe = I !== y, Le = ne(m, n, s), je = ne(y, n, s), Ke = "Start Date", qe = "End Date", ze = l.useCallback(() => {
-      const e = V(m, n, C, s), r = V(y, n, I, s);
-      let o = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
-      o && i && ({ from: o, to: i } = S(o, i));
-      const f = o || i ? { from: o, to: i } : void 0;
+    }, C = t?.from ? g(t.from.startDate, o, { locale: s }) : "", I = x(t) ? g(x(t), o, { locale: s }) : "", Ve = C !== m, Oe = I !== y, Le = oe(m, o, s), je = oe(y, o, s), Ke = "Start Date", qe = "End Date", ze = l.useCallback(() => {
+      const e = V(m, o, C, s), r = V(y, o, I, s);
+      let n = e.parsed ? b(e.parsed) : e.resetToCommitted ? t?.from : c?.from, i = r.parsed ? b(r.parsed) : r.resetToCommitted ? t?.to : c?.to;
+      n && i && ({ from: n, to: i } = B(n, i));
+      const f = n || i ? { from: n, to: i } : void 0;
       return $e({
         startInput: m,
         endInput: y,
         committedStart: C,
         committedEnd: I,
         committedRange: t,
+        pendingRange: S(c),
         computeEffectiveRange: () => f,
         rangesEqual: (w, He) => ft(w, He)
       });
@@ -194,9 +195,9 @@ const dt = l.forwardRef(
       I,
       t,
       c,
-      n,
+      o,
       s,
-      S,
+      B,
       b
     ]);
     return l.useLayoutEffect(() => {
@@ -223,7 +224,7 @@ const dt = l.forwardRef(
                   Q === "sm" ? "h-6" : Q === "md" ? "h-[28px]" : "h-8",
                   d && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
                   "cursor-pointer",
-                  ke
+                  ge
                 ),
                 children: [
                   /* @__PURE__ */ T("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
@@ -237,9 +238,9 @@ const dt = l.forwardRef(
                         onBlur: re,
                         onClick: () => !d && R(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !d && (e.preventDefault(), oe()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
+                          e.key === "Enter" && !d && (e.preventDefault(), ne()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
                         },
-                        placeholder: p ? n : Z,
+                        placeholder: p ? o : Z,
                         disabled: !!d,
                         "aria-label": Ke,
                         "data-field": "start",
@@ -260,9 +261,9 @@ const dt = l.forwardRef(
                         onBlur: re,
                         onClick: () => !d && R(!0),
                         onKeyDown: (e) => {
-                          e.key === "Enter" && !d && (e.preventDefault(), oe()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
+                          e.key === "Enter" && !d && (e.preventDefault(), ne()), e.key === "ArrowDown" && !p && !d && (e.preventDefault(), W.current = !0, R(!0)), e.key === "Escape" && p && (e.preventDefault(), A());
                         },
-                        placeholder: p ? n : Z,
+                        placeholder: p ? o : Z,
                         disabled: !!d,
                         "aria-label": qe,
                         "data-field": "end",
@@ -314,20 +315,20 @@ const dt = l.forwardRef(
                 },
                 ...We,
                 children: /* @__PURE__ */ u(
-                  ot,
+                  nt,
                   {
                     pickerType: "week",
                     weekMode: "range",
-                    selectedWeeks: B(c),
+                    selectedWeeks: S(c),
                     footerFlashKey: we,
                     footerFlashTarget: Ee,
                     onWeekSelect: Se,
                     month: Pe,
                     onMonthChange: P,
-                    disabled: nt(de, pe),
+                    disabled: ot(de, pe),
                     startMonth: me,
                     endMonth: ue,
-                    showFooter: g,
+                    showFooter: k,
                     calendarType: L,
                     fiscalMode: j,
                     selectionMode: K,

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

@@ -1,17 +1,20 @@
-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 f({
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-popover";
+import { cn as i } from "../../../../lib/utils.js";
+import { useOverlayPortalContainer as m } from "../../../../lib/overlay/overlay-portal-context.js";
+import { OVERLAY_NESTED_FLOATING_INSTANT_HIDE_CLASS as v } from "../../../../lib/overlay/overlay-host.constants.js";
+function g({
   menuRef: n,
-  menuMinHeight: o,
+  menuMinHeight: t,
   menuWidth: l,
-  isReadOnly: a,
+  isReadOnly: r,
   id: d,
   menuLabel: s,
   children: p
 }) {
-  return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
-    i.Content,
+  const c = m();
+  return /* @__PURE__ */ o(a.Portal, { container: c, children: /* @__PURE__ */ o(
+    a.Content,
     {
       ref: n,
       side: "bottom",
@@ -27,21 +30,22 @@ function f({
         minWidth: "var(--radix-popover-trigger-width)",
         maxHeight: "min(320px, var(--radix-popover-content-available-height, 320px))"
       },
-      className: r(
+      className: i(
         "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"
+        r ? "bg-disabled-surface" : "bg-canvas-elevated",
+        v
       ),
       "data-testid": `select-menu-${d || "default"}`,
       "data-component": "select-menu",
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ o(
         "div",
         {
-          className: r(
+          className: i(
             "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[12px]",
-            a ? "bg-disabled-surface" : "bg-canvas-elevated"
+            r ? "bg-disabled-surface" : "bg-canvas-elevated"
           ),
           style: {
-            minHeight: o ? `${o}px` : void 0
+            minHeight: t ? `${t}px` : void 0
           },
           children: p
         }
@@ -50,5 +54,5 @@ function f({
   ) });
 }
 export {
-  f as SelectMenuPanel
+  g as SelectMenuPanel
 };

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

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