@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/README.md

@@ -1,3 +1,318 @@
-# @rtkelly-labs/design-system
+# 🎨 @rtkelly-labs/design-system
 
-Placeholder. Real versions are published from https://github.com/rtkelly-labs/design-system with provenance.
+The foundational visual design system for **ryankelly.dev** and every personal surface that has
+to look like it. Built around a **brutalist / neon-terminal** aesthetic: hard edges, zero
+border-radius, offset shadows, and two themes — `midnight`, neon on blue-black, and `sketch`,
+warm paper and pen ink.
+
+## This is a multi-surface system, and that is the foundational decision
+
+**A colour originates exactly once**, as a literal in
+[`src/theme/levels.ts`](./src/theme/levels.ts). Every consumable form is *generated* from it
+and verified against it in CI. Nothing else may hold a colour literal — not a website, not a
+video composition, not a graphic generator, not an editor theme.
+
+| Surface | Form | State |
+|---|---|---|
+| **Websites** | Tailwind v4 tokens via generated `theme.css` | ships today |
+| **Design tokens** | `tokens/palette.<level>.tokens.json`, DTCG 2025.10, OKLCH | ships today |
+| **Developer themes** | VS Code · Zed · Shiki · Neovim · JetBrains, and a terminal's 16 ANSI slots | designed, blocked on a hue vocabulary |
+| **Graphics** | generated diagrams, charts, ASCII-art panels | forked in the consumer — to be reclaimed |
+| **Video** | Remotion frames at 1080p, where a 16px web type scale is wrong | groundwork only |
+
+Two decisions carry this, and they are worth reading before changing anything about colour:
+
+- [**ADR 0002 — One source of colour decisions, many emitted surfaces**](./docs/adr/0002-one-source-many-emitted-surfaces.md).
+  The root decision. Why per-surface palettes, manual ports and a runtime theming service were
+  all rejected, and why the source is TypeScript rather than JSON.
+- [**ADR 0003 — Two Levels, each independently authored**](./docs/adr/0003-two-levels-independently-authored.md).
+  `midnight` and `sketch`, neither derived from the other. Neither is named for its polarity,
+  which is what keeps `Polarity` a real declared property.
+- [**ADR 0001 — Hues are declared below Roles**](./docs/adr/0001-hues-declared-below-roles.md).
+  Components address a colour by its **job** (`accent.primary`), never its appearance (`cyan`).
+  But a terminal has sixteen positions named by colour and no concept of a keyword — so a hue
+  vocabulary is declared *underneath* the role vocabulary. Half the surfaces above cannot exist
+  without it.
+
+[`docs/theme-taxonomy.md`](./docs/theme-taxonomy.md) is the full matrix: what every Level must
+declare, which target needs which group, what is generated, and which gate covers each.
+
+Published to the public **npm registry** as `@rtkelly-labs/design-system` (via npm trusted publishing — see `.github/workflows/publish-package.yml`).
+
+**📖 Browse it: [design-system.ryankelly.dev](https://design-system.ryankelly.dev)** — the
+full Storybook, with the blog's own Storybook composed into the sidebar. Unreleased work
+lands at [preview.design-system.ryankelly.dev](https://preview.design-system.ryankelly.dev)
+(the `preview` branch). Domains are declared in `rtkelly13/shared-utilities` at
+[`infra/vercel/`](https://github.com/rtkelly13/shared-utilities/tree/main/infra/vercel);
+see [AGENTS.md](./AGENTS.md#-hosted-storybook).
+
+---
+
+## Documentation figures
+
+`FigureFrame` supplies a caption and border. The visual components do not create
+their own frame, so related views can share one. For example:
+
+```tsx
+import { FigureFrame, Timeline, UptimeStrip } from '@rtkelly-labs/design-system';
+
+<FigureFrame title="SERVICE INCIDENT">
+	<Timeline events={[{ date: '14:02', label: 'Latency rose' }, { date: '14:11', label: 'Rolled back' }]} />
+	<UptimeStrip days="ok degraded down ok" />
+</FigureFrame>
+```
+
+Use `ActivityGrid` for dated counts such as commits or blog posts, and
+`GanttChart` for work with start and end dates. `FlowDiagram`, `TreeDiagram`,
+`ChangeSummary`, and `BeforeAfter` cover relationships and comparisons.
+`SwatchCompare`, `TokenTable`, and `MetricStrip` are measured comparisons, and
+`TermGrid` is a glossary. `Decision` is a standalone documentation block, not a
+figure renderer. `Steps` and `Terminal` remain documentation blocks. See
+[ADR 0006](./docs/adr/0006-document-visual-taxonomy.md) for the naming rules.
+
+These components are adapted from [mdxcn](https://github.com/keshav-exe/mdxcn)
+as source code, not imported from an mdxcn npm package. Every adapted component
+links to its upstream source in the file header. See the
+[license and attribution](./docs/attributions/mdxcn.md).
+
+---
+
+## 📸 Visual Regression Layer
+
+Playwright screenshots of Storybook stories, asserted on every PR. The determinism contract and
+operating instructions are in [`docs/visual-regression.md`](./docs/visual-regression.md).
+
+- **What is asserted**: three tables in `tests/visual.spec.ts`: `CASES` (desktop), `MOBILE_CASES`
+  (narrow viewport) and `INTERACTIONS` (hover, focus and open states). They run against a static
+  Storybook build served on `http://localhost:6006`. `pnpm check:visual-coverage` requires every component to
+  have an asserted story or a stated reason.
+- **Two projects**: `chromium` (desktop) and `mobile`. Baselines live in `tests/__snapshots__/`,
+  named by file rather than story id, so retitling a story does not orphan one.
+- **Tolerance**: `maxDiffPixels: 0` at Playwright's default per-pixel `threshold` of `0.2`. A
+  flaky case is a defect to fix, not a threshold to loosen.
+- **Linux only**: baselines are rendered on the CI runner, and font rasterisation differs by OS. On
+  macOS or Windows the suite skips every case (`test.skip(process.platform !== 'linux')`), so an
+  all-skipped run there has asserted nothing.
+
+```bash
+# Regenerate baselines: comment on the PR (owner/member/collaborator only)
+/update-snapshots            # writes only missing baselines (new cases); never overwrites
+/update-snapshots changed    # also overwrites baselines that now differ: an intended visual change
+/update-snapshots all        # regenerates every baseline
+
+# On a Linux machine matching CI:
+pnpm test:visual            # assert
+pnpm test:visual:missing    # write baselines only for new cases
+```
+
+The bot's snapshot commit does not trigger CI. Push a fresh commit afterwards so the new baselines
+are asserted.
+
+### Capturing this package deterministically
+
+If you screenshot, print, or render outside a live browser session, three switches decide whether
+you get the same output twice:
+
+```tsx
+<ThemeProvider defaultLevel="midnight" scoped>   {/* 1. no storage, no matchMedia, no documentElement */}
+```
+
+```ts
+await document.fonts.ready;                       // 2. or you capture the fallback face
+// 3. suppress transitions:
+// *, *::before, *::after { transition: none !important; animation: none !important }
+```
+
+`scoped` is the one that does the work — `persist={false} followSystem={false}` look like the
+determinism controls and are redundant under it. Full reasoning in
+[`docs/deterministic-rendering.md`](./docs/deterministic-rendering.md).
+
+---
+
+## 📦 Installation & Prerelease Testing
+
+### Stable Release
+
+```bash
+pnpm add @rtkelly-labs/design-system
+```
+
+No registry configuration needed — it's a public npm package.
+
+**ESM only, Node 22 or later.** The package is `"type": "module"` with one build. Bundlers
+(Vite, Next, webpack, esbuild) and `import` need nothing. `require('@rtkelly-labs/design-system')`
+works on Node 22.12+, which loads ES modules from `require()`; a toolchain that needs the package
+to be CommonJS (Jest without ESM support, for one) does not. Server components can import it
+directly — see [`docs/api-surface.md`](./docs/api-surface.md) for which components render on the
+server.
+
+### Dev Prerelease Testing
+
+Comment `/publish-dev` on a Pull Request and CI publishes that branch as
+`<version>-dev.<pr>.<short-sha>` under the `dev` dist-tag:
+
+```bash
+pnpm add @rtkelly-labs/design-system@dev          # latest dev build
+pnpm view @rtkelly-labs/design-system dist-tags   # exact versions per PR
+```
+
+---
+
+## ⚡ Usage & Setup
+
+### 1. Import Stylesheet & Theme Provider
+
+In your app entrypoint (`_app.tsx`, `main.tsx`, or `layout.tsx`):
+
+```tsx
+import '@rtkelly-labs/design-system/styles.css';
+import { ThemeProvider, Button, Card, PageTitle, Badge, Divider } from '@rtkelly-labs/design-system';
+
+export function App() {
+  return (
+    <ThemeProvider defaultLevel="midnight">
+      <main style={{ padding: '2rem' }}>
+        <PageTitle subtitle="Foundation Design System Surface">
+          [ MY APPLICATION ]
+        </PageTitle>
+
+        <Card>
+          <Badge accent="primary">v1.2.0 ACTIVE</Badge>
+          <p style={{ margin: '1rem 0' }}>
+            Brutalist UI surface shared across all projects.
+          </p>
+          <Button bracketed variant="tertiary">
+            EXECUTE ACTION
+          </Button>
+        </Card>
+
+        {/* The mark follows the level's polarity: a terminal rule on the dark
+            rungs, a hand-ruled pencil dash on the light ones. */}
+        <Divider />
+      </main>
+    </ThemeProvider>
+  );
+}
+```
+
+---
+
+### 2. Tailwind CSS v4 token contract
+
+Import the theme contract in your CSS entrypoint. It ships the `@theme` tokens,
+one `[data-theme]` block per level, the per-level and polarity variants, and an
+`@source` directive — that last one is load-bearing, because Tailwind v4 skips
+`node_modules` during content detection and would otherwise generate none of the
+utilities the compiled components use:
+
+```css
+@import "tailwindcss";
+@import "@rtkelly-labs/design-system/theme.css";
+```
+
+`theme.css` is **generated** from `src/theme/levels.ts`, which is the single place
+any level name or colour is written.
+
+`styles.css` = `theme.css` + `prose.css` + web-font imports + opinionated global
+resets (zero border-radius everywhere, base typography). Import that, or compose
+the pieces yourself — but not both.
+
+**Peer requirements.** `tailwindcss` v4 for either stylesheet, and
+`@tailwindcss/typography` if you import `prose.css`, which loads it as a
+`@plugin`. Both are optional peers: a Tailwind plugin resolves from *your*
+`node_modules` at your build time, so neither can be bundled.
+
+### 3. Semantic tokens
+
+Address **roles**, not hues. Each rung of the ladder declares its own mapping of
+these roles, so a component that hard-codes `cyan` cannot be rethemed without
+editing the component. Every pair is contrast-audited on every level by
+`pnpm check:contrast`, which gates CI.
+
+| Role group | Tokens | Use for |
+|---|---|---|
+| `--ds-accent-*` | `primary`, `secondary`, `tertiary`, `quiet` | Visual hierarchy |
+| `--ds-intent-*` | `info`, `success`, `warning`, `danger` | Communicated meaning |
+| `--ds-surface-*` | `base`, `raised`, `sunken`, `overlay` | Background elevation |
+| `--ds-text-*` | `primary`, `secondary`, `muted`, `inverse` | Text prominence |
+| `--ds-border-*` | `strong`, `default`, `subtle` | Rule weight |
+| `--ds-font-*` | `display`, `body`, `mono`, `pixel` | Typography roles |
+
+```tsx
+import { Badge, Tag, accentVar, semanticTokens } from '@rtkelly-labs/design-system';
+
+<Badge accent="primary">HIERARCHY</Badge>
+<Tag text="deprecated" accent="danger" />          {/* meaning, not colour */}
+<div style={{ borderColor: accentVar('secondary') }} />
+<div style={{ background: semanticTokens.surface.raised }} />
+```
+
+Tailwind aliases are generated too: `text-accent-primary`, `bg-surface-raised`,
+`border-edge-subtle`, `text-intent-danger`.
+
+The legacy palette names (`'cyan' | 'pink' | 'yellow' | 'green'`) still resolve to
+identical values, so existing call sites keep working — but they are deprecated.
+
+---
+
+## 📚 Documentation Portal
+
+A complete chrome kit for MDX documentation sites.
+
+```tsx
+import {
+  DocsLayout, DocsHeader, DocsSidebar, TableOfContents,
+  Breadcrumbs, DocPager, Prose, CodeBlock, CodeTabs, CodeTab, AnchorHeading,
+  DocsLinkProvider, mdxComponents,
+} from '@rtkelly-labs/design-system';
+import '@rtkelly-labs/design-system/prose.css';
+```
+
+**Every section is addressable.** Headings render through `AnchorHeading`, which gives
+each one a `#slug` id and a hover affordance that copies the *absolute* URL including
+the hash — the thing you actually paste into a ticket.
+
+**The header is durable.** `DocsHeader` is sticky and measures its own height into
+`--docs-header-height`. That single value feeds `scroll-padding-top`, the
+`scroll-margin-top` on every heading, and the scroll-spy reading line — so anchors
+never land underneath the bar, at any viewport width.
+
+**Bring your own router.** Wrap the app in `DocsLinkProvider` and all chrome navigation
+goes through it instead of hard-navigating:
+
+```tsx
+import { Link } from 'react-router-dom';
+
+<DocsLinkProvider component={({ href, ...props }) => <Link to={href} {...props} />}>
+  <App />
+</DocsLinkProvider>
+```
+
+**Code tabs switch together.** `CodeTabs` is the language / package-manager
+switcher: a real `tablist` with arrow-key traversal. Blocks sharing a `group`
+switch as one and the choice persists across pages, so a reader picks `pnpm`
+once. Fenced blocks inside a `CodeTab` attach to the strip automatically.
+
+**One MDX mapping.** `mdxComponents` maps `h1`–`h6` → anchored headings, `pre` →
+`CodeBlock`, `a` → router-aware links, and exposes `NoteBlock` / `TLDR` / `Card` /
+`Tag` to MDX authors. Pass it to any MDX provider so every site renders Markdown
+identically.
+
+`prose.css` styles the bare tags a Markdown pipeline emits (`ul`, `ol`, `table`,
+`blockquote`, `hr`, inline `code`, task lists), plus GitHub alert syntax
+(`> [!NOTE]`) as produced by `remark-github-blockquote-alert`, and code titles from
+`remark-code-title`. It is plain CSS on purpose: the docs chrome is layout-critical,
+and Tailwind v4 skips `node_modules` in automatic content detection, so a
+misconfigured `@source` would half-break a sidebar rather than fail loudly.
+
+---
+
+## 🛠 Repository & Publishing
+
+- **Repository**: `https://github.com/rtkelly-labs/design-system`
+- **npm**: `@rtkelly-labs/design-system` on `https://registry.npmjs.org`
+- **CI Pipelines**:
+  - `ci.yml`: Typecheck, package build, Storybook build, and Linux visual regression testing.
+  - `publish-package.yml`: npm publishing (stable on main, dev prereleases via dispatch).
+  - `publish-dev-command.yml`: `/publish-dev` PR comment handler.
+  - `update-snapshots.yml`: On-demand visual snapshot regeneration.

package/dist/components/AlertDialog.js

@@ -0,0 +1,95 @@
+"use client";
+
+// src/components/AlertDialog.tsx
+import { forwardRef } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { cn } from "../lib/recipe.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { dialogSurface } from "./dialogSurface.js";
+import { Button } from "./Button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var AlertDialog = forwardRef(function AlertDialog2({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  children,
+  confirmLabel = "CONFIRM",
+  cancelLabel = "CANCEL",
+  footer,
+  className,
+  ...props
+}, ref) {
+  const slots = dialogSurface();
+  const portalTheme = usePortalThemeAttribute();
+  return /* @__PURE__ */ jsx(
+    BaseAlertDialog.Root,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(BaseAlertDialog.Portal, { ...portalTheme, children: [
+        /* @__PURE__ */ jsx(
+          BaseAlertDialog.Backdrop,
+          {
+            "data-slot": "alert-dialog-backdrop",
+            className: slots.backdrop()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BaseAlertDialog.Viewport,
+          {
+            "data-slot": "alert-dialog-viewport",
+            className: slots.viewport(),
+            children: /* @__PURE__ */ jsxs(
+              BaseAlertDialog.Popup,
+              {
+                ref,
+                "data-slot": "alert-dialog",
+                className: cn(slots.popup(), "max-w-md", className),
+                ...props,
+                children: [
+                  /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-header", className: slots.header(), children: /* @__PURE__ */ jsx(
+                    BaseAlertDialog.Title,
+                    {
+                      "data-slot": "alert-dialog-title",
+                      className: slots.title(),
+                      render: /* @__PURE__ */ jsxs("h3", { children: [
+                        "[ ",
+                        title,
+                        " ]"
+                      ] })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    BaseAlertDialog.Description,
+                    {
+                      "data-slot": "alert-dialog-body",
+                      className: slots.body(),
+                      render: /* @__PURE__ */ jsx("div", {}),
+                      children
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { "data-slot": "alert-dialog-footer", className: slots.footer(), children: footer || /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      BaseAlertDialog.Close,
+                      {
+                        render: /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", children: cancelLabel })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Button, { onClick: onConfirm, variant: "tertiary", bracketed: true, size: "sm", children: confirmLabel })
+                  ] }) })
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+});
+export {
+  AlertDialog
+};
+//# sourceMappingURL=AlertDialog.js.map

package/dist/components/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AlertDialog.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { cn } from '../lib/recipe';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport { dialogSurface } from './dialogSurface';\nimport { Button } from './Button';\n\nexport interface AlertDialogProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'className'> {\n  isOpen: boolean;\n  /** Dismissal — Escape, or the cancel control. Never a backdrop click. */\n  onClose: () => void;\n  /** The destructive action. Called instead of, not as well as, `onClose`. */\n  onConfirm: () => void;\n  title: string;\n  /**\n   * What the action does, and what it costs. Short: this is wired as the\n   * dialog's accessible description, so a screen reader reads it immediately\n   * after the title.\n   */\n  children: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /**\n   * Replaces the cancel/confirm pair outright, for the rare confirmation with\n   * a third option. Supplying it means owning dismissal — nothing else in the\n   * dialog closes it.\n   */\n  footer?: ReactNode;\n  className?: string;\n}\n\n/**\n * A destructive-action confirmation, on Base UI's `alert-dialog`.\n *\n * ## Why this is not `Modal` with different buttons\n *\n * The difference is the dismissal contract, and it is the whole point.\n * `AlertDialog` cannot be dismissed by clicking outside it: Base UI's\n * `AlertDialog.Root` omits `disablePointerDismissal` from its props\n * altogether, because the answer is never \"yes\". A confirmation you can\n * dismiss with a stray click is a confirmation that has not confirmed\n * anything, and shipping `Modal` without this is how a delete dialog ends up\n * backdrop-dismissible by default.\n *\n * Escape still closes it. That is deliberate and not a contradiction: Escape\n * is deliberate, unambiguous and always means *cancel*, and removing it would\n * trap a keyboard user in the dialog.\n *\n * It renders `role=\"alertdialog\"` rather than `role=\"dialog\"`, which is what\n * tells a screen reader to announce the whole surface rather than just its\n * name — the reason the description below is wired rather than decorative.\n *\n * ## The cancel control is the close control\n *\n * There is no `×`. A confirmation asks a question with two answers and both\n * are buttons; adding a third dismissal affordance in the corner makes the\n * safe answer ambiguous. Cancel is `AlertDialog.Close`, so it is also what a\n * touch screen reader finds when it looks for the way out.\n */\nexport const AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(function AlertDialog(\n  {\n    isOpen,\n    onClose,\n    onConfirm,\n    title,\n    children,\n    confirmLabel = 'CONFIRM',\n    cancelLabel = 'CANCEL',\n    footer,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const slots = dialogSurface();\n\n  const portalTheme = usePortalThemeAttribute();\n  return (\n    <BaseAlertDialog.Root\n      open={isOpen}\n      onOpenChange={(open) => {\n        if (!open) onClose();\n      }}\n    >\n      <BaseAlertDialog.Portal {...portalTheme}>\n        <BaseAlertDialog.Backdrop\n          data-slot=\"alert-dialog-backdrop\"\n          className={slots.backdrop()}\n        />\n        <BaseAlertDialog.Viewport\n          data-slot=\"alert-dialog-viewport\"\n          className={slots.viewport()}\n        >\n          <BaseAlertDialog.Popup\n            ref={ref}\n            data-slot=\"alert-dialog\"\n            // Narrower than `Modal`'s `max-w-lg`: a confirmation is one\n            // sentence and two buttons, and a wide one reads as a workflow the\n            // reader is expected to study rather than a question to answer.\n            className={cn(slots.popup(), 'max-w-md', className)}\n            {...props}\n          >\n            <div data-slot=\"alert-dialog-header\" className={slots.header()}>\n              <BaseAlertDialog.Title\n                data-slot=\"alert-dialog-title\"\n                className={slots.title()}\n                render={<h3>[ {title} ]</h3>}\n              />\n            </div>\n\n            <BaseAlertDialog.Description\n              data-slot=\"alert-dialog-body\"\n              className={slots.body()}\n              // A `div`, not Base UI's default `p`: the body takes arbitrary\n              // nodes, and a block element inside a paragraph is invalid HTML\n              // that the parser silently repairs by closing the paragraph\n              // early — which would leave the description pointing at nothing.\n              render={<div />}\n            >\n              {children}\n            </BaseAlertDialog.Description>\n\n            <div data-slot=\"alert-dialog-footer\" className={slots.footer()}>\n              {footer || (\n                <>\n                  {/*\n                    * The label goes on the render element rather than on\n                    * `Close`: `Button`'s props are a union whose link arm\n                    * requires `children` and `href`, so an empty `<Button />`\n                    * does not typecheck even though Base UI would fill it in.\n                    */}\n                  <BaseAlertDialog.Close\n                    render={\n                      <Button variant=\"default\" size=\"sm\">\n                        {cancelLabel}\n                      </Button>\n                    }\n                  />\n                  <Button onClick={onConfirm} variant=\"tertiary\" bracketed size=\"sm\">\n                    {confirmLabel}\n                  </Button>\n                </>\n              )}\n            </div>\n          </BaseAlertDialog.Popup>\n        </BaseAlertDialog.Viewport>\n      </BaseAlertDialog.Portal>\n    </BaseAlertDialog.Root>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,eAAe,uBAAuB;AAC/C,SAAS,UAAU;AACnB,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AAiFf,SAuCQ,UAvCR,KAqBgB,YArBhB;AA1BD,IAAM,cAAc,WAA6C,SAASA,aAC/E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,cAAc;AAE5B,QAAM,cAAc,wBAAwB;AAC5C,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AACtB,YAAI,CAAC,KAAM,SAAQ;AAAA,MACrB;AAAA,MAEA,+BAAC,gBAAgB,QAAhB,EAAwB,GAAG,aAC1B;AAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAW,MAAM,SAAS;AAAA;AAAA,QAC5B;AAAA,QACA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,aAAU;AAAA,YACV,WAAW,MAAM,SAAS;AAAA,YAE1B;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,aAAU;AAAA,gBAIV,WAAW,GAAG,MAAM,MAAM,GAAG,YAAY,SAAS;AAAA,gBACjD,GAAG;AAAA,gBAEJ;AAAA,sCAAC,SAAI,aAAU,uBAAsB,WAAW,MAAM,OAAO,GAC3D;AAAA,oBAAC,gBAAgB;AAAA,oBAAhB;AAAA,sBACC,aAAU;AAAA,sBACV,WAAW,MAAM,MAAM;AAAA,sBACvB,QAAQ,qBAAC,QAAG;AAAA;AAAA,wBAAG;AAAA,wBAAM;AAAA,yBAAE;AAAA;AAAA,kBACzB,GACF;AAAA,kBAEA;AAAA,oBAAC,gBAAgB;AAAA,oBAAhB;AAAA,sBACC,aAAU;AAAA,sBACV,WAAW,MAAM,KAAK;AAAA,sBAKtB,QAAQ,oBAAC,SAAI;AAAA,sBAEZ;AAAA;AAAA,kBACH;AAAA,kBAEA,oBAAC,SAAI,aAAU,uBAAsB,WAAW,MAAM,OAAO,GAC1D,oBACC,iCAOE;AAAA;AAAA,sBAAC,gBAAgB;AAAA,sBAAhB;AAAA,wBACC,QACE,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAC5B,uBACH;AAAA;AAAA,oBAEJ;AAAA,oBACA,oBAAC,UAAO,SAAS,WAAW,SAAQ,YAAW,WAAS,MAAC,MAAK,MAC3D,wBACH;AAAA,qBACF,GAEJ;AAAA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["AlertDialog"]}