@xyo-network/react-form-credit-card 2.81.2

package/dist/node/index.js

@@ -0,0 +1,824 @@
+// 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, "");
+}
+
+// src/controls/CreditCardCvv.ts
+var CONTROL_NAME = "cvv";
+var CreditCardCvvFormControl = class extends FormControlBase {
+  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 {
+  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");
+  }
+  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 {
+  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 == null ? void 0 : 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 = () => {
+  };
+  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 {
+  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 {
+  constructor(nameLabel, autoCompleteLabel, placeHolder) {
+    super();
+    this.nameLabel = nameLabel;
+    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
+    };
+  }
+  required = true;
+  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 {
+  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 { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var FormControlTextField = forwardRef(
+  ({ formControl, formControlError, fieldLabel = "", ...props }, ref) => {
+    const { name } = (formControl == null ? void 0 : formControl.props) ?? {};
+    const handleChange = (event) => {
+      formControl == null ? void 0 : formControl.setValue(event.target.value);
+    };
+    const handleBlur = (event) => {
+      var _a;
+      (_a = formControl == null ? void 0 : formControl.blurError) == null ? void 0 : _a.call(formControl, event.target.value);
+      formControl == null ? void 0 : formControl.setTouched(true);
+    };
+    return /* @__PURE__ */ jsx(MuiFormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(LabeledTextFieldWrapper, { label: fieldLabel, children: /* @__PURE__ */ jsx("label", { htmlFor: name, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        error: !!formControlError,
+        helperText: formControlError || " ",
+        fullWidth: true,
+        hiddenLabel: true,
+        name,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown: (event) => {
+          const selectionEnd = event.target.selectionEnd;
+          if (selectionEnd && formControl) {
+            formControl.cursorPosition.previous = selectionEnd;
+          }
+        },
+        ref,
+        required: formControl == null ? void 0 : formControl.required,
+        size: "small",
+        variant: "filled",
+        ...props
+      }
+    ) }) }) });
+  }
+);
+FormControlTextField.displayName = "FormControlTextField";
+
+// src/components/controls/card/cvv/use.tsx
+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 { useMemo } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormGroupCreditCardProvider = ({ children, params, ...props }) => {
+  const formGroup = useMemo(() => {
+    const formGroup2 = new FormGroup(params);
+    return formGroup2;
+  }, [params]);
+  return /* @__PURE__ */ jsx2(FormGroupCreditCardContext.Provider, { value: { formGroup, provided: true }, ...props, children });
+};
+
+// src/context/useFormGroupWithCreditCard.tsx
+import { useContextEx } from "@xyo-network/react-shared";
+var useFormGroupWithCreditCardInput = (required = false) => {
+  return useContextEx(FormGroupCreditCardContext, "FormGroupCreditCard", required);
+};
+
+// src/components/controls/card/useCreditCardFormControl.tsx
+import { useMemo as useMemo2, useRef, useState } from "react";
+var useCreditCardFormControl = (formControlName, Control, args = []) => {
+  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));
+      control.onCursorChange = (cursor) => {
+        if (inputRef.current && cursor) {
+          inputRef.current.setSelectionRange(cursor, cursor);
+        }
+      };
+      if (formControlName) formGroup == null ? void 0 : formGroup.registerControl(formControlName, control);
+      return control;
+    }
+  }, [Control, args, formControlName, formGroup]);
+  return { creditCardFormControl, error, inputRef, value };
+};
+
+// src/components/controls/card/cvv/use.tsx
+var useCreditCardCvvFormControl = (formControlName, cardNumberControlName = "cardNumber", control) => {
+  var _a;
+  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control);
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName);
+  const creditCardNumberFormControl = (_a = formGroup == null ? void 0 : formGroup.getControl) == null ? void 0 : _a.call(formGroup, 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 };
+};
+
+// src/components/controls/card/cvv/Cvv.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CreditCardCvvWithFormControl = ({ formControlName = "cvc", fieldLabel = "CVC", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, void 0, CreditCardCvvFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx3(
+    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
+    }
+  );
+};
+
+// src/components/controls/card/Email.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CreditCardEmailWithFormControl = ({ formControlName = "email", fieldLabel = "Email", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx4(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Expiration.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CreditCardExpirationWithFormControl = ({
+  formControlName = "expiration",
+  fieldLabel = "Expiration",
+  ...props
+}) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx5(
+    FormControlTextField,
+    {
+      inputRef,
+      formControl: creditCardFormControl,
+      fieldLabel,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck },
+      value,
+      ...expirationProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Name.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var NameWithFormControl = ({
+  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 == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx6(
+    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
+    }
+  );
+};
+
+// src/components/controls/card/number/Number.tsx
+import { InputAdornment } from "@mui/material";
+
+// src/components/img/index.ts
+import { default as default2 } from "./american-express-TTLTB43R.svg";
+import { default as default3 } from "./discover-6CUKUO43.svg";
+import { default as default4 } from "./mastercard-XKS2A7C5.svg";
+import { default as default5 } from "./visa-NRR5YBLP.svg";
+
+// src/components/controls/card/Options.ts
+var CreditCardData = {
+  amex: { icon: default2, name: "American Express" },
+  discover: { icon: default3, name: "Discover" },
+  mastercard: { icon: default4, name: "Mastercard" },
+  visa: { icon: default5, name: "Visa" }
+};
+
+// src/components/controls/card/number/use.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+var useCreditCardNumberFormControl = (formControlName, control) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control);
+  const [type, setType] = useState2("");
+  useEffect2(() => {
+    if (creditCardFormControl) {
+      const castInstance = creditCardFormControl;
+      if (!castInstance.onCreditCardTypeChange) {
+        console.error("cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl");
+        return;
+      }
+      castInstance.onCreditCardTypeChange = (type2) => setType(type2);
+    }
+  }, [creditCardFormControl, inputRef]);
+  return { creditCardFormControl, error, inputRef, type, value };
+};
+
+// src/components/controls/card/number/Number.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var CreditCardNumberWithFormControl = ({
+  fieldLabel = "Card Number",
+  formControlName = "cardNumber",
+  ...props
+}) => {
+  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx7(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputRef,
+      inputMode,
+      inputProps: { "aria-label": fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck },
+      InputProps: {
+        startAdornment: type.length > 0 ? /* @__PURE__ */ jsx7(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx7("img", { height: "30px", width: "40px", src: CreditCardData[type].icon }) }) : null
+      },
+      value,
+      ...cardProps,
+      ...props
+    }
+  );
+};
+
+// src/components/controls/card/Zip.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CreditCardZipWithFormControl = ({ formControlName = "zip", fieldLabel = "Zip", ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl);
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = (creditCardFormControl == null ? void 0 : creditCardFormControl.props) ?? {};
+  return /* @__PURE__ */ jsx8(
+    FormControlTextField,
+    {
+      fieldLabel,
+      formControl: creditCardFormControl,
+      formControlError: error,
+      inputMode,
+      inputProps: { "aria-label": `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck },
+      inputRef,
+      value,
+      ...cvcProps,
+      ...props
+    }
+  );
+};
+
+// 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";
+
+// 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 = (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, () => "email 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: assertEx3(values.timestamp, () => "timestamp is not a number"),
+    zip: assertEx3(values.zip, () => "zip is not a string")
+  };
+};
+
+// src/components/form/InputFieldsStack.tsx
+import { Stack } from "@mui/material";
+import { Fragment, jsx as jsx9, jsxs } from "react/jsx-runtime";
+var InputFieldsStack = (props) => {
+  const { sx } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ jsx9(NameWithFormControl, { autoCompleteLabel: "given-name", fieldLabel: "First", formControlName: "firstName", placeholder: "Jerry" }),
+      /* @__PURE__ */ jsx9(NameWithFormControl, { autoCompleteLabel: "family-name", fieldLabel: "Last", formControlName: "lastName", placeholder: "Smith" })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, sx: { flexDirection: { lg: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ jsx9(Stack, { width: { lg: "50%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardNumberWithFormControl, {}) }),
+      /* @__PURE__ */ jsxs(Stack, { direction: { lg: "row", xs: "column" }, gap: 2, width: { lg: "50%", xs: "100%" }, children: [
+        /* @__PURE__ */ jsx9(CreditCardCvvWithFormControl, {}),
+        /* @__PURE__ */ jsx9(CreditCardExpirationWithFormControl, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, sx: { flexDirection: { md: "row", xs: "column" }, ...sx }, ...props, children: [
+      /* @__PURE__ */ jsx9(Stack, { width: { md: "25%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardZipWithFormControl, {}) }),
+      /* @__PURE__ */ jsx9(Stack, { width: { md: "75%", xs: "100%" }, children: /* @__PURE__ */ jsx9(CreditCardEmailWithFormControl, {}) })
+    ] })
+  ] });
+};
+
+// 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 = (months = 6) => {
+  const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+  const DAYS_PER_MONTH = 30.44;
+  return months * DAYS_PER_MONTH * MS_PER_DAY;
+};
+var useFormStorage = () => {
+  return usePromise(async () => {
+    const localStorageArchivist = await StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: "local" }
+    });
+    const sessionStorageArchivist = await StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: "session" }
+    });
+    const storage = {
+      sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),
+      storage: new ArchivistFormGroupStorage(localStorageArchivist)
+    };
+    return { serialize: true, storage, ttlStorage: calculateTTL() };
+  }, []);
+};
+
+// src/components/form/Form.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var CreditCardFormFlexbox = ({
+  ConfirmationButton,
+  onFailedSubmit,
+  onSuccessfulSubmit,
+  onValidSubmit,
+  ...props
+}) => {
+  const { formGroup } = useFormGroupWithCreditCardInput(true);
+  const handleConfirmPayment = async () => {
+    if (!formGroup) {
+      console.error("formGroup is not defined");
+      return;
+    }
+    formGroup.validateFields();
+    const errorSummary = formGroup.errorSummary;
+    if (errorSummary.invalidFields.length > 0) {
+      onFailedSubmit == null ? void 0 : onFailedSubmit(errorSummary);
+    }
+    if (errorSummary.invalidFields.length > 0) return;
+    const formOutput = validateCreditCardInputs(formGroup.values);
+    await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
+    onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
+  };
+  return /* @__PURE__ */ jsx10(FlexCol, { sx: { flexDirection: { md: "row", xs: "column" } }, width: "100%", gap: 2, ...props, children: /* @__PURE__ */ jsxs2(Stack2, { flexDirection: "column", sx: { width: "100%" }, gap: 2, children: [
+    /* @__PURE__ */ jsx10(InputFieldsStack, {}),
+    ConfirmationButton ? /* @__PURE__ */ jsx10(ConfirmationButton, { onClick: handleConfirmPayment, variant: "contained", sx: { alignSelf: "end" }, children: "Confirm Payment" }) : null
+  ] }) });
+};
+var CreditCardFormFlexboxWithFormGroupProvider = (props) => {
+  const [params, error] = useFormStorage();
+  return /* @__PURE__ */ jsxs2(FormGroupCreditCardProvider, { params, children: [
+    /* @__PURE__ */ jsx10(ErrorRender, { error }),
+    /* @__PURE__ */ jsx10(CreditCardFormFlexbox, { ...props })
+  ] });
+};
+export {
+  default2 as AmexIcon,
+  CreditCardCvvFormControl,
+  CreditCardCvvWithFormControl,
+  CreditCardData,
+  CreditCardEmailFormControl,
+  CreditCardEmailWithFormControl,
+  CreditCardExpirationFormControl,
+  CreditCardExpirationWithFormControl,
+  CreditCardFormFlexbox,
+  CreditCardFormFlexboxWithFormGroupProvider,
+  CreditCardInputSchema,
+  CreditCardNumberFormControl,
+  CreditCardNumberWithFormControl,
+  CreditCardZipFormControl,
+  CreditCardZipWithFormControl,
+  default3 as DiscoverIcon,
+  FormControlTextField,
+  FormGroupCreditCardContext,
+  FormGroupCreditCardProvider,
+  default4 as MastercardIcon,
+  NameFields,
+  NameFormControl,
+  NameLabels,
+  NameWithFormControl,
+  default5 as VisaIcon,
+  isCreditCardInput,
+  unmask,
+  useCreditCardCvvFormControl,
+  useCreditCardFormControl,
+  useCreditCardNumberFormControl,
+  useFormGroupWithCreditCardInput,
+  validateCreditCardInputs
+};
+//# sourceMappingURL=index.js.map