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

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": "15.1.1",
-    "@workday/canvas-kit-preview-react": "15.1.1",
-    "@workday/canvas-kit-react": "15.1.1",
-    "@workday/canvas-kit-react-fonts": "^15.1.1",
-    "@workday/canvas-kit-styling": "15.1.1",
+    "@workday/canvas-kit-labs-react": "15.1.3",
+    "@workday/canvas-kit-preview-react": "15.1.3",
+    "@workday/canvas-kit-react": "15.1.3",
+    "@workday/canvas-kit-react-fonts": "^15.1.3",
+    "@workday/canvas-kit-styling": "15.1.3",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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

@@ -19,11 +19,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": "15.1.1",
-    "@workday/canvas-kit-preview-react": "15.1.1",
-    "@workday/canvas-kit-react": "15.1.1",
-    "@workday/canvas-kit-react-fonts": "^15.1.1",
-    "@workday/canvas-kit-styling": "15.1.1",
+    "@workday/canvas-kit-labs-react": "15.1.3",
+    "@workday/canvas-kit-preview-react": "15.1.3",
+    "@workday/canvas-kit-react": "15.1.3",
+    "@workday/canvas-kit-react-fonts": "^15.1.3",
+    "@workday/canvas-kit-styling": "15.1.3",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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

@@ -16,6 +16,7 @@ Soon to be...
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
   - [Action Bar](#action-bar)
+  - [Banner](#banner)
   - [Avatar](#avatar)
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
@@ -32,6 +33,8 @@ Soon to be...
     - [Text Area](#text-area)
     - [Text Input](#text-input)
   - [Menu](#menu)
+  - [Modal](#modal)
+  - [Popup](#popup)
   - [Segmented Control](#segmented-control)
 	- [Toast](#toast)
 	- [Tooltip](#tooltip)
@@ -145,6 +148,12 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 - `ActionBar` padding has been updated to `padding.md` (16px).
 
+### Banner
+
+#### Visual Updates
+
+- `Banner` now uses `system.depth[5]` for box-shadow (previously had no box-shadow).
+
 ### Avatar
 
 **PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
@@ -355,6 +364,7 @@ If you customize `brand.success.base` in your theme, please verify the following
   `Toast.Body` and `Toast.Icon`.
 - Gap between the icon, body, and close icon is now `base.size150` (12px).
 - Shape uses `system.shape.xl`.
+- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
 - `Toast.Body` no longer has a gap between text and link.
 - `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
   LTR).
@@ -372,9 +382,22 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
   Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
 - Shape is now fully rounded using `system.shape.full`.
+- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
 - Type level is now `subtext.lg` (previously `subtext.md`).
 - Padding and spacing have been adjusted to accommodate the new styling.
 
+### Modal
+
+#### Visual Updates
+
+- `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
+
+### Popup
+
+#### Visual Updates
+
+- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
+
 ### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)

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>