npm - @acronis-platform/ui-react - Versions diffs - 3.0.0 → 4.1.0 - Mend

@acronis-platform/ui-react 3.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (772) hide show

package/dist/components/ui/input-select/input-select.js CHANGED Viewed

@@ -1,340 +1,230 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import * as a from "react";
-import { Select as c } from "@base-ui/react/select";
-import { ChevronDownIcon as f, ChevronRightIcon as N, CheckIcon as h, MagnifierIcon as k, InboxIcon as C, CircleWarningIcon as R } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as s } from "../../../lib/utils.js";
-import { usePortalContainer as z } from "../../../lib/portal-container.js";
-const w = a.createContext(!1), g = a.createContext(null);
-function X() {
-  const t = a.useContext(g);
-  if (!t)
-    throw new Error("useInputSelectFilter must be used within <InputSelect>.");
-  return t;
+import { cn as e } from "../../../lib/utils.js";
+import { usePortalContainer as t } from "../../../lib/portal-container.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { CheckIcon as a, ChevronDownIcon as o, ChevronRightIcon as s, CircleWarningIcon as c, InboxIcon as l, MagnifierIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { Select as d } from "@base-ui/react/select";
+//#region src/components/ui/input-select/input-select.tsx
+var f = n.createContext(!1), p = n.createContext(null);
+function m() {
+	let e = n.useContext(p);
+	if (!e) throw Error("useInputSelectFilter must be used within <InputSelect>.");
+	return e;
 }
-function E(t) {
-  const { onOpenChange: e } = t, [r, i] = a.useState(""), l = a.useMemo(() => ({ query: r, setQuery: i }), [r]), d = a.useCallback(
-    (n, u) => {
-      e == null || e(n, u), n || i("");
-    },
-    [e]
-  );
-  return /* @__PURE__ */ o(w.Provider, { value: !!t.multiple, children: /* @__PURE__ */ o(g.Provider, { value: l, children: /* @__PURE__ */ o(c.Root, { ...t, onOpenChange: d }) }) });
+function h(e) {
+	let { onOpenChange: t } = e, [i, a] = n.useState(""), o = n.useMemo(() => ({
+		query: i,
+		setQuery: a
+	}), [i]), s = n.useCallback((e, n) => {
+		t?.(e, n), e || a("");
+	}, [t]);
+	return /* @__PURE__ */ r(f.Provider, {
+		value: !!e.multiple,
+		children: /* @__PURE__ */ r(p.Provider, {
+			value: o,
+			children: /* @__PURE__ */ r(d.Root, {
+				...e,
+				onOpenChange: s
+			})
+		})
+	});
 }
-E.displayName = "InputSelect";
-const Y = c.Group, T = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  "div",
-  {
-    ref: r,
-    className: s(
-      "flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]",
-      t
-    ),
-    ...e
-  }
-));
-T.displayName = "InputSelectField";
-const L = a.forwardRef(({ className: t, children: e, required: r, ...i }, l) => /* @__PURE__ */ m(
-  c.Label,
-  {
-    ref: l,
-    className: s(
-      "flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]",
-      t
-    ),
-    ...i,
-    children: [
-      e,
-      r && /* @__PURE__ */ o(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "text-[var(--ui-input-select-global-required-color)]",
-          children: "*"
-        }
-      )
-    ]
-  }
-));
-L.displayName = "InputSelectLabel";
-const P = a.forwardRef(({ className: t, children: e, ...r }, i) => /* @__PURE__ */ m(
-  c.Trigger,
-  {
-    ref: i,
-    className: s(
-      "group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors",
-      "not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
-      "focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
-      "data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]",
-      "data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]",
-      // Error treatment (driven by `aria-invalid`).
-      "aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]",
-      t
-    ),
-    ...r,
-    children: [
-      e,
-      /* @__PURE__ */ o(c.Icon, { className: "flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]", children: /* @__PURE__ */ o(
-        f,
-        {
-          size: 16,
-          className: "transition-transform group-data-[popup-open]:rotate-180"
-        }
-      ) })
-    ]
-  }
-));
-P.displayName = "InputSelectTrigger";
-const j = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  c.Value,
-  {
-    ref: r,
-    className: s(
-      "min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]",
-      "group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]",
-      t
-    ),
-    ...e
-  }
-));
-j.displayName = "InputSelectValue";
-const G = a.forwardRef(
-  ({
-    className: t,
-    children: e,
-    sideOffset: r = 4,
-    align: i = "start",
-    side: l = "bottom",
-    portalContainer: d,
-    ...n
-  }, u) => {
-    const b = z(), p = d ?? b;
-    return /* @__PURE__ */ o(c.Portal, { container: p, children: /* @__PURE__ */ o(
-      c.Positioner,
-      {
-        sideOffset: r,
-        align: i,
-        side: l,
-        alignItemWithTrigger: !1,
-        className: "z-50 outline-none",
-        children: /* @__PURE__ */ o(
-          c.Popup,
-          {
-            ref: u,
-            className: s(
-              "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
-              t
-            ),
-            ...n,
-            children: e
-          }
-        )
-      }
-    ) });
-  }
-);
-G.displayName = "InputSelectContent";
-const q = a.forwardRef(({ className: t, value: e, onChange: r, onKeyDown: i, ...l }, d) => {
-  const n = a.useContext(g), u = n == null ? void 0 : n.setQuery, b = e !== void 0;
-  return a.useEffect(() => {
-    b && (u == null || u(String(e ?? "")));
-  }, [b, e, u]), /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]", children: [
-    /* @__PURE__ */ o(
-      k,
-      {
-        size: 16,
-        className: "shrink-0 text-[var(--ui-glyph-on-surface-primary)]"
-      }
-    ),
-    /* @__PURE__ */ o(
-      "input",
-      {
-        ref: d,
-        type: "search",
-        value: e ?? (n == null ? void 0 : n.query) ?? "",
-        onChange: (p) => {
-          r == null || r(p), b || n == null || n.setQuery(p.currentTarget.value);
-        },
-        onKeyDown: (p) => {
-          i == null || i(p), p.key.length === 1 && p.stopPropagation();
-        },
-        className: s(
-          "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none",
-          t
-        ),
-        ...l
-      }
-    )
-  ] });
+h.displayName = "InputSelect";
+var g = d.Group, _ = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]", t),
+	...n
+}));
+_.displayName = "InputSelectField";
+var v = n.forwardRef(({ className: t, children: n, required: a, ...o }, s) => /* @__PURE__ */ i(d.Label, {
+	ref: s,
+	className: e("flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]", t),
+	...o,
+	children: [n, a && /* @__PURE__ */ r("span", {
+		"aria-hidden": "true",
+		className: "text-[var(--ui-input-select-global-required-color)]",
+		children: "*"
+	})]
+}));
+v.displayName = "InputSelectLabel";
+var y = n.forwardRef(({ className: t, children: n, ...a }, s) => /* @__PURE__ */ i(d.Trigger, {
+	ref: s,
+	className: e("group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors", "not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]", "focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]", "data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]", "data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]", "aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]", t),
+	...a,
+	children: [n, /* @__PURE__ */ r(d.Icon, {
+		className: "flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
+		children: /* @__PURE__ */ r(o, {
+			size: 16,
+			className: "transition-transform group-data-[popup-open]:rotate-180"
+		})
+	})]
+}));
+y.displayName = "InputSelectTrigger";
+var b = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(d.Value, {
+	ref: i,
+	className: e("min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]", "group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]", t),
+	...n
+}));
+b.displayName = "InputSelectValue";
+var x = n.forwardRef(({ className: n, children: i, sideOffset: a = 4, align: o = "start", side: s = "bottom", portalContainer: c, ...l }, u) => {
+	let f = t(), p = c ?? f;
+	return /* @__PURE__ */ r(d.Portal, {
+		container: p,
+		children: /* @__PURE__ */ r(d.Positioner, {
+			sideOffset: a,
+			align: o,
+			side: s,
+			alignItemWithTrigger: !1,
+			className: "z-50 outline-none",
+			children: /* @__PURE__ */ r(d.Popup, {
+				ref: u,
+				className: e("max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none", n),
+				...l,
+				children: i
+			})
+		})
+	});
 });
-q.displayName = "InputSelectSearch";
-const F = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  c.Group,
-  {
-    ref: r,
-    className: s(
-      "flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0",
-      t
-    ),
-    ...e
-  }
-));
-F.displayName = "InputSelectSection";
-const W = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  c.GroupLabel,
-  {
-    ref: r,
-    className: s(
-      "px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]",
-      t
-    ),
-    ...e
-  }
-));
-W.displayName = "InputSelectSectionLabel";
-const y = 16, M = 24;
-function I(t) {
-  return y + (t - 1) * M;
+x.displayName = "InputSelectContent";
+var S = n.forwardRef(({ className: t, value: a, onChange: o, onKeyDown: s, ...c }, l) => {
+	let d = n.useContext(p), f = d?.setQuery, m = a !== void 0;
+	return n.useEffect(() => {
+		m && f?.(String(a ?? ""));
+	}, [
+		m,
+		a,
+		f
+	]), /* @__PURE__ */ i("div", {
+		className: "flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]",
+		children: [/* @__PURE__ */ r(u, {
+			size: 16,
+			className: "shrink-0 text-[var(--ui-glyph-on-surface-primary)]"
+		}), /* @__PURE__ */ r("input", {
+			ref: l,
+			type: "search",
+			value: a ?? d?.query ?? "",
+			onChange: (e) => {
+				o?.(e), m || d?.setQuery(e.currentTarget.value);
+			},
+			onKeyDown: (e) => {
+				s?.(e), e.key.length === 1 && e.stopPropagation();
+			},
+			className: e("min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none", t),
+			...c
+		})]
+	});
+});
+S.displayName = "InputSelectSearch";
+var C = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(d.Group, {
+	ref: i,
+	className: e("flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0", t),
+	...n
+}));
+C.displayName = "InputSelectSection";
+var w = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(d.GroupLabel, {
+	ref: i,
+	className: e("px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]", t),
+	...n
+}));
+w.displayName = "InputSelectSectionLabel";
+var T = 16, E = 24;
+function D(e) {
+	return T + (e - 1) * E;
 }
-const V = a.forwardRef(({ className: t, children: e, icon: r, indent: i, textValue: l, hidden: d, ...n }, u) => {
-  const b = a.useContext(w), p = a.useContext(g), v = (p == null ? void 0 : p.query.trim().toLowerCase()) ?? "", x = l ?? (typeof e == "string" ? e : void 0), S = v.length > 0 && x !== void 0 && !x.toLowerCase().includes(v);
-  return /* @__PURE__ */ m(
-    c.Item,
-    {
-      ref: u,
-      hidden: d ?? S,
-      className: s(
-        "group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
-        "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
-        // Single-select rows tint when selected; multiple-select rows keep the
-        // unselected background (the leading checkbox carries the state).
-        !b && "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]",
-        "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
-        t
-      ),
-      ...n,
-      children: [
-        b && /* @__PURE__ */ o(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]",
-            children: /* @__PURE__ */ o(h, { size: 16 })
-          }
-        ),
-        typeof i == "number" && i > 0 && /* @__PURE__ */ o(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "size-4 shrink-0",
-            style: { minWidth: I(i) }
-          }
-        ),
-        r && /* @__PURE__ */ o("span", { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]", children: r }),
-        /* @__PURE__ */ o(c.ItemText, { className: "min-w-0 flex-1 truncate", children: e }),
-        !b && /* @__PURE__ */ o(c.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]", children: /* @__PURE__ */ o(h, { size: 16 }) })
-      ]
-    }
-  );
+var O = n.forwardRef(({ className: t, children: o, icon: s, indent: c, textValue: l, hidden: u, ...m }, h) => {
+	let g = n.useContext(f), _ = n.useContext(p)?.query.trim().toLowerCase() ?? "", v = l ?? (typeof o == "string" ? o : void 0), y = _.length > 0 && v !== void 0 && !v.toLowerCase().includes(_);
+	return /* @__PURE__ */ i(d.Item, {
+		ref: h,
+		hidden: u ?? y,
+		className: e("group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none", "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]", !g && "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]", "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]", t),
+		...m,
+		children: [
+			g && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]",
+				children: /* @__PURE__ */ r(a, { size: 16 })
+			}),
+			typeof c == "number" && c > 0 && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "size-4 shrink-0",
+				style: { minWidth: D(c) }
+			}),
+			s && /* @__PURE__ */ r("span", {
+				className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]",
+				children: s
+			}),
+			/* @__PURE__ */ r(d.ItemText, {
+				className: "min-w-0 flex-1 truncate",
+				children: o
+			}),
+			!g && /* @__PURE__ */ r(d.ItemIndicator, {
+				className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]",
+				children: /* @__PURE__ */ r(a, { size: 16 })
+			})
+		]
+	});
 });
-V.displayName = "InputSelectItem";
-const B = a.forwardRef(({ className: t, children: e, expanded: r, onToggle: i, icon: l, indent: d, ...n }, u) => /* @__PURE__ */ m(
-  "button",
-  {
-    ref: u,
-    type: "button",
-    onClick: i,
-    "aria-expanded": r,
-    className: s(
-      "group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
-      "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
-      t
-    ),
-    ...n,
-    children: [
-      /* @__PURE__ */ o(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]",
-          style: {
-            minWidth: typeof d == "number" && d > 0 ? I(d) : y
-          },
-          children: r ? /* @__PURE__ */ o(f, { size: 16 }) : /* @__PURE__ */ o(N, { size: 16 })
-        }
-      ),
-      l && /* @__PURE__ */ o("span", { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]", children: l }),
-      /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 truncate", children: e })
-    ]
-  }
-));
-B.displayName = "InputSelectExpander";
-const Q = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  "p",
-  {
-    ref: r,
-    className: s(
-      "text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]",
-      t
-    ),
-    ...e
-  }
-));
-Q.displayName = "InputSelectDescription";
-const _ = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
-  "p",
-  {
-    ref: r,
-    className: s(
-      "text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]",
-      t
-    ),
-    ...e
-  }
-));
-_.displayName = "InputSelectError";
-const A = a.forwardRef(
-  ({ className: t, variant: e, children: r, action: i, ...l }, d) => /* @__PURE__ */ m(
-    "div",
-    {
-      ref: d,
-      className: s(
-        "flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]",
-        t
-      ),
-      ...l,
-      children: [
-        e === "loading" && /* @__PURE__ */ o(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent"
-          }
-        ),
-        e === "empty" && /* @__PURE__ */ o(C, { size: 24, className: "text-[var(--ui-glyph-on-status-info)]" }),
-        e === "error" && /* @__PURE__ */ o(R, { size: 24, className: "text-[var(--ui-glyph-on-status-warning)]" }),
-        r,
-        e === "error" && i
-      ]
-    }
-  )
-);
-A.displayName = "InputSelectStatus";
-export {
-  E as InputSelect,
-  G as InputSelectContent,
-  Q as InputSelectDescription,
-  _ as InputSelectError,
-  B as InputSelectExpander,
-  T as InputSelectField,
-  Y as InputSelectGroup,
-  V as InputSelectItem,
-  L as InputSelectLabel,
-  q as InputSelectSearch,
-  F as InputSelectSection,
-  W as InputSelectSectionLabel,
-  A as InputSelectStatus,
-  P as InputSelectTrigger,
-  j as InputSelectValue,
-  X as useInputSelectFilter
-};
-//# sourceMappingURL=input-select.js.map
+O.displayName = "InputSelectItem";
+var k = n.forwardRef(({ className: t, children: n, expanded: a, onToggle: c, icon: l, indent: u, ...d }, f) => /* @__PURE__ */ i("button", {
+	ref: f,
+	type: "button",
+	onClick: c,
+	"aria-expanded": a,
+	className: e("group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none", "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]", t),
+	...d,
+	children: [
+		/* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: "flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]",
+			style: { minWidth: typeof u == "number" && u > 0 ? D(u) : T },
+			children: r(a ? o : s, { size: 16 })
+		}),
+		l && /* @__PURE__ */ r("span", {
+			className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]",
+			children: l
+		}),
+		/* @__PURE__ */ r("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: n
+		})
+	]
+}));
+k.displayName = "InputSelectExpander";
+var A = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("p", {
+	ref: i,
+	className: e("text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]", t),
+	...n
+}));
+A.displayName = "InputSelectDescription";
+var j = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("p", {
+	ref: i,
+	className: e("text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]", t),
+	...n
+}));
+j.displayName = "InputSelectError";
+var M = n.forwardRef(({ className: t, variant: n, children: a, action: o, ...s }, u) => /* @__PURE__ */ i("div", {
+	ref: u,
+	className: e("flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]", t),
+	...s,
+	children: [
+		n === "loading" && /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: "size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent"
+		}),
+		n === "empty" && /* @__PURE__ */ r(l, {
+			size: 24,
+			className: "text-[var(--ui-glyph-on-status-info)]"
+		}),
+		n === "error" && /* @__PURE__ */ r(c, {
+			size: 24,
+			className: "text-[var(--ui-glyph-on-status-warning)]"
+		}),
+		a,
+		n === "error" && o
+	]
+}));
+M.displayName = "InputSelectStatus";
+//#endregion
+export { h as InputSelect, x as InputSelectContent, A as InputSelectDescription, j as InputSelectError, k as InputSelectExpander, _ as InputSelectField, g as InputSelectGroup, O as InputSelectItem, v as InputSelectLabel, S as InputSelectSearch, C as InputSelectSection, w as InputSelectSectionLabel, M as InputSelectStatus, y as InputSelectTrigger, b as InputSelectValue, m as useInputSelectFilter };
+//# sourceMappingURL=input-select.js.map