@caspeco/casper-ui-library 10.4.0 → 10.5.0

package/dist/components/combobox/combobox-menu.js

@@ -1,194 +1,244 @@
-import { jsx as s, jsxs as w, Fragment as W } from "react/jsx-runtime";
-import { c as z } from "../../_virtual/compiler-runtime.js";
-import { Flex as V, Box as T } from "@chakra-ui/react";
-import { autoUpdate as G, computePosition as Q, flip as U } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { useState as Y, useEffect as q, Fragment as A } from "react";
-import { ComboboxItem as _ } from "./combobox-item.js";
-import { interpolate as J } from "./translations.js";
-import { Text as D } from "../text/text.js";
-import { ThemeColorVariable as x, ThemeSpaceVariable as m, ThemeFontSizeVariable as K, ThemeBorderVariable as Z, ThemeShadowVariable as N, ThemeRadiusVariable as R, ThemeIconSizeVariable as X } from "../../theme/theme-types.js";
-import { BackIcon as ee } from "../icon/icons/back-icon.js";
-import { ForwardIcon as te } from "../icon/icons/forward-icon.js";
-import { Checkbox as E } from "../checkbox/checkbox.js";
-import { RadioGroup as ne } from "../radio/radio-group.js";
-import { Radio as oe } from "../radio/radio.js";
-const re = (i, e, c, o, a) => {
-  const t = z.c(8);
-  let h;
-  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = {
-    transform: "translate(0, 0)",
-    minWidth: 0
-  }, t[0] = h) : h = t[0];
-  const [g, f] = Y(h);
-  let p, k;
-  return t[1] !== c || t[2] !== i || t[3] !== a || t[4] !== o || t[5] !== e ? (p = () => {
-    if (!i.current || !e.current || !c)
-      return ce;
-    const $ = async () => {
-      if (i.current && e.current && c) {
-        const {
-          width: n
-        } = i.current.getBoundingClientRect(), {
-          x: r,
-          y: l
-        } = await Q(i.current, e.current, {
-          placement: a || "bottom-start",
-          middleware: [U()]
-        });
-        f({
-          transform: `translate(${r}px, ${l}px)`,
-          minWidth: o || n
-        });
-      }
-    }, d = () => {
-      $().catch(console.error);
-    };
-    return G(i.current, e.current, d);
-  }, k = [i, e, c, a, o], t[1] = c, t[2] = i, t[3] = a, t[4] = o, t[5] = e, t[6] = p, t[7] = k) : (p = t[6], k = t[7]), q(p, k), g;
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { ThemeBorderVariable as t, ThemeColorVariable as n, ThemeFontSizeVariable as r, ThemeIconSizeVariable as i, ThemeRadiusVariable as a, ThemeShadowVariable as o, ThemeSpaceVariable as s } from "../../theme/theme-types.js";
+import { BackIcon as c } from "../icon/icons/back-icon.js";
+import { ForwardIcon as l } from "../icon/icons/forward-icon.js";
+import { Text as u } from "../text/text.js";
+import { Checkbox as d } from "../checkbox/checkbox.js";
+import { ComboboxItem as f } from "./combobox-item.js";
+import { Radio as p } from "../radio/radio.js";
+import { RadioGroup as m } from "../radio/radio-group.js";
+import { autoUpdate as h, computePosition as g, flip as _ } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { interpolate as v } from "./translations.js";
+import { Fragment as y, useEffect as b, useState as x } from "react";
+import { Box as S, Flex as C } from "@chakra-ui/react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region lib/components/combobox/combobox-menu.tsx
+var D = e(), O = (e, t, n, r, i) => {
+	let a = (0, D.c)(8), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = {
+		transform: "translate(0, 0)",
+		minWidth: 0
+	}, a[0] = o) : o = a[0];
+	let [s, c] = x(o), l, u;
+	return a[1] !== n || a[2] !== e || a[3] !== i || a[4] !== r || a[5] !== t ? (l = () => {
+		if (!e.current || !t.current || !n) return P;
+		let a = async () => {
+			if (e.current && t.current && n) {
+				let { width: n } = e.current.getBoundingClientRect(), { x: a, y: o } = await g(e.current, t.current, {
+					placement: i || "bottom-start",
+					middleware: [_()]
+				});
+				c({
+					transform: `translate(${a}px, ${o}px)`,
+					minWidth: r || n
+				});
+			}
+		};
+		return h(e.current, t.current, () => {
+			a().catch(console.error);
+		});
+	}, u = [
+		e,
+		t,
+		n,
+		i,
+		r
+	], a[1] = n, a[2] = e, a[3] = i, a[4] = r, a[5] = t, a[6] = l, a[7] = u) : (l = a[6], u = a[7]), b(l, u), s;
 };
-function j(i) {
-  const e = z.c(3), {
-    isSingleSelect: c,
-    isChecked: o
-  } = i;
-  let a;
-  return e[0] !== o || e[1] !== c ? (a = c ? /* @__PURE__ */ s(ne, { value: o ? "true" : "false", children: /* @__PURE__ */ s(oe, { value: "true" }) }) : /* @__PURE__ */ s(E, { isChecked: o }), e[0] = o, e[1] = c, e[2] = a) : a = e[2], a;
+function k(e) {
+	let t = (0, D.c)(3), { isSingleSelect: n, isChecked: r } = e, i;
+	return t[0] !== r || t[1] !== n ? (i = n ? /* @__PURE__ */ T(m, {
+		value: r ? "true" : "false",
+		children: /* @__PURE__ */ T(p, { value: "true" })
+	}) : /* @__PURE__ */ T(d, { isChecked: r }), t[0] = r, t[1] = n, t[2] = i) : i = t[2], i;
 }
-function we(i) {
-  const e = z.c(32), {
-    inputValue: c,
-    displayItems: o,
-    highlightState: a,
-    openState: t,
-    isSingleSelect: h,
-    isSearching: g,
-    isHidingItems: f,
-    popoverWidth: p,
-    popoverPlacement: k,
-    parentRef: $,
-    popupRef: d,
-    footerContent: n,
-    translation: r,
-    folderStyle: l
-  } = i, O = re($, d, t.isOpen, p, k);
-  let C;
-  e[0] !== a ? (C = (H) => {
-    a.set(H);
-  }, e[0] = a, e[1] = C) : C = e[1];
-  const y = C, I = t.isOpen ? "block" : "none";
-  let S;
-  e[2] !== h || e[3] !== t ? (S = (H) => {
-    H.preventDefault(), H.stopPropagation(), h && t.close();
-  }, e[2] = h, e[3] = t, e[4] = S) : S = e[4];
-  const b = !h;
-  let v;
-  e[5] !== o || e[6] !== c || e[7] !== g || e[8] !== r ? (v = g && o.length === 0 && c.length > 0 && /* @__PURE__ */ s(D, { px: m.Small, color: x.OnSurfaceSubdued, children: `${r.noMatchFor} "${c}"` }), e[5] = o, e[6] = c, e[7] = g, e[8] = r, e[9] = v) : v = e[9];
-  let P;
-  e[10] !== l || e[11] !== y || e[12] !== i ? (P = l === "stacked" ? /* @__PURE__ */ s(ie, { ...i, onHover: y }) : /* @__PURE__ */ s(le, { ...i, onHover: y }), e[10] = l, e[11] = y, e[12] = i, e[13] = P) : P = e[13];
-  let u;
-  e[14] !== o || e[15] !== f || e[16] !== r ? (u = f && /* @__PURE__ */ s(D, { px: m.Small, py: m.Small, color: x.OnSurfaceSubdued, fontSize: K.Small, children: J(r.showMaxItems, {
-    count: o.length
-  }) }), e[14] = o, e[15] = f, e[16] = r, e[17] = u) : u = e[17];
-  let B;
-  e[18] !== b || e[19] !== v || e[20] !== P || e[21] !== u ? (B = /* @__PURE__ */ w(V, { as: "ul", flexDirection: "column", maxHeight: "300px", overflowY: "auto", overflowX: "hidden", role: "listbox", "aria-multiselectable": b, padding: `${m.Small} 0`, children: [
-    v,
-    P,
-    u
-  ] }), e[18] = b, e[19] = v, e[20] = P, e[21] = u, e[22] = B) : B = e[22];
-  let M;
-  e[23] !== n ? (M = n && /* @__PURE__ */ s(T, { position: "sticky", bottom: "0", backgroundColor: x.Surface, padding: `${m.Small} ${m.Medium}`, borderTop: `${Z.XSmall} ${x.OnSurfaceBorder}`, tabIndex: -1, children: n }), e[23] = n, e[24] = M) : M = e[24];
-  let F;
-  return e[25] !== O || e[26] !== d || e[27] !== I || e[28] !== S || e[29] !== B || e[30] !== M ? (F = /* @__PURE__ */ w(T, { display: I, inset: "0 auto auto 0", position: "fixed", zIndex: "50", visibility: "visible", backgroundColor: x.Surface, borderRadius: R.Medium, boxShadow: N.Medium, color: x.OnSurface, overflow: "hidden", style: O, ref: d, maxW: "90%", onClick: S, children: [
-    B,
-    M
-  ] }), e[25] = O, e[26] = d, e[27] = I, e[28] = S, e[29] = B, e[30] = M, e[31] = F) : F = e[31], F;
+function A(e) {
+	let i = (0, D.c)(32), { inputValue: c, displayItems: l, highlightState: d, openState: f, isSingleSelect: p, isSearching: m, isHidingItems: h, popoverWidth: g, popoverPlacement: _, parentRef: y, popupRef: b, footerContent: x, translation: w, folderStyle: k } = e, A = O(y, b, f.isOpen, g, _), j;
+	i[0] === d ? j = i[1] : (j = (e) => {
+		d.set(e);
+	}, i[0] = d, i[1] = j);
+	let P = j, F = f.isOpen ? "block" : "none", I;
+	i[2] !== p || i[3] !== f ? (I = (e) => {
+		e.preventDefault(), e.stopPropagation(), p && f.close();
+	}, i[2] = p, i[3] = f, i[4] = I) : I = i[4];
+	let L = !p, R;
+	i[5] !== l || i[6] !== c || i[7] !== m || i[8] !== w ? (R = m && l.length === 0 && c.length > 0 && /* @__PURE__ */ T(u, {
+		px: s.Small,
+		color: n.OnSurfaceSubdued,
+		children: `${w.noMatchFor} "${c}"`
+	}), i[5] = l, i[6] = c, i[7] = m, i[8] = w, i[9] = R) : R = i[9];
+	let z;
+	i[10] !== k || i[11] !== P || i[12] !== e ? (z = T(k === "stacked" ? M : N, {
+		...e,
+		onHover: P
+	}), i[10] = k, i[11] = P, i[12] = e, i[13] = z) : z = i[13];
+	let B;
+	i[14] !== l || i[15] !== h || i[16] !== w ? (B = h && /* @__PURE__ */ T(u, {
+		px: s.Small,
+		py: s.Small,
+		color: n.OnSurfaceSubdued,
+		fontSize: r.Small,
+		children: v(w.showMaxItems, { count: l.length })
+	}), i[14] = l, i[15] = h, i[16] = w, i[17] = B) : B = i[17];
+	let V;
+	i[18] !== L || i[19] !== R || i[20] !== z || i[21] !== B ? (V = /* @__PURE__ */ E(C, {
+		as: "ul",
+		flexDirection: "column",
+		maxHeight: "300px",
+		overflowY: "auto",
+		overflowX: "hidden",
+		role: "listbox",
+		"aria-multiselectable": L,
+		padding: `${s.Small} 0`,
+		children: [
+			R,
+			z,
+			B
+		]
+	}), i[18] = L, i[19] = R, i[20] = z, i[21] = B, i[22] = V) : V = i[22];
+	let H;
+	i[23] === x ? H = i[24] : (H = x && /* @__PURE__ */ T(S, {
+		position: "sticky",
+		bottom: "0",
+		backgroundColor: n.Surface,
+		padding: `${s.Small} ${s.Medium}`,
+		borderTop: `${t.XSmall} ${n.OnSurfaceBorder}`,
+		tabIndex: -1,
+		children: x
+	}), i[23] = x, i[24] = H);
+	let U;
+	return i[25] !== A || i[26] !== b || i[27] !== F || i[28] !== I || i[29] !== V || i[30] !== H ? (U = /* @__PURE__ */ E(S, {
+		display: F,
+		inset: "0 auto auto 0",
+		position: "fixed",
+		zIndex: "50",
+		visibility: "visible",
+		backgroundColor: n.Surface,
+		borderRadius: a.Medium,
+		boxShadow: o.Medium,
+		color: n.OnSurface,
+		overflow: "hidden",
+		style: A,
+		ref: b,
+		maxW: "90%",
+		onClick: I,
+		children: [V, H]
+	}), i[25] = A, i[26] = b, i[27] = F, i[28] = I, i[29] = V, i[30] = H, i[31] = U) : U = i[31], U;
 }
-const L = (i) => {
-  const e = z.c(7), {
-    children: c,
-    isChecked: o,
-    onClick: a,
-    isActive: t,
-    onHover: h
-  } = i, g = t ? x.AccentHoverAlpha : "";
-  let f;
-  return e[0] !== c || e[1] !== t || e[2] !== o || e[3] !== a || e[4] !== h || e[5] !== g ? (f = /* @__PURE__ */ s(V, { as: "li", role: "option", width: "100%", flexDirection: "row", justifyContent: "space-between", padding: `${m.Small} ${m.Medium}`, gap: m.Medium, textDecoration: "none", backgroundColor: g, onClick: a, tabIndex: -1, onMouseEnter: h, "data-is-active-index": t, "aria-selected": o, children: c }), e[0] = c, e[1] = t, e[2] = o, e[3] = a, e[4] = h, e[5] = g, e[6] = f) : f = e[6], f;
-}, ie = ({
-  displayItems: i,
-  selectedItems: e,
-  toggleItem: c,
-  onHover: o,
-  parentSelectsChildren: a,
-  highlightState: t,
-  inputValue: h,
-  isSingleSelect: g
-}) => {
-  const f = (d, n) => d.children && d.children.length > 0 ? d.children.every((r) => f(r, n)) : n.some((r) => r.id === d.id), p = (d) => d.children && d.children.length > 0 ? d.children.some((n) => p(n)) : e.some((n) => n.id === d.id);
-  let k = 0;
-  const $ = (d, n, r = []) => d.map((l) => {
-    const O = (b) => {
-      b.stopPropagation(), b.preventDefault(), c(l);
-    };
-    r.length > 0 && (r[r.length - 1] -= 1);
-    const C = k++, y = l.children && l.children.length > 0, I = !y || l.isSelectableParent;
-    let S = n.some((b) => b.id === l.id);
-    return a && y && !l.isSelectableParent && f(l, n) && (S = !0), /* @__PURE__ */ w(A, { children: [
-      /* @__PURE__ */ w(L, { isActive: t.index === C, isChecked: S, onClick: O, onHover: () => o(C), children: [
-        /* @__PURE__ */ w(V, { alignItems: "center", whiteSpace: "nowrap", minW: 0, children: [
-          r.map((b, v, P) => {
-            const u = P.length === v + 1, B = b > 0, M = b === 0, F = B || u;
-            return /* @__PURE__ */ w(V, { w: m.Medium, minW: m.Medium, alignItems: "center", my: "-0.5rem", h: "2.5rem", children: [
-              F && /* @__PURE__ */ s(T, { w: "1px", h: M ? "52%" : "100%", backgroundColor: x.OnSurface, mb: "auto" }),
-              u && /* @__PURE__ */ s(T, { w: "inherit", height: "1px", backgroundColor: x.OnSurface, mr: m.XSmall })
-            ] }, `${l.id}_${v}`);
-          }),
-          /* @__PURE__ */ s(_, { item: l, asPlainText: !0, highlightQuery: h })
-        ] }),
-        I ? /* @__PURE__ */ s(j, { isSingleSelect: g, isChecked: S }) : a && !g && /* @__PURE__ */ s(E, { isIndeterminate: p(l), isChecked: S })
-      ] }),
-      l.children && $(l.children, n, [...r, l.children.length])
-    ] }, l.id);
-  });
-  return $(i, e);
-}, le = ({
-  displayItems: i,
-  selectedItems: e,
-  toggleItem: c,
-  onHover: o,
-  highlightState: a,
-  isSingleSelect: t,
-  subMenuState: h,
-  parentStrings: g,
-  asPlainText: f,
-  isSearching: p,
-  isReadOnly: k,
-  previousSelectedItems: $
-}) => {
-  const d = (n, r) => {
-    n.stopPropagation(), n.preventDefault(), c(r);
-  };
-  return i.map((n, r) => {
-    const l = e.some((u) => u.id === n.id), O = n.children?.length, C = n.id === "_back", y = h.opened[h.opened.length - 1], I = n.id === y?.id, S = C ? /* @__PURE__ */ w(V, { gap: m.XSmall, alignItems: "center", children: [
-      /* @__PURE__ */ s(ee, { size: X.Small }),
-      n.label
-    ] }) : /* @__PURE__ */ w(W, { children: [
-      /* @__PURE__ */ w(V, { gap: m.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
-        g[n.id]?.map((u) => /* @__PURE__ */ w(A, { children: [
-          /* @__PURE__ */ s(T, { color: x.OnSurfaceSubdued, children: u }),
-          /* @__PURE__ */ s(T, { color: x.OnSurfaceSubdued, children: "/" })
-        ] }, u)),
-        /* @__PURE__ */ s(_, { item: n, asPlainText: f })
-      ] }),
-      k ? void 0 : O && !I && !p ? /* @__PURE__ */ s(te, { size: X.Small, color: x.OnBackgroundSubdued }) : /* @__PURE__ */ s(j, { isSingleSelect: t, isChecked: l })
-    ] }), b = $.length > 0 && $.length - 1 === r && $.length < i.length, P = !k && !p && (b || (C || I));
-    return /* @__PURE__ */ w(A, { children: [
-      /* @__PURE__ */ s(L, { isActive: a.index === r, isChecked: l, onClick: (u) => d(u, n), onHover: () => o(r), children: S }),
-      P && /* @__PURE__ */ s(T, { margin: `${m.Small} ${C ? 0 : m.Medium}`, height: "1px", flexShrink: 0, backgroundColor: x.OnBackgroundBorder })
-    ] }, n.id);
-  });
-};
-function ce() {
-}
-export {
-  we as ComboboxMenu
+var j = (e) => {
+	let t = (0, D.c)(7), { children: r, isChecked: i, onClick: a, isActive: o, onHover: c } = e, l = o ? n.AccentHoverAlpha : "", u;
+	return t[0] !== r || t[1] !== o || t[2] !== i || t[3] !== a || t[4] !== c || t[5] !== l ? (u = /* @__PURE__ */ T(C, {
+		as: "li",
+		role: "option",
+		width: "100%",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		padding: `${s.Small} ${s.Medium}`,
+		gap: s.Medium,
+		textDecoration: "none",
+		backgroundColor: l,
+		onClick: a,
+		tabIndex: -1,
+		onMouseEnter: c,
+		"data-is-active-index": o,
+		"aria-selected": i,
+		children: r
+	}), t[0] = r, t[1] = o, t[2] = i, t[3] = a, t[4] = c, t[5] = l, t[6] = u) : u = t[6], u;
+}, M = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: i, parentSelectsChildren: a, highlightState: o, inputValue: c, isSingleSelect: l }) => {
+	let u = (e, t) => e.children && e.children.length > 0 ? e.children.every((e) => u(e, t)) : t.some((t) => t.id === e.id), p = (e) => e.children && e.children.length > 0 ? e.children.some((e) => p(e)) : t.some((t) => t.id === e.id), m = 0, h = (e, t, g = []) => e.map((e) => {
+		let _ = (t) => {
+			t.stopPropagation(), t.preventDefault(), r(e);
+		};
+		g.length > 0 && --g[g.length - 1];
+		let v = m++, b = e.children && e.children.length > 0, x = !b || e.isSelectableParent, w = t.some((t) => t.id === e.id);
+		return a && b && !e.isSelectableParent && u(e, t) && (w = !0), /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ E(j, {
+			isActive: o.index === v,
+			isChecked: w,
+			onClick: _,
+			onHover: () => i(v),
+			children: [/* @__PURE__ */ E(C, {
+				alignItems: "center",
+				whiteSpace: "nowrap",
+				minW: 0,
+				children: [g.map((t, r, i) => {
+					let a = i.length === r + 1, o = t > 0, c = t === 0, l = o || a;
+					return /* @__PURE__ */ E(C, {
+						w: s.Medium,
+						minW: s.Medium,
+						alignItems: "center",
+						my: "-0.5rem",
+						h: "2.5rem",
+						children: [l && /* @__PURE__ */ T(S, {
+							w: "1px",
+							h: c ? "52%" : "100%",
+							backgroundColor: n.OnSurface,
+							mb: "auto"
+						}), a && /* @__PURE__ */ T(S, {
+							w: "inherit",
+							height: "1px",
+							backgroundColor: n.OnSurface,
+							mr: s.XSmall
+						})]
+					}, `${e.id}_${r}`);
+				}), /* @__PURE__ */ T(f, {
+					item: e,
+					asPlainText: !0,
+					highlightQuery: c
+				})]
+			}), x ? /* @__PURE__ */ T(k, {
+				isSingleSelect: l,
+				isChecked: w
+			}) : a && !l && /* @__PURE__ */ T(d, {
+				isIndeterminate: p(e),
+				isChecked: w
+			})]
+		}), e.children && h(e.children, t, [...g, e.children.length])] }, e.id);
+	});
+	return h(e, t);
+}, N = ({ displayItems: e, selectedItems: t, toggleItem: r, onHover: a, highlightState: o, isSingleSelect: u, subMenuState: d, parentStrings: p, asPlainText: m, isSearching: h, isReadOnly: g, previousSelectedItems: _ }) => {
+	let v = (e, t) => {
+		e.stopPropagation(), e.preventDefault(), r(t);
+	};
+	return e.map((r, b) => {
+		let x = t.some((e) => e.id === r.id), D = r.children?.length, O = r.id === "_back", A = d.opened[d.opened.length - 1], M = r.id === A?.id, N = O ? /* @__PURE__ */ E(C, {
+			gap: s.XSmall,
+			alignItems: "center",
+			children: [/* @__PURE__ */ T(c, { size: i.Small }), r.label]
+		}) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E(C, {
+			gap: s.XSmall,
+			alignItems: "center",
+			whiteSpace: "nowrap",
+			children: [p[r.id]?.map((e) => /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ T(S, {
+				color: n.OnSurfaceSubdued,
+				children: e
+			}), /* @__PURE__ */ T(S, {
+				color: n.OnSurfaceSubdued,
+				children: "/"
+			})] }, e)), /* @__PURE__ */ T(f, {
+				item: r,
+				asPlainText: m
+			})]
+		}), g ? void 0 : D && !M && !h ? /* @__PURE__ */ T(l, {
+			size: i.Small,
+			color: n.OnBackgroundSubdued
+		}) : /* @__PURE__ */ T(k, {
+			isSingleSelect: u,
+			isChecked: x
+		})] }), P = _.length > 0 && _.length - 1 === b && _.length < e.length, F = !g && !h && (P || O || M);
+		return /* @__PURE__ */ E(y, { children: [/* @__PURE__ */ T(j, {
+			isActive: o.index === b,
+			isChecked: x,
+			onClick: (e) => v(e, r),
+			onHover: () => a(b),
+			children: N
+		}), F && /* @__PURE__ */ T(S, {
+			margin: `${s.Small} ${O ? 0 : s.Medium}`,
+			height: "1px",
+			flexShrink: 0,
+			backgroundColor: n.OnBackgroundBorder
+		})] }, r.id);
+	});
 };
+function P() {}
+//#endregion
+export { A as ComboboxMenu };

package/dist/components/combobox/combobox-recipe.js

@@ -1,105 +1,71 @@
-import { ThemeColorVariable as o, ThemeBorderVariable as r } from "../../theme/theme-types.js";
-import { defineRecipe as e } from "@chakra-ui/react";
-const a = {
-  display: "flex",
-  justifyContent: "space-between",
-  cursor: "text",
-  border: `${r.XSmall} transparent`,
-  "& input": {
-    background: "none"
-  },
-  '&[aria-disabled="true"]': {
-    borderColor: "transparent",
-    cursor: "not-allowed"
-  },
-  '&[aria-readonly="true"]': {
-    borderColor: "transparent"
-  },
-  '&[aria-invalid="true"]': {
-    borderColor: o.Error,
-    _focusWithin: {
-      borderColor: o.Error,
-      boxShadow: `0 0 0 4px ${o.ErrorContainer}`
-    },
-    "@media(hover: hover)": {
-      "&:hover:not(:focus-within)": {
-        borderColor: o.ErrorHover
-      }
-    }
-  }
-}, n = {
-  outline: {
-    background: o.Surface,
-    color: o.OnSurface,
-    borderColor: o.OnSurfaceBorder,
-    '&[aria-disabled="true"]': {
-      backgroundColor: o.SurfaceDisabled,
-      color: o.OnSurfaceSubdued
-    },
-    '&[aria-readonly="true"]': {
-      backgroundColor: o.SurfaceDisabled,
-      color: o.OnSurface
-    },
-    "@media(hover: hover)": {
-      '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
-        borderColor: o.OnSurface
-      }
-    }
-  },
-  ghost: {
-    background: "none",
-    color: o.OnSurface,
-    '&[aria-disabled="true"]': {
-      backgroundColor: "transparent",
-      color: o.OnSurfaceSubdued
-    },
-    '&[aria-readonly="true"]': {
-      backgroundColor: "transparent",
-      color: o.OnSurface,
-      "& .combobox-dropdown-icon": {
-        opacity: 1
-      }
-    },
-    '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
-      opacity: 0
-    },
-    "&:focus-within": {
-      "& .combobox-dropdown-icon": {
-        opacity: 1
-      }
-    },
-    "@media(hover: hover)": {
-      '&:hover:not(:focus-within):not([aria-disabled="true"])': {
-        backgroundColor: o.SurfaceDisabled,
-        "& .combobox-dropdown-icon": {
-          opacity: 1
-        }
-      }
-    }
-  }
+import { ThemeBorderVariable as e, ThemeColorVariable as t } from "../../theme/theme-types.js";
+import { defineRecipe as n } from "@chakra-ui/react";
+//#region lib/components/combobox/combobox-recipe.ts
+var r = {
+	display: "flex",
+	justifyContent: "space-between",
+	cursor: "text",
+	border: `${e.XSmall} transparent`,
+	"& input": { background: "none" },
+	"&[aria-disabled=\"true\"]": {
+		borderColor: "transparent",
+		cursor: "not-allowed"
+	},
+	"&[aria-readonly=\"true\"]": { borderColor: "transparent" },
+	"&[aria-invalid=\"true\"]": {
+		borderColor: t.Error,
+		_focusWithin: {
+			borderColor: t.Error,
+			boxShadow: `0 0 0 4px ${t.ErrorContainer}`
+		},
+		"@media(hover: hover)": { "&:hover:not(:focus-within)": { borderColor: t.ErrorHover } }
+	}
 }, i = {
-  xs: {
-    minHeight: "24px"
-  },
-  sm: {
-    minHeight: "32px"
-  },
-  md: {
-    minHeight: "40px"
-  },
-  lg: {
-    minHeight: "48px"
-  },
-  xl: {
-    minHeight: "56px"
-  }
-}, c = e({
-  base: a,
-  variants: {
-    size: i,
-    variant: n
-  }
+	outline: {
+		background: t.Surface,
+		color: t.OnSurface,
+		borderColor: t.OnSurfaceBorder,
+		"&[aria-disabled=\"true\"]": {
+			backgroundColor: t.SurfaceDisabled,
+			color: t.OnSurfaceSubdued
+		},
+		"&[aria-readonly=\"true\"]": {
+			backgroundColor: t.SurfaceDisabled,
+			color: t.OnSurface
+		},
+		"@media(hover: hover)": { "&:hover:not(:focus-within):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])": { borderColor: t.OnSurface } }
+	},
+	ghost: {
+		background: "none",
+		color: t.OnSurface,
+		"&[aria-disabled=\"true\"]": {
+			backgroundColor: "transparent",
+			color: t.OnSurfaceSubdued
+		},
+		"&[aria-readonly=\"true\"]": {
+			backgroundColor: "transparent",
+			color: t.OnSurface,
+			"& .combobox-dropdown-icon": { opacity: 1 }
+		},
+		"&:not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"]) .combobox-dropdown-icon": { opacity: 0 },
+		"&:focus-within": { "& .combobox-dropdown-icon": { opacity: 1 } },
+		"@media(hover: hover)": { "&:hover:not(:focus-within):not([aria-disabled=\"true\"])": {
+			backgroundColor: t.SurfaceDisabled,
+			"& .combobox-dropdown-icon": { opacity: 1 }
+		} }
+	}
+}, a = n({
+	base: r,
+	variants: {
+		size: {
+			xs: { minHeight: "24px" },
+			sm: { minHeight: "32px" },
+			md: { minHeight: "40px" },
+			lg: { minHeight: "48px" },
+			xl: { minHeight: "56px" }
+		},
+		variant: i
+	}
 });
-export {
-  c as comboboxRecipe
-};
+//#endregion
+export { a as comboboxRecipe };