@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/react/color-picker/color-preview/examples/Basic.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
-  return <ColorPreview value="#00ffcc" />;
+  return (
+    <FormField>
+      <FormField.Label>Current Color</FormField.Label>
+      <FormField.Field>
+        <FormField.Input as={ColorPreview} value="#00ffcc" />
+      </FormField.Field>
+    </FormField>
+  );
 };

package/dist/mdx/react/color-picker/color-preview/examples/LabelPosition.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
   return (
-    <FormField orientation="horizontal">
+    <FormField orientation="horizontalStart">
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorPreview} value="#00ffcc" />
+      <FormField.Field>
+        <FormField.Input as={ColorPreview} value="#00ffcc" />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-preview/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -16,7 +16,9 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Background Color</FormField.Label>
-        <FormField.Input as={ColorPreview} ref={ref} value="#00ffcc" />
+        <FormField.Field>
+          <FormField.Input as={ColorPreview} ref={ref} value="#00ffcc" />
+        </FormField.Field>
       </FormField>
       <p style={type.levels.subtext.large}>Width of Color Preview: {width}</p>
       <PrimaryButton onClick={handleClick}>Calculate Width of Color Preview</PrimaryButton>

package/dist/mdx/react/combobox/Combobox.mdx

@@ -1,9 +1,6 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Combobox} from '@workday/canvas-kit-react/combobox';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Autocomplete from './examples/Autocomplete';
 
-
 # Combobox
 
 Combobox is an _abstract_ compound component - it should not be used on its own, but used as a base

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -13,7 +13,7 @@ import {
   useComboboxLoader,
   useComboboxInput,
 } from '@workday/canvas-kit-react/combobox';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
@@ -105,36 +105,38 @@ export default () => {
   );
 
   return (
-    <FormField orientation="horizontal" isRequired>
+    <FormField orientation="horizontalStart" isRequired>
       <FormField.Label>Fruit</FormField.Label>
-      <Combobox model={model} onChange={event => console.log('input', event.currentTarget.value)}>
-        <InputGroup>
-          <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
-          <InputGroup.InnerEnd
-            cs={styleOverrides.inputGroupInner}
-            pointerEvents="none"
-            style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
-            data-loading={loader.isLoading}
-          >
-            <LoadingDots cs={styleOverrides.loadingDots} />
-          </InputGroup.InnerEnd>
-          <InputGroup.InnerEnd>
-            <InputGroup.ClearButton data-testid="clear" />
-          </InputGroup.InnerEnd>
-        </InputGroup>
-        <Combobox.Menu.Popper>
-          <Combobox.Menu.Card>
-            {model.state.items.length === 0 && (
-              <StyledMenuItem as="span">No Results Found</StyledMenuItem>
-            )}
-            {model.state.items.length > 0 && (
-              <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
-                {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
-              </Combobox.Menu.List>
-            )}
-          </Combobox.Menu.Card>
-        </Combobox.Menu.Popper>
-      </Combobox>
+      <FormField.Field>
+        <Combobox model={model} onChange={event => console.log('input', event.currentTarget.value)}>
+          <InputGroup>
+            <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
+            <InputGroup.InnerEnd
+              cs={styleOverrides.inputGroupInner}
+              pointerEvents="none"
+              style={{opacity: loader.isLoading ? system.opacity.full : system.opacity.zero}}
+              data-loading={loader.isLoading}
+            >
+              <LoadingDots cs={styleOverrides.loadingDots} />
+            </InputGroup.InnerEnd>
+            <InputGroup.InnerEnd>
+              <InputGroup.ClearButton data-testid="clear" />
+            </InputGroup.InnerEnd>
+          </InputGroup>
+          <Combobox.Menu.Popper>
+            <Combobox.Menu.Card>
+              {model.state.items.length === 0 && (
+                <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+              )}
+              {model.state.items.length > 0 && (
+                <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
+                  {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+                </Combobox.Menu.List>
+              )}
+            </Combobox.Menu.Card>
+          </Combobox.Menu.Popper>
+        </Combobox>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/common/{CompoundComponentUtilities.mdx → mdx/CompoundComponentUtilities.mdx}

@@ -1,4 +1,5 @@
-import {Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications} from '@workday/canvas-kit-docs';
+
 import CreateModelHook from './examples/CreateModelHook';
 import CreateContainer from './examples/CreateContainer';
 import CreateSubcomponent from './examples/CreateSubcomponent';

package/dist/mdx/react/common/{Responsive.mdx → mdx/Responsive.mdx}

@@ -1,5 +1,5 @@
-import {Box} from '@workday/canvas-kit-react/layout';
-import {useResizeObserver, useResponsiveContainerStyles} from '@workday/canvas-kit-react/common';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import ResponsiveContainer from './examples/ResponsiveStyles';
 import ResponsiveViewport from './examples/ResponsiveViewport';
 

package/dist/mdx/react/common/{examples → mdx/examples}/ResponsiveStyles.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Box, Grid, Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {useResponsiveContainerStyles, useResizeObserver} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const HeadingText = ({children, ...props}) => (

package/dist/mdx/react/dialog/Dialog.mdx

@@ -1,10 +1,7 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Focus from './examples/Focus';
 
-
 # Canvas Kit Dialog
 
 A Dialog component is a non-modal type of dialog that will not render the rest of the page inert

package/dist/mdx/react/dialog/examples/Basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default {
+  title: 'Testing/Popups/Dialog',
+  component: Dialog,
+};
+
+const grid = createStyles({
+  gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
+  height: calc.subtract('100vh', system.space.x16),
+  width: calc.subtract('100vw', system.space.x20),
+});
+
+const topButton = createStyles({
+  gridArea: 'topButton',
+  justifySelf: 'center',
+});
+const rightButton = createStyles({
+  gridArea: 'rightButton',
+  justifySelf: 'right',
+  alignSelf: 'center',
+});
+const bottomButton = createStyles({
+  gridArea: 'bottomButton',
+  justifySelf: 'center',
+  alignSelf: 'end',
+});
+const leftButton = createStyles({
+  gridArea: 'leftButton',
+  justifySelf: 'left',
+  alignSelf: 'center',
+});
+
+export default () => {
+  return (
+    <div data-testid="scroll-area-fallback-placement">
+      <Grid cs={grid}>
+        <Dialog>
+          <Dialog.Target cs={topButton} as={PrimaryButton}>
+            Placement Top
+          </Dialog.Target>
+          <Dialog.Popper placement="top">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={leftButton} as={PrimaryButton}>
+            Placement Left
+          </Dialog.Target>
+          <Dialog.Popper placement="left">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={rightButton} as={PrimaryButton}>
+            Placement Right
+          </Dialog.Target>
+          <Dialog.Popper placement="right">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={bottomButton} as={PrimaryButton}>
+            Placement Bottom
+          </Dialog.Target>
+          <Dialog.Popper placement="bottom">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+      </Grid>
+    </div>
+  );
+};

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,33 +1,25 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-import Alert from './examples/Alert.tsx';
-import AlertLabel from './examples/AlertLabel.tsx';
-import Basic from './examples/Basic.tsx';
-import CustomInputId from './examples/CustomInputId.tsx';
-import Error from './examples/Error.tsx';
-import ErrorLabel from './examples/ErrorLabel.tsx';
-import GroupingInputs from './examples/GroupingInputs.tsx';
-import Grow from './examples/Grow.tsx';
-import Hint from './examples/Hint.tsx';
-import LabelPosition from './examples/LabelPosition.tsx';
-import Required from './examples/Required.tsx';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Alert from './examples/Alert';
+import Error from './examples/Error';
+import Disabled from './examples/Disabled';
+import LabelPositionHorizontalStart from './examples/LabelPositionHorizontalStart';
+import LabelPositionHorizontalEnd from './examples/LabelPositionHorizontalEnd';
+import RefForwarding from './examples/RefForwarding';
+import Required from './examples/Required';
+import Custom from './examples/Custom';
+import CustomId from './examples/CustomId';
+import AllFields from './examples/AllFields';
+import Hint from './examples/Hint';
+import Grow from './examples/Grow';
+import ThemedError from './examples/ThemedErrors';
+import GroupedInputs from './examples/GroupedInputs';
 
 
 # Canvas Kit Form Field
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`FormField` in Main has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
-
-Form Field allows users to wrap input components to make them accessible and adds complementary
-labels and error messages.
+FormField allows users to wrap input components to make them accessible. You can customize the field
+by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.
 
 ## Installation
 
@@ -37,102 +29,136 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Basic Example
+### Basic
 
 Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
-accessibility standards.
-
-Here's an example of Form Field being used with [Text Input](/components/inputs/text-input/).
+accessibility standards. The orientation of the label by default is `vertical`.
 
 <ExampleCodeBlock code={Basic} />
 
-### Custom Input id
+### Error States
 
-Form Field will automatically generate an HTML `id` for its input element to link it to the
-correponding label. Alternatively, you may set the `inputId` prop of the Form Field to specify a
-custom `id` for the input element.
+Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
+`error` accepts the following values:
 
-<ExampleCodeBlock code={CustomInputId} />
+`"error" | "alert" | undefined`
 
-### Grouping Inputs
+### Alert
 
-Set the `useFieldset` prop of the Form Field to `true` to indicate that it includes multiple input
-components. In this case, the Form Field will use
-[the method prescribed by the WAI](https://www.w3.org/WAI/tutorials/forms/grouping/) and render
-itself using a `fieldset` and a `legend`.
+Use the alert state when a value is valid but there is additional information.
 
-`useFieldset` must be set to `true` when wrapping a [Radio Group](/components/inputs/radio/) since
-Radio Groups contain multiple Radio Buttons.
+<ExampleCodeBlock code={Alert} />
 
-<ExampleCodeBlock code={GroupingInputs} />
+### Error
 
-### Grow
+Use the error state when the value is no longer valid.
 
-Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
-component) to expand to the width of its container.
+<ExampleCodeBlock code={Error} />
 
-<ExampleCodeBlock code={Grow} />
+### Disabled
+
+Set the `disabled` prop of `FormField.Input` to prevent users from interacting with it.
+
+<ExampleCodeBlock code={Disabled} />
 
 ### Hint
 
-Set the `hintText` prop of the Form Field to display a short message below the input component.
+Use `FormField.Hint` to display a short message below the input component and `FormField.Field` to
+ensure proper alignment.
 
 <ExampleCodeBlock code={Hint} />
 
 ### Label Position
 
-Set the `labelPosition` prop of the Form Field to designate the position of the label relative to
-the input component. `labelPosition` accepts the following values:
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`. If you want your label to be
+horizontal, you have two options: `horizontalStart` and `horizontalEnd`.
+
+If you want the position of the label at the start of the container, set orientation prop to
+`horizontalStart`.
+
+<ExampleCodeBlock code={LabelPositionHorizontalStart} />
+
+If you want the position of the label at the end of the container, set orientation prop to
+`horizontalEnd`.
+
+<ExampleCodeBlock code={LabelPositionHorizontalEnd} />
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+### Grow
+
+Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
+component) to expand to the width of its container.
+
+**Note: This Prop is deprecated and will be removed in a future major version.**
 
-<ExampleCodeBlock code={LabelPosition} />
+<ExampleCodeBlock code={Grow} />
+
+### Ref Forwarding
+
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
+
+<ExampleCodeBlock code={RefForwarding} />
 
 ### Required
 
-Set the `required` prop of the Form Field to `true` to indicate that the field is required. Labels
+Set the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels
 for required fields are suffixed by a red asterisk.
 
 <ExampleCodeBlock code={Required} />
 
-### Error States
+### Grouped Inputs
 
-Set the `error` prop of the Form Field to indicate it has an error. `error` accepts the following
-values:
+Use `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like
+`RadioGroup` or a group of `Checkbox`'s. `FormFieldGroup` renders a `fieldset` element and
+`FormFieldGroup.Label` renders a `legend` element. These elements will allow for correct
+accessibility of grouped inputs.
 
-- `FormField.ErrorType.Alert`
-- `FormField.ErrorType.Error`
+`FormFieldGroup` supports the same props of `FormField`:
 
-The `hintText` and `hintId` props of the Form Field are required if `error` is defined. Set
-`hintText` to the error message you would like to display and `hintId` to the HTML `id` you would
-like to assign to that message (`hintId` is used to link the error message to its corresponding
-input element to meet accessibility standards).
+- `error`: `"alert" | "error"` Defines the error around the whole group of inputs.
+- `orientation`: `"horizontal" | "vertical"` Defines the legend placement.
+- `isRequired`: `true` Defines if a group like RadioGroup is required.
 
-#### Alert
+<ExampleCodeBlock code={GroupedInputs} />
 
-<ExampleCodeBlock code={Alert} />
+### Custom
 
-Set the `alertLabel` prop of the Form Field to override the default "Alert" prefix of the hint. This
-is generally only used for translations.
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
 
-<ExampleCodeBlock code={AlertLabel} />
+<ExampleCodeBlock code={Custom} />
 
-#### Error
+### Custom id
 
-<ExampleCodeBlock code={Error} />
+Form Field will automatically generate an HTML `id` for its input element to link it to the
+correponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom
+`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.
 
-Set the `errorLabel` prop of the Form Field to override the default "Error" prefix of the hint. This
-is generally only used for translations.
+<ExampleCodeBlock code={CustomId} />
 
-<ExampleCodeBlock code={ErrorLabel} />
+### All Fields
 
-## Component API
+Form Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,
+`TextArea`, `Switch`, and `RadioGroup`.
+
+<ExampleCodeBlock code={AllFields} />
 
-<SymbolDoc name="FormField" fileName="/react/" />
+### Themed Errors
 
-Undocumented props are spread to the outermost element rendered by Form Field.
+You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
+`focusOutline` and `error` properties on the `theme`.
 
-## Specifications
+<ExampleCodeBlock code={ThemedError} />
+
+### Custom Styles
+
+Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
+check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
+## Component API
 
-<Specifications file="FormField.spec.ts" name="Form Field" />
+<SymbolDoc name="FormField" fileName="/preview-react/" />

package/dist/mdx/react/form-field/examples/Alert.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
-  const [value, setValue] = React.useState('invalid@email');
+  const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField error="alert">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };