@eui/eds-wc 22.0.0-alpha.16 → 22.0.0-alpha.18

package/eds-overlay/eds-wc-overlay.js

@@ -0,0 +1,336 @@
+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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * `<eds-wc-overlay>` — EDS Overlay (slide-in panel) Web Component.
+ *
+ * A full-viewport slide-in panel anchored to a screen edge (`right` / `left` / `top` / `bottom`)
+ * with an optional dimmed backdrop, focus trap, and Escape-to-close. 1:1 projection of the Angular
+ * `eds-overlay` component (the panel is NOT a native `<dialog>` because it slides from a screen edge
+ * with a custom backdrop and directional transforms).
+ *
+ * The panel content is composed from the header / content / footer sub-elements
+ * (`<eds-wc-overlay-header>`, `<eds-wc-overlay-content>`, `<eds-wc-overlay-footer>`), plus a default
+ * slot. The header renders its own close button which dispatches `close-click`.
+ *
+ * Accessibility: the host carries `role="dialog"`, reflects `aria-hidden` and `inert` when inactive,
+ * traps Tab focus within the panel while active, auto-focuses the first focusable element on open,
+ * closes on `Escape` (dispatching `active-state` with `false`), and returns focus to the previously
+ * focused element on close.
+ *
+ * @example
+ * ```html
+ * <eds-wc-overlay is-active position="right" has-closed-on-click-outside>
+ *   <eds-wc-overlay-header>
+ *     <eds-wc-overlay-header-label slot="label">Title</eds-wc-overlay-header-label>
+ *     <eds-wc-overlay-header-sublabel slot="sublabel">Subtitle</eds-wc-overlay-header-sublabel>
+ *   </eds-wc-overlay-header>
+ *   <eds-wc-overlay-content>Body content</eds-wc-overlay-content>
+ *   <eds-wc-overlay-footer>Footer</eds-wc-overlay-footer>
+ * </eds-wc-overlay>
+ * ```
+ *
+ * @slot - Default slot for overlay panel content (in addition to the header/content/footer sub-elements).
+ *
+ * @fires active-state - Dispatched when the overlay's active state changes (Escape or backdrop click request a close). `detail: { active: boolean }` (typically `false`).
+ */
+let EdsWcOverlay = class EdsWcOverlay extends EdsBaseElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls the visibility and active state of the overlay.
+         * @default false
+         */
+        this.isActive = false;
+        /**
+         * Screen position where the overlay appears.
+         * @default 'right'
+         */
+        this.position = 'right';
+        /**
+         * Responsive width variant for the overlay panel (e.g. 'small', 'medium', 'large', 'xlarge').
+         * @default ''
+         */
+        this.width = '';
+        /**
+         * Fixed width value (overrides responsive width).
+         * @default ''
+         */
+        this.fixedWidth = '';
+        /**
+         * Enables automatic closing when clicking outside the overlay (on the backdrop).
+         * @default false
+         */
+        this.hasClosedOnClickOutside = false;
+        /**
+         * Applies highlighted visual styling (a leading accent border on the panel).
+         * @default false
+         */
+        this.isHighlighted = false;
+        /** Element that had focus before the overlay opened; focus is returned here on close. */
+        this._previouslyFocused = null;
+        this._onKeydown = (event) => {
+            if (!this.isActive) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                this.dispatchEvent(new CustomEvent('active-state', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { active: false },
+                }));
+                return;
+            }
+            if (event.key === 'Tab') {
+                this._trapFocus(event);
+            }
+        };
+    }
+    static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
+        :host {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+            pointer-events: none;
+            display: flex;
+        }
+
+        :host([is-active]) {
+            pointer-events: auto;
+        }
+
+        :host([position="right"]) {
+            justify-content: flex-end;
+        }
+
+        :host([position="left"]) {
+            justify-content: flex-start;
+        }
+
+        :host([position="top"]) {
+            align-items: flex-start;
+        }
+
+        :host([position="top"]) .eds-overlay-panel {
+            width: 100%;
+            max-height: 80vh;
+            transform: translateY(-100%);
+        }
+
+        :host([position="top"][is-active]) .eds-overlay-panel {
+            transform: translateY(0);
+        }
+
+        :host([position="bottom"]) {
+            align-items: flex-end;
+        }
+
+        :host([position="bottom"]) .eds-overlay-panel {
+            width: 100%;
+            max-height: 80vh;
+            transform: translateY(100%);
+        }
+
+        :host([position="bottom"][is-active]) .eds-overlay-panel {
+            transform: translateY(0);
+        }
+
+        :host(:not([is-active])) {
+            visibility: hidden;
+        }
+
+        :host(:not([is-active])) .eds-overlay-panel {
+            transform: translateX(100%);
+        }
+
+        :host([position="left"]:not([is-active])) .eds-overlay-panel {
+            transform: translateX(-100%);
+        }
+
+        :host([is-highlighted]) .eds-overlay-panel {
+            border-left: 3px solid var(--eds-c-border-primary);
+        }
+
+        .eds-overlay-backdrop {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--eds-c-alpha-backdrop);
+        }
+
+        .eds-overlay-panel {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            background: var(--eds-c-surface-elevation-overlay);
+            box-shadow: var(--eds-sh-4);
+            overflow: hidden;
+            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+            width: 400px;
+            max-width: 100vw;
+        }
+
+        /* Width variants */
+        :host([width="small"]) .eds-overlay-panel {
+            width: 320px;
+        }
+
+        :host([width="medium"]) .eds-overlay-panel {
+            width: 480px;
+        }
+
+        :host([width="large"]) .eds-overlay-panel {
+            width: 640px;
+        }
+
+        :host([width="xlarge"]) .eds-overlay-panel {
+            width: 800px;
+        }
+    `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'dialog');
+        this._syncInactiveAria();
+        document.addEventListener('keydown', this._onKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._onKeydown);
+    }
+    updated(changed) {
+        if (changed.has('isActive')) {
+            this._syncInactiveAria();
+            if (this.isActive) {
+                this._previouslyFocused = document.activeElement ?? null;
+                // Auto-capture focus into the panel once rendered.
+                this.updateComplete.then(() => this._focusFirst());
+            }
+            else {
+                const target = this._previouslyFocused;
+                this._previouslyFocused = null;
+                target?.focus?.();
+            }
+        }
+    }
+    /** Reflect `aria-hidden` / `inert` based on the active state (matches the Angular host bindings). */
+    _syncInactiveAria() {
+        this.setAttribute('aria-hidden', this.isActive ? 'false' : 'true');
+        if (this.isActive) {
+            this.removeAttribute('inert');
+        }
+        else {
+            this.setAttribute('inert', '');
+        }
+    }
+    _getFocusable() {
+        const panel = this.renderRoot.querySelector('.eds-overlay-panel');
+        if (!panel) {
+            return [];
+        }
+        // Include slotted content by flattening assigned elements of the panel's slots.
+        const collect = (root) => {
+            const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), ' +
+                'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+            const found = [];
+            root.querySelectorAll(selector).forEach((el) => found.push(el));
+            root.querySelectorAll('slot').forEach((slot) => {
+                slot.assignedElements({ flatten: true }).forEach((el) => {
+                    if (el.matches(selector)) {
+                        found.push(el);
+                    }
+                    found.push(...collect(el));
+                });
+            });
+            return found;
+        };
+        return collect(panel).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+    }
+    _focusFirst() {
+        const focusable = this._getFocusable();
+        (focusable[0] ?? this.renderRoot.querySelector('.eds-overlay-panel'))?.focus?.();
+    }
+    /** Keep Tab focus cycling within the panel while active (single-shadow-root focus trap). */
+    _trapFocus(event) {
+        const focusable = this._getFocusable();
+        if (focusable.length === 0) {
+            event.preventDefault();
+            this.renderRoot.querySelector('.eds-overlay-panel')?.focus?.();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.renderRoot.activeElement ?? document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    _onBackdropClick() {
+        if (this.hasClosedOnClickOutside) {
+            this.dispatchEvent(new CustomEvent('active-state', {
+                bubbles: true,
+                composed: true,
+                detail: { active: false },
+            }));
+        }
+    }
+    render() {
+        return html `
+            ${this.isActive
+            ? html `<div class="eds-overlay-backdrop" @click="${this._onBackdropClick}"></div>`
+            : nothing}
+            <div
+                class="eds-overlay-panel"
+                tabindex="-1"
+                style="${this.fixedWidth ? `width: ${this.fixedWidth}` : ''}">
+                <slot name="header"></slot>
+                <slot name="content"></slot>
+                <slot name="footer"></slot>
+                <slot></slot>
+            </div>
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'is-active' })
+], EdsWcOverlay.prototype, "isActive", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcOverlay.prototype, "position", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], EdsWcOverlay.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'fixed-width' })
+], EdsWcOverlay.prototype, "fixedWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-closed-on-click-outside' })
+], EdsWcOverlay.prototype, "hasClosedOnClickOutside", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'is-highlighted' })
+], EdsWcOverlay.prototype, "isHighlighted", void 0);
+EdsWcOverlay = __decorate([
+    customElement('eds-wc-overlay')
+], EdsWcOverlay);
+export { EdsWcOverlay };
+//# sourceMappingURL=eds-wc-overlay.js.map

package/eds-overlay/eds-wc-overlay.js.map

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

package/eds-overlay/index.d.ts

@@ -0,0 +1,9 @@
+export { EdsWcOverlay } from './eds-wc-overlay';
+export type { EdsWcOverlayPosition } from './eds-wc-overlay';
+export { EdsWcOverlayHeader } from './eds-wc-overlay-header';
+export { EdsWcOverlayHeaderLabel } from './eds-wc-overlay-header-label';
+export { EdsWcOverlayHeaderSublabel } from './eds-wc-overlay-header-sublabel';
+export { EdsWcOverlayHeaderActionItems } from './eds-wc-overlay-header-action-items';
+export { EdsWcOverlayContent } from './eds-wc-overlay-content';
+export { EdsWcOverlayFooter } from './eds-wc-overlay-footer';
+//# sourceMappingURL=index.d.ts.map

package/eds-overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-overlay/index.js

@@ -0,0 +1,8 @@
+export { EdsWcOverlay } from './eds-wc-overlay';
+export { EdsWcOverlayHeader } from './eds-wc-overlay-header';
+export { EdsWcOverlayHeaderLabel } from './eds-wc-overlay-header-label';
+export { EdsWcOverlayHeaderSublabel } from './eds-wc-overlay-header-sublabel';
+export { EdsWcOverlayHeaderActionItems } from './eds-wc-overlay-header-action-items';
+export { EdsWcOverlayContent } from './eds-wc-overlay-content';
+export { EdsWcOverlayFooter } from './eds-wc-overlay-footer';
+//# sourceMappingURL=index.js.map

package/eds-overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/eds-popover/eds-wc-popover.js

@@ -57,7 +57,7 @@ let EdsWcPopover = class EdsWcPopover extends EdsBaseElement {
             display: flex; align-items: center; justify-content: space-between;
             padding: var(--eds-sp-s) var(--eds-sp-m); border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);
         }
-        .header__title { font: var(--eds-f-label-m-semi-bold); color: var(--eds-c-foreground-default); }
+        .header__title { font: var(--eds-f-label-m-semibold); color: var(--eds-c-foreground-default); }
         .header__close {
             background: none; border: none; cursor: pointer; padding: var(--eds-sp-3xs);
             border-radius: var(--eds-br-s); color: var(--eds-c-foreground-subtle); font-family: inherit;

package/eds-progress-bar/eds-wc-progress-bar.js

@@ -63,7 +63,7 @@ let EdsWcProgressBar = class EdsWcProgressBar extends SizeMixin(ColorMixin(EdsBa
         }
 
         .header__label {
-            font: var(--eds-f-label-s-semi-bold);
+            font: var(--eds-f-label-s-semibold);
             color: var(--eds-c-foreground);
         }
 

package/eds-progress-circle/eds-wc-progress-circle.js

@@ -120,13 +120,13 @@ let EdsWcProgressCircle = class EdsWcProgressCircle extends SizeMixin(ColorMixin
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            font: var(--eds-f-label-m-semi-bold);
+            font: var(--eds-f-label-m-semibold);
             color: var(--eds-c-foreground);
             white-space: nowrap;
         }
 
-        :host([size="s"]) .label { font: var(--eds-f-label-s-semi-bold); }
-        :host([size="l"]) .label { font: var(--eds-f-label-l-semi-bold); }
+        :host([size="s"]) .label { font: var(--eds-f-label-s-semibold); }
+        :host([size="l"]) .label { font: var(--eds-f-label-l-semibold); }
     `; }
     render() {
         const r = this._radius;

package/eds-select/eds-wc-select.js

@@ -87,7 +87,7 @@ let EdsWcSelect = class EdsWcSelect extends EdsBaseElement {
 
         /* Disabled */
         select:disabled {
-            background-color: var(--eds-c-suface-disabled);
+            background-color: var(--eds-c-surface-disabled);
             border-color: var(--eds-c-border-disabled);
             color: var(--eds-c-foreground-subtler);
             cursor: default;

package/eds-skeleton/eds-wc-skeleton.js

@@ -36,7 +36,7 @@ let EdsWcSkeleton = class EdsWcSkeleton extends LitElement {
 
         .skel {
             position: relative;
-            background: var(--eds-c-surface-neutral-subtler, #e8e8f0);
+            background: var(--eds-c-surface-neutral-subtler);
             overflow: hidden;
             width: 100%;
             height: 100%;

package/eds-swiper/eds-wc-swiper.d.ts

@@ -0,0 +1,100 @@
+import { EdsBaseElement } from '../shared/eds-base.js';
+/**
+ * `<eds-wc-swiper-item>` — a single item within `<eds-wc-swiper>`.
+ *
+ * Pure content-projection card with scroll-snap alignment and card-like styling. 1:1 projection
+ * of the Angular `eds-swiper-item` component (host `role="listitem"`, `.eds-swiper-item` class).
+ *
+ * @slot - Default slot for the item content.
+ */
+export declare class EdsWcSwiperItem extends EdsBaseElement {
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * @default 'eds-swiper-item'
+     */
+    e2eAttr: string;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * `<eds-wc-swiper>` — EDS Swiper Web Component.
+ *
+ * A horizontal scrolling container that displays items in a row with optional navigation arrows
+ * and smooth scroll-snap behavior. Unlike the carousel (one slide at a time with transform-based
+ * animation), the swiper displays multiple items simultaneously and uses native scroll behavior.
+ * 1:1 projection of the Angular `eds-swiper` component (host `role="region"`, `.eds-swiper` class).
+ *
+ * Items are projected via the default slot — each direct child (typically an
+ * `<eds-wc-swiper-item>`) is one item in the scrollable track.
+ *
+ * @example
+ * ```html
+ * <eds-wc-swiper gap="20" item-min-width="320">
+ *   <eds-wc-swiper-item>Card 1</eds-wc-swiper-item>
+ *   <eds-wc-swiper-item>Card 2</eds-wc-swiper-item>
+ *   <eds-wc-swiper-item>Card 3</eds-wc-swiper-item>
+ * </eds-wc-swiper>
+ * ```
+ *
+ * @slot - Default slot for the swiper items (each direct child = one item).
+ *
+ * @fires swiper-scroll - Dispatched when the track is scrolled via a navigation arrow. `detail: { direction: 'left' | 'right' }`
+ */
+export declare class EdsWcSwiper extends EdsBaseElement {
+    /**
+     * Data attribute value for end-to-end testing identification.
+     * @default 'eds-swiper'
+     */
+    e2eAttr: string;
+    /**
+     * Accessible label describing the swiper region.
+     * @default 'Scrollable content'
+     */
+    ariaLabel: string | null;
+    /**
+     * Gap between items in pixels.
+     * @default 20
+     */
+    gap: number;
+    /**
+     * Minimum width of each item in pixels. Applied to slotted items via a CSS custom property.
+     * @default 320
+     */
+    itemMinWidth: number;
+    /**
+     * Whether to hide navigation arrows.
+     * @default false
+     */
+    hideNavigation: boolean;
+    private _canScrollLeft;
+    private _canScrollRight;
+    private _slideDirection;
+    private _track?;
+    private _slideAnimationTimer;
+    private _resizeObserver?;
+    /** Whether navigation arrows should be visible. */
+    private get _showNavigation();
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    /** Scroll the track to the left by ~one viewport width. */
+    scrollLeftBy(): void;
+    /** Scroll the track to the right by ~one viewport width. */
+    scrollRightBy(): void;
+    private _scrollLeft;
+    private _scrollRight;
+    private _triggerSlideAnimation;
+    private _onScroll;
+    private _onSlotChange;
+    private _updateScrollState;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'eds-wc-swiper': EdsWcSwiper;
+        'eds-wc-swiper-item': EdsWcSwiperItem;
+    }
+}
+//# sourceMappingURL=eds-wc-swiper.d.ts.map

package/eds-swiper/eds-wc-swiper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eds-wc-swiper.d.ts","sourceRoot":"","sources":["../../src/eds-swiper/eds-wc-swiper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,cAAc;IAC/C;;;OAGG;IAEH,OAAO,SAAqB;IAE5B,OAAgB,MAAM,0BA0BpB;IAEO,iBAAiB,IAAI,IAAI;cAOf,MAAM;CAG5B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,WAAY,SAAQ,cAAc;IAC3C;;;OAGG;IAEH,OAAO,SAAgB;IAEvB;;;OAGG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAwB;IAEzD;;;OAGG;IACyB,GAAG,SAAM;IAErC;;;OAGG;IACsD,YAAY,SAAO;IAE5E;;;OAGG;IACuE,cAAc,UAAS;IAExF,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,eAAe,CAAiC;IAEpC,OAAO,CAAC,MAAM,CAAC,CAAiB;IAE7D,OAAO,CAAC,oBAAoB,CAA8C;IAC1E,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,mDAAmD;IACnD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAgB,MAAM,0BA4GpB;IAEO,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;cAUlB,YAAY,IAAI,IAAI;cAIpB,MAAM;IA0CzB,2DAA2D;IAC3D,YAAY,IAAI,IAAI;IAYpB,4DAA4D;IAC5D,aAAa,IAAI,IAAI;IAYrB,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,YAAY,CAAoC;IAExD,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,SAAS,CAAyC;IAE1D,OAAO,CAAC,aAAa,CAAyC;IAE9D,OAAO,CAAC,kBAAkB;CAS7B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,WAAW,CAAC;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACzC;CACJ"}