@logicplanes/kaeso-ui 0.4.4 → 0.4.6

package/dist/chunks/json-view-DZ2nL2Ir.js

@@ -0,0 +1,253 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./icon-CBzOwqrX.js";
+import { t as r } from "./use-copy-Dm2ncvMX.js";
+import { createContext as i, forwardRef as a, useContext as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ArrowRight01Icon as m, Copy01Icon as h, Tick02Icon as g } from "@hugeicons/core-free-icons";
+//#region src/components/code-block/json-view.tsx
+var _ = { surface: {
+	well: { classes: "rounded-well bg-fill-1 p-16" },
+	plain: { classes: "" }
+} }, v = { surface: "well" }, y = /* @__PURE__ */ i({
+	active: "",
+	setActive: () => void 0,
+	announce: () => void 0
+});
+function b({ text: e, query: t }) {
+	if (!t) return /* @__PURE__ */ f(d, { children: e });
+	let n = e.toLowerCase().indexOf(t.toLowerCase());
+	return n < 0 ? /* @__PURE__ */ f(d, { children: e }) : /* @__PURE__ */ p(d, { children: [
+		e.slice(0, n),
+		/* @__PURE__ */ f("mark", {
+			className: "rounded-cell bg-warning-tint text-inherit ring-mark",
+			children: e.slice(n, n + t.length)
+		}),
+		e.slice(n + t.length)
+	] });
+}
+function x({ v: e, query: t }) {
+	return e === null ? /* @__PURE__ */ f("span", {
+		className: "font-semibold text-fg",
+		children: "null"
+	}) : typeof e == "boolean" ? /* @__PURE__ */ f("span", {
+		className: "font-semibold text-fg",
+		children: String(e)
+	}) : typeof e == "number" ? /* @__PURE__ */ f("span", {
+		className: "text-warning-text tabular",
+		children: e
+	}) : /* @__PURE__ */ p("span", {
+		className: "text-info-text wrap-anywhere",
+		children: [
+			"\"",
+			/* @__PURE__ */ f(b, {
+				text: String(e),
+				query: t
+			}),
+			"\""
+		]
+	});
+}
+function S(e) {
+	let { copied: n, copy: i } = r(), { announce: a } = o(y), s = t();
+	return {
+		copied: n,
+		copyPath: () => {
+			i(e).then((e) => e && a(s("jsonView.pathCopied", "Path copied")));
+		}
+	};
+}
+function C({ path: r, copied: i, onCopy: a }) {
+	let o = t();
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-hidden": !0,
+		title: i ? o("jsonView.pathCopied", "Path copied") : o("jsonView.copyPath", "Copy path {path}", { path: r }),
+		onClick: (e) => {
+			e.stopPropagation(), a();
+		},
+		className: e("relative ml-8 inline-flex size-20 shrink-0 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary tap-target transition-control hover:bg-fill-2 hover:text-fg group-hover/row:opacity-100 group-focus-within/row:opacity-100", i ? "text-fg opacity-100" : "opacity-0"),
+		children: /* @__PURE__ */ f(n, {
+			icon: i ? g : h,
+			size: "xs"
+		})
+	});
+}
+var w = (e, t) => e !== t && (t === "" || e.startsWith(`${t}.`) || e.startsWith(`${t}[`));
+function T(e, t) {
+	let n = e.closest("[role=tree]");
+	if (!n) return !1;
+	let r = [...n.querySelectorAll("[role=treeitem]")], i = r.indexOf(e), a = t === "ArrowDown" ? r[i + 1] : t === "ArrowUp" ? r[i - 1] : t === "Home" ? r[0] : t === "End" ? r[r.length - 1] : void 0;
+	return a ? (a.focus(), !0) : t === "ArrowDown" || t === "ArrowUp" || t === "Home" || t === "End";
+}
+function E({ name: r, value: i, path: a, depth: s, open: c, query: l, last: h }) {
+	let [g, _] = u(s < c), v = t(), D = o(y), { copied: O, copyPath: k } = S(a), A = typeof i == "object" && !!i, j = A ? Array.isArray(i) ? i.map((e, t) => [t, e]) : Object.entries(i) : [], M = r === void 0 ? null : typeof r == "number" ? /* @__PURE__ */ p("span", {
+		className: "text-fg-tertiary tabular",
+		children: [r, ": "]
+	}) : /* @__PURE__ */ p("span", {
+		className: "text-fg",
+		children: [
+			"\"",
+			/* @__PURE__ */ f(b, {
+				text: r,
+				query: l
+			}),
+			"\"",
+			/* @__PURE__ */ f("span", {
+				className: "text-fg-tertiary",
+				children: ": "
+			})
+		]
+	}), N = h ? "" : ",", P = (e) => {
+		_(e), !e && w(D.active, a) && D.setActive(a);
+	}, F = {
+		role: "treeitem",
+		"aria-level": s + 1,
+		tabIndex: D.active === a ? 0 : -1,
+		onKeyDown: (e) => {
+			e.target === e.currentTarget && ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c" && a ? (e.preventDefault(), k()) : A && (e.key === "Enter" || e.key === " ") ? (e.preventDefault(), P(!g)) : A && e.key === "ArrowRight" ? (e.preventDefault(), g ? j.length && T(e.currentTarget, "ArrowDown") : _(!0)) : e.key === "ArrowLeft" ? (e.preventDefault(), A && g ? P(!1) : e.currentTarget.parentElement?.parentElement?.closest("[data-json-node]")?.querySelector("[role=treeitem]")?.focus()) : T(e.currentTarget, e.key) && e.preventDefault());
+		},
+		onFocus: (e) => {
+			e.target === e.currentTarget && D.setActive(a);
+		}
+	};
+	if (!A) return /* @__PURE__ */ f("div", {
+		"data-json-node": "",
+		children: /* @__PURE__ */ p("div", {
+			...F,
+			className: "group/row flex min-h-20 items-start rounded-cell focus-ring-inset",
+			style: { paddingLeft: s * 16 + 20 },
+			children: [/* @__PURE__ */ p("span", {
+				className: "min-w-0",
+				children: [
+					M,
+					/* @__PURE__ */ f(x, {
+						v: i,
+						query: l
+					}),
+					/* @__PURE__ */ f("span", {
+						className: "text-fg-tertiary",
+						children: N
+					})
+				]
+			}), a && /* @__PURE__ */ f(C, {
+				path: a,
+				copied: O,
+				onCopy: k
+			})]
+		})
+	});
+	let [I, L] = Array.isArray(i) ? ["[", "]"] : ["{", "}"];
+	return /* @__PURE__ */ p("div", {
+		"data-json-node": "",
+		children: [/* @__PURE__ */ p("div", {
+			...F,
+			"aria-expanded": g,
+			className: "group/row flex min-h-24 items-center rounded-cell focus-ring-inset",
+			style: { paddingLeft: s * 16 },
+			children: [
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					tabIndex: -1,
+					"aria-hidden": !0,
+					onClick: () => P(!g),
+					className: "relative -ml-4 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary tap-target hover:bg-fill-2 hover:text-fg",
+					children: /* @__PURE__ */ f(n, {
+						icon: m,
+						size: "xs",
+						className: e("transition-transform duration-180", g && "rotate-90")
+					})
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "min-w-0",
+					children: [
+						M,
+						/* @__PURE__ */ f("span", {
+							className: "text-fg-tertiary",
+							children: I
+						}),
+						!g && /* @__PURE__ */ f("button", {
+							type: "button",
+							tabIndex: -1,
+							onClick: () => _(!0),
+							className: "relative mx-4 cursor-pointer rounded-code px-4 text-fg-tertiary tap-target hover:bg-fill-2 hover:text-fg",
+							children: Array.isArray(i) ? v("jsonView.items", "{count, plural, one {{n} item} other {{n} items}}", {
+								count: j.length,
+								n: String(j.length)
+							}) : v("jsonView.keys", "{count, plural, one {{n} key} other {{n} keys}}", {
+								count: j.length,
+								n: String(j.length)
+							})
+						}),
+						!g && /* @__PURE__ */ p("span", {
+							className: "text-fg-tertiary",
+							children: [L, N]
+						})
+					]
+				}),
+				a && /* @__PURE__ */ f(C, {
+					path: a,
+					copied: O,
+					onCopy: k
+				})
+			]
+		}), g && /* @__PURE__ */ p(d, { children: [j.map(([e, t], n) => /* @__PURE__ */ f(E, {
+			name: e,
+			value: t,
+			path: typeof e == "number" ? `${a}[${e}]` : a ? `${a}.${e}` : String(e),
+			depth: s + 1,
+			open: c,
+			query: l,
+			last: n === j.length - 1
+		}, e)), /* @__PURE__ */ p("div", {
+			"aria-hidden": !0,
+			className: "min-h-20 text-fg-tertiary",
+			style: { paddingLeft: s * 16 + 20 },
+			children: [L, N]
+		})] })]
+	});
+}
+var D = /* @__PURE__ */ a(function({ value: n, defaultDepth: r = 2, query: i, surface: a = "well", className: o }, d) {
+	let m = t(), [h, g] = u(""), [v, b] = u(""), x = l(void 0), S = l(null);
+	s(() => {
+		S.current?.querySelector("[role=treeitem][tabindex=\"0\"]") || g("");
+	}, [n]);
+	let C = c(() => ({
+		active: h,
+		setActive: g,
+		announce: (e) => {
+			b(""), clearTimeout(x.current), x.current = setTimeout(() => b(e), 50);
+		}
+	}), [h]);
+	return /* @__PURE__ */ p("div", {
+		ref: d,
+		className: e("mono overflow-x-auto text-small leading-code text-fg scrollbar-quiet", _.surface[a].classes, o),
+		children: [/* @__PURE__ */ f(y.Provider, {
+			value: C,
+			children: /* @__PURE__ */ f("div", {
+				ref: S,
+				role: "tree",
+				"aria-label": m("jsonView.label", "JSON"),
+				children: /* @__PURE__ */ f(E, {
+					value: n,
+					path: "",
+					depth: 0,
+					open: r,
+					query: i,
+					last: !0
+				})
+			})
+		}), /* @__PURE__ */ f("div", {
+			role: "status",
+			className: "sr-only",
+			children: v
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (D.displayName = "JsonView");
+//#endregion
+export { v as n, _ as r, D as t };
+
+//# sourceMappingURL=json-view-DZ2nL2Ir.js.map

package/dist/chunks/json-view-DZ2nL2Ir.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-view-DZ2nL2Ir.js","names":["_Fragment","__icon_Tick02Icon","__icon_Copy01Icon","__icon_ArrowRight01Icon","cn","useUiText","Icon","useCopy","Fragment$1","KAESO_JSON_VIEW_VARIANTS","KAESO_JSON_VIEW_DEFAULT_VARIANTS","TreeContext","Mark","query","text","i","Scalar","v","useCopyPath","useContext","t","path","ok","announce","CopyPath","copied","onCopy","Tick02Icon","Copy01Icon","isInside","branch","moveFocus","tree","from","items","next","key","Node","initialOpen","open","setOpen","useState","depth","isObj","value","entries","keyLabel","name","comma","last","toggle","item","copyPath","o","c","ArrowRight01Icon","k","JsonView","active","setActive","said","setSaid","timer","useRef","root","useMemo","surface","className","defaultDepth"],"sources":["../../src/components/code-block/json-view.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { createContext, forwardRef, useContext, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Tick02Icon as __icon_Tick02Icon, Copy01Icon as __icon_Copy01Icon, ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\nimport { useCopy } from \"../../hooks/use-copy.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_JSON_VIEW_VARIANTS = {\n  surface: {\n    well: { classes: \"rounded-well bg-fill-1 p-16\" },\n    plain: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_JSON_VIEW_DEFAULT_VARIANTS = { surface: \"well\" } as const;\n\ntype Json = string | number | boolean | null | Json[] | { [k: string]: Json };\n\nexport interface JsonViewProps {\n  value: unknown;\n  defaultDepth?: number | undefined;\n  query?: string | undefined;\n  surface?: keyof typeof KAESO_JSON_VIEW_VARIANTS.surface | undefined;\n  className?: string | undefined;\n}\n\ninterface Tree {\n  active: string;\n  setActive: (path: string) => void;\n  announce: (text: string) => void;\n}\nconst TreeContext = /* @__PURE__ */ createContext<Tree>({ active: \"\", setActive: () => undefined, announce: () => undefined });\n\nfunction Mark({ text, query }: { text: string; query?: string | undefined }) {\n  if (!query) return <>{text}</>;\n  const i = text.toLowerCase().indexOf(query.toLowerCase());\n  if (i < 0) return <>{text}</>;\n  return (\n    <>\n      {text.slice(0, i)}\n      <mark className=\"rounded-cell bg-warning-tint text-inherit ring-mark\">{text.slice(i, i + query.length)}</mark>\n      {text.slice(i + query.length)}\n    </>\n  );\n}\n\nfunction Scalar({ v, query }: { v: Json; query?: string | undefined }) {\n  if (v === null) return <span className=\"font-semibold text-fg\">null</span>;\n  if (typeof v === \"boolean\") return <span className=\"font-semibold text-fg\">{String(v)}</span>;\n  if (typeof v === \"number\") return <span className=\"text-warning-text tabular\">{v}</span>;\n  return (\n    <span className=\"text-info-text wrap-anywhere\">\n      \"<Mark text={String(v)} query={query} />\"\n    </span>\n  );\n}\n\nfunction useCopyPath(path: string) {\n  const { copied, copy } = useCopy();\n  const { announce } = useContext(TreeContext);\n  const t = useUiText();\n  return {\n    copied,\n    copyPath: () => {\n      void copy(path).then((ok) => ok && announce(t(\"jsonView.pathCopied\", \"Path copied\")));\n    },\n  };\n}\n\nfunction CopyPath({ path, copied, onCopy }: { path: string; copied: boolean; onCopy: () => void }) {\n  const t = useUiText();\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      aria-hidden\n      title={copied ? t(\"jsonView.pathCopied\", \"Path copied\") : t(\"jsonView.copyPath\", \"Copy path {path}\", { path })}\n      onClick={(e) => {\n        e.stopPropagation();\n        onCopy();\n      }}\n      className={cn(\n        \"relative ml-8 inline-flex size-20 shrink-0 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary tap-target transition-control hover:bg-fill-2 hover:text-fg group-hover/row:opacity-100 group-focus-within/row:opacity-100\",\n        copied ? \"text-fg opacity-100\" : \"opacity-0\",\n      )}\n    >\n      <Icon icon={copied ? __icon_Tick02Icon : __icon_Copy01Icon} size=\"xs\" />\n    </button>\n  );\n}\n\nconst isInside = (path: string, branch: string) => path !== branch && (branch === \"\" || path.startsWith(`${branch}.`) || path.startsWith(`${branch}[`));\n\nfunction moveFocus(from: HTMLElement, key: string): boolean {\n  const tree = from.closest(\"[role=tree]\");\n  if (!tree) return false;\n  const items = [...tree.querySelectorAll<HTMLElement>(\"[role=treeitem]\")];\n  const i = items.indexOf(from);\n  const next =\n    key === \"ArrowDown\" ? items[i + 1] : key === \"ArrowUp\" ? items[i - 1] : key === \"Home\" ? items[0] : key === \"End\" ? items[items.length - 1] : undefined;\n  if (!next) return key === \"ArrowDown\" || key === \"ArrowUp\" || key === \"Home\" || key === \"End\";\n  next.focus();\n  return true;\n}\n\nfunction Node({\n  name,\n  value,\n  path,\n  depth,\n  open: initialOpen,\n  query,\n  last,\n}: {\n  name?: string | number | undefined;\n  value: Json;\n  path: string;\n  depth: number;\n  open: number;\n  query?: string | undefined;\n  last: boolean;\n}) {\n  const [open, setOpen] = useState(depth < initialOpen);\n  const t = useUiText();\n  const tree = useContext(TreeContext);\n  const { copied, copyPath } = useCopyPath(path);\n  const isObj = value !== null && typeof value === \"object\";\n  const entries: [string | number, Json][] = isObj ? (Array.isArray(value) ? value.map((v, i) => [i, v]) : Object.entries(value)) : [];\n  const keyLabel: ReactNode =\n    name === undefined ? null : typeof name === \"number\" ? (\n      <span className=\"text-fg-tertiary tabular\">{name}: </span>\n    ) : (\n      <span className=\"text-fg\">\n        \"<Mark text={name} query={query} />\"<span className=\"text-fg-tertiary\">: </span>\n      </span>\n    );\n  const comma = last ? \"\" : \",\";\n  const toggle = (next: boolean) => {\n    setOpen(next);\n    if (!next && isInside(tree.active, path)) tree.setActive(path);\n  };\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.target !== e.currentTarget) return;\n    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"c\" && path) {\n      e.preventDefault();\n      copyPath();\n      return;\n    }\n    if (isObj && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      toggle(!open);\n      return;\n    }\n    if (isObj && e.key === \"ArrowRight\") {\n      e.preventDefault();\n      if (!open) setOpen(true);\n      else if (entries.length) moveFocus(e.currentTarget, \"ArrowDown\");\n      return;\n    }\n    if (e.key === \"ArrowLeft\") {\n      e.preventDefault();\n      if (isObj && open) toggle(false);\n      else e.currentTarget.parentElement?.parentElement?.closest<HTMLElement>(\"[data-json-node]\")?.querySelector<HTMLElement>(\"[role=treeitem]\")?.focus();\n      return;\n    }\n    if (moveFocus(e.currentTarget, e.key)) e.preventDefault();\n  };\n  const item = {\n    role: \"treeitem\",\n    \"aria-level\": depth + 1,\n    tabIndex: tree.active === path ? 0 : -1,\n    onKeyDown,\n    onFocus: (e: React.FocusEvent<HTMLDivElement>) => {\n      if (e.target === e.currentTarget) tree.setActive(path);\n    },\n  } as const;\n  if (!isObj) {\n    return (\n      <div data-json-node=\"\">\n        <div {...item} className=\"group/row flex min-h-20 items-start rounded-cell focus-ring-inset\" style={{ paddingLeft: depth * 16 + 20 }}>\n          <span className=\"min-w-0\">\n            {keyLabel}\n            <Scalar v={value} query={query} />\n            <span className=\"text-fg-tertiary\">{comma}</span>\n          </span>\n          {path && <CopyPath path={path} copied={copied} onCopy={copyPath} />}\n        </div>\n      </div>\n    );\n  }\n  const [o, c] = Array.isArray(value) ? [\"[\", \"]\"] : [\"{\", \"}\"];\n  return (\n    <div data-json-node=\"\">\n      <div {...item} aria-expanded={open} className=\"group/row flex min-h-24 items-center rounded-cell focus-ring-inset\" style={{ paddingLeft: depth * 16 }}>\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden\n          onClick={() => toggle(!open)}\n          className=\"relative -ml-4 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary tap-target hover:bg-fill-2 hover:text-fg\"\n        >\n          <Icon icon={__icon_ArrowRight01Icon} size=\"xs\" className={cn(\"transition-transform duration-180\", open && \"rotate-90\")} />\n        </button>\n        <span className=\"min-w-0\">\n          {keyLabel}\n          <span className=\"text-fg-tertiary\">{o}</span>\n          {!open && (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              onClick={() => setOpen(true)}\n              className=\"relative mx-4 cursor-pointer rounded-code px-4 text-fg-tertiary tap-target hover:bg-fill-2 hover:text-fg\"\n            >\n              {Array.isArray(value)\n                ? t(\"jsonView.items\", \"{count, plural, one {{n} item} other {{n} items}}\", { count: entries.length, n: String(entries.length) })\n                : t(\"jsonView.keys\", \"{count, plural, one {{n} key} other {{n} keys}}\", { count: entries.length, n: String(entries.length) })}\n            </button>\n          )}\n          {!open && (\n            <span className=\"text-fg-tertiary\">\n              {c}\n              {comma}\n            </span>\n          )}\n        </span>\n        {path && <CopyPath path={path} copied={copied} onCopy={copyPath} />}\n      </div>\n      {open && (\n        <>\n          {entries.map(([k, v], i) => (\n            <Node\n              key={k}\n              name={k}\n              value={v}\n              path={typeof k === \"number\" ? `${path}[${k}]` : path ? `${path}.${k}` : String(k)}\n              depth={depth + 1}\n              open={initialOpen}\n              query={query}\n              last={i === entries.length - 1}\n            />\n          ))}\n          <div aria-hidden className=\"min-h-20 text-fg-tertiary\" style={{ paddingLeft: depth * 16 + 20 }}>\n            {c}\n            {comma}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const JsonView = /* @__PURE__ */ forwardRef<HTMLDivElement, JsonViewProps>(function JsonView({ value, defaultDepth = 2, query, surface = \"well\", className }, ref) {\n  const t = useUiText();\n  const [active, setActive] = useState(\"\");\n  const [said, setSaid] = useState(\"\");\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const root = useRef<HTMLDivElement>(null);\n  useLayoutEffect(() => {\n    if (!root.current?.querySelector('[role=treeitem][tabindex=\"0\"]')) setActive(\"\");\n  }, [value]);\n  const tree = useMemo<Tree>(\n    () => ({\n      active,\n      setActive,\n      announce: (text) => {\n        setSaid(\"\");\n        clearTimeout(timer.current);\n        timer.current = setTimeout(() => setSaid(text), 50);\n      },\n    }),\n    [active],\n  );\n  return (\n    <div\n      ref={ref}\n      className={cn(\"mono overflow-x-auto text-small leading-code text-fg scrollbar-quiet\", KAESO_JSON_VIEW_VARIANTS.surface[surface].classes, className)}\n    >\n      <TreeContext.Provider value={tree}>\n        <div ref={root} role=\"tree\" aria-label={t(\"jsonView.label\", \"JSON\")}>\n          <Node value={value as Json} path=\"\" depth={0} open={defaultDepth} query={query} last />\n        </div>\n      </TreeContext.Provider>\n      <div role=\"status\" className=\"sr-only\">\n        {said}\n      </div>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") JsonView.displayName = \"JsonView\";\n"],"mappings":"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"}

package/dist/chunks/{kbd-BF1vKXJf.js → kbd-8A0ML_up.js}

@@ -1,14 +1,14 @@
 "use client";
-import { t as e } from "./cn-Dj6sRgkF.js";
+import { t as e } from "./cn-BjnOAUrA.js";
 import { i as t, n } from "./context-BELWW79w.js";
 import { Fragment as r, forwardRef as i, useSyncExternalStore as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/kbd/kbd.tsx
-var c = { tone: {
+var l = { tone: {
 	default: { classes: "bg-fill-1 text-fg-secondary shadow-ring" },
 	onInk: { classes: "bg-on-ink/15 text-on-ink/80 shadow-none" }
-} }, l = { tone: "default" }, u = () => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent), d = () => () => void 0, f = () => a(d, u, () => !1);
-function p(e) {
+} }, u = { tone: "default" }, d = () => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent), f = () => () => void 0, p = () => a(f, d, () => !1);
+function m(e) {
 	let t = e("kbd.ctrl", "Ctrl"), n = e("kbd.optionName", "Option");
 	return {
 		mod: [
@@ -83,8 +83,8 @@ function p(e) {
 		]
 	};
 }
-function m(e, t = n, r = u()) {
-	let i = p(t)[e.toLowerCase()];
+function h(e, t = n, r = d()) {
+	let i = m(t)[e.toLowerCase()];
 	return i ? {
 		visual: r ? i[0] : i[1],
 		spoken: i[2]
@@ -93,40 +93,42 @@ function m(e, t = n, r = u()) {
 		spoken: e
 	};
 }
-var h = /* @__PURE__ */ i(function({ children: n, tone: r = "default", className: i, ...a }, s) {
-	let l = t(), u = f(), d = typeof n == "string" ? m(n, l, u) : null;
-	return /* @__PURE__ */ o("kbd", {
-		ref: s,
-		className: e("inline-flex h-20 min-w-20 shrink-0 items-center justify-center rounded-kbd px-5 font-sans text-micro font-medium tabular", c.tone[r].classes, i),
-		...d && d.spoken !== d.visual ? {
-			"aria-label": d.spoken,
-			title: d.spoken
-		} : {},
+var g = /* @__PURE__ */ i(function({ children: n, tone: r = "default", className: i, ...a }, u) {
+	let d = t(), f = p(), m = typeof n == "string" ? h(n, d, f) : null, g = m && m.spoken.toLowerCase() !== m.visual.toLowerCase() ? m.spoken : null;
+	return /* @__PURE__ */ s("kbd", {
+		ref: u,
+		className: e("relative inline-flex h-20 min-w-20 shrink-0 items-center justify-center rounded-kbd px-5 font-sans text-caption font-medium tabular", l.tone[r].classes, i),
 		...a,
-		children: d ? d.visual : n
+		children: g ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			children: m?.visual
+		}), /* @__PURE__ */ s("span", {
+			className: "sr-only",
+			children: g
+		})] }) : m ? m.visual : n
 	});
 });
-process.env.NODE_ENV !== "production" && (h.displayName = "Kbd");
-var g = /* @__PURE__ */ i(function({ keys: n, tone: i = "default", className: a, ...c }, l) {
+process.env.NODE_ENV !== "production" && (g.displayName = "Kbd");
+var _ = /* @__PURE__ */ i(function({ keys: n, tone: i = "default", className: a, ...o }, l) {
 	let u = t(), d = n.length > 0 && Array.isArray(n[0]) ? n : [n];
-	return /* @__PURE__ */ o("span", {
+	return /* @__PURE__ */ s("span", {
 		ref: l,
 		className: e("inline-flex items-center gap-4 align-middle", a),
-		...c,
-		children: d.map((t, n) => /* @__PURE__ */ s(r, { children: [n > 0 && /* @__PURE__ */ o("span", {
+		...o,
+		children: d.map((t, n) => /* @__PURE__ */ c(r, { children: [n > 0 && /* @__PURE__ */ s("span", {
 			className: e("text-caption font-medium", i === "onInk" ? "text-on-ink/70" : "text-fg-secondary"),
 			children: u("kbd.then", "then")
-		}), /* @__PURE__ */ o("span", {
+		}), /* @__PURE__ */ s("span", {
 			className: "inline-flex items-center gap-2",
-			children: t.map((e) => /* @__PURE__ */ o(h, {
+			children: t.map((e, t) => /* @__PURE__ */ s(g, {
 				tone: i,
 				children: e
-			}, e))
+			}, `${e}-${t}`))
 		})] }, n))
 	});
 });
-process.env.NODE_ENV !== "production" && (g.displayName = "KbdSequence");
+process.env.NODE_ENV !== "production" && (_.displayName = "KbdSequence");
 //#endregion
-export { m as a, g as i, c as n, h as r, l as t };
+export { h as a, _ as i, l as n, g as r, u as t };
 
-//# sourceMappingURL=kbd-BF1vKXJf.js.map
+//# sourceMappingURL=kbd-8A0ML_up.js.map

package/dist/chunks/kbd-8A0ML_up.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-8A0ML_up.js","names":["_Fragment","cn","useUiText","Fragment$1","KAESO_KBD_VARIANTS","KAESO_KBD_DEFAULT_VARIANTS","isMac","subscribePlatform","useMac","useSyncExternalStore","modifiers","ctrl","t","option","keyLabel","englishText","m","key","mac","Kbd","props","label","children","spoken","tone","className","KbdSequence","steps","keys","Fragment","i","chord","k","j"],"sources":["../../src/components/kbd/kbd.tsx"],"sourcesContent":["import { forwardRef, Fragment, useSyncExternalStore, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { englishText, useUiText, type UiText } from \"../../i18n/context.js\";\n\nexport const KAESO_KBD_VARIANTS = {\n  tone: {\n    default: { classes: \"bg-fill-1 text-fg-secondary shadow-ring\" },\n    onInk: { classes: \"bg-on-ink/15 text-on-ink/80 shadow-none\" },\n  },\n} as const;\nexport const KAESO_KBD_DEFAULT_VARIANTS = { tone: \"default\" } as const;\n\nconst isMac = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\nconst subscribePlatform = () => () => undefined;\nconst useMac = () => useSyncExternalStore(subscribePlatform, isMac, () => false);\n\nfunction modifiers(t: UiText): Record<string, [mac: string, other: string, name: string]> {\n  const ctrl = t(\"kbd.ctrl\", \"Ctrl\");\n  const option = t(\"kbd.optionName\", \"Option\");\n  return {\n    mod: [\"⌘\", ctrl, t(\"kbd.commandName\", \"Command\")],\n    cmd: [\"⌘\", ctrl, t(\"kbd.commandName\", \"Command\")],\n    ctrl: [\"⌃\", ctrl, t(\"kbd.controlName\", \"Control\")],\n    alt: [\"⌥\", \"Alt\", option],\n    option: [\"⌥\", \"Alt\", option],\n    shift: [\"⇧\", t(\"kbd.shift\", \"Shift\"), t(\"kbd.shiftName\", \"Shift\")],\n    enter: [\"↵\", \"Enter\", t(\"kbd.enterName\", \"Enter\")],\n    esc: [\"esc\", \"Esc\", t(\"kbd.escapeName\", \"Escape\")],\n    backspace: [\"⌫\", t(\"kbd.backspace\", \"Backspace\"), t(\"kbd.backspaceName\", \"Backspace\")],\n    up: [\"↑\", \"↑\", t(\"kbd.upName\", \"Up\")],\n    down: [\"↓\", \"↓\", t(\"kbd.downName\", \"Down\")],\n    left: [\"←\", \"←\", t(\"kbd.leftName\", \"Left\")],\n    right: [\"→\", \"→\", t(\"kbd.rightName\", \"Right\")],\n    tab: [\"⇥\", \"Tab\", t(\"kbd.tabName\", \"Tab\")],\n  };\n}\n\nexport function keyLabel(key: string, t: UiText = englishText, mac: boolean = isMac()): { visual: string; spoken: string } {\n  const m = modifiers(t)[key.toLowerCase()];\n  if (!m) return { visual: key.length === 1 ? key.toUpperCase() : key, spoken: key };\n  return { visual: mac ? m[0] : m[1], spoken: m[2] };\n}\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  tone?: keyof typeof KAESO_KBD_VARIANTS.tone | undefined;\n}\n\nexport const Kbd = /* @__PURE__ */ forwardRef<HTMLElement, KbdProps>(function Kbd({ children, tone = \"default\", className, ...props }, ref) {\n  const t = useUiText();\n  const mac = useMac();\n  const label = typeof children === \"string\" ? keyLabel(children, t, mac) : null;\n  const spoken = label && label.spoken.toLowerCase() !== label.visual.toLowerCase() ? label.spoken : null;\n  return (\n    <kbd\n      ref={ref}\n      className={cn(\n        \"relative inline-flex h-20 min-w-20 shrink-0 items-center justify-center rounded-kbd px-5 font-sans text-caption font-medium tabular\",\n        KAESO_KBD_VARIANTS.tone[tone].classes,\n        className,\n      )}\n      {...props}\n    >\n      {spoken ? (\n        <>\n          <span aria-hidden=\"true\">{label?.visual}</span>\n          <span className=\"sr-only\">{spoken}</span>\n        </>\n      ) : label ? (\n        label.visual\n      ) : (\n        children\n      )}\n    </kbd>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Kbd.displayName = \"Kbd\";\n\nexport interface KbdSequenceProps extends HTMLAttributes<HTMLSpanElement> {\n  keys: string[][] | string[];\n  tone?: keyof typeof KAESO_KBD_VARIANTS.tone | undefined;\n}\n\nexport const KbdSequence = /* @__PURE__ */ forwardRef<HTMLSpanElement, KbdSequenceProps>(function KbdSequence({ keys, tone = \"default\", className, ...props }, ref) {\n  const t = useUiText();\n  const steps: string[][] = keys.length > 0 && Array.isArray(keys[0]) ? (keys as string[][]) : [keys as string[]];\n  return (\n    <span ref={ref} className={cn(\"inline-flex items-center gap-4 align-middle\", className)} {...props}>\n      {steps.map((chord, i) => (\n        <Fragment key={i}>\n          {i > 0 && <span className={cn(\"text-caption font-medium\", tone === \"onInk\" ? \"text-on-ink/70\" : \"text-fg-secondary\")}>{t(\"kbd.then\", \"then\")}</span>}\n          <span className=\"inline-flex items-center gap-2\">\n            {chord.map((k, j) => (\n              <Kbd key={`${k}-${j}`} tone={tone}>\n                {k}\n              </Kbd>\n            ))}\n          </span>\n        </Fragment>\n      ))}\n    </span>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") KbdSequence.displayName = \"KbdSequence\";\n"],"mappings":"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"}

package/dist/chunks/label-DW24Aj0Z.js

@@ -0,0 +1,26 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { i as t } from "./context-BELWW79w.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/label/label.tsx
+var a = { size: {
+	md: { classes: "text-body font-medium" },
+	sm: { classes: "text-small font-medium" }
+} }, o = { size: "md" }, s = /* @__PURE__ */ n(function({ size: n = "md", optional: o, className: s, children: c, ...l }, u) {
+	let d = t();
+	return /* @__PURE__ */ i("label", {
+		ref: u,
+		className: e("inline-flex items-baseline gap-6 text-fg disabled:text-fg-disabled", a.size[n].classes, s),
+		...l,
+		children: [c, o && /* @__PURE__ */ r("span", {
+			className: e("font-regular text-fg-tertiary", n === "sm" ? "text-caption" : "text-small"),
+			children: d("label.optional", "Optional")
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (s.displayName = "Label");
+//#endregion
+export { a as n, s as r, o as t };
+
+//# sourceMappingURL=label-DW24Aj0Z.js.map

package/dist/chunks/label-DW24Aj0Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-DW24Aj0Z.js","names":["cn","useUiText","KAESO_LABEL_VARIANTS","KAESO_LABEL_DEFAULT_VARIANTS","Label","props","t","size","className","children","optional"],"sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef, type LabelHTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_LABEL_VARIANTS = {\n  size: {\n    md: { classes: \"text-body font-medium\" },\n    sm: { classes: \"text-small font-medium\" },\n  },\n} as const;\nexport const KAESO_LABEL_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  size?: keyof typeof KAESO_LABEL_VARIANTS.size | undefined;\n  optional?: boolean | undefined;\n  children: ReactNode;\n}\n\nexport const Label = /* @__PURE__ */ forwardRef<HTMLLabelElement, LabelProps>(function Label({ size = \"md\", optional, className, children, ...props }, ref) {\n  const t = useUiText();\n  return (\n    <label\n      ref={ref}\n      className={cn(\"inline-flex items-baseline gap-6 text-fg disabled:text-fg-disabled\", KAESO_LABEL_VARIANTS.size[size].classes, className)}\n      {...props}\n    >\n      {children}\n      {optional && (\n        <span className={cn(\"font-regular text-fg-tertiary\", size === \"sm\" ? \"text-caption\" : \"text-small\")}>{t(\"label.optional\", \"Optional\")}</span>\n      )}\n    </label>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Label.displayName = \"Label\";\n"],"mappings":";;;;;;AAIA,IAAaE,IAAuB,EAClC,MAAM;CACJ,IAAI,EAAE,SAAS,wBAAwB;CACvC,IAAI,EAAE,SAAS,yBAAyB;AAC1C,EACF,GACaC,IAA+B,EAAE,MAAM,KAAK,GAQ5CC,IAAwB,kBAAyC,SAAe,EAAE,UAAO,MAAM,aAAU,cAAW,aAAU,GAAGC,KAAS,GAAK;CAC1J,IAAMC,IAAIL,EAAU;CACpB,OACE,kBAAC,SAAD;EACO;EACL,WAAWD,EAAG,sEAAsEE,EAAqB,KAAKK,EAAK,CAAC,SAASC,CAAS;EACtI,GAAIH;EAHN,UAAA,CAKGI,GACAC,KACC,kBAAC,QAAD;GAAM,WAAWV,EAAG,iCAAiCO,MAAS,OAAO,iBAAiB,YAAY;GAAI,UAAAD,EAAE,kBAAkB,UAAU;EAAQ,CAAA,CAEzI;;AAEX,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc"}

package/dist/chunks/{link-KWI7PevW.js → link-CMjkcLQK.js}

@@ -1,24 +1,24 @@
 "use client";
-import { t as e } from "./cn-Dj6sRgkF.js";
+import { t as e } from "./cn-BjnOAUrA.js";
 import { n as t, r as n } from "./link-provider-cvl8lSTT.js";
 import { i as r } from "./context-BELWW79w.js";
-import { t as i } from "./icon-D7ja-_Yk.js";
+import { t as i } from "./icon-CBzOwqrX.js";
 import { forwardRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { ArrowUpRight01Icon as c } from "@hugeicons/core-free-icons";
 //#region src/components/link/link.tsx
 var l = { variant: {
-	inline: { classes: "text-inherit underline decoration-line-strong decoration-1 underline-offset-3 hover:decoration-current" },
+	inline: { classes: "text-inherit underline decoration-fg-tertiary decoration-1 underline-offset-3 hover:decoration-current" },
 	quiet: { classes: "text-fg-secondary no-underline hover:text-fg" },
-	standalone: { classes: "font-medium text-fg no-underline hover:underline hover:decoration-line-strong hover:underline-offset-3" },
+	standalone: { classes: "font-medium text-fg no-underline hover:underline hover:decoration-fg-tertiary hover:underline-offset-3" },
 	heading: { classes: "group/heading text-inherit no-underline" },
-	card: { classes: "mx-0 flex flex-col gap-4 rounded-well bg-fill-1 px-16 py-12 text-fg no-underline hover:bg-fill-2" }
+	card: { classes: "mx-0 flex flex-col gap-4 rounded-well bg-fill-1 px-16 py-12 text-fg no-underline outline-offset-2 hover:bg-fill-2" }
 } }, u = { variant: "inline" }, d = /* @__PURE__ */ a(function({ href: a, variant: u = "inline", external: d, className: f, children: p, ...m }, h) {
 	let g = n(), _ = r(), v = d ?? t(a);
 	return /* @__PURE__ */ s(g, {
 		ref: h,
 		href: a,
-		className: e("relative -mx-2 box-decoration-clone rounded-code px-2 transition-control focus-ring tap-target", l.variant[u].classes, f),
+		className: e("relative -mx-2 box-decoration-clone rounded-code px-2 outline-offset-0 transition-control focus-ring tap-target", l.variant[u].classes, u === "card" && v && "pe-36", f),
 		...v ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
@@ -26,20 +26,20 @@ var l = { variant: {
 		...m,
 		children: [
 			p,
-			u === "heading" && /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				className: "ml-8 inline-block text-fg-tertiary opacity-0 transition-control group-hover/heading:opacity-100 group-focus-visible/heading:opacity-100",
-				children: "#"
-			}),
 			v && /* @__PURE__ */ s("span", {
 				"aria-hidden": "true",
-				className: "whitespace-nowrap",
+				className: e("whitespace-nowrap", u === "card" && "absolute end-16 top-12"),
 				children: ["⁠", /* @__PURE__ */ o(i, {
 					icon: c,
 					size: "xs",
-					className: "ml-2 inline-block align-middle"
+					className: "ms-2 inline-block align-middle"
 				})]
 			}),
+			u === "heading" && /* @__PURE__ */ o("span", {
+				"aria-hidden": "true",
+				className: "ms-8 inline-block text-fg-tertiary opacity-0 transition-control group-hover/heading:opacity-100 group-focus-visible/heading:opacity-100",
+				children: "#"
+			}),
 			v && /* @__PURE__ */ o("span", {
 				className: "sr-only",
 				children: _("link.opensInNewTab", " (opens in a new tab)")
@@ -51,4 +51,4 @@ process.env.NODE_ENV !== "production" && (d.displayName = "Link");
 //#endregion
 export { l as n, d as r, u as t };
 
-//# sourceMappingURL=link-KWI7PevW.js.map
+//# sourceMappingURL=link-CMjkcLQK.js.map

package/dist/chunks/link-CMjkcLQK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-CMjkcLQK.js","names":["__icon_ArrowUpRight01Icon","cn","isExternalHref","useLinkComponent","useUiText","Icon","KAESO_LINK_VARIANTS","KAESO_LINK_DEFAULT_VARIANTS","Link","props","LinkComp","t","isExternal","external","href","variant","className","children","ArrowUpRight01Icon"],"sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { isExternalHref, useLinkComponent } from \"../../utils/link-provider.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { ArrowUpRight01Icon as __icon_ArrowUpRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes: \"text-inherit underline decoration-fg-tertiary decoration-1 underline-offset-3 hover:decoration-current\",\n    },\n    quiet: {\n      classes: \"text-fg-secondary no-underline hover:text-fg\",\n    },\n    standalone: {\n      classes: \"font-medium text-fg no-underline hover:underline hover:decoration-fg-tertiary hover:underline-offset-3\",\n    },\n    heading: {\n      classes: \"group/heading text-inherit no-underline\",\n    },\n    card: {\n      classes: \"mx-0 flex flex-col gap-4 rounded-well bg-fill-1 px-16 py-12 text-fg no-underline outline-offset-2 hover:bg-fill-2\",\n    },\n  },\n} as const;\nexport const KAESO_LINK_DEFAULT_VARIANTS = { variant: \"inline\" } as const;\n\nexport interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n  href: string;\n  variant?: keyof typeof KAESO_LINK_VARIANTS.variant | undefined;\n  external?: boolean | undefined;\n  children: ReactNode;\n}\n\nexport const Link = /* @__PURE__ */ forwardRef<HTMLAnchorElement, LinkProps>(function Link({ href, variant = \"inline\", external, className, children, ...props }, ref) {\n  const LinkComp = useLinkComponent();\n  const t = useUiText();\n  const isExternal = external ?? isExternalHref(href);\n  return (\n    <LinkComp\n      ref={ref}\n      href={href}\n      className={cn(\n        \"relative -mx-2 box-decoration-clone rounded-code px-2 outline-offset-0 transition-control focus-ring tap-target\",\n        KAESO_LINK_VARIANTS.variant[variant].classes,\n        variant === \"card\" && isExternal && \"pe-36\",\n        className,\n      )}\n      {...(isExternal ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span aria-hidden=\"true\" className={cn(\"whitespace-nowrap\", variant === \"card\" && \"absolute end-16 top-12\")}>\n          {\"\\u2060\"}\n          <Icon icon={__icon_ArrowUpRight01Icon} size=\"xs\" className=\"ms-2 inline-block align-middle\" />\n        </span>\n      )}\n      {variant === \"heading\" && (\n        <span\n          aria-hidden=\"true\"\n          className=\"ms-8 inline-block text-fg-tertiary opacity-0 transition-control group-hover/heading:opacity-100 group-focus-visible/heading:opacity-100\"\n        >\n          #\n        </span>\n      )}\n      {isExternal && <span className=\"sr-only\">{t(\"link.opensInNewTab\", \" (opens in a new tab)\")}</span>}\n    </LinkComp>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Link.displayName = \"Link\";\n"],"mappings":";;;;;;;;;AAOA,IAAaM,IAAsB,EACjC,SAAS;CACP,QAAQ,EACN,SAAS,yGACX;CACA,OAAO,EACL,SAAS,+CACX;CACA,YAAY,EACV,SAAS,yGACX;CACA,SAAS,EACP,SAAS,0CACX;CACA,MAAM,EACJ,SAAS,oHACX;AACF,EACF,GACaC,IAA8B,EAAE,SAAS,SAAS,GASlDC,IAAuB,kBAAyC,SAAc,EAAE,SAAM,aAAU,UAAU,aAAU,cAAW,aAAU,GAAGC,KAAS,GAAK;CACrK,IAAMC,IAAWP,EAAiB,GAC5BQ,IAAIP,EAAU,GACdQ,IAAaC,KAAYX,EAAeY,CAAI;CAClD,OACE,kBAACJ,GAAD;EACO;EACC;EACN,WAAWT,EACT,mHACAK,EAAoB,QAAQS,EAAQ,CAAC,SACrCA,MAAY,UAAUH,KAAc,SACpCI,CACF;EACA,GAAKJ,IAAa;GAAE,QAAQ;GAAU,KAAK;EAAsB,IAAI,CAAC;EACtE,GAAIH;EAVN,UAAA;GAYGQ;GACAL,KACC,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAWX,EAAG,qBAAqBc,MAAY,UAAU,wBAAwB;IAA1G,UAAA,CACG,KACD,kBAACV,GAAD;KAAM,MAAML;KAA2B,MAAK;KAAK,WAAU;IAAkC,CAAA,CACzF;;GAEPe,MAAY,aACX,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA;GAEPH,KAAc,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAAD,EAAE,sBAAsB,uBAAuB;GAAQ,CAAA;EACzF;;AAEd,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAK,cAAc"}