@misoto22/design 0.6.1 → 0.8.0

package/dist/components/Markdown/nodes.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The node shapes `Markdown` renders, and the contract a custom `parse`
+ * function has to meet.
+ *
+ * Deliberately small. It is not an attempt at mdast: it is the set of blocks
+ * this design system has an opinion about, which is the set `article.css`
+ * already styles. Anything outside it — footnotes, tables, task lists,
+ * definition lists, embedded HTML — is a `parse` away, and the point of naming
+ * the shapes here rather than accepting a foreign AST is that a consumer
+ * bringing markdown-it or remark maps into a surface the package can promise
+ * to keep rendering.
+ */
+type MarkdownHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** A run of text, and the four things that can happen inside one. */
+type MarkdownInline = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'code';
+    value: string;
+} | {
+    type: 'strong';
+    children: MarkdownInline[];
+} | {
+    type: 'emphasis';
+    children: MarkdownInline[];
+} | {
+    type: 'link';
+    href: string;
+    children: MarkdownInline[];
+} | {
+    type: 'image';
+    src: string;
+    alt: string;
+};
+/**
+ * A block.
+ *
+ * `list` items and `quote` children are blocks in turn, which is what makes a
+ * nested list, or a fence inside a bullet, fall out of the same recursion
+ * rather than needing a case of its own.
+ */
+type MarkdownNode = {
+    type: 'heading';
+    level: MarkdownHeadingLevel;
+    children: MarkdownInline[];
+} | {
+    type: 'paragraph';
+    children: MarkdownInline[];
+} | {
+    type: 'code';
+    value: string;
+    lang?: string;
+} | {
+    type: 'list';
+    ordered: boolean;
+    items: MarkdownNode[][];
+} | {
+    type: 'quote';
+    children: MarkdownNode[];
+} | {
+    type: 'rule';
+};
+
+export type { MarkdownHeadingLevel, MarkdownInline, MarkdownNode };

package/dist/components/Markdown/nodes.js

@@ -0,0 +1 @@
+//# sourceMappingURL=nodes.js.map

package/dist/components/Markdown/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Markdown/parse.d.ts

@@ -0,0 +1,24 @@
+import { MarkdownNode } from './nodes.js';
+
+/**
+ * A Markdown string, as nodes.
+ *
+ * The supported subset, stated so nobody has to find its edges by experiment:
+ * ATX headings, paragraphs, fenced code with an info string, blockquotes,
+ * ordered and unordered lists including nesting, thematic breaks — and inline
+ * emphasis, strong, code spans, links, images and backslash escapes.
+ *
+ * What is NOT here, and is deliberate: tables, footnotes, task lists, setext
+ * headings, reference links, hard line breaks, and raw HTML. Raw HTML is the
+ * one that matters — it is left as text rather than rendered, so this path has
+ * no `dangerouslySetInnerHTML` anywhere in it and cannot be talked into one. A
+ * document that needs the rest brings its own parser through `Markdown`'s
+ * `parse` prop.
+ *
+ * Never throws. Malformed input is not an error condition here — it is Tuesday
+ * — so an unterminated fence, a stray bracket or an empty string each produce
+ * the nodes they can and no more.
+ */
+declare function parseMarkdown(source: string): MarkdownNode[];
+
+export { parseMarkdown };

package/dist/components/Markdown/parse.js

@@ -0,0 +1,110 @@
+import { parseInline } from "./inline.js";
+const FENCE = /^ {0,3}(`{3,}|~{3,})\s*([^\s`]*)\s*$/;
+const HEADING = /^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})\s*$/;
+const QUOTE = /^ {0,3}>\s?(.*)$/;
+const ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+const lineAt = (lines, index) => lines[index] ?? "";
+const opensBlock = (line) => HEADING.test(line) || RULE.test(line) || FENCE.test(line) || QUOTE.test(line) || ITEM.test(line);
+const closesFence = (line, marker) => new RegExp(`^ {0,3}${marker.charAt(0)}{${marker.length},}\\s*$`).test(line);
+function takeFence(lines, start, out) {
+  const fence = FENCE.exec(lineAt(lines, start));
+  if (!fence) return start + 1;
+  const [, marker = "", info = ""] = fence;
+  const body = [];
+  let i = start + 1;
+  while (i < lines.length && !closesFence(lineAt(lines, i), marker)) {
+    body.push(lineAt(lines, i));
+    i += 1;
+  }
+  out.push({ type: "code", value: body.join("\n"), lang: info || void 0 });
+  return i < lines.length ? i + 1 : i;
+}
+function takeQuote(lines, start, out) {
+  const body = [];
+  let i = start;
+  while (i < lines.length) {
+    const quoted = QUOTE.exec(lineAt(lines, i));
+    if (!quoted) break;
+    body.push(quoted[1] ?? "");
+    i += 1;
+  }
+  out.push({ type: "quote", children: parseBlocks(body) });
+  return i;
+}
+function takeList(lines, start, out) {
+  const first = ITEM.exec(lineAt(lines, start));
+  if (!first) return start + 1;
+  const baseIndent = (first[1] ?? "").length;
+  const ordered = /\d/.test(first[2] ?? "");
+  const items = [];
+  let current;
+  let indent = 0;
+  let i = start;
+  while (i < lines.length) {
+    const line = lineAt(lines, i);
+    const item = ITEM.exec(line);
+    const [, gap = "", bullet = "", rest = ""] = item ?? [];
+    if (item && gap.length <= baseIndent) {
+      if (ordered !== /\d/.test(bullet)) break;
+      if (current) items.push(parseBlocks(current));
+      indent = gap.length + bullet.length + 1;
+      current = [rest];
+      i += 1;
+      continue;
+    }
+    if (current !== void 0 && (line.trim() === "" || line.startsWith(" ".repeat(indent)))) {
+      current.push(line.slice(indent));
+      i += 1;
+      continue;
+    }
+    break;
+  }
+  if (current) items.push(parseBlocks(current));
+  out.push({ type: "list", ordered, items });
+  return i;
+}
+function takeParagraph(lines, start, out) {
+  const body = [];
+  let i = start;
+  for (let line = lineAt(lines, i); i < lines.length; line = lineAt(lines, i)) {
+    if (line.trim() === "" || opensBlock(line)) break;
+    body.push(line.trim());
+    i += 1;
+  }
+  if (body.length === 0) return start + 1;
+  out.push({ type: "paragraph", children: parseInline(body.join(" ")) });
+  return i;
+}
+function parseBlocks(lines) {
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lineAt(lines, i);
+    const heading = HEADING.exec(line);
+    if (line.trim() === "") i += 1;
+    else if (FENCE.test(line)) i = takeFence(lines, i, out);
+    else if (heading) {
+      out.push({
+        type: "heading",
+        level: (heading[1] ?? "#").length,
+        children: parseInline(heading[2] ?? "")
+      });
+      i += 1;
+    } else if (RULE.test(line)) {
+      out.push({ type: "rule" });
+      i += 1;
+    } else if (QUOTE.test(line)) i = takeQuote(lines, i, out);
+    else if (ITEM.test(line)) i = takeList(lines, i, out);
+    else i = takeParagraph(lines, i, out);
+  }
+  return out;
+}
+function parseMarkdown(source) {
+  if (typeof source !== "string" || source.trim() === "") return [];
+  return parseBlocks(source.replace(/\r\n?/g, "\n").split("\n"));
+}
+export {
+  parseMarkdown
+};
+//# sourceMappingURL=parse.js.map

package/dist/components/Markdown/parse.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/parse.ts"],"sourcesContent":["import { parseInline } from './inline'\nimport type { MarkdownHeadingLevel, MarkdownNode } from './nodes'\n\n/**\n * The block grammar, as the six line shapes it recognises.\n *\n * Line-based rather than character-based, which is what keeps this small enough\n * to live in a design system: Markdown's blocks are decided by how a line\n * STARTS, and the interesting half — emphasis, links, code spans — is the\n * inline pass, which runs once per block.\n */\nconst FENCE = /^ {0,3}(`{3,}|~{3,})\\s*([^\\s`]*)\\s*$/\nconst HEADING = /^ {0,3}(#{1,6})\\s+(.*?)\\s*#*\\s*$/\nconst RULE = /^ {0,3}(?:-{3,}|\\*{3,}|_{3,})\\s*$/\nconst QUOTE = /^ {0,3}>\\s?(.*)$/\nconst ITEM = /^(\\s*)([-*+]|\\d{1,9}[.)])\\s+(.*)$/\n\n/**\n * A line, or the empty string past the end.\n *\n * `noUncheckedIndexedAccess` is on, and every scanner below walks off the end\n * of the array by construction — reading one line ahead is how a list decides\n * whether a blank line ended it. An empty string matches none of the patterns,\n * which is exactly the answer wanted there.\n */\nconst lineAt = (lines: string[], index: number): string => lines[index] ?? ''\n\nconst opensBlock = (line: string): boolean =>\n  HEADING.test(line) || RULE.test(line) || FENCE.test(line) || QUOTE.test(line) || ITEM.test(line)\n\n/** A fence closes on the same character, at the same length or longer. */\nconst closesFence = (line: string, marker: string): boolean =>\n  new RegExp(`^ {0,3}${marker.charAt(0)}{${marker.length},}\\\\s*$`).test(line)\n\nfunction takeFence(lines: string[], start: number, out: MarkdownNode[]): number {\n  const fence = FENCE.exec(lineAt(lines, start))\n  if (!fence) return start + 1\n  const [, marker = '', info = ''] = fence\n\n  const body: string[] = []\n  let i = start + 1\n  while (i < lines.length && !closesFence(lineAt(lines, i), marker)) {\n    body.push(lineAt(lines, i))\n    i += 1\n  }\n  out.push({ type: 'code', value: body.join('\\n'), lang: info || undefined })\n\n  // An unclosed fence runs to the end of the document rather than throwing.\n  // That is what CommonMark specifies, and it is also the exact shape of a\n  // model's answer that hit its token limit mid-snippet.\n  return i < lines.length ? i + 1 : i\n}\n\nfunction takeQuote(lines: string[], start: number, out: MarkdownNode[]): number {\n  const body: string[] = []\n  let i = start\n  while (i < lines.length) {\n    const quoted = QUOTE.exec(lineAt(lines, i))\n    if (!quoted) break\n    body.push(quoted[1] ?? '')\n    i += 1\n  }\n  // Recursive, so a list, a fence or a nested quote inside a blockquote is the\n  // same code path rather than five more cases.\n  out.push({ type: 'quote', children: parseBlocks(body) })\n  return i\n}\n\nfunction takeList(lines: string[], start: number, out: MarkdownNode[]): number {\n  const first = ITEM.exec(lineAt(lines, start))\n  if (!first) return start + 1\n\n  const baseIndent = (first[1] ?? '').length\n  const ordered = /\\d/.test(first[2] ?? '')\n  const items: MarkdownNode[][] = []\n  let current: string[] | undefined\n  let indent = 0\n  let i = start\n\n  while (i < lines.length) {\n    const line = lineAt(lines, i)\n    const item = ITEM.exec(line)\n    const [, gap = '', bullet = '', rest = ''] = item ?? []\n\n    if (item && gap.length <= baseIndent) {\n      // A bullet directly under a number is a second list, not a stray item.\n      if (ordered !== /\\d/.test(bullet)) break\n      if (current) items.push(parseBlocks(current))\n      indent = gap.length + bullet.length + 1\n      current = [rest]\n      i += 1\n      continue\n    }\n    if (current !== undefined && (line.trim() === '' || line.startsWith(' '.repeat(indent)))) {\n      current.push(line.slice(indent))\n      i += 1\n      continue\n    }\n    break\n  }\n\n  if (current) items.push(parseBlocks(current))\n  out.push({ type: 'list', ordered, items })\n  return i\n}\n\nfunction takeParagraph(lines: string[], start: number, out: MarkdownNode[]): number {\n  const body: string[] = []\n  let i = start\n  for (let line = lineAt(lines, i); i < lines.length; line = lineAt(lines, i)) {\n    if (line.trim() === '' || opensBlock(line)) break\n    body.push(line.trim())\n    i += 1\n  }\n  if (body.length === 0) return start + 1\n\n  // Soft line breaks join with a space, which is what Markdown means by them:\n  // a paragraph hard-wrapped at 80 columns is one paragraph.\n  out.push({ type: 'paragraph', children: parseInline(body.join(' ')) })\n  return i\n}\n\nfunction parseBlocks(lines: string[]): MarkdownNode[] {\n  const out: MarkdownNode[] = []\n  let i = 0\n  while (i < lines.length) {\n    const line = lineAt(lines, i)\n    const heading = HEADING.exec(line)\n\n    if (line.trim() === '') i += 1\n    else if (FENCE.test(line)) i = takeFence(lines, i, out)\n    else if (heading) {\n      out.push({\n        type: 'heading',\n        level: (heading[1] ?? '#').length as MarkdownHeadingLevel,\n        children: parseInline(heading[2] ?? ''),\n      })\n      i += 1\n    } else if (RULE.test(line)) {\n      out.push({ type: 'rule' })\n      i += 1\n    } else if (QUOTE.test(line)) i = takeQuote(lines, i, out)\n    else if (ITEM.test(line)) i = takeList(lines, i, out)\n    else i = takeParagraph(lines, i, out)\n  }\n  return out\n}\n\n/**\n * A Markdown string, as nodes.\n *\n * The supported subset, stated so nobody has to find its edges by experiment:\n * ATX headings, paragraphs, fenced code with an info string, blockquotes,\n * ordered and unordered lists including nesting, thematic breaks — and inline\n * emphasis, strong, code spans, links, images and backslash escapes.\n *\n * What is NOT here, and is deliberate: tables, footnotes, task lists, setext\n * headings, reference links, hard line breaks, and raw HTML. Raw HTML is the\n * one that matters — it is left as text rather than rendered, so this path has\n * no `dangerouslySetInnerHTML` anywhere in it and cannot be talked into one. A\n * document that needs the rest brings its own parser through `Markdown`'s\n * `parse` prop.\n *\n * Never throws. Malformed input is not an error condition here — it is Tuesday\n * — so an unterminated fence, a stray bracket or an empty string each produce\n * the nodes they can and no more.\n */\nexport function parseMarkdown(source: string): MarkdownNode[] {\n  if (typeof source !== 'string' || source.trim() === '') return []\n  return parseBlocks(source.replace(/\\r\\n?/g, '\\n').split('\\n'))\n}\n"],"mappings":"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","names":[]}

package/dist/components/Markdown/slug.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A heading's text, as an anchor id.
+ *
+ * Exported because a table of contents has to arrive at the SAME id the
+ * rendered heading got, and the alternative is building the list by reading it
+ * back off the DOM — which a server render does not have.
+ *
+ * Letters and numbers survive in any script (`\p{L}`, not `a-z`), so a Chinese
+ * or Greek heading keeps its characters instead of slugging away to nothing and
+ * colliding with every other one on the page. `Markdown` deduplicates what does
+ * collide by appending `-2`, `-3`, and so on in document order.
+ */
+declare function slugify(text: string): string;
+
+export { slugify };

package/dist/components/Markdown/slug.js

@@ -0,0 +1,7 @@
+function slugify(text) {
+  return text.trim().toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+}
+export {
+  slugify
+};
+//# sourceMappingURL=slug.js.map

package/dist/components/Markdown/slug.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Markdown/slug.ts"],"sourcesContent":["/**\n * A heading's text, as an anchor id.\n *\n * Exported because a table of contents has to arrive at the SAME id the\n * rendered heading got, and the alternative is building the list by reading it\n * back off the DOM — which a server render does not have.\n *\n * Letters and numbers survive in any script (`\\p{L}`, not `a-z`), so a Chinese\n * or Greek heading keeps its characters instead of slugging away to nothing and\n * colliding with every other one on the page. `Markdown` deduplicates what does\n * collide by appending `-2`, `-3`, and so on in document order.\n */\nexport function slugify(text: string): string {\n  return text\n    .trim()\n    .toLowerCase()\n    .replace(/[^\\p{L}\\p{N}]+/gu, '-')\n    .replace(/^-+|-+$/g, '')\n}\n"],"mappings":"AAYO,SAAS,QAAQ,MAAsB;AAC5C,SAAO,KACJ,KAAK,EACL,YAAY,EACZ,QAAQ,oBAAoB,GAAG,EAC/B,QAAQ,YAAY,EAAE;AAC3B;","names":[]}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -19,6 +19,12 @@ interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  * list is drawn by the operating system, so it carries none of these tokens —
  * which is exactly why it stopped being the default.
  *
+ * `className` sizes the WRAPPER, not the `<select>` inside it. This is the one
+ * control here that renders two elements, and the chevron is pinned to the
+ * wrapper's end edge: a width on the select alone narrowed the box and left the
+ * arrow floating at the far side of the row. The select fills whatever the
+ * wrapper is.
+ *
  * @example
  * <NativeSelect defaultValue="au"><option value="au">Australia</option></NativeSelect>
  */

package/dist/components/NativeSelect/NativeSelect.js

@@ -11,7 +11,7 @@ function NativeSelect({
   ...rest
 }) {
   const bad = isInvalid(invalid, ariaInvalid);
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsx(
       "select",
       {
@@ -20,8 +20,7 @@ function NativeSelect({
         className: cn(
           CONTROL_BASE,
           "cursor-pointer appearance-none pe-9",
-          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
-          className
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting
         ),
         ...rest,
         children

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport type { Ref, SelectHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLSelectElement>\n}\n\n/**\n * A native `<select>`, restyled.\n *\n * The escape hatch, not the default — `Select` is the styled one. Reach for\n * this where the platform's own picker is genuinely better: a very long list on\n * a phone, a form that must work without JavaScript, a page where the last\n * kilobyte matters. The browser gives typeahead and the mobile wheel for free,\n * and those are real.\n *\n * What it cannot do is look like the rest of the system once open. The option\n * list is drawn by the operating system, so it carries none of these tokens —\n * which is exactly why it stopped being the default.\n *\n * @example\n * <NativeSelect defaultValue=\"au\"><option value=\"au\">Australia</option></NativeSelect>\n */\nexport function NativeSelect({\n  invalid,\n  className,\n  ref,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NativeSelectProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <div className=\"relative\">\n      <select\n        ref={ref}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        className={cn(\n          CONTROL_BASE,\n          'cursor-pointer appearance-none pe-9',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        size={16}\n        strokeWidth={1.5}\n        className=\"pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)\"\n        aria-hidden\n      />\n    </div>\n  )\n}\n\nexport default NativeSelect\n"],"mappings":"AAqCI,SACE,KADF;AArCJ,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AAwBjD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,QAC/C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,aAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport type { Ref, SelectHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLSelectElement>\n}\n\n/**\n * A native `<select>`, restyled.\n *\n * The escape hatch, not the default — `Select` is the styled one. Reach for\n * this where the platform's own picker is genuinely better: a very long list on\n * a phone, a form that must work without JavaScript, a page where the last\n * kilobyte matters. The browser gives typeahead and the mobile wheel for free,\n * and those are real.\n *\n * What it cannot do is look like the rest of the system once open. The option\n * list is drawn by the operating system, so it carries none of these tokens —\n * which is exactly why it stopped being the default.\n *\n * `className` sizes the WRAPPER, not the `<select>` inside it. This is the one\n * control here that renders two elements, and the chevron is pinned to the\n * wrapper's end edge: a width on the select alone narrowed the box and left the\n * arrow floating at the far side of the row. The select fills whatever the\n * wrapper is.\n *\n * @example\n * <NativeSelect defaultValue=\"au\"><option value=\"au\">Australia</option></NativeSelect>\n */\nexport function NativeSelect({\n  invalid,\n  className,\n  ref,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NativeSelectProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <div className={cn('relative', className)}>\n      <select\n        ref={ref}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        className={cn(\n          CONTROL_BASE,\n          'cursor-pointer appearance-none pe-9',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n        )}\n        {...rest}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        size={16}\n        strokeWidth={1.5}\n        className=\"pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)\"\n        aria-hidden\n      />\n    </div>\n  )\n}\n\nexport default NativeSelect\n"],"mappings":"AA2CI,SACE,KADF;AA3CJ,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AA8BjD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,QAC/C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,QAChD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,aAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/components/Pagination/Pagination.d.ts

@@ -10,6 +10,24 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'>
     /** How many numbered pages sit either side of the current one. */
     siblings?: number;
     label?: string;
+    /**
+     * Names the two step controls.
+     *
+     * Each is a chevron and nothing else, so these strings are its entire
+     * accessible name — the same reason `AppShell` exposes `openLabel` and
+     * `closeLabel` rather than baking them in.
+     */
+    previousLabel?: string;
+    nextLabel?: string;
+    /**
+     * Names one numbered page.
+     *
+     * A function rather than a template, because the number does not sit in the
+     * same place in every language and neither does the noun around it —
+     * `"Page 3"`, `"第 3 页"`, `"Seite 3"`. The visible digit is the same either
+     * way; this is what a screen reader hears instead of a bare number.
+     */
+    pageLabel?: (page: number) => string;
 }
 declare const GAP: "\u2026";
 /**
@@ -36,9 +54,14 @@ declare function paginationRange(page: number, pageCount: number, siblings?: num
  *
  * Renders nothing at one page or fewer. A pager for a single page is furniture.
  *
+ * Every string a reader hears is a prop. The chevrons carry no text, so
+ * `previousLabel` and `nextLabel` are the whole of those two controls' names,
+ * and `pageLabel` is a function because "Page 3" is a phrase whose parts move
+ * around between languages.
+ *
  * @example
  * <Pagination page={page} pageCount={12} onPageChange={setPage} />
  */
-declare function Pagination({ page, pageCount, onPageChange, siblings, label, className, ...rest }: PaginationProps): react.JSX.Element | null;
+declare function Pagination({ page, pageCount, onPageChange, siblings, label, previousLabel, nextLabel, pageLabel, className, ...rest }: PaginationProps): react.JSX.Element | null;
 
 export { Pagination, type PaginationProps, Pagination as default, paginationRange };

package/dist/components/Pagination/Pagination.js

@@ -34,6 +34,9 @@ function Pagination({
   onPageChange,
   siblings = 1,
   label = "Pagination",
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  pageLabel = (page2) => `Page ${page2}`,
   className,
   ...rest
 }) {
@@ -45,7 +48,7 @@ function Pagination({
       "button",
       {
         type: "button",
-        "aria-label": "Previous page",
+        "aria-label": previousLabel,
         disabled: page <= 1,
         onClick: () => onPageChange(page - 1),
         className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),
@@ -74,7 +77,7 @@ function Pagination({
           {
             type: "button",
             "aria-current": entry === page ? "page" : void 0,
-            "aria-label": `Page ${entry}`,
+            "aria-label": pageLabel(entry),
             "data-indicator-active": entry === page ? "true" : void 0,
             onClick: () => onPageChange(entry),
             className: cn(
@@ -91,7 +94,7 @@ function Pagination({
       "button",
       {
         type: "button",
-        "aria-label": "Next page",
+        "aria-label": nextLabel,
         disabled: page >= pageCount,
         onClick: () => onPageChange(page + 1),
         className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label=\"Previous page\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronLeft size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-m22-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={`Page ${entry}`}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label=\"Next page\"\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronRight size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n  /**\n   * Names the two step controls.\n   *\n   * Each is a chevron and nothing else, so these strings are its entire\n   * accessible name — the same reason `AppShell` exposes `openLabel` and\n   * `closeLabel` rather than baking them in.\n   */\n  previousLabel?: string\n  nextLabel?: string\n  /**\n   * Names one numbered page.\n   *\n   * A function rather than a template, because the number does not sit in the\n   * same place in every language and neither does the noun around it —\n   * `\"Page 3\"`, `\"第 3 页\"`, `\"Seite 3\"`. The visible digit is the same either\n   * way; this is what a screen reader hears instead of a bare number.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * Every string a reader hears is a prop. The chevrons carry no text, so\n * `previousLabel` and `nextLabel` are the whole of those two controls' names,\n * and `pageLabel` is a function because \"Page 3\" is a phrase whose parts move\n * around between languages.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  previousLabel = 'Previous page',\n  nextLabel = 'Next page',\n  pageLabel = (page) => `Page ${page}`,\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronLeft size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-m22-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={pageLabel(entry)}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronRight size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":["page"]}

package/dist/components/Progress/Progress.d.ts

@@ -2,13 +2,25 @@ import * as react from 'react';
 import { ComponentProps } from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {
+interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value' | 'max'> {
     /**
-     * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the
-     * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a
-     * screen reader is told "indeterminate" rather than a number that is a guess.
+     * 0 to `max`, which is 100 unless you say otherwise. Omit (or pass `null`)
+     * when the duration is genuinely unknown — the bar then sweeps instead of
+     * filling, and Radix drops `aria-valuenow` so a screen reader is told
+     * "indeterminate" rather than a number that is a guess.
      */
     value?: number | null;
+    /**
+     * What `value` is measured against. 100 by default.
+     *
+     * The width is computed from it as well as announced from it. It used to be
+     * only announced: `max` reached Radix through `...rest` while the width was
+     * `value` clamped to 100, so `max={500}` with `value={100}` painted a full
+     * bar and told a screen reader "100 of 500". A max that is not a positive
+     * number is refused the way Radix refuses it — Radix warns, and both fall
+     * back to 100 rather than drawing one picture and announcing another.
+     */
+    max?: number;
     /** Names what is progressing. Required: a bare bar announces nothing. */
     label: string;
     /** Prints the percentage above the bar. Only meaningful when `value` is set. */
@@ -26,6 +38,6 @@ interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Roo
  * @example
  * <Progress label="Indexing" />
  */
-declare function Progress({ value, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
+declare function Progress({ value, max, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
 
 export { Progress, type ProgressProps, Progress as default };

package/dist/components/Progress/Progress.js

@@ -2,21 +2,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../../lib/cn.js";
-function Progress({ value = null, label, showValue = false, className, ...rest }) {
+import { warnBlankName } from "../../lib/warn.js";
+function Progress({
+  value = null,
+  max,
+  label,
+  showValue = false,
+  className,
+  ...rest
+}) {
+  warnBlankName("Progress", "label", label, "the progressbar is announced with no name and its percentage describes nothing");
   const indeterminate = value === null || value === void 0;
-  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value));
+  const ceiling = typeof max === "number" && !Number.isNaN(max) && max > 0 ? max : 100;
+  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value));
+  const percent = bounded / ceiling * 100;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
     showValue && !indeterminate && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
       /* @__PURE__ */ jsx("span", { children: label }),
       /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
-        Math.round(clamped),
+        Math.round(percent),
         "%"
       ] })
     ] }),
     /* @__PURE__ */ jsx(
       ProgressPrimitive.Root,
       {
-        value: indeterminate ? null : clamped,
+        value: indeterminate ? null : bounded,
+        max,
         "aria-label": label,
         className: "relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)",
         ...rest,
@@ -24,13 +36,13 @@ function Progress({ value = null, label, showValue = false, className, ...rest }
           "span",
           {
             "data-m22-animated": true,
-            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40"
+            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite]"
           }
         ) : /* @__PURE__ */ jsx(
           ProgressPrimitive.Indicator,
           {
             className: "h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)",
-            style: { width: `${clamped}%` }
+            style: { width: `${percent}%` }
           }
         )
       }

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /**\n   * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the\n   * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a\n   * screen reader is told \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /** Names what is progressing. Required: a bare bar announces nothing. */\n  label: string\n  /** Prints the percentage above the bar. Only meaningful when `value` is set. */\n  showValue?: boolean\n}\n\n/**\n * A bar that fills, or sweeps when the end is unknown.\n *\n * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no\n * gradient and no glow, so the only thing carrying the reading is the boundary\n * between the two.\n *\n * @example\n * <Progress value={62} label=\"Uploading photos\" showValue />\n * @example\n * <Progress label=\"Indexing\" />\n */\nexport function Progress({ value = null, label, showValue = false, className, ...rest }: ProgressProps) {\n  const indeterminate = value === null || value === undefined\n  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value))\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {showValue && !indeterminate && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{label}</span>\n          <span className=\"tabular-nums\">{Math.round(clamped)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : clamped}\n        aria-label={label}\n        className=\"relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)\"\n        {...rest}\n      >\n        {indeterminate ? (\n          <span\n            data-m22-animated\n            // A quarter-width bar travelling the track. `transform` only, so it\n            // runs on the compositor and never triggers layout. `rtl:-scale-x-100`\n            // mirrors the whole motion rather than needing a second keyframe:\n            // in a right-to-left document the sweep has to run the other way, or\n            // it reads as progress running backwards.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40\"\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            // Width, not a translate. A `translateX(-N%)` fill has to be negated\n            // in a right-to-left document, and an inline style cannot carry a\n            // direction variant — so the bar grew from the wrong edge. Width\n            // grows from the inline start on its own, in either direction.\n            className=\"h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)\"\n            style={{ width: `${clamped}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAwCU,cACA,YADA;AAtCV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AA4BZ,SAAS,SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,KAAK,GAAkB;AACtG,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAClD,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AAEpE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBAAa,CAAC,iBACb,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACb,qBAAC,UAAK,WAAU,gBAAgB;AAAA,aAAK,MAAM,OAAO;AAAA,QAAE;AAAA,SAAC;AAAA,OACvD;AAAA,IAEF;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,gBAAgB,OAAO;AAAA,QAC9B,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YAMjB,WAAU;AAAA;AAAA,QACZ,IAEA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YAKC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA;AAAA,QAChC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value' | 'max'> {\n  /**\n   * 0 to `max`, which is 100 unless you say otherwise. Omit (or pass `null`)\n   * when the duration is genuinely unknown — the bar then sweeps instead of\n   * filling, and Radix drops `aria-valuenow` so a screen reader is told\n   * \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /**\n   * What `value` is measured against. 100 by default.\n   *\n   * The width is computed from it as well as announced from it. It used to be\n   * only announced: `max` reached Radix through `...rest` while the width was\n   * `value` clamped to 100, so `max={500}` with `value={100}` painted a full\n   * bar and told a screen reader \"100 of 500\". A max that is not a positive\n   * number is refused the way Radix refuses it — Radix warns, and both fall\n   * back to 100 rather than drawing one picture and announcing another.\n   */\n  max?: number\n  /** Names what is progressing. Required: a bare bar announces nothing. */\n  label: string\n  /** Prints the percentage above the bar. Only meaningful when `value` is set. */\n  showValue?: boolean\n}\n\n/**\n * A bar that fills, or sweeps when the end is unknown.\n *\n * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no\n * gradient and no glow, so the only thing carrying the reading is the boundary\n * between the two.\n *\n * @example\n * <Progress value={62} label=\"Uploading photos\" showValue />\n * @example\n * <Progress label=\"Indexing\" />\n */\nexport function Progress({\n  value = null,\n  max,\n  label,\n  showValue = false,\n  className,\n  ...rest\n}: ProgressProps) {\n  warnBlankName('Progress', 'label', label, 'the progressbar is announced with no name and its percentage describes nothing')\n  const indeterminate = value === null || value === undefined\n  // Radix's own test for a usable max, so the fallback below is the same\n  // fallback it applies — and `max` is forwarded raw, so Radix still prints the\n  // warning rather than this component swallowing a bad prop quietly.\n  const ceiling = typeof max === 'number' && !Number.isNaN(max) && max > 0 ? max : 100\n  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value))\n  const percent = (bounded / ceiling) * 100\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {showValue && !indeterminate && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{label}</span>\n          <span className=\"tabular-nums\">{Math.round(percent)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : bounded}\n        max={max}\n        aria-label={label}\n        className=\"relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)\"\n        {...rest}\n      >\n        {indeterminate ? (\n          <span\n            data-m22-animated\n            // A quarter-width bar travelling the track. `transform` only, so it\n            // runs on the compositor and never triggers layout. `rtl:-scale-x-100`\n            // mirrors the whole motion rather than needing a second keyframe:\n            // in a right-to-left document the sweep has to run the other way, or\n            // it reads as progress running backwards.\n            //\n            // Nothing overrides it under `motion-reduce`, and that is the fix\n            // rather than an omission: it used to become `w-full` at 40%\n            // opacity, which is the shape of a FINISHED bar at rest, so a\n            // reader who asked for less motion was told the operation was done.\n            // Still, it is a quarter of the track at the inline start — the\n            // same answer Spinner gives, where a ring that has stopped turning\n            // still reads as unfinished because it is not a whole circle.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite]\"\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            // Width, not a translate. A `translateX(-N%)` fill has to be negated\n            // in a right-to-left document, and an inline style cannot carry a\n            // direction variant — so the bar grew from the wrong edge. Width\n            // grows from the inline start on its own, in either direction.\n            className=\"h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)\"\n            style={{ width: `${percent}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAkEU,cACA,YADA;AAhEV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAwCvB,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,gBAAc,YAAY,SAAS,OAAO,gFAAgF;AAC1H,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAIlD,QAAM,UAAU,OAAO,QAAQ,YAAY,CAAC,OAAO,MAAM,GAAG,KAAK,MAAM,IAAI,MAAM;AACjF,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC;AACxE,QAAM,UAAW,UAAU,UAAW;AAEtC,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBAAa,CAAC,iBACb,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACb,qBAAC,UAAK,WAAU,gBAAgB;AAAA,aAAK,MAAM,OAAO;AAAA,QAAE;AAAA,SAAC;AAAA,OACvD;AAAA,IAEF;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,gBAAgB,OAAO;AAAA,QAC9B;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YAcjB,WAAU;AAAA;AAAA,QACZ,IAEA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YAKC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA;AAAA,QAChC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -11,6 +11,12 @@ type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
  * requires and what a stack of hand-rolled `<input type="radio">` wrappers
  * usually gets wrong.
  *
+ * Inside a `Field` the group takes its name from that label, by pointing back
+ * at it: the root is a `<div role="radiogroup">` and `<label for>` does not bind
+ * to one, so the words above it click through no more than a `<legend>` does.
+ * Standing alone, it still needs an `aria-label` of its own — an unnamed group
+ * is three unlabelled radios.
+ *
  * @example
  * <RadioGroup defaultValue="light" aria-label="Theme">
  *   <RadioGroupItem value="light">Light</RadioGroupItem>

package/dist/components/RadioGroup/RadioGroup.js

@@ -3,9 +3,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { useEffect, useRef } from "react";
 import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../Field/field-control.js";
 const ARROW_GRACE_MS = 300;
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("flex flex-col gap-2.5", className), ...props });
+  const field = useFieldControl();
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "aria-labelledby": named ? void 0 : field?.labelId,
+      className: cn("flex flex-col gap-2.5", className),
+      ...props
+    }
+  );
 }
 function RadioGroupItem({ children, className, id, onFocus, ...props }) {
   const arrowPressedAt = useRef(0);

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { useEffect, useRef, type ComponentProps, type FocusEvent, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * How recently an arrow key was pressed, in milliseconds, for selection to\n * still count as \"caused by\" it.\n *\n * A boolean cleared on `keyup` — which is how the upstream primitive tracks\n * this — loses the race: the roving focus moves through a React state update,\n * and by the time the commit lands and the element takes focus, a normal\n * keypress has already released. The result is a group whose arrow keys move\n * the outline and select nothing, which is half the ARIA radiogroup pattern\n * missing. A timestamp cannot be cleared out from under the focus handler.\n */\nconst ARROW_GRACE_MS = 300\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>\n\n/**\n * A set of mutually exclusive choices.\n *\n * Radix owns the roving tabindex, so the whole group is ONE tab stop and the\n * arrow keys move between options — which is what the ARIA radiogroup pattern\n * requires and what a stack of hand-rolled `<input type=\"radio\">` wrappers\n * usually gets wrong.\n *\n * @example\n * <RadioGroup defaultValue=\"light\" aria-label=\"Theme\">\n *   <RadioGroupItem value=\"light\">Light</RadioGroupItem>\n *   <RadioGroupItem value=\"dark\">Dark</RadioGroupItem>\n * </RadioGroup>\n */\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive.Root className={cn('flex flex-col gap-2.5', className)} {...props} />\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {\n  /** The visible label. Rendered inside the `<label>` that wraps the control. */\n  children: ReactNode\n}\n\n/**\n * One option, and its label, as a single click target.\n *\n * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle\n * is below every pointer-target guideline and is miserable on a phone. It is\n * also what gives the control its accessible name: remove the wrapper and the\n * radio has no name at all.\n *\n * Selection follows focus, which is the half of the pattern that makes a\n * radiogroup usable from the keyboard: moving to an option chooses it, so\n * nobody has to press an extra key to commit. That is implemented here rather\n * than inherited, because the upstream primitive gates it on a flag cleared by\n * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.\n * Re-selecting an already-selected option is a no-op, so this stays correct\n * even where the upstream path does fire.\n */\nexport function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps) {\n  const arrowPressedAt = useRef(0)\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.startsWith('Arrow')) arrowPressedAt.current = Date.now()\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n  }, [])\n\n  const selectOnArrowFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event)\n    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click()\n  }\n\n  return (\n    <label className={cn('flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)', className)}>\n      <RadioGroupPrimitive.Item\n        id={id}\n        onFocus={selectOnArrowFocus}\n        className=\"grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"size-2.5 rounded-full bg-(--accent)\" />\n      </RadioGroupPrimitive.Item>\n      {children}\n    </label>\n  )\n}\n\nexport default RadioGroup\n"],"mappings":";AAoCS,cA0CL,YA1CK;AAlCT,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AAanB,MAAM,iBAAiB;AAkBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAAO;AACjG;AAwBO,SAAS,eAAe,EAAE,UAAU,WAAW,IAAI,SAAS,GAAG,MAAM,GAAwB;AAClG,QAAM,iBAAiB,OAAO,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,IAAI,WAAW,OAAO,EAAG,gBAAe,UAAU,KAAK,IAAI;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,CAAC,UAAyC;AACnE,cAAU,KAAK;AACf,QAAI,KAAK,IAAI,IAAI,eAAe,UAAU,eAAgB,OAAM,cAAc,MAAM;AAAA,EACtF;AAEA,SACE,qBAAC,WAAM,WAAW,GAAG,mEAAmE,SAAS,GAC/F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,uCAAsC;AAAA;AAAA,IACjF;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { useEffect, useRef, type ComponentProps, type FocusEvent, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\n\n/**\n * How recently an arrow key was pressed, in milliseconds, for selection to\n * still count as \"caused by\" it.\n *\n * A boolean cleared on `keyup` — which is how the upstream primitive tracks\n * this — loses the race: the roving focus moves through a React state update,\n * and by the time the commit lands and the element takes focus, a normal\n * keypress has already released. The result is a group whose arrow keys move\n * the outline and select nothing, which is half the ARIA radiogroup pattern\n * missing. A timestamp cannot be cleared out from under the focus handler.\n */\nconst ARROW_GRACE_MS = 300\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>\n\n/**\n * A set of mutually exclusive choices.\n *\n * Radix owns the roving tabindex, so the whole group is ONE tab stop and the\n * arrow keys move between options — which is what the ARIA radiogroup pattern\n * requires and what a stack of hand-rolled `<input type=\"radio\">` wrappers\n * usually gets wrong.\n *\n * Inside a `Field` the group takes its name from that label, by pointing back\n * at it: the root is a `<div role=\"radiogroup\">` and `<label for>` does not bind\n * to one, so the words above it click through no more than a `<legend>` does.\n * Standing alone, it still needs an `aria-label` of its own — an unnamed group\n * is three unlabelled radios.\n *\n * @example\n * <RadioGroup defaultValue=\"light\" aria-label=\"Theme\">\n *   <RadioGroupItem value=\"light\">Light</RadioGroupItem>\n *   <RadioGroupItem value=\"dark\">Dark</RadioGroupItem>\n * </RadioGroup>\n */\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  return (\n    <RadioGroupPrimitive.Root\n      aria-labelledby={named ? undefined : field?.labelId}\n      className={cn('flex flex-col gap-2.5', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {\n  /** The visible label. Rendered inside the `<label>` that wraps the control. */\n  children: ReactNode\n}\n\n/**\n * One option, and its label, as a single click target.\n *\n * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle\n * is below every pointer-target guideline and is miserable on a phone. It is\n * also what gives the control its accessible name: remove the wrapper and the\n * radio has no name at all.\n *\n * Selection follows focus, which is the half of the pattern that makes a\n * radiogroup usable from the keyboard: moving to an option chooses it, so\n * nobody has to press an extra key to commit. That is implemented here rather\n * than inherited, because the upstream primitive gates it on a flag cleared by\n * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.\n * Re-selecting an already-selected option is a no-op, so this stays correct\n * even where the upstream path does fire.\n */\nexport function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps) {\n  const arrowPressedAt = useRef(0)\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.startsWith('Arrow')) arrowPressedAt.current = Date.now()\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n  }, [])\n\n  const selectOnArrowFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event)\n    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click()\n  }\n\n  return (\n    <label className={cn('flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)', className)}>\n      <RadioGroupPrimitive.Item\n        id={id}\n        onFocus={selectOnArrowFocus}\n        className=\"grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"size-2.5 rounded-full bg-(--accent)\" />\n      </RadioGroupPrimitive.Item>\n      {children}\n    </label>\n  )\n}\n\nexport default RadioGroup\n"],"mappings":";AA+CI,cA+CA,YA/CA;AA7CJ,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAahC,MAAM,iBAAiB;AAwBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAEzE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAC5C,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAwBO,SAAS,eAAe,EAAE,UAAU,WAAW,IAAI,SAAS,GAAG,MAAM,GAAwB;AAClG,QAAM,iBAAiB,OAAO,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,IAAI,WAAW,OAAO,EAAG,gBAAe,UAAU,KAAK,IAAI;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,CAAC,UAAyC;AACnE,cAAU,KAAK;AACf,QAAI,KAAK,IAAI,IAAI,eAAe,UAAU,eAAgB,OAAM,cAAc,MAAM;AAAA,EACtF;AAEA,SACE,qBAAC,WAAM,WAAW,GAAG,mEAAmE,SAAS,GAC/F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,uCAAsC;AAAA;AAAA,IACjF;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}