@workday/canvas-kit-docs 14.0.0-alpha.1230-next.0 → 14.0.0-alpha.1234-next.0

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -28,9 +28,9 @@ information to help with scanning and organization.
 
 ### Basic Pills
 
-By default a Pill is considered interactive. All leading
-elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
-on the leading element to indicate the interaction behavior.
+By default a Pill is considered interactive. All leading elements (icons or avatars) are intended to
+be descriptive, helping support the label. Do not rely on the leading element to indicate the
+interaction behavior.
 
 #### Icon
 
@@ -101,7 +101,7 @@ accordingly.
 ### Custom Styles
 
 `Pill` supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
@@ -139,7 +139,7 @@ how to use `RadioGroup` with React Hook Form.
 
 Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/preview-react/select/Select.mdx

@@ -32,7 +32,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
     use `Select` in Main instead.
   </InformationHighlight.Body>
   <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
-    Form Field Docs
+    Select (main) Docs
   </InformationHighlight.Link>
 </InformationHighlight>
 

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Emphasis from './examples/Emphasis';
@@ -75,7 +75,7 @@ The background color dictated by the `variant` will be dark or light based on th
 
 Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
 information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/_examples/mdx/Layouts.mdx

@@ -14,7 +14,7 @@ import Tiled4and2Columns from './examples/layout/Tiled4and2Columns';
 
 Below are layout examples to reference as you build your own. For more in-depth information on our
 `Grid` component, please reference our
-[`Grid` documentation](https://workday.github.io/canvas-kit//?path=/docs/components-containers-grid--basic).
+[`Grid` documentation](https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs).
 
 ## Area Column Positioning
 

package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const fruits = [
   'Apples',
@@ -49,10 +50,12 @@ export default () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+        </FormField.Field>
+      </FormField>
       <ul style={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>

package/dist/mdx/react/_examples/mdx/examples/common/HiddenLiveRegion.tsx

@@ -1,9 +1,10 @@
 import React, {useState, useRef} from 'react';
 import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {system} from '@workday/canvas-tokens-web';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
@@ -16,10 +17,12 @@ export default () => {
   return (
     <>
       <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} ref={inputRef} />
+          </FormField.Field>
+        </FormField>
         <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
       </Flex>
       <AriaLiveRegion>

package/dist/mdx/react/_examples/mdx/examples/common/TextInputWithLiveError.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 export default () => {
   const errMsg = 'Error: First name is required.';
@@ -12,13 +13,15 @@ export default () => {
 
   return (
     <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
+      <FormField error={hasError ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Field>
+          <FormField.Input onBlur={handleBlur} as={TextInput} ref={inputRef} />
+          <FormField.Hint>
+            <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
+          </FormField.Hint>
+        </FormField.Field>
+      </FormField>
       <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
     </>
   );

package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useRef} from 'react';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
 import {system} from '@workday/canvas-tokens-web';
@@ -18,6 +19,7 @@ const liveRegionStyle = createStyles({
 export default () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
   const inputRef = useRef();
+
   function handleSendMessage() {
     setMessage(inputRef.current.value);
     inputRef.current.value = '';
@@ -29,10 +31,12 @@ export default () => {
         <Text cs={liveRegionStyle}>{message}</Text>
       </AriaLiveRegion>
       <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} ref={inputRef} />
+          </FormField.Field>
+        </FormField>
         <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
       </Flex>
     </>

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -1,4 +1,10 @@
-import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {
+  Specifications,
+  SymbolDoc,
+  SymbolDescription,
+  ExampleCodeBlock,
+  StorybookStatusIndicator,
+} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
@@ -16,9 +22,9 @@ import CustomStyles from './examples/CustomStyles';
 <InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
   <InformationHighlight.Icon />
   <InformationHighlight.Body>
-    `Avatar` in Main has been deprecated and will be removed in a future major version.
-    Please use [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--basic) in
-    Preview instead.
+    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
+    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
+    instead.
   </InformationHighlight.Body>
 </InformationHighlight>
 

package/dist/mdx/react/button/button/Button.mdx

@@ -1,11 +1,11 @@
 import {
-	ExampleCodeBlock,
-	Specifications,
-	SymbolDoc,
-	SymbolDescription,
+  ExampleCodeBlock,
+  Specifications,
+  SymbolDoc,
+  SymbolDescription,
 } from '@workday/canvas-kit-docs';
-import { Pill } from '@workday/canvas-kit-preview-react/pill';
-import { accessibilityIcon } from '@workday/canvas-system-icons-web';
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {accessibilityIcon} from '@workday/canvas-system-icons-web';
 
 import Primary from './examples/Primary';
 import PrimaryInverse from './examples/PrimaryInverse';
@@ -89,27 +89,31 @@ the width of the button to the width of its container.
 ### Custom Styles
 
 All of our buttons support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
 or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
 ### Theme Overrides
 
-The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
+The most common way to theme our buttons is to pass a `theme` object at the root level of the
+application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`
+tokens with the fallback being `brand.primary.**`.
 
-> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
+> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all
+> `PrimaryButton` theme colors set at the `CanvasProvider` level.
 
-> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
+> **Note:** You should **not** individually theme components wrapping them with the
+> `CanvasProvider`, but rather theme at the root level of the application.
 
 <ExampleCodeBlock code={ThemeOverrides} />
 
- ## Accessibility
+## Accessibility
 
- <Pill className='sb-unstyled'>
-	<Pill.Icon icon={accessibilityIcon} />
-	<Pill.Label>WAI-ARIA Reference</Pill.Label>
- </Pill>
+<Pill className="sb-unstyled">
+  <Pill.Icon icon={accessibilityIcon} />
+  <Pill.Label>WAI-ARIA Reference</Pill.Label>
+</Pill>
 
 ### Accessible Use of the `as` Prop
 
@@ -120,7 +124,8 @@ should be used for navigation.
 
 ### Role
 
-By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form, the role should be set to type `submit`.
+By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form,
+the role should be set to type `submit`.
 
 ## Component API
 

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

@@ -48,7 +48,7 @@ grayish background to create visual separation from the page background.
 ### Custom Styles
 
 Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 <ExampleCodeBlock code={WithCustomStyles} />
 

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

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	SymbolDoc,
-	Specifications,
-	InformationHighlight,
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -104,7 +104,7 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
 ### Custom Styles
 
 Checkbox supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

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

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Autocomplete from './examples/Autocomplete';
 
 # Combobox
@@ -72,7 +72,7 @@ An Autocomplete is an example of an arbitrary combobox.
 
 Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, Specifications, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
@@ -202,7 +202,7 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
 
 Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
 check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/select/Select.mdx

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	InformationHighlight,
-	SymbolDoc,
-	Specifications,
+  ExampleCodeBlock,
+  InformationHighlight,
+  SymbolDoc,
+  Specifications,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -20,7 +20,7 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import { Table } from '@workday/canvas-kit-react/table';
+import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -305,7 +305,7 @@ prop as well as the `value` DOM property and will update the model accordingly.
 
 Select and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -13,7 +13,7 @@ import MaxWidth from './examples/MaxWidth';
   <InformationHighlight.Body>
     `StatusIndicator` in Main has been deprecated and will be removed in a future major version.
     Please use [Status
-    Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in
+    Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in
     Preview instead.
   </InformationHighlight.Body>
 </InformationHighlight>

package/dist/mdx/react/switch/Switch.mdx

@@ -1,8 +1,8 @@
 import {
-	ExampleCodeBlock,
-	SymbolDoc,
-	Specifications,
-	InformationHighlight,
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
 } from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -73,7 +73,7 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
 ### Custom Styles
 
 Switch supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/table/Table.mdx

@@ -1,16 +1,17 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
 import RightToLeft from './examples/RightToLeft';
-import BaseHtmlTable from './examples/BaseHtmlTable'
+import BaseHtmlTable from './examples/BaseHtmlTable';
 
 # Canvas Kit Table
 
 `Table` is a simple styled compound component that renders a
 [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
 present information in a two-dimensional table comprised of rows and columns of cells containing
-data. `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
+data. `Table` is built off of `BaseTable` and is using
+[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
 
 ## Installation
 
@@ -22,9 +23,10 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
-[Text](/components/text/text/) instead. This will give the user more flexibility around the
-customization of the title/heading of their table.
+Users may not want to use a `caption` so they can import
+[Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or
+[Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This
+will give the user more flexibility around the customization of the title/heading of their table.
 
 <ExampleCodeBlock code={BasicWithHeading} />
 
@@ -53,29 +55,40 @@ Users may add styles to the `Table.Header` to render a fixed column. The example
 
 ### Base Html Table Example
 
-If a user needs a standard HTML [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can use the `BaseTable` component. 
+If a user needs a standard HTML
+[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no
+[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can
+use the `BaseTable` component.
 
 <ExampleCodeBlock code={BaseHtmlTable} />
 
 ### Which Component Should I Use?
 
-> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [Table](/components/containers/table/) component.
+> If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
+> features with their Table, then use the
+> [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)
+> component.
 
-> If a user __does not__ want [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [BaseTable](/components/text/heading/) component. 
+> If a user **does not** want
+> [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their
+> Table, then use the
+> [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)
+> component.
 
 ### Advanced
 
 You can also find several advanced Table examples in our Storybook Examples section.
 
-- [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
-- [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
-- [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
+- [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)
+- [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)
+- [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)
+- [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)
 
 ### Custom Styles
 
 Table and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/BodyText.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/BodyText/Basic';
 
 # Canvas Kit Body Text
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Body Text supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Heading.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
 
 
 # Canvas Kit Heading
@@ -29,7 +29,7 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
 ### Custom Styles
 
 Heading supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Subtext.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Subtext/Basic';
 
 # Canvas Kit Subtext
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Subtext supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Text.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Text/Basic';
 import TypeLevel from './examples/Text/TypeLevel';
 import Variant from './examples/Text/Variant';
@@ -44,7 +44,7 @@ understanding of the text being rendered.
 ### Custom Styles
 
 Text supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/text/Title.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Title/Basic';
 
 # Canvas Kit Title
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
 ### Custom Styles
 
 Title supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

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

@@ -42,7 +42,7 @@ with props.
 	<InformationHighlight.Icon />
 	<InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
 	<InformationHighlight.Body>
-		As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
+		As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
 	</InformationHighlight.Body>
 </InformationHighlight>