@betterstore/react 0.5.19 → 0.5.22

package/dist/index.cjs.js

@@ -45,14 +45,14 @@ const createStoreImpl = (createState) => {
   const initialState = state = createState(setState, getState, api);
   return api;
 };
-const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
 
 const identity$1 = (arg) => arg;
 function useStore(api, selector = identity$1) {
   const slice = React.useSyncExternalStore(
     api.subscribe,
-    () => selector(api.getState()),
-    () => selector(api.getInitialState())
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
   );
   React.useDebugValue(slice);
   return slice;
@@ -63,7 +63,7 @@ const createImpl = (createState) => {
   Object.assign(useBoundStore, api);
   return useBoundStore;
 };
-const create = (createState) => createState ? createImpl(createState) : createImpl;
+const create = ((createState) => createState ? createImpl(createState) : createImpl);
 
 function createJSONStorage(getStorage, options) {
   let storage;
@@ -154,12 +154,12 @@ const persistImpl = (config, baseOptions) => (set, get, api) => {
   const savedSetState = api.setState;
   api.setState = (state, replace) => {
     savedSetState(state, replace);
-    void setItem();
+    return setItem();
   };
   const configResult = config(
     (...args) => {
       set(...args);
-      void setItem();
+      return setItem();
     },
     get,
     api
@@ -3091,7 +3091,7 @@ const hasLoadedNamespace = (ns, i18n, options = {}) => {
   return i18n.hasLoadedNamespace(ns, {
     lng: options.lng,
     precheck: (i18nInstance, loadNotPending) => {
-      if (options.bindI18n?.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
     }
   });
 };
@@ -3252,7 +3252,7 @@ const useTranslation = (ns, props = {}) => {
     if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
     return () => {
       isMounted.current = false;
-      if (i18n) bindI18n?.split(' ').forEach(e => i18n.off(e, boundReset));
+      if (i18n && bindI18n) bindI18n?.split(' ').forEach(e => i18n.off(e, boundReset));
       if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset));
     };
   }, [i18n, joinedNS]);
@@ -3595,6 +3595,27 @@ const isPlainObject$1 = (val) => {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(toStringTag in val) && !(iterator in val);
 };
 
+/**
+ * Determine if a value is an empty object (safely handles Buffers)
+ *
+ * @param {*} val The value to test
+ *
+ * @returns {boolean} True if value is an empty object, otherwise false
+ */
+const isEmptyObject$1 = (val) => {
+  // Early return for non-objects or Buffers to prevent RangeError
+  if (!isObject$1(val) || isBuffer(val)) {
+    return false;
+  }
+  
+  try {
+    return Object.keys(val).length === 0 && Object.getPrototypeOf(val) === Object.prototype;
+  } catch (e) {
+    // Fallback for any other objects that might cause RangeError with Object.keys()
+    return false;
+  }
+};
+
 /**
  * Determine if a value is a Date
  *
@@ -3717,6 +3738,11 @@ function forEach(obj, fn, {allOwnKeys = false} = {}) {
       fn.call(null, obj[i], i, obj);
     }
   } else {
+    // Buffer check
+    if (isBuffer(obj)) {
+      return;
+    }
+
     // Iterate over object keys
     const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
     const len = keys.length;
@@ -3730,6 +3756,10 @@ function forEach(obj, fn, {allOwnKeys = false} = {}) {
 }
 
 function findKey(obj, key) {
+  if (isBuffer(obj)){
+    return null;
+  }
+
   key = key.toLowerCase();
   const keys = Object.keys(obj);
   let i = keys.length;
@@ -4083,6 +4113,11 @@ const toJSONObject = (obj) => {
         return;
       }
 
+      //Buffer check
+      if (isBuffer(source)) {
+        return source;
+      }
+
       if(!('toJSON' in source)) {
         stack[i] = source;
         const target = isArray(source) ? [] : {};
@@ -4154,6 +4189,7 @@ var utils$1 = {
   isBoolean: isBoolean$1,
   isObject: isObject$1,
   isPlainObject: isPlainObject$1,
+  isEmptyObject: isEmptyObject$1,
   isReadableStream,
   isRequest,
   isResponse,
@@ -4783,7 +4819,7 @@ var platform$1 = {
 };
 
 function toURLEncodedForm(data, options) {
-  return toFormData$1(data, new platform$1.classes.URLSearchParams(), Object.assign({
+  return toFormData$1(data, new platform$1.classes.URLSearchParams(), {
     visitor: function(value, key, path, helpers) {
       if (platform$1.isNode && utils$1.isBuffer(value)) {
         this.append(key, value.toString('base64'));
@@ -4791,8 +4827,9 @@ function toURLEncodedForm(data, options) {
       }
 
       return helpers.defaultVisitor.apply(this, arguments);
-    }
-  }, options));
+    },
+    ...options
+  });
 }
 
 /**
@@ -5541,7 +5578,7 @@ function throttle(fn, freq) {
       clearTimeout(timer);
       timer = null;
     }
-    fn.apply(null, args);
+    fn(...args);
   };
 
   const throttled = (...args) => {
@@ -5797,7 +5834,7 @@ function mergeConfig$1(config1, config2) {
     headers: (a, b , prop) => mergeDeepProperties(headersToObject(a), headersToObject(b),prop, true)
   };
 
-  utils$1.forEach(Object.keys(Object.assign({}, config1, config2)), function computeConfigValue(prop) {
+  utils$1.forEach(Object.keys({...config1, ...config2}), function computeConfigValue(prop) {
     const merge = mergeMap[prop] || mergeDeepProperties;
     const configValue = merge(config1[prop], config2[prop], prop);
     (utils$1.isUndefined(configValue) && merge !== mergeDirectKeys) || (config[prop] = configValue);
@@ -6536,7 +6573,7 @@ function dispatchRequest(config) {
   });
 }
 
-const VERSION$1 = "1.10.0";
+const VERSION$1 = "1.11.0";
 
 const validators$1 = {};
 
@@ -6775,8 +6812,8 @@ let Axios$1 = class Axios {
 
     if (!synchronousRequestInterceptors) {
       const chain = [dispatchRequest.bind(this), undefined];
-      chain.unshift.apply(chain, requestInterceptorChain);
-      chain.push.apply(chain, responseInterceptorChain);
+      chain.unshift(...requestInterceptorChain);
+      chain.push(...responseInterceptorChain);
       len = chain.length;
 
       promise = Promise.resolve(config);
@@ -7517,7 +7554,7 @@ function createStoreHelpers(config) {
   return new helpers_default(config?.proxy);
 }
 
-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    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\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    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .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  .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  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\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-0 {\n    z-index: 0;\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  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\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-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .-mb-2 {\n    margin-bottom: calc(var(--spacing) * -2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\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-0 {\n    height: calc(var(--spacing) * 0);\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-\\[2px\\] {\n    height: 2px;\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\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: 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-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\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-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\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-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\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-0 {\n    --tw-translate-x: calc(var(--spacing) * -0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\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-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\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  .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-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-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * 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  .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-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\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    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-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\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  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-40 {\n    padding-bottom: calc(var(--spacing) * 40);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .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  .text-\\[13px\\] {\n    font-size: 13px;\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-input {\n    color: var(--input);\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-ring {\n    color: var(--ring);\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 {\n    text-decoration-line: underline;\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 {\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-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-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-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .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  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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  .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    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\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\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-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-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-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-\\[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\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\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\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\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-\\[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  .max-sm\\:h-\\[52px\\] {\n    @media (width < 40rem) {\n      height: 52px;\n    }\n  }\n  .sm\\:static {\n    @media (width >= 40rem) {\n      position: static;\n    }\n  }\n  .sm\\:w-fit {\n    @media (width >= 40rem) {\n      width: fit-content;\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\\:bg-transparent {\n    @media (width >= 40rem) {\n      background-color: transparent;\n    }\n  }\n  .sm\\:px-0 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:pb-0 {\n    @media (width >= 40rem) {\n      padding-bottom: calc(var(--spacing) * 0);\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-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, 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  .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}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    -webkit-box-shadow: 0 0 0 30px var(--muted) inset !important;\n    -webkit-text-fill-color: var(--foreground) !important;\n  }\n  input:-moz-autofill,\n  input:autofill {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\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);\n    letter-spacing: var(--tracking-tight);\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-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@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\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-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      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.12 | 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    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\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    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .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  .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  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\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-0 {\n    z-index: 0;\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  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\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-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .-mb-2 {\n    margin-bottom: calc(var(--spacing) * -2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\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-0 {\n    height: calc(var(--spacing) * 0);\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-\\[2px\\] {\n    height: 2px;\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\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: 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-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\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-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\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-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\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-0 {\n    --tw-translate-x: calc(var(--spacing) * -0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\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-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\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  .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-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 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-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-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * 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  .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-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\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    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-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\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  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-40 {\n    padding-bottom: calc(var(--spacing) * 40);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .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  .text-\\[13px\\] {\n    font-size: 13px;\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-ring {\n    color: var(--ring);\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 {\n    text-decoration-line: underline;\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 {\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-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-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-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .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  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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  .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    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\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\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-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-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-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-\\[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\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\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\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\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-\\[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  .max-sm\\:h-\\[52px\\] {\n    @media (width < 40rem) {\n      height: 52px;\n    }\n  }\n  .sm\\:static {\n    @media (width >= 40rem) {\n      position: static;\n    }\n  }\n  .sm\\:w-fit {\n    @media (width >= 40rem) {\n      width: fit-content;\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\\:bg-transparent {\n    @media (width >= 40rem) {\n      background-color: transparent;\n    }\n  }\n  .sm\\:px-0 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:pb-0 {\n    @media (width >= 40rem) {\n      padding-bottom: calc(var(--spacing) * 0);\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-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, 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  .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}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    -webkit-box-shadow: 0 0 0 30px var(--muted) inset !important;\n    -webkit-text-fill-color: var(--foreground) !important;\n  }\n  input:-moz-autofill,\n  input:autofill {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\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);\n    letter-spacing: var(--tracking-tight);\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-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@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\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-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      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
 
 var M$1=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React__namespace.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U$1};React__namespace.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React__namespace.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M$1.toString()})(${p})`}})});
 
@@ -8183,6 +8220,7 @@ const Toast = (props)=>{
         "data-swipe-out": swipeOut,
         "data-swipe-direction": swipeOutDirection,
         "data-expanded": Boolean(expanded || expandByDefault && mounted),
+        "data-testid": toast.testId,
         style: {
             '--index': index,
             '--toasts-before': index,
@@ -8391,17 +8429,26 @@ function assignOffset(defaultOffset, mobileOffset) {
     return styles;
 }
 const Toaster$1 = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
-    const { invert, position = 'bottom-right', hotkey = [
+    const { id, invert, position = 'bottom-right', hotkey = [
         'altKey',
         'KeyT'
     ], expand, closeButton, className, offset, mobileOffset, theme = 'light', richColors, duration, style, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = 'Notifications' } = props;
     const [toasts, setToasts] = React.useState([]);
+    const filteredToasts = React.useMemo(()=>{
+        if (id) {
+            return toasts.filter((toast)=>toast.toasterId === id);
+        }
+        return toasts.filter((toast)=>!toast.toasterId);
+    }, [
+        toasts,
+        id
+    ]);
     const possiblePositions = React.useMemo(()=>{
         return Array.from(new Set([
             position
-        ].concat(toasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
+        ].concat(filteredToasts.filter((toast)=>toast.position).map((toast)=>toast.position))));
     }, [
-        toasts,
+        filteredToasts,
         position
     ]);
     const [heights, setHeights] = React.useState([]);
@@ -8556,7 +8603,7 @@ const Toaster$1 = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
     }, possiblePositions.map((position, index)=>{
         var _heights_;
         const [y, x] = position.split('-');
-        if (!toasts.length) return null;
+        if (!filteredToasts.length) return null;
         return /*#__PURE__*/ React.createElement("ol", {
             key: position,
             dir: dir === 'auto' ? getDocumentDirection() : dir,
@@ -8608,7 +8655,7 @@ const Toaster$1 = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
                 setInteracting(true);
             },
             onPointerUp: ()=>setInteracting(false)
-        }, toasts.filter((toast)=>!toast.position && index === 0 || toast.position === position).map((toast, index)=>{
+        }, filteredToasts.filter((toast)=>!toast.position && index === 0 || toast.position === position).map((toast, index)=>{
             var _toastOptions_duration, _toastOptions_closeButton;
             return /*#__PURE__*/ React.createElement(Toast, {
                 key: toast.id,
@@ -8631,7 +8678,7 @@ const Toaster$1 = /*#__PURE__*/ React.forwardRef(function Toaster(props, ref) {
                 actionButtonStyle: toastOptions == null ? void 0 : toastOptions.actionButtonStyle,
                 closeButtonAriaLabel: toastOptions == null ? void 0 : toastOptions.closeButtonAriaLabel,
                 removeToast: removeToast,
-                toasts: toasts.filter((t)=>t.position == toast.position),
+                toasts: filteredToasts.filter((t)=>t.position == toast.position),
                 heights: heights.filter((h)=>h.position == toast.position),
                 setHeights: setHeights,
                 expandByDefault: expand,
@@ -13377,8 +13424,6 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
     return newAppearance;
 };
 
-const storeHelpers = createStoreHelpers();
-
 var util;
 (function (util) {
     util.assertEqual = (_) => { };
@@ -16391,6 +16436,60 @@ ZodTuple.create = (schemas, params) => {
         ...processCreateParams(params),
     });
 };
+class ZodRecord extends ZodType {
+    get keySchema() {
+        return this._def.keyType;
+    }
+    get valueSchema() {
+        return this._def.valueType;
+    }
+    _parse(input) {
+        const { status, ctx } = this._processInputParams(input);
+        if (ctx.parsedType !== ZodParsedType.object) {
+            addIssueToContext(ctx, {
+                code: ZodIssueCode.invalid_type,
+                expected: ZodParsedType.object,
+                received: ctx.parsedType,
+            });
+            return INVALID;
+        }
+        const pairs = [];
+        const keyType = this._def.keyType;
+        const valueType = this._def.valueType;
+        for (const key in ctx.data) {
+            pairs.push({
+                key: keyType._parse(new ParseInputLazyPath(ctx, key, ctx.path, key)),
+                value: valueType._parse(new ParseInputLazyPath(ctx, ctx.data[key], ctx.path, key)),
+                alwaysSet: key in ctx.data,
+            });
+        }
+        if (ctx.common.async) {
+            return ParseStatus.mergeObjectAsync(status, pairs);
+        }
+        else {
+            return ParseStatus.mergeObjectSync(status, pairs);
+        }
+    }
+    get element() {
+        return this._def.valueType;
+    }
+    static create(first, second, third) {
+        if (second instanceof ZodType) {
+            return new ZodRecord({
+                keyType: first,
+                valueType: second,
+                typeName: ZodFirstPartyTypeKind.ZodRecord,
+                ...processCreateParams(third),
+            });
+        }
+        return new ZodRecord({
+            keyType: ZodString.create(),
+            valueType: first,
+            typeName: ZodFirstPartyTypeKind.ZodRecord,
+            ...processCreateParams(second),
+        });
+    }
+}
 class ZodMap extends ZodType {
     get keySchema() {
         return this._def.keyType;
@@ -17156,6 +17255,7 @@ const objectType = ZodObject.create;
 ZodUnion.create;
 ZodIntersection.create;
 ZodTuple.create;
+const recordType = ZodRecord.create;
 ZodEnum.create;
 ZodPromise.create;
 ZodOptional.create;
@@ -17184,15 +17284,20 @@ const customerSchema = objectType({
 const shippingMethodSchema = objectType({
     rateId: stringType().min(1, "required_error"),
     provider: stringType().min(1, "required_error"),
-    price: numberType().min(1, "required_error"),
+    priceInCents: numberType().min(1, "required_error"),
     name: stringType().min(1, "required_error"),
     pickupPointId: stringType().optional(),
     pickupPointDisplayName: stringType().optional(),
 });
+const shipmentsFormSchema = recordType(stringType(), shippingMethodSchema)
+    .refine((data) => Object.keys(data).length > 0, {
+    message: "at_least_one_shipping_method_required",
+    path: [],
+});
 // Combined checkout schema
 objectType({
     customer: customerSchema,
-    shipping: shippingMethodSchema,
+    shipping: shipmentsFormSchema,
     customerId: stringType().optional(),
 });
 
@@ -17371,7 +17476,7 @@ function cloneObject(data) {
     }
     else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
         (isArray || isObject(data))) {
-        copy = isArray ? [] : {};
+        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
         if (!isArray && !isPlainObject(data)) {
             copy = data;
         }
@@ -17545,7 +17650,7 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
-const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
@@ -17624,6 +17729,44 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual$1(object1, object2, _internal_visited = new WeakSet()) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(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)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual$1(val1, val2, _internal_visited)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
 /**
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
  *
@@ -17642,18 +17785,35 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  */
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
-    const [value, updateValue] = React.useState(control._getWatch(name, _defaultValue.current));
+    const _compute = React.useRef(compute);
+    const _computeFormValues = React.useRef(undefined);
+    _compute.current = compute;
+    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
     useIsomorphicLayoutEffect$1(() => control._subscribe({
         name,
         formState: {
             values: true,
         },
         exact,
-        callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [name, control, disabled, exact]);
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual$1(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
+                }
+            }
+        },
+    }), [control, disabled, name, exact]);
     React.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -17684,12 +17844,13 @@ function useWatch(props) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister } = props;
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
+    const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
-        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        defaultValue: defaultValueMemo,
         exact: true,
     });
     const formState = useFormState({
@@ -17703,6 +17864,7 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    _props.current = props;
     const fieldState = React.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
@@ -17888,44 +18050,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual$1(object1, object2, _internal_visited = new WeakSet()) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(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)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual$1(val1, val2, _internal_visited)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -18877,7 +19001,7 @@ function createFormControl(props = {}) {
                 ? setValues(name, cloneValue, options)
                 : setFieldValue(name, cloneValue, options);
         }
-        isWatched(name, _names) && _subjects.state.next({ ..._formState });
+        isWatched(name, _names) && _subjects.state.next({ ..._formState, name });
         _subjects.state.next({
             name: _state.mount ? name : undefined,
             values: cloneObject(_formValues),
@@ -18912,8 +19036,10 @@ function createFormControl(props = {}) {
             const watched = isWatched(name, _names, isBlurEvent);
             set(_formValues, name, fieldValue);
             if (isBlurEvent) {
-                field._f.onBlur && field._f.onBlur(event);
-                delayErrorCallback && delayErrorCallback(0);
+                if (!target || !target.readOnly) {
+                    field._f.onBlur && field._f.onBlur(event);
+                    delayErrorCallback && delayErrorCallback(0);
+                }
             }
             else if (field._f.onChange) {
                 field._f.onChange(event);
@@ -19059,7 +19185,8 @@ function createFormControl(props = {}) {
     };
     const watch = (name, defaultValue) => isFunction$1(name)
         ? _subjects.state.subscribe({
-            next: (payload) => name(_getWatch(undefined, defaultValue), payload),
+            next: (payload) => 'values' in payload &&
+                name(_getWatch(undefined, defaultValue), payload),
         })
         : _getWatch(name, defaultValue, true);
     const _subscribe = (props) => _subjects.state.subscribe({
@@ -19070,6 +19197,7 @@ function createFormControl(props = {}) {
                     values: { ..._formValues },
                     ..._formState,
                     ...formState,
+                    defaultValues: _defaultValues,
                 });
             }
         },
@@ -19406,6 +19534,7 @@ function createFormControl(props = {}) {
                 ? _formState.isSubmitSuccessful
                 : false,
             isSubmitting: false,
+            defaultValues: _defaultValues,
         });
     };
     const reset = (formValues, keepStateOptions) => _reset(isFunction$1(formValues)
@@ -22752,7 +22881,7 @@ const FloatingLabel = React__namespace.forwardRef((_a, ref) => {
                     ? "text-xs font-medium"
                     : "text-muted-foreground text-sm", {
                     "text-xs font-medium": isFloating,
-                    "text-input": isFloating && !isFocused,
+                    "text-muted-foreground": isFloating && !isFocused,
                     "text-ring": isFloating && isFocused,
                     "text-muted-foreground text-sm": !isFloating,
                 }, className) }, props, { children: [children, required && "*"] }))] }));
@@ -22831,7 +22960,7 @@ function Button(_a) {
 
 var U=1,Y$1=.9,H=.8,J=.17,p=.1,u=.999,$=.9999;var k$1=.99,m=/[\\\/_+.#"@\[\(\{&]/,B$1=/[\\\/_+.#"@\[\(\{&]/g,K$1=/[\s-]/,X$1=/[\s-]/g;function G(_,C,h,P,A,f,O){if(f===C.length)return A===_.length?U:k$1;var T=`${A},${f}`;if(O[T]!==void 0)return O[T];for(var L=P.charAt(f),c=h.indexOf(L,A),S=0,E,N,R,M;c>=0;)E=G(_,C,h,P,c+1,f+1,O),E>S&&(c===A?E*=U:m.test(_.charAt(c-1))?(E*=H,R=_.slice(A,c-1).match(B$1),R&&A>0&&(E*=Math.pow(u,R.length))):K$1.test(_.charAt(c-1))?(E*=Y$1,M=_.slice(A,c-1).match(X$1),M&&A>0&&(E*=Math.pow(u,M.length))):(E*=J,A>0&&(E*=Math.pow(u,c-A))),_.charAt(c)!==C.charAt(f)&&(E*=$)),(E<p&&h.charAt(c-1)===P.charAt(f+1)||P.charAt(f+1)===P.charAt(f)&&h.charAt(c-1)!==P.charAt(f))&&(N=G(_,C,h,P,c+1,f+2,O),N*p>E&&(E=N*p)),E>S&&(S=E),c=h.indexOf(L,c+1);return O[T]=S,S}function D(_){return _.toLowerCase().replace(X$1," ")}function W(_,C,h){return _=h&&h.length>0?`${_+" "+h.join(" ")}`:_,G(_,C,D(_),D(C),0,0,{})}
 
-// packages/core/primitive/src/primitive.tsx
+// src/primitive.tsx
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler?.(event);
@@ -23500,7 +23629,7 @@ function usePresence(present) {
       const ownerWindow = node.ownerDocument.defaultView ?? window;
       const handleAnimationEnd = (event) => {
         const currentAnimationName = getAnimationName(stylesRef.current);
-        const isCurrentAnimation = currentAnimationName.includes(event.animationName);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
         if (event.target === node && isCurrentAnimation) {
           send("ANIMATION_END");
           if (!prevPresentRef.current) {
@@ -25446,7 +25575,7 @@ const flip$2 = function (options) {
           if (!ignoreCrossAxisOverflow ||
           // We leave the current main axis only if every placement on that axis
           // overflows the main axis.
-          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
             // Try next placement and re-run the lifecycle.
             return {
               data: {
@@ -27192,8 +27321,13 @@ var PopperAnchor = React__namespace.forwardRef(
     const context = usePopperContext(ANCHOR_NAME$1, __scopePopper);
     const ref = React__namespace.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
+    const anchorRef = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
-      context.onAnchorChange(virtualRef?.current || ref.current);
+      const previousAnchor = anchorRef.current;
+      anchorRef.current = virtualRef?.current || ref.current;
+      if (previousAnchor !== anchorRef.current) {
+        context.onAnchorChange(anchorRef.current);
+      }
     });
     return virtualRef ? null : /* @__PURE__ */ jsxRuntime.jsx(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
@@ -40079,12 +40213,12 @@ function requireReactStripe_umd () {
 
 		    stripe._registerWrapper({
 		      name: 'react-stripe-js',
-		      version: "3.7.0"
+		      version: "3.9.1"
 		    });
 
 		    stripe.registerAppInfo({
 		      name: 'react-stripe-js',
-		      version: "3.7.0",
+		      version: "3.9.1",
 		      url: 'https://stripe.com/docs/stripe-js/react'
 		    });
 		  };
@@ -40106,7 +40240,7 @@ function requireReactStripe_umd () {
 		   * The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object.
 		   * Pass the returned `Promise` to `Elements`.
 		   *
-		   * @docs https://stripe.com/docs/stripe-js/react#elements-provider
+		   * @docs https://docs.stripe.com/sdks/stripejs-react?ui=elements#elements-provider
 		   */
 
 		  var Elements = function Elements(_ref) {
@@ -40329,20 +40463,30 @@ function requireReactStripe_umd () {
 		    var prevOptions = usePrevious(options);
 		    var prevCheckoutSdk = usePrevious(ctx.checkoutSdk);
 		    React.useEffect(function () {
-		      var _prevOptions$elements, _options$elementsOpti;
+		      var _prevOptions$elements, _options$elementsOpti, _prevOptions$elements2, _options$elementsOpti2;
 
 		      // Ignore changes while checkout sdk is not initialized.
 		      if (!ctx.checkoutSdk) {
 		        return;
 		      }
 
+		      var hasSdkLoaded = Boolean(!prevCheckoutSdk && ctx.checkoutSdk); // Handle appearance changes
+
 		      var previousAppearance = prevOptions === null || prevOptions === void 0 ? void 0 : (_prevOptions$elements = prevOptions.elementsOptions) === null || _prevOptions$elements === void 0 ? void 0 : _prevOptions$elements.appearance;
 		      var currentAppearance = options === null || options === void 0 ? void 0 : (_options$elementsOpti = options.elementsOptions) === null || _options$elementsOpti === void 0 ? void 0 : _options$elementsOpti.appearance;
 		      var hasAppearanceChanged = !isEqual(currentAppearance, previousAppearance);
-		      var hasSdkLoaded = !prevCheckoutSdk && ctx.checkoutSdk;
 
 		      if (currentAppearance && (hasAppearanceChanged || hasSdkLoaded)) {
 		        ctx.checkoutSdk.changeAppearance(currentAppearance);
+		      } // Handle fonts changes
+
+
+		      var previousFonts = prevOptions === null || prevOptions === void 0 ? void 0 : (_prevOptions$elements2 = prevOptions.elementsOptions) === null || _prevOptions$elements2 === void 0 ? void 0 : _prevOptions$elements2.fonts;
+		      var currentFonts = options === null || options === void 0 ? void 0 : (_options$elementsOpti2 = options.elementsOptions) === null || _options$elementsOpti2 === void 0 ? void 0 : _options$elementsOpti2.fonts;
+		      var hasFontsChanged = !isEqual(previousFonts, currentFonts);
+
+		      if (currentFonts && (hasFontsChanged || hasSdkLoaded)) {
+		        ctx.checkoutSdk.loadFonts(currentFonts);
 		      }
 		    }, [options, prevOptions, ctx.checkoutSdk, prevCheckoutSdk]); // Attach react-stripe-js version to stripe.js instance
 
@@ -40504,6 +40648,10 @@ function requireReactStripe_umd () {
 		                newElement = checkoutSdk.createCurrencySelectorElement();
 		                break;
 
+		              case 'taxId':
+		                newElement = checkoutSdk.createTaxIdElement(options);
+		                break;
+
 		              default:
 		                throw new Error("Invalid Element type ".concat(displayName, ". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."));
 		            }
@@ -40886,6 +41034,12 @@ function requireReactStripe_umd () {
 		   */
 
 		  var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer);
+		  /**
+		   * Requires beta access:
+		   * Contact [Stripe support](https://support.stripe.com/) for more information.
+		   */
+
+		  var TaxIdElement = createElementComponent('taxId', isServer);
 
 		  exports.AddressElement = AddressElement;
 		  exports.AffirmMessageElement = AffirmMessageElement;
@@ -40912,6 +41066,7 @@ function requireReactStripe_umd () {
 		  exports.PaymentMethodMessagingElement = PaymentMethodMessagingElement;
 		  exports.PaymentRequestButtonElement = PaymentRequestButtonElement;
 		  exports.ShippingAddressElement = ShippingAddressElement;
+		  exports.TaxIdElement = TaxIdElement;
 		  exports.useCheckout = useCheckout;
 		  exports.useElements = useElements;
 		  exports.useStripe = useStripe;
@@ -41227,10 +41382,10 @@ function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale,
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingFormData, address, checkoutAppearance, fonts, locale, publicKey, paymentComponentKey, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const { t } = useTranslation();
-    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [shippingName, " \u00B7 ", shippingPrice] })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxRuntime.jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxRuntime.jsxs(Button, { className: "w-full sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsx(SubmitButton, { className: "w-full max-sm:h-[52px] sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }) }, paymentComponentKey)) })] }));
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h2", { className: "mb-2", children: t("CheckoutEmbed.Payment.title") }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: t("CheckoutEmbed.Payment.description") })] }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: address })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onDoubleBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("div", { className: "flex gap-1", children: [jsxRuntime.jsx("p", { className: "font-medium", children: t("CheckoutEmbed.Shipping.shipping") }), " ", jsxRuntime.jsx("div", { className: "text-muted-foreground flex flex-col gap-1", children: Object.entries(shippingFormData).map(([id, shipmentFormData]) => (jsxRuntime.jsxs("p", { children: [shipmentFormData.name, " \u00B7 ", shipmentFormData.priceInCents] }, id))) })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx("div", { className: "mt-8", children: paymentSecret && (jsxRuntime.jsx(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey, children: jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 mt-8 px-4 sm:static sm:px-0", children: jsxRuntime.jsxs("div", { className: "bg-background flex flex-col-reverse items-center justify-between gap-2 pb-4 sm:flex-row sm:bg-transparent sm:pb-0", children: [jsxRuntime.jsxs(Button, { className: "w-full sm:w-fit", type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Payment.back")] }), jsxRuntime.jsx(SubmitButton, { className: "w-full max-sm:h-[52px] sm:w-fit", isValid: true, isSubmitting: isSubmitting, children: t("CheckoutEmbed.Payment.button") })] }) }) }, paymentComponentKey)) })] }));
 }
 
 function Skeleton(_a) {
@@ -41238,6 +41393,8 @@ function Skeleton(_a) {
     return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props)));
 }
 
+const storeHelpers = createStoreHelpers();
+
 function ZasilkovnaShippingOption({ children, onPickupPointSelected, locale, countryCode, apiKey, }) {
     const [widgetLoaded, setWidgetLoaded] = React.useState(false);
     React.useEffect(() => {
@@ -41284,50 +41441,62 @@ function ShippingOptionWrapper({ rate, children, onPickupPointSelected, locale,
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
 }
 
-function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, }) {
+function ShipmentsForm({ shippingRates, initialData, onSubmit, onBack, contactEmail, shippingAddress, currency, exchangeRate, locale, countryCode, setFormData, formData, shipments, }) {
     var _a;
     const { t } = useTranslation();
     const form = useForm({
-        resolver: s(shippingMethodSchema),
-        defaultValues: initialData || {
-            rateId: "",
-            provider: "",
-            price: 0,
-            pickupPointId: "",
-            pickupPointDisplayName: "",
-        },
+        resolver: s(shipmentsFormSchema),
+        defaultValues: initialData ||
+            Object.fromEntries(shipments.map((shipment) => [
+                shipment.id,
+                {
+                    rateId: "",
+                    provider: "",
+                    priceInCents: 0,
+                    pickupPointId: "",
+                    pickupPointDisplayName: "",
+                },
+            ])),
     });
-    const currentRateId = form.watch("rateId");
-    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsx("h2", { children: t("CheckoutEmbed.Shipping.title") }), jsxRuntime.jsxs("div", { className: "space-y-2 pb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx(Form, Object.assign({}, form, { children: jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [shippingRates.length === 0 &&
-                            Array.from({ length: 3 }).map((_, index) => (jsxRuntime.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 (jsxRuntime.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: jsxRuntime.jsxs("div", { className: clsx("bg-background cursor-pointer rounded-md border p-4", {
-                                        "bg-muted border-primary": currentRateId === rateId,
-                                    }), children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [jsxRuntime.jsx("p", { children: rate.name }), jsxRuntime.jsx("p", { children: displayPrice })] }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: description }), pickupPointDisplayName && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "my-2" }), jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", children: [t("CheckoutEmbed.Shipping.description.shippedTo"), " ", jsxRuntime.jsx("span", { className: "text-foreground", children: pickupPointDisplayName })] })] }))] }) }, rateId));
-                        }), jsxRuntime.jsx(FormMessage, { children: (_a = form.formState.errors.rateId) === null || _a === void 0 ? void 0 : _a.message }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-4", children: [jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Shipping.back")] }), jsxRuntime.jsx(SubmitButton, { isSubmitting: form.formState.isSubmitting, isValid: !!currentRateId, children: t("CheckoutEmbed.Shipping.button") })] })] }) }))] }));
+    const isButtonEnabled = Object.values(form.getValues()).every((value) => { var _a; return ((_a = value.rateId) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+    return (jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsx("h2", { children: t("CheckoutEmbed.Shipping.title") }), jsxRuntime.jsxs("div", { className: "space-y-2 pb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.contact") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: contactEmail })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("span", { className: "font-medium", children: t("CheckoutEmbed.Shipping.address") }), " ", jsxRuntime.jsx("span", { className: "text-muted-foreground", children: shippingAddress })] }), jsxRuntime.jsx(Button, { variant: "link", size: "link", onClick: onBack, children: t("CheckoutEmbed.Shipping.change") })] })] }), jsxRuntime.jsx(Form, Object.assign({}, form, { children: jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4", children: [shipments.map((shipment) => (jsxRuntime.jsx(SingleShipmentSection, { shipment: shipment, shippingRates: shippingRates, form: form, setFormData: setFormData, formData: formData, currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: countryCode, multipleShipments: shipments.length > 1 }, shipment.id))), jsxRuntime.jsx(FormMessage, { children: (_a = form.formState.errors.root) === null || _a === void 0 ? void 0 : _a.message }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-4", children: [jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, children: [jsxRuntime.jsx(ChevronLeft, {}), t("CheckoutEmbed.Shipping.back")] }), jsxRuntime.jsx(SubmitButton, { isSubmitting: form.formState.isSubmitting, isValid: isButtonEnabled, children: t("CheckoutEmbed.Shipping.button") })] })] }) }))] }));
 }
+const SingleShipmentSection = ({ shippingRates, form, currency, exchangeRate, locale, countryCode, setFormData, formData, multipleShipments, shipment, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const shipmentId = shipment.id;
+    const currentRateId = form.watch(`${shipmentId}.rateId`);
+    // TODO: construct the headline
+    return (jsxRuntime.jsxs("div", { children: [multipleShipments && (jsxRuntime.jsx("h3", { className: "text-lg font-medium", children: (_a = shipment.shipmentData) === null || _a === void 0 ? void 0 : _a.name })), shippingRates.length === 0 &&
+                Array.from({ length: 3 }).map((_, index) => (jsxRuntime.jsx(ShippingRateLoading, {}, index))), shippingRates.map((rate) => {
+                const pickupPointDisplayName = form.watch(`${shipmentId}.pickupPointDisplayName`);
+                const rateId = rate.provider + rate.name;
+                const intPrice = Math.ceil(Number(rate.priceInCents));
+                const displayPrice = storeHelpers.formatPrice(intPrice, currency, exchangeRate);
+                const description = rate.provider === "zasilkovna"
+                    ? t("CheckoutEmbed.Shipping.description.zasilkovna")
+                    : t("CheckoutEmbed.Shipping.description.other");
+                return (jsxRuntime.jsx(ShippingOptionWrapper, { rate: rate, onPickupPointSelected: (pickupPointId, pickupPointName) => {
+                        const newData = {
+                            rateId,
+                            provider: rate.provider,
+                            priceInCents: intPrice,
+                            name: rate.name,
+                            pickupPointId: rate.provider === "zasilkovna" ? pickupPointId : "",
+                            pickupPointDisplayName: rate.provider === "zasilkovna" ? pickupPointName : "",
+                        };
+                        form.setValue(`${shipmentId}.rateId`, newData.rateId);
+                        form.setValue(`${shipmentId}.provider`, newData.provider);
+                        form.setValue(`${shipmentId}.name`, newData.name);
+                        form.setValue(`${shipmentId}.priceInCents`, newData.priceInCents);
+                        form.setValue(`${shipmentId}.pickupPointId`, newData.pickupPointId);
+                        form.setValue(`${shipmentId}.pickupPointDisplayName`, newData.pickupPointDisplayName);
+                        setFormData(Object.assign(Object.assign({}, formData), { shipping: Object.assign(Object.assign({}, formData.shipping), { [shipmentId]: newData }) }));
+                    }, locale: locale, countryCode: countryCode, children: jsxRuntime.jsxs("div", { className: clsx("bg-background cursor-pointer rounded-md border p-4", {
+                            "bg-muted border-primary": currentRateId === rateId,
+                        }), children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [jsxRuntime.jsx("p", { children: rate.name }), jsxRuntime.jsx("p", { children: displayPrice })] }), jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: description }), pickupPointDisplayName && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "my-2" }), jsxRuntime.jsxs("p", { className: "text-muted-foreground text-sm", children: [t("CheckoutEmbed.Shipping.description.shippedTo"), " ", jsxRuntime.jsx("span", { className: "text-foreground", children: pickupPointDisplayName })] })] }))] }) }, rateId));
+            })] }));
+};
 function ShippingRateLoading() {
     return (jsxRuntime.jsxs("div", { className: clsx("bg-background grid cursor-pointer gap-[10px] rounded-md border p-4"), children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [jsxRuntime.jsx(Skeleton, { className: "h-5 w-12" }), jsxRuntime.jsx(Skeleton, { className: "h-5 w-16" })] }), jsxRuntime.jsx(Skeleton, { className: "h-3.5 w-40" })] }));
 }
@@ -41345,14 +41514,14 @@ const resetFormStore = (formData) => {
     localStorage.setItem("checkout", JSON.stringify(Object.assign(Object.assign({}, currentState), { state: Object.assign(Object.assign({}, currentState.state), { step: "customer", formData: { customer: formData.customer } }) })));
 };
 
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, clientProxy, latitude, longitude, currentAlpha3CountryCode, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, paymentSecret, publicKey, paymentComponentKey, clientProxy, latitude, longitude, currentAlpha3CountryCode, shipments, }) {
     const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [shippingRates, setShippingRates] = React.useState([]);
     const validateStep = React.useCallback(() => {
         if (step === "customer")
             return;
         const isShippingValid = formData.shipping &&
-            shippingMethodSchema.safeParse(formData.shipping).success;
+            shipmentsFormSchema.safeParse(formData.shipping).success;
         const isCustomerValid = formData.customer && customerSchema.safeParse(formData.customer).success;
         if (step === "shipping" && !isCustomerValid) {
             setStep("customer");
@@ -41482,14 +41651,19 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     const handleShippingSubmit = (data) => __awaiter(this, void 0, void 0, function* () {
         const newFormData = Object.assign(Object.assign({}, formData), { shipping: data });
         setFormData(newFormData);
-        yield storeClient.updateCheckout(clientSecret, checkoutId, {
+        const shipments = Object.entries(data).map(([id, shipmentFormData]) => ({
+            id: id,
             shipmentData: {
-                provider: data.provider,
-                pickupPointId: data.pickupPointId,
-                name: data.name,
+                provider: shipmentFormData.provider,
+                pickupPointId: shipmentFormData.pickupPointId,
+                name: shipmentFormData.name,
+                priceInCents: shipmentFormData.priceInCents,
             },
+        }));
+        yield storeClient.updateCheckout(clientSecret, checkoutId, {
+            shipments,
         });
-        setShippingCost(data.price);
+        setShippingCost(shipments.reduce((acc, shipment) => acc + shipment.shipmentData.priceInCents, 0));
         setStep("payment");
     });
     // Navigate back to previous step
@@ -41507,10 +41681,10 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     const renderStep = () => {
         if (step === "payment" && formData.customer && formData.shipping) {
-            return (jsxRuntime.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 }));
+            return (jsxRuntime.jsx(PaymentForm, { paymentComponentKey: paymentComponentKey, locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, address: formatAddress(formData.customer.address), shippingFormData: formData.shipping, publicKey: publicKey }));
         }
         if (step === "shipping" && formData.customer) {
-            return (jsxRuntime.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 (jsxRuntime.jsx(ShipmentsForm, { 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, shipments: shipments }));
         }
         return (jsxRuntime.jsx(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit, clientProxy: clientProxy, clientSecret: clientSecret, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, locale: locale }));
     };
@@ -41555,8 +41729,6 @@ function DiscountCode({ applyDiscountCode, }) {
 }
 
 function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency, onCancel, exchangeRate, applyDiscountCode, removeDiscount, }) {
-    var _a, _b;
-    const { formData } = useFormStore();
     const [isOpen, setIsOpen] = React.useState(false);
     const { t } = useTranslation();
     const subtotal = lineItems.reduce((acc, item) => {
@@ -41564,7 +41736,7 @@ function CheckoutSummary({ appliedDiscounts, lineItems, shipping, tax, currency,
         const productItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
         return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
     }, 0);
-    const shippingPrice = (_b = shipping !== null && shipping !== void 0 ? shipping : (_a = formData.shipping) === null || _a === void 0 ? void 0 : _a.price) !== null && _b !== void 0 ? _b : 0;
+    const shippingPrice = shipping !== null && shipping !== void 0 ? shipping : 0;
     const total = subtotal + (tax !== null && tax !== void 0 ? tax : 0) + shippingPrice;
     const isShippingFree = subtotal > shippingPrice &&
         appliedDiscounts.some((discount) => discount.discount.type === "FREE_SHIPPING");
@@ -41690,6 +41862,21 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     const [latitude, setLatitude] = React.useState(undefined);
     const [longitude, setLongitude] = React.useState(undefined);
     const [currentAlpha3CountryCode, setCurrentAlpha3CountryCode] = React.useState(undefined);
+    const [totalShipping, setTotalShipping] = React.useState(null);
+    React.useEffect(() => {
+        if (checkout) {
+            const areAllShipmentsFilled = checkout.shipments.every((shipment) => { var _a; return (_a = shipment.shipmentData) === null || _a === void 0 ? void 0 : _a.provider; });
+            if (areAllShipmentsFilled) {
+                setTotalShipping(checkout.shipments.reduce((acc, shipment) => {
+                    var _a, _b;
+                    return acc + ((_b = (_a = shipment.shipmentData) === null || _a === void 0 ? void 0 : _a.priceInCents) !== null && _b !== void 0 ? _b : 0);
+                }, 0));
+            }
+            else {
+                setTotalShipping(null);
+            }
+        }
+    }, [checkout]);
     React.useEffect(() => {
         getIpInfo().then(({ latitude, longitude, countryCodeIso3 }) => {
             setLatitude(latitude);
@@ -41739,11 +41926,6 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
-    const setShippingCost = (cost) => {
-        if (!checkout)
-            return;
-        setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
-    };
     function generatePaymentSecret() {
         return __awaiter(this, void 0, void 0, function* () {
             console.log("[Payment Debug] Generating new payment secret");
@@ -41824,7 +42006,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         }
     });
     const calculateTotalWithDiscounts = (checkout) => {
-        var _a, _b;
+        var _a;
         if (!checkout)
             return 0;
         const subtotal = checkout.lineItems.reduce((acc, item) => {
@@ -41832,8 +42014,8 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
             const productItem = ((_a = item.productData) === null || _a === void 0 ? void 0 : _a.selectedVariant) || item.productData;
             return acc + ((_b = productItem === null || productItem === void 0 ? void 0 : productItem.priceInCents) !== null && _b !== void 0 ? _b : 0) * item.quantity;
         }, 0);
-        const shippingPrice = (_a = checkout.shipping) !== null && _a !== void 0 ? _a : 0;
-        const total = subtotal + ((_b = checkout.tax) !== null && _b !== void 0 ? _b : 0) + shippingPrice;
+        const shippingPrice = totalShipping !== null && totalShipping !== void 0 ? totalShipping : 0;
+        const total = subtotal + ((_a = checkout.tax) !== null && _a !== void 0 ? _a : 0) + shippingPrice;
         const isShippingFree = subtotal > shippingPrice &&
             checkout.appliedDiscounts.some((discount) => discount.discount.type === "FREE_SHIPPING");
         const filteredDiscounts = checkout.appliedDiscounts.filter((discount) => discount.discount.type !== "FREE_SHIPPING");
@@ -41864,7 +42046,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxRuntime.jsx(ShadowWrapper, { shadowRef: shadowRef, children: jsxRuntime.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: [jsxRuntime.jsx(Appearance, { appearance: appearance, fonts: config.fonts, shadowRef: shadowRef }), jsxRuntime.jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsxRuntime.jsx(CheckoutFormLoading, {})) : (jsxRuntime.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, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode })) }), jsxRuntime.jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsxRuntime.jsx(Toaster, {}), loading ? (jsxRuntime.jsx(CheckoutSummaryLoading, {})) : (jsxRuntime.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 }))] })] }) }));
+    return (jsxRuntime.jsx(ShadowWrapper, { shadowRef: shadowRef, children: jsxRuntime.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: [jsxRuntime.jsx(Appearance, { appearance: appearance, fonts: config.fonts, shadowRef: shadowRef }), jsxRuntime.jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsxRuntime.jsx(CheckoutFormLoading, {})) : (jsxRuntime.jsx(CheckoutForm, { locale: locale, setShippingCost: setTotalShipping, 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, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, shipments: (checkout === null || checkout === void 0 ? void 0 : checkout.shipments) || [] })) }), jsxRuntime.jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsxRuntime.jsx(Toaster, {}), loading ? (jsxRuntime.jsx(CheckoutSummaryLoading, {})) : (jsxRuntime.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: totalShipping, 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 = React.memo(CheckoutEmbedComponent);