fix: Clean up stories

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -326,7 +326,7 @@ const MyComboboxInput = createSubcomponent(TextInput)({
 **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
 [#2881](https://github.com/Workday/canvas-kit/pull/2881),
 [#2934](https://github.com/Workday/canvas-kit/pull/2934),
-[2973](https://github.com/Workday/canvas-kit/pull/2973)
+[#2973](https://github.com/Workday/canvas-kit/pull/2973)
 
 We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
 made to provide more flexibility and better explicit components when using inputs.

modules/docs/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -21,6 +21,7 @@ any questions.
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
   - [External Hyperlink](#external-hyperlink)
+  - [Pill](#pill)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -92,7 +93,7 @@ yarn remove @workday/canvas-kit-codemod
 
 ### Styling API and CSS Tokens
 
-**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088)
+**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3104](https://github.com/Workday/canvas-kit/pull/3104)
 
 Several components have been refactored to use our
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -106,6 +107,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 The following components are affected:
 
 - `ExternalHyperlink`
+- `Pill`
 - `Skeleton`
 
 ## External Hyperlink
@@ -126,6 +128,12 @@ The following components are affected:
 </ExternalHyperlink>
 ```
 
+## Pill
+
+**PRs:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
+
+
+
 
 ## Troubleshooting
 

modules/preview-react/pill/stories/Pill.mdx

@@ -6,6 +6,7 @@ import {Basic} from './examples/Basic';
 import {WithCount} from './examples/WithCount';
 import {WithRemovable} from './examples/WithRemovable';
 import {WithList} from './examples/WithList';
+import {CustomStyles} from './examples/CustomStyles';
 
 import * as PillStories from './Pill.stories';
 
@@ -30,15 +31,17 @@ information to help with scanning and organization.
 
 ### Basic Pills
 
-By default a Pill is considered interactive, therefore it's default variant is `default`.All leading
+By default a Pill is considered interactive, therefore it's default variant is `default`. 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
 
 You can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,
 but it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under
-the hood, you also have to all `SystemIconProps`.
+the hood, you also have access to all `SystemIconProps`.
+
+> **Accessibility Note:** You must provide an `aria-label` to the `Pill.Icon` for proper accessibility.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -52,20 +55,21 @@ You can render an avatar image inside the `Pill` with `Pill.Avatar`. It should a
 #### Count
 
 The count appears after the label. It is usually associated with the label. If you have a category,
-the count will dirrectly correlate to that category.
+the count will directly correlate to that category.
 
 <ExampleCodeBlock code={WithCount} />
 
 ### Read Only
 
-If the `Pill` has `variant='readOnly'`, it will look like a read-only `Pill`. This is a
-non-interactive element that is used to display information.
+The `readOnly` variant is a non-interactive element that is used to display information. 
 
-> **_NOTE:_** `maxWidth` measures the width of the `Pill.Label` (or text) and not the width of the
+> **Note:** `maxWidth` measures the width of the `Pill.Label` (or text) and not the width of the
 > entire `Pill`. By default, this `maxWidth` is set to `200px` and the text will be truncated with
 > an ellipsis and render an OverflowTooltip on hover and focus. This max width can be changed by
 > providing a `maxWidth` prop on the Pill.
 
+You can define a read only `Pill` by providing a `variant='readOnly'` prop.
+
 <ExampleCodeBlock code={WithReadOnly} />
 
 ### Removable Pills
@@ -100,6 +104,14 @@ accordingly.
 
 <ExampleCodeBlock code={WithList} />
 
+### 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)
+or view the example below.
+
+<ExampleCodeBlock code={CustomStyles} />
+
 ## Component API
 
 <SymbolDoc name="Pill" fileName="/preview-react/" />

modules/preview-react/pill/stories/Pill.stories.ts

@@ -9,6 +9,7 @@ import {Basic as BasicExample} from './examples/Basic';
 import {WithCount as WithCountExample} from './examples/WithCount';
 import {WithRemovable as WithRemovableExample} from './examples/WithRemovable';
 import {WithList as WithListExample} from './examples/WithList';
+import {CustomStyles as CustomStylesExample} from './examples/CustomStyles';
 
 export default {
   title: 'Preview/Pill',
@@ -41,3 +42,7 @@ export const WithRemovable: Story = {
 export const WithList: Story = {
   render: WithListExample,
 };
+
+export const CustomStyles: Story = {
+  render: CustomStylesExample,
+};

modules/preview-react/pill/stories/examples/Basic.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import {Pill, pillStencil} from '@workday/canvas-kit-preview-react/pill';
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
 
 import {BodyText} from '@workday/canvas-kit-react/text';
-import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const flexStyles = createStyles({
   display: 'flex',

modules/preview-react/pill/stories/examples/CustomStyles.tsx

@@ -30,7 +30,7 @@ const customPillStencil = createStencil({
   },
 });
 
-export const Basic = () => {
+export const CustomStyles = () => {
   return (
     <div>
       <Pill cs={customPillStencil()}>