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

package/dist/node/index.js

@@ -1,848 +0,0 @@
-// 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");
-  }
-  // 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 {
-  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 StableDefaultArgs = [];
-var useCreditCardFormControl = (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 == 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 = "emailAddress",
-  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 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 };
-};
-
-// 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";
-import { 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 = (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")
-  };
-};
-
-// 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({
-      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() };
-  }, []);
-};
-
-// src/components/form/Form.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-var CreditCardFormFlexbox = ({
-  ConfirmationButton,
-  displayErrors,
-  onErrorDuringSubmit,
-  onInvalidSubmit,
-  onSuccessfulSubmit,
-  onValidSubmit,
-  ...props
-}) => {
-  const { formGroup } = useFormGroupWithCreditCardInput(true);
-  const [error, setError] = useState3();
-  const handleConfirmPayment = async () => {
-    try {
-      if (!formGroup) {
-        throw new Error("formGroup is not defined");
-      }
-      formGroup.validateFields();
-      const errorSummary = formGroup.errorSummary;
-      if (errorSummary.invalidFields.length > 0) {
-        onInvalidSubmit == null ? void 0 : onInvalidSubmit(errorSummary);
-      }
-      if (errorSummary.invalidFields.length > 0) return;
-      const formOutput = validateCreditCardInputs(formGroup.values);
-      await (onValidSubmit == null ? void 0 : onValidSubmit(formOutput));
-      onSuccessfulSubmit == null ? void 0 : onSuccessfulSubmit();
-    } catch (error2) {
-      onErrorDuringSubmit == null ? void 0 : onErrorDuringSubmit(error2);
-      if (displayErrors) setError(error2);
-    }
-  };
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx10(ErrorRender, { error }),
-    /* @__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,
-  InputFieldsStack,
-  default4 as MastercardIcon,
-  NameFields,
-  NameFormControl,
-  NameLabels,
-  NameWithFormControl,
-  default5 as VisaIcon,
-  isCreditCardInput,
-  unmask,
-  useCreditCardCvvFormControl,
-  useCreditCardFormControl,
-  useCreditCardNumberFormControl,
-  useFormGroupWithCreditCardInput,
-  useFormStorage,
-  validateCreditCardInputs
-};
-//# sourceMappingURL=index.js.map