@fluidattacks/design 9.5.1 → 9.5.3

package/dist/components/inputs/fields/combobox/field/index.js

@@ -1,93 +1,95 @@
-import { jsx as t, jsxs as F } from "react/jsx-runtime";
-import { useVirtualizer as We } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
-import { useState as v, useMemo as x, useRef as g, useCallback as y } from "react";
-import { useButton as Ye } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
-import { useComboBox as qe } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
-import { useFilter as Je } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
-import { useListBox as Pe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
-import { useComboBoxState as Qe } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
-import { Item as Xe } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
-import { useTheme as Ze } from "styled-components";
-import { OutlineContainer as _e } from "../../../outline-container/index.js";
-import { StyledTextInputContainer as eo } from "../../../styles.js";
-import { Popover as de } from "../../../utils/popover/index.js";
-import { Option as oo } from "../option/index.js";
-import { StyledStatusMessage as to, ChevronIconButton as ro, StyledDropdown as he, StyledGroupHeader as no, StyledEmptyMessage as so } from "../styles.js";
-import { describeSelection as lo, toSelection as me } from "../utils.js";
-import { Icon as q } from "../../../../icon/index.js";
-import { IconButton as ao } from "../../../../icon-button/index.js";
+import { jsx as r, jsxs as G } from "react/jsx-runtime";
+import { useVirtualizer as qe } from "../../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
+import { useState as g, useMemo as $, useRef as y, useCallback as v } from "react";
+import { useButton as Je } from "../../../../../node_modules/react-aria/dist/private/button/useButton.js";
+import { useComboBox as Pe } from "../../../../../node_modules/react-aria/dist/private/combobox/useComboBox.js";
+import { useFilter as Qe } from "../../../../../node_modules/react-aria/dist/private/i18n/useFilter.js";
+import { useListBox as Xe } from "../../../../../node_modules/react-aria/dist/private/listbox/useListBox.js";
+import { useComboBoxState as Ze } from "../../../../../node_modules/react-stately/dist/private/combobox/useComboBoxState.js";
+import { Item as _e } from "../../../../../node_modules/react-stately/dist/private/collections/Item.js";
+import { useTheme as eo } from "styled-components";
+import { OutlineContainer as oo } from "../../../outline-container/index.js";
+import { StyledTextInputContainer as to } from "../../../styles.js";
+import { Popover as ge } from "../../../utils/popover/index.js";
+import { Option as ro } from "../option/index.js";
+import { StyledStatusMessage as no, ChevronIconButton as so, StyledDropdown as ye, StyledGroupHeader as lo, StyledEmptyMessage as ao } from "../styles.js";
+import { describeSelection as co, toSelection as ve } from "../utils.js";
+import { Icon as J } from "../../../../icon/index.js";
+import { IconButton as io } from "../../../../icon-button/index.js";
 import "../../../../typography/heading/index.js";
 import "../../../../typography/span/index.js";
-import { Text as J } from "../../../../typography/text/index.js";
-import { useClickOutside as co } from "../../../../../hooks/use-click-outside.js";
+import { Text as P } from "../../../../typography/text/index.js";
+import { useClickOutside as po } from "../../../../../hooks/use-click-outside.js";
 const ko = ({
-  field: u,
+  field: i,
   disabled: h = !1,
-  disabledKeys: $,
-  error: ge,
-  helpLink: ye,
-  helpLinkText: ve,
-  helpText: xe,
-  label: P,
-  loadingItems: $e,
+  disabledKeys: b,
+  error: xe,
+  helpLink: $e,
+  helpLinkText: be,
+  helpText: we,
+  label: Q,
+  loadingItems: X,
   name: l,
-  multiSelection: r = !1,
+  multiSelection: t = !1,
   items: o,
-  onBlur: K,
-  onChange: f,
-  onClear: Q,
-  placeholder: be,
-  clearable: we = !1,
-  emptyMessage: X,
-  statusMessage: Z,
-  required: Se,
-  setValue: b,
-  tooltip: Be,
-  value: Ce,
-  watch: w,
-  weight: Ae
+  onBlur: j,
+  onChange: d,
+  onClear: Z,
+  placeholder: Se,
+  clearable: Be = !1,
+  emptyMessage: _,
+  statusMessage: ee,
+  required: Ce,
+  setValue: w,
+  tooltip: Ae,
+  value: Oe,
+  watch: S,
+  weight: ze
 }) => {
-  const m = Ze(), k = h ? void 0 : ge, d = u?.value ?? Ce, [D, S] = v(() => r ? lo(
-    me(w?.(`${l}Options`)),
+  const m = eo(), k = h ? void 0 : xe, a = i?.value ?? Oe, [M, x] = g(() => t ? co(
+    ve(S?.(`${l}Options`)),
     o.map((e) => e.value),
-    $ ?? [],
+    b ?? [],
     o.find((e) => e.value === "All")?.name
-  ).text : o.find((e) => e.value === d)?.name ?? ""), [_, G] = v(d), j = ($e === !1 || !d) && !r, M = x(
-    () => j ? o.find((e) => e.value === d)?.name ?? "" : "",
-    [j, d, o]
-  ), [Oe, ze] = v(d), [Ie, Re] = v(M);
-  j && (d !== Oe || M !== Ie) && (ze(d), Re(M), S(M), G(d ?? ""));
-  const [Fe, H] = v(o), [ee, B] = v(!1), { contains: N } = Je({ sensitivity: "base" }), U = g(null), W = g(null), C = g(null), A = g(null), oe = g(null), O = g(null), Y = g(/* @__PURE__ */ new Set()), ke = x(() => {
-    const e = Y.current, s = Array.from($ ?? []), c = o.some((n) => n.group !== void 0);
-    return o.toSorted((n, p) => {
+  ).text : o.find((e) => e.value === a)?.name ?? ""), [oe, B] = g(a), H = (X === !1 || !a) && !t, C = $(
+    () => H ? o.find((e) => e.value === a)?.name ?? "" : "",
+    [H, a, o]
+  ), [Re, Ie] = g(a), [Fe, te] = g(C), [De, N] = g(a);
+  a !== Re ? (Ie(a), te(C), !t && (X !== !0 || !a) && a !== De && (N(a), x(
+    o.find((e) => e.value === a)?.name ?? ""
+  ), B(a ?? ""))) : H && C !== Fe && (te(C), x(C), B(a ?? ""));
+  const [Ge, U] = g(o), [re, A] = g(!1), { contains: V } = Qe({ sensitivity: "base" }), W = y(null), Y = y(null), O = y(null), z = y(null), ne = y(null), R = y(null), q = y(/* @__PURE__ */ new Set()), ke = $(() => {
+    const e = q.current, s = Array.from(b ?? []), p = o.some((n) => n.group !== void 0);
+    return o.toSorted((n, f) => {
       if (n.value === "All") return -1;
-      if (p.value === "All") return 1;
-      const E = s.includes(n.value), L = s.includes(p.value);
-      if (c) {
-        const I = n.group ?? "", R = p.group ?? "";
-        if (!n.group && p.group) return -1;
-        if (n.group && !p.group) return 1;
-        if (I !== R)
-          return I.localeCompare(R);
-        if (E && !L) return 1;
-        if (!E && L) return -1;
-        if (r) {
-          const ue = e.has(n.value), fe = e.has(p.value);
-          if (ue && !fe) return -1;
-          if (!ue && fe) return 1;
+      if (f.value === "All") return 1;
+      const K = s.includes(n.value), L = s.includes(f.value);
+      if (p) {
+        const F = n.group ?? "", D = f.group ?? "";
+        if (!n.group && f.group) return -1;
+        if (n.group && !f.group) return 1;
+        if (F !== D)
+          return F.localeCompare(D);
+        if (K && !L) return 1;
+        if (!K && L) return -1;
+        if (t) {
+          const he = e.has(n.value), me = e.has(f.value);
+          if (he && !me) return -1;
+          if (!he && me) return 1;
         }
-        return n.name.localeCompare(p.name);
+        return n.name.localeCompare(f.name);
       }
-      if (E && !L) return 1;
-      if (!E && L) return -1;
-      if (r) {
-        const I = e.has(n.value), R = e.has(p.value);
-        return I && !R ? -1 : !I && R ? 1 : n.name.localeCompare(p.name);
+      if (K && !L) return 1;
+      if (!K && L) return -1;
+      if (t) {
+        const F = e.has(n.value), D = e.has(f.value);
+        return F && !D ? -1 : !F && D ? 1 : n.name.localeCompare(f.name);
       }
       return 0;
     }).map(
-      (n) => N(n.name, D) || ee ? /* @__PURE__ */ t(
-        Xe,
+      (n) => V(n.name, M) || re ? /* @__PURE__ */ r(
+        _e,
         {
           "aria-label": n.value,
           hrefLang: n.href,
@@ -97,153 +99,162 @@ const ko = ({
         n.value
       ) : null
     );
-  }, [N, $, D, o, r, ee]), De = y(
+  }, [V, b, M, o, t, re]), Me = v(
     (e) => {
       const s = e.split(/,|\s/u).slice(-1)[0].trim();
-      S(r ? s : e), e === "" || e.endsWith(",") ? B(!0) : (B(!1), G((c) => {
-        const i = e === "" ? "" : c;
-        return u && u.onChange(i), f && f(e), i;
-      }), H(
+      x(t ? s : e), e === "" || e.endsWith(",") ? A(!0) : (A(!1), i || N(e), B((p) => {
+        const u = e === "" ? "" : p;
+        return i && i.onChange(u), d && d(e), u;
+      }), U(
         o.filter(
-          (c) => N(c.name, r ? s : e)
+          (p) => V(p.name, t ? s : e)
         )
       ));
     },
-    [N, o, u, r, f]
-  ), Ge = y(
+    [V, o, i, t, d]
+  ), Ne = v(
     (e) => {
-      S(o.find((s) => s.value === e)?.name ?? ""), G(e ? String(e) : ""), u && u.onChange(e), f && f(e ? String(e) : ""), H(o);
+      x(o.find((s) => s.value === e)?.name ?? ""), B(e ? String(e) : ""), N(i ? e : String(e ?? "")), i && i.onChange(e), d && d(e ? String(e) : ""), U(o);
     },
-    [o, u, f]
-  ), te = y(
+    [o, i, d]
+  ), se = v(
     (e) => {
-      e.key === "Enter" && e.preventDefault(), B(!1);
+      e.key === "Enter" && e.preventDefault(), A(!1);
     },
     []
-  ), Me = y(() => {
-    K && K(), u && u.onBlur();
-  }, [u, K]), Ne = y(() => {
-    B(!0);
-  }, []), a = Qe({
-    allowsCustomValue: r,
+  ), Ve = v(() => {
+    j && j(), i && i.onBlur();
+  }, [i, j]), Te = v(() => {
+    A(!0);
+  }, []), c = Ze({
+    allowsCustomValue: t,
     allowsEmptyCollection: !0,
-    disabledKeys: $,
-    inputValue: D,
-    items: Fe,
+    disabledKeys: b,
+    inputValue: M,
+    items: Ge,
     menuTrigger: "focus",
-    shouldCloseOnBlur: !r,
-    selectedKey: _,
-    onBlur: Me,
-    onInputChange: De,
-    onKeyDown: te,
-    onKeyUp: Ne,
+    shouldCloseOnBlur: !t,
+    selectedKey: oe,
+    onBlur: Ve,
+    onInputChange: Me,
+    onKeyDown: se,
+    onKeyUp: Te,
     onOpenChange(e, s) {
-      e && r && w && (Y.current = new Set(
-        me(w(`${l}Options`)).filter(Boolean)
-      )), B(
+      e && t && S && (q.current = new Set(
+        ve(S(`${l}Options`)).filter(Boolean)
+      )), A(
         e && (s === "manual" || s === "focus")
       ), e && s !== "focus" && requestAnimationFrame(() => {
-        U.current?.focus();
+        W.current?.focus();
       });
     },
-    onSelectionChange: r ? void 0 : Ge,
+    onSelectionChange: t ? void 0 : Ne,
     children: ke
-  }), Te = y(() => {
-    S(""), G(null), H(o), a.setSelectedKey(null), a.setInputValue(""), f && f(""), r && b && (b(`${l}Options`, []), b(`${l}CheckAll`, "")), Q?.();
-  }, [o, r, l, Q, f, b, a]), {
-    buttonProps: Ve,
-    inputProps: Ee,
-    listBoxProps: Le
-  } = qe(
+  }), Ee = v(() => {
+    x(""), B(null), U(o), c.setSelectedKey(null), c.setInputValue(""), i || N(""), d && d(""), t && w && (w(`${l}Options`, []), w(`${l}CheckAll`, "")), Z?.();
+  }, [
+    i,
+    o,
+    t,
+    l,
+    Z,
+    d,
+    w,
+    c
+  ]), {
+    buttonProps: Ke,
+    inputProps: Le,
+    listBoxProps: je
+  } = Pe(
     {
-      inputValue: D,
-      buttonRef: W,
+      inputValue: M,
+      buttonRef: Y,
       id: l,
-      inputRef: U,
-      label: P ?? l,
-      listBoxRef: C,
+      inputRef: W,
+      label: Q ?? l,
+      listBoxRef: O,
       name: l,
-      placeholder: be,
-      popoverRef: O
+      placeholder: Se,
+      popoverRef: R
     },
-    a
-  ), { listBoxProps: re } = Pe(Le, a, C), { buttonProps: Ke } = Ye(Ve, W), { width: ne } = A.current?.getBoundingClientRect() ?? {
+    c
+  ), { listBoxProps: le } = Xe(je, c, O), { buttonProps: He } = Je(Ke, Y), { width: ae } = z.current?.getBoundingClientRect() ?? {
     width: 240
   };
-  co(A, () => {
-    a.isOpen && !r && a.close();
-  }, [O]);
-  const z = Array.from(a.collection), se = r ? z.findLastIndex(
-    (e) => e.key === "All" || Y.current.has(String(e.key))
-  ) : -1, je = x(() => o.map((e) => e.value), [o]), le = x(
+  po(z, () => {
+    c.isOpen && !t && c.close();
+  }, [R]);
+  const I = Array.from(c.collection), ce = t ? I.findLastIndex(
+    (e) => e.key === "All" || q.current.has(String(e.key))
+  ) : -1, Ue = $(() => o.map((e) => e.value), [o]), ie = $(
     () => new Map(o.map((e) => [e.value, e.group])),
     [o]
-  ), He = x(
+  ), We = $(
     () => new Map(o.map((e) => [e.value, e.tag])),
     [o]
-  ), T = x(() => z.reduce(
-    (e, s, c) => {
-      const i = le.get(String(s.key));
-      return i !== void 0 && i !== e.currentGroup ? (e.result.push({ type: "header", group: i }), e.currentGroup = i) : i === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: c }), e;
+  ), T = $(() => I.reduce(
+    (e, s, p) => {
+      const u = ie.get(String(s.key));
+      return u !== void 0 && u !== e.currentGroup ? (e.result.push({ type: "header", group: u }), e.currentGroup = u) : u === void 0 && e.currentGroup !== void 0 && (e.currentGroup = void 0), e.result.push({ type: "item", index: p }), e;
     },
     { result: [], currentGroup: void 0 }
-  ).result, [z, le]), ae = We({
+  ).result, [I, ie]), pe = qe({
     count: T.length,
     estimateSize: (e) => T[e].type === "header" ? 44 : 28,
-    getScrollElement: () => C.current,
+    getScrollElement: () => O.current,
     useFlushSync: !1
-  }), ce = a.isOpen && !h, V = ce && !!Z, ie = ce && o.length === 0 && !!X, Ue = y(
+  }), ue = c.isOpen && !h, E = ue && !!ee, fe = ue && o.length === 0 && !!_, Ye = v(
     (e) => {
       e.preventDefault();
     },
     []
-  ), pe = V ? (
+  ), de = E ? (
     // A listbox only owns options, so the row itself must stay presentational
-    /* @__PURE__ */ t(to, { onMouseDown: Ue, role: "presentation", children: /* @__PURE__ */ t("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ t(
-      J,
+    /* @__PURE__ */ r(no, { onMouseDown: Ye, role: "presentation", children: /* @__PURE__ */ r("div", { "aria-live": "polite", role: "status", children: /* @__PURE__ */ r(
+      P,
       {
         color: m.palette.gray[400],
         size: "sm",
         textOverflow: "auto",
         whiteSpace: "wrap",
-        children: Z
+        children: ee
       }
     ) }) })
   ) : null;
-  return /* @__PURE__ */ F(
-    _e,
+  return /* @__PURE__ */ G(
+    oo,
     {
-      containerRef: oe,
+      containerRef: ne,
       error: k,
-      helpLink: ye,
-      helpLinkText: ve,
-      helpText: xe,
+      helpLink: $e,
+      helpLinkText: be,
+      helpText: we,
       htmlFor: l,
       id: `combobox-${l}`,
-      label: P,
-      required: Se,
-      tooltip: Be,
-      weight: Ae,
+      label: Q,
+      required: Ce,
+      tooltip: Ae,
+      weight: ze,
       children: [
-        /* @__PURE__ */ F(
-          eo,
+        /* @__PURE__ */ G(
+          to,
           {
             className: `${h ? "disabled" : ""} ${k ? "error" : ""}`,
-            ref: A,
+            ref: z,
             children: [
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ r(
                 "input",
                 {
-                  ...Ee,
+                  ...Le,
                   "aria-invalid": k ? "true" : "false",
                   "aria-label": l,
                   disabled: h,
-                  onKeyDown: te,
-                  ref: U
+                  onKeyDown: se,
+                  ref: W
                 }
               ),
-              k ? /* @__PURE__ */ t(
-                q,
+              k ? /* @__PURE__ */ r(
+                J,
                 {
                   icon: "exclamation-circle",
                   iconClass: "error-icon",
@@ -251,34 +262,34 @@ const ko = ({
                   iconSize: "lg"
                 }
               ) : void 0,
-              we && !h && (r ? (w?.(`${l}Options`)?.length ?? 0) > 0 : _) ? /* @__PURE__ */ t(
-                ao,
+              Be && !h && (t ? (S?.(`${l}Options`)?.length ?? 0) > 0 : oe) ? /* @__PURE__ */ r(
+                io,
                 {
                   icon: "xmark",
                   iconColor: m.palette.gray[400],
                   iconSize: "sm",
                   iconType: "fa-light",
-                  onClick: Te,
+                  onClick: Ee,
                   px: 0.125,
                   py: 0.125,
                   type: "reset",
                   variant: "ghost"
                 }
               ) : void 0,
-              /* @__PURE__ */ F(
-                ro,
+              /* @__PURE__ */ G(
+                so,
                 {
-                  ...Ke,
+                  ...He,
                   $variant: "ghost",
-                  className: `action ${a.isOpen && !h ? "open" : "closed"}`,
+                  className: `action ${c.isOpen && !h ? "open" : "closed"}`,
                   disabled: h,
                   px: 0.125,
                   py: 0.125,
-                  ref: W,
+                  ref: Y,
                   type: "button",
                   children: [
-                    /* @__PURE__ */ t("div", { className: "chevron-down", children: /* @__PURE__ */ t(
-                      q,
+                    /* @__PURE__ */ r("div", { className: "chevron-down", children: /* @__PURE__ */ r(
+                      J,
                       {
                         clickable: !1,
                         icon: "chevron-down",
@@ -287,8 +298,8 @@ const ko = ({
                         iconType: "fa-light"
                       }
                     ) }),
-                    /* @__PURE__ */ t("div", { className: "chevron-up", children: /* @__PURE__ */ t(
-                      q,
+                    /* @__PURE__ */ r("div", { className: "chevron-up", children: /* @__PURE__ */ r(
+                      J,
                       {
                         clickable: !1,
                         icon: "chevron-up",
@@ -303,36 +314,36 @@ const ko = ({
             ]
           }
         ),
-        a.isOpen && a.collection.size > 0 && !h ? /* @__PURE__ */ t(
-          de,
+        c.isOpen && c.collection.size > 0 && !h ? /* @__PURE__ */ r(
+          ge,
           {
             className: "dropdown",
             id: `popover-${l}`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: O,
-            state: a,
-            triggerRef: A,
-            children: /* @__PURE__ */ F(
-              he,
+            popoverRef: R,
+            state: c,
+            triggerRef: z,
+            children: /* @__PURE__ */ G(
+              ye,
               {
-                ...re,
-                $hasStatus: V,
-                $multiSelection: r && !Array.from($ ?? []).includes("All"),
-                $width: ne,
-                ref: C,
+                ...le,
+                $hasStatus: E,
+                $multiSelection: t && !Array.from(b ?? []).includes("All"),
+                $width: ae,
+                ref: O,
                 children: [
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ r(
                     "div",
                     {
                       style: {
-                        height: `${ae.getTotalSize()}px`,
+                        height: `${pe.getTotalSize()}px`,
                         position: "relative"
                       },
-                      children: ae.getVirtualItems().map((e) => {
+                      children: pe.getVirtualItems().map((e) => {
                         const s = T[e.index];
                         if (s.type === "header")
-                          return /* @__PURE__ */ t(
+                          return /* @__PURE__ */ r(
                             "div",
                             {
                               style: {
@@ -343,8 +354,8 @@ const ko = ({
                                 height: `${e.size}px`,
                                 transform: `translateY(${e.start}px)`
                               },
-                              children: /* @__PURE__ */ t(no, { children: /* @__PURE__ */ t(
-                                J,
+                              children: /* @__PURE__ */ r(lo, { children: /* @__PURE__ */ r(
+                                P,
                                 {
                                   color: m.palette.gray[400],
                                   fontWeight: "bold",
@@ -355,8 +366,8 @@ const ko = ({
                             },
                             `header-${e.index}`
                           );
-                        const c = z[s.index], i = T[e.index + 1], n = c.key === "All" && i?.type === "header", p = r && s.index === se && se >= 0 && s.index < z.length - 1 && !n;
-                        return /* @__PURE__ */ t(
+                        const p = I[s.index], u = T[e.index + 1], n = p.key === "All" && u?.type === "header", f = t && s.index === ce && ce >= 0 && s.index < I.length - 1 && !n;
+                        return /* @__PURE__ */ r(
                           "div",
                           {
                             style: {
@@ -366,65 +377,65 @@ const ko = ({
                               width: "100%",
                               height: `${e.size}px`,
                               transform: `translateY(${e.start}px)`,
-                              borderBottom: p ? `1px solid ${m.palette.gray[200]}` : void 0
+                              borderBottom: f ? `1px solid ${m.palette.gray[200]}` : void 0
                             },
-                            children: /* @__PURE__ */ t(
-                              oo,
+                            children: /* @__PURE__ */ r(
+                              ro,
                               {
-                                allItemKeys: je,
-                                containerRef: oe,
-                                item: c,
-                                multiSelection: r,
+                                allItemKeys: Ue,
+                                containerRef: ne,
+                                item: p,
+                                multiSelection: t,
                                 name: l,
-                                popoverRef: O,
-                                setInputValue: S,
-                                setValue: b,
-                                state: a,
-                                tag: He.get(String(c.key)),
-                                watch: w
+                                popoverRef: R,
+                                setInputValue: x,
+                                setValue: w,
+                                state: c,
+                                tag: We.get(String(p.key)),
+                                watch: S
                               }
                             )
                           },
-                          c.key
+                          p.key
                         );
                       })
                     }
                   ),
-                  pe
+                  de
                 ]
               }
             )
           }
-        ) : !ie && !V ? null : /* @__PURE__ */ t(
-          de,
+        ) : !fe && !E ? null : /* @__PURE__ */ r(
+          ge,
           {
             className: "dropdown",
             id: `popover-${l}-empty`,
             offset: 4,
             placement: "bottom start",
-            popoverRef: O,
-            state: a,
-            triggerRef: A,
-            children: /* @__PURE__ */ F(
-              he,
+            popoverRef: R,
+            state: c,
+            triggerRef: z,
+            children: /* @__PURE__ */ G(
+              ye,
               {
-                ...re,
-                $hasStatus: V,
+                ...le,
+                $hasStatus: E,
                 $multiSelection: !1,
-                $width: ne,
-                ref: C,
+                $width: ae,
+                ref: O,
                 children: [
-                  ie ? /* @__PURE__ */ t(so, { children: /* @__PURE__ */ t(
-                    J,
+                  fe ? /* @__PURE__ */ r(ao, { children: /* @__PURE__ */ r(
+                    P,
                     {
                       color: m.palette.gray[400],
                       size: "md",
                       textOverflow: "auto",
                       whiteSpace: "wrap",
-                      children: X
+                      children: _
                     }
                   ) }) : null,
-                  pe
+                  de
                 ]
               }
             )

package/dist/components/segmented-progress-bar/styles.js

@@ -1,37 +1,38 @@
-import { styled as t } from "styled-components";
-import { setMargin as a } from "../@core/utils.js";
-const b = t.div`
+import { styled as e } from "styled-components";
+import { setMargin as x } from "../@core/utils.js";
+const s = e.div`
   ${({
   $backgroundColor: r,
-  $height: o,
-  $width: e,
-  $ml: i,
+  $height: i,
+  $width: o,
+  $ml: t,
   $mr: d,
-  $mt: l,
-  $mb: m,
-  $mx: n,
+  $mt: m,
+  $mb: n,
+  $mx: l,
   $my: h,
-  $margin: $
+  $margin: a
 }) => `
     background-color: ${r};
     border-radius: 999px;
     display: flex;
-    height: ${o};
+    height: ${i};
     overflow: hidden;
-    width: ${e};
-    ${a({ margin: $, mb: m, ml: i, mr: d, mt: l, mx: n, my: h })}
+    width: ${o};
+    ${x({ margin: a, mb: n, ml: t, mr: d, mt: m, mx: l, my: h })}
   `}
-`, x = t.div`
-  ${({ $color: r, $showSeparator: o, $width: e, theme: i }) => `
+`, b = e.div`
+  ${({ $color: r, $showSeparator: i, $width: o, theme: t }) => `
     background-color: ${r};
     box-sizing: border-box;
-    flex-shrink: 0;
+    flex-shrink: 1;
     height: 100%;
-    width: ${e}%;
-    ${o ? `border-right: 1.5px solid ${i.palette.white};` : ""}
+    min-width: max(1%, 10px);
+    width: ${o}%;
+    ${i ? `border-right: 1.5px solid ${t.palette.white};` : ""}
   `}
 `;
 export {
-  b as StyledBarContainer,
-  x as StyledSegment
+  s as StyledBarContainer,
+  b as StyledSegment
 };

package/dist/components/segmented-progress-bar/types.d.ts

@@ -2,7 +2,7 @@ import { IDisplayModifiable, IMarginModifiable } from '../@core';
 /**
  * Segment configuration for the progress bar.
  * @interface ISegment
- * @property { number } value - Percentage width of the segment (0-100). A segment with 0 or less is not drawn.
+ * @property { number } value - Percentage width of the segment (0-100). A segment with 0 or less is not drawn; a visible segment is at least 1% or 10px wide, whichever is larger.
  * @property { string } [color] - Background color of the segment. Defaults to primary[700], error[500], warning[500] in order.
  */
 interface ISegment {

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "9.5.1"
+  "version": "9.5.3"
 }