@xsolla/xui-input-payment 0.111.0 → 0.113.0

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/native/index.js CHANGED
@@ -213,29 +213,57 @@ var roleMap = {
213
213
  link: "link",
214
214
  text: "text"
215
215
  };
216
+ var parseNumericValue = (value) => {
217
+ if (value === void 0) return void 0;
218
+ if (typeof value === "number") return value;
219
+ const parsed = parseFloat(value);
220
+ return isNaN(parsed) ? void 0 : parsed;
221
+ };
216
222
  var Text = ({
217
223
  children,
218
224
  color,
219
225
  fontSize,
220
226
  fontWeight,
221
227
  fontFamily,
228
+ textAlign,
229
+ lineHeight,
230
+ numberOfLines,
222
231
  id,
223
232
  role,
233
+ style: styleProp,
224
234
  ...props
225
235
  }) => {
226
236
  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
227
237
  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
228
238
  resolvedFontFamily = void 0;
229
239
  }
230
- const style = {
240
+ const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
241
+ const baseStyle = {
231
242
  color,
232
243
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
233
244
  fontWeight,
234
245
  fontFamily: resolvedFontFamily,
235
- textDecorationLine: props.textDecoration
246
+ textDecorationLine: props.textDecoration,
247
+ textAlign: textAlign ?? incomingStyle?.textAlign,
248
+ lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
249
+ marginTop: parseNumericValue(
250
+ incomingStyle?.marginTop
251
+ ),
252
+ marginBottom: parseNumericValue(
253
+ incomingStyle?.marginBottom
254
+ )
236
255
  };
237
256
  const accessibilityRole = role ? roleMap[role] : void 0;
238
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
257
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
258
+ import_react_native2.Text,
259
+ {
260
+ style: baseStyle,
261
+ numberOfLines,
262
+ testID: id,
263
+ accessibilityRole,
264
+ children
265
+ }
266
+ );
239
267
  };
240
268
 
241
269
  // ../primitives-native/src/Input.tsx
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/InputPayment.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Input.tsx"],"sourcesContent":["export * from \"./InputPayment\";\n","import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAOO;;;ACNP,0BAQO;AAmID;AAhIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACvLA,IAAAC,uBAA6D;AAgDzD,IAAAC,sBAAA;AA5CJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AAEJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAGJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,QAAmB;AAAA,IACvB;AAAA,IACA,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,EAC5B;AAGA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE,6CAAC,qBAAAC,MAAA,EAAO,OAAc,QAAQ,IAAI,mBAC/B,UACH;AAEJ;;;ACrDA,mBAAkC;AAClC,IAAAC,uBAAyC;AAkGnC,IAAAC,sBAAA;AA9FN,IAAM,kBAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,SAAS;AACX;AAGA,IAAM,0BAA+C;AAAA,EACnD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,KAAK;AACP;AAGA,IAAM,gCAAqD;AAAA,EACzD,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,eAAe;AAAA,EACf,MAAM;AACR;AAEO,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,GACA,QACG;AACH,UAAM,mBAAmB,CAAC,SAAiB;AACzC,qBAAe,IAAI;AAKnB,UAAI,UAAU;AACZ,cAAM,iBAAiB;AAAA,UACrB,QAAQ,EAAE,OAAO,KAAK;AAAA,UACtB,eAAe,EAAE,OAAO,KAAK;AAAA,UAC7B,MAAM;AAAA,UACN,aAAa,EAAE,KAAK;AAAA,UACpB,gBAAgB,MAAM;AAAA,UAAC;AAAA,UACvB,iBAAiB,MAAM;AAAA,UAAC;AAAA,UACxB,WAAW;AAAA,QACb;AACA,iBAAS,cAAc;AAAA,MACzB;AAAA,IACF;AAGA,UAAM,eAAe,YACjB,wBAAwB,SAAS,KAAK,YACtC,OACE,gBAAgB,IAAI,KAAK,YACzB;AAGN,UAAM,kBAAkB,eACpB,8BAA8B,YAAY,IAC1C;AAEJ,WACE;AAAA,MAAC,qBAAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,YAAY,CAAC,MAAM;AAGjB,cAAI,WAAW;AACb,sBAAU;AAAA,cACR,KAAK,EAAE,YAAY;AAAA,cACnB,gBAAgB,MAAM;AAAA,cAAC;AAAA,YACzB,CAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,UAAU,CAAC;AAAA,QACX,iBAAiB,mBAAmB,SAAS;AAAA,QAC7C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL;AAAA,YACE;AAAA,YACA,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,YACpD,MAAM;AAAA,YACN,SAAS;AAAA,YACT,WAAY,OAAe,aAAa;AAAA,UAC1C;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QAEA,QAAQ,cAAc;AAAA,QACtB,oBAAoB;AAAA,QACpB,mBAAmB;AAAA,QACnB,oBAAoB;AAAA,UAClB,UAAU,YAAY;AAAA,QACxB;AAAA,QACA,YAAY;AAAA;AAAA,IACd;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;;AHvI7B,sBAA8C;AAC9C,+BAqBO;AA0TH,IAAAC,sBAAA;AA7RJ,IAAM,4BAAgD;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAiFA,IAAM,wBAGF;AAAA,EACF,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU;AAAA,EACV,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;AAMA,IAAM,sBAAsB,CAAC,eAAgD;AAC3E,QAAM,cAAc,WAAW,QAAQ,OAAO,EAAE;AAEhD,MAAI,CAAC,YAAa,QAAO;AAGzB,MAAI,KAAK,KAAK,WAAW,EAAG,QAAO;AAGnC,MAAI,YAAY,KAAK,WAAW,EAAG,QAAO;AAG1C,MAAI,SAAS,KAAK,WAAW,EAAG,QAAO;AAGvC,MAAI,oBAAoB,KAAK,WAAW,EAAG,QAAO;AAGlD,MAAI,qBAAqB,KAAK,WAAW,EAAG,QAAO;AAGnD,MACE,6JAA6J;AAAA,IAC3J;AAAA,EACF;AAEA,WAAO;AAGT,MAAI,KAAK,KAAK,WAAW,EAAG,QAAO;AAGnC,MAAI,+CAA+C,KAAK,WAAW;AACjE,WAAO;AAGT,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAGxC,MAAI,QAAQ,KAAK,WAAW,EAAG,QAAO;AAGtC,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAIxC,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAExC,MACE,YAAY,UAAU,KACtB,oDAAoD,KAAK,WAAW;AAEpE,WAAO;AAGT,MAAI,uBAAuB,KAAK,WAAW,EAAG,QAAO;AAErD,MACE,YAAY,UAAU,KACtB,kEAAkE;AAAA,IAChE;AAAA,EACF;AAEA,WAAO;AAGT,MAAI,MAAM,KAAK,WAAW,EAAG,QAAO;AAGpC,MAAI,iBAAiB,KAAK,WAAW,EAAG,QAAO;AAE/C,SAAO;AACT;AAGA,IAAM,WAAW;AAKjB,IAAM,eAKD,CAAC,EAAE,kBAAkB,YAAY,mBAAmB,WAAW,MAAM;AACxE,QAAM,CAAC,cAAc,eAAe,QAAI,wBAAS,CAAC;AAClD,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,wBAAS,KAAK;AAC5D,QAAM,CAAC,cAAc,eAAe,QAAI,wBAAS,KAAK;AAGtD,QAAM,mBAAmB;AACzB,QAAM,kBAAkB,KAAK,MAAM,cAAc,IAAI,EAAE;AACvD,QAAM,YAAY;AAGlB,QAAM,gBAAgB,iBAAiB,MAAM,GAAG,aAAa,CAAC;AAC9D,QAAM,eAAe,iBAAiB,MAAM,aAAa,CAAC;AAG1D,+BAAU,MAAM;AACd,QAAI,mBAAmB;AACrB,sBAAgB,IAAI;AAAA,IACtB,OAAO;AAEL,YAAM,UAAU,WAAW,MAAM;AAC/B,wBAAgB,KAAK;AAAA,MACvB,GAAG,EAAE;AACL,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAGtB,+BAAU,MAAM;AACd,QAAI,aAAa,UAAU,KAAK,kBAAmB;AAEnD,UAAM,WAAW,YAAY,MAAM;AACjC,yBAAmB,IAAI;AACvB,iBAAW,MAAM;AACf,wBAAgB,CAAC,UAAU,OAAO,KAAK,aAAa,MAAM;AAC1D,2BAAmB,KAAK;AAAA,MAC1B,GAAG,GAAG;AAAA,IACR,GAAG,GAAI;AAEP,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,aAAa,QAAQ,iBAAiB,CAAC;AAG3C,QAAM,gBAAkD;AAAA,IACtD,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAGA,QAAM,eAAe,MAAM;AACzB,QAAI,mBAAmB;AACrB,aAAO,uBAAuB,cAAc,iBAAiB,CAAC;AAAA,IAChE;AACA,WAAO,2BAA2B,iBAC/B,IAAI,CAAC,QAAQ,cAAc,GAAG,CAAC,EAC/B,KAAK,IAAI,CAAC;AAAA,EACf;AAGA,QAAM,oBAAoB,KAAK,IAAI,iBAAiB,QAAQ,UAAU;AACtE,QAAM,iBACJ,oBAAoB,mBAAmB,oBAAoB,KAAK;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY,aAAa;AAAA,MACzB,UAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,EAAE,UAAU,SAAS;AAAA,MAG3B;AAAA,sBAAc,IAAI,CAAC,KAAK,UAAU;AACjC,gBAAM,gBAAgB,sBAAsB,GAAG;AAC/C,gBAAM,mBAAmB,sBAAsB;AAI/C,cAAI,aAAa;AACjB,cAAI,UAAU;AAEd,cAAI,gBAAgB,mBAAmB;AACrC,gBAAI,kBAAkB;AAEpB,oBAAM,kBACH,oBAAoB,MAAM,kBAAkB;AAC/C,oBAAM,kBAAkB,SAAS,kBAAkB;AACnD,2BAAa,iBAAiB;AAC9B,wBAAU;AAAA,YACZ,OAAO;AAEL,2BAAa;AACb,wBAAU;AAAA,YACZ;AAAA,UACF;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,UAAS;AAAA,cACT,MAAM,SAAS,kBAAkB;AAAA,cACjC,OAAO;AAAA,gBACL,WAAW,wBAAQ,cAAc,UAAU,QAAQ;AAAA,gBACnD;AAAA,gBACA,GAAI,yBAAS;AAAA,kBACX,YAAY;AAAA,gBACd;AAAA,cACF;AAAA,cAEA,uDAAC,iBAAc,MAAM,kBAAkB;AAAA;AAAA,YAXlC;AAAA,UAYP;AAAA,QAEJ,CAAC;AAAA,QAGA,aAAa,SAAS,KACrB;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAO,aAAa,MAAM,kBAAkB;AAAA,YAC5C,OAAO;AAAA,YACP,QAAQ;AAAA,YAEP,uBAAa,IAAI,CAAC,KAAK,UAAU;AAChC,oBAAM,gBAAgB,sBAAsB,GAAG;AAC/C,oBAAM,mBAAmB,UAAU;AACnC,oBAAM,mBAAmB,sBAAsB;AAE/C,kBAAI,aAAa;AACjB,kBAAI,UAAU,oBAAoB,CAAC,kBAAkB,IAAI;AAEzD,kBAAI,gBAAgB,mBAAmB;AACrC,oBAAI,kBAAkB;AAEpB,4BAAU;AAAA,gBACZ,OAAO;AAEL,+BAAa;AACb,4BAAU;AAAA,gBACZ;AAAA,cACF;AAEA,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,UAAS;AAAA,kBACT,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,oBACL,WAAW,wBAAQ,cAAc,UAAU,QAAQ;AAAA,oBACnD;AAAA,oBACA,GAAI,yBAAS;AAAA,sBACX,YAAY,eACR,qDACA;AAAA,oBACN;AAAA,kBACF;AAAA,kBAEA,uDAAC,iBAAc,MAAM,kBAAkB;AAAA;AAAA,gBAdlC;AAAA,cAeP;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEO,IAAM,mBAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,6BAA6B;AAAA,IAC7B,mBAAmB;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,IAAI;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,QAAI,iCAAgB;AAClC,UAAM,CAAC,eAAe,gBAAgB,QAAI;AAAA,MACxC;AAAA,IACF;AACA,UAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,SAAS,EAAE;AACtD,UAAM,CAAC,iBAAiB,kBAAkB,QACxC,wBAAkC,IAAI;AACxC,UAAM,eAAW,sBAAyB,IAAI;AAG9C,UAAM,YAAQ,uBAAM;AACpB,UAAM,SAAS,MAAM,QAAQ,MAAM,EAAE;AACrC,UAAM,UAAU,cAAc,iBAAiB,MAAM;AACrD,UAAM,UAAU,GAAG,OAAO;AAG1B,kBAAAC,QAAM;AAAA,MACJ;AAAA,MACA,MAAM,SAAS;AAAA,MACf,CAAC;AAAA,IACH;AAGA,iCAAU,MAAM;AACd,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAIV,iCAAU,MAAM;AACd,UAAI,cAAc,WAAW;AAC3B,cAAM,WAAW,oBAAoB,SAAS;AAE9C,cAAM,gBACJ,YAAY,iBAAiB,SAAS,QAAQ,IAAI,WAAW;AAC/D,2BAAmB,aAAa;AAChC,oCAA4B,aAAa;AAAA,MAC3C,WAAW,CAAC,WAAW;AACrB,2BAAmB,IAAI;AACvB,YAAI,YAAY;AACd,sCAA4B,IAAI;AAAA,QAClC;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,2BAA2B,gBAAgB,CAAC;AAEvE,UAAM,YAAY;AAClB,UAAM,UAAU,CAAC,EAAE,gBAAgB;AACnC,UAAM,UAAU,kBAAkB;AAGlC,UAAM,2BACJ,+BAA+B;AAGjC,UAAM,aAAa,MAAM,OAAO,MAAM,IAAI;AAC1C,UAAM,cAAc,MAAM,OAAO,QAAQ;AAEzC,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAW;AACd,yBAAiB,OAAO;AAAA,MAC1B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,WAAW;AACd,yBAAiB,SAAS;AAAA,MAC5B;AAAA,IACF;AAEA,UAAM,eAAe,CAAC,MAA2C;AAC/D,YAAM,WAAW,EAAE,OAAO;AAE1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AACA,UAAI,cAAc;AAChB,qBAAa,QAAQ;AAAA,MACvB;AAEA,mBAAa,QAAQ;AAAA,IACvB;AAEA,UAAM,gBAAgB,CAAC,MAA6C;AAClE,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,cAAc,KAAK;AAAA,MACvB;AACA,UAAI,WAAW;AACb,kBAAU,CAAC;AAAA,MACb;AAAA,IACF;AAGA,QAAI,kBAAkB,YAAY;AAClC,QAAI,cAAc,YAAY;AAC9B,QAAI;AAEJ,QAAI,WAAW;AACb,wBAAkB,YAAY;AAC9B,oBAAc,YAAY;AAAA,IAC5B,WAAW,SAAS;AAClB,qBAAe,MAAM,OAAO,OAAO;AACnC,UAAI,SAAS;AACX,0BAAkB,MAAM,OAAO,QAAQ,MAAM;AAAA,MAC/C;AAAA,IACF,WAAW,SAAS;AAClB,wBAAkB,MAAM,OAAO,QAAQ,MAAM;AAC7C,qBAAe,MAAM,OAAO,OAAO;AAAA,IACrC;AAEA,UAAM,YAAY,YAAY,YAAY,cAAc,YAAY;AACpE,UAAM,mBAAmB,YAAY;AACrC,UAAM,YAAY,YAAY;AAG9B,UAAM,gBAGF;AAAA,MACF,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG;AAAA,MAClC,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG;AAAA,IACpC;AAGA,UAAM,qBAA6C;AAAA,MACjD,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,iBAAyC;AAAA,MAC7C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,qBAGF;AAAA,MACF,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,IAC7B;AAEA,UAAM,UAAU,cAAc,IAAI;AAClC,UAAM,eAAe,mBAAmB,IAAI;AAC5C,UAAM,WAAW,eAAe,IAAI;AACpC,UAAM,eAAe,mBAAmB,IAAI;AAE5C,WACE,8CAAC,OAAI,eAAc,UAAS,KAAK,GAAG,OAAM,QAAO,QAC/C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,aAAa,gBAAgB,gBAAgB,IAAI;AAAA,UACjD;AAAA,UACA,QAAQ,WAAW;AAAA,UACnB,iBAAiB,QAAQ;AAAA,UACzB,mBAAmB,QAAQ;AAAA,UAC3B,eAAc;AAAA,UACd,YAAW;AAAA,UACX,KAAK;AAAA,UACL,UAAS;AAAA,UACT,OAAO;AAAA,YACL,GAAI,eACA;AAAA,cACE,SAAS,GAAG,aAAa,KAAK,YAAY,YAAY;AAAA,cACtD,eAAe,GAAG,aAAa,MAAM;AAAA,YACvC,IACA,CAAC;AAAA,UACP;AAAA,UACA,YACE,CAAC,aAAa,CAAC,WAAW,CAAC,UACvB;AAAA,YACE,iBAAiB,YAAY;AAAA,YAC7B,aAAa,YAAY;AAAA,UAC3B,IACA;AAAA,UAGL;AAAA,oBACC;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,gBAAe;AAAA,gBACf,MAAK;AAAA,gBACL,eAAa;AAAA,gBAEZ,wBAAAA,QAAM,eAAe,IAAI,IACtB,cAAAA,QAAM;AAAA,kBACJ;AAAA,kBAIA;AAAA,oBACE,MAAM;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,IACA;AAAA;AAAA,YACN;AAAA,YAGF,6CAAC,OAAI,MAAM,GAAG,QAAO,QAAO,gBAAe,UACzC;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,IAAI;AAAA,gBACJ,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAa;AAAA,gBACb,OAAO;AAAA,gBACP,UAAU,WAAW;AAAA,gBACrB,sBAAsB;AAAA,gBACtB,gBAAc,WAAW;AAAA,gBACzB,oBAAkB,eAAe,UAAU;AAAA,gBAC3C,cAAY,aAAa;AAAA,gBACzB,iBAAe,aAAa;AAAA,gBAC5B,eAAY;AAAA,gBACX,GAAG;AAAA;AAAA,YACN,GACF;AAAA,YAEC,iBAAiB,SAAS,KACzB;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,gBAAe;AAAA,gBACf,eAAY;AAAA,gBACZ,OAAO,EAAE,UAAU,SAAS;AAAA,gBAE5B;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,YAAY;AAAA,oBACZ,mBAAmB;AAAA,oBACnB,YAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MAEJ;AAAA,MAEC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,MAAM,OAAO,QAAQ,MAAM;AAAA,UAClC,UAAU,WAAW,WAAW;AAAA,UAE/B;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/InputPayment.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Input.tsx"],"sourcesContent":["export * from \"./InputPayment\";\n","import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","RNTextInput","import_jsx_runtime","React"]}
package/native/index.mjs CHANGED
@@ -177,7 +177,10 @@ var Box = ({
177
177
  };
178
178
 
179
179
  // ../primitives-native/src/Text.tsx
180
- import { Text as RNText } from "react-native";
180
+ import {
181
+ Text as RNText,
182
+ StyleSheet
183
+ } from "react-native";
181
184
  import { jsx as jsx2 } from "react/jsx-runtime";
182
185
  var roleMap = {
183
186
  alert: "alert",
@@ -186,29 +189,57 @@ var roleMap = {
186
189
  link: "link",
187
190
  text: "text"
188
191
  };
192
+ var parseNumericValue = (value) => {
193
+ if (value === void 0) return void 0;
194
+ if (typeof value === "number") return value;
195
+ const parsed = parseFloat(value);
196
+ return isNaN(parsed) ? void 0 : parsed;
197
+ };
189
198
  var Text = ({
190
199
  children,
191
200
  color,
192
201
  fontSize,
193
202
  fontWeight,
194
203
  fontFamily,
204
+ textAlign,
205
+ lineHeight,
206
+ numberOfLines,
195
207
  id,
196
208
  role,
209
+ style: styleProp,
197
210
  ...props
198
211
  }) => {
199
212
  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
200
213
  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
201
214
  resolvedFontFamily = void 0;
202
215
  }
203
- const style = {
216
+ const incomingStyle = StyleSheet.flatten(styleProp);
217
+ const baseStyle = {
204
218
  color,
205
219
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
206
220
  fontWeight,
207
221
  fontFamily: resolvedFontFamily,
208
- textDecorationLine: props.textDecoration
222
+ textDecorationLine: props.textDecoration,
223
+ textAlign: textAlign ?? incomingStyle?.textAlign,
224
+ lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
225
+ marginTop: parseNumericValue(
226
+ incomingStyle?.marginTop
227
+ ),
228
+ marginBottom: parseNumericValue(
229
+ incomingStyle?.marginBottom
230
+ )
209
231
  };
210
232
  const accessibilityRole = role ? roleMap[role] : void 0;
211
- return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
233
+ return /* @__PURE__ */ jsx2(
234
+ RNText,
235
+ {
236
+ style: baseStyle,
237
+ numberOfLines,
238
+ testID: id,
239
+ accessibilityRole,
240
+ children
241
+ }
242
+ );
212
243
  };
213
244
 
214
245
  // ../primitives-native/src/Input.tsx
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputPayment.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Input.tsx"],"sourcesContent":["import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["React","forwardRef","jsx","jsx","jsx","forwardRef","React"]}
1
+ {"version":3,"sources":["../../src/InputPayment.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Input.tsx"],"sourcesContent":["import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React, { forwardRef } from \"react\";\nimport { TextInput as RNTextInput } from \"react-native\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web input types to React Native keyboard types\nconst keyboardTypeMap: Record<string, any> = {\n text: \"default\",\n number: \"numeric\",\n email: \"email-address\",\n tel: \"phone-pad\",\n url: \"url\",\n decimal: \"decimal-pad\",\n};\n\n// Map web inputMode to React Native keyboard types\nconst inputModeToKeyboardType: Record<string, any> = {\n none: \"default\",\n text: \"default\",\n decimal: \"decimal-pad\",\n numeric: \"number-pad\",\n tel: \"phone-pad\",\n search: \"default\",\n email: \"email-address\",\n url: \"url\",\n};\n\n// Map web autoComplete to React Native textContentType (iOS)\nconst autoCompleteToTextContentType: Record<string, any> = {\n \"one-time-code\": \"oneTimeCode\",\n email: \"emailAddress\",\n username: \"username\",\n password: \"password\",\n \"new-password\": \"newPassword\",\n tel: \"telephoneNumber\",\n \"postal-code\": \"postalCode\",\n name: \"name\",\n};\n\nexport const InputPrimitive = forwardRef<RNTextInput, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n },\n ref\n ) => {\n const handleChangeText = (text: string) => {\n onChangeText?.(text);\n\n // Create a synthetic event for onChange compatibility\n // Include nativeEvent and no-op methods to prevent runtime errors\n // when consumers expect DOM-like event behavior\n if (onChange) {\n const syntheticEvent = {\n target: { value: text },\n currentTarget: { value: text },\n type: \"change\",\n nativeEvent: { text },\n preventDefault: () => {},\n stopPropagation: () => {},\n isTrusted: false,\n } as unknown as React.ChangeEvent<HTMLInputElement>;\n onChange(syntheticEvent);\n }\n };\n\n // Determine keyboard type - inputMode takes precedence over type\n const keyboardType = inputMode\n ? inputModeToKeyboardType[inputMode] || \"default\"\n : type\n ? keyboardTypeMap[type] || \"default\"\n : \"default\";\n\n // Determine textContentType for iOS autofill\n const textContentType = autoComplete\n ? autoCompleteToTextContentType[autoComplete]\n : undefined;\n\n return (\n <RNTextInput\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChangeText={handleChangeText}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyPress={(e) => {\n // Map onKeyPress to onKeyDown for cross-platform compatibility\n // Include preventDefault to avoid runtime errors when consumers call it\n if (onKeyDown) {\n onKeyDown({\n key: e.nativeEvent.key,\n preventDefault: () => {},\n } as any);\n }\n }}\n editable={!disabled}\n secureTextEntry={secureTextEntry || type === \"password\"}\n keyboardType={keyboardType}\n textContentType={textContentType}\n style={[\n {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n flex: 1,\n padding: 0,\n textAlign: (style as any)?.textAlign || \"left\",\n },\n style as any,\n ]}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n // React Native accessibility props\n testID={dataTestId || id}\n accessibilityLabel={ariaLabel}\n accessibilityHint={ariaDescribedBy}\n accessibilityState={{\n disabled: disabled || ariaDisabled,\n }}\n accessible={true}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["React","forwardRef","jsx","jsx","jsx","forwardRef","React"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-input-payment",
3
- "version": "0.111.0",
3
+ "version": "0.113.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-core": "0.111.0",
17
- "@xsolla/xui-icons-payment": "0.111.0",
18
- "@xsolla/xui-primitives-core": "0.111.0"
16
+ "@xsolla/xui-core": "0.113.0",
17
+ "@xsolla/xui-icons-payment": "0.113.0",
18
+ "@xsolla/xui-primitives-core": "0.113.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",
package/web/index.js CHANGED
@@ -224,6 +224,7 @@ var Text = ({
224
224
  className,
225
225
  id,
226
226
  role,
227
+ numberOfLines: _numberOfLines,
227
228
  ...props
228
229
  }) => {
229
230
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/InputPayment.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Input.tsx"],"sourcesContent":["export * from \"./InputPayment\";\n","import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/InputPayment.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Input.tsx"],"sourcesContent":["export * from \"./InputPayment\";\n","import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime","React"]}
package/web/index.mjs CHANGED
@@ -193,6 +193,7 @@ var Text = ({
193
193
  className,
194
194
  id,
195
195
  role,
196
+ numberOfLines: _numberOfLines,
196
197
  ...props
197
198
  }) => {
198
199
  return /* @__PURE__ */ jsx2(
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputPayment.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Input.tsx"],"sourcesContent":["import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":"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","names":["React","forwardRef","styled","jsx","styled","jsx","jsx","forwardRef","React"]}
1
+ {"version":3,"sources":["../../src/InputPayment.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Input.tsx"],"sourcesContent":["import React, {\n useState,\n forwardRef,\n useRef,\n useEffect,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, InputPrimitive } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, useId, isWeb } from \"@xsolla/xui-core\";\nimport {\n Visa,\n Mastercard,\n Maestro,\n AmericanExpress,\n Dinersclub,\n Discover,\n Jcb,\n Unionpay,\n Aura,\n CartesBancaires,\n Cirrus,\n Dankort,\n Elo,\n Hipercard,\n Mir,\n Naranja,\n Paypal,\n Sodexo,\n Uatp,\n type PaymentIconProps,\n} from \"@xsolla/xui-icons-payment\";\n\n/**\n * Supported payment system keys\n */\nexport type PaymentSystemKey =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"diners\"\n | \"maestro\"\n | \"unionpay\"\n | \"discover\"\n | \"jcb\"\n | \"aura\"\n | \"cartesbancaires\"\n | \"cirrus\"\n | \"dankort\"\n | \"elo\"\n | \"hipercard\"\n | \"mir\"\n | \"naranja\"\n | \"paypal\"\n | \"sodexo\"\n | \"uatp\";\n\n/**\n * Default payment systems to display\n */\nconst DEFAULT_POSSIBLE_PAYMENTS: PaymentSystemKey[] = [\n \"mastercard\",\n \"visa\",\n \"maestro\",\n \"diners\",\n \"amex\",\n \"discover\",\n \"jcb\",\n \"unionpay\",\n];\n\nexport interface InputPaymentProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"onChange\"\n> {\n /**\n * Property for specifying the value of the control.\n */\n value?: string;\n /**\n * Property to display the icon to the left of the content.\n */\n icon?: ReactNode;\n /**\n * Property for specifying the placeholder of the control.\n */\n placeholder?: string;\n /**\n * Event handler when the value changes (for controlled mode).\n */\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler when the text changes (alternative to onChange).\n */\n onChangeText?: (text: string) => void;\n /**\n * Property for changing the size of the input.\n */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n /**\n * Property for specifying the name of the control.\n */\n name?: string;\n /**\n * Property for disabling the control and highlighting it as an inactive state.\n */\n disabled?: boolean;\n /**\n * Property for displaying an error message and highlighting the control as invalid.\n */\n errorMessage?: string;\n /**\n * Property for displaying an error and highlighting the control as invalid.\n */\n error?: boolean;\n /**\n * Property to specify the possible payment systems displayed on the right.\n */\n possiblePayments?: PaymentSystemKey[];\n /**\n * Property to set the maximum number of visible possible payment systems at the same time on the right side of the input.\n */\n maxVisiblePossiblePayments?: number;\n /**\n * Property to show the recognized payment system (all possible payment systems are hidden and only the current one passed by this prop is displayed).\n */\n recognizedPayment?: PaymentSystemKey;\n /**\n * Callback when card type is auto-detected from the input value.\n */\n onRecognizedPaymentChange?: (payment: PaymentSystemKey | null) => void;\n /**\n * Property to enable automatic payment system detection from input value.\n */\n autoDetect?: boolean;\n /**\n * Unique identifier for the input element. Used for accessibility linking.\n */\n id?: string;\n /**\n * Accessible label for screen readers when no visible label is present.\n */\n \"aria-label\"?: string;\n /**\n * Test identifier for the component.\n */\n testID?: string;\n}\n\n// Map payment system keys to icon components\nconst paymentIconComponents: Record<\n PaymentSystemKey,\n React.FC<PaymentIconProps>\n> = {\n visa: Visa,\n mastercard: Mastercard,\n maestro: Maestro,\n amex: AmericanExpress,\n diners: Dinersclub,\n discover: Discover,\n jcb: Jcb,\n unionpay: Unionpay,\n aura: Aura,\n cartesbancaires: CartesBancaires,\n cirrus: Cirrus,\n dankort: Dankort,\n elo: Elo,\n hipercard: Hipercard,\n mir: Mir,\n naranja: Naranja,\n paypal: Paypal,\n sodexo: Sodexo,\n uatp: Uatp,\n};\n\n/**\n * Detects payment system from card number using BIN ranges.\n * Order matters - more specific patterns should come before general ones.\n */\nconst detectPaymentSystem = (cardNumber: string): PaymentSystemKey | null => {\n const cleanNumber = cardNumber.replace(/\\s/g, \"\");\n\n if (!cleanNumber) return null;\n\n // UATP: starts with 1\n if (/^1/.test(cleanNumber)) return \"uatp\";\n\n // Mir: 2200-2204\n if (/^220[0-4]/.test(cleanNumber)) return \"mir\";\n\n // Amex: 34, 37\n if (/^3[47]/.test(cleanNumber)) return \"amex\";\n\n // Diners Club: 300-305, 36, 38\n if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return \"diners\";\n\n // JCB: 3528-3589\n if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return \"jcb\";\n\n // Elo: specific BIN ranges (must check before Visa/Mastercard due to overlapping ranges)\n if (\n /^(401178|401179|431274|438935|451416|457393|457631|457632|504175|506699|5067[0-9]{2}|509[0-9]{3}|627780|636297|636368|650[0-9]{3}|651[0-9]{3}|655[0-9]{3})/.test(\n cleanNumber\n )\n )\n return \"elo\";\n\n // Visa: starts with 4\n if (/^4/.test(cleanNumber)) return \"visa\";\n\n // Hipercard: 606282, 637095, 637568, 637599, 637609, 637612\n if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))\n return \"hipercard\";\n\n // Aura: 507860\n if (/^507860/.test(cleanNumber)) return \"aura\";\n\n // Dankort: 5019\n if (/^5019/.test(cleanNumber)) return \"dankort\";\n\n // Naranja: 589562\n if (/^589562/.test(cleanNumber)) return \"naranja\";\n\n // Mastercard: 51-55 or 2221-2720\n // For 51-55 range\n if (/^5[1-5]/.test(cleanNumber)) return \"mastercard\";\n // For 2221-2720 range (need 4+ digits for accurate detection)\n if (\n cleanNumber.length >= 4 &&\n /^(?:222[1-9]|22[3-9]\\d|2[3-6]\\d{2}|27[01]\\d|2720)/.test(cleanNumber)\n )\n return \"mastercard\";\n\n // Discover: 6011, 622126-622925, 644-649, 65\n if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return \"discover\";\n // For 622126-622925 range (need 6+ digits for accurate detection)\n if (\n cleanNumber.length >= 6 &&\n /^(?:6221(?:2[6-9]|[3-9]\\d)|622[2-8]\\d{2}|6229(?:[01]\\d|2[0-5]))/.test(\n cleanNumber\n )\n )\n return \"discover\";\n\n // UnionPay: 62 (but not 622126-622925 which is Discover)\n if (/^62/.test(cleanNumber)) return \"unionpay\";\n\n // Maestro: 50, 56-69 (catch-all for remaining 5x and 6x ranges)\n if (/^(?:5[06-9]|6)/.test(cleanNumber)) return \"maestro\";\n\n return null;\n};\n\n// Card icon dimensions (4:3 aspect ratio)\nconst CARD_GAP = 4;\n\n/**\n * Payment card icons component with sliding animation\n */\nconst PaymentIcons: React.FC<{\n possiblePayments: PaymentSystemKey[];\n maxVisible: number;\n recognizedPayment?: PaymentSystemKey | null;\n iconHeight: number;\n}> = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {\n const [cyclingIndex, setCyclingIndex] = useState(0);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isRecognized, setIsRecognized] = useState(false);\n\n // Scale factor based on size (icons use 4:3 aspect ratio)\n const scaledCardHeight = iconHeight;\n const scaledCardWidth = Math.round(iconHeight * (4 / 3));\n const scaledGap = CARD_GAP;\n\n // Calculate which cards to show in cycling position\n const constantCards = possiblePayments.slice(0, maxVisible - 1);\n const cyclingCards = possiblePayments.slice(maxVisible - 1);\n\n // Handle recognized payment animation\n useEffect(() => {\n if (recognizedPayment) {\n setIsRecognized(true);\n } else {\n // Small delay before showing all cards again\n const timeout = setTimeout(() => {\n setIsRecognized(false);\n }, 50);\n return () => clearTimeout(timeout);\n }\n }, [recognizedPayment]);\n\n // Cycle through remaining cards\n useEffect(() => {\n if (cyclingCards.length <= 1 || recognizedPayment) return;\n\n const interval = setInterval(() => {\n setIsTransitioning(true);\n setTimeout(() => {\n setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);\n setIsTransitioning(false);\n }, 150);\n }, 2000);\n\n return () => clearInterval(interval);\n }, [cyclingCards.length, recognizedPayment]);\n\n // Human-readable labels for payment systems\n const paymentLabels: Record<PaymentSystemKey, string> = {\n mastercard: \"Mastercard\",\n visa: \"Visa\",\n maestro: \"Maestro\",\n diners: \"Diners Club\",\n amex: \"American Express\",\n discover: \"Discover\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n aura: \"Aura\",\n cartesbancaires: \"Cartes Bancaires\",\n cirrus: \"Cirrus\",\n dankort: \"Dankort\",\n elo: \"Elo\",\n hipercard: \"Hipercard\",\n mir: \"Mir\",\n naranja: \"Naranja\",\n paypal: \"PayPal\",\n sodexo: \"Sodexo\",\n uatp: \"UATP\",\n };\n\n // Build aria label from possible payments\n const getAriaLabel = () => {\n if (recognizedPayment) {\n return `Recognized payment: ${paymentLabels[recognizedPayment]}`;\n }\n return `Accepted payment cards: ${possiblePayments\n .map((key) => paymentLabels[key])\n .join(\", \")}`;\n };\n\n // Calculate total width for the container\n const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);\n const containerWidth =\n totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;\n\n return (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n role=\"img\"\n aria-label={getAriaLabel()}\n position=\"relative\"\n width={containerWidth}\n height={scaledCardHeight}\n style={{ overflow: \"hidden\" }}\n >\n {/* All constant cards */}\n {constantCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isRecognizedCard = recognizedPayment === key;\n\n // Calculate slide offset when recognized\n // Cards should slide to the right, except the recognized one\n let translateX = 0;\n let opacity = 1;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Move recognized card to the rightmost position\n const targetPosition =\n (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);\n const currentPosition = index * (scaledCardWidth + scaledGap);\n translateX = targetPosition - currentPosition;\n opacity = 1;\n } else {\n // Slide non-recognized cards to the right and fade out\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n left={index * (scaledCardWidth + scaledGap)}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: \"transform 300ms ease-out, opacity 300ms ease-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n\n {/* Cycling position */}\n {cyclingCards.length > 0 && (\n <Box\n position=\"absolute\"\n left={(maxVisible - 1) * (scaledCardWidth + scaledGap)}\n width={scaledCardWidth}\n height={scaledCardHeight}\n >\n {cyclingCards.map((key, index) => {\n const IconComponent = paymentIconComponents[key];\n const isCurrentCycling = index === cyclingIndex;\n const isRecognizedCard = recognizedPayment === key;\n\n let translateX = 0;\n let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;\n\n if (isRecognized && recognizedPayment) {\n if (isRecognizedCard) {\n // Keep in place, fully visible\n opacity = 1;\n } else {\n // Slide out to the right\n translateX = containerWidth;\n opacity = 0;\n }\n }\n\n return (\n <Box\n key={key}\n position=\"absolute\"\n top={0}\n left={0}\n style={{\n transform: isWeb ? `translateX(${translateX}px)` : undefined,\n opacity,\n ...(isWeb && {\n transition: isRecognized\n ? \"transform 300ms ease-out, opacity 300ms ease-out\"\n : \"opacity 150ms ease-in-out\",\n }),\n }}\n >\n <IconComponent size={scaledCardHeight} />\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport const InputPayment = forwardRef<HTMLInputElement, InputPaymentProps>(\n (\n {\n value,\n icon,\n placeholder = \"Card number\",\n onChange,\n onChangeText,\n onKeyDown,\n size = \"md\",\n name,\n disabled = false,\n errorMessage,\n error,\n possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,\n maxVisiblePossiblePayments = 5,\n recognizedPayment: controlledRecognizedPayment,\n onRecognizedPaymentChange,\n autoDetect = true,\n id: providedId,\n \"aria-label\": ariaLabel,\n testID,\n ...rest\n },\n ref\n ) => {\n const { theme } = useDesignSystem();\n const [internalState, setInternalState] = useState<\"default\" | \"focus\">(\n \"default\"\n );\n const [passValue, setPassValue] = useState(value ?? \"\");\n const [detectedPayment, setDetectedPayment] =\n useState<PaymentSystemKey | null>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n\n // Generate unique IDs for accessibility\n const rawId = useId();\n const safeId = rawId.replace(/:/g, \"\");\n const inputId = providedId || `input-payment-${safeId}`;\n const errorId = `${inputId}-error`;\n\n // Forward ref to input element\n React.useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n []\n );\n\n // Sync passValue with value prop when it changes\n useEffect(() => {\n if (value !== undefined) {\n setPassValue(value);\n }\n }, [value]);\n\n // Auto-detect payment system when value changes\n // Only detect cards that are in the possiblePayments list\n useEffect(() => {\n if (autoDetect && passValue) {\n const detected = detectPaymentSystem(passValue);\n // Only use the detected payment if it's in possiblePayments\n const validDetected =\n detected && possiblePayments.includes(detected) ? detected : null;\n setDetectedPayment(validDetected);\n onRecognizedPaymentChange?.(validDetected);\n } else if (!passValue) {\n setDetectedPayment(null);\n if (autoDetect) {\n onRecognizedPaymentChange?.(null);\n }\n }\n }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);\n\n const isDisable = disabled;\n const isError = !!(errorMessage || error);\n const isFocus = internalState === \"focus\";\n\n // Determine which payment to display\n const displayRecognizedPayment =\n controlledRecognizedPayment ?? detectedPayment;\n\n // Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handleFocus = () => {\n if (!isDisable) {\n setInternalState(\"focus\");\n }\n };\n\n const handleBlur = () => {\n if (!isDisable) {\n setInternalState(\"default\");\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(newValue);\n }\n\n setPassValue(newValue);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"Escape\") {\n e.currentTarget.blur();\n }\n if (onKeyDown) {\n onKeyDown(e);\n }\n };\n\n // Resolve background and border colors based on state\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n let outlineColor: string | undefined;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isError) {\n outlineColor = theme.colors.border.alert;\n if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n }\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n outlineColor = theme.colors.border.brand;\n }\n\n const textColor = isDisable ? inputColors.textDisable : inputColors.text;\n const placeholderColor = inputColors.placeholder;\n const iconColor = inputColors.placeholder;\n\n // Padding values from Figma design\n const paddingConfig: Record<\n string,\n { vertical: number; horizontal: number }\n > = {\n xl: { vertical: 12, horizontal: 12 },\n lg: { vertical: 14, horizontal: 12 },\n md: { vertical: 11, horizontal: 12 },\n sm: { vertical: 7, horizontal: 10 },\n xs: { vertical: 7, horizontal: 10 },\n };\n\n // Border radius from Figma design\n const borderRadiusConfig: Record<string, number> = {\n xl: 8,\n lg: 8,\n md: 8,\n sm: 4,\n xs: 4,\n };\n\n // Icon sizes from Figma design\n const iconSizeConfig: Record<string, number> = {\n xl: 18,\n lg: 18,\n md: 18,\n sm: 16,\n xs: 16,\n };\n\n // Focus outline config from Figma design\n const focusOutlineConfig: Record<\n string,\n { width: number; offset: number }\n > = {\n xl: { width: 1, offset: -1 },\n lg: { width: 1, offset: -1 },\n md: { width: 1, offset: -1 },\n sm: { width: 1, offset: -1 },\n xs: { width: 1, offset: -1 },\n };\n\n const padding = paddingConfig[size];\n const borderRadius = borderRadiusConfig[size];\n const iconSize = iconSizeConfig[size];\n const focusOutline = focusOutlineConfig[size];\n\n return (\n <Box flexDirection=\"column\" gap={8} width=\"100%\" testID={testID}>\n <Box\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={borderRadius}\n height={sizeStyles.height}\n paddingVertical={padding.vertical}\n paddingHorizontal={padding.horizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={10}\n position=\"relative\"\n style={{\n ...(outlineColor\n ? {\n outline: `${focusOutline.width}px solid ${outlineColor}`,\n outlineOffset: `${focusOutline.offset}px`,\n }\n : {}),\n }}\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {icon && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n role=\"img\"\n aria-hidden={true}\n >\n {React.isValidElement(icon)\n ? React.cloneElement(\n icon as React.ReactElement<{\n size?: number;\n color?: string;\n }>,\n {\n size: iconSize,\n color: iconColor,\n }\n )\n : icon}\n </Box>\n )}\n\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <InputPrimitive\n ref={inputRef}\n id={inputId}\n value={passValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n disabled={isDisable}\n type=\"text\"\n inputMode=\"numeric\"\n autoComplete=\"off\"\n color={textColor}\n fontSize={sizeStyles.fontSize}\n placeholderTextColor={placeholderColor}\n aria-invalid={isError || undefined}\n aria-describedby={errorMessage ? errorId : undefined}\n aria-label={ariaLabel || \"Card number\"}\n aria-disabled={isDisable || undefined}\n data-testid=\"input-payment__field\"\n {...rest}\n />\n </Box>\n\n {possiblePayments.length > 0 && (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n data-testid=\"input-payment__card-icons\"\n style={{ overflow: \"hidden\" }}\n >\n <PaymentIcons\n possiblePayments={possiblePayments}\n maxVisible={maxVisiblePossiblePayments}\n recognizedPayment={displayRecognizedPayment}\n iconHeight={iconSize}\n />\n </Box>\n )}\n </Box>\n\n {errorMessage && (\n <Text\n id={errorId}\n role=\"alert\"\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n }\n);\n\nInputPayment.displayName = \"InputPayment\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n"],"mappings":";AAAA,OAAOA;AAAA,EACL;AAAA,EACA,cAAAC;AAAA,EACA;AAAA,EACA;AAAA,OAGK;;;ACPP,OAAO,WAAW;AAClB,OAAO,YAAY;AAuMX;AApMR,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,UAAU,MAAM,mBAAmB,aAAa;AAAA,kBACrD,CAAC,UAAU,MAAM,eAAe,aAAa;AAAA,kBAC7C,CAAC,UACf,OAAO,MAAM,gBAAgB,WACzB,GAAG,MAAM,WAAW,OACpB,MAAM,eAAe,CAAC;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,sBAAsB,UAC5B;AAAA,2BACuB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,2BACtG,MAAM,qBAAqB,MAAM,eAAe,aAAa;AAAA;AAAA,GAErF;AAAA,IACC,CAAC,UACD,MAAM,mBAAmB,UACzB;AAAA,wBACoB,OAAO,MAAM,mBAAmB,WAAW,GAAG,MAAM,cAAc,OAAO,MAAM,cAAc;AAAA,wBAC7F,MAAM,kBAAkB,MAAM,eAAe,aAAa;AAAA;AAAA,GAE/E;AAAA,IACC,CAAC,UACD,MAAM,oBAAoB,UAC1B;AAAA,yBACqB,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,yBAChG,MAAM,mBAAmB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEjF;AAAA,IACC,CAAC,UACD,MAAM,qBAAqB,UAC3B;AAAA,0BACsB,OAAO,MAAM,qBAAqB,WAAW,GAAG,MAAM,gBAAgB,OAAO,MAAM,gBAAgB;AAAA,0BACnG,MAAM,oBAAoB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEnF;AAAA;AAAA,kBAEe,CAAC,UACf,MAAM,gBACL,MAAM,eACP,MAAM,qBACN,MAAM,kBACN,MAAM,mBACN,MAAM,mBACF,UACA,OAAO;AAAA,mBACI,CAAC,UAChB,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM,gBAAgB,CAAC;AAAA,YACnB,CAAC,UACT,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,MAAM;AAAA,WACnB,CAAC,UACR,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,MAAM;AAAA,eACd,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,MAAM;AAAA,gBAChB,CAAC,UACb,OAAO,MAAM,cAAc,WACvB,GAAG,MAAM,SAAS,OAClB,MAAM,aAAa,MAAM;AAAA;AAAA,aAEpB,CAAC,UACV,OAAO,MAAM,YAAY,WACrB,GAAG,MAAM,OAAO,OAChB,MAAM,WAAW,CAAC;AAAA,IACtB,CAAC,UACD,MAAM,qBACN;AAAA,oBACgB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,qBACrG,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,GACxH;AAAA,IACC,CAAC,UACD,MAAM,mBACN;AAAA,mBACe,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,sBAC7F,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,GACnH;AAAA,IACC,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,kBAAkB,UACxB,mBAAmB,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,aAAa,GAAG;AAAA,IAChH,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA,IACxG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA;AAAA,YAEpG,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,IAC1E,CAAC,UACD,MAAM,cAAc,UACpB,eAAe,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM,SAAS,GAAG;AAAA,IAChG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA,IAC5G,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA;AAAA,oBAExF,CAAC,UAAU,MAAM,iBAAiB,QAAQ;AAAA,eAC/C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,iBACnC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,kBAAkB,YAAY;AAAA,YACxD,CAAC,UACT,MAAM,SACF,MAAM,SACN,MAAM,WAAW,MAAM,UACrB,YACA,SAAS;AAAA,cACL,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,SAC1C,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG;AAAA,YACpD,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAM;AAAA,UAC/D,CAAC,UACP,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAAA,WACxD,CAAC,UACR,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAC5D,CAAC,UAAU,MAAM,IAAI;AAAA,iBACd,CAAC,UAAU,MAAM,cAAc,CAAC;AAAA,SACxC,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,CAAC;AAAA,gBACrD,CAAC,UAAU,MAAM,aAAa,MAAM;AAAA,cACtC,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,gBACpC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,gBACvC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM;AAAA,aACvB,CAAC,UAAW,MAAM,WAAW,MAAM,CAAE;AAAA,oBAC9B,CAAC,UAAW,MAAM,WAAW,SAAS,MAAO;AAAA;AAAA;AAAA,MAG3D,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA,MACxD,CAAC,UACD,MAAM,YAAY,eAClB,iBAAiB,MAAM,WAAW,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA,MAIhD,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA;AAAA;AAIvD,IAAM,MAAM,MAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,QAAI,OAAO,SAAS,KAAK;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,OAAO;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,YACZ,cACE,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM;AAAA,YACZ,UAAU,MAAM;AAAA,YAChB,KAAK,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,YAC9D,MACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAAA,YAC7D,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,WAAW,QAAQ,WAAW;AAAA,QAC3C,UAAU,OAAO,WAAW,WAAW;AAAA,QACvC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,UAAU,aAAa,SAAY,WAAW;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;;;ACzQlB,OAAOC,aAAY;AA+Bf,gBAAAC,YAAA;AA5BJ,IAAM,aAAaD,QAAO;AAAA,WACf,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA,iBAClB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,iBACvC,CAAC,UACd,MAAM,cACN,sGAAsG;AAAA,iBACzF,CAAC,UACd,OAAO,MAAM,eAAe,WACxB,GAAG,MAAM,UAAU,OACnB,MAAM,cAAc,SAAS;AAAA,iBACpB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,gBACxC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,qBAClC,CAAC,UAAU,MAAM,kBAAkB,MAAM;AAAA;AAGvD,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;ACxCA,SAAgB,kBAAkB;AAClC,OAAOC,aAAY;AA0Eb,gBAAAC,YAAA;AAvEN,IAAM,cAAcD,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQhB,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKtB,CAAC,UACR,MAAM,wBAAwB,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvD,IAAM,iBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AACA,UAAI,cAAc;AAChB,qBAAa,EAAE,OAAO,KAAK;AAAA,MAC7B;AAAA,IACF;AAGA,UAAM,aAAa,UAAU,SAAY,QAAQ;AAEjD,WACE,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,kBAAkB,aAAa,QAAQ;AAAA,QAC7C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAc;AAAA,QACd,oBAAkB;AAAA,QAClB,mBAAiB;AAAA,QACjB,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,eAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;;;AHhG7B,SAAS,iBAAiB,OAAO,aAAa;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA0TH,SAgDQ,OAAAC,MAhDR;AA7RJ,IAAM,4BAAgD;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAiFA,IAAM,wBAGF;AAAA,EACF,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,KAAK;AAAA,EACL,UAAU;AAAA,EACV,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;AAMA,IAAM,sBAAsB,CAAC,eAAgD;AAC3E,QAAM,cAAc,WAAW,QAAQ,OAAO,EAAE;AAEhD,MAAI,CAAC,YAAa,QAAO;AAGzB,MAAI,KAAK,KAAK,WAAW,EAAG,QAAO;AAGnC,MAAI,YAAY,KAAK,WAAW,EAAG,QAAO;AAG1C,MAAI,SAAS,KAAK,WAAW,EAAG,QAAO;AAGvC,MAAI,oBAAoB,KAAK,WAAW,EAAG,QAAO;AAGlD,MAAI,qBAAqB,KAAK,WAAW,EAAG,QAAO;AAGnD,MACE,6JAA6J;AAAA,IAC3J;AAAA,EACF;AAEA,WAAO;AAGT,MAAI,KAAK,KAAK,WAAW,EAAG,QAAO;AAGnC,MAAI,+CAA+C,KAAK,WAAW;AACjE,WAAO;AAGT,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAGxC,MAAI,QAAQ,KAAK,WAAW,EAAG,QAAO;AAGtC,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAIxC,MAAI,UAAU,KAAK,WAAW,EAAG,QAAO;AAExC,MACE,YAAY,UAAU,KACtB,oDAAoD,KAAK,WAAW;AAEpE,WAAO;AAGT,MAAI,uBAAuB,KAAK,WAAW,EAAG,QAAO;AAErD,MACE,YAAY,UAAU,KACtB,kEAAkE;AAAA,IAChE;AAAA,EACF;AAEA,WAAO;AAGT,MAAI,MAAM,KAAK,WAAW,EAAG,QAAO;AAGpC,MAAI,iBAAiB,KAAK,WAAW,EAAG,QAAO;AAE/C,SAAO;AACT;AAGA,IAAM,WAAW;AAKjB,IAAM,eAKD,CAAC,EAAE,kBAAkB,YAAY,mBAAmB,WAAW,MAAM;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAClD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAGtD,QAAM,mBAAmB;AACzB,QAAM,kBAAkB,KAAK,MAAM,cAAc,IAAI,EAAE;AACvD,QAAM,YAAY;AAGlB,QAAM,gBAAgB,iBAAiB,MAAM,GAAG,aAAa,CAAC;AAC9D,QAAM,eAAe,iBAAiB,MAAM,aAAa,CAAC;AAG1D,YAAU,MAAM;AACd,QAAI,mBAAmB;AACrB,sBAAgB,IAAI;AAAA,IACtB,OAAO;AAEL,YAAM,UAAU,WAAW,MAAM;AAC/B,wBAAgB,KAAK;AAAA,MACvB,GAAG,EAAE;AACL,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AAGtB,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,KAAK,kBAAmB;AAEnD,UAAM,WAAW,YAAY,MAAM;AACjC,yBAAmB,IAAI;AACvB,iBAAW,MAAM;AACf,wBAAgB,CAAC,UAAU,OAAO,KAAK,aAAa,MAAM;AAC1D,2BAAmB,KAAK;AAAA,MAC1B,GAAG,GAAG;AAAA,IACR,GAAG,GAAI;AAEP,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,aAAa,QAAQ,iBAAiB,CAAC;AAG3C,QAAM,gBAAkD;AAAA,IACtD,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAGA,QAAM,eAAe,MAAM;AACzB,QAAI,mBAAmB;AACrB,aAAO,uBAAuB,cAAc,iBAAiB,CAAC;AAAA,IAChE;AACA,WAAO,2BAA2B,iBAC/B,IAAI,CAAC,QAAQ,cAAc,GAAG,CAAC,EAC/B,KAAK,IAAI,CAAC;AAAA,EACf;AAGA,QAAM,oBAAoB,KAAK,IAAI,iBAAiB,QAAQ,UAAU;AACtE,QAAM,iBACJ,oBAAoB,mBAAmB,oBAAoB,KAAK;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAc;AAAA,MACd,YAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY,aAAa;AAAA,MACzB,UAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,EAAE,UAAU,SAAS;AAAA,MAG3B;AAAA,sBAAc,IAAI,CAAC,KAAK,UAAU;AACjC,gBAAM,gBAAgB,sBAAsB,GAAG;AAC/C,gBAAM,mBAAmB,sBAAsB;AAI/C,cAAI,aAAa;AACjB,cAAI,UAAU;AAEd,cAAI,gBAAgB,mBAAmB;AACrC,gBAAI,kBAAkB;AAEpB,oBAAM,kBACH,oBAAoB,MAAM,kBAAkB;AAC/C,oBAAM,kBAAkB,SAAS,kBAAkB;AACnD,2BAAa,iBAAiB;AAC9B,wBAAU;AAAA,YACZ,OAAO;AAEL,2BAAa;AACb,wBAAU;AAAA,YACZ;AAAA,UACF;AAEA,iBACE,gBAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,UAAS;AAAA,cACT,MAAM,SAAS,kBAAkB;AAAA,cACjC,OAAO;AAAA,gBACL,WAAW,QAAQ,cAAc,UAAU,QAAQ;AAAA,gBACnD;AAAA,gBACA,GAAI,SAAS;AAAA,kBACX,YAAY;AAAA,gBACd;AAAA,cACF;AAAA,cAEA,0BAAAA,KAAC,iBAAc,MAAM,kBAAkB;AAAA;AAAA,YAXlC;AAAA,UAYP;AAAA,QAEJ,CAAC;AAAA,QAGA,aAAa,SAAS,KACrB,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAO,aAAa,MAAM,kBAAkB;AAAA,YAC5C,OAAO;AAAA,YACP,QAAQ;AAAA,YAEP,uBAAa,IAAI,CAAC,KAAK,UAAU;AAChC,oBAAM,gBAAgB,sBAAsB,GAAG;AAC/C,oBAAM,mBAAmB,UAAU;AACnC,oBAAM,mBAAmB,sBAAsB;AAE/C,kBAAI,aAAa;AACjB,kBAAI,UAAU,oBAAoB,CAAC,kBAAkB,IAAI;AAEzD,kBAAI,gBAAgB,mBAAmB;AACrC,oBAAI,kBAAkB;AAEpB,4BAAU;AAAA,gBACZ,OAAO;AAEL,+BAAa;AACb,4BAAU;AAAA,gBACZ;AAAA,cACF;AAEA,qBACE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBAEC,UAAS;AAAA,kBACT,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,oBACL,WAAW,QAAQ,cAAc,UAAU,QAAQ;AAAA,oBACnD;AAAA,oBACA,GAAI,SAAS;AAAA,sBACX,YAAY,eACR,qDACA;AAAA,oBACN;AAAA,kBACF;AAAA,kBAEA,0BAAAA,KAAC,iBAAc,MAAM,kBAAkB;AAAA;AAAA,gBAdlC;AAAA,cAeP;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEO,IAAM,eAAeC;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,6BAA6B;AAAA,IAC7B,mBAAmB;AAAA,IACnB;AAAA,IACA,aAAa;AAAA,IACb,IAAI;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,UAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,MACxC;AAAA,IACF;AACA,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,SAAS,EAAE;AACtD,UAAM,CAAC,iBAAiB,kBAAkB,IACxC,SAAkC,IAAI;AACxC,UAAM,WAAW,OAAyB,IAAI;AAG9C,UAAM,QAAQ,MAAM;AACpB,UAAM,SAAS,MAAM,QAAQ,MAAM,EAAE;AACrC,UAAM,UAAU,cAAc,iBAAiB,MAAM;AACrD,UAAM,UAAU,GAAG,OAAO;AAG1B,IAAAC,OAAM;AAAA,MACJ;AAAA,MACA,MAAM,SAAS;AAAA,MACf,CAAC;AAAA,IACH;AAGA,cAAU,MAAM;AACd,UAAI,UAAU,QAAW;AACvB,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAIV,cAAU,MAAM;AACd,UAAI,cAAc,WAAW;AAC3B,cAAM,WAAW,oBAAoB,SAAS;AAE9C,cAAM,gBACJ,YAAY,iBAAiB,SAAS,QAAQ,IAAI,WAAW;AAC/D,2BAAmB,aAAa;AAChC,oCAA4B,aAAa;AAAA,MAC3C,WAAW,CAAC,WAAW;AACrB,2BAAmB,IAAI;AACvB,YAAI,YAAY;AACd,sCAA4B,IAAI;AAAA,QAClC;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,2BAA2B,gBAAgB,CAAC;AAEvE,UAAM,YAAY;AAClB,UAAM,UAAU,CAAC,EAAE,gBAAgB;AACnC,UAAM,UAAU,kBAAkB;AAGlC,UAAM,2BACJ,+BAA+B;AAGjC,UAAM,aAAa,MAAM,OAAO,MAAM,IAAI;AAC1C,UAAM,cAAc,MAAM,OAAO,QAAQ;AAEzC,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAW;AACd,yBAAiB,OAAO;AAAA,MAC1B;AAAA,IACF;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,CAAC,WAAW;AACd,yBAAiB,SAAS;AAAA,MAC5B;AAAA,IACF;AAEA,UAAM,eAAe,CAAC,MAA2C;AAC/D,YAAM,WAAW,EAAE,OAAO;AAE1B,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AACA,UAAI,cAAc;AAChB,qBAAa,QAAQ;AAAA,MACvB;AAEA,mBAAa,QAAQ;AAAA,IACvB;AAEA,UAAM,gBAAgB,CAAC,MAA6C;AAClE,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,cAAc,KAAK;AAAA,MACvB;AACA,UAAI,WAAW;AACb,kBAAU,CAAC;AAAA,MACb;AAAA,IACF;AAGA,QAAI,kBAAkB,YAAY;AAClC,QAAI,cAAc,YAAY;AAC9B,QAAI;AAEJ,QAAI,WAAW;AACb,wBAAkB,YAAY;AAC9B,oBAAc,YAAY;AAAA,IAC5B,WAAW,SAAS;AAClB,qBAAe,MAAM,OAAO,OAAO;AACnC,UAAI,SAAS;AACX,0BAAkB,MAAM,OAAO,QAAQ,MAAM;AAAA,MAC/C;AAAA,IACF,WAAW,SAAS;AAClB,wBAAkB,MAAM,OAAO,QAAQ,MAAM;AAC7C,qBAAe,MAAM,OAAO,OAAO;AAAA,IACrC;AAEA,UAAM,YAAY,YAAY,YAAY,cAAc,YAAY;AACpE,UAAM,mBAAmB,YAAY;AACrC,UAAM,YAAY,YAAY;AAG9B,UAAM,gBAGF;AAAA,MACF,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,IAAI,YAAY,GAAG;AAAA,MACnC,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG;AAAA,MAClC,IAAI,EAAE,UAAU,GAAG,YAAY,GAAG;AAAA,IACpC;AAGA,UAAM,qBAA6C;AAAA,MACjD,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,iBAAyC;AAAA,MAC7C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAGA,UAAM,qBAGF;AAAA,MACF,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,MAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,IAC7B;AAEA,UAAM,UAAU,cAAc,IAAI;AAClC,UAAM,eAAe,mBAAmB,IAAI;AAC5C,UAAM,WAAW,eAAe,IAAI;AACpC,UAAM,eAAe,mBAAmB,IAAI;AAE5C,WACE,qBAAC,OAAI,eAAc,UAAS,KAAK,GAAG,OAAM,QAAO,QAC/C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,aAAa,gBAAgB,gBAAgB,IAAI;AAAA,UACjD;AAAA,UACA,QAAQ,WAAW;AAAA,UACnB,iBAAiB,QAAQ;AAAA,UACzB,mBAAmB,QAAQ;AAAA,UAC3B,eAAc;AAAA,UACd,YAAW;AAAA,UACX,KAAK;AAAA,UACL,UAAS;AAAA,UACT,OAAO;AAAA,YACL,GAAI,eACA;AAAA,cACE,SAAS,GAAG,aAAa,KAAK,YAAY,YAAY;AAAA,cACtD,eAAe,GAAG,aAAa,MAAM;AAAA,YACvC,IACA,CAAC;AAAA,UACP;AAAA,UACA,YACE,CAAC,aAAa,CAAC,WAAW,CAAC,UACvB;AAAA,YACE,iBAAiB,YAAY;AAAA,YAC7B,aAAa,YAAY;AAAA,UAC3B,IACA;AAAA,UAGL;AAAA,oBACC,gBAAAF;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,gBAAe;AAAA,gBACf,MAAK;AAAA,gBACL,eAAa;AAAA,gBAEZ,UAAAE,OAAM,eAAe,IAAI,IACtBA,OAAM;AAAA,kBACJ;AAAA,kBAIA;AAAA,oBACE,MAAM;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,IACA;AAAA;AAAA,YACN;AAAA,YAGF,gBAAAF,KAAC,OAAI,MAAM,GAAG,QAAO,QAAO,gBAAe,UACzC,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,IAAI;AAAA,gBACJ,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAa;AAAA,gBACb,OAAO;AAAA,gBACP,UAAU,WAAW;AAAA,gBACrB,sBAAsB;AAAA,gBACtB,gBAAc,WAAW;AAAA,gBACzB,oBAAkB,eAAe,UAAU;AAAA,gBAC3C,cAAY,aAAa;AAAA,gBACzB,iBAAe,aAAa;AAAA,gBAC5B,eAAY;AAAA,gBACX,GAAG;AAAA;AAAA,YACN,GACF;AAAA,YAEC,iBAAiB,SAAS,KACzB,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,gBAAe;AAAA,gBACf,eAAY;AAAA,gBACZ,OAAO,EAAE,UAAU,SAAS;AAAA,gBAE5B,0BAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,YAAY;AAAA,oBACZ,mBAAmB;AAAA,oBACnB,YAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MAEJ;AAAA,MAEC,gBACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,MAAM,OAAO,QAAQ,MAAM;AAAA,UAClC,UAAU,WAAW,WAAW;AAAA,UAE/B;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":["React","forwardRef","styled","jsx","styled","jsx","jsx","forwardRef","React"]}