@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/dist/2-core/ds-stat.js

@@ -0,0 +1,137 @@
+// ds-stat.ts
+// A figure with its label and a line for its change or caption, written in
+// the current language through 0-face/format.ts. Drawn by 1-root/figures.css,
+// the same classes a page without scripts writes.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { figureCells, figureFormat, formatFigure } from "./figures";
+import "./ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import figures from "../1-root/figures.css?inline";
+import styles from "./styles/ds-stat.css?inline";
+const TONES = ["danger", "warning"];
+/**
+ * @element ds-stat
+ * @prop {string} label - What the figure is: a translation key, or literal words.
+ * @prop {number} value - The figure, written as `format` says in the current language.
+ * @prop {string} figure - Words in place of the value ("Incomplete"): a key, or literal words.
+ * @prop {"number" | "compact" | "percent" | "money"} format - How the value is written. Number by default.
+ * @prop {string} currency - The ISO 4217 code for money.
+ * @prop {boolean} minor - The money is counted in the currency's minor unit (cents).
+ * @prop {boolean} whole - Money in whole units only.
+ * @prop {number} digits - Decimals, at least and at most.
+ * @prop {number} change - A change, written with its sign and an up or down icon before the caption.
+ * @prop {"number" | "compact" | "percent" | "money"} changeFormat - How the change is written (`change-format`). The value's format by default; `percent` reads a fraction.
+ * @prop {"danger" | "warning"} changeTone - The change in that colour (`change-tone`), where the page knows which way is bad.
+ * @prop {string} caption - A line under the figure: a key, or literal words.
+ * @prop {string} icon - An icon from the library on its own square before the label.
+ * @prop {"danger" | "warning"} tone - The figure in that colour.
+ * @prop {boolean} cells - Draw each digit in a cell of one width, for a face whose digits differ in width.
+ * @prop {boolean} literal - Show `label`, `figure` and `caption` as written, never looked up.
+ *
+ * @slot label - The label, as inline content.
+ * @slot figure - The figure, when the page writes it itself.
+ * @slot - Anything that belongs between the figure and the caption, such as a `ds-meter`.
+ * @slot caption - The caption, as inline content.
+ *
+ * @example
+ * <ds-stat label="Revenue" value="1234.5" format="money" currency="EUR" change="0.12" change-format="percent" caption="Since last month"></ds-stat>
+ */
+export class Stat extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.format = "number";
+        this.minor = false;
+        this.whole = false;
+        this.cells = false;
+        this.literal = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+        window.addEventListener("translations-ready", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        window.removeEventListener("translations-ready", this.relabel);
+        super.disconnectedCallback();
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    options(format) {
+        return { format: figureFormat(format), currency: this.currency, minor: this.minor, whole: this.whole, digits: this.digits };
+    }
+    /** The figure's text as it is drawn: the words given, or the value written in the current language. */
+    get text() {
+        if (this.figure)
+            return this.words(this.figure);
+        return typeof this.value === "number" ? formatFigure(this.value, this.options(this.format)) : "";
+    }
+    /** The change's text with its sign, or empty without a change. */
+    get changeText() {
+        if (typeof this.change !== "number" || !Number.isFinite(this.change))
+            return "";
+        const format = this.changeFormat ?? this.format;
+        return formatFigure(this.change, { ...this.options(format), signed: true });
+    }
+    slotted(name) {
+        return [...this.children].some(node => (node.getAttribute("slot") ?? "") === name);
+    }
+    drawFigure(text) {
+        if (!this.cells || !text)
+            return text;
+        return html `<span class="hidden-words">${text}</span><span aria-hidden="true">${figureCells(text).map(cell => cell.digit ? html `<span class="ds-stat__digit">${cell.text}</span>` : cell.text)}</span>`;
+    }
+    render() {
+        const changed = () => this.requestUpdate();
+        const label = this.words(this.label);
+        const caption = this.words(this.caption);
+        const change = this.changeText;
+        const tone = TONES.includes(this.tone) ? this.tone : undefined;
+        const changeTone = TONES.includes(this.changeTone) ? this.changeTone : undefined;
+        const hasLabel = Boolean(label) || this.slotted("label");
+        const hasCaption = Boolean(caption) || Boolean(change) || this.slotted("caption");
+        const direction = typeof this.change === "number" && this.change !== 0 ? (this.change > 0 ? "up" : "down") : undefined;
+        return html `<div class="ds-stat${tone ? ` ds-stat--${tone}` : ""}" part="stat">
+      <div class="ds-stat__label" part="label" ?hidden=${!hasLabel}>
+        ${this.icon ? html `<span class="ds-stat__icon" part="icon" aria-hidden="true"><ds-icon .type=${this.icon}></ds-icon></span>` : nothing}<slot name="label" @slotchange=${changed}>${label}</slot>
+      </div>
+      <div class="ds-stat__figure" part="figure"><slot name="figure" @slotchange=${changed}>${this.drawFigure(this.text)}</slot></div>
+      <slot></slot>
+      <div class="ds-stat__caption" part="caption" ?hidden=${!hasCaption}>
+        ${change
+            ? html `<span class="ds-stat__change${changeTone ? ` ds-stat__change--${changeTone}` : ""}" part="change">${direction
+                ? html `<ds-icon size="small" type=${direction} aria-hidden="true"></ds-icon>`
+                : nothing}${change}</span>`
+            : nothing}<slot name="caption" @slotchange=${changed}>${caption}</slot>
+      </div>
+    </div>`;
+    }
+}
+Stat.properties = {
+    label: { type: String },
+    value: { type: Number },
+    figure: { type: String },
+    format: { type: String, reflect: true },
+    currency: { type: String },
+    minor: { type: Boolean },
+    whole: { type: Boolean },
+    digits: { type: Number },
+    change: { type: Number },
+    changeFormat: { type: String, attribute: "change-format" },
+    changeTone: { type: String, attribute: "change-tone", reflect: true },
+    caption: { type: String },
+    icon: { type: String },
+    tone: { type: String, reflect: true },
+    cells: { type: Boolean, reflect: true },
+    literal: { type: Boolean, reflect: true },
+};
+Stat.styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+define("ds-stat", Stat);

package/dist/2-core/ds-switch.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from "lit";
 /** The shared switch face. The slotted button retains native activation and refs. */
+/** rounded selects a pill track, white circular thumb and darker-green on state. */
 export declare class Switch extends LitElement {
     static styles: import("lit").CSSResult;
     focus(options?: FocusOptions): void;

package/dist/2-core/ds-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,oFAAoF;AACpF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-switch.js

@@ -2,6 +2,7 @@ import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import styles from "./styles/ds-switch.css?inline";
 /** The shared switch face. The slotted button retains native activation and refs. */
+/** rounded selects a pill track, white circular thumb and darker-green on state. */
 export class Switch extends LitElement {
     focus(options) { this.querySelector(":scope > button")?.focus(options); }
     render() { return html `<slot></slot>`; }

package/dist/2-core/ds-text.d.ts

@@ -6,6 +6,16 @@ import { LitElement } from "lit";
  * @prop {string} text - The translation key (optional if using slot content)
  * @prop {boolean} literal - The text is what someone wrote, not a key: show it
  *   as it stands, never looked up, never translated
+ * @prop {"muted" | "title" | "warning" | "danger"} tone - A quieter colour, the
+ *   title grey, the warning colour for something that needs care, or the
+ *   danger colour for a failure or a loss
+ * @prop {"small" | "heading" | "display"} size - 10px, a 13px heading on one
+ *   square, or a 20px title on two squares
+ * @prop {boolean} strong - The medium weight
+ * @prop {boolean} wrap - Let the text run over several lines, each one square
+ *
+ * The four work alike for a translation key and for literal text. For a
+ * heading, give the element `role="heading"` and `aria-level`.
  *
  * @example
  * // Using slot content as the key (preferred)
@@ -16,6 +26,9 @@ import { LitElement } from "lit";
  *
  * // Something a person typed: a list title, an item, a search they saved
  * <ds-text literal text="Marketing plan"></ds-text>
+ *
+ * // A translated message over several lines, in the danger colour
+ * <ds-text wrap tone="danger" role="alert">Couldn't save your changes</ds-text>
  */
 export declare class Text extends LitElement {
     static get properties(): {
@@ -50,8 +63,8 @@ export declare class Text extends LitElement {
     };
     text: string;
     literal: boolean;
-    tone?: "muted" | "title";
-    size?: "small" | "heading";
+    tone?: "muted" | "title" | "warning" | "danger";
+    size?: "small" | "heading" | "display";
     strong: boolean;
     wrap: boolean;
     _text: string;

package/dist/2-core/ds-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQlD,wBAAwB;IA8BxB,SAAS;IA4BT,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQlD,wBAAwB;IA8BxB,SAAS;IA4BT,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-text.js

@@ -9,6 +9,16 @@ import styles from "./styles/ds-text.css?inline";
  * @prop {string} text - The translation key (optional if using slot content)
  * @prop {boolean} literal - The text is what someone wrote, not a key: show it
  *   as it stands, never looked up, never translated
+ * @prop {"muted" | "title" | "warning" | "danger"} tone - A quieter colour, the
+ *   title grey, the warning colour for something that needs care, or the
+ *   danger colour for a failure or a loss
+ * @prop {"small" | "heading" | "display"} size - 10px, a 13px heading on one
+ *   square, or a 20px title on two squares
+ * @prop {boolean} strong - The medium weight
+ * @prop {boolean} wrap - Let the text run over several lines, each one square
+ *
+ * The four work alike for a translation key and for literal text. For a
+ * heading, give the element `role="heading"` and `aria-level`.
  *
  * @example
  * // Using slot content as the key (preferred)
@@ -19,6 +29,9 @@ import styles from "./styles/ds-text.css?inline";
  *
  * // Something a person typed: a list title, an item, a search they saved
  * <ds-text literal text="Marketing plan"></ds-text>
+ *
+ * // A translated message over several lines, in the danger colour
+ * <ds-text wrap tone="danger" role="alert">Couldn't save your changes</ds-text>
  */
 export class Text extends LitElement {
     static get properties() {

package/dist/2-core/ds-toast.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Toast: short messages that stack in a corner of the page and leave on their own.
+ *
+ * BASED ON SONNER. This component is a Lit port of Sonner, the React toast
+ * library by Emil Kowalski (https://sonner.emilkowal.ski,
+ * https://github.com/emilkowalski/sonner, MIT licence). Its API and behaviour
+ * follow Sonner's, so Sonner's documentation describes how it works:
+ *
+ * - `toast()`, `toast.success()`, `.info()`, `.warning()`, `.error()`,
+ *   `.loading()`, `.message()`, `.promise()` and `.dismiss()` are Sonner's calls,
+ *   with Sonner's options (`id`, `description`, `duration`, `action`, `cancel`,
+ *   `dismissible`, `closeButton`, `important`, `onDismiss`, `onAutoClose`).
+ * - `<ds-toast>` is Sonner's `<Toaster />`, with its `position`, `expand`,
+ *   `visible-toasts`, `duration`, `close-button` and `rich-colors`;
+ *   `contained` draws it inside its positioned parent instead of the window.
+ * - A toast stays until dismissed; an explicitly timed toast pauses while the stack is hovered,
+ *   focused, held or the tab is hidden. Three show at once, stacked behind
+ *   one another and spread out on hover. A swipe towards the edge dismisses one,
+ *   Alt+T reaches them from the keyboard, and they come and go with Sonner's
+ *   400ms slide and fade.
+ *
+ * Where it departs from Sonner, it follows Design system 1: a toast is drawn as
+ * the system's label, an ink chip one control high per line in the tooltip's
+ * colours, with no line or shadow, its actions underlined words; the pile
+ * advances one square per toast, one square from the edge. Only `transform`
+ * and `opacity` animate (a toast stacked behind takes the front one's height at
+ * once instead of animating it). `toast()` also adds a `<ds-toast>` to the page
+ * when there is none, and moving the element keeps its toasts and their time.
+ * An error is announced assertively unless it says `important: false`.
+ *
+ * `toast()` and its queue are framework-free (`0-face/toast-queue.ts`). On a
+ * page without Lit, the page toaster (`0-face/toaster.ts`) draws the same stack
+ * with this component's stylesheet; where a `<ds-toast>` is in the page, it
+ * takes every toast, so a page never shows two stacks.
+ */
+import { LitElement } from "lit";
+import type { ToastPosition } from "../0-face/toast-queue";
+import "./ds-icon";
+export { toast } from "../0-face/toast-queue";
+export type { ToastButton, ToastData, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages, ToastType } from "../0-face/toast-queue";
+/** The region that shows the toasts, Sonner's `<Toaster />`. Put one in the page. */
+export declare class Toaster extends LitElement {
+    static properties: {
+        position: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        expand: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        visibleToasts: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        duration: {
+            type: NumberConstructor;
+        };
+        closeButton: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        richColors: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        contained: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        closeLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _items: {
+            state: boolean;
+        };
+        _hovered: {
+            state: boolean;
+        };
+        _focused: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    position: ToastPosition;
+    expand: boolean;
+    visibleToasts: number;
+    duration: number;
+    closeButton: boolean;
+    richColors: boolean;
+    /** Draw within the nearest positioned ancestor instead of the window. */
+    contained: boolean;
+    /** The region's accessible name; products pass their own words. */
+    label: string;
+    closeLabel: string;
+    private _items;
+    private _hovered;
+    private _focused;
+    private heights;
+    private timers;
+    private interacting;
+    private swipe?;
+    private resizes;
+    private stopListening?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get live();
+    private get expanded();
+    private get paused();
+    private receive;
+    private removeToast;
+    private clearTimer;
+    /** Sonner's timers: each toast keeps its remaining time while the stack is paused. */
+    private syncTimers;
+    private hotkey;
+    private onFocusOut;
+    private measure;
+    protected updated(): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private press;
+    private renderButton;
+    private renderIcon;
+    private renderToast;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-toast": Toaster;
+    }
+}
+//# sourceMappingURL=ds-toast.d.ts.map

package/dist/2-core/ds-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toast.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAY3D,OAAO,KAAK,EAAmC,aAAa,EAAyB,MAAM,uBAAuB,CAAC;AACnH,OAAO,WAAW,CAAC;AAInB,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAK3I,qFAAqF;AACrF,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAaf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAE1B,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IAC5B,yEAAyE;IACjE,SAAS,EAAE,OAAO,CAAC;IAC3B,mEAAmE;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IAC3B,QAAgB,MAAM,CAAS;IAC/B,QAAgB,QAAQ,CAAU;IAClC,QAAgB,QAAQ,CAAU;IAClC,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,KAAK,CAAC,CAA+D;IAC7E,OAAO,CAAC,OAAO,CAAgG;IAC/G,OAAO,CAAC,aAAa,CAAC,CAAa;;IAkBnC,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAgB5B,OAAO,KAAK,IAAI,GAAgE;IAChF,OAAO,KAAK,QAAQ,GAAiG;IACrH,OAAO,KAAK,MAAM,GAA6F;IAE/G,OAAO,CAAC,OAAO,CAcb;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IAKlB,sFAAsF;IACtF,OAAO,CAAC,UAAU,CAiBhB;IAEF,OAAO,CAAC,MAAM,CAQZ;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,OAAO;IAYf,SAAS,CAAC,OAAO,IAAI,IAAI;IAYzB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa,CAQnB;IAEF,OAAO,CAAC,WAAW,CAWjB;IAEF,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAmCnB,MAAM;CA4BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAA;KAAE;CACxD"}