zignal-stencil-library 1.0.0

package/dist/collection/components/dialog-preview-media/dialog-preview-media.js

@@ -0,0 +1,96 @@
+import { Host, h } from "@stencil/core";
+import { configStore } from "../../store/store";
+import { ZIconButton } from "../internal-component/z-icon-button";
+export class DialogPreviewMedia {
+    dialogType = 'image';
+    url = '';
+    close;
+    handleClose = () => {
+        this.close.emit();
+    };
+    render() {
+        const theme = configStore.get('theme');
+        return (h(Host, { key: '6abf43ba5d6978c28a0181107edd8d668b07a2a0' }, h("slot", { key: '62257c359b63b50f810541cc3feb080ab89494e0' }, h("div", { key: 'cc7dde220a877e4ad326e661ac947806864518c7', class: `p-6 pt-8 z-background-${theme} rounded-lg shadow-lg w-xl xs:w-xs max-h-[80vh] relative overflow-auto` }, h("div", { key: '0ed159530329d429028e83f5cf0e5d13d7e40a15', class: "absolute top-0.5 right-0.5" }, h(ZIconButton, { key: '3e913c0c65d18971b46615fccc39b89d73988e58', iconName: "X", variant: 'none', onClick: () => this.handleClose() })), h("div", { key: '8bd8ea25c81f0c56098ba7183a0a05ab61a8a121', class: "w-lg m-auto flex items-center justify-center" }, h("div", { key: 'c7675f3afc85055563cc371337b0c8874ea116f0' }, this.dialogType === 'image' &&
+            h("img", { key: 'b622af85a4bb11a2d4fe21ef855f914e19a570c1', src: this.url, alt: "preview-message-image", class: "object-contain" }), this.dialogType === 'video' &&
+            h("video", { key: '34bc95c14afaea50f92ceb1b8d4fbd782e1c9398', controls: true, autoplay: true, muted: true, playsinline: true, src: this.url, id: "preview-message-video", class: "object-contain" })))))));
+    }
+    static get is() { return "dialog-preview-media"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog-preview-media.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog-preview-media.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dialogType": {
+                "type": "string",
+                "attribute": "dialog-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "MessageAttachmentType",
+                    "resolved": "\"audio\" | \"file\" | \"image\" | \"video\"",
+                    "references": {
+                        "MessageAttachmentType": {
+                            "location": "global",
+                            "id": "global::MessageAttachmentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'image'"
+            },
+            "url": {
+                "type": "string",
+                "attribute": "url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=dialog-preview-media.js.map

package/dist/collection/components/dialog-preview-media/dialog-preview-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-preview-media.js","sourceRoot":"","sources":["../../../src/components/dialog-preview-media/dialog-preview-media.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAMlE,MAAM,OAAO,kBAAkB;IACrB,UAAU,GAA2B,OAAO,CAAC;IAC7C,GAAG,GAAW,EAAE,CAAC;IAEhB,KAAK,CAAqB;IAEnC,WAAW,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEvC,OAAO,CACL,EAAC,IAAI;YACH;gBACE,4DAAK,KAAK,EAAE,yBAAyB,KAAK,wEAAwE;oBAChH,4DAAK,KAAK,EAAC,4BAA4B;wBACrC,EAAC,WAAW,qDAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI,CAC1E;oBAEN,4DAAK,KAAK,EAAC,8CAA8C;wBACvD;4BACG,IAAI,CAAC,UAAU,KAAK,OAAO;gCAC1B,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAC,uBAAuB,EAC3B,KAAK,EAAC,gBAAgB,GACtB;4BAGH,IAAI,CAAC,UAAU,KAAK,OAAO;gCAC1B,8DACE,QAAQ,QACR,QAAQ,QACR,KAAK,QACL,WAAW,QACX,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,EAAE,EAAC,uBAAuB,EAC1B,KAAK,EAAC,gBAAgB,GACtB,CAEA,CACF,CACF,CACD,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { ZIconButton } from '../internal-component/z-icon-button';\n\n@Component({\n  tag: 'dialog-preview-media',\n  styleUrl: 'dialog-preview-media.css',\n})\nexport class DialogPreviewMedia {\n  @Prop() dialogType?: MessageAttachmentType = 'image';\n  @Prop() url: string = '';\n\n  @Event() close: EventEmitter<void>;\n\n  handleClose = () => {\n    this.close.emit();\n  };\n\n  render() {\n    const theme = configStore.get('theme');\n\n    return (\n      <Host>\n        <slot>\n          <div class={`p-6 pt-8 z-background-${theme} rounded-lg shadow-lg w-xl xs:w-xs max-h-[80vh] relative overflow-auto`}>\n            <div class=\"absolute top-0.5 right-0.5\">\n              <ZIconButton iconName=\"X\" variant='none' onClick={() => this.handleClose()} />\n            </div>\n\n            <div class=\"w-lg m-auto flex items-center justify-center\">\n              <div>\n                {this.dialogType === 'image' &&\n                  <img\n                    src={this.url}\n                    alt=\"preview-message-image\"\n                    class=\"object-contain\"\n                  />\n                }\n\n                {this.dialogType === 'video' &&\n                  <video\n                    controls\n                    autoplay\n                    muted\n                    playsinline\n                    src={this.url}\n                    id=\"preview-message-video\"\n                    class=\"object-contain\"\n                  />\n                }\n              </div>\n            </div>\n          </div>\n        </slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialog-search/dialog-search.css

@@ -0,0 +1 @@
+@layer base{*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-drop-shadow-alpha:100%;--tw-space-y-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-space-y-reverse:0;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--container-lg:32rem;--color-yellow-300:oklch(90.5% .182 98.111);--radius-md:.375rem;--color-red-500:oklch(63.7% .237 25.331);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--color-gray-600:oklch(44.6% .03 256.802);--text-xs:.75rem;--text-xs--line-height:1.33333;--text-sm:.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--font-weight-medium:500;--font-weight-semibold:600;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xl:36rem;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-bold:700;--radius-lg:.5rem;--default-font-family:"Kanit",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-primary-dark:#b50f30;--color-secondary-dark:#fff;--color-background-dark:#23292d}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.z-\[99\]{z-index:99}.flex{display:flex}.w-full{width:100%}.min-w-\[280px\]{min-width:280px}.flex-1{flex:1}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.text-\[10px\]{font-size:10px}.text-\[gray\]{color:gray}.opacity-10{opacity:.1}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.scroll-container::-webkit-scrollbar{background:0 0;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0000001a}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.z-text-light{color:var(--color-black)}.z-text-dark{color:var(--color-white)}.z-text-primary-light{color:var(--color-primary)}.z-text-primary-dark{color:var(--color-primary-dark)}.z-text-gray-light{color:var(--color-gray-500)}.z-text-gray-dark{color:var(--color-gray-300)}.z-border-light{border-color:var(--color-black)}.z-border-dark{border-color:var(--color-white)}.z-border-primary-light{border-color:var(--color-primary)}.z-border-primary-dark{border-color:var(--color-primary-dark)}.z-border-divider-light{border-color:var(--color-gray-400)}.z-border-divider-dark{border-color:var(--color-gray-300)}.z-search-input-background-light{background-color:var(--color-gray-200)}.z-search-input-background-dark{background-color:var(--color-gray-500)}.z-chat-input-background-light{background-color:var(--color-white)}.z-chat-input-background-dark{background-color:var(--color-gray-700)}.z-placeholder-light::placeholder{color:var(--color-gray-500)}.z-placeholder-dark::placeholder{color:var(--color-gray-200)}.z-background-light{background-color:var(--color-background)}.z-background-dark{background-color:var(--color-background-dark)}.z-paper-light{background-color:var(--color-gray-100)}.z-paper-dark{background-color:var(--color-gray-700)}.z-width-100{width:100%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{.my-auto{margin-block:auto}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.h-4{height:calc(var(--spacing)*4)}.h-\[60px\]{height:60px}.w-4{width:calc(var(--spacing)*4)}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.rounded-full{border-radius:3.40282e+38px}.object-cover{object-fit:cover}.px-2{padding-inline:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-auto{margin-bottom:auto}.ml-2{margin-left:calc(var(--spacing)*2)}.border-none{--tw-border-style:none;border-style:none}.bg-pink-100{background-color:var(--color-pink-100)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-primary{--tw-ring-color:var(--color-primary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.max-h-\[80vh\]{max-height:80vh}.w-xl{width:var(--container-xl)}.gap-2{gap:calc(var(--spacing)*2)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded-lg{border-radius:var(--radius-lg)}.p-6{padding:calc(var(--spacing)*6)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.top-0\.5{top:calc(var(--spacing)*.5)}.right-0\.5{right:calc(var(--spacing)*.5)}.m-auto{margin:auto}.w-lg{width:var(--container-lg)}.justify-center{justify-content:center}.object-contain{object-fit:contain}.pt-8{padding-top:calc(var(--spacing)*8)}.mx-auto{margin-inline:auto}.mb-10{margin-bottom:calc(var(--spacing)*10)}.grid{display:grid}.h-18{height:calc(var(--spacing)*18)}.w-18{width:calc(var(--spacing)*18)}.place-content-center{place-content:center}.p-4{padding:calc(var(--spacing)*4)}.text-center{text-align:center}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.right-0{right:calc(var(--spacing)*0)}.bottom-\[40px\]{bottom:40px}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing)*2)}.w-32{width:calc(var(--spacing)*32)}.cursor-pointer{cursor:pointer}.rounded-md{border-radius:var(--radius-md)}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-br-\[0\]{border-bottom-right-radius:0}.rounded-bl-\[0\]{border-bottom-left-radius:0}.bg-black\/40{background-color:#0006}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-gray-200{background-color:var(--color-gray-200)}.bg-primary{background-color:var(--color-primary)}.p-2{padding:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.pt-2{padding-top:calc(var(--spacing)*2)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.text-white{color:var(--color-white)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-\[-0\.75rem\]{margin-bottom:-.75rem}.h-6{height:calc(var(--spacing)*6)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.text-left{text-align:left}.text-right{text-align:right}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.mr-1{margin-right:calc(var(--spacing)*1)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.min-h-20{min-height:calc(var(--spacing)*20)}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-baseline-last{align-items:last baseline}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\[0\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.pt-0{padding-top:calc(var(--spacing)*0)}.whitespace-pre-line{white-space:pre-line}.capitalize{text-transform:capitalize}.top-1\/2{top:50%}.right-1\.25{right:calc(var(--spacing)*1.25)}.max-w-xl{max-width:var(--container-xl)}.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mt-auto{margin-top:auto}.hidden{display:none}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{} /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.py-4{padding-block:calc(var(--spacing)*4)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.w-52{width:calc(var(--spacing)*52)}.top-0{top:calc(var(--spacing)*0)}.col-span-4{grid-column:span 4/span 4}.mx-2{margin-inline:calc(var(--spacing)*2)}.my-1{margin-block:calc(var(--spacing)*1)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.h-0{height:calc(var(--spacing)*0)}.h-5{height:calc(var(--spacing)*5)}.w-0{width:calc(var(--spacing)*0)}.w-5{width:calc(var(--spacing)*5)}.cursor-not-allowed{cursor:not-allowed}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.items-start{align-items:flex-start}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.border{border-style:var(--tw-border-style);border-width:1px}.border-t-\[14px\]{border-top-style:var(--tw-border-style);border-top-width:14px}.border-l-\[14px\]{border-left-style:var(--tw-border-style);border-left-width:14px}.border-primary{border-color:var(--color-primary)}.border-t-red-500{border-top-color:var(--color-red-500)}.border-l-transparent{border-left-color:#0000}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.text-nowrap{text-wrap:nowrap}.text-gray-600{color:var(--color-gray-600)}.text-red-500{color:var(--color-red-500)}.opacity-50{opacity:.5}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.focus\:border-primary:focus{border-color:var(--color-primary)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}}@media (hover:hover){.hover\:opacity-100:hover{opacity:1}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}

package/dist/collection/components/dialog-search/dialog-search.js

@@ -0,0 +1,105 @@
+import { Host, h } from "@stencil/core";
+import { ZSelectInput } from "../internal-component/z-select-input";
+import { ZButton } from "../internal-component/z-button";
+import { ZInput } from "../internal-component/z-input";
+import { configStore } from "../../store/store";
+export class DialogSearch {
+    dialogType = 'create';
+    data = {
+        name: '',
+        channel: '',
+        keyword: '',
+        status: '',
+        tag: '',
+        pinned: '',
+        latestReply: '',
+    };
+    cancel;
+    handleCancel = () => {
+        this.data = {
+            name: '',
+            channel: '',
+            keyword: '',
+            status: '',
+            tag: '',
+            pinned: '',
+            latestReply: '',
+        };
+        this.cancel.emit();
+    };
+    handleChange = (field, value) => {
+        this.data = { ...this.data, [field]: value };
+    };
+    handleSubmit = () => {
+        console.log('Submitted search:', this.data);
+    };
+    render() {
+        const theme = configStore.get('theme');
+        const isCreateDialog = this.dialogType === 'create';
+        const selectOptions = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+        ];
+        return (h(Host, { key: '327f35aa734095904254dea7896a0eea1c4f5394' }, h("slot", { key: '3894daf12e7eb31bff037dc3609ee5c1fe824df5' }, h("div", { key: '6389782aeddcc50247e2cf54ad803ba003854baf', class: `p-6 z-background-${theme} rounded-lg shadow-lg w-xl xs:w-xs max-h-[80vh] overflow-auto` }, h("h2", { key: '56c05e519987595d0efe66ed4e1686a990da6d22', class: `text-lg font-bold mb-6 z-text-${theme}` }, isCreateDialog ? 'สร้างตัวกรองข้อมูลแบบกำหนดเอง' : 'ค้นหาขั้นสูง'), h("div", { key: '49950d0b3ce4918c5e8d46cf2e285bae37311239', class: "space-y-2" }, isCreateDialog &&
+            h(ZInput, { key: 'a2b8cb657e328c0a204be76516267fa2538dcde4', label: '\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25', placeholder: '\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25', value: this.data.name, onChange: (val) => this.handleChange('name', val) }), h(ZSelectInput, { key: 'a72dda1b021615884ee4147f011a3b03bc96c08e', label: "\u0E0A\u0E48\u0E2D\u0E07\u0E17\u0E32\u0E07", placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E48\u0E2D\u0E07\u0E17\u0E32\u0E07", value: this.data.channel, options: selectOptions, onChange: (val) => this.handleChange('channel', val) }), h(ZInput, { key: '4fdfbdf9135c4e9b87fb5d7cfa3adfd0fb260cd1', label: '\u0E04\u0E49\u0E19\u0E2B\u0E32 (\u0E0A\u0E37\u0E48\u0E2D \u0E2D\u0E35\u0E40\u0E21\u0E25 \u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23 \u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21)', placeholder: '\u0E04\u0E49\u0E19\u0E2B\u0E32 (\u0E0A\u0E37\u0E48\u0E2D \u0E2D\u0E35\u0E40\u0E21\u0E25 \u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23 \u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21)', value: this.data.keyword, onChange: (val) => this.handleChange('keyword', val) }), h(ZSelectInput, { key: 'bee7bf12d95fdac1839e026fa8c02a99ebf78bd8', label: "\u0E2A\u0E16\u0E32\u0E19\u0E30", placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E16\u0E32\u0E19\u0E30", value: this.data.status, options: selectOptions, onChange: (val) => this.handleChange('status', val) }), h(ZSelectInput, { key: '9b28409338d6344520c6095a538ff65ac3d62528', label: "\u0E1B\u0E49\u0E32\u0E22\u0E01\u0E33\u0E01\u0E31\u0E1A", placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E1B\u0E49\u0E32\u0E22\u0E01\u0E33\u0E01\u0E31\u0E1A", value: this.data.tag, options: selectOptions, onChange: (val) => this.handleChange('tag', val) }), h(ZSelectInput, { key: 'ffeeaad6e7d3bc42f81b22af57efed6fb812cff0', label: "\u0E1B\u0E31\u0E01\u0E2B\u0E21\u0E38\u0E14", placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01", value: this.data.pinned, options: selectOptions, onChange: (val) => this.handleChange('pinned', val) }), h(ZSelectInput, { key: '1ae028f3e838d13fd71ff20dfd92c2f2760327da', label: "\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14", placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01", value: this.data.latestReply, options: selectOptions, onChange: (val) => this.handleChange('latestReply', val) })), h("div", { key: '6c0231539e44b1ef46c348f15c76f3447daab986', class: "flex justify-between items-center mt-6 gap-2" }, h(ZButton, { key: 'ed7d581e1e28a9b8a35ba8e20b7895cf02da038c', label: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01", variant: 'outlined', fullWidth: true, onClick: this.handleCancel }), h(ZButton, { key: '7221d295cd9f2da7e3d50f28ccf01da5ec766b84', label: isCreateDialog ? "บันทึก" : "ค้นหา", fullWidth: true, onClick: this.handleSubmit }))))));
+    }
+    static get is() { return "dialog-search"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog-search.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dialogType": {
+                "type": "string",
+                "attribute": "dialog-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "'create' | 'search'",
+                    "resolved": "\"create\" | \"search\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'create'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "data": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cancel",
+                "name": "cancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=dialog-search.js.map

package/dist/collection/components/dialog-search/dialog-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-search.js","sourceRoot":"","sources":["../../../src/components/dialog-search/dialog-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Event, Host, State, h, Prop } from '@stencil/core';\nimport { ZSelectInput } from '../internal-component/z-select-input';\nimport { ZButton } from '../internal-component/z-button';\nimport { ZInput } from '../internal-component/z-input';\nimport { configStore } from '../../store/store';\n\n@Component({\n  tag: 'dialog-search',\n  styleUrl: 'dialog-search.css',\n})\nexport class DialogSearch {\n  @Prop() dialogType: 'create' | 'search' = 'create';\n\n  @State() data = {\n    name: '',\n    channel: '',\n    keyword: '',\n    status: '',\n    tag: '',\n    pinned: '',\n    latestReply: '',\n  };\n\n  @Event() cancel: EventEmitter<void>;\n\n  handleCancel = () => {\n    this.data = {\n      name: '',\n      channel: '',\n      keyword: '',\n      status: '',\n      tag: '',\n      pinned: '',\n      latestReply: '',\n    }\n    this.cancel.emit();\n  };\n\n  handleChange = (field: keyof typeof this.data, value: string) => {\n    this.data = { ...this.data, [field]: value };\n  };\n\n  handleSubmit = () => {\n    console.log('Submitted search:', this.data);\n  };\n\n  render() {\n    const theme = configStore.get('theme');\n    const isCreateDialog = this.dialogType === 'create';\n    const selectOptions = [\n      { label: 'Option 1', value: '1' },\n      { label: 'Option 2', value: '2' },\n    ];\n\n    return (\n      <Host>\n        <slot>\n          <div class={`p-6 z-background-${theme} rounded-lg shadow-lg w-xl xs:w-xs max-h-[80vh] overflow-auto`}>\n            <h2 class={`text-lg font-bold mb-6 z-text-${theme}`}>\n              {isCreateDialog ? 'สร้างตัวกรองข้อมูลแบบกำหนดเอง' : 'ค้นหาขั้นสูง'}\n            </h2>\n\n            <div class=\"space-y-2\">\n              {isCreateDialog &&\n                <ZInput\n                  label='ชื่อตัวกรองข้อมูล'\n                  placeholder='ชื่อตัวกรองข้อมูล'\n                  value={this.data.name}\n                  onChange={(val) => this.handleChange('name', val)}\n                />\n              }\n\n              <ZSelectInput\n                label=\"ช่องทาง\"\n                placeholder=\"เลือกช่องทาง\"\n                value={this.data.channel}\n                options={selectOptions}\n                onChange={(val) => this.handleChange('channel', val)}\n              />\n\n              <ZInput\n                label='ค้นหา (ชื่อ อีเมล เบอร์โทร ข้อความ)'\n                placeholder='ค้นหา (ชื่อ อีเมล เบอร์โทร ข้อความ)'\n                value={this.data.keyword}\n                onChange={(val) => this.handleChange('keyword', val)}\n              />\n\n              <ZSelectInput\n                label=\"สถานะ\"\n                placeholder=\"เลือกสถานะ\"\n                value={this.data.status}\n                options={selectOptions}\n                onChange={(val) => this.handleChange('status', val)}\n              />\n\n              <ZSelectInput\n                label=\"ป้ายกำกับ\"\n                placeholder=\"เลือกป้ายกำกับ\"\n                value={this.data.tag}\n                options={selectOptions}\n                onChange={(val) => this.handleChange('tag', val)}\n              />\n\n              <ZSelectInput\n                label=\"ปักหมุด\"\n                placeholder=\"เลือก\"\n                value={this.data.pinned}\n                options={selectOptions}\n                onChange={(val) => this.handleChange('pinned', val)}\n              />\n\n              <ZSelectInput\n                label=\"ตอบกลับล่าสุด\"\n                placeholder=\"เลือก\"\n                value={this.data.latestReply}\n                options={selectOptions}\n                onChange={(val) => this.handleChange('latestReply', val)}\n              />\n            </div>\n\n            <div class=\"flex justify-between items-center mt-6 gap-2\">\n              <ZButton label=\"ยกเลิก\" variant='outlined' fullWidth onClick={this.handleCancel} />\n              <ZButton label={isCreateDialog ? \"บันทึก\" : \"ค้นหา\"} fullWidth onClick={this.handleSubmit} />\n            </div>\n          </div>\n        </slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/internal-component/chat-item.js

@@ -0,0 +1,28 @@
+import { h } from "@stencil/core";
+import dayjs from "dayjs";
+import { configStore, selectedChatStore } from "../../store/store";
+import { leaveRoom } from "../../utils/socket";
+import { TagOrStatusItem } from "./tag-or-status-item";
+export const ChatItem = ({ item }) => {
+    const { id, connection, channel, user, tags, unread_count, last_message, last_message_at, type } = item;
+    const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';
+    const theme = configStore.get('theme');
+    const isSelected = selectedChatStore.get('selectedChat')?.id === id;
+    const getLastMessage = () => {
+        if (['{image}', '{video}'].includes(last_message)) {
+            return (type === 'user' ? user.nickname : 'คุณ') + ' ส่ง' + (last_message === '{image}' ? 'รูปภาพ' : 'วิดีโอ');
+        }
+        return last_message;
+    };
+    const handleSelectChatClick = () => {
+        const selectedChat = selectedChatStore.get('selectedChat');
+        if (selectedChat && selectedChat.id !== item.id) {
+            leaveRoom(selectedChat.id);
+        }
+        selectedChatStore.set('selectedChat', item);
+    };
+    return (h("div", { class: `relative ${isSelected ? 'bg-pink-100' : `z-background-${theme}`} px-4 py-3 my-1 mx-2 flex items-start space-x-4 shadow-sm cursor-pointer rounded-xl`, onClick: () => handleSelectChatClick() }, h("div", { class: "grid grid-flow-row-dense grid-cols-7 grid-rows-1 min-h-20 w-full" }, h("div", { class: "col-span-2 my-auto mr-1" }, h("img", { src: user.picture_url, alt: "avatar", class: "size-16 rounded-full object-cover" })), h("div", { class: "col-span-4" }, h("div", { class: "flex items-center space-x-1" }, h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${channel}.png`, alt: "agent avatar", class: "size-4 rounded-full" }), h("span", { class: `text-sm ${platformColor}` }, connection.name)), h("div", { class: `font-semibold text-base ${isSelected ? 'text-black' : `z-text-${theme}`}` }, user.name), h("div", { class: "text-sm text-gray-600" }, getLastMessage()), h("div", { class: "flex flex-row gap-1 items-center flex-wrap" }, tags.slice(0, 2).map((tag) => h(TagOrStatusItem, { item: tag })), tags.length > 2 &&
+        h("div", { class: "inline-block" }, h("tag-popper", { tags: tags })))), h("div", { class: "col-span-1 text-right flex flex-col justify-between" }, h("div", { class: "text-xs text-gray-500" }, dayjs(last_message_at).isValid() ? dayjs(last_message_at).format('HH:mm') : ''), unread_count > 0 &&
+        h("div", null, h("span", { class: "text-xs bg-primary text-white px-2 py-0.5 rounded-full" }, unread_count > 1000 ? '999+' : unread_count)), h("div", { class: "mt-auto ml-auto" }, h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/nong-z.png`, alt: "agent avatar", class: "size-5 rounded-full" }))))));
+};
+//# sourceMappingURL=chat-item.js.map

package/dist/collection/components/internal-component/chat-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-item.js","sourceRoot":"","sources":["../../../src/components/internal-component/chat-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport dayjs from 'dayjs';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { leaveRoom } from '../../utils/socket';\nimport { TagOrStatusItem } from './tag-or-status-item';\n\ninterface ChatItemProps {\n  item: ChatItem;\n}\n\nexport const ChatItem: FunctionalComponent<ChatItemProps> = ({ item }) => {\n  const { id, connection, channel, user, tags, unread_count, last_message, last_message_at, type } = item;\n  const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';\n  const theme = configStore.get('theme');\n  const isSelected = selectedChatStore.get('selectedChat')?.id === id;\n\n  const getLastMessage = () => {\n    if (['{image}', '{video}'].includes(last_message)) {\n      return (type === 'user' ? user.nickname : 'คุณ') + ' ส่ง' + (last_message === '{image}' ? 'รูปภาพ' : 'วิดีโอ');\n    }\n\n    return last_message;\n  }\n\n  const handleSelectChatClick = () => {\n    const selectedChat = selectedChatStore.get('selectedChat');\n    if (selectedChat && selectedChat.id !== item.id) {\n      leaveRoom(selectedChat.id);\n    }\n\n    selectedChatStore.set('selectedChat', item);\n  }\n\n  return (\n    <div\n      class={`relative ${isSelected ? 'bg-pink-100' : `z-background-${theme}`} px-4 py-3 my-1 mx-2 flex items-start space-x-4 shadow-sm cursor-pointer rounded-xl`}\n      onClick={() => handleSelectChatClick()}\n    >\n      {/* {isPinned && (\n        <div class=\"absolute top-0 right-0 w-0 h-0 mr-0 border-t-[14px] border-l-[14px] border-t-red-500 border-l-transparent\" />\n      )} */}\n\n      <div class=\"grid grid-flow-row-dense grid-cols-7 grid-rows-1 min-h-20 w-full\">\n        <div class=\"col-span-2 my-auto mr-1\">\n          <img\n            src={user.picture_url}\n            alt=\"avatar\"\n            class=\"size-16 rounded-full object-cover\"\n          />\n        </div>\n        <div class=\"col-span-4\">\n          <div class=\"flex items-center space-x-1\">\n            <img\n              src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/${channel}.png`}\n              alt=\"agent avatar\"\n              class=\"size-4 rounded-full\"\n            />\n            <span class={`text-sm ${platformColor}`}>\n              {connection.name}\n            </span>\n          </div>\n          <div class={`font-semibold text-base ${isSelected ? 'text-black' : `z-text-${theme}`}`}>\n            {user.name}\n          </div>\n          <div class=\"text-sm text-gray-600\">\n            {getLastMessage()}\n          </div>\n          <div class=\"flex flex-row gap-1 items-center flex-wrap\">\n            {tags.slice(0, 2).map((tag) => <TagOrStatusItem item={tag} />)}\n            {tags.length > 2 &&\n              <div class=\"inline-block\">\n                <tag-popper tags={tags} />\n              </div>\n            }\n          </div>\n        </div>\n        <div class=\"col-span-1 text-right flex flex-col justify-between\">\n          <div class=\"text-xs text-gray-500\">\n            {dayjs(last_message_at).isValid() ? dayjs(last_message_at).format('HH:mm') : ''}\n          </div>\n          {unread_count > 0 &&\n            <div>\n              <span class=\"text-xs bg-primary text-white px-2 py-0.5 rounded-full\">\n                {unread_count > 1000 ? '999+' : unread_count}\n              </span>\n            </div>\n          }\n          <div class=\"mt-auto ml-auto\">\n            <img\n              src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/nong-z.png`}\n              alt=\"agent avatar\"\n              class=\"size-5 rounded-full\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/internal-component/icon.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { icons } from "lucide";
+export const Icon = ({ name, addClass }) => {
+    const icon = icons[name];
+    if (!icon)
+        return null;
+    return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: addClass ? addClass : 'w-5 h-5' }, icon.map(([tag, attrs]) => h(tag, { ...attrs }))));
+};
+//# sourceMappingURL=icon.js.map

package/dist/collection/components/internal-component/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/internal-component/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAO/B,MAAM,CAAC,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAEzB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,WACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,EACvB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAErC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAC7C,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { icons } from 'lucide';\n\ninterface IconProps {\n  name: string\n  addClass?: string\n}\n\nexport const Icon: FunctionalComponent<IconProps> = ({ name, addClass }) => {\n  const icon = icons[name];\n\n  if (!icon) return null;\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class={addClass ? addClass : 'w-5 h-5'}\n    >\n      {icon.map(([tag, attrs]) => h(tag, { ...attrs }))}\n    </svg>\n  );\n};"]}

package/dist/collection/components/internal-component/tag-or-status-item.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { configStore } from "../../store/store";
+import { ZIconButton } from "./z-icon-button";
+export const TagOrStatusItem = ({ item, onDelete }) => {
+    const { name, color } = item;
+    const theme = configStore.get('theme');
+    return (h("span", { class: `inline-flex items-center text-nowrap gap-2 text-xs px-3 py-1.5 rounded-full z-text-${theme}`, style: { backgroundColor: color } }, name, " ", onDelete && h(ZIconButton, { variant: 'none', iconName: 'X', onClick: onDelete, noPadding: true, noPaddingY: true, addClassIcon: 'size-3' })));
+};
+//# sourceMappingURL=tag-or-status-item.js.map

package/dist/collection/components/internal-component/tag-or-status-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-or-status-item.js","sourceRoot":"","sources":["../../../src/components/internal-component/tag-or-status-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAO9C,MAAM,CAAC,MAAM,eAAe,GAA8C,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAEvC,OAAO,CACL,YAAM,KAAK,EAAE,sFAAsF,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE;QAC1I,IAAI;;QAAG,QAAQ,IAAI,EAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,QAAC,UAAU,QAAC,YAAY,EAAC,QAAQ,GAAG,CACxH,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { ZIconButton } from './z-icon-button';\n\ninterface TagOrStatusItemProps {\n  item: TagOrStatusItem\n  onDelete?: () => void\n}\n\nexport const TagOrStatusItem: FunctionalComponent<TagOrStatusItemProps> = ({ item, onDelete }) => {\n  const { name, color } = item;\n  const theme = configStore.get('theme');\n\n  return (\n    <span class={`inline-flex items-center text-nowrap gap-2 text-xs px-3 py-1.5 rounded-full z-text-${theme}`} style={{ backgroundColor: color }}>\n      {name} {onDelete && <ZIconButton variant='none' iconName='X' onClick={onDelete} noPadding noPaddingY addClassIcon='size-3' />}\n    </span>\n  );\n};"]}

package/dist/collection/components/internal-component/z-button.js

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+export const ZButton = ({ id, variant = 'primary', disabled = false, onClick, fullWidth, label, startIcon, endIcon, size = 'medium', ref }) => {
+    let styleSize = 'px-3 py-2 text-sm';
+    if (size === 'small') {
+        styleSize = 'px-2 py-1 text-xs';
+    }
+    if (size === 'large') {
+        styleSize = 'px-4 py-3 text-lg';
+    }
+    const base = `inline-flex items-center justify-center ${styleSize} rounded-full font-medium focus:outline-none transition cursor-pointer ${fullWidth ? 'w-full' : ''}`;
+    const primary = 'bg-primary text-white hover:brightness-110';
+    const outlined = 'border border-primary text-primary hover:brightness-110';
+    const text = 'text-primary hover:brightness-110';
+    const disabledStyle = 'opacity-50 cursor-not-allowed';
+    const classList = [
+        base,
+        variant === 'primary'
+            ? primary
+            : (variant === 'outlined' ? outlined : text),
+        disabled ? disabledStyle : '',
+    ].join(' ');
+    return (h("button", { id: id, ref: ref, class: classList, disabled: disabled, onClick: (e) => !disabled && onClick?.(e) }, startIcon, h("span", { class: "mx-2" }, label), endIcon));
+};
+//# sourceMappingURL=z-button.js.map

package/dist/collection/components/internal-component/z-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-button.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAO,MAAM,eAAe,CAAC;AAe5D,MAAM,CAAC,MAAM,OAAO,GAAsC,CAAC,EACzD,EAAE,EACF,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,GAAG,EACJ,EAAE,EAAE;IACH,IAAI,SAAS,GAAG,mBAAmB,CAAC;IACpC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,SAAS,GAAG,mBAAmB,CAAC;IAClC,CAAC;IACD,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,SAAS,GAAG,mBAAmB,CAAC;IAClC,CAAC;IAED,MAAM,IAAI,GAAG,2CAA2C,SAAS,0EAA0E,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACvK,MAAM,OAAO,GAAG,4CAA4C,CAAC;IAC7D,MAAM,QAAQ,GAAG,yDAAyD,CAAC;IAC3E,MAAM,IAAI,GAAG,mCAAmC,CAAC;IACjD,MAAM,aAAa,GAAG,+BAA+B,CAAC;IAEtD,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9C,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC;QAExC,SAAS;QACV,YAAM,KAAK,EAAC,MAAM,IAAE,KAAK,CAAQ;QAChC,OAAO,CACD,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h, JSX } from '@stencil/core';\n\ninterface ZButtonProps {\n  id?: string;\n  variant?: 'primary' | 'outlined' | 'text';\n  disabled?: boolean;\n  onClick?: (e: MouseEvent) => void;\n  fullWidth?: boolean;\n  label?: JSX.Element;\n  startIcon?: JSX.Element;\n  endIcon?: JSX.Element;\n  size?: 'small' | 'medium' | 'large';\n  ref?: (elm?: HTMLButtonElement) => void;\n}\n\nexport const ZButton: FunctionalComponent<ZButtonProps> = ({\n  id,\n  variant = 'primary',\n  disabled = false,\n  onClick,\n  fullWidth,\n  label,\n  startIcon,\n  endIcon,\n  size = 'medium',\n  ref\n}) => {\n  let styleSize = 'px-3 py-2 text-sm';\n  if (size === 'small') {\n    styleSize = 'px-2 py-1 text-xs';\n  }\n  if (size === 'large') {\n    styleSize = 'px-4 py-3 text-lg';\n  }\n\n  const base = `inline-flex items-center justify-center ${styleSize} rounded-full font-medium focus:outline-none transition cursor-pointer ${fullWidth ? 'w-full' : ''}`;\n  const primary = 'bg-primary text-white hover:brightness-110';\n  const outlined = 'border border-primary text-primary hover:brightness-110';\n  const text = 'text-primary hover:brightness-110';\n  const disabledStyle = 'opacity-50 cursor-not-allowed';\n\n  const classList = [\n    base,\n    variant === 'primary'\n      ? primary\n      : (variant === 'outlined' ? outlined : text),\n    disabled ? disabledStyle : '',\n  ].join(' ');\n\n  return (\n    <button\n      id={id}\n      ref={ref}\n      class={classList}\n      disabled={disabled}\n      onClick={(e) => !disabled && onClick?.(e)}\n    >\n      {startIcon}\n      <span class=\"mx-2\">{label}</span>\n      {endIcon}\n    </button>\n  );\n};\n"]}

package/dist/collection/components/internal-component/z-icon-button.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+import { Icon } from "./icon";
+import { configStore } from "../../store/store";
+export const ZIconButton = ({ variant = 'primary', disabled = false, onClick, iconName, noPadding, noPaddingY, addClassIcon, ref }) => {
+    const theme = configStore.get('theme');
+    const base = `inline-flex items-center justify-center px-${noPadding ? 0 : 2} py-${noPaddingY ? 0 : 2} rounded-full text-sm font-medium focus:outline-none transition cursor-pointer`;
+    const primary = 'bg-primary text-white hover:brightness-110';
+    const outlined = 'border border-primary text-primary hover:brightness-110';
+    const text = 'text-primary hover:brightness-110';
+    const none = `hover:brightness-110 z-text-${theme}`;
+    const disabledStyle = 'opacity-50 cursor-not-allowed';
+    const classList = [
+        base,
+        variant === 'primary'
+            ? primary
+            : (variant === 'outlined'
+                ? outlined
+                : (variant === 'text' ? text : none)),
+        disabled ? disabledStyle : '',
+    ].join(' ');
+    return (h("button", { ref: ref, class: classList, disabled: disabled, onClick: (e) => !disabled && onClick?.(e) }, h(Icon, { name: iconName, addClass: addClassIcon })));
+};
+//# sourceMappingURL=z-icon-button.js.map

package/dist/collection/components/internal-component/z-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-icon-button.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAC,EACjE,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,YAAY,EACZ,GAAG,EACJ,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,8CAA8C,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gFAAgF,CAAC;IACtL,MAAM,OAAO,GAAG,4CAA4C,CAAC;IAC7D,MAAM,QAAQ,GAAG,yDAAyD,CAAC;IAC3E,MAAM,IAAI,GAAG,mCAAmC,CAAC;IACjD,MAAM,IAAI,GAAG,+BAA+B,KAAK,EAAE,CAAC;IACpD,MAAM,aAAa,GAAG,+BAA+B,CAAC;IAEtD,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,OAAO,KAAK,SAAS;YACnB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,CAAC,OAAO,KAAK,UAAU;gBACvB,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;KAC9B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC;QAEzC,EAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,GAAI,CACzC,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Icon } from './icon';\nimport { configStore } from '../../store/store';\n\ninterface ZIconButtonProps {\n  variant?: 'primary' | 'outlined' | 'text' | 'none';\n  disabled?: boolean;\n  onClick?: (e: MouseEvent) => void;\n  iconName?: string;\n  noPadding?: boolean\n  noPaddingY?: boolean\n  addClassIcon?: string\n  ref?: (elm?: HTMLButtonElement) => void\n}\n\nexport const ZIconButton: FunctionalComponent<ZIconButtonProps> = ({\n  variant = 'primary',\n  disabled = false,\n  onClick,\n  iconName,\n  noPadding,\n  noPaddingY,\n  addClassIcon,\n  ref\n}) => {\n  const theme = configStore.get('theme');\n  const base = `inline-flex items-center justify-center px-${noPadding ? 0 : 2} py-${noPaddingY ? 0 : 2} rounded-full text-sm font-medium focus:outline-none transition cursor-pointer`;\n  const primary = 'bg-primary text-white hover:brightness-110';\n  const outlined = 'border border-primary text-primary hover:brightness-110';\n  const text = 'text-primary hover:brightness-110';\n  const none = `hover:brightness-110 z-text-${theme}`;\n  const disabledStyle = 'opacity-50 cursor-not-allowed';\n\n  const classList = [\n    base,\n    variant === 'primary'\n      ? primary\n      : (variant === 'outlined'\n        ? outlined\n        : (variant === 'text' ? text : none)),\n    disabled ? disabledStyle : '',\n  ].join(' ');\n\n  return (\n    <button\n      ref={ref}\n      class={classList}\n      disabled={disabled}\n      onClick={(e) => !disabled && onClick?.(e)}\n    >\n      <Icon name={iconName} addClass={addClassIcon} />\n    </button>\n  );\n};\n"]}

package/dist/collection/components/internal-component/z-input-area.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { configStore } from "../../store/store";
+export const ZInputArea = ({ id, label, placeholder = '', value = '', onChange, autoFocus, rows = 3, error }) => {
+    const theme = configStore.get('theme');
+    return (h("div", { class: "mb-4" }, h("label", { class: `block text-sm font-medium mb-1 z-text-${theme}` }, label), h("textarea", { id: id, placeholder: placeholder, class: `w-full border z-border-${theme} text-sm px-4 py-2 rounded-lg ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`, value: value, onInput: (e) => onChange?.(e.target.value), autoFocus: autoFocus, rows: rows }), error &&
+        h("p", { class: "text-red-500 text-xs mt-1" }, error)));
+};
+//# sourceMappingURL=z-input-area.js.map

package/dist/collection/components/internal-component/z-input-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-input-area.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-input-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,MAAM,CAAC,MAAM,UAAU,GAAyC,CAAC,EAC/D,EAAE,EACF,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,CAAC,EACR,KAAK,EACN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,CACL,WAAK,KAAK,EAAC,MAAM;QACf,aAAO,KAAK,EAAE,yCAAyC,KAAK,EAAE,IAAG,KAAK,CAAS;QAC/E,gBACE,EAAE,EAAE,EAAE,EACN,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,0BAA0B,KAAK,8FAA8F,KAAK,WAAW,KAAK,EAAE,EAC3J,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,GACV;QACD,KAAK;YACJ,SAAG,KAAK,EAAC,2BAA2B,IACjC,KAAK,CACJ,CAEF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\n\ninterface ZInputAreaProps {\n  id?: string;\n  label: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  autoFocus?: boolean;\n  rows?: number;\n  error?: string;\n}\n\nexport const ZInputArea: FunctionalComponent<ZInputAreaProps> = ({\n  id,\n  label,\n  placeholder = '',\n  value = '',\n  onChange,\n  autoFocus,\n  rows = 3,\n  error\n}) => {\n  const theme = configStore.get('theme');\n  return (\n    <div class=\"mb-4\">\n      <label class={`block text-sm font-medium mb-1 z-text-${theme}`}>{label}</label>\n      <textarea\n        id={id}\n        placeholder={placeholder}\n        class={`w-full border z-border-${theme} text-sm px-4 py-2 rounded-lg ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`}\n        value={value}\n        onInput={(e: any) => onChange?.(e.target.value)}\n        autoFocus={autoFocus}\n        rows={rows}\n      />\n      {error &&\n        <p class=\"text-red-500 text-xs mt-1\">\n          {error}\n        </p>\n      }\n    </div>\n  );\n};\n"]}

package/dist/collection/components/internal-component/z-input.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { configStore } from "../../store/store";
+export const ZInput = ({ id, label, placeholder = '', value = '', onChange, autoFocus, type = 'text', error }) => {
+    const theme = configStore.get('theme');
+    return (h("div", { class: "mb-4" }, h("label", { class: `block text-sm font-medium mb-1 z-text-${theme}` }, label), h("input", { id: id, type: type, placeholder: placeholder, class: `w-full border z-border-${theme} text-sm px-4 py-2 rounded-full ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`, value: value, onInput: (e) => onChange?.(e.target.value), autoFocus: autoFocus }), error &&
+        h("p", { class: "text-red-500 text-xs mt-1" }, error)));
+};
+//# sourceMappingURL=z-input.js.map

package/dist/collection/components/internal-component/z-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-input.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,MAAM,CAAC,MAAM,MAAM,GAAqC,CAAC,EACvD,EAAE,EACF,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,MAAM,EACb,KAAK,EACN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,CACL,WAAK,KAAK,EAAC,MAAM;QACf,aAAO,KAAK,EAAE,yCAAyC,KAAK,EAAE,IAAG,KAAK,CAAS;QAC/E,aACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,0BAA0B,KAAK,gGAAgG,KAAK,WAAW,KAAK,EAAE,EAC7J,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,SAAS,EAAE,SAAS,GACpB;QACD,KAAK;YACJ,SAAG,KAAK,EAAC,2BAA2B,IACjC,KAAK,CACJ,CAEF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\n\ninterface ZInputProps {\n  id?: string;\n  label: string;\n  placeholder?: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  autoFocus?: boolean;\n  type?: string;\n  error?: string;\n}\n\nexport const ZInput: FunctionalComponent<ZInputProps> = ({\n  id,\n  label,\n  placeholder = '',\n  value = '',\n  onChange,\n  autoFocus,\n  type = 'text',\n  error\n}) => {\n  const theme = configStore.get('theme');\n  return (\n    <div class=\"mb-4\">\n      <label class={`block text-sm font-medium mb-1 z-text-${theme}`}>{label}</label>\n      <input\n        id={id}\n        type={type}\n        placeholder={placeholder}\n        class={`w-full border z-border-${theme} text-sm px-4 py-2 rounded-full ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`}\n        value={value}\n        onInput={(e: any) => onChange?.(e.target.value)}\n        autoFocus={autoFocus}\n      />\n      {error &&\n        <p class=\"text-red-500 text-xs mt-1\">\n          {error}\n        </p>\n      }\n    </div>\n  );\n};\n"]}

package/dist/collection/components/internal-component/z-select-input.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { configStore } from "../../store/store";
+export const ZSelectInput = ({ label, placeholder = '', options, onChange, }) => {
+    const theme = configStore.get('theme');
+    return (h("div", { class: "mb-4" }, h("label", { class: `block text-sm font-medium mb-1 z-text-${theme}` }, label), h("select", { class: `w-full border z-border-${theme} text-sm px-4 py-2 rounded-full ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`,
+        // value={value}
+        onInput: (e) => onChange?.(e.target.value) }, h("option", { value: "", disabled: true, hidden: true }, placeholder), options.map(opt => (h("option", { value: opt.value }, opt.label))))));
+};
+//# sourceMappingURL=z-select-input.js.map

package/dist/collection/components/internal-component/z-select-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-select-input.js","sourceRoot":"","sources":["../../../src/components/internal-component/z-select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUhD,MAAM,CAAC,MAAM,YAAY,GAA2C,CAAC,EACnE,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,OAAO,EACP,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,CACL,WAAK,KAAK,EAAC,MAAM;QACf,aAAO,KAAK,EAAE,yCAAyC,KAAK,EAAE,IAAG,KAAK,CAAS;QAC/E,cACE,KAAK,EAAE,0BAA0B,KAAK,gGAAgG,KAAK,WAAW,KAAK,EAAE;YAC7J,gBAAgB;YAChB,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAE/C,cAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,MAAM,UAC7B,WAAW,CACL;YACR,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,cAAQ,KAAK,EAAE,GAAG,CAAC,KAAK,IAAG,GAAG,CAAC,KAAK,CAAU,CAC/C,CAAC,CACK,CACL,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\n\ninterface ZSelectInputProps {\n  label: string;\n  placeholder?: string;\n  value?: string;\n  options: { label: string; value: string }[];\n  onChange?: (value: string) => void;\n}\n\nexport const ZSelectInput: FunctionalComponent<ZSelectInputProps> = ({\n  label,\n  placeholder = '',\n  options,\n  onChange,\n}) => {\n  const theme = configStore.get('theme');\n  return (\n    <div class=\"mb-4\">\n      <label class={`block text-sm font-medium mb-1 z-text-${theme}`}>{label}</label>\n      <select\n        class={`w-full border z-border-${theme} text-sm px-4 py-2 rounded-full ring-primary focus:outline-none focus:border-primary z-paper-${theme} z-text-${theme}`}\n        // value={value}\n        onInput={(e: any) => onChange?.(e.target.value)}\n      >\n        <option value=\"\" disabled hidden>\n          {placeholder}\n        </option>\n        {options.map(opt => (\n          <option value={opt.value}>{opt.label}</option>\n        ))}\n      </select>\n    </div>\n  );\n};\n"]}

package/dist/collection/components/menu-list/menu-list.css

@@ -0,0 +1 @@
+@layer base{*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-drop-shadow-alpha:100%;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:host,:root{--container-lg:32rem;--font-weight-bold:700;--container-xl:36rem;--color-red-500:oklch(63.7% .237 25.331);--color-green-500:oklch(72.3% .219 149.579);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--color-gray-600:oklch(44.6% .03 256.802);--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--color-yellow-300:oklch(90.5% .182 98.111);--text-xs:.75rem;--text-xs--line-height:1.33333;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:1.42857;--radius-md:.375rem;--default-font-family:"Kanit",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-primary-dark:#b50f30;--color-secondary-dark:#fff;--color-background-dark:#23292d}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1{top:calc(var(--spacing)*1)}.right-1{right:calc(var(--spacing)*1)}.z-\[99\]{z-index:99}.flex{display:flex}.w-full{width:100%}.min-w-\[280px\]{min-width:280px}.flex-1{flex:1}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.text-\[10px\]{font-size:10px}.text-\[gray\]{color:gray}.opacity-10{opacity:.1}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.scroll-container::-webkit-scrollbar{background:0 0;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0000001a}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.z-text-light{color:var(--color-black)}.z-text-dark{color:var(--color-white)}.z-text-primary-light{color:var(--color-primary)}.z-text-primary-dark{color:var(--color-primary-dark)}.z-text-gray-light{color:var(--color-gray-500)}.z-text-gray-dark{color:var(--color-gray-300)}.z-border-light{border-color:var(--color-black)}.z-border-dark{border-color:var(--color-white)}.z-border-primary-light{border-color:var(--color-primary)}.z-border-primary-dark{border-color:var(--color-primary-dark)}.z-border-divider-light{border-color:var(--color-gray-400)}.z-border-divider-dark{border-color:var(--color-gray-300)}.z-search-input-background-light{background-color:var(--color-gray-200)}.z-search-input-background-dark{background-color:var(--color-gray-500)}.z-chat-input-background-light{background-color:var(--color-white)}.z-chat-input-background-dark{background-color:var(--color-gray-700)}.z-placeholder-light::placeholder{color:var(--color-gray-500)}.z-placeholder-dark::placeholder{color:var(--color-gray-200)}.z-background-light{background-color:var(--color-background)}.z-background-dark{background-color:var(--color-background-dark)}.z-paper-light{background-color:var(--color-gray-100)}.z-paper-dark{background-color:var(--color-gray-700)}.z-width-100{width:100%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{.my-auto{margin-block:auto}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.h-4{height:calc(var(--spacing)*4)}.h-\[60px\]{height:60px}.w-4{width:calc(var(--spacing)*4)}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.rounded-full{border-radius:3.40282e+38px}.object-cover{object-fit:cover}.px-2{padding-inline:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-auto{margin-bottom:auto}.ml-2{margin-left:calc(var(--spacing)*2)}.border-none{--tw-border-style:none;border-style:none}.bg-pink-100{background-color:var(--color-pink-100)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-black{color:var(--color-black)}.text-gray-500{color:var(--color-gray-500)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-primary{--tw-ring-color:var(--color-primary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.mt-6{margin-top:calc(var(--spacing)*6)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.max-h-\[80vh\]{max-height:80vh}.w-xl{width:var(--container-xl)}.gap-2{gap:calc(var(--spacing)*2)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded-lg{border-radius:var(--radius-lg)}.p-6{padding:calc(var(--spacing)*6)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.top-0\.5{top:calc(var(--spacing)*.5)}.right-0\.5{right:calc(var(--spacing)*.5)}.m-auto{margin:auto}.w-lg{width:var(--container-lg)}.justify-center{justify-content:center}.object-contain{object-fit:contain}.pt-8{padding-top:calc(var(--spacing)*8)}.mx-auto{margin-inline:auto}.mb-10{margin-bottom:calc(var(--spacing)*10)}.grid{display:grid}.h-18{height:calc(var(--spacing)*18)}.w-18{width:calc(var(--spacing)*18)}.place-content-center{place-content:center}.p-4{padding:calc(var(--spacing)*4)}.text-center{text-align:center}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.right-0{right:calc(var(--spacing)*0)}.bottom-\[40px\]{bottom:40px}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing)*2)}.w-32{width:calc(var(--spacing)*32)}.cursor-pointer{cursor:pointer}.rounded-md{border-radius:var(--radius-md)}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-br-\[0\]{border-bottom-right-radius:0}.rounded-bl-\[0\]{border-bottom-left-radius:0}.bg-black\/40{background-color:#0006}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-gray-200{background-color:var(--color-gray-200)}.bg-primary{background-color:var(--color-primary)}.p-2{padding:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.pt-2{padding-top:calc(var(--spacing)*2)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.text-white{color:var(--color-white)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-\[-0\.75rem\]{margin-bottom:-.75rem}.h-6{height:calc(var(--spacing)*6)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.text-left{text-align:left}.text-right{text-align:right}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.mr-1{margin-right:calc(var(--spacing)*1)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.min-h-20{min-height:calc(var(--spacing)*20)}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-baseline-last{align-items:last baseline}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\[0\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.pt-0{padding-top:calc(var(--spacing)*0)}.whitespace-pre-line{white-space:pre-line}.capitalize{text-transform:capitalize}.top-1\/2{top:50%}.right-1\.25{right:calc(var(--spacing)*1.25)}.max-w-xl{max-width:var(--container-xl)}.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.mt-auto{margin-top:auto}.hidden{display:none}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{} /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities; /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer base{}@layer components,utilities;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*8*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*8*var(--tw-space-x-reverse))}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.py-4{padding-block:calc(var(--spacing)*4)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.w-52{width:calc(var(--spacing)*52)}.top-0{top:calc(var(--spacing)*0)}.col-span-4{grid-column:span 4/span 4}.mx-2{margin-inline:calc(var(--spacing)*2)}.my-1{margin-block:calc(var(--spacing)*1)}.mr-0{margin-right:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-auto{margin-left:auto}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.h-0{height:calc(var(--spacing)*0)}.h-5{height:calc(var(--spacing)*5)}.w-0{width:calc(var(--spacing)*0)}.w-5{width:calc(var(--spacing)*5)}.cursor-not-allowed{cursor:not-allowed}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.items-start{align-items:flex-start}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@layer utilities{:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.border{border-style:var(--tw-border-style);border-width:1px}.border-t-\[14px\]{border-top-style:var(--tw-border-style);border-top-width:14px}.border-l-\[14px\]{border-left-style:var(--tw-border-style);border-left-width:14px}.border-primary{border-color:var(--color-primary)}.border-t-red-500{border-top-color:var(--color-red-500)}.border-l-transparent{border-left-color:#0000}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.text-nowrap{text-wrap:nowrap}.text-gray-600{color:var(--color-gray-600)}.text-red-500{color:var(--color-red-500)}.opacity-50{opacity:.5}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.focus\:border-primary:focus{border-color:var(--color-primary)}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}}@media (hover:hover){.hover\:opacity-100:hover{opacity:1}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}