@billingos/sdk 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.cts +46 -8
- package/dist/index.d.ts +46 -8
- package/dist/index.js +526 -792
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +530 -797
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -1
package/dist/index.mjs
CHANGED
|
@@ -10,7 +10,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
10
10
|
if (document.getElementById(id)) return;
|
|
11
11
|
var s = document.createElement("style");
|
|
12
12
|
s.id = id;
|
|
13
|
-
s.textContent = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-100: oklch(93.6% 0.032 17.717);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-red-800: oklch(44.4% 0.177 26.899);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-yellow-50: oklch(98.7% 0.026 102.212);\n --color-yellow-100: oklch(97.3% 0.071 103.193);\n --color-yellow-500: oklch(79.5% 0.184 86.047);\n --color-yellow-600: oklch(68.1% 0.162 75.834);\n --color-yellow-800: oklch(47.6% 0.114 61.907);\n --color-yellow-900: oklch(42.1% 0.095 57.708);\n --color-green-50: oklch(98.2% 0.018 155.826);\n --color-green-100: oklch(96.2% 0.044 156.743);\n --color-green-200: oklch(92.5% 0.084 155.995);\n --color-green-300: oklch(87.1% 0.15 154.449);\n --color-green-400: oklch(79.2% 0.209 151.711);\n --color-green-500: oklch(72.3% 0.219 149.579);\n --color-green-600: oklch(62.7% 0.194 149.214);\n --color-green-700: oklch(52.7% 0.154 150.069);\n --color-green-800: oklch(44.8% 0.119 151.328);\n --color-green-900: oklch(39.3% 0.095 152.535);\n --color-blue-100: oklch(93.2% 0.032 255.585);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-blue-600: oklch(54.6% 0.245 262.881);\n --color-blue-700: oklch(48.8% 0.243 264.376);\n --color-blue-800: oklch(42.4% 0.199 265.638);\n --color-purple-100: oklch(94.6% 0.033 307.174);\n --color-purple-600: oklch(55.8% 0.288 302.321);\n --color-purple-700: oklch(49.6% 0.265 301.924);\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-gray-100: oklch(96.7% 0.003 264.542);\n --color-gray-200: oklch(92.8% 0.006 264.531);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-900: oklch(21% 0.034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-sm: 24rem;\n --container-md: 28rem;\n --container-lg: 32rem;\n --container-2xl: 42rem;\n --container-4xl: 56rem;\n --container-6xl: 72rem;\n --container-7xl: 80rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --leading-tight: 1.25;\n --leading-relaxed: 1.625;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\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 .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-x-0 {\n inset-inline: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .-top-3 {\n top: calc(var(--spacing) * -3);\n }\n .-top-4 {\n top: calc(var(--spacing) * -4);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-2 {\n top: calc(var(--spacing) * 2);\n }\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-0\\.5 {\n right: calc(var(--spacing) * 0.5);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .isolate {\n isolation: isolate;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\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 {\n margin: calc(var(--spacing) * 0);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .mt-0 {\n margin-top: calc(var(--spacing) * 0);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mr-1 {\n margin-right: calc(var(--spacing) * 1);\n }\n .mr-2 {\n margin-right: 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-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n .mb-12 {\n margin-bottom: calc(var(--spacing) * 12);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-3 {\n margin-left: calc(var(--spacing) * 3);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\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 {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\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-11 {\n height: calc(var(--spacing) * 11);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-\\[1px\\] {\n height: 1px;\n }\n .h-\\[600px\\] {\n height: 600px;\n }\n .h-\\[650px\\] {\n height: 650px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[80vh\\] {\n max-height: 80vh;\n }\n .max-h-\\[90vh\\] {\n max-height: 90vh;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[80px\\] {\n min-height: 80px;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-1\\.5 {\n width: calc(var(--spacing) * 1.5);\n }\n .w-1\\/4 {\n width: calc(1/4 * 100%);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\/4 {\n width: calc(3/4 * 100%);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n .w-28 {\n width: calc(var(--spacing) * 28);\n }\n .w-32 {\n width: calc(var(--spacing) * 32);\n }\n .w-36 {\n width: calc(var(--spacing) * 36);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n .w-96 {\n width: calc(var(--spacing) * 96);\n }\n .w-\\[1px\\] {\n width: 1px;\n }\n .w-\\[200px\\] {\n width: 200px;\n }\n .w-\\[450px\\] {\n width: 450px;\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-4xl {\n max-width: var(--container-4xl);\n }\n .max-w-7xl {\n max-width: var(--container-7xl);\n }\n .max-w-\\[200px\\] {\n max-width: 200px;\n }\n .max-w-\\[calc\\(100vw-2rem\\)\\] {\n max-width: calc(100vw - 2rem);\n }\n .max-w-lg {\n max-width: var(--container-lg);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .caption-bottom {\n caption-side: bottom;\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 .scale-105 {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-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 .touch-none {\n touch-action: none;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .list-inside {\n list-style-position: inside;\n }\n .list-disc {\n list-style-type: disc;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-baseline {\n align-items: baseline;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\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-8 {\n gap: calc(var(--spacing) * 8);\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\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-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-x-2 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n .space-x-4 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-\\[inherit\\] {\n border-radius: inherit;\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-t-\\[10px\\] {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-blue-600 {\n border-color: var(--color-blue-600);\n }\n .border-destructive\\/50 {\n border-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, hsl(var(--destructive)) 50%, transparent);\n }\n }\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n .border-green-500\\/50 {\n border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);\n }\n }\n .border-green-600 {\n border-color: var(--color-green-600);\n }\n .border-input {\n border-color: hsl(var(--input));\n }\n .border-primary {\n border-color: hsl(var(--primary));\n }\n .border-primary\\/20 {\n border-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);\n }\n }\n .border-primary\\/50 {\n border-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent);\n }\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-yellow-500\\/50 {\n border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);\n }\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .border-l-transparent {\n border-left-color: transparent;\n }\n .bg-background {\n background-color: hsl(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-black\\/80 {\n background-color: color-mix(in srgb, #000 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 80%, transparent);\n }\n }\n .bg-blue-600 {\n background-color: var(--color-blue-600);\n }\n .bg-border {\n background-color: hsl(var(--border));\n }\n .bg-card {\n background-color: hsl(var(--card));\n }\n .bg-destructive {\n background-color: hsl(var(--destructive));\n }\n .bg-destructive\\/10 {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);\n }\n }\n .bg-foreground {\n background-color: hsl(var(--foreground));\n }\n .bg-foreground\\/5 {\n background-color: hsl(var(--foreground));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--foreground)) 5%, transparent);\n }\n }\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n .bg-gray-400 {\n background-color: var(--color-gray-400);\n }\n .bg-gray-600 {\n background-color: var(--color-gray-600);\n }\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n .bg-green-100 {\n background-color: var(--color-green-100);\n }\n .bg-green-500 {\n background-color: var(--color-green-500);\n }\n .bg-muted {\n background-color: hsl(var(--muted));\n }\n .bg-muted-foreground\\/30 {\n background-color: hsl(var(--muted-foreground));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 30%, transparent);\n }\n }\n .bg-muted\\/50 {\n background-color: hsl(var(--muted));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);\n }\n }\n .bg-primary {\n background-color: hsl(var(--primary));\n }\n .bg-primary\\/10 {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);\n }\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n .bg-red-500 {\n background-color: var(--color-red-500);\n }\n .bg-secondary {\n background-color: hsl(var(--secondary));\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/80 {\n background-color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n .bg-yellow-100 {\n background-color: var(--color-yellow-100);\n }\n .bg-yellow-500 {\n background-color: var(--color-yellow-500);\n }\n .bg-gradient-to-br {\n --tw-gradient-position: to bottom right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .bg-gradient-to-r {\n --tw-gradient-position: to right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-blue-100 {\n --tw-gradient-from: var(--color-blue-100);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .from-blue-500 {\n --tw-gradient-from: var(--color-blue-500);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .from-blue-600 {\n --tw-gradient-from: var(--color-blue-600);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-purple-100 {\n --tw-gradient-to: var(--color-purple-100);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-purple-600 {\n --tw-gradient-to: var(--color-purple-600);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\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 .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .p-\\[1px\\] {\n padding: 1px;\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-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 .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-12 {\n padding-block: calc(var(--spacing) * 12);\n }\n .pt-0 {\n padding-top: calc(var(--spacing) * 0);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pr-6 {\n padding-right: calc(var(--spacing) * 6);\n }\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .align-middle {\n vertical-align: middle;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-amber-500 {\n color: var(--color-amber-500);\n }\n .text-background {\n color: hsl(var(--background));\n }\n .text-background\\/70 {\n color: hsl(var(--background));\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, hsl(var(--background)) 70%, transparent);\n }\n }\n .text-blue-800 {\n color: var(--color-blue-800);\n }\n .text-card-foreground {\n color: hsl(var(--card-foreground));\n }\n .text-destructive {\n color: hsl(var(--destructive));\n }\n .text-destructive-foreground {\n color: hsl(var(--destructive-foreground));\n }\n .text-foreground {\n color: hsl(var(--foreground));\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n .text-green-500 {\n color: var(--color-green-500);\n }\n .text-green-600 {\n color: var(--color-green-600);\n }\n .text-green-700 {\n color: var(--color-green-700);\n }\n .text-green-800 {\n color: var(--color-green-800);\n }\n .text-green-900 {\n color: var(--color-green-900);\n }\n .text-muted-foreground {\n color: hsl(var(--muted-foreground));\n }\n .text-primary {\n color: hsl(var(--primary));\n }\n .text-primary-foreground {\n color: hsl(var(--primary-foreground));\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-600 {\n color: var(--color-red-600);\n }\n .text-red-800 {\n color: var(--color-red-800);\n }\n .text-secondary-foreground {\n color: hsl(var(--secondary-foreground));\n }\n .text-white {\n color: var(--color-white);\n }\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n .text-yellow-900 {\n color: var(--color-yellow-900);\n }\n .uppercase {\n text-transform: uppercase;\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-25 {\n opacity: 25%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-60 {\n opacity: 60%;\n }\n .opacity-70 {\n opacity: 70%;\n }\n .opacity-75 {\n opacity: 75%;\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-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\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-2 {\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 .ring-primary {\n --tw-ring-color: hsl(var(--primary));\n }\n .ring-offset-background {\n --tw-ring-offset-color: hsl(var(--background));\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .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 .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-400 {\n --tw-duration: 400ms;\n transition-duration: 400ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .\\[-ms-overflow-style\\:none\\] {\n -ms-overflow-style: none;\n }\n .\\[scrollbar-width\\:none\\] {\n scrollbar-width: none;\n }\n .peer-disabled\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n .peer-disabled\\:opacity-70 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 70%;\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: hsl(var(--foreground));\n }\n }\n .placeholder\\:text-muted-foreground {\n &::placeholder {\n color: hsl(var(--muted-foreground));\n }\n }\n .checked\\:bg-primary {\n &:checked {\n background-color: hsl(var(--primary));\n }\n }\n .checked\\:text-primary-foreground {\n &:checked {\n color: hsl(var(--primary-foreground));\n }\n }\n .hover\\:border-gray-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:border-primary {\n &:hover {\n @media (hover: hover) {\n border-color: hsl(var(--primary));\n }\n }\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--accent));\n }\n }\n }\n .hover\\:bg-background\\/50 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--background));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--background)) 50%, transparent);\n }\n }\n }\n }\n .hover\\:bg-destructive\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-foreground\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--foreground));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--foreground)) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-gray-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-200);\n }\n }\n }\n .hover\\:bg-gray-300 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:bg-gray-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-600);\n }\n }\n }\n .hover\\:bg-gray-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-700);\n }\n }\n }\n .hover\\:bg-green-500\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-green-500) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--muted));\n }\n }\n }\n .hover\\:bg-muted\\/50 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--muted));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);\n }\n }\n }\n }\n .hover\\:bg-primary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--secondary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--secondary)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-transparent {\n &:hover {\n @media (hover: hover) {\n background-color: transparent;\n }\n }\n }\n .hover\\:bg-yellow-500\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-yellow-500) 80%, transparent);\n }\n }\n }\n }\n .hover\\:from-blue-700 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-from: var(--color-blue-700);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n }\n .hover\\:to-purple-700 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-to: var(--color-purple-700);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--accent-foreground));\n }\n }\n }\n .hover\\:text-destructive {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--destructive));\n }\n }\n }\n .hover\\:text-foreground {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--foreground));\n }\n }\n }\n .hover\\:text-gray-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-gray-700);\n }\n }\n }\n .hover\\:text-yellow-900 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-yellow-900);\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 .hover\\:shadow-lg {\n &:hover {\n @media (hover: hover) {\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 }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-blue-500 {\n &:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: hsl(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-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\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-visible\\:ring-ring {\n &:focus-visible {\n --tw-ring-color: hsl(var(--ring));\n }\n }\n .focus-visible\\:ring-offset-2 {\n &:focus-visible {\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-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\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 .data-\\[state\\=selected\\]\\:bg-muted {\n &[data-state="selected"] {\n background-color: hsl(var(--muted));\n }\n }\n .sm\\:max-w-2xl {\n @media (width >= 40rem) {\n max-width: var(--container-2xl);\n }\n }\n .sm\\:max-w-6xl {\n @media (width >= 40rem) {\n max-width: var(--container-6xl);\n }\n }\n .sm\\:max-w-\\[500px\\] {\n @media (width >= 40rem) {\n max-width: 500px;\n }\n }\n .sm\\:max-w-\\[600px\\] {\n @media (width >= 40rem) {\n max-width: 600px;\n }\n }\n .sm\\:max-w-\\[800px\\] {\n @media (width >= 40rem) {\n max-width: 800px;\n }\n }\n .sm\\:max-w-lg {\n @media (width >= 40rem) {\n max-width: var(--container-lg);\n }\n }\n .sm\\:max-w-md {\n @media (width >= 40rem) {\n max-width: var(--container-md);\n }\n }\n .sm\\:max-w-sm {\n @media (width >= 40rem) {\n max-width: var(--container-sm);\n }\n }\n .sm\\:flex-1 {\n @media (width >= 40rem) {\n flex: 1;\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\\:space-x-2 {\n @media (width >= 40rem) {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n }\n .sm\\:rounded-lg {\n @media (width >= 40rem) {\n border-radius: var(--radius);\n }\n }\n .sm\\:px-6 {\n @media (width >= 40rem) {\n padding-inline: calc(var(--spacing) * 6);\n }\n }\n .sm\\:text-left {\n @media (width >= 40rem) {\n text-align: left;\n }\n }\n .md\\:inset-auto {\n @media (width >= 48rem) {\n inset: auto;\n }\n }\n .md\\:top-1\\/2 {\n @media (width >= 48rem) {\n top: calc(1/2 * 100%);\n }\n }\n .md\\:left-1\\/2 {\n @media (width >= 48rem) {\n left: calc(1/2 * 100%);\n }\n }\n .md\\:hidden {\n @media (width >= 48rem) {\n display: none;\n }\n }\n .md\\:max-h-\\[90vh\\] {\n @media (width >= 48rem) {\n max-height: 90vh;\n }\n }\n .md\\:max-h-\\[calc\\(90vh-2rem\\)\\] {\n @media (width >= 48rem) {\n max-height: calc(90vh - 2rem);\n }\n }\n .md\\:w-full {\n @media (width >= 48rem) {\n width: 100%;\n }\n }\n .md\\:max-w-\\[500px\\] {\n @media (width >= 48rem) {\n max-width: 500px;\n }\n }\n .md\\:-translate-x-1\\/2 {\n @media (width >= 48rem) {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .md\\:-translate-y-1\\/2 {\n @media (width >= 48rem) {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:rounded-lg {\n @media (width >= 48rem) {\n border-radius: var(--radius);\n }\n }\n .md\\:border {\n @media (width >= 48rem) {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n .md\\:pt-6 {\n @media (width >= 48rem) {\n padding-top: calc(var(--spacing) * 6);\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 .lg\\:grid-cols-3 {\n @media (width >= 64rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n .lg\\:px-8 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--spacing) * 8);\n }\n }\n .dark\\:border-destructive {\n @media (prefers-color-scheme: dark) {\n border-color: hsl(var(--destructive));\n }\n }\n .dark\\:border-green-800 {\n @media (prefers-color-scheme: dark) {\n border-color: var(--color-green-800);\n }\n }\n .dark\\:bg-green-900 {\n @media (prefers-color-scheme: dark) {\n background-color: var(--color-green-900);\n }\n }\n .dark\\:bg-green-900\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);\n }\n }\n }\n .dark\\:bg-green-900\\/20 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);\n }\n }\n }\n .dark\\:bg-yellow-900\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-yellow-900) 10%, transparent);\n }\n }\n }\n .dark\\:text-green-200 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-green-200);\n }\n }\n .dark\\:text-green-300 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-green-300);\n }\n }\n .dark\\:text-green-400 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-green-400);\n }\n }\n .dark\\:text-green-500 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-green-500);\n }\n }\n .dark\\:text-yellow-500 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-yellow-500);\n }\n }\n .\\[\\&_p\\]\\:leading-relaxed {\n & p {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:size-4 {\n & svg {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_tr\\]\\:border-b {\n & tr {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n .\\[\\&_tr\\:last-child\\]\\:border-0 {\n & tr:last-child {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n .\\[\\&\\:\\:-webkit-scrollbar\\]\\:hidden {\n &::-webkit-scrollbar {\n display: none;\n }\n }\n .\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0 {\n &:has([role=checkbox]) {\n padding-right: calc(var(--spacing) * 0);\n }\n }\n .\\[\\&\\>svg\\]\\:absolute {\n &>svg {\n position: absolute;\n }\n }\n .\\[\\&\\>svg\\]\\:top-4 {\n &>svg {\n top: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\>svg\\]\\:left-4 {\n &>svg {\n left: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\>svg\\]\\:text-destructive {\n &>svg {\n color: hsl(var(--destructive));\n }\n }\n .\\[\\&\\>svg\\]\\:text-foreground {\n &>svg {\n color: hsl(var(--foreground));\n }\n }\n .\\[\\&\\>svg\\]\\:text-green-500 {\n &>svg {\n color: var(--color-green-500);\n }\n }\n .\\[\\&\\>svg\\]\\:text-yellow-500 {\n &>svg {\n color: var(--color-yellow-500);\n }\n }\n .\\[\\&\\>svg\\+div\\]\\:translate-y-\\[-3px\\] {\n &>svg+div {\n --tw-translate-y: -3px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .\\[\\&\\>svg\\~\\*\\]\\:pl-7 {\n &>svg~* {\n padding-left: calc(var(--spacing) * 7);\n }\n }\n .\\[\\&\\>tr\\]\\:last\\:border-b-0 {\n &>tr {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n }\n}\n:root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n}\n.dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n}\n@layer base {\n * {\n border-color: hsl(var(--border));\n }\n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n}\n@keyframes accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n@keyframes accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n.animate-accordion-down {\n animation: accordion-down 0.2s ease-out;\n}\n.animate-accordion-up {\n animation: accordion-up 0.2s ease-out;\n}\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "*";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "*";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "*";\n inherits: false;\n}\n@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-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}';
|
|
13
|
+
s.textContent = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-red-50: oklch(97.1% 0.013 17.38);\n --color-red-100: oklch(93.6% 0.032 17.717);\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-red-800: oklch(44.4% 0.177 26.899);\n --color-amber-50: oklch(98.7% 0.022 95.277);\n --color-amber-200: oklch(92.4% 0.12 95.746);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-yellow-50: oklch(98.7% 0.026 102.212);\n --color-yellow-100: oklch(97.3% 0.071 103.193);\n --color-yellow-500: oklch(79.5% 0.184 86.047);\n --color-yellow-600: oklch(68.1% 0.162 75.834);\n --color-yellow-800: oklch(47.6% 0.114 61.907);\n --color-yellow-900: oklch(42.1% 0.095 57.708);\n --color-green-50: oklch(98.2% 0.018 155.826);\n --color-green-100: oklch(96.2% 0.044 156.743);\n --color-green-200: oklch(92.5% 0.084 155.995);\n --color-green-500: oklch(72.3% 0.219 149.579);\n --color-green-600: oklch(62.7% 0.194 149.214);\n --color-green-800: oklch(44.8% 0.119 151.328);\n --color-green-900: oklch(39.3% 0.095 152.535);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-blue-100: oklch(93.2% 0.032 255.585);\n --color-blue-200: oklch(88.2% 0.059 254.128);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-blue-600: oklch(54.6% 0.245 262.881);\n --color-blue-700: oklch(48.8% 0.243 264.376);\n --color-purple-600: oklch(55.8% 0.288 302.321);\n --color-purple-700: oklch(49.6% 0.265 301.924);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-gray-100: oklch(96.7% 0.003 264.542);\n --color-gray-200: oklch(92.8% 0.006 264.531);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-900: oklch(21% 0.034 264.665);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-sm: 24rem;\n --container-md: 28rem;\n --container-lg: 32rem;\n --container-2xl: 42rem;\n --container-3xl: 48rem;\n --container-4xl: 56rem;\n --container-5xl: 64rem;\n --container-6xl: 72rem;\n --container-7xl: 80rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-tight: -0.025em;\n --tracking-wider: 0.05em;\n --leading-tight: 1.25;\n --leading-relaxed: 1.625;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\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 .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-x-0 {\n inset-inline: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .-top-3 {\n top: calc(var(--spacing) * -3);\n }\n .-top-4 {\n top: calc(var(--spacing) * -4);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-2 {\n top: calc(var(--spacing) * 2);\n }\n .top-3 {\n top: calc(var(--spacing) * 3);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-0\\.5 {\n right: calc(var(--spacing) * 0.5);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .isolate {\n isolation: isolate;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\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 {\n margin: calc(var(--spacing) * 0);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n .mt-0 {\n margin-top: calc(var(--spacing) * 0);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mt-16 {\n margin-top: calc(var(--spacing) * 16);\n }\n .mr-1 {\n margin-right: calc(var(--spacing) * 1);\n }\n .mr-2 {\n margin-right: 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-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .mb-8 {\n margin-bottom: calc(var(--spacing) * 8);\n }\n .mb-12 {\n margin-bottom: calc(var(--spacing) * 12);\n }\n .mb-16 {\n margin-bottom: calc(var(--spacing) * 16);\n }\n .ml-1 {\n margin-left: calc(var(--spacing) * 1);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .ml-3 {\n margin-left: calc(var(--spacing) * 3);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .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 {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .h-1\\.5 {\n height: calc(var(--spacing) * 1.5);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\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-11 {\n height: calc(var(--spacing) * 11);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-20 {\n height: calc(var(--spacing) * 20);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-\\[1px\\] {\n height: 1px;\n }\n .h-\\[480px\\] {\n height: 480px;\n }\n .h-\\[650px\\] {\n height: 650px;\n }\n .h-full {\n height: 100%;\n }\n .max-h-\\[80vh\\] {\n max-height: 80vh;\n }\n .max-h-\\[90vh\\] {\n max-height: 90vh;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[80px\\] {\n min-height: 80px;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-1\\.5 {\n width: calc(var(--spacing) * 1.5);\n }\n .w-1\\/4 {\n width: calc(1/4 * 100%);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\/4 {\n width: calc(3/4 * 100%);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-11 {\n width: calc(var(--spacing) * 11);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-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-36 {\n width: calc(var(--spacing) * 36);\n }\n .w-40 {\n width: calc(var(--spacing) * 40);\n }\n .w-44 {\n width: calc(var(--spacing) * 44);\n }\n .w-48 {\n width: calc(var(--spacing) * 48);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n .w-96 {\n width: calc(var(--spacing) * 96);\n }\n .w-\\[1px\\] {\n width: 1px;\n }\n .w-\\[450px\\] {\n width: 450px;\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-3xl {\n max-width: var(--container-3xl);\n }\n .max-w-4xl {\n max-width: var(--container-4xl);\n }\n .max-w-5xl {\n max-width: var(--container-5xl);\n }\n .max-w-7xl {\n max-width: var(--container-7xl);\n }\n .max-w-\\[800px\\] {\n max-width: 800px;\n }\n .max-w-\\[calc\\(100vw-2rem\\)\\] {\n max-width: calc(100vw - 2rem);\n }\n .max-w-lg {\n max-width: var(--container-lg);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-sm {\n max-width: var(--container-sm);\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink-0 {\n flex-shrink: 0;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .caption-bottom {\n caption-side: bottom;\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-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-5 {\n --tw-translate-x: calc(var(--spacing) * 5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .scale-105 {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-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-not-allowed {\n cursor: not-allowed;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .touch-none {\n touch-action: none;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .list-inside {\n list-style-position: inside;\n }\n .list-disc {\n list-style-type: disc;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-col-reverse {\n flex-direction: column-reverse;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-baseline {\n align-items: baseline;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\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-8 {\n gap: calc(var(--spacing) * 8);\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\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-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-x-4 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .overflow-y-hidden {\n overflow-y: hidden;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-2xl {\n border-radius: var(--radius-2xl);\n }\n .rounded-\\[inherit\\] {\n border-radius: inherit;\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-xl {\n border-radius: var(--radius-xl);\n }\n .rounded-t-\\[10px\\] {\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-amber-200 {\n border-color: var(--color-amber-200);\n }\n .border-blue-200 {\n border-color: var(--color-blue-200);\n }\n .border-blue-600 {\n border-color: var(--color-blue-600);\n }\n .border-destructive\\/50 {\n border-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, hsl(var(--destructive)) 50%, transparent);\n }\n }\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-green-200 {\n border-color: var(--color-green-200);\n }\n .border-green-500\\/50 {\n border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);\n }\n }\n .border-green-600 {\n border-color: var(--color-green-600);\n }\n .border-input {\n border-color: hsl(var(--input));\n }\n .border-primary {\n border-color: hsl(var(--primary));\n }\n .border-primary\\/20 {\n border-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);\n }\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-yellow-500\\/50 {\n border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);\n }\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .border-l-transparent {\n border-left-color: transparent;\n }\n .bg-amber-50 {\n background-color: var(--color-amber-50);\n }\n .bg-background {\n background-color: hsl(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-black\\/80 {\n background-color: color-mix(in srgb, #000 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 80%, transparent);\n }\n }\n .bg-blue-100 {\n background-color: var(--color-blue-100);\n }\n .bg-blue-600 {\n background-color: var(--color-blue-600);\n }\n .bg-border {\n background-color: hsl(var(--border));\n }\n .bg-card {\n background-color: hsl(var(--card));\n }\n .bg-destructive {\n background-color: hsl(var(--destructive));\n }\n .bg-destructive\\/10 {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 10%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-600 {\n background-color: var(--color-emerald-600);\n }\n .bg-gray-50 {\n background-color: var(--color-gray-50);\n }\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n .bg-gray-300 {\n background-color: var(--color-gray-300);\n }\n .bg-gray-400 {\n background-color: var(--color-gray-400);\n }\n .bg-gray-600 {\n background-color: var(--color-gray-600);\n }\n .bg-green-50 {\n background-color: var(--color-green-50);\n }\n .bg-green-100 {\n background-color: var(--color-green-100);\n }\n .bg-green-500 {\n background-color: var(--color-green-500);\n }\n .bg-muted {\n background-color: hsl(var(--muted));\n }\n .bg-muted-foreground\\/30 {\n background-color: hsl(var(--muted-foreground));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 30%, transparent);\n }\n }\n .bg-muted\\/50 {\n background-color: hsl(var(--muted));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);\n }\n }\n .bg-primary {\n background-color: hsl(var(--primary));\n }\n .bg-primary\\/10 {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent);\n }\n }\n .bg-red-50 {\n background-color: var(--color-red-50);\n }\n .bg-red-100 {\n background-color: var(--color-red-100);\n }\n .bg-red-500 {\n background-color: var(--color-red-500);\n }\n .bg-secondary {\n background-color: hsl(var(--secondary));\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/80 {\n background-color: color-mix(in srgb, #fff 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n }\n }\n .bg-yellow-50 {\n background-color: var(--color-yellow-50);\n }\n .bg-yellow-100 {\n background-color: var(--color-yellow-100);\n }\n .bg-yellow-500 {\n background-color: var(--color-yellow-500);\n }\n .bg-gradient-to-br {\n --tw-gradient-position: to bottom right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .bg-gradient-to-r {\n --tw-gradient-position: to right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-blue-500 {\n --tw-gradient-from: var(--color-blue-500);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .from-blue-600 {\n --tw-gradient-from: var(--color-blue-600);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-purple-600 {\n --tw-gradient-to: var(--color-purple-600);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\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 .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .p-\\[1px\\] {\n padding: 1px;\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-8 {\n padding-inline: calc(var(--spacing) * 8);\n }\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * 0.5);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-12 {\n padding-block: calc(var(--spacing) * 12);\n }\n .py-20 {\n padding-block: calc(var(--spacing) * 20);\n }\n .pt-0 {\n padding-top: calc(var(--spacing) * 0);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-6 {\n padding-top: calc(var(--spacing) * 6);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pr-6 {\n padding-right: calc(var(--spacing) * 6);\n }\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .align-middle {\n vertical-align: middle;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-tight {\n --tw-tracking: var(--tracking-tight);\n letter-spacing: var(--tracking-tight);\n }\n .tracking-wider {\n --tw-tracking: var(--tracking-wider);\n letter-spacing: var(--tracking-wider);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-amber-500 {\n color: var(--color-amber-500);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-blue-600 {\n color: var(--color-blue-600);\n }\n .text-card-foreground {\n color: hsl(var(--card-foreground));\n }\n .text-destructive {\n color: hsl(var(--destructive));\n }\n .text-destructive-foreground {\n color: hsl(var(--destructive-foreground));\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-foreground {\n color: hsl(var(--foreground));\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n .text-gray-900 {\n color: var(--color-gray-900);\n }\n .text-green-500 {\n color: var(--color-green-500);\n }\n .text-green-600 {\n color: var(--color-green-600);\n }\n .text-green-800 {\n color: var(--color-green-800);\n }\n .text-green-900 {\n color: var(--color-green-900);\n }\n .text-muted-foreground {\n color: hsl(var(--muted-foreground));\n }\n .text-primary {\n color: hsl(var(--primary));\n }\n .text-primary-foreground {\n color: hsl(var(--primary-foreground));\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-red-600 {\n color: var(--color-red-600);\n }\n .text-red-800 {\n color: var(--color-red-800);\n }\n .text-secondary-foreground {\n color: hsl(var(--secondary-foreground));\n }\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .text-yellow-600 {\n color: var(--color-yellow-600);\n }\n .text-yellow-800 {\n color: var(--color-yellow-800);\n }\n .text-yellow-900 {\n color: var(--color-yellow-900);\n }\n .uppercase {\n text-transform: uppercase;\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-25 {\n opacity: 25%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-60 {\n opacity: 60%;\n }\n .opacity-70 {\n opacity: 70%;\n }\n .opacity-75 {\n opacity: 75%;\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-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\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-0 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-2 {\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 .shadow-blue-500\\/10 {\n --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .shadow-blue-500\\/25 {\n --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n .ring-blue-600 {\n --tw-ring-color: var(--color-blue-600);\n }\n .ring-primary {\n --tw-ring-color: hsl(var(--primary));\n }\n .ring-offset-background {\n --tw-ring-offset-color: hsl(var(--background));\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .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 .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .duration-400 {\n --tw-duration: 400ms;\n transition-duration: 400ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .\\[-ms-overflow-style\\:none\\] {\n -ms-overflow-style: none;\n }\n .\\[scrollbar-width\\:none\\] {\n scrollbar-width: none;\n }\n .peer-disabled\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n .peer-disabled\\:opacity-70 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 70%;\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: hsl(var(--foreground));\n }\n }\n .placeholder\\:text-muted-foreground {\n &::placeholder {\n color: hsl(var(--muted-foreground));\n }\n }\n .checked\\:bg-primary {\n &:checked {\n background-color: hsl(var(--primary));\n }\n }\n .checked\\:text-primary-foreground {\n &:checked {\n color: hsl(var(--primary-foreground));\n }\n }\n .hover\\:-translate-y-1 {\n &:hover {\n @media (hover: hover) {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n }\n .hover\\:border-gray-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:border-primary {\n &:hover {\n @media (hover: hover) {\n border-color: hsl(var(--primary));\n }\n }\n }\n .hover\\:border-slate-300 {\n &:hover {\n @media (hover: hover) {\n border-color: var(--color-slate-300);\n }\n }\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--accent));\n }\n }\n }\n .hover\\:bg-background\\/50 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--background));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--background)) 50%, transparent);\n }\n }\n }\n }\n .hover\\:bg-blue-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-blue-700);\n }\n }\n }\n .hover\\:bg-destructive\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--destructive));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--destructive)) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-gray-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-200);\n }\n }\n }\n .hover\\:bg-gray-300 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:bg-gray-600 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-600);\n }\n }\n }\n .hover\\:bg-gray-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-700);\n }\n }\n }\n .hover\\:bg-green-500\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-green-500) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--muted));\n }\n }\n }\n .hover\\:bg-muted\\/50 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--muted));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--muted)) 50%, transparent);\n }\n }\n }\n }\n .hover\\:bg-primary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--primary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--primary)) 90%, transparent);\n }\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: hsl(var(--secondary));\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, hsl(var(--secondary)) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-200);\n }\n }\n }\n .hover\\:bg-yellow-500\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-yellow-500) 80%, transparent);\n }\n }\n }\n }\n .hover\\:from-blue-700 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-from: var(--color-blue-700);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n }\n .hover\\:to-purple-700 {\n &:hover {\n @media (hover: hover) {\n --tw-gradient-to: var(--color-purple-700);\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--accent-foreground));\n }\n }\n }\n .hover\\:text-destructive {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--destructive));\n }\n }\n }\n .hover\\:text-foreground {\n &:hover {\n @media (hover: hover) {\n color: hsl(var(--foreground));\n }\n }\n }\n .hover\\:text-gray-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-gray-700);\n }\n }\n }\n .hover\\:text-yellow-900 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-yellow-900);\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 .hover\\:shadow-lg {\n &:hover {\n @media (hover: hover) {\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 }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-blue-500 {\n &:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: hsl(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-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\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-visible\\:ring-ring {\n &:focus-visible {\n --tw-ring-color: hsl(var(--ring));\n }\n }\n .focus-visible\\:ring-offset-2 {\n &:focus-visible {\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-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\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 .data-\\[state\\=selected\\]\\:bg-muted {\n &[data-state="selected"] {\n background-color: hsl(var(--muted));\n }\n }\n .sm\\:max-w-2xl {\n @media (width >= 40rem) {\n max-width: var(--container-2xl);\n }\n }\n .sm\\:max-w-6xl {\n @media (width >= 40rem) {\n max-width: var(--container-6xl);\n }\n }\n .sm\\:max-w-\\[600px\\] {\n @media (width >= 40rem) {\n max-width: 600px;\n }\n }\n .sm\\:max-w-\\[800px\\] {\n @media (width >= 40rem) {\n max-width: 800px;\n }\n }\n .sm\\:max-w-lg {\n @media (width >= 40rem) {\n max-width: var(--container-lg);\n }\n }\n .sm\\:max-w-md {\n @media (width >= 40rem) {\n max-width: var(--container-md);\n }\n }\n .sm\\:max-w-sm {\n @media (width >= 40rem) {\n max-width: var(--container-sm);\n }\n }\n .sm\\:flex-1 {\n @media (width >= 40rem) {\n flex: 1;\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\\:space-x-2 {\n @media (width >= 40rem) {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n }\n .sm\\:rounded-lg {\n @media (width >= 40rem) {\n border-radius: var(--radius);\n }\n }\n .sm\\:px-6 {\n @media (width >= 40rem) {\n padding-inline: calc(var(--spacing) * 6);\n }\n }\n .sm\\:text-left {\n @media (width >= 40rem) {\n text-align: left;\n }\n }\n .md\\:inset-auto {\n @media (width >= 48rem) {\n inset: auto;\n }\n }\n .md\\:top-1\\/2 {\n @media (width >= 48rem) {\n top: calc(1/2 * 100%);\n }\n }\n .md\\:left-1\\/2 {\n @media (width >= 48rem) {\n left: calc(1/2 * 100%);\n }\n }\n .md\\:hidden {\n @media (width >= 48rem) {\n display: none;\n }\n }\n .md\\:max-h-\\[90vh\\] {\n @media (width >= 48rem) {\n max-height: 90vh;\n }\n }\n .md\\:max-h-\\[calc\\(90vh-2rem\\)\\] {\n @media (width >= 48rem) {\n max-height: calc(90vh - 2rem);\n }\n }\n .md\\:w-full {\n @media (width >= 48rem) {\n width: 100%;\n }\n }\n .md\\:max-w-\\[500px\\] {\n @media (width >= 48rem) {\n max-width: 500px;\n }\n }\n .md\\:-translate-x-1\\/2 {\n @media (width >= 48rem) {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .md\\:-translate-y-1\\/2 {\n @media (width >= 48rem) {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .md\\:scale-105 {\n @media (width >= 48rem) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\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\\:rounded-lg {\n @media (width >= 48rem) {\n border-radius: var(--radius);\n }\n }\n .md\\:border {\n @media (width >= 48rem) {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n }\n .md\\:pt-6 {\n @media (width >= 48rem) {\n padding-top: calc(var(--spacing) * 6);\n }\n }\n .md\\:text-5xl {\n @media (width >= 48rem) {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\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 .lg\\:grid-cols-3 {\n @media (width >= 64rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n .lg\\:px-8 {\n @media (width >= 64rem) {\n padding-inline: calc(var(--spacing) * 8);\n }\n }\n .dark\\:border-destructive {\n @media (prefers-color-scheme: dark) {\n border-color: hsl(var(--destructive));\n }\n }\n .dark\\:bg-green-900\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);\n }\n }\n }\n .dark\\:bg-yellow-900\\/10 {\n @media (prefers-color-scheme: dark) {\n background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-yellow-900) 10%, transparent);\n }\n }\n }\n .dark\\:text-green-500 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-green-500);\n }\n }\n .dark\\:text-yellow-500 {\n @media (prefers-color-scheme: dark) {\n color: var(--color-yellow-500);\n }\n }\n .\\[\\&_p\\]\\:leading-relaxed {\n & p {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:size-4 {\n & svg {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_tr\\]\\:border-b {\n & tr {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n .\\[\\&_tr\\:last-child\\]\\:border-0 {\n & tr:last-child {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n .\\[\\&\\:\\:-webkit-scrollbar\\]\\:hidden {\n &::-webkit-scrollbar {\n display: none;\n }\n }\n .\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0 {\n &:has([role=checkbox]) {\n padding-right: calc(var(--spacing) * 0);\n }\n }\n .\\[\\&\\>svg\\]\\:absolute {\n &>svg {\n position: absolute;\n }\n }\n .\\[\\&\\>svg\\]\\:top-4 {\n &>svg {\n top: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\>svg\\]\\:left-4 {\n &>svg {\n left: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\>svg\\]\\:text-destructive {\n &>svg {\n color: hsl(var(--destructive));\n }\n }\n .\\[\\&\\>svg\\]\\:text-foreground {\n &>svg {\n color: hsl(var(--foreground));\n }\n }\n .\\[\\&\\>svg\\]\\:text-green-500 {\n &>svg {\n color: var(--color-green-500);\n }\n }\n .\\[\\&\\>svg\\]\\:text-yellow-500 {\n &>svg {\n color: var(--color-yellow-500);\n }\n }\n .\\[\\&\\>svg\\+div\\]\\:translate-y-\\[-3px\\] {\n &>svg+div {\n --tw-translate-y: -3px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .\\[\\&\\>svg\\~\\*\\]\\:pl-7 {\n &>svg~* {\n padding-left: calc(var(--spacing) * 7);\n }\n }\n .\\[\\&\\>tr\\]\\:last\\:border-b-0 {\n &>tr {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n }\n}\n:root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n}\n.dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n}\n@layer base {\n * {\n border-color: hsl(var(--border));\n }\n body {\n background-color: hsl(var(--background));\n color: hsl(var(--foreground));\n }\n}\n@keyframes accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n@keyframes accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n.animate-accordion-down {\n animation: accordion-down 0.2s ease-out;\n}\n.animate-accordion-up {\n animation: accordion-up 0.2s ease-out;\n}\n@property --tw-translate-x {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-rotate-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "*";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "*";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "*";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "*";\n inherits: false;\n}\n@property --tw-tracking {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "*";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "*";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "*";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: "*";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: "*";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "*";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "*";\n inherits: false;\n}\n@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-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}';
|
|
14
14
|
document.head.appendChild(s);
|
|
15
15
|
})();
|
|
16
16
|
|
|
@@ -1080,7 +1080,7 @@ var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) =
|
|
|
1080
1080
|
if (!open) return null;
|
|
1081
1081
|
return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
|
|
1082
1082
|
/* @__PURE__ */ jsx2(DialogOverlay, {}),
|
|
1083
|
-
/* @__PURE__ */
|
|
1083
|
+
/* @__PURE__ */ jsx2(
|
|
1084
1084
|
"div",
|
|
1085
1085
|
{
|
|
1086
1086
|
ref,
|
|
@@ -1090,39 +1090,7 @@ var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) =
|
|
|
1090
1090
|
className
|
|
1091
1091
|
),
|
|
1092
1092
|
...props,
|
|
1093
|
-
children
|
|
1094
|
-
children,
|
|
1095
|
-
/* @__PURE__ */ jsxs(
|
|
1096
|
-
"button",
|
|
1097
|
-
{
|
|
1098
|
-
type: "button",
|
|
1099
|
-
onClick: () => onOpenChange(false),
|
|
1100
|
-
className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
|
|
1101
|
-
children: [
|
|
1102
|
-
/* @__PURE__ */ jsxs(
|
|
1103
|
-
"svg",
|
|
1104
|
-
{
|
|
1105
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1106
|
-
width: "24",
|
|
1107
|
-
height: "24",
|
|
1108
|
-
viewBox: "0 0 24 24",
|
|
1109
|
-
fill: "none",
|
|
1110
|
-
stroke: "currentColor",
|
|
1111
|
-
strokeWidth: "2",
|
|
1112
|
-
strokeLinecap: "round",
|
|
1113
|
-
strokeLinejoin: "round",
|
|
1114
|
-
className: "h-4 w-4",
|
|
1115
|
-
children: [
|
|
1116
|
-
/* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
|
|
1117
|
-
/* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
|
|
1118
|
-
]
|
|
1119
|
-
}
|
|
1120
|
-
),
|
|
1121
|
-
/* @__PURE__ */ jsx2("span", { className: "sr-only", children: "Close" })
|
|
1122
|
-
]
|
|
1123
|
-
}
|
|
1124
|
-
)
|
|
1125
|
-
]
|
|
1093
|
+
children
|
|
1126
1094
|
}
|
|
1127
1095
|
)
|
|
1128
1096
|
] });
|
|
@@ -1214,7 +1182,8 @@ function useCheckoutSession({
|
|
|
1214
1182
|
customer,
|
|
1215
1183
|
couponCode,
|
|
1216
1184
|
metadata,
|
|
1217
|
-
existingSubscriptionId
|
|
1185
|
+
existingSubscriptionId,
|
|
1186
|
+
adaptivePricing = true
|
|
1218
1187
|
}) {
|
|
1219
1188
|
const { client, appUrl, debug } = useBillingOS();
|
|
1220
1189
|
const [sessionId, setSessionId] = useState3(null);
|
|
@@ -1224,7 +1193,11 @@ function useCheckoutSession({
|
|
|
1224
1193
|
const initiatedForPriceRef = useRef2(null);
|
|
1225
1194
|
const createSession = async () => {
|
|
1226
1195
|
if (!enabled || !priceId || !client) return;
|
|
1227
|
-
if (debug)
|
|
1196
|
+
if (debug)
|
|
1197
|
+
console.log("[BillingOS] Creating checkout session...", {
|
|
1198
|
+
priceId,
|
|
1199
|
+
customer
|
|
1200
|
+
});
|
|
1228
1201
|
setLoading(true);
|
|
1229
1202
|
setError(null);
|
|
1230
1203
|
try {
|
|
@@ -1235,10 +1208,12 @@ function useCheckoutSession({
|
|
|
1235
1208
|
metadata,
|
|
1236
1209
|
existingSubscriptionId,
|
|
1237
1210
|
// Return URLs will be handled by postMessage instead
|
|
1238
|
-
mode: "embedded"
|
|
1211
|
+
mode: "embedded",
|
|
1212
|
+
adaptivePricing
|
|
1239
1213
|
});
|
|
1240
1214
|
setSessionId(session.id);
|
|
1241
|
-
if (debug)
|
|
1215
|
+
if (debug)
|
|
1216
|
+
console.log("[BillingOS] Checkout session created:", session.id);
|
|
1242
1217
|
const iframeUrl = `${appUrl}/embed/checkout/${session.id}`;
|
|
1243
1218
|
setSessionUrl(iframeUrl);
|
|
1244
1219
|
if (debug) console.log("[BillingOS] Iframe URL:", iframeUrl);
|
|
@@ -1377,7 +1352,8 @@ function CheckoutModal({
|
|
|
1377
1352
|
onSuccess,
|
|
1378
1353
|
onError,
|
|
1379
1354
|
onCancel,
|
|
1380
|
-
debug = false
|
|
1355
|
+
debug = false,
|
|
1356
|
+
adaptivePricing = true
|
|
1381
1357
|
}) {
|
|
1382
1358
|
const { appUrl, debug: contextDebug } = useBillingOS();
|
|
1383
1359
|
const isDebug = debug || contextDebug;
|
|
@@ -1385,19 +1361,16 @@ function CheckoutModal({
|
|
|
1385
1361
|
const [error, setError] = useState4(null);
|
|
1386
1362
|
const [iframeHeight, setIframeHeight] = useState4(600);
|
|
1387
1363
|
const iframeRef = useRef3(null);
|
|
1388
|
-
useEffect5(() => {
|
|
1389
|
-
if (isDebug) console.log("[BillingOS] CheckoutModal mounted");
|
|
1390
|
-
}, []);
|
|
1391
1364
|
const { sessionId, sessionUrl, loading, error: sessionError } = useCheckoutSession({
|
|
1392
1365
|
enabled: open,
|
|
1393
1366
|
priceId,
|
|
1394
1367
|
customer,
|
|
1395
1368
|
couponCode,
|
|
1396
1369
|
metadata,
|
|
1397
|
-
existingSubscriptionId
|
|
1370
|
+
existingSubscriptionId,
|
|
1371
|
+
adaptivePricing
|
|
1398
1372
|
});
|
|
1399
1373
|
const handleIframeMessage = useCallback3((message) => {
|
|
1400
|
-
if (isDebug) console.log("[BillingOS] Iframe message:", message.type, message);
|
|
1401
1374
|
switch (message.type) {
|
|
1402
1375
|
case "CHECKOUT_READY":
|
|
1403
1376
|
setState("ready");
|
|
@@ -1469,14 +1442,10 @@ function CheckoutModal({
|
|
|
1469
1442
|
DialogContent,
|
|
1470
1443
|
{
|
|
1471
1444
|
className: cn(
|
|
1472
|
-
"
|
|
1445
|
+
"max-w-[800px] w-full p-0 overflow-hidden",
|
|
1473
1446
|
"max-h-[90vh] relative"
|
|
1474
1447
|
),
|
|
1475
1448
|
children: [
|
|
1476
|
-
/* @__PURE__ */ jsxs2("div", { className: "absolute top-2 right-2 z-20 flex items-center gap-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-xs font-medium px-2 py-1 rounded-full shadow-lg", children: [
|
|
1477
|
-
/* @__PURE__ */ jsx4("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx4("path", { fillRule: "evenodd", d: "M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
|
|
1478
|
-
/* @__PURE__ */ jsx4("span", { children: "Secure Iframe" })
|
|
1479
|
-
] }),
|
|
1480
1449
|
showError ? /* @__PURE__ */ jsxs2("div", { className: "p-8 text-center", children: [
|
|
1481
1450
|
/* @__PURE__ */ jsx4("div", { className: "text-red-600 mb-2", children: /* @__PURE__ */ jsx4(
|
|
1482
1451
|
"svg",
|
|
@@ -1507,11 +1476,7 @@ function CheckoutModal({
|
|
|
1507
1476
|
}
|
|
1508
1477
|
)
|
|
1509
1478
|
] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
|
1510
|
-
showSpinner && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center bg-white z-10", children: /* @__PURE__ */
|
|
1511
|
-
/* @__PURE__ */ jsx4("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" }),
|
|
1512
|
-
/* @__PURE__ */ jsx4("p", { className: "mt-4 text-gray-600 font-medium", children: "Loading secure checkout..." }),
|
|
1513
|
-
/* @__PURE__ */ jsx4("p", { className: "mt-2 text-xs text-gray-500", children: "Iframe-based \u2022 PCI Compliant" })
|
|
1514
|
-
] }) }),
|
|
1479
|
+
showSpinner && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 flex items-center justify-center bg-white z-10", children: /* @__PURE__ */ jsx4("div", { className: "animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600" }) }),
|
|
1515
1480
|
sessionUrl && /* @__PURE__ */ jsx4(
|
|
1516
1481
|
CheckoutIframe,
|
|
1517
1482
|
{
|
|
@@ -1523,20 +1488,6 @@ function CheckoutModal({
|
|
|
1523
1488
|
showSpinner ? "opacity-0" : "opacity-100"
|
|
1524
1489
|
),
|
|
1525
1490
|
onLoad: () => {
|
|
1526
|
-
console.log(
|
|
1527
|
-
"%c\u2705 Iframe loaded successfully",
|
|
1528
|
-
"color: #10b981; font-weight: 600;",
|
|
1529
|
-
`
|
|
1530
|
-
URL: ${sessionUrl}`
|
|
1531
|
-
);
|
|
1532
|
-
if (debug) {
|
|
1533
|
-
console.log("[CheckoutModal] Full iframe details:", {
|
|
1534
|
-
sessionUrl,
|
|
1535
|
-
sessionId,
|
|
1536
|
-
state,
|
|
1537
|
-
height: iframeHeight
|
|
1538
|
-
});
|
|
1539
|
-
}
|
|
1540
1491
|
}
|
|
1541
1492
|
}
|
|
1542
1493
|
),
|
|
@@ -1604,6 +1555,7 @@ var CheckoutAPI = class {
|
|
|
1604
1555
|
metadata: options.metadata,
|
|
1605
1556
|
theme: options.theme,
|
|
1606
1557
|
locale: options.locale,
|
|
1558
|
+
adaptivePricing: options.adaptivePricing ?? true,
|
|
1607
1559
|
onSuccess: (subscription) => {
|
|
1608
1560
|
if (options.onSuccess) {
|
|
1609
1561
|
options.onSuccess(subscription);
|
|
@@ -2852,9 +2804,38 @@ function Skeleton({
|
|
|
2852
2804
|
);
|
|
2853
2805
|
}
|
|
2854
2806
|
|
|
2807
|
+
// src/components/ui/switch.tsx
|
|
2808
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
2809
|
+
function Switch({ checked, onCheckedChange, className, ...props }) {
|
|
2810
|
+
return /* @__PURE__ */ jsx20(
|
|
2811
|
+
"button",
|
|
2812
|
+
{
|
|
2813
|
+
type: "button",
|
|
2814
|
+
role: "switch",
|
|
2815
|
+
"aria-checked": checked,
|
|
2816
|
+
onClick: () => onCheckedChange(!checked),
|
|
2817
|
+
className: cn(
|
|
2818
|
+
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
2819
|
+
checked ? "bg-blue-600" : "bg-gray-300",
|
|
2820
|
+
className
|
|
2821
|
+
),
|
|
2822
|
+
...props,
|
|
2823
|
+
children: /* @__PURE__ */ jsx20(
|
|
2824
|
+
"span",
|
|
2825
|
+
{
|
|
2826
|
+
className: cn(
|
|
2827
|
+
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
|
|
2828
|
+
checked ? "translate-x-5" : "translate-x-0"
|
|
2829
|
+
)
|
|
2830
|
+
}
|
|
2831
|
+
)
|
|
2832
|
+
}
|
|
2833
|
+
);
|
|
2834
|
+
}
|
|
2835
|
+
|
|
2855
2836
|
// src/components/ui/tabs.tsx
|
|
2856
2837
|
import * as React18 from "react";
|
|
2857
|
-
import { jsx as
|
|
2838
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
2858
2839
|
var TabsContext = React18.createContext(null);
|
|
2859
2840
|
function useTabsContext() {
|
|
2860
2841
|
const context = React18.useContext(TabsContext);
|
|
@@ -2868,11 +2849,11 @@ var Tabs = React18.forwardRef(
|
|
|
2868
2849
|
const [internalValue, setInternalValue] = React18.useState(defaultValue ?? "");
|
|
2869
2850
|
const currentValue = value ?? internalValue;
|
|
2870
2851
|
const handleValueChange = onValueChange ?? setInternalValue;
|
|
2871
|
-
return /* @__PURE__ */
|
|
2852
|
+
return /* @__PURE__ */ jsx21(TabsContext.Provider, { value: { value: currentValue, onValueChange: handleValueChange }, children: /* @__PURE__ */ jsx21("div", { ref, className: cn("", className), ...props, children }) });
|
|
2872
2853
|
}
|
|
2873
2854
|
);
|
|
2874
2855
|
Tabs.displayName = "Tabs";
|
|
2875
|
-
var TabsList = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
2856
|
+
var TabsList = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
|
|
2876
2857
|
"div",
|
|
2877
2858
|
{
|
|
2878
2859
|
ref,
|
|
@@ -2889,7 +2870,7 @@ var TabsTrigger = React18.forwardRef(
|
|
|
2889
2870
|
({ className, value, ...props }, ref) => {
|
|
2890
2871
|
const { value: currentValue, onValueChange } = useTabsContext();
|
|
2891
2872
|
const isSelected = currentValue === value;
|
|
2892
|
-
return /* @__PURE__ */
|
|
2873
|
+
return /* @__PURE__ */ jsx21(
|
|
2893
2874
|
"button",
|
|
2894
2875
|
{
|
|
2895
2876
|
ref,
|
|
@@ -2914,7 +2895,7 @@ var TabsContent = React18.forwardRef(
|
|
|
2914
2895
|
const { value: currentValue } = useTabsContext();
|
|
2915
2896
|
const isSelected = currentValue === value;
|
|
2916
2897
|
if (!isSelected) return null;
|
|
2917
|
-
return /* @__PURE__ */
|
|
2898
|
+
return /* @__PURE__ */ jsx21(
|
|
2918
2899
|
"div",
|
|
2919
2900
|
{
|
|
2920
2901
|
ref,
|
|
@@ -2934,9 +2915,9 @@ TabsContent.displayName = "TabsContent";
|
|
|
2934
2915
|
|
|
2935
2916
|
// src/components/ui/textarea.tsx
|
|
2936
2917
|
import * as React19 from "react";
|
|
2937
|
-
import { jsx as
|
|
2918
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
2938
2919
|
var Textarea = React19.forwardRef(({ className, ...props }, ref) => {
|
|
2939
|
-
return /* @__PURE__ */
|
|
2920
|
+
return /* @__PURE__ */ jsx22(
|
|
2940
2921
|
"textarea",
|
|
2941
2922
|
{
|
|
2942
2923
|
className: cn(
|
|
@@ -2951,14 +2932,14 @@ var Textarea = React19.forwardRef(({ className, ...props }, ref) => {
|
|
|
2951
2932
|
Textarea.displayName = "Textarea";
|
|
2952
2933
|
|
|
2953
2934
|
// src/components/CustomerPortal/CustomerPortal.tsx
|
|
2954
|
-
import { useState as useState17, useEffect as
|
|
2935
|
+
import { useState as useState17, useEffect as useEffect13, useRef as useRef6, useCallback as useCallback8 } from "react";
|
|
2955
2936
|
|
|
2956
2937
|
// src/components/CustomerPortal/PortalIframe.tsx
|
|
2957
2938
|
import { forwardRef as forwardRef18 } from "react";
|
|
2958
|
-
import { jsx as
|
|
2939
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
2959
2940
|
var PortalIframe = forwardRef18(
|
|
2960
2941
|
({ src, height = 600, className, onLoad }, ref) => {
|
|
2961
|
-
return /* @__PURE__ */
|
|
2942
|
+
return /* @__PURE__ */ jsx23(
|
|
2962
2943
|
"iframe",
|
|
2963
2944
|
{
|
|
2964
2945
|
ref,
|
|
@@ -3084,87 +3065,9 @@ function usePortalMessaging({
|
|
|
3084
3065
|
}
|
|
3085
3066
|
|
|
3086
3067
|
// src/components/PricingTable/PricingTable.tsx
|
|
3087
|
-
import * as
|
|
3068
|
+
import * as React24 from "react";
|
|
3088
3069
|
import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
|
|
3089
3070
|
|
|
3090
|
-
// src/components/ui/table.tsx
|
|
3091
|
-
import * as React20 from "react";
|
|
3092
|
-
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
3093
|
-
var Table = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx23(
|
|
3094
|
-
"table",
|
|
3095
|
-
{
|
|
3096
|
-
ref,
|
|
3097
|
-
className: cn("w-full caption-bottom text-sm", className),
|
|
3098
|
-
...props
|
|
3099
|
-
}
|
|
3100
|
-
) }));
|
|
3101
|
-
Table.displayName = "Table";
|
|
3102
|
-
var TableHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
|
|
3103
|
-
TableHeader.displayName = "TableHeader";
|
|
3104
|
-
var TableBody = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3105
|
-
"tbody",
|
|
3106
|
-
{
|
|
3107
|
-
ref,
|
|
3108
|
-
className: cn("[&_tr:last-child]:border-0", className),
|
|
3109
|
-
...props
|
|
3110
|
-
}
|
|
3111
|
-
));
|
|
3112
|
-
TableBody.displayName = "TableBody";
|
|
3113
|
-
var TableFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3114
|
-
"tfoot",
|
|
3115
|
-
{
|
|
3116
|
-
ref,
|
|
3117
|
-
className: cn(
|
|
3118
|
-
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
3119
|
-
className
|
|
3120
|
-
),
|
|
3121
|
-
...props
|
|
3122
|
-
}
|
|
3123
|
-
));
|
|
3124
|
-
TableFooter.displayName = "TableFooter";
|
|
3125
|
-
var TableRow = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3126
|
-
"tr",
|
|
3127
|
-
{
|
|
3128
|
-
ref,
|
|
3129
|
-
className: cn(
|
|
3130
|
-
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
3131
|
-
className
|
|
3132
|
-
),
|
|
3133
|
-
...props
|
|
3134
|
-
}
|
|
3135
|
-
));
|
|
3136
|
-
TableRow.displayName = "TableRow";
|
|
3137
|
-
var TableHead = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3138
|
-
"th",
|
|
3139
|
-
{
|
|
3140
|
-
ref,
|
|
3141
|
-
className: cn(
|
|
3142
|
-
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
3143
|
-
className
|
|
3144
|
-
),
|
|
3145
|
-
...props
|
|
3146
|
-
}
|
|
3147
|
-
));
|
|
3148
|
-
TableHead.displayName = "TableHead";
|
|
3149
|
-
var TableCell = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3150
|
-
"td",
|
|
3151
|
-
{
|
|
3152
|
-
ref,
|
|
3153
|
-
className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
|
|
3154
|
-
...props
|
|
3155
|
-
}
|
|
3156
|
-
));
|
|
3157
|
-
TableCell.displayName = "TableCell";
|
|
3158
|
-
var TableCaption = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
|
|
3159
|
-
"caption",
|
|
3160
|
-
{
|
|
3161
|
-
ref,
|
|
3162
|
-
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
3163
|
-
...props
|
|
3164
|
-
}
|
|
3165
|
-
));
|
|
3166
|
-
TableCaption.displayName = "TableCaption";
|
|
3167
|
-
|
|
3168
3071
|
// src/components/PricingTable/hooks/useProducts.ts
|
|
3169
3072
|
import { useQuery as useQuery5 } from "@tanstack/react-query";
|
|
3170
3073
|
function useProducts2(options = {}) {
|
|
@@ -3183,16 +3086,152 @@ function useProducts2(options = {}) {
|
|
|
3183
3086
|
});
|
|
3184
3087
|
}
|
|
3185
3088
|
|
|
3089
|
+
// src/components/PricingTable/PricingCard.tsx
|
|
3090
|
+
import { Check, X } from "lucide-react";
|
|
3091
|
+
import { jsx as jsx24, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
3092
|
+
function formatPrice(price) {
|
|
3093
|
+
const amount = price.amount / 100;
|
|
3094
|
+
return amount % 1 === 0 ? `$${amount.toFixed(0)}` : `$${amount.toFixed(2)}`;
|
|
3095
|
+
}
|
|
3096
|
+
function formatLimit(limit, unit) {
|
|
3097
|
+
if (!limit) return null;
|
|
3098
|
+
const n = limit >= 1e3 ? `${(limit / 1e3).toFixed(limit % 1e3 === 0 ? 0 : 1)}k` : limit.toLocaleString();
|
|
3099
|
+
return unit ? `${n} ${unit}` : n;
|
|
3100
|
+
}
|
|
3101
|
+
function getYearlySavings(monthly, yearly) {
|
|
3102
|
+
const yearlyFromMonthly = monthly * 12;
|
|
3103
|
+
return Math.round((yearlyFromMonthly - yearly) / yearlyFromMonthly * 100);
|
|
3104
|
+
}
|
|
3105
|
+
function PricingCard({
|
|
3106
|
+
product,
|
|
3107
|
+
allFeatures,
|
|
3108
|
+
isYearly,
|
|
3109
|
+
currentSubscription,
|
|
3110
|
+
currentPlanAmount,
|
|
3111
|
+
onSelectPlan
|
|
3112
|
+
}) {
|
|
3113
|
+
const monthlyPrice = product.prices.find((p) => p.interval === "month");
|
|
3114
|
+
const yearlyPrice = product.prices.find((p) => p.interval === "year");
|
|
3115
|
+
const currentPrice = isYearly && yearlyPrice ? yearlyPrice : monthlyPrice;
|
|
3116
|
+
const savings = monthlyPrice && yearlyPrice ? getYearlySavings(monthlyPrice.amount, yearlyPrice.amount) : 0;
|
|
3117
|
+
const isHighlighted = product.highlighted || product.isCurrentPlan;
|
|
3118
|
+
const isFree = (monthlyPrice?.amount ?? 0) === 0;
|
|
3119
|
+
const getButtonLabel = () => {
|
|
3120
|
+
if (product.isCurrentPlan) return "Current Plan";
|
|
3121
|
+
if (!currentSubscription) return isFree ? "Get Started Free" : "Get Started";
|
|
3122
|
+
const thisAmount = currentPrice?.amount ?? 0;
|
|
3123
|
+
if (thisAmount > currentPlanAmount) return "Upgrade Now";
|
|
3124
|
+
if (thisAmount < currentPlanAmount) return "Downgrade";
|
|
3125
|
+
return "Switch Plan";
|
|
3126
|
+
};
|
|
3127
|
+
const handleClick = () => {
|
|
3128
|
+
if (!product.isCurrentPlan && currentPrice) {
|
|
3129
|
+
onSelectPlan(currentPrice.id);
|
|
3130
|
+
}
|
|
3131
|
+
};
|
|
3132
|
+
return /* @__PURE__ */ jsxs6(
|
|
3133
|
+
"div",
|
|
3134
|
+
{
|
|
3135
|
+
className: cn(
|
|
3136
|
+
"relative rounded-2xl border bg-white p-8 transition-all duration-300",
|
|
3137
|
+
isHighlighted ? "border-blue-200 ring-2 ring-blue-600 shadow-xl shadow-blue-500/10 md:scale-105 z-10" : "border-slate-200 hover:border-slate-300 hover:shadow-lg hover:-translate-y-1"
|
|
3138
|
+
),
|
|
3139
|
+
children: [
|
|
3140
|
+
(product.highlighted || product.isCurrentPlan) && /* @__PURE__ */ jsx24("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx24(
|
|
3141
|
+
Badge,
|
|
3142
|
+
{
|
|
3143
|
+
className: cn(
|
|
3144
|
+
"border-0 px-4 py-1 text-xs font-semibold",
|
|
3145
|
+
product.isCurrentPlan ? "bg-emerald-600 text-white" : "bg-blue-600 text-white"
|
|
3146
|
+
),
|
|
3147
|
+
children: product.isCurrentPlan ? "Current Plan" : "Most Popular"
|
|
3148
|
+
}
|
|
3149
|
+
) }),
|
|
3150
|
+
/* @__PURE__ */ jsxs6("div", { className: "mb-6", children: [
|
|
3151
|
+
/* @__PURE__ */ jsx24("h3", { className: "text-xl font-semibold text-slate-900 mb-1", children: product.name }),
|
|
3152
|
+
product.description && /* @__PURE__ */ jsx24("p", { className: "text-sm text-slate-500", children: product.description })
|
|
3153
|
+
] }),
|
|
3154
|
+
/* @__PURE__ */ jsxs6("div", { className: "mb-6", children: [
|
|
3155
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-baseline gap-1", children: [
|
|
3156
|
+
/* @__PURE__ */ jsx24("span", { className: "text-4xl font-bold text-slate-900", children: currentPrice ? formatPrice(currentPrice) : "$0" }),
|
|
3157
|
+
/* @__PURE__ */ jsx24("span", { className: "text-slate-500 text-sm", children: isYearly ? "/year" : "/mo" })
|
|
3158
|
+
] }),
|
|
3159
|
+
isYearly && savings > 0 && /* @__PURE__ */ jsxs6("p", { className: "text-sm text-emerald-600 font-medium mt-1", children: [
|
|
3160
|
+
"Save ",
|
|
3161
|
+
savings,
|
|
3162
|
+
"% yearly"
|
|
3163
|
+
] }),
|
|
3164
|
+
!isYearly && yearlyPrice && savings > 0 && /* @__PURE__ */ jsxs6("p", { className: "text-sm text-slate-400 mt-1", children: [
|
|
3165
|
+
"Switch to yearly & save ",
|
|
3166
|
+
savings,
|
|
3167
|
+
"%"
|
|
3168
|
+
] })
|
|
3169
|
+
] }),
|
|
3170
|
+
product.trialDays > 0 && !product.isCurrentPlan && /* @__PURE__ */ jsx24("div", { className: "mb-6", children: /* @__PURE__ */ jsxs6(Badge, { variant: "outline", className: "bg-amber-50 text-amber-700 border-amber-200", children: [
|
|
3171
|
+
product.trialDays,
|
|
3172
|
+
"-day free trial"
|
|
3173
|
+
] }) }),
|
|
3174
|
+
/* @__PURE__ */ jsx24(
|
|
3175
|
+
Button,
|
|
3176
|
+
{
|
|
3177
|
+
disabled: product.isCurrentPlan,
|
|
3178
|
+
onClick: handleClick,
|
|
3179
|
+
className: cn(
|
|
3180
|
+
"w-full mb-8 h-11 rounded-xl font-medium transition-all border-0",
|
|
3181
|
+
product.isCurrentPlan ? "bg-slate-100 text-slate-400 cursor-not-allowed hover:bg-slate-100" : isHighlighted ? "bg-blue-600 hover:bg-blue-700 text-white shadow-md shadow-blue-500/25" : "bg-slate-100 hover:bg-slate-200 text-slate-700"
|
|
3182
|
+
),
|
|
3183
|
+
children: getButtonLabel()
|
|
3184
|
+
}
|
|
3185
|
+
),
|
|
3186
|
+
/* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
|
|
3187
|
+
/* @__PURE__ */ jsx24("p", { className: "text-xs font-semibold uppercase tracking-wider text-slate-400", children: "What's included" }),
|
|
3188
|
+
/* @__PURE__ */ jsx24("ul", { className: "space-y-3", children: allFeatures.map((featureMeta) => {
|
|
3189
|
+
const productFeature = product.features.find((f) => f.name === featureMeta.name);
|
|
3190
|
+
const hasFeature = !!productFeature;
|
|
3191
|
+
const limit = productFeature?.properties?.limit;
|
|
3192
|
+
const unit = productFeature?.properties?.unit;
|
|
3193
|
+
const displayValue = hasFeature && typeof limit === "number" && limit !== -1 ? formatLimit(limit, unit) : null;
|
|
3194
|
+
return /* @__PURE__ */ jsxs6(
|
|
3195
|
+
"li",
|
|
3196
|
+
{
|
|
3197
|
+
className: cn(
|
|
3198
|
+
"flex items-center gap-3 text-sm",
|
|
3199
|
+
hasFeature ? "text-slate-700" : "text-slate-300"
|
|
3200
|
+
),
|
|
3201
|
+
children: [
|
|
3202
|
+
/* @__PURE__ */ jsx24(
|
|
3203
|
+
"div",
|
|
3204
|
+
{
|
|
3205
|
+
className: cn(
|
|
3206
|
+
"flex items-center justify-center w-5 h-5 rounded-full flex-shrink-0",
|
|
3207
|
+
hasFeature ? "bg-blue-100" : "bg-slate-100"
|
|
3208
|
+
),
|
|
3209
|
+
children: hasFeature ? /* @__PURE__ */ jsx24(Check, { className: "w-3 h-3 text-blue-600" }) : /* @__PURE__ */ jsx24(X, { className: "w-3 h-3 text-slate-400" })
|
|
3210
|
+
}
|
|
3211
|
+
),
|
|
3212
|
+
/* @__PURE__ */ jsx24("span", { className: "flex-1", children: limit === -1 ? `Unlimited ${featureMeta.title}` : featureMeta.title }),
|
|
3213
|
+
displayValue && /* @__PURE__ */ jsx24("span", { className: "flex-shrink-0 text-xs bg-slate-100 text-slate-500 font-medium px-2 py-0.5 rounded", children: displayValue })
|
|
3214
|
+
]
|
|
3215
|
+
},
|
|
3216
|
+
featureMeta.name
|
|
3217
|
+
);
|
|
3218
|
+
}) })
|
|
3219
|
+
] })
|
|
3220
|
+
]
|
|
3221
|
+
}
|
|
3222
|
+
);
|
|
3223
|
+
}
|
|
3224
|
+
|
|
3186
3225
|
// src/components/PaymentBottomSheet/PaymentBottomSheet.tsx
|
|
3187
|
-
import * as
|
|
3226
|
+
import * as React23 from "react";
|
|
3188
3227
|
import { loadStripe } from "@stripe/stripe-js";
|
|
3189
3228
|
import { Elements } from "@stripe/react-stripe-js";
|
|
3190
3229
|
import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
|
|
3191
3230
|
|
|
3192
3231
|
// src/components/ErrorBoundary.tsx
|
|
3193
|
-
import * as
|
|
3194
|
-
import { jsx as
|
|
3195
|
-
var ErrorBoundary = class extends
|
|
3232
|
+
import * as React20 from "react";
|
|
3233
|
+
import { jsx as jsx25, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
3234
|
+
var ErrorBoundary = class extends React20.Component {
|
|
3196
3235
|
constructor(props) {
|
|
3197
3236
|
super(props);
|
|
3198
3237
|
__publicField(this, "reset", () => {
|
|
@@ -3213,7 +3252,7 @@ var ErrorBoundary = class extends React21.Component {
|
|
|
3213
3252
|
if (this.props.fallback) {
|
|
3214
3253
|
return this.props.fallback(this.state.error, this.reset);
|
|
3215
3254
|
}
|
|
3216
|
-
return /* @__PURE__ */
|
|
3255
|
+
return /* @__PURE__ */ jsxs7("div", { style: {
|
|
3217
3256
|
padding: "20px",
|
|
3218
3257
|
border: "1px solid #ef4444",
|
|
3219
3258
|
borderRadius: "8px",
|
|
@@ -3221,9 +3260,9 @@ var ErrorBoundary = class extends React21.Component {
|
|
|
3221
3260
|
color: "#991b1b",
|
|
3222
3261
|
fontFamily: "system-ui, -apple-system, sans-serif"
|
|
3223
3262
|
}, children: [
|
|
3224
|
-
/* @__PURE__ */
|
|
3225
|
-
/* @__PURE__ */
|
|
3226
|
-
/* @__PURE__ */
|
|
3263
|
+
/* @__PURE__ */ jsx25("h3", { style: { margin: "0 0 10px 0", fontSize: "16px", fontWeight: "bold" }, children: "Payment Error" }),
|
|
3264
|
+
/* @__PURE__ */ jsx25("p", { style: { margin: "0 0 10px 0", fontSize: "14px" }, children: this.state.error?.message || "An unexpected error occurred while loading the payment form." }),
|
|
3265
|
+
/* @__PURE__ */ jsx25(
|
|
3227
3266
|
"button",
|
|
3228
3267
|
{
|
|
3229
3268
|
onClick: this.reset,
|
|
@@ -3286,14 +3325,14 @@ function useConfirmCheckout(options) {
|
|
|
3286
3325
|
}
|
|
3287
3326
|
|
|
3288
3327
|
// src/components/PaymentBottomSheet/PaymentForm.tsx
|
|
3289
|
-
import * as
|
|
3328
|
+
import * as React21 from "react";
|
|
3290
3329
|
import {
|
|
3291
3330
|
PaymentElement,
|
|
3292
3331
|
ExpressCheckoutElement,
|
|
3293
3332
|
useStripe,
|
|
3294
3333
|
useElements
|
|
3295
3334
|
} from "@stripe/react-stripe-js";
|
|
3296
|
-
import { jsx as
|
|
3335
|
+
import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
3297
3336
|
function PaymentForm({
|
|
3298
3337
|
checkoutSession,
|
|
3299
3338
|
onSuccess,
|
|
@@ -3304,8 +3343,8 @@ function PaymentForm({
|
|
|
3304
3343
|
const { client } = useBillingOS();
|
|
3305
3344
|
const stripe = useStripe();
|
|
3306
3345
|
const elements = useElements();
|
|
3307
|
-
const [error, setError] =
|
|
3308
|
-
const [isExpressCheckoutReady, setIsExpressCheckoutReady] =
|
|
3346
|
+
const [error, setError] = React21.useState(null);
|
|
3347
|
+
const [isExpressCheckoutReady, setIsExpressCheckoutReady] = React21.useState(false);
|
|
3309
3348
|
const formatAmount = (cents, currency) => {
|
|
3310
3349
|
return new Intl.NumberFormat("en-US", {
|
|
3311
3350
|
style: "currency",
|
|
@@ -3392,8 +3431,8 @@ function PaymentForm({
|
|
|
3392
3431
|
setIsProcessing(false);
|
|
3393
3432
|
}
|
|
3394
3433
|
};
|
|
3395
|
-
return /* @__PURE__ */
|
|
3396
|
-
/* @__PURE__ */
|
|
3434
|
+
return /* @__PURE__ */ jsxs8("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
|
|
3435
|
+
/* @__PURE__ */ jsx26("div", { className: cn(!isExpressCheckoutReady && "hidden"), children: /* @__PURE__ */ jsx26(
|
|
3397
3436
|
ExpressCheckoutElement,
|
|
3398
3437
|
{
|
|
3399
3438
|
options: {
|
|
@@ -3406,11 +3445,11 @@ function PaymentForm({
|
|
|
3406
3445
|
onReady: () => setIsExpressCheckoutReady(true)
|
|
3407
3446
|
}
|
|
3408
3447
|
) }),
|
|
3409
|
-
isExpressCheckoutReady && /* @__PURE__ */
|
|
3410
|
-
/* @__PURE__ */
|
|
3411
|
-
/* @__PURE__ */
|
|
3448
|
+
isExpressCheckoutReady && /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
|
|
3449
|
+
/* @__PURE__ */ jsx26("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx26(Separator, { className: "w-full" }) }),
|
|
3450
|
+
/* @__PURE__ */ jsx26("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx26("span", { className: "bg-background px-2 text-muted-foreground", children: "or pay with card" }) })
|
|
3412
3451
|
] }),
|
|
3413
|
-
/* @__PURE__ */
|
|
3452
|
+
/* @__PURE__ */ jsx26("div", { className: "space-y-4", children: /* @__PURE__ */ jsx26(
|
|
3414
3453
|
PaymentElement,
|
|
3415
3454
|
{
|
|
3416
3455
|
options: {
|
|
@@ -3418,16 +3457,16 @@ function PaymentForm({
|
|
|
3418
3457
|
}
|
|
3419
3458
|
}
|
|
3420
3459
|
) }),
|
|
3421
|
-
error && /* @__PURE__ */
|
|
3422
|
-
/* @__PURE__ */
|
|
3460
|
+
error && /* @__PURE__ */ jsx26(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx26(AlertDescription, { children: error }) }),
|
|
3461
|
+
/* @__PURE__ */ jsx26(
|
|
3423
3462
|
Button,
|
|
3424
3463
|
{
|
|
3425
3464
|
type: "submit",
|
|
3426
3465
|
className: "w-full",
|
|
3427
3466
|
size: "lg",
|
|
3428
3467
|
disabled: !stripe || isProcessing,
|
|
3429
|
-
children: isProcessing ? /* @__PURE__ */
|
|
3430
|
-
/* @__PURE__ */
|
|
3468
|
+
children: isProcessing ? /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-2", children: [
|
|
3469
|
+
/* @__PURE__ */ jsxs8(
|
|
3431
3470
|
"svg",
|
|
3432
3471
|
{
|
|
3433
3472
|
className: "animate-spin h-4 w-4",
|
|
@@ -3435,7 +3474,7 @@ function PaymentForm({
|
|
|
3435
3474
|
fill: "none",
|
|
3436
3475
|
viewBox: "0 0 24 24",
|
|
3437
3476
|
children: [
|
|
3438
|
-
/* @__PURE__ */
|
|
3477
|
+
/* @__PURE__ */ jsx26(
|
|
3439
3478
|
"circle",
|
|
3440
3479
|
{
|
|
3441
3480
|
className: "opacity-25",
|
|
@@ -3446,7 +3485,7 @@ function PaymentForm({
|
|
|
3446
3485
|
strokeWidth: "4"
|
|
3447
3486
|
}
|
|
3448
3487
|
),
|
|
3449
|
-
/* @__PURE__ */
|
|
3488
|
+
/* @__PURE__ */ jsx26(
|
|
3450
3489
|
"path",
|
|
3451
3490
|
{
|
|
3452
3491
|
className: "opacity-75",
|
|
@@ -3461,8 +3500,8 @@ function PaymentForm({
|
|
|
3461
3500
|
] }) : checkoutSession.proration ? `Upgrade Now - ${formattedAmount}` : `Subscribe - ${formattedAmount}`
|
|
3462
3501
|
}
|
|
3463
3502
|
),
|
|
3464
|
-
/* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3503
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
|
|
3504
|
+
/* @__PURE__ */ jsxs8(
|
|
3466
3505
|
"svg",
|
|
3467
3506
|
{
|
|
3468
3507
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3475,28 +3514,28 @@ function PaymentForm({
|
|
|
3475
3514
|
strokeLinecap: "round",
|
|
3476
3515
|
strokeLinejoin: "round",
|
|
3477
3516
|
children: [
|
|
3478
|
-
/* @__PURE__ */
|
|
3479
|
-
/* @__PURE__ */
|
|
3517
|
+
/* @__PURE__ */ jsx26("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
|
|
3518
|
+
/* @__PURE__ */ jsx26("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
|
|
3480
3519
|
]
|
|
3481
3520
|
}
|
|
3482
3521
|
),
|
|
3483
|
-
/* @__PURE__ */
|
|
3522
|
+
/* @__PURE__ */ jsx26("span", { children: "Secured by Stripe \u2022 Cancel anytime" })
|
|
3484
3523
|
] })
|
|
3485
3524
|
] });
|
|
3486
3525
|
}
|
|
3487
3526
|
|
|
3488
3527
|
// src/components/PaymentBottomSheet/DemoPaymentForm.tsx
|
|
3489
|
-
import * as
|
|
3490
|
-
import { jsx as
|
|
3528
|
+
import * as React22 from "react";
|
|
3529
|
+
import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3491
3530
|
function DemoPaymentForm({
|
|
3492
3531
|
checkoutSession,
|
|
3493
3532
|
onSuccess,
|
|
3494
3533
|
isProcessing,
|
|
3495
3534
|
setIsProcessing
|
|
3496
3535
|
}) {
|
|
3497
|
-
const [cardNumber, setCardNumber] =
|
|
3498
|
-
const [expiry, setExpiry] =
|
|
3499
|
-
const [cvc, setCvc] =
|
|
3536
|
+
const [cardNumber, setCardNumber] = React22.useState("");
|
|
3537
|
+
const [expiry, setExpiry] = React22.useState("");
|
|
3538
|
+
const [cvc, setCvc] = React22.useState("");
|
|
3500
3539
|
const formatAmount = (cents, currency) => {
|
|
3501
3540
|
return new Intl.NumberFormat("en-US", {
|
|
3502
3541
|
style: "currency",
|
|
@@ -3523,9 +3562,9 @@ function DemoPaymentForm({
|
|
|
3523
3562
|
await new Promise((resolve) => setTimeout(resolve, 2e3));
|
|
3524
3563
|
onSuccess(`sub_demo_${Date.now()}`);
|
|
3525
3564
|
};
|
|
3526
|
-
return /* @__PURE__ */
|
|
3527
|
-
/* @__PURE__ */
|
|
3528
|
-
/* @__PURE__ */
|
|
3565
|
+
return /* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
|
|
3566
|
+
/* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-3", children: [
|
|
3567
|
+
/* @__PURE__ */ jsxs9(
|
|
3529
3568
|
Button,
|
|
3530
3569
|
{
|
|
3531
3570
|
type: "button",
|
|
@@ -3537,12 +3576,12 @@ function DemoPaymentForm({
|
|
|
3537
3576
|
setTimeout(() => onSuccess(`sub_demo_apple_${Date.now()}`), 2e3);
|
|
3538
3577
|
},
|
|
3539
3578
|
children: [
|
|
3540
|
-
/* @__PURE__ */
|
|
3579
|
+
/* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", className: "w-5 h-5 mr-2", fill: "currentColor", children: /* @__PURE__ */ jsx27("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) }),
|
|
3541
3580
|
"Apple Pay"
|
|
3542
3581
|
]
|
|
3543
3582
|
}
|
|
3544
3583
|
),
|
|
3545
|
-
/* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsxs9(
|
|
3546
3585
|
Button,
|
|
3547
3586
|
{
|
|
3548
3587
|
type: "button",
|
|
@@ -3554,25 +3593,25 @@ function DemoPaymentForm({
|
|
|
3554
3593
|
setTimeout(() => onSuccess(`sub_demo_google_${Date.now()}`), 2e3);
|
|
3555
3594
|
},
|
|
3556
3595
|
children: [
|
|
3557
|
-
/* @__PURE__ */
|
|
3558
|
-
/* @__PURE__ */
|
|
3559
|
-
/* @__PURE__ */
|
|
3560
|
-
/* @__PURE__ */
|
|
3561
|
-
/* @__PURE__ */
|
|
3596
|
+
/* @__PURE__ */ jsxs9("svg", { viewBox: "0 0 24 24", className: "w-5 h-5 mr-2", children: [
|
|
3597
|
+
/* @__PURE__ */ jsx27("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
|
|
3598
|
+
/* @__PURE__ */ jsx27("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
|
|
3599
|
+
/* @__PURE__ */ jsx27("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
|
|
3600
|
+
/* @__PURE__ */ jsx27("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
|
|
3562
3601
|
] }),
|
|
3563
3602
|
"Google Pay"
|
|
3564
3603
|
]
|
|
3565
3604
|
}
|
|
3566
3605
|
)
|
|
3567
3606
|
] }),
|
|
3568
|
-
/* @__PURE__ */
|
|
3569
|
-
/* @__PURE__ */
|
|
3570
|
-
/* @__PURE__ */
|
|
3607
|
+
/* @__PURE__ */ jsxs9("div", { className: "relative", children: [
|
|
3608
|
+
/* @__PURE__ */ jsx27("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx27("span", { className: "w-full border-t" }) }),
|
|
3609
|
+
/* @__PURE__ */ jsx27("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx27("span", { className: "bg-background px-2 text-muted-foreground", children: "or pay with card" }) })
|
|
3571
3610
|
] }),
|
|
3572
|
-
/* @__PURE__ */
|
|
3573
|
-
/* @__PURE__ */
|
|
3574
|
-
/* @__PURE__ */
|
|
3575
|
-
/* @__PURE__ */
|
|
3611
|
+
/* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
|
|
3612
|
+
/* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
|
|
3613
|
+
/* @__PURE__ */ jsx27(Label, { htmlFor: "card-number", children: "Card number" }),
|
|
3614
|
+
/* @__PURE__ */ jsx27(
|
|
3576
3615
|
Input,
|
|
3577
3616
|
{
|
|
3578
3617
|
id: "card-number",
|
|
@@ -3584,10 +3623,10 @@ function DemoPaymentForm({
|
|
|
3584
3623
|
}
|
|
3585
3624
|
)
|
|
3586
3625
|
] }),
|
|
3587
|
-
/* @__PURE__ */
|
|
3588
|
-
/* @__PURE__ */
|
|
3589
|
-
/* @__PURE__ */
|
|
3590
|
-
/* @__PURE__ */
|
|
3626
|
+
/* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
3627
|
+
/* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
|
|
3628
|
+
/* @__PURE__ */ jsx27(Label, { htmlFor: "expiry", children: "Expiry date" }),
|
|
3629
|
+
/* @__PURE__ */ jsx27(
|
|
3591
3630
|
Input,
|
|
3592
3631
|
{
|
|
3593
3632
|
id: "expiry",
|
|
@@ -3599,9 +3638,9 @@ function DemoPaymentForm({
|
|
|
3599
3638
|
}
|
|
3600
3639
|
)
|
|
3601
3640
|
] }),
|
|
3602
|
-
/* @__PURE__ */
|
|
3603
|
-
/* @__PURE__ */
|
|
3604
|
-
/* @__PURE__ */
|
|
3641
|
+
/* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
|
|
3642
|
+
/* @__PURE__ */ jsx27(Label, { htmlFor: "cvc", children: "CVC" }),
|
|
3643
|
+
/* @__PURE__ */ jsx27(
|
|
3605
3644
|
Input,
|
|
3606
3645
|
{
|
|
3607
3646
|
id: "cvc",
|
|
@@ -3615,15 +3654,15 @@ function DemoPaymentForm({
|
|
|
3615
3654
|
] })
|
|
3616
3655
|
] })
|
|
3617
3656
|
] }),
|
|
3618
|
-
/* @__PURE__ */
|
|
3657
|
+
/* @__PURE__ */ jsx27(
|
|
3619
3658
|
Button,
|
|
3620
3659
|
{
|
|
3621
3660
|
type: "submit",
|
|
3622
3661
|
className: "w-full",
|
|
3623
3662
|
size: "lg",
|
|
3624
3663
|
disabled: isProcessing,
|
|
3625
|
-
children: isProcessing ? /* @__PURE__ */
|
|
3626
|
-
/* @__PURE__ */
|
|
3664
|
+
children: isProcessing ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-2", children: [
|
|
3665
|
+
/* @__PURE__ */ jsxs9(
|
|
3627
3666
|
"svg",
|
|
3628
3667
|
{
|
|
3629
3668
|
className: "animate-spin h-4 w-4",
|
|
@@ -3631,7 +3670,7 @@ function DemoPaymentForm({
|
|
|
3631
3670
|
fill: "none",
|
|
3632
3671
|
viewBox: "0 0 24 24",
|
|
3633
3672
|
children: [
|
|
3634
|
-
/* @__PURE__ */
|
|
3673
|
+
/* @__PURE__ */ jsx27(
|
|
3635
3674
|
"circle",
|
|
3636
3675
|
{
|
|
3637
3676
|
className: "opacity-25",
|
|
@@ -3642,7 +3681,7 @@ function DemoPaymentForm({
|
|
|
3642
3681
|
strokeWidth: "4"
|
|
3643
3682
|
}
|
|
3644
3683
|
),
|
|
3645
|
-
/* @__PURE__ */
|
|
3684
|
+
/* @__PURE__ */ jsx27(
|
|
3646
3685
|
"path",
|
|
3647
3686
|
{
|
|
3648
3687
|
className: "opacity-75",
|
|
@@ -3657,8 +3696,8 @@ function DemoPaymentForm({
|
|
|
3657
3696
|
] }) : checkoutSession.proration ? `Upgrade Now - ${formattedAmount}` : `Subscribe - ${formattedAmount}`
|
|
3658
3697
|
}
|
|
3659
3698
|
),
|
|
3660
|
-
/* @__PURE__ */
|
|
3661
|
-
/* @__PURE__ */
|
|
3699
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
|
|
3700
|
+
/* @__PURE__ */ jsxs9(
|
|
3662
3701
|
"svg",
|
|
3663
3702
|
{
|
|
3664
3703
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3671,12 +3710,12 @@ function DemoPaymentForm({
|
|
|
3671
3710
|
strokeLinecap: "round",
|
|
3672
3711
|
strokeLinejoin: "round",
|
|
3673
3712
|
children: [
|
|
3674
|
-
/* @__PURE__ */
|
|
3675
|
-
/* @__PURE__ */
|
|
3713
|
+
/* @__PURE__ */ jsx27("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
|
|
3714
|
+
/* @__PURE__ */ jsx27("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
|
|
3676
3715
|
]
|
|
3677
3716
|
}
|
|
3678
3717
|
),
|
|
3679
|
-
/* @__PURE__ */
|
|
3718
|
+
/* @__PURE__ */ jsx27("span", { children: "Secured by Stripe - Cancel anytime" })
|
|
3680
3719
|
] })
|
|
3681
3720
|
] });
|
|
3682
3721
|
}
|
|
@@ -3691,7 +3730,7 @@ function isValidClientSecret(secret) {
|
|
|
3691
3730
|
}
|
|
3692
3731
|
|
|
3693
3732
|
// src/components/PaymentBottomSheet/PaymentBottomSheet.tsx
|
|
3694
|
-
import { jsx as
|
|
3733
|
+
import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3695
3734
|
function PaymentBottomSheet({
|
|
3696
3735
|
priceId,
|
|
3697
3736
|
isOpen,
|
|
@@ -3708,12 +3747,12 @@ function PaymentBottomSheet({
|
|
|
3708
3747
|
});
|
|
3709
3748
|
const { customerEmail, customerName } = useBillingOS();
|
|
3710
3749
|
const queryClient = useQueryClient6();
|
|
3711
|
-
const [stripePromise2, setStripePromise] =
|
|
3712
|
-
const [sheetState, setSheetState] =
|
|
3713
|
-
const [error, setError] =
|
|
3714
|
-
const [isProcessing, setIsProcessing] =
|
|
3715
|
-
const [isDemoMode, setIsDemoMode] =
|
|
3716
|
-
|
|
3750
|
+
const [stripePromise2, setStripePromise] = React23.useState(null);
|
|
3751
|
+
const [sheetState, setSheetState] = React23.useState("loading");
|
|
3752
|
+
const [error, setError] = React23.useState(null);
|
|
3753
|
+
const [isProcessing, setIsProcessing] = React23.useState(false);
|
|
3754
|
+
const [isDemoMode, setIsDemoMode] = React23.useState(false);
|
|
3755
|
+
React23.useEffect(() => {
|
|
3717
3756
|
console.log("[PaymentBottomSheet] State changed:", {
|
|
3718
3757
|
sheetState,
|
|
3719
3758
|
error,
|
|
@@ -3738,7 +3777,7 @@ function PaymentBottomSheet({
|
|
|
3738
3777
|
}
|
|
3739
3778
|
);
|
|
3740
3779
|
const checkoutSession = checkoutData;
|
|
3741
|
-
|
|
3780
|
+
React23.useEffect(() => {
|
|
3742
3781
|
console.log("[PaymentBottomSheet] Checkout session data:", {
|
|
3743
3782
|
hasCheckoutData: !!checkoutData,
|
|
3744
3783
|
checkoutSession,
|
|
@@ -3746,7 +3785,7 @@ function PaymentBottomSheet({
|
|
|
3746
3785
|
isOpen
|
|
3747
3786
|
});
|
|
3748
3787
|
}, [checkoutData, checkoutSession, checkoutError, isOpen]);
|
|
3749
|
-
|
|
3788
|
+
React23.useEffect(() => {
|
|
3750
3789
|
console.log("[PaymentBottomSheet] Stripe initialization effect triggered");
|
|
3751
3790
|
if (checkoutSession) {
|
|
3752
3791
|
const validKey = isValidStripeKey(BILLINGOS_STRIPE_PUBLISHABLE_KEY);
|
|
@@ -3772,13 +3811,13 @@ function PaymentBottomSheet({
|
|
|
3772
3811
|
setSheetState("ready");
|
|
3773
3812
|
}
|
|
3774
3813
|
}, [checkoutSession]);
|
|
3775
|
-
|
|
3814
|
+
React23.useEffect(() => {
|
|
3776
3815
|
if (checkoutError) {
|
|
3777
3816
|
setError(checkoutError.message || "Failed to create checkout session");
|
|
3778
3817
|
setSheetState("error");
|
|
3779
3818
|
}
|
|
3780
3819
|
}, [checkoutError]);
|
|
3781
|
-
|
|
3820
|
+
React23.useEffect(() => {
|
|
3782
3821
|
if (!isOpen) {
|
|
3783
3822
|
setSheetState("loading");
|
|
3784
3823
|
setError(null);
|
|
@@ -3840,29 +3879,29 @@ function PaymentBottomSheet({
|
|
|
3840
3879
|
}
|
|
3841
3880
|
};
|
|
3842
3881
|
console.log("[PaymentBottomSheet] Rendering drawer with isOpen:", isOpen, "sheetState:", sheetState);
|
|
3843
|
-
return /* @__PURE__ */
|
|
3882
|
+
return /* @__PURE__ */ jsx28(
|
|
3844
3883
|
ErrorBoundary,
|
|
3845
3884
|
{
|
|
3846
|
-
fallback: (error2, reset) => /* @__PURE__ */
|
|
3847
|
-
/* @__PURE__ */
|
|
3885
|
+
fallback: (error2, reset) => /* @__PURE__ */ jsxs10("div", { style: { padding: "20px", maxWidth: "400px", margin: "0 auto" }, children: [
|
|
3886
|
+
/* @__PURE__ */ jsx28(Alert, { variant: "destructive", children: /* @__PURE__ */ jsxs10(AlertDescription, { children: [
|
|
3848
3887
|
"Failed to load payment form: ",
|
|
3849
3888
|
error2?.message || "Unknown error"
|
|
3850
3889
|
] }) }),
|
|
3851
|
-
/* @__PURE__ */
|
|
3852
|
-
/* @__PURE__ */
|
|
3853
|
-
/* @__PURE__ */
|
|
3890
|
+
/* @__PURE__ */ jsxs10("div", { className: "mt-4 flex gap-2", children: [
|
|
3891
|
+
/* @__PURE__ */ jsx28(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
|
|
3892
|
+
/* @__PURE__ */ jsx28(Button, { onClick: reset, children: "Try Again" })
|
|
3854
3893
|
] })
|
|
3855
3894
|
] }),
|
|
3856
3895
|
onError: (error2, errorInfo) => {
|
|
3857
3896
|
console.error("[PaymentBottomSheet] Error caught by boundary:", error2);
|
|
3858
3897
|
console.error("[PaymentBottomSheet] Error info:", errorInfo);
|
|
3859
3898
|
},
|
|
3860
|
-
children: /* @__PURE__ */
|
|
3899
|
+
children: /* @__PURE__ */ jsx28(Drawer, { open: isOpen, onOpenChange: (open) => {
|
|
3861
3900
|
console.log("[PaymentBottomSheet] Drawer.onOpenChange called with open:", open);
|
|
3862
3901
|
if (!open) {
|
|
3863
3902
|
handleClose();
|
|
3864
3903
|
}
|
|
3865
|
-
}, children: /* @__PURE__ */
|
|
3904
|
+
}, children: /* @__PURE__ */ jsxs10(
|
|
3866
3905
|
DrawerContent,
|
|
3867
3906
|
{
|
|
3868
3907
|
preventClose: isProcessing,
|
|
@@ -3870,29 +3909,29 @@ function PaymentBottomSheet({
|
|
|
3870
3909
|
window.alert("Please wait while your payment is being processed.");
|
|
3871
3910
|
},
|
|
3872
3911
|
children: [
|
|
3873
|
-
/* @__PURE__ */
|
|
3874
|
-
/* @__PURE__ */
|
|
3875
|
-
sheetState !== "success" && checkoutSession && /* @__PURE__ */
|
|
3912
|
+
/* @__PURE__ */ jsxs10(DrawerHeader, { className: "text-center sm:text-left", children: [
|
|
3913
|
+
/* @__PURE__ */ jsx28(DrawerTitle, { children: sheetState === "success" ? "Payment Successful!" : existingSubscriptionId ? "Complete Your Upgrade" : "Complete Payment" }),
|
|
3914
|
+
sheetState !== "success" && checkoutSession && /* @__PURE__ */ jsxs10(DrawerDescription, { children: [
|
|
3876
3915
|
existingSubscriptionId ? "Upgrading to" : "Subscribing to",
|
|
3877
3916
|
":",
|
|
3878
3917
|
" ",
|
|
3879
|
-
/* @__PURE__ */
|
|
3918
|
+
/* @__PURE__ */ jsx28("span", { className: "font-medium", children: checkoutSession.product.name })
|
|
3880
3919
|
] })
|
|
3881
3920
|
] }),
|
|
3882
|
-
sheetState === "loading" && /* @__PURE__ */
|
|
3883
|
-
/* @__PURE__ */
|
|
3884
|
-
/* @__PURE__ */
|
|
3885
|
-
/* @__PURE__ */
|
|
3921
|
+
sheetState === "loading" && /* @__PURE__ */ jsxs10("div", { className: "space-y-6 py-4", children: [
|
|
3922
|
+
/* @__PURE__ */ jsx28(Skeleton, { className: "h-20 w-full" }),
|
|
3923
|
+
/* @__PURE__ */ jsx28(Skeleton, { className: "h-40 w-full" }),
|
|
3924
|
+
/* @__PURE__ */ jsx28(Skeleton, { className: "h-12 w-full" })
|
|
3886
3925
|
] }),
|
|
3887
|
-
sheetState === "error" && /* @__PURE__ */
|
|
3888
|
-
/* @__PURE__ */
|
|
3889
|
-
/* @__PURE__ */
|
|
3890
|
-
/* @__PURE__ */
|
|
3891
|
-
/* @__PURE__ */
|
|
3926
|
+
sheetState === "error" && /* @__PURE__ */ jsxs10("div", { className: "space-y-4 py-4", children: [
|
|
3927
|
+
/* @__PURE__ */ jsx28(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx28(AlertDescription, { children: error || "Something went wrong. Please try again." }) }),
|
|
3928
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
|
|
3929
|
+
/* @__PURE__ */ jsx28(Button, { variant: "outline", onClick: onClose, className: "flex-1", children: "Cancel" }),
|
|
3930
|
+
/* @__PURE__ */ jsx28(Button, { onClick: handleRetry, className: "flex-1", children: "Try Again" })
|
|
3892
3931
|
] })
|
|
3893
3932
|
] }),
|
|
3894
|
-
sheetState === "success" && checkoutSession && /* @__PURE__ */
|
|
3895
|
-
/* @__PURE__ */
|
|
3933
|
+
sheetState === "success" && checkoutSession && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center py-8 space-y-4", children: [
|
|
3934
|
+
/* @__PURE__ */ jsx28("div", { className: "w-16 h-16 rounded-full bg-green-100 flex items-center justify-center", children: /* @__PURE__ */ jsx28(
|
|
3896
3935
|
"svg",
|
|
3897
3936
|
{
|
|
3898
3937
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3905,20 +3944,20 @@ function PaymentBottomSheet({
|
|
|
3905
3944
|
strokeLinecap: "round",
|
|
3906
3945
|
strokeLinejoin: "round",
|
|
3907
3946
|
className: "text-green-600",
|
|
3908
|
-
children: /* @__PURE__ */
|
|
3947
|
+
children: /* @__PURE__ */ jsx28("polyline", { points: "20 6 9 17 4 12" })
|
|
3909
3948
|
}
|
|
3910
3949
|
) }),
|
|
3911
|
-
/* @__PURE__ */
|
|
3912
|
-
/* @__PURE__ */
|
|
3913
|
-
/* @__PURE__ */
|
|
3950
|
+
/* @__PURE__ */ jsxs10("div", { className: "text-center", children: [
|
|
3951
|
+
/* @__PURE__ */ jsx28("p", { className: "text-lg font-semibold", children: "Payment Successful!" }),
|
|
3952
|
+
/* @__PURE__ */ jsxs10("p", { className: "text-sm text-muted-foreground mt-1", children: [
|
|
3914
3953
|
"Your subscription to ",
|
|
3915
3954
|
checkoutSession.product.name,
|
|
3916
3955
|
" is now active."
|
|
3917
3956
|
] })
|
|
3918
3957
|
] })
|
|
3919
3958
|
] }),
|
|
3920
|
-
sheetState === "processing" && /* @__PURE__ */
|
|
3921
|
-
/* @__PURE__ */
|
|
3959
|
+
sheetState === "processing" && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center py-8 space-y-4", children: [
|
|
3960
|
+
/* @__PURE__ */ jsx28("div", { className: "w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs10(
|
|
3922
3961
|
"svg",
|
|
3923
3962
|
{
|
|
3924
3963
|
className: "animate-spin h-8 w-8 text-primary",
|
|
@@ -3926,7 +3965,7 @@ function PaymentBottomSheet({
|
|
|
3926
3965
|
fill: "none",
|
|
3927
3966
|
viewBox: "0 0 24 24",
|
|
3928
3967
|
children: [
|
|
3929
|
-
/* @__PURE__ */
|
|
3968
|
+
/* @__PURE__ */ jsx28(
|
|
3930
3969
|
"circle",
|
|
3931
3970
|
{
|
|
3932
3971
|
className: "opacity-25",
|
|
@@ -3937,7 +3976,7 @@ function PaymentBottomSheet({
|
|
|
3937
3976
|
strokeWidth: "4"
|
|
3938
3977
|
}
|
|
3939
3978
|
),
|
|
3940
|
-
/* @__PURE__ */
|
|
3979
|
+
/* @__PURE__ */ jsx28(
|
|
3941
3980
|
"path",
|
|
3942
3981
|
{
|
|
3943
3982
|
className: "opacity-75",
|
|
@@ -3948,34 +3987,34 @@ function PaymentBottomSheet({
|
|
|
3948
3987
|
]
|
|
3949
3988
|
}
|
|
3950
3989
|
) }),
|
|
3951
|
-
/* @__PURE__ */
|
|
3952
|
-
/* @__PURE__ */
|
|
3953
|
-
/* @__PURE__ */
|
|
3990
|
+
/* @__PURE__ */ jsxs10("div", { className: "text-center", children: [
|
|
3991
|
+
/* @__PURE__ */ jsx28("p", { className: "text-lg font-semibold", children: "Processing Payment..." }),
|
|
3992
|
+
/* @__PURE__ */ jsx28("p", { className: "text-sm text-muted-foreground mt-1", children: "Please don't close this window." })
|
|
3954
3993
|
] })
|
|
3955
3994
|
] }),
|
|
3956
|
-
sheetState === "ready" && checkoutSession && /* @__PURE__ */
|
|
3957
|
-
isDemoMode && /* @__PURE__ */
|
|
3958
|
-
/* @__PURE__ */
|
|
3995
|
+
sheetState === "ready" && checkoutSession && /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
|
|
3996
|
+
isDemoMode && /* @__PURE__ */ jsx28(Alert, { children: /* @__PURE__ */ jsxs10(AlertDescription, { className: "text-sm", children: [
|
|
3997
|
+
/* @__PURE__ */ jsx28("strong", { children: "Demo Mode:" }),
|
|
3959
3998
|
" This is a preview with mock data. In production, a real Stripe payment form will appear here."
|
|
3960
3999
|
] }) }),
|
|
3961
|
-
/* @__PURE__ */
|
|
3962
|
-
/* @__PURE__ */
|
|
3963
|
-
/* @__PURE__ */
|
|
3964
|
-
/* @__PURE__ */
|
|
3965
|
-
/* @__PURE__ */
|
|
4000
|
+
/* @__PURE__ */ jsx28(Card, { children: /* @__PURE__ */ jsxs10(CardContent, { className: "pt-4", children: [
|
|
4001
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between", children: [
|
|
4002
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
4003
|
+
/* @__PURE__ */ jsx28("h3", { className: "font-semibold", children: checkoutSession.product.name }),
|
|
4004
|
+
/* @__PURE__ */ jsxs10("p", { className: "text-2xl font-bold mt-1", children: [
|
|
3966
4005
|
formatAmount(checkoutSession.amount, checkoutSession.currency),
|
|
3967
|
-
/* @__PURE__ */
|
|
4006
|
+
/* @__PURE__ */ jsxs10("span", { className: "text-sm font-normal text-muted-foreground", children: [
|
|
3968
4007
|
"/",
|
|
3969
4008
|
formatInterval2(checkoutSession.product.interval)
|
|
3970
4009
|
] })
|
|
3971
4010
|
] })
|
|
3972
4011
|
] }),
|
|
3973
|
-
/* @__PURE__ */
|
|
4012
|
+
/* @__PURE__ */ jsx28(Badge, { variant: "secondary", children: existingSubscriptionId ? "Upgrade" : "New" })
|
|
3974
4013
|
] }),
|
|
3975
|
-
checkoutSession.product.features.length > 0 && /* @__PURE__ */
|
|
3976
|
-
/* @__PURE__ */
|
|
3977
|
-
/* @__PURE__ */
|
|
3978
|
-
/* @__PURE__ */
|
|
4014
|
+
checkoutSession.product.features.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "mt-4 space-y-2", children: [
|
|
4015
|
+
/* @__PURE__ */ jsx28("p", { className: "text-sm font-medium text-muted-foreground", children: "Features Included:" }),
|
|
4016
|
+
/* @__PURE__ */ jsx28("ul", { className: "space-y-1", children: checkoutSession.product.features.map((feature, index) => /* @__PURE__ */ jsxs10("li", { className: "flex items-center gap-2 text-sm", children: [
|
|
4017
|
+
/* @__PURE__ */ jsx28(
|
|
3979
4018
|
"svg",
|
|
3980
4019
|
{
|
|
3981
4020
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3988,26 +4027,26 @@ function PaymentBottomSheet({
|
|
|
3988
4027
|
strokeLinecap: "round",
|
|
3989
4028
|
strokeLinejoin: "round",
|
|
3990
4029
|
className: "text-green-500",
|
|
3991
|
-
children: /* @__PURE__ */
|
|
4030
|
+
children: /* @__PURE__ */ jsx28("polyline", { points: "20 6 9 17 4 12" })
|
|
3992
4031
|
}
|
|
3993
4032
|
),
|
|
3994
4033
|
feature
|
|
3995
4034
|
] }, index)) })
|
|
3996
4035
|
] })
|
|
3997
4036
|
] }) }),
|
|
3998
|
-
checkoutSession.proration && /* @__PURE__ */
|
|
3999
|
-
/* @__PURE__ */
|
|
4000
|
-
/* @__PURE__ */
|
|
4001
|
-
/* @__PURE__ */
|
|
4002
|
-
/* @__PURE__ */
|
|
4003
|
-
/* @__PURE__ */
|
|
4037
|
+
checkoutSession.proration && /* @__PURE__ */ jsx28(Card, { children: /* @__PURE__ */ jsxs10(CardContent, { className: "pt-4", children: [
|
|
4038
|
+
/* @__PURE__ */ jsx28("h4", { className: "font-medium mb-3", children: "Amount Due Today:" }),
|
|
4039
|
+
/* @__PURE__ */ jsxs10("div", { className: "space-y-2 text-sm", children: [
|
|
4040
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
|
|
4041
|
+
/* @__PURE__ */ jsx28("span", { children: checkoutSession.product.name }),
|
|
4042
|
+
/* @__PURE__ */ jsx28("span", { children: formatAmount(
|
|
4004
4043
|
checkoutSession.proration.charged,
|
|
4005
4044
|
checkoutSession.currency
|
|
4006
4045
|
) })
|
|
4007
4046
|
] }),
|
|
4008
|
-
/* @__PURE__ */
|
|
4009
|
-
/* @__PURE__ */
|
|
4010
|
-
/* @__PURE__ */
|
|
4047
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex justify-between text-green-600", children: [
|
|
4048
|
+
/* @__PURE__ */ jsx28("span", { children: "Credit (unused time)" }),
|
|
4049
|
+
/* @__PURE__ */ jsxs10("span", { children: [
|
|
4011
4050
|
"-",
|
|
4012
4051
|
formatAmount(
|
|
4013
4052
|
checkoutSession.proration.credited,
|
|
@@ -4015,17 +4054,17 @@ function PaymentBottomSheet({
|
|
|
4015
4054
|
)
|
|
4016
4055
|
] })
|
|
4017
4056
|
] }),
|
|
4018
|
-
/* @__PURE__ */
|
|
4019
|
-
/* @__PURE__ */
|
|
4020
|
-
/* @__PURE__ */
|
|
4021
|
-
/* @__PURE__ */
|
|
4057
|
+
/* @__PURE__ */ jsx28(Separator, {}),
|
|
4058
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex justify-between font-semibold", children: [
|
|
4059
|
+
/* @__PURE__ */ jsx28("span", { children: "Total Due Now" }),
|
|
4060
|
+
/* @__PURE__ */ jsx28("span", { children: formatAmount(
|
|
4022
4061
|
checkoutSession.proration.total,
|
|
4023
4062
|
checkoutSession.currency
|
|
4024
4063
|
) })
|
|
4025
4064
|
] })
|
|
4026
4065
|
] }),
|
|
4027
|
-
/* @__PURE__ */
|
|
4028
|
-
/* @__PURE__ */
|
|
4066
|
+
/* @__PURE__ */ jsxs10("p", { className: "text-xs text-muted-foreground mt-3 flex items-start gap-1", children: [
|
|
4067
|
+
/* @__PURE__ */ jsxs10(
|
|
4029
4068
|
"svg",
|
|
4030
4069
|
{
|
|
4031
4070
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -4039,21 +4078,21 @@ function PaymentBottomSheet({
|
|
|
4039
4078
|
strokeLinejoin: "round",
|
|
4040
4079
|
className: "mt-0.5 flex-shrink-0",
|
|
4041
4080
|
children: [
|
|
4042
|
-
/* @__PURE__ */
|
|
4043
|
-
/* @__PURE__ */
|
|
4044
|
-
/* @__PURE__ */
|
|
4081
|
+
/* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
|
|
4082
|
+
/* @__PURE__ */ jsx28("path", { d: "M12 16v-4" }),
|
|
4083
|
+
/* @__PURE__ */ jsx28("path", { d: "M12 8h.01" })
|
|
4045
4084
|
]
|
|
4046
4085
|
}
|
|
4047
4086
|
),
|
|
4048
4087
|
checkoutSession.proration.explanation
|
|
4049
4088
|
] })
|
|
4050
4089
|
] }) }),
|
|
4051
|
-
!checkoutSession.proration && /* @__PURE__ */
|
|
4052
|
-
/* @__PURE__ */
|
|
4053
|
-
/* @__PURE__ */
|
|
4090
|
+
!checkoutSession.proration && /* @__PURE__ */ jsx28(Card, { children: /* @__PURE__ */ jsx28(CardContent, { className: "pt-4", children: /* @__PURE__ */ jsxs10("div", { className: "flex justify-between items-center", children: [
|
|
4091
|
+
/* @__PURE__ */ jsx28("span", { className: "font-medium", children: "Amount Due Today:" }),
|
|
4092
|
+
/* @__PURE__ */ jsx28("span", { className: "text-xl font-bold", children: formatAmount(checkoutSession.amount, checkoutSession.currency) })
|
|
4054
4093
|
] }) }) }),
|
|
4055
|
-
/* @__PURE__ */
|
|
4056
|
-
isDemoMode ? /* @__PURE__ */
|
|
4094
|
+
/* @__PURE__ */ jsx28(Separator, {}),
|
|
4095
|
+
isDemoMode ? /* @__PURE__ */ jsx28(
|
|
4057
4096
|
DemoPaymentForm,
|
|
4058
4097
|
{
|
|
4059
4098
|
checkoutSession,
|
|
@@ -4061,7 +4100,7 @@ function PaymentBottomSheet({
|
|
|
4061
4100
|
isProcessing,
|
|
4062
4101
|
setIsProcessing
|
|
4063
4102
|
}
|
|
4064
|
-
) : stripePromise2 ? /* @__PURE__ */
|
|
4103
|
+
) : stripePromise2 ? /* @__PURE__ */ jsx28(
|
|
4065
4104
|
Elements,
|
|
4066
4105
|
{
|
|
4067
4106
|
stripe: stripePromise2,
|
|
@@ -4069,7 +4108,7 @@ function PaymentBottomSheet({
|
|
|
4069
4108
|
clientSecret: checkoutSession.clientSecret,
|
|
4070
4109
|
appearance
|
|
4071
4110
|
},
|
|
4072
|
-
children: /* @__PURE__ */
|
|
4111
|
+
children: /* @__PURE__ */ jsx28(
|
|
4073
4112
|
PaymentForm,
|
|
4074
4113
|
{
|
|
4075
4114
|
checkoutSession,
|
|
@@ -4090,87 +4129,55 @@ function PaymentBottomSheet({
|
|
|
4090
4129
|
}
|
|
4091
4130
|
|
|
4092
4131
|
// src/components/PricingTable/PricingTable.tsx
|
|
4093
|
-
import { Fragment as Fragment3, jsx as
|
|
4132
|
+
import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4133
|
+
function getAllFeatures(products) {
|
|
4134
|
+
const seen = /* @__PURE__ */ new Map();
|
|
4135
|
+
products.forEach((product) => {
|
|
4136
|
+
product.features.forEach((f) => {
|
|
4137
|
+
if (!seen.has(f.name)) seen.set(f.name, { name: f.name, title: f.title, type: f.type });
|
|
4138
|
+
});
|
|
4139
|
+
});
|
|
4140
|
+
return Array.from(seen.values());
|
|
4141
|
+
}
|
|
4094
4142
|
function PricingTable({
|
|
4095
4143
|
planIds,
|
|
4096
4144
|
showIntervalToggle = true,
|
|
4097
4145
|
defaultInterval = "month",
|
|
4098
4146
|
onSelectPlan,
|
|
4099
4147
|
theme,
|
|
4100
|
-
title = "
|
|
4101
|
-
description,
|
|
4148
|
+
title = "Simple, transparent pricing",
|
|
4149
|
+
description = "Choose the perfect plan for your needs. No hidden fees, cancel anytime.",
|
|
4102
4150
|
useCheckoutModal = false,
|
|
4103
4151
|
onPlanChanged,
|
|
4104
|
-
customer: customerProp
|
|
4152
|
+
customer: customerProp,
|
|
4153
|
+
footerText = "All plans include SSL security and 99.9% uptime SLA",
|
|
4154
|
+
compact = false,
|
|
4155
|
+
adaptivePricing
|
|
4105
4156
|
}) {
|
|
4106
|
-
const [
|
|
4107
|
-
const [selectedPriceId, setSelectedPriceId] =
|
|
4108
|
-
const [isPaymentOpen, setIsPaymentOpen] =
|
|
4157
|
+
const [isYearly, setIsYearly] = React24.useState(defaultInterval === "year");
|
|
4158
|
+
const [selectedPriceId, setSelectedPriceId] = React24.useState(null);
|
|
4159
|
+
const [isPaymentOpen, setIsPaymentOpen] = React24.useState(false);
|
|
4160
|
+
const [showSuccessMessage, setShowSuccessMessage] = React24.useState(false);
|
|
4109
4161
|
const { customerEmail, customerName, debug } = useBillingOS();
|
|
4110
4162
|
const finalCustomerEmail = customerProp?.email || customerEmail;
|
|
4111
4163
|
const finalCustomerName = customerProp?.name || customerName;
|
|
4112
4164
|
const queryClient = useQueryClient7();
|
|
4113
|
-
const [showSuccessMessage, setShowSuccessMessage] = React25.useState(false);
|
|
4114
|
-
React25.useEffect(() => {
|
|
4115
|
-
if (debug) {
|
|
4116
|
-
console.log("[BillingOS] PricingTable customer data:", {
|
|
4117
|
-
fromProp: customerProp,
|
|
4118
|
-
fromContext: { customerEmail, customerName },
|
|
4119
|
-
final: { email: finalCustomerEmail, name: finalCustomerName }
|
|
4120
|
-
});
|
|
4121
|
-
}
|
|
4122
|
-
}, [debug, customerProp, customerEmail, customerName, finalCustomerEmail, finalCustomerName]);
|
|
4123
4165
|
const { data, isLoading, error, refetch } = useProducts2({ planIds });
|
|
4124
|
-
const
|
|
4125
|
-
const
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
|
|
4130
|
-
const featureMap = /* @__PURE__ */ new Map();
|
|
4131
|
-
products.forEach((product) => {
|
|
4132
|
-
product.features.forEach((feature) => {
|
|
4133
|
-
if (!featureMap.has(feature.id)) {
|
|
4134
|
-
featureMap.set(feature.id, {
|
|
4135
|
-
name: feature.title,
|
|
4136
|
-
values: Array(products.length).fill(null)
|
|
4137
|
-
});
|
|
4138
|
-
}
|
|
4139
|
-
});
|
|
4140
|
-
});
|
|
4141
|
-
const featureRows = Array.from(featureMap.entries());
|
|
4142
|
-
featureRows.forEach(([featureId, featureRow]) => {
|
|
4143
|
-
products.forEach((product, productIndex) => {
|
|
4144
|
-
const feature = product.features.find((f) => f.id === featureId);
|
|
4145
|
-
if (feature) {
|
|
4146
|
-
if (feature.type === "boolean_flag") {
|
|
4147
|
-
featureRow.values[productIndex] = true;
|
|
4148
|
-
} else if (feature.type === "usage_quota" || feature.type === "numeric_limit") {
|
|
4149
|
-
const limit = feature.properties?.limit;
|
|
4150
|
-
if (limit === -1) {
|
|
4151
|
-
featureRow.values[productIndex] = "Unlimited";
|
|
4152
|
-
} else if (typeof limit === "number") {
|
|
4153
|
-
featureRow.values[productIndex] = limit;
|
|
4154
|
-
} else {
|
|
4155
|
-
featureRow.values[productIndex] = true;
|
|
4156
|
-
}
|
|
4157
|
-
}
|
|
4158
|
-
}
|
|
4159
|
-
});
|
|
4166
|
+
const currentSubscription = data?.currentSubscription ?? null;
|
|
4167
|
+
const products = React24.useMemo(() => {
|
|
4168
|
+
return [...data?.products ?? []].sort((a, b) => {
|
|
4169
|
+
const aAmt = a.prices.find((p) => p.interval === "month")?.amount ?? 0;
|
|
4170
|
+
const bAmt = b.prices.find((p) => p.interval === "month")?.amount ?? 0;
|
|
4171
|
+
return aAmt - bAmt;
|
|
4160
4172
|
});
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
const
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
}).format(price.amount / 100);
|
|
4170
|
-
};
|
|
4171
|
-
const getPriceForInterval = (product) => {
|
|
4172
|
-
return product.prices.find((p) => p.interval === selectedInterval) || product.prices[0] || null;
|
|
4173
|
-
};
|
|
4173
|
+
}, [data]);
|
|
4174
|
+
const allFeatures = React24.useMemo(() => getAllFeatures(products), [products]);
|
|
4175
|
+
const hasYearlyPricing = products.some((p) => p.prices.some((pr) => pr.interval === "year"));
|
|
4176
|
+
const selectedInterval = isYearly ? "year" : "month";
|
|
4177
|
+
const currentPlanAmount = React24.useMemo(() => {
|
|
4178
|
+
const currentProduct = products.find((p) => p.isCurrentPlan);
|
|
4179
|
+
return currentProduct?.prices.find((p) => p.interval === selectedInterval)?.amount ?? currentProduct?.prices[0]?.amount ?? 0;
|
|
4180
|
+
}, [products, selectedInterval]);
|
|
4174
4181
|
const handleSelectPlan = (priceId) => {
|
|
4175
4182
|
if (onSelectPlan) {
|
|
4176
4183
|
onSelectPlan(priceId);
|
|
@@ -4179,423 +4186,148 @@ function PricingTable({
|
|
|
4179
4186
|
setIsPaymentOpen(true);
|
|
4180
4187
|
}
|
|
4181
4188
|
};
|
|
4182
|
-
const handlePaymentSuccess =
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
onPlanChanged(subscription);
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
});
|
|
4209
|
-
}
|
|
4210
|
-
await refetch();
|
|
4211
|
-
}, [debug, queryClient, refetch, planIds, onPlanChanged]);
|
|
4189
|
+
const handlePaymentSuccess = React24.useCallback(
|
|
4190
|
+
async (subscription) => {
|
|
4191
|
+
if (debug) console.log("[BillingOS] Payment success:", subscription);
|
|
4192
|
+
setIsPaymentOpen(false);
|
|
4193
|
+
setSelectedPriceId(null);
|
|
4194
|
+
setShowSuccessMessage(true);
|
|
4195
|
+
setTimeout(() => setShowSuccessMessage(false), 5e3);
|
|
4196
|
+
if (onPlanChanged) onPlanChanged(subscription);
|
|
4197
|
+
await queryClient.invalidateQueries({ queryKey: ["products"], refetchType: "all" });
|
|
4198
|
+
if (subscription) {
|
|
4199
|
+
queryClient.setQueryData(["products", planIds], (oldData) => {
|
|
4200
|
+
if (!oldData) return oldData;
|
|
4201
|
+
return {
|
|
4202
|
+
...oldData,
|
|
4203
|
+
currentSubscription: subscription,
|
|
4204
|
+
products: oldData.products?.map((p) => ({
|
|
4205
|
+
...p,
|
|
4206
|
+
isCurrentPlan: p.prices?.some((pr) => pr.id === subscription.priceId) ?? false
|
|
4207
|
+
}))
|
|
4208
|
+
};
|
|
4209
|
+
});
|
|
4210
|
+
}
|
|
4211
|
+
await refetch();
|
|
4212
|
+
},
|
|
4213
|
+
[debug, queryClient, refetch, planIds, onPlanChanged]
|
|
4214
|
+
);
|
|
4212
4215
|
if (isLoading) {
|
|
4213
|
-
return /* @__PURE__ */
|
|
4214
|
-
|
|
4215
|
-
/* @__PURE__ */
|
|
4216
|
-
|
|
4216
|
+
return /* @__PURE__ */ jsx29("section", { className: cn("py-20 px-4 sm:px-6 lg:px-8 bg-slate-50 min-h-screen", theme === "dark" && "dark"), children: /* @__PURE__ */ jsxs11("div", { className: "max-w-5xl mx-auto", children: [
|
|
4217
|
+
/* @__PURE__ */ jsxs11("div", { className: "text-center mb-16", children: [
|
|
4218
|
+
/* @__PURE__ */ jsx29(Skeleton, { className: "h-12 w-72 mx-auto mb-4" }),
|
|
4219
|
+
/* @__PURE__ */ jsx29(Skeleton, { className: "h-5 w-96 mx-auto" })
|
|
4217
4220
|
] }),
|
|
4218
|
-
/* @__PURE__ */
|
|
4219
|
-
|
|
4221
|
+
/* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto", children: [
|
|
4222
|
+
/* @__PURE__ */ jsx29(Skeleton, { className: "h-[480px] rounded-2xl" }),
|
|
4223
|
+
/* @__PURE__ */ jsx29(Skeleton, { className: "h-[480px] rounded-2xl" })
|
|
4224
|
+
] })
|
|
4225
|
+
] }) });
|
|
4220
4226
|
}
|
|
4221
4227
|
if (error) {
|
|
4222
|
-
return /* @__PURE__ */
|
|
4223
|
-
/* @__PURE__ */
|
|
4224
|
-
/* @__PURE__ */
|
|
4225
|
-
] });
|
|
4228
|
+
return /* @__PURE__ */ jsx29("section", { className: cn("py-20 px-4", theme === "dark" && "dark"), children: /* @__PURE__ */ jsxs11("div", { className: "max-w-md mx-auto", children: [
|
|
4229
|
+
/* @__PURE__ */ jsx29(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx29(AlertDescription, { children: error.message || "Failed to load pricing plans" }) }),
|
|
4230
|
+
/* @__PURE__ */ jsx29("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx29(Button, { onClick: () => refetch(), children: "Try Again" }) })
|
|
4231
|
+
] }) });
|
|
4226
4232
|
}
|
|
4227
4233
|
if (products.length === 0) {
|
|
4228
|
-
return /* @__PURE__ */
|
|
4234
|
+
return /* @__PURE__ */ jsx29("section", { className: cn("py-20 px-4 text-center", theme === "dark" && "dark"), children: /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground", children: "No pricing plans available" }) });
|
|
4229
4235
|
}
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
stroke: "currentColor",
|
|
4239
|
-
children: /* @__PURE__ */ jsx28(
|
|
4240
|
-
"path",
|
|
4241
|
-
{
|
|
4242
|
-
strokeLinecap: "round",
|
|
4243
|
-
strokeLinejoin: "round",
|
|
4244
|
-
strokeWidth: 2,
|
|
4245
|
-
d: "M5 13l4 4L19 7"
|
|
4246
|
-
}
|
|
4247
|
-
)
|
|
4248
|
-
}
|
|
4249
|
-
),
|
|
4250
|
-
/* @__PURE__ */ jsx28("p", { className: "text-green-800 dark:text-green-200 font-medium", children: "Payment successful! Your subscription has been updated." })
|
|
4251
|
-
] }) }),
|
|
4252
|
-
(title || description) && /* @__PURE__ */ jsxs10("div", { className: "text-center mb-8", children: [
|
|
4253
|
-
title && /* @__PURE__ */ jsx28("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
|
|
4254
|
-
description && /* @__PURE__ */ jsx28("p", { className: "text-muted-foreground mt-2 max-w-2xl mx-auto", children: description }),
|
|
4255
|
-
useCheckoutModal && /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-2 mt-4 px-3 py-1 bg-gradient-to-r from-blue-100 to-purple-100 text-blue-800 rounded-full text-sm font-medium", children: [
|
|
4256
|
-
/* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx28("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
|
|
4257
|
-
/* @__PURE__ */ jsx28("span", { children: "Using Secure Iframe Checkout" })
|
|
4258
|
-
] })
|
|
4259
|
-
] }),
|
|
4260
|
-
showIntervalToggle && hasYearlyPricing && /* @__PURE__ */ jsx28("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center rounded-lg bg-muted p-1", children: [
|
|
4261
|
-
/* @__PURE__ */ jsx28(
|
|
4262
|
-
"button",
|
|
4263
|
-
{
|
|
4264
|
-
onClick: () => setSelectedInterval("month"),
|
|
4265
|
-
className: cn(
|
|
4266
|
-
"px-4 py-2 rounded-md text-sm font-medium transition-colors",
|
|
4267
|
-
selectedInterval === "month" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
|
4268
|
-
),
|
|
4269
|
-
children: "Monthly"
|
|
4236
|
+
const paymentComponent = !onSelectPlan && selectedPriceId ? /* @__PURE__ */ jsx29(Fragment3, { children: useCheckoutModal ? /* @__PURE__ */ jsx29(
|
|
4237
|
+
CheckoutModal,
|
|
4238
|
+
{
|
|
4239
|
+
open: isPaymentOpen,
|
|
4240
|
+
onOpenChange: (open) => {
|
|
4241
|
+
if (!open) {
|
|
4242
|
+
setIsPaymentOpen(false);
|
|
4243
|
+
setSelectedPriceId(null);
|
|
4270
4244
|
}
|
|
4245
|
+
},
|
|
4246
|
+
priceId: selectedPriceId,
|
|
4247
|
+
customer: { email: finalCustomerEmail, name: finalCustomerName },
|
|
4248
|
+
onSuccess: handlePaymentSuccess,
|
|
4249
|
+
existingSubscriptionId: currentSubscription?.id,
|
|
4250
|
+
theme,
|
|
4251
|
+
adaptivePricing
|
|
4252
|
+
}
|
|
4253
|
+
) : /* @__PURE__ */ jsx29(
|
|
4254
|
+
PaymentBottomSheet,
|
|
4255
|
+
{
|
|
4256
|
+
priceId: selectedPriceId,
|
|
4257
|
+
isOpen: isPaymentOpen,
|
|
4258
|
+
onClose: () => {
|
|
4259
|
+
setIsPaymentOpen(false);
|
|
4260
|
+
setSelectedPriceId(null);
|
|
4261
|
+
},
|
|
4262
|
+
onSuccess: handlePaymentSuccess,
|
|
4263
|
+
existingSubscriptionId: currentSubscription?.id,
|
|
4264
|
+
theme
|
|
4265
|
+
}
|
|
4266
|
+
) }) : null;
|
|
4267
|
+
const cardsGrid = /* @__PURE__ */ jsx29(
|
|
4268
|
+
"div",
|
|
4269
|
+
{
|
|
4270
|
+
className: cn(
|
|
4271
|
+
"grid gap-8 items-start",
|
|
4272
|
+
products.length === 1 && "grid-cols-1 max-w-sm mx-auto",
|
|
4273
|
+
products.length === 2 && "grid-cols-1 md:grid-cols-2 max-w-3xl mx-auto",
|
|
4274
|
+
products.length >= 3 && "grid-cols-1 md:grid-cols-3"
|
|
4271
4275
|
),
|
|
4272
|
-
/* @__PURE__ */
|
|
4273
|
-
|
|
4276
|
+
children: products.map((product) => /* @__PURE__ */ jsx29(
|
|
4277
|
+
PricingCard,
|
|
4274
4278
|
{
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
/* @__PURE__ */ jsx28(Badge, { variant: "secondary", className: "text-xs", children: "Save" })
|
|
4283
|
-
]
|
|
4284
|
-
}
|
|
4285
|
-
)
|
|
4286
|
-
] }) }),
|
|
4287
|
-
/* @__PURE__ */ jsx28("div", { className: "rounded-lg border bg-card overflow-hidden", children: /* @__PURE__ */ jsxs10(Table, { children: [
|
|
4288
|
-
/* @__PURE__ */ jsx28(TableHeader, { children: /* @__PURE__ */ jsxs10(TableRow, { className: "hover:bg-transparent border-b", children: [
|
|
4289
|
-
/* @__PURE__ */ jsx28(TableHead, { className: "w-[200px]" }),
|
|
4290
|
-
products.map((product) => {
|
|
4291
|
-
const price = getPriceForInterval(product);
|
|
4292
|
-
const isHighlighted = product.highlighted;
|
|
4293
|
-
const isCurrentPlan = product.isCurrentPlan;
|
|
4294
|
-
return /* @__PURE__ */ jsx28(
|
|
4295
|
-
TableHead,
|
|
4296
|
-
{
|
|
4297
|
-
className: cn(
|
|
4298
|
-
"text-center relative",
|
|
4299
|
-
isHighlighted && "bg-foreground text-background"
|
|
4300
|
-
),
|
|
4301
|
-
children: /* @__PURE__ */ jsxs10("div", { className: "py-8", children: [
|
|
4302
|
-
(isHighlighted || isCurrentPlan) && /* @__PURE__ */ jsxs10("div", { className: "flex justify-center gap-2 mb-3", children: [
|
|
4303
|
-
isCurrentPlan && /* @__PURE__ */ jsx28(Badge, { className: "bg-primary text-primary-foreground text-xs", children: "Current Plan" }),
|
|
4304
|
-
isHighlighted && !isCurrentPlan && /* @__PURE__ */ jsx28(
|
|
4305
|
-
Badge,
|
|
4306
|
-
{
|
|
4307
|
-
variant: "secondary",
|
|
4308
|
-
className: cn(
|
|
4309
|
-
"text-xs",
|
|
4310
|
-
isHighlighted && "bg-background text-foreground"
|
|
4311
|
-
),
|
|
4312
|
-
children: "Popular"
|
|
4313
|
-
}
|
|
4314
|
-
)
|
|
4315
|
-
] }),
|
|
4316
|
-
/* @__PURE__ */ jsx28("div", { className: cn(
|
|
4317
|
-
"font-bold text-xl mb-3",
|
|
4318
|
-
isHighlighted ? "text-background" : "text-foreground"
|
|
4319
|
-
), children: product.name }),
|
|
4320
|
-
price && /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
4321
|
-
/* @__PURE__ */ jsx28("div", { className: cn(
|
|
4322
|
-
"text-5xl font-bold mb-2",
|
|
4323
|
-
isHighlighted ? "text-background" : "text-foreground"
|
|
4324
|
-
), children: formatPrice(price) }),
|
|
4325
|
-
/* @__PURE__ */ jsxs10("div", { className: cn(
|
|
4326
|
-
"text-sm mt-1",
|
|
4327
|
-
isHighlighted ? "text-background/70" : "text-muted-foreground"
|
|
4328
|
-
), children: [
|
|
4329
|
-
"Per ",
|
|
4330
|
-
selectedInterval === "year" ? "year" : "month"
|
|
4331
|
-
] })
|
|
4332
|
-
] })
|
|
4333
|
-
] })
|
|
4334
|
-
},
|
|
4335
|
-
product.id
|
|
4336
|
-
);
|
|
4337
|
-
})
|
|
4338
|
-
] }) }),
|
|
4339
|
-
/* @__PURE__ */ jsxs10(TableBody, { children: [
|
|
4340
|
-
getAllFeatures.map((featureRow, index) => /* @__PURE__ */ jsxs10(TableRow, { children: [
|
|
4341
|
-
/* @__PURE__ */ jsx28(TableCell, { className: "font-medium text-foreground py-4", children: featureRow.name }),
|
|
4342
|
-
featureRow.values.map((value, productIndex) => {
|
|
4343
|
-
const isHighlighted = products[productIndex]?.highlighted;
|
|
4344
|
-
return /* @__PURE__ */ jsx28(
|
|
4345
|
-
TableCell,
|
|
4346
|
-
{
|
|
4347
|
-
className: cn(
|
|
4348
|
-
"text-center py-4",
|
|
4349
|
-
isHighlighted && "bg-foreground/5"
|
|
4350
|
-
),
|
|
4351
|
-
children: value === null || value === false ? /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "-" }) : value === true ? /* @__PURE__ */ jsxs10(
|
|
4352
|
-
"svg",
|
|
4353
|
-
{
|
|
4354
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
4355
|
-
width: "20",
|
|
4356
|
-
height: "20",
|
|
4357
|
-
viewBox: "0 0 24 24",
|
|
4358
|
-
fill: "none",
|
|
4359
|
-
stroke: "currentColor",
|
|
4360
|
-
strokeWidth: "2",
|
|
4361
|
-
strokeLinecap: "round",
|
|
4362
|
-
strokeLinejoin: "round",
|
|
4363
|
-
className: "inline-block text-foreground",
|
|
4364
|
-
children: [
|
|
4365
|
-
/* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
|
|
4366
|
-
/* @__PURE__ */ jsx28("polyline", { points: "9 12 11 14 15 10" })
|
|
4367
|
-
]
|
|
4368
|
-
}
|
|
4369
|
-
) : /* @__PURE__ */ jsx28("span", { className: "text-foreground font-medium", children: value })
|
|
4370
|
-
},
|
|
4371
|
-
productIndex
|
|
4372
|
-
);
|
|
4373
|
-
})
|
|
4374
|
-
] }, index)),
|
|
4375
|
-
/* @__PURE__ */ jsxs10(TableRow, { className: "hover:bg-transparent border-t", children: [
|
|
4376
|
-
/* @__PURE__ */ jsx28(TableCell, { className: "font-medium text-foreground py-6", children: "Server speed" }),
|
|
4377
|
-
products.map((product) => {
|
|
4378
|
-
const price = getPriceForInterval(product);
|
|
4379
|
-
const isHighlighted = product.highlighted;
|
|
4380
|
-
const isCurrentPlan = product.isCurrentPlan;
|
|
4381
|
-
const hasSubscription = currentSubscription !== null;
|
|
4382
|
-
let buttonText = "Get Started";
|
|
4383
|
-
if (isCurrentPlan) {
|
|
4384
|
-
buttonText = "Current Plan";
|
|
4385
|
-
} else if (hasSubscription && price && currentSubscription) {
|
|
4386
|
-
const currentPrice = products.find((p) => p.isCurrentPlan);
|
|
4387
|
-
const currentPriceAmount = currentPrice ? getPriceForInterval(currentPrice)?.amount || 0 : 0;
|
|
4388
|
-
if (price.amount > currentPriceAmount) {
|
|
4389
|
-
buttonText = "Upgrade";
|
|
4390
|
-
} else if (price.amount < currentPriceAmount) {
|
|
4391
|
-
buttonText = "Downgrade";
|
|
4392
|
-
} else {
|
|
4393
|
-
buttonText = "Switch Plan";
|
|
4394
|
-
}
|
|
4395
|
-
}
|
|
4396
|
-
return /* @__PURE__ */ jsx28(
|
|
4397
|
-
TableCell,
|
|
4398
|
-
{
|
|
4399
|
-
className: cn(
|
|
4400
|
-
"text-center py-6",
|
|
4401
|
-
isHighlighted && "bg-foreground/5"
|
|
4402
|
-
),
|
|
4403
|
-
children: /* @__PURE__ */ jsx28(
|
|
4404
|
-
Button,
|
|
4405
|
-
{
|
|
4406
|
-
onClick: () => price && handleSelectPlan(price.id),
|
|
4407
|
-
disabled: isCurrentPlan || !price,
|
|
4408
|
-
variant: isHighlighted && !isCurrentPlan ? "default" : "outline",
|
|
4409
|
-
className: cn(
|
|
4410
|
-
"w-full max-w-[200px]",
|
|
4411
|
-
isHighlighted && !isCurrentPlan && "bg-foreground text-background hover:bg-foreground/90"
|
|
4412
|
-
),
|
|
4413
|
-
children: buttonText
|
|
4414
|
-
}
|
|
4415
|
-
)
|
|
4416
|
-
},
|
|
4417
|
-
product.id
|
|
4418
|
-
);
|
|
4419
|
-
})
|
|
4420
|
-
] })
|
|
4421
|
-
] })
|
|
4422
|
-
] }) }),
|
|
4423
|
-
!onSelectPlan && selectedPriceId && /* @__PURE__ */ jsx28(Fragment3, { children: useCheckoutModal ? /* @__PURE__ */ jsx28(
|
|
4424
|
-
CheckoutModal,
|
|
4425
|
-
{
|
|
4426
|
-
open: isPaymentOpen,
|
|
4427
|
-
onOpenChange: (open) => {
|
|
4428
|
-
if (!open) {
|
|
4429
|
-
setIsPaymentOpen(false);
|
|
4430
|
-
setSelectedPriceId(null);
|
|
4431
|
-
}
|
|
4432
|
-
},
|
|
4433
|
-
priceId: selectedPriceId,
|
|
4434
|
-
customer: {
|
|
4435
|
-
email: finalCustomerEmail,
|
|
4436
|
-
name: finalCustomerName
|
|
4437
|
-
},
|
|
4438
|
-
onSuccess: (subscription) => {
|
|
4439
|
-
handlePaymentSuccess(subscription);
|
|
4440
|
-
},
|
|
4441
|
-
existingSubscriptionId: currentSubscription?.id,
|
|
4442
|
-
theme
|
|
4443
|
-
}
|
|
4444
|
-
) : /* @__PURE__ */ jsx28(
|
|
4445
|
-
PaymentBottomSheet,
|
|
4446
|
-
{
|
|
4447
|
-
priceId: selectedPriceId,
|
|
4448
|
-
isOpen: isPaymentOpen,
|
|
4449
|
-
onClose: () => {
|
|
4450
|
-
setIsPaymentOpen(false);
|
|
4451
|
-
setSelectedPriceId(null);
|
|
4279
|
+
product,
|
|
4280
|
+
allFeatures,
|
|
4281
|
+
isYearly,
|
|
4282
|
+
currentSubscription,
|
|
4283
|
+
currentPlanAmount,
|
|
4284
|
+
onSelectPlan: handleSelectPlan,
|
|
4285
|
+
theme
|
|
4452
4286
|
},
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
theme
|
|
4456
|
-
}
|
|
4457
|
-
) })
|
|
4458
|
-
] });
|
|
4459
|
-
}
|
|
4460
|
-
|
|
4461
|
-
// src/components/PricingTable/PricingCard.tsx
|
|
4462
|
-
import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
4463
|
-
function PricingCard({
|
|
4464
|
-
product,
|
|
4465
|
-
selectedInterval,
|
|
4466
|
-
currentSubscription,
|
|
4467
|
-
onSelectPlan
|
|
4468
|
-
}) {
|
|
4469
|
-
const selectedPrice = product.prices.find(
|
|
4470
|
-
(p) => p.interval === selectedInterval
|
|
4471
|
-
) || product.prices[0];
|
|
4472
|
-
const isCurrentPlan = product.isCurrentPlan;
|
|
4473
|
-
const getButtonState = () => {
|
|
4474
|
-
if (!currentSubscription) return "buy";
|
|
4475
|
-
if (isCurrentPlan) return "current";
|
|
4476
|
-
if (currentSubscription.productId === product.id) return "current";
|
|
4477
|
-
return "upgrade";
|
|
4478
|
-
};
|
|
4479
|
-
const buttonState = getButtonState();
|
|
4480
|
-
const formatPrice = (price) => {
|
|
4481
|
-
return new Intl.NumberFormat("en-US", {
|
|
4482
|
-
style: "currency",
|
|
4483
|
-
currency: price.currency.toUpperCase(),
|
|
4484
|
-
minimumFractionDigits: 0,
|
|
4485
|
-
maximumFractionDigits: 0
|
|
4486
|
-
}).format(price.amount / 100);
|
|
4487
|
-
};
|
|
4488
|
-
const calculateYearlySavings = () => {
|
|
4489
|
-
const monthlyPrice = product.prices.find((p) => p.interval === "month");
|
|
4490
|
-
const yearlyPrice = product.prices.find((p) => p.interval === "year");
|
|
4491
|
-
if (!monthlyPrice || !yearlyPrice) return null;
|
|
4492
|
-
const monthlyTotal = monthlyPrice.amount * 12;
|
|
4493
|
-
const yearlyCost = yearlyPrice.amount;
|
|
4494
|
-
const savings = (monthlyTotal - yearlyCost) / monthlyTotal * 100;
|
|
4495
|
-
return Math.round(savings);
|
|
4496
|
-
};
|
|
4497
|
-
const yearlySavings = selectedInterval === "year" ? calculateYearlySavings() : null;
|
|
4498
|
-
const formatFeature = (feature) => {
|
|
4499
|
-
if (feature.properties?.limit === -1) {
|
|
4500
|
-
return `Unlimited ${feature.properties?.unit || feature.title.toLowerCase()}`;
|
|
4501
|
-
}
|
|
4502
|
-
return feature.title;
|
|
4503
|
-
};
|
|
4504
|
-
const handleClick = () => {
|
|
4505
|
-
if (buttonState !== "current" && selectedPrice) {
|
|
4506
|
-
onSelectPlan(selectedPrice.id);
|
|
4287
|
+
product.id
|
|
4288
|
+
))
|
|
4507
4289
|
}
|
|
4508
|
-
|
|
4290
|
+
);
|
|
4291
|
+
if (compact) {
|
|
4292
|
+
return /* @__PURE__ */ jsxs11("div", { className: cn(theme === "dark" && "dark"), children: [
|
|
4293
|
+
cardsGrid,
|
|
4294
|
+
paymentComponent
|
|
4295
|
+
] });
|
|
4296
|
+
}
|
|
4509
4297
|
return /* @__PURE__ */ jsxs11(
|
|
4510
|
-
|
|
4298
|
+
"section",
|
|
4511
4299
|
{
|
|
4512
4300
|
className: cn(
|
|
4513
|
-
"
|
|
4514
|
-
|
|
4515
|
-
product.highlighted && !isCurrentPlan && "border-primary/50",
|
|
4516
|
-
"hover:shadow-lg"
|
|
4301
|
+
"py-20 px-4 sm:px-6 lg:px-8 bg-slate-50 min-h-screen",
|
|
4302
|
+
theme === "dark" && "dark"
|
|
4517
4303
|
),
|
|
4518
4304
|
children: [
|
|
4519
|
-
/* @__PURE__ */ jsxs11("div", { className: "
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
/* @__PURE__ */ jsxs11(CardHeader, { className: "text-center pb-2 pt-8", children: [
|
|
4524
|
-
/* @__PURE__ */ jsx29(CardTitle, { className: "text-2xl font-bold", children: product.name }),
|
|
4525
|
-
/* @__PURE__ */ jsx29(CardDescription, { className: "text-sm mt-1", children: product.description })
|
|
4526
|
-
] }),
|
|
4527
|
-
/* @__PURE__ */ jsxs11(CardContent, { className: "flex-1 pt-4", children: [
|
|
4528
|
-
/* @__PURE__ */ jsxs11("div", { className: "text-center mb-6", children: [
|
|
4529
|
-
/* @__PURE__ */ jsxs11("div", { className: "flex items-baseline justify-center gap-1", children: [
|
|
4530
|
-
/* @__PURE__ */ jsx29("span", { className: "text-4xl font-bold tracking-tight", children: selectedPrice ? formatPrice(selectedPrice) : "N/A" }),
|
|
4531
|
-
/* @__PURE__ */ jsxs11("span", { className: "text-muted-foreground text-sm", children: [
|
|
4532
|
-
"/",
|
|
4533
|
-
selectedInterval === "year" ? "year" : "mo"
|
|
4534
|
-
] })
|
|
4535
|
-
] }),
|
|
4536
|
-
yearlySavings && yearlySavings > 0 && /* @__PURE__ */ jsxs11(Badge, { variant: "secondary", className: "mt-2 bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300", children: [
|
|
4537
|
-
"Save ",
|
|
4538
|
-
yearlySavings,
|
|
4539
|
-
"%"
|
|
4540
|
-
] }),
|
|
4541
|
-
product.trialDays > 0 && buttonState === "buy" && /* @__PURE__ */ jsxs11("p", { className: "text-sm text-muted-foreground mt-2", children: [
|
|
4542
|
-
product.trialDays,
|
|
4543
|
-
"-day free trial"
|
|
4544
|
-
] })
|
|
4305
|
+
/* @__PURE__ */ jsxs11("div", { className: "max-w-5xl mx-auto", children: [
|
|
4306
|
+
showSuccessMessage && /* @__PURE__ */ jsxs11("div", { className: "mb-8 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3", children: [
|
|
4307
|
+
/* @__PURE__ */ jsx29("svg", { className: "w-5 h-5 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
|
|
4308
|
+
/* @__PURE__ */ jsx29("p", { className: "text-green-800 font-medium text-sm", children: "Payment successful! Your subscription has been updated." })
|
|
4545
4309
|
] }),
|
|
4546
|
-
/* @__PURE__ */
|
|
4310
|
+
/* @__PURE__ */ jsxs11("div", { className: "text-center mb-16", children: [
|
|
4311
|
+
title && /* @__PURE__ */ jsx29("h1", { className: "text-4xl md:text-5xl font-bold text-slate-900 tracking-tight mb-4", children: title }),
|
|
4312
|
+
description && /* @__PURE__ */ jsx29("p", { className: "text-lg text-slate-500 max-w-2xl mx-auto", children: description })
|
|
4313
|
+
] }),
|
|
4314
|
+
showIntervalToggle && hasYearlyPricing && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-center gap-4 mb-16", children: [
|
|
4315
|
+
/* @__PURE__ */ jsx29("span", { className: cn("text-sm font-medium transition-colors", !isYearly ? "text-slate-900" : "text-slate-400"), children: "Monthly" }),
|
|
4547
4316
|
/* @__PURE__ */ jsx29(
|
|
4548
|
-
|
|
4317
|
+
Switch,
|
|
4549
4318
|
{
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
viewBox: "0 0 24 24",
|
|
4554
|
-
fill: "none",
|
|
4555
|
-
stroke: "currentColor",
|
|
4556
|
-
strokeWidth: "2",
|
|
4557
|
-
strokeLinecap: "round",
|
|
4558
|
-
strokeLinejoin: "round",
|
|
4559
|
-
className: "text-green-500 flex-shrink-0 mt-0.5",
|
|
4560
|
-
children: /* @__PURE__ */ jsx29("polyline", { points: "20 6 9 17 4 12" })
|
|
4319
|
+
checked: isYearly,
|
|
4320
|
+
onCheckedChange: setIsYearly,
|
|
4321
|
+
"aria-label": "Billing frequency"
|
|
4561
4322
|
}
|
|
4562
4323
|
),
|
|
4563
|
-
/* @__PURE__ */ jsx29("span", { className: "text-sm",
|
|
4564
|
-
|
|
4324
|
+
/* @__PURE__ */ jsx29("span", { className: cn("text-sm font-medium transition-colors", isYearly ? "text-slate-900" : "text-slate-400"), children: "Yearly" }),
|
|
4325
|
+
isYearly && /* @__PURE__ */ jsx29(Badge, { className: "bg-emerald-100 text-emerald-700 border-0 ml-2", children: "Save up to 40%" })
|
|
4326
|
+
] }),
|
|
4327
|
+
cardsGrid,
|
|
4328
|
+
footerText && /* @__PURE__ */ jsx29("div", { className: "text-center mt-16", children: /* @__PURE__ */ jsx29("p", { className: "text-sm text-slate-400", children: footerText }) })
|
|
4565
4329
|
] }),
|
|
4566
|
-
|
|
4567
|
-
Button,
|
|
4568
|
-
{
|
|
4569
|
-
className: "w-full",
|
|
4570
|
-
size: "lg",
|
|
4571
|
-
variant: buttonState === "current" ? "outline" : "default",
|
|
4572
|
-
disabled: buttonState === "current",
|
|
4573
|
-
onClick: handleClick,
|
|
4574
|
-
children: [
|
|
4575
|
-
buttonState === "current" && /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-2", children: [
|
|
4576
|
-
/* @__PURE__ */ jsx29(
|
|
4577
|
-
"svg",
|
|
4578
|
-
{
|
|
4579
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
4580
|
-
width: "16",
|
|
4581
|
-
height: "16",
|
|
4582
|
-
viewBox: "0 0 24 24",
|
|
4583
|
-
fill: "none",
|
|
4584
|
-
stroke: "currentColor",
|
|
4585
|
-
strokeWidth: "2",
|
|
4586
|
-
strokeLinecap: "round",
|
|
4587
|
-
strokeLinejoin: "round",
|
|
4588
|
-
children: /* @__PURE__ */ jsx29("polyline", { points: "20 6 9 17 4 12" })
|
|
4589
|
-
}
|
|
4590
|
-
),
|
|
4591
|
-
"Current Plan"
|
|
4592
|
-
] }),
|
|
4593
|
-
buttonState === "buy" && (product.trialDays > 0 ? "Start Free Trial" : "Get Started"),
|
|
4594
|
-
buttonState === "upgrade" && "Upgrade",
|
|
4595
|
-
buttonState === "downgrade" && "Downgrade"
|
|
4596
|
-
]
|
|
4597
|
-
}
|
|
4598
|
-
) })
|
|
4330
|
+
paymentComponent
|
|
4599
4331
|
]
|
|
4600
4332
|
}
|
|
4601
4333
|
);
|
|
@@ -4624,7 +4356,7 @@ function CustomerPortal({
|
|
|
4624
4356
|
const [showPricingTable, setShowPricingTable] = useState17(false);
|
|
4625
4357
|
const [portalCustomer, setPortalCustomer] = useState17(null);
|
|
4626
4358
|
const iframeRef = useRef6(null);
|
|
4627
|
-
|
|
4359
|
+
useEffect13(() => {
|
|
4628
4360
|
console.log(
|
|
4629
4361
|
"%c\u{1F680} BillingOS SDK v1.2.0 - Iframe Customer Portal with Smart Pricing Table",
|
|
4630
4362
|
"background: linear-gradient(to right, #667eea, #764ba2); color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;"
|
|
@@ -4705,7 +4437,7 @@ function CustomerPortal({
|
|
|
4705
4437
|
onMessage: handleIframeMessage,
|
|
4706
4438
|
debug
|
|
4707
4439
|
});
|
|
4708
|
-
|
|
4440
|
+
useEffect13(() => {
|
|
4709
4441
|
if (sessionId && state === "ready") {
|
|
4710
4442
|
sendMessage({
|
|
4711
4443
|
type: "INIT_PORTAL",
|
|
@@ -4717,14 +4449,14 @@ function CustomerPortal({
|
|
|
4717
4449
|
});
|
|
4718
4450
|
}
|
|
4719
4451
|
}, [sessionId, state, theme, defaultTab, sendMessage]);
|
|
4720
|
-
|
|
4452
|
+
useEffect13(() => {
|
|
4721
4453
|
if (!isOpenOrPage) {
|
|
4722
4454
|
setState("loading");
|
|
4723
4455
|
setError(null);
|
|
4724
4456
|
setIframeHeight(600);
|
|
4725
4457
|
}
|
|
4726
4458
|
}, [isOpenOrPage]);
|
|
4727
|
-
|
|
4459
|
+
useEffect13(() => {
|
|
4728
4460
|
if (sessionError) {
|
|
4729
4461
|
setState("error");
|
|
4730
4462
|
setError(sessionError);
|
|
@@ -5909,7 +5641,7 @@ function SettingsTab({
|
|
|
5909
5641
|
}
|
|
5910
5642
|
|
|
5911
5643
|
// src/components/CustomerPortal/modals/ChangePlanModal.tsx
|
|
5912
|
-
import * as
|
|
5644
|
+
import * as React25 from "react";
|
|
5913
5645
|
|
|
5914
5646
|
// src/components/CustomerPortal/components/ProrationPreview.tsx
|
|
5915
5647
|
import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
@@ -6046,9 +5778,9 @@ function ChangePlanModal({
|
|
|
6046
5778
|
subscriptionId,
|
|
6047
5779
|
onSuccess
|
|
6048
5780
|
}) {
|
|
6049
|
-
const [selectedPlan, setSelectedPlan] =
|
|
6050
|
-
const [preview, setPreview] =
|
|
6051
|
-
const [showConfirmation, setShowConfirmation] =
|
|
5781
|
+
const [selectedPlan, setSelectedPlan] = React25.useState(null);
|
|
5782
|
+
const [preview, setPreview] = React25.useState(null);
|
|
5783
|
+
const [showConfirmation, setShowConfirmation] = React25.useState(false);
|
|
6052
5784
|
const { data: availablePlans, isLoading: isLoadingPlans, error: plansError } = useAvailablePlans(
|
|
6053
5785
|
subscriptionId,
|
|
6054
5786
|
{ enabled: open }
|
|
@@ -6060,7 +5792,7 @@ function ChangePlanModal({
|
|
|
6060
5792
|
onOpenChange(false);
|
|
6061
5793
|
}
|
|
6062
5794
|
});
|
|
6063
|
-
|
|
5795
|
+
React25.useEffect(() => {
|
|
6064
5796
|
if (!open) {
|
|
6065
5797
|
setSelectedPlan(null);
|
|
6066
5798
|
setPreview(null);
|
|
@@ -6196,7 +5928,7 @@ function ChangePlanModal({
|
|
|
6196
5928
|
}
|
|
6197
5929
|
|
|
6198
5930
|
// src/components/CustomerPortal/modals/CancelSubscriptionModal.tsx
|
|
6199
|
-
import * as
|
|
5931
|
+
import * as React26 from "react";
|
|
6200
5932
|
import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
6201
5933
|
var CANCELLATION_REASONS = [
|
|
6202
5934
|
{ value: "too_expensive", label: "Too expensive" },
|
|
@@ -6212,10 +5944,10 @@ function CancelSubscriptionModal({
|
|
|
6212
5944
|
onConfirm,
|
|
6213
5945
|
isCanceling
|
|
6214
5946
|
}) {
|
|
6215
|
-
const [selectedReasons, setSelectedReasons] =
|
|
6216
|
-
const [feedback, setFeedback] =
|
|
6217
|
-
const [cancelTiming, setCancelTiming] =
|
|
6218
|
-
|
|
5947
|
+
const [selectedReasons, setSelectedReasons] = React26.useState([]);
|
|
5948
|
+
const [feedback, setFeedback] = React26.useState("");
|
|
5949
|
+
const [cancelTiming, setCancelTiming] = React26.useState("period_end");
|
|
5950
|
+
React26.useEffect(() => {
|
|
6219
5951
|
if (open) {
|
|
6220
5952
|
setSelectedReasons([]);
|
|
6221
5953
|
setFeedback("");
|
|
@@ -6335,7 +6067,7 @@ function CancelSubscriptionModal({
|
|
|
6335
6067
|
}
|
|
6336
6068
|
|
|
6337
6069
|
// src/components/CustomerPortal/modals/AddPaymentMethodModal.tsx
|
|
6338
|
-
import * as
|
|
6070
|
+
import * as React27 from "react";
|
|
6339
6071
|
import {
|
|
6340
6072
|
Elements as Elements2,
|
|
6341
6073
|
CardElement,
|
|
@@ -6361,9 +6093,9 @@ var cardElementOptions = {
|
|
|
6361
6093
|
function PaymentForm2({ clientSecret, onSuccess, onCancel }) {
|
|
6362
6094
|
const stripe = useStripe2();
|
|
6363
6095
|
const elements = useElements2();
|
|
6364
|
-
const [isSubmitting, setIsSubmitting] =
|
|
6365
|
-
const [error, setError] =
|
|
6366
|
-
const [setAsDefault, setSetAsDefault] =
|
|
6096
|
+
const [isSubmitting, setIsSubmitting] = React27.useState(false);
|
|
6097
|
+
const [error, setError] = React27.useState(null);
|
|
6098
|
+
const [setAsDefault, setSetAsDefault] = React27.useState(true);
|
|
6367
6099
|
const handleSubmit = async (e) => {
|
|
6368
6100
|
e.preventDefault();
|
|
6369
6101
|
if (!stripe || !elements) {
|
|
@@ -6516,7 +6248,7 @@ function AddPaymentMethodModal({
|
|
|
6516
6248
|
}
|
|
6517
6249
|
|
|
6518
6250
|
// src/components/UpgradeNudge/UpgradeNudge.tsx
|
|
6519
|
-
import * as
|
|
6251
|
+
import * as React28 from "react";
|
|
6520
6252
|
|
|
6521
6253
|
// src/components/UpgradeNudge/BannerNudge.tsx
|
|
6522
6254
|
import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
@@ -6724,7 +6456,7 @@ function ModalNudge({
|
|
|
6724
6456
|
onDismiss
|
|
6725
6457
|
}) {
|
|
6726
6458
|
const isUrgent = trigger.actual && trigger.actual >= 100;
|
|
6727
|
-
const
|
|
6459
|
+
const formatPrice2 = (amount, currency) => {
|
|
6728
6460
|
return new Intl.NumberFormat("en-US", {
|
|
6729
6461
|
style: "currency",
|
|
6730
6462
|
currency: currency.toUpperCase(),
|
|
@@ -6788,7 +6520,7 @@ function ModalNudge({
|
|
|
6788
6520
|
/* @__PURE__ */ jsxs28("div", { children: [
|
|
6789
6521
|
/* @__PURE__ */ jsx46("h3", { className: "font-semibold text-lg", children: trigger.suggestedPlan.name }),
|
|
6790
6522
|
/* @__PURE__ */ jsxs28("div", { className: "flex items-baseline gap-1 mt-1", children: [
|
|
6791
|
-
/* @__PURE__ */ jsx46("span", { className: "text-2xl font-bold", children:
|
|
6523
|
+
/* @__PURE__ */ jsx46("span", { className: "text-2xl font-bold", children: formatPrice2(
|
|
6792
6524
|
trigger.suggestedPlan.price.amount,
|
|
6793
6525
|
trigger.suggestedPlan.price.currency
|
|
6794
6526
|
) }),
|
|
@@ -6841,7 +6573,7 @@ function ModalNudge({
|
|
|
6841
6573
|
children: [
|
|
6842
6574
|
trigger.message.cta,
|
|
6843
6575
|
" - ",
|
|
6844
|
-
|
|
6576
|
+
formatPrice2(
|
|
6845
6577
|
trigger.suggestedPlan.price.amount,
|
|
6846
6578
|
trigger.suggestedPlan.price.currency
|
|
6847
6579
|
),
|
|
@@ -6871,11 +6603,11 @@ function UpgradeNudge({
|
|
|
6871
6603
|
onDismiss,
|
|
6872
6604
|
theme
|
|
6873
6605
|
}) {
|
|
6874
|
-
const [isVisible, setIsVisible] =
|
|
6875
|
-
|
|
6606
|
+
const [isVisible, setIsVisible] = React28.useState(true);
|
|
6607
|
+
React28.useEffect(() => {
|
|
6876
6608
|
setIsVisible(true);
|
|
6877
6609
|
}, [trigger, style]);
|
|
6878
|
-
|
|
6610
|
+
React28.useEffect(() => {
|
|
6879
6611
|
if (autoDismiss > 0 && isVisible) {
|
|
6880
6612
|
const timer = setTimeout(() => {
|
|
6881
6613
|
handleDismiss();
|
|
@@ -6883,7 +6615,7 @@ function UpgradeNudge({
|
|
|
6883
6615
|
return () => clearTimeout(timer);
|
|
6884
6616
|
}
|
|
6885
6617
|
}, [autoDismiss, isVisible]);
|
|
6886
|
-
|
|
6618
|
+
React28.useEffect(() => {
|
|
6887
6619
|
const handleKeyDown = (e) => {
|
|
6888
6620
|
if (e.key === "Escape" && isVisible) {
|
|
6889
6621
|
handleDismiss();
|
|
@@ -7462,6 +7194,7 @@ export {
|
|
|
7462
7194
|
SheetTrigger,
|
|
7463
7195
|
Skeleton,
|
|
7464
7196
|
SubscriptionTab,
|
|
7197
|
+
Switch,
|
|
7465
7198
|
Tabs,
|
|
7466
7199
|
TabsContent,
|
|
7467
7200
|
TabsList,
|