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

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx

@@ -1,12 +1,12 @@
-import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {
   Popup,
-  useCloseOnOutsideClick,
   useCloseOnEscape,
+  useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const modal = useModalModel();

package/dist/mdx/react/modal/examples/ModalWithPopupRTL.tsx

@@ -0,0 +1,66 @@
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {
+  Popup,
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+
+export default () => {
+  const modal = useModalModel();
+  const popup = usePopupModel();
+
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+
+  useCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+
+  return (
+    <CanvasProvider dir="rtl">
+      <Modal model={modal}>
+        <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+        <Modal.Overlay>
+          <Modal.Card>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>Delete Item</Modal.Heading>
+            <Modal.Body>
+              <p>Are you sure you want to delete the item?</p>
+              <Popup model={popup}>
+                <Flex gap="s">
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                  <Popup.CloseButton>Cancel</Popup.CloseButton>
+                </Flex>
+                <Popup.Popper>
+                  <Popup.Card>
+                    <Popup.CloseIcon aria-label="Close" />
+                    <Popup.Heading>Really Delete Item</Popup.Heading>
+                    <Popup.Body>
+                      <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+                      <Flex gap="s">
+                        <Popup.CloseButton
+                          as={DeleteButton}
+                          onClick={event => {
+                            modal.events.hide(event);
+                            handleDelete();
+                          }}
+                        >
+                          Yes, Really Delete
+                        </Popup.CloseButton>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
+                      </Flex>
+                    </Popup.Body>
+                  </Popup.Card>
+                </Popup.Popper>
+              </Popup>
+            </Modal.Body>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/modal/examples/NoTargetRTL.tsx

@@ -0,0 +1,49 @@
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {externalLinkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const model = useModalModel();
+  const handleAcknowledge = () => {
+    console.log('License Acknowledged');
+  };
+
+  const handleCancel = () => {
+    console.log('Cancel clicked');
+  };
+
+  return (
+    <CanvasProvider dir="rtl">
+      <PrimaryButton onClick={() => model.events.show()}>פתח רישיון</PrimaryButton>
+      <Modal model={model}>
+        <Modal.Overlay>
+          <Modal.Card>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>MIT License</Modal.Heading>
+            <Modal.Body>
+              <Box as="p" cs={{marginBlock: '0'}}>
+                בזאת ניתנת רשות, ללא תשלום, לכל אדם לקבל עותק של תוכנה זו וקבצי התיעוד הנלווים
+                ("התוכנה").
+              </Box>
+            </Modal.Body>
+            <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
+              <Modal.CloseButton
+                as={PrimaryButton}
+                onClick={handleAcknowledge}
+                icon={externalLinkIcon}
+                iconPosition="end"
+                shouldMirrorIconInRTL
+              >
+                לְהוֹדוֹת
+              </Modal.CloseButton>
+              <Modal.CloseButton onClick={handleCancel}>לְבַטֵל</Modal.CloseButton>
+            </Flex>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,60 +1,159 @@
 import React from 'react';
-import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {Select} from '@workday/canvas-kit-react/select';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const INITIAL_FILES = ['Resume.docx', 'Cover_Letter.docx', 'References.docx'];
+
+const actionStyles = createStyles({
+  gap: system.gap.md,
+  padding: system.padding.sm,
+});
+
+const headingStyles = createStyles({
+  marginBlock: '0',
+});
+
+const emptyStateStyles = createStyles({
+  maxWidth: '28rem',
+  outline: 'none',
+});
+
+const listStyles = createStyles({
+  flexDirection: 'column',
+  gap: system.gap.md,
+  marginBlock: '0',
+  padding: '0',
+  listStyle: 'none',
+  maxWidth: '28rem',
+});
+
+const rowStyles = createStyles({
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: system.gap.md,
+  width: '100%',
+});
+
+function fileNameId(name: string) {
+  return `return-focus-file-${name.replace(/[^a-zA-Z0-9]/g, '_')}`;
+}
+
+/** Index of a delete button to focus after removing `deletedIndex`, or empty list. */
+function nextListFocusAfterDelete(deletedIndex: number, lengthBeforeDelete: number) {
+  if (lengthBeforeDelete <= 1) {
+    return 'empty' as const;
+  }
+  return deletedIndex < lengthBeforeDelete - 1 ? deletedIndex : deletedIndex - 1;
+}
 
 export default () => {
-  const ref = React.useRef(null);
-  const [value, setValue] = React.useState('');
+  const [items, setItems] = React.useState<string[]>(() => [...INITIAL_FILES]);
+  const [confirmingFileName, setConfirmingFileName] = React.useState<string | null>(null);
+  const bodyTextId = useUniqueId();
+
+  const returnFocusRef = React.useRef<HTMLButtonElement | null>(null);
+  const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
+  const deleteButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
+  const emptyStateRef = React.useRef<HTMLDivElement>(null);
+  const pendingDeleteIndexRef = React.useRef<number | null>(null);
+  const postDeleteFocusRef = React.useRef<number | 'empty' | null>(null);
+
   const model = useModalModel({
-    returnFocusRef: ref,
+    returnFocusRef,
+    initialFocusRef: cancelButtonRef,
   });
 
-  const handleDelete = () => {
-    console.log('Deleted item');
+  React.useEffect(() => {
+    if (model.state.visibility === 'hidden') {
+      setConfirmingFileName(null);
+      pendingDeleteIndexRef.current = null;
+    }
+  }, [model.state.visibility]);
+
+  React.useLayoutEffect(() => {
+    if (postDeleteFocusRef.current === null) {
+      return;
+    }
+    if (postDeleteFocusRef.current === 'empty') {
+      emptyStateRef.current?.focus();
+    } else {
+      deleteButtonRefs.current[postDeleteFocusRef.current]?.focus();
+    }
+    postDeleteFocusRef.current = null;
+  }, [items]);
+
+  const openDeleteModal = (index: number) => {
+    pendingDeleteIndexRef.current = index;
+    setConfirmingFileName(items[index]);
+    returnFocusRef.current = deleteButtonRefs.current[index];
+    model.events.show();
+  };
+
+  const handleConfirmDelete = () => {
+    const idx = pendingDeleteIndexRef.current;
+    if (idx === null) {
+      return;
+    }
+    postDeleteFocusRef.current = nextListFocusAfterDelete(idx, items.length);
+    pendingDeleteIndexRef.current = null;
+    setItems(prev => prev.filter((_, i) => i !== idx));
   };
 
   return (
     <Modal model={model}>
-      <Select items={['', 'Delete', 'Two']}>
-        <FormField>
-          <FormField.Label>Choose an option</FormField.Label>
-          <FormField.Input
-            as={Select.Input}
-            ref={ref}
-            onChange={e => {
-              const option = e.currentTarget.value;
-              if (option === 'Delete') {
-                model.events.show();
-                setValue('');
-              } else {
-                setValue(e.currentTarget.value);
-              }
-            }}
-          />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <Heading as="h4" size="small" cs={headingStyles}>
+        Uploaded Files
+      </Heading>
+      <Box>
+        {items.length > 0 ? (
+          <Flex as="ul" cs={listStyles}>
+            {items.map((name, index) => (
+              <Flex as="li" key={name} cs={rowStyles}>
+                <Text as="span" id={fileNameId(name)}>
+                  {name}
+                </Text>
+                <Tooltip title="Delete">
+                  <DeleteButton
+                    aria-describedby={fileNameId(name)}
+                    icon={trashIcon}
+                    ref={el => {
+                      deleteButtonRefs.current[index] = el;
+                    }}
+                    onClick={() => openDeleteModal(index)}
+                  />
+                </Tooltip>
+              </Flex>
+            ))}
+          </Flex>
+        ) : (
+          <Box ref={emptyStateRef} tabIndex={-1} cs={emptyStateStyles}>
+            <Text>No files remaining.</Text>
+          </Box>
+        )}
+      </Box>
       <Modal.Overlay>
-        <Modal.Card>
-          <Modal.CloseIcon aria-label="Close" />
-          <Modal.Heading>Delete Item</Modal.Heading>
+        <Modal.Card aria-describedby={bodyTextId}>
+          <Modal.Heading>Delete file?</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginY="zero">
-              Are you sure you want to delete the item?
-            </Box>
+            <Text id={bodyTextId}>
+              {confirmingFileName
+                ? `Are you sure you want to delete ${confirmingFileName}?`
+                : 'Are you sure you want to delete this file?'}
+            </Text>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
-            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+          <Flex cs={actionStyles}>
+            <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>
+            <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>
               Delete
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
           </Flex>
         </Modal.Card>
       </Modal.Overlay>

package/dist/mdx/react/modal/examples/StackedModals.tsx

@@ -1,6 +1,6 @@
-import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 
 export default () => {
   const model = useModalModel();

package/dist/mdx/react/modal/examples/WithRadioButtons.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 

package/dist/mdx/react/modal/examples/WithTooltips.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 export default () => {

package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {
-  usePopupModel,
-  useInitialFocus,
-  useReturnFocus,
-  useFocusTrap,
   useAssistiveHideSiblings,
   useDisableBodyScroll,
+  useFocusTrap,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex, Box} from '@workday/canvas-kit-react/layout';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const longDescId = useUniqueId();
@@ -37,11 +38,11 @@ export default () => {
         <Modal.Card aria-describedby={longDescId}>
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <Box as="p" id={longDescId} marginY="zero">
+            <Box as="p" id={longDescId} cs={{marginBlock: '0'}}>
               Are you sure you want to delete the item?
             </Box>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
             <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Pagination,
   getLastPage,

package/dist/mdx/react/pagination/examples/HoistedModel.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   Pagination,

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

@@ -1,21 +1,18 @@
-import * as React from 'react';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {
   Pagination,
   getLastPage,
   getVisibleResultsMax,
   getVisibleResultsMin,
-  usePaginationModel,
 } from '@workday/canvas-kit-react/pagination';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
-
 export default () => {
   const resultCount = 10;
   const totalCount = 100;
   const lastPage = getLastPage(resultCount, totalCount);
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Pagination aria-label="Pagination" lastPage={lastPage}>
         <Pagination.Controls>
           <Pagination.JumpToFirstButton aria-label="First" />

package/dist/mdx/react/pagination/examples/ResponsiveRange.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+
+import {useResizeObserver, useTheme} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Pagination,
   getLastPage,
@@ -6,9 +9,8 @@ import {
   getVisibleResultsMin,
   usePaginationModel,
 } from '@workday/canvas-kit-react/pagination';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Text} from '@workday/canvas-kit-react/text';
-import {useResizeObserver, useTheme} from '@workday/canvas-kit-react/common';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const resultCount = 10;
@@ -63,15 +65,17 @@ export default () => {
 
   return (
     <Flex
-      border="solid 1px"
       ref={containerRef}
-      justifyContent="space-between"
-      padding="s"
-      alignItems="center"
+      cs={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        border: '1px solid',
+        padding: system.padding.md,
+      }}
     >
-      <Text typeLevel="body.small" fontWeight="bold">
+      <BodyText as="span" size="small" cs={{fontWeight: system.fontWeight.bold}}>
         Width: {containerWidth}px
-      </Text>
+      </BodyText>
       <Pagination model={model} aria-label="Pagination">
         <Pagination.Controls>
           <Pagination.StepToPreviousButton aria-label="Previous" />

package/dist/mdx/react/pagination/pagination.mdx

@@ -1,16 +1,17 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+
 import Basic from './examples/Basic';
 import CustomRange from './examples/CustomRange';
-import JumpControls from './examples/JumpControls';
 import GoToForm from './examples/GoToForm';
 import HoistedModel from './examples/HoistedModel';
-import ResponsiveRange from './examples/ResponsiveRange';
+import JumpControls from './examples/JumpControls';
 import RTL from './examples/RTL';
+import ResponsiveRange from './examples/ResponsiveRange';
 
 # Canvas Kit Pagination
 
 `Pagination` is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to navigate between pages in a range.
 
 [> Workday Design Reference](https://design.workday.com/components/navigation/pagination)
@@ -46,7 +47,7 @@ readers.
 By default, `Pagination` will create and use its own [model](#model) internally. Alternatively, you
 may configure your own model with `usePaginationModel` and pass it to `Pagination` via the `model`
 prop. This pattern is referred to as
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model)
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model)
 and provides direct access to its `state` and `events` outside of the `Pagination` component.
 
 In this example, we set up external observation of the model state and create an external button to
@@ -94,7 +95,7 @@ You can use `useResizeObserver` to accomplish this as in the example below.
 ## Model
 
 If `Pagination` was stripped of all its markup, attributes, and styling, what would remain is the
-[model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+[model](/get-started/for-developers/documentation/compound-components/#models). The model is an
 object composed of two parts: `state` which describes the current snapshot in time of the component
 and `events` which describes events that can be sent to the model.
 
@@ -104,6 +105,7 @@ for your implementation. Here's a simple example.
 
 ```tsx
 import * as React from 'react';
+
 import {Pagination, PaginationContext} from '@workday/canvas-kit-react/pagination';
 
 const CustomButton = (props: React.HTMLAttributes<HTMLButtonElement>) => {
@@ -135,7 +137,7 @@ export const CustomPagination = () => {
 Alternatively, if you need direct access to the model's `state` and `events` outside of the
 `Pagination` component, you may configure your own model with `usePaginationModel` and pass it to
 `Pagination` via a pattern called
-[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+[hoisting the model](/get-started/for-developers/documentation/compound-components/#configuring-a-model).
 
 ```tsx
 const model = usePaginationModel({

package/dist/mdx/{preview-react → react}/pill/Pill.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
 
 import WithReadOnly from './examples/WithReadOnly';
 import WithAvatar from './examples/WithAvatar';
@@ -17,7 +17,7 @@ information.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-preview-react
+yarn add @workday/canvas-kit-react
 ```
 
 ## Usage
@@ -108,4 +108,4 @@ or view the example below.
 
 ## Component API
 
-<SymbolDoc name="Pill" fileName="/preview-react/" />
+<SymbolDoc name="Pill" fileName="/react/" />

package/dist/mdx/{preview-react → react}/pill/examples/Basic.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
-
+import {Pill} from '@workday/canvas-kit-react/pill';
 import {BodyText} from '@workday/canvas-kit-react/text';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const flexStyles = createStyles({
   display: 'flex',
-  gap: system.space.x2,
+  gap: system.gap.sm,
 });
 
 export default () => {

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

@@ -0,0 +1,52 @@
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-react/pill';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const customPillStencil = createStencil({
+  base: {
+    [pillStencil.vars.background]: base.green600,
+    [pillStencil.vars.border]: base.green800,
+    [pillStencil.vars.label]: system.color.fg.inverse,
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
+    [pillCountStencil.vars.backgroundColor]: base.green600,
+    [pillCountStencil.vars.borderColor]: base.green600,
+
+    '&:hover, &.hover': {
+      [pillStencil.vars.background]: base.green800,
+      [pillStencil.vars.label]: system.color.fg.inverse,
+      [pillCountStencil.vars.backgroundColor]: base.green800,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
+      [pillCountStencil.vars.borderColor]: base.green800,
+    },
+    '&:active, &.active': {
+      [pillStencil.vars.background]: base.green800,
+      [pillStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
+      [pillCountStencil.vars.backgroundColor]: base.green800,
+    },
+    '&:focus, &.focus, &:focus-visible': {
+      [pillStencil.vars.background]: base.green800,
+      [pillStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
+      [pillCountStencil.vars.backgroundColor]: base.green800,
+    },
+    '&:disabled, &.disabled': {
+      [pillStencil.vars.background]: base.green600,
+      [pillStencil.vars.label]: system.color.fg.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
+    },
+  },
+});
+
+export default () => {
+  return (
+    <div>
+      <Pill cs={customPillStencil()}>
+        <Pill.Icon aria-label="Add user" />
+        <Pill.Label>Custom Pill Color</Pill.Label>
+        <Pill.Count>10</Pill.Count>
+      </Pill>
+    </div>
+  );
+};

package/dist/mdx/{preview-react → react}/pill/examples/WithAvatar.tsx

@@ -1,15 +1,17 @@
+// @ts-ignore: Cannot find module error
 import React from 'react';
 
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
+import {Pill} from '@workday/canvas-kit-react/pill';
 import {BodyText} from '@workday/canvas-kit-react/text';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+
 const flexStyles = createStyles({
   display: 'flex',
-  gap: system.space.x2,
+  gap: system.gap.sm,
 });
 
 export default () => {