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

package/dist/mdx/style-props/examples/FlexItem.tsx

@@ -11,18 +11,34 @@ const baseStyles = {
 export default () => (
   <Flex flexDirection="column" rowGap="xs">
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={2} textAlign="center" {...baseStyles}>2</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
+      <Flex.Item backgroundColor="sourLemon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={2} textAlign="center" {...baseStyles}>
+        2
+      </Flex.Item>
     </Flex>
     <Flex columnGap="xs">
-      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>1</Flex.Item>
+      <Flex.Item backgroundColor="cinnamon300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
+      <Flex.Item backgroundColor="blueberry300" flex={1} textAlign="center" {...baseStyles}>
+        1
+      </Flex.Item>
     </Flex>
   </Flex>
 );

package/dist/mdx/style-props/examples/Position.tsx

@@ -47,4 +47,4 @@ export default () => {
       </Box>
     </>
   );
-};
+};

package/dist/mdx/style-props/examples/Space.tsx

@@ -11,13 +11,19 @@ const baseStyles = {
 export default () => (
   <>
     <Box backgroundColor="cinnamon300" margin="xxs" padding="s" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Small</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Small
+      </Box>
     </Box>
     <Box backgroundColor="sourLemon300" margin="xxs" padding="m" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Medium</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Medium
+      </Box>
     </Box>
     <Box backgroundColor="blueberry300" margin="xxs" padding="l" textAlign="center" {...baseStyles}>
-      <Box border="dotted 2px" borderColor="blackPepper500">Large</Box>
+      <Box border="dotted 2px" borderColor="blackPepper500">
+        Large
+      </Box>
     </Box>
   </>
 );

package/dist/mdx/welcome.mdx

@@ -0,0 +1,48 @@
+import Readme from '../../../README.md';
+import Markdown from '../../../utils/storybook/Markdown.tsx';
+import {WelcomePage} from './welcomePage';
+import {InstallBlock} from './installBlock';
+import {version} from '../../../lerna.json';
+
+
+<WelcomePage />
+
+### Canvas Provider
+
+The `<CanvasProvider>` is required for proper branding support. Furthermore, if you use Emotion for
+styling your components, the `<CanvasProvider>` ensures your styles will merge as expected. Note:
+Custom use of `<CacheProvider>` provided by Emotion is not supported. `@workday/canvas-kit-styling`
+owns the creating of the cache reference. This ensures both static styling and Emotion’s dynamic
+styling solutions work together. In most cases you'll want to wrap your application at the root
+level in `<CanvasProvider>`.
+
+```tsx
+import * as React from 'react';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+// Ensure CSS variables are defined. You Can also do this at the root index.css
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+export const App = () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      // Switch to `ContentDirection.RTL` to change direction
+      direction: ContentDirection.LTR,
+    },
+  });
+  return (
+    <CanvasProvider theme={canvasTheme}>
+        <main>
+          <p>Get Started With Canvas Kit</p>
+        </main>
+    </CanvasProvider>
+  );
+};
+```

package/index.ts

@@ -1,3 +1,4 @@
+export {ExampleCodeBlock} from './lib/ExampleCodeBlock';
 export * from './lib/specs';
 export * from './lib/InformationHighlight';
 export * from './lib/Specifications';

package/lib/ExampleCodeBlock.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import {purebasic} from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const cardStencil = createStencil({
+  base: {
+    '[data-part="example-block"]': {
+      boxShadow: system.depth[1],
+      borderRadius: system.shape.x1,
+      position: 'relative',
+    },
+    '[data-part="code-block"]': {
+      display: 'none',
+      marginTop: calc.divide(system.space.x1, 2),
+      boxShadow: system.depth[1],
+      borderRadius: system.shape.x1,
+    },
+    '[data-part="code-toggle-btn"]': {
+      position: 'absolute',
+      right: calc.negate(px2rem(1)),
+      bottom: calc.negate(px2rem(1)),
+    },
+  },
+  modifiers: {
+    opened: {
+      true: {
+        '[data-part="code-block"]': {
+          display: 'block',
+          borderTopLeftRadius: system.shape.zero,
+          borderTopRightRadius: system.shape.zero,
+        },
+        '[data-part="example-block"]': {
+          borderBottomLeftRadius: system.shape.zero,
+          borderBottomRightRadius: system.shape.zero,
+        },
+      },
+    },
+  },
+});
+
+export const ExampleCodeBlock = ({code}: any) => {
+  const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
+
+  return (
+    <div {...cardStencil({opened: isCodeDisplayed})}>
+      <Card data-part="example-block" className="sb-unstyled">
+        <Card.Body>
+          {React.createElement(code)}
+          {code && (
+            <TertiaryButton
+              size="extraSmall"
+              onClick={() => setCodeDisplayed(!isCodeDisplayed)}
+              data-part="code-toggle-btn"
+            >
+              {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
+            </TertiaryButton>
+          )}
+        </Card.Body>
+      </Card>
+      <Card data-part="code-block">
+        <Card.Body>
+          {code && (
+            <SyntaxHighlighter
+              language="typescript"
+              style={purebasic}
+              customStyle={{
+                background: 'transparent',
+                fontSize: cssVar(system.fontSize.subtext.large),
+                lineHeight: cssVar(system.lineHeight.subtext.large),
+              }}
+              children={code.__RAW__}
+            />
+          )}
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};

package/lib/MDXElements.tsx

@@ -14,7 +14,8 @@ import {HeadingLevelContext, SymbolDialog} from './widgetUtils';
 export const MDX = createComponent('div')({
   Component({children, ...elemProps}, _ref, Element) {
     const components = useMDXComponents();
-    return React.createElement(components[Element], elemProps, children);
+
+    return React.createElement(components[Element] || Element, elemProps, children);
   },
 });
 

package/lib/Value.tsx

@@ -8,6 +8,7 @@ import {MdxJSToJSX} from './MDXElements';
 import {Table} from './Table';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -52,18 +53,19 @@ export const PropertiesInline = ({properties}: {properties: types.ObjectProperty
           <React.Fragment key={index}>
             <br />
             {indent(level + 1)}
-            {p.description ? (
+            {p.description || p.tags.deprecated ? (
               <DescriptionTooltip
                 type="describe"
                 style={{maxWidth: '50em'}}
-                title={<MdxJSToJSX>{p.description}</MdxJSToJSX>}
+                title={<MdxJSToJSX>{p.description || p.tags.deprecated}</MdxJSToJSX>}
               >
                 <span
                   className="token property"
                   style={{
                     cursor: 'pointer',
-                    textDecoration: 'underline',
+                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
                     textDecorationStyle: 'dotted',
+                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
                   }}
                 >
                   {p.name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.855-next.0",
+  "version": "12.0.0-alpha.898-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,20 +44,21 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.855-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.855-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.898-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.898-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.898-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.898-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.0",
+    "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
     "glob": "^7.1.6",
     "mkdirp": "^1.0.3",
-    "typescript": "4.2"
+    "typescript": "4.9"
   },
-  "gitHead": "9bf5667e2a94b160d69cb88c2e053d29760a34a9"
+  "gitHead": "f66aa921d2b0742a656b8e51364fa5b159b03d35"
 }

package/dist/mdx/changelog.stories.mdx

@@ -1,14 +0,0 @@
-import Changelog from '../../../CHANGELOG.md';
-import Markdown from '../../../utils/storybook/Markdown.tsx';
-
-<Meta
-  title="Changelog"
-  parameters={{
-    viewMode: 'docs',
-    previewTabs: {
-      canvas: {hidden: true},
-    },
-  }}
-/>
-
-<Markdown content={Changelog} />

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -1,8 +0,0 @@
-import SelectWithFormik from './examples/SelectWithFormik';
-
-
-# Canvas Kit Examples
-
-## Select Using Formik
-
-<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -1,8 +0,0 @@
-import TextInputWithFormik from './examples/TextInputWithFormik';
-
-
-# Canvas Kit Examples
-
-## Controlled Text Inputs Using Formik
-
-<ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithReactHookForm.mdx

@@ -1,8 +0,0 @@
-import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
-
-
-# Canvas Kit Examples
-
-## Uncontrolled Text Inputs Using React Hook Form
-
-<ExampleCodeBlock code={TextInputWithReactHookForm} />

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

@@ -1,149 +0,0 @@
-import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-import Basic from './examples/Basic';
-import Alert from './examples/Alert';
-import Error from './examples/Error';
-import Disabled from './examples/Disabled';
-import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
-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 FieldSet from './examples/FieldSet';
-import Grow from './examples/Grow';
-import ThemedError from './examples/ThemedErrors';
-
-
-# Canvas Kit Form Field
-
-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
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic
-
-Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
-accessibility standards. The orientation of the label by default is `vertical`.
-
-<ExampleCodeBlock code={Basic} />
-
-### Error States
-
-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:
-
-`"error" | "alert" | undefined`
-
-### Alert
-
-Use the alert state when a value is valid but there is additional information.
-
-<ExampleCodeBlock code={Alert} />
-
-### Error
-
-Use the error state when the value is no longer valid.
-
-<ExampleCodeBlock code={Error} />
-
-### Disabled
-
-Set the `disabled` prop of `FormField.Input` to prevent users from interacting with it.
-
-<ExampleCodeBlock code={Disabled} />
-
-### Hint
-
-Use `FormField.Hint` to display a short message below the input component and `FormField.Container`
-to ensure proper alignment.
-
-<ExampleCodeBlock code={Hint} />
-
-### Label Position Horizontal
-
-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`.
-
-<ExampleCodeBlock code={LabelPositionHorizontal} />
-
-### 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={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 `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} />
-
-### Field Set
-
-Set the `as` prop of the `FormField` to `fieldset` and the `as` prop of the `FormField.Label` to
-`legend` when using `RadioGroup` to ensure proper accessbility.
-
-<ExampleCodeBlock code={FieldSet} />
-
-### Custom
-
-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={Custom} />
-
-### Custom id
-
-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}`.
-
-<ExampleCodeBlock code={CustomId} />
-
-### All Fields
-
-Form Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,
-`TextArea`, `Switch`, and `RadioGroup`.
-
-<ExampleCodeBlock code={AllFields} />
-
-### Themed Errors
-
-You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
-`focusOutline` and `error` properties on the `theme`.
-
-<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
-
-<SymbolDoc name="FormField" fileName="/preview-react/" />

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-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('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField error="alert">
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-          <FormField.Hint>Cannot contain numbers</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Basic.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField>
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Error.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-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('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField error="error">
-        <FormField.Label>Password</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
-          <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/FieldSet.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Radio Group Legend</FormField.Label>
-        <FormField.Input as={RadioGroup} onChange={handleChange} value={value}>
-          <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="butter">
-            Butter - the best thing to put on bread
-          </RadioGroup.RadioButton>
-        </FormField.Input>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Grow.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField grow>
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/Hint.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-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('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <Flex>
-      <FormField orientation="horizontal">
-        <FormField.Label>First Name</FormField.Label>
-        <FormField.Container>
-          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-          <FormField.Hint>Cannot contain numbers</FormField.Hint>
-        </FormField.Container>
-      </FormField>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/form-field/examples/LabelPositionHorizontal.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <FormField orientation="horizontal">
-      <FormField.Label>Email</FormField.Label>
-      <FormField.Input as={TextInput} value={value} onChange={handleChange} />
-    </FormField>
-  );
-};