@xyo-network/react-form-credit-card 2.81.10 → 2.83.0

package/dist/browser/index.mjs

@@ -0,0 +1,1104 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/controls/card/cvv/Cvv.tsx
+import React3 from "react";
+
+// src/controls/CreditCardCvv.ts
+import { assertEx } from "@xylabs/assert";
+import { FormControlBase } from "@xyo-network/react-form-group";
+import valid from "card-validator";
+
+// src/utils/umask.ts
+function unmask(value) {
+  return value.replaceAll(/\D/g, "");
+}
+__name(unmask, "unmask");
+
+// src/controls/CreditCardCvv.ts
+var CONTROL_NAME = "cvv";
+var CreditCardCvvFormControl = class extends FormControlBase {
+  static {
+    __name(this, "CreditCardCvvFormControl");
+  }
+  invalidMessage = "Your card cvc is invalid.";
+  pattern = /^\d{0,4}$/;
+  patternStrict = /^\d{1,4}$/;
+  props = {
+    autoComplete: "cc-csc",
+    autoCorrect: "off",
+    id: CONTROL_NAME,
+    inputMode: "numeric",
+    name: CONTROL_NAME,
+    placeholder: "CVC",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  _cardNumberFormControl = void 0;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME);
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
+  }
+  get cardNumberFormControl() {
+    return assertEx(this._cardNumberFormControl, () => "Card number form control is not set");
+  }
+  blurError(value) {
+    const num = this.cardNumberFormControl.value;
+    const max = this.getCardNumberCvcMax(num);
+    const cvvValidation = valid.cvv(value, max);
+    if (cvvValidation.isValid) {
+      this.setError("");
+      this.setStatus("VALID");
+    } else {
+      this.setError(this.invalidMessage);
+      this.setStatus("INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const num = this.cardNumberFormControl.value;
+      const max = this.getCardNumberCvcMax(num);
+      const cvvValidation = valid.cvv(value, max);
+      if (cvvValidation.isPotentiallyValid) {
+        this.setError("");
+        this.setStatus("VALID");
+      } else {
+        this.setError("Your card cvc is invalid.");
+        this.setStatus("INVALID");
+      }
+    } else {
+      this.setError(this.invalidMessage);
+      this.setStatus("INVALID");
+    }
+  }
+  setCardNumberFormControl(cardNumberFormControl) {
+    this._cardNumberFormControl = cardNumberFormControl;
+  }
+  getCardNumberCvcMax(num) {
+    if (!num) return 3;
+    const numberValidation = valid.number(num);
+    return numberValidation.card ? numberValidation.card.code.size : 3;
+  }
+};
+
+// src/controls/CreditCardExpiry.ts
+import { assertEx as assertEx2 } from "@xylabs/assert";
+import { FormControlBase as FormControlBase2 } from "@xyo-network/react-form-group";
+import valid2 from "card-validator";
+var CONTROL_NAME2 = "expiration";
+var CreditCardExpirationFormControl = class extends FormControlBase2 {
+  static {
+    __name(this, "CreditCardExpirationFormControl");
+  }
+  invalidMessage = "Card Expiration is invalid";
+  pattern = /^\d{0,4}$/;
+  patternStrict = /^\d{1,4}$/;
+  props = {
+    autoComplete: "cc-exp",
+    autoCorrect: "off",
+    id: CONTROL_NAME2,
+    inputMode: "numeric",
+    name: CONTROL_NAME2,
+    placeholder: "MM / YY",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  _cardNumberFormControl = void 0;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME2);
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
+  }
+  get cardNumberFormControl() {
+    return assertEx2(this._cardNumberFormControl, () => "Card number form control is not set");
+  }
+  // make it so the raw value is the same to preserve the / separator in the value
+  get rawValue() {
+    return this.value;
+  }
+  blurError(value) {
+    const unmasked = unmask(value);
+    const expirationValid = valid2.expirationDate(unmasked);
+    if (!unmasked || unmasked && unmasked.length !== 4) {
+      this.setErrorAndValidity("Your card expiration is incomplete.", "INVALID");
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", "INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const expirationValid = valid2.expirationDate(unmasked);
+    if (expirationValid.isPotentiallyValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else if (expirationValid.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity("Your card's expiration year is in the past.", "INVALID");
+    }
+  }
+  mask(value) {
+    if (/^[2-9]/.test(unmask(value))) {
+      return this.makeMask(" / ", 2)(`0${value}`);
+    }
+    return this.makeMask(" / ", 2)(value);
+  }
+  makeMask(separator, limit) {
+    return (value) => {
+      const output = [];
+      for (let i = 0; i < value.length; i++) {
+        if (i !== 0 && i % limit === 0) {
+          output.push(separator);
+        }
+        output.push(value[i]);
+      }
+      return output.join("");
+    };
+  }
+};
+
+// src/controls/CreditCardNumber.ts
+import { FormControlBase as FormControlBase3 } from "@xyo-network/react-form-group";
+import valid3 from "card-validator";
+var CONTROL_NAME3 = "cardNumber2";
+var CreditCardNumberFormControl = class extends FormControlBase3 {
+  static {
+    __name(this, "CreditCardNumberFormControl");
+  }
+  creditCardType = "";
+  invalidMessage = "Card Number is invalid";
+  pattern = /^(\d+)?$/;
+  patternStrict = /^\d+$/;
+  props = {
+    autoComplete: "cc-number",
+    autoCorrect: "off",
+    id: CONTROL_NAME3,
+    inputMode: "numeric",
+    name: CONTROL_NAME3,
+    placeholder: "1234 1234 1234 1234",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME3);
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
+  }
+  blurError(value) {
+    const unmasked = unmask(value);
+    const numberValidation = valid3.number(unmasked);
+    if (!numberValidation.isValid) {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+      return;
+    }
+    this.setErrorAndValidity("", "VALID");
+  }
+  changeError(value) {
+    const unmasked = unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const numberValidation = valid3.number(unmasked);
+      if (!numberValidation.isPotentiallyValid) {
+        this.setErrorAndValidity(this.invalidMessage, "INVALID");
+        return;
+      }
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  earlyNumberCheck(number) {
+    switch (number) {
+      case "4": {
+        this.setCreditCardType("visa");
+        break;
+      }
+      case "5": {
+        this.setCreditCardType("mastercard");
+        break;
+      }
+      case "3": {
+        this.setCreditCardType("amex");
+        break;
+      }
+      case "6": {
+        this.setCreditCardType("discover");
+        break;
+      }
+      default: {
+        this.setCreditCardType("");
+      }
+    }
+  }
+  getCursorPosition() {
+    if (this.value) {
+      const previousValue = this.previousValue ?? "";
+      const unmasked = unmask(this.value);
+      const numberValidation = valid3.number(unmasked);
+      const card = numberValidation.card;
+      const lengthChange = this.value.length - (previousValue?.length ?? 0);
+      const unmaskedChange = unmask(this.value).length - unmask(previousValue).length;
+      if (card) {
+        const gaps = card.gaps;
+        const oldCursor = this.cursorPosition.previous ?? 0;
+        const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length;
+        const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length;
+        const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange;
+        return newCursor;
+      }
+    }
+    return;
+  }
+  mask(value = "") {
+    const unmasked = unmask(value);
+    const numberValidation = valid3.number(unmasked);
+    const card = numberValidation.card;
+    if (card) {
+      const max = card.lengths.includes(16) ? 16 : card.lengths[0];
+      const gaps = [
+        ...card.gaps,
+        max
+      ];
+      const newVal = gaps.map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap)).filter(Boolean).join(" ");
+      return newVal;
+    }
+    return value;
+  }
+  onCreditCardTypeChange = /* @__PURE__ */ __name(() => {
+  }, "onCreditCardTypeChange");
+  setCreditCardType(type) {
+    this.creditCardType = type;
+    this.onCreditCardTypeChange(type);
+  }
+  setValue(value = "", options) {
+    const umMasked = this.unmask(value);
+    super.setValue(umMasked, options);
+    this.earlyNumberCheck(umMasked.charAt(0));
+  }
+};
+
+// src/controls/Email.ts
+import { FormControlBase as FormControlBase4 } from "@xyo-network/react-form-group";
+var CONTROL_NAME4 = "Email";
+var CreditCardEmailFormControl = class extends FormControlBase4 {
+  static {
+    __name(this, "CreditCardEmailFormControl");
+  }
+  invalidMessage = "Your email is invalid.";
+  pattern = /^.*$/;
+  patternStrict = /^([\w+.\-])+@(([\dA-Za-z-])+\.)+([\dA-Za-z]{2,4})+$/;
+  props = {
+    autoComplete: "email",
+    autoCorrect: "off",
+    id: CONTROL_NAME4.toLocaleLowerCase(),
+    name: CONTROL_NAME4.toLocaleLowerCase(),
+    placeholder: "jerry.smith@email.com",
+    spellCheck: false
+  };
+  required = true;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME4);
+    this.setSerializeSettings({
+      sensitive: false,
+      serializable: true
+    });
+  }
+  blurError(value) {
+    const match = value.match(this.patternStrict);
+    this.updateValidation(match);
+  }
+  changeError(value) {
+    if (this.error) {
+      this.blurError(value);
+    }
+  }
+  updateValidation(match) {
+    if (match) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+};
+
+// src/controls/Name.ts
+import { FormControlBase as FormControlBase5 } from "@xyo-network/react-form-group";
+var NameFormControl = class extends FormControlBase5 {
+  static {
+    __name(this, "NameFormControl");
+  }
+  nameLabel;
+  required;
+  constructor(nameLabel, autoCompleteLabel, placeHolder) {
+    super();
+    this.nameLabel = nameLabel;
+    this.required = true;
+    super.setName(nameLabel);
+    this.setSerializeSettings({
+      sensitive: false,
+      serializable: true
+    });
+    this.invalidMessage = `${nameLabel} name is missing.`;
+    this.props = {
+      autoComplete: autoCompleteLabel,
+      autoCorrect: "off",
+      id: this.nameLabel,
+      name: this.nameLabel,
+      placeholder: placeHolder,
+      spellCheck: false
+    };
+  }
+  blurError(value) {
+    if (value) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  changeError(value) {
+    this.blurError(value);
+  }
+};
+
+// src/controls/Zip.ts
+import { FormControlBase as FormControlBase6 } from "@xyo-network/react-form-group";
+import valid4 from "card-validator";
+var CONTROL_NAME5 = "Zip";
+var CreditCardZipFormControl = class extends FormControlBase6 {
+  static {
+    __name(this, "CreditCardZipFormControl");
+  }
+  invalidMessage = "Your zip code is invalid.";
+  props = {
+    autoComplete: "postal-code",
+    autoCorrect: "off",
+    id: CONTROL_NAME5.toLocaleLowerCase(),
+    name: CONTROL_NAME5.toLocaleLowerCase(),
+    placeholder: "12345",
+    spellCheck: false
+  };
+  required = true;
+  unmask = unmask;
+  constructor() {
+    super();
+    super.setName(CONTROL_NAME5);
+    this.setSerializeSettings({
+      sensitive: true,
+      serializable: true
+    });
+  }
+  blurError(value) {
+    const postalCodeValidation = valid4.postalCode(value);
+    if (postalCodeValidation.isValid) {
+      this.setErrorAndValidity("", "VALID");
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+  changeError(value) {
+    const unmasked = this.unmask(value);
+    const match = unmasked.match(this.patternStrict);
+    if (match) {
+      const postalCodeValidation = valid4.postalCode(value);
+      if (postalCodeValidation.isPotentiallyValid) {
+        this.setErrorAndValidity("", "VALID");
+      } else {
+        this.setErrorAndValidity("Your zip code is invalid.", "INVALID");
+      }
+    } else {
+      this.setErrorAndValidity(this.invalidMessage, "INVALID");
+    }
+  }
+};
+
+// src/components/controls/card/FormControlTextField.tsx
+import { FormControl as MuiFormControl, TextField } from "@mui/material";
+import { LabeledTextFieldWrapper } from "@xyo-network/react-shared";
+import React, { forwardRef } from "react";
+var FormControlTextField = /* @__PURE__ */ forwardRef(({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
+  const { name } = formControl?.props ?? {};
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    formControl?.setValue(event.target.value);
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    formControl?.blurError?.(event.target.value);
+    formControl?.setTouched(true);
+  }, "handleBlur");
+  return /* @__PURE__ */ React.createElement(MuiFormControl, {
+    fullWidth: true
+  }, /* @__PURE__ */ React.createElement(LabeledTextFieldWrapper, {
+    label: fieldLabel
+  }, /* @__PURE__ */ React.createElement("label", {
+    htmlFor: name
+  }, /* @__PURE__ */ React.createElement(TextField, {
+    error: !!formControlError,
+    helperText: formControlError || " ",
+    fullWidth: true,
+    hiddenLabel: true,
+    name,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: /* @__PURE__ */ __name((event) => {
+      const selectionEnd = event.target.selectionEnd;
+      if (selectionEnd && formControl) {
+        formControl.cursorPosition.previous = selectionEnd;
+      }
+    }, "onKeyDown"),
+    ref,
+    required: formControl?.required,
+    size: "small",
+    variant: "filled",
+    ...props
+  }))));
+});
+FormControlTextField.displayName = "FormControlTextField";
+
+// src/components/controls/card/cvv/use.ts
+import { useEffect } from "react";
+
+// src/context/FormGroupCreditCardContext.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var FormGroupCreditCardContext = createContextEx();
+
+// src/context/FormGroupCreditCardProvider.tsx
+import { FormGroup } from "@xyo-network/react-form-group";
+import React2, { useMemo } from "react";
+var FormGroupCreditCardProvider = /* @__PURE__ */ __name(({ children, params, ...props }) => {
+  const formGroup = useMemo(() => {
+    const formGroup2 = new FormGroup(params);
+    return formGroup2;
+  }, [
+    params
+  ]);
+  return (
+    // eslint-disable-next-line @eslint-react/no-unstable-context-value
+    /* @__PURE__ */ React2.createElement(FormGroupCreditCardContext.Provider, {
+      value: {
+        formGroup,
+        provided: true
+      },
+      ...props
+    }, children)
+  );
+}, "FormGroupCreditCardProvider");
+
+// src/context/useFormGroupWithCreditCard.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useFormGroupWithCreditCardInput = /* @__PURE__ */ __name((required = false) => {
+  return useContextEx(FormGroupCreditCardContext, "FormGroupCreditCard", required);
+}, "useFormGroupWithCreditCardInput");
+
+// src/components/controls/card/useCreditCardFormControl.tsx
+import { useMemo as useMemo2, useRef, useState } from "react";
+var StableDefaultArgs = [];
+var useCreditCardFormControl = /* @__PURE__ */ __name((formControlName, Control, args = StableDefaultArgs) => {
+  const [error, setError] = useState("");
+  const [value, setValue] = useState("");
+  const inputRef = useRef(null);
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
+  const creditCardFormControl = useMemo2(() => {
+    if (Control) {
+      const control = new Control(...args);
+      control.registerOnErrorChange((newError) => setError(newError));
+      control.registerOnChange((value2) => setValue(value2));
+      if (formControlName) formGroup?.registerControl(formControlName, control);
+      return control;
+    }
+  }, [
+    Control,
+    args,
+    formControlName,
+    formGroup
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    value
+  };
+}, "useCreditCardFormControl");
+
+// src/components/controls/card/cvv/use.ts
+var useCreditCardCvvFormControl = /* @__PURE__ */ __name((formControlName, cardNumberControlName = "cardNumber", control) => {
+  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
+  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName);
+  useEffect(() => {
+    if (creditCardNumberFormControl) {
+      const castControl = creditCardFormControl;
+      if (!castControl.setCardNumberFormControl) {
+        console.error("cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl");
+        return;
+      }
+      castControl.setCardNumberFormControl(creditCardNumberFormControl);
+    }
+  }, [
+    creditCardFormControl,
+    creditCardNumberFormControl
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    value
+  };
+}, "useCreditCardCvvFormControl");
+
+// src/components/controls/card/cvv/Cvv.tsx
+var CreditCardCvvWithFormControl = /* @__PURE__ */ __name(({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React3.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} number on the back of your card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "CreditCardCvvWithFormControl");
+
+// src/components/controls/card/Email.tsx
+import React4 from "react";
+var CreditCardEmailWithFormControl = /* @__PURE__ */ __name(({ formControlName = "emailAddress", fieldLabel = "Email", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React4.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} for your purchase`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "CreditCardEmailWithFormControl");
+
+// src/components/controls/card/Expiration.tsx
+import React5 from "react";
+var CreditCardExpirationWithFormControl = /* @__PURE__ */ __name(({ formControlName = "expiration", fieldLabel = "Expiration", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React5.createElement(FormControlTextField, {
+    inputRef,
+    formControl: creditCardFormControl,
+    fieldLabel,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} of the card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    value,
+    ...expirationProps,
+    ...props
+  });
+}, "CreditCardExpirationWithFormControl");
+
+// src/components/controls/card/Name.tsx
+import React6, { useMemo as useMemo3 } from "react";
+var NameWithFormControl = /* @__PURE__ */ __name(({ autoCompleteLabel, fieldLabel = "Name", formControlName, placeholder, tabIndex, ...props }) => {
+  const args = useMemo3(() => [
+    fieldLabel,
+    autoCompleteLabel,
+    placeholder ?? ""
+  ], [
+    autoCompleteLabel,
+    fieldLabel,
+    placeholder
+  ]);
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React6.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} name on your card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck,
+      tabIndex
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "NameWithFormControl");
+
+// src/components/controls/card/number/Number.tsx
+import { InputAdornment } from "@mui/material";
+import React11 from "react";
+
+// src/components/img/american-express.svg
+import * as React7 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SvgAmericanExpress = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxs("svg", { height: "800px", width: "800px", id: "Capa_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 512 512", xmlSpace: "preserve", ...props, children: [
+  /* @__PURE__ */ jsx("path", { style: {
+    fill: "#306FC5"
+  }, d: "M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717 c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z" }),
+  /* @__PURE__ */ jsx("path", { style: {
+    opacity: 0.15,
+    fill: "#202121",
+    enableBackground: "new"
+  }, d: "M21.517,402.281V109.717 c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52 C35.07,432.549,21.517,418.997,21.517,402.281z" }),
+  /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("polygon", { style: {
+      fill: "#FFFFFF"
+    }, points: "74.59,220.748 89.888,220.748 82.241,201.278  " }),
+    /* @__PURE__ */ jsx("polygon", { style: {
+      fill: "#FFFFFF"
+    }, points: "155.946,286.107 155.946,295.148 181.675,295.148 181.675,304.885 155.946,304.885  155.946,315.318 184.455,315.318 197.666,300.712 185.151,286.107  " }),
+    /* @__PURE__ */ jsx("polygon", { style: {
+      fill: "#FFFFFF"
+    }, points: "356.898,201.278 348.553,220.748 364.548,220.748  " }),
+    /* @__PURE__ */ jsx("polygon", { style: {
+      fill: "#FFFFFF"
+    }, points: "230.348,320.875 230.348,281.241 212.268,300.712  " }),
+    /* @__PURE__ */ jsx("path", { style: {
+      fill: "#FFFFFF"
+    }, d: "M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299 C261.637,298.624,264.42,296.539,264.42,292.368z" }),
+    /* @__PURE__ */ jsx("path", { style: {
+      fill: "#FFFFFF"
+    }, d: "M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868 c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z" }),
+    /* @__PURE__ */ jsx("path", { style: {
+      fill: "#FFFFFF"
+    }, d: "M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502 c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384 l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444 l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965 h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123 h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z M177.501,241.609h-6.955 h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43 H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306 l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738 h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042 c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197 c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565 c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818 v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829 C270.676,218.662,272.996,219.129,275.076,221.294z M298.491,241.609h-11.822v-48.675h11.822V241.609z M434.083,241.609h-15.3 l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211 c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472 c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783 c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243 h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609 L434.083,241.609z" }),
+    /* @__PURE__ */ jsx("path", { style: {
+      fill: "#FFFFFF"
+    }, d: "M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244 c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367 c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413 l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z" }),
+    /* @__PURE__ */ jsx("path", { style: {
+      fill: "#FFFFFF"
+    }, d: "M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0 c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081 c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431 l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953 v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394 h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478 c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039 C475.087,312.043,475.105,311.598,475.105,311.144z M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299 l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852 c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z  M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739 c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084 c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z  M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z M402.791,325.05h-22.252 v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475 c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819 h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473 c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43 C420.869,320.179,414.611,325.05,402.791,325.05z M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245 c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475 c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352 c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696 c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565 c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495 C466.761,313.925,465.37,317.401,462.59,320.179z" })
+  ] })
+] }), "SvgAmericanExpress");
+var american_express_default = SvgAmericanExpress;
+
+// src/components/img/discover.svg
+import * as React8 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SvgDiscover = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx2("svg", { width: "800px", height: "800px", viewBox: "0 -140 780 780", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxs2("g", { fillRule: "evenodd", children: [
+  /* @__PURE__ */ jsx2("path", { d: "M54.992 0C24.627 0 0 24.63 0 55.004v390.992C0 476.376 24.619 501 54.992 501h670.016C755.373 501 780 476.37 780 445.996V55.004C780 24.624 755.381 0 725.008 0H54.992z", fill: "#4D4D4D" }),
+  /* @__PURE__ */ jsx2("path", { d: "M327.152 161.893c8.837 0 16.248 1.784 25.268 6.09v22.751c-8.544-7.863-15.955-11.154-25.756-11.154-19.264 0-34.414 15.015-34.414 34.05 0 20.075 14.681 34.196 35.37 34.196 9.312 0 16.586-3.12 24.8-10.857v22.763c-9.341 4.14-16.911 5.776-25.756 5.776-31.278 0-55.582-22.596-55.582-51.737 0-28.826 24.951-51.878 56.07-51.878zm-97.113.627c11.546 0 22.11 3.72 30.943 10.994l-10.748 13.248c-5.35-5.646-10.41-8.028-16.564-8.028-8.853 0-15.3 4.745-15.3 10.989 0 5.354 3.619 8.188 15.944 12.482 23.365 8.044 30.29 15.176 30.29 30.926 0 19.193-14.976 32.553-36.32 32.553-15.63 0-26.994-5.795-36.458-18.872l13.268-12.03c4.73 8.61 12.622 13.222 22.42 13.222 9.163 0 15.947-5.952 15.947-13.984 0-4.164-2.055-7.734-6.158-10.258-2.066-1.195-6.158-2.977-14.2-5.647-19.291-6.538-25.91-13.527-25.91-27.185 0-16.225 14.214-28.41 32.846-28.41zm234.723 1.728h22.437l28.084 66.592 28.446-66.592h22.267l-45.494 101.686h-11.053l-44.687-101.686zm-397.348.152h30.15c33.312 0 56.534 20.382 56.534 49.641 0 14.59-7.104 28.696-19.118 38.057-10.108 7.901-21.626 11.445-37.574 11.445H67.414V164.4zm96.135 0h20.54v99.143h-20.54V164.4zm411.734 0h58.252v16.8H595.81v22.005h36.336v16.791h-36.336v26.762h37.726v16.785h-58.252V164.4zm71.858 0h30.455c23.69 0 37.265 10.71 37.265 29.272 0 15.18-8.514 25.14-23.986 28.105l33.148 41.766h-25.26l-28.429-39.828h-2.678v39.828h-20.515V164.4zm20.515 15.616v30.025h6.002c13.117 0 20.069-5.362 20.069-15.328 0-9.648-6.954-14.697-19.745-14.697h-6.326zM87.94 181.199v65.559h5.512c13.273 0 21.656-2.394 28.11-7.88 7.103-5.955 11.376-15.465 11.376-24.98 0-9.499-4.273-18.725-11.376-24.681-6.785-5.78-14.837-8.018-28.11-8.018H87.94z", fill: "#FFF" }),
+  /* @__PURE__ */ jsx2("path", { d: "m415.13 161.21c30.941 0 56.022 23.58 56.022 52.709v0.033c0 29.13-25.081 52.742-56.021 52.742s-56.022-23.613-56.022-52.742v-0.033c0-29.13 25.082-52.71 56.022-52.71zm364.85 127.15c-26.05 18.33-221.08 149.34-558.75 212.62h503.76c30.365 0 54.992-24.63 54.992-55.004v-157.62z", fill: "#F47216" })
+] }) }), "SvgDiscover");
+var discover_default = SvgDiscover;
+
+// src/components/img/mastercard.svg
+import * as React9 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SvgMastercard = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx3("svg", { width: "800px", height: "800px", viewBox: "0 -28.5 256 256", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", preserveAspectRatio: "xMidYMid", ...props, children: /* @__PURE__ */ jsxs3("g", { children: [
+  /* @__PURE__ */ jsx3("path", { d: "M46.5392504,198.011312 L46.5392504,184.839826 C46.5392504,179.790757 43.4659038,176.497885 38.1973096,176.497885 C35.5630125,176.497885 32.7091906,177.375984 30.7334678,180.229806 C29.1967945,177.815034 27.0015469,176.497885 23.7086756,176.497885 C21.513428,176.497885 19.3181804,177.15646 17.5619824,179.571233 L17.5619824,176.936935 L12.9519625,176.936935 L12.9519625,198.011312 L17.5619824,198.011312 L17.5619824,186.3765 C17.5619824,182.644579 19.5377052,180.888381 22.6110518,180.888381 C25.6843984,180.888381 27.2210717,182.864103 27.2210717,186.3765 L27.2210717,198.011312 L31.8310916,198.011312 L31.8310916,186.3765 C31.8310916,182.644579 34.0263392,180.888381 36.880161,180.888381 C39.9535076,180.888381 41.490181,182.864103 41.490181,186.3765 L41.490181,198.011312 L46.5392504,198.011312 L46.5392504,198.011312 Z M114.81145,176.936935 L107.347608,176.936935 L107.347608,170.570717 L102.737589,170.570717 L102.737589,176.936935 L98.566618,176.936935 L98.566618,181.107905 L102.737589,181.107905 L102.737589,190.766995 C102.737589,195.59654 104.713311,198.450362 109.981906,198.450362 C111.957628,198.450362 114.152876,197.791787 115.689549,196.913688 L114.372401,192.962243 C113.055252,193.840341 111.518579,194.059866 110.420955,194.059866 C108.225708,194.059866 107.347608,192.742718 107.347608,190.54747 L107.347608,181.107905 L114.81145,181.107905 L114.81145,176.936935 L114.81145,176.936935 Z M153.886857,176.497885 C151.25256,176.497885 149.496362,177.815034 148.398738,179.571233 L148.398738,176.936935 L143.788718,176.936935 L143.788718,198.011312 L148.398738,198.011312 L148.398738,186.156975 C148.398738,182.644579 149.935411,180.668856 152.789233,180.668856 C153.667332,180.668856 154.764956,180.888381 155.643055,181.107905 L156.960204,176.71741 C156.082105,176.497885 154.764956,176.497885 153.886857,176.497885 L153.886857,176.497885 L153.886857,176.497885 Z M94.834697,178.693133 C92.6394495,177.15646 89.566103,176.497885 86.2732315,176.497885 C81.0046375,176.497885 77.492241,179.132183 77.492241,183.303153 C77.492241,186.81555 80.1265385,188.791272 84.736558,189.449847 L86.931806,189.669371 C89.346578,190.10842 90.6637265,190.766995 90.6637265,191.864619 C90.6637265,193.401292 88.9075285,194.498916 85.834182,194.498916 C82.7608355,194.498916 80.346063,193.401292 78.8093895,192.303668 L76.614142,195.816065 C79.0289145,197.572262 82.321786,198.450362 85.614657,198.450362 C91.7613505,198.450362 95.2737465,195.59654 95.2737465,191.645094 C95.2737465,187.913173 92.4199245,185.937451 88.0294295,185.278876 L85.834182,185.059351 C83.858459,184.839826 82.321786,184.400777 82.321786,183.083629 C82.321786,181.546955 83.858459,180.668856 86.2732315,180.668856 C88.9075285,180.668856 91.5418255,181.76648 92.858974,182.425054 L94.834697,178.693133 L94.834697,178.693133 Z M217.329512,176.497885 C214.695215,176.497885 212.939017,177.815034 211.841393,179.571233 L211.841393,176.936935 L207.231373,176.936935 L207.231373,198.011312 L211.841393,198.011312 L211.841393,186.156975 C211.841393,182.644579 213.378066,180.668856 216.231888,180.668856 C217.109987,180.668856 218.207611,180.888381 219.08571,181.107905 L220.402859,176.71741 C219.52476,176.497885 218.207611,176.497885 217.329512,176.497885 L217.329512,176.497885 L217.329512,176.497885 Z M158.496877,187.474123 C158.496877,193.840341 162.887372,198.450362 169.69264,198.450362 C172.765986,198.450362 174.961234,197.791787 177.156481,196.035589 L174.961234,192.303668 C173.205036,193.620817 171.448838,194.279391 169.473115,194.279391 C165.741194,194.279391 163.106897,191.645094 163.106897,187.474123 C163.106897,183.522678 165.741194,180.888381 169.473115,180.668856 C171.448838,180.668856 173.205036,181.32743 174.961234,182.644579 L177.156481,178.912658 C174.961234,177.15646 172.765986,176.497885 169.69264,176.497885 C162.887372,176.497885 158.496877,181.107905 158.496877,187.474123 L158.496877,187.474123 L158.496877,187.474123 Z M201.08468,187.474123 L201.08468,176.936935 L196.47466,176.936935 L196.47466,179.571233 C194.937987,177.595509 192.742739,176.497885 189.888917,176.497885 C183.961749,176.497885 179.351729,181.107905 179.351729,187.474123 C179.351729,193.840341 183.961749,198.450362 189.888917,198.450362 C192.962264,198.450362 195.157512,197.352737 196.47466,195.377015 L196.47466,198.011312 L201.08468,198.011312 L201.08468,187.474123 Z M184.181274,187.474123 C184.181274,183.742202 186.596046,180.668856 190.547492,180.668856 C194.279413,180.668856 196.91371,183.522678 196.91371,187.474123 C196.91371,191.206044 194.279413,194.279391 190.547492,194.279391 C186.596046,194.059866 184.181274,191.206044 184.181274,187.474123 L184.181274,187.474123 Z M129.080559,176.497885 C122.933866,176.497885 118.543371,180.888381 118.543371,187.474123 C118.543371,194.059866 122.933866,198.450362 129.300084,198.450362 C132.373431,198.450362 135.446777,197.572262 137.861549,195.59654 L135.666302,192.303668 C133.910104,193.620817 131.714856,194.498916 129.519609,194.498916 C126.665787,194.498916 123.811965,193.181768 123.153391,189.449847 L138.739648,189.449847 L138.739648,187.693648 C138.959173,180.888381 135.007727,176.497885 129.080559,176.497885 L129.080559,176.497885 L129.080559,176.497885 Z M129.080559,180.449331 C131.934381,180.449331 133.910104,182.20553 134.349153,185.498401 L123.372916,185.498401 C123.811965,182.644579 125.787688,180.449331 129.080559,180.449331 L129.080559,180.449331 Z M243.452958,187.474123 L243.452958,168.594995 L238.842938,168.594995 L238.842938,179.571233 C237.306265,177.595509 235.111017,176.497885 232.257196,176.497885 C226.330027,176.497885 221.720007,181.107905 221.720007,187.474123 C221.720007,193.840341 226.330027,198.450362 232.257196,198.450362 C235.330542,198.450362 237.52579,197.352737 238.842938,195.377015 L238.842938,198.011312 L243.452958,198.011312 L243.452958,187.474123 Z M226.549552,187.474123 C226.549552,183.742202 228.964324,180.668856 232.91577,180.668856 C236.647691,180.668856 239.281988,183.522678 239.281988,187.474123 C239.281988,191.206044 236.647691,194.279391 232.91577,194.279391 C228.964324,194.059866 226.549552,191.206044 226.549552,187.474123 L226.549552,187.474123 Z M72.443172,187.474123 L72.443172,176.936935 L67.833152,176.936935 L67.833152,179.571233 C66.2964785,177.595509 64.101231,176.497885 61.247409,176.497885 C55.3202405,176.497885 50.7102205,181.107905 50.7102205,187.474123 C50.7102205,193.840341 55.3202405,198.450362 61.247409,198.450362 C64.3207555,198.450362 66.5160035,197.352737 67.833152,195.377015 L67.833152,198.011312 L72.443172,198.011312 L72.443172,187.474123 Z M55.3202405,187.474123 C55.3202405,183.742202 57.735013,180.668856 61.6864585,180.668856 C65.4183795,180.668856 68.0526765,183.522678 68.0526765,187.474123 C68.0526765,191.206044 65.4183795,194.279391 61.6864585,194.279391 C57.735013,194.059866 55.3202405,191.206044 55.3202405,187.474123 Z", fill: "#000000" }),
+  /* @__PURE__ */ jsx3("rect", { fill: "#FF5F00", x: 93.2980455, y: 16.9034088, width: 69.1502985, height: 124.251009 }),
+  /* @__PURE__ */ jsx3("path", { d: "M97.688519,79.0288935 C97.688519,53.783546 109.542856,31.3920209 127.763411,16.9033869 C114.3724,6.3661985 97.468994,-1.94737475e-05 79.0289145,-1.94737475e-05 C35.3434877,-1.94737475e-05 1.7258174e-06,35.3434665 1.7258174e-06,79.0288935 C1.7258174e-06,122.71432 35.3434877,158.057806 79.0289145,158.057806 C97.468994,158.057806 114.3724,151.691588 127.763411,141.1544 C109.542856,126.88529 97.688519,104.274241 97.688519,79.0288935 Z", fill: "#EB001B" }),
+  /* @__PURE__ */ jsx3("path", { d: "M255.746345,79.0288935 C255.746345,122.71432 220.402859,158.057806 176.717432,158.057806 C158.277352,158.057806 141.373945,151.691588 127.982936,141.1544 C146.423015,126.665766 158.057827,104.274241 158.057827,79.0288935 C158.057827,53.783546 146.20349,31.3920209 127.982936,16.9033869 C141.373945,6.3661985 158.277352,-1.94737475e-05 176.717432,-1.94737475e-05 C220.402859,-1.94737475e-05 255.746345,35.5629913 255.746345,79.0288935 Z", fill: "#F79E1B" })
+] }) }), "SvgMastercard");
+var mastercard_default = SvgMastercard;
+
+// src/components/img/visa.svg
+import * as React10 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SvgVisa = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxs4("svg", { width: "800px", height: "800px", viewBox: "0 -140 780 780", enableBackground: "new 0 0 780 500", xmlSpace: "preserve", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40   C0,17.909,17.909,0,40,0z", fill: "#0E4595" }),
+  /* @__PURE__ */ jsx4("path", { d: "m293.2 348.73l33.361-195.76h53.36l-33.385 195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725 0-89.865 26.55-90.18 64.603-0.299 28.13 26.514 43.822 46.752 53.186 20.771 9.595 27.752 15.714 27.654 24.283-0.131 13.121-16.586 19.116-31.922 19.116-21.357 0-32.703-2.967-50.227-10.276l-6.876-3.11-7.489 43.823c12.463 5.464 35.51 10.198 59.438 10.443 56.09 0 92.5-26.246 92.916-66.882 0.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268 0-8.137 9.668-16.839 30.557-16.839 17.449-0.27 30.09 3.535 39.938 7.5l4.781 2.26 7.232-42.429m137.31-4.223h-41.232c-12.773 0-22.332 3.487-27.941 16.234l-79.244 179.4h56.031s9.16-24.123 11.232-29.418c6.125 0 60.555 0.084 68.338 0.084 1.596 6.853 6.49 29.334 6.49 29.334h49.514l-43.188-195.64zm-65.418 126.41c4.412-11.279 21.26-54.723 21.26-54.723-0.316 0.522 4.379-11.334 7.074-18.684l3.605 16.879s10.219 46.729 12.354 56.528h-44.293zm-363.3-126.41l-52.24 133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766 171.2 56.456-0.064 84.004-195.39h-56.521", fill: "#ffffff" }),
+  /* @__PURE__ */ jsx4("path", { d: "m146.92 152.96h-86.041l-0.681 4.073c66.938 16.204 111.23 55.363 129.62 102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527", fill: "#F2AE14" })
+] }), "SvgVisa");
+var visa_default = SvgVisa;
+
+// src/components/controls/card/Options.ts
+var CreditCardData = {
+  amex: {
+    icon: american_express_default,
+    name: "American Express"
+  },
+  discover: {
+    icon: discover_default,
+    name: "Discover"
+  },
+  mastercard: {
+    icon: mastercard_default,
+    name: "Mastercard"
+  },
+  visa: {
+    icon: visa_default,
+    name: "Visa"
+  }
+};
+
+// src/components/controls/card/number/use.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useCreditCardNumberFormControl = /* @__PURE__ */ __name((formControlName, control) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
+  const [type, setType] = useState2("");
+  useEffect2(() => {
+    if (creditCardFormControl) {
+      const castControl = creditCardFormControl;
+      if (!castControl.onCreditCardTypeChange) {
+        console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
+        return;
+      }
+      castControl.onCreditCardTypeChange = (type2) => setType(type2);
+      castControl.onCursorChange = (cursor) => {
+        if (inputRef.current && cursor) {
+          inputRef.current.setSelectionRange(cursor, cursor);
+        }
+      };
+    }
+  }, [
+    creditCardFormControl,
+    inputRef
+  ]);
+  return {
+    creditCardFormControl,
+    error,
+    inputRef,
+    type,
+    value
+  };
+}, "useCreditCardNumberFormControl");
+
+// src/components/controls/card/number/Number.tsx
+var CreditCardNumberWithFormControl = /* @__PURE__ */ __name(({ fieldLabel = "Card Number", formControlName = "cardNumber", ...props }) => {
+  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React11.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputRef,
+    inputMode,
+    inputProps: {
+      "aria-label": fieldLabel,
+      autoComplete,
+      autoCorrect,
+      id,
+      inputMode,
+      name,
+      spellCheck
+    },
+    InputProps: {
+      startAdornment: type.length > 0 ? /* @__PURE__ */ React11.createElement(InputAdornment, {
+        position: "start"
+      }, /* @__PURE__ */ React11.createElement("img", {
+        height: "30px",
+        width: "40px",
+        src: CreditCardData[type].icon
+      })) : null
+    },
+    value,
+    ...cardProps,
+    ...props
+  });
+}, "CreditCardNumberWithFormControl");
+
+// src/components/controls/card/Zip.tsx
+import React12 from "react";
+var CreditCardZipWithFormControl = /* @__PURE__ */ __name(({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {};
+  return /* @__PURE__ */ React12.createElement(FormControlTextField, {
+    fieldLabel,
+    formControl: creditCardFormControl,
+    formControlError: error,
+    inputMode,
+    inputProps: {
+      "aria-label": `${fieldLabel} code for your card`,
+      autoComplete,
+      autoCorrect,
+      id,
+      name,
+      spellCheck
+    },
+    inputRef,
+    value,
+    ...cvcProps,
+    ...props
+  });
+}, "CreditCardZipWithFormControl");
+
+// src/components/form/Form.tsx
+import { Stack as Stack2 } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { ErrorRender } from "@xyo-network/react-error";
+import React14, { useState as useState3 } from "react";
+
+// src/components/support/Fields.ts
+var NameFields = [
+  "firstName",
+  "lastName"
+];
+var NameLabels = [
+  "First",
+  "Last"
+];
+
+// src/components/support/validateCreditCardInputs.ts
+import { assertEx as assertEx3 } from "@xylabs/assert";
+
+// src/models/CreditCardInput.ts
+import { isPayloadOfSchemaTypeWithMeta } from "@xyo-network/payload-model";
+var CreditCardInputSchema = "network.xyo.credit.card.input";
+var isCreditCardInput = isPayloadOfSchemaTypeWithMeta(CreditCardInputSchema);
+
+// src/components/support/validateCreditCardInputs.ts
+var validateCreditCardInputs = /* @__PURE__ */ __name((values) => {
+  return {
+    cardNumber: assertEx3(values.cardNumber, () => "card number is not a string"),
+    cvc: assertEx3(values.cvc, () => "card cvc is not a string"),
+    emailAddress: assertEx3(values.emailAddress, () => "emailAddress is not a string"),
+    expiration: assertEx3(values.expiration, () => "card expiration is not a string"),
+    firstName: assertEx3(values.firstName, () => "first name is not a string"),
+    lastName: assertEx3(values.lastName, () => "last name is not a string"),
+    schema: CreditCardInputSchema,
+    timestamp: values.timestamp,
+    zip: assertEx3(values.zip, () => "zip is not a string")
+  };
+}, "validateCreditCardInputs");
+
+// src/components/form/InputFieldsStack.tsx
+import { Stack } from "@mui/material";
+import React13 from "react";
+var InputFieldsStack = /* @__PURE__ */ __name((props) => {
+  const { sx } = props;
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React13.createElement(NameWithFormControl, {
+    autoCompleteLabel: "given-name",
+    fieldLabel: "First",
+    formControlName: "firstName",
+    placeholder: "Jerry"
+  }), /* @__PURE__ */ React13.createElement(NameWithFormControl, {
+    autoCompleteLabel: "family-name",
+    fieldLabel: "Last",
+    formControlName: "lastName",
+    placeholder: "Smith"
+  })), /* @__PURE__ */ React13.createElement(Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        lg: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React13.createElement(Stack, {
+    width: {
+      lg: "50%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ React13.createElement(CreditCardNumberWithFormControl, null)), /* @__PURE__ */ React13.createElement(Stack, {
+    direction: {
+      lg: "row",
+      xs: "column"
+    },
+    gap: 2,
+    width: {
+      lg: "50%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ React13.createElement(CreditCardCvvWithFormControl, null), /* @__PURE__ */ React13.createElement(CreditCardExpirationWithFormControl, null))), /* @__PURE__ */ React13.createElement(Stack, {
+    gap: 2,
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      },
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React13.createElement(Stack, {
+    width: {
+      md: "25%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ React13.createElement(CreditCardZipWithFormControl, null)), /* @__PURE__ */ React13.createElement(Stack, {
+    width: {
+      md: "75%",
+      xs: "100%"
+    }
+  }, /* @__PURE__ */ React13.createElement(CreditCardEmailWithFormControl, null))));
+}, "InputFieldsStack");
+
+// src/components/form/useFormStorage.tsx
+import { usePromise } from "@xylabs/react-promise";
+import { StorageArchivist, StorageArchivistConfigSchema } from "@xyo-network/archivist-storage";
+import { ArchivistFormGroupStorage } from "@xyo-network/react-form-group";
+var StorageNameSpace = "credit-card-fields";
+var calculateTTL = /* @__PURE__ */ __name((months = 6) => {
+  const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+  const DAYS_PER_MONTH = 30.44;
+  return months * DAYS_PER_MONTH * MS_PER_DAY;
+}, "calculateTTL");
+var useFormStorage = /* @__PURE__ */ __name(() => {
+  return usePromise(async () => {
+    const localStorageArchivist = await StorageArchivist.create({
+      account: "random",
+      config: {
+        namespace: StorageNameSpace,
+        schema: StorageArchivistConfigSchema,
+        type: "local"
+      }
+    });
+    const sessionStorageArchivist = await StorageArchivist.create({
+      account: "random",
+      config: {
+        namespace: StorageNameSpace,
+        schema: StorageArchivistConfigSchema,
+        type: "session"
+      }
+    });
+    const storage = {
+      sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),
+      storage: new ArchivistFormGroupStorage(localStorageArchivist)
+    };
+    return {
+      serialize: true,
+      storage,
+      ttlStorage: calculateTTL()
+    };
+  }, []);
+}, "useFormStorage");
+
+// src/components/form/Form.tsx
+var CreditCardFormFlexbox = /* @__PURE__ */ __name(({ ConfirmationButton, displayErrors, onErrorDuringSubmit, onInvalidSubmit, onSuccessfulSubmit, onValidSubmit, ...props }) => {
+  const { formGroup } = useFormGroupWithCreditCardInput(true);
+  const [error, setError] = useState3();
+  const handleConfirmPayment = /* @__PURE__ */ __name(async () => {
+    try {
+      if (!formGroup) {
+        throw new Error("formGroup is not defined");
+      }
+      formGroup.validateFields();
+      const errorSummary = formGroup.errorSummary;
+      if (errorSummary.invalidFields.length > 0) {
+        onInvalidSubmit?.(errorSummary);
+      }
+      if (errorSummary.invalidFields.length > 0) return;
+      const formOutput = validateCreditCardInputs(formGroup.values);
+      await onValidSubmit?.(formOutput);
+      onSuccessfulSubmit?.();
+    } catch (error2) {
+      onErrorDuringSubmit?.(error2);
+      if (displayErrors) setError(error2);
+    }
+  }, "handleConfirmPayment");
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(ErrorRender, {
+    error
+  }), /* @__PURE__ */ React14.createElement(FlexCol, {
+    sx: {
+      flexDirection: {
+        md: "row",
+        xs: "column"
+      }
+    },
+    width: "100%",
+    gap: 2,
+    ...props
+  }, /* @__PURE__ */ React14.createElement(Stack2, {
+    flexDirection: "column",
+    sx: {
+      width: "100%"
+    },
+    gap: 2
+  }, /* @__PURE__ */ React14.createElement(InputFieldsStack, null), ConfirmationButton ? /* @__PURE__ */ React14.createElement(ConfirmationButton, {
+    onClick: handleConfirmPayment,
+    variant: "contained",
+    sx: {
+      alignSelf: "end"
+    }
+  }, "Confirm Payment") : null)));
+}, "CreditCardFormFlexbox");
+var CreditCardFormFlexboxWithFormGroupProvider = /* @__PURE__ */ __name((props) => {
+  const [params, error] = useFormStorage();
+  return /* @__PURE__ */ React14.createElement(FormGroupCreditCardProvider, {
+    params
+  }, /* @__PURE__ */ React14.createElement(ErrorRender, {
+    error
+  }), /* @__PURE__ */ React14.createElement(CreditCardFormFlexbox, props));
+}, "CreditCardFormFlexboxWithFormGroupProvider");
+export {
+  CreditCardCvvFormControl,
+  CreditCardCvvWithFormControl,
+  CreditCardData,
+  CreditCardEmailFormControl,
+  CreditCardEmailWithFormControl,
+  CreditCardExpirationFormControl,
+  CreditCardExpirationWithFormControl,
+  CreditCardFormFlexbox,
+  CreditCardFormFlexboxWithFormGroupProvider,
+  CreditCardInputSchema,
+  CreditCardNumberFormControl,
+  CreditCardNumberWithFormControl,
+  CreditCardZipFormControl,
+  CreditCardZipWithFormControl,
+  FormControlTextField,
+  FormGroupCreditCardContext,
+  FormGroupCreditCardProvider,
+  InputFieldsStack,
+  NameFields,
+  NameFormControl,
+  NameLabels,
+  NameWithFormControl,
+  isCreditCardInput,
+  unmask,
+  useCreditCardCvvFormControl,
+  useCreditCardFormControl,
+  useCreditCardNumberFormControl,
+  useFormGroupWithCreditCardInput,
+  useFormStorage,
+  validateCreditCardInputs
+};
+//# sourceMappingURL=index.mjs.map