@misoto22/design 0.3.1

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,98 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { DateRange } from 'react-day-picker';
+export { DateRange } from 'react-day-picker';
+import { Calendar } from '../Calendar/Calendar.js';
+
+/** A named shortcut in the rail beside the calendar. */
+interface DatePreset<T> {
+    label: string;
+    /** Computed when clicked, not when rendered — "today" must mean today. */
+    value: () => T;
+}
+/**
+ * The shortcuts a range picker is asked for on nearly every screen it appears
+ * on, so they ship rather than being rebuilt per dashboard.
+ *
+ * Computed on click: a preset list built at render time freezes "today" at
+ * whenever the page loaded, which is wrong for anything left open overnight.
+ */
+declare const RANGE_PRESETS: DatePreset<DateRange>[];
+/** The single-date equivalent. */
+declare const DATE_PRESETS: DatePreset<Date>[];
+interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (value: Date | undefined) => void;
+    /** Names the control. Required — the trigger's text is a value, not a label. */
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Days the reader may not choose. Passed straight to the calendar. */
+    disabledDates?: ComponentProps<typeof Calendar>['disabled'];
+    /** How the chosen date is printed on the trigger. */
+    format?: (date: Date) => string;
+    /**
+     * Shortcuts shown beside the grid. Pass `true` for the built-in set, an array
+     * for your own, or leave it off for none.
+     */
+    presets?: boolean | DatePreset<Date>[];
+    className?: string;
+}
+/**
+ * A date, chosen from a calendar.
+ *
+ * A trigger and a `Calendar` in a `Popover` — not a new component so much as
+ * the composition people otherwise assemble slightly differently on every
+ * screen.
+ *
+ * It is deliberately NOT a text input with a calendar attached. A typed date
+ * needs parsing, and parsing needs a format, and a format is a locale argument
+ * nobody wins. When typing genuinely matters — a birth date, a long way back —
+ * the calendar's month and year are dropdowns, which is the same journey
+ * without the ambiguity.
+ *
+ * @example
+ * <Field label="Publish on"><DatePicker label="Publish on" /></Field>
+ */
+declare function DatePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, format, presets, className, }: DatePickerProps): react.JSX.Element;
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledDates?: ComponentProps<typeof Calendar>['disabled'];
+    /** How many months are shown side by side. Falls back to one under `sm`. */
+    months?: number;
+    format?: (date: Date) => string;
+    /**
+     * Shortcuts shown beside the grid — Last 30 days and its neighbours. `true`
+     * for the built-in set, an array for your own.
+     *
+     * On by default here and off on the single picker, because "last 30 days" is
+     * most of what a range picker is ever asked for, while a single date is
+     * usually a specific one.
+     */
+    presets?: boolean | DatePreset<DateRange>[];
+    className?: string;
+}
+/**
+ * A span of dates — a stay, a reporting period, a filter.
+ *
+ * Two months side by side, because a range that crosses a month boundary is the
+ * common case, and paging back and forth to see both ends is what makes a range
+ * picker tiring. They stack under `sm`, where two would not fit — the calendar's
+ * own `months` class already carries that, so there is nothing to override.
+ *
+ * The panel stays open until both ends are chosen: a range is not a value until
+ * it has a second date, and closing on the first one would mean re-opening to
+ * finish.
+ *
+ * @example
+ * <DateRangePicker label="Reporting period" />
+ */
+declare function DateRangePicker({ value, defaultValue, onValueChange, label, placeholder, disabled, disabledDates, months, format, presets, className, }: DateRangePickerProps): react.JSX.Element;
+
+export { DATE_PRESETS, DatePicker, type DatePickerProps, type DatePreset, DateRangePicker, type DateRangePickerProps, RANGE_PRESETS, DatePicker as default };

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarDays } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+const daysAgo = (n) => {
+  const to = /* @__PURE__ */ new Date();
+  const from = /* @__PURE__ */ new Date();
+  from.setDate(from.getDate() - (n - 1));
+  return { from, to };
+};
+const RANGE_PRESETS = [
+  { label: "Last 7 days", value: () => daysAgo(7) },
+  { label: "Last 30 days", value: () => daysAgo(30) },
+  { label: "Last 90 days", value: () => daysAgo(90) },
+  { label: "Last 12 months", value: () => daysAgo(365) },
+  {
+    label: "Month to date",
+    value: () => {
+      const to = /* @__PURE__ */ new Date();
+      return { from: new Date(to.getFullYear(), to.getMonth(), 1), to };
+    }
+  },
+  {
+    label: "Year to date",
+    value: () => {
+      const to = /* @__PURE__ */ new Date();
+      return { from: new Date(to.getFullYear(), 0, 1), to };
+    }
+  }
+];
+const DATE_PRESETS = [
+  { label: "Today", value: () => /* @__PURE__ */ new Date() },
+  {
+    label: "Tomorrow",
+    value: () => {
+      const date = /* @__PURE__ */ new Date();
+      date.setDate(date.getDate() + 1);
+      return date;
+    }
+  },
+  {
+    label: "In a week",
+    value: () => {
+      const date = /* @__PURE__ */ new Date();
+      date.setDate(date.getDate() + 7);
+      return date;
+    }
+  },
+  {
+    label: "In a month",
+    value: () => {
+      const date = /* @__PURE__ */ new Date();
+      date.setMonth(date.getMonth() + 1);
+      return date;
+    }
+  }
+];
+function PresetRail({
+  presets,
+  onPick,
+  label
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: "flex shrink-0 flex-col gap-0.5 border-b border-(--rule) p-2 sm:border-b-0 sm:border-e max-sm:flex-row max-sm:flex-wrap",
+      children: presets.map((preset) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPick(preset.value()),
+          className: "rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+          children: preset.label
+        },
+        preset.label
+      ))
+    }
+  );
+}
+const TRIGGER = "flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+const formatDate = (date) => new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(date);
+function DatePicker({
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  placeholder = "Pick a date",
+  disabled = false,
+  disabledDates,
+  format = formatDate,
+  presets,
+  className
+}) {
+  const rail = presets === true ? DATE_PRESETS : presets || void 0;
+  const [open, setOpen] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const choose = (next) => {
+    if (value === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+    if (next) setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        "aria-label": label,
+        disabled,
+        className: cn(TRIGGER, current ? "text-(--ink)" : "text-(--ink-3-aa)", className),
+        children: [
+          current ? format(current) : placeholder,
+          /* @__PURE__ */ jsx(CalendarDays, { size: 14, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { label, align: "start", className: "w-auto overflow-hidden p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+      rail && /* @__PURE__ */ jsx(PresetRail, { presets: rail, onPick: choose, label: `${label} shortcuts` }),
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: current,
+          onSelect: choose,
+          disabled: disabledDates,
+          autoFocus: true
+        }
+      )
+    ] }) })
+  ] });
+}
+function DateRangePicker({
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  placeholder = "Pick a range",
+  disabled = false,
+  disabledDates,
+  months = 2,
+  format = formatDate,
+  presets = true,
+  className
+}) {
+  const rail = presets === true ? RANGE_PRESETS : presets || void 0;
+  const [open, setOpen] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const clicks = useRef(0);
+  const choose = (next) => {
+    clicks.current += 1;
+    if (value === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+    if (clicks.current >= 2 && next?.from && next.to) setOpen(false);
+  };
+  const setPanel = (next) => {
+    if (next) clicks.current = 0;
+    setOpen(next);
+  };
+  const complete = current?.from && current.to && current.from.getTime() !== current.to.getTime();
+  const printed = current?.from ? complete ? `${format(current.from)} \u2013 ${format(current.to)}` : `${format(current.from)} \u2013 \u2026` : placeholder;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setPanel, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        "aria-label": label,
+        disabled,
+        className: cn(TRIGGER, current?.from ? "text-(--ink)" : "text-(--ink-3-aa)", className),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: printed }),
+          /* @__PURE__ */ jsx(CalendarDays, { size: 14, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { label, align: "start", className: "w-auto overflow-hidden p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+      rail && /* @__PURE__ */ jsx(
+        PresetRail,
+        {
+          presets: rail,
+          onPick: (next) => {
+            if (value === void 0) setUncontrolled(next);
+            onValueChange?.(next);
+            setOpen(false);
+          },
+          label: `${label} shortcuts`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "range",
+          selected: current,
+          onSelect: choose,
+          disabled: disabledDates,
+          numberOfMonths: months,
+          autoFocus: true
+        }
+      )
+    ] }) })
+  ] });
+}
+var DatePicker_default = DatePicker;
+export {
+  DATE_PRESETS,
+  DatePicker,
+  DateRangePicker,
+  RANGE_PRESETS,
+  DatePicker_default as default
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarDays } from 'lucide-react'\nimport { useRef, useState, type ComponentProps } from 'react'\nimport type { DateRange } from 'react-day-picker'\nimport { cn } from '../../lib/cn'\nimport { Calendar } from '../Calendar/Calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport type { DateRange }\n\n/** A named shortcut in the rail beside the calendar. */\nexport interface DatePreset<T> {\n  label: string\n  /** Computed when clicked, not when rendered — \"today\" must mean today. */\n  value: () => T\n}\n\n/** `n` days back from today, inclusive of today. */\nconst daysAgo = (n: number): DateRange => {\n  const to = new Date()\n  const from = new Date()\n  from.setDate(from.getDate() - (n - 1))\n  return { from, to }\n}\n\n/**\n * The shortcuts a range picker is asked for on nearly every screen it appears\n * on, so they ship rather than being rebuilt per dashboard.\n *\n * Computed on click: a preset list built at render time freezes \"today\" at\n * whenever the page loaded, which is wrong for anything left open overnight.\n */\nexport const RANGE_PRESETS: DatePreset<DateRange>[] = [\n  { label: 'Last 7 days', value: () => daysAgo(7) },\n  { label: 'Last 30 days', value: () => daysAgo(30) },\n  { label: 'Last 90 days', value: () => daysAgo(90) },\n  { label: 'Last 12 months', value: () => daysAgo(365) },\n  {\n    label: 'Month to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), to.getMonth(), 1), to }\n    },\n  },\n  {\n    label: 'Year to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), 0, 1), to }\n    },\n  },\n]\n\n/** The single-date equivalent. */\nexport const DATE_PRESETS: DatePreset<Date>[] = [\n  { label: 'Today', value: () => new Date() },\n  {\n    label: 'Tomorrow',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 1)\n      return date\n    },\n  },\n  {\n    label: 'In a week',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 7)\n      return date\n    },\n  },\n  {\n    label: 'In a month',\n    value: () => {\n      const date = new Date()\n      date.setMonth(date.getMonth() + 1)\n      return date\n    },\n  },\n]\n\n/**\n * The rail of shortcuts.\n *\n * A `<nav>`-less list of plain buttons rather than a menu: they set the same\n * value the grid beside them sets, so they are part of one control and should\n * Tab in the same pass rather than opening something.\n */\nfunction PresetRail<T>({\n  presets,\n  onPick,\n  label,\n}: {\n  presets: DatePreset<T>[]\n  onPick: (value: T) => void\n  label: string\n}) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className=\"flex shrink-0 flex-col gap-0.5 border-b border-(--rule) p-2 sm:border-b-0 sm:border-e max-sm:flex-row max-sm:flex-wrap\"\n    >\n      {presets.map((preset) => (\n        <button\n          key={preset.label}\n          type=\"button\"\n          onClick={() => onPick(preset.value())}\n          className=\"rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n        >\n          {preset.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\nconst TRIGGER =\n  'flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * The visitor's own locale, not a fixed `dd/mm/yyyy`.\n *\n * `03/04` is March the fourth in one country and the third of April in the\n * next, and there is no format that is unambiguous to everyone. `Intl` already\n * knows which one this reader expects.\n */\nconst formatDate = (date: Date) =>\n  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)\n\nexport interface DatePickerProps {\n  value?: Date\n  defaultValue?: Date\n  onValueChange?: (value: Date | undefined) => void\n  /** Names the control. Required — the trigger's text is a value, not a label. */\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  /** Days the reader may not choose. Passed straight to the calendar. */\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How the chosen date is printed on the trigger. */\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid. Pass `true` for the built-in set, an array\n   * for your own, or leave it off for none.\n   */\n  presets?: boolean | DatePreset<Date>[]\n  className?: string\n}\n\n/**\n * A date, chosen from a calendar.\n *\n * A trigger and a `Calendar` in a `Popover` — not a new component so much as\n * the composition people otherwise assemble slightly differently on every\n * screen.\n *\n * It is deliberately NOT a text input with a calendar attached. A typed date\n * needs parsing, and parsing needs a format, and a format is a locale argument\n * nobody wins. When typing genuinely matters — a birth date, a long way back —\n * the calendar's month and year are dropdowns, which is the same journey\n * without the ambiguity.\n *\n * @example\n * <Field label=\"Publish on\"><DatePicker label=\"Publish on\" /></Field>\n */\nexport function DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a date',\n  disabled = false,\n  disabledDates,\n  format = formatDate,\n  presets,\n  className,\n}: DatePickerProps) {\n  const rail = presets === true ? DATE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<Date | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  const choose = (next: Date | undefined) => {\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (next) setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        disabled={disabled}\n        className={cn(TRIGGER, current ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        {current ? format(current) : placeholder}\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && <PresetRail presets={rail} onPick={choose} label={`${label} shortcuts`} />}\n          <Calendar\n            mode=\"single\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange\n  defaultValue?: DateRange\n  onValueChange?: (value: DateRange | undefined) => void\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How many months are shown side by side. Falls back to one under `sm`. */\n  months?: number\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid — Last 30 days and its neighbours. `true`\n   * for the built-in set, an array for your own.\n   *\n   * On by default here and off on the single picker, because \"last 30 days\" is\n   * most of what a range picker is ever asked for, while a single date is\n   * usually a specific one.\n   */\n  presets?: boolean | DatePreset<DateRange>[]\n  className?: string\n}\n\n/**\n * A span of dates — a stay, a reporting period, a filter.\n *\n * Two months side by side, because a range that crosses a month boundary is the\n * common case, and paging back and forth to see both ends is what makes a range\n * picker tiring. They stack under `sm`, where two would not fit — the calendar's\n * own `months` class already carries that, so there is nothing to override.\n *\n * The panel stays open until both ends are chosen: a range is not a value until\n * it has a second date, and closing on the first one would mean re-opening to\n * finish.\n *\n * @example\n * <DateRangePicker label=\"Reporting period\" />\n */\nexport function DateRangePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a range',\n  disabled = false,\n  disabledDates,\n  months = 2,\n  format = formatDate,\n  presets = true,\n  className,\n}: DateRangePickerProps) {\n  const rail = presets === true ? RANGE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<DateRange | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  /**\n   * How many days have been clicked since the panel opened.\n   *\n   * Counted, rather than inferred from the range being \"complete\", because the\n   * first click returns `{ from: day, to: day }` — a complete range by any\n   * reading of the value. Closing on that meant every attempt at a range\n   * produced a one-day one and shut the panel, which is the opposite of what a\n   * range picker is for.\n   */\n  const clicks = useRef(0)\n\n  const choose = (next: DateRange | undefined) => {\n    clicks.current += 1\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (clicks.current >= 2 && next?.from && next.to) setOpen(false)\n  }\n\n  const setPanel = (next: boolean) => {\n    if (next) clicks.current = 0\n    setOpen(next)\n  }\n\n  const complete = current?.from && current.to && current.from.getTime() !== current.to.getTime()\n  const printed = current?.from\n    ? complete\n      ? `${format(current.from)} – ${format(current.to!)}`\n      : `${format(current.from)} – …`\n    : placeholder\n\n  return (\n    <Popover open={open} onOpenChange={setPanel}>\n      <PopoverTrigger\n        aria-label={label}\n        disabled={disabled}\n        className={cn(TRIGGER, current?.from ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        <span className=\"truncate\">{printed}</span>\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && (\n            <PresetRail\n              presets={rail}\n              onPick={(next) => {\n                // A preset is a complete range in one gesture, so the panel\n                // closes — unlike a first click on the grid, which is half an\n                // answer.\n                if (value === undefined) setUncontrolled(next)\n                onValueChange?.(next)\n                setOpen(false)\n              }}\n              label={`${label} shortcuts`}\n            />\n          )}\n          <Calendar\n            mode=\"range\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            numberOfMonths={months}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default DatePicker\n"],"mappings":"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","names":[]}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */
+declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+interface DialogContentProps extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {
+    /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */
+    title?: ReactNode;
+    /** Sub-heading under the title. */
+    description?: ReactNode;
+    className?: string;
+    /** Show the top-right close control (default true). */
+    showClose?: boolean;
+    /**
+     * Keeps the title for assistive tech and hides it visually.
+     *
+     * For a surface whose purpose is obvious to anyone who can see it — a command
+     * palette, a media lightbox — where a printed heading would be furniture. The
+     * title itself is never optional: Radix requires one, and a modal with no
+     * accessible name drops a screen reader into an unnamed region.
+     */
+    hideTitle?: boolean;
+}
+/**
+ * A modal surface: portal → scrim → centred panel.
+ *
+ * Radix owns the focus trap, the escape key, the scroll lock and the
+ * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,
+ * usually by leaving focus behind in the page underneath.
+ *
+ * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog
+ * without a visible heading still renders a hidden one rather than logging a
+ * warning and shipping an unnamed modal.
+ *
+ * @example
+ * <Dialog>
+ *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>
+ *   <DialogContent title="Delete file" description="This cannot be undone.">
+ *     <DialogClose asChild><Button variant="secondary">Cancel</Button></DialogClose>
+ *   </DialogContent>
+ * </Dialog>
+ */
+declare function DialogContent({ title, description, children, className, showClose, hideTitle, ...rest }: DialogContentProps): react.JSX.Element;
+
+export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogTrigger, Dialog as default };

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+function DialogHeader({
+  title,
+  description,
+  hidden
+}) {
+  if (title === void 0 && description === void 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("mb-4 flex flex-col gap-1 pe-8", hidden && "sr-only"), children: [
+    title !== void 0 && /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)", children: title }),
+    description !== void 0 && /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "m-0 text-sm leading-relaxed text-(--ink-3-aa)", children: description })
+  ] });
+}
+function DialogContent({
+  title,
+  description,
+  children,
+  className,
+  showClose = true,
+  hideTitle = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        "data-m22-animated": true,
+        className: "fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-m22-animated": true,
+        className: cn(
+          "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--rule-2) bg-(--paper) p-6 scroll-slim",
+          "data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { title, description, hidden: hideTitle }),
+          title === void 0 && /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: "Dialog" }),
+          showClose && /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              "aria-label": "Close",
+              className: "absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+              children: /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.5, "aria-hidden": true })
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+var Dialog_default = Dialog;
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTrigger,
+  Dialog_default as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than logging a\n * warning and shipping an unnamed modal.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className=\"fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]\"\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--rule-2) bg-(--paper) p-6 scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AAwBI,SAEI,KAFJ;AAtBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AAGZ,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAyCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { LucideIcon } from 'lucide-react';
+
+/** Radix DropdownMenu root + trigger, re-exported as typed passthroughs. */
+declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content>;
+/**
+ * A menu surface.
+ *
+ * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in
+ * a nav; if they set a value, that is a `Select` or a `RadioGroup` — Radix has
+ * menu variants for both, and a plain item pretending to be a choice loses the
+ * checked state a screen reader needs.
+ *
+ * @example
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild><Button variant="secondary">Menu</Button></DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>Account</DropdownMenuLabel>
+ *     <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+declare function DropdownMenuContent({ className, sideOffset, children, ...rest }: DropdownMenuContentProps): react.JSX.Element;
+interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {
+    /** Optional leading icon, rendered before the label. */
+    icon?: LucideIcon;
+    /** Paints the row as destructive. Use for delete, revoke, disconnect. */
+    destructive?: boolean;
+}
+/**
+ * A menu row.
+ *
+ * Highlight is driven by Radix's `data-highlighted`, which covers both pointer
+ * hover and keyboard focus — styling `:hover` alone leaves the keyboard user
+ * unable to see where they are.
+ */
+declare function DropdownMenuItem({ icon: Icon, destructive, className, children, ...rest }: DropdownMenuItemProps): react.JSX.Element;
+/** Hairline divider between menu groups. */
+declare function DropdownMenuSeparator({ className, ...rest }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): react.JSX.Element;
+/** Mono eyebrow heading for a group of items. */
+declare function DropdownMenuLabel({ className, ...rest }: ComponentProps<typeof DropdownMenuPrimitive.Label>): react.JSX.Element;
+
+export { DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenu as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+function DropdownMenuContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...rest
+}) {
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      collisionBoundary: container ?? void 0,
+      collisionPadding: 8,
+      sideOffset,
+      "data-m22-animated": true,
+      className: cn(
+        "z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5",
+        "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+}
+function DropdownMenuItem({
+  icon: Icon,
+  destructive = false,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.Item,
+    {
+      className: cn(
+        "flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)",
+        destructive ? "text-(--danger)" : "text-(--ink-2) data-[highlighted]:text-(--ink)",
+        className
+      ),
+      ...rest,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      className: cn("my-1 h-px bg-(--rule)", className),
+      ...rest
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      className: cn("px-2.5 py-1.5 eyebrow text-(--ink-3-aa)", className),
+      ...rest
+    }
+  );
+}
+var DropdownMenu_default = DropdownMenu;
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenu_default as default
+};
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport type { LucideIcon } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix DropdownMenu root + trigger, re-exported as typed passthroughs. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nexport type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content>\n\n/**\n * A menu surface.\n *\n * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in\n * a nav; if they set a value, that is a `Select` or a `RadioGroup` — Radix has\n * menu variants for both, and a plain item pretending to be a choice loses the\n * checked state a screen reader needs.\n *\n * @example\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button variant=\"secondary\">Menu</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuLabel>Account</DropdownMenuLabel>\n *     <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...rest\n}: DropdownMenuContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <DropdownMenuPrimitive.Portal container={container ?? undefined}>\n      <DropdownMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-1.5',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nexport interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {\n  /** Optional leading icon, rendered before the label. */\n  icon?: LucideIcon\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/**\n * A menu row.\n *\n * Highlight is driven by Radix's `data-highlighted`, which covers both pointer\n * hover and keyboard focus — styling `:hover` alone leaves the keyboard user\n * unable to see where they are.\n */\nexport function DropdownMenuItem({\n  icon: Icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {Icon && <Icon size={16} strokeWidth={1.5} className=\"shrink-0\" aria-hidden />}\n      {children}\n    </DropdownMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between menu groups. */\nexport function DropdownMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...rest}\n    />\n  )\n}\n\n/** Mono eyebrow heading for a group of items. */\nexport function DropdownMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport default DropdownMenu\n"],"mappings":";AA2CM,cAwCF,YAxCE;AAzCN,YAAY,2BAA2B;AAGvC,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,eAAe,sBAAsB;AAC3C,MAAM,sBAAsB,sBAAsB;AAuBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,sBAAsB,QAAtB,EAA6B,WAAW,aAAa,QACpD;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,iBAAiB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAU,YAAW,eAAW,MAAC;AAAA,QAC3E;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}