@workday/canvas-kit-docs 16.0.0-alpha.0464-next.0 → 16.0.0-alpha.0465-next.0

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

@@ -30,17 +30,15 @@ export default () => {
           <Dialog.Body>
             <FormField>
               <FormField.Label>Email</FormField.Label>
-              <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+              <FormField.Input as={TextInput} grow onChange={handleChange} value={value} />
             </FormField>
           </Dialog.Body>
-          <Flex
-            cs={{padding: system.padding.xxs, marginBlockStart: system.gap.xs, gap: system.gap.md}}
-          >
+          <Dialog.ButtonGroup>
+            <Dialog.CloseButton>Cancel</Dialog.CloseButton>
             <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
               Submit
             </Dialog.CloseButton>
-            <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-          </Flex>
+          </Dialog.ButtonGroup>
         </Dialog.Card>
       </Dialog.Popper>
     </Dialog>

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -1,6 +1,6 @@
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
-import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {calc, createStyles} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
@@ -50,16 +50,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -74,16 +68,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -98,16 +86,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -122,16 +104,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -31,21 +31,15 @@ export default () => {
             <Dialog.Body>
               <FormField>
                 <FormField.Label>Email</FormField.Label>
-                <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+                <FormField.Input as={TextInput} grow onChange={handleChange} value={value} />
               </FormField>
             </Dialog.Body>
-            <Flex
-              cs={{
-                padding: system.padding.xxs,
-                marginBlockStart: system.gap.xs,
-                gap: system.gap.md,
-              }}
-            >
+            <Dialog.ButtonGroup>
+              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
                 Submit
               </Dialog.CloseButton>
-              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-            </Flex>
+            </Dialog.ButtonGroup>
           </Dialog.Card>
         </Dialog.Popper>
       </Dialog>

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

@@ -1,7 +1,6 @@
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const handleAcknowledge = () => {
@@ -25,12 +24,12 @@ export default () => {
               software and associated documentation files (the "Software").
             </Box>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -80,12 +80,12 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system} from '@workday/canvas-tokens-web';
@@ -31,22 +31,23 @@ export default () => {
             <Box as="p" id={longDescID} cs={{marginBlockStart: 0, marginBlockEnd: system.gap.md}}>
               Enter your initials to acknowledge the license.
             </Box>
-            <FormField cs={{marginBlockEnd: 0}}>
+            <FormField>
               <FormField.Label>Initials</FormField.Label>
               <FormField.Input
                 as={TextInput}
                 ref={ref}
                 value={value}
+                grow
                 onChange={e => setValue(e.currentTarget.value)}
               />
             </FormField>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -2,21 +2,13 @@ import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {plusIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
 
 const FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];
 
-const flexStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.xs,
-});
-
 export default () => {
   const model = useModalModel();
 
@@ -44,15 +36,15 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>New User</Modal.Heading>
           <Modal.Body>
-            <FormField>
+            <FormField grow>
               <FormField.Label>First Name</FormField.Label>
               <FormField.Input as={TextInput} name="first" />
             </FormField>
-            <FormField>
+            <FormField grow>
               <FormField.Label>Last Name</FormField.Label>
               <FormField.Input as={TextInput} name="last" />
             </FormField>
-            <FormField>
+            <FormField grow>
               <FormField.Label>Favorite Color</FormField.Label>
               <FormField.Field>
                 <Select items={FAVORITE_COLOR_OPTIONS}>
@@ -66,10 +58,10 @@ export default () => {
               </FormField.Field>
             </FormField>
           </Modal.Body>
-          <Flex cs={flexStyles}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton>Cancel</Modal.CloseButton>
             <PrimaryButton type="submit">Submit</PrimaryButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -80,12 +80,12 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.OverflowOverlay>
     </Modal>

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

@@ -1,7 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -13,10 +11,10 @@ export default () => {
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
-            <Flex cs={{gap: system.gap.md}}>
-              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+            <Modal.ButtonGroup position="start">
               <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </Flex>
+              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+            </Modal.ButtonGroup>
             <iframe
               role="iframe"
               srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button data-testid='button2'>iframe button 2</button></body></html>"

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

@@ -1,5 +1,4 @@
 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,
@@ -7,7 +6,6 @@ import {
   useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const modal = useModalModel();
@@ -31,17 +29,18 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex cs={{gap: system.gap.md}}>
-                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                <Popup.ButtonGroup>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                </Popup.ButtonGroup>
                 <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 cs={{gap: system.gap.md}}>
+                      <Popup.ButtonGroup>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -51,8 +50,7 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Popup.CloseButton>
-                        <Popup.CloseButton>Cancel</Popup.CloseButton>
-                      </Flex>
+                      </Popup.ButtonGroup>
                     </Popup.Body>
                   </Popup.Card>
                 </Popup.Popper>

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

@@ -32,17 +32,18 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex cs={{gap: system.gap.md}}>
-                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                <Popup.ButtonGroup>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                </Popup.ButtonGroup>
                 <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 cs={{gap: system.gap.md}}>
+                      <Popup.ButtonGroup>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -52,8 +53,7 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Popup.CloseButton>
-                        <Popup.CloseButton>Cancel</Popup.CloseButton>
-                      </Flex>
+                      </Popup.ButtonGroup>
                     </Popup.Body>
                   </Popup.Card>
                 </Popup.Popper>

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

@@ -29,7 +29,8 @@ export default () => {
                 ("התוכנה").
               </Box>
             </Modal.Body>
-            <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+            <Modal.ButtonGroup>
+              <Modal.CloseButton onClick={handleCancel}>לְבַטֵל</Modal.CloseButton>
               <Modal.CloseButton
                 as={PrimaryButton}
                 onClick={handleAcknowledge}
@@ -39,8 +40,7 @@ export default () => {
               >
                 לְהוֹדוֹת
               </Modal.CloseButton>
-              <Modal.CloseButton onClick={handleCancel}>לְבַטֵל</Modal.CloseButton>
-            </Flex>
+            </Modal.ButtonGroup>
           </Modal.Card>
         </Modal.Overlay>
       </Modal>

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

@@ -12,11 +12,6 @@ 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',
 });
@@ -149,12 +144,12 @@ export default () => {
                 : 'Are you sure you want to delete this file?'}
             </Text>
           </Modal.Body>
-          <Flex cs={actionStyles}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>
               Delete
             </Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -1,7 +1,5 @@
 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 {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = useModalModel();
@@ -19,7 +17,8 @@ export default () => {
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
-            <Flex cs={{gap: system.gap.md}}>
+            <Modal.ButtonGroup>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
               <Modal>
                 <Modal.Target as={DeleteButton}>Yes, Delete</Modal.Target>
                 <Modal.Overlay>
@@ -30,7 +29,8 @@ export default () => {
                       <p>
                         Are you <em>really</em> sure you want to delete the item?
                       </p>
-                      <Flex cs={{gap: system.gap.md}}>
+                      <Modal.ButtonGroup>
+                        <Modal.CloseButton>Cancel</Modal.CloseButton>
                         <Modal.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -40,14 +40,12 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Modal.CloseButton>
-                        <Modal.CloseButton>Cancel</Modal.CloseButton>
-                      </Flex>
+                      </Modal.ButtonGroup>
                     </Modal.Body>
                   </Modal.Card>
                 </Modal.Overlay>
               </Modal>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </Flex>
+            </Modal.ButtonGroup>
           </Modal.Body>
         </Modal.Card>
       </Modal.Overlay>

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

@@ -1,10 +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 {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const modal = useModalModel();
@@ -24,13 +22,13 @@ export default () => {
             <Modal.Heading>Open Modal</Modal.Heading>
             <Modal.Body>
               <p>Open a hidable and non-hidable popups</p>
-              <Flex cs={{gap: system.gap.md}}>
-                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
-                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+              <Modal.ButtonGroup>
                 <Tooltip title="Not so sure" type="muted">
                   <Popup.CloseButton onClick={closeModal}>Cancel</Popup.CloseButton>
                 </Tooltip>
-              </Flex>
+                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
+                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+              </Modal.ButtonGroup>
             </Modal.Body>
           </Modal.Card>
         </Modal.Overlay>
@@ -42,13 +40,15 @@ export default () => {
             <Popup.Heading>Hidable Popup</Popup.Heading>
             <Popup.Body>
               <p>Pressing 'OK' will close the modal</p>
-              <Tooltip
-                placement="left"
-                title="Really, Really, Really, Really, Really sure"
-                type="muted"
-              >
-                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
-              </Tooltip>
+              <Modal.ButtonGroup>
+                <Tooltip
+                  placement="left"
+                  title="Really, Really, Really, Really, Really sure"
+                  type="muted"
+                >
+                  <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+                </Tooltip>
+              </Modal.ButtonGroup>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>
@@ -60,13 +60,15 @@ export default () => {
             <Popup.Heading>Non-hidable Popup</Popup.Heading>
             <Popup.Body>
               <p>Pressing 'OK' will close the modal</p>
-              <Tooltip
-                placement="left"
-                title="Really, Really, Really, Really, Really sure"
-                type="muted"
-              >
-                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
-              </Tooltip>
+              <Modal.ButtonGroup>
+                <Tooltip
+                  placement="left"
+                  title="Really, Really, Really, Really, Really sure"
+                  type="muted"
+                >
+                  <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+                </Tooltip>
+              </Modal.ButtonGroup>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>

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

@@ -2,7 +2,7 @@ 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 {Box} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {
   useAssistiveHideSiblings,
@@ -12,7 +12,6 @@ import {
   usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const longDescId = useUniqueId();
@@ -42,12 +41,12 @@ export default () => {
               Are you sure you want to delete the item?
             </Box>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -1,5 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
   useCloseOnEscape,
@@ -10,7 +10,6 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 const cardStyles = createStyles({
   width: px2rem(400),
@@ -20,11 +19,6 @@ const bodyStyles = createStyles({
   marginBlock: '0',
 });
 
-const flexStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.xs,
-});
-
 export default () => {
   const model = usePopupModel();
 
@@ -50,12 +44,12 @@ export default () => {
               Are you sure you'd like to delete the item titled 'My Item'?
             </Box>
           </Popup.Body>
-          <Flex cs={flexStyles}>
+          <Popup.ButtonGroup>
+            <Popup.CloseButton>Cancel</Popup.CloseButton>
             <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Popup.CloseButton>
-            <Popup.CloseButton>Cancel</Popup.CloseButton>
-          </Flex>
+          </Popup.ButtonGroup>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -63,12 +63,12 @@ export default () => {
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex cs={flexStyles}>
+            <Popup.ButtonGroup>
+              <Popup.CloseButton>Cancel</Popup.CloseButton>
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
-            </Flex>
+            </Popup.ButtonGroup>
           </Popup.Card>
         </Popup.Popper>
         <SecondaryButton>Next Focusable Button</SecondaryButton>