@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/consent/consent.utils.js

@@ -0,0 +1,82 @@
+/** Cookie and storage consent: the record kept, and how it is read and written. */
+export const DEFAULT_STORAGE_KEY = "st-consent";
+export const DEFAULT_CATEGORIES = [
+    {
+        id: "necessary",
+        label: "Necessary",
+        description: "Needed for the site to work. These cannot be switched off.",
+        required: true,
+    },
+    { id: "analytics", label: "Analytics", description: "Help us understand how the site is used." },
+    { id: "marketing", label: "Marketing", description: "Used to show relevant content and measure campaigns." },
+];
+const DAY_MS = 86_400_000;
+/** Every category set to the same answer; required categories are always on. */
+export function choicesFor(categories, value) {
+    return Object.fromEntries(categories.map((c) => [c.id, c.required ? true : value]));
+}
+/** Keeps only known categories, forces required ones on, and treats anything missing as off. */
+export function normaliseChoices(categories, choices) {
+    return Object.fromEntries(categories.map((c) => [c.id, c.required ? true : choices[c.id] === true]));
+}
+/** True when a stored record is current: same version, not expired, covers every category. */
+export function isRecordValid(record, version, categories, expiresDays, now = Date.now()) {
+    if (!record || record.version !== version)
+        return false;
+    if (now - record.savedAt > expiresDays * DAY_MS)
+        return false;
+    return categories.every((c) => typeof record.choices?.[c.id] === "boolean");
+}
+export function parseRecord(raw) {
+    if (!raw)
+        return null;
+    try {
+        const value = JSON.parse(raw);
+        if (value &&
+            typeof value.version === "string" &&
+            typeof value.savedAt === "number" &&
+            value.choices &&
+            typeof value.choices === "object") {
+            return value;
+        }
+    }
+    catch {
+        // Fall through: a corrupt record is the same as no record.
+    }
+    return null;
+}
+export function readRecord(key = DEFAULT_STORAGE_KEY) {
+    try {
+        return parseRecord(window.localStorage.getItem(key));
+    }
+    catch {
+        return null; // storage can be blocked
+    }
+}
+export function writeRecord(record, key = DEFAULT_STORAGE_KEY) {
+    try {
+        window.localStorage.setItem(key, JSON.stringify(record));
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+export function clearRecord(key = DEFAULT_STORAGE_KEY) {
+    try {
+        window.localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+/**
+ * The visitor's saved choices, or null if they have not chosen yet. Use it to decide whether to
+ * load an analytics script:
+ *
+ *   if (getConsent()?.analytics) loadAnalytics();
+ */
+export function getConsent(key = DEFAULT_STORAGE_KEY) {
+    return readRecord(key)?.choices ?? null;
+}
+//# sourceMappingURL=consent.utils.js.map

package/dist/components/consent/consent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consent.utils.js","sourceRoot":"","sources":["../../../src/components/consent/consent.utils.ts"],"names":[],"mappings":"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"}

package/dist/components/contact/contact.d.ts

@@ -0,0 +1,22 @@
+import { StSection } from "../section/section.js";
+/**
+ * A "get in touch" row: your contact details beside a form. The columns stack on narrow screens,
+ * details first. The row only lays things out: the form is yours, so it can post wherever you
+ * choose.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, the default slot (addresses, email, opening hours) and
+ * `form` (usually an `st-form`).
+ */
+export declare class StContact extends StSection {
+    /** Puts the form on the left on wide screens. */
+    reverse: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-contact": StContact;
+    }
+}
+//# sourceMappingURL=contact.d.ts.map

package/dist/components/contact/contact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../src/components/contact/contact.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,SAAS;IACtC,iDAAiD;IACP,OAAO,UAAS;IAE1D,cAGC;IAED,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,sCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/contact/contact.js

@@ -0,0 +1,83 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+/**
+ * A "get in touch" row: your contact details beside a form. The columns stack on narrow screens,
+ * details first. The row only lays things out: the form is yours, so it can post wherever you
+ * choose.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, the default slot (addresses, email, opening hours) and
+ * `form` (usually an `st-form`).
+ */
+let StContact = class StContact extends StSection {
+    constructor() {
+        super();
+        /** Puts the form on the left on wide screens. */
+        this.reverse = false;
+        this.align = "start";
+    }
+    render() {
+        return this.frame(html `
+        <div class="contact">
+          <div class="text">
+            ${this.renderHeader()}
+            ${this.animateIn(html `<div class="details"><slot @slotchange=${this._onItemsChange}></slot></div>`, 100)}
+          </div>
+          <div class="form">${this.animateIn(html `<slot name="form"></slot>`, 150)}</div>
+        </div>
+      `, { header: false, animated: false });
+    }
+};
+StContact.styles = [
+    ...StSection.styles,
+    css `
+      .contact {
+        display: grid;
+        gap: var(--st-spacing-2xl);
+        align-items: start;
+      }
+
+      @media (min-width: 52rem) {
+        .contact {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        :host([reverse]) .form {
+          order: -1;
+        }
+      }
+
+      .header {
+        margin-bottom: var(--st-spacing-lg);
+      }
+
+      .details {
+        color: var(--st-color-text-muted);
+      }
+
+      .details ::slotted(*) {
+        margin: 0 0 var(--st-spacing-md);
+      }
+
+      .form {
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StContact.prototype, "reverse", void 0);
+StContact = __decorate([
+    customElement("st-contact")
+], StContact);
+export { StContact };
+//# sourceMappingURL=contact.js.map

package/dist/components/contact/contact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact.js","sourceRoot":"","sources":["../../../src/components/contact/contact.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAItC;QACE,KAAK,EAAE,CAAC;QAJV,iDAAiD;QACP,YAAO,GAAG,KAAK,CAAC;QAIxD,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IACvB,CAAC;IA0CD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA;;;cAGI,IAAI,CAAC,YAAY,EAAE;cACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAA,0CAA0C,IAAI,CAAC,cAAc,gBAAgB,EAAE,GAAG,CAAC;;8BAEtF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAA,2BAA2B,EAAE,GAAG,CAAC;;OAE3E,EACD,EAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAC,CACjC,CAAC;IACJ,CAAC;CACF,CAAA;AAtDQ,gBAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCF;CACF,AAtCY,CAsCX;AA7CwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB;AAF/C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+DrB"}

package/dist/components/container/container.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+export declare const containerSizes: readonly ["sm", "md", "lg", "xl", "full"];
+export type ContainerSize = (typeof containerSizes)[number];
+/**
+ * Centres content and limits its line length, with side padding that grows with the screen.
+ * Use `size` to pick the maximum width; `full` removes the limit. Set `flush` to drop the side
+ * padding (for example to let an image touch the screen edges).
+ */
+export declare class StContainer extends LitElement {
+    size: ContainerSize;
+    flush: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-container": StContainer;
+    }
+}
+//# sourceMappingURL=container.d.ts.map

package/dist/components/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/components/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,eAAO,MAAM,cAAc,YAAI,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAU,CAAC;AACxE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAU;IACA,IAAI,EAAE,aAAa,CAAQ;IAC1B,KAAK,UAAS;IAExD,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/components/container/container.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+export const containerSizes = ["sm", "md", "lg", "xl", "full"];
+/**
+ * Centres content and limits its line length, with side padding that grows with the screen.
+ * Use `size` to pick the maximum width; `full` removes the limit. Set `flush` to drop the side
+ * padding (for example to let an image touch the screen edges).
+ */
+let StContainer = class StContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "lg";
+        this.flush = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StContainer.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+        max-width: var(--_max, var(--st-container-lg));
+        margin-inline: auto;
+        padding-inline: var(--st-gutter);
+      }
+
+      :host([flush]) {
+        padding-inline: 0;
+      }
+
+      :host([size="sm"]) {
+        --_max: var(--st-container-sm);
+      }
+      :host([size="md"]) {
+        --_max: var(--st-container-md);
+      }
+      :host([size="lg"]) {
+        --_max: var(--st-container-lg);
+      }
+      :host([size="xl"]) {
+        --_max: var(--st-container-xl);
+      }
+      :host([size="full"]) {
+        --_max: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StContainer.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StContainer.prototype, "flush", void 0);
+StContainer = __decorate([
+    customElement("st-container")
+], StContainer);
+export { StContainer };
+//# sourceMappingURL=container.js.map

package/dist/components/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/components/container/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAU,CAAC;AAGxE;;;;GAIG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACoC,SAAI,GAAkB,IAAI,CAAC;QAC1B,UAAK,GAAG,KAAK,CAAC;IAsC1D,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AApCQ,kBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;CACF,AA/BY,CA+BX;AAlCuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAA4B;AAC1B;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAe;AAF7C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwCvB"}

package/dist/components/content-card/content-card.js

@@ -48,7 +48,7 @@ StContentCard.styles = [
         height: 100%;
         background-color: var(--st-color-surface);
         border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md, 0.5rem);
+        border-radius: var(--st-radius-md);
         overflow: hidden;
         text-decoration: none;
         color: inherit;
@@ -71,7 +71,7 @@ StContentCard.styles = [
           Safari fix: WebKit ignores :host-context. 
           Set --st-card-shadow-hover in your global dark mode CSS instead! 
         */
-        box-shadow: var(--st-card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.05)); 
+        box-shadow: var(--st-card-shadow-hover, var(--st-shadow-md)); 
       }
 
       /* ==========================================================
@@ -102,8 +102,8 @@ StContentCard.styles = [
       .content {
         display: flex;
         flex-direction: column;
-        padding: var(--st-spacing-md, 1.25rem);
-        gap: var(--st-spacing-sm, 0.5rem);
+        padding: var(--st-spacing-md);
+        gap: var(--st-spacing-sm);
         flex: 1;
       }
 

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,89 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+export interface MenuItem {
+    /** Text shown for the item. Omit for a separator. */
+    label?: string;
+    /** Identifier returned in `st-menu-select`. Defaults to the label. */
+    value?: string;
+    icon?: string;
+    /** Right-aligned hint such as "Ctrl+C" (display only). */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Styles the item as destructive, e.g. Delete. */
+    danger?: boolean;
+    /** Turns the item into a checkbox item. Update `items` in response to `st-menu-select`. */
+    checked?: boolean;
+    /** Keeps the menu open after selecting, e.g. for toggles. */
+    keepOpen?: boolean;
+    /** Renders a divider line instead of an item. */
+    separator?: boolean;
+}
+export type MenuTrigger = "contextmenu" | "click" | "manual";
+/**
+ * A reusable menu styled like a native right-click menu. It renders in the top layer, so it is
+ * never clipped by scrolling containers, flips to stay on screen, and is fully keyboard
+ * operable (arrows, Home/End, type-ahead, Enter/Space, Escape).
+ *
+ * Opening: wrap an element in it (default trigger is right-click, which also covers the
+ * keyboard Menu key and Shift+F10), or call `show(x, y, context)` / `showAt(element, context)`
+ * with `trigger="manual"`.
+ *
+ * Events (bubble, composed): `st-menu-open`, `st-menu-close`, and `st-menu-select` with
+ * `{ item, value, context }`.
+ */
+export declare class StContextMenu extends LitElement {
+    items: MenuItem[];
+    trigger: MenuTrigger;
+    /** Accessible name of the menu. */
+    label: string;
+    disabled: boolean;
+    private _open;
+    private _active;
+    private _menu;
+    private _context;
+    private _returnFocus;
+    private _clicked;
+    private _typeahead;
+    private _typeaheadTimer?;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** True while the menu is showing. */
+    get isOpen(): boolean;
+    private _onContextMenu;
+    private _onTriggerClick;
+    /** Opens the menu at viewport coordinates. `context` is echoed back in `st-menu-select`. */
+    show(x: number, y: number, context?: unknown): void;
+    private _show;
+    /** Opens the menu below (or above, if there is no room) an element, e.g. a "more" button. */
+    showAt(anchor: HTMLElement, context?: unknown): void;
+    /** Closes the menu and restores focus to where it was before opening. */
+    hide(): void;
+    private _activeElement;
+    private _place;
+    /**
+     * Light dismiss is handled here rather than by popover="auto", because browsers that fire
+     * contextmenu on mouse-down (macOS, Linux) would close an auto popover on the mouse-up.
+     */
+    private _listen;
+    private _dismiss;
+    private _onOutsidePointer;
+    private _onEscape;
+    private _closeOnLayoutChange;
+    private _onToggle;
+    private _afterClose;
+    private _isFocusable;
+    private _nextEnabled;
+    private _focusItem;
+    private _onKeydown;
+    private _typeaheadSearch;
+    private _select;
+    private _renderItem;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-context-menu": StContextMenu;
+    }
+}
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGnD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,QAAQ;IACvB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAI7D;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,UAAU;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACtB,OAAO,EAAE,WAAW,CAAiB;IAC/D,mCAAmC;IACT,KAAK,SAAa;IACF,QAAQ,UAAS;IAElD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAM;IAEV,OAAO,CAAC,KAAK,CAAe;IAEhD,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,MAAM,CAAC,MAAM,4BAiGX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAKnB;IAED,sCAAsC;IACtC,IAAI,MAAM,YAET;IAED,OAAO,CAAC,cAAc,CASpB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,4FAA4F;IAC5F,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,QAE3C;IAED,OAAO,CAAC,KAAK;IAoBb,6FAA6F;IAC7F,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,QAI5C;IAED,yEAAyE;IACzE,IAAI,SAGH;IAED,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,MAAM;IAed;;;OAGG;IACH,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,QAAQ,CAAqB;IAErC,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,SAAS,CAIf;IAEF,OAAO,CAAC,oBAAoB,CAI1B;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,WAAW;IA8BnB,MAAM,yCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}