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

package/dist/mdx/react/button/button/examples/CustomStyles.tsx

@@ -15,6 +15,11 @@ const myButtonStencil = createStencil({
     [systemIconStencil.vars.color]: system.color.static.green.strong,
     [buttonStencil.vars.borderRadius]: system.shape.half,
     border: `${px2rem(3)} solid transparent`,
+    '&:focus-visible': {
+      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,
+      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+    },
     '&:hover': {
       [buttonStencil.vars.background]: system.color.static.green.default,
       border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
@@ -29,8 +34,8 @@ const myButtonStencil = createStencil({
 });
 
 const MyCustomButton = createComponent('button')({
-  Component: ({children, size, ...elemProps}: PrimaryButtonProps, ref, Element) => (
-    <PrimaryButton ref={ref} {...handleCsProp(elemProps, myButtonStencil({size}))}>
+  Component: ({children, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <PrimaryButton as={Element} ref={ref} {...handleCsProp(elemProps, myButtonStencil())}>
       {children}
     </PrimaryButton>
   ),
@@ -43,14 +48,23 @@ const myCustomStyles = createStyles({
 
 const customColors = {
   default: {
-    background: system.color.static.green.soft,
-    icon: system.color.static.green.strong,
-    label: system.color.static.green.strong,
+    background: system.color.static.orange.soft,
+    icon: system.color.static.orange.strong,
+    label: system.color.static.orange.strong,
   },
   hover: {
-    background: system.color.static.green.default,
-    icon: system.color.static.green.strong,
+    background: system.color.static.orange.default,
+    icon: system.color.static.orange.strong,
+  },
+  active: {
+    background: system.color.static.orange.strong,
+  },
+  focus: {
+    background: system.color.static.orange.strong,
+    boxShadowInner: system.color.static.orange.soft,
+    boxShadowOuter: system.color.static.orange.strong,
   },
+  disabled: {},
 };
 
 export default () => (

package/dist/mdx/react/button/button/examples/Delete.tsx

@@ -20,6 +20,6 @@ export default () => (
     <DeleteButton icon={trashIcon} iconPosition="end">
       Delete
     </DeleteButton>
-    <DeleteButton icon={trashIcon} />
+    <DeleteButton aria-label="trash" icon={trashIcon} />
   </Flex>
 );

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -24,6 +24,6 @@ export default () => (
     <PrimaryButton icon={caretDownIcon} iconPosition="end">
       Primary
     </PrimaryButton>
-    <PrimaryButton icon={relatedActionsVerticalIcon} />
+    <PrimaryButton aria-label="related-actions" icon={relatedActionsVerticalIcon} />
   </Flex>
 );

package/dist/mdx/react/card/card.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Card} from '@workday/canvas-kit-react/card';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
@@ -43,6 +40,8 @@ You can also use `Card` stencils to extend styles for your own custom components
 compose styles without using components directly. In the example below, we're extending `Card`
 stencils to create a custom `MenuCard` component.
 
+Here's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).
+
 <ExampleCodeBlock code={WithStencils} />
 
 ## Component API

package/dist/mdx/react/checkbox/Checkbox.mdx

@@ -1,8 +1,9 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Checkbox} from '@workday/canvas-kit-react/checkbox/lib/Checkbox.tsx';
-import {InformationHighlight} from '@workday/canvas-kit-docs';
-
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Inverse from './examples/Inverse';
@@ -29,18 +30,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
 
 Checkbox may be used on its own without [Form Field](/components/inputs/form-field/) since it

package/dist/mdx/react/checkbox/examples/Alert.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="alert" orientation="horizontal">
-      <FormField.Container>
+    <FormField error="alert">
+      <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/Basic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -8,5 +9,17 @@ export default () => {
     setChecked(event.target.checked);
   };
 
-  return <Checkbox checked={checked} label="I agree to the terms" onChange={handleChange} />;
+  return (
+    <FormField>
+      <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/Disabled.tsx

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

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} />