@xsolla/xui-input-payment 0.64.0-pr56.1768440195

package/native/index.mjs

@@ -0,0 +1,944 @@
+// src/InputPayment.tsx
+import React4, { useState, forwardRef as forwardRef3, useRef, useEffect } from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+import { ActivityIndicator, View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ jsx3(
+    View2,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ jsx3(
+        ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Divider.tsx
+import { View as View4 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ jsx6(
+      RNTextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-native/src/TextArea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { TextInput as RNTextInput2 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextAreaPrimitive = forwardRef2(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ jsx7(
+      RNTextInput2,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        multiline: true,
+        numberOfLines: rows || 4,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlignVertical: "top",
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/InputPayment.tsx
+import { useDesignSystem, useId, isWeb } from "@xsolla/xui-core";
+import {
+  Visa,
+  Mastercard,
+  Maestro,
+  AmericanExpress,
+  Dinersclub,
+  Discover,
+  Jcb,
+  Unionpay,
+  Aura,
+  CartesBancaires,
+  Cirrus,
+  Dankort,
+  Elo,
+  Hipercard,
+  Mir,
+  Naranja,
+  Paypal,
+  Sodexo,
+  Uatp
+} from "@xsolla/xui-icons-payment";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var DEFAULT_POSSIBLE_PAYMENTS = [
+  "mastercard",
+  "visa",
+  "maestro",
+  "diners",
+  "amex",
+  "discover",
+  "jcb",
+  "unionpay"
+];
+var paymentIconComponents = {
+  visa: Visa,
+  mastercard: Mastercard,
+  maestro: Maestro,
+  amex: AmericanExpress,
+  diners: Dinersclub,
+  discover: Discover,
+  jcb: Jcb,
+  unionpay: Unionpay,
+  aura: Aura,
+  cartesbancaires: CartesBancaires,
+  cirrus: Cirrus,
+  dankort: Dankort,
+  elo: Elo,
+  hipercard: Hipercard,
+  mir: Mir,
+  naranja: Naranja,
+  paypal: Paypal,
+  sodexo: Sodexo,
+  uatp: Uatp
+};
+var detectPaymentSystem = (cardNumber) => {
+  const cleanNumber = cardNumber.replace(/\s/g, "");
+  if (!cleanNumber) return null;
+  if (/^1/.test(cleanNumber)) return "uatp";
+  if (/^220[0-4]/.test(cleanNumber)) return "mir";
+  if (/^3[47]/.test(cleanNumber)) return "amex";
+  if (/^3(?:0[0-5]|[68])/.test(cleanNumber)) return "diners";
+  if (/^35(?:2[89]|[3-8])/.test(cleanNumber)) return "jcb";
+  if (/^(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(
+    cleanNumber
+  ))
+    return "elo";
+  if (/^4/.test(cleanNumber)) return "visa";
+  if (/^(606282|637095|637568|637599|637609|637612)/.test(cleanNumber))
+    return "hipercard";
+  if (/^507860/.test(cleanNumber)) return "aura";
+  if (/^5019/.test(cleanNumber)) return "dankort";
+  if (/^589562/.test(cleanNumber)) return "naranja";
+  if (/^5[1-5]/.test(cleanNumber)) return "mastercard";
+  if (cleanNumber.length >= 4 && /^(?:222[1-9]|22[3-9]\d|2[3-6]\d{2}|27[01]\d|2720)/.test(cleanNumber))
+    return "mastercard";
+  if (/^(?:6011|65|64[4-9])/.test(cleanNumber)) return "discover";
+  if (cleanNumber.length >= 6 && /^(?:6221(?:2[6-9]|[3-9]\d)|622[2-8]\d{2}|6229(?:[01]\d|2[0-5]))/.test(cleanNumber))
+    return "discover";
+  if (/^62/.test(cleanNumber)) return "unionpay";
+  if (/^(?:5[06-9]|6)/.test(cleanNumber)) return "maestro";
+  return null;
+};
+var CARD_GAP = 4;
+var PaymentIcons = ({ possiblePayments, maxVisible, recognizedPayment, iconHeight }) => {
+  const [cyclingIndex, setCyclingIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isRecognized, setIsRecognized] = useState(false);
+  const scaledCardHeight = iconHeight;
+  const scaledCardWidth = Math.round(iconHeight * (4 / 3));
+  const scaledGap = CARD_GAP;
+  const constantCards = possiblePayments.slice(0, maxVisible - 1);
+  const cyclingCards = possiblePayments.slice(maxVisible - 1);
+  useEffect(() => {
+    if (recognizedPayment) {
+      setIsRecognized(true);
+    } else {
+      const timeout = setTimeout(() => {
+        setIsRecognized(false);
+      }, 50);
+      return () => clearTimeout(timeout);
+    }
+  }, [recognizedPayment]);
+  useEffect(() => {
+    if (cyclingCards.length <= 1 || recognizedPayment) return;
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCyclingIndex((prev) => (prev + 1) % cyclingCards.length);
+        setIsTransitioning(false);
+      }, 150);
+    }, 2e3);
+    return () => clearInterval(interval);
+  }, [cyclingCards.length, recognizedPayment]);
+  const paymentLabels = {
+    mastercard: "Mastercard",
+    visa: "Visa",
+    maestro: "Maestro",
+    diners: "Diners Club",
+    amex: "American Express",
+    discover: "Discover",
+    jcb: "JCB",
+    unionpay: "UnionPay",
+    aura: "Aura",
+    cartesbancaires: "Cartes Bancaires",
+    cirrus: "Cirrus",
+    dankort: "Dankort",
+    elo: "Elo",
+    hipercard: "Hipercard",
+    mir: "Mir",
+    naranja: "Naranja",
+    paypal: "PayPal",
+    sodexo: "Sodexo",
+    uatp: "UATP"
+  };
+  const getAriaLabel = () => {
+    if (recognizedPayment) {
+      return `Recognized payment: ${paymentLabels[recognizedPayment]}`;
+    }
+    return `Accepted payment cards: ${possiblePayments.map((key) => paymentLabels[key]).join(", ")}`;
+  };
+  const totalVisibleCards = Math.min(possiblePayments.length, maxVisible);
+  const containerWidth = totalVisibleCards * scaledCardWidth + (totalVisibleCards - 1) * scaledGap;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      role: "img",
+      "aria-label": getAriaLabel(),
+      position: "relative",
+      width: containerWidth,
+      height: scaledCardHeight,
+      style: { overflow: "hidden" },
+      children: [
+        constantCards.map((key, index) => {
+          const IconComponent = paymentIconComponents[key];
+          const isRecognizedCard = recognizedPayment === key;
+          let translateX = 0;
+          let opacity = 1;
+          if (isRecognized && recognizedPayment) {
+            if (isRecognizedCard) {
+              const targetPosition = (totalVisibleCards - 1) * (scaledCardWidth + scaledGap);
+              const currentPosition = index * (scaledCardWidth + scaledGap);
+              translateX = targetPosition - currentPosition;
+              opacity = 1;
+            } else {
+              translateX = containerWidth;
+              opacity = 0;
+            }
+          }
+          return /* @__PURE__ */ jsx8(
+            Box,
+            {
+              position: "absolute",
+              left: index * (scaledCardWidth + scaledGap),
+              style: {
+                transform: isWeb ? `translateX(${translateX}px)` : void 0,
+                opacity,
+                ...isWeb && { transition: "transform 300ms ease-out, opacity 300ms ease-out" }
+              },
+              children: /* @__PURE__ */ jsx8(IconComponent, { size: scaledCardHeight })
+            },
+            key
+          );
+        }),
+        cyclingCards.length > 0 && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            position: "absolute",
+            left: (maxVisible - 1) * (scaledCardWidth + scaledGap),
+            width: scaledCardWidth,
+            height: scaledCardHeight,
+            children: cyclingCards.map((key, index) => {
+              const IconComponent = paymentIconComponents[key];
+              const isCurrentCycling = index === cyclingIndex;
+              const isRecognizedCard = recognizedPayment === key;
+              let translateX = 0;
+              let opacity = isCurrentCycling && !isTransitioning ? 1 : 0;
+              if (isRecognized && recognizedPayment) {
+                if (isRecognizedCard) {
+                  opacity = 1;
+                } else {
+                  translateX = containerWidth;
+                  opacity = 0;
+                }
+              }
+              return /* @__PURE__ */ jsx8(
+                Box,
+                {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  style: {
+                    transform: isWeb ? `translateX(${translateX}px)` : void 0,
+                    opacity,
+                    ...isWeb && {
+                      transition: isRecognized ? "transform 300ms ease-out, opacity 300ms ease-out" : "opacity 150ms ease-in-out"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx8(IconComponent, { size: scaledCardHeight })
+                },
+                key
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+var InputPayment = forwardRef3(
+  ({
+    value,
+    icon,
+    placeholder = "Card number",
+    onChange,
+    onChangeText,
+    onKeyDown,
+    size = "m",
+    name,
+    disabled = false,
+    errorMessage,
+    error,
+    possiblePayments = DEFAULT_POSSIBLE_PAYMENTS,
+    maxVisiblePossiblePayments = 5,
+    recognizedPayment: controlledRecognizedPayment,
+    onRecognizedPaymentChange,
+    autoDetect = true,
+    id: providedId,
+    "aria-label": ariaLabel,
+    testID,
+    ...rest
+  }, ref) => {
+    const { theme } = useDesignSystem();
+    const [internalState, setInternalState] = useState(
+      "default"
+    );
+    const [passValue, setPassValue] = useState(value ?? "");
+    const [detectedPayment, setDetectedPayment] = useState(null);
+    const inputRef = useRef(null);
+    const rawId = useId();
+    const safeId = rawId.replace(/:/g, "");
+    const inputId = providedId || `input-payment-${safeId}`;
+    const errorId = `${inputId}-error`;
+    React4.useImperativeHandle(
+      ref,
+      () => inputRef.current,
+      []
+    );
+    useEffect(() => {
+      if (value !== void 0) {
+        setPassValue(value);
+      }
+    }, [value]);
+    useEffect(() => {
+      if (autoDetect && passValue) {
+        const detected = detectPaymentSystem(passValue);
+        const validDetected = detected && possiblePayments.includes(detected) ? detected : null;
+        setDetectedPayment(validDetected);
+        onRecognizedPaymentChange?.(validDetected);
+      } else if (!passValue) {
+        setDetectedPayment(null);
+        if (autoDetect) {
+          onRecognizedPaymentChange?.(null);
+        }
+      }
+    }, [passValue, autoDetect, onRecognizedPaymentChange, possiblePayments]);
+    const isDisable = disabled;
+    const isError = !!(errorMessage || error);
+    const isFocus = internalState === "focus";
+    const displayRecognizedPayment = controlledRecognizedPayment ?? detectedPayment;
+    const sizeStyles = theme.sizing.input(size);
+    const inputColors = theme.colors.control.input;
+    const handleFocus = () => {
+      if (!isDisable) {
+        setInternalState("focus");
+      }
+    };
+    const handleBlur = () => {
+      if (!isDisable) {
+        setInternalState("default");
+      }
+    };
+    const handleChange = (e) => {
+      const newValue = e.target.value;
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(newValue);
+      }
+      setPassValue(newValue);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.currentTarget.blur();
+      }
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+    };
+    let backgroundColor = inputColors.bg;
+    let borderColor = inputColors.border;
+    let outlineColor;
+    if (isDisable) {
+      backgroundColor = inputColors.bgDisable;
+      borderColor = inputColors.borderDisable;
+    } else if (isError) {
+      outlineColor = theme.colors.border.alert;
+      if (isFocus) {
+        backgroundColor = theme.colors.control.focus.bg;
+      }
+    } else if (isFocus) {
+      backgroundColor = theme.colors.control.focus.bg;
+      outlineColor = theme.colors.border.brand;
+    }
+    const textColor = isDisable ? inputColors.textDisable : inputColors.text;
+    const placeholderColor = inputColors.placeholder;
+    const iconColor = inputColors.placeholder;
+    const paddingConfig = {
+      xl: { vertical: 12, horizontal: 12 },
+      l: { vertical: 14, horizontal: 12 },
+      m: { vertical: 11, horizontal: 12 },
+      s: { vertical: 7, horizontal: 10 },
+      xs: { vertical: 7, horizontal: 10 }
+    };
+    const borderRadiusConfig = {
+      xl: 4,
+      l: 4,
+      m: 2,
+      s: 2,
+      xs: 2
+    };
+    const iconSizeConfig = {
+      xl: 18,
+      l: 18,
+      m: 18,
+      s: 16,
+      xs: 16
+    };
+    const focusOutlineConfig = {
+      xl: { width: 2, offset: -2 },
+      l: { width: 2, offset: -2 },
+      m: { width: 1, offset: -1 },
+      s: { width: 1, offset: -1 },
+      xs: { width: 1, offset: -1 }
+    };
+    const padding = paddingConfig[size];
+    const borderRadius = borderRadiusConfig[size];
+    const iconSize = iconSizeConfig[size];
+    const focusOutline = focusOutlineConfig[size];
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 8, width: "100%", testID, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          backgroundColor,
+          borderColor,
+          borderWidth: borderColor !== "transparent" ? 1 : 0,
+          borderRadius,
+          height: sizeStyles.height,
+          paddingVertical: padding.vertical,
+          paddingHorizontal: padding.horizontal,
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 10,
+          position: "relative",
+          style: {
+            ...outlineColor ? {
+              outline: `${focusOutline.width}px solid ${outlineColor}`,
+              outlineOffset: `${focusOutline.offset}px`
+            } : {}
+          },
+          hoverStyle: !isDisable && !isFocus && !isError ? {
+            backgroundColor: inputColors.bgHover,
+            borderColor: inputColors.borderHover
+          } : void 0,
+          children: [
+            icon && /* @__PURE__ */ jsx8(
+              Box,
+              {
+                alignItems: "center",
+                justifyContent: "center",
+                role: "img",
+                "aria-hidden": "true",
+                children: React4.isValidElement(icon) ? React4.cloneElement(icon, {
+                  size: iconSize,
+                  color: iconColor
+                }) : icon
+              }
+            ),
+            /* @__PURE__ */ jsx8(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx8(
+              InputPrimitive,
+              {
+                ref: inputRef,
+                id: inputId,
+                value: passValue,
+                name,
+                placeholder,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                disabled: isDisable,
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "off",
+                color: textColor,
+                fontSize: sizeStyles.fontSize,
+                placeholderTextColor: placeholderColor,
+                "aria-invalid": isError || void 0,
+                "aria-describedby": errorMessage ? errorId : void 0,
+                "aria-label": ariaLabel || "Card number",
+                "aria-disabled": isDisable || void 0,
+                "data-testid": "input-payment__field",
+                ...rest
+              }
+            ) }),
+            possiblePayments.length > 0 && /* @__PURE__ */ jsx8(
+              Box,
+              {
+                alignItems: "center",
+                justifyContent: "center",
+                "data-testid": "input-payment__card-icons",
+                style: { overflow: "hidden" },
+                children: /* @__PURE__ */ jsx8(
+                  PaymentIcons,
+                  {
+                    possiblePayments,
+                    maxVisible: maxVisiblePossiblePayments,
+                    recognizedPayment: displayRecognizedPayment,
+                    iconHeight: iconSize
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx8(
+        Text,
+        {
+          id: errorId,
+          role: "alert",
+          color: theme.colors.content.alert.primary,
+          fontSize: sizeStyles.fontSize - 2,
+          children: errorMessage
+        }
+      )
+    ] });
+  }
+);
+InputPayment.displayName = "InputPayment";
+export {
+  InputPayment
+};
+//# sourceMappingURL=index.mjs.map