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

package/dist/mdx/react/text-input/TextInput.mdx

@@ -1,19 +1,16 @@
 import {
   ExampleCodeBlock,
-  InformationHighlight,
-  SymbolDoc,
   Specifications,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
-import Caution from './examples/Caution';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
-import Error from './examples/Error';
 import Grow from './examples/Grow';
+import Icons from './examples/Icons';
 import LabelPosition from './examples/LabelPosition';
 import Placeholder from './examples/Placeholder';
 import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
-import Icons from './examples/Icons';
 
 
 # Canvas Kit Text Input
@@ -32,8 +29,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
-accessibility standards.
+Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to ensure
+proper label association and screen reader support.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -50,6 +47,11 @@ before a value has been provided.
 
 <ExampleCodeBlock code={Placeholder} />
 
+> **Accessibility Note**: Always provide a persistent `FormField.Label` and never rely on
+> placeholder text as the only label for an input. Placeholders can disappear or lack sufficient
+> contrast. Use placeholders only for short format examples (e.g., "name@example.com"), and place
+> detailed instructions or guidance in `FormField.Hint` instead of the placeholder.
+
 ### Ref Forwarding
 
 Text Input supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
@@ -97,23 +99,46 @@ method to change width. The `width` prop is used to correctly position other inn
 
 <ExampleCodeBlock code={Icons} />
 
+> **Accessibility Note**: In this example, the mail icon is decorative and hidden from screen
+> readers. If icons are used for conveying meaning in addition to the label text, a text alternative
+> must be provided for screen readers.
+
 ### Error States
 
-Set the `error` prop of the wrapping Form Field to `"caution"` or
-`"error"` to set the Text Input to the Caution or Error state, respectively. You
-will also need to set the `hintId` and `hintText` props on the Form Field to meet accessibility
-standards.
+Form Field provides error and caution states for Text Input. Set the `error` prop on Form Field to
+`"error"` or `"caution"` and use `FormField.Hint` to provide error messages. See
+[Form Field's Error documentation](/components/inputs/form-field/#error-states) for examples and
+accessibility guidance.
+
+## Accessibility
+
+`TextInput` should be used with [Form Field](/components/inputs/form-field/) to ensure proper
+labeling, error handling, and help text association. See
+[FormField's accessibility documentation](/components/inputs/form-field/#accessibility) for
+comprehensive guidance on form accessibility best practices.
+
+### Autocomplete Attribute
+
+- Add appropriate `autoComplete` values to indicate the input's purpose (e.g., `"email"`, `"name"`,
+  `"street-address"`, `"tel"`). Read more about
+  [Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).
+- Autocomplete enables browser autofill and helps assistive technologies understand the field's
+  purpose, benefiting users with cognitive disabilities and motor impairments.
+- Autocomplete also helps password managers identify the correct fields.
 
-The `error` prop may be applied directly to the Text Input with a value of
-`TextInput.ErrorType.Caution` or `TextInput.ErrorType.Error` if Form Field is not being used.
+### Input Type for Mobile Keyboards
 
-#### Caution
+`TextInput` defaults to `<input type="text">`, but for better mobile keyboard support, use more
+specific `type` attributes (like `"email"`, `"tel"`, `"url"`, or `"search"`) as needed.
 
-<ExampleCodeBlock code={Caution} />
+### Screen Reader Experience
 
-#### Error
+When properly implemented with `FormField`, screen readers will announce:
 
-<ExampleCodeBlock code={Error} />
+- The label text when the input receives focus.
+- Required, disabled, or read-only status.
+- Help text and error messages (via `aria-describedby`).
+- The current value or "blank" if empty.
 
 ## Component API
 
@@ -123,4 +148,4 @@ The `error` prop may be applied directly to the Text Input with a value of
 
 ## Specifications
 
-<Specifications file="TextInput.spec.ts" name="TextInput" />
+<Specifications file="./cypress/component/TextInput.spec.tsx" name="TextInput" />

package/dist/mdx/react/text-input/examples/Basic.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/text-input/examples/Disabled.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/text-input/examples/Grow.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/text-input/examples/Icons.tsx

@@ -1,32 +1,36 @@
 import React from 'react';
 
-import {mailIcon} from '@workday/canvas-system-icons-web';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {InputGroup} from '@workday/canvas-kit-react/text-input';
+import {
+  FormField,
+  useFormFieldInput,
+  useFormFieldModel,
+} from '@workday/canvas-kit-react/form-field';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {InputGroup} from '@workday/canvas-kit-react/text-input';
+import {mailIcon} from '@workday/canvas-system-icons-web';
+
+/**
+ * Using `as={InputGroup}` on `FormField.Input` will break the label associations necessary for accessibility.
+ * In this example, we've rendered `FormField.Field` as `InputGroup` and then hoisted the `id` of the input from the FormField model.
+ * This allows us to set the `id` of the `InputGroup.Input` correctly for proper label association.
+ */
 
 export default () => {
+  const model = useFormFieldModel();
+  const {id: formFieldInputId} = useFormFieldInput(model);
+
   return (
-    <FormField>
+    <FormField model={model}>
       <FormField.Label>Email</FormField.Label>
-      <FormField.Field>
-        <InputGroupFormFieldForwarder />
+      <FormField.Field as={InputGroup}>
+        <InputGroup.InnerStart>
+          <SystemIcon icon={mailIcon} size="small" />
+        </InputGroup.InnerStart>
+        <InputGroup.Input id={formFieldInputId} autoComplete="email" />
+        <InputGroup.InnerEnd>
+          <InputGroup.ClearButton />
+        </InputGroup.InnerEnd>
       </FormField.Field>
     </FormField>
   );
 };
-
-// create a prop forwarding component for FormField to forward to
-const InputGroupFormFieldForwarder = (props: {}) => {
-  return (
-    <FormField.Input as={InputGroup} width={280}>
-      <InputGroup.InnerStart pointerEvents="none">
-        <SystemIcon icon={mailIcon} size="small" />
-      </InputGroup.InnerStart>
-      <InputGroup.Input {...props} />
-      <InputGroup.InnerEnd>
-        <InputGroup.ClearButton />
-      </InputGroup.InnerEnd>
-    </FormField.Input>
-  );
-};

package/dist/mdx/react/text-input/examples/LabelPosition.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/text-input/examples/Placeholder.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/text-input/examples/RefForwarding.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';

package/dist/mdx/react/text-input/examples/Required.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 

package/dist/mdx/react/toast/examples/Basic.tsx

@@ -1,10 +1,11 @@
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
     <Toast>
-      <Toast.Icon icon={checkIcon} color="greenApple400" />
+      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       </Toast.Body>

package/dist/mdx/react/toast/examples/RTL.tsx

@@ -1,17 +1,15 @@
-import React from 'react';
-
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const handleClose = () => console.log('close button clicked');
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Toast>
-        <Toast.Icon icon={checkIcon} color="greenApple400" />
+        <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
         <Toast.Body>
           <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         </Toast.Body>

package/dist/mdx/react/toast/examples/ToastAlert.tsx

@@ -1,10 +1,10 @@
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="alert">
-    <Toast.Icon icon={exclamationCircleIcon} color={colors.cinnamon500} />
+    <Toast.Icon icon={exclamationCircleIcon} color={system.color.fg.warning.default} />
     <Toast.Body>
       <Toast.Message>There was an error with your workbook.</Toast.Message>
     </Toast.Body>

package/dist/mdx/react/toast/examples/ToastDialog.tsx

@@ -1,9 +1,10 @@
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="dialog" aria-label="notification">
-    <Toast.Icon icon={checkIcon} color="greenApple400" />
+    <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
     <Toast.Body>
       <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       <Toast.Link href="#hreflink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const handleClose = () => console.log('close button clicked');
 
   return (
     <Toast mode="dialog" aria-label="notification">
-      <Toast.Icon icon={checkIcon} color="greenApple400" />
+      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully</Toast.Message>
         <Toast.Link href="#hyperlink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithPopper.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Popper} from '@workday/canvas-kit-react/popup';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {Popper} from '@workday/canvas-kit-react/popup';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [open, setOpen] = React.useState(false);
@@ -23,7 +23,7 @@ export default () => {
       <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
       <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
         <Toast mode="dialog" aria-label="notification">
-          <Toast.Icon icon={checkIcon} color="greenApple400" />
+          <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
           <Toast.Body>
             <Toast.Message>Your workbook was successfully processed.</Toast.Message>
           </Toast.Body>

package/dist/mdx/react/toast/toast.mdx

@@ -1,15 +1,16 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {Toast} from '@workday/canvas-kit-react/toast';
+
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 import ToastAlert from './examples/ToastAlert';
 import ToastDialog from './examples/ToastDialog';
 import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
 import WithPopper from './examples/WithPopper';
-import RTL from './examples/RTL';
 
 # Canvas Kit Toast
 
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 that contains updates or messages about the status of an application's process.
 
 ## Installation
@@ -77,7 +78,7 @@ export const CustomIDToast = () => {
   });
   return (
     <Toast model={model}>
-      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         <Toast.Link href="#href">View More Details</Toast.Link>

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,5 +1,5 @@
 import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 

package/dist/mdx/react/tokens/examples/Overview.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
+import * as React from 'react';
 
-import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {borderRadius, colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
 
 const StyledCard = styled('div')({
   ...depth[3],

package/dist/mdx/react/tokens/examples/Tokens.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
-import {pickForegroundColor} from '@workday/canvas-kit-react/common';
+import * as React from 'react';
 
-import {colors, type, depth, space, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {Text} from '@workday/canvas-kit-react/text';
+import {pickForegroundColor} from '@workday/canvas-kit-react/common';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {borderRadius, colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
 
 const DepthCard = ({depth, children}) => {
   return (

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,14 +1,15 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';import Default from './examples/Default';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import CustomContent from './examples/CustomContent';
+import Default from './examples/Default';
 import DelayedTooltip from './examples/DelayedTooltip';
-import DescriptionType from './examples/DescriptionType';
 import DescribeType from './examples/DescribeType';
-import Muted from './examples/Muted';
-import Placements from './examples/Placements';
+import DescriptionType from './examples/DescriptionType';
 import Ellipsis from './examples/Ellipsis';
 import LineClamp from './examples/LineClamp';
+import Muted from './examples/Muted';
+import Placements from './examples/Placements';
 import UseTooltip from './examples/UseTooltip';
 
 
@@ -19,7 +20,7 @@ used to label or describe an element. By default, a tooltip will label an elemen
 for buttons with icons. A tooltip can also be used to describe additional information about an
 element
 
-[> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
+[Workday Design Reference](https://design.workday.com/components/popups/tooltips)
 
 ## Installation
 
@@ -65,11 +66,26 @@ and focus events.
 
 ### Describing an Element
 
-<InformationHighlight variant={'caution'} className='sb-unstyled'>
+<InformationHighlight variant={'caution'} className="sb-unstyled">
   <InformationHighlight.Icon />
-  <InformationHighlight.Heading> Caution: Describe type has been deprecated </InformationHighlight.Heading>
+  <InformationHighlight.Heading>
+    {' '}
+    Caution: Describe type has been deprecated{' '}
+  </InformationHighlight.Heading>
   <InformationHighlight.Body>
-     Assistive technology may ignore <StatusIndicator variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="describe"</StatusIndicator.Label></StatusIndicator> techniques based on verbosity settings. Please use <StatusIndicator cs={{textTransform: 'lowercase'}} variant='gray'><StatusIndicator.Label cs={{textTransform: 'lowercase'}}>type="description"</StatusIndicator.Label></StatusIndicator> on Tooltips.
+    Assistive technology may ignore{' '}
+    <StatusIndicator variant="gray">
+      <StatusIndicator.Label cs={{textTransform: 'lowercase'}}>
+        type="describe"
+      </StatusIndicator.Label>
+    </StatusIndicator>{' '}
+    techniques based on verbosity settings. Please use{' '}
+    <StatusIndicator cs={{textTransform: 'lowercase'}} variant="gray">
+      <StatusIndicator.Label cs={{textTransform: 'lowercase'}}>
+        type="description"
+      </StatusIndicator.Label>
+    </StatusIndicator>{' '}
+    on Tooltips.
   </InformationHighlight.Body>
 </InformationHighlight>
 
@@ -85,9 +101,10 @@ being focused and the ancillary tooltip information.
 The default mode for a tooltip is to assign a name to the target element with an `aria-label`
 string. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.
 This will add `aria-description` strings to the target element instead. This variant is useful on
-text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible. 
+text buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.
 
-> **Note:** If you use `description` type and want to pass `jsx`, it **must* be inline and **not** a component to ensure the inner text is properly read by voiceover.
+> **Note:** If you use `description` type and want to pass `jsx`, it **must\* be inline and
+> **not\*\* a component to ensure the inner text is properly read by voiceover.
 >
 > ```jsx
 > // The text will be understood as: You must accept terms and conditions
@@ -96,6 +113,7 @@ text buttons and other components that already have a label or name. Use this ty
 > // This will render a string including the html and will not be properly understood by voice over.
 > const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>
 > <Tool
+> ```
 
 <ExampleCodeBlock code={DescriptionType} />
 
@@ -210,4 +228,4 @@ example uses those parts directly while being functionally equivalent to the ori
 
 ## Specifications
 
-<Specifications file="Tooltip.spec.ts" name="Tooltip" />
+<Specifications file="./cypress/component/Tooltip.spec.tsx" name="Tooltip" />

package/dist/mdx/react/tooltip/examples/Default.tsx

@@ -1,6 +1,6 @@
-import {xIcon} from '@workday/canvas-system-icons-web';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {xIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   return (

package/dist/mdx/react/tooltip/examples/DescriptionType.tsx

@@ -1,13 +1,13 @@
 import {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {chartConfigIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {configureIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   return (
     <Flex gap="s">
       <Tooltip type="description" title="Search using additional criteria">
-        <TertiaryButton icon={chartConfigIcon}>Advanced Search</TertiaryButton>
+        <TertiaryButton icon={configureIcon}>Advanced Search</TertiaryButton>
       </Tooltip>
       <Tooltip type="description" title="Create saved search">
         <SecondaryButton>Save</SecondaryButton>

package/dist/mdx/react/tooltip/examples/Ellipsis.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {px2rem} from '@workday/canvas-kit-styling';
 import {resetIcon} from '@workday/canvas-system-icons-web';
 
 const CustomContent = ({...elemProps}) => (
   <button
     style={{
-      marginTop: space.xs,
-      maxWidth: 200,
+      marginTop: px2rem(12),
+      maxWidth: px2rem(200),
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
@@ -25,22 +25,22 @@ export default () => {
     <React.Fragment>
       <OverflowTooltip>
         <SecondaryButton>Short Content</SecondaryButton>
-      </OverflowTooltip>{' '}
+      </OverflowTooltip>
       <OverflowTooltip>
-        <SecondaryButton style={{maxWidth: 200}}>
+        <SecondaryButton cs={{maxWidth: px2rem(200)}}>
           Super Mega Ultra Long Content With Max Width On The Button
         </SecondaryButton>
       </OverflowTooltip>
       <OverflowTooltip>
-        <SecondaryButton icon={resetIcon} style={{maxWidth: 200}}>
+        <SecondaryButton icon={resetIcon} cs={{maxWidth: px2rem(200)}}>
           Super Mega Ultra Long Content With Max Width On The Button with Icon
         </SecondaryButton>
       </OverflowTooltip>
       <OverflowTooltip>
         <button
           style={{
-            marginTop: space.xs,
-            maxWidth: 200,
+            marginTop: px2rem(12),
+            maxWidth: px2rem(200),
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

package/dist/mdx/react/tooltip/examples/Placements.tsx

@@ -1,18 +1,24 @@
-import React from 'react';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {Card} from '@workday/canvas-kit-react/card';
 import {Placement} from '@workday/canvas-kit-react/popup';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const placementCardStyles = createStyles({
   boxShadow: system.depth[2],
   display: 'flex',
-  width: 100,
-  height: 100,
+  width: base.size1300,
+  height: base.size1300,
   justifyContent: 'space-around',
   alignItems: 'center',
-  padding: system.space.x1,
+  padding: system.padding.xxs,
+});
+
+const blockStyles = createStyles({
+  padding: base.size1300, // give enough room for the tooltips to fit around their targets
+  display: 'grid',
+  gridTemplateColumns: '100px 320px 100px',
+  gridTemplateRows: '100px 320px 100px',
 });
 
 export default () => {
@@ -32,14 +38,7 @@ export default () => {
   };
 
   return (
-    <div
-      style={{
-        padding: 100, // give enough room for the tooltips to fit around their targets
-        display: 'grid',
-        gridTemplateColumns: '100px 320px 100px',
-        gridTemplateRows: '100px 320px 100px',
-      }}
-    >
+    <div className={blockStyles}>
       <div />
       <div style={{...placementStyles, flexDirection: 'row'}}>
         {['top-start', 'top', 'top-end'].map(createPlacement)}

package/dist/mdx/react/tooltip/examples/UseTooltip.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import {Popper} from '@workday/canvas-kit-react/popup';
-import {xIcon} from '@workday/canvas-system-icons-web';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Popper} from '@workday/canvas-kit-react/popup';
 import {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';
+import {xIcon} from '@workday/canvas-system-icons-web';
 
 export default () => {
   const {targetProps, popperProps, tooltipProps} = useTooltip();

package/dist/mdx/style-props/STYLE_PROPS.mdx

@@ -19,7 +19,7 @@ import {
   spaceStyleFnConfigs,
   textStyleFnConfigs,
 } from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 
 import Background from './examples/Background';
 import Border from './examples/Border';

package/dist/mdx/style-props/stylePropsMigrationCodemod.mdx

@@ -1,4 +1,4 @@
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
+import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';