@alif-ui-test/core 1.11.0 → 2.0.0-alpha.6

package/dist/components/Select/Select.js

@@ -1,140 +1,107 @@
-import { jsxs as Y, jsx as n } from "react/jsx-runtime";
-import { useState as v, useMemo as L, useEffect as Z } from "react";
-import c from "./Select.module.css.js";
-import { isObjectValue as _, getFieldValue as S, restoreSearchValue as w } from "./Select.utils.js";
-import { Popover as f } from "../Popover/Popover.js";
-import { Input as $ } from "../Input/Input.js";
-import { ListItem as b } from "../ListItem/ListItem.js";
-import { classNames as I } from "../../utils/class-names.js";
-import { OutlineNavigationChevronDownSmall as ee } from "../../icons/components/OutlineNavigationChevronDownSmall.js";
-const ue = ({
-  onChange: d,
-  value: t,
-  onSearch: N,
-  onSearchList: O,
-  className: x,
-  fullWidth: g = !0,
-  style: D,
-  id: j,
-  name: T,
-  searchValue: y,
-  searchPlaceholder: A,
-  customNoOptionsText: F,
-  isCenteredContent: M,
-  itemClassName: k,
-  hasSearch: E,
-  options: r = [],
-  proportions: C = "m",
-  keepLabel: p,
-  filterable: i = !0,
-  showClearIcon: P = !0,
-  isLoading: R,
-  onBlur: W,
-  disabled: h,
-  disableClientFilter: V = !1,
-  ...q
-}) => {
-  const [s, u] = v(!1), o = L(
-    () => _(t) ? t.value : t,
-    [t]
-  ), [m, l] = v(""), z = I(
-    g && c.fullWidth,
-    h && c.disabled,
-    x
-  ), B = I(
-    s && c.chevronActive,
-    c.chevron
-  ), G = L(() => !i || V || S(r, o) === m ? r : r.filter(
-    (e) => e.label.toLowerCase().includes(m.toLowerCase())
-  ), [
-    i,
-    V,
-    r,
-    o,
-    m
-  ]), H = () => {
-    d(null, null), l("");
-  }, J = () => {
-    h || u((e) => !e);
-  }, K = (e) => {
-    const { value: a } = e.target;
-    l(a), N?.(a, e), !s && i && u(!0);
-  }, Q = () => {
-    const e = w(
-      t,
-      r,
-      o
-    );
-    l(e), u(!1);
-  }, U = (e, a) => {
-    d(e, a), l(S(r, e)), u(!1);
-  }, X = (e, a) => {
-    O?.(e, a);
-  };
-  return Z(() => {
-    if (!s) {
-      const e = w(
-        t,
-        r,
-        o
-      );
-      l(e);
-    }
-  }, [r, s, o, t]), /* @__PURE__ */ Y(
-    f,
-    {
-      width: "trigger",
-      isOpen: s,
-      onClose: Q,
-      children: [
-        /* @__PURE__ */ n(f.Trigger, { className: z, style: D, onBlur: W, children: /* @__PURE__ */ n(
-          $,
-          {
-            fullWidth: !0,
-            onClear: P ? H : void 0,
-            value: m,
-            proportions: C,
-            keepLabelFixed: s && !p,
-            rightIcon: /* @__PURE__ */ n(
-              ee,
-              {
-                onMouseDown: (e) => e.preventDefault(),
-                "aria-label": "Toggle dropdown",
-                className: B
-              }
-            ),
-            onFieldClick: J,
-            onChange: K,
-            readOnly: !i,
-            id: j,
-            name: T,
-            keepLabel: p,
-            disabled: h,
-            ...q
-          }
-        ) }),
-        /* @__PURE__ */ n(f.Dropdown, { className: c.root, children: /* @__PURE__ */ n(
-          b,
-          {
-            isLoading: R,
-            values: o,
-            onChangeList: U,
-            options: G,
-            fullWidth: g,
-            proportions: C === "l" ? "l" : "m",
-            searchPlaceholder: A,
-            searchValue: y,
-            itemClassName: k,
-            isCenteredContent: M,
-            customNoOptionsText: F,
-            onSearch: X,
-            hasSearch: E
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  ue as Select
+import { classNames as e } from "../../utils/class-names.js";
+import { Popover as t } from "../Popover/Popover.js";
+import { Input as n } from "../Input/Input.js";
+import { List as r } from "../List/List.js";
+import i from "./Select.module.js";
+import { getFieldValue as a, isGroupedOptions as o, isObjectValue as s, matchesSearch as c, restoreSearchValue as l } from "./Select.utils.js";
+import { useEffect as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { OutlineNavigationChevronDown as h } from "@alif-ui-test/icons";
+//#region src/components/Select/Select.tsx
+var g = ({ id: g, name: _, value: v, options: y = [], label: b, placeholder: x, customEmptyText: S, size: C = "m", fullWidth: w = !0, alignItemsCenter: T, className: E, itemClassName: D, style: O, filterable: k = !0, disableClientFilter: A = !1, showClearIcon: j = !0, disabled: M, loading: N = !1, skeletonCount: P = 2, hasError: F, hintLeftSection: I, hintRightSection: L, onChange: R, onSearch: z, onBlur: B }) => {
+	let [V, H] = f(!1), [U, W] = f(""), G = d(() => s(v) ? v.value : v, [v]), K = d(() => !k || A || a(y, G) === U ? y : o(y) ? y.map((e) => ({
+		...e,
+		options: e.options.filter(c(U))
+	})).filter((e) => e.options.length > 0) : y.filter(c(U)), [
+		k,
+		A,
+		y,
+		G,
+		U
+	]), q = () => {
+		R(null, null), W("");
+	}, J = (e) => {
+		let { value: t } = e.target;
+		W(t), z?.(t, e), !V && k && H(!0);
+	}, Y = () => {
+		W(l(v, y, G)), H(!1);
+	}, X = (e, t) => {
+		t.disabled || (R(e, t), W(a(y, e)), H(!1));
+	};
+	return u(() => {
+		V || W(l(v, y, G));
+	}, [
+		y,
+		V,
+		G,
+		v
+	]), /* @__PURE__ */ m(t, {
+		width: "trigger",
+		isOpen: V,
+		onClose: Y,
+		offset: 4,
+		children: [/* @__PURE__ */ p(t.Trigger, {
+			style: O,
+			onBlur: B,
+			className: e(w && "uiFullWidth", M && i.disabled, E),
+			children: /* @__PURE__ */ p(n, {
+				fullWidth: !0,
+				onClear: j ? q : void 0,
+				value: U,
+				size: C,
+				rightIcon: /* @__PURE__ */ p(h, {
+					onMouseDown: (e) => e.preventDefault(),
+					"aria-label": "Toggle dropdown",
+					className: e(V && i.chevronActive, i.chevron)
+				}),
+				onChange: J,
+				readOnly: !k,
+				id: g,
+				name: _,
+				disabled: M,
+				label: b,
+				placeholder: x,
+				hasError: F,
+				onFieldClick: () => H((e) => !e),
+				hintLeftSection: I,
+				hintRightSection: L
+			})
+		}), /* @__PURE__ */ p(t.Dropdown, { children: /* @__PURE__ */ p(r, {
+			loading: N,
+			skeletonCount: P,
+			size: C === "l" ? "l" : "m",
+			fullWidth: w,
+			customEmptyText: S,
+			children: o(K) ? K.map((e, t) => /* @__PURE__ */ p(r.Group, {
+				title: e.title,
+				collapsible: e.collapsible,
+				defaultOpen: e.defaultOpen,
+				children: e.options.map((e) => /* @__PURE__ */ p(r.Item, {
+					value: e.value,
+					label: e.label,
+					secondaryText: e.secondaryText,
+					disabled: e.disabled,
+					alignItemCenter: T,
+					selected: G === e.value,
+					onClick: (t) => X(t, e),
+					className: D,
+					leftSection: e.leftSection,
+					rightSection: e.rightSection
+				}, String(e.value)))
+			}, t)) : K.map((e) => /* @__PURE__ */ p(r.Item, {
+				value: e.value,
+				label: e.label,
+				secondaryText: e.secondaryText,
+				disabled: e.disabled,
+				alignItemCenter: T,
+				selected: G === e.value,
+				onClick: (t) => X(t, e),
+				className: D,
+				leftSection: e.leftSection,
+				rightSection: e.rightSection
+			}, String(e.value)))
+		}) })]
+	});
 };
+//#endregion
+export { g as Select };

package/dist/components/Select/Select.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_l0yzs_1",
+	chevron: "_chevron_l0yzs_5",
+	chevronActive: "_chevronActive_l0yzs_9",
+	disabled: "_disabled_l0yzs_13"
+};
+//#endregion
+export { e as default };

package/dist/components/Select/Select.utils.js

@@ -1,6 +1,4 @@
-const l = (e, t) => e.find((r) => r.value === t)?.label || "", n = (e) => typeof e == "object" && e !== null && "value" in e, u = (e, t, r) => n(e) ? e.label || "" : l(t, r);
-export {
-  l as getFieldValue,
-  n as isObjectValue,
-  u as restoreSearchValue
-};
+//#region src/components/Select/Select.utils.ts
+var e = (e) => e.length > 0 && "options" in e[0], t = (t) => e(t) ? t.flatMap((e) => e.options) : t, n = (e, n) => t(e).find((e) => e.value === n)?.label || "", r = (e) => typeof e == "object" && !!e && "value" in e, i = (e, t, i) => r(e) ? e.label || "" : n(t, i), a = (e) => (t) => (t.label || "").toLowerCase().includes(e.toLowerCase());
+//#endregion
+export { t as flattenOptions, n as getFieldValue, e as isGroupedOptions, r as isObjectValue, a as matchesSearch, i as restoreSearchValue };

package/dist/components/Select/SelectMultiple/SelectMultiple.js

@@ -0,0 +1,145 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { syncRefs as t } from "../../../utils/sync-refs.js";
+import { Badge as n } from "../../Badge/Badge.js";
+import { useComponentId as r } from "../../../hooks/useComponentId/useComponentId.js";
+import { Popover as i } from "../../Popover/Popover.js";
+import { InputBaseWrapper as a } from "../../Field/InputBaseWrapper/InputBaseWrapper.js";
+import { InputBase as o } from "../../Field/InputBase/InputBase.js";
+import { List as s } from "../../List/List.js";
+import { flattenOptions as ee, isGroupedOptions as c, isObjectValue as l, matchesSearch as u } from "../Select.utils.js";
+import d from "./SelectMultiple.module.js";
+import { useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { OutlineNavigationChevronDown as te, OutlineSystemClose as ne } from "@alif-ui-test/icons";
+//#region src/components/Select/SelectMultiple/SelectMultiple.tsx
+var v = ({ id: v, name: re, ref: ie, values: y, options: b, label: x, placeholder: S, customEmptyText: C, size: w, fullWidth: T = !0, alignItemsCenter: E, className: D, itemClassName: O, style: k, disabled: A, loading: ae, skeletonCount: oe, hasError: j, filterable: M, disableClientFilter: N, showClearIcon: P = !0, closeOnSelect: F = !1, clearInputOnSelect: I = !1, hintLeftSection: L, hintRightSection: R, onChange: z, onSearch: B, onBlur: V }) => {
+	let H = m(null), U = m(null), W = r(v), [G, K] = h(!1), [q, J] = h(""), Y = p(() => !y.length || y.length > 0 && l(y[0]), [y]), X = p(() => Y ? y.map((e) => e.value) : y, [y, Y]), se = p(() => {
+		if (Y) return y;
+		let e = ee(b);
+		return X.map((t) => e.find((e) => e.value === t)).filter((e) => !!e);
+	}, [
+		Y,
+		b,
+		X,
+		y
+	]), Z = p(() => !M || N ? b : c(b) ? b.map((e) => ({
+		...e,
+		options: e.options.filter(u(q))
+	})).filter((e) => e.options.length > 0) : b.filter(u(q)), [
+		N,
+		M,
+		b,
+		q
+	]), ce = (e) => {
+		let t = e.target.value;
+		J(t), B?.(t), K(!0);
+	}, Q = (e, t) => {
+		X.includes(e) ? z(X.filter((t) => t !== e), Y ? y.filter((t) => t.value !== e) : void 0) : z([...X, e], Y ? [...y, t] : void 0), U.current?.focus(), I && (J(""), B?.("")), F && K(!1);
+	}, le = (e) => {
+		z(X.filter((t) => t !== e), Y ? y.filter((t) => t.value !== e) : void 0);
+	}, $ = () => {
+		K(!1), B?.(""), J("");
+	};
+	return f(() => {
+		H.current && (H.current.scrollLeft = G ? H.current.scrollWidth : 0);
+	}, [
+		Z,
+		y,
+		G
+	]), /* @__PURE__ */ _(i, {
+		isOpen: G,
+		width: "trigger",
+		onClose: $,
+		offset: 4,
+		children: [/* @__PURE__ */ g(i.Trigger, {
+			style: k,
+			onBlur: V,
+			className: e(d.root, T && "uiFullWidth", A && d.disabled, D),
+			children: /* @__PURE__ */ g(a, {
+				bordered: !0,
+				fullWidth: !0,
+				keepLabel: !0,
+				value: q || y.length > 0 ? "filled" : "",
+				id: W,
+				label: x,
+				hasError: j,
+				size: w,
+				disabled: A,
+				onClear: P ? () => {
+					z([], []), $();
+				} : void 0,
+				onClick: () => K((e) => !e),
+				inputRef: U,
+				hintLeftSection: L,
+				hintRightSection: R,
+				rightIcon: /* @__PURE__ */ g(te, { className: e(d.chevron, G && d.chevronActive) }),
+				children: /* @__PURE__ */ _("div", {
+					ref: H,
+					className: d.tags,
+					children: [se.map((e, t) => /* @__PURE__ */ _(n, {
+						variant: "light",
+						color: "neutral",
+						size: w === "l" ? "s" : "xs",
+						className: d.tag,
+						children: [
+							e.leftSection,
+							e.label,
+							e.rightSection,
+							/* @__PURE__ */ g(ne, {
+								className: d.tagCloseIcon,
+								onClick: (t) => {
+									t.stopPropagation(), le(e.value);
+								}
+							})
+						]
+					}, t)), M && /* @__PURE__ */ g(o, {
+						id: W,
+						ref: t(U, ie),
+						name: re,
+						placeholder: S,
+						value: q,
+						onChange: ce,
+						disabled: A,
+						className: d.inputBase
+					})]
+				})
+			})
+		}), /* @__PURE__ */ g(i.Dropdown, { children: /* @__PURE__ */ g(s, {
+			loading: ae,
+			skeletonCount: oe,
+			size: w === "l" ? "l" : "m",
+			fullWidth: T,
+			customEmptyText: C,
+			children: c(Z) ? Z.map((e, t) => /* @__PURE__ */ g(s.Group, {
+				title: e.title,
+				collapsible: e.collapsible,
+				defaultOpen: e.defaultOpen,
+				children: e.options.map((e) => /* @__PURE__ */ g(s.Item, {
+					value: e.value,
+					label: e.label,
+					secondaryText: e.secondaryText,
+					disabled: e.disabled,
+					alignItemCenter: E,
+					selected: X.includes(e.value),
+					onClick: (t) => Q(t, e),
+					className: O,
+					leftSection: e.leftSection,
+					rightSection: e.rightSection
+				}, String(e.value)))
+			}, t)) : Z.map((e) => /* @__PURE__ */ g(s.Item, {
+				value: e.value,
+				label: e.label,
+				secondaryText: e.secondaryText,
+				disabled: e.disabled,
+				alignItemCenter: E,
+				selected: X.includes(e.value),
+				onClick: (t) => Q(t, e),
+				className: O,
+				leftSection: e.leftSection,
+				rightSection: e.rightSection
+			}, String(e.value)))
+		}) })]
+	});
+};
+//#endregion
+export { v as SelectMultiple };

package/dist/components/Select/SelectMultiple/SelectMultiple.module.js

@@ -0,0 +1,12 @@
+var e = {
+	root: "_root_6ho2n_1",
+	tags: "_tags_6ho2n_10",
+	tag: "_tag_6ho2n_10",
+	disabled: "_disabled_6ho2n_24",
+	inputBase: "_inputBase_6ho2n_28",
+	chevron: "_chevron_6ho2n_32",
+	chevronActive: "_chevronActive_6ho2n_36",
+	tagCloseIcon: "_tagCloseIcon_6ho2n_40"
+};
+//#endregion
+export { e as default };

package/dist/components/SelectorInput/SelectorInput.js

@@ -1,81 +1,50 @@
-import { jsx as n, jsxs as p } from "react/jsx-runtime";
-import { useState as u, useRef as x, useMemo as b, useLayoutEffect as L } from "react";
-import e from "./SelectorInput.module.css.js";
-import { getSelectorInputStyles as O } from "./SelectorInput.utils.js";
-import { Input as W } from "../Input/Input.js";
-import { Popover as l } from "../Popover/Popover.js";
-import { ListItem as w } from "../ListItem/ListItem.js";
-import { classNames as r } from "../../utils/class-names.js";
-import { OutlineNavigationChevronDownSmall as T } from "../../icons/components/OutlineNavigationChevronDownSmall.js";
-const F = ({
-  inputProps: m,
-  selectorProps: t,
-  disabled: f,
-  showIcon: h = !0,
-  showLabel: g = !1,
-  size: c = "m",
-  variant: v = "primary"
-}) => {
-  const [i, d] = u(!1), [y, N] = u(), o = x(null), a = b(
-    () => t?.options.find((s) => s.value === t.values),
-    [t?.options, t?.values]
-  ), I = (s, S) => {
-    t?.onChangeList?.(s, S), d(!1);
-  }, C = r(
-    e.trigger,
-    i && e.active,
-    (f || t?.disabled) && e.disabled
-  );
-  return L(() => {
-    o.current && N(o.current.offsetWidth);
-  }, [i]), /* @__PURE__ */ n(
-    "div",
-    {
-      ref: o,
-      className: e.root,
-      style: O(v, c),
-      children: /* @__PURE__ */ n(
-        W,
-        {
-          ...m,
-          disabled: f,
-          proportions: c,
-          className: r(e.input, m?.className),
-          leftSection: /* @__PURE__ */ p(
-            l,
-            {
-              position: "bottom-start",
-              isOpen: i,
-              onChange: t?.disabled ? void 0 : d,
-              children: [
-                /* @__PURE__ */ p(l.Trigger, { className: C, children: [
-                  h && a?.leftIcon && /* @__PURE__ */ n("span", { className: e.flag, children: a.leftIcon }),
-                  g && a?.secondaryText && /* @__PURE__ */ n("span", { className: e.label, children: a.secondaryText }),
-                  /* @__PURE__ */ n(
-                    T,
-                    {
-                      className: r(e.chevron)
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ n(l.Dropdown, { children: /* @__PURE__ */ n(
-                  w,
-                  {
-                    ...t,
-                    style: { width: y, ...t?.style },
-                    options: t?.options ?? [],
-                    values: t?.values,
-                    onChangeList: I
-                  }
-                ) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  F as SelectorInput
+import { classNames as e } from "../../utils/class-names.js";
+import { Popover as t } from "../Popover/Popover.js";
+import { Field as n } from "../Field/Field.js";
+import { List as r } from "../List/List.js";
+import i from "./SelectorInput.module.js";
+import { getSelectorInputStyles as a, resolveTypographyLabel as o } from "./SelectorInput.utils.js";
+import { useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { OutlineNavigationChevronDown as p } from "@alif-ui-test/icons";
+//#region src/components/SelectorInput/SelectorInput.tsx
+var m = ({ inputProps: m, selectorProps: h, disabled: g, size: _ = "m", color: v = "secondary" }) => {
+	let [y, b] = u(!1), [x, S] = u(), C = l(null), { options: w = [], value: T, disabled: E = !1, onChange: D, renderSelectedOption: O, ...k } = h ?? {}, A = g || E, j = c(() => w.find((e) => e.value === T), [w, T]);
+	return s(() => {
+		C.current && S(C.current.offsetWidth);
+	}, [y]), /* @__PURE__ */ d("div", {
+		ref: C,
+		className: i.root,
+		style: a(v, _),
+		children: /* @__PURE__ */ d(n, {
+			...m,
+			disabled: g,
+			size: _,
+			className: e(i.input, m?.className),
+			leftSection: /* @__PURE__ */ f(t, {
+				position: "bottom-start",
+				isOpen: y,
+				onChange: b,
+				disabled: A,
+				offset: 4,
+				children: [/* @__PURE__ */ f(t.Trigger, {
+					style: o(_),
+					className: e(i.trigger, "uiFont", y && i.triggerActive, A && i.triggerDisabled),
+					children: [O && j && O(j), /* @__PURE__ */ d(p, { className: i.chevron })]
+				}), /* @__PURE__ */ d(t.Dropdown, { children: /* @__PURE__ */ d(r, {
+					width: x,
+					...k,
+					children: w.map((e) => /* @__PURE__ */ d(r.Item, {
+						...e,
+						selected: e.value === T,
+						onClick: (e, t) => {
+							D?.(e, t), b(!1);
+						}
+					}, String(e.value)))
+				}) })]
+			})
+		})
+	});
 };
+//#endregion
+export { m as SelectorInput };

package/dist/components/SelectorInput/SelectorInput.module.js

@@ -0,0 +1,10 @@
+var e = {
+	root: "_root_z0a8l_1",
+	input: "_input_z0a8l_30",
+	trigger: "_trigger_z0a8l_34",
+	triggerDisabled: "_triggerDisabled_z0a8l_51",
+	triggerActive: "_triggerActive_z0a8l_56",
+	chevron: "_chevron_z0a8l_69"
+};
+//#endregion
+export { e as default };

package/dist/components/SelectorInput/SelectorInput.utils.js

@@ -1,49 +1,24 @@
-import { getSize as t } from "../../utils/get-size.js";
-import { resolveTypography as c } from "../../utils/typography.js";
-const r = (e) => {
-  switch (e) {
-    case "l":
-      return c("body", "m");
-    case "m":
-      return c("body", "s");
-    case "s":
-      return c("description", "l");
-  }
-}, s = (e, o) => {
-  const l = r(o);
-  return {
-    "--selector-input-bg-color-default": `var(--selector-input-bg-color-${e}-default)`,
-    "--selector-input-bg-color-hover": `var(--selector-input-bg-color-${e}-hover)`,
-    "--selector-input-bg-color-active": `var(--selector-input-bg-color-${e}-active)`,
-    "--selector-input-bg-color-disabled": `var(--selector-input-bg-color-${e}-disabled)`,
-    "--selector-input-label-color-default": `var(--selector-input-label-color-${e}-default)`,
-    "--selector-input-label-color-hover": `var(--selector-input-label-color-${e}-hover)`,
-    "--selector-input-label-color-active": `var(--selector-input-label-color-${e}-active)`,
-    "--selector-input-label-color-disabled": `var( --selector-input-label-color-${e}-disabled)`,
-    "--selector-input-icon-color-default": `var(--selector-input-icon-color-${e}-default)`,
-    "--selector-input-icon-color-hover": `var(--selector-input-icon-color-${e}-hover)`,
-    "--selector-input-icon-color-active": `var(--selector-input-icon-color-${e}-active)`,
-    "--selector-input-icon-color-disabled": `var(--selector-input-icon-color-${e}-disabled)`,
-    "--selector-input-icon-height": t(o, "selector-input-icon-height"),
-    "--selector-input-icon-width": t(o, "selector-input-icon-width"),
-    "--selector-input-height": t(o, "selector-input-height"),
-    "--selector-input-flag-height": t(o, "selector-input-flag-height"),
-    "--selector-input-flag-width": t(o, "selector-input-flag-width"),
-    "--selector-input-spacing-horizontal": t(
-      o,
-      "selector-input-spacing-horizontal"
-    ),
-    "--selector-input-spacing-between": t(
-      o,
-      "selector-input-spacing-between"
-    ),
-    "--selector-input-label-font-family": l.fontFamily,
-    "--selector-input-label-font-size": l.fontSize,
-    "--selector-input-label-font-weight": l.fontWeight,
-    "--selector-input-label-line-height": l.lineHeight,
-    "--selector-input-label-letter-spacing": l.letterSpacing
-  };
-};
-export {
-  s as getSelectorInputStyles
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/SelectorInput/SelectorInput.utils.ts
+var n = (e) => {
+	switch (e) {
+		case "l": return t("body", "m");
+		case "m": return t("body", "s");
+		case "s": return t("description", "l");
+	}
+}, r = (t, n) => {
+	let r = t === "secondary";
+	return {
+		"--selector-input-bg-color": r ? `var(--selector-input-bg-color-${t})` : "transparent",
+		"--selector-input-content-color-default": `var(--selector-input-content-color-${t}-default)`,
+		"--selector-input-content-color-hover": `var(--selector-input-content-color-${t}-hover)`,
+		"--selector-input-content-color-active": `var(--selector-input-content-color-${t}-active)`,
+		"--selector-input-icon-size": e(n, "selector-input-icon-size"),
+		"--selector-input-height": e(n, "selector-input-height"),
+		"--selector-input-spacing-horizontal": r ? `0 ${e(n, "selector-input-spacing-horizontal")}` : `0 0 0 ${e(n, "selector-input-spacing-horizontal")}`,
+		"--selector-input-spacing-between": e(n, "selector-input-spacing-between")
+	};
 };
+//#endregion
+export { r as getSelectorInputStyles, n as resolveTypographyLabel };