solid-ui 3.1.3-4 → 3.1.3-6

package/dist/chunks/{button-GHRF3psH.js → button-DbKYu6-r.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./components-Dlw2zOvI.js";
-import { i as n, n as r, s as i } from "./lit-CC2G_f_C.js";
-import { i as a } from "./decorators-CJJL4XBH.js";
+import { a as e, i as t } from "./components-BlEGdx4i.js";
+import { c as n, i as r, n as i } from "./lit-C4H1jI4q.js";
+import { r as a } from "./decorators-BiCkPd_3.js";
 //#region ~icons/svg-spinners/180-ring
 var o = class extends HTMLElement {
 	constructor() {
@@ -10,7 +10,7 @@ var o = class extends HTMLElement {
 customElements.get("icon-svg-spinners-180-ring") || customElements.define("icon-svg-spinners-180-ring", o);
 //#endregion
 //#region src/components/button/Button.styles.css
-var s = i`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex;& button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative;&:disabled{opacity:.5;cursor:not-allowed}&:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}& icon-svg-spinners-180-ring,& ::slotted([slot=left-icon]),& ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}&:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}}:host(:has([slot=icon])) button{padding:4px;& ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}`, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E;
+var s = n`:host{--text-color:var(--solid-ui-color-white);--border-color:var(--solid-ui-color-primary);--background-color:var(--solid-ui-color-primary);--hover-text-color:var(--text-color);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:var(--solid-ui-color-tertiary);display:inline-flex;& button{font-size:var(--solid-ui-font-size-md);color:var(--text-color);background:var(--background-color);border:1px solid var(--border-color);border-radius:5px;flex:1;justify-content:center;align-items:center;gap:5px;padding:7px 12px;font-weight:600;display:flex;position:relative;&:disabled{opacity:.5;cursor:not-allowed}&:hover:not(:disabled){color:var(--hover-text-color);background:var(--hover-background-color);border-color:var(--hover-border-color)}& icon-svg-spinners-180-ring,& ::slotted([slot=left-icon]),& ::slotted([slot=right-icon]){width:var(--solid-ui-font-size-md);height:var(--solid-ui-font-size-md)}&:after{content:\"\";width:var(--solid-ui-clickable-area);height:var(--solid-ui-clickable-area);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}}:host(:has([slot=icon])) button{padding:4px;& ::slotted([slot=icon]){width:var(--solid-ui-font-size-2xl);height:var(--solid-ui-font-size-2xl)}}:host([variant=secondary]) button{--text-color:var(--solid-ui-color-gray-800);--border-color:var(--solid-ui-color-slate-400);--background-color:var(--solid-ui-color-white);--hover-text-color:var(--solid-ui-color-white);--hover-background-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary)}:host([variant=tertiary]) button{--text-color:var(--solid-ui-color-primary);--border-color:transparent;--background-color:transparent;--hover-text-color:var(--solid-ui-color-tertiary);--hover-border-color:var(--solid-ui-color-tertiary);--hover-background-color:transparent;border-width:0 0 1px;border-radius:0;padding:0}:host([variant=outline]) button{--text-color:currentColor;--border-color:currentColor;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:currentColor;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}:host([variant=ghost]) button{--text-color:currentColor;--border-color:transparent;--background-color:transparent;--hover-text-color:currentColor;--hover-border-color:transparent;--hover-background-color:color-mix(in srgb, currentColor 25%, transparent)}`, c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E;
 function D(e, t, n) {
 	O(e, t), t.set(e, n);
 }
@@ -227,9 +227,9 @@ new (T = (u = /*#__PURE__*/ new WeakMap(), d = /*#__PURE__*/ new WeakMap(), f =
 	}
 	render() {
 		let e = this.disabled ?? this.loading;
-		return n`
+		return r`
         <button type=${this.type} ?disabled=${e} @click=${this.onClick}>
-            ${this.loading ? n`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : r}
+            ${this.loading ? r`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : i}
             <slot name="left-icon"></slot>
             <slot name="icon"></slot>
             <slot></slot>
@@ -279,4 +279,4 @@ var V = B;
 //#endregion
 export { z as n, B as r, V as t };
 
-//# sourceMappingURL=button-GHRF3psH.js.map
+//# sourceMappingURL=button-DbKYu6-r.js.map

package/dist/chunks/{button-GHRF3psH.js.map → button-DbKYu6-r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-GHRF3psH.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","getInternals","form","requestSubmit","reset","e","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default","Button","BUTTON_VARIANTS"],"sources":["../../src/components/button/Button.styles.css","../../src/components/button/Button.ts","../../src/components/button/index.ts"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host(:has([slot=\"icon\"])) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n","import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n","import Button, { BUTTON_VARIANTS, type ButtonVariant } from './Button'\n\nexport { Button, BUTTON_VARIANTS, type ButtonVariant }\nexport default Button\n"],"mappings":"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"}
+{"version":3,"file":"button-DbKYu6-r.js","names":["customElement","WebComponent","html","nothing","property","styles","BUTTON_VARIANTS","_classDecs","_Button","_Button2","_A","WeakMap","_B","_C","_D","_ref","_variantDecs","type","String","reflect","_typeDecs","_disabledDecs","Boolean","_loadingDecs","_Button3","Button","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_variant","_init_type","_init_disabled","undefined","_init_loading","_classPrivateFieldGet","variant","v","_classPrivateFieldSet","disabled","loading","render","onClick","getInternals","form","requestSubmit","reset","e","c","_initClass","_applyDecs","_Class","_identity","_defineProperty","default","Button","BUTTON_VARIANTS"],"sources":["../../src/components/button/Button.styles.css","../../src/components/button/Button.ts","../../src/components/button/index.ts"],"sourcesContent":[":host {\n    --text-color: var(--solid-ui-color-white);\n    --border-color: var(--solid-ui-color-primary);\n    --background-color: var(--solid-ui-color-primary);\n    --hover-text-color: var(--text-color);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n\n    display: inline-flex;\n\n    button {\n        position: relative;\n        padding: 7px 12px;\n        border-radius: 5px;\n        font-size: var(--solid-ui-font-size-md);\n        font-weight: 600;\n        color: var(--text-color);\n        background: var(--background-color);\n        border: 1px solid var(--border-color);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 5px;\n        flex: 1;\n\n        &:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        &:hover:not(:disabled) {\n            color: var(--hover-text-color);\n            background: var(--hover-background-color);\n            border-color: var(--hover-border-color);\n        }\n\n        icon-svg-spinners-180-ring, ::slotted([slot=\"left-icon\"]), ::slotted([slot=\"right-icon\"]) {\n            width: var(--solid-ui-font-size-md);\n            height: var(--solid-ui-font-size-md);\n        }\n\n      &::after {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: var(--solid-ui-clickable-area);\n        height: var(--solid-ui-clickable-area);\n      }\n    }\n}\n\n:host(:has([slot=\"icon\"])) button {\n    padding: 4px;\n\n    ::slotted([slot=\"icon\"]) {\n        width: var(--solid-ui-font-size-2xl);\n        height: var(--solid-ui-font-size-2xl);\n    }\n}\n\n:host([variant='secondary']) button {\n    --text-color: var(--solid-ui-color-gray-800);\n    --border-color: var(--solid-ui-color-slate-400);\n    --background-color: var(--solid-ui-color-white);\n    --hover-text-color: var(--solid-ui-color-white);\n    --hover-background-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n}\n\n:host([variant='tertiary']) button {\n    --text-color: var(--solid-ui-color-primary);\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: var(--solid-ui-color-tertiary);\n    --hover-border-color: var(--solid-ui-color-tertiary);\n    --hover-background-color: transparent;\n\n    padding: 0;\n    border-radius: 0;\n    border-width: 0;\n    border-bottom-width: 1px;\n}\n\n:host([variant='outline']) button {\n    --text-color: currentColor;\n    --border-color: currentColor;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: currentColor;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n\n:host([variant='ghost']) button {\n    --text-color: currentColor;\n    --border-color: transparent;\n    --background-color: transparent;\n    --hover-text-color: currentColor;\n    --hover-border-color: transparent;\n    --hover-background-color: color-mix(in srgb, currentColor 25%, transparent);\n}\n","import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport '~icons/svg-spinners/180-ring'\n\nimport styles from './Button.styles.css'\n\nexport const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary', 'outline', 'ghost'] as const\nexport type ButtonVariant = typeof BUTTON_VARIANTS[number]\n\n@customElement('solid-ui-button')\nexport default class Button extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor variant: ButtonVariant = 'primary'\n\n  @property({ type: String, reflect: true })\n  accessor type = 'button'\n\n  @property({ type: Boolean })\n  accessor disabled: boolean | undefined = undefined\n\n  @property({ type: Boolean })\n  accessor loading = false\n\n  render () {\n    const disabled = this.disabled ?? this.loading\n\n    return html`\n        <button type=${this.type} ?disabled=${disabled} @click=${this.onClick}>\n            ${this.loading ? html`<icon-svg-spinners-180-ring></icon-svg-spinners-180-ring>` : nothing}\n            <slot name=\"left-icon\"></slot>\n            <slot name=\"icon\"></slot>\n            <slot></slot>\n            <slot name=\"right-icon\"></slot>\n        </button>\n    `\n  }\n\n  private onClick () {\n    switch (this.type) {\n      case 'submit':\n        this.getInternals().form?.requestSubmit()\n        break\n      case 'reset':\n        this.getInternals().form?.reset()\n        break\n    }\n  }\n}\n","import Button, { BUTTON_VARIANTS, type ButtonVariant } from './Button'\n\nexport { Button, BUTTON_VARIANTS, type ButtonVariant }\nexport default Button\n"],"mappings":"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"}

package/dist/chunks/chevron-down-ujxRg3MD.js

@@ -0,0 +1,10 @@
+//#region ~icons/lucide/chevron-down
+var e = class extends HTMLElement {
+	constructor() {
+		super(), this.attachShadow({ mode: "open" }).innerHTML = "<style>:host { display: inline-flex; }</style><svg viewBox=\"0 0 24 24\" width=\"100%\" height=\"100%\" ><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"/></svg>";
+	}
+};
+customElements.get("icon-lucide-chevron-down") || customElements.define("icon-lucide-chevron-down", e);
+//#endregion
+
+//# sourceMappingURL=chevron-down-ujxRg3MD.js.map

package/dist/chunks/chevron-down-ujxRg3MD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-down-ujxRg3MD.js","names":[],"sources":[],"mappings":""}

package/dist/chunks/{combobox-eju-wypA.js → combobox-Dtgc8qqO.js}

@@ -1,41 +1,34 @@
-import { n as e, r as t, t as n } from "./components-Dlw2zOvI.js";
-import { i as r, s as i } from "./lit-CC2G_f_C.js";
-import { i as a, n as o, r as s } from "./decorators-CJJL4XBH.js";
-//#region ~icons/lucide/chevron-down
-var c = class extends HTMLElement {
-	constructor() {
-		super(), this.attachShadow({ mode: "open" }).innerHTML = "<style>:host { display: inline-flex; }</style><svg viewBox=\"0 0 24 24\" width=\"100%\" height=\"100%\" ><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"/></svg>";
-	}
-};
-customElements.get("icon-lucide-chevron-down") || customElements.define("icon-lucide-chevron-down", c);
-//#endregion
+import { a as e, i as t, t as n } from "./components-BlEGdx4i.js";
+import { c as r, i } from "./lit-C4H1jI4q.js";
+import { n as a, r as o, t as s } from "./decorators-BiCkPd_3.js";
+import "./chevron-down-ujxRg3MD.js";
 //#region src/components/combobox/Combobox.styles.css
-var l = i`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex;& label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}& .input-wrapper{anchor-name:--combobox-anchor;width:100%;position:relative;& input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}& icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}}& [popover]:popover-open{top:calc(anchor(bottom) + 5px);left:anchor(left);min-width:anchor-size(width);position-try-fallbacks:flip-block, flip-inline;position-anchor:--combobox-anchor;border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;flex-direction:column;display:flex;position:fixed;bottom:auto;right:auto;overflow:visible;box-shadow:0 4px 16px #00000059;& [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);padding:12px 8px;&:hover{background:#0000000d}}}}`, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j;
-function M(e, t, n) {
-	N(e, t), t.set(e, n);
+var c = r`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex;& label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}& .input-wrapper{anchor-name:--combobox-anchor;width:100%;position:relative;& input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}& icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}}& [popover]:popover-open{top:calc(anchor(bottom) + 5px);left:anchor(left);min-width:anchor-size(width);position-try-fallbacks:flip-block, flip-inline;position-anchor:--combobox-anchor;border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;flex-direction:column;display:flex;position:fixed;bottom:auto;right:auto;overflow:visible;box-shadow:0 4px 16px #00000059;& [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);padding:12px 8px;&:hover{background:#0000000d}}}}`, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, F, I, L, R, z;
+function B(e, t, n) {
+	V(e, t), t.set(e, n);
 }
-function N(e, t) {
+function V(e, t) {
 	if (t.has(e)) throw TypeError("Cannot initialize the same private elements twice on an object");
 }
-function P(e, t, n) {
-	return e.set(I(e, t), n), n;
+function H(e, t, n) {
+	return e.set(W(e, t), n), n;
 }
-function F(e, t) {
-	return e.get(I(e, t));
+function U(e, t) {
+	return e.get(W(e, t));
 }
-function I(e, t, n) {
+function W(e, t, n) {
 	if (typeof e == "function" ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
 	throw TypeError("Private element is not present on this object");
 }
-function L(e, t, n) {
-	return (t = z(t)) in e ? Object.defineProperty(e, t, {
+function G(e, t, n) {
+	return (t = q(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
 		writable: !0
 	}) : e[t] = n, e;
 }
-function R(e, t, n, r, i, a) {
+function K(e, t, n, r, i, a) {
 	function o(e, t, n) {
 		return function(r, i) {
 			return n && n(r), e[t].call(r, i);
@@ -58,13 +51,13 @@ function R(e, t, n, r, i, a) {
 			n || Array.isArray(_) || (_ = [_]);
 			var b = {}, x = [], S = i === 3 ? "get" : i === 4 || p ? "set" : "value";
 			d ? (f || p ? b = {
-				get: V(function() {
+				get: Y(function() {
 					return v(this);
 				}, r, "get"),
 				set: function(e) {
 					t[4](this, e);
 				}
-			} : b[S] = v, f || V(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
+			} : b[S] = v, f || Y(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
 		}
 		for (var C = e, w = _.length - 1; w >= 0; w -= n ? 2 : 1) {
 			var T = _[w], E = n ? _[w - 1] : void 0, D = {}, O = {
@@ -124,7 +117,7 @@ function R(e, t, n, r, i, a) {
 	if (arguments.length >= 6) var d = a[Symbol.metadata || Symbol.for("Symbol.metadata")];
 	var f = Object.create(d ?? null), p = function(e, t, n, r) {
 		var i, a, o = [], c = function(t) {
-			return H(t) === e;
+			return X(t) === e;
 		}, u = /* @__PURE__ */ new Map();
 		function d(e) {
 			e && o.push(s.bind(null, e));
@@ -138,7 +131,7 @@ function R(e, t, n, r, i, a) {
 					if (!0 === x || x === 3 && m !== 4 || x === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h);
 					u.set(b, !(m > 2) || m);
 				}
-				l(v ? e : e.prototype, p, _, g ? "#" + h : z(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
+				l(v ? e : e.prototype, p, _, g ? "#" + h : q(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
 			}
 		}
 		return d(i), d(a), o;
@@ -151,11 +144,11 @@ function R(e, t, n, r, i, a) {
 		}
 	};
 }
-function z(e) {
-	var t = B(e, "string");
+function q(e) {
+	var t = J(e, "string");
 	return typeof t == "symbol" ? t : t + "";
 }
-function B(e, t) {
+function J(e, t) {
 	if (typeof e != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
@@ -165,7 +158,7 @@ function B(e, t) {
 	}
 	return (t === "string" ? String : Number)(e);
 }
-function V(e, t, n) {
+function Y(e, t, n) {
 	typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
 	try {
 		Object.defineProperty(e, "name", {
@@ -175,80 +168,119 @@ function V(e, t, n) {
 	} catch {}
 	return e;
 }
-function H(e) {
+function X(e) {
 	if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e === null ? "null" : typeof e));
 	return e;
 }
-function U(e) {
+function Z(e) {
 	return e;
 }
-y = [t("solid-ui-combobox")];
-var W;
-new (A = (f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), j = (b = a({
+x = [e("solid-ui-combobox")];
+var Q;
+new (R = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), _ = /*#__PURE__*/ new WeakMap(), v = /*#__PURE__*/ new WeakMap(), z = (S = o({
 	type: String,
 	reflect: !0
-}), S = a({ type: String }), w = o("[popover]"), E = o("input"), O = s(), "label"), d = class extends n {
-	constructor(...t) {
-		super(...t), M(this, f, (_(this), x(this, ""))), M(this, p, C(this, "")), M(this, m, T(this, null)), M(this, h, D(this, null)), M(this, g, k(this, "")), L(this, "inputId", `combobox-${e()}`);
-	}
-	get [j]() {
-		return F(f, this);
+}), w = o({
+	type: String,
+	reflect: !0
+}), E = o({ type: String }), O = o({
+	type: String,
+	reflect: !0
+}), A = o({
+	type: Boolean,
+	reflect: !0
+}), M = s("[popover]"), P = s("input"), I = a(), "label"), u = class extends t {
+	get [z]() {
+		return U(d, this);
 	}
 	set label(e) {
-		P(f, this, e);
+		H(d, this, e);
+	}
+	get name() {
+		return U(f, this);
+	}
+	set name(e) {
+		H(f, this, e);
 	}
 	get value() {
-		return F(p, this);
+		return U(p, this);
 	}
 	set value(e) {
-		P(p, this, e);
+		H(p, this, e);
+	}
+	get placeholder() {
+		return U(m, this);
+	}
+	set placeholder(e) {
+		H(m, this, e);
+	}
+	get required() {
+		return U(h, this);
+	}
+	set required(e) {
+		H(h, this, e);
 	}
 	get popoverElement() {
-		return F(m, this);
+		return U(g, this);
 	}
 	set popoverElement(e) {
-		P(m, this, e);
+		H(g, this, e);
 	}
 	get inputElement() {
-		return F(h, this);
+		return U(_, this);
 	}
 	set inputElement(e) {
-		P(h, this, e);
+		H(_, this, e);
 	}
 	get filter() {
-		return F(g, this);
+		return U(v, this);
 	}
 	set filter(e) {
-		P(g, this, e);
+		H(v, this, e);
+	}
+	constructor() {
+		super(), B(this, d, (y(this), C(this, ""))), B(this, f, T(this, "")), B(this, p, D(this, "")), B(this, m, k(this, "")), B(this, h, j(this, !1)), B(this, g, N(this, null)), B(this, _, F(this, null)), B(this, v, L(this, "")), G(this, "inputTrait", void 0), this.inputTrait = this.addTrait(new n(this, {
+			getInputElement: () => this.inputElement,
+			getInternals: () => this.getInternals(),
+			onValueChanged: (e) => {
+				this.filter = e.toLowerCase();
+			}
+		}));
 	}
 	render() {
-		let e = this.getOptions().filter((e) => e.toLowerCase().includes(this.filter));
-		return r`
-        ${this.label ? r`<label for="${this.inputId}">${this.label}</label>` : ""}
-        <div class="input-wrapper">
-            <input
-                id="${this.inputId}"
-                .value=${this.value}
-                type="text"
-                @keydown=${this.onInputKeyDown}
-                @click=${this.onInputClick}
-                @input=${this.onInputChange}
-            />
-            <icon-lucide-chevron-down></icon-lucide-chevron-down>
-        </div>
-        <div role="listbox" aria-labelledby="${this.inputId}" popover>
-          ${e.map((e) => r`<div role="option" aria-selected="false" @click=${() => this.onOptionClick(e)}>${e}</div>`)}
-        </div>
+		let e = this.getOptions().filter((e) => e.label.toLowerCase().includes(this.filter));
+		return i`
+      ${this.inputTrait.renderLabel()}
+      <div class="input-wrapper">
+        <input
+          id="${this.inputTrait.inputId}"
+          type="text"
+          name=${this.name}
+          ?placeholder=${this.placeholder}
+          ?required=${this.required}
+          .value=${this.value}
+          @keydown=${this.onInputKeyDown}
+          @click=${this.onInputClick}
+          @input=${() => this.inputTrait.onInput()}
+        />
+        <icon-lucide-chevron-down></icon-lucide-chevron-down>
+      </div>
+      <div role="listbox" aria-labelledby="${this.inputTrait.inputId}" popover>
+        ${e.map((e) => i`<div
+              role="option"
+              aria-selected="false"
+              @click=${() => this.onOptionClick(e.value)}
+            >
+              ${e.label}
+            </div>`)}
+      </div>
     `;
 	}
 	getOptions() {
 		let e = this.querySelectorAll("solid-ui-combobox-option");
-		return Array.from(e).map((e) => e.value);
-	}
-	setValue(e) {
-		this.filter = e.toLowerCase(), this.value = e, this.getInternals().setFormValue(e), this.dispatchEvent(new InputEvent("input", {
-			bubbles: !0,
-			composed: !0
+		return Array.from(e).map((e) => ({
+			value: e.value,
+			label: e.textContent
 		}));
 	}
 	onInputKeyDown(e) {
@@ -257,54 +289,66 @@ new (A = (f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m =
 				e.preventDefault(), this.popoverElement?.showPopover();
 				break;
 			case "Enter":
-				this.popoverElement?.matches(":popover-open") || (e.preventDefault(), this.getInternals().form?.requestSubmit());
+				this.popoverElement?.matches(":popover-open") || (e.preventDefault(), this.inputTrait.onSubmit());
 				break;
 		}
 	}
 	onInputClick(e) {
 		e.preventDefault(), this.popoverElement?.showPopover();
 	}
-	onInputChange() {
-		this.setValue(this.inputElement?.value ?? "");
-	}
 	onOptionClick(e) {
-		this.setValue(e), this.popoverElement?.hidePopover();
+		this.inputTrait.setValue(e), this.popoverElement?.hidePopover();
 	}
-}, {e: [x, C, T, D, k, _], c: [W, v]} = R(d, [
+}, {e: [C, T, D, k, j, N, F, L, y], c: [Q, b]} = K(u, [
 	[
-		b,
+		S,
 		1,
 		"label"
 	],
 	[
-		S,
+		w,
+		1,
+		"name"
+	],
+	[
+		E,
 		1,
 		"value"
 	],
 	[
-		w,
+		O,
+		1,
+		"placeholder"
+	],
+	[
+		A,
+		1,
+		"required"
+	],
+	[
+		M,
 		1,
 		"popoverElement"
 	],
 	[
-		E,
+		P,
 		1,
 		"inputElement"
 	],
 	[
-		O,
+		I,
 		1,
 		"filter"
 	]
-], y, 0, void 0, n), d), u = class extends U {
+], x, 0, void 0, t), u), l = class extends Z {
 	constructor() {
-		super(W), L(this, "styles", l), L(this, "formAssociated", !0), v();
+		super(Q), G(this, "styles", c), G(this, "formAssociated", !0), b();
 	}
-}, L(u, A, void 0), u)();
+}, G(l, R, void 0), l)();
 //#endregion
 //#region src/components/combobox/index.ts
-var G = W;
+var $ = Q;
 //#endregion
-export { W as n, G as t };
+export { Q as n, $ as t };
 
-//# sourceMappingURL=combobox-eju-wypA.js.map
+//# sourceMappingURL=combobox-Dtgc8qqO.js.map

package/dist/chunks/combobox-Dtgc8qqO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-Dtgc8qqO.js","names":["customElement","WebComponent","html","property","query","state","InputTrait","styles","_classDecs","_Combobox","_Combobox2","_A","WeakMap","_B","_C","_D","_E","_F","_G","_H","_ref","_labelDecs","type","String","reflect","_nameDecs","_valueDecs","_placeholderDecs","_requiredDecs","Boolean","_popoverElementDecs","_inputElementDecs","_filterDecs","_Combobox3","Combobox","_classPrivateFieldGet","label","v","_classPrivateFieldSet","name","value","placeholder","required","popoverElement","inputElement","filter","constructor","_classPrivateFieldInitSpec","_initProto","_init_label","_init_name","_init_value","_init_placeholder","_init_required","_init_popoverElement","_init_inputElement","_init_filter","_defineProperty","inputTrait","addTrait","getInputElement","getInternals","onValueChanged","toLowerCase","render","options","getOptions","option","includes","renderLabel","inputId","onInputKeyDown","onInputClick","onInput","map","onOptionClick","querySelectorAll","Array","from","textContent","e","key","preventDefault","showPopover","matches","onSubmit","setValue","hidePopover","c","_initClass","_applyDecs","_Class","_identity","default","Combobox"],"sources":["../../src/components/combobox/Combobox.styles.css","../../src/components/combobox/Combobox.ts","../../src/components/combobox/index.ts"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 5px;\n\n    label {\n        color: var(--solid-ui-color-gray-600);\n        font-size: var(--solid-ui-font-size-sm);\n        font-weight: 400;\n    }\n\n    .input-wrapper {\n        position: relative;\n        anchor-name: --combobox-anchor;\n        width: 100%;\n\n        input {\n            border: 1px solid var(--solid-ui-color-gray-400);\n            border-radius: 5px;\n            padding: 10px;\n            padding-right: 40px;\n            width: 100%;\n        }\n\n        icon-lucide-chevron-down {\n            position: absolute;\n            right: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--solid-ui-color-gray-500);\n            width: var(--solid-ui-font-size-lg);\n            height: var(--solid-ui-font-size-lg);\n            pointer-events: none;\n        }\n    }\n\n    [popover]:popover-open {\n        position: fixed;\n        top: calc(anchor(bottom) + 5px);\n        left: anchor(left);\n        right: auto;\n        bottom: auto;\n        min-width: anchor-size(width);\n        overflow: visible;\n        position-try-fallbacks: flip-block, flip-inline;\n        position-anchor: --combobox-anchor;\n        background: white;\n        border: 1px solid var(--solid-ui-color-gray-100);\n        border-radius: 5px;\n        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);\n        display: flex;\n        flex-direction: column;\n\n        [role=\"option\"] {\n            padding: 12px 8px;\n            color: var(--solid-ui-color-gray-700);\n            border-bottom: 1px solid var(--solid-ui-color-gray-100);\n\n            &:hover {\n                background: rgba(0, 0, 0, 0.05);\n            }\n        }\n    }\n\n}\n","import { customElement, WebComponent } from '@/lib/components'\nimport { html } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport InputTrait from '@/lib/components/traits/InputTrait'\nimport type ComboboxOption from '@/components/combobox-option/ComboboxOption'\n\nimport '~icons/lucide/chevron-down'\n\nimport styles from './Combobox.styles.css'\n\n@customElement('solid-ui-combobox')\nexport default class Combobox extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor label = ''\n\n  @property({ type: String, reflect: true })\n  accessor name = ''\n\n  @property({ type: String })\n  accessor value = ''\n\n  @property({ type: String, reflect: true })\n  accessor placeholder = ''\n\n  @property({ type: Boolean, reflect: true })\n  accessor required = false\n\n  @query('[popover]')\n  private accessor popoverElement: HTMLDivElement | null = null\n\n  @query('input')\n  private accessor inputElement: HTMLInputElement | null = null\n\n  @state()\n  private accessor filter = ''\n\n  private inputTrait: InputTrait\n\n  constructor () {\n    super()\n\n    this.inputTrait = this.addTrait(\n      new InputTrait(this, {\n        getInputElement: () => this.inputElement,\n        getInternals: () => this.getInternals(),\n        onValueChanged: (value) => {\n          this.filter = value.toLowerCase()\n        },\n      })\n    )\n  }\n\n  protected render () {\n    const options = this.getOptions().filter((option) =>\n      option.label.toLowerCase().includes(this.filter)\n    )\n\n    return html`\n      ${this.inputTrait.renderLabel()}\n      <div class=\"input-wrapper\">\n        <input\n          id=\"${this.inputTrait.inputId}\"\n          type=\"text\"\n          name=${this.name}\n          ?placeholder=${this.placeholder}\n          ?required=${this.required}\n          .value=${this.value}\n          @keydown=${this.onInputKeyDown}\n          @click=${this.onInputClick}\n          @input=${() => this.inputTrait.onInput()}\n        />\n        <icon-lucide-chevron-down></icon-lucide-chevron-down>\n      </div>\n      <div role=\"listbox\" aria-labelledby=\"${this.inputTrait.inputId}\" popover>\n        ${options.map(\n          (option) =>\n            html`<div\n              role=\"option\"\n              aria-selected=\"false\"\n              @click=${() => this.onOptionClick(option.value)}\n            >\n              ${option.label}\n            </div>`\n        )}\n      </div>\n    `\n  }\n\n  private getOptions (): { value: string; label: string }[] {\n    const options = this.querySelectorAll<ComboboxOption>(\n      'solid-ui-combobox-option'\n    )\n\n    return Array.from(options).map((option) => ({\n      value: option.value,\n      label: option.textContent,\n    }))\n  }\n\n  private onInputKeyDown (e: KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        this.popoverElement?.showPopover()\n        break\n      case 'Enter':\n        if (!this.popoverElement?.matches(':popover-open')) {\n          e.preventDefault()\n\n          this.inputTrait.onSubmit()\n        }\n        break\n    }\n  }\n\n  private onInputClick (e: MouseEvent) {\n    e.preventDefault()\n\n    this.popoverElement?.showPopover()\n  }\n\n  private onOptionClick (option: string) {\n    this.inputTrait.setValue(option)\n\n    this.popoverElement?.hidePopover()\n  }\n}\n","import Combobox from './Combobox'\n\nexport { Combobox }\nexport default Combobox\n"],"mappings":"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"}

package/dist/chunks/{combobox-option-CW1ZwMC7.js → combobox-option-Ck0mu4Gc.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./components-Dlw2zOvI.js";
-import { i as n, n as r } from "./lit-CC2G_f_C.js";
-import { i } from "./decorators-CJJL4XBH.js";
+import { a as e, i as t } from "./components-BlEGdx4i.js";
+import { i as n, n as r } from "./lit-C4H1jI4q.js";
+import { r as i } from "./decorators-BiCkPd_3.js";
 //#region src/components/combobox-option/ComboboxOption.ts
 var a, o, s, c, l, u, d;
 function f(e, t, n) {
@@ -192,4 +192,4 @@ var w = S;
 //#endregion
 export { S as n, w as t };
 
-//# sourceMappingURL=combobox-option-CW1ZwMC7.js.map
+//# sourceMappingURL=combobox-option-Ck0mu4Gc.js.map

package/dist/chunks/{combobox-option-CW1ZwMC7.js.map → combobox-option-Ck0mu4Gc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"combobox-option-CW1ZwMC7.js","names":["customElement","WebComponent","html","nothing","property","_classDecs","_ComboboxOption","_A","WeakMap","_ref","_valueDecs","type","String","reflect","ComboboxOption","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_value","_classPrivateFieldGet","value","v","_classPrivateFieldSet","render","_ComboboxOption2","e","c","_initClass","_applyDecs","default","ComboboxOption"],"sources":["../../src/components/combobox-option/ComboboxOption.ts","../../src/components/combobox-option/index.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\n@customElement('solid-ui-combobox-option')\nexport default class ComboboxOption extends WebComponent {\n  @property({ type: String, reflect: true })\n  accessor value = ''\n\n  protected render () {\n    return html`${nothing}`\n  }\n}\n","import ComboboxOption from './ComboboxOption'\n\nexport { ComboboxOption }\nexport default ComboboxOption\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE4CK,IAAA,CAE3CL,EAAc,0BAA0B,CAAC;AAAA,IAAAM,GAAAC,kBAAA,IAAAC,QAAA;AAAAC,KAAAC,IAEvCN,EAAS;CAAEO,MAAMC;CAAQC,SAAS;AAAK,CAAC,GAAC,UAM3CY,IAAAX,cAP2Cb,EAAa;CAAAc,YAAA,GAAAC,GAAA;EAAAC,AAAA,MAAA,GAAAD,CAAA,GAAAC,EAAA,MAAAV,IAAAW,EAAA,IAAA,GAAAC,EAAA,MAEtC,EAAE,EAAA;CAAA;CAAA,KAAAV,KAAA;EAAA,OAAAW,EAAAb,GAAA,IAAA;CAAA;CAAA,IAAVc,MAAKC,GAAA;EAAAC,EAAAhB,GAAA,MAAAe,CAAA;CAAA;CAEJE,SAAU;EAClB,OAAOtB,CAAI,GAAGC;CAChB;AACF,GAAC,CAAAuB,GAAA,CAAAP,GAAAD,IAAAS,GAAA,CAAArB,GAAAsB,MAAAC,EAAAJ,GAAA,CAAA;CAAAf;CAAA;CAAA;AAAA,CAAA,GAAAL,GAAA,GAAA,KAAA,GAP2CJ,CAAY,GAAA2B,EAAA;;;ACFxD,IAAA,IAAeG"}
+{"version":3,"file":"combobox-option-Ck0mu4Gc.js","names":["customElement","WebComponent","html","nothing","property","_classDecs","_ComboboxOption","_A","WeakMap","_ref","_valueDecs","type","String","reflect","ComboboxOption","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_value","_classPrivateFieldGet","value","v","_classPrivateFieldSet","render","_ComboboxOption2","e","c","_initClass","_applyDecs","default","ComboboxOption"],"sources":["../../src/components/combobox-option/ComboboxOption.ts","../../src/components/combobox-option/index.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\n@customElement('solid-ui-combobox-option')\nexport default class ComboboxOption extends WebComponent {\n  @property({ type: String, reflect: true })\n  accessor value = ''\n\n  protected render () {\n    return html`${nothing}`\n  }\n}\n","import ComboboxOption from './ComboboxOption'\n\nexport { ComboboxOption }\nexport default ComboboxOption\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAE4CK,IAAA,CAE3CL,EAAc,0BAA0B,CAAC;AAAA,IAAAM,GAAAC,kBAAA,IAAAC,QAAA;AAAAC,KAAAC,IAEvCN,EAAS;CAAEO,MAAMC;CAAQC,SAAS;AAAK,CAAC,GAAC,UAM3CY,IAAAX,cAP2Cb,EAAa;CAAAc,YAAA,GAAAC,GAAA;EAAAC,AAAA,MAAA,GAAAD,CAAA,GAAAC,EAAA,MAAAV,IAAAW,EAAA,IAAA,GAAAC,EAAA,MAEtC,EAAE,EAAA;CAAA;CAAA,KAAAV,KAAA;EAAA,OAAAW,EAAAb,GAAA,IAAA;CAAA;CAAA,IAAVc,MAAKC,GAAA;EAAAC,EAAAhB,GAAA,MAAAe,CAAA;CAAA;CAEJE,SAAU;EAClB,OAAOtB,CAAI,GAAGC;CAChB;AACF,GAAC,CAAAuB,GAAA,CAAAP,GAAAD,IAAAS,GAAA,CAAArB,GAAAsB,MAAAC,EAAAJ,GAAA,CAAA;CAAAf;CAAA;CAAA;AAAA,CAAA,GAAAL,GAAA,GAAA,KAAA,GAP2CJ,CAAY,GAAA2B,EAAA;;;ACFxD,IAAA,IAAeG"}