@betterstore/react 0.2.5 → 0.2.8
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/.prettierignore +2 -2
- package/CHANGELOG.md +18 -0
- package/LICENSE +21 -21
- package/dist/components/checkout-embed/checkout-form.d.ts +2 -1
- package/dist/components/checkout-embed/checkout-schema.d.ts +0 -45
- package/dist/components/checkout-embed/index.d.ts +3 -1
- package/dist/components/checkout-embed/payment/form.d.ts +3 -4
- package/dist/index.cjs.js +165 -188
- package/dist/index.mjs +166 -189
- package/package.json +20 -16
- package/rollup.config.mjs +2 -1
- package/.vscode/settings.json +0 -33
- package/tailwind.config.cjs +0 -15
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { create } from 'zustand';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { useState, useEffect
|
|
3
|
+
import React__default, { memo, useState, useEffect } from 'react';
|
|
4
4
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
|
6
6
|
import { clsx } from 'clsx';
|
|
@@ -12,9 +12,9 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
12
12
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
13
13
|
import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
|
|
14
14
|
import { z } from 'zod';
|
|
15
|
-
import
|
|
16
|
-
import { useStripe, useElements, PaymentElement as PaymentElement$1, Elements } from '@stripe/react-stripe-js';
|
|
15
|
+
import { useStripe, useElements, PaymentElement as PaymentElement$2, Elements } from '@stripe/react-stripe-js';
|
|
17
16
|
import { loadStripe } from '@stripe/stripe-js';
|
|
17
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
18
18
|
|
|
19
19
|
function createJSONStorage(getStorage, options) {
|
|
20
20
|
let storage;
|
|
@@ -567,18 +567,10 @@ const customerSchema = z.object({
|
|
|
567
567
|
const shippingMethodSchema = z.object({
|
|
568
568
|
method: z.enum(["economy", "standard"]),
|
|
569
569
|
});
|
|
570
|
-
// Payment method schema
|
|
571
|
-
const paymentMethodSchema = z.object({
|
|
572
|
-
cardNumber: z.string().min(1, "Card number is required"),
|
|
573
|
-
expiryDate: z.string().min(1, "Expiry date is required"),
|
|
574
|
-
cvv: z.string().min(1, "CVV is required"),
|
|
575
|
-
nameOnCard: z.string().min(1, "Name is required"),
|
|
576
|
-
});
|
|
577
570
|
// Combined checkout schema
|
|
578
571
|
z.object({
|
|
579
572
|
customer: customerSchema,
|
|
580
573
|
shipping: shippingMethodSchema,
|
|
581
|
-
payment: paymentMethodSchema,
|
|
582
574
|
});
|
|
583
575
|
|
|
584
576
|
function CustomerForm({ initialData, onSubmit, onBack, }) {
|
|
@@ -597,99 +589,141 @@ function CustomerForm({ initialData, onSubmit, onBack, }) {
|
|
|
597
589
|
saveInfo: false,
|
|
598
590
|
},
|
|
599
591
|
});
|
|
600
|
-
return (React__default.createElement(
|
|
601
|
-
React__default.createElement("
|
|
602
|
-
React__default.createElement("div", { className: "
|
|
603
|
-
React__default.createElement("
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
React__default.createElement(
|
|
607
|
-
|
|
608
|
-
React__default.createElement(FormMessage, null))) }),
|
|
609
|
-
React__default.createElement(FormField, { control: form.control, name: "marketingConsent", render: ({ field }) => (React__default.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
|
|
610
|
-
React__default.createElement(FormControl, null,
|
|
611
|
-
React__default.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
|
|
612
|
-
React__default.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Email me with news and offers"))) }),
|
|
613
|
-
React__default.createElement("div", { className: "flex items-center justify-between" },
|
|
614
|
-
React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping customer")),
|
|
615
|
-
React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
|
|
616
|
-
React__default.createElement("div", { className: "text-white" },
|
|
617
|
-
React__default.createElement("span", null, "Contact"),
|
|
618
|
-
React__default.createElement("span", { className: "ml-2 text-gray-400" }, "contactemail")),
|
|
619
|
-
React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
|
|
620
|
-
React__default.createElement(Form, Object.assign({}, form),
|
|
621
|
-
React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
|
|
622
|
-
React__default.createElement(FormField, { control: form.control, name: "country", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
623
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Country/Region"),
|
|
624
|
-
React__default.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
|
|
625
|
-
React__default.createElement(FormControl, null,
|
|
626
|
-
React__default.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
|
|
627
|
-
React__default.createElement(SelectValue, { placeholder: "Select a country" }))),
|
|
628
|
-
React__default.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
|
|
629
|
-
React__default.createElement(SelectItem, { value: "United States" }, "United States"),
|
|
630
|
-
React__default.createElement(SelectItem, { value: "Canada" }, "Canada"),
|
|
631
|
-
React__default.createElement(SelectItem, { value: "United Kingdom" }, "United Kingdom"))),
|
|
632
|
-
React__default.createElement(FormMessage, null))) }),
|
|
633
|
-
React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
|
|
634
|
-
React__default.createElement(FormField, { control: form.control, name: "firstName", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
635
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "First name (optional)"),
|
|
592
|
+
return (React__default.createElement(Form, Object.assign({}, form),
|
|
593
|
+
React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
|
|
594
|
+
React__default.createElement("div", { className: "space-y-6" },
|
|
595
|
+
React__default.createElement("div", { className: "space-y-2" },
|
|
596
|
+
React__default.createElement("div", { className: "flex items-center justify-between" },
|
|
597
|
+
React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Contact")),
|
|
598
|
+
React__default.createElement(FormField, { control: form.control, name: "email", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
599
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "Email or mobile phone number"),
|
|
636
600
|
React__default.createElement(FormControl, null,
|
|
637
|
-
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
601
|
+
React__default.createElement(Input, Object.assign({ placeholder: "email@example.com", className: "bg-black border-gray-700 text-white" }, field))),
|
|
638
602
|
React__default.createElement(FormMessage, null))) }),
|
|
639
|
-
React__default.createElement(FormField, { control: form.control, name: "
|
|
640
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Last name"),
|
|
641
|
-
React__default.createElement(FormControl, null,
|
|
642
|
-
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
643
|
-
React__default.createElement(FormMessage, null))) })),
|
|
644
|
-
React__default.createElement(FormField, { control: form.control, name: "apartment", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
645
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Apartment, suite, etc. (optional)"),
|
|
646
|
-
React__default.createElement(FormControl, null,
|
|
647
|
-
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
648
|
-
React__default.createElement(FormMessage, null))) }),
|
|
649
|
-
React__default.createElement("div", { className: "grid grid-cols-3 gap-4" },
|
|
650
|
-
React__default.createElement(FormField, { control: form.control, name: "city", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
651
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "City"),
|
|
603
|
+
React__default.createElement(FormField, { control: form.control, name: "marketingConsent", render: ({ field }) => (React__default.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
|
|
652
604
|
React__default.createElement(FormControl, null,
|
|
653
|
-
React__default.createElement(
|
|
654
|
-
React__default.createElement(
|
|
655
|
-
React__default.createElement(
|
|
656
|
-
|
|
605
|
+
React__default.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
|
|
606
|
+
React__default.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Email me with news and offers"))) }),
|
|
607
|
+
React__default.createElement("div", { className: "flex items-center justify-between" },
|
|
608
|
+
React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping customer")),
|
|
609
|
+
React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
|
|
610
|
+
React__default.createElement("div", { className: "text-white" },
|
|
611
|
+
React__default.createElement("span", null, "Contact"),
|
|
612
|
+
React__default.createElement("span", { className: "ml-2 text-gray-400" }, "contactemail")),
|
|
613
|
+
React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
|
|
614
|
+
React__default.createElement("div", { className: "space-y-4" },
|
|
615
|
+
React__default.createElement(FormField, { control: form.control, name: "country", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
616
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "Country/Region"),
|
|
657
617
|
React__default.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
|
|
658
618
|
React__default.createElement(FormControl, null,
|
|
659
619
|
React__default.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
|
|
660
|
-
React__default.createElement(SelectValue, { placeholder: "
|
|
620
|
+
React__default.createElement(SelectValue, { placeholder: "Select a country" }))),
|
|
661
621
|
React__default.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
|
|
662
|
-
React__default.createElement(SelectItem, { value: "
|
|
663
|
-
React__default.createElement(SelectItem, { value: "
|
|
664
|
-
React__default.createElement(SelectItem, { value: "
|
|
665
|
-
React__default.createElement(SelectItem, { value: "Texas" }, "Texas"))),
|
|
622
|
+
React__default.createElement(SelectItem, { value: "United States" }, "United States"),
|
|
623
|
+
React__default.createElement(SelectItem, { value: "Canada" }, "Canada"),
|
|
624
|
+
React__default.createElement(SelectItem, { value: "United Kingdom" }, "United Kingdom"))),
|
|
666
625
|
React__default.createElement(FormMessage, null))) }),
|
|
667
|
-
React__default.createElement(
|
|
668
|
-
|
|
626
|
+
React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
|
|
627
|
+
React__default.createElement(FormField, { control: form.control, name: "firstName", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
628
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "First name (optional)"),
|
|
629
|
+
React__default.createElement(FormControl, null,
|
|
630
|
+
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
631
|
+
React__default.createElement(FormMessage, null))) }),
|
|
632
|
+
React__default.createElement(FormField, { control: form.control, name: "lastName", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
633
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "Last name"),
|
|
634
|
+
React__default.createElement(FormControl, null,
|
|
635
|
+
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
636
|
+
React__default.createElement(FormMessage, null))) })),
|
|
637
|
+
React__default.createElement(FormField, { control: form.control, name: "apartment", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
638
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "Apartment, suite, etc. (optional)"),
|
|
669
639
|
React__default.createElement(FormControl, null,
|
|
670
640
|
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
671
|
-
React__default.createElement(FormMessage, null))) })
|
|
672
|
-
|
|
673
|
-
React__default.createElement(
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
React__default.createElement(
|
|
679
|
-
|
|
680
|
-
|
|
641
|
+
React__default.createElement(FormMessage, null))) }),
|
|
642
|
+
React__default.createElement("div", { className: "grid grid-cols-3 gap-4" },
|
|
643
|
+
React__default.createElement(FormField, { control: form.control, name: "city", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
644
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "City"),
|
|
645
|
+
React__default.createElement(FormControl, null,
|
|
646
|
+
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
647
|
+
React__default.createElement(FormMessage, null))) }),
|
|
648
|
+
React__default.createElement(FormField, { control: form.control, name: "state", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
649
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "State"),
|
|
650
|
+
React__default.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
|
|
651
|
+
React__default.createElement(FormControl, null,
|
|
652
|
+
React__default.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
|
|
653
|
+
React__default.createElement(SelectValue, { placeholder: "State" }))),
|
|
654
|
+
React__default.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
|
|
655
|
+
React__default.createElement(SelectItem, { value: "Illinois" }, "Illinois"),
|
|
656
|
+
React__default.createElement(SelectItem, { value: "California" }, "California"),
|
|
657
|
+
React__default.createElement(SelectItem, { value: "New York" }, "New York"),
|
|
658
|
+
React__default.createElement(SelectItem, { value: "Texas" }, "Texas"))),
|
|
659
|
+
React__default.createElement(FormMessage, null))) }),
|
|
660
|
+
React__default.createElement(FormField, { control: form.control, name: "zipCode", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
661
|
+
React__default.createElement(FormLabel, { className: "text-white" }, "ZIP code"),
|
|
662
|
+
React__default.createElement(FormControl, null,
|
|
663
|
+
React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
|
|
664
|
+
React__default.createElement(FormMessage, null))) })),
|
|
665
|
+
React__default.createElement(FormField, { control: form.control, name: "saveInfo", render: ({ field }) => (React__default.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
|
|
666
|
+
React__default.createElement(FormControl, null,
|
|
667
|
+
React__default.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
|
|
668
|
+
React__default.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Save this information for next time"))) }),
|
|
669
|
+
React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
|
|
670
|
+
React__default.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
|
|
671
|
+
React__default.createElement(ChevronLeft, { className: "h-4 w-4" }),
|
|
672
|
+
"Return to information"),
|
|
673
|
+
React__default.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Continue to shipping")))))));
|
|
681
674
|
}
|
|
682
675
|
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
676
|
+
const useCheckout = create((set) => ({
|
|
677
|
+
isSubmitting: false,
|
|
678
|
+
setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
|
|
679
|
+
}));
|
|
680
|
+
|
|
681
|
+
const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
|
|
682
|
+
const stripe = useStripe();
|
|
683
|
+
const elements = useElements();
|
|
684
|
+
const { setIsSubmitting } = useCheckout();
|
|
685
|
+
const [errorMessage, setErrorMessage] = useState(undefined);
|
|
686
|
+
const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
|
|
687
|
+
event.preventDefault();
|
|
688
|
+
if (!stripe || !elements) {
|
|
689
|
+
return;
|
|
690
|
+
}
|
|
691
|
+
setIsSubmitting(true);
|
|
692
|
+
const response = yield stripe.confirmPayment({
|
|
693
|
+
elements,
|
|
694
|
+
redirect: "if_required",
|
|
695
|
+
});
|
|
696
|
+
if (response.error) {
|
|
697
|
+
setErrorMessage(response.error.message || "Something went wrong.");
|
|
698
|
+
setIsSubmitting(false);
|
|
699
|
+
onError === null || onError === void 0 ? void 0 : onError();
|
|
700
|
+
}
|
|
701
|
+
else {
|
|
702
|
+
setErrorMessage(undefined);
|
|
703
|
+
setIsSubmitting(false);
|
|
704
|
+
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
|
|
705
|
+
}
|
|
706
|
+
setErrorMessage(undefined);
|
|
707
|
+
setIsSubmitting(false);
|
|
692
708
|
});
|
|
709
|
+
return (React__default.createElement("form", { onSubmit: handleSubmit },
|
|
710
|
+
React__default.createElement("div", null,
|
|
711
|
+
React__default.createElement(PaymentElement$2, null),
|
|
712
|
+
React__default.createElement("p", { className: "text-red-500" }, errorMessage)),
|
|
713
|
+
children));
|
|
714
|
+
};
|
|
715
|
+
var CheckoutForm$2 = memo(CheckoutForm$1);
|
|
716
|
+
|
|
717
|
+
const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
|
|
718
|
+
const stripePromise = loadStripe(publicStripeKey);
|
|
719
|
+
function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
|
|
720
|
+
const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
|
|
721
|
+
return (React__default.createElement(Elements, { stripe: stripePromise, options: options },
|
|
722
|
+
React__default.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
|
|
723
|
+
}
|
|
724
|
+
var PaymentElement$1 = memo(PaymentElement);
|
|
725
|
+
|
|
726
|
+
function PaymentForm({ paymentSecret, onSubmit, onBack, contactEmail, shippingAddress, shippingMethod, shippingPrice, }) {
|
|
693
727
|
return (React__default.createElement("div", { className: "space-y-6" },
|
|
694
728
|
React__default.createElement("div", { className: "space-y-2" },
|
|
695
729
|
React__default.createElement("div", { className: "flex items-center justify-between" },
|
|
@@ -715,34 +749,8 @@ function PaymentForm({ initialData, onSubmit, onBack, contactEmail, shippingAddr
|
|
|
715
749
|
React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
|
|
716
750
|
React__default.createElement("div", { className: "space-y-4 bg-gray-900 p-4 rounded-md" },
|
|
717
751
|
React__default.createElement("div", { className: "text-white font-medium" }, "Payment method"),
|
|
718
|
-
React__default.createElement(
|
|
719
|
-
React__default.createElement("
|
|
720
|
-
React__default.createElement(FormField, { control: form.control, name: "cardNumber", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
721
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Card number"),
|
|
722
|
-
React__default.createElement(FormControl, null,
|
|
723
|
-
React__default.createElement(Input, Object.assign({ placeholder: "1234 5678 9012 3456", className: "bg-black border-gray-700 text-white" }, field))),
|
|
724
|
-
React__default.createElement(FormMessage, null))) }),
|
|
725
|
-
React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
|
|
726
|
-
React__default.createElement(FormField, { control: form.control, name: "expiryDate", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
727
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Expiration date (MM/YY)"),
|
|
728
|
-
React__default.createElement(FormControl, null,
|
|
729
|
-
React__default.createElement(Input, Object.assign({ placeholder: "MM/YY", className: "bg-black border-gray-700 text-white" }, field))),
|
|
730
|
-
React__default.createElement(FormMessage, null))) }),
|
|
731
|
-
React__default.createElement(FormField, { control: form.control, name: "cvv", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
732
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Security code"),
|
|
733
|
-
React__default.createElement(FormControl, null,
|
|
734
|
-
React__default.createElement(Input, Object.assign({ placeholder: "CVV", className: "bg-black border-gray-700 text-white" }, field))),
|
|
735
|
-
React__default.createElement(FormMessage, null))) })),
|
|
736
|
-
React__default.createElement(FormField, { control: form.control, name: "nameOnCard", render: ({ field }) => (React__default.createElement(FormItem, null,
|
|
737
|
-
React__default.createElement(FormLabel, { className: "text-white" }, "Name on card"),
|
|
738
|
-
React__default.createElement(FormControl, null,
|
|
739
|
-
React__default.createElement(Input, Object.assign({ placeholder: "Name as it appears on card", className: "bg-black border-gray-700 text-white" }, field))),
|
|
740
|
-
React__default.createElement(FormMessage, null))) }),
|
|
741
|
-
React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
|
|
742
|
-
React__default.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
|
|
743
|
-
React__default.createElement(ChevronLeft, { className: "h-4 w-4" }),
|
|
744
|
-
"Return to shipping"),
|
|
745
|
-
React__default.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Pay now")))))));
|
|
752
|
+
paymentSecret && (React__default.createElement(PaymentElement$1, { paymentSecret: paymentSecret },
|
|
753
|
+
React__default.createElement("button", null, "Submit"))))));
|
|
746
754
|
}
|
|
747
755
|
|
|
748
756
|
function RadioGroup(_a) {
|
|
@@ -814,15 +822,15 @@ function useLocalStorage(key, initialValue) {
|
|
|
814
822
|
try {
|
|
815
823
|
// Get from local storage by key
|
|
816
824
|
const item = window.localStorage.getItem(key);
|
|
817
|
-
//
|
|
818
|
-
|
|
825
|
+
// Only set the value if we found something in localStorage
|
|
826
|
+
if (item) {
|
|
827
|
+
setStoredValue(JSON.parse(item));
|
|
828
|
+
}
|
|
819
829
|
}
|
|
820
830
|
catch (error) {
|
|
821
|
-
// If error, just use the initialValue
|
|
822
831
|
console.error(error);
|
|
823
|
-
setStoredValue(initialValue);
|
|
824
832
|
}
|
|
825
|
-
}, [
|
|
833
|
+
}, []); // Only run on mount
|
|
826
834
|
// Return a wrapped version of useState's setter function that
|
|
827
835
|
// persists the new value to localStorage.
|
|
828
836
|
const setValue = (value) => {
|
|
@@ -844,8 +852,9 @@ function useLocalStorage(key, initialValue) {
|
|
|
844
852
|
return [storedValue, setValue];
|
|
845
853
|
}
|
|
846
854
|
|
|
847
|
-
function CheckoutForm
|
|
848
|
-
const [
|
|
855
|
+
function CheckoutForm({ checkoutId, onComplete, cancelUrl, }) {
|
|
856
|
+
const [paymentSecret, setPaymentSecret] = useState(null);
|
|
857
|
+
const [step, setStep] = useState("customer");
|
|
849
858
|
const [formData, setFormData] = useLocalStorage(`checkout-${checkoutId}`, {});
|
|
850
859
|
// Helper function to format address for display
|
|
851
860
|
const formatAddress = (address) => {
|
|
@@ -882,20 +891,29 @@ function CheckoutForm$2({ checkoutId, onComplete, }) {
|
|
|
882
891
|
};
|
|
883
892
|
// Navigate back to previous step
|
|
884
893
|
const handleBack = () => {
|
|
885
|
-
if (step === "customer")
|
|
886
|
-
|
|
894
|
+
if (step === "customer") {
|
|
895
|
+
window.location.replace(cancelUrl);
|
|
896
|
+
}
|
|
887
897
|
if (step === "shipping")
|
|
888
898
|
setStep("customer");
|
|
889
899
|
if (step === "payment")
|
|
890
900
|
setStep("shipping");
|
|
891
901
|
};
|
|
902
|
+
useEffect(() => {
|
|
903
|
+
const fetchPaymentSecret = () => __awaiter(this, void 0, void 0, function* () {
|
|
904
|
+
const response = yield fetch(`/api/betterstore/checkout/payment/${checkoutId}`);
|
|
905
|
+
const data = yield response.json();
|
|
906
|
+
setPaymentSecret(data);
|
|
907
|
+
});
|
|
908
|
+
fetchPaymentSecret();
|
|
909
|
+
}, []);
|
|
892
910
|
return (React__default.createElement("div", { className: "space-y-6" },
|
|
893
911
|
step === "customer" && (React__default.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit, onBack: handleBack })),
|
|
894
912
|
step === "shipping" && formData.customer && (React__default.createElement(ShippingMethodForm, { initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer) })),
|
|
895
913
|
step === "payment" &&
|
|
896
914
|
formData.customer &&
|
|
897
915
|
formData.customer &&
|
|
898
|
-
formData.shipping && (React__default.createElement(PaymentForm, {
|
|
916
|
+
formData.shipping && (React__default.createElement(PaymentForm, { paymentSecret: paymentSecret, onSubmit: handlePaymentSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer), shippingMethod: formatShippingMethod(formData.shipping.method).name, shippingPrice: formatShippingMethod(formData.shipping.method).price }))));
|
|
899
917
|
}
|
|
900
918
|
|
|
901
919
|
function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
|
|
@@ -939,89 +957,48 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
|
|
|
939
957
|
React__default.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
|
|
940
958
|
}
|
|
941
959
|
|
|
942
|
-
function CheckoutEmbed({ checkoutId }) {
|
|
960
|
+
function CheckoutEmbed({ checkoutId, cancelUrl, successUrl, }) {
|
|
943
961
|
const [checkout, setCheckout] = useState(null);
|
|
944
962
|
const [loading, setLoading] = useState(true);
|
|
945
963
|
useEffect(() => {
|
|
964
|
+
let mounted = true; // Add mounted flag for cleanup
|
|
946
965
|
function fetchCheckout() {
|
|
947
966
|
return __awaiter(this, void 0, void 0, function* () {
|
|
948
967
|
try {
|
|
949
968
|
const response = yield fetch(`/api/betterstore/checkout?checkoutId=${checkoutId}`);
|
|
950
969
|
const data = yield response.json();
|
|
951
|
-
|
|
970
|
+
if (mounted) {
|
|
971
|
+
// Only update state if component is still mounted
|
|
972
|
+
setCheckout(data);
|
|
973
|
+
setLoading(false);
|
|
974
|
+
}
|
|
952
975
|
}
|
|
953
976
|
catch (error) {
|
|
954
977
|
console.error("Failed to fetch checkout:", error);
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
978
|
+
if (mounted) {
|
|
979
|
+
setLoading(false);
|
|
980
|
+
}
|
|
958
981
|
}
|
|
959
982
|
});
|
|
960
983
|
}
|
|
961
984
|
fetchCheckout();
|
|
962
|
-
|
|
985
|
+
return () => {
|
|
986
|
+
mounted = false; // Cleanup
|
|
987
|
+
};
|
|
988
|
+
}, [checkoutId]); // Only re-run if checkoutId changes
|
|
963
989
|
const handleComplete = (formData) => {
|
|
964
990
|
console.log("Checkout complete:", formData);
|
|
991
|
+
console.log("Success URL:", successUrl);
|
|
965
992
|
// Here you would typically send the completed form data to your API
|
|
966
993
|
};
|
|
967
994
|
if (!checkout && !loading) {
|
|
968
995
|
return React__default.createElement("div", null, "Checkout not found");
|
|
969
996
|
}
|
|
970
997
|
return (React__default.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
|
|
971
|
-
React__default.createElement("div", null, loading ? (React__default.createElement("div", { className: "text-white" }, "Loading...")) : (React__default.createElement(CheckoutForm
|
|
998
|
+
React__default.createElement("div", null, loading ? (React__default.createElement("div", { className: "text-white" }, "Loading...")) : (React__default.createElement(CheckoutForm, { cancelUrl: cancelUrl, checkoutId: checkoutId, onComplete: handleComplete }))),
|
|
972
999
|
React__default.createElement("div", null, loading ? (React__default.createElement("div", null, "Loading...")) : (React__default.createElement(CheckoutSummary, { currency: checkout.currency, lineItems: checkout.lineItems, shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax })))));
|
|
973
1000
|
}
|
|
974
|
-
var index
|
|
975
|
-
|
|
976
|
-
const useCheckout = create((set) => ({
|
|
977
|
-
isSubmitting: false,
|
|
978
|
-
setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
|
|
979
|
-
}));
|
|
980
|
-
|
|
981
|
-
const CheckoutForm = ({ onSuccess, onError, children, }) => {
|
|
982
|
-
const stripe = useStripe();
|
|
983
|
-
const elements = useElements();
|
|
984
|
-
const { setIsSubmitting } = useCheckout();
|
|
985
|
-
const [errorMessage, setErrorMessage] = useState(undefined);
|
|
986
|
-
const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
|
|
987
|
-
event.preventDefault();
|
|
988
|
-
if (!stripe || !elements) {
|
|
989
|
-
return;
|
|
990
|
-
}
|
|
991
|
-
setIsSubmitting(true);
|
|
992
|
-
const response = yield stripe.confirmPayment({
|
|
993
|
-
elements,
|
|
994
|
-
redirect: "if_required",
|
|
995
|
-
});
|
|
996
|
-
if (response.error) {
|
|
997
|
-
setErrorMessage(response.error.message || "Something went wrong.");
|
|
998
|
-
setIsSubmitting(false);
|
|
999
|
-
onError === null || onError === void 0 ? void 0 : onError();
|
|
1000
|
-
}
|
|
1001
|
-
else {
|
|
1002
|
-
setErrorMessage(undefined);
|
|
1003
|
-
setIsSubmitting(false);
|
|
1004
|
-
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
|
|
1005
|
-
}
|
|
1006
|
-
setErrorMessage(undefined);
|
|
1007
|
-
setIsSubmitting(false);
|
|
1008
|
-
});
|
|
1009
|
-
return (React__default.createElement("form", { onSubmit: handleSubmit },
|
|
1010
|
-
React__default.createElement("div", null,
|
|
1011
|
-
React__default.createElement(PaymentElement$1, null),
|
|
1012
|
-
React__default.createElement("p", { className: "text-red-500" }, errorMessage)),
|
|
1013
|
-
children));
|
|
1014
|
-
};
|
|
1015
|
-
var CheckoutForm$1 = memo(CheckoutForm);
|
|
1016
|
-
|
|
1017
|
-
const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
|
|
1018
|
-
const stripePromise = loadStripe(publicStripeKey);
|
|
1019
|
-
function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
|
|
1020
|
-
const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
|
|
1021
|
-
return (React__default.createElement(Elements, { stripe: stripePromise, options: options },
|
|
1022
|
-
React__default.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
|
|
1023
|
-
}
|
|
1024
|
-
var index = memo(PaymentElement);
|
|
1001
|
+
var index = memo(CheckoutEmbed);
|
|
1025
1002
|
|
|
1026
1003
|
function styleInject(css, ref) {
|
|
1027
1004
|
if ( ref === void 0 ) ref = {};
|
|
@@ -1050,7 +1027,7 @@ function styleInject(css, ref) {
|
|
|
1050
1027
|
}
|
|
1051
1028
|
}
|
|
1052
1029
|
|
|
1053
|
-
var css_248z = "/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-500:oklch(0.637 0.237 25.331);--color-blue-500:oklch(0.623 0.214 259.815);--color-blue-600:oklch(0.546 0.245 262.881);--color-blue-700:oklch(0.488 0.243 264.376);--color-gray-400:oklch(0.707 0.022 261.325);--color-gray-700:oklch(0.373 0.034 259.733);--color-gray-900:oklch(0.21 0.034 264.665);--color-zinc-400:oklch(0.705 0.015 286.067);--color-zinc-700:oklch(0.37 0.013 285.805);--color-zinc-800:oklch(0.274 0.006 286.033);--color-zinc-900:oklch(0.21 0.006 285.885);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(\n --font-sans--font-variation-settings\n );--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(\n --font-mono--font-feature-settings\n );--default-mono-font-variation-settings:var(\n --font-mono--font-variation-settings\n )}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var( --default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\" );font-variation-settings:var( --default-font-variation-settings,normal );line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var( --default-mono-font-feature-settings,normal );font-family:var( --default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace );font-size:1em;font-variation-settings:var( --default-mono-font-variation-settings,normal )}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{color:color-mix(in oklab,currentColor 50%,transparent);opacity:1}::placeholder{color:color-mix(in oklab,currentColor 50%,transparent);opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-top-2{top:calc(var(--spacing)*-2)}.top-1\\/2{top:50%}.-right-2{right:calc(var(--spacing)*-2)}.right-2{right:calc(var(--spacing)*2)}.left-1\\/2{left:50%}.z-50{z-index:50}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.my-1{margin-block:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1/1}.size-2{height:calc(var(--spacing)*2);width:calc(var(--spacing)*2)}.size-3\\.5{height:calc(var(--spacing)*3.5);width:calc(var(--spacing)*3.5)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-\\[var\\(--radix-select-trigger-height\\)\\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-px{height:1px}.max-h-96{max-height:calc(var(--spacing)*96)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-16{width:calc(var(--spacing)*16)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[8rem\\]{min-width:8rem}.min-w-\\[var\\(--radix-select-trigger-width\\)\\]{min-width:var(--radix-select-trigger-width)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:-50%}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.scroll-my-1{scroll-margin-block:calc(var(--spacing)*1)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.space-y-0{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*0*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*0*var(--tw-space-y-reverse))}}.space-y-1{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*1*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*1*var(--tw-space-y-reverse))}}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.space-x-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-reverse))}}.space-x-3{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*3*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*3*var(--tw-space-x-reverse))}}.overflow-hidden{overflow:hidden}.rounded-\\[4px\\]{border-radius:4px}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-gray-700{border-color:var(--color-gray-700)}.border-input{border-color:var(--input)}.border-zinc-800{border-color:var(--color-zinc-800)}.bg-background{background-color:var(--background)}.bg-black{background-color:var(--color-black)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:transparent}.bg-zinc-700{background-color:var(--color-zinc-700)}.bg-zinc-900{background-color:var(--color-zinc-900)}.fill-primary{fill:var(--primary)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-8{padding-right:calc(var(--spacing)*8)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-current{color:currentColor}.text-destructive-foreground{color:var(--destructive-foreground)}.text-gray-400{color:var(--color-gray-400)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.text-zinc-400{color:var(--color-zinc-400)}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:50%}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,rgba(0,0,0,.1)),0 2px 4px -2px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-md,.shadow-xs{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05))}.outline-hidden{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\\[color\\,box-shadow\\]{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-shadow{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-none{transition-property:none}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-data-\\[disabled\\=true\\]\\:pointer-events-none{&:is(:where(.group)[data-disabled=true] *){pointer-events:none}}.group-data-\\[disabled\\=true\\]\\:opacity-50{&:is(:where(.group)[data-disabled=true] *){opacity:50%}}.peer-disabled\\:cursor-not-allowed{&:is(:where(.peer):disabled~*){cursor:not-allowed}}.peer-disabled\\:opacity-50{&:is(:where(.peer):disabled~*){opacity:50%}}.selection\\:bg-primary{& ::-moz-selection{background-color:var(--primary)}& ::selection{background-color:var(--primary)}&::-moz-selection{background-color:var(--primary)}&::selection{background-color:var(--primary)}}.selection\\:text-primary-foreground{& ::-moz-selection{color:var(--primary-foreground)}& ::selection{color:var(--primary-foreground)}&::-moz-selection{color:var(--primary-foreground)}&::selection{color:var(--primary-foreground)}}.file\\:inline-flex{&::file-selector-button{display:inline-flex}}.file\\:h-7{&::file-selector-button{height:calc(var(--spacing)*7)}}.file\\:border-0{&::file-selector-button{border-style:var(--tw-border-style);border-width:0}}.file\\:bg-transparent{&::file-selector-button{background-color:transparent}}.file\\:text-sm{&::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.file\\:font-medium{&::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}}.file\\:text-foreground{&::file-selector-button{color:var(--foreground)}}.placeholder\\:text-muted-foreground{&::-moz-placeholder{color:var(--muted-foreground)}&::placeholder{color:var(--muted-foreground)}}.hover\\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\\:bg-blue-700{&:hover{@media (hover:hover){background-color:var(--color-blue-700)}}}.hover\\:bg-destructive\\/90{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}.hover\\:bg-primary\\/90{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}.hover\\:bg-secondary\\/80{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}}.hover\\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus\\:bg-accent{&:focus{background-color:var(--accent)}}.focus\\:text-accent-foreground{&:focus{color:var(--accent-foreground)}}.focus-visible\\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\\:ring-\\[3px\\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\\:ring-destructive\\/20{&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.focus-visible\\:ring-ring\\/50{&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}.disabled\\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\\:opacity-50{&:disabled{opacity:50%}}.has-\\[\\>svg\\]\\:px-2\\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\\[\\>svg\\]\\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\\[\\>svg\\]\\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\\:ring-destructive\\/20{&[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.data-\\[disabled\\]\\:pointer-events-none{&[data-disabled]{pointer-events:none}}.data-\\[disabled\\]\\:opacity-50{&[data-disabled]{opacity:50%}}.data-\\[error\\=true\\]\\:text-destructive-foreground{&[data-error=true]{color:var(--destructive-foreground)}}.data-\\[placeholder\\]\\:text-muted-foreground{&[data-placeholder]{color:var(--muted-foreground)}}.data-\\[side\\=bottom\\]\\:translate-y-1{&[data-side=bottom]{--tw-translate-y:calc(var(--spacing)*1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2{&[data-side=bottom]{--tw-enter-translate-y:-0.5rem}}.data-\\[side\\=left\\]\\:-translate-x-1{&[data-side=left]{--tw-translate-x:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=left\\]\\:slide-in-from-right-2{&[data-side=left]{--tw-enter-translate-x:0.5rem}}.data-\\[side\\=right\\]\\:translate-x-1{&[data-side=right]{--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=right\\]\\:slide-in-from-left-2{&[data-side=right]{--tw-enter-translate-x:-0.5rem}}.data-\\[side\\=top\\]\\:-translate-y-1{&[data-side=top]{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2{&[data-side=top]{--tw-enter-translate-y:0.5rem}}.\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1{:is(&>*){&[data-slot=select-value]{-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden}}}.\\*\\:data-\\[slot\\=select-value\\]\\:flex{:is(&>*){&[data-slot=select-value]{display:flex}}}.\\*\\:data-\\[slot\\=select-value\\]\\:items-center{:is(&>*){&[data-slot=select-value]{align-items:center}}}.\\*\\:data-\\[slot\\=select-value\\]\\:gap-2{:is(&>*){&[data-slot=select-value]{gap:calc(var(--spacing)*2)}}}.data-\\[state\\=checked\\]\\:border-blue-600{&[data-state=checked]{border-color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:border-primary{&[data-state=checked]{border-color:var(--primary)}}.data-\\[state\\=checked\\]\\:bg-blue-600{&[data-state=checked]{background-color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:bg-primary{&[data-state=checked]{background-color:var(--primary)}}.data-\\[state\\=checked\\]\\:text-blue-600{&[data-state=checked]{color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:text-primary-foreground{&[data-state=checked]{color:var(--primary-foreground)}}.data-\\[state\\=closed\\]\\:animate-out{&[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-duration:.15s;animation-name:exit}}.data-\\[state\\=closed\\]\\:fade-out-0{&[data-state=closed]{--tw-exit-opacity:0}}.data-\\[state\\=closed\\]\\:zoom-out-95{&[data-state=closed]{--tw-exit-scale:.95}}.data-\\[state\\=open\\]\\:animate-in{&[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}}.data-\\[state\\=open\\]\\:fade-in-0{&[data-state=open]{--tw-enter-opacity:0}}.data-\\[state\\=open\\]\\:zoom-in-95{&[data-state=open]{--tw-enter-scale:.95}}.dark\\:focus-visible\\:ring-destructive\\/40,.md\\:grid-cols-2,.md\\:text-sm{&:is(.dark *){&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}.dark\\:aria-invalid\\:ring-destructive\\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}.\\[\\&_svg\\]\\:pointer-events-none{& svg{pointer-events:none}}.\\[\\&_svg\\]\\:shrink-0{& svg{flex-shrink:0}}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground{& svg:not([class*=text-]){color:var(--muted-foreground)}}.\\*\\:\\[span\\]\\:last\\:flex{:is(&>*){&:is(span){&:last-child{display:flex}}}}.\\*\\:\\[span\\]\\:last\\:items-center{:is(&>*){&:is(span){&:last-child{align-items:center}}}}.\\*\\:\\[span\\]\\:last\\:gap-2{:is(&>*){&:is(span){&:last-child{gap:calc(var(--spacing)*2)}}}}}:root{--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--radius:0.625rem;--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{border-color:var(--border);outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}body{background-color:var(--background);color:var(--foreground)}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}";
|
|
1030
|
+
var css_248z = "/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */\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-500: oklch(0.637 0.237 25.331);\n --color-blue-500: oklch(0.623 0.214 259.815);\n --color-blue-600: oklch(0.546 0.245 262.881);\n --color-blue-700: oklch(0.488 0.243 264.376);\n --color-gray-400: oklch(0.707 0.022 261.325);\n --color-gray-700: oklch(0.373 0.034 259.733);\n --color-gray-900: oklch(0.21 0.034 264.665);\n --color-zinc-400: oklch(0.705 0.015 286.067);\n --color-zinc-700: oklch(0.37 0.013 285.805);\n --color-zinc-800: oklch(0.274 0.006 286.033);\n --color-zinc-900: oklch(0.21 0.006 285.885);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-bold: 700;\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-font-feature-settings: var(--font-sans--font-feature-settings);\n --default-font-variation-settings: var(\n --font-sans--font-variation-settings\n );\n --default-mono-font-family: var(--font-mono);\n --default-mono-font-feature-settings: var(\n --font-mono--font-feature-settings\n );\n --default-mono-font-variation-settings: var(\n --font-mono--font-variation-settings\n );\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" );\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var( --default-font-variation-settings, normal );\n -webkit-tap-highlight-color: transparent;\n }\n body {\n line-height: inherit;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace );\n font-feature-settings: var( --default-mono-font-feature-settings, normal );\n font-variation-settings: var( --default-mono-font-variation-settings, normal );\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n color: color-mix(in oklab, currentColor 50%, transparent);\n }\n ::placeholder {\n opacity: 1;\n color: color-mix(in oklab, currentColor 50%, transparent);\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .z-50 {\n z-index: 50;\n }\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n .my-1 {\n margin-block: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .ml-4 {\n margin-left: calc(var(--spacing) * 4);\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline-flex {\n display: inline-flex;\n }\n .aspect-square {\n aspect-ratio: 1 / 1;\n }\n .size-2 {\n width: calc(var(--spacing) * 2);\n height: calc(var(--spacing) * 2);\n }\n .size-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n .size-4 {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n .size-9 {\n width: calc(var(--spacing) * 9);\n height: calc(var(--spacing) * 9);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\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-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n height: var(--radix-select-trigger-height);\n }\n .h-auto {\n height: auto;\n }\n .h-px {\n height: 1px;\n }\n .max-h-96 {\n max-height: calc(var(--spacing) * 96);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n min-width: var(--radix-select-trigger-width);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .-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-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .scroll-my-1 {\n scroll-margin-block: calc(var(--spacing) * 1);\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .flex-row {\n flex-direction: row;\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 .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-0 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .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-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-3 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));\n }\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius);\n }\n .rounded-md {\n border-radius: calc(var(--radius) - 2px);\n }\n .rounded-sm {\n border-radius: calc(var(--radius) - 4px);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-gray-700 {\n border-color: var(--color-gray-700);\n }\n .border-input {\n border-color: var(--input);\n }\n .border-zinc-800 {\n border-color: var(--color-zinc-800);\n }\n .bg-background {\n background-color: var(--background);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-blue-600 {\n background-color: var(--color-blue-600);\n }\n .bg-border {\n background-color: var(--border);\n }\n .bg-destructive {\n background-color: var(--destructive);\n }\n .bg-gray-900 {\n background-color: var(--color-gray-900);\n }\n .bg-popover {\n background-color: var(--popover);\n }\n .bg-primary {\n background-color: var(--primary);\n }\n .bg-secondary {\n background-color: var(--secondary);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-zinc-700 {\n background-color: var(--color-zinc-700);\n }\n .bg-zinc-900 {\n background-color: var(--color-zinc-900);\n }\n .fill-primary {\n fill: var(--primary);\n }\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n .p-0 {\n padding: calc(var(--spacing) * 0);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\n }\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--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 .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-blue-500 {\n color: var(--color-blue-500);\n }\n .text-current {\n color: currentColor;\n }\n .text-destructive-foreground {\n color: var(--destructive-foreground);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted-foreground {\n color: var(--muted-foreground);\n }\n .text-popover-foreground {\n color: var(--popover-foreground);\n }\n .text-primary {\n color: var(--primary);\n }\n .text-primary-foreground {\n color: var(--primary-foreground);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-secondary-foreground {\n color: var(--secondary-foreground);\n }\n .text-white {\n color: var(--color-white);\n }\n .text-zinc-400 {\n color: var(--color-zinc-400);\n }\n .underline-offset-4 {\n text-underline-offset: 4px;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition-\\[color\\,box-shadow\\] {\n transition-property: color,box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-none {\n transition-property: none;\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n }\n .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: 50%;\n }\n }\n .peer-disabled\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n .peer-disabled\\:opacity-50 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 50%;\n }\n }\n .selection\\:bg-primary {\n & *::-moz-selection {\n background-color: var(--primary);\n }\n & *::selection {\n background-color: var(--primary);\n }\n &::-moz-selection {\n background-color: var(--primary);\n }\n &::selection {\n background-color: var(--primary);\n }\n }\n .selection\\:text-primary-foreground {\n & *::-moz-selection {\n color: var(--primary-foreground);\n }\n & *::selection {\n color: var(--primary-foreground);\n }\n &::-moz-selection {\n color: var(--primary-foreground);\n }\n &::selection {\n color: var(--primary-foreground);\n }\n }\n .file\\:inline-flex {\n &::file-selector-button {\n display: inline-flex;\n }\n }\n .file\\:h-7 {\n &::file-selector-button {\n height: calc(var(--spacing) * 7);\n }\n }\n .file\\:border-0 {\n &::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n .file\\:bg-transparent {\n &::file-selector-button {\n background-color: transparent;\n }\n }\n .file\\:text-sm {\n &::file-selector-button {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .file\\:font-medium {\n &::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n }\n .file\\:text-foreground {\n &::file-selector-button {\n color: var(--foreground);\n }\n }\n .placeholder\\:text-muted-foreground {\n &::-moz-placeholder {\n color: var(--muted-foreground);\n }\n &::placeholder {\n color: var(--muted-foreground);\n }\n }\n .hover\\:bg-accent {\n &:hover {\n @media (hover: hover) {\n background-color: var(--accent);\n }\n }\n }\n .hover\\:bg-blue-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-blue-700);\n }\n }\n }\n .hover\\:bg-destructive\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n }\n }\n }\n .hover\\:bg-primary\\/90 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n }\n }\n }\n .hover\\:text-accent-foreground {\n &:hover {\n @media (hover: hover) {\n color: var(--accent-foreground);\n }\n }\n }\n .hover\\:underline {\n &:hover {\n @media (hover: hover) {\n text-decoration-line: underline;\n }\n }\n }\n .focus\\:bg-accent {\n &:focus {\n background-color: var(--accent);\n }\n }\n .focus\\:text-accent-foreground {\n &:focus {\n color: var(--accent-foreground);\n }\n }\n .focus-visible\\:border-ring {\n &:focus-visible {\n border-color: var(--ring);\n }\n }\n .focus-visible\\:ring-\\[3px\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-destructive\\/20 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n .focus-visible\\:ring-ring\\/50 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .has-\\[\\>svg\\]\\:px-2\\.5 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n }\n .has-\\[\\>svg\\]\\:px-3 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 3);\n }\n }\n .has-\\[\\>svg\\]\\:px-4 {\n &:has(>svg) {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n .aria-invalid\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: var(--destructive);\n }\n }\n .aria-invalid\\:ring-destructive\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n }\n }\n .data-\\[disabled\\]\\:pointer-events-none {\n &[data-disabled] {\n pointer-events: none;\n }\n }\n .data-\\[disabled\\]\\:opacity-50 {\n &[data-disabled] {\n opacity: 50%;\n }\n }\n .data-\\[error\\=true\\]\\:text-destructive-foreground {\n &[data-error=\"true\"] {\n color: var(--destructive-foreground);\n }\n }\n .data-\\[placeholder\\]\\:text-muted-foreground {\n &[data-placeholder] {\n color: var(--muted-foreground);\n }\n }\n .data-\\[side\\=bottom\\]\\:translate-y-1 {\n &[data-side=\"bottom\"] {\n --tw-translate-y: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n &[data-side=\"bottom\"] {\n --tw-enter-translate-y: -0.5rem;\n }\n }\n .data-\\[side\\=left\\]\\:-translate-x-1 {\n &[data-side=\"left\"] {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n &[data-side=\"left\"] {\n --tw-enter-translate-x: 0.5rem;\n }\n }\n .data-\\[side\\=right\\]\\:translate-x-1 {\n &[data-side=\"right\"] {\n --tw-translate-x: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n &[data-side=\"right\"] {\n --tw-enter-translate-x: -0.5rem;\n }\n }\n .data-\\[side\\=top\\]\\:-translate-y-1 {\n &[data-side=\"top\"] {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n &[data-side=\"top\"] {\n --tw-enter-translate-y: 0.5rem;\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n display: flex;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n align-items: center;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n gap: calc(var(--spacing) * 2);\n }\n }\n }\n .data-\\[state\\=checked\\]\\:border-blue-600 {\n &[data-state=\"checked\"] {\n border-color: var(--color-blue-600);\n }\n }\n .data-\\[state\\=checked\\]\\:border-primary {\n &[data-state=\"checked\"] {\n border-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:bg-blue-600 {\n &[data-state=\"checked\"] {\n background-color: var(--color-blue-600);\n }\n }\n .data-\\[state\\=checked\\]\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: var(--primary);\n }\n }\n .data-\\[state\\=checked\\]\\:text-blue-600 {\n &[data-state=\"checked\"] {\n color: var(--color-blue-600);\n }\n }\n .data-\\[state\\=checked\\]\\:text-primary-foreground {\n &[data-state=\"checked\"] {\n color: var(--primary-foreground);\n }\n }\n .data-\\[state\\=closed\\]\\:animate-out {\n &[data-state=\"closed\"] {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n }\n }\n .data-\\[state\\=closed\\]\\:fade-out-0 {\n &[data-state=\"closed\"] {\n --tw-exit-opacity: 0;\n }\n }\n .data-\\[state\\=closed\\]\\:zoom-out-95 {\n &[data-state=\"closed\"] {\n --tw-exit-scale: .95;\n }\n }\n .data-\\[state\\=open\\]\\:animate-in {\n &[data-state=\"open\"] {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n }\n .data-\\[state\\=open\\]\\:fade-in-0 {\n &[data-state=\"open\"] {\n --tw-enter-opacity: 0;\n }\n }\n .data-\\[state\\=open\\]\\:zoom-in-95 {\n &[data-state=\"open\"] {\n --tw-enter-scale: .95;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .dark\\:focus-visible\\:ring-destructive\\/40 {\n &:is(.dark *) {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n .dark\\:aria-invalid\\:ring-destructive\\/40 {\n &:is(.dark *) {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n }\n }\n }\n .\\[\\&_svg\\]\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n .\\[\\&_svg\\]\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n & svg:not([class*='size-']) {\n width: calc(var(--spacing) * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n & svg:not([class*='text-']) {\n color: var(--muted-foreground);\n }\n }\n .\\*\\:\\[span\\]\\:last\\:flex {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n display: flex;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:items-center {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n align-items: center;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:gap-2 {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n gap: calc(var(--spacing) * 2);\n }\n }\n }\n }\n}\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.145 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.145 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.985 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.396 0.141 25.723);\n --destructive-foreground: oklch(0.637 0.237 25.331);\n --border: oklch(0.269 0 0);\n --input: oklch(0.269 0 0);\n --ring: oklch(0.439 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(0.269 0 0);\n --sidebar-ring: oklch(0.439 0 0);\n}\n@layer base {\n * {\n border-color: var(--border);\n outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n }\n body {\n background-color: var(--background);\n color: var(--foreground);\n }\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-space-x-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-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-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-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";
|
|
1054
1031
|
styleInject(css_248z);
|
|
1055
1032
|
|
|
1056
|
-
export { index
|
|
1033
|
+
export { index as CheckoutEmbed, PaymentElement$1 as PaymentElement, useCart, useCheckout };
|