@workday/canvas-kit-docs 11.0.0-alpha.726-next.0 → 11.0.0-alpha.760-next.0

package/dist/es6/lib/specs.js

@@ -3687,6 +3687,32 @@ module.exports = {specifications: [
               }
             ]
           },
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Popup, ComboboxWithinPopup] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the popup"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when is open and the first item is clicked",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should not close the popup on select"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
           {
             "type": "describe",
             "name": "given the [Testing/Popups/Popup, PopupWithFallbackPlacements] example is rendered",

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

@@ -17,13 +17,15 @@ any questions.
   - [Label Text](#label-text)
   - [Text Area (Preview)](#text-area-preview)
   - [Text Input (Preview)](#text-input-preview)
+- [Component Style Updates](#component-style-updates)
+- [Component Token Updates](#component-token-updates)
 - [Component Updates](#component-updates)
-  - [Component Style Updates](#component-style-updates)
   - [Card](#card)
   - [Checkbox](#checkbox)
   - [Combobox](#combobox)
   - [Count Badge](#count-badge)
   - [Form Field Preview](#form-field-preview)
+  - [Icons](#icons)
   - [Radio (Preview)](#radio-preview)
   - [Select](#select)
   - [Switch](#switch)
@@ -34,7 +36,6 @@ any questions.
   - [Preview](#preview)
   - [Labs](#labs)
 
-
 ## Codemod
 
 We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
@@ -102,33 +103,36 @@ finished.
 
 **PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
 
-We've promoted the `Table` compound component in [Preview](#preview) to [Main](#main). This replaces the existing `Table` component with a compound component
-and will consist of a new compound component API.
+We've promoted the `Table` compound component in [Preview](#preview) to [Main](#main). This replaces
+the existing `Table` component with a compound component and will consist of a new compound
+component API.
 
 > `rowState` prop is no longer a part of the `Table` component.
 
-In v10, the `Table` component in [Main](#main) only exposed a `Table`  and `TableRow` component to build tables.
+In v10, the `Table` component in [Main](#main) only exposed a `Table` and `TableRow` component to
+build tables.
 
 In v11, `Table` now exposes every subcomponent of a semantic HTML
-[Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it provides more flexibility for customization.
-
-See below for examples of the differences between the v10 `Table` and the v11 `Table` compound component.
+[Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it
+provides more flexibility for customization.
 
+See below for examples of the differences between the v10 `Table` and the v11 `Table` compound
+component.
 
 v10:
 
 ```tsx
 <Table>
-	<thead>
-		<TableRow header={true}>
-			<th>Header Text</th>
-		</TableRow>
-	</thead>
-	<tbody>
-		<TableRow>
-			<td>Cell Text</td>
-		</TableRow>
-	</tbody>
+  <thead>
+    <TableRow header={true}>
+      <th>Header Text</th>
+    </TableRow>
+  </thead>
+  <tbody>
+    <TableRow>
+      <td>Cell Text</td>
+    </TableRow>
+  </tbody>
 </Table>
 ```
 
@@ -136,24 +140,26 @@ v11:
 
 ```tsx
 <Table>
-	<Table.Head>
-		<Table.Row>
-			<Table.Header>Header Text</Table.Header>
-		</Table.Row>
-	</Table.Head>
-	<Table.Body>
-		<Table.Row>
-			<Table.Cell>Cell Text</Table.Cell>
-		</Table.Row>
-	</Table.Body>
+  <Table.Head>
+    <Table.Row>
+      <Table.Header>Header Text</Table.Header>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Cell Text</Table.Cell>
+    </Table.Row>
+  </Table.Body>
 </Table>
 ```
 
+Please refer to the
+[Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic)
+for how to implement new tables.
 
-Please refer to the [Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic) for how
-to implement new tables.
-
-> **NOTE:** If you were using the [Preview](#preview) `Table` compound component, then you will need to update your import from `"@workday/canvas-kit-preview-react/table"` to `"@workday/canvas-kit-react/table"`.
+> **NOTE:** If you were using the [Preview](#preview) `Table` compound component, then you will need
+> to update your import from `"@workday/canvas-kit-preview-react/table"` to
+> `"@workday/canvas-kit-react/table"`.
 
 ## Deprecations
 
@@ -208,9 +214,7 @@ instead.
 
 ---
 
-## Component Updates
-
-### Component Style Updates
+## Component Style Updates
 
 These changes are to address discrepancies that were found between Canvas Kit Design Specs and
 Canvas Kit.
@@ -407,6 +411,14 @@ See below:
   </Table.Body>
 </Table>
 
+### Component Token Updates
+
+The following components have been updated to use our [new system tokens](insert link).
+
+- Text
+
+## Component Updates
+
 ### Card
 
 **PR:** [#2471](https://github.com/Workday/canvas-kit/pull/2471)
@@ -434,8 +446,7 @@ identically as it did in previous versions.
 `Combobox` has been refactored to use our
 [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
 and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
-component now supports the `cs` prop, but otherwise the API has not changed. It should behave
-identically as it did in previous versions.
+component now supports the `cs` prop, but otherwise the API has not changed.
 
 ### Count Badge
 
@@ -495,6 +506,178 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 🤖 The codemod will handle the change of `hasError` to `error` for you automatically.
 
+### Icons
+
+All icons components including `Svg`, `SystemIcon`, `SystemIconCircle`, `AccentIcon`, `AppletIcon`
+and `Graphic` now use our new
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+
+- Components now support the `cs` prop. -`styles` prop has been removed.
+
+**Note: Passing a token name to a style prop will be not supported in a future major version.**
+
+```tsx
+// This will no longer be supported in a future major version
+<SystemIcon color="blueberry400" .../>
+
+// Use new tokens instead.
+<SystemIcon color={base.blueberry400} .../>
+```
+
+🤖 The codemod will handle the change of `styles` to `cs` for you automatically.
+
+#### AccentIcon
+
+- `AccentIconStyles` prop has been deprecated and will be merged with `AccentIconProps` in a future
+  version.
+- `accentIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider to use `accentIconStencil` to get styles or
+  class name.
+- `AccentIcon` supports `size` and `color` css variables, along with `size` and `color` props. Both
+  ways are supported:
+
+```tsx
+// set size or color by props
+<AccentIcon color={base.blueberry100} size={24} />;
+
+// set size or color by css vars
+import {accentIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [accentIconStencil.vars.color]: base.berrySmoothie100,
+  [accentIconStencil.vars.size]: '2rem',
+});
+
+<MyComponent>
+  <AccentIcon icon={myIcon} />
+</MyComponent>;
+```
+
+#### AppletIcon
+
+- `AppletIconStyles` prop has been deprecated and will be merged with `AppletIconProps` in a future
+  version.
+- `appletIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider using `appletIconStencil` to get styles or
+  class name.
+- `AppletIcon` supports `size`, `color200`, `color300`, `color400` and `color500` css variables,
+  along with `size` and `color` props. Both ways are supported:
+
+```tsx
+// set size or color by props
+<AppletIcon color="blueberry" size={240} />;
+
+// set size or color by css vars
+import {appletIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [appletIconStencil.vars.size]: '2rem',
+  [appletIconStencil.vars.color200]: base.berrySmoothie200,
+  [appletIconStencil.vars.color300]: base.berrySmoothie300,
+  [appletIconStencil.vars.color400]: base.berrySmoothie400,
+  [appletIconStencil.vars.color500]: base.berrySmoothie500,
+});
+
+<MyComponent>
+  <AppletIcon icon={myIcon} />
+</MyComponent>;
+```
+
+#### Graphic
+
+- `GraphicStyles` prop has been deprecated and will be merged with `GraphicProps` in a future
+  version.
+- `graphicStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider to use `graphicStencil` to get styles or class
+  name.
+- `width` and `height` props has been deprecated and will be removed in a future version. Consider
+  using `cs` props instead to set svg sizes.
+
+```tsx
+// before
+<Graphic icon={myGraphic} width={160} />
+
+// after
+<Graphic icon={myGraphic} cs={{"& svg": {width: '10rem'}}} />
+```
+
+#### Icon
+
+This change only impacts internal Canvas Kit code. `Icon` component has been removed and no longer
+used in icons. It was replaced by `Svg` and icon stencils extend `svgStencil`.
+
+#### SystemIcon
+
+- `SystemIconStyles` prop has been deprecated and will be merged with `SystemIconProps` in a future
+  version.
+
+- `accentHover` is deprecated and will be removed in a future version. Please use the following when
+  overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.accent]: desiredAccentHoverColor
+}
+```
+
+- `backgroundHover` is deprecated and will be removed in a future version. Please use the following
+  when overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+}
+```
+
+- `fillHover` is deprecated and will be removed in a future version. Please use the following when
+  overriding styles:
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.fill]: desiredFillHoverColor
+}
+```
+
+- `fill` is deprecated and will be removed in a future version. Please use `color` and specify
+  `accent` color if you want `accent` to be different from `color`.
+
+```tsx
+'&:hover': {
+  [systemIconStencil.vars.fill]: desiredFillHoverColor
+}
+```
+
+- `systemIconStyles` has been deprecated and will be removed in a future version as a part of
+  implementation of stencils and new tokens. Consider to use `systemIconStencil` to get styles or
+  class name.
+
+- `SystemIcon` supports `size`, `color`, `accentColor` and `background` css variables, along with
+  props. Both ways are supported:
+
+```tsx
+// set size or color by props
+<SystemIcon color={base.blueberry100} size={24} />;
+
+// set size or color by css vars
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const MyComponent = StyledRadioButton('div')({
+  [accentIconStencil.vars.size]: '2rem',
+  [systemIconStencil.vars.color]: base.berrySmoothie400,
+  [systemIconStencil.vars.background]: base.frenchVanilla100,
+  // on hover:
+  '&:hover': {
+    [systemIconStencil.vars.color]: base.berrySmoothie500,
+    [systemIconStencil.vars.background]: 'transparent',
+  },
+});
+
+<MyComponent>
+  <SystemIcon icon={myIcon} />
+</MyComponent>;
+```
+
 ### Radio (Preview)
 
 **PR:** [#2546](https://github.com/Workday/canvas-kit/pull/2546)
@@ -548,6 +731,19 @@ longer extends the `Box` component, however, it still supports Emotion `styled`
 Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
 they extend the `Text` component. These changes do not affect the components API.
 
+### StatusIndicator (Preview)
+
+**PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620
+
+`StatusIndicator` now uses
+[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
+our
+[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
+The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
+identically as it did in previous versions.
+- statusIndicatorColors has been deprecated and will be removed in a future version as a part of implementation of stencils and new tokens
+- useStatusIndicatorIcon has been deprecated and will be removed in a future version as a part of implementation of stencils and new tokens
+
 ## Glossary
 
 ### Main

package/dist/mdx/preview-react/status-indicator/examples/Overflow.tsx

@@ -7,7 +7,7 @@ import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 export default () => {
   return (
     <OverflowTooltip>
-      <StatusIndicator tabIndex={0} maxWidth={100}>
+      <StatusIndicator tabIndex={0} style={{maxWidth: '6rem'}}>
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving

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

@@ -3,8 +3,8 @@ import {SymbolDoc} from '@workday/canvas-kit-docs';
 import {Card} from '@workday/canvas-kit-react/card';
 
 import Basic from './examples/Basic';
-import Depth from './examples/Depth';
-import Padding from './examples/Padding';
+import WithCustomStyles from './examples/CustomStyles';
+import WithStencils from './examples/Stencils';
 
 
 # Canvas Kit Card
@@ -26,30 +26,22 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Card includes a container `Card` component and the following subcomponents: `Card.Body` and
-`Card.Heading`.
+`Card` includes a container component and `Card.Body` and `Card.Heading` subcomponents.
 
 <ExampleCodeBlock code={Basic} />
 
-### Depth
+## Custom Styles
 
-`Card` extends from `Box` so it supports all of
-[Box's style props](/components/layout/box/#style-props). This includes `depth`, which changes the
-Card's perceived "height" above the page surface by adjusting its box shadow. `Card` has a default
-depth of `1`.
+You can customize `Card` styles by using the `cs` prop.
 
-Here's an example of a `Card` with a increased `depth` of `2`.
+<ExampleCodeBlock code={WithCustomStyles} />
 
-<ExampleCodeBlock code={Depth} />
+## Stencils
 
-### Padding
+You can also use `Card` stencils to extend styles for your own custom components. This allows you to
+compose styles without using components directly. In the example below, we're extending `Card` stencils to create a custom `MenuCard` component.
 
-Set the `padding` prop of the `Card` (again, supported via `Box`) to adjust its padding. Card has a
-default padding of `x8` (`4rem` or `32px`).
-
-Here's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).
-
-<ExampleCodeBlock code={Padding} />
+<ExampleCodeBlock code={WithStencils} />
 
 ## Component API
 

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const customCardStyles = createStyles({
+  boxShadow: system.depth[2],
+  maxWidth: px2rem(320),
+  padding: system.space.x3,
+});
+
+export default () => (
+  <Card cs={customCardStyles}>
+    <Card.Heading>Canvas Supreme</Card.Heading>
+    <Card.Body>
+      Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms, onions,
+      and oregano.
+    </Card.Body>
+  </Card>
+);

package/dist/mdx/react/card/examples/Stencils.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import {cardStencil, cardBodyStencil, cardHeadingStencil} from '@workday/canvas-kit-react/card';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+import {system, brand} from '@workday/canvas-tokens-web';
+
+const menuCardStencil = createStencil({
+  extends: cardStencil,
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: system.space.zero,
+    maxWidth: px2rem(320),
+  },
+});
+
+const menuCardHeroStencil = createStencil({
+  base: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    boxSizing: 'border-box',
+    background: brand.gradient.primary,
+    aspectRatio: '1',
+    maxHeight: px2rem(80),
+    padding: system.space.x2,
+    borderRadius: `${system.shape.x2} ${system.shape.x2} 0 0`,
+  },
+});
+
+const MenuCardHero = createComponent('div')({
+  displayName: 'MenuCard.Hero',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardHeroStencil())} />;
+  },
+});
+
+const menuCardContentStencil = createStencil({
+  base: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: system.space.x2,
+    padding: system.space.x2,
+  },
+});
+
+const MenuCardContent = createComponent('div')({
+  displayName: 'MenuCard.Content',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardContentStencil())} />;
+  },
+});
+
+const menuCardHeadingStencil = createStencil({
+  extends: cardHeadingStencil,
+  base: {
+    color: brand.primary.accent,
+    margin: system.space.zero,
+  },
+});
+
+const MenuCardHeading = createComponent('h3')({
+  displayName: 'MenuCard.Heading',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardHeadingStencil())} />;
+  },
+});
+
+const menuCardTextStencil = createStencil({
+  extends: cardBodyStencil,
+  base: {
+    margin: 0,
+  },
+});
+
+const MenuCardText = createComponent('p')({
+  displayName: 'MenuCard.Text',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardTextStencil())} />;
+  },
+});
+
+const MenuCard = createComponent('div')({
+  displayName: 'MenuCard',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, menuCardStencil())} />;
+  },
+  subComponents: {
+    Content: MenuCardContent,
+    Heading: MenuCardHeading,
+    Hero: MenuCardHero,
+    Text: MenuCardText,
+  },
+});
+
+export default () => (
+  <MenuCard>
+    <MenuCard.Hero>
+      <MenuCard.Heading>Sausage Pizza</MenuCard.Heading>
+    </MenuCard.Hero>
+    <MenuCard.Content>
+      <MenuCard.Text>
+        Red sauce, homemade seasoned sausage, mushrooms, red bell peppers, rosemary, cheese.
+      </MenuCard.Text>
+      <MenuCard.Text></MenuCard.Text>
+    </MenuCard.Content>
+  </MenuCard>
+);

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

@@ -12,8 +12,7 @@ import {activityStreamIcon} from '@workday/canvas-system-icons-web';
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
   type: CanvasIconTypes.Graphic,
-  svg:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" class="wd-graphic wd-graphic-badge-achievement" focusable="false" role="presentation" viewBox="0 0 50 50"><g fill="none" fill-rule="nonzero" class="wd-icon-container"><circle cx="25" cy="25" r="25" fill="#FFC943"/><path fill="#FF7A45" d="M17 12h23l-4.373 7.5L40 27H17z"/><path fill="#656464" d="M15 12h2v31h-2z"/><circle cx="16" cy="11.5" r="1.5" fill="#656464"/></g></svg>',
   filename: 'wd-graphic-badge-achievement.svg',
   category: '',
   tags: [],
@@ -23,7 +22,7 @@ export default () => (
   <Flex flexDirection="row" alignItems="center" gap="s">
     <AccentIcon icon={shieldIcon} />
     <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} />
+    <SystemIcon icon={activityStreamIcon} background="berrySmoothie100" />
     <SystemIconCircle icon={activityStreamIcon} />
     <Graphic src={graphicExample} />
   </Flex>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.726-next.0",
+  "version": "11.0.0-alpha.760-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,12 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.726-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.726-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.726-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.726-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.760-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.760-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.760-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.760-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.2",
+    "@workday/canvas-tokens-web": "^1.3.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
   },
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "92313a01b7703822a67e7c7f7aff5460237f8ce7"
+  "gitHead": "567f7f389a35212b6f58050c9e0bf5f9834589c8"
 }

package/dist/mdx/react/card/examples/Depth.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {Card} from '@workday/canvas-kit-react/card';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const cardCustomDepth = createStyles({
-  boxShadow: system.depth[2],
-});
-
-export default () => {
-  return (
-    <Card cs={cardCustomDepth}>
-      <Card.Heading>Canvas Supreme</Card.Heading>
-      <Card.Body>
-        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
-        onions, and oregano.
-      </Card.Body>
-    </Card>
-  );
-};

package/dist/mdx/react/card/examples/Padding.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {Card} from '@workday/canvas-kit-react/card';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {space} from '../../../tokens';
-
-const cardCustomPadding = createStyles({
-  padding: system.space.x3,
-});
-
-export default () => {
-  return (
-    <Card cs={cardCustomPadding}>
-      <Card.Heading>Canvas Supreme</Card.Heading>
-      <Card.Body>
-        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
-        onions, and oregano.
-      </Card.Body>
-    </Card>
-  );
-};