@workday/canvas-kit-docs 15.0.3 → 15.0.5

package/dist/es6/lib/ExampleCodeBlock.js

@@ -121,7 +121,7 @@ export const ExampleCodeBlock = ({ code }) => {
             openFile: 'src/Demo.tsx',
         });
     };
-    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsx(Card.Body, { "data-part": "example-block-container", children: _jsxs(CanvasProvider, { className: defaultBranding, children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsx(Card.Body, { cs: { position: 'relative' }, children: _jsxs(CanvasProvider, { className: defaultBranding, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
+    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsx(Card.Body, { "data-part": "example-block-container", children: _jsxs(CanvasProvider, { className: defaultBranding, children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }) }), _jsx(Card, { "data-part": "code-block", cs: { padding: 0 }, children: _jsx(Card.Body, { cs: { position: 'relative' }, children: _jsxs(CanvasProvider, { className: defaultBranding, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
                                         fontSize: cssVar(system.fontSize.subtext.lg),
                                         lineHeight: cssVar(system.lineHeight.subtext.lg),
                                         margin: '0',

package/dist/es6/lib/Table.js

@@ -16,7 +16,7 @@ const TableBody = createComponent('tbody')({
 });
 const tableRowStencil = createStencil({
     base: {
-        borderBottom: `${px2rem(1)} solid ${system.color.border.strong}`,
+        borderBlockEnd: `${px2rem(1)} solid ${system.color.border.strong}`,
     },
 });
 const TableRow = createComponent('tr')({
@@ -53,7 +53,7 @@ const TableData = createComponent('td')({
 const tableCaptionStencil = createStencil({
     base: {
         borderCollapse: 'collapse',
-        marginBottom: system.gap.md,
+        marginBlockEnd: system.gap.md,
         width: '100%',
     },
 });

package/dist/es6/lib/docs.js

@@ -118188,7 +118188,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
   {
     "name": "ExternalHyperlink",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/ExternalHyperlink.tsx",
-    "description": "`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\nlink on a dark or colorful background such as `blueberry400`.",
+    "description": "`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the\nlink on a dark or colorful background such as `system.color.accent.info`.",
     "declarations": [
       {
         "name": "ExternalHyperlink",
@@ -196715,20 +196715,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "ellipsisStyles",
+    "name": "EllipsisTextProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/EllipsisText.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "ellipsisStyles",
+        "name": "EllipsisTextProps",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/EllipsisText.tsx"
       }
     ],
     "tags": {},
     "type": {
-      "kind": "symbol",
-      "name": "CSSObject",
-      "value": "CSSObject"
+      "kind": "alias",
+      "name": "EllipsisText"
     }
   },
   {
@@ -196750,14 +196749,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "kind": "property",
           "name": "children",
-          "description": "",
-          "tags": {},
-          "declarations": [],
+          "required": true,
           "type": {
             "kind": "external",
-            "name": "React.ReactNode",
+            "name": "ReactNode",
             "url": "https://reactjs.org/docs/rendering-elements.html"
-          }
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/EllipsisText.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles }, or the result of {@link createVars } and\n{@link createModifiers }. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp } wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.0.3",
-    "@workday/canvas-kit-preview-react": "15.0.3",
-    "@workday/canvas-kit-react": "15.0.3",
-    "@workday/canvas-kit-react-fonts": "^15.0.3",
-    "@workday/canvas-kit-styling": "15.0.3",
+    "@workday/canvas-kit-labs-react": "15.0.5",
+    "@workday/canvas-kit-preview-react": "15.0.5",
+    "@workday/canvas-kit-react": "15.0.5",
+    "@workday/canvas-kit-react-fonts": "^15.0.5",
+    "@workday/canvas-kit-styling": "15.0.5",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.0.3",
-    "@workday/canvas-kit-preview-react": "15.0.3",
-    "@workday/canvas-kit-react": "15.0.3",
-    "@workday/canvas-kit-react-fonts": "^15.0.3",
-    "@workday/canvas-kit-styling": "15.0.3",
+    "@workday/canvas-kit-labs-react": "15.0.5",
+    "@workday/canvas-kit-preview-react": "15.0.5",
+    "@workday/canvas-kit-react": "15.0.5",
+    "@workday/canvas-kit-react-fonts": "^15.0.5",
+    "@workday/canvas-kit-styling": "15.0.5",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/es6/lib/widgetUtils.js

@@ -105,7 +105,7 @@ export const SymbolDialog = ({ value }) => {
 };
 const symbolDocStencil = createStencil({
     base: {
-        marginBottom: system.gap.lg,
+        marginBlockEnd: system.gap.lg,
         'button[data-symbol]': {
             border: 'none',
             background: 'transparent',

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/FilterListWithLiveStatus.js

@@ -23,11 +23,11 @@ const liveRegionStyle = createStyles({
     padding: system.padding.xs,
 });
 const listStyles = createStyles({
-    paddingLeft: '0',
+    paddingInlineStart: '0',
 });
 const listItemStyles = createStyles({
     listStyle: 'none',
-    paddingLeft: '0',
+    paddingInlineStart: '0',
 });
 const flexStyles = createStyles({
     gap: system.gap.md,

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButtonsWithLiveBadges.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx"],"names":[],"mappings":"AA2EA,eAAO,MAAM,yBAAyB,+CAuBrC,CAAC"}
+{"version":3,"file":"IconButtonsWithLiveBadges.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx"],"names":[],"mappings":"AAiFA,eAAO,MAAM,yBAAyB,+CAuBrC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/IconButtonsWithLiveBadges.js

@@ -4,9 +4,10 @@ import { CountBadge } from '@workday/canvas-kit-react/badge';
 import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
 import { AccessibleHide, AriaLiveRegion, useUniqueId } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
-import { space } from '@workday/canvas-kit-react/tokens';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStyles } from '@workday/canvas-kit-styling';
 import { assistantIcon, inboxIcon, notificationsIcon } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 const MyTasksLiveBadge = ({ cnt }) => {
     // use tooltip to assign name,
     // use AriaLiveRegion inside button,
@@ -40,6 +41,10 @@ const AssistantLiveBadge = ({ cnt }) => {
     const lbl = 'Workday Assistant';
     return (_jsx(AriaLiveRegion, { children: _jsx(Tooltip, { title: lbl, type: "muted", children: _jsxs(TertiaryButton, { icon: assistantIcon, children: [_jsx(AccessibleHide, { children: lbl }), _jsx(CountBadge, { count: cnt }), _jsx(AccessibleHide, { children: "New" })] }) }) }));
 };
+const containerStyles = createStyles({
+    padding: system.padding.md,
+    gap: system.gap.md,
+});
 export const IconButtonsWithLiveBadges = () => {
     const [counter, setCounter] = React.useState(0);
     const [notifications, setNotifications] = React.useState(0);
@@ -47,5 +52,5 @@ export const IconButtonsWithLiveBadges = () => {
     const handleAddTask = () => setCounter(prev => prev + 1);
     const handleAddNotification = () => setNotifications(prev => prev + 1);
     const handleAssistant = () => setAssistant(prev => prev + 1);
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { padding: space.s, gap: space.s, as: "header", children: [_jsx(AssistantLiveBadge, { cnt: assistant }), _jsx(NotificationsLiveBadge, { cnt: notifications }), _jsx(MyTasksLiveBadge, { cnt: counter })] }), _jsxs(Flex, { padding: space.s, gap: space.s, as: "main", children: [_jsx(SecondaryButton, { onClick: handleAssistant, children: "Add a Message" }), _jsx(SecondaryButton, { onClick: handleAddNotification, children: "Add a Notification" }), _jsx(SecondaryButton, { onClick: handleAddTask, children: "Add an item to My Tasks" })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "header", cs: containerStyles, children: [_jsx(AssistantLiveBadge, { cnt: assistant }), _jsx(NotificationsLiveBadge, { cnt: notifications }), _jsx(MyTasksLiveBadge, { cnt: counter })] }), _jsxs(Flex, { as: "main", cs: containerStyles, children: [_jsx(SecondaryButton, { onClick: handleAssistant, children: "Add a Message" }), _jsx(SecondaryButton, { onClick: handleAddNotification, children: "Add a Notification" }), _jsx(SecondaryButton, { onClick: handleAddTask, children: "Add an item to My Tasks" })] })] }));
 };

package/dist/es6/mdx/accessibility/examples/GlobalHeader.js

@@ -136,7 +136,7 @@ const Autocomplete = createComponent('div')({
                 loader.load();
             },
         }, useComboboxModel);
-        return (_jsxs(Combobox, { model: model, children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { cs: styleOverrides.inputGroupInner, children: _jsx(SystemIcon, { icon: searchIcon }) }), _jsx(InputGroup.Input, { as: AutoCompleteInput, cs: styleOverrides.comboboxInput, onChange: handleChange, value: searchText, ...props })] }), _jsx(Combobox.Menu.Popper, { children: _jsx(Combobox.Menu.Card, { children: model.state.items.length === 0 ? (_jsx(StyledMenuItem, { as: "span", children: "No Results Found" })) : (model.state.items.length > 0 && (_jsx(Combobox.Menu.List, { maxHeight: px2rem(200), children: item => _jsx(Combobox.Menu.Item, { children: item }) }))) }) })] }));
+        return (_jsxs(Combobox, { model: model, children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { cs: styleOverrides.inputGroupInner, children: _jsx(SystemIcon, { icon: searchIcon }) }), _jsx(InputGroup.Input, { as: AutoCompleteInput, cs: styleOverrides.comboboxInput, onChange: handleChange, value: searchText, ...props })] }), _jsx(Combobox.Menu.Popper, { children: _jsx(Combobox.Menu.Card, { children: model.state.items.length === 0 ? (_jsx(StyledMenuItem, { as: "span", children: "No Results Found" })) : (model.state.items.length > 0 && (_jsx(Combobox.Menu.List, { cs: { maxHeight: px2rem(200) }, children: item => _jsx(Combobox.Menu.Item, { children: item }) }))) }) })] }));
     },
 });
 const NotificationLiveBadge = createComponent('span')({

package/dist/es6/mdx/accessibility/examples/Popups/InlinePopupNoPortal.js

@@ -8,7 +8,7 @@ import { Heading } from '@workday/canvas-kit-react/text';
 import { createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const headingStyles = createStyles({
-    marginTop: '0',
+    marginBlockStart: '0',
 });
 const cardStyles = createStyles({
     width: px2rem(320),
@@ -45,7 +45,7 @@ const comparisonLayoutStyles = createStyles({
     display: 'grid',
     gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
     gap: system.gap.lg,
-    marginBottom: system.gap.md,
+    marginBlockEnd: system.gap.md,
 });
 function SingleInlinePopup({ overflowLabel, containerStyles, }) {
     const messageId = useUniqueId();

package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.js

@@ -58,17 +58,17 @@ const stylesOverride = {
         listStyle: 'none',
         padding: system.padding.md,
         flexDirection: 'column',
-        marginTop: system.gap.xl,
+        marginBlockStart: system.gap.xl,
     }),
     links: createStyles({
         textDecoration: 'none',
         padding: system.padding.md,
     }),
     linkCheck: createStyles({
-        marginLeft: 'auto',
+        marginInlineStart: 'auto',
     }),
     flyOut: createStyles({
-        marginTop: '8rem',
+        marginBlockStart: '8rem',
     }),
 };
 const Accordion = ({ config }) => {

package/dist/es6/mdx/welcomePage.js

@@ -21,7 +21,7 @@ const parentFlexStyles = createStyles({
     display: 'flex',
     flexDirection: 'column',
     gap: system.gap.md,
-    marginBottom: system.gap.lg,
+    marginBlockEnd: system.gap.lg,
 });
 const bannerTextStyles = createStyles({
     color: system.color.fg.inverse,
@@ -43,7 +43,7 @@ const gridStyles = createStyles({
 });
 const linkStyles = createStyles({
     alignSelf: 'end',
-    marginTop: px2rem(12),
+    marginBlockStart: px2rem(12),
 });
 export const WelcomePage = () => {
     return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.gap.xs }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { cs: {

package/dist/mdx/accessibility/InlinePortals.mdx

@@ -1,12 +1,13 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import InlinePortalPopup from './examples/Popups/InlinePortalPopup';
 
 
 ## Inline portal with `PopupStack`
 
 This example builds on the patterns described in
-[Guides > Accessibility > Inline Popups](?path=/docs/guides-accessibility-inline-popups--docs).
-It does **not** use a focus trap. For modal dialogs with overlay and focus trap, use the
+[Guides > Accessibility > Inline Popups](?path=/docs/guides-accessibility-inline-popups--docs). It
+does **not** use a focus trap. For modal dialogs with overlay and focus trap, use the
 [**Modal**](?path=/docs/components-popups-modal--docs) component instead.
 
 Keep using a portal (default stacking and positioning) but mount the portal **into a sentinel

package/dist/mdx/accessibility/PageStructure.mdx

@@ -1,5 +1,4 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-
 import FullPageDemo from './examples/PageStructure/FullPageDemo';
 import LandmarkRegions from './examples/PageStructure/LandmarkRegions';
 

package/dist/mdx/accessibility/Popups.mdx

@@ -1,4 +1,5 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import InlinePopupNoPortal from './examples/Popups/InlinePopupNoPortal';
 import PopupAriaOwns from './examples/Popups/PopupAriaOwns';
 

package/dist/mdx/accessibility/WindowsHighContrastThemes.mdx

@@ -33,7 +33,7 @@ focusable components inside popup containers like the `<Menu>` component to ensu
 indicator isn’t clipped off the edge. (For example:
 [MenuItem](https://github.com/Workday/canvas-kit/blob/master/modules/react/menu/lib/MenuItem.tsx).)
 
-<Flex cs={{justifyContent: 'space-evenly', paddingBottom: system.padding.md}}>
+<Flex cs={{justifyContent: 'space-evenly', paddingBlockEnd: system.padding.md}}>
   <img src={buttonFocus} alt="Primary button with outline offset 2 pixels" />
   <img src={menuFocus} alt="Menu item with outline offset -2 pixels" />
 </Flex>
@@ -63,7 +63,7 @@ If you use a meaningful image with a transparent background, it could become dif
 against some background colors. Be careful when using such images for conveying information to
 users.
 
-<Flex cs={{justifyContent: 'space-evenly', paddingBottom: system.padding.md}}>
+<Flex cs={{justifyContent: 'space-evenly', paddingBlockEnd: system.padding.md}}>
   <img src={checkMark} alt="Check mark images highly visible on white background" />
   <img src={checkMarkWhcm} alt="Check mark images have poor contrast on dark background" />
 </Flex>

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

@@ -8,7 +8,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {visibleIcon, visibleStrikethroughIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -114,7 +114,7 @@ export default () => {
         >
           <Select items={options} getTextValue={item => item.label}>
             <FormField.Label>What is your role?</FormField.Label>
-            <FormField.Input as={Select.Input} {...register('role')} width="280px" />
+            <FormField.Input as={Select.Input} {...register('role')} cs={{width: px2rem(280)}} />
             <Select.Popper>
               <Select.Card>
                 <Select.List maxHeight={200}>

package/dist/mdx/preview-react/multi-select/examples/Controlled.tsx

@@ -4,6 +4,7 @@ import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 const items = [
   {id: '1', text: 'Cheese'},
@@ -30,63 +31,61 @@ export default () => {
   }
 
   return (
-    <>
-      <form
-        onSubmit={e => {
-          console.log('form submitted');
-          e.preventDefault();
-        }}
-        ref={formRef}
-      >
-        <Flex gap="s" flexDirection="column">
-          <MultiSelect items={items}>
-            <FormField orientation="horizontalStart">
-              <FormField.Label>Toppings</FormField.Label>
-              <FormField.Input
-                as={MultiSelect.Input}
-                placeholder="Select Multiple"
-                removeLabel="Remove"
-                name="toppings"
-                onChange={handleOnChange}
-                value={value}
-              />
-              <MultiSelect.Popper>
-                <MultiSelect.Card>
-                  <MultiSelect.List>
-                    {item => (
-                      <MultiSelect.Item data-id={item.id}>
-                        <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
-                      </MultiSelect.Item>
-                    )}
-                  </MultiSelect.List>
-                </MultiSelect.Card>
-              </MultiSelect.Popper>
-            </FormField>
-          </MultiSelect>
-          <Flex gap="s">
-            <SecondaryButton
-              onClick={e => {
-                setValue('1, 2, 3');
-              }}
-            >
-              Set to "Cheese, Olives, Onions" via React `value`
-            </SecondaryButton>
-            <SecondaryButton
-              onClick={e => {
-                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
-                input.value = '1, 2';
-              }}
-            >
-              Set to "Cheese, Olives" via DOM `value`
-            </SecondaryButton>
-          </Flex>
-          <div>
-            <PrimaryButton type="submit">Submit</PrimaryButton>
-          </div>
-          <div>Selected ID: {value}</div>
-          <div>Selected Label: {label}</div>
+    <form
+      onSubmit={e => {
+        console.log('form submitted');
+        e.preventDefault();
+      }}
+      ref={formRef}
+    >
+      <Flex cs={{gap: system.gap.md, flexDirection: 'column'}}>
+        <MultiSelect items={items}>
+          <FormField orientation="horizontalStart">
+            <FormField.Label>Toppings</FormField.Label>
+            <FormField.Input
+              as={MultiSelect.Input}
+              placeholder="Select Multiple"
+              removeLabel="Remove"
+              name="toppings"
+              onChange={handleOnChange}
+              value={value}
+            />
+            <MultiSelect.Popper>
+              <MultiSelect.Card>
+                <MultiSelect.List>
+                  {item => (
+                    <MultiSelect.Item data-id={item.id}>
+                      <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                    </MultiSelect.Item>
+                  )}
+                </MultiSelect.List>
+              </MultiSelect.Card>
+            </MultiSelect.Popper>
+          </FormField>
+        </MultiSelect>
+        <Flex cs={{gap: system.gap.md}}>
+          <SecondaryButton
+            onClick={e => {
+              setValue('1, 2, 3');
+            }}
+          >
+            Set to "Cheese, Olives, Onions" via React `value`
+          </SecondaryButton>
+          <SecondaryButton
+            onClick={e => {
+              const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
+              input.value = '1, 2';
+            }}
+          >
+            Set to "Cheese, Olives" via DOM `value`
+          </SecondaryButton>
         </Flex>
-      </form>
-    </>
+        <div>
+          <PrimaryButton type="submit">Submit</PrimaryButton>
+        </div>
+        <div>Selected ID: {value}</div>
+        <div>Selected Label: {label}</div>
+      </Flex>
+    </form>
   );
 };

package/dist/mdx/preview-react/radio/examples/Basic.tsx

@@ -20,7 +20,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={{flexDirection: 'column'}}>
       <FormFieldGroup>
         <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
         <FormFieldGroup.Field>

package/dist/mdx/preview-react/radio/examples/Custom.tsx

@@ -26,7 +26,7 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={{flexDirection: 'column'}}>
       <FormFieldGroup>
         <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
         <FormFieldGroup.Field>

package/dist/mdx/preview-react/radio/examples/StandaloneRadio.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';
 import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -15,11 +17,11 @@ export default () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={{flexDirection: 'column'}}>
       <FormFieldGroup as="fieldset">
         <FormFieldGroup.Label as="legend">Choose Your Pizza Crust</FormFieldGroup.Label>
-        <Flex gap="m">
-          <Flex as="label" gap="xs">
+        <Flex cs={{gap: system.gap.xl}}>
+          <Flex as="label" cs={{gap: px2rem(12)}}>
             <FormFieldGroup.Input
               as={StyledRadioButton}
               onChange={handleChange}
@@ -29,7 +31,7 @@ export default () => {
             />
             Deep dish
           </Flex>
-          <Flex as="label" gap="xs">
+          <Flex as="label" cs={{gap: px2rem(12)}}>
             <FormFieldGroup.Input
               as={StyledRadioButton}
               onChange={handleChange}

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -8,7 +8,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const stylesOverride = {
   accentIcon: createStyles({
-    marginRight: system.gap.md,
+    marginInlineEnd: system.gap.md,
   }),
   pageContainer: createStyles({
     gap: system.gap.md,

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -14,7 +14,7 @@ const stylesOverride = {
     height: px2rem(320),
   }),
   panelContainer: createStyles({
-    marginLeft: 'auto',
+    marginInlineStart: 'auto',
   }),
   panel: createStyles({
     alignItems: 'center',

package/dist/mdx/react/_examples/mdx/ContextualHelp.mdx

@@ -1,36 +1,46 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import ContextualHelpTooltip from './examples/ContextualHelp/ContextualHelpTooltip';
+
 import ContextualHelpDialogFocusRedirect from './examples/ContextualHelp/ContextualHelpDialogFocusRedirect';
 import ContextualHelpDialogFocusTrap from './examples/ContextualHelp/ContextualHelpDialogFocusTrap';
-
+import ContextualHelpTooltip from './examples/ContextualHelp/ContextualHelpTooltip';
 
 
 ## Contextual Help
 
 ### Tooltip
-A Canvas Kit `Tooltip` can be used to provide additional information about why an element is disabled. 
-We should not, however, put one directly onto a disabled element because disabled elements do not receive focus
-(meaning the tooltip content is not accessible to keyboard users). Instead, we should provide a button next to the disabled
-element and apply the `Tooltip` to the button.
 
-**Note: We should avoid passing the `type` prop to the `Tooltip`. The default behavior is to assign an `aria-label` to the button
-(which is what we want)**
+A Canvas Kit `Tooltip` can be used to provide additional information about why an element is
+disabled. We should not, however, put one directly onto a disabled element because disabled elements
+do not receive focus (meaning the tooltip content is not accessible to keyboard users). Instead, we
+should provide a button next to the disabled element and apply the `Tooltip` to the button.
+
+**Note: We should avoid passing the `type` prop to the `Tooltip`. The default behavior is to assign
+an `aria-label` to the button (which is what we want)**
+
 <ExampleCodeBlock code={ContextualHelpTooltip} />
 
 ### Contextual Help Popup Without Focus Trap
-If one would like to provide a bit more content than a `Tooltip` will allow (such as buttons or links) a popup should be used.
-In this example, a `Dialog` is used in conjunction with the `useFocusRedirect` hook to display some text and a link. It will
-not trap focus; instead, it will close and focus the next element if the user tabs out or clicks away. A `Tooltip` is still
-used on the `Dialog.Target` component so that it remains accessible for screen readers.
 
-`Dialog` inserts an invisible `<div>` element right after the button with an `aria-owns` attribute pointing to the 
-`Dialog.Card`. This allows screen readers to read the popup contents in a logical order with the target. In other words, the 
-screen reader will announce the `Dialog` right after the open button instead of out of order.
+If one would like to provide a bit more content than a `Tooltip` will allow (such as buttons or
+links) a popup should be used. In this example, a `Dialog` is used in conjunction with the
+`useFocusRedirect` hook to display some text and a link. It will not trap focus; instead, it will
+close and focus the next element if the user tabs out or clicks away. A `Tooltip` is still used on
+the `Dialog.Target` component so that it remains accessible for screen readers.
+
+`Dialog` inserts an invisible `<div>` element right after the button with an `aria-owns` attribute
+pointing to the `Dialog.Card`. This allows screen readers to read the popup contents in a logical
+order with the target. In other words, the screen reader will announce the `Dialog` right after the
+open button instead of out of order.
+
+Additionally, we apply `aria-describedby` to our `Dialog.Target` to associate it with the
+`FormField.Label`.
 
-Additionally, we apply `aria-describedby` to our `Dialog.Target` to associate it with the `FormField.Label`.
 <ExampleCodeBlock code={ContextualHelpDialogFocusRedirect} />
 
 ### Contextual Help Dialog With Focus Trap
-The `useFocusTrap` hook can be used in contextual help where trapping focus within the `Dialog` is the goal. In this case, 
-focus will remain in the `Dialog` until it is closed. This example is otherwise identical to the one above.
+
+The `useFocusTrap` hook can be used in contextual help where trapping focus within the `Dialog` is
+the goal. In this case, focus will remain in the `Dialog` until it is closed. This example is
+otherwise identical to the one above.
+
 <ExampleCodeBlock code={ContextualHelpDialogFocusTrap} />