@tartaguti/ui-components 0.2.0 → 0.3.0

package/dist/tt-navbar.d.ts

@@ -1,8 +1,12 @@
 import { LitElement } from "lit";
 import "./tt-button.js";
 import "./tt-icon.js";
+import type { TTStrings } from "./strings.js";
 export type NavbarSize = "small" | "medium" | "large";
 export declare class TTNavbar extends LitElement {
+    /** This component's own text, over setStrings() (see strings.ts). */
+    strings: Partial<TTStrings>;
+    private text;
     sticky: boolean;
     bordered: boolean;
     size: NavbarSize;

package/dist/tt-navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tt-navbar.d.ts","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,qBACa,QAAS,SAAQ,UAAU;IAUtC,MAAM,UAAS;IAKf,QAAQ,UAAS;IAKjB,IAAI,EAAE,UAAU,CAAY;IAG5B,cAAc,UAAS;IAEvB;;;;;;;;;;;;OAYG;IAEH,UAAU,UAAS;IAEnB,OAAO,CAAC,gBAAgB;IAcxB,MAAM,CAAC,MAAM,0BAuQX;IAEF,MAAM;CAmDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tt-navbar.d.ts","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,qBACa,QAAS,SAAQ,UAAU;IACtC,qEAAqE;IACrC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAM;IAEjE,OAAO,CAAC,IAAI,CAA+B;IAW3C,MAAM,UAAS;IAKf,QAAQ,UAAS;IAKjB,IAAI,EAAE,UAAU,CAAY;IAG5B,cAAc,UAAS;IAEvB;;;;;;;;;;;;OAYG;IAEH,UAAU,UAAS;IAEnB,OAAO,CAAC,gBAAgB;IAcxB,MAAM,CAAC,MAAM,0BAmSX;IAEF,MAAM;CAmDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-navbar.js

@@ -8,9 +8,13 @@ import { LitElement, html, css, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import "./tt-button.js";
 import "./tt-icon.js";
+import { StringsController } from "./strings.js";
 let TTNavbar = class TTNavbar extends LitElement {
     constructor() {
         super(...arguments);
+        /** This component's own text, over setStrings() (see strings.ts). */
+        this.strings = {};
+        this.text = new StringsController(this);
         // Reflected so :host([sticky]) can match. The stickiness has to live on
         // the HOST: position:sticky is constrained to its containing block, and
         // for the inner <header> that block is this element, all 60px of it, so
@@ -284,11 +288,22 @@ let TTNavbar = class TTNavbar extends LitElement {
         background var(--tt-duration-normal) var(--tt-ease);
     }
 
-    ::slotted(a:hover) {
-      color: var(--_link-hover);
+    /* Only where there is a real pointer, so a tapped link does not stay
+       lit on a touch screen. */
+    @media (hover: hover) {
+      ::slotted(a:hover) {
+        color: var(--_link-hover);
+      }
     }
 
-    /* Mobile */
+    /* Mobile
+
+       Two questions, one answer. On its own the bar asks the window. In
+       tt-layout's navbar slot it asks the layout, with the same container
+       query the layout uses for its drawer, because the menu button and
+       the drawer it opens have to appear together: in the component
+       builder a phone is drawn inside a desktop-wide window, where the
+       window says "desktop" and the layout says "phone". */
 
     @media (max-width: 768px) {
       /*
@@ -297,20 +312,37 @@ let TTNavbar = class TTNavbar extends LitElement {
         takes the slack rather than the sides, because there is nothing
         left to centre and a phone wants the name hard against the button.
       */
-      header {
+      :host(:not([slot="navbar"])) header {
         grid-template-columns: auto minmax(0, 1fr) auto;
 
         gap: var(--tt-space-2);
         padding: 0 var(--tt-space-3);
       }
 
-      .mobile-menu {
+      :host(:not([slot="navbar"])) .mobile-menu {
         display: inline-flex;
       }
 
       /* display:none removes it from the grid entirely, so it takes no
          track and the three above line up with what is left. */
-      .center {
+      :host(:not([slot="navbar"])) .center {
+        display: none;
+      }
+    }
+
+    @container (width < 768px) {
+      :host([slot="navbar"]) header {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+
+        gap: var(--tt-space-2);
+        padding: 0 var(--tt-space-3);
+      }
+
+      :host([slot="navbar"]) .mobile-menu {
+        display: inline-flex;
+      }
+
+      :host([slot="navbar"]) .center {
         display: none;
       }
     }
@@ -337,7 +369,7 @@ let TTNavbar = class TTNavbar extends LitElement {
           class="mobile-menu"
           variant="secondary"
           size="small"
-          label=${this.mobileMenuOpen ? "Close menu" : "Open menu"}
+          label=${this.text.get(this.mobileMenuOpen ? "closeMenu" : "openMenu")}
           expanded=${this.mobileMenuOpen ? "true" : "false"}
           @tt-button-click=${this.handleMenuToggle}
         >
@@ -368,6 +400,9 @@ let TTNavbar = class TTNavbar extends LitElement {
     `;
     }
 };
+__decorate([
+    property({ attribute: false })
+], TTNavbar.prototype, "strings", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TTNavbar.prototype, "sticky", void 0);

package/dist/tt-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-navbar.js","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAKf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,wEAAwE;QACxE,wEAAwE;QACxE,wEAAwE;QACxE,+DAA+D;QAC/D,EAAE;QACF,qEAAqE;QACrE,sEAAsE;QACtE,2BAA2B;QAE3B,WAAM,GAAG,KAAK,CAAC;QAEf,gEAAgE;QAChE,kBAAkB;QAElB,aAAQ,GAAG,KAAK,CAAC;QAEjB,gEAAgE;QAChE,oEAAoE;QAEpE,SAAI,GAAe,QAAQ,CAAC;QAG5B,mBAAc,GAAG,KAAK,CAAC;QAEvB;;;;;;;;;;;;WAYG;QAEH,eAAU,GAAG,KAAK,CAAC;IA4UrB,CAAC;IA1US,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAE3C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,cAAc;aAC1B;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuQlB,AAvQY,CAuQX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;UAKjC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM;YAC9B,CAAC,CAAC,IAAI,CAAA,yDAAyD;YAC/D,CAAC,CAAC,OAAO;;;;;;;;kBAQD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;qBAC7C,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BAC9B,IAAI,CAAC,gBAAgB;;;mBAG/B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;KAuBhD,CAAC;IACJ,CAAC;;AAxWD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC5B;AAKf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAKjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;gDACpC;AAgBvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClD;AAvCR,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmXpB"}
+{"version":3,"file":"tt-navbar.js","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":"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"}

package/dist/tt-pagination.d.ts

@@ -1,12 +1,16 @@
 import { LitElement } from "lit";
 import "./tt-button.js";
 import "./tt-icon.js";
+import type { TTStrings } from "./strings.js";
 /**
  * Page navigation. Owns nothing: the current page comes in, and a click
  * emits the page you asked for. The parent decides what that means and
  * passes the new page back down.
  */
 export declare class TTPagination extends LitElement {
+    /** This component's own text, over setStrings() (see strings.ts). */
+    strings: Partial<TTStrings>;
+    private text;
     page: number;
     total: number;
     pageSize: number;

package/dist/tt-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tt-pagination.d.ts","sourceRoot":"","sources":["../src/tt-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,IAAI,SAAK;IAET,KAAK,SAAK;IAEc,QAAQ,SAAM;IAItC,QAAQ,SAAK;IAIzC,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,OAAO,GAIlB;IAQD,OAAO,KAAK,KAAK,GAwBhB;IAED,OAAO,CAAC,EAAE;IAYV,OAAO,KAAK,KAAK,GAIhB;IAED,MAAM,CAAC,MAAM,0BAkDX;IAEF,MAAM;CAqDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"tt-pagination.d.ts","sourceRoot":"","sources":["../src/tt-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,qEAAqE;IACrC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAM;IAEjE,OAAO,CAAC,IAAI,CAA+B;IAEf,IAAI,SAAK;IAET,KAAK,SAAK;IAEc,QAAQ,SAAM;IAItC,QAAQ,SAAK;IAIzC,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,OAAO,GAIlB;IAQD,OAAO,KAAK,KAAK,GAwBhB;IAED,OAAO,CAAC,EAAE;IAYV,OAAO,KAAK,KAAK,GAIhB;IAED,MAAM,CAAC,MAAM,0BAkDX;IAEF,MAAM;CAqDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/tt-pagination.js

@@ -8,6 +8,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "./tt-button.js";
 import "./tt-icon.js";
+import { StringsController } from "./strings.js";
 /**
  * Page navigation. Owns nothing: the current page comes in, and a click
  * emits the page you asked for. The parent decides what that means and
@@ -16,6 +17,9 @@ import "./tt-icon.js";
 let TTPagination = class TTPagination extends LitElement {
     constructor() {
         super(...arguments);
+        /** This component's own text, over setStrings() (see strings.ts). */
+        this.strings = {};
+        this.text = new StringsController(this);
         this.page = 1;
         this.total = 0;
         this.pageSize = 10;
@@ -131,7 +135,7 @@ let TTPagination = class TTPagination extends LitElement {
         const current = this.current;
         const { from, to } = this.range;
         return html `
-      <nav class="bar" part="bar" aria-label="Pagination">
+      <nav class="bar" part="bar" aria-label=${this.text.get("pagination")}>
         <span class="summary">
           ${from}-${to} of ${this.total}
         </span>
@@ -175,6 +179,9 @@ let TTPagination = class TTPagination extends LitElement {
     `;
     }
 };
+__decorate([
+    property({ attribute: false })
+], TTPagination.prototype, "strings", void 0);
 __decorate([
     property({ type: Number })
 ], TTPagination.prototype, "page", void 0);

package/dist/tt-pagination.js.map

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

package/dist/tt-product.d.ts

@@ -1,35 +1,87 @@
 import { LitElement } from "lit";
-import "./tt-card.js";
 import "./tt-image.js";
 import "./tt-button.js";
 import "./tt-icon.js";
 export type ProductOrientation = "vertical" | "horizontal";
-export type ProductVariant = "default" | "minimal" | "elevated" | "featured";
-export type ProductLayout = "standard" | "overlay" | "compact";
+export type ProductSize = "medium" | "small";
+/**
+ * A product in a shop: photo, name, price and a button.
+ *
+ * TWO CHOICES, FOUR RESULTS. `orientation` (a tile for a grid, or a row
+ * for a list) and `size` (medium, or small for two across on a phone).
+ * Every pairing of the two is designed, so there is no combination that
+ * breaks. It had four variants and three layouts, twenty-four pairings,
+ * and several of them did: text on a pale photo, a white band under the
+ * photo of a tall row, a layout that did nothing in a row.
+ *
+ * PROPS GIVE THE DEFAULTS, SLOTS ADD TO THEM. `src` draws the photo,
+ * `rating` the star, `button-label` the button. The `media`, `meta` and
+ * `actions` slots add your own beside them (or over the photo), and
+ * clearing the prop drops its default. One rule, so nothing disappears
+ * when something is added.
+ *
+ * ONE TARGET. With `href` the name is a link, or with `clickable` a
+ * button, and either one is stretched over the whole card by a
+ * pseudo-element, so the card is clickable while the accessibility tree
+ * holds ONE link named by the product, not a card-sized link wrapping a
+ * button (interactive content inside a link is invalid and announced
+ * twice). The action row sits above the stretched link, so its buttons
+ * stay separate targets.
+ *
+ * The card draws its own surface with tt-card's tokens rather than
+ * composing tt-card, because the stretched link needs the surface as its
+ * positioned box and the focus ring has to go round the whole card.
+ *
+ * @fires tt-product-action - { value, heading } when the built-in button is pressed.
+ * @fires tt-product-open - { value, heading } when a `clickable` card is opened.
+ *
+ * @slot media - Your own media instead of the photo (a carousel, a video), filling the ratio box. Leave `src` empty.
+ * @slot badge - Over the top-left of the photo: Sale, New, Sold out.
+ * @slot meta - Beside the rating: tags, stock, delivery.
+ * @slot actions - After the built-in button: a wishlist icon, a quantity, your own buttons.
+ */
 export declare class TTProduct extends LitElement {
-    src: string;
-    ratio: string;
-    orientation: ProductOrientation;
-    variant: ProductVariant;
-    layout: ProductLayout;
     heading: string;
+    /** Its place in the page outline, as on tt-card. */
+    headingLevel: number;
     description: string;
     descriptionLines: number;
     price: string;
     wasPrice: string;
     rating: string;
+    src: string;
+    ratio: string;
+    /** Identifies the product in its events. */
     value: string;
-    buttonLink: string;
+    /** The product's page. The name becomes a link over the whole card. */
+    href: string;
+    /** Without href: the whole card is a button that emits tt-product-open. */
+    clickable: boolean;
+    /** The built-in button's text. Empty for no built-in button. */
     buttonLabel: string;
+    orientation: ProductOrientation;
+    size: ProductSize;
+    /** Cannot be bought (sold out): the button is off and the photo greys. Still a link. */
     disabled: boolean;
-    private handleClick;
+    private hasMedia;
+    private hasMeta;
+    private hasActions;
+    private filled;
+    private onMedia;
+    private onMeta;
+    private onActions;
+    private get detail();
+    private handleAction;
+    private handleOpen;
+    /** The link's address, when it is one a browser may follow. */
+    private get url();
+    /** A link or a button covers the card: it has a name to carry. */
+    private get interactive();
     static styles: import("lit").CSSResult[];
-    private renderMedia;
-    private renderRating;
-    private renderBody;
     private get actionName();
-    private renderQuickAdd;
-    private renderButton;
+    private renderAction;
+    private renderHeading;
+    private renderPrice;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/tt-product.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tt-product.d.ts","sourceRoot":"","sources":["../src/tt-product.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAQrD,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC7E,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/D,qBACa,SAAU,SAAQ,UAAU;IACX,GAAG,SAAM;IACT,KAAK,SAAO;IAGxC,WAAW,EAAE,kBAAkB,CAAc;IAG7C,OAAO,EAAE,cAAc,CAAa;IAGpC,MAAM,EAAE,aAAa,CAAc;IAEP,OAAO,SAAM;IACb,WAAW,SAAM;IACe,gBAAgB,SAAK;IAErD,KAAK,SAAM;IACa,QAAQ,SAAM;IACtC,MAAM,SAAM;IAEZ,KAAK,SAAM;IACe,UAAU,SAAM;IACf,WAAW,SAAmB;IAEzC,QAAQ,UAAS;IAE7D,OAAO,CAAC,WAAW;IAcnB,MAAM,CAAC,MAAM,4BA4WV;IAEH,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IA8ClB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAcpB,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"tt-product.d.ts","sourceRoot":"","sources":["../src/tt-product.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAK7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,OAAO,SAAM;IAEzC,oDAAoD;IACI,YAAY,SAAK;IAE7C,WAAW,SAAM;IACe,gBAAgB,SAAK;IAErD,KAAK,SAAM;IACa,QAAQ,SAAM;IACtC,MAAM,SAAM;IAEZ,GAAG,SAAM;IACT,KAAK,SAAO;IAExC,4CAA4C;IAChB,KAAK,SAAM;IAEvC,uEAAuE;IAC3C,IAAI,SAAM;IAEtC,2EAA2E;IAC/B,SAAS,UAAS;IAE9D,gEAAgE;IACT,WAAW,SAAmB;IAE1C,WAAW,EAAE,kBAAkB,CAAc;IAC7C,IAAI,EAAE,WAAW,CAAY;IAExE,wFAAwF;IAC5C,QAAQ,UAAS;IAGpD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,OAAO,CAA0D;IACzE,OAAO,CAAC,MAAM,CAAyD;IACvE,OAAO,CAAC,SAAS,CAA4D;IAE7E,OAAO,KAAK,MAAM,GAEjB;IAKD,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IAMlB,+DAA+D;IAC/D,OAAO,KAAK,GAAG,GAEd;IAED,kEAAkE;IAClE,OAAO,KAAK,WAAW,GAEtB;IAED,MAAM,CAAC,MAAM,4BAsXV;IAQH,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,YAAY;IAkCpB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,WAAW;IAanB,MAAM;CA8CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}