xiod-ui 1.0.0

package/dist/components/input-payment.js

@@ -0,0 +1,1140 @@
+"use client";
+import { Tabs, TabsList, TabsTab } from "./tabs.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Input } from "@base-ui/react/input";
+import { CreditCard } from "xiod-icons/icons/CreditCard";
+import { Zap } from "xiod-icons/icons/Zap";
+//#region src/components/input-payment.tsx
+const CARD_TYPES = [
+	{
+		displayName: "Visa",
+		type: "visa",
+		startPattern: /^4/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [
+			16,
+			18,
+			19
+		],
+		code: {
+			name: "CVV",
+			length: 3
+		}
+	},
+	{
+		displayName: "Mastercard",
+		type: "mastercard",
+		startPattern: /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [16],
+		code: {
+			name: "CVC",
+			length: 3
+		}
+	},
+	{
+		displayName: "American Express",
+		type: "amex",
+		startPattern: /^3[47]/,
+		gaps: [4, 10],
+		lengths: [15],
+		code: {
+			name: "CID",
+			length: 4
+		}
+	},
+	{
+		displayName: "RuPay",
+		type: "rupay",
+		startPattern: /^(508[5-9]|6069[89]|607[0-9]|608[0-3]|652[1-5]|652[89]|653[0-1]|6950|353|356)/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [16],
+		code: {
+			name: "CVV",
+			length: 3
+		}
+	},
+	{
+		displayName: "UnionPay",
+		type: "unionpay",
+		startPattern: /^62/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [
+			14,
+			15,
+			16,
+			17,
+			18,
+			19
+		],
+		code: {
+			name: "CVN",
+			length: 3
+		}
+	},
+	{
+		displayName: "Discover",
+		type: "discover",
+		startPattern: /^(6011|65|64[4-9]|622)/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [16, 19],
+		code: {
+			name: "CID",
+			length: 3
+		}
+	},
+	{
+		displayName: "Diners Club",
+		type: "dinersclub",
+		startPattern: /^(36|38|30[0-5])/,
+		gaps: [4, 10],
+		lengths: [
+			14,
+			16,
+			19
+		],
+		code: {
+			name: "CVV",
+			length: 3
+		}
+	},
+	{
+		displayName: "JCB",
+		type: "jcb",
+		startPattern: /^35/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [
+			16,
+			17,
+			18,
+			19
+		],
+		code: {
+			name: "CVV",
+			length: 3
+		}
+	},
+	{
+		displayName: "Mir",
+		type: "mir",
+		startPattern: /^220[0-4]/,
+		gaps: [
+			4,
+			8,
+			12
+		],
+		lengths: [16],
+		code: {
+			name: "CVC",
+			length: 3
+		}
+	}
+];
+const DEFAULT_CARD_TYPE = {
+	displayName: "Unknown",
+	type: "unknown",
+	startPattern: /^/,
+	gaps: [
+		4,
+		8,
+		12
+	],
+	lengths: [16],
+	code: {
+		name: "CVC",
+		length: 3
+	}
+};
+function getCardTypeByValue(cardNumber) {
+	const clean = cardNumber.replace(/\D/g, "");
+	if (!clean) return DEFAULT_CARD_TYPE;
+	return CARD_TYPES.find((cardType) => cardType.startPattern.test(clean)) || DEFAULT_CARD_TYPE;
+}
+function detectBrand(cardNumber) {
+	return getCardTypeByValue(cardNumber).type;
+}
+const UPI_HANDLE_MAP = {
+	okaxis: "gpay",
+	okicici: "gpay",
+	oksbi: "gpay",
+	okhdfcbank: "gpay",
+	ybl: "phonepe",
+	ibl: "phonepe",
+	axl: "phonepe",
+	paytm: "paytm",
+	ptaxis: "paytm",
+	ptyes: "paytm",
+	ptsbi: "paytm",
+	pthdfc: "paytm",
+	apl: "amazonpay",
+	yapl: "amazonpay",
+	rapl: "amazonpay",
+	upi: "bhim",
+	cred: "cred",
+	axisb: "cred",
+	yescred: "cred",
+	yescurie: "cred",
+	waicici: "whatsapp"
+};
+function validateUpiId(vpa) {
+	const clean = vpa.trim();
+	if (!clean) return false;
+	return /^[a-zA-Z0-9._-]{2,256}@[a-zA-Z]{2,64}$/.test(clean);
+}
+function detectUpiProvider(vpa) {
+	const clean = vpa.trim().toLowerCase();
+	if (!clean.includes("@")) return "generic";
+	const handle = clean.split("@")[1];
+	if (!handle) return "generic";
+	return UPI_HANDLE_MAP[handle] || "generic";
+}
+function getUpiError(vpa) {
+	const clean = vpa.trim();
+	if (!clean) return "UPI ID is required";
+	if (!clean.includes("@")) return "UPI ID must contain '@' (e.g. user@bank)";
+	if (!validateUpiId(clean)) return "Invalid UPI ID format";
+}
+function validateLuhn(cardNumber) {
+	const clean = cardNumber.replace(/\D/g, "");
+	if (!clean || clean.length < 12) return false;
+	let sum = 0;
+	let shouldDouble = false;
+	for (let i = clean.length - 1; i >= 0; i--) {
+		let digit = parseInt(clean.charAt(i), 10);
+		if (shouldDouble) {
+			digit *= 2;
+			if (digit > 9) digit -= 9;
+		}
+		sum += digit;
+		shouldDouble = !shouldDouble;
+	}
+	return sum % 10 === 0;
+}
+function formatCardNumber(cardNumber, cardTypeConfig) {
+	const clean = cardNumber.replace(/\D/g, "");
+	if (!clean) return "";
+	const cardType = cardTypeConfig || getCardTypeByValue(clean);
+	const maxLen = cardType.lengths[cardType.lengths.length - 1] || 19;
+	const trimmed = clean.slice(0, maxLen);
+	const gaps = cardType.gaps || [
+		4,
+		8,
+		12
+	];
+	let formatted = "";
+	for (let i = 0; i < trimmed.length; i++) {
+		if (gaps.includes(i) && i > 0) formatted += " ";
+		formatted += trimmed[i];
+	}
+	return formatted;
+}
+function formatExpiry(value) {
+	const clean = value.replace(/\D/g, "");
+	if (!clean) return "";
+	if (clean.length === 1) {
+		if (clean[0] !== "0" && clean[0] !== "1") return `0${clean[0]}/`;
+		return clean;
+	}
+	const month = clean.slice(0, 2);
+	const year = clean.slice(2, 4);
+	let formattedMonth = month;
+	const monthNum = parseInt(month, 10);
+	if (monthNum > 12) formattedMonth = "12";
+	else if (monthNum === 0 && clean.length >= 2) formattedMonth = "01";
+	if (clean.length > 2) return `${formattedMonth}/${year}`;
+	if (clean.length === 2) return `${formattedMonth}/`;
+	return formattedMonth;
+}
+function getCardNumberError(cardNumber) {
+	const clean = cardNumber.replace(/\D/g, "");
+	if (!clean) return "Card number is required";
+	if (!getCardTypeByValue(clean).lengths.includes(clean.length)) return "Card number length is invalid";
+	if (!validateLuhn(clean)) return "Card number checksum is invalid";
+}
+function getExpiryDateError(expiryDate) {
+	const clean = expiryDate.replace(/\D/g, "");
+	if (!clean) return "Expiry date is required";
+	if (clean.length < 4) return "Expiry date must be MM/YY";
+	const month = parseInt(clean.slice(0, 2), 10);
+	const year = parseInt(`20${clean.slice(2, 4)}`, 10);
+	const now = /* @__PURE__ */ new Date();
+	const currentYear = now.getFullYear();
+	const currentMonth = now.getMonth() + 1;
+	if (month < 1 || month > 12) return "Expiry month must be 01–12";
+	if (year < currentYear) return "Expiry year is in the past";
+	if (year === currentYear && month < currentMonth) return "Expiry date is in the past";
+}
+function getCvcError(cvc, cardTypeConfig) {
+	const clean = cvc.replace(/\D/g, "");
+	if (!clean) return "CVC is required";
+	const expectedLength = cardTypeConfig?.code.length || 3;
+	if (clean.length !== expectedLength) return `CVC must be ${expectedLength} digits`;
+}
+function getZipError(zip) {
+	const clean = zip.trim();
+	if (!clean) return "ZIP code is required";
+	if (clean.length < 3 || clean.length > 10) return "ZIP code is invalid";
+}
+const InputPaymentContext = React$1.createContext(null);
+function useInputPaymentContext() {
+	const context = React$1.useContext(InputPaymentContext);
+	if (!context) throw new Error("InputPayment subcomponents must be rendered within an <InputPayment> provider component.");
+	return context;
+}
+const usePaymentInputContext = useInputPaymentContext;
+const useInputPayment = useInputPaymentContext;
+const usePaymentInput = useInputPaymentContext;
+function InputPayment({ paymentMethod: paymentMethodProp, defaultPaymentMethod = "card", onPaymentMethodChange, cardNumber: cardNumberProp, defaultCardNumber = "", onCardNumberChange, cardExpiry: cardExpiryProp, defaultCardExpiry = "", onCardExpiryChange, cardCvc: cardCvcProp, defaultCardCvc = "", onCardCvcChange, cardZip: cardZipProp, defaultCardZip = "", onCardZipChange, upiId: upiIdProp, defaultUpiId = "", onUpiIdChange, disabled = false, readOnly = false, autoFocusNext = true, onValidationChange, children, ...props }) {
+	const [internalPaymentMethod, setInternalPaymentMethod] = React$1.useState(defaultPaymentMethod);
+	const [internalCardNumber, setInternalCardNumber] = React$1.useState(defaultCardNumber);
+	const [internalCardExpiry, setInternalCardExpiry] = React$1.useState(defaultCardExpiry);
+	const [internalCardCvc, setInternalCardCvc] = React$1.useState(defaultCardCvc);
+	const [internalCardZip, setInternalCardZip] = React$1.useState(defaultCardZip);
+	const [internalUpiId, setInternalUpiId] = React$1.useState(defaultUpiId);
+	const [isInGroup, setIsInGroup] = React$1.useState(false);
+	const cardNumberRef = React$1.useRef(null);
+	const expiryRef = React$1.useRef(null);
+	const cvcRef = React$1.useRef(null);
+	const zipRef = React$1.useRef(null);
+	const upiRef = React$1.useRef(null);
+	const paymentMethod = paymentMethodProp ?? internalPaymentMethod;
+	const cardNumber = cardNumberProp ?? internalCardNumber;
+	const cardExpiry = cardExpiryProp ?? internalCardExpiry;
+	const cardCvc = cardCvcProp ?? internalCardCvc;
+	const cardZip = cardZipProp ?? internalCardZip;
+	const upiId = upiIdProp ?? internalUpiId;
+	const cardType = React$1.useMemo(() => getCardTypeByValue(cardNumber), [cardNumber]);
+	const brand = cardType.type;
+	const upiProvider = React$1.useMemo(() => detectUpiProvider(upiId), [upiId]);
+	const isLuhnValid = React$1.useMemo(() => validateLuhn(cardNumber), [cardNumber]);
+	const setPaymentMethod = React$1.useCallback((method) => {
+		if (paymentMethodProp === void 0) setInternalPaymentMethod(method);
+		onPaymentMethodChange?.(method);
+	}, [paymentMethodProp, onPaymentMethodChange]);
+	const errors = React$1.useMemo(() => {
+		const errs = {};
+		if (paymentMethod === "card") {
+			if (cardNumber) errs.cardNumber = getCardNumberError(cardNumber);
+			if (cardExpiry) errs.expiryDate = getExpiryDateError(cardExpiry);
+			if (cardCvc) errs.cvc = getCvcError(cardCvc, cardType);
+			if (cardZip) errs.zip = getZipError(cardZip);
+		} else if (paymentMethod === "upi") {
+			if (upiId) errs.upi = getUpiError(upiId);
+		}
+		return errs;
+	}, [
+		paymentMethod,
+		cardNumber,
+		cardExpiry,
+		cardCvc,
+		cardZip,
+		upiId,
+		cardType
+	]);
+	const isValid = React$1.useMemo(() => {
+		if (paymentMethod === "card") return Boolean(cardNumber) && Boolean(cardExpiry) && Boolean(cardCvc) && !errors.cardNumber && !errors.expiryDate && !errors.cvc && !errors.zip;
+		if (paymentMethod === "upi") return Boolean(upiId) && validateUpiId(upiId);
+		return false;
+	}, [
+		paymentMethod,
+		cardNumber,
+		cardExpiry,
+		cardCvc,
+		upiId,
+		errors
+	]);
+	React$1.useEffect(() => {
+		onValidationChange?.(isValid, errors);
+	}, [
+		isValid,
+		errors,
+		onValidationChange
+	]);
+	const setCardNumber = React$1.useCallback((val) => {
+		const clean = val.replace(/\D/g, "");
+		const detected = getCardTypeByValue(clean);
+		const formatted = formatCardNumber(clean, detected);
+		if (cardNumberProp === void 0) setInternalCardNumber(formatted);
+		onCardNumberChange?.(formatted);
+		if (autoFocusNext && detected.lengths.includes(clean.length) && validateLuhn(clean)) expiryRef.current?.focus();
+	}, [
+		cardNumberProp,
+		onCardNumberChange,
+		autoFocusNext
+	]);
+	const setCardExpiry = React$1.useCallback((val) => {
+		const formatted = formatExpiry(val);
+		if (cardExpiryProp === void 0) setInternalCardExpiry(formatted);
+		onCardExpiryChange?.(formatted);
+		const clean = formatted.replace(/\D/g, "");
+		if (autoFocusNext && clean.length === 4 && !getExpiryDateError(formatted)) cvcRef.current?.focus();
+	}, [
+		cardExpiryProp,
+		onCardExpiryChange,
+		autoFocusNext
+	]);
+	const setCardCvc = React$1.useCallback((val) => {
+		const clean = val.replace(/\D/g, "");
+		const limit = cardType.code.length;
+		const truncated = clean.slice(0, limit);
+		if (cardCvcProp === void 0) setInternalCardCvc(truncated);
+		onCardCvcChange?.(truncated);
+		if (autoFocusNext && truncated.length === limit && zipRef.current) zipRef.current.focus();
+	}, [
+		cardCvcProp,
+		onCardCvcChange,
+		cardType,
+		autoFocusNext
+	]);
+	const setCardZip = React$1.useCallback((val) => {
+		if (cardZipProp === void 0) setInternalCardZip(val);
+		onCardZipChange?.(val);
+	}, [cardZipProp, onCardZipChange]);
+	const setUpiId = React$1.useCallback((val) => {
+		if (upiIdProp === void 0) setInternalUpiId(val);
+		onUpiIdChange?.(val);
+	}, [upiIdProp, onUpiIdChange]);
+	const contextValue = React$1.useMemo(() => ({
+		paymentMethod,
+		setPaymentMethod,
+		cardNumber,
+		cardExpiry,
+		cardCvc,
+		cardZip,
+		upiId,
+		brand,
+		cardType,
+		upiProvider,
+		disabled,
+		readOnly,
+		isInGroup,
+		autoFocusNext,
+		isLuhnValid,
+		errors,
+		isValid,
+		cardNumberRef,
+		expiryRef,
+		cvcRef,
+		zipRef,
+		upiRef,
+		setCardNumber,
+		setCardExpiry,
+		setCardCvc,
+		setCardZip,
+		setUpiId
+	}), [
+		paymentMethod,
+		setPaymentMethod,
+		cardNumber,
+		cardExpiry,
+		cardCvc,
+		cardZip,
+		upiId,
+		brand,
+		cardType,
+		upiProvider,
+		disabled,
+		readOnly,
+		isInGroup,
+		autoFocusNext,
+		isLuhnValid,
+		errors,
+		isValid,
+		setCardNumber,
+		setCardExpiry,
+		setCardCvc,
+		setCardZip,
+		setUpiId
+	]);
+	const providerRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (providerRef.current?.querySelector("[data-slot=\"input-payment-group\"],[data-slot=\"input-payment-upi-group\"]")) setIsInGroup(true);
+	}, []);
+	return /* @__PURE__ */ jsx(InputPaymentContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: providerRef,
+			className: "contents",
+			...props,
+			children
+		})
+	});
+}
+function InputPaymentMethodSelector({ className, ...props }) {
+	const { disabled, paymentMethod, readOnly, setPaymentMethod } = useInputPaymentContext();
+	return /* @__PURE__ */ jsx(Tabs, {
+		value: paymentMethod,
+		onValueChange: (val) => setPaymentMethod(val),
+		className: cn("w-full", className),
+		"data-slot": "input-payment-method-selector",
+		...props,
+		children: /* @__PURE__ */ jsxs(TabsList, {
+			"aria-label": "Payment method",
+			className: "grid w-full grid-cols-2",
+			children: [/* @__PURE__ */ jsxs(TabsTab, {
+				disabled: disabled || readOnly,
+				value: "card",
+				className: "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
+				children: [/* @__PURE__ */ jsx(CreditCard, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: "Card" })]
+			}), /* @__PURE__ */ jsxs(TabsTab, {
+				disabled: disabled || readOnly,
+				value: "upi",
+				className: "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11",
+				children: [/* @__PURE__ */ jsx(Zap, { className: "size-4 shrink-0 text-amber-500 fill-amber-500/20" }), /* @__PURE__ */ jsx("span", { children: "UPI" })]
+			})]
+		})
+	});
+}
+function InputPaymentGroup({ className, render, ...props }) {
+	const { errors } = useInputPaymentContext();
+	const hasError = Boolean(errors.cardNumber || errors.expiryDate || errors.cvc || errors.zip);
+	const defaultProps = {
+		className: cn("group/container relative inline-flex h-10 sm:h-9 w-full items-center gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-within:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-within:has-aria-invalid:border-destructive/64 has-focus-within:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-within:border-ring has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none has-focus-within:ring-[3px] px-[calc(--spacing(3)-1px)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-within:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"aria-invalid": hasError ? true : void 0,
+		"data-slot": "input-payment-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function InputPaymentUpiGroup({ className, render, ...props }) {
+	const { errors } = useInputPaymentContext();
+	const hasError = Boolean(errors.upi);
+	const defaultProps = {
+		className: cn("group/container relative inline-flex h-10 sm:h-9 w-full items-center gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-within:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-within:has-aria-invalid:border-destructive/64 has-focus-within:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-within:border-ring has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none has-focus-within:ring-[3px] px-[calc(--spacing(3)-1px)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-within:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"aria-invalid": hasError ? true : void 0,
+		"data-slot": "input-payment-upi-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function InputPaymentCardNumber({ className, size = "default", onChange, ref, ...props }) {
+	const { cardNumber, setCardNumber, disabled, readOnly, isInGroup, cardNumberRef, errors } = useInputPaymentContext();
+	const handleRef = (node) => {
+		cardNumberRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const handleChange = (e) => {
+		setCardNumber(e.target.value);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-size": typeof size === "string" ? size : void 0,
+		ref: handleRef,
+		type: "tel",
+		inputMode: "numeric",
+		size: typeof size === "number" ? size : void 0,
+		autoComplete: "cc-number",
+		value: cardNumber,
+		onChange: handleChange,
+		disabled,
+		readOnly,
+		placeholder: "Card number",
+		"aria-label": "Card number",
+		"aria-invalid": errors.cardNumber ? true : void 0,
+		className: cn("w-full bg-transparent font-mono outline-none caret-foreground placeholder:text-muted-foreground/60 text-foreground", isInGroup ? "border-0 p-0 shadow-none ring-0 focus-visible:ring-0" : "h-10 sm:h-9 rounded-lg border border-input px-3 text-sm shadow-xs/5 ring-ring/24 focus-visible:border-ring focus-visible:ring-[3px]", className),
+		...props
+	});
+}
+function InputPaymentExpiry({ className, size = "default", onChange, onKeyDown, ref, ...props }) {
+	const { cardExpiry, setCardExpiry, disabled, readOnly, isInGroup, expiryRef, cardNumberRef, autoFocusNext, errors } = useInputPaymentContext();
+	const handleRef = (node) => {
+		expiryRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const handleChange = (e) => {
+		setCardExpiry(e.target.value);
+		onChange?.(e);
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.key === "Backspace" && !cardExpiry && autoFocusNext) cardNumberRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-size": typeof size === "string" ? size : void 0,
+		ref: handleRef,
+		type: "tel",
+		inputMode: "numeric",
+		size: typeof size === "number" ? size : void 0,
+		autoComplete: "cc-exp",
+		value: cardExpiry,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		disabled,
+		readOnly,
+		placeholder: "MM/YY",
+		"aria-label": "Expiration date",
+		"aria-invalid": errors.expiryDate ? true : void 0,
+		className: cn("w-16 bg-transparent text-center font-mono outline-none caret-foreground placeholder:text-muted-foreground/60 text-foreground", isInGroup ? "border-0 p-0 shadow-none ring-0 focus-visible:ring-0" : "h-10 sm:h-9 rounded-lg border border-input px-2 text-sm shadow-xs/5 ring-ring/24 focus-visible:border-ring focus-visible:ring-[3px]", className),
+		...props
+	});
+}
+function InputPaymentCVC({ className, size = "default", onChange, onKeyDown, ref, ...props }) {
+	const { cardCvc, setCardCvc, disabled, readOnly, isInGroup, cvcRef, expiryRef, cardType, autoFocusNext, errors } = useInputPaymentContext();
+	const handleRef = (node) => {
+		cvcRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const handleChange = (e) => {
+		setCardCvc(e.target.value);
+		onChange?.(e);
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.key === "Backspace" && !cardCvc && autoFocusNext) expiryRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-size": typeof size === "string" ? size : void 0,
+		ref: handleRef,
+		type: "tel",
+		inputMode: "numeric",
+		size: typeof size === "number" ? size : void 0,
+		autoComplete: "cc-csc",
+		value: cardCvc,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		disabled,
+		readOnly,
+		placeholder: cardType.code.name,
+		"aria-label": cardType.code.name,
+		maxLength: cardType.code.length,
+		"aria-invalid": errors.cvc ? true : void 0,
+		className: cn("w-14 bg-transparent text-center font-mono outline-none caret-foreground placeholder:text-muted-foreground/60 text-foreground", isInGroup ? "border-0 p-0 shadow-none ring-0 focus-visible:ring-0" : "h-10 sm:h-9 rounded-lg border border-input px-2 text-sm shadow-xs/5 ring-ring/24 focus-visible:border-ring focus-visible:ring-[3px]", className),
+		...props
+	});
+}
+function InputPaymentZip({ className, size = "default", onChange, onKeyDown, ref, ...props }) {
+	const { cardZip, setCardZip, disabled, readOnly, isInGroup, zipRef, cvcRef, autoFocusNext, errors } = useInputPaymentContext();
+	const handleRef = (node) => {
+		zipRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const handleChange = (e) => {
+		setCardZip(e.target.value);
+		onChange?.(e);
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.key === "Backspace" && !cardZip && autoFocusNext) cvcRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-size": typeof size === "string" ? size : void 0,
+		ref: handleRef,
+		type: "text",
+		size: typeof size === "number" ? size : void 0,
+		autoComplete: "postal-code",
+		value: cardZip,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		disabled,
+		readOnly,
+		placeholder: "ZIP",
+		"aria-label": "Postal code",
+		maxLength: 10,
+		"aria-invalid": errors.zip ? true : void 0,
+		className: cn("w-16 bg-transparent text-center font-mono outline-none caret-foreground placeholder:text-muted-foreground/60 text-foreground", isInGroup ? "border-0 p-0 shadow-none ring-0 focus-visible:ring-0" : "h-10 sm:h-9 rounded-lg border border-input px-2 text-sm shadow-xs/5 ring-ring/24 focus-visible:border-ring focus-visible:ring-[3px]", className),
+		...props
+	});
+}
+function InputPaymentUpiId({ className, size = "default", onChange, ref, ...props }) {
+	const { upiId, setUpiId, disabled, readOnly, isInGroup, upiRef, errors } = useInputPaymentContext();
+	const handleRef = (node) => {
+		upiRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const handleChange = (e) => {
+		setUpiId(e.target.value);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsx(Input, {
+		"data-size": typeof size === "string" ? size : void 0,
+		ref: handleRef,
+		type: "text",
+		inputMode: "email",
+		size: typeof size === "number" ? size : void 0,
+		autoComplete: "off",
+		autoCapitalize: "off",
+		value: upiId,
+		onChange: handleChange,
+		disabled,
+		readOnly,
+		placeholder: "username@bank (e.g. john@okaxis)",
+		"aria-label": "UPI ID",
+		"aria-invalid": errors.upi ? true : void 0,
+		className: cn("w-full bg-transparent font-mono outline-none caret-foreground placeholder:text-muted-foreground/60 text-foreground", isInGroup ? "border-0 p-0 shadow-none ring-0 focus-visible:ring-0" : "h-10 sm:h-9 rounded-lg border border-input px-3 text-sm shadow-xs/5 ring-ring/24 focus-visible:border-ring focus-visible:ring-[3px]", className),
+		...props
+	});
+}
+function InputPaymentBrandIcon({ className, render, ...props }) {
+	const { brand } = useInputPaymentContext();
+	const defaultProps = {
+		className: cn("flex items-center justify-center shrink-0 w-8 select-none", className),
+		"data-slot": "input-payment-brand-icon"
+	};
+	const getBrandSvg = () => {
+		switch (brand) {
+			case "visa": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Visa" }),
+					/* @__PURE__ */ jsx("path", {
+						d: "M9.6 15.6h1.7l1.1-6.4H10.7l-1.1 6.4zm4.2-6.4c-.6-.3-1.1-.4-1.1-.8 0-.3.3-.5.9-.5.6 0 1 .2 1.3.3l.2-1.5c-.4-.1-1-.3-1.8-.3-1.9 0-3.3 1-3.3 2.5 0 1.1 1 1.7 1.7 2 .7.4 1 .6 1 .9 0 .5-.6.7-1.1.7-.8 0-1.3-.2-1.8-.4l-.2 1.5c.5.2 1.3.4 2.1.4 2 0 3.3-1 3.3-2.5 0-1.6-2.6-1.7-2.6-2.3zm7.1 3.2c.1-.3.6-1.7.6-1.7s.1-.3.2-.7l-.1-.1s-.5 2.5-.5 2.5h-1.3l-1.5-6.4h1.8l1.1 3 1.1-3h1.7l-2.6 6.4h-1.4zm-15-3.2L4.2 15.6H2.5L.9 9.2h1.8l.9 4 .9-4h1.4z",
+						fill: "#1434CB"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4.8 9.2L3.1 15.6H1.4L3 9.2h1.8z",
+						fill: "#F7B600"
+					})
+				]
+			});
+			case "mastercard": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Mastercard" }),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "8.5",
+						cy: "12",
+						r: "5.5",
+						fill: "#EB001B"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "15.5",
+						cy: "12",
+						r: "5.5",
+						fill: "#F79E1B",
+						fillOpacity: "0.85"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12 7.7a5.5 5.5 0 00-1.5 4.3 5.5 5.5 0 001.5 4.3 5.5 5.5 0 001.5-4.3 5.5 5.5 0 00-1.5-4.3z",
+						fill: "#FF5F00"
+					})
+				]
+			});
+			case "amex": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "American Express" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#006FCF"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4 14.5l.8-2.1h1.4l.8 2.1h1.2l-2-4.9h-1.4l-2 4.9h1.2zm1.5-3.3l.5 1.3h-1l.5-1.3zm3.7 3.3h1.1v-3.7l1.5 3.7h.8l1.5-3.7v3.7h1.1v-4.9h-1.6l-1.4 3.4-1.4-3.4h-1.6v4.9zm8-4.9v4.9h3.6v-1h-2.5v-1h2.2v-1h-2.2v-.9h2.4v-1h-3.5zm-5.4 0l-1.2 2.4-1.2-2.4h-1.4l1.9 3.5-1.9 3.5h1.4l1.2-2.4 1.2 2.4h1.4l-1.9-3.5 1.9-3.5h-1.4z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			case "rupay": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "RuPay" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#0F172A"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4.5 8.5h5.2c1.6 0 2.7.3 3.3.8.5.5.7 1.4.3 2.6-.2.7-.5 1.3-.9 1.8-.4.5-1 1-1.6 1.1.6.1.9.4 1.1.8.2.4.1 1-.1 1.8l-.4 1.6h-1.8l.4-1.6c.2-.6.2-1 0-1.3-.1-.3-.5-.4-1-.4H7.8l-1.1-4h1.6c.6 0 1-.1 1.2-.3.2-.2.3-.5.2-.9-.1-.4-.4-.7-1-.7H7l-1.1-4z",
+						fill: "#1B3281"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M16.5 16.5l3.2-6.4h-6.8l3.2 6.4z",
+						fill: "#008C44"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M15.1 16.5l3.2-6.4h-6.8l3.2 6.4z",
+						fill: "#F47920"
+					})
+				]
+			});
+			case "discover": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Discover" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#1E293B"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "14.5",
+						cy: "12",
+						r: "3.2",
+						fill: "#F9A01B"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M3.5 10.5h1.8c.8 0 1.4.4 1.4 1.2 0 .8-.6 1.3-1.4 1.3H3.5v-2.5zm.9.7v1.1h.8c.4 0 .7-.2.7-.6 0-.3-.3-.5-.7-.5h-.8zM7.5 10.5h.9v3h-.9v-3zM9.2 12.8c.3.2.6.3.9.3.5 0 .8-.2.8-.5 0-.3-.2-.4-.7-.6-.6-.2-1.1-.4-1.1-1 0-.6.5-1 1.2-1 .4 0 .8.1 1.1.3l-.3.6c-.2-.1-.5-.2-.8-.2-.4 0-.6.2-.6.4 0 .3.2.4.7.6.6.2 1.1.4 1.1 1 0 .7-.6 1.1-1.3 1.1-.5 0-.9-.1-1.2-.4l.3-.6z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			case "dinersclub": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Diners Club" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#FFFFFF",
+						stroke: "#CBD5E1",
+						strokeWidth: "0.5"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "12",
+						cy: "12",
+						r: "5",
+						fill: "#004A97"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12 7.5a4.5 4.5 0 00-4.5 4.5c0 2.5 2 4.5 4.5 4.5V7.5z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			case "jcb": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "JCB" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "6",
+						height: "14",
+						x: "3",
+						y: "5",
+						rx: "1.5",
+						fill: "#004098"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						width: "6",
+						height: "14",
+						x: "9",
+						y: "5",
+						rx: "1.5",
+						fill: "#E60012"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						width: "6",
+						height: "14",
+						x: "15",
+						y: "5",
+						rx: "1.5",
+						fill: "#008D36"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M5.5 15.5v-3.5c0-.6.4-1 1-1h.5",
+						stroke: "#FFFFFF",
+						strokeWidth: "1.2",
+						fill: "none"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M13.5 11h-2c-.6 0-1 .4-1 1v1.5c0 .6.4 1 1 1h2",
+						stroke: "#FFFFFF",
+						strokeWidth: "1.2",
+						fill: "none"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M16.5 11h2c.6 0 1 .3 1 .8s-.3.8-.7.9c.4.1.7.4.7.9s-.4.9-1 .9h-2v-3.5z",
+						stroke: "#FFFFFF",
+						strokeWidth: "1.2",
+						fill: "none"
+					})
+				]
+			});
+			case "unionpay": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "UnionPay" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#FFFFFF",
+						stroke: "#CBD5E1",
+						strokeWidth: "0.5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4 17.5l2.2-11h4.2l-2.2 11H4z",
+						fill: "#DD0228"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M8.2 17.5l2.2-11h4.2l-2.2 11H8.2z",
+						fill: "#024381"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12.4 17.5l2.2-11h5.4c.6 0 1 .4.9 1l-1.8 9c-.1.6-.6 1-1.2 1h-5.5z",
+						fill: "#01798A"
+					})
+				]
+			});
+			case "mir": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Mir" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#008B47"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M14 8h6v8h-6z",
+						fill: "#006CB5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M5.5 14.5l.8-4.2h1.4l.8 2.6.8-2.6h1.4l-.8 4.2H8.6l-.8-2.6-.8 2.6H5.5zm8-4.2h2.2c.8 0 1.4.3 1.4.9 0 .5-.3.8-.7 1l.9 2.3h-1.4l-.8-2.1h-.9v2.1h-1.3v-4.2zm1.3 1.1v.9h.8c.2 0 .4-.1.4-.4 0-.3-.2-.5-.4-.5h-.8z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			default: return /* @__PURE__ */ jsx(CreditCard, { className: "size-4 text-muted-foreground/80" });
+		}
+	};
+	const defaultContent = getBrandSvg();
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = defaultContent;
+	return useRender({
+		defaultTagName: "div",
+		props: mergedProps,
+		render
+	});
+}
+function InputPaymentUpiProviderIcon({ className, render, ...props }) {
+	const { upiProvider } = useInputPaymentContext();
+	const defaultProps = {
+		className: cn("flex items-center justify-center shrink-0 w-8 select-none", className),
+		"data-slot": "input-payment-upi-provider-icon"
+	};
+	const getProviderSvg = () => {
+		switch (upiProvider) {
+			case "gpay": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Google Pay" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#1E293B"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M7.8 11.6v.9h2.3c-.1.6-.7 1.7-2.3 1.7-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5c.8 0 1.3.3 1.6.6l.7-.7C9.6 8.6 8.8 8.2 7.8 8.2c-2.1 0-3.8 1.7-3.8 3.8s1.7 3.8 3.8 3.8c2.2 0 3.6-1.5 3.6-3.7 0-.3 0-.5-.1-.7H7.8z",
+						fill: "#4285F4"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M13.5 10.2h1.5v4.5h-1.5v-.5c-.3.4-.8.6-1.4.6-1.3 0-2.2-1-2.2-2.3s.9-2.3 2.2-2.3c.6 0 1.1.2 1.4.6v-.6zm-1.1 3.5c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2-1.2.5-1.2 1.2.5 1.2 1.2 1.2z",
+						fill: "#34A853"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M16 10.2l1.6 4h.1l1.5-4h1.6l-2.4 5.5h-1.5l.9-2.1-2.2-3.4H16z",
+						fill: "#EA4335"
+					})
+				]
+			});
+			case "phonepe": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "PhonePe" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#5F259F"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M8.5 7.5h4c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5h-2.5v3.5h-1.5v-8.5zm1.5 3.5h2.5c.6 0 1-.4 1-1s-.4-1-1-1h-2.5v2z",
+						fill: "#FFFFFF"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12.5 11.5l3.5 5h-1.8l-3.2-4.5h1.5z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			case "paytm": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Paytm" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#002E6E"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4.5 8.5h3.2c.8 0 1.3.5 1.3 1.2s-.5 1.2-1.3 1.2H6.2v2.6H4.5v-5zm1.7 1.3h1.4c.2 0 .4-.1.4-.3s-.2-.3-.4-.3H6.2v.6zM10.2 8.5h1.7v5h-1.7v-5zM13.2 8.5h1.7l1.2 3.2 1.2-3.2h1.7v5h-1.5v-3.5l-1.1 3.5h-.7l-1.1-3.5v3.5h-1.7v-5z",
+						fill: "#00BAF2"
+					})
+				]
+			});
+			case "amazonpay": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "Amazon Pay" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#141920"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4.5 10.5h1.1v2.5H4.5v-2.5zm2.2.8c0-.6.4-.9 1-.9.6 0 1 .3 1 .9v1.7H7.6v-.4c-.2.3-.5.5-.9.5-.6 0-1-.4-1-.9 0-.6.4-.9 1-.9h1v-.1c0-.3-.2-.4-.5-.4-.3 0-.5.1-.6.3l-.9-.2zm1.9.9v-.4h-.9c-.3 0-.5.1-.5.4 0 .2.2.4.5.4.4 0 .9-.2.9-.4zM10.2 10.5h1v.4c.2-.3.6-.5 1-.5.5 0 .9.2 1.1.7.3-.5.7-.7 1.2-.7.7 0 1.2.4 1.2 1.2v1.9h-1v-1.7c0-.4-.2-.6-.6-.6s-.7.3-.7.7v1.6h-1v-1.7c0-.4-.2-.6-.6-.6s-.6.3-.6.7v1.6h-1v-2.5z",
+						fill: "#FFFFFF"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M4.5 14.5c3.2 1.2 7.8 1.2 11 0l.4.5c-3.5 1.4-8.3 1.4-11.8 0l.4-.5z",
+						fill: "#FF9900"
+					})
+				]
+			});
+			case "bhim": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "BHIM UPI" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#0F172A"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M5.5 7.5h5.5c1.4 0 2.2.6 2.2 1.6 0 .7-.4 1.2-1 1.4.8.2 1.3.8 1.3 1.6 0 1.2-.9 1.9-2.5 1.9H5.5v-6.5zm2 2v1.2h3c.4 0 .7-.2.7-.6s-.3-.6-.7-.6h-3zm0 2.2v1.3h3.2c.5 0 .8-.2.8-.6 0-.5-.3-.7-.8-.7h-3.2z",
+						fill: "#FFFFFF"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M14.5 15.5l3.5-7h2l-3.5 7h-2z",
+						fill: "#FF6600"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M17.5 15.5l3.5-7h2l-3.5 7h-2z",
+						fill: "#009933"
+					})
+				]
+			});
+			case "cred": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "CRED" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#000000"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M6 7.5h12v9H6v-9zm2 2v5h8v-5H8zm2 1.5h4v2h-4v-2z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			case "whatsapp": return /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				className: "w-6 h-4",
+				children: [
+					/* @__PURE__ */ jsx("title", { children: "WhatsApp Pay" }),
+					/* @__PURE__ */ jsx("rect", {
+						width: "24",
+						height: "16",
+						y: "4",
+						rx: "2",
+						fill: "#25D366"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M12 7c-2.8 0-5 2.2-5 5 0 .9.2 1.8.7 2.5L7 17l2.6-.7c.7.4 1.5.7 2.4.7 2.8 0 5-2.2 5-5s-2.2-5-5-5zm0 8.2c-.8 0-1.5-.2-2.1-.6l-.2-.1-1.5.4.4-1.5-.1-.2c-.4-.6-.6-1.3-.6-2.1 0-2.3 1.9-4.2 4.2-4.2s4.2 1.9 4.2 4.2-1.9 4.1-4.3 4.1z",
+						fill: "#FFFFFF"
+					})
+				]
+			});
+			default: return /* @__PURE__ */ jsx(Zap, { className: "size-4 text-amber-500" });
+		}
+	};
+	const defaultContent = getProviderSvg();
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = defaultContent;
+	return useRender({
+		defaultTagName: "div",
+		props: mergedProps,
+		render
+	});
+}
+const PaymentInput = InputPayment;
+const PaymentInputGroup = InputPaymentGroup;
+const PaymentInputCardNumber = InputPaymentCardNumber;
+const PaymentInputExpiry = InputPaymentExpiry;
+const PaymentInputCVC = InputPaymentCVC;
+const PaymentInputZip = InputPaymentZip;
+const PaymentInputBrandIcon = InputPaymentBrandIcon;
+const PaymentInputUpiGroup = InputPaymentUpiGroup;
+const PaymentInputUpiId = InputPaymentUpiId;
+const PaymentInputUpiProviderIcon = InputPaymentUpiProviderIcon;
+const PaymentInputMethodSelector = InputPaymentMethodSelector;
+//#endregion
+export { CARD_TYPES, DEFAULT_CARD_TYPE, InputPayment, InputPaymentBrandIcon, InputPaymentCVC, InputPaymentCardNumber, InputPaymentExpiry, InputPaymentGroup, InputPaymentMethodSelector, InputPaymentUpiGroup, InputPaymentUpiId, InputPaymentUpiProviderIcon, InputPaymentZip, PaymentInput, PaymentInputBrandIcon, PaymentInputCVC, PaymentInputCardNumber, PaymentInputExpiry, PaymentInputGroup, PaymentInputMethodSelector, PaymentInputUpiGroup, PaymentInputUpiId, PaymentInputUpiProviderIcon, PaymentInputZip, detectBrand, detectUpiProvider, formatCardNumber, formatExpiry, getCardNumberError, getCardTypeByValue, getCvcError, getExpiryDateError, getUpiError, getZipError, useInputPayment, usePaymentInput, usePaymentInputContext, validateLuhn, validateUpiId };