@logicplanes/kaeso-ui 0.1.0

package/dist/chunks/combobox-D8pQk22r.js

@@ -0,0 +1,291 @@
+"use client";
+import { i as e, o as t, r as n } from "./styles-Btvg2DCf.js";
+import { t as r } from "./cn-CidVUKMm.js";
+import { i } from "./dev-CR1p7gCm.js";
+import { n as a, r as o } from "./portal-context-BBbzDKmY.js";
+import { i as s } from "./context-BELWW79w.js";
+import { t as c } from "./icon-CeNQtobn.js";
+import { a as l, o as u, s as d } from "./field-d8V94bvZ.js";
+import { i as f } from "./input-group-DQqEPFj_.js";
+import { a as p } from "./tag-BsmQ1xPj.js";
+import { n as ee, t as te } from "./use-layout-width-DZaLOQMT.js";
+import { forwardRef as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Add01Icon as x, ArrowDown01Icon as S, Cancel01Icon as C, Tick02Icon as w } from "@hugeicons/core-free-icons";
+import { Combobox as T } from "@base-ui/react/combobox";
+import { Autocomplete as E } from "@base-ui/react/autocomplete";
+//#region src/components/combobox/combobox.tsx
+var D = { size: {
+	sm: { classes: f.size.sm.classes },
+	md: { classes: f.size.md.classes },
+	lg: { classes: f.size.lg.classes },
+	xl: { classes: f.size.xl.classes }
+} }, O = { size: "md" };
+function k({ text: e, query: t }) {
+	let n = t.trim().toLowerCase();
+	if (!n) return /* @__PURE__ */ y(v, { children: e });
+	let r = e.toLowerCase().indexOf(n);
+	return r < 0 ? /* @__PURE__ */ y("span", {
+		className: "text-fg-secondary",
+		children: e
+	}) : /* @__PURE__ */ b("span", {
+		className: "text-fg-secondary",
+		children: [
+			e.slice(0, r),
+			/* @__PURE__ */ y("span", {
+				className: "text-fg",
+				children: e.slice(r, r + n.length)
+			}),
+			e.slice(r + n.length)
+		]
+	});
+}
+function ne(e) {
+	e.key === "Escape" && e.currentTarget.getAttribute("aria-expanded") !== "true" && e.preventBaseUIHandler?.();
+}
+var A = /* @__PURE__ */ m(function(f, m) {
+	let { options: E, placeholder: O, size: A = "md", emptyText: j, loading: M, onInputValueChange: N, onCreate: P, disabled: F, invalid: I, id: L, name: R, label: z, description: B, error: V, optional: H, required: U, layout: W, className: G, multiple: K, "aria-label": q, "data-force": J } = f;
+	i("Combobox", G);
+	let Y = s(), re = l(), X = u(f), [Z, ie] = _(""), Q = g(null), ae = ee(Q), oe = g(/* @__PURE__ */ new Map()), se = h(() => {
+		for (let e of E) oe.current.set(e.value, e);
+		return oe.current;
+	}, [E]), ce = h(() => {
+		let e = Z.trim().toLowerCase(), t = e ? E.filter((t) => t.label.toLowerCase().includes(e) || t.value.toLowerCase().includes(e)) : E;
+		return P && e && !E.some((t) => t.label.toLowerCase() === e) && t.push({
+			value: `__create__${Z}`,
+			label: Z.trim(),
+			__create: !0
+		}), t;
+	}, [
+		E,
+		Z,
+		P
+	]), [le, ue] = _(() => f.defaultValue ?? (K ? [] : null)), $ = f.value === void 0 ? le : f.value, de = Array.isArray($) ? $.flatMap((e) => se.get(e) ?? []) : $ == null ? null : se.get($) ?? null, fe = (e) => {
+		let t = Array.isArray(e) ? e : null, n = (t ?? [e]).find((e) => e && "__create" in e);
+		if (n) {
+			P?.(n.label);
+			return;
+		}
+		let r = K ? (t ?? []).map((e) => e.value) : e?.value ?? null;
+		f.value === void 0 && ue(r), f.onValueChange?.(r);
+	}, pe = /* @__PURE__ */ y(T.Input, {
+		ref: m,
+		placeholder: O,
+		...L ? { id: L } : {},
+		...X.controlProps,
+		...q ? { "aria-label": q } : {},
+		...I || V ? { "aria-invalid": !0 } : {},
+		onKeyDown: ne,
+		className: "min-w-80 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-tertiary disabled:cursor-not-allowed"
+	}), me = /* @__PURE__ */ b(T.Root, {
+		items: ce,
+		filteredItems: ce,
+		value: de,
+		onValueChange: fe,
+		onInputValueChange: (e) => {
+			ie(e), N?.(e);
+		},
+		autoHighlight: !0,
+		itemToStringLabel: (e) => e?.label ?? "",
+		isItemEqualToValue: (e, t) => e?.value === t?.value,
+		multiple: K === !0,
+		...F ? { disabled: F } : {},
+		...R ? { name: R } : {},
+		children: [K ? /* @__PURE__ */ y(T.Chips, {
+			ref: Q,
+			...J ? { "data-force": J } : {},
+			className: r("flex min-h-36 w-full flex-wrap items-center gap-4 rounded-field p-4 material-field transition-control cursor-text", (I || V) && "ring-invalid", !(z || B || V) && G),
+			children: /* @__PURE__ */ y(T.Value, { children: (e) => /* @__PURE__ */ b(v, { children: [e.map((e) => /* @__PURE__ */ y(T.Chip, {
+				"aria-label": e.label,
+				className: "outline-none",
+				children: /* @__PURE__ */ b(p, {
+					className: "pr-2",
+					children: [e.label, /* @__PURE__ */ y(T.ChipRemove, {
+						"aria-label": Y("combobox.remove", "Remove {label}", { label: e.label }),
+						className: "ml-2 inline-flex size-24 items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-2 hover:text-fg",
+						children: /* @__PURE__ */ y(c, {
+							icon: C,
+							size: "xs"
+						})
+					})]
+				})
+			}, e.value)), /* @__PURE__ */ y("span", {
+				className: r("flex h-28 min-w-80 flex-1 items-center", e.length === 0 ? "px-12" : "px-8"),
+				children: pe
+			})] }) })
+		}) : /* @__PURE__ */ b(T.InputGroup, {
+			ref: Q,
+			...J ? { "data-force": J } : {},
+			className: r("relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text", D.size[A].classes, "pr-4", (I || V) && "ring-invalid", !(z || B || V) && G),
+			children: [pe, /* @__PURE__ */ y(T.Trigger, {
+				"aria-label": Y("combobox.showOptions", "Show options"),
+				className: "inline-flex size-28 shrink-0 items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-1 hover:text-fg",
+				children: /* @__PURE__ */ y(c, {
+					icon: S,
+					size: "sm"
+				})
+			})]
+		}), /* @__PURE__ */ y(T.Portal, {
+			container: o(),
+			children: /* @__PURE__ */ y(T.Positioner, {
+				anchor: Q,
+				positionMethod: "fixed",
+				collisionBoundary: a(),
+				align: "start",
+				sideOffset: 6,
+				collisionPadding: 8,
+				className: "z-50 outline-none",
+				children: /* @__PURE__ */ b(T.Popup, {
+					className: r(t, "relative min-w-anchor overflow-hidden"),
+					style: te(ae),
+					children: [
+						M && /* @__PURE__ */ y("span", {
+							"aria-hidden": !0,
+							className: "absolute inset-x-16 top-0 h-2 overflow-hidden rounded-pill",
+							children: /* @__PURE__ */ y("span", { className: "block h-full w-1/3 animate-indeterminate rounded-pill bg-fg-tertiary" })
+						}),
+						/* @__PURE__ */ y(T.Status, {
+							className: "sr-only",
+							children: M ? Y("combobox.loadingResults", "Loading results") : ""
+						}),
+						/* @__PURE__ */ y(T.Empty, {
+							className: "flex h-34 items-center px-10 text-body text-fg-secondary empty:hidden",
+							children: M ? Y("combobox.loading", "Loading…") : j ?? Y("combobox.noResults", "No results")
+						}),
+						/* @__PURE__ */ y(T.List, {
+							className: "-m-6 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-6 outline-none scrollbar-quiet",
+							children: (t) => /* @__PURE__ */ y(T.Item, {
+								value: t,
+								...t.disabled ? { disabled: !0 } : {},
+								className: e,
+								children: "__create" in t ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(c, {
+									icon: x,
+									size: "sm",
+									className: n
+								}), /* @__PURE__ */ y("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: Y("combobox.create", "Create “{label}”", { label: t.label })
+								})] }) : /* @__PURE__ */ b(v, { children: [
+									t.leading,
+									t.icon && /* @__PURE__ */ y(c, {
+										icon: t.icon,
+										size: "sm",
+										className: "text-fg-secondary group-data-highlighted/item:text-fg group-data-disabled/item:text-fg-disabled"
+									}),
+									/* @__PURE__ */ b("span", {
+										className: r("flex min-w-0 flex-1 flex-col", t.description && "gap-2 py-8"),
+										children: [/* @__PURE__ */ y("span", {
+											className: "truncate",
+											children: /* @__PURE__ */ y(k, {
+												text: t.label,
+												query: Z
+											})
+										}), t.description && /* @__PURE__ */ y("span", {
+											className: "text-small font-regular text-fg-secondary",
+											children: t.description
+										})]
+									}),
+									/* @__PURE__ */ y(T.ItemIndicator, {
+										keepMounted: !0,
+										className: "flex size-16 shrink-0 items-center justify-center text-fg opacity-0 data-selected:opacity-100",
+										children: /* @__PURE__ */ y(c, {
+											icon: w,
+											size: "sm"
+										})
+									})
+								] })
+							}, t.value)
+						})
+					]
+				})
+			})
+		})]
+	});
+	return re ? me : d({
+		label: z,
+		description: B,
+		error: V,
+		optional: H,
+		required: U,
+		layout: W,
+		id: X.wrapId ?? L,
+		disabled: F,
+		className: G
+	}, me);
+});
+process.env.NODE_ENV !== "production" && (A.displayName = "Combobox");
+var j = /* @__PURE__ */ m(function(n, i) {
+	let { suggestions: s, value: f, defaultValue: p, onValueChange: m, placeholder: h, size: v = "md", disabled: x, id: S, name: C, leadingIcon: w, label: T, description: O, error: A, optional: j, required: M, layout: N, className: P, "aria-label": F, "data-force": I } = n, L = l(), R = u(n), [z, B] = _(p ?? ""), V = g(null), H = ee(V), U = f ?? z, W = /* @__PURE__ */ b(E.Root, {
+		items: s,
+		...f === void 0 ? {} : { value: f },
+		...p === void 0 ? {} : { defaultValue: p },
+		onValueChange: (e) => {
+			B(e), m?.(e);
+		},
+		...x ? { disabled: x } : {},
+		...C ? { name: C } : {},
+		children: [/* @__PURE__ */ b(E.InputGroup, {
+			ref: V,
+			...I ? { "data-force": I } : {},
+			className: r("relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text", D.size[v].classes, w && "pl-14", n.error && "ring-invalid", !(T || O || A) && P),
+			children: [w && /* @__PURE__ */ y(c, {
+				icon: w,
+				size: "sm",
+				className: "text-fg-tertiary"
+			}), /* @__PURE__ */ y(E.Input, {
+				ref: i,
+				placeholder: h,
+				...S ? { id: S } : {},
+				...R.controlProps,
+				...F ? { "aria-label": F } : {},
+				onKeyDown: ne,
+				className: "min-w-0 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-tertiary"
+			})]
+		}), /* @__PURE__ */ y(E.Portal, {
+			container: o(),
+			children: /* @__PURE__ */ y(E.Positioner, {
+				anchor: V,
+				positionMethod: "fixed",
+				collisionBoundary: a(),
+				align: "start",
+				sideOffset: 6,
+				collisionPadding: 8,
+				className: "z-50 outline-none",
+				children: /* @__PURE__ */ y(E.Popup, {
+					className: r(t, "min-w-anchor overflow-hidden data-empty:hidden"),
+					style: te(H),
+					children: /* @__PURE__ */ y(E.List, {
+						className: "-m-6 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-6 outline-none scrollbar-quiet",
+						children: (t) => /* @__PURE__ */ y(E.Item, {
+							value: t,
+							className: e,
+							children: /* @__PURE__ */ y("span", {
+								className: "truncate",
+								children: /* @__PURE__ */ y(k, {
+									text: t,
+									query: U
+								})
+							})
+						}, t)
+					})
+				})
+			})
+		})]
+	});
+	return L ? W : d({
+		label: T,
+		description: O,
+		error: A,
+		optional: j,
+		required: M,
+		layout: N,
+		id: R.wrapId ?? S,
+		disabled: x,
+		className: P
+	}, W);
+});
+process.env.NODE_ENV !== "production" && (j.displayName = "Autocomplete");
+//#endregion
+export { D as a, O as i, A as n, k as r, j as t };
+
+//# sourceMappingURL=combobox-D8pQk22r.js.map

package/dist/chunks/combobox-D8pQk22r.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-D8pQk22r.js","names":["_Fragment","Combobox","BaseCombobox","__icon_Cancel01Icon","__icon_ArrowDown01Icon","__icon_Add01Icon","__icon_Tick02Icon","Autocomplete","BaseAutocomplete","MENU_ITEM","MENU_POPUP","MENU_ICON","cn","pageBoundary","usePortalContainer","useUiText","Icon","useField","useFieldControl","withField","KAESO_INPUT_GROUP_VARIANTS","Tag","useLayoutWidth","anchorWidthStyle","Fragment$1","KAESO_COMBOBOX_VARIANTS","KAESO_COMBOBOX_DEFAULT_VARIANTS","Highlight","q","query","text","i","keepValueOnEscape","Combobox$1","ariaLabel","force","props","className","t","field","fc","setQuery","useState","fieldRef","useRef","fieldWidth","seen","byValue","useMemo","o","options","filtered","list","onCreate","inner","setInner","multiple","current","rootValue","v","handleChange","arr","created","x","next","inputEl","Combobox","id","invalid","error","control","onInputValueChange","a","b","disabled","name","label","description","value","Cancel01Icon","size","ArrowDown01Icon","loading","emptyText","Add01Icon","Tick02Icon","Autocomplete$1","defaultValue","Autocomplete","suggestions","onValueChange","leadingIcon","s"],"sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { pageBoundary, usePortalContainer } from \"../../utils/portal-context.js\";\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { Autocomplete as BaseAutocomplete } from \"@base-ui/react/autocomplete\";\nimport { cn } from \"../../utils/cn.js\";\nimport { warnStylingClassName } from \"../../utils/dev.js\";\nimport { useField, useFieldControl, withField, type FieldWrapProps } from \"../field/field.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { Cancel01Icon as __icon_Cancel01Icon, ArrowDown01Icon as __icon_ArrowDown01Icon, Add01Icon as __icon_Add01Icon, Tick02Icon as __icon_Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { KAESO_INPUT_GROUP_VARIANTS, type InputSize } from \"../input/input-group.js\";\nimport { Tag } from \"../tag/tag.js\";\nimport { MENU_ICON, MENU_ITEM, MENU_POPUP } from \"../menu/styles.js\";\n\nimport { anchorWidthStyle, useLayoutWidth } from \"../../hooks/use-layout-width.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_COMBOBOX_VARIANTS = {\n  size: {\n    sm: {\n      classes: KAESO_INPUT_GROUP_VARIANTS.size.sm.classes,\n    },\n    md: {\n      classes: KAESO_INPUT_GROUP_VARIANTS.size.md.classes,\n    },\n    lg: {\n      classes: KAESO_INPUT_GROUP_VARIANTS.size.lg.classes,\n    },\n    xl: {\n      classes: KAESO_INPUT_GROUP_VARIANTS.size.xl.classes,\n    },\n  },\n} as const;\nexport const KAESO_COMBOBOX_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  description?: ReactNode | undefined;\n  icon?: IconData | undefined;\n  leading?: ReactNode | undefined;\n  disabled?: boolean | undefined;\n}\n\ninterface CreateItem extends ComboboxOption {\n  __create: true;\n}\n\nexport function Highlight({ text, query }: { text: string; query: string }) {\n  const q = query.trim().toLowerCase();\n  if (!q) return <>{text}</>;\n  const i = text.toLowerCase().indexOf(q);\n  if (i < 0) return <span className=\"text-fg-secondary\">{text}</span>;\n  return (\n    <span className=\"text-fg-secondary\">\n      {text.slice(0, i)}\n      <span className=\"text-fg\">{text.slice(i, i + q.length)}</span>\n      {text.slice(i + q.length)}\n    </span>\n  );\n}\n\ninterface BaseProps extends FieldWrapProps {\n  options: ComboboxOption[];\n  placeholder?: string | undefined;\n  size?: InputSize | undefined;\n  emptyText?: ReactNode | undefined;\n  loading?: boolean | undefined;\n  onInputValueChange?: ((value: string) => void) | undefined;\n  onCreate?: ((label: string) => void) | undefined;\n  disabled?: boolean | undefined;\n  invalid?: boolean | undefined;\n  id?: string | undefined;\n  name?: string | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\nexport interface SingleComboboxProps extends BaseProps {\n  multiple?: false | undefined;\n  value?: string | null | undefined;\n  defaultValue?: string | null | undefined;\n  onValueChange?: ((value: string | null) => void) | undefined;\n}\nexport interface MultiComboboxProps extends BaseProps {\n  multiple: true;\n  value?: string[] | undefined;\n  defaultValue?: string[] | undefined;\n  onValueChange?: ((value: string[]) => void) | undefined;\n}\nexport type ComboboxProps = SingleComboboxProps | MultiComboboxProps;\n\nfunction keepValueOnEscape(e: KeyboardEvent<HTMLInputElement> & { preventBaseUIHandler?: (() => void) | undefined }) {\n  if (e.key === \"Escape\" && e.currentTarget.getAttribute(\"aria-expanded\") !== \"true\") e.preventBaseUIHandler?.();\n}\n\nexport const Combobox = /* @__PURE__ */ forwardRef<HTMLInputElement, ComboboxProps>(function Combobox(props, ref) {\n  const {\n    options,\n    placeholder,\n    size = \"md\",\n    emptyText,\n    loading,\n    onInputValueChange,\n    onCreate,\n    disabled,\n    invalid,\n    id,\n    name,\n    label,\n    description,\n    error,\n    optional,\n    required,\n    layout,\n    className,\n    multiple,\n    \"aria-label\": ariaLabel,\n    \"data-force\": force,\n  } = props;\n  warnStylingClassName(\"Combobox\", className);\n  const t = useUiText();\n  const field = useField();\n  const fc = useFieldControl(props);\n  const [query, setQuery] = useState(\"\");\n  const fieldRef = useRef<HTMLDivElement | null>(null);\n  const fieldWidth = useLayoutWidth(fieldRef);\n  const seen = useRef(new Map<string, ComboboxOption>());\n  const byValue = useMemo(() => {\n    for (const o of options) seen.current.set(o.value, o);\n    return seen.current;\n  }, [options]);\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    const list: (ComboboxOption | CreateItem)[] = q ? options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)) : options;\n    if (onCreate && q && !options.some((o) => o.label.toLowerCase() === q))\n      list.push({\n        value: `__create__${query}`,\n        label: query.trim(),\n        __create: true,\n      });\n    return list;\n  }, [options, query, onCreate]);\n\n  const [inner, setInner] = useState<string | null | string[]>(() => props.defaultValue ?? (multiple ? [] : null));\n  const current = props.value !== undefined ? props.value : inner;\n  const rootValue = Array.isArray(current) ? current.flatMap((v) => byValue.get(v) ?? []) : current == null ? null : (byValue.get(current) ?? null);\n\n  const handleChange = (v: unknown) => {\n    const arr = Array.isArray(v) ? (v as (ComboboxOption | CreateItem)[]) : null;\n    const created = (arr ?? [v as ComboboxOption | CreateItem | null]).find((x) => x && \"__create\" in x) as CreateItem | undefined;\n    if (created) {\n      onCreate?.(created.label);\n      return;\n    }\n    const next = multiple ? (arr ?? []).map((x) => x.value) : ((v as ComboboxOption | null)?.value ?? null);\n    if (props.value === undefined) setInner(next);\n    if (multiple) (props.onValueChange as ((x: string[]) => void) | undefined)?.(next as string[]);\n    else (props.onValueChange as ((x: string | null) => void) | undefined)?.(next as string | null);\n  };\n\n  const inputEl = (\n    <BaseCombobox.Input\n      ref={ref}\n      placeholder={placeholder}\n      {...(id ? { id } : {})}\n      {...fc.controlProps}\n      {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n      {...(invalid || error ? { \"aria-invalid\": true } : {})}\n      onKeyDown={keepValueOnEscape}\n      className=\"min-w-80 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-tertiary disabled:cursor-not-allowed\"\n    />\n  );\n\n  const control = (\n    <BaseCombobox.Root\n      items={filtered}\n      filteredItems={filtered}\n      value={rootValue}\n      onValueChange={handleChange}\n      onInputValueChange={(v: string) => {\n        setQuery(v);\n        onInputValueChange?.(v);\n      }}\n      autoHighlight\n      itemToStringLabel={(o: ComboboxOption) => o?.label ?? \"\"}\n      isItemEqualToValue={(a: ComboboxOption, b: ComboboxOption) => a?.value === b?.value}\n      multiple={multiple === true}\n      {...(disabled ? { disabled } : {})}\n      {...(name ? { name } : {})}\n    >\n      {multiple ? (\n        <BaseCombobox.Chips\n          ref={fieldRef}\n          {...(force ? { \"data-force\": force } : {})}\n          className={cn(\n            \"flex min-h-36 w-full flex-wrap items-center gap-4 rounded-field p-4 material-field transition-control cursor-text\",\n            (invalid || error) && \"ring-invalid\",\n            !(label || description || error) && className,\n          )}\n        >\n          <BaseCombobox.Value>\n            {(value: ComboboxOption[]) => (\n              <>\n                {value.map((o) => (\n                  <BaseCombobox.Chip key={o.value} aria-label={o.label} className=\"outline-none\">\n                    <Tag className=\"pr-2\">\n                      {o.label}\n                      <BaseCombobox.ChipRemove\n                        aria-label={t(\"combobox.remove\", \"Remove {label}\", { label: o.label })}\n                        className=\"ml-2 inline-flex size-24 items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-2 hover:text-fg\"\n                      >\n                        <Icon icon={__icon_Cancel01Icon} size=\"xs\" />\n                      </BaseCombobox.ChipRemove>\n                    </Tag>\n                  </BaseCombobox.Chip>\n                ))}\n                <span className={cn(\"flex h-28 min-w-80 flex-1 items-center\", value.length === 0 ? \"px-12\" : \"px-8\")}>{inputEl}</span>\n              </>\n            )}\n          </BaseCombobox.Value>\n        </BaseCombobox.Chips>\n      ) : (\n        <BaseCombobox.InputGroup\n          ref={fieldRef}\n          {...(force ? { \"data-force\": force } : {})}\n          className={cn(\n            \"relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text\",\n            KAESO_COMBOBOX_VARIANTS.size[size].classes,\n            \"pr-4\",\n            (invalid || error) && \"ring-invalid\",\n            !(label || description || error) && className,\n          )}\n        >\n          {inputEl}\n          <BaseCombobox.Trigger\n            aria-label={t(\"combobox.showOptions\", \"Show options\")}\n            className=\"inline-flex size-28 shrink-0 items-center justify-center rounded-pill text-fg-tertiary transition-control hover:bg-fill-1 hover:text-fg\"\n          >\n            <Icon icon={__icon_ArrowDown01Icon} size=\"sm\" />\n          </BaseCombobox.Trigger>\n        </BaseCombobox.InputGroup>\n      )}\n      <BaseCombobox.Portal container={usePortalContainer()}>\n        <BaseCombobox.Positioner\n          anchor={fieldRef}\n          positionMethod=\"fixed\"\n          collisionBoundary={pageBoundary()}\n          align=\"start\"\n          sideOffset={6}\n          collisionPadding={8}\n          className=\"z-50 outline-none\"\n        >\n          <BaseCombobox.Popup className={cn(MENU_POPUP, \"relative min-w-anchor overflow-hidden\")} style={anchorWidthStyle(fieldWidth)}>\n            {loading && (\n              <span aria-hidden className=\"absolute inset-x-16 top-0 h-2 overflow-hidden rounded-pill\">\n                <span className=\"block h-full w-1/3 animate-indeterminate rounded-pill bg-fg-tertiary\" />\n              </span>\n            )}\n            <BaseCombobox.Status className=\"sr-only\">{loading ? t(\"combobox.loadingResults\", \"Loading results\") : \"\"}</BaseCombobox.Status>\n            <BaseCombobox.Empty className=\"flex h-34 items-center px-10 text-body text-fg-secondary empty:hidden\">\n              {loading ? t(\"combobox.loading\", \"Loading…\") : (emptyText ?? t(\"combobox.noResults\", \"No results\"))}\n            </BaseCombobox.Empty>\n            <BaseCombobox.List className=\"-m-6 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-6 outline-none scrollbar-quiet\">\n              {(o: ComboboxOption | CreateItem) => (\n                <BaseCombobox.Item key={o.value} value={o} {...(o.disabled ? { disabled: true } : {})} className={MENU_ITEM}>\n                  {\"__create\" in o ? (\n                    <>\n                      <Icon icon={__icon_Add01Icon} size=\"sm\" className={MENU_ICON} />\n                      <span className=\"min-w-0 flex-1 truncate\">{t(\"combobox.create\", \"Create “{label}”\", { label: o.label })}</span>\n                    </>\n                  ) : (\n                    <>\n                      {o.leading}\n                      {o.icon && <Icon icon={o.icon} size=\"sm\" className={MENU_ICON} />}\n                      <span className={cn(\"flex min-w-0 flex-1 flex-col\", o.description && \"gap-2 py-8\")}>\n                        <span className=\"truncate\">\n                          <Highlight text={o.label} query={query} />\n                        </span>\n                        {o.description && <span className=\"text-small font-regular text-fg-secondary\">{o.description}</span>}\n                      </span>\n                      <BaseCombobox.ItemIndicator\n                        keepMounted\n                        className=\"flex size-16 shrink-0 items-center justify-center text-fg opacity-0 data-selected:opacity-100\"\n                      >\n                        <Icon icon={__icon_Tick02Icon} size=\"sm\" />\n                      </BaseCombobox.ItemIndicator>\n                    </>\n                  )}\n                </BaseCombobox.Item>\n              )}\n            </BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </BaseCombobox.Root>\n  );\n  if (field) return control;\n  return withField(\n    {\n      label,\n      description,\n      error,\n      optional,\n      required,\n      layout,\n      id: fc.wrapId ?? id,\n      disabled,\n      className,\n    },\n    control,\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Combobox.displayName = \"Combobox\";\n\nexport interface AutocompleteProps extends FieldWrapProps {\n  suggestions: string[];\n  value?: string | undefined;\n  defaultValue?: string | undefined;\n  onValueChange?: ((value: string) => void) | undefined;\n  placeholder?: string | undefined;\n  size?: InputSize | undefined;\n  disabled?: boolean | undefined;\n  id?: string | undefined;\n  name?: string | undefined;\n  leadingIcon?: IconData | undefined;\n  \"aria-label\"?: string | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const Autocomplete = /* @__PURE__ */ forwardRef<HTMLInputElement, AutocompleteProps>(function Autocomplete(props, ref) {\n  const {\n    suggestions,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder,\n    size = \"md\",\n    disabled,\n    id,\n    name,\n    leadingIcon,\n    label,\n    description,\n    error,\n    optional,\n    required,\n    layout,\n    className,\n    \"aria-label\": ariaLabel,\n    \"data-force\": force,\n  } = props;\n  const field = useField();\n  const fc = useFieldControl(props);\n  const [query, setQuery] = useState(defaultValue ?? \"\");\n  const fieldRef = useRef<HTMLDivElement | null>(null);\n  const fieldWidth = useLayoutWidth(fieldRef);\n  const current = value ?? query;\n  const control = (\n    <BaseAutocomplete.Root\n      items={suggestions}\n      {...(value !== undefined ? { value } : {})}\n      {...(defaultValue !== undefined ? { defaultValue } : {})}\n      onValueChange={(v: string) => {\n        setQuery(v);\n        onValueChange?.(v);\n      }}\n      {...(disabled ? { disabled } : {})}\n      {...(name ? { name } : {})}\n    >\n      <BaseAutocomplete.InputGroup\n        ref={fieldRef}\n        {...(force ? { \"data-force\": force } : {})}\n        className={cn(\n          \"relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text\",\n          KAESO_COMBOBOX_VARIANTS.size[size].classes,\n          leadingIcon && \"pl-14\",\n          props.error && \"ring-invalid\",\n          !(label || description || error) && className,\n        )}\n      >\n        {leadingIcon && <Icon icon={leadingIcon} size=\"sm\" className=\"text-fg-tertiary\" />}\n        <BaseAutocomplete.Input\n          ref={ref}\n          placeholder={placeholder}\n          {...(id ? { id } : {})}\n          {...fc.controlProps}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          onKeyDown={keepValueOnEscape}\n          className=\"min-w-0 flex-1 bg-transparent text-fg outline-none placeholder:text-fg-tertiary\"\n        />\n      </BaseAutocomplete.InputGroup>\n      <BaseAutocomplete.Portal container={usePortalContainer()}>\n        <BaseAutocomplete.Positioner\n          anchor={fieldRef}\n          positionMethod=\"fixed\"\n          collisionBoundary={pageBoundary()}\n          align=\"start\"\n          sideOffset={6}\n          collisionPadding={8}\n          className=\"z-50 outline-none\"\n        >\n          <BaseAutocomplete.Popup className={cn(MENU_POPUP, \"min-w-anchor overflow-hidden data-empty:hidden\")} style={anchorWidthStyle(fieldWidth)}>\n            <BaseAutocomplete.List className=\"-m-6 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-6 outline-none scrollbar-quiet\">\n              {(s: string) => (\n                <BaseAutocomplete.Item key={s} value={s} className={MENU_ITEM}>\n                  <span className=\"truncate\">\n                    <Highlight text={s} query={current} />\n                  </span>\n                </BaseAutocomplete.Item>\n              )}\n            </BaseAutocomplete.List>\n          </BaseAutocomplete.Popup>\n        </BaseAutocomplete.Positioner>\n      </BaseAutocomplete.Portal>\n    </BaseAutocomplete.Root>\n  );\n  if (field) return control;\n  return withField(\n    {\n      label,\n      description,\n      error,\n      optional,\n      required,\n      layout,\n      id: fc.wrapId ?? id,\n      disabled,\n      className,\n    },\n    control,\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Autocomplete.displayName = \"Autocomplete\";\n"],"mappings":"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"}

package/dist/chunks/context-BELWW79w.js

@@ -0,0 +1,20 @@
+"use client";
+import { t as e } from "./message-BxTkh1oA.js";
+import { createContext as t, useContext as n, useMemo as r } from "react";
+//#region src/i18n/context.ts
+var i = /* @__PURE__ */ t({
+	locale: "en",
+	messages: {}
+});
+function a() {
+	return n(i).locale;
+}
+function o() {
+	let { locale: t, messages: a } = n(i);
+	return r(() => (n, r, i) => e(a[n] ?? r, i, t), [t, a]);
+}
+var s = (t, n, r) => e(n, r, "en");
+//#endregion
+export { o as i, s as n, a as r, i as t };
+
+//# sourceMappingURL=context-BELWW79w.js.map

package/dist/chunks/context-BELWW79w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-BELWW79w.js","names":["formatMessage","LocaleContext","useLocale","useContext","useUiText","useMemo","messages","key","english","values","locale","englishText"],"sources":["../../src/i18n/context.ts"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport { formatMessage, type MessageValues } from \"./message.js\";\n\nexport type UiMessages = Readonly<Record<string, string>>;\n\nexport interface LocaleValue {\n  locale: string;\n  messages: UiMessages;\n}\n\nexport const LocaleContext = /* @__PURE__ */ createContext<LocaleValue>({ locale: \"en\", messages: {} });\n\nexport function useLocale(): string {\n  return useContext(LocaleContext).locale;\n}\n\nexport type UiText = (key: string, english: string, values?: MessageValues) => string;\n\nexport function useUiText(): UiText {\n  const { locale, messages } = useContext(LocaleContext);\n  return useMemo(() => (key: string, english: string, values?: MessageValues) => formatMessage(messages[key] ?? english, values, locale), [locale, messages]);\n}\n\nexport const englishText: UiText = (_key, english, values) => formatMessage(english, values, \"en\");\n"],"mappings":";;;;AAUA,IAAaC,IAAgC,kBAA2B;CAAE,QAAQ;CAAM,UAAU,CAAC;AAAE,CAAC;AAEtG,SAAgBC,IAAoB;CAClC,OAAOC,EAAWF,CAAa,CAAC,CAAC;AACnC;AAIA,SAAgBG,IAAoB;CAClC,IAAM,EAAE,WAAQ,gBAAaD,EAAWF,CAAa;CACrD,OAAOI,SAAe,GAAa,GAAiB,MAA2BL,EAAcM,EAASC,MAAQC,GAASC,GAAQC,CAAM,GAAG,CAACA,GAAQJ,CAAQ,CAAC;AAC5J;AAEA,IAAaK,KAAuB,GAAM,GAAS,MAAWX,EAAcQ,GAASC,GAAQ,IAAI"}

package/dist/chunks/copy-button-mAzHjYXq.js

@@ -0,0 +1,109 @@
+"use client";
+import { t as e } from "./cn-CidVUKMm.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./icon-CeNQtobn.js";
+import { r } from "./tooltip-CDu00nzg.js";
+import { t as i } from "./use-truncated-DmQoePvG.js";
+import { n as a } from "./button-BHKAE6ui.js";
+import { t as o } from "./use-copy-Dm2ncvMX.js";
+import { forwardRef as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Copy01Icon as f, Tick02Icon as p } from "@hugeicons/core-free-icons";
+//#region src/components/copy-button/copy-button.tsx
+var m = {
+	variant: {
+		ghost: { classes: "material-ghost" },
+		secondary: { classes: "material-secondary" }
+	},
+	size: {
+		xs: { classes: "size-24" },
+		sm: { classes: "size-32" },
+		md: { classes: "size-36" },
+		lg: { classes: "size-40" },
+		xl: { classes: "size-48" }
+	}
+}, h = {
+	variant: "ghost",
+	size: "sm"
+}, g = /* @__PURE__ */ s(function({ value: e, label: n, size: i = "sm", variant: s = "ghost", onCopy: c, className: d, ...m }, h) {
+	let { copied: g, copy: _ } = o(), [v, y] = l(!1), b = t(), x = n ?? b("copyButton.copy", "Copy"), S = b("copyButton.copied", "Copied");
+	return /* @__PURE__ */ u(r, {
+		content: g ? S : x,
+		open: g || v,
+		onOpenChange: y,
+		children: /* @__PURE__ */ u(a, {
+			ref: h,
+			shape: "circle",
+			size: i,
+			variant: s,
+			icon: g ? p : f,
+			"aria-label": g ? S : x,
+			className: d,
+			onClick: async () => {
+				await _(e) && c?.(e);
+			},
+			...m
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "CopyButton");
+var _ = { size: {
+	sm: { classes: "h-32 pl-12 pr-0 text-small" },
+	md: { classes: "h-36 pl-16 pr-2 text-small" },
+	lg: { classes: "h-40 pl-18 pr-4 text-small" }
+} }, v = { size: "md" }, y = /* @__PURE__ */ s(function({ value: t, display: n, label: r, size: i = "md", className: a, ...o }, s) {
+	return /* @__PURE__ */ d("div", {
+		ref: s,
+		className: e("inline-flex min-w-0 max-w-full items-center gap-8 rounded-pill bg-fill-1", _.size[i].classes, a),
+		...o,
+		children: [/* @__PURE__ */ u("span", {
+			className: "mono min-w-0 flex-1 truncate text-fg select-all",
+			children: n ?? t
+		}), /* @__PURE__ */ u(g, {
+			value: t,
+			label: r,
+			size: "sm"
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (y.displayName = "ClipboardText");
+var b = /* @__PURE__ */ s(function({ value: a, children: s, label: m, onCopy: h, className: g, ..._ }, v) {
+	let { copied: y, copy: b } = o(), [x, S] = l(!1), C = c(null), w = i(C), T = t(), E = T("copyButton.copied", "Copied");
+	return /* @__PURE__ */ u(r, {
+		content: y ? E : w ? a : m ?? T("copyButton.copy", "Copy"),
+		shape: w && !y ? "multiline" : "pill",
+		open: y || x,
+		onOpenChange: S,
+		children: /* @__PURE__ */ d("button", {
+			ref: v,
+			type: "button",
+			onClick: async () => {
+				await b(a) && h?.(a);
+			},
+			className: e("group/copy relative -mx-4 inline-flex max-w-full min-w-0 items-center gap-4 rounded-code px-4 align-baseline mono text-small text-fg transition-control focus-ring tap-target", "hover:bg-fill-1 active:bg-fill-2 cursor-copy", g),
+			..._,
+			children: [
+				/* @__PURE__ */ u("span", {
+					ref: C,
+					className: "min-w-0 truncate",
+					children: s ?? a
+				}),
+				/* @__PURE__ */ u(n, {
+					icon: y ? p : f,
+					size: "xs",
+					className: e("text-fg-tertiary opacity-0 transition-control group-hover/copy:opacity-100 coarse:opacity-100 group-focus-visible/copy:opacity-100", y && "opacity-100 text-fg")
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "sr-only",
+					"aria-live": "polite",
+					children: y ? E : ""
+				})
+			]
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (b.displayName = "InlineCopyText");
+//#endregion
+export { _ as a, v as i, g as n, h as o, b as r, m as s, y as t };
+
+//# sourceMappingURL=copy-button-mAzHjYXq.js.map

package/dist/chunks/copy-button-mAzHjYXq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button-mAzHjYXq.js","names":["__icon_Tick02Icon","__icon_Copy01Icon","cn","useUiText","Icon","useTruncated","Button","useCopy","KAESO_COPY_BUTTON_VARIANTS","KAESO_COPY_BUTTON_DEFAULT_VARIANTS","CopyButton","labelProp","props","hover","setHover","useState","t","label","done","Tooltip","copied","Tick02Icon","Copy01Icon","copy","value","onCopy","KAESO_CLIPBOARD_TEXT_VARIANTS","KAESO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","ClipboardText","size","className","display","InlineCopyText","text","useRef","cut","children"],"sources":["../../src/components/copy-button/copy-button.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { forwardRef, useRef, useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useCopy } from \"../../hooks/use-copy.js\";\nimport { useTruncated } from \"../../hooks/use-truncated.js\";\nimport { Button, type ButtonSize } from \"../button/button.js\";\nimport { Tooltip } from \"../tooltip/tooltip.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Tick02Icon as __icon_Tick02Icon, Copy01Icon as __icon_Copy01Icon } from \"@hugeicons/core-free-icons\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_COPY_BUTTON_VARIANTS = {\n  variant: {\n    ghost: { classes: \"material-ghost\" },\n    secondary: { classes: \"material-secondary\" },\n  },\n  size: {\n    xs: { classes: \"size-24\" },\n    sm: { classes: \"size-32\" },\n    md: { classes: \"size-36\" },\n    lg: { classes: \"size-40\" },\n    xl: { classes: \"size-48\" },\n  },\n} as const;\nexport const KAESO_COPY_BUTTON_DEFAULT_VARIANTS = { variant: \"ghost\", size: \"sm\" } as const;\n\nexport interface CopyButtonProps {\n  value: string;\n  label?: string | undefined;\n  size?: ButtonSize | undefined;\n  variant?: keyof typeof KAESO_COPY_BUTTON_VARIANTS.variant | undefined;\n  onCopy?: ((value: string) => void) | undefined;\n  className?: string | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const CopyButton = /* @__PURE__ */ forwardRef<HTMLButtonElement, CopyButtonProps>(function CopyButton(\n  { value, label: labelProp, size = \"sm\", variant = \"ghost\", onCopy, className, ...props },\n  ref,\n) {\n  const { copied, copy } = useCopy();\n  const [hover, setHover] = useState(false);\n  const t = useUiText();\n  const label = labelProp ?? t(\"copyButton.copy\", \"Copy\");\n  const done = t(\"copyButton.copied\", \"Copied\");\n  return (\n    <Tooltip content={copied ? done : label} open={copied || hover} onOpenChange={setHover}>\n      <Button\n        ref={ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>}\n        shape=\"circle\"\n        size={size}\n        variant={variant}\n        icon={copied ? __icon_Tick02Icon : __icon_Copy01Icon}\n        aria-label={copied ? done : label}\n        className={className}\n        onClick={async () => {\n          if (await copy(value)) onCopy?.(value);\n        }}\n        {...props}\n      />\n    </Tooltip>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") CopyButton.displayName = \"CopyButton\";\n\nexport const KAESO_CLIPBOARD_TEXT_VARIANTS = {\n  size: {\n    sm: { classes: \"h-32 pl-12 pr-0 text-small\" },\n    md: { classes: \"h-36 pl-16 pr-2 text-small\" },\n    lg: { classes: \"h-40 pl-18 pr-4 text-small\" },\n  },\n} as const;\nexport const KAESO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface ClipboardTextProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  value: string;\n  display?: ReactNode | undefined;\n  label?: string | undefined;\n  size?: keyof typeof KAESO_CLIPBOARD_TEXT_VARIANTS.size | undefined;\n}\n\nexport const ClipboardText = /* @__PURE__ */ forwardRef<HTMLDivElement, ClipboardTextProps>(function ClipboardText(\n  { value, display, label, size = \"md\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"inline-flex min-w-0 max-w-full items-center gap-8 rounded-pill bg-fill-1\", KAESO_CLIPBOARD_TEXT_VARIANTS.size[size].classes, className)}\n      {...props}\n    >\n      <span className=\"mono min-w-0 flex-1 truncate text-fg select-all\">{display ?? value}</span>\n      <CopyButton value={value} label={label} size=\"sm\" />\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") ClipboardText.displayName = \"ClipboardText\";\n\nexport interface InlineCopyTextProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"children\" | \"onCopy\"> {\n  value: string;\n  children?: ReactNode | undefined;\n  label?: string | undefined;\n  onCopy?: ((value: string) => void) | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nexport const InlineCopyText = /* @__PURE__ */ forwardRef<HTMLButtonElement, InlineCopyTextProps>(function InlineCopyText(\n  { value, children, label, onCopy, className, ...props },\n  ref,\n) {\n  const { copied, copy } = useCopy();\n  const [hover, setHover] = useState(false);\n  const text = useRef<HTMLSpanElement>(null);\n  const cut = useTruncated(text);\n  const t = useUiText();\n  const done = t(\"copyButton.copied\", \"Copied\");\n  return (\n    <Tooltip\n      content={copied ? done : cut ? value : (label ?? t(\"copyButton.copy\", \"Copy\"))}\n      shape={cut && !copied ? \"multiline\" : \"pill\"}\n      open={copied || hover}\n      onOpenChange={setHover}\n    >\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={async () => {\n          if (await copy(value)) onCopy?.(value);\n        }}\n        className={cn(\n          \"group/copy relative -mx-4 inline-flex max-w-full min-w-0 items-center gap-4 rounded-code px-4 align-baseline mono text-small text-fg transition-control focus-ring tap-target\",\n          \"hover:bg-fill-1 active:bg-fill-2 cursor-copy\",\n          className,\n        )}\n        {...props}\n      >\n        <span ref={text} className=\"min-w-0 truncate\">\n          {children ?? value}\n        </span>\n        <Icon\n          icon={copied ? __icon_Tick02Icon : __icon_Copy01Icon}\n          size=\"xs\"\n          className={cn(\n            \"text-fg-tertiary opacity-0 transition-control group-hover/copy:opacity-100 coarse:opacity-100 group-focus-visible/copy:opacity-100\",\n            copied && \"opacity-100 text-fg\",\n          )}\n        />\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? done : \"\"}\n        </span>\n      </button>\n    </Tooltip>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") InlineCopyText.displayName = \"InlineCopyText\";\n"],"mappings":";;;;;;;;;;;;AAWA,IAAaQ,IAA6B;CACxC,SAAS;EACP,OAAO,EAAE,SAAS,iBAAiB;EACnC,WAAW,EAAE,SAAS,qBAAqB;CAC7C;CACA,MAAM;EACJ,IAAI,EAAE,SAAS,UAAU;EACzB,IAAI,EAAE,SAAS,UAAU;EACzB,IAAI,EAAE,SAAS,UAAU;EACzB,IAAI,EAAE,SAAS,UAAU;EACzB,IAAI,EAAE,SAAS,UAAU;CAC3B;AACF,GACaC,IAAqC;CAAE,SAAS;CAAS,MAAM;AAAK,GAYpEC,IAA6B,kBAA+C,SACvF,EAAE,UAAO,OAAOC,GAAW,UAAO,MAAM,aAAU,SAAS,WAAQ,cAAW,GAAGC,KACjF,GACA;CACA,IAAM,EAAE,WAAQ,YAASL,EAAQ,GAC3B,CAACM,GAAOC,KAAYC,EAAS,EAAK,GAClCC,IAAIb,EAAU,GACdc,IAAQN,KAAaK,EAAE,mBAAmB,MAAM,GAChDE,IAAOF,EAAE,qBAAqB,QAAQ;CAC5C,OACE,kBAACG,GAAD;EAAS,SAASC,IAASF,IAAOD;EAAO,MAAMG,KAAUP;EAAO,cAAcC;EAC5E,UAAA,kBAACR,GAAD;GACO;GACL,OAAM;GACA;GACG;GACT,MAAMc,IAASpB,IAAoBC;GACnC,cAAYmB,IAASF,IAAOD;GACjB;GACX,SAAS,YAAY;IACnB,AAAI,MAAMM,EAAKC,CAAK,KAAGC,IAASD,CAAK;GACvC;GACA,GAAIZ;EACL,CAAA;CACM,CAAA;AAEb,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAW,cAAc;AAEpE,IAAac,IAAgC,EAC3C,MAAM;CACJ,IAAI,EAAE,SAAS,6BAA6B;CAC5C,IAAI,EAAE,SAAS,6BAA6B;CAC5C,IAAI,EAAE,SAAS,6BAA6B;AAC9C,EACF,GACaC,IAAwC,EAAE,MAAM,KAAK,GASrDC,IAAgC,kBAA+C,SAC1F,EAAE,UAAO,YAAS,UAAO,UAAO,MAAM,cAAW,GAAGhB,KACpD,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWV,EAAG,4EAA4EwB,EAA8B,KAAKG,EAAK,CAAC,SAASC,CAAS;EACrJ,GAAIlB;EAHN,UAAA,CAKE,kBAAC,QAAD;GAAM,WAAU;GAAmD,UAAAmB,KAAWP;EAAY,CAAA,GAC1F,kBAACd,GAAD;GAAmB;GAAc;GAAO,MAAK;EAAM,CAAA,CAChD;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAc,cAAc;AAUvE,IAAasB,IAAiC,kBAAmD,SAC/F,EAAE,UAAO,aAAU,UAAO,WAAQ,cAAW,GAAGpB,KAChD,GACA;CACA,IAAM,EAAE,WAAQ,YAASL,EAAQ,GAC3B,CAACM,GAAOC,KAAYC,EAAS,EAAK,GAClCkB,IAAOC,EAAwB,IAAI,GACnCC,IAAM9B,EAAa4B,CAAI,GACvBjB,IAAIb,EAAU,GACde,IAAOF,EAAE,qBAAqB,QAAQ;CAC5C,OACE,kBAACG,GAAD;EACE,SAASC,IAASF,IAAOiB,IAAMX,IAASP,KAASD,EAAE,mBAAmB,MAAM;EAC5E,OAAOmB,KAAO,CAACf,IAAS,cAAc;EACtC,MAAMA,KAAUP;EAChB,cAAcC;EAEd,UAAA,kBAAC,UAAD;GACO;GACL,MAAK;GACL,SAAS,YAAY;IACnB,AAAI,MAAMS,EAAKC,CAAK,KAAGC,IAASD,CAAK;GACvC;GACA,WAAWtB,EACT,iLACA,gDACA4B,CACF;GACA,GAAIlB;GAXN,UAAA;IAaE,kBAAC,QAAD;KAAM,KAAKqB;KAAM,WAAU;KACxB,UAAAG,KAAYZ;IACT,CAAA;IACN,kBAACpB,GAAD;KACE,MAAMgB,IAASpB,IAAoBC;KACnC,MAAK;KACL,WAAWC,EACT,sIACAkB,KAAU,qBACZ;IACD,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;KAAU,aAAU;KACjC,UAAAA,IAASF,IAAO;IACb,CAAA;GACA;;CACD,CAAA;AAEb,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAe,cAAc"}