@xyo-network/react-form-credit-card 7.5.8 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-form-credit-card",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,52 +36,138 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-error": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-promise": "~7.1.17",
-    "@xylabs/react-shared": "~7.1.17",
-    "@xylabs/sdk-js": "~5.0.90",
-    "@xyo-network/archivist-storage": "~5.3.17",
-    "@xyo-network/payload-model": "~5.3.17",
-    "@xyo-network/react-form-group": "7.5.8",
-    "@xyo-network/react-shared": "7.5.8",
-    "card-validator": "~10.0.4"
+    "@xyo-network/react-shared": "~7.5.11",
+    "@xyo-network/react-form-group": "~7.5.11"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-error": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/archivist-model": "^5.5.5",
+    "@xyo-network/archivist-storage": "~5.5.5",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-event-emitter": "~5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "card-validator": "~10.0.4",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "store2": "~2.14.4",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-error": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/archivist-model": "^5.5.5",
+    "@xyo-network/archivist-storage": "~5.5.5",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-event-emitter": "~5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "card-validator": "~10.0.4",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "store2": "~2.14.4",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/controls/WithFormControlProps.ts

@@ -1,6 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-
-export interface WithFormControlProps extends StandardTextFieldProps {
-  fieldLabel?: string
-  formControlName?: string
-}

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

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import { CreditCardEmailFormControl } from '../../../controls/index.ts'
-import type { WithFormControlProps } from '../WithFormControlProps.ts'
-import { FormControlTextField } from './FormControlTextField.tsx'
-import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
-
-export const CreditCardEmailWithFormControl: React.FC<WithFormControlProps> = ({
-  formControlName = 'emailAddress',
-  fieldLabel = 'Email',
-  ...props
-}) => {
-  const {
-    creditCardFormControl, error, inputRef, value,
-  } = useCreditCardFormControl(formControlName, CreditCardEmailFormControl)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
-  } = creditCardFormControl?.props ?? {}
-
-  return (
-    <FormControlTextField
-      fieldLabel={fieldLabel}
-      formControl={creditCardFormControl}
-      formControlError={error}
-      inputMode={inputMode}
-      slotProps={{
-        htmlInput: {
-          'aria-label': `${fieldLabel} for your purchase`, autoComplete, autoCorrect, id, name, spellCheck,
-        },
-      }}
-      inputRef={inputRef}
-      value={value}
-      {...cvcProps}
-      {...props}
-    />
-  )
-}

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

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import { CreditCardExpirationFormControl } from '../../../controls/index.ts'
-import type { WithFormControlProps } from '../WithFormControlProps.ts'
-import { FormControlTextField } from './FormControlTextField.tsx'
-import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
-
-export const CreditCardExpirationWithFormControl: React.FC<WithFormControlProps> = ({
-  formControlName = 'expiration',
-  fieldLabel = 'Expiration',
-  ...props
-}) => {
-  const {
-    creditCardFormControl, error, inputRef, value,
-  } = useCreditCardFormControl(formControlName, CreditCardExpirationFormControl)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...expirationProps
-  } = creditCardFormControl?.props ?? {}
-
-  return (
-    <FormControlTextField
-      inputRef={inputRef}
-      formControl={creditCardFormControl}
-      fieldLabel={fieldLabel}
-      formControlError={error}
-      inputMode={inputMode}
-      slotProps={{
-        htmlInput: {
-          'aria-label': `${fieldLabel} of the card`, autoComplete, autoCorrect, id, name, spellCheck,
-        },
-      }}
-      value={value}
-      {...expirationProps}
-      {...props}
-    />
-  )
-}

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

@@ -1,63 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import { FormControl as MuiFormControl, TextField } from '@mui/material'
-import type { FormControl } from '@xyo-network/react-form-group'
-import { LabeledTextFieldWrapper } from '@xyo-network/react-shared'
-import type {
-  ChangeEventHandler, FocusEventHandler, KeyboardEvent,
-} from 'react'
-import React from 'react'
-
-export interface FormControlTextFieldProps extends StandardTextFieldProps {
-  fieldLabel: string
-  formControl?: FormControl<StandardTextFieldProps>
-  formControlError?: string
-}
-
-export const FormControlTextField = ({
-  ref, formControl, formControlError, fieldLabel = '', ...props
-}: FormControlTextFieldProps) => {
-  const { name } = formControl?.props ?? {}
-
-  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    formControl?.setValue(event.target.value)
-  }
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
-    formControl?.blurError?.(event.target.value)
-    formControl?.setTouched(true)
-  }
-
-  return (
-    <MuiFormControl fullWidth>
-      <LabeledTextFieldWrapper label={fieldLabel}>
-        <label htmlFor={name}>
-          <TextField
-            error={!!formControlError}
-            helperText={formControlError || ' '}
-            fullWidth
-            hiddenLabel
-            name={name}
-            onBlur={handleBlur}
-            onChange={handleChange}
-            onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
-              // See - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
-              // .currentTarget is the div in mui that emits the event, .target is the input element
-              // Unfortunately, the type definitions do not let you pass a generic specifically for target, only currentTarget
-              const selectionEnd = (event.target as HTMLInputElement).selectionEnd
-              if (selectionEnd && formControl) {
-                formControl.cursorPosition.previous = selectionEnd
-              }
-            }}
-            ref={ref}
-            required={formControl?.required}
-            size="small"
-            variant="filled"
-            {...props}
-          />
-        </label>
-      </LabeledTextFieldWrapper>
-    </MuiFormControl>
-  )
-}
-
-FormControlTextField.displayName = 'FormControlTextField'

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

@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { NameFormControl } from '../../../controls/index.ts'
-import type { WithFormControlProps } from '../WithFormControlProps.ts'
-import { FormControlTextField } from './FormControlTextField.tsx'
-import { useCreditCardFormControl } from './useCreditCardFormControl.tsx'
-
-export interface NameWithFormControlProps extends WithFormControlProps {
-  autoCompleteLabel: string
-}
-
-export const NameWithFormControl: React.FC<NameWithFormControlProps> = ({
-  autoCompleteLabel,
-  fieldLabel = 'Name',
-  formControlName,
-  placeholder,
-  tabIndex,
-  ...props
-}) => {
-  const args = useMemo(() => [fieldLabel, autoCompleteLabel, placeholder ?? ''], [autoCompleteLabel, fieldLabel, placeholder])
-  const {
-    creditCardFormControl, error, inputRef, value,
-  } = useCreditCardFormControl(formControlName, NameFormControl, args)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
-  } = creditCardFormControl?.props ?? {}
-  return (
-    <FormControlTextField
-      fieldLabel={fieldLabel}
-      formControl={creditCardFormControl}
-      formControlError={error}
-      inputMode={inputMode}
-      slotProps={{
-        htmlInput: {
-          'aria-label': `${fieldLabel} name on your card`, autoComplete, autoCorrect, id, name, spellCheck, tabIndex,
-        },
-      }}
-      inputRef={inputRef}
-      value={value}
-      {...cvcProps}
-      {...props}
-    />
-  )
-}

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

@@ -1,22 +0,0 @@
-import {
-  AmexIcon, DiscoverIcon, MastercardIcon, VisaIcon,
-} from '../../img/index.ts'
-
-export interface CreditCardInfo {
-  icon: string
-  name: string
-}
-
-export interface CreditCardOptions {
-  amex: CreditCardInfo
-  discover: CreditCardInfo
-  mastercard: CreditCardInfo
-  visa: CreditCardInfo
-}
-
-export const CreditCardData: CreditCardOptions = {
-  amex: { icon: AmexIcon, name: 'American Express' },
-  discover: { icon: DiscoverIcon, name: 'Discover' },
-  mastercard: { icon: MastercardIcon, name: 'Mastercard' },
-  visa: { icon: VisaIcon, name: 'Visa' },
-}

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

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import { CreditCardZipFormControl } from '../../../controls/index.ts'
-import type { 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)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
-  } = creditCardFormControl?.props ?? {}
-
-  return (
-    <FormControlTextField
-      fieldLabel={fieldLabel}
-      formControl={creditCardFormControl}
-      formControlError={error}
-      inputMode={inputMode}
-      inputProps={{
-        'aria-label': `${fieldLabel} code for your card`, autoComplete, autoCorrect, id, name, spellCheck,
-      }}
-      inputRef={inputRef}
-      value={value}
-      {...cvcProps}
-      {...props}
-    />
-  )
-}

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

@@ -1,35 +0,0 @@
-import React from 'react'
-
-import { CreditCardCvvFormControl } from '../../../../controls/index.ts'
-import type { 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)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps
-  } = creditCardFormControl?.props ?? {}
-
-  return (
-    <FormControlTextField
-      fieldLabel={fieldLabel}
-      formControl={creditCardFormControl}
-      formControlError={error}
-      inputMode={inputMode}
-      slotProps={{
-        htmlInput: {
-          'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck,
-        },
-      }}
-      inputRef={inputRef}
-      value={value}
-      {...cvcProps}
-      {...props}
-    />
-  )
-}

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

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

package/src/components/controls/card/cvv/use.ts

@@ -1,37 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import type { FormControlBase } from '@xyo-network/react-form-group'
-import { useEffect } from 'react'
-
-import { useFormGroupWithCreditCardInput } from '../../../../context/index.ts'
-import type { CreditCardCvvFormControl } from '../../../../controls/index.ts'
-import { useCreditCardFormControl } from '../useCreditCardFormControl.tsx'
-
-export const useCreditCardCvvFormControl = (
-  formControlName?: string,
-  cardNumberControlName = 'cardNumber',
-  control?: new () => FormControlBase<StandardTextFieldProps>,
-) => {
-  const {
-    creditCardFormControl, error, value, inputRef,
-  } = useCreditCardFormControl(formControlName, control)
-
-  // only use FormGroupContext when name is passed
-  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)
-
-  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName)
-
-  useEffect(() => {
-    if (creditCardNumberFormControl) {
-      const castControl = creditCardFormControl as CreditCardCvvFormControl
-      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,
-  }
-}

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

@@ -1,9 +0,0 @@
-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

@@ -1,49 +0,0 @@
-import { InputAdornment } from '@mui/material'
-import React from 'react'
-
-import { CreditCardNumberFormControl } from '../../../../controls/index.ts'
-import type { 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',
-  formControlName = 'cardNumber',
-  ...props
-}) => {
-  const {
-    creditCardFormControl, error, inputRef, type, value,
-  } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)
-  const {
-    autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps
-  } = creditCardFormControl?.props ?? {}
-
-  return (
-    <FormControlTextField
-      fieldLabel={fieldLabel}
-      formControl={creditCardFormControl}
-      formControlError={error}
-      inputRef={inputRef}
-      inputMode={inputMode}
-      slotProps={{
-        htmlInput: {
-          'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck,
-        },
-        input: {
-          startAdornment:
-              type.length > 0
-                ? (
-                    <InputAdornment position="start">
-                      <img height="30px" width="40px" src={CreditCardData[type].icon} />
-                    </InputAdornment>
-                  )
-                : null,
-        },
-      }}
-      value={value}
-      {...cardProps}
-      {...props}
-    />
-  )
-}

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

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

package/src/components/controls/card/number/use.ts

@@ -1,34 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import type { FormControlBase } from '@xyo-network/react-form-group'
-import { useEffect, useState } from 'react'
-
-import type { CreditCardNumberFormControl } from '../../../../controls/index.ts'
-import type { 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)
-  const [type, setType] = useState('' as keyof CreditCardOptions)
-
-  useEffect(() => {
-    if (creditCardFormControl) {
-      const castControl = creditCardFormControl as CreditCardNumberFormControl<StandardTextFieldProps>
-      if (!castControl.onCreditCardTypeChange) {
-        console.error('cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl')
-        return
-      }
-      castControl.onCreditCardTypeChange = (type: string) => setType(type as keyof CreditCardOptions)
-      castControl.onCursorChange = (cursor: number | undefined) => {
-        if (inputRef.current && cursor) {
-          inputRef.current.setSelectionRange(cursor, cursor)
-        }
-      }
-    }
-  }, [creditCardFormControl, inputRef])
-
-  return {
-    creditCardFormControl, error, inputRef, type, value,
-  }
-}

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

@@ -1,40 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import type { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
-import {
-  useMemo, useRef, useState,
-} from 'react'
-
-import { useFormGroupWithCreditCardInput } from '../../../context/index.ts'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const STABLE_DEFAULT_ARGS: any[] = [] as const
-
-export const useCreditCardFormControl = (
-  formControlName?: string,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  args: any[] = STABLE_DEFAULT_ARGS,
-) => {
-  const [error, setError] = useState('')
-  const [value, setValue] = useState<ValidControlValue>('')
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // only use FormGroupContext when name is passed
-  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)
-
-  const creditCardFormControl = useMemo(() => {
-    if (Control) {
-      const control = new Control(...args)
-      control.registerOnErrorChange((newError: string) => setError(newError))
-      control.registerOnChange((value: ValidControlValue) => setValue(value))
-
-      if (formControlName) formGroup?.registerControl(formControlName, control)
-      return control
-    }
-  }, [Control, args, formControlName, formGroup])
-
-  return {
-    creditCardFormControl, error, inputRef, value,
-  }
-}

package/src/components/controls/index.ts

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