@cognivo/components 0.8.0

package/dist/components/cg-scroll-area/cg-scroll-area.js

@@ -0,0 +1,111 @@
+import { css as v, LitElement as d, html as b } from "lit";
+import { property as n, customElement as p } from "lit/decorators.js";
+import { h, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, e, a, t) => {
+  for (var r = t > 1 ? void 0 : t ? f(e, a) : e, l = s.length - 1, c; l >= 0; l--)
+    (c = s[l]) && (r = (t ? c(e, a, r) : c(r)) || r);
+  return t && r && u(e, a, r), r;
+};
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.orientation = "vertical", this.type = "hover";
+  }
+  render() {
+    return b`
+      <div class="viewport" tabindex="0">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = [h, w, v`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .viewport {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      scrollbar-width: thin;
+      scrollbar-color: var(--cg-color-surface-cards-border) transparent;
+    }
+
+    .viewport::-webkit-scrollbar {
+      width: var(--cg-component-scroll-area-scrollbar-size);
+      height: var(--cg-component-scroll-area-scrollbar-size);
+    }
+    .viewport::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .viewport::-webkit-scrollbar-thumb {
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-scroll-area-scrollbar-radius);
+      border: var(--cg-border-width-100) solid transparent;
+      background-clip: padding-box;
+      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .viewport::-webkit-scrollbar-thumb:hover {
+      background-color: var(--cg-color-surface-cards-border-strong);
+      background-clip: padding-box;
+    }
+    .viewport::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    .viewport:focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    /* Hide scrollbar until hover when type="hover" — fade in smoothly */
+    :host([type="hover"]) .viewport::-webkit-scrollbar-thumb {
+      background-color: transparent;
+      transition: background-color var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    :host([type="hover"]:hover) .viewport::-webkit-scrollbar-thumb {
+      background-color: var(--cg-color-surface-cards-border);
+    }
+    :host([type="hover"]:hover) .viewport::-webkit-scrollbar-thumb:hover {
+      background-color: var(--cg-color-surface-cards-border-strong);
+    }
+
+    /* Always-visible scrollbar (forces overflow even when content fits) */
+    :host([type="always"]) .viewport {
+      overflow: scroll;
+    }
+    :host([type="always"][orientation="vertical"]) .viewport {
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+    :host([type="always"][orientation="horizontal"]) .viewport {
+      overflow-y: hidden;
+      overflow-x: scroll;
+    }
+
+    /* Horizontal only */
+    :host([orientation="horizontal"]) .viewport {
+      overflow-y: hidden;
+      overflow-x: auto;
+    }
+    :host([orientation="vertical"]) .viewport {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  `];
+i([
+  n({ reflect: !0 })
+], o.prototype, "orientation", 2);
+i([
+  n({ reflect: !0 })
+], o.prototype, "type", 2);
+o = i([
+  p("cg-scroll-area")
+], o);
+export {
+  o as CgScrollArea
+};
+//# sourceMappingURL=cg-scroll-area.js.map

package/dist/components/cg-scroll-area/cg-scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-scroll-area.js","sources":["../../../src/components/cg-scroll-area/cg-scroll-area.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-scroll-area\n * Custom-styled scroll container with themed scrollbars.\n * Uses native scrolling with styled thumbs.\n *\n * @example\n * ```html\n * <cg-scroll-area style=\"height: 300px;\">\n *   <div>Long content...</div>\n * </cg-scroll-area>\n * ```\n *\n * @slot - Scrollable content\n */\n@customElement('cg-scroll-area')\nexport class CgScrollArea extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .viewport {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      scrollbar-width: thin;\n      scrollbar-color: var(--cg-color-surface-cards-border) transparent;\n    }\n\n    .viewport::-webkit-scrollbar {\n      width: var(--cg-component-scroll-area-scrollbar-size);\n      height: var(--cg-component-scroll-area-scrollbar-size);\n    }\n    .viewport::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .viewport::-webkit-scrollbar-thumb {\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-scroll-area-scrollbar-radius);\n      border: var(--cg-border-width-100) solid transparent;\n      background-clip: padding-box;\n      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n      background-clip: padding-box;\n    }\n    .viewport::-webkit-scrollbar-corner {\n      background: transparent;\n    }\n    .viewport:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* Hide scrollbar until hover when type=\"hover\" — fade in smoothly */\n    :host([type=\"hover\"]) .viewport::-webkit-scrollbar-thumb {\n      background-color: transparent;\n      transition: background-color var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb {\n      background-color: var(--cg-color-surface-cards-border);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    /* Always-visible scrollbar (forces overflow even when content fits) */\n    :host([type=\"always\"]) .viewport {\n      overflow: scroll;\n    }\n    :host([type=\"always\"][orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: scroll;\n    }\n    :host([type=\"always\"][orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: scroll;\n    }\n\n    /* Horizontal only */\n    :host([orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: auto;\n    }\n    :host([orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n  `];\n\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' | 'both' = 'vertical';\n  @property({ reflect: true }) type: 'auto' | 'always' | 'hover' = 'hover';\n\n  override render() {\n    return html`\n      <div class=\"viewport\" tabindex=\"0\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-scroll-area': CgScrollArea;\n  }\n}\n"],"names":["CgScrollArea","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgFwB,KAAA,cAAkD,YAClD,KAAA,OAAoC;AAAA,EAAA;AAAA,EAExD,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA1FaF,EACK,SAAS,CAACG,GAAWC,GAAeC;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,GA6EnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhFhBP,EAgFkB,WAAA,eAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjFhBP,EAiFkB,WAAA,QAAA,CAAA;AAjFlBA,IAANM,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBR,CAAA;"}

package/dist/components/cg-search-input/cg-search-input.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-search-input
+ * Search input — wraps `<cg-input>` with a leading search icon, clearable
+ * trailing button, debounced search event, and a `role="search"` landmark.
+ * Use this anywhere a user filters/queries a collection.
+ *
+ * Two events: `cg-search` fires after `debounce` ms of inactivity and on
+ * Enter; `cg-input` fires on every keystroke (forwarded from cg-input)
+ * for callers that want immediate value-change visibility without the
+ * debounce.
+ *
+ * @example
+ * ```html
+ * <cg-search-input
+ *   placeholder="Search patients…"
+ *   debounce="200"
+ *   @cg-search=${onSearch}
+ * ></cg-search-input>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-input - Forwarded from cg-input on every keystroke
+ * @fires {CustomEvent<{value: string}>} cg-search - Debounced search event (also fires on Enter and clear)
+ *
+ * @cssprop --cg-component-input-height-md - Inherits from cg-input
+ */
+export declare class CgSearchInput extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Current query value. Two-way: read it back via `value`, or set it to seed/clear. */
+    value: string;
+    /** Placeholder shown when the field is empty. */
+    placeholder: string;
+    /** Visible label. Pass empty string to suppress. */
+    label: string;
+    /** Debounce window in ms for the `cg-search` event. 0 disables the debounce. */
+    debounce: number;
+    /** Disable the input. */
+    disabled: boolean;
+    /** Mark the input as loading (input shows the inherited loading affordance). */
+    loading: boolean;
+    /** Suppress the leading search icon. */
+    noIcon: boolean;
+    private _internalValue;
+    private _searchTimer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _emitSearch;
+    private _scheduleSearch;
+    private _onInput;
+    private _onKeydown;
+    private _onClear;
+    /** Force the search event to fire now, bypassing the debounce window. */
+    flush(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-search-input': CgSearchInput;
+    }
+}
+//# sourceMappingURL=cg-search-input.d.ts.map

package/dist/components/cg-search-input/cg-search-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-search-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-search-input/cg-search-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAGnB;IAEH,uFAAuF;IAC3E,KAAK,SAAM;IAEvB,iDAAiD;IACrC,WAAW,SAAY;IAEnC,oDAAoD;IACxC,KAAK,SAAM;IAEvB,gFAAgF;IACpD,QAAQ,SAAO;IAE3C,yBAAyB;IACmB,QAAQ,UAAS;IAE7D,gFAAgF;IACpC,OAAO,UAAS;IAE5D,wCAAwC;IAC0B,MAAM,UAAS;IAExE,OAAO,CAAC,cAAc,CAAM;IAErC,OAAO,CAAC,YAAY,CAAqB;IAEhC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,QAAQ,CAMd;IAEF,OAAO,CAAC,UAAU,CAOhB;IAEF,OAAO,CAAC,QAAQ,CAQd;IAEF,yEAAyE;IACzE,KAAK,IAAI,IAAI;IAQJ,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-search-input/cg-search-input.js

@@ -0,0 +1,106 @@
+import { css as u, LitElement as p, html as n } from "lit";
+import { property as a, state as d, customElement as m } from "lit/decorators.js";
+import { h as _, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-input/cg-input.js";
+import "../cg-icon/cg-icon.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, l, r, h) => {
+  for (var s = h > 1 ? void 0 : h ? v(l, r) : l, o = e.length - 1, c; o >= 0; o--)
+    (c = e[o]) && (s = (h ? c(l, r, s) : c(s)) || s);
+  return h && s && f(l, r, s), s;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "Search", this.label = "", this.debounce = 200, this.disabled = !1, this.loading = !1, this.noIcon = !1, this._internalValue = "", this._onInput = (e) => {
+      const r = e.detail?.value ?? "";
+      this._internalValue = r, this.value = r, this._scheduleSearch(r);
+    }, this._onKeydown = (e) => {
+      e.key === "Enter" && (this._searchTimer && (clearTimeout(this._searchTimer), this._searchTimer = void 0), this._emitSearch(this._internalValue));
+    }, this._onClear = () => {
+      this._internalValue = "", this.value = "", this._searchTimer && (clearTimeout(this._searchTimer), this._searchTimer = void 0), this._emitSearch("");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._internalValue = this.value;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._searchTimer && clearTimeout(this._searchTimer);
+  }
+  updated(e) {
+    e.has("value") && this.value !== this._internalValue && (this._internalValue = this.value);
+  }
+  _emitSearch(e) {
+    this.dispatchEvent(new CustomEvent("cg-search", {
+      detail: { value: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _scheduleSearch(e) {
+    if (this._searchTimer && clearTimeout(this._searchTimer), this.debounce <= 0) {
+      this._emitSearch(e);
+      return;
+    }
+    this._searchTimer = window.setTimeout(() => {
+      this._emitSearch(e), this._searchTimer = void 0;
+    }, this.debounce);
+  }
+  /** Force the search event to fire now, bypassing the debounce window. */
+  flush() {
+    this._searchTimer && (clearTimeout(this._searchTimer), this._searchTimer = void 0), this._emitSearch(this._internalValue);
+  }
+  render() {
+    return n`
+      <div class="wrapper" role="search">
+        <cg-input
+          type="search"
+          .value=${this._internalValue}
+          .placeholder=${this.placeholder}
+          .label=${this.label}
+          ?disabled=${this.disabled}
+          ?loading=${this.loading}
+          clearable
+          @cg-input=${this._onInput}
+          @cg-clear=${this._onClear}
+          @keydown=${this._onKeydown}
+        >
+          ${this.noIcon ? "" : n`<cg-icon slot="prefix" name="search" size="sm"></cg-icon>`}
+        </cg-input>
+      </div>
+    `;
+  }
+};
+t.styles = [_, b, u`
+    :host { display: block; }
+    .wrapper { display: block; }
+  `];
+i([
+  a()
+], t.prototype, "value", 2);
+i([
+  a()
+], t.prototype, "placeholder", 2);
+i([
+  a()
+], t.prototype, "label", 2);
+i([
+  a({ type: Number })
+], t.prototype, "debounce", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+i([
+  a({ type: Boolean, attribute: "no-icon", reflect: !0 })
+], t.prototype, "noIcon", 2);
+i([
+  d()
+], t.prototype, "_internalValue", 2);
+t = i([
+  m("cg-search-input")
+], t);
+export {
+  t as CgSearchInput
+};
+//# sourceMappingURL=cg-search-input.js.map

package/dist/components/cg-search-input/cg-search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-search-input.js","sources":["../../../src/components/cg-search-input/cg-search-input.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-input/cg-input.js';\nimport '../cg-icon/cg-icon.js';\n\n/**\n * @element cg-search-input\n * Search input — wraps `<cg-input>` with a leading search icon, clearable\n * trailing button, debounced search event, and a `role=\"search\"` landmark.\n * Use this anywhere a user filters/queries a collection.\n *\n * Two events: `cg-search` fires after `debounce` ms of inactivity and on\n * Enter; `cg-input` fires on every keystroke (forwarded from cg-input)\n * for callers that want immediate value-change visibility without the\n * debounce.\n *\n * @example\n * ```html\n * <cg-search-input\n *   placeholder=\"Search patients…\"\n *   debounce=\"200\"\n *   @cg-search=${onSearch}\n * ></cg-search-input>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-input - Forwarded from cg-input on every keystroke\n * @fires {CustomEvent<{value: string}>} cg-search - Debounced search event (also fires on Enter and clear)\n *\n * @cssprop --cg-component-input-height-md - Inherits from cg-input\n */\n@customElement('cg-search-input')\nexport class CgSearchInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n    .wrapper { display: block; }\n  `];\n\n  /** Current query value. Two-way: read it back via `value`, or set it to seed/clear. */\n  @property() value = '';\n\n  /** Placeholder shown when the field is empty. */\n  @property() placeholder = 'Search';\n\n  /** Visible label. Pass empty string to suppress. */\n  @property() label = '';\n\n  /** Debounce window in ms for the `cg-search` event. 0 disables the debounce. */\n  @property({ type: Number }) debounce = 200;\n\n  /** Disable the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Mark the input as loading (input shows the inherited loading affordance). */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Suppress the leading search icon. */\n  @property({ type: Boolean, attribute: 'no-icon', reflect: true }) noIcon = false;\n\n  @state() private _internalValue = '';\n\n  private _searchTimer: number | undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._internalValue = this.value;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._searchTimer) clearTimeout(this._searchTimer);\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value') && this.value !== this._internalValue) {\n      this._internalValue = this.value;\n    }\n  }\n\n  private _emitSearch(value: string): void {\n    this.dispatchEvent(new CustomEvent('cg-search', {\n      detail: { value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _scheduleSearch(value: string): void {\n    if (this._searchTimer) clearTimeout(this._searchTimer);\n    if (this.debounce <= 0) {\n      this._emitSearch(value);\n      return;\n    }\n    this._searchTimer = window.setTimeout(() => {\n      this._emitSearch(value);\n      this._searchTimer = undefined;\n    }, this.debounce);\n  }\n\n  private _onInput = (e: Event): void => {\n    const detail = (e as CustomEvent<{ value: string }>).detail;\n    const next = detail?.value ?? '';\n    this._internalValue = next;\n    this.value = next;\n    this._scheduleSearch(next);\n  };\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== 'Enter') return;\n    if (this._searchTimer) {\n      clearTimeout(this._searchTimer);\n      this._searchTimer = undefined;\n    }\n    this._emitSearch(this._internalValue);\n  };\n\n  private _onClear = (): void => {\n    this._internalValue = '';\n    this.value = '';\n    if (this._searchTimer) {\n      clearTimeout(this._searchTimer);\n      this._searchTimer = undefined;\n    }\n    this._emitSearch('');\n  };\n\n  /** Force the search event to fire now, bypassing the debounce window. */\n  flush(): void {\n    if (this._searchTimer) {\n      clearTimeout(this._searchTimer);\n      this._searchTimer = undefined;\n    }\n    this._emitSearch(this._internalValue);\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrapper\" role=\"search\">\n        <cg-input\n          type=\"search\"\n          .value=${this._internalValue}\n          .placeholder=${this.placeholder}\n          .label=${this.label}\n          ?disabled=${this.disabled}\n          ?loading=${this.loading}\n          clearable\n          @cg-input=${this._onInput}\n          @cg-clear=${this._onClear}\n          @keydown=${this._onKeydown}\n        >\n          ${this.noIcon ? '' : html`<cg-icon slot=\"prefix\" name=\"search\" size=\"sm\"></cg-icon>`}\n        </cg-input>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-search-input': CgSearchInput;\n  }\n}\n"],"names":["CgSearchInput","LitElement","next","changed","value","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-segmented-control/cg-segmented-control.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+export interface SegmentOption {
+    label: string;
+    value: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * @element cg-segmented-control
+ * iOS-style pill selector with animated indicator. Single value selection.
+ *
+ * @example
+ * ```html
+ * <cg-segmented-control
+ *   value="day"
+ *   .options=${[
+ *     { label: 'Day', value: 'day' },
+ *     { label: 'Week', value: 'week' },
+ *     { label: 'Month', value: 'month' },
+ *   ]}
+ * ></cg-segmented-control>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-segmented-change
+ */
+export declare class CgSegmentedControl extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    options: SegmentOption[];
+    value: string;
+    name: string;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    full: boolean;
+    private _resizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _updateIndicator;
+    private _select;
+    private _handleKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-segmented-control': CgSegmentedControl;
+    }
+}
+//# sourceMappingURL=cg-segmented-control.d.ts.map

package/dist/components/cg-segmented-control/cg-segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAkFnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASX,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,SAAM;IACX,IAAI,SAAM;IACsB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,IAAI,UAAS;IAEzD,OAAO,CAAC,eAAe,CAA+B;IAE7C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU5C,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IA+Bb,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/cg-segmented-control/cg-segmented-control.js

@@ -0,0 +1,182 @@
+import { css as g, LitElement as u, html as d } from "lit";
+import { property as a, customElement as p } from "lit/decorators.js";
+import { a as h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, o, t, r) => {
+  for (var s = r > 1 ? void 0 : r ? m(o, t) : o, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (s = (r ? l(o, t, s) : l(s)) || s);
+  return r && s && v(o, t, s), s;
+};
+let n = class extends u {
+  constructor() {
+    super(), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.size = "md", this.full = !1, this._resizeObserver = null, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._resizeObserver = new ResizeObserver(() => this._updateIndicator()), requestAnimationFrame(() => {
+      const e = this.shadowRoot?.querySelector(".track");
+      e && this._resizeObserver && this._resizeObserver.observe(e);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._resizeObserver = null;
+  }
+  updated(e) {
+    e.has("value") && this._internals?.setFormValue(this.value), (e.has("value") || e.has("options") || e.has("size")) && requestAnimationFrame(() => this._updateIndicator());
+  }
+  firstUpdated() {
+    requestAnimationFrame(() => this._updateIndicator());
+  }
+  _updateIndicator() {
+    const e = this.options.findIndex((s) => s.value === this.value);
+    if (e < 0) return;
+    const o = this.shadowRoot?.querySelectorAll(".segment"), t = this.shadowRoot?.querySelector(".indicator");
+    if (!o || !t || !o[e]) return;
+    const r = o[e];
+    t.style.width = `${r.offsetWidth}px`, t.style.transform = `translateX(${r.offsetLeft}px)`;
+  }
+  _select(e) {
+    e.disabled || this.disabled || (this.value = e.value, this.dispatchEvent(new CustomEvent("cg-segmented-change", {
+      detail: { value: e.value },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _handleKeydown(e) {
+    if (this.disabled) return;
+    const o = this.options.findIndex((r) => r.value === this.value);
+    if (o < 0) return;
+    let t = o;
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), t = (o - 1 + this.options.length) % this.options.length) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), t = (o + 1) % this.options.length) : e.key === "Home" ? (e.preventDefault(), t = 0) : e.key === "End" && (e.preventDefault(), t = this.options.length - 1), t !== o) {
+      const r = this.options[t];
+      r && !r.disabled && (this._select(r), this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll(".segment")?.[t]?.focus();
+      }));
+    }
+  }
+  render() {
+    return d`
+      <div class="track" role="radiogroup" aria-disabled=${this.disabled ? "true" : "false"} @keydown=${this._handleKeydown}>
+        <span class="indicator"></span>
+        ${this.options.map((e) => d`
+          <button
+            type="button"
+            class="segment"
+            role="radio"
+            aria-checked=${e.value === this.value ? "true" : "false"}
+            tabindex=${e.value === this.value ? "0" : "-1"}
+            ?disabled=${e.disabled || this.disabled}
+            @click=${() => this._select(e)}
+          >${e.label}</button>
+        `)}
+      </div>
+    `;
+  }
+};
+n.styles = [h, f, g`
+    :host {
+      display: inline-flex;
+    }
+
+    .track {
+      display: inline-flex;
+      position: relative;
+      padding: var(--cg-component-segmented-control-padding);
+      background: var(--cg-color-action-secondary-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: var(--cg-component-segmented-control-radius);
+      gap: var(--cg-spacing-2);
+    }
+    :host([full]) .track {
+      display: flex;
+      width: 100%;
+    }
+
+    .indicator {
+      position: absolute;
+      top: var(--cg-component-segmented-control-padding);
+      left: 0;
+      height: calc(100% - 2 * var(--cg-component-segmented-control-padding));
+      box-sizing: border-box;
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: calc(var(--cg-component-segmented-control-radius) - var(--cg-component-segmented-control-padding));
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),
+        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out);
+      pointer-events: none;
+    }
+
+    .segment {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-6);
+      height: calc(var(--cg-component-segmented-control-height-md) - 2 * var(--cg-component-segmented-control-padding));
+      padding: 0 var(--cg-spacing-16);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-container-outlined);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      z-index: 1;
+      border-radius: inherit;
+      flex: 1;
+    }
+    .segment:hover:not(:disabled) {
+      color: var(--cg-color-surface-base-text);
+    }
+    .segment[aria-checked="true"] {
+      color: var(--cg-color-surface-base-text);
+    }
+    .segment:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+    .segment:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) .segment {
+      height: calc(var(--cg-component-segmented-control-height-sm) - 2 * var(--cg-component-segmented-control-padding));
+      padding: 0 var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+    }
+    :host([size="lg"]) .segment {
+      height: calc(var(--cg-component-segmented-control-height-lg) - 2 * var(--cg-component-segmented-control-padding));
+      padding: 0 var(--cg-spacing-20);
+      font-size: var(--cg-font-size-base);
+    }
+  `];
+n.formAssociated = !0;
+i([
+  a({ type: Array })
+], n.prototype, "options", 2);
+i([
+  a()
+], n.prototype, "value", 2);
+i([
+  a()
+], n.prototype, "name", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+i([
+  a({ reflect: !0 })
+], n.prototype, "size", 2);
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "full", 2);
+n = i([
+  p("cg-segmented-control")
+], n);
+export {
+  n as CgSegmentedControl
+};
+//# sourceMappingURL=cg-segmented-control.js.map

package/dist/components/cg-segmented-control/cg-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-segmented-control.js","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentOption {\n  label: string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-segmented-control\n * iOS-style pill selector with animated indicator. Single value selection.\n *\n * @example\n * ```html\n * <cg-segmented-control\n *   value=\"day\"\n *   .options=${[\n *     { label: 'Day', value: 'day' },\n *     { label: 'Week', value: 'week' },\n *     { label: 'Month', value: 'month' },\n *   ]}\n * ></cg-segmented-control>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-segmented-change\n */\n@customElement('cg-segmented-control')\nexport class CgSegmentedControl extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    .track {\n      display: inline-flex;\n      position: relative;\n      padding: var(--cg-component-segmented-control-padding);\n      background: var(--cg-color-action-secondary-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-component-segmented-control-radius);\n      gap: var(--cg-spacing-2);\n    }\n    :host([full]) .track {\n      display: flex;\n      width: 100%;\n    }\n\n    .indicator {\n      position: absolute;\n      top: var(--cg-component-segmented-control-padding);\n      left: 0;\n      height: calc(100% - 2 * var(--cg-component-segmented-control-padding));\n      box-sizing: border-box;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: calc(var(--cg-component-segmented-control-radius) - var(--cg-component-segmented-control-padding));\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out);\n      pointer-events: none;\n    }\n\n    .segment {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-6);\n      height: calc(var(--cg-component-segmented-control-height-md) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-16);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      z-index: 1;\n      border-radius: inherit;\n      flex: 1;\n    }\n    .segment:hover:not(:disabled) {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment[aria-checked=\"true\"] {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .segment:disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-sm) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-lg) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-20);\n      font-size: var(--cg-font-size-base);\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property({ type: Array }) options: SegmentOption[] = [];\n  @property() value = '';\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) full = false;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Re-compute indicator when container resizes (e.g. full width on mobile)\n    this._resizeObserver = new ResizeObserver(() => this._updateIndicator());\n    requestAnimationFrame(() => {\n      const track = this.shadowRoot?.querySelector('.track');\n      if (track && this._resizeObserver) this._resizeObserver.observe(track);\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n    }\n    if (changed.has('value') || changed.has('options') || changed.has('size')) {\n      // Wait for DOM to settle before measuring\n      requestAnimationFrame(() => this._updateIndicator());\n    }\n  }\n\n  override firstUpdated(): void {\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  private _updateIndicator(): void {\n    const activeIdx = this.options.findIndex(o => o.value === this.value);\n    if (activeIdx < 0) return;\n    const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n    const indicator = this.shadowRoot?.querySelector<HTMLElement>('.indicator');\n    if (!segments || !indicator || !segments[activeIdx]) return;\n    const seg = segments[activeIdx];\n    indicator.style.width = `${seg.offsetWidth}px`;\n    indicator.style.transform = `translateX(${seg.offsetLeft}px)`;\n  }\n\n  private _select(option: SegmentOption): void {\n    if (option.disabled || this.disabled) return;\n    this.value = option.value;\n    this.dispatchEvent(new CustomEvent('cg-segmented-change', {\n      detail: { value: option.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    const current = this.options.findIndex(o => o.value === this.value);\n    if (current < 0) return;\n    let next = current;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (current - 1 + this.options.length) % this.options.length;\n    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (current + 1) % this.options.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      next = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      next = this.options.length - 1;\n    }\n    if (next !== current) {\n      const option = this.options[next];\n      if (option && !option.disabled) {\n        this._select(option);\n        // Roving tabindex: focus the newly-selected segment so Tab tracking stays consistent.\n        this.updateComplete.then(() => {\n          const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n          segments?.[next]?.focus();\n        });\n      }\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"track\" role=\"radiogroup\" aria-disabled=${this.disabled ? 'true' : 'false'} @keydown=${this._handleKeydown}>\n        <span class=\"indicator\"></span>\n        ${this.options.map(option => html`\n          <button\n            type=\"button\"\n            class=\"segment\"\n            role=\"radio\"\n            aria-checked=${option.value === this.value ? 'true' : 'false'}\n            tabindex=${option.value === this.value ? '0' : '-1'}\n            ?disabled=${option.disabled || this.disabled}\n            @click=${() => this._select(option)}\n          >${option.label}</button>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-segmented-control': CgSegmentedControl;\n  }\n}\n"],"names":["CgSegmentedControl","LitElement","track","changed","activeIdx","o","segments","indicator","seg","option","current","next","html","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-select/cg-select.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * @element cg-select
+ * Dropdown select with optional search filtering and keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <cg-select
+ *   placeholder="Choose a fruit"
+ *   .options=${[{value:'apple',label:'Apple'},{value:'banana',label:'Banana'}]}
+ * ></cg-select>
+ * <cg-select searchable error .options=${items}></cg-select>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, label: string}>} cg-change - When a selection is made
+ *
+ * @cssprop [--cg-color-input-background-default=#18181b] - Trigger background
+ * @cssprop [--cg-color-surface-container-background=#18181b] - Dropdown panel background
+ * @cssprop [--cg-color-focus-ring] - Focus/hover border accent
+ * @cssprop [--cg-border-radius-150=12px] - Border radius for trigger and dropdown
+ */
+/** Option entry for cg-select, with value, display label, and optional disabled state. */
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare class CgSelect extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    size: 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    options: SelectOption[];
+    value: string;
+    label: string;
+    placeholder: string;
+    name: string;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    searchable: boolean;
+    required: boolean;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private _open;
+    private _search;
+    private _highlighted;
+    private _toggle;
+    private _close;
+    private _select;
+    private _filteredOptions;
+    private _handleKeydown;
+    private _handleClickOutside;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-select': CgSelect;
+    }
+}
+//# sourceMappingURL=cg-select.d.ts.map

package/dist/components/cg-select/cg-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-select.d.ts","sourceRoot":"","sources":["../../../src/components/cg-select/cg-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,0FAA0F;AAC1F,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA4HnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5C,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAe;IAC1B,IAAI,SAAM;IACO,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,YAAY,CAAM;IAEnC,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,mBAAmB,CAEzB;IAEO,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}