@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.2

package/README.md

@@ -15,24 +15,281 @@ import { Button, PanneauRoot, TextInput, bootstrapTheme } from '@panneau/ui';
 </PanneauRoot>;
 ```
 
-| Export                | Content                                                                                           |
-| --------------------- | ------------------------------------------------------------------------------------------------- |
-| `@panneau/ui`         | `PanneauRoot`, themes, the primitives, `Icon`, `getNamedIcon()`, `useToast()`, `usePanneauIntl()` |
-| `@panneau/ui/locales` | Deprecated: the UI messages by locale, `en` and `fr`. Use `@panneau/intl`                         |
+| Export                | Content                                                                                                 |
+| --------------------- | ------------------------------------------------------------------------------------------------------- |
+| `@panneau/ui`         | `PanneauRoot`, themes, the primitives, `Icon`, `getNamedIcon()`, `useToast()`, `usePanneauIntl()`       |
+| `@panneau/ui/theme`   | Themes as data, without components or CSS, for Node: `defineTheme()`, `checkTheme()`, `bootstrapTheme`… |
+| `@panneau/ui/locales` | Deprecated: the UI messages by locale, `en` and `fr`. Use `@panneau/intl`                               |
 
 ## Root, tokens and themes
 
 Every Panneau interface renders inside a `PanneauRoot`. It scopes the base stylesheet and the design tokens (`--panneau-*` CSS variables) to its element: Panneau adds no global CSS to the page. Overlays (dialogs, popovers, menus, tooltips) and toasts render inside it too.
 
 - `colorScheme`: `light` (default), `dark`, or `auto`, which follows the system.
-- `theme`: tokens that override the default theme. `bootstrapTheme` follows a site's Bootstrap 5.3 variables and color mode.
+- `density`: `compact`, `comfortable`, `touch`, or `auto` (default), which is `touch` on touch screens and `comfortable` otherwise. See [Density](#density).
+- `theme`: tokens, tones and variants that override the default theme (see [Defining themes](#defining-themes)). `bootstrapTheme` follows a site's Bootstrap 5.3 variables and color mode.
 - A project can also override any token with its own class on the root: `.my-panneau { --panneau-color-accent: #0a58ca; }`.
 
 The default theme and the icon set are explained in [decision 0020](../../docs/decisions/0020-default-theme-and-icons.md).
 
+### Scopes
+
+`ThemeScope` applies a theme, a color scheme or a density to part of the page, like `data-bs-theme` on any element, without a new root:
+
+```tsx
+<PanneauRoot theme={brand}>
+    <ThemeScope as="aside" colorScheme="dark">
+        <Navigation />
+    </ThemeScope>
+    <ThemeScope density="compact">
+        <ListView />
+    </ThemeScope>
+</PanneauRoot>
+```
+
+What a scope doesn't set comes from around it: a scope with only a density keeps the colors of the root's theme. Overlays opened inside a scope (dialogs, popovers, menus) render in its own container and keep its tokens. Custom color schemes, beyond light and dark, are themes applied to a scope.
+
+### Component tokens
+
+Every component reads its own tokens, `--panneau-<component>-<token>`, which default to semantic tokens. Set one to restyle a single component, in a theme, on the root, or on any element around the components:
+
+```css
+.my-panneau {
+    --panneau-badge-radius: var(--panneau-radius-sm); /* square badges, nothing else changes */
+}
+
+.my-toolbar {
+    --panneau-button-padding-x: var(--panneau-space-2);
+}
+```
+
+`componentTokens` lists every component token and its default, by component, and `ComponentTokenName` is their type. Some tokens style parts that several components share:
+
+- `input`: the box of text inputs, selects, combo boxes and pickers;
+- `field`: labels, descriptions and errors;
+- `list-box`: options of selects, combo boxes and menus;
+- `calendar`.
+
+### Tones and appearances
+
+Components with a color take a `tone`, like Bootstrap's theme colors: `neutral`, `accent`, `success`, `warning`, `danger` and `info` are built in. `Button`, `Badge` and `Alert` also take an `appearance` (`solid`, `outline`, `subtle`, and `ghost` for buttons):
+
+```tsx
+<Button tone="accent">Save</Button>
+<Button tone="danger" appearance="outline">Remove</Button>
+<Badge tone="success">Published</Badge>
+<Alert tone="warning" appearance="solid" title="Scheduled" />
+```
+
+The `variant` values of `Button` (`primary`, `secondary`, `ghost`, `danger`) are deprecated aliases of a tone and an appearance.
+
+A theme adds tones, from one color (Panneau derives a readable text color, the hover, the subtle background and the border) or with every value, and named variants of components:
+
+```tsx
+const theme = defineTheme({
+    tones: { signal: '#f25c05' },
+    components: {
+        badge: { variants: { tag: { 'panneau-badge-radius': 'var(--panneau-radius-sm)' } } },
+    },
+});
+
+declare module '@panneau/ui' {
+    interface PanneauTones {
+        signal: true;
+    }
+    interface BadgeVariants {
+        tag: true;
+    }
+}
+
+<Badge tone="signal" variant="tag">
+    Live
+</Badge>;
+```
+
+`checkTheme(theme)` reports the colors of a theme that miss their contrast ratio (4.5:1 for text, 3:1 for control borders), like Bootstrap's `$min-contrast-ratio`. It follows references to the theme's palette and tokens.
+
+### Defining themes
+
+`defineTheme()` declares a theme. TypeScript checks the name of every token, semantic or component, and the console reports unknown names in Panneau's namespaces (`panneau-color-txt`), such as typos in a theme loaded from JSON. A theme can name its raw colors once in a `palette`, written as `--panneau-palette-<name>`, and build on other themes with `extends`:
+
+```ts
+import { bootstrapTheme, defineTheme } from '@panneau/ui';
+
+const brand = defineTheme({
+    label: 'Brand',
+    palette: { orange: '#f25c05', ink: '#1c1917' },
+    tokens: {
+        'panneau-color-accent': 'var(--panneau-palette-ink)',
+        'panneau-button-radius': '0',
+    },
+    dark: { 'panneau-color-accent': '#fafaf9' },
+    tones: { signal: 'var(--panneau-palette-orange)' },
+});
+
+// A variation: the same theme, more compact.
+const compact = defineTheme({ extends: brand, tokens: { 'panneau-control-height': '2rem' } });
+
+// The brand theme, on a site that uses Bootstrap.
+const onBootstrap = defineTheme({ extends: [bootstrapTheme, brand] });
+```
+
+Values merge in this order, each overriding the ones before: the default theme, the themes a theme `extends` (in order), the theme itself, then a project's own class on the root. A token set in `tokens` but not in `dark` applies to both schemes, so it also replaces the dark value of the themes it extends. `mergeThemes()` merges themes the same way.
+
+`defineTheme()` returns a plain `Theme`: themes are data. They can be written as JSON files, with the [`theme.schema.json`](../protocol/schema/theme.schema.json) of `@panneau/protocol`, registered by plugins of `@panneau/core`, and carried by the definition, whose `theme` extends themes of plugins by id. Tokens of a project's own components are declared in `PanneauTokens`:
+
+```ts
+declare module '@panneau/ui' {
+    interface PanneauTokens {
+        'panneau-map-marker-color': true;
+    }
+}
+```
+
+`SEMANTIC_TOKENS` lists the semantic tokens, `componentTokens` the component tokens.
+
+### Typography and fonts
+
+The theme has four font roles: `--panneau-font-family-body`, `-heading` (the body's by default), `-display` (the heading's by default) and `-mono`. `--panneau-font-family` is a deprecated alias of the body family: set `-body` instead, so that headings follow it. `--panneau-font-numeric` (`tabular-nums`) lines up digits in stats, dates and tables.
+
+Panneau styles no element beyond its reset, since it is often embedded in someone else's page. Three components apply the typography of the theme:
+
+- `Heading`: a `level` (`h1`–`h6`, 2 by default) and a visual `size`, independent of it: `1` to `4`, `display-1` and `display-2`, like Bootstrap's `.h1` and `.display-1`. Its tokens (`--panneau-heading-1-font-size`, `--panneau-heading-display-1-font-weight`…) set the size, weight, line height and letter spacing of each size.
+- `Text`: `size` (`xs` to `xl`), `weight`, `family` (a font role), `tone`, `muted`, `numeric` and `truncate`, as a `p` by default (`as="span"`).
+- `Prose`: styles the elements of rich content inside it (headings, lists, links, quotes, code, tables), such as the output of an editor or Markdown.
+
+```tsx
+<Heading level={1} size="display-2">
+    1,204 pages
+</Heading>
+<Text muted size="sm">
+    Updated today
+</Text>
+<Prose dangerouslySetInnerHTML={{ __html: page.body }} />
+```
+
+A theme declares its fonts: font faces, written as `@font-face` rules, or a hosted stylesheet. `PanneauRoot` adds them to the page once, however many roots use the theme.
+
+```ts
+const editorial = defineTheme({
+    fonts: [
+        { family: 'Geist', src: "url(/fonts/geist.woff2) format('woff2')", weight: '100 900' },
+        { stylesheet: 'https://fonts.googleapis.com/css2?family=Fraunces:wght@600&display=swap' },
+    ],
+    tokens: {
+        'panneau-font-family-body': 'Geist, system-ui, sans-serif',
+        'panneau-font-family-heading': 'Fraunces, Georgia, serif',
+    },
+});
+```
+
+### Layout
+
+Five primitives lay out content with the space scale of the theme, without utility classes:
+
+- `Stack`: items one under the other, like Bootstrap's `.vstack`;
+- `Inline`: items side by side, wrapping when they don't fit, like `.hstack`;
+- `Grid` and `GridItem`: equal columns (`columns`), or as many as fit (`minItemWidth="16rem"`), and cells that span several columns (`span`, or `span="full"`);
+- `Container`: a centered column with a maximum width (`size`: `sm`, `md`, `lg` by default, `xl` or `full`);
+- `Divider`: a line between groups, horizontal or vertical.
+
+`gap` takes a step of the space scale (`gap={2}` is `--panneau-space-2`), and `align` and `justify` the alignment of the items. These props, `columns` and `span` are **responsive**: a value, or values by breakpoint, each applying from its breakpoint up.
+
+```tsx
+<Container>
+    <Grid columns={{ base: 1, md: 2, lg: 3 }} gap={{ base: 3, lg: 4 }}>
+        <GridItem span={{ base: 1, lg: 'full' }}>
+            <Card title="Summary" />
+        </GridItem>
+        <Card title="Pages" />
+        <Card title="Articles" />
+    </Grid>
+</Container>
+```
+
+Breakpoints (`BREAKPOINTS`) are `sm` 40rem, `md` 48rem, `lg` 64rem and `xl` 80rem, like `$grid-breakpoints`. They are widths of the nearest **size container**, not of the viewport, so that a grid in a narrow sidebar behaves as on a phone. `PanneauRoot` and `Container` are size containers, as are forms and lists. A size container takes its width from its parent, never from its content: in a flex row or a float, give the root a width, or it collapses.
+
+Responsive values are inline CSS variables, read by static rules in each container query: no styles are generated per instance.
+
+### Density
+
+A density is a set of tokens: `--panneau-control-height` and `-sm`, `--panneau-font-size-control`, `--panneau-control-padding-x` (inputs and buttons) and `--panneau-row-padding-y` (rows of tables, options of lists). The `density` of the root picks one, and the `size` props of components (`size="sm"`) stay relative to it.
+
+A theme redefines a density in `densities`. Density tokens set in `tokens` instead apply to every density, which then no longer changes them.
+
+```ts
+const roomy = defineTheme({
+    densities: {
+        comfortable: { 'panneau-control-height': '2.5rem' },
+        compact: { 'panneau-row-padding-y': '0.125rem' },
+    },
+});
+```
+
+### Chart colors
+
+Charts (dashboard widgets, reports) use only the chart tokens of the theme, in both schemes:
+
+- `--panneau-chart-categorical-1` to `-8`: series, in a fixed order;
+- `--panneau-chart-sequential-1` to `-5`: a ramp from low to high, for quantities;
+- `--panneau-chart-diverging-negative`, `-neutral` and `-positive`: values below and above a reference.
+
+`chartColors` gives them as CSS variables for `fill` and `stroke`, so that charts follow the theme, the color scheme and the scope:
+
+```tsx
+<rect fill={chartColors.categorical(index)} />
+<rect fill={chartColors.sequential(5)} />
+<rect fill={chartColors.diverging.negative} />
+```
+
+Each default categorical color reaches 3:1 against the surface (WCAG non-text contrast), and the eight stay distinct for people with protanopia, deuteranopia or tritanopia: a test checks it. `checkTheme()` runs the same checks on the chart colors a theme sets, and `checkColorDifferences(colors)` on any palette.
+
+### Checking a theme
+
+`checkTheme(theme)` reports what a theme makes hard to read: text tokens against backgrounds (4.5:1), control borders and chart colors (3:1), the text of each tone on the surface and on its subtle background, and categorical chart colors that look alike with a color vision deficiency. The `panneau-check-theme` command runs it on a JSON theme or on an export of a module, and exits with 1 when a check fails, for CI:
+
+```sh
+npx panneau-check-theme themes/brand.json
+npx panneau-check-theme src/theme.mjs --export brand --json
+```
+
+`@panneau/ui/theme` exports the theme functions without components or CSS, so that Node scripts (a build step, a backend that stores themes) can import them.
+
+### Bootstrap
+
+`bootstrapTheme` maps Panneau's tokens to the CSS variables of Bootstrap 5.3: colors, fonts, radii, shadows, the color mode (`data-bs-theme`), and the size of controls in the comfortable density. Bootstrap's theme colors become tones: `accent` is `primary`, and `primary` and `secondary` keep their names. `bootstrapTone(color)` turns any theme color of a site, custom ones included, into a tone:
+
+```ts
+const site = defineTheme({ extends: bootstrapTheme, tones: { brand: bootstrapTone('brand') } });
+```
+
+Bootstrap 5.3 declares the variables of its components (`--bs-btn-*`, `--bs-card-*`) on their classes, where Panneau's components can't read them: `bootstrapTheme` maps component tokens to the root variables those default to (`--bs-border-radius`, `--bs-border-color-translucent`, `--bs-heading-color`).
+
+### Classes
+
+Class names are stable and readable, without a hash, like Bootstrap's: target them in a project's CSS.
+
+- The root of every component has `panneau-<component>`: `.panneau-button`, `.panneau-badge`, `.panneau-text-input`, `.panneau-card`.
+- Its parts and modifiers are `panneau-<component>-<name>`: `.panneau-card-header`, `.panneau-button-sm`.
+- States use standard attributes: ARIA (`[aria-invalid]`, `[aria-expanded]`, `[aria-selected]`…) and the state attributes of React Aria Components (`[data-hovered]`, `[data-focus-visible]`…).
+
+```css
+.my-panneau .panneau-badge {
+    letter-spacing: 0.02em;
+}
+
+.my-panneau .panneau-text-input [aria-invalid='true'] {
+    background-color: #fff5f5;
+}
+```
+
+[`api/ui.classes.md`](api/ui.classes.md) lists every class. They are public API: a rename is a breaking change.
+
+The theme model is described in [decision 0024](../../docs/decisions/0024-theme-model.md).
+
 ## Primitives
 
-`Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
+`Heading`, `Text`, `Prose`, `Stack`, `Inline`, `Grid`, `Container`, `Divider`, `Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
 
 - Every component accepts `className`, and `xxxClassName` props for its inner elements (`labelClassName`, `inputClassName`…).
 - Labelled controls take `label`, `description` and `errors` (a list of messages: any message makes the control invalid and describes it).

package/bin/check-theme.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+// Checks the contrast of a theme: `panneau-check-theme theme.json`. See `--help`.
+import { runCheckTheme } from '../dist/theme/cli.js';
+
+process.exitCode = await runCheckTheme(process.argv.slice(2));

package/dist/alert/Alert.css

@@ -1,56 +1,42 @@
-.panneau-alert-YltdMY {
+.panneau-alert {
     display: flex;
     align-items: flex-start;
-    gap: var(--panneau-space-3);
-    padding: var(--panneau-space-3) var(--panneau-space-4);
+    gap: var(--panneau-alert-gap, var(--panneau-space-3));
+    padding: var(--panneau-alert-padding-y, var(--panneau-space-3))
+        var(--panneau-alert-padding-x, var(--panneau-space-4));
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-sunken);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-md);
+    border: var(--panneau-alert-border-width, var(--panneau-border-width)) solid transparent;
+    border-radius: var(--panneau-alert-radius, var(--panneau-radius-md));
 }
 
-.panneau-success-Z7VQdb {
-    background-color: var(--panneau-color-success-subtle);
-    border-color: var(--panneau-color-success-border);
-}
-
-.panneau-danger-7fFkRR {
-    background-color: var(--panneau-color-danger-subtle);
-    border-color: var(--panneau-color-danger-border);
-}
-
-.panneau-warning-xvkEcQ {
-    background-color: var(--panneau-color-warning-subtle);
-    border-color: var(--panneau-color-warning-border);
-}
-
-.panneau-info-beWi9v {
-    background-color: var(--panneau-color-info-subtle);
-    border-color: var(--panneau-color-info-border);
-}
-
-.panneau-icon-blRAxm {
+.panneau-alert-icon {
     margin-top: 0.125rem;
-    color: var(--panneau-color-text-muted);
+    color: var(--panneau-tone-text);
 }
 
-.panneau-success-Z7VQdb .panneau-icon-blRAxm {
-    color: var(--panneau-color-success);
+/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */
+
+.panneau-alert-subtle {
+    background-color: var(--panneau-tone-subtle);
+    border-color: var(--panneau-tone-border);
 }
 
-.panneau-danger-7fFkRR .panneau-icon-blRAxm {
-    color: var(--panneau-color-danger);
+.panneau-alert-outline {
+    background-color: var(--panneau-color-surface);
+    border-color: var(--panneau-tone-outline);
 }
 
-.panneau-warning-xvkEcQ .panneau-icon-blRAxm {
-    color: var(--panneau-color-warning);
+.panneau-alert-solid {
+    color: var(--panneau-tone-solid-text);
+    background-color: var(--panneau-tone-solid);
+    border-color: var(--panneau-tone-solid);
 }
 
-.panneau-info-beWi9v .panneau-icon-blRAxm {
-    color: var(--panneau-color-info);
+.panneau-alert-solid .panneau-alert-icon {
+    color: inherit;
 }
 
-.panneau-content-dNGM-n {
+.panneau-alert-content {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -58,21 +44,21 @@
     min-width: 0;
 }
 
-.panneau-title-uRgCXb {
-    font-weight: var(--panneau-font-weight-bold);
+.panneau-alert-title {
+    font-weight: var(--panneau-alert-title-font-weight, var(--panneau-font-weight-bold));
 }
 
-.panneau-body-2meig0 {
+.panneau-alert-body {
     overflow-wrap: anywhere;
 }
 
-.panneau-actions-MXSoKc {
+.panneau-alert-actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--panneau-space-2);
     margin-top: var(--panneau-space-2);
 }
 
-.panneau-dismiss-LWaGfl {
+.panneau-alert-dismiss {
     margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;
 }

package/dist/alert/Alert.d.ts

@@ -1,12 +1,26 @@
 import type { ReactNode, Ref } from 'react';
 import { type IconComponent } from '../icon/Icon';
-export type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+import type { Tone } from '../theme/tones';
+/** @deprecated Use `Tone`. */
+export type AlertTone = Tone;
+/** How an alert uses its tone. */
+export type AlertAppearance = 'subtle' | 'outline' | 'solid';
+/**
+ * Named variants of `Alert`, registered by a theme (`components.alert.variants`). Declare them
+ * here so that `variant="banner"` type-checks.
+ */
+export interface AlertVariants {
+}
 export interface AlertProps {
     /** Defaults to `neutral`. */
-    tone?: AlertTone;
+    tone?: Tone;
+    /** Defaults to `subtle`. */
+    appearance?: AlertAppearance;
+    /** A named variant of the theme. */
+    variant?: keyof AlertVariants & string;
     title?: ReactNode;
     children?: ReactNode;
-    /** Replaces the icon of the tone. `null` hides it. */
+    /** Replaces the icon of the tone (an info icon for tones added by a theme). `null` hides it. */
     icon?: IconComponent | null;
     /** Buttons under the message. */
     actions?: ReactNode;
@@ -26,5 +40,5 @@ export interface AlertProps {
     bodyClassName?: string;
 }
 /** A message inside the page: an error summary, a warning, a confirmation. */
-export declare function Alert({ tone, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName, }: AlertProps): import("react").JSX.Element;
+export declare function Alert({ tone, appearance, variant, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName, }: AlertProps): import("react").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAU9E,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,SAAS,EACT,cAAc,EACd,aAAa,GAChB,EAAE,UAAU,+BAmCZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,8BAA8B;AAC9B,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC;AAE7B,kCAAkC;AAClC,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D;;;GAGG;AAEH,MAAM,WAAW,aAAa;CAAG;AAUjC,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,4BAA4B;IAC5B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gGAAgG;IAChG,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,UAAqB,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,SAAS,EACT,cAAc,EACd,aAAa,GAChB,EAAE,UAAU,+BA0CZ"}

package/dist/alert/Alert.js

@@ -2,6 +2,7 @@ import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { messages } from "../intl/messages.js";
 import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import { toneClass } from "../theme/toneClass.js";
 import { IconButton } from "../icon-button/IconButton.js";
 import Alert_module_default from "./Alert.module.js";
 import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
@@ -15,15 +16,15 @@ var TONE_ICONS = {
 	info: Info
 };
 /** A message inside the page: an error summary, a warning, a confirmation. */
-function Alert({ tone = "neutral", title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName }) {
+function Alert({ tone = "neutral", appearance = "subtle", variant, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName }) {
 	const intl = usePanneauIntl();
-	const shown = icon === void 0 ? TONE_ICONS[tone] : icon;
+	const shown = icon === void 0 ? TONE_ICONS[tone] ?? Info : icon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		id,
 		role,
 		tabIndex,
-		className: cx(Alert_module_default.alert, Alert_module_default[tone], className),
+		className: cx("panneau-alert", Alert_module_default.alert, toneClass(tone), Alert_module_default[appearance], variant !== void 0 && `panneau-alert-variant-${variant}`, className),
 		children: [
 			shown !== null ? /* @__PURE__ */ jsx(Icon, {
 				icon: shown,

package/dist/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["styles"],"sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';\n\nconst TONE_ICONS: Record<AlertTone, IconComponent> = {\n    neutral: Info,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nexport interface AlertProps {\n    /** Defaults to `neutral`. */\n    tone?: AlertTone;\n    title?: ReactNode;\n    children?: ReactNode;\n    /** Replaces the icon of the tone. `null` hides it. */\n    icon?: IconComponent | null;\n    /** Buttons under the message. */\n    actions?: ReactNode;\n    /** Shows a close button. */\n    onDismiss?: () => void;\n    /**\n     * `alert` announces the message as soon as it appears, for errors that need attention.\n     * `status` announces it politely. Without a role, it is only read in place.\n     */\n    role?: 'alert' | 'status';\n    id?: string;\n    /** Makes the alert focusable, to move focus to it (an error summary). */\n    tabIndex?: number;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n    titleClassName?: string;\n    bodyClassName?: string;\n}\n\n/** A message inside the page: an error summary, a warning, a confirmation. */\nexport function Alert({\n    tone = 'neutral',\n    title,\n    children,\n    icon,\n    actions,\n    onDismiss,\n    role,\n    id,\n    tabIndex,\n    ref,\n    className,\n    titleClassName,\n    bodyClassName,\n}: AlertProps) {\n    const intl = usePanneauIntl();\n    const shown = icon === undefined ? TONE_ICONS[tone] : icon;\n    return (\n        <div\n            ref={ref}\n            id={id}\n            role={role}\n            tabIndex={tabIndex}\n            className={cx(styles.alert, styles[tone], className)}\n        >\n            {shown !== null ? <Icon icon={shown} size=\"lg\" className={styles.icon} /> : null}\n            <div className={styles.content}>\n                {title !== undefined && title !== null ? (\n                    <div className={cx(styles.title, titleClassName)}>{title}</div>\n                ) : null}\n                {children !== undefined && children !== null ? (\n                    <div className={cx(styles.body, bodyClassName)}>{children}</div>\n                ) : null}\n                {actions !== undefined && actions !== null ? (\n                    <div className={styles.actions}>{actions}</div>\n                ) : null}\n            </div>\n            {onDismiss !== undefined ? (\n                <IconButton\n                    icon={X}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.close)}\n                    showTooltip={false}\n                    onPress={onDismiss}\n                    className={styles.dismiss}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,aAA+C;CACjD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACV;;AA4BA,SAAgB,MAAM,EAClB,OAAO,WACP,OACA,UACA,MACA,SACA,WACA,MACA,IACA,UACA,KACA,WACA,gBACA,iBACW;CACX,MAAM,OAAO,eAAe;CAC5B,MAAM,QAAQ,SAAS,KAAA,IAAY,WAAW,QAAQ;CACtD,OACI,qBAAC,OAAD;EACS;EACD;EACE;EACI;EACV,WAAW,GAAGA,qBAAO,OAAOA,qBAAO,OAAO,SAAS;EALvD,UAAA;GAOK,UAAU,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAK;IAAK,WAAWA,qBAAO;GAAK,CAAA,IAAM;GAC5E,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,OAAO,cAAc;MAAI,UAAA;KAAW,CAAA,IAC9D;KACH,aAAa,KAAA,KAAa,aAAa,OACpC,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,MAAM,aAAa;MAAI;KAAc,CAAA,IAC/D;KACH,YAAY,KAAA,KAAa,YAAY,OAClC,oBAAC,OAAD;MAAK,WAAWA,qBAAO;MAAU,UAAA;KAAa,CAAA,IAC9C;IACH;;GACJ,cAAc,KAAA,IACX,oBAAC,YAAD;IACI,MAAM;IACN,MAAK;IACL,OAAO,KAAK,cAAc,SAAS,KAAK;IACxC,aAAa;IACb,SAAS;IACT,WAAWA,qBAAO;GAAQ,CAAA,IAE9B;EACH;;AAEb"}
+{"version":3,"file":"Alert.js","names":["styles"],"sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { toneClass } from '../theme/toneClass';\nimport type { Tone } from '../theme/tones';\nimport { cx } from '../utils/cx';\nimport styles from './Alert.module.css';\n\n/** @deprecated Use `Tone`. */\nexport type AlertTone = Tone;\n\n/** How an alert uses its tone. */\nexport type AlertAppearance = 'subtle' | 'outline' | 'solid';\n\n/**\n * Named variants of `Alert`, registered by a theme (`components.alert.variants`). Declare them\n * here so that `variant=\"banner\"` type-checks.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- extended by projects\nexport interface AlertVariants {}\n\nconst TONE_ICONS: Partial<Record<Tone, IconComponent>> = {\n    neutral: Info,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nexport interface AlertProps {\n    /** Defaults to `neutral`. */\n    tone?: Tone;\n    /** Defaults to `subtle`. */\n    appearance?: AlertAppearance;\n    /** A named variant of the theme. */\n    variant?: keyof AlertVariants & string;\n    title?: ReactNode;\n    children?: ReactNode;\n    /** Replaces the icon of the tone (an info icon for tones added by a theme). `null` hides it. */\n    icon?: IconComponent | null;\n    /** Buttons under the message. */\n    actions?: ReactNode;\n    /** Shows a close button. */\n    onDismiss?: () => void;\n    /**\n     * `alert` announces the message as soon as it appears, for errors that need attention.\n     * `status` announces it politely. Without a role, it is only read in place.\n     */\n    role?: 'alert' | 'status';\n    id?: string;\n    /** Makes the alert focusable, to move focus to it (an error summary). */\n    tabIndex?: number;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n    titleClassName?: string;\n    bodyClassName?: string;\n}\n\n/** A message inside the page: an error summary, a warning, a confirmation. */\nexport function Alert({\n    tone = 'neutral',\n    appearance = 'subtle',\n    variant,\n    title,\n    children,\n    icon,\n    actions,\n    onDismiss,\n    role,\n    id,\n    tabIndex,\n    ref,\n    className,\n    titleClassName,\n    bodyClassName,\n}: AlertProps) {\n    const intl = usePanneauIntl();\n    const shown = icon === undefined ? (TONE_ICONS[tone] ?? Info) : icon;\n    return (\n        <div\n            ref={ref}\n            id={id}\n            role={role}\n            tabIndex={tabIndex}\n            className={cx(\n                'panneau-alert',\n                styles.alert,\n                toneClass(tone),\n                styles[appearance],\n                variant !== undefined && `panneau-alert-variant-${variant}`,\n                className,\n            )}\n        >\n            {shown !== null ? <Icon icon={shown} size=\"lg\" className={styles.icon} /> : null}\n            <div className={styles.content}>\n                {title !== undefined && title !== null ? (\n                    <div className={cx(styles.title, titleClassName)}>{title}</div>\n                ) : null}\n                {children !== undefined && children !== null ? (\n                    <div className={cx(styles.body, bodyClassName)}>{children}</div>\n                ) : null}\n                {actions !== undefined && actions !== null ? (\n                    <div className={styles.actions}>{actions}</div>\n                ) : null}\n            </div>\n            {onDismiss !== undefined ? (\n                <IconButton\n                    icon={X}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.close)}\n                    showTooltip={false}\n                    onPress={onDismiss}\n                    className={styles.dismiss}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,aAAmD;CACrD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACV;;AAgCA,SAAgB,MAAM,EAClB,OAAO,WACP,aAAa,UACb,SACA,OACA,UACA,MACA,SACA,WACA,MACA,IACA,UACA,KACA,WACA,gBACA,iBACW;CACX,MAAM,OAAO,eAAe;CAC5B,MAAM,QAAQ,SAAS,KAAA,IAAa,WAAW,SAAS,OAAQ;CAChE,OACI,qBAAC,OAAD;EACS;EACD;EACE;EACI;EACV,WAAW,GACP,iBACAA,qBAAO,OACP,UAAU,IAAI,GACdA,qBAAO,aACP,YAAY,KAAA,KAAa,yBAAyB,WAClD,SACJ;EAZJ,UAAA;GAcK,UAAU,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAK;IAAK,WAAWA,qBAAO;GAAK,CAAA,IAAM;GAC5E,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,OAAO,cAAc;MAAI,UAAA;KAAW,CAAA,IAC9D;KACH,aAAa,KAAA,KAAa,aAAa,OACpC,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,MAAM,aAAa;MAAI;KAAc,CAAA,IAC/D;KACH,YAAY,KAAA,KAAa,YAAY,OAClC,oBAAC,OAAD;MAAK,WAAWA,qBAAO;MAAU,UAAA;KAAa,CAAA,IAC9C;IACH;;GACJ,cAAc,KAAA,IACX,oBAAC,YAAD;IACI,MAAM;IACN,MAAK;IACL,OAAO,KAAK,cAAc,SAAS,KAAK;IACxC,aAAa;IACb,SAAS;IACT,WAAWA,qBAAO;GAAQ,CAAA,IAE9B;EACH;;AAEb"}

package/dist/alert/Alert.module.js

@@ -1,23 +1,21 @@
 import "./Alert.css";
 //#region src/alert/Alert.module.css
-var alert = "panneau-alert-YltdMY";
-var success = "panneau-success-Z7VQdb";
-var danger = "panneau-danger-7fFkRR";
-var warning = "panneau-warning-xvkEcQ";
-var info = "panneau-info-beWi9v";
-var icon = "panneau-icon-blRAxm";
-var content = "panneau-content-dNGM-n";
-var title = "panneau-title-uRgCXb";
-var body = "panneau-body-2meig0";
-var actions = "panneau-actions-MXSoKc";
-var dismiss = "panneau-dismiss-LWaGfl";
+var alert = "panneau-alert";
+var icon = "panneau-alert-icon";
+var subtle = "panneau-alert-subtle";
+var outline = "panneau-alert-outline";
+var solid = "panneau-alert-solid";
+var content = "panneau-alert-content";
+var title = "panneau-alert-title";
+var body = "panneau-alert-body";
+var actions = "panneau-alert-actions";
+var dismiss = "panneau-alert-dismiss";
 var Alert_module_default = {
 	alert,
-	success,
-	danger,
-	warning,
-	info,
 	icon,
+	subtle,
+	outline,
+	solid,
 	content,
 	title,
 	body,
@@ -25,6 +23,6 @@ var Alert_module_default = {
 	dismiss
 };
 //#endregion
-export { actions, alert, body, content, danger, Alert_module_default as default, dismiss, icon, info, success, title, warning };
+export { actions, alert, body, content, Alert_module_default as default, dismiss, icon, outline, solid, subtle, title };
 
 //# sourceMappingURL=Alert.module.js.map

package/dist/alert/Alert.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.js","names":[],"sources":["../../src/alert/Alert.module.css"],"sourcesContent":[".alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.success {\n    background-color: var(--panneau-color-success-subtle);\n    border-color: var(--panneau-color-success-border);\n}\n\n.danger {\n    background-color: var(--panneau-color-danger-subtle);\n    border-color: var(--panneau-color-danger-border);\n}\n\n.warning {\n    background-color: var(--panneau-color-warning-subtle);\n    border-color: var(--panneau-color-warning-border);\n}\n\n.info {\n    background-color: var(--panneau-color-info-subtle);\n    border-color: var(--panneau-color-info-border);\n}\n\n.icon {\n    margin-top: 0.125rem;\n    color: var(--panneau-color-text-muted);\n}\n\n.success .icon {\n    color: var(--panneau-color-success);\n}\n\n.danger .icon {\n    color: var(--panneau-color-danger);\n}\n\n.warning .icon {\n    color: var(--panneau-color-warning);\n}\n\n.info .icon {\n    color: var(--panneau-color-info);\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.title {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.body {\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-top: var(--panneau-space-2);\n}\n\n.dismiss {\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;\n}\n"],"mappings":""}
+{"version":3,"file":"Alert.module.js","names":[],"sources":["../../src/alert/Alert.module.css"],"sourcesContent":[".alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-alert-gap, var(--panneau-space-3));\n    padding: var(--panneau-alert-padding-y, var(--panneau-space-3))\n        var(--panneau-alert-padding-x, var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    border: var(--panneau-alert-border-width, var(--panneau-border-width)) solid transparent;\n    border-radius: var(--panneau-alert-radius, var(--panneau-radius-md));\n}\n\n.icon {\n    margin-top: 0.125rem;\n    color: var(--panneau-tone-text);\n}\n\n/* Appearances: they read the --panneau-tone-* variables of the tone class (decision 0024). */\n\n.subtle {\n    background-color: var(--panneau-tone-subtle);\n    border-color: var(--panneau-tone-border);\n}\n\n.outline {\n    background-color: var(--panneau-color-surface);\n    border-color: var(--panneau-tone-outline);\n}\n\n.solid {\n    color: var(--panneau-tone-solid-text);\n    background-color: var(--panneau-tone-solid);\n    border-color: var(--panneau-tone-solid);\n}\n\n.solid .icon {\n    color: inherit;\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.title {\n    font-weight: var(--panneau-alert-title-font-weight, var(--panneau-font-weight-bold));\n}\n\n.body {\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-top: var(--panneau-space-2);\n}\n\n.dismiss {\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;\n}\n"],"mappings":""}

package/dist/alert/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Alert. */
+export declare const alertTokens: import("..").ComponentTokens<"alert", "panneau-alert-radius" | "panneau-alert-gap" | "panneau-alert-padding-y" | "panneau-alert-padding-x" | "panneau-alert-border-width" | "panneau-alert-title-font-weight">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/alert/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/alert/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,gNAatB,CAAC"}

package/dist/alert/tokens.js

@@ -0,0 +1,21 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/alert/tokens.ts
+/** Tokens of Alert. */
+var alertTokens = defineComponentTokens("alert", {
+	/** Space between the icon, the content and the dismiss button. */
+	gap: "var(--panneau-space-3)",
+	/** Vertical padding. */
+	"padding-y": "var(--panneau-space-3)",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-4)",
+	/** Width of the border. */
+	"border-width": "var(--panneau-border-width)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-md)",
+	/** Font weight of the title. */
+	"title-font-weight": "var(--panneau-font-weight-bold)"
+});
+//#endregion
+export { alertTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/alert/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/alert/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Alert. */\nexport const alertTokens = defineComponentTokens('alert', {\n    /** Space between the icon, the content and the dismiss button. */\n    gap: 'var(--panneau-space-3)',\n    /** Vertical padding. */\n    'padding-y': 'var(--panneau-space-3)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-4)',\n    /** Width of the border. */\n    'border-width': 'var(--panneau-border-width)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-md)',\n    /** Font weight of the title. */\n    'title-font-weight': 'var(--panneau-font-weight-bold)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,KAAK;;CAEL,aAAa;;CAEb,aAAa;;CAEb,gBAAgB;;CAEhB,QAAQ;;CAER,qBAAqB;AACzB,CAAC"}