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

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {system} from '@workday/canvas-tokens-web';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+
+const formStyles = createStyles({
+  margin: `${system.space.zero} ${system.space.x3}`,
+});
+
+const formButtonStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+const toppings = [
+  {
+    id: 1,
+    label: 'Pepperoni',
+    checked: false,
+  },
+  {
+    id: 2,
+    label: 'Cheese',
+    checked: false,
+  },
+  {
+    id: 3,
+    label: 'Pineapple',
+    checked: false,
+  },
+  {
+    id: 4,
+    label: 'Mushrooms',
+    checked: false,
+  },
+];
+
+const bannerStyles = createStyles({
+  position: 'absolute',
+  right: 0,
+});
+
+export default () => {
+  const [toppingsState, setToppingsState] = React.useState(toppings);
+  const [error, setError] = React.useState(undefined);
+  const [radioError, setRadioError] = React.useState(undefined);
+  const [showSuccess, setShowSuccess] = React.useState(false);
+
+  const [value, setValue] = React.useState<string>('');
+  const [formData, setFormData] = React.useState({
+    toppings: [],
+    crust: '',
+  });
+  const handleCheckboxCheck = id => {
+    if (error) {
+      setError(undefined);
+    }
+    setToppingsState(
+      toppingsState.map(item => (item.id === id ? {...item, checked: !item.checked} : item))
+    );
+  };
+
+  const handleRadioChange = (e: React.ChangeEvent) => {
+    if (radioError) {
+      setRadioError(undefined);
+    }
+    const target = e.currentTarget;
+    if (target instanceof HTMLInputElement) {
+      setValue(target.value);
+    }
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    const radioError = !value && toppingsState.some(item => !item.checked) ? 'error' : undefined;
+    const error = toppingsState.every(item => !item.checked) ? 'error' : undefined;
+
+    setRadioError(radioError);
+    setError(error);
+    if (!error && !radioError && toppingsState.some(item => item.checked) && value) {
+      setShowSuccess(true);
+    }
+    setFormData({
+      toppings: toppingsState,
+      crust: value,
+    });
+  };
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (showSuccess) {
+        setShowSuccess(false);
+      }
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, [showSuccess]);
+
+  const handleReset = () => {
+    setFormData({toppings: [], crust: ''});
+    setError(undefined);
+    setValue('');
+    setRadioError('');
+    setShowSuccess(false);
+    setToppingsState(
+      toppingsState.map(item => {
+        return {...item, checked: false};
+      })
+    );
+  };
+
+  return (
+    <div>
+      <h3>Choose your pizza options</h3>
+      <AriaLiveRegion role="alert">
+        <div style={{display: 'flex', gap: '40px'}}>
+          {error || radioError ? (
+            <Banner isSticky hasError className={bannerStyles}>
+              <Banner.Label>
+                {error && radioError
+                  ? 'At least one topping and crust selection is required'
+                  : error
+                  ? 'You must choose at least one topping'
+                  : radioError
+                  ? 'You must choose a crust'
+                  : ''}
+              </Banner.Label>
+            </Banner>
+          ) : null}
+          {showSuccess && (
+            <Banner isSticky className={bannerStyles}>
+              <Banner.Label>You've successfully submitted your pizza options.</Banner.Label>
+            </Banner>
+          )}
+        </div>
+      </AriaLiveRegion>
+
+      <form className={formStyles} onSubmit={handleSubmit}>
+        <FormFieldGroup error={error} isRequired>
+          <FormFieldGroup.Label>Choose Your Toppings</FormFieldGroup.Label>
+          <FormFieldGroup.List>
+            {toppingsState.map(item => {
+              return (
+                <FormFieldGroup.Input
+                  key={item.id}
+                  onChange={() => handleCheckboxCheck(item.id)}
+                  checked={item.checked}
+                  value={item.label}
+                  as={Checkbox}
+                  disabled={item.label === 'Pineapple' ? true : undefined}
+                  label={item.label}
+                />
+              );
+            })}
+          </FormFieldGroup.List>
+          <FormFieldGroup.Hint>
+            {error === 'error' && 'You must choose one topping'}
+          </FormFieldGroup.Hint>
+        </FormFieldGroup>
+        <FormFieldGroup error={radioError} isRequired>
+          <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>
+          <FormFieldGroup.Field>
+            <FormFieldGroup.List
+              as={RadioGroup}
+              onChange={handleRadioChange}
+              value={value}
+              name="crust"
+            >
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin-crust">
+                Thin Crust
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="hand-tossed">
+                Hand Tossed
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+                Deep Dish
+              </FormFieldGroup.Input>
+              <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+                Cauliflower
+              </FormFieldGroup.Input>
+            </FormFieldGroup.List>
+            <FormFieldGroup.Hint>
+              {radioError === 'error' ? 'You must choose a crust' : null}
+            </FormFieldGroup.Hint>
+          </FormFieldGroup.Field>
+        </FormFieldGroup>
+        <div className={formButtonStyles}>
+          <PrimaryButton type="submit">Submit Your Choices</PrimaryButton>
+          <SecondaryButton onClick={() => handleReset()}>Reset Form</SecondaryButton>
+        </div>
+      </form>
+      <div>
+        <div>
+          Selected Toppings:{' '}
+          {!error && formData.toppings.map(item => (item.checked ? `${item.label} ` : null))}
+        </div>
+        <div>Selected Crust: {formData.crust}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 export default () => {
@@ -10,8 +11,11 @@ export default () => {
   };
 
   return (
-    <FormField grow={true} label="Email">
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField grow>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
   );
 };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -11,12 +12,14 @@ export default () => {
   };
 
   return (
-    <FormField
-      hintId={useUniqueId()}
-      hintText="This address will be shown as a shipping address option for future orders."
-      label="Address Name"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  flexDirection: 'column',
+});
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <form className={formStyles}>
+      <FormField orientation="horizontalEnd">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+      <FormField orientation="horizontalEnd">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Input as={TextInput} type="password" />
+      </FormField>
+    </form>
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  flexDirection: 'column',
+});
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <form className={formStyles}>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Input as={TextInput} type="password" />
+      </FormField>
+    </form>
+  );
+};

package/dist/mdx/{preview-react → react}/form-field/examples/RefForwarding.tsx

@@ -3,7 +3,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -29,7 +29,9 @@ export default () => {
     <Flex cs={parentContainerStyles}>
       <FormField>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
+        </FormField.Field>
       </FormField>
       <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
     </Flex>

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -10,8 +10,16 @@ export default () => {
   };
 
   return (
-    <FormField label="Email" required={true}>
-      <TextInput onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Email</FormField.Label>
+      <FormField.Field>
+        <FormField.Input
+          as={TextInput}
+          placeholder="your@gmail.com"
+          onChange={handleChange}
+          value={value}
+        />
+      </FormField.Field>
     </FormField>
   );
 };

package/dist/mdx/{preview-react → react}/form-field/examples/ThemedErrors.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -34,10 +34,12 @@ export default () => {
     <CanvasProvider theme={theme}>
       <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint cs={formFieldHintStyles}>
-          {!value && 'Please enter an email.'}
-        </FormField.Hint>
+        <FormField.Field>
+          <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+          <FormField.Hint cs={formFieldHintStyles}>
+            {!value && 'Please enter an email.'}
+          </FormField.Hint>
+        </FormField.Field>
       </FormField>
     </CanvasProvider>
   );

package/dist/mdx/react/icon/Assets.mdx

@@ -1,28 +1,35 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import SystemIconList from './examples/IconList';
 import AppletIconList from './examples/AppletIconList';
-import{AccentIconList} from './examples/AccentIconList.tsx'
-import Overview from './examples/Overview'
+import AccentIconList from './examples/AccentIconList';
+import Overview from './examples/Overview';
 
 
 # Assets
-Assets are graphics which help communicate meaning or highlight areas of interaction to our users. These may be presented individually or as part of a group with related information in components and patterns.
+
+Assets are graphics which help communicate meaning or highlight areas of interaction to our users.
+These may be presented individually or as part of a group with related information in components and
+patterns.
 
 <ExampleCodeBlock code={Overview} />
 
 ## Accent Icon List
 
-Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating the overall tone and meaning of a page.
+Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating
+the overall tone and meaning of a page.
 
 <ExampleCodeBlock code={AccentIconList} />
 
 ## Applet Icon List
 
-Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.
+Applet Icons convey entry points, categories of actions, or information sources on the Workday
+homepage.
 
 <ExampleCodeBlock code={AppletIconList} />
 
 ## System Icon List
 
-System Icons are symbols used to convey simple actions and functions, they are the most common icons encountered in products and help communicate metaphors at a glance.
+System Icons are symbols used to convey simple actions and functions, they are the most common icons
+encountered in products and help communicate metaphors at a glance.
 
 <ExampleCodeBlock code={SystemIconList} />

package/dist/mdx/react/icon/examples/AccentIconList.tsx

@@ -8,7 +8,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
-const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
+const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccentIcons');
 
 const styleOverrides = {
   parentContainer: createStyles({

package/dist/mdx/react/layout/Box.mdx

@@ -1,8 +1,6 @@
-import {Box} from '@workday/canvas-kit-react/layout';
-// examples
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Box/Basic';
 
-
 # Box
 
 `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens. It

package/dist/mdx/react/layout/Flex.mdx

@@ -1,8 +1,6 @@
-import {Flex} from '@workday/canvas-kit-react/layout';
-// examples
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Flex/Basic';
 
-
 # Canvas Kit Flex
 
 `Flex` is a low-level layout component that provides a common, ergonomic API for building
@@ -53,14 +51,16 @@ building layouts.
 
 #### Props
 
-`Flex` exposes [flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+`Flex` exposes
+[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map to CSS Flexbox Item
-properties. This provides greater control over how child components render in your layout.
+[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
+to CSS Flexbox Item properties. This provides greater control over how child components render in
+your layout.
 
 ```tsx
 <Flex flexDirection="column" rowGap="xs">
@@ -72,5 +72,6 @@ properties. This provides greater control over how child components render in yo
 
 #### Props
 
-`Flex.Item` exposes [flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+`Flex.Item` exposes
+[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -1,10 +1,8 @@
-import {Grid, GridItem} from '@workday/canvas-kit-react/layout';
-// examples
-import GridLayout from './examples/Grid/GridLayout';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Grid/Basic';
+import GridLayout from './examples/Grid/GridLayout';
 import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 
-
 # Canvas Kit Grid
 
 `Grid` is a low-level layout component that provides a common, ergonomic API for building

package/dist/mdx/react/loading-dots/LoadingDots.mdx

@@ -1,10 +1,8 @@
-import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import RTL from './examples/RTL';
 import Accessible from './examples/Accessible';
 
-
 # Canvas Kit Loading Dots
 
 Loading Dots make users aware that content is currently being loaded, processing, or that change

package/dist/mdx/react/menu/Menu.mdx

@@ -1,11 +1,8 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import {Menu} from '@workday/canvas-kit-react/menu';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
 
-
 # Canvas Kit Menu
 
 `Menu` displays a list of options when triggered by an action or UI element like an icon or button.

package/dist/mdx/react/menu/examples/MenuWithFallbackPlacements.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {PopperController} from '../../../../../utils/storybook';
+import {Placement} from '@workday/canvas-kit-react/popup';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [placement, setPlacement] = React.useState<Placement>('top');
+  const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
+  const [marginRightBtn, setMarginRightBtn] = React.useState(0);
+  const [selected, setSelected] = React.useState('');
+
+  const handlePlacement = (placement: Placement) => {
+    setPlacement(placement);
+  };
+
+  const handleMarginLeftBtn = (marginLeftBtn: number) => {
+    setMarginLeftBtn(marginLeftBtn);
+  };
+
+  const handleMarginRightBtn = (marginLeftBtn: number) => {
+    setMarginRightBtn(marginLeftBtn);
+  };
+
+  return (
+    <div style={{height: 1200}} data-testid="scroll-area-fallback-placement">
+      <PopperController
+        marginLeftBtn={marginLeftBtn}
+        marginRightBtn={marginRightBtn}
+        placement={placement}
+        onSetPlacement={handlePlacement}
+        onSetMarginLeftBtn={handleMarginLeftBtn}
+        onSetMarginRightBtn={handleMarginRightBtn}
+      >
+        <Flex
+          width="100%"
+          marginTop={240}
+          justifyContent="center"
+          alignItems="center"
+          flexDirection="column"
+        >
+          <Menu onSelect={data => setSelected(data.id)}>
+            <Menu.Target style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}>
+              Open Menu
+            </Menu.Target>
+            <Menu.Popper placement={placement}>
+              <Menu.Card>
+                <Menu.List>
+                  <Menu.Item>First Item</Menu.Item>
+                  <Menu.Item>Second Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+                  <Menu.Item aria-disabled>Fourth Item</Menu.Item>
+                </Menu.List>
+              </Menu.Card>
+            </Menu.Popper>
+            <BodyText size="small" marginTop="s" marginLeft={20}>
+              Selected: <span data-testid="output">{selected}</span>
+            </BodyText>
+          </Menu>
+        </Flex>
+      </PopperController>
+    </div>
+  );
+};

package/dist/mdx/react/modal/Modal.mdx

@@ -1,6 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Modal} from '@workday/canvas-kit-react/modal';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import WithoutCloseIcon from './examples/WithoutCloseIcon';
@@ -11,7 +9,6 @@ import BodyOverflow from './examples/BodyOverflow';
 import FullOverflow from './examples/FullOverflow';
 import FormModal from './examples/FormModal';
 
-
 # Canvas Kit Modal
 
 A Modal component is a type of Dialog that renders a translucent overlay that prevents user

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 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 {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {useUniqueId} from '@workday/canvas-kit-react/common';

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
-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 {plusIcon} from '@workday/canvas-system-icons-web';