@eui/eds-wc 22.0.0-alpha.5 → 22.0.0-alpha.50

package/eds-icon/eds-wc-icon.js

@@ -7,63 +7,69 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { EdsBaseElement } from '../shared/eds-base.js';
-import { ColorMixin } from '../shared/color-mixin.js';
-import { SizeMixin } from '../shared/size-mixin.js';
 /**
  * `<eds-wc-icon>` — EDS Icon Web Component.
  *
- * Displays an SVG icon from an EDS icon sprite sheet.
- * Supports size/color variants, loading spinner, and rounded clip.
+ * Displays a scalable vector icon from a sprite set. Supports semantic color and size via
+ * string attributes, an optional circular clip, and a loading spinner. Icons resolve from
+ * the configured assets path using the `iconName:setName` convention. 1:1 projection of the
+ * Angular `eds-icon`.
  *
  * @example
  * ```html
- * <eds-wc-icon icon="star" size="m" color="primary"></eds-wc-icon>
- * <eds-wc-icon icon="flag-be:flags-4x3" size="l" rounded></eds-wc-icon>
- * <eds-wc-icon icon="spinner" loading></eds-wc-icon>
+ * <eds-wc-icon icon="check" color="success" size="m"></eds-wc-icon>
+ * <eds-wc-icon icon="warning" color="warning" size="l" aria-label="Warning"></eds-wc-icon>
+ * <eds-wc-icon icon="check:core"></eds-wc-icon>
+ * <eds-wc-icon icon="flag-be:flags-4x3" rounded></eds-wc-icon>
+ * <eds-wc-icon loading></eds-wc-icon>
  * ```
  *
- * @slot - Default slot for projected content (e.g. badge overlay)
- *
- * @csspart svg - The SVG element rendering the icon
- * @csspart spinner - The loading spinner element
+ * @slot - Default slot for projected content (e.g. a badge overlay).
  */
-let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
+let EdsWcIcon = class EdsWcIcon extends EdsBaseElement {
     constructor() {
         super(...arguments);
         /**
-         * Icon name, optionally with set: `'iconName'` or `'iconName:setName'`.
-         * When using the colon format, the part after `:` determines which sprite sheet to load.
+         * Name of the icon to display, optionally including the icon set using `iconName:setName`
+         * format. When the value contains a colon, it splits into icon name and set.
+         * @default ''
          */
         this.icon = '';
         /**
-         * Icon set / sprite sheet to load from.
-         * Only used when `icon` doesn't contain a colon separator.
+         * Icon set library to load the icon from. Used only when `icon` has no colon separator.
          * @default 'regular'
          */
         this.set = 'regular';
         /**
-         * Accessible label for screen readers.
-         * When set, the icon gets `role="img"` and this label.
-         * When empty, the icon is hidden from assistive technologies.
+         * Semantic color of the icon.
+         * @default 'neutral'
          */
-        this.ariaLabel = '';
+        this.color = 'neutral';
         /**
-         * Whether to hide the icon from assistive technologies.
-         * @default true
+         * Size of the icon.
+         * @default 'm'
          */
-        this.ariaHidden = 'true';
+        this.size = 'm';
+        /**
+         * Accessible label for screen readers describing the icon's purpose.
+         * When set, the icon gets `role="img"` and this label; when empty it is hidden from
+         * assistive technologies.
+         * @default ''
+         */
+        this.ariaLabel = '';
         /**
-         * Clips the icon to a circle (border-radius: 50%).
-         * Useful for flag icons or avatars.
+         * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.
+         * @default false
          */
         this.rounded = false;
         /**
-         * Replaces the icon with a spinning loading indicator.
+         * When true, replaces the icon with a spinning loading indicator.
          * The spinner inherits the icon's size and color.
+         * @default false
          */
         this.loading = false;
     }
-    /** Resolved icon name (part before colon, or full string). */
+    /** Resolved icon name (part before the colon, or the full string). */
     get iconName() {
         const raw = this.icon;
         if (raw && raw.indexOf(':') > -1) {
@@ -71,7 +77,7 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         }
         return raw;
     }
-    /** Resolved icon set (part after colon, or `set` property). */
+    /** Resolved icon set (part after the colon, or the `set` property; defaults to `regular`). */
     get resolvedSet() {
         const raw = this.icon;
         if (raw && raw.indexOf(':') > -1) {
@@ -80,67 +86,104 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         return this.set || 'regular';
     }
     static { this.styles = css `
+        :host, *, *::before, *::after {
+            box-sizing: border-box;
+        }
+
         :host {
+            /* inherited channels from a composing parent (badge/button/chip/avatar);
+               a standalone icon falls back to its own size/color token below. */
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-m));
+            --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground));
+
             display: inline-flex;
             position: relative;
-
-            --_size: var(--_icon-size, var(--eds-is-m));
-            --_color: var(--_on-surface, var(--eds-c-foreground));
         }
 
-        /* Size variants */
-        :host([size="2xs"]) { --_size: var(--eds-is-2xs); }
-        :host([size="xs"]) { --_size: var(--eds-is-xs); }
-        :host([size="s"]) { --_size: var(--eds-is-s); }
-        :host([size="m"]) { --_size: var(--eds-is-m); }
-        :host([size="l"]) { --_size: var(--eds-is-l); }
-        :host([size="xl"]) { --_size: var(--eds-is-xl); }
-        :host([size="2xl"]) { --_size: var(--eds-is-2xl); }
-        :host([size="3xl"]) { --_size: var(--eds-is-3xl); }
-        :host([size="4xl"]) { --_size: var(--eds-is-4xl); }
-
-        /* Color variants */
-        :host([color="neutral"]) { --_color: var(--eds-c-foreground); }
-        :host([color="neutral-subtle"]) { --_color: var(--eds-c-foreground-subtle); }
-        :host([color="neutral-subtler"]) { --_color: var(--eds-c-foreground-subtler); }
-        :host([color="primary"]) { --_color: var(--eds-c-foreground-primary); }
-        :host([color="highlight"]) { --_color: var(--eds-c-foreground-highlight); }
-        :host([color="info"]) { --_color: var(--eds-c-foreground-info); }
-        :host([color="success"]) { --_color: var(--eds-c-foreground-success); }
-        :host([color="warning"]) { --_color: var(--eds-c-foreground-warning); }
-        :host([color="critical"]) { --_color: var(--eds-c-foreground-critical); }
-        :host([color="brand"]) { --_color: var(--eds-c-on-surface-brand); }
-        :host([color="disabled"]) { --_color: var(--eds-c-foreground-disabled); }
-
-        /* Rounded variant */
-        :host([rounded]) {
-            border-radius: 50%;
-            overflow: hidden;
+        /* SIZE VARIANTS — each also feeds the badge-size inherit channel for a projected badge */
+        :host([size="3xs"]) {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-3xs));
+            --_eds-badge-empty-size-inherit: var(--eds-sp-2xs);
         }
-        :host([rounded]) .eds-icon-svg {
-            border-radius: 50%;
+        :host([size="2xs"]) {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-2xs));
+            --_eds-badge-empty-size-inherit: var(--eds-sp-2xs);
+        }
+        :host([size="xs"])  {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-xs));
+            --_eds-badge-empty-size-inherit: var(--eds-sp-xs);
+        }
+        :host([size="s"])   {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-s));
+            --_eds-badge-size-inherit: var(--eds-sp-m);
         }
+        :host([size="m"])   {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-m));
+            --_eds-badge-size-inherit: var(--eds-sp-m);
+        }
+        :host([size="l"])   {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-l));
+            --_eds-badge-size-inherit: calc(var(--eds-sp-m) + var(--eds-sp-3xs));
+        }
+        :host([size="xl"])  {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-xl));
+            --_eds-badge-size-inherit: calc(var(--eds-sp-m) + var(--eds-sp-2xs));
+        }
+        :host([size="2xl"]) {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-2xl));
+            --_eds-badge-size-inherit: var(--eds-sp-l);
+        }
+        :host([size="3xl"]) {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-3xl));
+            --_eds-badge-size-inherit: calc(var(--eds-sp-l) + var(--eds-sp-2xs));
+        }
+        :host([size="4xl"]) {
+            --_eds-icon-size: var(--_eds-icon-size-inherit, var(--eds-is-4xl));
+            --_eds-badge-size-inherit: var(--eds-sp-xl);
+        }
+
+        /* COLOR VARIANTS */
+        :host([color="neutral"])         { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground)); }
+        :host([color="neutral-subtle"])  { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-subtle)); }
+        :host([color="neutral-subtler"]) { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-subtler)); }
+        :host([color="primary"])         { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-primary)); }
+        :host([color="highlight"])       { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-highlight)); }
+        :host([color="info"])            { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-info)); }
+        :host([color="success"])         { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-success)); }
+        :host([color="warning"])         { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-warning)); }
+        :host([color="critical"])        { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-critical)); }
+        :host([color="brand"])           { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-on-surface-brand)); }
+        :host([color="disabled"])        { --_eds-icon-color: var(--_eds-icon-color-inherit, var(--eds-c-foreground-disabled)); }
 
         .eds-icon-svg {
-            height: var(--_size);
-            width: var(--_size);
-            fill: var(--_color);
-            color: var(--_color);
+            height: var(--_eds-icon-size);
+            width: var(--_eds-icon-size);
+            fill: var(--_eds-icon-color);
+            color: var(--_eds-icon-color);
         }
 
-        /* Multi-color sprites (flags) — disable fill inheritance */
+        /* Multi-color sprites (flags) — disable fill inheritance so path fill attributes render */
         .eds-icon-svg.eds-icon-set-flags-1x1,
         .eds-icon-svg.eds-icon-set-flags-4x3 {
             fill: none;
         }
 
-        /* Loading spinner */
-        .eds-icon-spinner {
+        /* ROUNDED */
+        :host([rounded]) {
+            border-radius: 50%;
+            overflow: hidden;
+        }
+        :host([rounded]) .eds-icon-svg {
+            border-radius: 50%;
+        }
+
+        /* LOADING SPINNER — inherits icon size and color */
+        :host([loading]) .eds-icon-spinner {
             display: inline-block;
-            width: var(--_size);
-            height: var(--_size);
-            border: 3px solid var(--eds-c-border-neutral-subtle);
-            border-top-color: var(--_color);
+            width: var(--_eds-icon-size);
+            height: var(--_eds-icon-size);
+            border: 3px solid var(--eds-c-border-divider);
+            border-top-color: var(--eds-c-border-primary);
             border-radius: 50%;
             animation: eds-icon-spin 0.6s linear infinite;
         }
@@ -156,21 +199,19 @@ let EdsWcIcon = class EdsWcIcon extends SizeMixin(ColorMixin(EdsBaseElement)) {
         const spriteHref = `${baseUrl}/eds/icons/sprites/${setName}.svg#${iconName}`;
         return html `
             ${this.loading
-            ? html `<span class="eds-icon-spinner" part="spinner" aria-hidden="true"></span>`
-            : html `
-                    <svg
-                        class="eds-icon-svg eds-icon-set-${setName}"
-                        part="svg"
+            ? html `<span class="eds-icon-spinner" aria-hidden="true"></span>`
+            : html `<svg
+                        class="eds-icon-svg eds-sprite-${iconName} eds-icon-set-${setName}"
                         aria-hidden="true">
                         <use href="${spriteHref}"></use>
-                    </svg>
-                `}
+                    </svg>`}
             <slot></slot>
         `;
     }
     updated() {
-        // Sync ARIA attributes based on label
-        const hasLabel = this.ariaLabel && this.ariaLabel.length > 0;
+        // Mirror the Angular host bindings: an accessible label promotes the icon to
+        // role="img"; otherwise it is decorative and hidden from assistive technologies.
+        const hasLabel = !!this.ariaLabel && this.ariaLabel.length > 0;
         if (hasLabel) {
             this.setAttribute('role', 'img');
             this.removeAttribute('aria-hidden');
@@ -188,11 +229,14 @@ __decorate([
     property({ type: String })
 ], EdsWcIcon.prototype, "set", void 0);
 __decorate([
-    property({ type: String, attribute: 'aria-label' })
-], EdsWcIcon.prototype, "ariaLabel", void 0);
+    property({ type: String, reflect: true })
+], EdsWcIcon.prototype, "color", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'aria-hidden', reflect: true })
-], EdsWcIcon.prototype, "ariaHidden", void 0);
+    property({ type: String, reflect: true })
+], EdsWcIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label', reflect: true })
+], EdsWcIcon.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EdsWcIcon.prototype, "rounded", void 0);

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

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

package/eds-icon/index.d.ts

@@ -1,2 +1,4 @@
-export { EdsWcIcon } from './eds-wc-icon.js';
+export { EdsWcIcon } from './eds-wc-icon';
+export type { EdsWcIconColor, EdsWcIconSize } from './eds-wc-icon';
+export { EdsWcIconImage } from './eds-wc-icon-image';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-icon/index.js

@@ -1,2 +1,3 @@
-export { EdsWcIcon } from './eds-wc-icon.js';
+export { EdsWcIcon } from './eds-wc-icon';
+export { EdsWcIconImage } from './eds-wc-icon-image';
 //# sourceMappingURL=index.js.map

package/eds-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/eds-icon-button/eds-wc-icon-button.d.ts

@@ -1,42 +1,77 @@
 import { EdsBaseElement } from '../shared/eds-base.js';
-declare const EdsWcIconButton_base: (new (...args: any[]) => import("../shared/size-mixin.js").SizeMixinInterface) & (new (...args: any[]) => import("../shared/color-mixin.js").ColorMixinInterface) & typeof EdsBaseElement;
+import '../eds-icon/eds-wc-icon.js';
+/**
+ * Local narrowed color union — the icon button's color contract. Copied verbatim from the
+ * Angular `eds-icon-button` exported `EdsIconButtonColor` union. No shared-token import.
+ */
+export type EdsWcIconButtonColor = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+/**
+ * Local narrowed size union — the icon button's size contract. Copied verbatim from the
+ * Angular `eds-icon-button` exported `EdsIconButtonSize` union.
+ */
+export type EdsWcIconButtonSize = '2xs' | 'xs' | 's' | 'm' | 'l';
 /**
  * `<eds-wc-icon-button>` — EDS Icon Button Web Component.
  *
- * A button that renders a single icon from the EDS sprite sheet.
- * Supports size/color variants, rounded shape, and disabled state.
+ * A compact, icon-only button. Renders an internal native `<button>` (for keyboard/focus/click
+ * semantics) containing an `<eds-wc-icon>`. Supports semantic color and size via reflected string
+ * attributes, an optional rounded shape, and a disabled state. 1:1 projection of the Angular
+ * `button[edsIconButton]` directive.
+ *
+ * Unlike the Angular directive which decorates a consumer-provided native `<button>`, this web
+ * component renders its own internal `<button>` element and mirrors the same reflected attribute
+ * API on the host.
  *
  * @example
  * ```html
- * <eds-wc-icon-button icon="star" size="m" color="neutral"></eds-wc-icon-button>
- * <eds-wc-icon-button icon="x:core" rounded size="s" disabled></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="gear" aria-label="Settings"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="trash" color="critical" size="s" aria-label="Delete"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="star" color="brand" rounded aria-label="Favorite"></eds-wc-icon-button>
+ * <eds-wc-icon-button icon="bell" disabled aria-label="Notifications"></eds-wc-icon-button>
  * ```
  *
- * @slot - Default slot for overlay content (e.g. badge)
- *
- * @fires click - Native click event (blocked when disabled)
+ * @slot - Default slot for a projected overlay such as an `<eds-wc-badge>`.
  *
- * @csspart button - The internal `<button>` element
- * @csspart svg - The icon SVG element
+ * @fires button-click - Dispatched when the button is clicked. `detail: { originalEvent: Event }`
  */
-export declare class EdsWcIconButton extends EdsWcIconButton_base {
-    /** Icon name, optionally with set: `'iconName:setName'`. */
+export declare class EdsWcIconButton extends EdsBaseElement {
+    /**
+     * The name of the icon to display from the eUI icon library.
+     * @default ''
+     */
     icon: string;
-    /** Accessible label for screen readers. */
+    /**
+     * Semantic color of the icon button.
+     * @default 'neutral'
+     */
+    color: EdsWcIconButtonColor;
+    /**
+     * Size of the icon button.
+     * @default 'm'
+     */
+    size: EdsWcIconButtonSize;
+    /**
+     * Accessible label for screen readers describing the button's purpose.
+     * @default 'EDS Icon button'
+     */
     ariaLabel: string | null;
-    /** Applies fully rounded border-radius. */
+    /**
+     * Applies rounded corners to the button shape instead of default square corners.
+     * @default false
+     */
     rounded: boolean;
-    /** Disabled state. */
+    /**
+     * Disables the button (non-interactive, disabled styling, removed from tab order).
+     * @default false
+     */
     disabled: boolean;
-    private get _iconName();
-    private get _resolvedSet();
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
+    private _onClick;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'eds-wc-icon-button': EdsWcIconButton;
     }
 }
-export {};
 //# sourceMappingURL=eds-wc-icon-button.d.ts.map

package/eds-icon-button/eds-wc-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eds-wc-icon-button.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;;AAIvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,eAAgB,SAAQ,oBAAqC;IACtE,4DAA4D;IAE5D,IAAI,SAAM;IAEV,2CAA2C;IAElC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAiB;IAElD,2CAA2C;IAE3C,OAAO,UAAS;IAEhB,sBAAsB;IAEtB,QAAQ,UAAS;IAEjB,OAAO,KAAK,SAAS,GAGpB;IAED,OAAO,KAAK,YAAY,GAGvB;IAED,OAAgB,MAAM,0BAoEpB;cAEiB,MAAM;CAiB5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,eAAe,CAAC;KACzC;CACJ"}
+{"version":3,"file":"eds-wc-icon-button.d.ts","sourceRoot":"","sources":["../../src/eds-icon-button/eds-wc-icon-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAC1B,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,cAAc;IAC/C;;;OAGG;IAEH,IAAI,SAAM;IAEV;;;OAGG;IAEH,KAAK,EAAE,oBAAoB,CAAa;IAExC;;;OAGG;IAEH,IAAI,EAAE,mBAAmB,CAAO;IAEhC;;;OAGG;IAEM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAqB;IAEtD;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB,OAAgB,MAAM,0BA2HpB;cAEiB,MAAM;IAmBzB,OAAO,CAAC,QAAQ,CASd;CACL;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,eAAe,CAAC;KACzC;CACJ"}