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

package/dist/mdx/react/checkbox/examples/Error.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField error="error" orientation="horizontal">
-      <FormField.Container>
+    <FormField error="error">
+      <FormField.Label>Confirm</FormField.Label>
+      <FormField.Field>
         <FormField.Input
           as={Checkbox}
           checked={checked}
@@ -19,7 +20,7 @@ export default () => {
           onChange={handleChange}
         />
         <FormField.Hint>You must agree to the terms before proceeding</FormField.Hint>
-      </FormField.Container>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/checkbox/examples/Inverse.tsx

@@ -5,7 +5,6 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = createStyles({
-  gap: system.space.x4,
   backgroundColor: system.color.bg.primary.default,
   padding: system.space.x4,
 });

package/dist/mdx/react/checkbox/examples/LabelPosition.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,14 +10,16 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal">
-      <FormField.Label>Terms</FormField.Label>
-      <FormField.Input
-        as={Checkbox}
-        checked={checked}
-        label="I agree to the terms"
-        onChange={handleChange}
-      />
+    <FormField orientation="horizontalStart">
+      <FormField.Label>Confirm</FormField.Label>
+      <FormField.Field>
+        <FormField.Input
+          as={Checkbox}
+          checked={checked}
+          label="I agree to the terms"
+          onChange={handleChange}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/checkbox/examples/RefForwarding.tsx

@@ -2,6 +2,14 @@ import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+const boxStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+});
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -17,13 +25,19 @@ export default () => {
 
   return (
     <>
-      <Box marginBottom="s">
-        <Checkbox
-          checked={checked}
-          label="I agree to the terms"
-          onChange={handleChange}
-          ref={ref}
-        />
+      <Box cs={boxStyles}>
+        <FormField>
+          <FormField.Label>Confirm</FormField.Label>
+          <FormField.Field>
+            <FormField.Input
+              as={Checkbox}
+              checked={checked}
+              label="I agree to the terms"
+              onChange={handleChange}
+              ref={ref}
+            />
+          </FormField.Field>
+        </FormField>
       </Box>
       <PrimaryButton onClick={handleClick}>Check Agreement to Terms</PrimaryButton>
     </>

package/dist/mdx/react/checkbox/examples/Required.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -11,13 +11,15 @@ export default () => {
 
   return (
     <FormField isRequired={true}>
-      <FormField.Label>Terms</FormField.Label>
-      <FormField.Input
-        as={Checkbox}
-        checked={checked}
-        label="I agree to the terms"
-        onChange={handleChange}
-      />
+      <FormField.Label>Confirm</FormField.Label>
+      <FormField.Field>
+        <FormField.Input
+          as={Checkbox}
+          checked={checked}
+          label="I agree to the terms"
+          onChange={handleChange}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/collection/{Collection.mdx → mdx/Collection.mdx}

@@ -1,6 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {ListBox} from '@workday/canvas-kit-react/collection';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import StringChildren from './examples/StringChildren';

package/dist/mdx/react/color-picker/color-input/ColorInput.mdx

@@ -1,8 +1,9 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {InformationHighlight} from '@workday/canvas-kit-docs';
-
+import {
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Checked from './examples/Checked';
@@ -14,7 +15,6 @@ import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
 import ValidColorChange from './examples/ValidColorChange';
 
-
 # Canvas Kit Color Input
 
 Color Input lets a user specify a color by entering a hexadecimal value into a text field.
@@ -29,18 +29,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 Color Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet

package/dist/mdx/react/color-picker/color-input/examples/Alert.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="alert">
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
-      <FormField.Hint>Please select a background color.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+        <FormField.Hint>Please select a background color.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Checked.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} showCheck={true} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Disabled.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField>
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={ColorInput} disabled onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Error.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,8 +12,10 @@ export default () => {
   return (
     <FormField error="error">
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
-      <FormField.Hint>Please select a background color.</FormField.Hint>
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+        <FormField.Hint>Please select a background color.</FormField.Hint>
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/Grow.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,7 +12,14 @@ export default () => {
   return (
     <FormField cs={{width: '100%'}}>
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input cs={{width: '100%'}} as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input
+          cs={{width: '100%'}}
+          as={ColorInput}
+          onChange={handleChange}
+          value={value}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/LabelPosition.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -10,9 +10,11 @@ export default () => {
   };
 
   return (
-    <FormField orientation="horizontal">
+    <FormField orientation="horizontalStart">
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -19,7 +19,9 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Background Color</FormField.Label>
-        <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />
+        <FormField.Field>
+          <FormField.Input as={ColorInput} onChange={handleChange} ref={ref} value={value} />
+        </FormField.Field>
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Color Input</PrimaryButton>
     </>

package/dist/mdx/react/color-picker/color-input/examples/Required.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 
 export default () => {
@@ -12,7 +12,9 @@ export default () => {
   return (
     <FormField isRequired={true}>
       <FormField.Label>Background Color</FormField.Label>
-      <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      <FormField.Field>
+        <FormField.Input as={ColorInput} onChange={handleChange} value={value} />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/react/color-picker/color-input/examples/ValidColorChange.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 {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {type} from '@workday/canvas-kit-react/tokens';
 
@@ -19,12 +19,14 @@ export default () => {
     <>
       <FormField>
         <FormField.Label>Background Color</FormField.Label>
-        <FormField.Input
-          as={ColorInput}
-          onChange={handleChange}
-          onValidColorChange={handleValidColorChange}
-          value={value}
-        />
+        <FormField.Field>
+          <FormField.Input
+            as={ColorInput}
+            onChange={handleChange}
+            onValidColorChange={handleValidColorChange}
+            value={value}
+          />
+        </FormField.Field>
       </FormField>
       <p style={type.levels.subtext.large}>Last valid color: {validColor}</p>
     </>

package/dist/mdx/react/color-picker/color-preview/ColorPreview.mdx

@@ -1,8 +1,9 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
-import {InformationHighlight} from '@workday/canvas-kit-docs';
-
+import {
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
@@ -22,18 +23,6 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-<InformationHighlight style={{margin: '1.5rem 0'}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
-  <InformationHighlight.Body>
-    These examples are using FormField from Preview. We can plan to promote this component to the
-    Main package in a future major version.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
-    View Form Field (Preview) Documentation
-  </InformationHighlight.Link>
-</InformationHighlight>
-
 ### Basic Example
 
 <ExampleCodeBlock code={Basic} />

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';