@helixui/library 0.1.0

package/dist/shared/hx-card-DfEGlbZR.js

@@ -0,0 +1,279 @@
+import { css as p, LitElement as g, nothing as l, html as v } from "lit";
+import { property as s, state as d, customElement as x } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { t as m } from "./lit-Dpo7RLp4.js";
+const _ = p`
+  :host {
+    display: block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
+    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    overflow: hidden;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    transition:
+      box-shadow var(--hx-transition-normal, 250ms ease),
+      transform var(--hx-transition-normal, 250ms ease);
+  }
+
+  /* ─── Elevation Variants ─── */
+
+  .card--flat {
+    box-shadow: none;
+  }
+
+  .card--raised {
+    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  }
+
+  .card--floating {
+    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));
+  }
+
+  /* ─── Style Variants ─── */
+
+  .card--default {
+    /* Default styling — uses base styles */
+  }
+
+  .card--featured {
+    border-color: var(--hx-color-primary-500, #2563eb);
+    border-width: var(--hx-border-width-medium, 2px);
+  }
+
+  .card--compact .card__body {
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__heading {
+    padding-top: var(--hx-space-3, 0.75rem);
+    padding-right: var(--hx-space-3, 0.75rem);
+    padding-left: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__footer {
+    padding-right: var(--hx-space-3, 0.75rem);
+    padding-bottom: var(--hx-space-3, 0.75rem);
+    padding-left: var(--hx-space-3, 0.75rem);
+  }
+
+  .card--compact .card__actions {
+    padding-right: var(--hx-space-3, 0.75rem);
+    padding-bottom: var(--hx-space-3, 0.75rem);
+    padding-left: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Interactive ─── */
+
+  .card--interactive {
+    cursor: pointer;
+  }
+
+  .card--interactive:hover {
+    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    transform: translateY(var(--hx-lift-md, -2px));
+  }
+
+  .card--interactive:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .card--interactive:active {
+    transform: translateY(0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      transition: none;
+    }
+
+    .card--interactive:hover {
+      transform: none;
+    }
+
+    .card--interactive:active {
+      transform: none;
+    }
+  }
+
+  /* ─── Hidden empty slot wrappers ─── */
+
+  [hidden] {
+    display: none !important;
+  }
+
+  /* ─── Sections ─── */
+
+  .card__image {
+    overflow: hidden;
+    line-height: 0;
+  }
+
+  .card__image ::slotted(img) {
+    width: 100%;
+    aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);
+    display: block;
+    object-fit: cover;
+  }
+
+  .card__heading {
+    padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: 0;
+    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .card__body {
+    padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    flex: 1;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+    color: var(--hx-color-neutral-600, #495057);
+  }
+
+  .card__footer {
+    padding-top: 0;
+    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+  }
+
+  .card__actions {
+    display: flex;
+    gap: var(--hx-space-2, 0.5rem);
+    padding-top: var(--hx-space-4, 1rem);
+    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+    margin-top: auto;
+  }
+`;
+var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (a, r, n, o) => {
+  for (var i = o > 1 ? void 0 : o ? u(r, n) : r, h = a.length - 1, c; h >= 0; h--)
+    (c = a[h]) && (i = (o ? c(r, n, i) : c(i)) || i);
+  return o && i && b(r, n, i), i;
+};
+let e = class extends g {
+  constructor() {
+    super(...arguments), this.variant = "default", this.elevation = "flat", this.hxHref = void 0, this.hxAriaLabel = void 0, this._hasImage = !1, this._hasHeading = !1, this._hasFooter = !1, this._hasActions = !1;
+  }
+  _onImageSlotChange(a) {
+    const r = a.target;
+    this._hasImage = r.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onHeadingSlotChange(a) {
+    const r = a.target;
+    this._hasHeading = r.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onFooterSlotChange(a) {
+    const r = a.target;
+    this._hasFooter = r.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onActionsSlotChange(a) {
+    const r = a.target;
+    this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref && console.warn(
+      '[hx-card] Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: interactive controls cannot be nested inside role="link". Use either hx-href or the actions slot, not both.'
+    );
+  }
+  // ─── Event Handling ───
+  _dispatchCardClick(a) {
+    this.hxHref && this.dispatchEvent(
+      new CustomEvent("hx-click", {
+        bubbles: !0,
+        composed: !0,
+        detail: { href: this.hxHref, originalEvent: a }
+      })
+    );
+  }
+  _handleClick(a) {
+    this._dispatchCardClick(a);
+  }
+  _handleKeyDown(a) {
+    this.hxHref && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._dispatchCardClick(a));
+  }
+  // ─── Render ───
+  render() {
+    const a = !!this.hxHref, r = {
+      card: !0,
+      [`card--${this.variant}`]: !0,
+      [`card--${this.elevation}`]: !0,
+      "card--interactive": a
+    };
+    return v`
+      <div
+        part="card"
+        class=${f(r)}
+        role=${a ? "link" : l}
+        tabindex=${a ? "0" : l}
+        aria-label=${a && this.hxAriaLabel ? this.hxAriaLabel : l}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <div class="card__image" part="image" ?hidden=${!this._hasImage}>
+          <slot name="image" @slotchange=${this._onImageSlotChange}></slot>
+        </div>
+
+        <div class="card__heading" part="heading" ?hidden=${!this._hasHeading}>
+          <slot name="heading" @slotchange=${this._onHeadingSlotChange}></slot>
+        </div>
+
+        <div class="card__body" part="body">
+          <slot></slot>
+        </div>
+
+        <div class="card__footer" part="footer" ?hidden=${!this._hasFooter}>
+          <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+        </div>
+
+        <div class="card__actions" part="actions" ?hidden=${!this._hasActions}>
+          <slot name="actions" @slotchange=${this._onActionsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [m, _];
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "elevation", 2);
+t([
+  s({ type: String, attribute: "hx-href" })
+], e.prototype, "hxHref", 2);
+t([
+  s({ type: String, attribute: "hx-aria-label" })
+], e.prototype, "hxAriaLabel", 2);
+t([
+  d()
+], e.prototype, "_hasImage", 2);
+t([
+  d()
+], e.prototype, "_hasHeading", 2);
+t([
+  d()
+], e.prototype, "_hasFooter", 2);
+t([
+  d()
+], e.prototype, "_hasActions", 2);
+e = t([
+  x("hx-card")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-card-DfEGlbZR.js.map

package/dist/shared/hx-card-DfEGlbZR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-card-DfEGlbZR.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n  :host {\n    display: block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    overflow: hidden;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    transition:\n      box-shadow var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  /* ─── Elevation Variants ─── */\n\n  .card--flat {\n    box-shadow: none;\n  }\n\n  .card--raised {\n    box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n  }\n\n  .card--floating {\n    box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n  }\n\n  /* ─── Style Variants ─── */\n\n  .card--default {\n    /* Default styling — uses base styles */\n  }\n\n  .card--featured {\n    border-color: var(--hx-color-primary-500, #2563eb);\n    border-width: var(--hx-border-width-medium, 2px);\n  }\n\n  .card--compact .card__body {\n    padding: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__heading {\n    padding-top: var(--hx-space-3, 0.75rem);\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__footer {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__actions {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Interactive ─── */\n\n  .card--interactive {\n    cursor: pointer;\n  }\n\n  .card--interactive:hover {\n    box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n    transform: translateY(var(--hx-lift-md, -2px));\n  }\n\n  .card--interactive:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .card--interactive:active {\n    transform: translateY(0);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .card {\n      transition: none;\n    }\n\n    .card--interactive:hover {\n      transform: none;\n    }\n\n    .card--interactive:active {\n      transform: none;\n    }\n  }\n\n  /* ─── Hidden empty slot wrappers ─── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ─── Sections ─── */\n\n  .card__image {\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .card__image ::slotted(img) {\n    width: 100%;\n    aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n    display: block;\n    object-fit: cover;\n  }\n\n  .card__heading {\n    padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: 0;\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .card__body {\n    padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    flex: 1;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-color-neutral-600, #495057);\n  }\n\n  .card__footer {\n    padding-top: 0;\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n  }\n\n  .card__actions {\n    display: flex;\n    gap: var(--hx-space-2, 0.5rem);\n    padding-top: var(--hx-space-4, 1rem);\n    padding-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-left: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    margin-top: auto;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCardStyles } from './hx-card.styles.js';\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n  static override styles = [tokenStyles, helixCardStyles];\n\n  /**\n   * Visual style variant of the card.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'featured' | 'compact' = 'default';\n\n  /**\n   * Elevation (shadow depth) of the card.\n   * @attr elevation\n   */\n  @property({ type: String, reflect: true })\n  elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n  /**\n   * Optional URL. When set, the card becomes interactive (clickable)\n   * and navigates to this URL on click.\n   * Uses hx-href to avoid conflicting with the native HTML href attribute.\n   * @attr hx-href\n   */\n  @property({ type: String, attribute: 'hx-href' })\n  hxHref: string | undefined = undefined;\n\n  /**\n   * Accessible label for interactive cards. Use this to provide a meaningful\n   * description of the card's purpose rather than exposing the raw URL.\n   * Only applies when hx-href is set.\n   * @attr hx-aria-label\n   */\n  @property({ type: String, attribute: 'hx-aria-label' })\n  hxAriaLabel: string | undefined = undefined;\n\n  // ─── Slot Detection ───\n\n  @state() private _hasImage = false;\n  @state() private _hasHeading = false;\n  @state() private _hasFooter = false;\n  @state() private _hasActions = false;\n\n  private _onImageSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onHeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n    if (this._hasActions && this.hxHref) {\n      console.warn(\n        '[hx-card] Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n          'interactive controls cannot be nested inside role=\"link\". ' +\n          'Use either hx-href or the actions slot, not both.',\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    /**\n     * Dispatched when an interactive card is clicked.\n     * Includes the target href in the detail.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { href: this.hxHref, originalEvent },\n      }),\n    );\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    this._dispatchCardClick(e);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._dispatchCardClick(e);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isInteractive = !!this.hxHref;\n\n    const classes = {\n      card: true,\n      [`card--${this.variant}`]: true,\n      [`card--${this.elevation}`]: true,\n      'card--interactive': isInteractive,\n    };\n\n    return html`\n      <div\n        part=\"card\"\n        class=${classMap(classes)}\n        role=${isInteractive ? 'link' : nothing}\n        tabindex=${isInteractive ? '0' : nothing}\n        aria-label=${isInteractive && this.hxAriaLabel ? this.hxAriaLabel : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n          <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n        </div>\n\n        <div class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\n          <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n        </div>\n\n        <div class=\"card__body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n\n        <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n          <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-card': HelixCard;\n  }\n}\n"],"names":["helixCardStyles","css","HelixCard","LitElement","e","slot","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACmCxB,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,UAA8C,WAO9C,KAAA,YAA4C,QAS5C,KAAA,SAA6B,QAS7B,KAAA,cAAkC,QAIzB,KAAQ,YAAY,IACpB,KAAQ,cAAc,IACtB,KAAQ,aAAa,IACrB,KAAQ,cAAc;AAAA,EAAA;AAAA,EAEvB,mBAAmBC,GAAgB;AACzC,UAAMC,IAAOD,EAAE;AACf,SAAK,YAAYC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EAClE;AAAA,EAEQ,qBAAqBD,GAAgB;AAC3C,UAAMC,IAAOD,EAAE;AACf,SAAK,cAAcC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACpE;AAAA,EAEQ,oBAAoBD,GAAgB;AAC1C,UAAMC,IAAOD,EAAE;AACf,SAAK,aAAaC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACnE;AAAA,EAEQ,qBAAqBD,GAAgB;AAC3C,UAAMC,IAAOD,EAAE;AACf,SAAK,cAAcC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS,GAC9D,KAAK,eAAe,KAAK,UAC3B,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAKN;AAAA;AAAA,EAIQ,mBAAmBC,GAAiD;AAC1E,IAAK,KAAK,UAOV,KAAK;AAAA,MACH,IAAI,YAAyE,YAAY;AAAA,QACvF,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,MAAM,KAAK,QAAQ,eAAAA,EAAA;AAAA,MAAc,CAC5C;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,aAAaF,GAAqB;AACxC,SAAK,mBAAmBA,CAAC;AAAA,EAC3B;AAAA,EAEQ,eAAeA,GAAwB;AAC7C,IAAK,KAAK,WAENA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACF,KAAK,mBAAmBA,CAAC;AAAA,EAE7B;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMG,IAAgB,CAAC,CAAC,KAAK,QAEvBC,IAAU;AAAA,MACd,MAAM;AAAA,MACN,CAAC,SAAS,KAAK,OAAO,EAAE,GAAG;AAAA,MAC3B,CAAC,SAAS,KAAK,SAAS,EAAE,GAAG;AAAA,MAC7B,qBAAqBD;AAAA,IAAA;AAGvB,WAAOE;AAAA;AAAA;AAAA,gBAGKC,EAASF,CAAO,CAAC;AAAA,eAClBD,IAAgB,SAASI,CAAO;AAAA,mBAC5BJ,IAAgB,MAAMI,CAAO;AAAA,qBAC3BJ,KAAiB,KAAK,cAAc,KAAK,cAAcI,CAAO;AAAA,iBAClE,KAAK,YAAY;AAAA,mBACf,KAAK,cAAc;AAAA;AAAA,wDAEkB,CAAC,KAAK,SAAS;AAAA,2CAC5B,KAAK,kBAAkB;AAAA;AAAA;AAAA,4DAGN,CAAC,KAAK,WAAW;AAAA,6CAChC,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0DAOZ,CAAC,KAAK,UAAU;AAAA,4CAC9B,KAAK,mBAAmB;AAAA;AAAA;AAAA,4DAGR,CAAC,KAAK,WAAW;AAAA,6CAChC,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAjJaT,EACK,SAAS,CAACU,GAAaZ,CAAe;AAOtDa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BZ,EAQX,WAAA,WAAA,CAAA;AAOAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BZ,EAeX,WAAA,aAAA,CAAA;AASAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAvBrCZ,EAwBX,WAAA,UAAA,CAAA;AASAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAhC3CZ,EAiCX,WAAA,eAAA,CAAA;AAIiBW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArCIb,EAqCM,WAAA,aAAA,CAAA;AACAW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtCIb,EAsCM,WAAA,eAAA,CAAA;AACAW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvCIb,EAuCM,WAAA,cAAA,CAAA;AACAW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxCIb,EAwCM,WAAA,eAAA,CAAA;AAxCNA,IAANW,EAAA;AAAA,EADNG,EAAc,SAAS;AAAA,GACXd,CAAA;"}