npm - @xyo-network/react-form-credit-card - Versions diffs - 2.81.10 → 2.83.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (839) hide show

package/dist/browser/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/controls/card/cvv/Cvv.tsx","../../src/controls/CreditCardCvv.ts","../../src/utils/umask.ts","../../src/controls/CreditCardExpiry.ts","../../src/controls/CreditCardNumber.ts","../../src/controls/Email.ts","../../src/controls/Name.ts","../../src/controls/Zip.ts","../../src/components/controls/card/FormControlTextField.tsx","../../src/components/controls/card/cvv/use.ts","../../src/context/FormGroupCreditCardContext.ts","../../src/context/FormGroupCreditCardProvider.tsx","../../src/context/useFormGroupWithCreditCard.tsx","../../src/components/controls/card/useCreditCardFormControl.tsx","../../src/components/controls/card/Email.tsx","../../src/components/controls/card/Expiration.tsx","../../src/components/controls/card/Name.tsx","../../src/components/controls/card/number/Number.tsx","../../src/components/img/american-express.svg","../../src/components/img/discover.svg","../../src/components/img/mastercard.svg","../../src/components/img/visa.svg","../../src/components/controls/card/Options.ts","../../src/components/controls/card/number/use.ts","../../src/components/controls/card/Zip.tsx","../../src/components/form/Form.tsx","../../src/components/support/Fields.ts","../../src/components/support/validateCreditCardInputs.ts","../../src/models/CreditCardInput.ts","../../src/components/form/InputFieldsStack.tsx","../../src/components/form/useFormStorage.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { useCreditCardCvvFormControl } from './use.ts'\n\nexport const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {\n const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n return (\n <FormControlTextField\n fieldLabel={fieldLabel}\n formControl={creditCardFormControl}\n formControlError={error}\n inputMode={inputMode}\n inputProps={{ 'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n inputRef={inputRef}\n value={value}\n {...cvcProps}\n {...props}\n />\n )\n}\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\n\nconst CONTROL_NAME = 'cvv'\n\nexport class CreditCardCvvFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n override invalidMessage = 'Your card cvc is invalid.'\n\n override pattern = /^\\d{0,4}$/\n override patternStrict = /^\\d{1,4}$/\n\n override props = {\n autoComplete: 'cc-csc',\n autoCorrect: 'off',\n id: CONTROL_NAME,\n inputMode: 'numeric',\n name: CONTROL_NAME,\n placeholder: 'CVC',\n spellCheck: false,\n } as TProps\n\n override required = true\n\n override unmask = unmask\n\n private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n constructor() {\n super()\n super.setName(CONTROL_NAME)\n this.setSerializeSettings({ sensitive: true, serializable: true })\n }\n\n get cardNumberFormControl() {\n return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n }\n\n override blurError(value: string) {\n const num = this.cardNumberFormControl.value\n const max = this.getCardNumberCvcMax(num)\n const cvvValidation = valid.cvv(value, max)\n if (cvvValidation.isValid) {\n this.setError('')\n this.setStatus('VALID')\n } else {\n this.setError(this.invalidMessage)\n this.setStatus('INVALID')\n }\n }\n\n override changeError(value: string) {\n const unmasked = this.unmask(value)\n const match = unmasked.match(this.patternStrict)\n if (match) {\n const num = this.cardNumberFormControl.value\n const max = this.getCardNumberCvcMax(num)\n const cvvValidation = valid.cvv(value, max)\n if (cvvValidation.isPotentiallyValid) {\n this.setError('')\n this.setStatus('VALID')\n } else {\n this.setError('Your card cvc is invalid.')\n this.setStatus('INVALID')\n }\n } else {\n this.setError(this.invalidMessage)\n this.setStatus('INVALID')\n }\n }\n\n setCardNumberFormControl(cardNumberFormControl: AbstractControl) {\n this._cardNumberFormControl = cardNumberFormControl\n }\n\n private getCardNumberCvcMax(num?: string) {\n if (!num) return 3\n const numberValidation = valid.number(num)\n return numberValidation.card ? numberValidation.card.code.size : 3\n }\n}\n","export function unmask(value: string) {\n return value.replaceAll(/\\D/g, '')\n}\n","import { assertEx } from '@xylabs/assert'\nimport { EmptyObject } from '@xylabs/object'\nimport { AbstractControl, FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\n\nconst CONTROL_NAME = 'expiration'\n\nexport class CreditCardExpirationFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase {\n override invalidMessage = 'Card Expiration is invalid'\n\n override pattern = /^\\d{0,4}$/\n override patternStrict = /^\\d{1,4}$/\n\n override props = {\n autoComplete: 'cc-exp',\n autoCorrect: 'off',\n id: CONTROL_NAME,\n inputMode: 'numeric',\n name: CONTROL_NAME,\n placeholder: 'MM / YY',\n spellCheck: false,\n } as TProps\n\n override required = true\n\n override unmask = unmask\n\n private _cardNumberFormControl: AbstractControl | undefined = undefined\n\n constructor() {\n super()\n super.setName(CONTROL_NAME)\n this.setSerializeSettings({ sensitive: true, serializable: true })\n }\n\n get cardNumberFormControl() {\n return assertEx(this._cardNumberFormControl, () => 'Card number form control is not set')\n }\n\n // make it so the raw value is the same to preserve the / separator in the value\n override get rawValue() {\n return this.value\n }\n\n override blurError(value: string) {\n const unmasked = unmask(value)\n const expirationValid = valid.expirationDate(unmasked)\n if (!unmasked || (unmasked && unmasked.length !== 4)) {\n this.setErrorAndValidity('Your card expiration is incomplete.', 'INVALID')\n } else if (expirationValid.isValid) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n }\n }\n\n override changeError(value: string) {\n const unmasked = this.unmask(value)\n const expirationValid = valid.expirationDate(unmasked)\n if (expirationValid.isPotentiallyValid) {\n this.setErrorAndValidity('', 'VALID')\n } else if (expirationValid.isValid) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(\"Your card's expiration year is in the past.\", 'INVALID')\n }\n }\n\n override mask(value: string) {\n if (/^[2-9]/.test(unmask(value))) {\n return this.makeMask(' / ', 2)(`0${value}`)\n }\n return this.makeMask(' / ', 2)(value)\n }\n\n private makeMask(separator: string, limit: number) {\n return (value: string) => {\n const output: string[] = []\n // eslint-disable-next-line unicorn/no-for-loop\n for (let i = 0; i < value.length; i++) {\n if (i !== 0 && i % limit === 0) {\n output.push(separator)\n }\n\n output.push(value[i])\n }\n\n return output.join('')\n }\n }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase, SetOptions, ValidControlValue } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\n\nconst CONTROL_NAME = 'cardNumber2'\n\nexport class CreditCardNumberFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n creditCardType: string = ''\n\n override invalidMessage = 'Card Number is invalid'\n\n override pattern = /^(\\d+)?$/\n override patternStrict = /^\\d+$/\n\n override props = {\n autoComplete: 'cc-number',\n autoCorrect: 'off',\n id: CONTROL_NAME,\n inputMode: 'numeric',\n name: CONTROL_NAME,\n placeholder: '1234 1234 1234 1234',\n spellCheck: false,\n } as TProps\n\n override required = true\n\n override unmask = unmask\n\n constructor() {\n super()\n super.setName(CONTROL_NAME)\n this.setSerializeSettings({ sensitive: true, serializable: true })\n }\n\n override blurError(value: string) {\n const unmasked = unmask(value)\n const numberValidation = valid.number(unmasked)\n if (!numberValidation.isValid) {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n return\n }\n this.setErrorAndValidity('', 'VALID')\n }\n\n override changeError(value: string) {\n const unmasked = unmask(value)\n const match = unmasked.match(this.patternStrict)\n if (match) {\n const numberValidation = valid.number(unmasked)\n if (!numberValidation.isPotentiallyValid) {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n return\n }\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n }\n }\n\n earlyNumberCheck(number: string) {\n switch (number) {\n case '4': {\n this.setCreditCardType('visa')\n break\n }\n case '5': {\n this.setCreditCardType('mastercard')\n break\n }\n case '3': {\n this.setCreditCardType('amex')\n break\n }\n case '6': {\n this.setCreditCardType('discover')\n break\n }\n default: {\n this.setCreditCardType('')\n }\n }\n }\n\n override getCursorPosition() {\n if (this.value) {\n const previousValue = this.previousValue ?? ''\n const unmasked = unmask(this.value)\n const numberValidation = valid.number(unmasked)\n const card = numberValidation.card\n const lengthChange = this.value.length - (previousValue?.length ?? 0)\n const unmaskedChange = unmask(this.value).length - unmask(previousValue).length\n\n if (card) {\n const gaps = card.gaps\n const oldCursor = this.cursorPosition.previous ?? 0\n const oldSeparation = gaps.filter((gap, i) => gap + i < oldCursor).length\n const newSeparation = gaps.filter((gap, i) => gap + i < oldCursor + lengthChange).length\n const newCursor = oldCursor - oldSeparation + newSeparation + unmaskedChange\n return newCursor\n }\n }\n\n return\n }\n\n override mask(value: ValidControlValue = '') {\n const unmasked = unmask(value)\n const numberValidation = valid.number(unmasked)\n const card = numberValidation.card\n\n if (card) {\n const max = card.lengths.includes(16) ? 16 : card.lengths[0]\n const gaps = [...card.gaps, max]\n const newVal = gaps\n .map((gap, i) => unmasked.slice(gaps[i - 1] || 0, gap))\n .filter(Boolean)\n .join(' ')\n\n return newVal\n }\n\n return value\n }\n\n onCreditCardTypeChange: (type: string) => void = () => {}\n\n setCreditCardType(type: string) {\n this.creditCardType = type\n this.onCreditCardTypeChange(type)\n }\n\n override setValue(value = '', options: SetOptions) {\n const umMasked = this.unmask(value)\n super.setValue(umMasked, options)\n this.earlyNumberCheck(umMasked.charAt(0))\n }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nconst CONTROL_NAME = 'Email'\n\nexport class CreditCardEmailFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n override invalidMessage = 'Your email is invalid.'\n\n override pattern = /^.*$/\n override patternStrict = /^([\\w+.\\-])+@(([\\dA-Za-z-])+\\.)+([\\dA-Za-z]{2,4})+$/\n\n override props = {\n autoComplete: 'email',\n autoCorrect: 'off',\n id: CONTROL_NAME.toLocaleLowerCase(),\n name: CONTROL_NAME.toLocaleLowerCase(),\n placeholder: 'jerry.smith@email.com',\n spellCheck: false,\n } as TProps\n\n override required = true\n\n constructor() {\n super()\n super.setName(CONTROL_NAME)\n this.setSerializeSettings({ sensitive: false, serializable: true })\n }\n\n override blurError(value: string) {\n const match = value.match(this.patternStrict)\n this.updateValidation(match)\n }\n\n override changeError(value: string) {\n if (this.error) {\n this.blurError(value)\n }\n }\n\n private updateValidation(match: RegExpMatchArray | null) {\n if (match) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n }\n }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\n\nexport class NameFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n override required = true\n\n constructor(\n private nameLabel: string,\n autoCompleteLabel: string,\n placeHolder: string,\n ) {\n super()\n super.setName(nameLabel)\n this.setSerializeSettings({ sensitive: false, serializable: true })\n this.invalidMessage = `${nameLabel} name is missing.`\n this.props = {\n autoComplete: autoCompleteLabel,\n autoCorrect: 'off',\n id: this.nameLabel,\n name: this.nameLabel,\n placeholder: placeHolder,\n spellCheck: false,\n } as TProps\n }\n\n override blurError(value: string) {\n if (value) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n }\n }\n\n override changeError(value: string): void {\n this.blurError(value)\n }\n}\n","import { EmptyObject } from '@xylabs/object'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport valid from 'card-validator'\n\nimport { unmask } from '../utils/index.ts'\n\nconst CONTROL_NAME = 'Zip'\n\nexport class CreditCardZipFormControl<TProps extends EmptyObject = EmptyObject> extends FormControlBase<TProps> {\n override invalidMessage = 'Your zip code is invalid.'\n\n override props = {\n autoComplete: 'postal-code',\n autoCorrect: 'off',\n id: CONTROL_NAME.toLocaleLowerCase(),\n name: CONTROL_NAME.toLocaleLowerCase(),\n placeholder: '12345',\n spellCheck: false,\n } as TProps\n\n override required = true\n\n override unmask = unmask\n\n constructor() {\n super()\n super.setName(CONTROL_NAME)\n this.setSerializeSettings({ sensitive: true, serializable: true })\n }\n\n override blurError(value: string) {\n const postalCodeValidation = valid.postalCode(value)\n if (postalCodeValidation.isValid) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n }\n }\n\n override changeError(value: string) {\n const unmasked = this.unmask(value)\n const match = unmasked.match(this.patternStrict)\n if (match) {\n const postalCodeValidation = valid.postalCode(value)\n if (postalCodeValidation.isPotentiallyValid) {\n this.setErrorAndValidity('', 'VALID')\n } else {\n this.setErrorAndValidity('Your zip code is invalid.', 'INVALID')\n }\n } else {\n this.setErrorAndValidity(this.invalidMessage, 'INVALID')\n }\n }\n}\n","import { FormControl as MuiFormControl, StandardTextFieldProps, TextField } from '@mui/material'\nimport { FormControl } from '@xyo-network/react-form-group'\nimport { LabeledTextFieldWrapper } from '@xyo-network/react-shared'\nimport React, { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'\n\nexport interface FormControlTextFieldProps extends StandardTextFieldProps {\n fieldLabel: string\n formControl?: FormControl<StandardTextFieldProps>\n formControlError?: string\n}\n\nexport const FormControlTextField = forwardRef<HTMLDivElement, FormControlTextFieldProps>(\n ({ formControl, formControlError, fieldLabel = '', ...props }, ref) => {\n const { name } = formControl?.props ?? {}\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n formControl?.setValue(event.target.value)\n }\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n formControl?.blurError?.(event.target.value)\n formControl?.setTouched(true)\n }\n\n return (\n <MuiFormControl fullWidth>\n <LabeledTextFieldWrapper label={fieldLabel}>\n <label htmlFor={name}>\n <TextField\n error={!!formControlError}\n helperText={formControlError || ' '}\n fullWidth\n hiddenLabel\n name={name}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {\n // See - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n // .currentTarget is the div in mui that emits the event, .target is the input element\n // Unfortunately, the type definitions do not let you pass a generic specifically for target, only currentTarget\n const selectionEnd = (event.target as HTMLInputElement).selectionEnd\n if (selectionEnd && formControl) {\n formControl.cursorPosition.previous = selectionEnd\n }\n }}\n ref={ref}\n required={formControl?.required}\n size=\"small\"\n variant=\"filled\"\n {...props}\n />\n </label>\n </LabeledTextFieldWrapper>\n </MuiFormControl>\n )\n },\n)\n\nFormControlTextField.displayName = 'FormControlTextField'\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../../context/index.ts'\nimport { CreditCardCvvFormControl } from '../../../../controls/index.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\n\nexport const useCreditCardCvvFormControl = (\n formControlName?: string,\n cardNumberControlName = 'cardNumber',\n control?: new () => FormControlBase<StandardTextFieldProps>,\n) => {\n const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control)\n\n // only use FormGroupContext when name is passed\n const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName)\n\n useEffect(() => {\n if (creditCardNumberFormControl) {\n const castControl = creditCardFormControl as CreditCardCvvFormControl\n if (!castControl.setCardNumberFormControl) {\n console.error('cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl')\n return\n }\n castControl.setCardNumberFormControl(creditCardNumberFormControl)\n }\n }, [creditCardFormControl, creditCardNumberFormControl])\n\n return { creditCardFormControl, error, inputRef, value }\n}\n","import { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'\nimport { createContextEx } from '@xyo-network/react-shared'\n\nimport { CreditCardInput } from '../models/index.ts'\n\nexport const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()\n","import { Payload } from '@xyo-network/payload-model'\nimport { FormGroup, FormGroupParams } from '@xyo-network/react-form-group'\nimport React, { PropsWithChildren, useMemo } from 'react'\n\nimport { CreditCardInput } from '../models/index.ts'\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.ts'\n\nexport interface FormGroupCreditCardProviderProps<TStorage extends Payload = Payload> extends PropsWithChildren {\n params?: FormGroupParams<TStorage>\n}\n\nexport const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({ children, params, ...props }) => {\n const formGroup = useMemo(() => {\n const formGroup = new FormGroup<CreditCardInput, CreditCardInput>(params)\n return formGroup\n }, [params])\n\n return (\n // eslint-disable-next-line @eslint-react/no-unstable-context-value\n <FormGroupCreditCardContext.Provider value={{ formGroup, provided: true }} {...props}>\n {children}\n </FormGroupCreditCardContext.Provider>\n )\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { FormGroupCreditCardContext } from './FormGroupCreditCardContext.ts'\n\nexport const useFormGroupWithCreditCardInput = (required = false) => {\n return useContextEx(FormGroupCreditCardContext, 'FormGroupCreditCard', required)\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'\nimport { useMemo, useRef, useState } from 'react'\n\nimport { useFormGroupWithCreditCardInput } from '../../../context/index.ts'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StableDefaultArgs: any[] = []\n\nexport const useCreditCardFormControl = (\n formControlName?: string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n args: any[] = StableDefaultArgs,\n) => {\n const [error, setError] = useState('')\n const [value, setValue] = useState<ValidControlValue>('')\n const inputRef = useRef<HTMLInputElement>(null)\n\n // only use FormGroupContext when name is passed\n const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)\n\n const creditCardFormControl = useMemo(() => {\n if (Control) {\n const control = new Control(...args)\n control.registerOnErrorChange((newError: string) => setError(newError))\n control.registerOnChange((value: ValidControlValue) => setValue(value))\n\n if (formControlName) formGroup?.registerControl(formControlName, control)\n return control\n }\n }, [Control, args, formControlName, formGroup])\n\n return { creditCardFormControl, error, inputRef, value }\n}\n","import React from 'react'\n\nimport { CreditCardEmailFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\n\nexport const CreditCardEmailWithFormControl: React.FC<WithFormControlProps> = ({\n formControlName = 'emailAddress',\n fieldLabel = 'Email',\n ...props\n}) => {\n const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n return (\n <FormControlTextField\n fieldLabel={fieldLabel}\n formControl={creditCardFormControl}\n formControlError={error}\n inputMode={inputMode}\n inputProps={{ 'aria-label': `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck }}\n inputRef={inputRef}\n value={value}\n {...cvcProps}\n {...props}\n />\n )\n}\n","import React from 'react'\n\nimport { CreditCardExpirationFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\n\nexport const CreditCardExpirationWithFormControl: React.FC<WithFormControlProps> = ({\n formControlName = 'expiration',\n fieldLabel = 'Expiration',\n ...props\n}) => {\n const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps } = creditCardFormControl?.props ?? {}\n\n return (\n <FormControlTextField\n inputRef={inputRef}\n formControl={creditCardFormControl}\n fieldLabel={fieldLabel}\n formControlError={error}\n inputMode={inputMode}\n inputProps={{ 'aria-label': `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck }}\n value={value}\n {...expirationProps}\n {...props}\n />\n )\n}\n","import React, { useMemo } from 'react'\n\nimport { NameFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\n\nexport interface NameWithFormControlProps extends WithFormControlProps {\n autoCompleteLabel: string\n}\n\nexport const NameWithFormControl: React.FC<NameWithFormControlProps> = ({\n autoCompleteLabel,\n fieldLabel = 'Name',\n formControlName,\n placeholder,\n tabIndex,\n ...props\n}) => {\n const args = useMemo(() => [fieldLabel, autoCompleteLabel, placeholder ?? ''], [autoCompleteLabel, fieldLabel, placeholder])\n const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, NameFormControl, args)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n return (\n <FormControlTextField\n fieldLabel={fieldLabel}\n formControl={creditCardFormControl}\n formControlError={error}\n inputMode={inputMode}\n inputProps={{ 'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex }}\n inputRef={inputRef}\n value={value}\n {...cvcProps}\n {...props}\n />\n )\n}\n","import { InputAdornment } from '@mui/material'\nimport React from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.ts'\nimport { WithFormControlProps } from '../../WithFormControlProps.ts'\nimport { FormControlTextField } from '../FormControlTextField.tsx'\nimport { CreditCardData } from '../Options.ts'\nimport { useCreditCardNumberFormControl } from './use.ts'\n\nexport const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = ({\n fieldLabel = 'Card Number',\n formControlName = 'cardNumber',\n ...props\n}) => {\n const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {}\n\n return (\n <FormControlTextField\n fieldLabel={fieldLabel}\n formControl={creditCardFormControl}\n formControlError={error}\n inputRef={inputRef}\n inputMode={inputMode}\n inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}\n InputProps={{\n startAdornment:\n type.length > 0\n ? (\n <InputAdornment position=\"start\">\n <img height=\"30px\" width=\"40px\" src={CreditCardData[type].icon} />\n </InputAdornment>\n )\n : null,\n }}\n value={value}\n {...cardProps}\n {...props}\n />\n )\n}\n","import * as React from \"react\";\nconst SvgAmericanExpress = props => <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}><path style={{\n fill: \"#306FC5\"\n }} 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\" /><path style={{\n opacity: 0.15,\n fill: \"#202121\",\n enableBackground: \"new\"\n }} 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\" /><g><polygon style={{\n fill: \"#FFFFFF\"\n }} points=\"74.59,220.748 89.888,220.748 82.241,201.278 \" /><polygon style={{\n fill: \"#FFFFFF\"\n }} 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 \" /><polygon style={{\n fill: \"#FFFFFF\"\n }} points=\"356.898,201.278 348.553,220.748 364.548,220.748 \" /><polygon style={{\n fill: \"#FFFFFF\"\n }} points=\"230.348,320.875 230.348,281.241 212.268,300.712 \" /><path style={{\n fill: \"#FFFFFF\"\n }} 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\" /><path style={{\n fill: \"#FFFFFF\"\n }} 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\" /><path style={{\n fill: \"#FFFFFF\"\n }} 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\" /><path style={{\n fill: \"#FFFFFF\"\n }} 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\" /><path style={{\n fill: \"#FFFFFF\"\n }} 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\" /></g></svg>;\nexport default SvgAmericanExpress;","import * as React from \"react\";\nconst SvgDiscover = props => <svg width=\"800px\" height=\"800px\" viewBox=\"0 -140 780 780\" xmlns=\"http://www.w3.org/2000/svg\" {...props}><g fillRule=\"evenodd\"><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\" /><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\" /><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\" /></g></svg>;\nexport default SvgDiscover;","import * as React from \"react\";\nconst SvgMastercard = props => <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}><g><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\" /><rect fill=\"#FF5F00\" x={93.2980455} y={16.9034088} width={69.1502985} height={124.251009} /><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\" /><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\" /></g></svg>;\nexport default SvgMastercard;","import * as React from \"react\";\nconst SvgVisa = props => <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}><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\" /><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\" /><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\" /></svg>;\nexport default SvgVisa;","import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.ts'\n\nexport interface CreditCardInfo {\n icon: string\n name: string\n}\n\nexport interface CreditCardOptions {\n amex: CreditCardInfo\n discover: CreditCardInfo\n mastercard: CreditCardInfo\n visa: CreditCardInfo\n}\n\nexport const CreditCardData: CreditCardOptions = {\n amex: { icon: AmexIcon, name: 'American Express' },\n discover: { icon: DiscoverIcon, name: 'Discover' },\n mastercard: { icon: MastercardIcon, name: 'Mastercard' },\n visa: { icon: VisaIcon, name: 'Visa' },\n}\n","import { StandardTextFieldProps } from '@mui/material'\nimport { FormControlBase } from '@xyo-network/react-form-group'\nimport { useEffect, useState } from 'react'\n\nimport { CreditCardNumberFormControl } from '../../../../controls/index.ts'\nimport { CreditCardOptions } from '../Options.ts'\nimport { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'\n\nexport const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {\n const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)\n const [type, setType] = useState('' as keyof CreditCardOptions)\n\n useEffect(() => {\n if (creditCardFormControl) {\n const castControl = creditCardFormControl as CreditCardNumberFormControl<StandardTextFieldProps>\n if (!castControl.onCreditCardTypeChange) {\n console.error('cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl')\n return\n }\n castControl.onCreditCardTypeChange = (type: string) => setType(type as keyof CreditCardOptions)\n castControl.onCursorChange = (cursor: number | undefined) => {\n if (inputRef.current && cursor) {\n inputRef.current.setSelectionRange(cursor, cursor)\n }\n }\n }\n }, [creditCardFormControl, inputRef])\n\n return { creditCardFormControl, error, inputRef, type, value }\n}\n","import React from 'react'\n\nimport { CreditCardZipFormControl } from '../../../controls/index.ts'\nimport { WithFormControlProps } from '../WithFormControlProps.ts'\nimport { FormControlTextField } from './FormControlTextField.tsx'\nimport { useCreditCardFormControl } from './useCreditCardFormControl.tsx'\n\nexport const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'zip', fieldLabel = 'Zip', ...props }) => {\n const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)\n const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}\n\n return (\n <FormControlTextField\n fieldLabel={fieldLabel}\n formControl={creditCardFormControl}\n formControlError={error}\n inputMode={inputMode}\n inputProps={{ 'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck }}\n inputRef={inputRef}\n value={value}\n {...cvcProps}\n {...props}\n />\n )\n}\n","import { Stack } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { ErrorRender } from '@xyo-network/react-error'\nimport React, { useState } from 'react'\n\nimport { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.ts'\nimport { validateCreditCardInputs } from '../support/index.ts'\nimport { InputFieldsStack } from './InputFieldsStack.tsx'\nimport { CreditCardFormProps } from './Props.ts'\nimport { useFormStorage } from './useFormStorage.tsx'\n\nexport const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({\n ConfirmationButton,\n displayErrors,\n onErrorDuringSubmit,\n onInvalidSubmit,\n onSuccessfulSubmit,\n onValidSubmit,\n ...props\n}) => {\n const { formGroup } = useFormGroupWithCreditCardInput(true)\n const [error, setError] = useState<Error>()\n\n const handleConfirmPayment = async () => {\n try {\n if (!formGroup) {\n throw new Error('formGroup is not defined')\n }\n\n formGroup.validateFields()\n\n const errorSummary = formGroup.errorSummary\n\n if (errorSummary.invalidFields.length > 0) {\n onInvalidSubmit?.(errorSummary)\n }\n\n if (errorSummary.invalidFields.length > 0) return\n\n const formOutput = validateCreditCardInputs(formGroup.values)\n\n await onValidSubmit?.(formOutput)\n\n onSuccessfulSubmit?.()\n } catch (error) {\n onErrorDuringSubmit?.(error as Error)\n if (displayErrors) setError(error as Error)\n }\n }\n\n return (\n <>\n <ErrorRender error={error} />\n <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width=\"100%\" gap={2} {...props}>\n <Stack flexDirection=\"column\" sx={{ width: '100%' }} gap={2}>\n <InputFieldsStack />\n {ConfirmationButton\n ? (\n <ConfirmationButton onClick={handleConfirmPayment} variant=\"contained\" sx={{ alignSelf: 'end' }}>\n Confirm Payment\n </ConfirmationButton>\n )\n : null}\n </Stack>\n </FlexCol>\n </>\n )\n}\n\nexport const CreditCardFormFlexboxWithFormGroupProvider: React.FC<CreditCardFormProps> = (props) => {\n const [params, error] = useFormStorage()\n return (\n <FormGroupCreditCardProvider params={params}>\n <ErrorRender error={error} />\n <CreditCardFormFlexbox {...props} />\n </FormGroupCreditCardProvider>\n )\n}\n","export const NameFields = ['firstName', 'lastName'] as const\nexport const NameLabels = ['First', 'Last'] as const\nexport type NameLabel = (typeof NameLabels)[number]\n","import { assertEx } from '@xylabs/assert'\n\nimport { CreditCardInput, CreditCardInputSchema } from '../../models/index.ts'\n\nexport const validateCreditCardInputs = (values: CreditCardInput): CreditCardInput => {\n return {\n cardNumber: assertEx(values.cardNumber, () => 'card number is not a string') as string,\n cvc: assertEx(values.cvc, () => 'card cvc is not a string') as string,\n emailAddress: assertEx(values.emailAddress, () => 'emailAddress is not a string') as string,\n expiration: assertEx(values.expiration, () => 'card expiration is not a string') as string,\n firstName: assertEx(values.firstName, () => 'first name is not a string') as string,\n lastName: assertEx(values.lastName, () => 'last name is not a string') as string,\n schema: CreditCardInputSchema,\n timestamp: values.timestamp,\n zip: assertEx(values.zip, () => 'zip is not a string') as string,\n }\n}\n","import { isPayloadOfSchemaTypeWithMeta, Payload } from '@xyo-network/payload-model'\n\nexport const CreditCardInputSchema = 'network.xyo.credit.card.input' as const\nexport type CreditCardInputSchema = typeof CreditCardInputSchema\n\nexport type CreditCardInputFields = {\n cardNumber: string\n cvc: string\n emailAddress: string\n expiration: string\n firstName: string\n lastName: string\n timestamp: number\n zip: string\n}\n\nexport type CreditCardInput = Payload<CreditCardInputFields, CreditCardInputSchema>\n\nexport const isCreditCardInput = isPayloadOfSchemaTypeWithMeta<CreditCardInput>(CreditCardInputSchema)\n","import { Stack, StackProps } from '@mui/material'\nimport React, { PropsWithChildren } from 'react'\n\nimport {\n CreditCardCvvWithFormControl,\n CreditCardEmailWithFormControl,\n CreditCardExpirationWithFormControl,\n CreditCardNumberWithFormControl,\n CreditCardZipWithFormControl,\n NameWithFormControl,\n} from '../controls/index.ts'\n\nexport interface InputFieldsStackProps extends StackProps, PropsWithChildren {}\n\nexport const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {\n const { sx } = props\n return (\n <>\n <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n <NameWithFormControl autoCompleteLabel=\"given-name\" fieldLabel=\"First\" formControlName=\"firstName\" placeholder=\"Jerry\" />\n <NameWithFormControl autoCompleteLabel=\"family-name\" fieldLabel=\"Last\" formControlName=\"lastName\" placeholder=\"Smith\" />\n </Stack>\n <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>\n <Stack width={{ lg: '50%', xs: '100%' }}>\n <CreditCardNumberWithFormControl />\n </Stack>\n <Stack direction={{ lg: 'row', xs: 'column' }} gap={2} width={{ lg: '50%', xs: '100%' }}>\n <CreditCardCvvWithFormControl />\n <CreditCardExpirationWithFormControl />\n </Stack>\n </Stack>\n <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>\n <Stack width={{ md: '25%', xs: '100%' }}>\n <CreditCardZipWithFormControl />\n </Stack>\n <Stack width={{ md: '75%', xs: '100%' }}>\n <CreditCardEmailWithFormControl />\n </Stack>\n </Stack>\n </>\n )\n}\n","import { usePromise } from '@xylabs/react-promise'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\nimport { ArchivistFormGroupStorage, FormGroupParams } from '@xyo-network/react-form-group'\n\nimport { CreditCardInput } from '../../models/index.ts'\n\nconst StorageNameSpace = 'credit-card-fields'\n\nconst calculateTTL = (months = 6) => {\n const MS_PER_DAY = 24 * 60 * 60 * 1000\n const DAYS_PER_MONTH = 30.44\n return months * DAYS_PER_MONTH * MS_PER_DAY\n}\n\nexport const useFormStorage = () => {\n return usePromise(async () => {\n const localStorageArchivist = await StorageArchivist.create({\n account: 'random',\n config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },\n })\n const sessionStorageArchivist = await StorageArchivist.create({\n account: 'random',\n config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'session' },\n })\n\n const storage = {\n sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),\n storage: new ArchivistFormGroupStorage(localStorageArchivist),\n }\n\n return { serialize: true, storage, ttlStorage: calculateTTL() } as FormGroupParams<CreditCardInput>\n }, [])\n}\n"],"mappings":"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","names":["React","assertEx","FormControlBase","valid","unmask","value","replaceAll","CONTROL_NAME","CreditCardCvvFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","blurError","value","num","max","getCardNumberCvcMax","cvvValidation","valid","cvv","isValid","setError","setStatus","changeError","unmasked","match","isPotentiallyValid","setCardNumberFormControl","numberValidation","number","card","code","size","assertEx","FormControlBase","valid","CONTROL_NAME","CreditCardExpirationFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","_cardNumberFormControl","undefined","constructor","setName","setSerializeSettings","sensitive","serializable","cardNumberFormControl","assertEx","rawValue","value","blurError","unmasked","expirationValid","valid","expirationDate","length","setErrorAndValidity","isValid","changeError","isPotentiallyValid","mask","test","makeMask","separator","limit","output","i","push","join","FormControlBase","valid","CONTROL_NAME","CreditCardNumberFormControl","FormControlBase","creditCardType","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","inputMode","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","unmasked","numberValidation","valid","number","isValid","setErrorAndValidity","changeError","match","isPotentiallyValid","earlyNumberCheck","setCreditCardType","getCursorPosition","previousValue","card","lengthChange","length","unmaskedChange","gaps","oldCursor","cursorPosition","previous","oldSeparation","filter","gap","i","newSeparation","newCursor","mask","max","lengths","includes","newVal","map","slice","Boolean","join","onCreditCardTypeChange","type","setValue","options","umMasked","charAt","FormControlBase","CONTROL_NAME","CreditCardEmailFormControl","FormControlBase","invalidMessage","pattern","patternStrict","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","match","updateValidation","changeError","error","setErrorAndValidity","FormControlBase","NameFormControl","FormControlBase","required","constructor","nameLabel","autoCompleteLabel","placeHolder","setName","setSerializeSettings","sensitive","serializable","invalidMessage","props","autoComplete","autoCorrect","id","name","placeholder","spellCheck","blurError","value","setErrorAndValidity","changeError","FormControlBase","valid","CONTROL_NAME","CreditCardZipFormControl","FormControlBase","invalidMessage","props","autoComplete","autoCorrect","id","toLocaleLowerCase","name","placeholder","spellCheck","required","unmask","constructor","setName","setSerializeSettings","sensitive","serializable","blurError","value","postalCodeValidation","valid","postalCode","isValid","setErrorAndValidity","changeError","unmasked","match","patternStrict","isPotentiallyValid","FormControl","MuiFormControl","TextField","LabeledTextFieldWrapper","React","forwardRef","FormControlTextField","forwardRef","formControl","formControlError","fieldLabel","props","ref","name","handleChange","event","setValue","target","value","handleBlur","blurError","setTouched","MuiFormControl","fullWidth","LabeledTextFieldWrapper","label","htmlFor","TextField","error","helperText","hiddenLabel","onBlur","onChange","onKeyDown","selectionEnd","cursorPosition","previous","required","size","variant","displayName","useEffect","createContextEx","FormGroupCreditCardContext","FormGroup","React","useMemo","FormGroupCreditCardProvider","children","params","props","formGroup","useMemo","FormGroup","React","FormGroupCreditCardContext","Provider","value","provided","useContextEx","useFormGroupWithCreditCardInput","required","useContextEx","FormGroupCreditCardContext","useMemo","useRef","useState","StableDefaultArgs","useCreditCardFormControl","formControlName","Control","args","error","setError","useState","value","setValue","inputRef","useRef","formGroup","useFormGroupWithCreditCardInput","creditCardFormControl","useMemo","control","registerOnErrorChange","newError","registerOnChange","registerControl","useCreditCardCvvFormControl","formControlName","cardNumberControlName","control","creditCardFormControl","error","value","inputRef","useCreditCardFormControl","formGroup","useFormGroupWithCreditCardInput","creditCardNumberFormControl","getControl","useEffect","castControl","setCardNumberFormControl","console","CreditCardCvvWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardCvvFormControl","undefined","CreditCardCvvFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardEmailWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardEmailFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","React","CreditCardExpirationWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardExpirationFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","expirationProps","React","FormControlTextField","formControl","formControlError","inputProps","React","useMemo","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","tabIndex","props","args","useMemo","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","NameFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","InputAdornment","React","React","React","jsx","jsxs","React","jsx","jsxs","React","jsx","jsxs","CreditCardData","amex","icon","AmexIcon","name","discover","DiscoverIcon","mastercard","MastercardIcon","visa","VisaIcon","useEffect","useState","useCreditCardNumberFormControl","formControlName","control","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","type","setType","useState","useEffect","castControl","onCreditCardTypeChange","console","onCursorChange","cursor","current","setSelectionRange","CreditCardNumberWithFormControl","fieldLabel","formControlName","props","creditCardFormControl","error","inputRef","type","value","useCreditCardNumberFormControl","CreditCardNumberFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cardProps","React","FormControlTextField","formControl","formControlError","inputProps","InputProps","startAdornment","length","InputAdornment","position","img","height","width","src","CreditCardData","icon","React","CreditCardZipWithFormControl","formControlName","fieldLabel","props","creditCardFormControl","error","inputRef","value","useCreditCardFormControl","CreditCardZipFormControl","autoComplete","autoCorrect","id","inputMode","name","spellCheck","cvcProps","React","FormControlTextField","formControl","formControlError","inputProps","Stack","FlexCol","ErrorRender","React","useState","NameFields","NameLabels","assertEx","isPayloadOfSchemaTypeWithMeta","CreditCardInputSchema","isCreditCardInput","validateCreditCardInputs","values","cardNumber","assertEx","cvc","emailAddress","expiration","firstName","lastName","schema","CreditCardInputSchema","timestamp","zip","Stack","React","InputFieldsStack","props","sx","React","Stack","gap","flexDirection","md","xs","NameWithFormControl","autoCompleteLabel","fieldLabel","formControlName","placeholder","lg","width","CreditCardNumberWithFormControl","direction","CreditCardCvvWithFormControl","CreditCardExpirationWithFormControl","CreditCardZipWithFormControl","CreditCardEmailWithFormControl","usePromise","StorageArchivist","StorageArchivistConfigSchema","ArchivistFormGroupStorage","StorageNameSpace","calculateTTL","months","MS_PER_DAY","DAYS_PER_MONTH","useFormStorage","usePromise","localStorageArchivist","StorageArchivist","create","account","config","namespace","schema","StorageArchivistConfigSchema","type","sessionStorageArchivist","storage","sensitive","ArchivistFormGroupStorage","serialize","ttlStorage","CreditCardFormFlexbox","ConfirmationButton","displayErrors","onErrorDuringSubmit","onInvalidSubmit","onSuccessfulSubmit","onValidSubmit","props","formGroup","useFormGroupWithCreditCardInput","error","setError","useState","handleConfirmPayment","Error","validateFields","errorSummary","invalidFields","length","formOutput","validateCreditCardInputs","values","React","ErrorRender","FlexCol","sx","flexDirection","md","xs","width","gap","Stack","InputFieldsStack","onClick","variant","alignSelf","CreditCardFormFlexboxWithFormGroupProvider","params","useFormStorage","FormGroupCreditCardProvider"]}

package/package.json CHANGED Viewed

@@ -10,16 +10,16 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.16.5",
-    "@xylabs/assert": "^3.6.4",
-    "@xylabs/object": "^3.6.4",
-    "@xylabs/react-flexbox": "^3.4.1",
-    "@xylabs/react-promise": "^3.4.1",
-    "@xyo-network/archivist-storage": "^2.110.9",
-    "@xyo-network/payload-model": "^2.110.9",
-    "@xyo-network/react-error": "^2.81.10",
-    "@xyo-network/react-form-group": "^2.81.10",
-    "@xyo-network/react-shared": "^2.81.10",
+    "@mui/icons-material": "^5.16.6",
+    "@xylabs/assert": "^3.6.12",
+    "@xylabs/object": "^3.6.12",
+    "@xylabs/react-flexbox": "^3.4.2",
+    "@xylabs/react-promise": "^3.4.2",
+    "@xyo-network/archivist-storage": "^2.111.3",
+    "@xyo-network/payload-model": "^2.111.3",
+    "@xyo-network/react-error": "^2.83.0",
+    "@xyo-network/react-form-group": "^2.83.0",
+    "@xyo-network/react-shared": "^2.83.0",
     "card-validator": "^10.0.0"
   },
   "peerDependencies": {
@@ -28,41 +28,25 @@
     "react": "^18"
   },
   "devDependencies": {
-    "@storybook/react": "^7.6.20",
-    "@xylabs/ts-scripts-yarn3": "^3.12.4",
-    "@xylabs/tsconfig-react": "^3.12.4",
+    "@storybook/react": "^8.2.7",
+    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.7",
+    "@xylabs/tsconfig-react": "^4.0.0-rc.7",
     "typescript": "^5.5.4"
   },
   "description": "Common React library for all XYO projects that use React",
   "docs": "dist/docs.json",
   "exports": {
     ".": {
-      "node": {
-        "import": {
-          "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.js"
-        },
-        "require": {
-          "types": "./dist/node/index.d.cts",
-          "default": "./dist/node/index.cjs"
-        }
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
       },
-      "browser": {
-        "import": {
-          "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.js"
-        },
-        "require": {
-          "types": "./dist/browser/index.d.cts",
-          "default": "./dist/browser/index.cjs"
-        }
-      },
-      "default": "./dist/browser/index.js"
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/browser/index.cjs",
-  "module": "dist/browser/index.js",
+  "module": "dist/browser/index.mjs",
   "homepage": "https://xyo.network",
   "keywords": [
     "xyo",
@@ -84,6 +68,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.81.10",
+  "version": "2.83.0",
   "type": "module"
 }

package/src/components/controls/card/Email.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
-import { CreditCardEmailFormControl } from '../../../controls/index.js'
-import { WithFormControlProps } from '../WithFormControlProps.js'
-import { FormControlTextField } from './FormControlTextField.js'
-import { useCreditCardFormControl } from './useCreditCardFormControl.js'
+import React from 'react'
+import { CreditCardEmailFormControl } from '../../../controls/index.ts'
+import { WithFormControlProps } from '../WithFormControlProps.ts'
+import { FormControlTextField } from './FormControlTextField.tsx'
+import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
 export const CreditCardEmailWithFormControl: React.FC<WithFormControlProps> = ({
   formControlName = 'emailAddress',

package/src/components/controls/card/Expiration.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
-import { CreditCardExpirationFormControl } from '../../../controls/index.js'
-import { WithFormControlProps } from '../WithFormControlProps.js'
-import { FormControlTextField } from './FormControlTextField.js'
-import { useCreditCardFormControl } from './useCreditCardFormControl.js'
+import React from 'react'
+import { CreditCardExpirationFormControl } from '../../../controls/index.ts'
+import { WithFormControlProps } from '../WithFormControlProps.ts'
+import { FormControlTextField } from './FormControlTextField.tsx'
+import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
 export const CreditCardExpirationWithFormControl: React.FC<WithFormControlProps> = ({
   formControlName = 'expiration',

package/src/components/controls/card/FormControlTextField.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { FormControl as MuiFormControl, StandardTextFieldProps, TextField } from '@mui/material'
 import { FormControl } from '@xyo-network/react-form-group'
 import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
-import { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'
+import React, { ChangeEventHandler, FocusEventHandler, forwardRef, KeyboardEvent } from 'react'
 export interface FormControlTextFieldProps extends StandardTextFieldProps {
   fieldLabel: string
@@ -45,7 +45,7 @@ export const FormControlTextField = forwardRef<HTMLDivElement, FormControlTextFi
               }}
               ref={ref}
               required={formControl?.required}
-              size={'small'}
+              size="small"
               variant="filled"
               {...props}
             />

package/src/components/controls/card/Name.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
-import { NameFormControl } from '../../../controls/index.js'
-import { WithFormControlProps } from '../WithFormControlProps.js'
-import { FormControlTextField } from './FormControlTextField.js'
-import { useCreditCardFormControl } from './useCreditCardFormControl.js'
+import { NameFormControl } from '../../../controls/index.ts'
+import { WithFormControlProps } from '../WithFormControlProps.ts'
+import { FormControlTextField } from './FormControlTextField.tsx'
+import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
 export interface NameWithFormControlProps extends WithFormControlProps {
   autoCompleteLabel: string

package/src/components/controls/card/Options.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.js'
+import { AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon } from '../../img/index.ts'
 export interface CreditCardInfo {
   icon: string

package/src/components/controls/card/Zip.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
-import { CreditCardZipFormControl } from '../../../controls/index.js'
-import { WithFormControlProps } from '../WithFormControlProps.js'
-import { FormControlTextField } from './FormControlTextField.js'
-import { useCreditCardFormControl } from './useCreditCardFormControl.js'
+import React from 'react'
+import { CreditCardZipFormControl } from '../../../controls/index.ts'
+import { WithFormControlProps } from '../WithFormControlProps.ts'
+import { FormControlTextField } from './FormControlTextField.tsx'
+import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
 export const CreditCardZipWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'zip', fieldLabel = 'Zip', ...props }) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, CreditCardZipFormControl)

package/src/components/controls/card/cvv/Cvv.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
-import { CreditCardCvvFormControl } from '../../../../controls/index.js'
-import { WithFormControlProps } from '../../WithFormControlProps.js'
-import { FormControlTextField } from '../FormControlTextField.js'
-import { useCreditCardCvvFormControl } from './use.js'
+import React from 'react'
+import { CreditCardCvvFormControl } from '../../../../controls/index.ts'
+import { WithFormControlProps } from '../../WithFormControlProps.ts'
+import { FormControlTextField } from '../FormControlTextField.tsx'
+import { useCreditCardCvvFormControl } from './use.ts'
 export const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)

package/src/components/controls/card/cvv/index.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from './Cvv.js'
-export * from './use.js'
+export * from './Cvv.tsx'
+export * from './use.ts'

package/src/components/controls/card/cvv/{use.tsx → use.ts} RENAMED Viewed

@@ -2,9 +2,9 @@ import { StandardTextFieldProps } from '@mui/material'
 import { FormControlBase } from '@xyo-network/react-form-group'
 import { useEffect } from 'react'
-import { useFormGroupWithCreditCardInput } from '../../../../context/index.js'
-import { CreditCardCvvFormControl } from '../../../../controls/index.js'
-import { useCreditCardFormControl } from '../useCreditCardFormControl.js'
+import { useFormGroupWithCreditCardInput } from '../../../../context/index.ts'
+import { CreditCardCvvFormControl } from '../../../../controls/index.ts'
+import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
 export const useCreditCardCvvFormControl = (
   formControlName?: string,

package/src/components/controls/card/index.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-export * from './cvv/index.js'
-export * from './Email.js'
-export * from './Expiration.js'
-export * from './FormControlTextField.js'
-export * from './Name.js'
-export * from './number/index.js'
-export * from './Options.js'
-export * from './useCreditCardFormControl.js'
-export * from './Zip.js'
+export * from './cvv/index.ts'
+export * from './Email.tsx'
+export * from './Expiration.tsx'
+export * from './FormControlTextField.tsx'
+export * from './Name.tsx'
+export * from './number/index.ts'
+export * from './Options.ts'
+export * from './useCreditCardFormControl.tsx'
+export * from './Zip.tsx'

package/src/components/controls/card/number/Number.tsx CHANGED Viewed

@@ -1,10 +1,11 @@
 import { InputAdornment } from '@mui/material'
+import React from 'react'
-import { CreditCardNumberFormControl } from '../../../../controls/index.js'
-import { WithFormControlProps } from '../../WithFormControlProps.js'
-import { FormControlTextField } from '../FormControlTextField.js'
-import { CreditCardData } from '../Options.js'
-import { useCreditCardNumberFormControl } from './use.js'
+import { CreditCardNumberFormControl } from '../../../../controls/index.ts'
+import { WithFormControlProps } from '../../WithFormControlProps.ts'
+import { FormControlTextField } from '../FormControlTextField.tsx'
+import { CreditCardData } from '../Options.ts'
+import { useCreditCardNumberFormControl } from './use.ts'
 export const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = ({
   fieldLabel = 'Card Number',
@@ -24,11 +25,13 @@ export const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = (
       inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}
       InputProps={{
         startAdornment:
-          type.length > 0 ?
-            <InputAdornment position="start">
-              <img height={'30px'} width={'40px'} src={CreditCardData[type].icon} />
-            </InputAdornment>
-          : null,
+          type.length > 0
+            ? (
+                <InputAdornment position="start">
+                  <img height="30px" width="40px" src={CreditCardData[type].icon} />
+                </InputAdornment>
+              )
+            : null,
       }}
       value={value}
       {...cardProps}

package/src/components/controls/card/number/index.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from './Number.js'
-export * from './use.js'
+export * from './Number.tsx'
+export * from './use.ts'

package/src/components/controls/card/number/{use.tsx → use.ts} RENAMED Viewed

@@ -2,9 +2,9 @@ import { StandardTextFieldProps } from '@mui/material'
 import { FormControlBase } from '@xyo-network/react-form-group'
 import { useEffect, useState } from 'react'
-import { CreditCardNumberFormControl } from '../../../../controls/index.js'
-import { CreditCardOptions } from '../Options.js'
-import { useCreditCardFormControl } from '../useCreditCardFormControl.js'
+import { CreditCardNumberFormControl } from '../../../../controls/index.ts'
+import { CreditCardOptions } from '../Options.ts'
+import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
 export const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {
   const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)

package/src/components/controls/card/useCreditCardFormControl.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import { StandardTextFieldProps } from '@mui/material'
 import { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
 import { useMemo, useRef, useState } from 'react'
-import { useFormGroupWithCreditCardInput } from '../../../context/index.js'
+import { useFormGroupWithCreditCardInput } from '../../../context/index.ts'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const StableDefaultArgs: any[] = []

package/src/components/controls/index.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from './card/index.js'
-export * from './WithFormControlProps.js'
+export * from './card/index.ts'
+export * from './WithFormControlProps.ts'

package/src/components/form/Form.tsx CHANGED Viewed

@@ -1,13 +1,13 @@
 import { Stack } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { ErrorRender } from '@xyo-network/react-error'
-import { useState } from 'react'
+import React, { useState } from 'react'
-import { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.js'
-import { validateCreditCardInputs } from '../support/index.js'
-import { InputFieldsStack } from './InputFieldsStack.js'
-import { CreditCardFormProps } from './Props.js'
-import { useFormStorage } from './useFormStorage.js'
+import { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.ts'
+import { validateCreditCardInputs } from '../support/index.ts'
+import { InputFieldsStack } from './InputFieldsStack.tsx'
+import { CreditCardFormProps } from './Props.ts'
+import { useFormStorage } from './useFormStorage.tsx'
 export const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({
   ConfirmationButton,
@@ -51,14 +51,16 @@ export const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({
   return (
     <>
       <ErrorRender error={error} />
-      <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width={'100%'} gap={2} {...props}>
-        <Stack flexDirection={'column'} sx={{ width: '100%' }} gap={2}>
+      <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width="100%" gap={2} {...props}>
+        <Stack flexDirection="column" sx={{ width: '100%' }} gap={2}>
           <InputFieldsStack />
-          {ConfirmationButton ?
-            <ConfirmationButton onClick={handleConfirmPayment} variant="contained" sx={{ alignSelf: 'end' }}>
-              Confirm Payment
-            </ConfirmationButton>
-          : null}
+          {ConfirmationButton
+            ? (
+                <ConfirmationButton onClick={handleConfirmPayment} variant="contained" sx={{ alignSelf: 'end' }}>
+                  Confirm Payment
+                </ConfirmationButton>
+              )
+            : null}
         </Stack>
       </FlexCol>
     </>

package/src/components/form/InputFieldsStack.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Stack, StackProps } from '@mui/material'
-import { PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 import {
   CreditCardCvvWithFormControl,
@@ -8,7 +8,7 @@ import {
   CreditCardNumberWithFormControl,
   CreditCardZipWithFormControl,
   NameWithFormControl,
-} from '../controls/index.js'
+} from '../controls/index.ts'
 export interface InputFieldsStackProps extends StackProps, PropsWithChildren {}
@@ -17,8 +17,8 @@ export const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {
   return (
     <>
       <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>
-        <NameWithFormControl autoCompleteLabel="given-name" fieldLabel={'First'} formControlName={'firstName'} placeholder="Jerry" />
-        <NameWithFormControl autoCompleteLabel="family-name" fieldLabel={'Last'} formControlName={'lastName'} placeholder="Smith" />
+        <NameWithFormControl autoCompleteLabel="given-name" fieldLabel="First" formControlName="firstName" placeholder="Jerry" />
+        <NameWithFormControl autoCompleteLabel="family-name" fieldLabel="Last" formControlName="lastName" placeholder="Smith" />
       </Stack>
       <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>
         <Stack width={{ lg: '50%', xs: '100%' }}>