@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/lib/stackblitzFiles/packageJSONFile.ts

@@ -1,5 +1,6 @@
 // @ts-ignore: Cannot find module error
 import {version} from '../../../../lerna.json';
+
 export const packageJSONFile = `{
   "name": "vite-react-typescript-starter",
   "private": true,
@@ -23,8 +24,9 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "${version}",
     "@workday/canvas-kit-react-fonts": "^${version}",
     "@workday/canvas-kit-styling": "${version}",
-    "@workday/canvas-system-icons-web": "3.0.36",
-    "@workday/canvas-tokens-web": "3.1.2"
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-expressive-icons-web": "1.0.1",
+    "@workday/canvas-tokens-web": "4.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

package/lib/stackblitzFiles/types/custom-imports.d.ts

@@ -1,12 +1,3 @@
-declare module '!!raw-loader!*' {
-  const content: string;
-  export default content;
-}
-
-declare module 'vite' {
-  export function defineConfig(config: any): any;
-}
-
 declare module '@vitejs/plugin-react' {
   const react: any;
   export default react;

package/lib/stackblitzFiles/vite.config.ts

@@ -1,8 +1,6 @@
 /// <reference path="./types/custom-imports.d.ts" />
-
-import {defineConfig} from 'vite';
-
 import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({

package/lib/widgetUtils.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {useDialogModel, Dialog} from '@workday/canvas-kit-react/dialog';
-import {CanvasColor, colors, space, type} from '@workday/canvas-kit-react/tokens';
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
+import {Dialog, useDialogModel} from '@workday/canvas-kit-react/dialog';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
+import * as types from '../docgen/docTypes';
 import {MDX, MdxJSToJSX} from './MDXElements';
-import {Hyperlink} from '@workday/canvas-kit-react/button';
-import {docs} from './docs';
 import {Value} from './Value';
-import * as types from '../docgen/docTypes';
+import {docs} from './docs';
 
 /**
  * This context allows us to keep track if we're within a nested stack of dialog
@@ -129,7 +129,7 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
   if (nestedContext) {
     return (
       <ButtonHyperLink
-        style={{
+        cs={{
           border: 'none',
           background: 'transparent',
           fontSize: 'inherit',
@@ -149,7 +149,7 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
           as={ButtonHyperLink}
           className="token symbol"
           onClick={handleTargetClick}
-          style={{
+          cs={{
             border: 'none',
             background: 'transparent',
             fontSize: 'inherit',
@@ -163,13 +163,13 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
         {renderTypeParameters(value.typeParameters)}
 
         <Dialog.Popper>
-          <Dialog.Card maxHeight="50vh" maxWidth="90vh" minWidth={'600px'}>
+          <Dialog.Card cs={{maxHeight: '50vh', maxWidth: '90vh', minWidth: px2rem(600)}}>
             <Dialog.CloseIcon />
 
             <Dialog.Heading>{value.name} </Dialog.Heading>
             {breadcrumbsList.length > 1 && (
               <Breadcrumbs aria-label="Breadcrumbs">
-                <Breadcrumbs.List paddingX="xxs">
+                <Breadcrumbs.List cs={{paddingInline: system.padding.xs}}>
                   {breadcrumbsList.map((item, index) => {
                     return (
                       <>
@@ -223,42 +223,40 @@ export const SymbolDialog = ({value}: SymbolDialogProps) => {
   );
 };
 
-function createColor(color: CanvasColor) {
-  return {
-    color: colors[color],
-  };
-}
-
-const StyledSymbolDoc = styled('div')({
-  marginBottom: space.m,
-  'button[data-symbol]': {
-    border: 'none',
-    background: 'transparent',
-    fontSize: 'inherit',
-    fontFamily: 'inherit',
-  },
-  code: {
-    fontSize: type.properties.fontSizes[14],
-    lineHeight: 1.5,
-    fontFamily: type.properties.fontFamilies.monospace,
-    whiteSpace: 'nowrap',
-    '.token': {
-      '&.string': createColor('juicyPear600'),
-      '&.symbol': createColor('grapeSoda600'),
-
-      '&.property': createColor('berrySmoothie600'),
-      '&.primitive': createColor('pomegranate600'),
-      '&.number': createColor('pomegranate600'),
-      '&.boolean': createColor('pomegranate600'),
-      '&.variable': createColor('pomegranate600'),
-      '&.keyword': createColor('pomegranate600'),
-      '&.punctuation': createColor('blackPepper600'),
-      '&.operator': createColor('blackPepper600'),
-      '&.bold': {fontWeight: 700},
+const symbolDocStencil = createStencil({
+  base: {
+    marginBottom: system.gap.lg,
+    'button[data-symbol]': {
+      border: 'none',
+      background: 'transparent',
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+    },
+    code: {
+      ...system.type.subtext.lg,
+      fontFamily: system.fontFamily.mono,
+      whiteSpace: 'nowrap',
+      '.token': {
+        '&.string': {color: base.green700},
+        '&.symbol': {color: base.purple800},
+        '&.property': {color: base.blue800},
+        '&.primitive': {color: base.red800},
+        '&.number': {color: base.red800},
+        '&.boolean': {color: base.red800},
+        '&.variable': {color: base.red800},
+        '&.keyword': {color: base.red800},
+        '&.punctuation': {color: base.neutral1000},
+        '&.operator': {color: base.neutral1000},
+        '&.bold': {fontWeight: system.fontWeight.bold},
+      },
     },
   },
 });
 
+const StyledSymbolDoc = (props: Pick<SymbolDocProps, 'className'> & CSProps) => {
+  return <div {...handleCsProp(props, symbolDocStencil())} />;
+};
+
 function getSymbolDocChildren(doc?: types.ExportedSymbol, meta?: any, name?: string) {
   if (!doc) {
     // We're within  a symbol doc context, but there's no information, so we still want to render the basic type information
@@ -293,6 +291,7 @@ function findDoc({name, fileName}: ValueDocProps): types.ExportedSymbol<types.Va
 
 export const useDoc = (criteria: ValueDocProps) => {
   // Listen to criteria.name and criteria.fileName so that we can re-fetch docs in the dialog
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const doc = React.useMemo(() => findDoc(criteria), [criteria.name, criteria.fileName || '']);
 
   return doc;

package/lib/widgets/array.tsx

@@ -1,5 +1,5 @@
 import {ArrayValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 import {RenderContext} from '../widgetUtils';
 
 registerWidget<ArrayValue>('array', ({value}) => {

package/lib/widgets/callExpression.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import {CallExpression} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
-
+import {Value, registerWidget} from '../Value';
 import {IndentLevelContext, indent} from '../widgetUtils';
 
 registerWidget<CallExpression>('callExpression', ({value}) => {

package/lib/widgets/canvasColor.tsx

@@ -1,4 +1,3 @@
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {ColorPicker} from '@workday/canvas-kit-preview-react/color-picker';
 
 import {CanvasColorValue} from '../../docgen/plugins/customTypes';
@@ -6,6 +5,7 @@ import {registerWidget} from '../Value';
 
 registerWidget<CanvasColorValue>('canvasColor', () => {
   return (
-    <ColorPicker style={{width: 170}} colorSet={Object.values(colors)} onColorChange={() => {}} />
+    // eslint-disable-next-line no-empty-function
+    <ColorPicker style={{width: 170}} onColorChange={() => {}} />
   );
 });

package/lib/widgets/conditional.tsx

@@ -1,5 +1,5 @@
 import {ConditionalTypeValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 
 registerWidget<ConditionalTypeValue>('conditional', ({value}) => {
   return (

package/lib/widgets/enhancedComponent.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 import {defaultJSDoc} from '../../docgen/docParser';
+import * as types from '../../docgen/docTypes';
 import {EnhancedComponentValue} from '../../docgen/plugins/customTypes';
 import {MDX} from '../MDXElements';
 import {SymbolDoc} from '../SymbolDoc';
-import {PropertiesTable, registerWidget, Value} from '../Value';
+import {PropertiesTable, Value, registerWidget} from '../Value';
 import {Heading, HeadingLevelContext, SymbolDialog} from '../widgetUtils';
-import * as types from '../../docgen/docTypes';
 
 const ParentComponentNameContext = React.createContext('');
 /**
@@ -175,6 +175,7 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
 
 function groupProps(props: types.ObjectProperty[]): Record<string, types.ObjectProperty[]> {
   const categories: Record<string, types.ObjectProperty[]> = {Local: []};
+  // eslint-disable-next-line guard-for-in
   for (const key in fileNameToCategoryMap) {
     categories[key] = [];
   }
@@ -194,10 +195,13 @@ function groupProps(props: types.ObjectProperty[]): Record<string, types.ObjectP
   }
 
   // clear out categories that don't have anything in them
-  return Object.keys(categories).reduce((result, key) => {
-    if (categories[key].length) {
-      result[key] = categories[key];
-    }
-    return result;
-  }, {} as typeof categories);
+  return Object.keys(categories).reduce(
+    (result, key) => {
+      if (categories[key].length) {
+        result[key] = categories[key];
+      }
+      return result;
+    },
+    {} as typeof categories
+  );
 }

package/lib/widgets/external.tsx

@@ -1,9 +1,8 @@
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
-import {renderTypeParameters} from '../widgetUtils';
 import {ExternalSymbolValue} from '../../docgen/docTypes';
-
 import {registerWidget} from '../Value';
+import {renderTypeParameters} from '../widgetUtils';
 
 registerWidget<ExternalSymbolValue>('external', ({value}) => (
   <>

package/lib/widgets/function.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {FunctionValue, FunctionParameter} from '../../docgen/docTypes';
+import {FunctionParameter, FunctionValue} from '../../docgen/docTypes';
 import {DescriptionTooltip} from '../DescriptionTooltip';
 import {MdxJSToJSX} from '../MDXElements';
-import {registerWidget, Value} from '../Value';
-import {RenderContext, IndentLevelContext, indent, renderTypeParameters} from '../widgetUtils';
+import {Value, registerWidget} from '../Value';
+import {IndentLevelContext, RenderContext, indent, renderTypeParameters} from '../widgetUtils';
 
 registerWidget<FunctionValue>('function', ({value}) => {
   const level = React.useContext(IndentLevelContext);

package/lib/widgets/index.ts

@@ -6,9 +6,9 @@ import './conditional';
 import './enhancedComponent';
 import './external';
 import './function';
+import './intersection';
 import './model';
 import './object';
-import './intersection';
 import './parenthesis';
 import './primitives';
 import './symbol';

package/lib/widgets/intersection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {IntersectionValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 import {RenderContext} from '../widgetUtils';
 
 registerWidget<IntersectionValue>('intersection', ({value}) => {

package/lib/widgets/model.tsx

@@ -1,5 +1,5 @@
 import {ModelHookValue, ModelValue} from '../../docgen/plugins/customTypes';
-import {PropertiesTable, registerWidget, Value} from '../Value';
+import {PropertiesTable, Value, registerWidget} from '../Value';
 import {Heading} from '../widgetUtils';
 
 registerWidget<ModelValue>('model', ({value}) => {

package/lib/widgets/parenthesis.tsx

@@ -1,5 +1,5 @@
 import {ParenthesisValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 
 registerWidget<ParenthesisValue>('parenthesis', ({value}) => {
   return (

package/lib/widgets/primitives.tsx

@@ -1,4 +1,3 @@
-import {registerWidget, Value} from '../Value';
 import {
   BooleanLiteralValue,
   GenericValue,
@@ -9,6 +8,7 @@ import {
   StringLiteralValue,
   TypeValue,
 } from '../../docgen/docTypes';
+import {Value, registerWidget} from '../Value';
 import {renderTypeParameters} from '../widgetUtils';
 
 registerWidget<PrimitiveValue>('primitive', ({value}) => (
@@ -38,7 +38,8 @@ registerWidget<TypeValue>('type', ({value, doc}) => {
         <>
           <span className="token keyword">type</span>{' '}
           <span className="token symbol">{doc?.name || 'unknown'}</span>
-          {renderTypeParameters(value.typeParameters)} <span className="token operator">=</span>{' '}
+          {renderTypeParameters(value.typeParameters)}{' '}
+          <span className="token operator">=</span>{' '}
         </>
       )}
       <Value value={value.value} />

package/lib/widgets/qualifiedName.tsx

@@ -1,5 +1,5 @@
 import {QualifiedNameValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 
 registerWidget<QualifiedNameValue>('qualifiedName', ({value}) => {
   return (

package/lib/widgets/tuple.tsx

@@ -1,5 +1,5 @@
 import {TupleValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 import {RenderContext} from '../widgetUtils';
 
 registerWidget<TupleValue>('tuple', ({value}) => {

package/lib/widgets/typeParameter.tsx

@@ -1,5 +1,5 @@
 import {TypeParameter} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 
 registerWidget<TypeParameter>('typeParameter', ({value}) => {
   return (

package/lib/widgets/union.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {UnionValue} from '../../docgen/docTypes';
-import {registerWidget, Value} from '../Value';
+import {Value, registerWidget} from '../Value';
 import {IndentLevelContext, RenderContext, indent} from '../widgetUtils';
 
 registerWidget<UnionValue>('union', ({value}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.1303-next.0",
+  "version": "15.0.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/docs"
   },
   "files": [
@@ -22,11 +22,11 @@
   "scripts": {
     "watch": "yarn build:es6 -w",
     "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
-    "build:mdx": "node ./utils/build-mdx.js mdx/",
+    "build:mdx": "tsx ./utils/build-mdx.js mdx/",
     "build:es6": "tsc -p tsconfig.es6.json",
-    "build:docs": "node ./utils/build-docs.js",
+    "build:docs": "tsx ./utils/build-docs.js",
     "build:rebuild": "npm-run-all clean build",
-    "build:specs": "node ./utils/build-specifications.js",
+    "build:specs": "tsx ./utils/build-specifications.js",
     "build": "npm-run-all build:es6 build:mdx build:specs build:docs",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
     "typecheck:src": "tsc -p . --noEmit --incremental false"
@@ -43,14 +43,16 @@
   ],
   "dependencies": {
     "@emotion/styled": "^11.6.0",
+    "@mdx-js/react": "^3.1.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-system-icons-web": "^3.0.36",
-    "@workday/canvas-tokens-web": "^3.1.1",
+    "@workday/canvas-expressive-icons-web": "1.0.1",
+    "@workday/canvas-kit-labs-react": "^15.0.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0",
+    "@workday/canvas-kit-react": "^15.0.0",
+    "@workday/canvas-kit-styling": "^15.0.0",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-tokens-web": "4.3.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -61,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
+  "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
 }

package/webpack/extract-exports.js

@@ -20,7 +20,8 @@
   * @param {string} source
   */
 function extractExports(source) {
-  const exportPattern = /export (?:default|const|var|function)(?: class)?(?: function)? ([^:\s<();]*)/;
+  const exportPattern =
+    /export (?:default|const|var|function)(?: class)?(?: function)? ([^:\s<();]*)/;
   const exports = (source.match(new RegExp(exportPattern, 'g')) || [])
     .map(match => match.match(exportPattern)[1] || 'Example') // default export name to "Example"
     .filter(name => name.charAt(0).toUpperCase() === name.charAt(0))

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

@@ -1,68 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import Basic from './examples/Basic';
-import DisabledItem from './examples/DisabledItem';
-import GroupOfResult from './examples/GroupOfResult';
-import Grow from './examples/Grow';
-import NoClearButton from './examples/NoClearButton';
-import RTL from './examples/RTL';
-
-
-# Combobox <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Combobox` in Labs has been deprecated and will be removed in a future major version. Please
-    use `Combobox` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs">
-    Combobox Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-The term "Combobox" is based on the
-[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
-Authoring Practices Guide (APG):
-
-> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
-> that enables users to select a value for the combobox from a collection of possible values.
-
-Examples of a "combobox" would be date pickers, autocomplete, and select components.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-### Autocomplete
-
-<ExampleCodeBlock code={Basic} />
-
-### Grow
-
-<ExampleCodeBlock code={Grow} />
-
-### No Clear Button
-
-<ExampleCodeBlock code={NoClearButton} />
-
-### Group Of Result
-
-<ExampleCodeBlock code={GroupOfResult} />
-
-### Disabled Item
-
-<ExampleCodeBlock code={DisabledItem} />
-
-### RTL
-
-<ExampleCodeBlock code={RTL} />

package/dist/mdx/labs-react/combobox/examples/Basic.tsx

@@ -1,88 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem aria-disabled={disabled}>
-    Result
-    <span>
-      num<span>ber</span>
-    </span>
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <FormField id="autocomplete-123">
-      <FormField.Label>Autocomplete example</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} />
-      </FormField.Field>
-    </FormField>
-  );
-};