@blotoutio/providers-shop-gpt-sdk 1.14.0 → 1.16.0

package/index.cjs.js

@@ -699,7 +699,7 @@ const getIsBotOpened = (destination, sessionId) => {
     return (_a = local === null || local === void 0 ? void 0 : local[sessionId]) === null || _a === void 0 ? void 0 : _a.opened;
 };
 
-const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, storeAPI, sessionId, sendTag, }) => {
+const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, storeAPI, sessionId, sendTag, sendEdgeData, getEdgeData, }) => {
     if (!baseURL) {
         throw new Error(`baseURL missing`);
     }
@@ -730,6 +730,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
                 productHandle,
                 threadId,
                 pageUrl: window.location.href,
+                customerId: storeAPI.getCustomerId(),
             }),
             credentials: 'include',
         });
@@ -830,7 +831,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         const data = (await response.json());
         return data.customPrompts;
     };
-    const sendEvent = (action, currency, actionData, clickData) => {
+    const sendEvent = (action, currency, actionData, clickData, beacon) => {
         var _a;
         const storageData = (_a = getProductActions(baseURL, sessionId)) !== null && _a !== void 0 ? _a : {};
         const userType = getUserType(baseURL, sessionId);
@@ -860,6 +861,10 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             }
         })
             .catch(logger.error);
+        const options = { destination: baseURL };
+        if (beacon) {
+            options.method = 'beacon';
+        }
         sendTag({
             eventId: crypto.randomUUID(),
             eventName: action,
@@ -874,6 +879,17 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             providers: {
                 shopGPT: true,
             },
+            options,
+        });
+    };
+    const sendUserData = (data) => {
+        sendEdgeData(data, { all: true });
+    };
+    const getUserData = (keys) => {
+        return new Promise((resolve) => {
+            getEdgeData(keys, (data) => {
+                resolve(data);
+            });
         });
     };
     return {
@@ -886,6 +902,8 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         saveFeedback,
         fetchCustomPrompts,
         sendEvent,
+        sendUserData,
+        getUserData,
     };
 };
 
@@ -942,6 +960,8 @@ const init = (params) => {
             userId: params.userId,
             sessionId: (_a = params.session) === null || _a === void 0 ? void 0 : _a.sessionId,
             sendTag: params.sendTag,
+            sendEdgeData: params.sendEdgeData,
+            getEdgeData: params.getEdgeData,
         });
         shopGPTAPI.sendEvent('shopGPTInitialized', undefined, undefined, {
             groupName: experiment.groupName,
@@ -1066,7 +1086,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2=globalThis,e$7=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$6=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$6.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$6.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
+const t$3=globalThis,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$6=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$6.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$6.set(s,t));}return t}toString(){return this.cssText}};const r$4=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$4=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$2)},S$1=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$4(e)})(t):t;
 
 /**
  * @license
@@ -1079,7 +1099,7 @@ const t$2=globalThis,e$7=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.na
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1=globalThis,i$2=t$1.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$5="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h,n$1=`<${o$4}>`,r$2=document,l=()=>r$2.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),b=y(2),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$2.createTreeWalker(r$2,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$5+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$5)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$2).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$2,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.3.0");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
+const t$2=globalThis,i$2=t$2.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$5="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h,n$1=`<${o$4}>`,r$2=document,l=()=>r$2.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),b=y(2),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$2.createTreeWalker(r$2,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$5+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$5)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$2?i$2.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$2).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$2,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$2.litHtmlPolyfillSupport;j?.(N,R),(t$2.litHtmlVersions??=[]).push("3.3.0");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
 
 /**
  * @license
@@ -1087,6 +1107,13 @@ const t$1=globalThis,i$2=t$1.trustedTypes,s$1=i$2?i$2.createPolicy("lit-html",{c
  * SPDX-License-Identifier: BSD-3-Clause
  */const s=globalThis;let i$1 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}};i$1._$litElement$=!0,i$1["finalized"]=!0,s.litElementHydrateSupport?.({LitElement:i$1});const o$3=s.litElementPolyfillSupport;o$3?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.0");
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1181,7 +1208,7 @@ const shopGPTStyles = i$4 `
       min-height: unset;
       min-width: unset;
       width: 100vw;
-      height: 100vh;
+      height: 100dvh;
       bottom: 0;
       right: 0;
       border-radius: 0;
@@ -1216,6 +1243,7 @@ const shopGPTStyles = i$4 `
 
       border-radius: 5px 5px 0px;
       background: white;
+      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 
       font-weight: 400;
       line-height: 150%;
@@ -1223,25 +1251,16 @@ const shopGPTStyles = i$4 `
 
     .nudge {
       position: absolute;
-      color: var(--shopgpt-secondary);
-      padding: 12px 16px;
-      font-size: 16px;
-      line-height: 21px;
-      background: var(--shopgpt-warning);
-      border-radius: 5px;
-      box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0px 2px 4px -1px rgba(0, 0, 0, 0.06);
-      font-weight: 400;
-      line-height: 150%;
-      right: calc(100% + 10px);
-      top: 0%;
-      transform: translateY(-50%);
+      padding: 0;
+
+      right: 0%;
+      bottom: calc(100%);
+
+      transform: translateX(0);
       animation: slideIn 0.5s ease-out forwards;
       opacity: 0;
-      cursor: pointer;
-      width: 260px;
-      white-space: normal;
-      word-wrap: break-word;
+
+      width: 367px;
     }
 
     &:hover {
@@ -1253,11 +1272,11 @@ const shopGPTStyles = i$4 `
 
   @keyframes slideIn {
     from {
-      transform: translate(20px, -50%);
+      transform: translateY(0);
       opacity: 0;
     }
     to {
-      transform: translate(0, -50%);
+      transform: translateY(-20px);
       opacity: 1;
     }
   }
@@ -1352,7 +1371,7 @@ const botIcon = (width, height) => b `
 const cursorBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
   <path d="M47.8458 21.1038L9.34579 7.10383C9.03323 6.99108 8.69504 6.96965 8.37074 7.04203C8.04645 7.11441 7.74947 7.27761 7.51452 7.51256C7.27957 7.74751 7.11636 8.0445 7.04398 8.36879C6.9716 8.69308 6.99304 9.03128 7.10579 9.34383L21.1058 47.8438C21.2281 48.1821 21.4516 48.4744 21.7459 48.6811C22.0403 48.8877 22.3911 48.9987 22.7508 48.9988C23.1013 48.9992 23.4438 48.8943 23.734 48.6977C24.0241 48.5011 24.2486 48.2219 24.3783 47.8963L31.0983 31.0963L47.8983 24.3763C48.2303 24.2504 48.5162 24.0264 48.7179 23.7342C48.9196 23.4419 49.0277 23.0952 49.0277 22.7401C49.0277 22.385 48.9196 22.0383 48.7179 21.746C48.5162 21.4537 48.2303 21.2298 47.8983 21.1038H47.8458ZM29.1033 28.1038L28.4033 28.3838L28.1233 29.0838L22.7508 42.3488L11.6733 11.6713L42.3508 22.7488L29.1033 28.1038Z" fill="#172A41"/>
 </svg>`;
-const closeBtn = b `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
+const closeBtn$1 = b `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none">
   <path d="M27 11.075L25.425 9.5L18 16.925L10.575 9.5L9 11.075L16.425 18.5L9 25.925L10.575 27.5L18 20.075L25.425 27.5L27 25.925L19.575 18.5L27 11.075Z" fill="#A3B2C6"/>
 </svg>`;
 const leftBtn$1 = b `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
@@ -1940,7 +1959,6 @@ const productItemStyles = i$4 `
 
   .product-name {
     display: -webkit-box;
-    color: #1e293b;
     max-width: 100%;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
@@ -1948,18 +1966,9 @@ const productItemStyles = i$4 `
     text-overflow: ellipsis;
     word-break: break-word;
     white-space: normal;
-
-    opacity: 0.7;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
   }
 
   .product-variation-details {
-    color: #000000;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 22px;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
@@ -1972,9 +1981,6 @@ const productItemStyles = i$4 `
   .prices {
     display: flex;
     gap: 0 8px;
-    font-weight: 600;
-    font-size: 12px;
-    line-height: 16px;
     color: #020617;
 
     .price-compared {
@@ -2033,10 +2039,6 @@ const productItemStyles = i$4 `
       gap: 0;
     }
 
-    .product-variation-details {
-      font-size: 14px;
-    }
-
     .product.modal {
       height: 100%;
 
@@ -2052,7 +2054,6 @@ const productItemStyles = i$4 `
 
       .product-name,
       .product-variation-details {
-        font-size: 12px;
         max-width: 160px;
       }
     }
@@ -2078,7 +2079,6 @@ const productItemStyles = i$4 `
 
     .product-name {
       -webkit-line-clamp: 1;
-      color: #172a41;
     }
 
     .product-variation-details {
@@ -2132,7 +2132,66 @@ const chevronRight = b `<svg width="14" height="14" viewBox="0 0 14 14" fill="no
 <path d="M5.25 10.5L8.75 7L5.25 3.5" stroke="white" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 
-class ProductItem extends i$1 {
+var css_248z = "/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-200: oklch(88.5% 0.062 18.334);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-800: oklch(44.4% 0.177 26.899);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-orange-50: #f25c2b;\n    --color-yellow-100: oklch(97.3% 0.071 103.193);\n    --color-yellow-400: oklch(85.2% 0.199 91.936);\n    --color-yellow-600: oklch(68.1% 0.162 75.834);\n    --color-yellow-700: oklch(55.4% 0.135 66.442);\n    --color-yellow-800: oklch(47.6% 0.114 61.907);\n    --color-yellow-900: oklch(42.1% 0.095 57.708);\n    --color-green-100: oklch(96.2% 0.044 156.743);\n    --color-green-400: oklch(79.2% 0.209 151.711);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-green-700: oklch(52.7% 0.154 150.069);\n    --color-green-800: oklch(44.8% 0.119 151.328);\n    --color-green-900: oklch(39.3% 0.095 152.535);\n    --color-cyan-500: oklch(71.5% 0.143 215.221);\n    --color-blue-50: #3b82f6;\n    --color-blue-100: #172554;\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-300: oklch(80.9% 0.105 251.813);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-blue-700: oklch(48.8% 0.243 264.376);\n    --color-blue-800: oklch(42.4% 0.199 265.638);\n    --color-blue-900: oklch(37.9% 0.146 265.522);\n    --color-purple-600: oklch(55.8% 0.288 302.321);\n    --color-slate-100: oklch(96.8% 0.007 247.896);\n    --color-slate-500: oklch(55.4% 0.046 257.417);\n    --color-slate-800: oklch(27.9% 0.041 260.031);\n    --color-slate-950: oklch(12.9% 0.042 264.695);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-neutral-100: #172a41;\n    --color-neutral-600: oklch(43.9% 0 0);\n    --color-neutral-950: oklch(14.5% 0 0);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-xs: 20rem;\n    --container-sm: 24rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-4xl: 56rem;\n    --container-7xl: 80rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --text-7xl: 4.5rem;\n    --text-7xl--line-height: 1;\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-3xl: 1.5rem;\n    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: #18181b;\n    --color-primary-foreground: #fafafa;\n    --color-orange-10: #fff3e6;\n    --color-neutral-10: #f1f4f8;\n    --color-neutral-80: #394d66;\n    --radius-default: 16px;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    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\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .\\@container {\n    container-type: inline-size;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .sticky\\! {\n    position: sticky !important;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-55 {\n    z-index: 55;\n  }\n  .col-span-1 {\n    grid-column: span 1 / span 1;\n  }\n  .col-span-6 {\n    grid-column: span 6 / span 6;\n  }\n  .col-span-full {\n    grid-column: 1 / -1;\n  }\n  .col-start-1 {\n    grid-column-start: 1;\n  }\n  .row-start-1 {\n    grid-row-start: 1;\n  }\n  .float-right {\n    float: right;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .-m-2\\.5 {\n    margin: calc(var(--spacing) * -2.5);\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1\\.5 {\n    margin-inline: calc(var(--spacing) * -1.5);\n  }\n  .-mx-2 {\n    margin-inline: calc(var(--spacing) * -2);\n  }\n  .-mx-4 {\n    margin-inline: calc(var(--spacing) * -4);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .-my-1\\.5 {\n    margin-block: calc(var(--spacing) * -1.5);\n  }\n  .-my-2 {\n    margin-block: calc(var(--spacing) * -2);\n  }\n  .-my-3 {\n    margin-block: calc(var(--spacing) * -3);\n  }\n  .my-0 {\n    margin-block: calc(var(--spacing) * 0);\n  }\n  .my-6 {\n    margin-block: calc(var(--spacing) * 6);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-5 {\n    margin-top: calc(var(--spacing) * 5);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .mt-10 {\n    margin-top: calc(var(--spacing) * 10);\n  }\n  .mt-11 {\n    margin-top: calc(var(--spacing) * 11);\n  }\n  .mt-15 {\n    margin-top: calc(var(--spacing) * 15);\n  }\n  .-mr-px {\n    margin-right: -1px;\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mr-3 {\n    margin-right: calc(var(--spacing) * 3);\n  }\n  .mr-16 {\n    margin-right: calc(var(--spacing) * 16);\n  }\n  .mb-0 {\n    margin-bottom: calc(var(--spacing) * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n  .mb-5 {\n    margin-bottom: calc(var(--spacing) * 5);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .mb-7 {\n    margin-bottom: calc(var(--spacing) * 7);\n  }\n  .mb-10 {\n    margin-bottom: calc(var(--spacing) * 10);\n  }\n  .mb-\\[24px\\] {\n    margin-bottom: 24px;\n  }\n  .-ml-0\\.5 {\n    margin-left: calc(var(--spacing) * -0.5);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .ml-3 {\n    margin-left: calc(var(--spacing) * 3);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .flow-root {\n    display: flow-root;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .table\\! {\n    display: table !important;\n  }\n  .table-cell {\n    display: table-cell;\n  }\n  .table-row {\n    display: table-row;\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-6 {\n    width: calc(var(--spacing) * 6);\n    height: calc(var(--spacing) * 6);\n  }\n  .size-12 {\n    width: calc(var(--spacing) * 12);\n    height: calc(var(--spacing) * 12);\n  }\n  .size-full {\n    width: 100%;\n    height: 100%;\n  }\n  .h-1 {\n    height: calc(var(--spacing) * 1);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-15 {\n    height: calc(var(--spacing) * 15);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-20 {\n    height: calc(var(--spacing) * 20);\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[36px\\] {\n    height: 36px;\n  }\n  .h-\\[64px\\] {\n    height: 64px;\n  }\n  .h-\\[108px\\] {\n    height: 108px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-screen {\n    height: 100vh;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-11 {\n    width: calc(var(--spacing) * 11);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-55 {\n    width: calc(var(--spacing) * 55);\n  }\n  .w-106 {\n    width: calc(var(--spacing) * 106);\n  }\n  .w-240 {\n    width: calc(var(--spacing) * 240);\n  }\n  .w-\\[20px\\] {\n    width: 20px;\n  }\n  .w-\\[50px\\] {\n    width: 50px;\n  }\n  .w-\\[64px\\] {\n    width: 64px;\n  }\n  .w-\\[220px\\] {\n    width: 220px;\n  }\n  .w-\\[500px\\] {\n    width: 500px;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-screen {\n    width: 100vw;\n  }\n  .\\!max-w-\\[860px\\] {\n    max-width: 860px !important;\n  }\n  .max-w-3xl {\n    max-width: var(--container-3xl);\n  }\n  .max-w-4xl {\n    max-width: var(--container-4xl);\n  }\n  .max-w-7xl {\n    max-width: var(--container-7xl);\n  }\n  .max-w-\\[200px\\] {\n    max-width: 200px;\n  }\n  .max-w-\\[367px\\] {\n    max-width: 367px;\n  }\n  .max-w-sm {\n    max-width: var(--container-sm);\n  }\n  .max-w-xs {\n    max-width: var(--container-xs);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-2xl {\n    min-width: var(--container-2xl);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .min-w-xs {\n    min-width: var(--container-xs);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-auto {\n    flex: auto;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-grab {\n    cursor: grab;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-2\\.5 {\n    gap: calc(var(--spacing) * 2.5);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .gap-10 {\n    gap: calc(var(--spacing) * 10);\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(var(--spacing) * 2);\n  }\n  .gap-x-3 {\n    column-gap: calc(var(--spacing) * 3);\n  }\n  .gap-x-4 {\n    column-gap: calc(var(--spacing) * 4);\n  }\n  .gap-x-6 {\n    column-gap: calc(var(--spacing) * 6);\n  }\n  .-space-x-px {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(-1px * var(--tw-space-x-reverse));\n      margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .space-x-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .space-x-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .gap-y-1 {\n    row-gap: calc(var(--spacing) * 1);\n  }\n  .gap-y-2 {\n    row-gap: calc(var(--spacing) * 2);\n  }\n  .gap-y-4 {\n    row-gap: calc(var(--spacing) * 4);\n  }\n  .gap-y-5 {\n    row-gap: calc(var(--spacing) * 5);\n  }\n  .gap-y-7 {\n    row-gap: calc(var(--spacing) * 7);\n  }\n  .gap-y-8 {\n    row-gap: calc(var(--spacing) * 8);\n  }\n  .divide-y {\n    :where(& > :not(:last-child)) {\n      --tw-divide-y-reverse: 0;\n      border-bottom-style: var(--tw-border-style);\n      border-top-style: var(--tw-border-style);\n      border-top-width: calc(1px * var(--tw-divide-y-reverse));\n      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n    }\n  }\n  .divide-gray-100 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-gray-100);\n    }\n  }\n  .divide-gray-200 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-gray-200);\n    }\n  }\n  .divide-gray-300 {\n    :where(& > :not(:last-child)) {\n      border-color: var(--color-gray-300);\n    }\n  }\n  .self-center {\n    align-self: center;\n  }\n  .justify-self-end {\n    justify-self: flex-end;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-3xl {\n    border-radius: var(--radius-3xl);\n  }\n  .rounded-\\[6px\\] {\n    border-radius: 6px;\n  }\n  .rounded-default {\n    border-radius: var(--radius-default);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n  .rounded-t-md {\n    border-top-left-radius: var(--radius-md);\n    border-top-right-radius: var(--radius-md);\n  }\n  .rounded-l-md {\n    border-top-left-radius: var(--radius-md);\n    border-bottom-left-radius: var(--radius-md);\n  }\n  .rounded-r-md {\n    border-top-right-radius: var(--radius-md);\n    border-bottom-right-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-y {\n    border-block-style: var(--tw-border-style);\n    border-block-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-b-3 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 3px;\n  }\n  .border-l-4 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 4px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\[\\#e4e4e7\\] {\n    border-color: #e4e4e7;\n  }\n  .border-blue-600 {\n    border-color: var(--color-blue-600);\n  }\n  .border-gray-100 {\n    border-color: var(--color-gray-100);\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-gray-900\\/5 {\n    border-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent);\n    }\n  }\n  .border-gray-900\\/25 {\n    border-color: color-mix(in srgb, oklch(21% 0.034 264.665) 25%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-gray-900) 25%, transparent);\n    }\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-blue-100 {\n    background-color: var(--color-blue-100);\n  }\n  .bg-blue-200 {\n    background-color: var(--color-blue-200);\n  }\n  .bg-blue-300 {\n    background-color: var(--color-blue-300);\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-gray-50 {\n    background-color: var(--color-gray-50);\n  }\n  .bg-gray-100 {\n    background-color: var(--color-gray-100);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-300 {\n    background-color: var(--color-gray-300);\n  }\n  .bg-gray-500\\/75 {\n    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 75%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);\n    }\n  }\n  .bg-gray-900\\/80 {\n    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);\n    }\n  }\n  .bg-green-100 {\n    background-color: var(--color-green-100);\n  }\n  .bg-green-600 {\n    background-color: var(--color-green-600);\n  }\n  .bg-neutral-10 {\n    background-color: var(--color-neutral-10);\n  }\n  .bg-neutral-950 {\n    background-color: var(--color-neutral-950);\n  }\n  .bg-orange-10 {\n    background-color: var(--color-orange-10);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-purple-600 {\n    background-color: var(--color-purple-600);\n  }\n  .bg-red-100 {\n    background-color: var(--color-red-100);\n  }\n  .bg-red-300 {\n    background-color: var(--color-red-300);\n  }\n  .bg-red-600 {\n    background-color: var(--color-red-600);\n  }\n  .bg-slate-100 {\n    background-color: var(--color-slate-100);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-yellow-100 {\n    background-color: var(--color-yellow-100);\n  }\n  .bg-yellow-600 {\n    background-color: var(--color-yellow-600);\n  }\n  .bg-yellow-900 {\n    background-color: var(--color-yellow-900);\n  }\n  .bg-gradient-to-b {\n    --tw-gradient-position: to bottom in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-none {\n    background-image: none;\n  }\n  .from-cyan-500 {\n    --tw-gradient-from: var(--color-cyan-500);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-blue-500 {\n    --tw-gradient-to: var(--color-blue-500);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .p-7 {\n    padding: calc(var(--spacing) * 7);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .p-1234 {\n    padding: calc(var(--spacing) * 1234);\n  }\n  .p-4321 {\n    padding: calc(var(--spacing) * 4321);\n  }\n  .p-9999 {\n    padding: calc(var(--spacing) * 9999);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-3\\.5 {\n    padding-inline: calc(var(--spacing) * 3.5);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-7 {\n    padding-inline: calc(var(--spacing) * 7);\n  }\n  .px-8 {\n    padding-inline: calc(var(--spacing) * 8);\n  }\n  .px-11 {\n    padding-inline: calc(var(--spacing) * 11);\n  }\n  .px-\\[18px\\] {\n    padding-inline: 18px;\n  }\n  .px-\\[20px\\] {\n    padding-inline: 20px;\n  }\n  .px-\\[40px\\] {\n    padding-inline: 40px;\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(var(--spacing) * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-5 {\n    padding-block: calc(var(--spacing) * 5);\n  }\n  .py-10 {\n    padding-block: calc(var(--spacing) * 10);\n  }\n  .py-12 {\n    padding-block: calc(var(--spacing) * 12);\n  }\n  .py-24 {\n    padding-block: calc(var(--spacing) * 24);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(var(--spacing) * 0.5);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-5 {\n    padding-top: calc(var(--spacing) * 5);\n  }\n  .pt-8 {\n    padding-top: calc(var(--spacing) * 8);\n  }\n  .pt-10 {\n    padding-top: calc(var(--spacing) * 10);\n  }\n  .pt-11 {\n    padding-top: calc(var(--spacing) * 11);\n  }\n  .pt-16 {\n    padding-top: calc(var(--spacing) * 16);\n  }\n  .pr-1 {\n    padding-right: calc(var(--spacing) * 1);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pr-5 {\n    padding-right: calc(var(--spacing) * 5);\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(var(--spacing) * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(var(--spacing) * 6);\n  }\n  .pb-8 {\n    padding-bottom: calc(var(--spacing) * 8);\n  }\n  .pl-1 {\n    padding-left: calc(var(--spacing) * 1);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-11 {\n    padding-left: calc(var(--spacing) * 11);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-2xl\\/9 {\n    font-size: var(--text-2xl);\n    line-height: calc(var(--spacing) * 9);\n  }\n  .text-5xl {\n    font-size: var(--text-5xl);\n    line-height: var(--tw-leading, var(--text-5xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-sm\\/6 {\n    font-size: var(--text-sm);\n    line-height: calc(var(--spacing) * 6);\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xl\\/7 {\n    font-size: var(--text-xl);\n    line-height: calc(var(--spacing) * 7);\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-xs\\/5 {\n    font-size: var(--text-xs);\n    line-height: calc(var(--spacing) * 5);\n  }\n  .text-xs\\/6 {\n    font-size: var(--text-xs);\n    line-height: calc(var(--spacing) * 6);\n  }\n  .text-\\[18px\\] {\n    font-size: 18px;\n  }\n  .leading-6 {\n    --tw-leading: calc(var(--spacing) * 6);\n    line-height: calc(var(--spacing) * 6);\n  }\n  .leading-7 {\n    --tw-leading: calc(var(--spacing) * 7);\n    line-height: calc(var(--spacing) * 7);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .text-balance {\n    text-wrap: balance;\n  }\n  .text-pretty {\n    text-wrap: pretty;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-blue-50 {\n    color: var(--color-blue-50);\n  }\n  .text-blue-300 {\n    color: var(--color-blue-300);\n  }\n  .text-blue-400 {\n    color: var(--color-blue-400);\n  }\n  .text-blue-600 {\n    color: var(--color-blue-600);\n  }\n  .text-blue-700 {\n    color: var(--color-blue-700);\n  }\n  .text-blue-800 {\n    color: var(--color-blue-800);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-green-400 {\n    color: var(--color-green-400);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-green-700 {\n    color: var(--color-green-700);\n  }\n  .text-green-800 {\n    color: var(--color-green-800);\n  }\n  .text-neutral-80 {\n    color: var(--color-neutral-80);\n  }\n  .text-neutral-100 {\n    color: var(--color-neutral-100);\n  }\n  .text-neutral-600 {\n    color: var(--color-neutral-600);\n  }\n  .text-neutral-950 {\n    color: var(--color-neutral-950);\n  }\n  .text-orange-50 {\n    color: var(--color-orange-50);\n  }\n  .text-primary {\n    color: var(--color-primary);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-purple-600 {\n    color: var(--color-purple-600);\n  }\n  .text-red-300 {\n    color: var(--color-red-300);\n  }\n  .text-red-400 {\n    color: var(--color-red-400);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n  .text-red-700 {\n    color: var(--color-red-700);\n  }\n  .text-red-800 {\n    color: var(--color-red-800);\n  }\n  .text-red-900 {\n    color: var(--color-red-900);\n  }\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n  .text-slate-950 {\n    color: var(--color-slate-950);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-yellow-400 {\n    color: var(--color-yellow-400);\n  }\n  .text-yellow-600 {\n    color: var(--color-yellow-600);\n  }\n  .text-yellow-700 {\n    color: var(--color-yellow-700);\n  }\n  .text-yellow-800 {\n    color: var(--color-yellow-800);\n  }\n  .text-yellow-900 {\n    color: var(--color-yellow-900);\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-base {\n    --tw-shadow: 0px 1px 3px var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0px 1px 2px var(--tw-shadow-color, rgba(0, 0, 0, 0.06));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-0 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-gray-300 {\n    --tw-ring-color: var(--color-gray-300);\n  }\n  .ring-gray-900\\/10 {\n    --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-1 {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .-outline-offset-1 {\n    outline-offset: calc(1px * -1);\n  }\n  .outline-black\\/5 {\n    outline-color: color-mix(in srgb, #000 5%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n    }\n  }\n  .outline-gray-300 {\n    outline-color: var(--color-gray-300);\n  }\n  .outline-red-300 {\n    outline-color: var(--color-red-300);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    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,);\n  }\n  .drop-shadow-md {\n    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));\n    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));\n    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,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    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,);\n  }\n  .\\!filter {\n    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,) !important;\n  }\n  .filter {\n    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,);\n  }\n  .filter\\! {\n    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,) !important;\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    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;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-100 {\n    --tw-duration: 100ms;\n    transition-duration: 100ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-in {\n    --tw-ease: var(--ease-in);\n    transition-timing-function: var(--ease-in);\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-linear {\n    --tw-ease: linear;\n    transition-timing-function: linear;\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .ring-inset {\n    --tw-ring-inset: inset;\n  }\n  .group-hover\\:text-blue-600 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        color: var(--color-blue-600);\n      }\n    }\n  }\n  .group-hover\\:text-gray-700 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        color: var(--color-gray-700);\n      }\n    }\n  }\n  .group-data-\\[checked\\]\\:translate-x-5 {\n    &:is(:where(.group)[data-checked] *) {\n      --tw-translate-x: calc(var(--spacing) * 5);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .group-data-\\[checked\\]\\:opacity-0 {\n    &:is(:where(.group)[data-checked] *) {\n      opacity: 0%;\n    }\n  }\n  .group-data-\\[checked\\]\\:opacity-100 {\n    &:is(:where(.group)[data-checked] *) {\n      opacity: 100%;\n    }\n  }\n  .group-data-\\[checked\\]\\:duration-100 {\n    &:is(:where(.group)[data-checked] *) {\n      --tw-duration: 100ms;\n      transition-duration: 100ms;\n    }\n  }\n  .group-data-\\[checked\\]\\:duration-200 {\n    &:is(:where(.group)[data-checked] *) {\n      --tw-duration: 200ms;\n      transition-duration: 200ms;\n    }\n  }\n  .group-data-\\[checked\\]\\:ease-in {\n    &:is(:where(.group)[data-checked] *) {\n      --tw-ease: var(--ease-in);\n      transition-timing-function: var(--ease-in);\n    }\n  }\n  .group-data-\\[checked\\]\\:ease-out {\n    &:is(:where(.group)[data-checked] *) {\n      --tw-ease: var(--ease-out);\n      transition-timing-function: var(--ease-out);\n    }\n  }\n  .placeholder\\:text-gray-400 {\n    &::placeholder {\n      color: var(--color-gray-400);\n    }\n  }\n  .placeholder\\:text-red-300 {\n    &::placeholder {\n      color: var(--color-red-300);\n    }\n  }\n  .focus-within\\:relative {\n    &:focus-within {\n      position: relative;\n    }\n  }\n  .focus-within\\:ring-2 {\n    &:focus-within {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-within\\:ring-blue-600 {\n    &:focus-within {\n      --tw-ring-color: var(--color-blue-600);\n    }\n  }\n  .focus-within\\:ring-offset-2 {\n    &:focus-within {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus-within\\:outline-none {\n    &:focus-within {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .hover\\:cursor-pointer {\n    &:hover {\n      @media (hover: hover) {\n        cursor: pointer;\n      }\n    }\n  }\n  .hover\\:border-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:border-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:border-gray-400 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-gray-400);\n      }\n    }\n  }\n  .hover\\:border-red-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-red-300);\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#F4F4F5\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #F4F4F5;\n      }\n    }\n  }\n  .hover\\:bg-blue-100 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-100);\n      }\n    }\n  }\n  .hover\\:bg-blue-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-200);\n      }\n    }\n  }\n  .hover\\:bg-blue-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-500);\n      }\n    }\n  }\n  .hover\\:bg-blue-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-700);\n      }\n    }\n  }\n  .hover\\:bg-gray-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-50);\n      }\n    }\n  }\n  .hover\\:bg-gray-100 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-100);\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-red-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-50);\n      }\n    }\n  }\n  .hover\\:bg-red-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-200);\n      }\n    }\n  }\n  .hover\\:bg-red-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-red-700);\n      }\n    }\n  }\n  .hover\\:text-black {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-black);\n      }\n    }\n  }\n  .hover\\:text-blue-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-blue-500);\n      }\n    }\n  }\n  .hover\\:text-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:text-blue-900 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-blue-900);\n      }\n    }\n  }\n  .hover\\:text-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-gray-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-700);\n      }\n    }\n  }\n  .hover\\:text-gray-800 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-800);\n      }\n    }\n  }\n  .hover\\:text-green-900 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-green-900);\n      }\n    }\n  }\n  .hover\\:text-red-800 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-red-800);\n      }\n    }\n  }\n  .hover\\:text-red-900 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-red-900);\n      }\n    }\n  }\n  .hover\\:text-yellow-900 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-yellow-900);\n      }\n    }\n  }\n  .hover\\:no-underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: none;\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-50 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 50%;\n      }\n    }\n  }\n  .hover\\:opacity-90 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 90%;\n      }\n    }\n  }\n  .focus\\:relative {\n    &:focus {\n      position: relative;\n    }\n  }\n  .focus\\:z-10 {\n    &:focus {\n      z-index: 10;\n    }\n  }\n  .focus\\:z-20 {\n    &:focus {\n      z-index: 20;\n    }\n  }\n  .focus\\:border-primary {\n    &:focus {\n      border-color: var(--color-primary);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:ring-blue-600 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-600);\n    }\n  }\n  .focus\\:ring-red-500 {\n    &:focus {\n      --tw-ring-color: var(--color-red-500);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-2 {\n    &:focus {\n      outline-style: var(--tw-outline-style);\n      outline-width: 2px;\n    }\n  }\n  .focus\\:-outline-offset-2 {\n    &:focus {\n      outline-offset: calc(2px * -1);\n    }\n  }\n  .focus\\:outline-offset-0 {\n    &:focus {\n      outline-offset: 0px;\n    }\n  }\n  .focus\\:outline-blue-600 {\n    &:focus {\n      outline-color: var(--color-blue-600);\n    }\n  }\n  .focus\\:outline-red-600 {\n    &:focus {\n      outline-color: var(--color-red-600);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .focus-visible\\:outline {\n    &:focus-visible {\n      outline-style: var(--tw-outline-style);\n      outline-width: 1px;\n    }\n  }\n  .focus-visible\\:outline-2 {\n    &:focus-visible {\n      outline-style: var(--tw-outline-style);\n      outline-width: 2px;\n    }\n  }\n  .focus-visible\\:outline-offset-1 {\n    &:focus-visible {\n      outline-offset: 1px;\n    }\n  }\n  .focus-visible\\:outline-offset-2 {\n    &:focus-visible {\n      outline-offset: 2px;\n    }\n  }\n  .focus-visible\\:outline-blue-600 {\n    &:focus-visible {\n      outline-color: var(--color-blue-600);\n    }\n  }\n  .focus-visible\\:outline-gray-200 {\n    &:focus-visible {\n      outline-color: var(--color-gray-200);\n    }\n  }\n  .active\\:bg-gray-200 {\n    &:active {\n      background-color: var(--color-gray-200);\n    }\n  }\n  .active\\:opacity-100 {\n    &:active {\n      opacity: 100%;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-\\[\\#FFFFFF\\] {\n    &:disabled {\n      background-color: #FFFFFF;\n    }\n  }\n  .disabled\\:bg-gray-50 {\n    &:disabled {\n      background-color: var(--color-gray-50);\n    }\n  }\n  .disabled\\:text-gray-500 {\n    &:disabled {\n      color: var(--color-gray-500);\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .disabled\\:outline-gray-200 {\n    &:disabled {\n      outline-color: var(--color-gray-200);\n    }\n  }\n  .data-\\[checked\\]\\:bg-blue-600 {\n    &[data-checked] {\n      background-color: var(--color-blue-600);\n    }\n  }\n  .data-\\[closed\\]\\:-translate-x-full {\n    &[data-closed] {\n      --tw-translate-x: -100%;\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[closed\\]\\:translate-y-4 {\n    &[data-closed] {\n      --tw-translate-y: calc(var(--spacing) * 4);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[closed\\]\\:opacity-0 {\n    &[data-closed] {\n      opacity: 0%;\n    }\n  }\n  .data-\\[enter\\]\\:duration-300 {\n    &[data-enter] {\n      --tw-duration: 300ms;\n      transition-duration: 300ms;\n    }\n  }\n  .data-\\[enter\\]\\:ease-out {\n    &[data-enter] {\n      --tw-ease: var(--ease-out);\n      transition-timing-function: var(--ease-out);\n    }\n  }\n  .data-\\[leave\\]\\:duration-200 {\n    &[data-leave] {\n      --tw-duration: 200ms;\n      transition-duration: 200ms;\n    }\n  }\n  .data-\\[leave\\]\\:ease-in {\n    &[data-leave] {\n      --tw-ease: var(--ease-in);\n      transition-timing-function: var(--ease-in);\n    }\n  }\n  .sm\\:col-span-2 {\n    @media (width >= 40rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .sm\\:col-span-3 {\n    @media (width >= 40rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .sm\\:-mx-6 {\n    @media (width >= 40rem) {\n      margin-inline: calc(var(--spacing) * -6);\n    }\n  }\n  .sm\\:mx-0 {\n    @media (width >= 40rem) {\n      margin-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:mx-auto {\n    @media (width >= 40rem) {\n      margin-inline: auto;\n    }\n  }\n  .sm\\:my-8 {\n    @media (width >= 40rem) {\n      margin-block: calc(var(--spacing) * 8);\n    }\n  }\n  .sm\\:mt-0 {\n    @media (width >= 40rem) {\n      margin-top: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:mt-4 {\n    @media (width >= 40rem) {\n      margin-top: calc(var(--spacing) * 4);\n    }\n  }\n  .sm\\:mt-10 {\n    @media (width >= 40rem) {\n      margin-top: calc(var(--spacing) * 10);\n    }\n  }\n  .sm\\:mb-1 {\n    @media (width >= 40rem) {\n      margin-bottom: calc(var(--spacing) * 1);\n    }\n  }\n  .sm\\:ml-4 {\n    @media (width >= 40rem) {\n      margin-left: calc(var(--spacing) * 4);\n    }\n  }\n  .sm\\:block {\n    @media (width >= 40rem) {\n      display: block;\n    }\n  }\n  .sm\\:flex {\n    @media (width >= 40rem) {\n      display: flex;\n    }\n  }\n  .sm\\:grid {\n    @media (width >= 40rem) {\n      display: grid;\n    }\n  }\n  .sm\\:hidden {\n    @media (width >= 40rem) {\n      display: none;\n    }\n  }\n  .sm\\:size-4 {\n    @media (width >= 40rem) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .sm\\:size-10 {\n    @media (width >= 40rem) {\n      width: calc(var(--spacing) * 10);\n      height: calc(var(--spacing) * 10);\n    }\n  }\n  .sm\\:w-full {\n    @media (width >= 40rem) {\n      width: 100%;\n    }\n  }\n  .sm\\:max-w-sm {\n    @media (width >= 40rem) {\n      max-width: var(--container-sm);\n    }\n  }\n  .sm\\:grid-cols-3 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .sm\\:grid-cols-6 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(6, minmax(0, 1fr));\n    }\n  }\n  .sm\\:flex-row-reverse {\n    @media (width >= 40rem) {\n      flex-direction: row-reverse;\n    }\n  }\n  .sm\\:items-center {\n    @media (width >= 40rem) {\n      align-items: center;\n    }\n  }\n  .sm\\:items-start {\n    @media (width >= 40rem) {\n      align-items: flex-start;\n    }\n  }\n  .sm\\:gap-4 {\n    @media (width >= 40rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .sm\\:truncate {\n    @media (width >= 40rem) {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n  .sm\\:rounded-lg {\n    @media (width >= 40rem) {\n      border-radius: var(--radius-lg);\n    }\n  }\n  .sm\\:p-0 {\n    @media (width >= 40rem) {\n      padding: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:p-6 {\n    @media (width >= 40rem) {\n      padding: calc(var(--spacing) * 6);\n    }\n  }\n  .sm\\:px-0 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:px-6 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 6);\n    }\n  }\n  .sm\\:px-8 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .sm\\:py-4 {\n    @media (width >= 40rem) {\n      padding-block: calc(var(--spacing) * 4);\n    }\n  }\n  .sm\\:py-32 {\n    @media (width >= 40rem) {\n      padding-block: calc(var(--spacing) * 32);\n    }\n  }\n  .sm\\:pr-0 {\n    @media (width >= 40rem) {\n      padding-right: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:pl-0 {\n    @media (width >= 40rem) {\n      padding-left: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .sm\\:text-2xl {\n    @media (width >= 40rem) {\n      font-size: var(--text-2xl);\n      line-height: var(--tw-leading, var(--text-2xl--line-height));\n    }\n  }\n  .sm\\:text-7xl {\n    @media (width >= 40rem) {\n      font-size: var(--text-7xl);\n      line-height: var(--tw-leading, var(--text-7xl--line-height));\n    }\n  }\n  .sm\\:text-sm\\/6 {\n    @media (width >= 40rem) {\n      font-size: var(--text-sm);\n      line-height: calc(var(--spacing) * 6);\n    }\n  }\n  .sm\\:text-xl {\n    @media (width >= 40rem) {\n      font-size: var(--text-xl);\n      line-height: var(--tw-leading, var(--text-xl--line-height));\n    }\n  }\n  .sm\\:text-xl\\/8 {\n    @media (width >= 40rem) {\n      font-size: var(--text-xl);\n      line-height: calc(var(--spacing) * 8);\n    }\n  }\n  .sm\\:tracking-tight {\n    @media (width >= 40rem) {\n      --tw-tracking: var(--tracking-tight);\n      letter-spacing: var(--tracking-tight);\n    }\n  }\n  .data-\\[closed\\]\\:sm\\:translate-y-0 {\n    &[data-closed] {\n      @media (width >= 40rem) {\n        --tw-translate-y: calc(var(--spacing) * 0);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .data-\\[closed\\]\\:sm\\:scale-95 {\n    &[data-closed] {\n      @media (width >= 40rem) {\n        --tw-scale-x: 95%;\n        --tw-scale-y: 95%;\n        --tw-scale-z: 95%;\n        scale: var(--tw-scale-x) var(--tw-scale-y);\n      }\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:flex-1 {\n    @media (width >= 48rem) {\n      flex: 1;\n    }\n  }\n  .md\\:items-center {\n    @media (width >= 48rem) {\n      align-items: center;\n    }\n  }\n  .md\\:justify-between {\n    @media (width >= 48rem) {\n      justify-content: space-between;\n    }\n  }\n  .md\\:space-y-0 {\n    @media (width >= 48rem) {\n      :where(& > :not(:last-child)) {\n        --tw-space-y-reverse: 0;\n        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n      }\n    }\n  }\n  .md\\:space-x-8 {\n    @media (width >= 48rem) {\n      :where(& > :not(:last-child)) {\n        --tw-space-x-reverse: 0;\n        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));\n        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));\n      }\n    }\n  }\n  .md\\:border-t-4 {\n    @media (width >= 48rem) {\n      border-top-style: var(--tw-border-style);\n      border-top-width: 4px;\n    }\n  }\n  .md\\:border-l-0 {\n    @media (width >= 48rem) {\n      border-left-style: var(--tw-border-style);\n      border-left-width: 0px;\n    }\n  }\n  .md\\:pt-4 {\n    @media (width >= 48rem) {\n      padding-top: calc(var(--spacing) * 4);\n    }\n  }\n  .md\\:pb-0 {\n    @media (width >= 48rem) {\n      padding-bottom: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:pl-0 {\n    @media (width >= 48rem) {\n      padding-left: calc(var(--spacing) * 0);\n    }\n  }\n  .lg\\:fixed {\n    @media (width >= 64rem) {\n      position: fixed;\n    }\n  }\n  .lg\\:inset-y-0 {\n    @media (width >= 64rem) {\n      inset-block: calc(var(--spacing) * 0);\n    }\n  }\n  .lg\\:z-50 {\n    @media (width >= 64rem) {\n      z-index: 50;\n    }\n  }\n  .lg\\:-mx-8 {\n    @media (width >= 64rem) {\n      margin-inline: calc(var(--spacing) * -8);\n    }\n  }\n  .lg\\:flex {\n    @media (width >= 64rem) {\n      display: flex;\n    }\n  }\n  .lg\\:hidden {\n    @media (width >= 64rem) {\n      display: none;\n    }\n  }\n  .lg\\:w-72 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 72);\n    }\n  }\n  .lg\\:w-full {\n    @media (width >= 64rem) {\n      width: 100%;\n    }\n  }\n  .lg\\:grid-cols-3 {\n    @media (width >= 64rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .lg\\:flex-col {\n    @media (width >= 64rem) {\n      flex-direction: column;\n    }\n  }\n  .lg\\:justify-between {\n    @media (width >= 64rem) {\n      justify-content: space-between;\n    }\n  }\n  .lg\\:justify-end {\n    @media (width >= 64rem) {\n      justify-content: flex-end;\n    }\n  }\n  .lg\\:px-8 {\n    @media (width >= 64rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .lg\\:pl-72 {\n    @media (width >= 64rem) {\n      padding-left: calc(var(--spacing) * 72);\n    }\n  }\n  .xl\\:gap-x-8 {\n    @media (width >= 80rem) {\n      column-gap: calc(var(--spacing) * 8);\n    }\n  }\n  .dark\\:bg-slate-800 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--color-slate-800);\n    }\n  }\n  .dark\\:text-gray-400 {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-gray-400);\n    }\n  }\n  .dark\\:text-white {\n    @media (prefers-color-scheme: dark) {\n      color: var(--color-white);\n    }\n  }\n  .dark\\:shadow-none {\n    @media (prefers-color-scheme: dark) {\n      --tw-shadow: 0 0 #0000;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .dark\\:-outline-offset-1 {\n    @media (prefers-color-scheme: dark) {\n      outline-offset: calc(1px * -1);\n    }\n  }\n  .dark\\:outline-white\\/10 {\n    @media (prefers-color-scheme: dark) {\n      outline-color: color-mix(in srgb, #fff 10%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n  }\n}\n@layer base {\n  :root,\n  :host {\n    font-family: 'Inter', sans-serif;\n  }\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n";
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replaceSync(css_248z);
+if (isIterable(stylesheet.cssRules)) {
+    const properties = [];
+    for (const rule of stylesheet.cssRules) {
+        if (rule instanceof CSSPropertyRule) {
+            if (rule.initialValue) {
+                properties.push(`${rule.name}: ${rule.initialValue}`);
+            }
+        }
+    }
+    stylesheet.insertRule(`:host { ${properties.join('; ')} }`);
+}
+const TW = (superClass) => class extends superClass {
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.shadowRoot) {
+            this.shadowRoot.adoptedStyleSheets = [
+                stylesheet,
+                ...(this.shadowRoot.adoptedStyleSheets || []),
+            ];
+        }
+    }
+};
+function isIterable(obj) {
+    return (obj != null &&
+        typeof obj == 'object' &&
+        Symbol.iterator in obj &&
+        typeof obj[Symbol.iterator] === 'function');
+}
+
+const TwLitElement = TW(i$1);
+let ExampleComponent = class ExampleComponent extends TwLitElement {
+    render() {
+        var _a;
+        return x `<div
+      class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10"
+    >
+      <div style=${`color: ${(_a = this.color) !== null && _a !== void 0 ? _a : 'auto'}`}>
+        <div class="text-xl font-medium text-black dark:text-white">
+          ChitChat
+        </div>
+        <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
+        <p>Plain text</p>
+      </div>
+    </div> `;
+    }
+};
+__decorate([
+    n({ attribute: true }),
+    __metadata("design:type", Object)
+], ExampleComponent.prototype, "color", void 0);
+ExampleComponent = __decorate([
+    t$1('example-component')
+], ExampleComponent);
+
+const TWLitElement$2 = TW(i$1);
+class ProductItem extends TWLitElement$2 {
     getLocalPrice(price) {
         if (!this.siteCurrency) {
             return price;
@@ -2146,7 +2205,7 @@ class ProductItem extends i$1 {
             parseFloat(comparedAtPrice) <= parseFloat(price)) {
             return E;
         }
-        return x `<p class="price-compared">
+        return x `<p class="price-compared text-xs leading-xs font-semibold">
       ${this.getLocalPrice(comparedAtPrice)}
     </p>`;
     }
@@ -2166,10 +2225,10 @@ class ProductItem extends i$1 {
         }
         return this.product.variants[0].selectedOptions.map((option) => x `
         <p
-          class="product-variation-details"
+          class="product-variation-details text-xs leading-xs font-semibold text-slate-500"
           title=${`${option.name}: ${option.value}`}
         >
-          ${option.name}: ${option.value}
+          ${option.value}
         </p>
       `);
     }
@@ -2202,15 +2261,19 @@ class ProductItem extends i$1 {
         <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
           <div>
-            <p class="product-name" title=${this.product.title}>
+            <p
+              class="product-name text-slate-800 text-xs font-semibold"
+              title=${this.product.title}
+            >
               ${this.product.title}
             </p>
             ${this.renderVariantTitles()}
           </div>
           <div class="prices">
-            <p>From</p>
             ${this.getComparedAtPrice(this.product.variants[0].comparedAtPrice, this.product.variants[0].price)}
-            <p>${this.getLocalPrice(this.product.variants[0].price)}</p>
+            <p class="text-xs leading-xs font-semibold">
+              ${this.getLocalPrice(this.product.variants[0].price)}
+            </p>
           </div>
           <div class="product-description">${this.product.description}</div>
           <button class="btn-quick-view">
@@ -3412,7 +3475,7 @@ class PersonalizeDialog extends i$1 {
             : E}
           <h2>Personalize your search</h2>
           <div class="close-btn btn" @click=${() => this.dialogModal.close()}>
-            ${closeBtn}
+            ${closeBtn$1}
           </div>
         </div>
         <div class="dialog-content">${this.getContent()}</div>
@@ -3768,7 +3831,7 @@ class FeedbackDialog extends i$1 {
       <div class="modal">
         <div class="header">
           <h3>Provide Additional Feedback</h3>
-          <div class="close" @click=${this.close}>${closeBtn}</div>
+          <div class="close" @click=${this.close}>${closeBtn$1}</div>
         </div>
         <form @submit=${this.handleSubmit}>
           <textarea
@@ -3822,11 +3885,6 @@ if (!customElements.get('feedback-dialog')) {
 }
 
 class TypingIndicator extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.position = 'bottom-left';
-        this.text = '';
-    }
     render() {
         return x `
       <div class="typing-dots">
@@ -3880,14 +3938,6 @@ TypingIndicator.styles = [
       }
     `,
 ];
-__decorate([
-    n({ type: String }),
-    __metadata("design:type", String)
-], TypingIndicator.prototype, "position", void 0);
-__decorate([
-    n({ type: String }),
-    __metadata("design:type", Object)
-], TypingIndicator.prototype, "text", void 0);
 if (!customElements.get('typing-indicator')) {
     customElements.define('typing-indicator', TypingIndicator);
 }
@@ -4161,7 +4211,7 @@ class ChatSection extends i$1 {
                 this.contextContainerElement.classList.remove('show');
             }}
             >
-              ${closeBtn}
+              ${closeBtn$1}
             </div>
           </div>
           <p>
@@ -4192,7 +4242,7 @@ class ChatSection extends i$1 {
             (_a = this.contextContainerElement) === null || _a === void 0 ? void 0 : _a.classList.remove('show');
         }}
           >
-            ${closeBtn}
+            ${closeBtn$1}
           </div>
         </div>
         <div>
@@ -4510,7 +4560,7 @@ const chatSectionStyles = i$4 `
       flex: 1;
       padding: 10px 38px 12px 35px;
       font-weight: 500;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 20px;
       color: #201d2f;
 
@@ -4622,7 +4672,7 @@ const chatSectionStyles = i$4 `
   }
 
   .message.user {
-    background: #18181b;
+    background: #ce9e44;
     color: #fafafa;
     max-width: 75%;
     align-self: flex-end;
@@ -4807,6 +4857,11 @@ const chatSectionStyles = i$4 `
     }
   }
 
+  .user-message-form {
+    margin-bottom: auto;
+    margin-top: 20px;
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -4842,6 +4897,7 @@ TooltipComponent.styles = [
 
         border-radius: 5px;
         background: #fff;
+        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 
         font-style: normal;
         font-weight: 400;
@@ -5075,6 +5131,103 @@ if (!customElements.get('chatbot-icon')) {
     customElements.define('chatbot-icon', ChatbotIcon);
 }
 
+const TWLitElement$1 = TW(i$1);
+class UserForm extends TWLitElement$1 {
+    submitUserData(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('submit-user-data', {
+            composed: true,
+            bubbles: true,
+            detail: {
+                firstName: this.firstName,
+                lastName: this.lastName,
+                email: this.email,
+            },
+        }));
+    }
+    render() {
+        return x `
+      <div
+        class="bg-slate-100 w-full pt-5 px-3.5 pb-5 flex flex-col gap-y-4 rounded-lg"
+      >
+        <p class="text-slate-800 text-sm font-normal">
+          Please provide the following information
+        </p>
+        <form
+          id="user-form"
+          class="flex flex-col gap-y-2"
+          @submit=${this.submitUserData}
+        >
+          <div>
+            <label class="mb-2 font-medium text-sm leading-none" for="first"
+              >First Name</label
+            >
+            <input
+              id="first"
+              type="text"
+              placeholder="Enter First Name"
+              .value=${this.firstName || ''}
+              @input=${(e) => (this.firstName = e.target.value)}
+              class="w-full rounded-md border border-[#e4e4e7] px-3 py-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:border-primary bg-[#ffffff]"
+              required
+            />
+          </div>
+          <div>
+            <label class="mb-2 font-medium text-sm leading-none" for="last"
+              >Last Name</label
+            >
+            <input
+              id="last"
+              type="text"
+              placeholder="Enter Last Name"
+              .value=${this.lastName || ''}
+              @input=${(e) => (this.lastName = e.target.value)}
+              class="w-full rounded-md border border-[#e4e4e7] px-3 py-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:border-primary bg-[#ffffff]"
+              required
+            />
+          </div>
+          <div>
+            <label class="mb-2 font-medium text-sm leading-none" for="email"
+              >Email Address</label
+            >
+            <input
+              id="email"
+              type="email"
+              placeholder="Enter Email"
+              .value=${this.email || ''}
+              @input=${(e) => (this.email = e.target.value)}
+              class="w-full rounded-md border border-[#e4e4e7] px-3 py-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:border-primary bg-[#ffffff]"
+              required
+            />
+          </div>
+        </form>
+        <button
+          class="w-full rounded-md p-3 bg-primary text-xs font-medium leading-none text-primary-foreground hover:opacity-90 cursor-pointer"
+          type="submit"
+          form="user-form"
+        >
+          Submit Details
+        </button>
+      </div>
+    `;
+    }
+}
+__decorate([
+    r(),
+    __metadata("design:type", Object)
+], UserForm.prototype, "firstName", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Object)
+], UserForm.prototype, "lastName", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Object)
+], UserForm.prototype, "email", void 0);
+if (!customElements.get('user-form')) {
+    customElements.define('user-form', UserForm);
+}
+
 class PopupView extends i$1 {
     constructor() {
         super(...arguments);
@@ -5245,7 +5398,7 @@ class PopupView extends i$1 {
         <load-spinner></load-spinner>
       </div>`;
         }
-        if (this.messages.length === 0) {
+        if (this.messages.length === 0 && !this.shouldAskUserEmail) {
             return x `
         <div class="chat-welcome">
           ${this.botIconUrl
@@ -5264,6 +5417,13 @@ class PopupView extends i$1 {
         }
         return x `
       <div class="messages">
+        ${this.shouldAskUserEmail
+            ? x `
+              <div class="user-message-form">
+                <user-form></user-form>
+              </div>
+            `
+            : E}
         ${this.isTyping
             ? x ` <div class="message bot">
               <typing-indicator></typing-indicator>
@@ -5636,6 +5796,10 @@ __decorate([
     n({ type: Object }),
     __metadata("design:type", Object)
 ], PopupView.prototype, "siteCurrency", void 0);
+__decorate([
+    n({ type: Boolean }),
+    __metadata("design:type", Object)
+], PopupView.prototype, "shouldAskUserEmail", void 0);
 __decorate([
     r(),
     __metadata("design:type", Object)
@@ -5664,6 +5828,118 @@ if (!customElements.get('popup-view')) {
     customElements.define('popup-view', PopupView);
 }
 
+const search = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0001 14L11.1335 11.1333M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#E1983F" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const headset = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 7.33331H4C4.35362 7.33331 4.69276 7.47379 4.94281 7.72384C5.19286 7.97389 5.33333 8.31302 5.33333 8.66665V10.6666C5.33333 11.0203 5.19286 11.3594 4.94281 11.6095C4.69276 11.8595 4.35362 12 4 12H3.33333C2.97971 12 2.64057 11.8595 2.39052 11.6095C2.14048 11.3594 2 11.0203 2 10.6666V7.33331ZM2 7.33331C2 6.54538 2.15519 5.76517 2.45672 5.03721C2.75825 4.30926 3.20021 3.64782 3.75736 3.09067C4.31451 2.53352 4.97595 2.09156 5.7039 1.79004C6.43185 1.48851 7.21207 1.33331 8 1.33331C8.78793 1.33331 9.56815 1.48851 10.2961 1.79004C11.0241 2.09156 11.6855 2.53352 12.2426 3.09067C12.7998 3.64782 13.2417 4.30926 13.5433 5.03721C13.8448 5.76517 14 6.54538 14 7.33331M14 7.33331V10.6666M14 7.33331H12C11.6464 7.33331 11.3072 7.47379 11.0572 7.72384C10.8071 7.97389 10.6667 8.31302 10.6667 8.66665V10.6666C10.6667 11.0203 10.8071 11.3594 11.0572 11.6095C11.3072 11.8595 11.6464 12 12 12H12.6667C13.0203 12 13.3594 11.8595 13.6095 11.6095C13.8595 11.3594 14 11.0203 14 10.6666M14 10.6666V12C14 12.7072 13.719 13.3855 13.219 13.8856C12.7189 14.3857 12.0406 14.6666 11.3333 14.6666H8" stroke="#E1983F" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const messageCircleQuestion = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.05998 6.00007C6.21671 5.55452 6.52608 5.17881 6.93328 4.9395C7.34048 4.70018 7.81924 4.6127 8.28476 4.69255C8.75028 4.7724 9.17252 5.01442 9.4767 5.37576C9.78087 5.7371 9.94735 6.19442 9.94664 6.66674C9.94664 8.00007 7.94664 8.66674 7.94664 8.66674M7.99992 11.3334H8.00659M5.26659 13.3334C6.53897 13.9861 8.00264 14.1629 9.39384 13.8319C10.785 13.5009 12.0123 12.6839 12.8544 11.5282C13.6966 10.3724 14.0982 8.95386 13.987 7.52816C13.8758 6.10246 13.259 4.76336 12.2478 3.75218C11.2366 2.741 9.89751 2.12422 8.47181 2.013C7.04611 1.90177 5.62757 2.30342 4.4718 3.14555C3.31603 3.98768 2.49905 5.21493 2.16807 6.60613C1.83709 7.99733 2.01388 9.461 2.66659 10.7334L1.33325 14.6667L5.26659 13.3334Z" stroke="#E1983F" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const closeBtn = b `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4L4 12M4 4L12 12" stroke="#020617" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const TWLitElement = TW(i$1);
+class ChatNudge extends TWLitElement {
+    closeNudge(e) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('close-nudge', {
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    handlePromptClick(e, id, text) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('nudge-prompt-click', {
+            composed: true,
+            bubbles: true,
+            detail: { id, message: text },
+        }));
+    }
+    renderPrompts() {
+        const prompts = [
+            {
+                id: 'query',
+                icon: search,
+                text: this.prompt ? this.prompt : 'Explore Fragrances',
+            },
+            {
+                id: 'support',
+                icon: headset,
+                text: 'Get Support for your Order',
+            },
+            {
+                id: 'other-questions',
+                icon: messageCircleQuestion,
+                text: 'Other Questions?',
+            },
+        ];
+        return x `
+      ${o$1(prompts, (prompt) => x `
+          <button
+            class="cursor-pointer flex items-center justify-center gap-2 px-4 py-2 bg-[#ffffff] border border-[#e4e4e7] rounded-[6px] w-fit hover:bg-[#F4F4F5] disabled:bg-[#FFFFFF] disabled:opacity-50"
+            @click=${(e) => this.handlePromptClick(e, prompt.id, prompt.text)}
+          >
+            <span>${prompt.icon}</span>
+            <p class="text-primary text-sm font-medium">${prompt.text}</p>
+          </button>
+        `)}
+    `;
+    }
+    render() {
+        return x `
+      <div
+        class="shadow-base bg-[#ffffff] p-4 rounded-default max-w-[367px] mb-3"
+      >
+        <div class="mb-3 flex flex-col gap-y-1">
+          <div class="flex justify-between items-center">
+            <h2 class="text-slate-950 text-2xl font-bold ">Hello!</h2>
+            <div
+              class="btn hover:opacity-50 active:opacity-100 cursor-pointer"
+              @click=${this.closeNudge}
+            >
+              ${closeBtn}
+            </div>
+          </div>
+          <h3 class="text-slate-950 font-semibold">
+            Welcome to ${this.brandName ? this.brandName : 'ShopGPT'}!
+          </h3>
+          <p class="text-slate-500 text-sm font-medium">
+            I’m your personal AI concierge & I’m here to help you. If you’re
+            looking for luxury fragrance blends at an unbeatable price, look no
+            further!
+          </p>
+        </div>
+        <div class="flex flex-col gap-y-2">
+          <h2 class="text-slate-950 font-semibold">
+            How may I help you today?
+          </h2>
+          <div class="flex flex-col gap-y-1 content-flex-start">
+            ${this.renderPrompts()}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatNudge.prototype, "brandName", void 0);
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], ChatNudge.prototype, "prompt", void 0);
+if (!customElements.get('chat-nudge')) {
+    customElements.define('chat-nudge', ChatNudge);
+}
+
 async function* streamToIterable(stream) {
     const reader = stream.getReader();
     while (true) {
@@ -5745,6 +6021,7 @@ class ShopGPT extends i$1 {
         this.customPrompts = [];
         this.hasUserInteracted = false;
         this.showNudge = false;
+        this.shouldAskUserEmail = false;
         this.loadData = async () => {
             if (!this.shopGPTAPI) {
                 return;
@@ -6180,6 +6457,29 @@ class ShopGPT extends i$1 {
         e.stopPropagation();
         this.shopGPTAPI.sendEvent(e.detail.action, this.getSiteCurrency().currency, e.detail.actionData, e.detail.clickData);
     }
+    closeNudge(e) {
+        e.stopPropagation();
+        setUserInteracted(this.destination);
+        this.handleUserInteraction();
+    }
+    handleNudgePromptClick(e) {
+        e.stopPropagation();
+        this.openModal();
+        this.setSelectedThreadId('');
+        this.createChatThread({ title: '' }, false);
+        if (e.detail.id === 'query') {
+            this.sendMessageToServer(e, e.detail.message, true);
+        }
+    }
+    submitUserData(e) {
+        e.stopPropagation();
+        this.shopGPTAPI.sendUserData({
+            email: e.detail.email,
+            firstName: e.detail.firstName,
+            lastName: e.detail.lastName,
+        });
+        this.shouldAskUserEmail = false;
+    }
     productClicked(e) {
         var _a, _b;
         e.stopPropagation();
@@ -6197,7 +6497,7 @@ class ShopGPT extends i$1 {
             url: e.detail.url,
             title: e.detail.title,
             rank: e.detail.rank,
-        });
+        }, true);
     }
     getSiteCurrency() {
         return this.storeAPI.getSiteCurrency();
@@ -6264,7 +6564,7 @@ class ShopGPT extends i$1 {
     `;
     }
     modalMode() {
-        var _a;
+        var _a, _b;
         const thread = this.chatThreads.get(this.selectedThreadId);
         const closeModal = () => {
             this.modalState = 'close';
@@ -6272,7 +6572,7 @@ class ShopGPT extends i$1 {
         };
         return x `
       ${this.modalState === 'open'
-            ? x `<div
+            ? x ` <div
             id="shop-gpt-modal"
             @delete-thread=${this.handleThreadDelete}
             @delete-all-threads=${this.handleAllThreadsDelete}
@@ -6280,6 +6580,7 @@ class ShopGPT extends i$1 {
             @click=${this.handleUserInteraction}
             @send-event=${this.sendEvent}
             @product-clicked=${this.productClicked}
+            @submit-user-data=${this.submitUserData}
           >
             <popup-view
               .prompts=${this.quickPrompts}
@@ -6303,6 +6604,7 @@ class ShopGPT extends i$1 {
               .botIconUrl=${this.botIconUrl}
               .css=${this.css}
               .userId=${this.userId}
+              .shouldAskUserEmail=${this.shouldAskUserEmail}
             ></popup-view>
           </div>`
             : E}
@@ -6321,15 +6623,13 @@ class ShopGPT extends i$1 {
           <chatbot-icon></chatbot-icon>
         </button>
         ${((_a = this.nudge) === null || _a === void 0 ? void 0 : _a.show) && this.showNudge
-            ? x ` <div
-              class="nudge"
-              @click=${(e) => {
-                e.preventDefault();
-                this.openModal();
-            }}
-            >
-              Hi there! I'm an AI Agent to help you find the perfect product.
-              What are you looking for today?
+            ? x ` <div class="nudge">
+              <chat-nudge
+                .brandName=${this.brandName}
+                .prompt=${(_b = this.nudge) === null || _b === void 0 ? void 0 : _b.prompt}
+                @close-nudge=${this.closeNudge}
+                @nudge-prompt-click=${this.handleNudgePromptClick}
+              ></chat-nudge>
             </div>`
             : x ` <div class="chatbot-hover-text">
               What are you looking for today?
@@ -6448,6 +6748,10 @@ __decorate([
     r(),
     __metadata("design:type", Object)
 ], ShopGPT.prototype, "showNudge", void 0);
+__decorate([
+    r(),
+    __metadata("design:type", Object)
+], ShopGPT.prototype, "shouldAskUserEmail", void 0);
 if (!customElements.get('shop-gpt')) {
     customElements.define('shop-gpt', ShopGPT);
 }