@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/site-header/site-header.js

@@ -0,0 +1,296 @@
+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, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+/**
+ * The top of a site: a logo, navigation links and a place for actions such as a theme toggle or a
+ * call-to-action button. On wide screens the links sit in a row. On narrow screens they fold into
+ * a menu opened by a button; the links stay in the page either way, so search engines see them.
+ *
+ * Slots:
+ *  - `logo`: your brand, usually a link to the home page.
+ *  - default: the navigation links. Mark the current page with `aria-current="page"`.
+ *  - `actions`: controls on the right (theme toggle, buttons).
+ *
+ * A "Skip to content" link is included for keyboard users. When `sticky`, the header publishes
+ * its height as `--st-site-header-height`, which sections use so anchor links are not hidden
+ * behind it.
+ */
+let StSiteHeader = class StSiteHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Keeps the header at the top of the screen while scrolling. */
+        this.sticky = false;
+        /** Screen width (in pixels) below which the links fold into a menu. */
+        this.breakpoint = 768;
+        this.menuLabel = "Menu";
+        this.navLabel = "Main";
+        /** Where the skip link goes. Give your main content this id. */
+        this.skipTo = "#main";
+        this.skipLabel = "Skip to content";
+        this._menuOpen = false;
+        this._compact = false;
+        this._onBreakpoint = (e) => this._applyCompact(e.matches);
+        this._onKeydown = (e) => {
+            if (e.key === "Escape" && this._menuOpen) {
+                this._menuOpen = false;
+                this.renderRoot.querySelector(".toggle")?.focus();
+            }
+        };
+        this._onOutside = (e) => {
+            if (this._menuOpen && !e.composedPath().includes(this))
+                this._menuOpen = false;
+        };
+        /** Choosing a link closes the menu. */
+        this._onNavClick = (e) => {
+            if (e.composedPath().some((el) => el instanceof HTMLAnchorElement))
+                this._menuOpen = false;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._media = window.matchMedia(`(max-width: ${this.breakpoint - 1}px)`);
+        this._media.addEventListener("change", this._onBreakpoint);
+        this._applyCompact(this._media.matches);
+        document.addEventListener("keydown", this._onKeydown);
+        document.addEventListener("pointerdown", this._onOutside);
+        this._resize = new ResizeObserver(() => this._publishHeight());
+        this._resize.observe(this);
+    }
+    disconnectedCallback() {
+        this._media?.removeEventListener("change", this._onBreakpoint);
+        document.removeEventListener("keydown", this._onKeydown);
+        document.removeEventListener("pointerdown", this._onOutside);
+        this._resize?.disconnect();
+        if (this.sticky)
+            document.documentElement.style.removeProperty("--st-site-header-height");
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        if (changed.has("breakpoint") && this._media) {
+            this._media.removeEventListener("change", this._onBreakpoint);
+            this._media = window.matchMedia(`(max-width: ${this.breakpoint - 1}px)`);
+            this._media.addEventListener("change", this._onBreakpoint);
+            this._applyCompact(this._media.matches);
+        }
+        if (changed.has("sticky"))
+            this._publishHeight();
+    }
+    /** Closes the menu. */
+    close() {
+        this._menuOpen = false;
+    }
+    _publishHeight() {
+        const root = document.documentElement.style;
+        if (this.sticky)
+            root.setProperty("--st-site-header-height", `${this.offsetHeight}px`);
+        else
+            root.removeProperty("--st-site-header-height");
+    }
+    _applyCompact(compact) {
+        this._compact = compact;
+        this.toggleAttribute("data-compact", compact);
+        if (!compact)
+            this._menuOpen = false;
+    }
+    render() {
+        return html `
+      <a class="skip" href=${this.skipTo}>${this.skipLabel}</a>
+      <header class="bar">
+        <div class="logo"><slot name="logo"></slot></div>
+        <nav
+          id="site-nav"
+          class=${this._menuOpen ? "open" : ""}
+          aria-label=${this.navLabel}
+          @click=${this._onNavClick}
+        >
+          <slot></slot>
+        </nav>
+        <div class="actions"><slot name="actions"></slot></div>
+        <button
+          class="toggle"
+          type="button"
+          aria-controls="site-nav"
+          aria-expanded=${this._menuOpen ? "true" : "false"}
+          aria-label=${this.menuLabel}
+          @click=${() => (this._menuOpen = !this._menuOpen)}
+        >
+          <st-icon name=${this._menuOpen ? "x" : "menu"} aria-hidden="true"></st-icon>
+        </button>
+      </header>
+    `;
+    }
+};
+StSiteHeader.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        background: var(--st-color-bg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      :host([sticky]) {
+        position: sticky;
+        top: 0;
+        z-index: var(--st-site-header-z, 50);
+      }
+
+      .skip {
+        position: absolute;
+        left: var(--st-spacing-md);
+        top: 0;
+        z-index: 1;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-radius: 0 0 var(--st-radius-md) var(--st-radius-md);
+        background: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        transform: translateY(-120%);
+      }
+
+      .skip:focus {
+        transform: none;
+      }
+
+      .bar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-lg);
+        max-width: var(--st-container-lg);
+        min-height: var(--st-site-header-min-height, 4rem);
+        margin-inline: auto;
+        padding-inline: var(--st-gutter);
+      }
+
+      .logo {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      nav {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: var(--st-spacing-lg);
+      }
+
+      ::slotted(a) {
+        color: var(--st-color-text-muted);
+        font-weight: var(--st-font-weight-medium);
+        text-decoration: none;
+      }
+
+      ::slotted(a:hover),
+      ::slotted(a[aria-current="page"]) {
+        color: var(--st-color-text);
+      }
+
+      ::slotted(a[aria-current="page"]) {
+        text-decoration: underline;
+        text-decoration-color: var(--st-color-primary);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 0.5em;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        margin-left: auto;
+      }
+
+      .toggle {
+        display: none;
+        padding: var(--st-spacing-sm);
+        border: 0;
+        border-radius: var(--st-radius-md);
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .toggle:hover {
+        background: var(--st-color-surface-hover);
+      }
+
+      .toggle:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      /* Narrow screens: the links fold into a panel under the bar. */
+      :host([data-compact]) .toggle {
+        display: inline-flex;
+      }
+
+      :host([data-compact]) nav {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--st-spacing-xs);
+        padding: var(--st-spacing-md) var(--st-gutter);
+        border-bottom: 1px solid var(--st-color-border);
+        background: var(--st-color-bg);
+        box-shadow: var(--st-shadow-lg);
+      }
+
+      :host([data-compact]) nav:not(.open) {
+        display: none;
+      }
+
+      :host([data-compact]) ::slotted(a) {
+        padding: var(--st-spacing-sm) 0;
+      }
+
+      @media print {
+        :host {
+          position: static;
+        }
+        .toggle,
+        .actions {
+          display: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StSiteHeader.prototype, "sticky", void 0);
+__decorate([
+    property({ type: Number })
+], StSiteHeader.prototype, "breakpoint", void 0);
+__decorate([
+    property({ type: String, attribute: "menu-label" })
+], StSiteHeader.prototype, "menuLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "nav-label" })
+], StSiteHeader.prototype, "navLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "skip-to" })
+], StSiteHeader.prototype, "skipTo", void 0);
+__decorate([
+    property({ type: String, attribute: "skip-label" })
+], StSiteHeader.prototype, "skipLabel", void 0);
+__decorate([
+    state()
+], StSiteHeader.prototype, "_menuOpen", void 0);
+__decorate([
+    state()
+], StSiteHeader.prototype, "_compact", void 0);
+StSiteHeader = __decorate([
+    customElement("st-site-header")
+], StSiteHeader);
+export { StSiteHeader };
+//# sourceMappingURL=site-header.js.map

package/dist/components/site-header/site-header.js.map

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

package/dist/components/skeleton/skeleton.js

@@ -55,7 +55,7 @@ StSkeleton.styles = [
         width: var(--_width);
         height: var(--_height);
         
-        --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
+        --st-skeleton-radius: var(--st-radius-sm);
       }
 
       :host([variant="text"]) {
@@ -79,9 +79,9 @@ StSkeleton.styles = [
         
         background: linear-gradient(
           90deg,
-          var(--st-color-surface-muted, #f1f5f9) 25%,
-          var(--st-color-border, #e2e8f0) 37%,
-          var(--st-color-surface-muted, #f1f5f9) 63%
+          var(--st-color-surface-muted) 25%,
+          var(--st-color-border) 37%,
+          var(--st-color-surface-muted) 63%
         );
         background-size: 400% 100%;
         border-radius: var(--st-skeleton-radius);
@@ -99,19 +99,19 @@ StSkeleton.styles = [
       }
 
       :host([animation="pulse"]) .skeleton {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         animation: st-pulse 1.5s ease-in-out infinite;
       }
 
       :host([animation="none"]) .skeleton {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         animation: none;
       }
 
       @media (prefers-reduced-motion: reduce) {
         .skeleton {
           animation: none !important;
-          background: var(--st-color-surface-muted, #f1f5f9) !important;
+          background: var(--st-color-surface-muted) !important;
         }
       }
 

package/dist/components/sparkline/sparkline.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, nothing } from "lit";
+/** Tiny axis-less trend line for use inside cards, tables and stat blocks. */
+export declare class StSparkline extends LitElement {
+    data: number[];
+    /** Any CSS color; defaults to the first chart palette color. */
+    color: string;
+    height: number;
+    area: boolean;
+    /** Accessible description, e.g. "Revenue trend, last 7 days". */
+    label: string;
+    static styles: import("lit").CSSResult[];
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-sparkline": StSparkline;
+    }
+}
+//# sourceMappingURL=sparkline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/sparkline/sparkline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,OAAO,EAAC,MAAM,KAAK,CAAC;AAQxD,8EAA8E;AAC9E,qBACa,WAAY,SAAQ,UAAU;IAChB,IAAI,EAAE,MAAM,EAAE,CAAM;IAC7C,gEAAgE;IACtC,KAAK,SAAM;IACX,MAAM,SAAM;IACX,IAAI,UAAS;IACxC,iEAAiE;IACvC,KAAK,SAAW;IAE1C,MAAM,CAAC,MAAM,4BAuBX;IAEF,MAAM,0DA+BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/components/sparkline/sparkline.js

@@ -0,0 +1,99 @@
+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, svg, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { areaPaths, chartColor, linePath, normalize } from "../chart/chart.utils.js";
+const VIEW_WIDTH = 100;
+const PAD = 2;
+/** Tiny axis-less trend line for use inside cards, tables and stat blocks. */
+let StSparkline = class StSparkline extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [];
+        /** Any CSS color; defaults to the first chart palette color. */
+        this.color = "";
+        this.height = 32;
+        this.area = false;
+        /** Accessible description, e.g. "Revenue trend, last 7 days". */
+        this.label = "Trend";
+    }
+    render() {
+        const n = this.data.length;
+        if (n < 2)
+            return nothing;
+        const lo = Math.min(...this.data);
+        const hi = Math.max(...this.data);
+        const h = this.height;
+        const points = this.data.map((v, i) => [
+            (i / (n - 1)) * VIEW_WIDTH,
+            h - PAD - normalize(v, lo, hi) * (h - PAD * 2),
+        ]);
+        const color = chartColor(0, this.color);
+        const first = this.data[0];
+        const last = this.data[n - 1];
+        const summary = `${this.label}: from ${first} to ${last}`;
+        return html `
+      <svg
+        viewBox="0 0 ${VIEW_WIDTH} ${h}"
+        height=${h}
+        preserveAspectRatio="none"
+        role="img"
+        aria-label=${summary}
+      >
+        ${this.area
+            ? areaPaths(points, h).map((d) => svg `<path class="area" d=${d} style="fill:${color}"></path>`)
+            : nothing}
+        <path class="line" d=${linePath(points)} style="stroke:${color}"></path>
+      </svg>
+    `;
+    }
+};
+StSparkline.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+      svg {
+        display: block;
+        width: 100%;
+        overflow: visible;
+      }
+      .line {
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+      }
+      .area {
+        opacity: 0.15;
+      }
+    `,
+];
+__decorate([
+    property({ type: Array })
+], StSparkline.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], StSparkline.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], StSparkline.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean })
+], StSparkline.prototype, "area", void 0);
+__decorate([
+    property({ type: String })
+], StSparkline.prototype, "label", void 0);
+StSparkline = __decorate([
+    customElement("st-sparkline")
+], StSparkline);
+export { StSparkline };
+//# sourceMappingURL=sparkline.js.map

package/dist/components/sparkline/sparkline.js.map

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

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class StSpinner extends LitElement {
+    size: "sm" | "md" | "lg";
+    label: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-spinner": StSpinner;
+    }
+}
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,SAAU,SAAQ,UAAU;IACE,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC/C,KAAK,SAAa;IAE5C,MAAM,CAAC,MAAM,4BAkCX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,65 @@
+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";
+let StSpinner = class StSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+        this.label = "Loading";
+    }
+    render() {
+        return html `<div class="ring" role="status" aria-label=${this.label}></div>`;
+    }
+};
+StSpinner.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-flex;
+        --_size: 1.5rem;
+        color: var(--st-color-primary);
+      }
+      :host([size="sm"]) {
+        --_size: 1rem;
+      }
+      :host([size="lg"]) {
+        --_size: 2.5rem;
+      }
+
+      .ring {
+        width: var(--_size);
+        height: var(--_size);
+        border: 0.15rem solid var(--st-color-border);
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .ring {
+          animation-duration: 2.4s;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StSpinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], StSpinner.prototype, "label", void 0);
+StSpinner = __decorate([
+    customElement("st-spinner")
+], StSpinner);
+export { StSpinner };
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.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;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACoC,SAAI,GAAuB,IAAI,CAAC;QAC/C,UAAK,GAAG,SAAS,CAAC;IAyC9C,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,8CAA8C,IAAI,CAAC,KAAK,SAAS,CAAC;IAC/E,CAAC;CACF,CAAA;AAvCQ,gBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAlCY,CAkCX;AArCuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAiC;AAC/C;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAmB;AAFjC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2CrB"}

package/dist/components/split/split.d.ts

@@ -0,0 +1,23 @@
+import { StSection } from "../section/section.js";
+/**
+ * Text beside an image, video or any other media: the classic "explain one thing" row. The two
+ * columns stack on narrow screens, with the text first. Use `reverse` to swap sides, so a page
+ * of several split rows can alternate.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, the default slot (body text), `actions` (buttons) and
+ * `media`.
+ */
+export declare class StSplit extends StSection {
+    /** Puts the media on the left on wide screens. */
+    reverse: boolean;
+    private _hasActions;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-split": StSplit;
+    }
+}
+//# sourceMappingURL=split.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../../src/components/split/split.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;;GAOG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,kDAAkD;IACR,OAAO,UAAS;IAEjD,OAAO,CAAC,WAAW,CAAS;IAErC,cAGC;IAED,MAAM,CAAC,MAAM,4BA+CX;IAEF,MAAM,sCAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}