@workday/canvas-kit-docs 14.0.0-alpha.1176-next.0 → 14.0.0-alpha.1180-next.0

package/dist/es6/lib/Value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAS5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;iFAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;6CAgDjF,CAAC;AAgEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;6CAyBnC,CAAC"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAU5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;iFAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;6CAgDjF,CAAC;AAoEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;6CAyBnC,CAAC"}

package/dist/es6/lib/Value.js

@@ -7,6 +7,7 @@ import { Table } from './Table';
 import { capitalize, IndentLevelContext, RenderContext, indent } from './widgetUtils';
 import { DescriptionTooltip } from './DescriptionTooltip';
 import { colors } from '@workday/canvas-kit-react/tokens';
+import { createStyles } from '@workday/canvas-kit-styling';
 const widgets = {};
 export function registerWidget(key, widget) {
     widget.displayName = `${capitalize(key)}Widget`;
@@ -47,10 +48,13 @@ function getTableRows(properties, showDefault = true, showRequired = false, leve
         ];
     });
 }
+const tableStyles = createStyles({
+    tableLayout: 'fixed',
+});
 export const PropertiesTable = ({ properties, showDefault = true, showRequired = false, }) => {
     if (properties.length === 0) {
         return _jsx("span", { className: "token punctuation", children: "{}" });
     }
     const tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
-    return (_jsx(IndentLevelContext.Provider, { value: 0, children: _jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Type" }), _jsx(Table.Header, { children: "Description" }), showDefault ? _jsx(Table.Header, { children: "Default" }) : null] }) }), _jsx(Table.Body, { children: tableBody })] }) }));
+    return (_jsx(IndentLevelContext.Provider, { value: 0, children: _jsxs(Table, { cs: tableStyles, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Type" }), _jsx(Table.Header, { children: "Description" }), showDefault ? _jsx(Table.Header, { children: "Default" }) : null] }) }), _jsx(Table.Body, { children: tableBody })] }) }));
 };

package/dist/es6/lib/docs.js

@@ -8907,10 +8907,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "inverse"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inverse"
+              },
+              {
+                "kind": "string",
+                "value": "standalone"
+              },
+              {
+                "kind": "string",
+                "value": "standalone-inverse"
+              }
+            ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -88324,10 +88337,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "inverse"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inverse"
+              },
+              {
+                "kind": "string",
+                "value": "standalone"
+              },
+              {
+                "kind": "string",
+                "value": "standalone-inverse"
+              }
+            ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -114072,10 +114098,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "inverse"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inverse"
+              },
+              {
+                "kind": "string",
+                "value": "standalone"
+              },
+              {
+                "kind": "string",
+                "value": "standalone-inverse"
+              }
+            ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -114912,10 +114951,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "inverse"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inverse"
+              },
+              {
+                "kind": "string",
+                "value": "standalone"
+              },
+              {
+                "kind": "string",
+                "value": "standalone-inverse"
+              }
+            ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",
@@ -397108,10 +397160,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "variant",
           "required": false,
           "type": {
-            "kind": "string",
-            "value": "inverse"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "inverse"
+              },
+              {
+                "kind": "string",
+                "value": "standalone"
+              },
+              {
+                "kind": "string",
+                "value": "standalone-inverse"
+              }
+            ]
           },
-          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to frenchVanilla100 and updates hover, focus, and active pseudo-classes",
+          "description": "sets modifier styles for Hyperlink\n- `inverse`: sets the color to white and updates hover, focus, and active pseudo-classes\n- `standalone`: removes the underline of the Hyperlink. This is useful when a hyperlink is used outside the context of a paragraph or body text.\n- `standalone-inverse`: removes the underline of the Hyperlink and sets the color to white. This is useful when a hyperlink is used outside the context of a paragraph or body text on a dark background.",
           "declarations": [
             {
               "name": "variant",

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": "13.2.3",
-    "@workday/canvas-kit-preview-react": "13.2.3",
-    "@workday/canvas-kit-react": "13.2.3",
-    "@workday/canvas-kit-react-fonts": "^13.2.3",
-    "@workday/canvas-kit-styling": "13.2.3",
+    "@workday/canvas-kit-labs-react": "13.2.7",
+    "@workday/canvas-kit-preview-react": "13.2.7",
+    "@workday/canvas-kit-react": "13.2.7",
+    "@workday/canvas-kit-react-fonts": "^13.2.7",
+    "@workday/canvas-kit-styling": "13.2.7",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -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": "13.2.3",
-    "@workday/canvas-kit-preview-react": "13.2.3",
-    "@workday/canvas-kit-react": "13.2.3",
-    "@workday/canvas-kit-react-fonts": "^13.2.3",
-    "@workday/canvas-kit-styling": "13.2.3",
+    "@workday/canvas-kit-labs-react": "13.2.7",
+    "@workday/canvas-kit-preview-react": "13.2.7",
+    "@workday/canvas-kit-react": "13.2.7",
+    "@workday/canvas-kit-react-fonts": "^13.2.7",
+    "@workday/canvas-kit-styling": "13.2.7",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -11,7 +11,8 @@ any questions.
 - [Component Updates](#component-updates)
   - [Styling Changes](#styling-changes)
   - [Card](#card)
-    - [Expandable](#expandable)
+  - [Expandable](#expandable)
+  - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
   - [SearchForm](#search-form)
 - [Removals](#removals)
   - [Menu (preview)](#menu-preview)
@@ -202,6 +203,23 @@ spacing between card elements.
 
 These changes are only **visual** and should not affect the functionality of the component.
 
+### Hyperlink and External Hyperlink
+
+**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
+
+- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This removes the underline text decoration for use outside the context of body text.
+
+**HyperLink and ExternalHyperlink in v14**
+
+```tsx
+<Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
+<ExternalHyperlink variant="standalone" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
+<Hyperlink variant="standalone-inverse" href="#hyperlink">Hyperlink</Hyperlink>
+<ExternalHyperlink variant="standalone-inverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
+```
+
+> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
+
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)

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

@@ -9,8 +9,6 @@ import Size from './examples/Size';
 import Variant from './examples/Variant';
 import CustomStyles from './examples/CustomStyles';
 
-import * as AvatarStories from './Avatar.stories'
-
 
 # Canvas Kit Avatar
 

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -1,7 +1,7 @@
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStencil, createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '../../../../icon';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 const customOrangeAvatar = createStencil({
   base: {

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -5,7 +5,7 @@ import testAvatar from './test-avatar.png';
 export default () => (
   <div className="story">
     {Array.from({length: 5}, (v, index) => (
-      <>
+      <div>
         <Avatar
           altText="Avatar"
           key={index}
@@ -14,7 +14,7 @@ export default () => (
           url={testAvatar + '?v=' + index}
         />
         <br />
-      </>
+      </div>
     ))}
   </div>
 );

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

@@ -21,7 +21,7 @@ const inverseBackground = createStyles({
   padding: system.space.x4,
 });
 
-export function Basic() {
+export default () => {
   return (
     <div className={containerStyles}>
       <div className={defaultBackground}>
@@ -32,4 +32,4 @@ export function Basic() {
       </div>
     </div>
   );
-}
+};

package/dist/mdx/react/badge/examples/CustomLimit.tsx

@@ -34,7 +34,7 @@ const inverseBackground = createStyles({
 
 const initialCount = 1;
 
-export function CustomLimit() {
+export default () => {
   const [count, setCount] = React.useState(initialCount);
 
   return (
@@ -55,4 +55,4 @@ export function CustomLimit() {
       </div>
     </div>
   );
-}
+};

package/dist/mdx/react/badge/examples/NotificationBadge.tsx

@@ -44,7 +44,7 @@ const countBadgeStyles = createStyles({
 // NVDA + FF: Consistently describes count value only "{X}"
 // macOS v14.6.1
 // VoiceOver + Chrome / Safari: Consistently describes "New notifications {X}"
-export function NotificationBadge() {
+export default () => {
   const [count, setCount] = React.useState(4);
   const badgeID = useUniqueId();
 
@@ -74,4 +74,4 @@ export function NotificationBadge() {
       </Flex>
     </Flex>
   );
-}
+};

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -3,6 +3,8 @@ import Link from './examples/Hyperlink';
 import LinkInverse from './examples/HyperlinkInverse';
 import ExternalLink from './examples/ExternalHyperlink';
 import ExternalLinkInverse from './examples/ExternalHyperlinkInverse';
+import StandaloneLink from './examples/StandaloneHyperlink';
+import InBodyText from './examples/HyperlinkInBodyText';
 
 
 # Canvas Kit Hyperlinks
@@ -22,17 +24,32 @@ yarn add @workday/canvas-kit-react
 ### Hyperlink
 
 `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on
-the current page.
+the current page. By default, `Hyperlink`s have an underline for accessibility.
 
 <ExampleCodeBlock code={Link} />
 
 #### Inverse
 
 `Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink`
-on a dark or colorful background such as `blueberry400`.
+on a dark or colorful background.
 
 <ExampleCodeBlock code={LinkInverse} />
 
+#### Standalone
+
+`Hyperlink`s also have a `standalone` variant. Use this variant when you need to place a `Hyperlink`
+outside of a paragraph or body text. This will remove the underline.
+
+This variant can also be used with the `ExternalHyperlink` component.
+
+<ExampleCodeBlock code={StandaloneLink} />
+
+#### In Body Text
+
+In most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to link to another page or part of the document. By default they will wrap to a new line.
+
+<ExampleCodeBlock code={InBodyText} />
+
 ### Component API
 
 <SymbolDoc name="Hyperlink" fileName="/react/" hideDescription hideHeading headingStart={4} />
@@ -40,14 +57,13 @@ on a dark or colorful background such as `blueberry400`.
 ### ExternalHyperlink
 
 If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
-users know about the behavior by adding an icon, `extLinkIcon`. By default, the icon has a label of
-"Opens link in new window". You can override `aria-label` of the icon by using the `iconLabel` prop.
+users know about the behavior by adding an icon, `extLinkIcon`. To ensure proper accessibility, you **must* provide a label to the icon via the `iconLabel` prop.
 This override will be needed for translations.
 
 <ExampleCodeBlock code={ExternalLink} />
 
 `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
-link on a dark or colorful background such as `blueberry400`.
+link on a dark or colorful background.
 
 <ExampleCodeBlock code={ExternalLinkInverse} />
 

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -8,6 +8,8 @@ import {system} from '@workday/canvas-tokens-web';
 const parentContainerStyles = createStyles({
   backgroundColor: system.color.bg.primary.default,
   padding: system.space.x4,
+  display: 'inline-flex',
+  gap: system.space.x4,
 });
 
 export default () => (
@@ -19,5 +21,12 @@ export default () => (
     >
       Hyperlink
     </ExternalHyperlink>
+    <ExternalHyperlink
+      href="https://workday.com"
+      variant="standalone-inverse"
+      iconLabel="Opens link in new window"
+    >
+      Hyperlink
+    </ExternalHyperlink>
   </Box>
 );

package/dist/mdx/react/button/button/examples/HyperlinkInBodyText.tsx

@@ -0,0 +1,14 @@
+import {ExternalHyperlink, Hyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => (
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    <Hyperlink href="#hyperlink">tempor incididunt</Hyperlink> ut labore et dolore magna aliqua. Ut
+    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in
+    <ExternalHyperlink href="#hyperlink">
+      voluptate velit esse cillum dolore eu fugiat
+    </ExternalHyperlink>
+    nulla pariatur.
+  </p>
+);

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -8,6 +8,8 @@ import {system} from '@workday/canvas-tokens-web';
 const parentContainerStyles = createStyles({
   backgroundColor: system.color.bg.primary.default,
   padding: system.space.x4,
+  display: 'inline-flex',
+  gap: system.space.x4,
 });
 
 export default () => (
@@ -15,5 +17,8 @@ export default () => (
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
+    <Hyperlink href="#hyperlink" variant="standalone-inverse">
+      Hyperlink
+    </Hyperlink>
   </Box>
 );

package/dist/mdx/react/button/button/examples/StandaloneHyperlink.tsx

@@ -0,0 +1,19 @@
+import {Hyperlink, ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x4,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Hyperlink variant="standalone" href="#standalone-hyperlink">
+      Standalone Hyperlink
+    </Hyperlink>
+    <ExternalHyperlink variant="standalone" href="#standalone-external-hyperlink">
+      Standalone External Hyperlink
+    </ExternalHyperlink>
+  </div>
+);

package/dist/mdx/styling/mdx/CreateStyles.mdx

@@ -31,7 +31,7 @@ The CSS will look like this:
 	<InformationHighlight.Icon />
 	<InformationHighlight.Heading> Note</InformationHighlight.Heading>
 	<InformationHighlight.Body>
-		The `createStyles` function handles wrapping our Tokens in `var(--${token})`.
+		The `createStyles` function handles wrapping our Tokens in `var(--tokenName)`.
 	</InformationHighlight.Body>
 </InformationHighlight>
 

package/dist/mdx/styling/mdx/Overview.mdx

@@ -326,7 +326,7 @@ together and applies `className` and `style` attributes to a React element.
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>
-    For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs"> Create Styles </Hyperlink> docs.
+    For a more in depth overview, please view our <Hyperlink href="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs"> Create Styles </Hyperlink> docs.
   </InformationHighlight.Body>
 </InformationHighlight>
 
@@ -396,6 +396,6 @@ const ThemedCard = ({isDarkTheme, headerColor, elemProps}) => {
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>
-    For a more in depth overview, please view our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-stencils--docs">Create Stencil</Hyperlink> docs.
+    For a more in depth overview, please view our <Hyperlink href="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs">Create Stencil</Hyperlink> docs.
   </InformationHighlight.Body>
 </InformationHighlight>

package/dist/mdx/styling/mdx/Stencils.mdx

@@ -5,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web'
 import CreateStencil from './examples/CreateStencil';
 
 
-# Stencils
+# Create Stencil
 
 Stencils are a reusable function that returns `style` and `className` props in an object. A Stencil
 should apply to a single element. If your component has nested elements, you can youse `parts` to

package/dist/mdx/styling/mdx/Utilities.mdx

@@ -105,7 +105,7 @@ The `keyframes` function re-exports the [Emotion CSS keyframes](https://emotion.
 function, but is compatible with a custom Emotion instance and is understood by the Static style
 transformer.
 
-### Usage Example
+### Example
 
 ```tsx
 import {system} from '@workday/canvas-tokens-web';
@@ -167,7 +167,7 @@ The `injectGlobal` function re-exports the
 [Emotion CSS injectGlobal](https://emotion.sh/docs/@emotion/css#global-styles) function, but is
 compatible with a custom Emotion instance and is understood by the Static style transformer.
 
-### Usage Example
+### Example
 
 ```tsx
 import {createRoot} from 'react-dom/client';

package/lib/Value.tsx

@@ -9,6 +9,7 @@ import {Table} from './Table';
 import {capitalize, IndentLevelContext, RenderContext, indent} from './widgetUtils';
 import {DescriptionTooltip} from './DescriptionTooltip';
 import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
 
 const widgets: Record<string, React.FC<ValueProps>> = {};
 
@@ -151,6 +152,10 @@ function getTableRows(
   });
 }
 
+const tableStyles = createStyles({
+  tableLayout: 'fixed',
+});
+
 export const PropertiesTable = ({
   properties,
   showDefault = true,
@@ -168,7 +173,7 @@ export const PropertiesTable = ({
 
   return (
     <IndentLevelContext.Provider value={0}>
-      <Table>
+      <Table cs={tableStyles}>
         <Table.Head>
           <Table.Row>
             <Table.Header>Name</Table.Header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1176-next.0",
+  "version": "14.0.0-alpha.1180-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1176-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1176-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1176-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1176-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1180-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1180-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1180-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1180-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.9",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "30279d7c3d004668196c395d1fc3050cc6e373c6"
+  "gitHead": "5993dbdcabeebd9877c0abc60d63a29abd3129fd"
 }