@viax.io/uxm 4.36.0

package/dist/ui/radio-group/radio-group-preview.cjs

@@ -0,0 +1,156 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_group_preview_exports = {};
+__export(radio_group_preview_exports, {
+  RadioGroupPreview: () => RadioGroupPreview
+});
+module.exports = __toCommonJS(radio_group_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function ShowcaseRow({
+  selected,
+  state,
+  styles,
+  label
+}) {
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const isDisabled = state === "disabled";
+  const bg = isHover ? styles.hoverUnselectedBg : styles.unselectedBg;
+  const border = isHover ? selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder : selected ? styles.selectedBorder : styles.unselectedBorder;
+  const dot = isHover ? styles.hoverDotColor : styles.dotColor;
+  const ring = styles.focusRing;
+  const size = styles.size ?? 20;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        fontSize: 14,
+        color: "var(--color-text)",
+        opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: size,
+              height: size,
+              flexShrink: 0,
+              borderRadius: "50%",
+              border: `2px solid ${border}`,
+              backgroundColor: bg,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "border-color 0.15s, background-color 0.15s",
+              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+            },
+            children: selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  width: size * 0.5,
+                  height: size * 0.5,
+                  borderRadius: "50%",
+                  backgroundColor: dot
+                }
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+const INTERACTIVE_OPTIONS = ["Small", "Medium", "Large"];
+function RadioGroupPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const direction = variants.direction ?? "vertical";
+  const cssVars = {
+    "--uxm-radio-group-size": styles.size != null ? `${styles.size}px` : void 0,
+    "--uxm-radio-group-gap": styles.gap != null ? `${styles.gap}px` : void 0,
+    "--uxm-radio-group-unselected-bg": styles.unselectedBg,
+    "--uxm-radio-group-unselected-border": styles.unselectedBorder,
+    "--uxm-radio-group-selected-border": styles.selectedBorder,
+    "--uxm-radio-group-dot-color": styles.dotColor,
+    "--uxm-radio-group-hover-unselected-bg": styles.hoverUnselectedBg,
+    "--uxm-radio-group-hover-unselected-border": styles.hoverUnselectedBorder,
+    "--uxm-radio-group-hover-selected-border": styles.hoverSelectedBorder,
+    "--uxm-radio-group-hover-dot-color": styles.hoverDotColor,
+    "--uxm-radio-group-focus-ring": styles.focusRing,
+    "--uxm-radio-group-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-radio-group-error-color": styles.errorColor,
+    "--uxm-radio-group-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  const interactiveKey = `${state}-${direction}`;
+  const interactiveDisabled = state === "disabled";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: false, state, styles, label: "Unselected" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShowcaseRow, { selected: true, state, styles, label: "Selected" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.RadioGroup,
+        {
+          name: `uxm-radio-preview-${interactiveKey}`,
+          direction,
+          error: state === "error" ? "Pick an option to continue" : void 0,
+          children: INTERACTIVE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ui.RadioOption,
+            {
+              name: `uxm-radio-preview-${interactiveKey}`,
+              value: opt,
+              disabled: interactiveDisabled,
+              children: opt
+            },
+            opt
+          ))
+        },
+        interactiveKey
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioGroupPreview
+});
+//# sourceMappingURL=radio-group-preview.cjs.map

package/dist/ui/radio-group/radio-group-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          flexShrink: 0,\n          borderRadius: '50%',\n          border: `2px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {selected && (\n          <span\n            style={{\n              width: size * 0.5,\n              height: size * 0.5,\n              borderRadius: '50%',\n              backgroundColor: dot as string,\n            }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {opt}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/radio-group/radio-group-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function RadioGroupPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-group-preview.d.ts.map

package/dist/ui/radio-group/radio-group-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkFrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAgFnE"}

package/dist/ui/radio-group/radio-group-preview.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup, RadioOption } from "../../ui/index.js";
+function ShowcaseRow({
+  selected,
+  state,
+  styles,
+  label
+}) {
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const isDisabled = state === "disabled";
+  const bg = isHover ? styles.hoverUnselectedBg : styles.unselectedBg;
+  const border = isHover ? selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder : selected ? styles.selectedBorder : styles.unselectedBorder;
+  const dot = isHover ? styles.hoverDotColor : styles.dotColor;
+  const ring = styles.focusRing;
+  const size = styles.size ?? 20;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        fontSize: 14,
+        color: "var(--color-text)",
+        opacity: isDisabled ? styles.disabledOpacity ?? 0.4 : 1,
+        cursor: isDisabled ? "not-allowed" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              width: size,
+              height: size,
+              flexShrink: 0,
+              borderRadius: "50%",
+              border: `2px solid ${border}`,
+              backgroundColor: bg,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "border-color 0.15s, background-color 0.15s",
+              ...isFocus ? { outline: `2px solid ${ring}`, outlineOffset: 2 } : {}
+            },
+            children: selected && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: size * 0.5,
+                  height: size * 0.5,
+                  borderRadius: "50%",
+                  backgroundColor: dot
+                }
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+const INTERACTIVE_OPTIONS = ["Small", "Medium", "Large"];
+function RadioGroupPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const direction = variants.direction ?? "vertical";
+  const cssVars = {
+    "--uxm-radio-group-size": styles.size != null ? `${styles.size}px` : void 0,
+    "--uxm-radio-group-gap": styles.gap != null ? `${styles.gap}px` : void 0,
+    "--uxm-radio-group-unselected-bg": styles.unselectedBg,
+    "--uxm-radio-group-unselected-border": styles.unselectedBorder,
+    "--uxm-radio-group-selected-border": styles.selectedBorder,
+    "--uxm-radio-group-dot-color": styles.dotColor,
+    "--uxm-radio-group-hover-unselected-bg": styles.hoverUnselectedBg,
+    "--uxm-radio-group-hover-unselected-border": styles.hoverUnselectedBorder,
+    "--uxm-radio-group-hover-selected-border": styles.hoverSelectedBorder,
+    "--uxm-radio-group-hover-dot-color": styles.hoverDotColor,
+    "--uxm-radio-group-focus-ring": styles.focusRing,
+    "--uxm-radio-group-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-radio-group-error-color": styles.errorColor,
+    "--uxm-radio-group-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  const interactiveKey = `${state}-${direction}`;
+  const interactiveDisabled = state === "disabled";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsx(ShowcaseRow, { selected: false, state, styles, label: "Unselected" }),
+        /* @__PURE__ */ jsx(ShowcaseRow, { selected: true, state, styles, label: "Selected" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          name: `uxm-radio-preview-${interactiveKey}`,
+          direction,
+          error: state === "error" ? "Pick an option to continue" : void 0,
+          children: INTERACTIVE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
+            RadioOption,
+            {
+              name: `uxm-radio-preview-${interactiveKey}`,
+              value: opt,
+              disabled: interactiveDisabled,
+              children: opt
+            },
+            opt
+          ))
+        },
+        interactiveKey
+      )
+    ] })
+  ] });
+}
+export {
+  RadioGroupPreview
+};
+//# sourceMappingURL=radio-group-preview.js.map

package/dist/ui/radio-group/radio-group-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group-preview.tsx"],"sourcesContent":["import { type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { RadioGroup, RadioOption } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction ShowcaseRow({\n  selected,\n  state,\n  styles,\n  label,\n}: {\n  selected: boolean;\n  state: string;\n  styles: Styles;\n  label: string;\n}) {\n  // Static showcase — paints the selected forced state regardless of\n  // pointer interaction. Inline JSX (not the real <RadioOption>) so each\n  // forced state can override the circle + dot directly; the interactive\n  // instance below is where production CSS rules exercise.\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n  const isDisabled = state === 'disabled';\n\n  const bg = isHover\n    ? styles.hoverUnselectedBg\n    : styles.unselectedBg;\n  const border = isHover\n    ? (selected ? styles.hoverSelectedBorder : styles.hoverUnselectedBorder)\n    : (selected ? styles.selectedBorder : styles.unselectedBorder);\n  const dot = isHover ? styles.hoverDotColor : styles.dotColor;\n  const ring = styles.focusRing;\n  const size = (styles.size as number) ?? 20;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 10,\n        fontSize: 14,\n        color: 'var(--color-text)',\n        opacity: isDisabled ? ((styles.disabledOpacity as number) ?? 0.4) : 1,\n        cursor: isDisabled ? 'not-allowed' : 'pointer',\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          width: size,\n          height: size,\n          flexShrink: 0,\n          borderRadius: '50%',\n          border: `2px solid ${border as string}`,\n          backgroundColor: bg as string,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'border-color 0.15s, background-color 0.15s',\n          ...(isFocus\n            ? { outline: `2px solid ${ring as string}`, outlineOffset: 2 }\n            : {}),\n        }}\n      >\n        {selected && (\n          <span\n            style={{\n              width: size * 0.5,\n              height: size * 0.5,\n              borderRadius: '50%',\n              backgroundColor: dot as string,\n            }}\n          />\n        )}\n      </span>\n      {label}\n    </div>\n  );\n}\n\nconst INTERACTIVE_OPTIONS = ['Small', 'Medium', 'Large'];\n\nexport function RadioGroupPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const direction = (variants.direction as 'vertical' | 'horizontal' | undefined) ?? 'vertical';\n\n  // Project every registry knob as a `--uxm-radio-group-*` custom property\n  // on the wrapper. The interactive <RadioGroup> below renders the real\n  // component whose styles.css rules read these vars — live editor edits\n  // paint immediately, and production `:hover` / `:focus-visible` rules\n  // exercise exactly as they would in prod.\n  const cssVars: Record<string, string | undefined> = {\n    '--uxm-radio-group-size': styles.size != null ? `${styles.size}px` : undefined,\n    '--uxm-radio-group-gap': styles.gap != null ? `${styles.gap}px` : undefined,\n    '--uxm-radio-group-unselected-bg': styles.unselectedBg as string | undefined,\n    '--uxm-radio-group-unselected-border': styles.unselectedBorder as string | undefined,\n    '--uxm-radio-group-selected-border': styles.selectedBorder as string | undefined,\n    '--uxm-radio-group-dot-color': styles.dotColor as string | undefined,\n    '--uxm-radio-group-hover-unselected-bg': styles.hoverUnselectedBg as string | undefined,\n    '--uxm-radio-group-hover-unselected-border': styles.hoverUnselectedBorder as string | undefined,\n    '--uxm-radio-group-hover-selected-border': styles.hoverSelectedBorder as string | undefined,\n    '--uxm-radio-group-hover-dot-color': styles.hoverDotColor as string | undefined,\n    '--uxm-radio-group-focus-ring': styles.focusRing as string | undefined,\n    '--uxm-radio-group-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-radio-group-error-color': styles.errorColor as string | undefined,\n    '--uxm-radio-group-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  // Pair the state and direction into the interactive `key` so that\n  // toggling either variant resets the radio group cleanly (matches the\n  // freshly-{re,dis}abled UX and clears any stale selection when the user\n  // flips layout).\n  const interactiveKey = `${state}-${direction}`;\n  const interactiveDisabled = state === 'disabled';\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n          <ShowcaseRow selected={false} state={state} styles={styles} label=\"Unselected\" />\n          <ShowcaseRow selected={true} state={state} styles={styles} label=\"Selected\" />\n        </div>\n      </div>\n\n      {/* Interactive instance — uncontrolled so the browser owns the\n          checked state. React (and the canvas's event-capture re-renders)\n          can't fight the DOM here, so click/keyboard navigation toggle\n          reliably between options. Three options share a unique `name`\n          so the browser's radio-group semantics work natively. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <RadioGroup\n          key={interactiveKey}\n          name={`uxm-radio-preview-${interactiveKey}`}\n          direction={direction}\n          error={state === 'error' ? 'Pick an option to continue' : undefined}\n        >\n          {INTERACTIVE_OPTIONS.map((opt) => (\n            <RadioOption\n              key={opt}\n              name={`uxm-radio-preview-${interactiveKey}`}\n              value={opt}\n              disabled={interactiveDisabled}\n            >\n              {opt}\n            </RadioOption>\n          ))}\n        </RadioGroup>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/radio-group/radio-group.cjs

@@ -0,0 +1,112 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radio_group_exports = {};
+__export(radio_group_exports, {
+  RadioGroup: () => RadioGroup,
+  RadioOption: () => RadioOption
+});
+module.exports = __toCommonJS(radio_group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../../ui/field-error/index.cjs");
+const RadioGroupContext = (0, import_react.createContext)(null);
+function RadioGroup({
+  name,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  direction = "vertical",
+  className,
+  children,
+  error,
+  id,
+  "aria-describedby": describedBy
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const hasValue = controlledValue !== void 0 || defaultValue !== void 0;
+  const errorId = (0, import_react.useId)();
+  function handleChange(nextValue, e) {
+    if (!isControlled) setUncontrolledValue(nextValue);
+    onChange?.(nextValue, e);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "radiogroup",
+        className: (0, import_helpers.cn)(
+          "uxm-radio-group",
+          `uxm-radio-group--${direction}`,
+          error && "uxm-radio-group--error",
+          className
+        ),
+        id,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": (0, import_helpers.mergeDescribedBy)(describedBy, error ? errorId : void 0),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, { value: { name, value, hasValue, onChange: handleChange }, children })
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-radio-group__error-message", children: error })
+  ] });
+}
+RadioGroup.hasError = true;
+function RadioOption({
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  onChange,
+  children,
+  className
+}) {
+  const group = (0, import_react.useContext)(RadioGroupContext);
+  const resolvedName = name ?? group?.name;
+  const resolvedChecked = checked !== void 0 ? checked : defaultChecked !== void 0 || !group?.hasValue ? void 0 : group.value === value;
+  function handleChange(e) {
+    onChange?.(value, e);
+    group?.onChange?.(value, e);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: (0, import_helpers.cn)("uxm-radio", disabled && "uxm-radio--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "radio",
+        className: "uxm-radio__input",
+        name: resolvedName,
+        value,
+        checked: resolvedChecked,
+        defaultChecked,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__circle", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__dot" }) }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-radio__label", children })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioGroup,
+  RadioOption
+});
+//# sourceMappingURL=radio-group.cjs.map

package/dist/ui/radio-group/radio-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\n\nimport type { ChangeEvent, ReactNode } from 'react';\n\nexport type RadioGroupDirection = 'vertical' | 'horizontal';\n\nexport interface RadioGroupProps {\n  name: string;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  direction?: RadioGroupDirection;\n  className?: string;\n  children: ReactNode;\n  /**\n   * When set to a non-empty string, marks the group invalid: `aria-invalid`\n   * lands on the group and the message renders below in the error color. Per\n   * the input family's small-control convention the circles AND the option\n   * labels all stay neutral — the message is the sole signal. The\n   * `.uxm-radio-group--error` class still rides on the root as a state hook.\n   * Omit (or pass an empty string) for normal.\n   */\n  error?: string;\n  /**\n   * Forwarded to the `role=\"radiogroup\"` root. `FormField` injects both — `id` for its\n   * label association, `aria-describedby` for the hint — so wiring these\n   * makes the atom hint-associable; the describedby is merged with the\n   * atom's own error-message id, consumer ids first.\n   */\n  id?: string;\n  'aria-describedby'?: string;\n}\n\n// Carries the group-level `name` / selected `value` / change handler down to\n// each `RadioOption` without forcing every consumer to repeat `name` and wire\n// `checked`/`onChange` by hand on every option. `RadioOption` still accepts\n// its own `name` / `checked` / `defaultChecked` / `onChange` so existing call\n// sites that set those directly (bypassing the group) keep working unchanged.\n//\n// `hasValue` is fixed for the lifetime of the group (derived from whether\n// `value`/`defaultValue` was passed at all, not from the current value) so a\n// `RadioOption` that defers to the group never flips between an\n// uncontrolled (`checked={undefined}`) and controlled (`checked={boolean}`)\n// input across renders — that flip is what triggers React's \"changing an\n// uncontrolled input to be controlled\" warning.\ninterface RadioGroupContextValue {\n  name?: string;\n  value?: string;\n  hasValue: boolean;\n  onChange: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport function RadioGroup({\n  name,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  direction = 'vertical',\n  className,\n  children,\n  error,\n  id,\n  'aria-describedby': describedBy,\n}: RadioGroupProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n  const hasValue = controlledValue !== undefined || defaultValue !== undefined;\n  const errorId = useId();\n\n  function handleChange(nextValue: string, e: ChangeEvent<HTMLInputElement>) {\n    if (!isControlled) setUncontrolledValue(nextValue);\n    onChange?.(nextValue, e);\n  }\n\n  return (\n    <>\n      <div\n        role=\"radiogroup\"\n        className={cn(\n          'uxm-radio-group',\n          `uxm-radio-group--${direction}`,\n          error && 'uxm-radio-group--error',\n          className,\n        )}\n        id={id}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={mergeDescribedBy(describedBy, error ? errorId : undefined)}\n      >\n        <RadioGroupContext.Provider value={{ name, value, hasValue, onChange: handleChange }}>\n          {children}\n        </RadioGroupContext.Provider>\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-radio-group__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children that\n// accept one (avoids React unknown-prop warnings on non-input children).\nRadioGroup.hasError = true;\n\nexport interface RadioOptionProps {\n  name?: string;\n  value: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function RadioOption({\n  name,\n  value,\n  checked,\n  defaultChecked,\n  disabled,\n  onChange,\n  children,\n  className,\n}: RadioOptionProps) {\n  const group = useContext(RadioGroupContext);\n  const resolvedName = name ?? group?.name;\n  // Only defer to the group's selected value when this option doesn't\n  // already manage its own checked state (explicit `checked`/`defaultChecked`\n  // always wins, matching the controlled/uncontrolled convention) AND the\n  // group was actually given a `value`/`defaultValue` to manage — otherwise\n  // `checked` stays `undefined` so the input remains a plain native\n  // uncontrolled radio (as it always has been for consumers who only use\n  // `RadioGroup` for the shared `name` + layout, not selection state).\n  const resolvedChecked =\n    checked !== undefined\n      ? checked\n      : defaultChecked !== undefined || !group?.hasValue\n        ? undefined\n        : group.value === value;\n\n  function handleChange(e: ChangeEvent<HTMLInputElement>) {\n    onChange?.(value, e);\n    group?.onChange?.(value, e);\n  }\n\n  return (\n    <label className={cn('uxm-radio', disabled && 'uxm-radio--disabled', className)}>\n      <input\n        type=\"radio\"\n        className=\"uxm-radio__input\"\n        name={resolvedName}\n        value={value}\n        checked={resolvedChecked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onChange={handleChange}\n      />\n      <span className=\"uxm-radio__circle\" aria-hidden=\"true\">\n        <span className=\"uxm-radio__dot\" />\n      </span>\n      {children && <span className=\"uxm-radio__label\">{children}</span>}\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiFI;AAjFJ,mBAA2D;AAE3D,qBAAqC;AACrC,yBAA2B;AAoD3B,MAAM,wBAAoB,4BAA6C,IAAI;AAEpE,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,GAAoB;AAClB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAS,YAAY;AACvE,QAAM,eAAe,oBAAoB;AACzC,QAAM,QAAQ,eAAe,kBAAkB;AAC/C,QAAM,WAAW,oBAAoB,UAAa,iBAAiB;AACnE,QAAM,cAAU,oBAAM;AAEtB,WAAS,aAAa,WAAmB,GAAkC;AACzE,QAAI,CAAC,aAAc,sBAAqB,SAAS;AACjD,eAAW,WAAW,CAAC;AAAA,EACzB;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAW;AAAA,UACT;AAAA,UACA,oBAAoB,SAAS;AAAA,UAC7B,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,QACA,gBAAc,QAAQ,OAAO;AAAA,QAC7B,wBAAkB,iCAAiB,aAAa,QAAQ,UAAU,MAAS;AAAA,QAE3E,sDAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,GAChF,UACH;AAAA;AAAA,IACF;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,kCAChC,iBACH;AAAA,KAEJ;AAEJ;AAGA,WAAW,WAAW;AAaf,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAQ,yBAAW,iBAAiB;AAC1C,QAAM,eAAe,QAAQ,OAAO;AAQpC,QAAM,kBACJ,YAAY,SACR,UACA,mBAAmB,UAAa,CAAC,OAAO,WACtC,SACA,MAAM,UAAU;AAExB,WAAS,aAAa,GAAkC;AACtD,eAAW,OAAO,CAAC;AACnB,WAAO,WAAW,OAAO,CAAC;AAAA,EAC5B;AAEA,SACE,6CAAC,WAAM,eAAW,mBAAG,aAAa,YAAY,uBAAuB,SAAS,GAC5E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,sDAAC,UAAK,WAAU,kBAAiB,GACnC;AAAA,IACC,YAAY,4CAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,KAC5D;AAEJ;","names":[]}

package/dist/ui/radio-group/radio-group.css

@@ -0,0 +1,104 @@
+@charset "UTF-8";
+/* ── radio-group ── */
+.uxm-radio {
+  align-items: center;
+  color: var(--color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: calc(14px * var(--type-scale, 1));
+  gap: 8px;
+}
+
+/* Disabled — lives here rather than with the other bits shared from
+   checkbox.scss: radio-group.css is imported after checkbox.css, so
+   `.uxm-radio`'s `cursor: pointer` above wins over a `not-allowed` declared
+   there at equal specificity. 0.4 is the registry default. */
+.uxm-radio--disabled {
+  cursor: not-allowed;
+  opacity: var(--uxm-radio-group-disabled-opacity, 0.4);
+}
+
+/* RadioGroup — saves write to `.uxm-radio-group` (the wrapper).
+   Inner `.uxm-radio__circle` and `__dot` are descendants that read
+   the same `--uxm-radio-group-*` vars via custom-property inheritance.
+   The dot sizes itself off the circle (size / 2) so a single `size`
+   knob keeps the proportions. Per-state hover/focus read
+   `--uxm-radio-group-{state}-*` vars, each falling back to the REGISTRY's
+   default for that state (registry/inputs.ts) — not to the resting value. */
+.uxm-radio-group {
+  display: flex;
+  gap: var(--uxm-radio-group-gap, 16px);
+}
+.uxm-radio-group--vertical {
+  flex-direction: column;
+}
+.uxm-radio-group--horizontal {
+  flex-direction: row;
+}
+
+.uxm-radio__circle {
+  align-items: center;
+  background-color: var(--uxm-radio-group-unselected-bg, transparent);
+  border: 2px solid var(--uxm-radio-group-unselected-border, var(--uxm-radio-group-border-color, var(--color-border)));
+  border-radius: 50%;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-radio-group-size, 20px);
+  justify-content: center;
+  transition: background-color 0.15s, border-color 0.15s;
+  width: var(--uxm-radio-group-size, 20px);
+}
+.uxm-radio__dot {
+  background-color: var(--uxm-radio-group-dot-color, var(--uxm-radio-group-active-color, var(--color-accent)));
+  border-radius: 50%;
+  height: calc(var(--uxm-radio-group-size, 20px) / 2);
+  opacity: 0;
+  width: calc(var(--uxm-radio-group-size, 20px) / 2);
+}
+.uxm-radio:not(.uxm-radio--disabled):hover .uxm-radio__input:not(:checked) + .uxm-radio__circle {
+  /* Hover — fallbacks are the registry's hover defaults: the unselected
+     circle signals through its BORDER (`--color-text-strong`) and stays
+     unfilled, the selected circle and its dot deepen to
+     `--color-accent-bold`. They used to repeat the resting colours, which
+     compiles to a live `:hover` rule that paints nothing — invisible in any
+     consumer, while the studio looked right because it projects its knob
+     defaults as inline vars. The unselected background is the one fallback
+     that matches its resting value on purpose (the registry says so too):
+     that rule is an override hook, not a look. Gated on `:not(--disabled)`
+     so a disabled option stays visually inert. */
+  background-color: var(--uxm-radio-group-hover-unselected-bg, transparent);
+  border-color: var(--uxm-radio-group-hover-unselected-border, var(--color-text-strong));
+}
+.uxm-radio:not(.uxm-radio--disabled):hover .uxm-radio__input:checked + .uxm-radio__circle {
+  border-color: var(--uxm-radio-group-hover-selected-border, var(--color-accent-bold));
+}
+.uxm-radio:not(.uxm-radio--disabled):hover .uxm-radio__input:checked + .uxm-radio__circle > .uxm-radio__dot {
+  background-color: var(--uxm-radio-group-hover-dot-color, var(--color-accent-bold));
+}
+.uxm-radio__input:focus-visible + .uxm-radio__circle {
+  outline: 2px solid var(--uxm-radio-group-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-radio__input:checked + .uxm-radio__circle {
+  border-color: var(--uxm-radio-group-selected-border, var(--uxm-radio-group-active-color, var(--color-accent)));
+}
+.uxm-radio__input:checked + .uxm-radio__circle > .uxm-radio__dot {
+  opacity: 1;
+}
+
+/* Small-control error message — the control + label stay neutral (too small to
+   read as an error; a red label would compete). The message below is the sole
+   signal, reading the errorColor / errorMessageSize knobs the registry exposes
+   (kebab → `--uxm-radio-group-error-color` / `-error-message-size`). The
+   `.uxm-radio-group--error` class rides the root as a state hook + aria-invalid
+   companion, even though it paints nothing itself.
+   The selector has to be the class the atom actually renders (FieldError gets
+   it via its `className` prop) — this used to read `.uxm--message`, which
+   nothing renders, so the message shipped with no colour, no size and no
+   margin while the studio's knobs looked live. */
+.uxm-radio-group__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-radio-group-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-radio-group-error-color, var(--color-danger-text));
+}

package/dist/ui/radio-group/radio-group.d.ts

@@ -0,0 +1,44 @@
+import type { ChangeEvent, ReactNode } from 'react';
+export type RadioGroupDirection = 'vertical' | 'horizontal';
+export interface RadioGroupProps {
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+    direction?: RadioGroupDirection;
+    className?: string;
+    children: ReactNode;
+    /**
+     * When set to a non-empty string, marks the group invalid: `aria-invalid`
+     * lands on the group and the message renders below in the error color. Per
+     * the input family's small-control convention the circles AND the option
+     * labels all stay neutral — the message is the sole signal. The
+     * `.uxm-radio-group--error` class still rides on the root as a state hook.
+     * Omit (or pass an empty string) for normal.
+     */
+    error?: string;
+    /**
+     * Forwarded to the `role="radiogroup"` root. `FormField` injects both — `id` for its
+     * label association, `aria-describedby` for the hint — so wiring these
+     * makes the atom hint-associable; the describedby is merged with the
+     * atom's own error-message id, consumer ids first.
+     */
+    id?: string;
+    'aria-describedby'?: string;
+}
+export declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, direction, className, children, error, id, 'aria-describedby': describedBy, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var hasError: boolean;
+}
+export interface RadioOptionProps {
+    name?: string;
+    value: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function RadioOption({ name, value, checked, defaultChecked, disabled, onChange, children, className, }: RadioOptionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/ui/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE5D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAuBD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EAAE,eAAe,EACtB,YAAY,EACZ,QAAQ,EACR,SAAsB,EACtB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,EAAE,EACF,kBAAkB,EAAE,WAAW,GAChC,EAAE,eAAe,2CAqCjB;yBAhDe,UAAU;;;AAqD1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAwClB"}