@betterstore/react 0.3.88 → 0.5.2

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useCallback, useState, useRef, useEffect, useLayoutEffect, forwardRef, createElement, useMemo, Children, isValidElement, cloneElement, Fragment, useReducer, memo } from 'react';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { flushSync } from 'react-dom';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
 const createStoreImpl = (createState) => {
   let state;
@@ -2664,7 +2664,7 @@ const cookie = {
       cookieOptions.expires.setTime(cookieOptions.expires.getTime() + minutes * 60 * 1000);
     }
     if (domain) cookieOptions.domain = domain;
-    document.cookie = serializeCookie(name, encodeURIComponent(value), cookieOptions);
+    document.cookie = serializeCookie(name, value, cookieOptions);
   },
   read(name) {
     const nameEQ = `${name}=`;
@@ -2676,8 +2676,8 @@ const cookie = {
     }
     return null;
   },
-  remove(name) {
-    this.create(name, '', -1);
+  remove(name, domain) {
+    this.create(name, '', -1, domain);
   }
 };
 var cookie$1 = {
@@ -2737,6 +2737,46 @@ var querystring = {
   }
 };
 
+var hash = {
+  name: 'hash',
+  // Deconstruct the options object and extract the lookupHash property and the lookupFromHashIndex property
+  lookup(_ref) {
+    let {
+      lookupHash,
+      lookupFromHashIndex
+    } = _ref;
+    let found;
+    if (typeof window !== 'undefined') {
+      const {
+        hash
+      } = window.location;
+      if (hash && hash.length > 2) {
+        const query = hash.substring(1);
+        if (lookupHash) {
+          const params = query.split('&');
+          for (let i = 0; i < params.length; i++) {
+            const pos = params[i].indexOf('=');
+            if (pos > 0) {
+              const key = params[i].substring(0, pos);
+              if (key === lookupHash) {
+                found = params[i].substring(pos + 1);
+              }
+            }
+          }
+        }
+        if (found) return found;
+        if (!found && lookupFromHashIndex > -1) {
+          const language = hash.match(/\/([a-zA-Z-]*)/g);
+          if (!Array.isArray(language)) return undefined;
+          const index = typeof lookupFromHashIndex === 'number' ? lookupFromHashIndex : 0;
+          return language[index]?.replace('/', '');
+        }
+      }
+    }
+    return found;
+  }
+};
+
 let hasLocalStorageSupport = null;
 const localStorageAvailable = () => {
   if (hasLocalStorageSupport !== null) return hasLocalStorageSupport;
@@ -2945,6 +2985,7 @@ class Browser {
     this.addDetector(htmlTag);
     this.addDetector(path);
     this.addDetector(subdomain);
+    this.addDetector(hash);
   }
   addDetector(detector) {
     this.detectors[detector.name] = detector;
@@ -4365,6 +4406,10 @@ function toFormData$1(obj, formData, options) {
       return value.toISOString();
     }
 
+    if (utils$1.isBoolean(value)) {
+      return value.toString();
+    }
+
     if (!useBlob && utils$1.isBlob(value)) {
       throw new AxiosError$1('Blob is not supported. Use a Buffer instead.');
     }
@@ -6273,7 +6318,7 @@ var fetchAdapter = isFetchSupported && (async (config) => {
       credentials: isCredentialsSupported ? withCredentials : undefined
     });
 
-    let response = await fetch(request);
+    let response = await fetch(request, fetchOptions);
 
     const isStreamResponse = supportsResponseStream && (responseType === 'stream' || responseType === 'response');
 
@@ -6479,7 +6524,7 @@ function dispatchRequest(config) {
   });
 }
 
-const VERSION$1 = "1.9.0";
+const VERSION$1 = "1.10.0";
 
 const validators$1 = {};
 
@@ -7131,30 +7176,11 @@ const {
   mergeConfig
 } = axios;
 
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+// src/utils/axios.ts
 var API_BASE_URL = "https://api.betterstore.io/v1";
 var createApiClient = (apiKey, proxy) => {
   const client = axios.create({
-    baseURL: proxy != null ? proxy : API_BASE_URL,
+    baseURL: proxy ?? API_BASE_URL,
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${apiKey}`,
@@ -7166,7 +7192,6 @@ var createApiClient = (apiKey, proxy) => {
   client.interceptors.response.use(
     (response) => response.data,
     (error) => {
-      var _a, _b;
       const apiError = {
         isError: true,
         status: 500,
@@ -7174,8 +7199,8 @@ var createApiClient = (apiKey, proxy) => {
       };
       if (error.response) {
         apiError.status = error.response.status;
-        apiError.message = ((_a = error.response.data) == null ? void 0 : _a.error) || "Server error occurred";
-        apiError.code = (_b = error.response.data) == null ? void 0 : _b.code;
+        apiError.message = error.response.data?.error || "Server error occurred";
+        apiError.code = error.response.data?.code;
         apiError.details = error.response.data;
       } else if (error.request) {
         apiError.status = 503;
@@ -7200,169 +7225,150 @@ var createApiClient = (apiKey, proxy) => {
 
 // src/client/index.ts
 var Client = class {
+  proxy;
   constructor(proxy) {
     this.proxy = proxy;
   }
   /**
    * Retrieve a checkout session by ID
    */
-  retrieveCheckout(clientSecret, checkoutId) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.get(
-        `/checkout/${checkoutId}`
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        console.error(`Checkout session with id ${checkoutId} not found`);
-        return null;
-      }
-      return data;
-    });
+  async retrieveCheckout(clientSecret, checkoutId) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.get(
+      `/checkout/${checkoutId}`
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      console.error(`Checkout session with id ${checkoutId} not found`);
+      return null;
+    }
+    return data;
   }
   /**
    * Update a checkout session
    */
-  updateCheckout(clientSecret, checkoutId, params) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.put(
-        `/checkout/${checkoutId}`,
-        params
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        console.error(`Checkout session with id ${checkoutId} not found`);
-        return null;
-      }
-      return data;
-    });
+  async updateCheckout(clientSecret, checkoutId, params) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.put(
+      `/checkout/${checkoutId}`,
+      params
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      console.error(`Checkout session with id ${checkoutId} not found`);
+      return null;
+    }
+    return data;
   }
   /**
    * Apply a discount code to a checkout session
    */
-  applyDiscountCode(clientSecret, checkoutId, discountCode) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.post(
-        `/checkout/${checkoutId}/discounts/apply`,
-        { code: discountCode }
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        throw new Error("Failed to apply discount code");
-      }
-      return data;
-    });
+  async applyDiscountCode(clientSecret, checkoutId, discountCode) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.post(
+      `/checkout/${checkoutId}/discounts/apply`,
+      { code: discountCode }
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      throw new Error("Failed to apply discount code");
+    }
+    return data;
   }
   /**
    * Remove a discount code from a checkout session
    */
-  removeDiscount(clientSecret, checkoutId, discountId) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.delete(
-        `/checkout/${checkoutId}/discounts/${discountId}`
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        throw new Error("Failed to remove discount code");
-      }
-      return data;
-    });
+  async removeDiscount(clientSecret, checkoutId, discountId) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.delete(
+      `/checkout/${checkoutId}/discounts/${discountId}`
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      throw new Error("Failed to remove discount code");
+    }
+    return data;
   }
   /**
    * Revalidate a checkout session
    */
-  revalidateDiscounts(clientSecret, checkoutId) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.get(
-        `/checkout/${checkoutId}/discounts/revalidate`
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        console.error(`Checkout session with id ${checkoutId} not found`);
-        return null;
-      }
-      return data;
-    });
+  async revalidateDiscounts(clientSecret, checkoutId) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.get(
+      `/checkout/${checkoutId}/discounts/revalidate`
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      console.error(`Checkout session with id ${checkoutId} not found`);
+      return null;
+    }
+    return data;
   }
   /**
    * Get shipping rates for a checkout session
    */
-  getCheckoutShippingRates(clientSecret, checkoutId) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.get(
-        `/checkout/shipping/${checkoutId}`
-      );
-      if ("isError" in data && data.isError || !data || !Array.isArray(data)) {
-        return [];
-      }
-      return data;
-    });
+  async getCheckoutShippingRates(clientSecret, checkoutId) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.get(
+      `/checkout/shipping/${checkoutId}`
+    );
+    if ("isError" in data && data.isError || !data || !Array.isArray(data)) {
+      return [];
+    }
+    return data;
   }
   /**
    * Generate payment secret for a checkout session
    */
-  generateCheckoutPaymentSecret(clientSecret, checkoutId) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.post(`/checkout/payment/${checkoutId}`);
-      if ("isError" in data && data.isError || !data || !("paymentSecret" in data)) {
-        throw new Error("Failed to generate payment secret");
-      }
-      return {
-        paymentSecret: data.paymentSecret,
-        publicKey: data.publicKey,
-        checkoutSession: data.checkoutSession
-      };
-    });
+  async generateCheckoutPaymentSecret(clientSecret, checkoutId) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.post(`/checkout/payment/${checkoutId}`);
+    if ("isError" in data && data.isError || !data || !("paymentSecret" in data)) {
+      throw new Error("Failed to generate payment secret");
+    }
+    return {
+      paymentSecret: data.paymentSecret,
+      publicKey: data.publicKey,
+      checkoutSession: data.checkoutSession
+    };
   }
   /**
    * Create a new customer
    */
-  createCustomer(clientSecret, params) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.post(
-        "/customer",
-        params
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        throw new Error("Failed to create customer");
-      }
-      return data;
-    });
+  async createCustomer(clientSecret, params) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.post(
+      "/customer",
+      params
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      throw new Error("Failed to create customer");
+    }
+    return data;
   }
   /**
    * Retrieve a customer by ID or email
    */
-  retrieveCustomer(clientSecret, idOrEmail) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.get(
-        `/customer/${idOrEmail}`
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        console.error(`Customer with id or email ${idOrEmail} not found`);
-        return null;
-      }
-      return data;
-    });
+  async retrieveCustomer(clientSecret, idOrEmail) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.get(
+      `/customer/${idOrEmail}`
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      console.error(`Customer with id or email ${idOrEmail} not found`);
+      return null;
+    }
+    return data;
   }
   /**
    * Update a customer
    */
-  updateCustomer(clientSecret, customerId, params) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient(clientSecret, this.proxy);
-      const data = yield apiClient.put(
-        `/customer/${customerId}`,
-        params
-      );
-      if ("isError" in data && data.isError || !data || !("id" in data)) {
-        console.error(`Customer with id ${customerId} not found`);
-        return null;
-      }
-      return data;
-    });
+  async updateCustomer(clientSecret, customerId, params) {
+    const apiClient = createApiClient(clientSecret, this.proxy);
+    const data = await apiClient.put(
+      `/customer/${customerId}`,
+      params
+    );
+    if ("isError" in data && data.isError || !data || !("id" in data)) {
+      console.error(`Customer with id ${customerId} not found`);
+      return null;
+    }
+    return data;
   }
 };
 var client_default = Client;
@@ -7433,12 +7439,12 @@ var currencyLocales = {
   // Turkish Lira
 };
 var Helpers = class {
+  proxy;
   constructor(proxy) {
     this.proxy = proxy;
   }
   formatCurrency(currency) {
-    var _a;
-    const locale = (_a = currencyLocales[currency.toUpperCase()]) != null ? _a : void 0;
+    const locale = currencyLocales[currency.toUpperCase()] ?? void 0;
     const formattedCurrency = new Intl.NumberFormat(locale, {
       style: "currency",
       currency,
@@ -7447,10 +7453,9 @@ var Helpers = class {
     return formattedCurrency.format(0).replace(/[\d.,\s]/g, "").trim();
   }
   formatPrice(priceInCents, currency, exchangeRate) {
-    var _a;
-    const amount = priceInCents / 100 * (exchangeRate != null ? exchangeRate : 1);
+    const amount = priceInCents / 100 * (exchangeRate ?? 1);
     const isWhole = amount % 1 === 0;
-    const locale = (_a = currencyLocales[currency.toUpperCase()]) != null ? _a : void 0;
+    const locale = currencyLocales[currency.toUpperCase()] ?? void 0;
     const formattedPrice = new Intl.NumberFormat(locale, {
       style: "currency",
       currency,
@@ -7460,32 +7465,30 @@ var Helpers = class {
     }).format(amount);
     return formattedPrice;
   }
-  getExchangeRate(baseCurrency, targetCurrency) {
-    return __async(this, null, function* () {
-      const apiClient = createApiClient("", this.proxy);
-      const { data } = yield apiClient.get(`/helpers/rates/${baseCurrency}`);
-      const rate = data.rates[targetCurrency];
-      if (!rate) {
-        throw new Error("Could not get exchange rate for target currency");
-      }
-      return rate;
-    });
+  async getExchangeRate(baseCurrency, targetCurrency) {
+    const apiClient = createApiClient("", this.proxy);
+    const { data } = await apiClient.get(`/helpers/rates/${baseCurrency}`);
+    const rate = data.rates[targetCurrency];
+    if (!rate) {
+      throw new Error("Could not get exchange rate for target currency");
+    }
+    return rate;
   }
 };
 var helpers_default = Helpers;
 function createStoreClient(config) {
-  return new client_default(config == null ? void 0 : config.proxy);
+  return new client_default(config?.proxy);
 }
 function createStoreHelpers(config) {
-  return new helpers_default(void 0 );
+  return new helpers_default(config?.proxy);
 }
 
-var css_248z = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\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-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 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), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\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    -moz-tab-size: 4;\n      -o-tab-size: 4;\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  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-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    ::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    -webkit-appearance: button;\n       -moz-appearance: 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  .pointer-events-none {\n    pointer-events: none;\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  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\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-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\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-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[450px\\] {\n    height: 450px;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height);\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96);\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\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-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-fit {\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1);\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\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  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\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-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-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * 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  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\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-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    -o-object-fit: cover;\n       object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\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-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\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-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\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-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  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .opacity-100 {\n    opacity: 100%;\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-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\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 {\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-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\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  .transition-shadow {\n    transition-property: box-shadow;\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-transform {\n    transition-property: transform, translate, scale, rotate;\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-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n         user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--primary);\n    }\n    & *::selection {\n      background-color: var(--primary);\n    }\n    &::-moz-selection {\n      background-color: var(--primary);\n    }\n    &::selection {\n      background-color: var(--primary);\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    & *::selection {\n      color: var(--primary-foreground);\n    }\n    &::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    &::selection {\n      color: var(--primary-foreground);\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--muted-foreground);\n    }\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\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  }\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-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\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-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg);\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n  }\n}\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --destructive-foreground: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --radius: 0.625rem;\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n@layer base {\n  * {\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight) !important;\n    letter-spacing: var(--tracking-tight) !important;\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\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-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-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\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-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\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-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\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-duration: initial;\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\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-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 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), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\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    -moz-tab-size: 4;\n      -o-tab-size: 4;\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  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-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    ::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    -webkit-appearance: button;\n       -moz-appearance: 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  .pointer-events-none {\n    pointer-events: none;\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  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\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-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\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-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[450px\\] {\n    height: 450px;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height);\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96);\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\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-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-fit {\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1);\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\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  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\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-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-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * 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  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\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-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    -o-object-fit: cover;\n       object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\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-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\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-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\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-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  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .opacity-100 {\n    opacity: 100%;\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-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\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 {\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-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\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-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\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  .transition-shadow {\n    transition-property: box-shadow;\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-transform {\n    transition-property: transform, translate, scale, rotate;\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-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n         user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--primary);\n    }\n    & *::selection {\n      background-color: var(--primary);\n    }\n    &::-moz-selection {\n      background-color: var(--primary);\n    }\n    &::selection {\n      background-color: var(--primary);\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    & *::selection {\n      color: var(--primary-foreground);\n    }\n    &::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    &::selection {\n      color: var(--primary-foreground);\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--muted-foreground);\n    }\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\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  }\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-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\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-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg);\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 1;\n    }\n  }\n}\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --destructive-foreground: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --radius: 0.625rem;\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n@layer base {\n  * {\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight) !important;\n    letter-spacing: var(--tracking-tight) !important;\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\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-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-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\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-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\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-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\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-duration: initial;\n    }\n  }\n}\n";
 
 const IframeWrapper = React__default.memo(({ children, iframeRef }) => {
     const [iframeBody, setIframeBody] = useState(null);
     const styleRef = useRef(null);
-    const resizeObserver = useRef();
+    const resizeObserver = useRef(null);
     const injectStyles = useCallback((doc) => {
         var _a;
         // Clean up previous style
@@ -7546,9 +7549,7 @@ const IframeWrapper = React__default.memo(({ children, iframeRef }) => {
             window.removeEventListener("resize", updateHeight);
         };
     }, [updateHeight]);
-    return (React__default.createElement("div", { id: "bs-wrapper", className: "w-full max-w-[1200px] min-h-screen mx-auto overflow-y-auto overflow-x-hidden relative" },
-        React__default.createElement("iframe", { ref: iframeRef, className: "w-full min-h-screen border-0", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation" }),
-        iframeBody && ReactDOM__default.createPortal(children, iframeBody)));
+    return (jsxs("div", { id: "bs-wrapper", className: "relative mx-auto min-h-screen w-full max-w-[1200px] overflow-y-auto overflow-x-hidden", children: [jsx("iframe", { ref: iframeRef, className: "min-h-screen w-full border-0", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation" }), iframeBody && ReactDOM__default.createPortal(children, iframeBody)] }));
 });
 IframeWrapper.displayName = "IframeWrapper";
 
@@ -8678,7 +8679,7 @@ const Toaster$1 = /*#__PURE__*/ React__default.forwardRef(function Toaster(props
 const Toaster = (_a) => {
     var props = __rest(_a, []);
     const { theme = "system" } = z();
-    return (React__default.createElement(Toaster$1, Object.assign({ theme: theme, className: "toaster group", style: {
+    return (jsx(Toaster$1, Object.assign({ theme: theme, className: "toaster group", style: {
             "--normal-bg": "var(--popover)",
             "--normal-text": "var(--popover-foreground)",
             "--normal-border": "var(--border)",
@@ -12914,15 +12915,19 @@ function cloneObject(data) {
     return copy;
 }
 
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey = (value) => /^\w*$/.test(value);
 
 var isUndefined = (val) => val === undefined;
 
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
 var get = (object, path, defaultValue) => {
     if (!path || !isObject(object)) {
         return defaultValue;
     }
-    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
     return isUndefined(result) || result === object
         ? isUndefined(object[path])
             ? defaultValue
@@ -12932,10 +12937,6 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isKey = (value) => /^\w*$/.test(value);
-
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -12984,6 +12985,7 @@ const INPUT_VALIDATION_RULES = {
 };
 
 const HookFormContext = React__default.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
 /**
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
  *
@@ -13413,7 +13415,7 @@ var createSubject = () => {
 
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
-function deepEqual$1(object1, object2) {
+function deepEqual$1(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
         return object1 === object2;
     }
@@ -13425,6 +13427,11 @@ function deepEqual$1(object1, object2) {
     if (keys1.length !== keys2.length) {
         return false;
     }
+    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+        return true;
+    }
+    _internal_visited.add(object1);
+    _internal_visited.add(object2);
     for (const key of keys1) {
         const val1 = object1[key];
         if (!keys2.includes(key)) {
@@ -13435,7 +13442,7 @@ function deepEqual$1(object1, object2) {
             if ((isDateObject(val1) && isDateObject(val2)) ||
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual$1(val1, val2)
+                ? !deepEqual$1(val1, val2, _internal_visited)
                 : val1 !== val2) {
                 return false;
             }
@@ -14754,14 +14761,14 @@ function createFormControl(props = {}) {
         if (_options.resolver) {
             const { errors, values } = await _runSchema();
             _formState.errors = errors;
-            fieldValues = values;
+            fieldValues = cloneObject(values);
         }
         else {
             await executeBuiltInValidation(_fields);
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
-                set(fieldValues, name, undefined);
+                unset(fieldValues, name);
             }
         }
         unset(_formState.errors, 'root');
@@ -14858,7 +14865,11 @@ function createFormControl(props = {}) {
                     }
                 }
                 for (const fieldName of _names.mount) {
-                    setValue(fieldName, get(values, fieldName));
+                    const value = get(values, fieldName, get(_defaultValues, fieldName));
+                    if (!isUndefined(value)) {
+                        set(values, fieldName, value);
+                        setValue(fieldName, get(values, fieldName));
+                    }
                 }
             }
             _formValues = cloneObject(values);
@@ -15078,14 +15089,21 @@ function useForm(props = {}) {
             : props.defaultValues,
     });
     if (!_formControl.current) {
-        _formControl.current = {
-            ...(props.formControl ? props.formControl : createFormControl(props)),
-            formState,
-        };
-        if (props.formControl &&
-            props.defaultValues &&
-            !isFunction$1(props.defaultValues)) {
-            props.formControl.reset(props.defaultValues, props.resetOptions);
+        if (props.formControl) {
+            _formControl.current = {
+                ...props.formControl,
+                formState,
+            };
+            if (props.defaultValues && !isFunction$1(props.defaultValues)) {
+                props.formControl.reset(props.defaultValues, props.resetOptions);
+            }
+        }
+        else {
+            const { formControl, ...rest } = createFormControl(props);
+            _formControl.current = {
+                ...rest,
+                formState,
+            };
         }
     }
     const control = _formControl.current.control;
@@ -15631,7 +15649,7 @@ const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
 const fractionRegex = /^\d+\/\d+$/;
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
-const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
 // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
@@ -18178,7 +18196,7 @@ function cn(...inputs) {
 
 function Label(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Root$2, Object.assign({ "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+    return (jsx(Root$2, Object.assign({ "data-slot": "label", className: cn("flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", className) }, props)));
 }
 
 const validErrorMessageKeys = Object.keys(en.Errors);
@@ -18194,8 +18212,7 @@ const Form = FormProvider;
 const FormFieldContext = React.createContext({});
 const FormField = (_a) => {
     var props = __rest(_a, []);
-    return (React.createElement(FormFieldContext.Provider, { value: { name: props.name } },
-        React.createElement(Controller, Object.assign({}, props))));
+    return (jsx(FormFieldContext.Provider, { value: { name: props.name }, children: jsx(Controller, Object.assign({}, props)) }));
 };
 const useFormField = () => {
     const fieldContext = React.useContext(FormFieldContext);
@@ -18213,18 +18230,17 @@ const FormItemContext = React.createContext({});
 function FormItem(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     const id = React.useId();
-    return (React.createElement(FormItemContext.Provider, { value: { id } },
-        React.createElement("div", Object.assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props))));
+    return (jsx(FormItemContext.Provider, { value: { id }, children: jsx("div", Object.assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props)) }));
 }
 function FormLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
     const { error, formItemId } = useFormField();
-    return (React.createElement(Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive-foreground", className), htmlFor: formItemId }, props)));
+    return (jsx(Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive-foreground", className), htmlFor: formItemId }, props)));
 }
 function FormControl(_a) {
     var props = __rest(_a, []);
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return (React.createElement(Slot$2, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+    return (jsx(Slot$2, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error
             ? `${formDescriptionId}`
             : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error }, props)));
 }
@@ -18239,22 +18255,18 @@ function FormMessage(_a) {
     }
     const key = validateErrorMessageKey(String(body));
     const message = t(`Errors.${key}`);
-    return (React.createElement("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive-foreground text-sm", className) }, props), message));
+    return (jsx("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive-foreground text-sm", className) }, props, { children: message })));
 }
 
 function Input(_a) {
     var { className, type } = _a, props = __rest(_a, ["className", "type"]);
-    return (React.createElement("input", Object.assign({ type: type, "data-slot": "input", className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
+    return (jsx("input", Object.assign({ type: type, "data-slot": "input", className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground shadow-xs flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
 }
 
 function InputGroup(_a) {
     var { name, label, className } = _a, props = __rest(_a, ["name", "label", "className"]);
     const { control } = useFormContext();
-    return (React__default.createElement(FormField, { control: control, name: name, render: ({ field }) => (React__default.createElement(FormItem, { className: className },
-            React__default.createElement(FormLabel, null, label),
-            React__default.createElement(FormControl, null,
-                React__default.createElement(Input, Object.assign({}, field, props))),
-            React__default.createElement(FormMessage, null))) }));
+    return (jsx(FormField, { control: control, name: name, render: ({ field }) => (jsxs(FormItem, { className: className, children: [jsx(FormLabel, { children: label }), jsx(FormControl, { children: jsx(Input, Object.assign({}, field, props)) }), jsx(FormMessage, {})] })) }));
 }
 
 const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
@@ -18324,7 +18336,7 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
 function Button(_a) {
     var { className, variant, size, asChild = false } = _a, props = __rest(_a, ["className", "variant", "size", "asChild"]);
     const Comp = asChild ? Slot$2 : "button";
-    return (React.createElement(Comp, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className })) }, props)));
+    return (jsx(Comp, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className })) }, props)));
 }
 
 /**
@@ -18517,9 +18529,7 @@ const X$2 = createLucideIcon("X", __iconNode);
 function SubmitButton(_a) {
     var { isSubmitting, isValid = true, className, variant, children, size } = _a, props = __rest(_a, ["isSubmitting", "isValid", "className", "variant", "children", "size"]);
     const { t } = useTranslation();
-    return (React__default.createElement(Button, Object.assign({ type: "submit", size: size, className: className, variant: variant, disabled: isSubmitting || !isValid }, props),
-        isSubmitting && React__default.createElement(Loader, { className: "animate-spin" }),
-        isSubmitting ? t("CheckoutEmbed.loading") : children));
+    return (jsxs(Button, Object.assign({ type: "submit", size: size, className: className, variant: variant, disabled: isSubmitting || !isValid }, props, { children: [isSubmitting && jsx(Loader, { className: "animate-spin" }), isSubmitting ? t("CheckoutEmbed.loading") : children] })));
 }
 
 const r=(t,r,o)=>{if(t&&"reportValidity"in t){const s=get(o,r);t.setCustomValidity(s&&s.message||""),t.reportValidity();}},o=(e,t)=>{for(const o in t.fields){const s=t.fields[o];s&&s.ref&&"reportValidity"in s.ref?r(s.ref,o,e):s&&s.refs&&s.refs.forEach(t=>r(t,o,e));}},s$2=(r,s)=>{s.shouldUseNativeValidation&&o(r,s);const n={};for(const o in r){const f=get(s.fields,o),c=Object.assign(r[o]||{},{ref:f&&f.ref});if(i(s.names||Object.keys(r),o)){const r=Object.assign({},get(n,o));set(r,"root",c),set(n,o,r);}else set(n,o,c);}return n},i=(e,t)=>{const r=n$2(t);return e.some(e=>n$2(e).match(`^${r}\\.\\d+`))};function n$2(e){return e.replace(/\]|\[/g,"")}
@@ -22044,72 +22054,64 @@ var Close = DialogClose;
 
 function Dialog(_a) {
     var props = __rest(_a, []);
-    return React.createElement(Root$1, Object.assign({ "data-slot": "dialog" }, props));
+    return jsx(Root$1, Object.assign({ "data-slot": "dialog" }, props));
 }
 function DialogTrigger(_a) {
     var props = __rest(_a, []);
-    return React.createElement(Trigger$1, Object.assign({ "data-slot": "dialog-trigger" }, props));
+    return jsx(Trigger$1, Object.assign({ "data-slot": "dialog-trigger" }, props));
 }
 function DialogPortal(_a) {
     var props = __rest(_a, []);
-    return React.createElement(Portal$1, Object.assign({ "data-slot": "dialog-portal" }, props));
+    return jsx(Portal$1, Object.assign({ "data-slot": "dialog-portal" }, props));
 }
 function DialogOverlay(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
+    return (jsx(Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className) }, props)));
 }
 function DialogContent(_a) {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (React.createElement(DialogPortal, { "data-slot": "dialog-portal" },
-        React.createElement(DialogOverlay, null),
-        React.createElement(Content$1, Object.assign({ "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className) }, props),
-            children,
-            React.createElement(Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" },
-                React.createElement(X$2, null),
-                React.createElement("span", { className: "sr-only" }, "Close")))));
+    return (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(Content$1, Object.assign({ "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className) }, props, { children: [children, jsxs(Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", children: [jsx(X$2, {}), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
 }
 function DialogHeader(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className) }, props)));
+    return (jsx("div", Object.assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className) }, props)));
 }
 function DialogFooter(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
+    return (jsx("div", Object.assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
 }
 function DialogTitle(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Title, Object.assign({ "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className) }, props)));
+    return (jsx(Title, Object.assign({ "data-slot": "dialog-title", className: cn("text-lg font-semibold leading-none", className) }, props)));
 }
 function DialogDescription(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(Description, Object.assign({ "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className) }, props)));
+    return (jsx(Description, Object.assign({ "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className) }, props)));
 }
 
 function Command(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(He, Object.assign({ "data-slot": "command", className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className) }, props)));
+    return (jsx(He, Object.assign({ "data-slot": "command", className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className) }, props)));
 }
 function CommandInput(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3" },
-        React.createElement(Search, { className: "size-4 shrink-0 opacity-50" }),
-        React.createElement(He.Input, Object.assign({ "data-slot": "command-input", className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className) }, props))));
+    return (jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [jsx(Search, { className: "size-4 shrink-0 opacity-50" }), jsx(He.Input, Object.assign({ "data-slot": "command-input", className: cn("placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50", className) }, props))] }));
 }
 function CommandList(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(He.List, Object.assign({ "data-slot": "command-list", className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className) }, props)));
+    return (jsx(He.List, Object.assign({ "data-slot": "command-list", className: cn("max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className) }, props)));
 }
 function CommandEmpty(_a) {
     var props = __rest(_a, []);
-    return (React.createElement(He.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props)));
+    return (jsx(He.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props)));
 }
 function CommandGroup(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(He.Group, Object.assign({ "data-slot": "command-group", className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className) }, props)));
+    return (jsx(He.Group, Object.assign({ "data-slot": "command-group", className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className) }, props)));
 }
 function CommandItem(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(He.Item, Object.assign({ "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+    return (jsx(He.Item, Object.assign({ "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className) }, props)));
 }
 
 /**
@@ -22154,8 +22156,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -22180,19 +22183,19 @@ function getExpandedPlacements(placement) {
 function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
+const lrPlacement = ['left', 'right'];
+const rlPlacement = ['right', 'left'];
+const tbPlacement = ['top', 'bottom'];
+const btPlacement = ['bottom', 'top'];
 function getSideList(side, isStart, rtl) {
-  const lr = ['left', 'right'];
-  const rl = ['right', 'left'];
-  const tb = ['top', 'bottom'];
-  const bt = ['bottom', 'top'];
   switch (side) {
     case 'top':
     case 'bottom':
-      if (rtl) return isStart ? rl : lr;
-      return isStart ? lr : rl;
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
     case 'left':
     case 'right':
-      return isStart ? tb : bt;
+      return isStart ? tbPlacement : btPlacement;
     default:
       return [];
   }
@@ -22742,6 +22745,8 @@ const hide$2 = function (options) {
   };
 };
 
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
 
@@ -22755,7 +22760,7 @@ async function convertValueToCoords(state, options) {
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
 
@@ -22955,7 +22960,7 @@ const limitShift$2 = function (options) {
       if (checkCrossAxis) {
         var _middlewareData$offse, _middlewareData$offse2;
         const len = mainAxis === 'y' ? 'width' : 'height';
-        const isOriginSide = ['top', 'left'].includes(getSide(placement));
+        const isOriginSide = originSides.has(getSide(placement));
         const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
         const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
         if (crossAxisCoord < limitMin) {
@@ -23100,6 +23105,7 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -23107,27 +23113,32 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return ['table', 'td', 'th'].includes(getNodeName(element));
+  return tableElements.has(getNodeName(element));
 }
+const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return [':popover-open', ':modal'].some(selector => {
+  return topLayerSelectors.some(selector => {
     try {
       return element.matches(selector);
-    } catch (e) {
+    } catch (_e) {
       return false;
     }
   });
 }
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -23145,8 +23156,9 @@ function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return ['html', 'body', '#document'].includes(getNodeName(node));
+  return lastTraversableNodeNames.has(getNodeName(node));
 }
 function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
@@ -23451,6 +23463,7 @@ function getViewportRect(element, strategy) {
   };
 }
 
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -23515,7 +23528,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -24882,16 +24895,15 @@ var Content2 = PopoverContent$1;
 
 function Popover(_a) {
     var props = __rest(_a, []);
-    return React.createElement(Root2, Object.assign({ "data-slot": "popover" }, props));
+    return jsx(Root2, Object.assign({ "data-slot": "popover" }, props));
 }
 function PopoverTrigger(_a) {
     var props = __rest(_a, []);
-    return React.createElement(Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
+    return jsx(Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
 }
 function PopoverContent(_a) {
     var { className, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (React.createElement(Portal, null,
-        React.createElement(Content2, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className) }, props))));
+    return (jsx(Portal, { children: jsx(Content2, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md", className) }, props)) }));
 }
 
 function n(){return (n=Object.assign?Object.assign.bind():function(a){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(a[t]=e[t]);}return a}).apply(this,arguments)}function e(a,n){if(null==a)return {};var e,t,r={},s=Object.keys(a);for(t=0;t<s.length;t++)n.indexOf(e=s[t])>=0||(r[e]=a[e]);return r}var t={ac:true,ad:true,ae:true,af:true,afar:true,ag:true,ai:true,al:true,am:true,ao:true,aq:true,ar:true,as:true,at:true,au:true,"au-aboriginal":true,"au-act":true,"au-nsw":true,"au-nt":true,"au-qld":true,"au-tas":true,"au-vic":true,"au-wa":true,aw:true,ax:true,az:true,ba:true,bb:true,bd:true,be:true,bf:true,bg:true,bh:true,bi:true,bj:true,bl:true,bm:true,bn:true,bo:true,"bq-bo":true,"bq-sa":true,"bq-se":true,bq:true,br:true,bs:true,bt:true,bv:true,bw:true,by:true,bz:true,"ca-bc":true,ca:true,cc:true,cd:true,cf:true,cg:true,"ch-gr":true,ch:true,ci:true,ck:true,cl:true,cm:true,"cn-xj":true,cn:true,co:true,cp:true,cq:true,cr:true,cu:true,cv:true,cw:true,cx:true,cy:true,cz:true,de:true,dg:true,dj:true,dk:true,dm:true,do:true,dz:true,ea:true,earth:true,east_african_federation:true,easter_island:true,"ec-w":true,ec:true,ee:true,eg:true,eh:true,er:true,"es-ar":true,"es-ce":true,"es-cn":true,"es-ct":true,"es-ga":true,"es-ib":true,"es-ml":true,"es-pv":true,"es-variant":true,es:true,"et-or":true,"et-ti":true,et:true,eu:true,european_union:true,ewe:true,fi:true,fj:true,fk:true,fm:true,fo:true,"fr-20r":true,"fr-bre":true,"fr-cp":true,fr:true,fx:true,ga:true,"gb-con":true,"gb-eng":true,"gb-nir":true,"gb-ork":true,"gb-sct":true,"gb-wls":true,gb:true,gd:true,"ge-ab":true,ge:true,gf:true,gg:true,gh:true,gi:true,gl:true,gm:true,gn:true,gp:true,gq:true,gr:true,gs:true,gt:true,gu:true,guarani:true,gw:true,gy:true,hausa:true,hk:true,hm:true,hmong:true,hn:true,hr:true,ht:true,hu:true,ic:true,id:true,"id-jb":true,"id-jt":true,ie:true,il:true,im:true,"in-as":true,"in-gj":true,"in-ka":true,"in-or":true,"in-tn":true,in:true,io:true,iq:true,ir:true,is:true,"it-23":true,"it-82":true,"it-88":true,it:true,je:true,jm:true,jo:true,jp:true,kanuri:true,ke:true,kg:true,kh:true,ki:true,kikuyu:true,km:true,kn:true,kongo:true,kp:true,kr:true,kurdistan:true,kw:true,ky:true,kz:true,la:true,lb:true,lc:true,li:true,lk:true,lr:true,ls:true,lt:true,lu:true,lv:true,ly:true,ma:true,malayali:true,manipur:true,maori:true,mc:true,md:true,me:true,mf:true,mg:true,mh:true,mizoram:true,mk:true,ml:true,mm:true,mn:true,mo:true,mp:true,mq:true,mr:true,ms:true,mt:true,mu:true,mv:true,mw:true,mx:true,my:true,mz:true,na:true,nato:true,nc:true,ne:true,nf:true,ng:true,ni:true,"nl-fr":true,nl:true,no:true,northern_cyprus:true,np:true,nr:true,nu:true,nz:true,occitania:true,olympics:true,om:true,otomi:true,pa:true,pe:true,pf:true,pg:true,ph:true,"pk-jk":true,"pk-sd":true,pk:true,pl:true,pm:true,pn:true,pr:true,ps:true,"pt-20":true,"pt-30":true,pt:true,pw:true,py:true,qa:true,quechua:true,re:true,ro:true,rs:true,ru:true,"ru-ba":true,"ru-ce":true,"ru-cu":true,"ru-da":true,"ru-ko":true,"ru-ta":true,"ru-ud":true,rw:true,sa:true,sami:true,sb:true,sc:true,sd:true,se:true,sg:true,"sh-ac":true,"sh-hl":true,"sh-ta":true,sh:true,si:true,sj:true,sk:true,sl:true,sm:true,sn:true,so:true,somaliland:true,south_ossetia:true,soviet_union:true,sr:true,ss:true,st:true,su:true,sv:true,sx:true,sy:true,sz:true,ta:true,tc:true,td:true,tf:true,tg:true,th:true,tibet:true,tj:true,tk:true,tl:true,tm:true,tn:true,to:true,torres_strait_islands:true,tr:true,transnistria:true,tt:true,tv:true,tw:true,tz:true,ua:true,ug:true,uk:true,um:true,un:true,united_nations:true,"us-hi":true,us:true,uy:true,uz:true,va:true,vc:true,ve:true,vg:true,vi:true,vn:true,vu:true,wf:true,wiphala:true,ws:true,xk:true,xx:true,ye:true,yorubaland:true,yt:true,za:true,zm:true,zw:true},s=["countryCode","cdnUrl"],c=function(a,e,t,r){return void 0===r&&(r=""),n({},t,{title:t.title||a,height:t.height||100,src:""+(e||"https://react-circle-flags.pages.dev/")+r+a+".svg"})},u=function(r){var i=r.countryCode,u=r.cdnUrl,o=e(r,s);return React__default.createElement("img",n({"data-testid":"circle-country-flag"},c(function(a){return t[a]?a:"xx"}(i).toLowerCase(),u,o)))};
@@ -33427,30 +33439,12 @@ const CountryDropdownComponent = (_a, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(country);
         setOpen(false);
     }, [onChange]);
-    const triggerClasses = cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", slim === true && "w-20");
-    return (React__default.createElement(Popover, { open: open, onOpenChange: setOpen },
-        React__default.createElement(PopoverTrigger, Object.assign({ ref: ref, className: triggerClasses, disabled: disabled }, props),
-            selectedCountry ? (React__default.createElement("div", { className: "flex items-center flex-grow w-0 gap-2 overflow-hidden" },
-                React__default.createElement("div", { className: "inline-flex items-center justify-center w-5 h-5 shrink-0 overflow-hidden rounded-full" },
-                    React__default.createElement(u, { countryCode: selectedCountry.alpha2.toLowerCase(), height: 20 })),
-                slim === false && (React__default.createElement("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap" }, selectedCountry.name)))) : (React__default.createElement("span", null, slim === false ? (placeholder || setSelectedCountry.name) : (React__default.createElement(Globe, { size: 20 })))),
-            React__default.createElement(ChevronDown, { size: 16 })),
-        React__default.createElement(PopoverContent, { collisionPadding: 10, side: "bottom", className: "min-w-[--radix-popper-anchor-width] p-0" },
-            React__default.createElement(Command, { className: "w-full max-h-[200px] sm:max-h-[270px]" },
-                React__default.createElement(CommandList, null,
-                    React__default.createElement("div", { className: "sticky top-0 z-10 bg-popover" },
-                        React__default.createElement(CommandInput, { placeholder: "Search country..." })),
-                    React__default.createElement(CommandEmpty, null, "No country found."),
-                    React__default.createElement(CommandGroup, null, options
-                        .filter((x) => x.name)
-                        .map((option, key) => (React__default.createElement(CommandItem, { className: "flex items-center w-full gap-2", key: key, onSelect: () => handleSelect(option) },
-                        React__default.createElement("div", { className: "flex flex-grow w-0 space-x-2 overflow-hidden" },
-                            React__default.createElement("div", { className: "inline-flex items-center justify-center w-5 h-5 shrink-0 overflow-hidden rounded-full" },
-                                React__default.createElement(u, { countryCode: option.alpha2.toLowerCase(), height: 20 })),
-                            React__default.createElement("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap" }, option.name)),
-                        React__default.createElement(Check, { className: cn("ml-auto h-4 w-4 shrink-0", option.name === (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.name)
-                                ? "opacity-100"
-                                : "opacity-0") }))))))))));
+    const triggerClasses = cn("border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", slim === true && "w-20");
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsxs(PopoverTrigger, Object.assign({ ref: ref, className: triggerClasses, disabled: disabled }, props, { children: [selectedCountry ? (jsxs("div", { className: "flex w-0 flex-grow items-center gap-2 overflow-hidden", children: [jsx("div", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full", children: jsx(u, { countryCode: selectedCountry.alpha2.toLowerCase(), height: 20 }) }), slim === false && (jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: selectedCountry.name }))] })) : (jsx("span", { children: slim === false ? (placeholder || setSelectedCountry.name) : (jsx(Globe, { size: 20 })) })), jsx(ChevronDown, { size: 16 })] })), jsx(PopoverContent, { collisionPadding: 10, side: "bottom", className: "min-w-[--radix-popper-anchor-width] p-0", children: jsx(Command, { className: "max-h-[200px] w-full sm:max-h-[270px]", children: jsxs(CommandList, { children: [jsx("div", { className: "bg-popover sticky top-0 z-10", children: jsx(CommandInput, { placeholder: "Search country..." }) }), jsx(CommandEmpty, { children: "No country found." }), jsx(CommandGroup, { children: options
+                                    .filter((x) => x.name)
+                                    .map((option, key) => (jsxs(CommandItem, { className: "flex w-full items-center gap-2", onSelect: () => handleSelect(option), children: [jsxs("div", { className: "flex w-0 flex-grow space-x-2 overflow-hidden", children: [jsx("div", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full", children: jsx(u, { countryCode: option.alpha2.toLowerCase(), height: 20 }) }), jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: option.name })] }), jsx(Check, { className: cn("ml-auto h-4 w-4 shrink-0", option.name === (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.name)
+                                                ? "opacity-100"
+                                                : "opacity-0") })] }, key))) })] }) }) })] }));
 };
 CountryDropdownComponent.displayName = "CountryDropdownComponent";
 const CountryDropdown = forwardRef(CountryDropdownComponent);
@@ -33495,35 +33489,12 @@ function AddressInput() {
         else {
             form.clearErrors("address");
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
-    return (React__default.createElement("div", { className: "w-full md:col-span-2" },
-        React__default.createElement(Dialog, { open: open, onOpenChange: setOpen },
-            React__default.createElement(DialogTrigger, { asChild: true },
-                React__default.createElement("div", { className: "relative grid gap-2" },
-                    React__default.createElement(FormField, { control: form.control, name: "address", render: () => (React__default.createElement(FormItem, null,
-                            React__default.createElement(FormLabel, null, t("CheckoutEmbed.CustomerForm.address.address")),
-                            React__default.createElement(FormControl, null,
-                                React__default.createElement(Input, { placeholder: t("CheckoutEmbed.CustomerForm.address.addressPlaceholder"), value: (currentValue === null || currentValue === void 0 ? void 0 : currentValue.line1) ? formatAddress(currentValue) : "", readOnly: true, className: "cursor-pointer" })),
-                            React__default.createElement(FormMessage, null))) }))),
-            React__default.createElement(DialogContent, { className: "sm:max-w-[500px] transform-none!" },
-                React__default.createElement(DialogHeader, null,
-                    React__default.createElement(DialogTitle, null, t("CheckoutEmbed.CustomerForm.address.title")),
-                    React__default.createElement(DialogDescription, null, t("CheckoutEmbed.CustomerForm.address.description"))),
-                React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
-                    React__default.createElement(InputGroup, { className: "col-span-2", name: "address.line1", label: t("CheckoutEmbed.CustomerForm.address.line1"), placeholder: t("CheckoutEmbed.CustomerForm.address.line1Placeholder"), autoComplete: "address-line1" }),
-                    React__default.createElement(InputGroup, { className: "col-span-2", name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2"), placeholder: t("CheckoutEmbed.CustomerForm.address.line2Placeholder"), autoComplete: "address-line2" }),
-                    React__default.createElement(InputGroup, { name: "address.city", label: t("CheckoutEmbed.CustomerForm.address.city"), placeholder: t("CheckoutEmbed.CustomerForm.address.cityPlaceholder"), autoComplete: "address-level2" }),
-                    React__default.createElement(InputGroup, { name: "address.state", label: t("CheckoutEmbed.CustomerForm.address.state"), placeholder: t("CheckoutEmbed.CustomerForm.address.statePlaceholder"), autoComplete: "address-level1" }),
-                    React__default.createElement(InputGroup, { name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), placeholder: t("CheckoutEmbed.CustomerForm.address.zipCodePlaceholder"), autoComplete: "postal-code" }),
-                    React__default.createElement(FormField, { control: form.control, name: "address.country", render: ({ field }) => (React__default.createElement(FormItem, null,
-                            React__default.createElement(FormLabel, null, t("CheckoutEmbed.CustomerForm.address.country")),
-                            React__default.createElement(CountryDropdown, { placeholder: t("CheckoutEmbed.CustomerForm.address.countryPlaceholder"), defaultValue: field.value, onChange: (country) => {
-                                    field.onChange(country.name);
-                                    form.setValue("address.countryCode", country.alpha2);
-                                } }),
-                            React__default.createElement(FormMessage, null))) })),
-                React__default.createElement(DialogFooter, null,
-                    React__default.createElement(Button, { onClick: handleSave, type: "button", disabled: isValidating }, t("CheckoutEmbed.CustomerForm.address.button")))))));
+    return (jsx("div", { className: "w-full md:col-span-2", children: jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [jsx(DialogTrigger, { asChild: true, children: jsx("div", { className: "relative grid gap-2", children: jsx(FormField, { control: form.control, name: "address", render: () => (jsxs(FormItem, { children: [jsx(FormLabel, { children: t("CheckoutEmbed.CustomerForm.address.address") }), jsx(FormControl, { children: jsx(Input, { placeholder: t("CheckoutEmbed.CustomerForm.address.addressPlaceholder"), value: (currentValue === null || currentValue === void 0 ? void 0 : currentValue.line1) ? formatAddress(currentValue) : "", readOnly: true, className: "cursor-pointer" }) }), jsx(FormMessage, {})] })) }) }) }), jsxs(DialogContent, { className: "transform-none! sm:max-w-[500px]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: t("CheckoutEmbed.CustomerForm.address.title") }), jsx(DialogDescription, { children: t("CheckoutEmbed.CustomerForm.address.description") })] }), jsxs("div", { className: "grid grid-cols-2 gap-4", children: [jsx(InputGroup, { className: "col-span-2", name: "address.line1", label: t("CheckoutEmbed.CustomerForm.address.line1"), placeholder: t("CheckoutEmbed.CustomerForm.address.line1Placeholder"), autoComplete: "address-line1" }), jsx(InputGroup, { className: "col-span-2", name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2"), placeholder: t("CheckoutEmbed.CustomerForm.address.line2Placeholder"), autoComplete: "address-line2" }), jsx(InputGroup, { name: "address.city", label: t("CheckoutEmbed.CustomerForm.address.city"), placeholder: t("CheckoutEmbed.CustomerForm.address.cityPlaceholder"), autoComplete: "address-level2" }), jsx(InputGroup, { name: "address.state", label: t("CheckoutEmbed.CustomerForm.address.state"), placeholder: t("CheckoutEmbed.CustomerForm.address.statePlaceholder"), autoComplete: "address-level1" }), jsx(InputGroup, { name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), placeholder: t("CheckoutEmbed.CustomerForm.address.zipCodePlaceholder"), autoComplete: "postal-code" }), jsx(FormField, { control: form.control, name: "address.country", render: ({ field }) => (jsxs(FormItem, { children: [jsx(FormLabel, { children: t("CheckoutEmbed.CustomerForm.address.country") }), jsx(CountryDropdown, { placeholder: t("CheckoutEmbed.CustomerForm.address.countryPlaceholder"), defaultValue: field.value, onChange: (country) => {
+                                                    field.onChange(country.name);
+                                                    form.setValue("address.countryCode", country.alpha2);
+                                                } }), jsx(FormMessage, {})] })) })] }), jsx(DialogFooter, { children: jsx(Button, { onClick: handleSave, type: "button", disabled: isValidating, children: t("CheckoutEmbed.CustomerForm.address.button") }) })] })] }) }));
 }
 
 function CustomerForm({ initialData, onSubmit, }) {
@@ -33546,17 +33517,7 @@ function CustomerForm({ initialData, onSubmit, }) {
         },
         mode: "onBlur",
     });
-    return (React__default.createElement(Form, Object.assign({}, form),
-        React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "md:grid-cols-2 gap-6 grid" },
-            React__default.createElement("div", { className: "md:col-span-2" },
-                React__default.createElement("h2", null, t("CheckoutEmbed.CustomerForm.title"))),
-            React__default.createElement(InputGroup, { className: "md:col-span-2", name: "email", label: t("CheckoutEmbed.CustomerForm.email"), placeholder: t("CheckoutEmbed.CustomerForm.emailPlaceholder"), type: "email", autoComplete: "email" }),
-            React__default.createElement(InputGroup, { name: "firstName", label: t("CheckoutEmbed.CustomerForm.firstName"), placeholder: t("CheckoutEmbed.CustomerForm.firstNamePlaceholder"), autoComplete: "given-name" }),
-            React__default.createElement(InputGroup, { name: "lastName", label: t("CheckoutEmbed.CustomerForm.lastName"), placeholder: t("CheckoutEmbed.CustomerForm.lastNamePlaceholder"), autoComplete: "family-name" }),
-            React__default.createElement(AddressInput, null),
-            React__default.createElement(InputGroup, { name: "phone", label: t("CheckoutEmbed.CustomerForm.phone"), placeholder: t("CheckoutEmbed.CustomerForm.phonePlaceholder"), type: "tel", autoComplete: "tel" }),
-            React__default.createElement("div", { className: "flex md:col-span-2 justify-end pt-2" },
-                React__default.createElement(SubmitButton, { isValid: form.formState.isValid, isSubmitting: form.formState.isSubmitting }, t("CheckoutEmbed.CustomerForm.button"))))));
+    return (jsx(Form, Object.assign({}, form, { children: jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "grid gap-6 md:grid-cols-2", children: [jsx("div", { className: "md:col-span-2", children: jsx("h2", { children: t("CheckoutEmbed.CustomerForm.title") }) }), jsx(InputGroup, { className: "md:col-span-2", name: "email", label: t("CheckoutEmbed.CustomerForm.email"), placeholder: t("CheckoutEmbed.CustomerForm.emailPlaceholder"), type: "email", autoComplete: "email" }), jsx(InputGroup, { name: "firstName", label: t("CheckoutEmbed.CustomerForm.firstName"), placeholder: t("CheckoutEmbed.CustomerForm.firstNamePlaceholder"), autoComplete: "given-name" }), jsx(InputGroup, { name: "lastName", label: t("CheckoutEmbed.CustomerForm.lastName"), placeholder: t("CheckoutEmbed.CustomerForm.lastNamePlaceholder"), autoComplete: "family-name" }), jsx(AddressInput, {}), jsx(InputGroup, { name: "phone", label: t("CheckoutEmbed.CustomerForm.phone"), placeholder: t("CheckoutEmbed.CustomerForm.phonePlaceholder"), type: "tel", autoComplete: "tel" }), jsx("div", { className: "flex justify-end pt-2 md:col-span-2", children: jsx(SubmitButton, { isValid: form.formState.isValid, isSubmitting: form.formState.isSubmitting, children: t("CheckoutEmbed.CustomerForm.button") }) })] }) })));
 }
 
 var reactStripe_umd$1 = {exports: {}};
@@ -35090,22 +35051,15 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const wrapper = document.getElementById("bs-wrapper");
     if (!wrapper)
         return null;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { ref: containerRef, className: "w-full h-[450px]" }),
-        ReactDOM__default.createPortal(React__default.createElement("div", { style: {
-                display: "block",
-                zIndex: 20,
-                position: "absolute",
-                top: rect === null || rect === void 0 ? void 0 : rect.top,
-                left: rect === null || rect === void 0 ? void 0 : rect.left,
-                width: rect === null || rect === void 0 ? void 0 : rect.width,
-                height: rect === null || rect === void 0 ? void 0 : rect.height,
-            } },
-            React__default.createElement("form", { onSubmit: handleSubmit },
-                React__default.createElement("div", null,
-                    React__default.createElement(reactStripe_umdExports.PaymentElement, null),
-                    React__default.createElement("p", { style: { color: "#fb2c36" } }, errorMessage)),
-                children)), wrapper)));
+    return (jsxs(Fragment$1, { children: [jsx("div", { ref: containerRef, className: "h-[450px] w-full" }), ReactDOM__default.createPortal(jsx("div", { style: {
+                    display: "block",
+                    zIndex: 20,
+                    position: "absolute",
+                    top: rect === null || rect === void 0 ? void 0 : rect.top,
+                    left: rect === null || rect === void 0 ? void 0 : rect.left,
+                    width: rect === null || rect === void 0 ? void 0 : rect.width,
+                    height: rect === null || rect === void 0 ? void 0 : rect.height,
+                }, children: jsxs("form", { onSubmit: handleSubmit, children: [jsxs("div", { children: [jsx(reactStripe_umdExports.PaymentElement, {}), jsx("p", { style: { color: "#fb2c36" }, children: errorMessage })] }), children] }) }), wrapper)] }));
 };
 var CheckoutForm$2 = memo(CheckoutForm$1);
 
@@ -35117,56 +35071,24 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
         clientSecret: paymentSecret,
         fonts: fonts,
     };
-    return (React__default.createElement(reactStripe_umdExports.Elements, { stripe: stripePromise, options: options },
-        React__default.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children, setSubmitting: setSubmitting })));
+    return (jsx(reactStripe_umdExports.Elements, { stripe: stripePromise, options: options, children: jsx(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, setSubmitting: setSubmitting, children: children }) }));
 }
 var PaymentElement$1 = memo(PaymentElement);
 
 function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const { t } = useTranslation();
-    return (React__default.createElement("div", { className: "space-y-6" },
-        React__default.createElement("div", null,
-            React__default.createElement("h2", { className: "mb-2" }, t("CheckoutEmbed.Payment.title")),
-            React__default.createElement("p", { className: "text-sm text-muted-foreground" }, t("CheckoutEmbed.Payment.description"))),
-        React__default.createElement("div", { className: "space-y-2" },
-            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
-                    " ",
-                    React__default.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
-            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
-                    " ",
-                    React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
-            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipping")),
-                    " ",
-                    React__default.createElement("span", { className: "text-muted-foreground" },
-                        shippingName,
-                        " \u00B7 ",
-                        shippingPrice)),
-                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { key: paymentComponentKey, fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
-            React__default.createElement("div", { style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    paddingTop: "2rem",
-                } },
-                React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
-                    React__default.createElement(ChevronLeft, null),
-                    t("CheckoutEmbed.Payment.back")),
-                React__default.createElement(SubmitButton, { isValid: true, isSubmitting: isSubmitting }, t("CheckoutEmbed.Payment.button"))))))));
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { children: [jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxs("span", { className: "text-muted-foreground", children: [shippingName, " \u00B7 ", shippingPrice] })] }), jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsx("div", { className: "mt-8", children: paymentSecret && (jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxs("div", { style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            paddingTop: "2rem",
+                        }, children: [jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, children: [jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsx(SubmitButton, { isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }, paymentComponentKey)) })] }));
 }
 
 function Skeleton(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props)));
+    return (jsx("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props)));
 }
 
 function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, countryCode, apiKey, }) {
@@ -35205,15 +35127,14 @@ function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, cou
             console.error("Packeta widget not found", window);
         }
     };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { onClick: () => handleClick() }, children)));
+    return (jsx(Fragment$1, { children: jsx("div", { onClick: () => handleClick(), children: children }) }));
 }
 
 function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale, countryCode, }) {
     if (rate.provider === "zasilkovna") {
-        return (React__default.createElement(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret }, children));
+        return (jsx(ZasilkovnaShippingOption, { onPickupPointSelected: onPickupPointSelected, locale: locale, countryCode: countryCode, apiKey: rate.clientSecret, children: children }));
     }
-    return React__default.createElement(React__default.Fragment, null, children);
+    return jsx(Fragment$1, { children: children });
 }
 
 function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, }) {
@@ -35230,77 +35151,38 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
         },
     });
     const currentRateId = form.watch("rateId");
-    return (React__default.createElement("div", { className: "space-y-6" },
-        React__default.createElement("h2", null, t("CheckoutEmbed.Shipping.title")),
-        React__default.createElement("div", { className: "space-y-2 pb-2" },
-            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
-                    " ",
-                    React__default.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
-            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React__default.createElement("p", null,
-                    React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.address")),
-                    " ",
-                    React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement(Form, Object.assign({}, form),
-            React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
-                shippingRates.length === 0 &&
-                    Array.from({ length: 3 }).map((_, index) => (React__default.createElement(ShippingRateLoading, { key: index }))),
-                shippingRates.map((rate) => {
-                    const pickupPointDisplayName = form.watch("pickupPointDisplayName");
-                    const rateId = rate.provider + rate.name;
-                    const intPrice = Math.ceil(Number(rate.price));
-                    const displayPrice = storeHelpers.formatPrice(intPrice, currency, exchangeRate);
-                    const description = rate.provider === "zasilkovna"
-                        ? t("CheckoutEmbed.Shipping.description.zasilkovna")
-                        : t("CheckoutEmbed.Shipping.description.other");
-                    return (React__default.createElement(ShippingOptionWrapper, { rate: rate, key: rateId, onPickupPointSelected: (pickupPointId, pickupPointName) => {
-                            const newFormData = {
-                                rateId,
-                                provider: rate.provider,
-                                price: intPrice,
-                                name: rate.name,
-                                pickupPointId: rate.provider === "zasilkovna" ? pickupPointId : "",
-                                pickupPointDisplayName: rate.provider === "zasilkovna" ? pickupPointName : "",
-                            };
-                            form.setValue("rateId", newFormData.rateId);
-                            form.setValue("provider", newFormData.provider);
-                            form.setValue("name", newFormData.name);
-                            form.setValue("price", newFormData.price);
-                            form.setValue("pickupPointId", newFormData.pickupPointId);
-                            form.setValue("pickupPointDisplayName", newFormData.pickupPointDisplayName);
-                            setFormData(Object.assign(Object.assign({}, formData), { shipping: Object.assign({}, newFormData) }));
-                        }, locale: locale, countryCode: countryCode },
-                        React__default.createElement("div", { className: clsx("p-4 cursor-pointer rounded-md border bg-background", {
-                                "bg-muted border-primary": currentRateId === rateId,
-                            }) },
-                            React__default.createElement("div", { className: "flex items-center justify-between w-full" },
-                                React__default.createElement("p", null, rate.name),
-                                React__default.createElement("p", null, displayPrice)),
-                            React__default.createElement("p", { className: "text-sm text-muted-foreground" }, description),
-                            pickupPointDisplayName && (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("hr", { className: "my-2" }),
-                                React__default.createElement("p", { className: "text-sm text-muted-foreground" },
-                                    t("CheckoutEmbed.Shipping.description.shippedTo"),
-                                    " ",
-                                    React__default.createElement("span", { className: "text-foreground" }, pickupPointDisplayName)))))));
-                }),
-                React__default.createElement(FormMessage, null, (_a = form.formState.errors.rateId) === null || _a === void 0 ? void 0 : _a.message),
-                React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
-                    React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
-                        React__default.createElement(ChevronLeft, null),
-                        t("CheckoutEmbed.Shipping.back")),
-                    React__default.createElement(SubmitButton, { isSubmitting: form.formState.isSubmitting, isValid: !!currentRateId }, t("CheckoutEmbed.Shipping.button")))))));
+    return (jsxs("div", { className: "space-y-6", children: [jsx("h2", { children: t("CheckoutEmbed.Shipping.title") }), jsxs("div", { className: "space-y-2 pb-2", children: [jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxs("p", { children: [jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsx(Form, Object.assign({}, form, { children: jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [shippingRates.length === 0 &&
+                            Array.from({ length: 3 }).map((_, index) => (jsx(ShippingRateLoading, {}, index))), shippingRates.map((rate) => {
+                            const pickupPointDisplayName = form.watch("pickupPointDisplayName");
+                            const rateId = rate.provider + rate.name;
+                            const intPrice = Math.ceil(Number(rate.price));
+                            const displayPrice = storeHelpers.formatPrice(intPrice, currency, exchangeRate);
+                            const description = rate.provider === "zasilkovna"
+                                ? t("CheckoutEmbed.Shipping.description.zasilkovna")
+                                : t("CheckoutEmbed.Shipping.description.other");
+                            return (jsx(ShippingOptionWrapper, { rate: rate, onPickupPointSelected: (pickupPointId, pickupPointName) => {
+                                    const newFormData = {
+                                        rateId,
+                                        provider: rate.provider,
+                                        price: intPrice,
+                                        name: rate.name,
+                                        pickupPointId: rate.provider === "zasilkovna" ? pickupPointId : "",
+                                        pickupPointDisplayName: rate.provider === "zasilkovna" ? pickupPointName : "",
+                                    };
+                                    form.setValue("rateId", newFormData.rateId);
+                                    form.setValue("provider", newFormData.provider);
+                                    form.setValue("name", newFormData.name);
+                                    form.setValue("price", newFormData.price);
+                                    form.setValue("pickupPointId", newFormData.pickupPointId);
+                                    form.setValue("pickupPointDisplayName", newFormData.pickupPointDisplayName);
+                                    setFormData(Object.assign(Object.assign({}, formData), { shipping: Object.assign({}, newFormData) }));
+                                }, locale: locale, countryCode: countryCode, children: jsxs("div", { className: clsx("bg-background cursor-pointer rounded-md border p-4", {
+                                        "bg-muted border-primary": currentRateId === rateId,
+                                    }), children: [jsxs("div", { className: "flex w-full items-center justify-between", children: [jsx("p", { children: rate.name }), jsx("p", { children: displayPrice })] }), jsx("p", { className: "text-muted-foreground text-sm", children: description }), pickupPointDisplayName && (jsxs(Fragment$1, { children: [jsx("hr", { className: "my-2" }), jsxs("p", { className: "text-muted-foreground text-sm", children: [t("CheckoutEmbed.Shipping.description.shippedTo"), " ", jsx("span", { className: "text-foreground", children: pickupPointDisplayName })] })] }))] }) }, rateId));
+                        }), jsx(FormMessage, { children: (_a = form.formState.errors.rateId) === null || _a === void 0 ? void 0 : _a.message }), jsxs("div", { className: "flex items-center justify-between pt-4", children: [jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, children: [jsx(ChevronLeft, {}), t("CheckoutEmbed.Shipping.back")] }), jsx(SubmitButton, { isSubmitting: form.formState.isSubmitting, isValid: !!currentRateId, children: t("CheckoutEmbed.Shipping.button") })] })] }) }))] }));
 }
 function ShippingRateLoading() {
-    return (React__default.createElement("div", { className: clsx("p-4 cursor-pointer grid gap-[10px] rounded-md border bg-background") },
-        React__default.createElement("div", { className: "flex items-center justify-between w-full" },
-            React__default.createElement(Skeleton, { className: "w-12 h-5" }),
-            React__default.createElement(Skeleton, { className: "w-16 h-5" })),
-        React__default.createElement(Skeleton, { className: "w-40 h-3.5" })));
+    return (jsxs("div", { className: clsx("bg-background grid cursor-pointer gap-[10px] rounded-md border p-4"), children: [jsxs("div", { className: "flex w-full items-center justify-between", children: [jsx(Skeleton, { className: "h-5 w-12" }), jsx(Skeleton, { className: "h-5 w-16" })] }), jsx(Skeleton, { className: "h-3.5 w-40" })] }));
 }
 
 const useFormStore = create()(persist((set) => ({
@@ -35334,9 +35216,11 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             if (!isCustomerValid)
                 setStep("customer");
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [step, formData]);
     useEffect(() => {
         validateStep();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [step]);
     useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21;
@@ -35396,6 +35280,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                     },
                 } }));
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [customer]);
     useEffect(() => {
         if (step !== "shipping")
@@ -35413,6 +35298,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             }
         });
         getShippingRates();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [step, clientSecret, checkoutId]);
     // Handle address form submission
     const handleCustomerSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
@@ -35474,33 +35360,22 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (React__default.createElement(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
+            return (jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
-            return (React__default.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }));
+            return (jsx(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }));
         }
-        return (React__default.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit }));
+        return (jsx(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit }));
     };
-    return React__default.createElement("div", { className: "relative min-h-full w-full h-max" }, renderStep());
+    return jsx("div", { className: "relative h-max min-h-full w-full", children: renderStep() });
 }
 
 function CheckoutFormLoading() {
     const { t } = useTranslation();
-    return (React__default.createElement("div", { className: "md:grid-cols-2 gap-6 grid" },
-        React__default.createElement("div", { className: "md:col-span-2" },
-            React__default.createElement("h2", null, t("CheckoutEmbed.CustomerForm.title"))),
-        React__default.createElement(InputGroupLoading, { className: "md:col-span-2" }),
-        React__default.createElement(InputGroupLoading, null),
-        React__default.createElement(InputGroupLoading, null),
-        React__default.createElement(InputGroupLoading, { className: "md:col-span-2" }),
-        React__default.createElement(InputGroupLoading, null),
-        React__default.createElement("div", { className: "flex md:col-span-2 justify-end pt-2" },
-            React__default.createElement(Skeleton, { className: "w-32 h-10" }))));
+    return (jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [jsx("div", { className: "md:col-span-2", children: jsx("h2", { children: t("CheckoutEmbed.CustomerForm.title") }) }), jsx(InputGroupLoading, { className: "md:col-span-2" }), jsx(InputGroupLoading, {}), jsx(InputGroupLoading, {}), jsx(InputGroupLoading, { className: "md:col-span-2" }), jsx(InputGroupLoading, {}), jsx("div", { className: "flex justify-end pt-2 md:col-span-2", children: jsx(Skeleton, { className: "h-10 w-32" }) })] }));
 }
 function InputGroupLoading({ className }) {
-    return (React__default.createElement("div", { className: clsx("flex flex-col gap-2", className) },
-        React__default.createElement(Skeleton, { className: "w-10 h-3" }),
-        React__default.createElement(Skeleton, { className: "w-full h-10" })));
+    return (jsxs("div", { className: clsx("flex flex-col gap-2", className), children: [jsx(Skeleton, { className: "h-3 w-10" }), jsx(Skeleton, { className: "h-10 w-full" })] }));
 }
 
 function DiscountCode({ applyDiscountCode, }) {
@@ -35525,15 +35400,10 @@ function DiscountCode({ applyDiscountCode, }) {
             setIsLoading(false);
         }
     });
-    return (React__default.createElement("form", { className: "pb-1", onSubmit: handleSubmit },
-        React__default.createElement(Label, { className: "text-sm font-medium mb-2" }, t("CheckoutEmbed.Summary.discountCodeLabel")),
-        React__default.createElement("div", { className: "flex items-center gap-2" },
-            React__default.createElement(Input, { "aria-invalid": !!error, value: discountCode, onChange: (e) => {
-                    setError("");
-                    setDiscountCode(e.target.value);
-                }, name: "discountCode", placeholder: t("CheckoutEmbed.Summary.discountCodePlaceholder") }),
-            React__default.createElement(SubmitButton, { isSubmitting: isLoading, isValid: isValid, type: "submit" }, t("CheckoutEmbed.Summary.discountCodeApply"))),
-        error && React__default.createElement("p", { className: "text-red-500 mt-2 text-sm" }, error)));
+    return (jsxs("form", { className: "pb-1", onSubmit: handleSubmit, children: [jsx(Label, { className: "mb-2 text-sm font-medium", children: t("CheckoutEmbed.Summary.discountCodeLabel") }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { "aria-invalid": !!error, value: discountCode, onChange: (e) => {
+                            setError("");
+                            setDiscountCode(e.target.value);
+                        }, name: "discountCode", placeholder: t("CheckoutEmbed.Summary.discountCodePlaceholder") }), jsx(SubmitButton, { isSubmitting: isLoading, isValid: isValid, type: "submit", children: t("CheckoutEmbed.Summary.discountCodeApply") })] }), error && jsx("p", { className: "mt-2 text-sm text-red-500", children: error })] }));
 }
 
 function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, removeDiscount, }) {
@@ -35562,105 +35432,65 @@ function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency,
         return intersection.filter((combination) => currentCombinations.some((currentCombination) => JSON.stringify(currentCombination) === JSON.stringify(combination)));
     }, []);
     const canCombine = appliedDiscounts.length === 0 || sharedCombinations.length > 0;
-    return (React__default.createElement("div", { className: "grid gap-5" },
-        React__default.createElement("div", { className: "flex justify-between items-center" },
-            React__default.createElement("div", { onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 max-md:cursor-pointer" },
-                React__default.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
-                React__default.createElement(ChevronDown, { className: clsx("size-5 md:hidden transition-transform", {
-                        "rotate-180": isOpen,
-                    }) })),
-            React__default.createElement("p", { className: "font-bold text-lg tracking-tight md:hidden" }, storeHelpers.formatPrice(total, currency, exchangeRate)),
-            React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel }, t("CheckoutEmbed.Summary.edit"))),
-        React__default.createElement("hr", null),
-        React__default.createElement("div", { className: clsx("gap-2 order-4 md:order-none", {
-                "hidden md:grid": !isOpen,
-                grid: isOpen,
-            }) },
-            React__default.createElement("div", { className: "flex justify-between" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.subtotal")),
-                React__default.createElement("p", null, storeHelpers.formatPrice(subtotal, currency, exchangeRate))),
-            React__default.createElement("div", { className: "flex justify-between" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
-                React__default.createElement("p", null, isShippingFree
-                    ? t("CheckoutEmbed.Summary.free")
-                    : !!shippingPrice
-                        ? storeHelpers.formatPrice(shippingPrice, currency, exchangeRate)
-                        : t("CheckoutEmbed.Summary.calculatedAtNextStep"))),
-            !!tax && (React__default.createElement("div", { className: "flex justify-between" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.tax")),
-                React__default.createElement("p", null, storeHelpers.formatPrice(tax, currency, exchangeRate)))),
-            filteredDiscounts.map(({ discount, amount, id }) => {
-                var _a;
-                return (React__default.createElement("div", { key: discount.id, className: "flex justify-between text-muted-foreground" },
-                    React__default.createElement(DiscountItem, { id: id, removeDiscount: removeDiscount, label: (_a = ((discount === null || discount === void 0 ? void 0 : discount.code) || (discount === null || discount === void 0 ? void 0 : discount.title))) !== null && _a !== void 0 ? _a : "", canRemove: discount.method === "CODE" }),
-                    React__default.createElement("p", null,
-                        "- ",
-                        storeHelpers.formatPrice(amount, currency, exchangeRate))));
-            }),
-            React__default.createElement("div", { className: "flex font-bold justify-between items-center" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.total")),
-                React__default.createElement("p", null, storeHelpers.formatPrice(totalWithDiscounts, currency, exchangeRate)))),
-        canCombine && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("hr", { className: clsx("order-7 md:order-none", {
+    return (jsxs("div", { className: "grid gap-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-2 max-md:cursor-pointer", children: [jsx("h2", { children: t("CheckoutEmbed.Summary.title") }), jsx(ChevronDown, { className: clsx("size-5 transition-transform md:hidden", {
+                                    "rotate-180": isOpen,
+                                }) })] }), jsx("p", { className: "text-lg font-bold tracking-tight md:hidden", children: storeHelpers.formatPrice(total, currency, exchangeRate) }), jsx(Button, { className: "max-sm:hidden", variant: "link", size: "link", onClick: onCancel, children: t("CheckoutEmbed.Summary.edit") })] }), jsx("hr", {}), jsxs("div", { className: clsx("order-4 gap-2 md:order-none", {
+                    "hidden md:grid": !isOpen,
+                    grid: isOpen,
+                }), children: [jsxs("div", { className: "flex justify-between", children: [jsx("p", { children: t("CheckoutEmbed.Summary.subtotal") }), jsx("p", { children: storeHelpers.formatPrice(subtotal, currency, exchangeRate) })] }), jsxs("div", { className: "flex justify-between", children: [jsx("p", { children: t("CheckoutEmbed.Summary.shipping") }), jsx("p", { children: isShippingFree
+                                    ? t("CheckoutEmbed.Summary.free")
+                                    : shippingPrice
+                                        ? storeHelpers.formatPrice(shippingPrice, currency, exchangeRate)
+                                        : t("CheckoutEmbed.Summary.calculatedAtNextStep") })] }), !!tax && (jsxs("div", { className: "flex justify-between", children: [jsx("p", { children: t("CheckoutEmbed.Summary.tax") }), jsx("p", { children: storeHelpers.formatPrice(tax, currency, exchangeRate) })] })), filteredDiscounts.map(({ discount, amount, id }) => {
+                        var _a;
+                        return (jsxs("div", { className: "text-muted-foreground flex justify-between", children: [jsx(DiscountItem, { id: id, removeDiscount: removeDiscount, label: (_a = ((discount === null || discount === void 0 ? void 0 : discount.code) || (discount === null || discount === void 0 ? void 0 : discount.title))) !== null && _a !== void 0 ? _a : "", canRemove: discount.method === "CODE" }), jsxs("p", { children: ["- ", storeHelpers.formatPrice(amount, currency, exchangeRate)] })] }, discount.id));
+                    }), jsxs("div", { className: "flex items-center justify-between font-bold", children: [jsx("p", { children: t("CheckoutEmbed.Summary.total") }), jsx("p", { children: storeHelpers.formatPrice(totalWithDiscounts, currency, exchangeRate) })] })] }), canCombine && (jsxs(Fragment$1, { children: [jsx("hr", { className: clsx("order-7 md:order-none", {
+                            "hidden md:block": !isOpen,
+                            block: isOpen,
+                        }) }), jsx("div", { className: clsx("order-6 gap-0 md:order-none", {
+                            "hidden md:grid": !isOpen,
+                            grid: isOpen,
+                        }), children: jsx(DiscountCode, { applyDiscountCode: applyDiscountCode }) })] })), jsx("hr", { className: clsx("order-5 md:order-none", {
                     "hidden md:block": !isOpen,
                     block: isOpen,
-                }) }),
-            React__default.createElement("div", { className: clsx("gap-0 order-6 md:order-none", {
+                }) }), jsx("div", { className: clsx("order-3 gap-5 md:order-none", {
                     "hidden md:grid": !isOpen,
                     grid: isOpen,
-                }) },
-                React__default.createElement(DiscountCode, { applyDiscountCode: applyDiscountCode })))),
-        React__default.createElement("hr", { className: clsx("order-5 md:order-none", {
-                "hidden md:block": !isOpen,
-                block: isOpen,
-            }) }),
-        React__default.createElement("div", { className: clsx("gap-5 order-3 md:order-none", {
-                "hidden md:grid": !isOpen,
-                grid: isOpen,
-            }) }, lineItems.map((item, index) => {
-            var _a, _b, _c, _d, _e, _f;
-            const finalItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
-            const productAppliedDiscounts = appliedDiscounts.filter((discount) => discount.allowedLineItems.some((allowedLineItem) => allowedLineItem.productId === item.productData.productId));
-            const formattedProductAppliedDiscounts = productAppliedDiscounts.map((discount) => {
-                var _a;
-                const elegibleLineItems = discount.allowedLineItems.find((allowedLineItem) => allowedLineItem.productId === item.productData.productId);
-                if (!elegibleLineItems)
-                    return 0;
-                const elegibleQuantity = elegibleLineItems.quantity;
-                const elegibleTotalAmount = ((_a = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _a !== void 0 ? _a : 0) * elegibleQuantity;
-                if (discount.discount.valueType === "PERCENTAGE") {
-                    const percentage = discount.discount.value / 100;
-                    return elegibleTotalAmount * percentage;
-                }
-                else if (discount.discount.valueType === "FREE") {
-                    return elegibleTotalAmount;
-                }
-                return elegibleQuantity * discount.discount.value;
-            });
-            const totalDiscountAmount = formattedProductAppliedDiscounts.length > 0
-                ? formattedProductAppliedDiscounts.reduce((acc, curr) => {
-                    return acc + curr;
-                }, 0)
-                : null;
-            const isDiscounted = !!totalDiscountAmount;
-            const discountedPrice = finalItem.priceInCents - (totalDiscountAmount !== null && totalDiscountAmount !== void 0 ? totalDiscountAmount : 0);
-            return (React__default.createElement("div", { key: index, className: "flex items-center" },
-                React__default.createElement("div", { className: "relative" },
-                    React__default.createElement("div", { className: "w-16 h-16 bg-secondary rounded-lg overflow-hidden relative" }, (finalItem === null || finalItem === void 0 ? void 0 : finalItem.images[0]) && (React__default.createElement("img", { src: finalItem.images[0] ||
-                            ((_b = item === null || item === void 0 ? void 0 : item.productData) === null || _b === void 0 ? void 0 : _b.images[0]) ||
-                            "/placeholder.svg", alt: ((_c = item.productData) === null || _c === void 0 ? void 0 : _c.title) || "", className: "object-cover w-full h-full", sizes: "64px" }))),
-                    React__default.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-primary rounded-full flex items-center text-background justify-center text-sm" }, item.quantity)),
-                React__default.createElement("div", { className: "ml-4 flex-1" },
-                    React__default.createElement("h3", { className: "text-base font-medium" }, (_d = item.productData) === null || _d === void 0 ? void 0 : _d.title),
-                    React__default.createElement("p", { className: "text-muted-foreground text-ellipsis line-clamp-1 md:max-w-[75%] text-sm" }, item.variantOptions
-                        .map((option) => `${option.name}: ${option.value}`)
-                        .join(", "))),
-                React__default.createElement("div", { className: "text-right" }, isDiscounted ? (React__default.createElement("div", { className: "flex flex-col" },
-                    React__default.createElement("p", { className: "text-sm font-medium -mb-0.5 line-through text-muted-foreground" }, storeHelpers.formatPrice((_e = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate)),
-                    React__default.createElement("p", { className: "text-base font-medium" }, discountedPrice <= 0
-                        ? t("CheckoutEmbed.Summary.free")
-                        : storeHelpers.formatPrice(discountedPrice, currency, exchangeRate)))) : (React__default.createElement("p", { className: "text-base font-medium" }, storeHelpers.formatPrice((_f = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _f !== void 0 ? _f : 0, currency, exchangeRate))))));
-        }))));
+                }), children: lineItems.map((item, index) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const finalItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
+                    const productAppliedDiscounts = appliedDiscounts.filter((discount) => discount.allowedLineItems.some((allowedLineItem) => allowedLineItem.productId === item.productData.productId));
+                    const formattedProductAppliedDiscounts = productAppliedDiscounts.map((discount) => {
+                        var _a;
+                        const elegibleLineItems = discount.allowedLineItems.find((allowedLineItem) => allowedLineItem.productId === item.productData.productId);
+                        if (!elegibleLineItems)
+                            return 0;
+                        const elegibleQuantity = elegibleLineItems.quantity;
+                        const elegibleTotalAmount = ((_a = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _a !== void 0 ? _a : 0) * elegibleQuantity;
+                        if (discount.discount.valueType === "PERCENTAGE") {
+                            const percentage = discount.discount.value / 100;
+                            return elegibleTotalAmount * percentage;
+                        }
+                        else if (discount.discount.valueType === "FREE") {
+                            return elegibleTotalAmount;
+                        }
+                        return elegibleQuantity * discount.discount.value;
+                    });
+                    const totalDiscountAmount = formattedProductAppliedDiscounts.length > 0
+                        ? formattedProductAppliedDiscounts.reduce((acc, curr) => {
+                            return acc + curr;
+                        }, 0)
+                        : null;
+                    const isDiscounted = !!totalDiscountAmount;
+                    const discountedPrice = finalItem.priceInCents - (totalDiscountAmount !== null && totalDiscountAmount !== void 0 ? totalDiscountAmount : 0);
+                    return (jsxs("div", { className: "flex items-center", children: [jsxs("div", { className: "relative", children: [jsx("div", { className: "bg-secondary relative h-16 w-16 overflow-hidden rounded-lg", children: (finalItem === null || finalItem === void 0 ? void 0 : finalItem.images[0]) && (jsx("img", { src: finalItem.images[0] ||
+                                                ((_b = item === null || item === void 0 ? void 0 : item.productData) === null || _b === void 0 ? void 0 : _b.images[0]) ||
+                                                "/placeholder.svg", alt: ((_c = item.productData) === null || _c === void 0 ? void 0 : _c.title) || "", className: "h-full w-full object-cover", sizes: "64px" })) }), jsx("div", { className: "bg-primary text-background absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full text-sm", children: item.quantity })] }), jsxs("div", { className: "ml-4 flex-1", children: [jsx("h3", { className: "text-base font-medium", children: (_d = item.productData) === null || _d === void 0 ? void 0 : _d.title }), jsx("p", { className: "text-muted-foreground line-clamp-1 text-ellipsis text-sm md:max-w-[75%]", children: item.variantOptions
+                                            .map((option) => `${option.name}: ${option.value}`)
+                                            .join(", ") })] }), jsx("div", { className: "text-right", children: isDiscounted ? (jsxs("div", { className: "flex flex-col", children: [jsx("p", { className: "text-muted-foreground -mb-0.5 text-sm font-medium line-through", children: storeHelpers.formatPrice((_e = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _e !== void 0 ? _e : 0, currency, exchangeRate) }), jsx("p", { className: "text-base font-medium", children: discountedPrice <= 0
+                                                ? t("CheckoutEmbed.Summary.free")
+                                                : storeHelpers.formatPrice(discountedPrice, currency, exchangeRate) })] })) : (jsx("p", { className: "text-base font-medium", children: storeHelpers.formatPrice((_f = finalItem === null || finalItem === void 0 ? void 0 : finalItem.priceInCents) !== null && _f !== void 0 ? _f : 0, currency, exchangeRate) })) })] }, index));
+                }) })] }));
 }
 function DiscountItem({ id, removeDiscount, label, canRemove, }) {
     const [isLoading, setIsLoading] = useState(false);
@@ -35676,46 +35506,12 @@ function DiscountItem({ id, removeDiscount, label, canRemove, }) {
             setIsLoading(false);
         }
     });
-    return (React__default.createElement("div", { className: "flex items-center gap-0.5" },
-        React__default.createElement("p", null, isLoading ? "Removing..." : label),
-        !isLoading && canRemove && (React__default.createElement("div", { onClick: handleRemove, className: "flex items-center z-10 relative -m-0.5 hover:bg-muted p-1 rounded-full justify-center hover:text-foreground cursor-pointer" },
-            React__default.createElement(X$2, { className: "size-3" }),
-            React__default.createElement("p", { className: "sr-only" }, "Remove")))));
+    return (jsxs("div", { className: "flex items-center gap-0.5", children: [jsx("p", { children: isLoading ? "Removing..." : label }), !isLoading && canRemove && (jsxs("div", { onClick: handleRemove, className: "hover:bg-muted hover:text-foreground relative z-10 -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-1", children: [jsx(X$2, { className: "size-3" }), jsx("p", { className: "sr-only", children: "Remove" })] }))] }));
 }
 
 function CheckoutSummaryLoading() {
     const { t } = useTranslation();
-    return (React__default.createElement("div", { className: "grid gap-5" },
-        React__default.createElement("div", { className: "flex justify-between items-center" },
-            React__default.createElement("div", { className: "flex items-center gap-2 cursor-pointer" },
-                React__default.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
-                React__default.createElement(ChevronDown, { className: "md:hidden size-5 transition-transform" })),
-            React__default.createElement(Skeleton, { className: "w-20 h-[20px] md:hidden" }),
-            React__default.createElement(Button, { className: "max-sm:hidden", variant: "link", size: "link", asChild: true },
-                React__default.createElement("a", null, t("CheckoutEmbed.Summary.edit")))),
-        React__default.createElement("hr", null),
-        React__default.createElement("div", { className: "hidden md:grid gap-2" },
-            React__default.createElement("div", { className: "flex justify-between" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.subtotal")),
-                React__default.createElement(Skeleton, { className: "w-20 h-[18px]" })),
-            React__default.createElement("div", { className: "flex justify-between" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.shipping")),
-                React__default.createElement(Skeleton, { className: "w-20 h-[18px]" })),
-            React__default.createElement("div", { className: "flex font-bold justify-between  items-center" },
-                React__default.createElement("p", null, t("CheckoutEmbed.Summary.total")),
-                React__default.createElement(Skeleton, { className: "w-24 h-[18px]" }))),
-        React__default.createElement("hr", { className: "hidden md:block" }),
-        React__default.createElement("div", null,
-            React__default.createElement(Skeleton, { className: "w-24 h-5 mb-2" }),
-            React__default.createElement(Skeleton, { className: "h-10 w-full mb-1" })),
-        React__default.createElement("hr", { className: "hidden md:block" }),
-        Array.from({ length: 2 }).map((_, index) => (React__default.createElement("div", { key: index, className: "hidden md:flex items-center" },
-            React__default.createElement(Skeleton, { className: "rounded-lg size-16" }),
-            React__default.createElement("div", { className: "ml-4 grid gap-2 flex-1" },
-                React__default.createElement(Skeleton, { className: "w-28 h-5" }),
-                React__default.createElement(Skeleton, { className: "w-20 h-3.5" })),
-            React__default.createElement("div", { className: "text-right" },
-                React__default.createElement(Skeleton, { className: "w-20 h-5" })))))));
+    return (jsxs("div", { className: "grid gap-5", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex cursor-pointer items-center gap-2", children: [jsx("h2", { children: t("CheckoutEmbed.Summary.title") }), jsx(ChevronDown, { className: "size-5 transition-transform md:hidden" })] }), jsx(Skeleton, { className: "h-[20px] w-20 md:hidden" }), jsx(Button, { className: "max-sm:hidden", variant: "link", size: "link", asChild: true, children: jsx("a", { children: t("CheckoutEmbed.Summary.edit") }) })] }), jsx("hr", {}), jsxs("div", { className: "hidden gap-2 md:grid", children: [jsxs("div", { className: "flex justify-between", children: [jsx("p", { children: t("CheckoutEmbed.Summary.subtotal") }), jsx(Skeleton, { className: "h-[18px] w-20" })] }), jsxs("div", { className: "flex justify-between", children: [jsx("p", { children: t("CheckoutEmbed.Summary.shipping") }), jsx(Skeleton, { className: "h-[18px] w-20" })] }), jsxs("div", { className: "flex items-center justify-between font-bold", children: [jsx("p", { children: t("CheckoutEmbed.Summary.total") }), jsx(Skeleton, { className: "h-[18px] w-24" })] })] }), jsx("hr", { className: "hidden md:block" }), jsxs("div", { children: [jsx(Skeleton, { className: "mb-2 h-5 w-24" }), jsx(Skeleton, { className: "mb-1 h-10 w-full" })] }), jsx("hr", { className: "hidden md:block" }), Array.from({ length: 2 }).map((_, index) => (jsxs("div", { className: "hidden items-center md:flex", children: [jsx(Skeleton, { className: "size-16 rounded-lg" }), jsxs("div", { className: "ml-4 grid flex-1 gap-2", children: [jsx(Skeleton, { className: "h-5 w-28" }), jsx(Skeleton, { className: "h-3.5 w-20" })] }), jsx("div", { className: "text-right", children: jsx(Skeleton, { className: "h-5 w-20" }) })] }, index)))] }));
 }
 
 function CheckoutEmbedComponent({ checkoutId, config }) {
@@ -35723,7 +35519,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = React__default.useMemo(() => createStoreClient({ proxy: clientProxy }), [clientProxy]);
     const iframeRef = React__default.useRef(null);
-    React__default.useMemo(() => createI18nInstance(locale), []);
+    React__default.useMemo(() => createI18nInstance(locale), [locale]);
     const { formData, step } = useFormStore();
     const paymentSecretPromiseRef = useRef(null);
     const [paymentSecret, setPaymentSecret] = useState(null);
@@ -35755,6 +35551,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         return () => {
             mounted = false; // Cleanup
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [checkoutId]); // Only re-run if checkoutId changes
     const onSuccess = () => {
         resetFormStore(formData);
@@ -35796,6 +35593,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
                 paymentSecretPromiseRef.current = null;
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [paymentSecret, step]);
     const applyDiscountCode = (code) => __awaiter(this, void 0, void 0, function* () {
         console.log("[Payment Debug] Applying discount code:", code);
@@ -35894,14 +35692,9 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
             console.log("[Payment Debug] Clearing revalidation interval");
             clearInterval(interval);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React__default.createElement(IframeWrapper, { iframeRef: iframeRef },
-        React__default.createElement("div", { className: "checkout-embed h-max gap-6 md:gap-0 py-4 md:py-12 flex flex-col md:grid md:grid-cols-7 " },
-            React__default.createElement(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }),
-            React__default.createElement("div", { className: "md:col-span-4 px-4 h-max md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey }))),
-            React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 h-max order-first md:order-last" },
-                React__default.createElement(Toaster, null),
-                loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))))));
+    return (jsx(IframeWrapper, { iframeRef: iframeRef, children: jsxs("div", { className: "checkout-embed flex h-max flex-col gap-6 py-4 md:grid md:grid-cols-7 md:gap-0 md:py-12", children: [jsx(Appearance, { appearance: appearance, fonts: config.fonts, iframeRef: iframeRef }), jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsx(CheckoutFormLoading, {})) : (jsx(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey })) }), jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsx(Toaster, {}), loading ? (jsx(CheckoutSummaryLoading, {})) : (jsx(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))] })] }) }));
 }
 const CheckoutEmbed = memo(CheckoutEmbedComponent);