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

package/combobox/lib/ComboboxCard.tsx

@@ -4,8 +4,7 @@ import {
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {handleCsProp} from '@workday/canvas-kit-styling';
 
 import {useComboboxModel} from './hooks/useComboboxModel';
 
@@ -21,20 +20,12 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => {
   } as const;
 });
 
-export const comboboxCardStencil = createStencil({
-  base: {
-    '& :where([data-part="list-box-container"])': {
-      borderRadius: system.legacy.shape.xxl,
-    },
-  },
-});
-
 export const ComboboxCard = createSubcomponent('div')({
   modelHook: useComboboxModel,
   elemPropsHook: useComboboxCard,
 })<ComboboxCardProps>(({children, ...elemProps}, Element) => {
   return (
-    <Menu.Card as={Element} {...handleCsProp(elemProps, comboboxCardStencil())}>
+    <Menu.Card as={Element} {...handleCsProp(elemProps)}>
       {children}
     </Menu.Card>
   );

package/dialog/lib/Dialog.tsx

@@ -91,6 +91,12 @@ export const Dialog = createContainer()({
      * {@link usePopupCloseButton}.
      */
     CloseButton: Popup.CloseButton,
+    /**
+     * A `Dialog.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a dialog and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: Popup.ButtonGroup,
   },
 })(({children}: DialogProps) => {
   return <>{children}</>;

package/dist/commonjs/combobox/lib/ComboboxCard.d.ts

@@ -209,7 +209,6 @@ export declare const useComboboxCard: import("@workday/canvas-kit-react/common")
 }, {
     readonly minWidth: number;
 }>;
-export declare const comboboxCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const ComboboxCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ComboboxCardProps, {
     state: {
         stackRef: import("react").RefObject<HTMLDivElement>;

package/dist/commonjs/combobox/lib/ComboboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxCard.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAMpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,iJAM9B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC"}
+{"version":3,"file":"ComboboxCard.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAKpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC"}

package/dist/commonjs/combobox/lib/ComboboxCard.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboboxCard = exports.comboboxCardStencil = exports.useComboboxCard = void 0;
+exports.ComboboxCard = exports.useComboboxCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const menu_1 = require("@workday/canvas-kit-react/menu");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useComboboxModel_1 = require("./hooks/useComboboxModel");
 /**
  * This hook sets the `minWidth` style attribute to match the width of the
@@ -16,12 +15,9 @@ exports.useComboboxCard = (0, common_1.createElemPropsHook)(useComboboxModel_1.u
         minWidth: model.state.width,
     };
 });
-exports.comboboxCardStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3gllpz", styles: "box-sizing:border-box;& :where([data-part=\"list-box-container\"]){border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));}" }
-}, "combobox-card-97127b");
 exports.ComboboxCard = (0, common_1.createSubcomponent)('div')({
     modelHook: useComboboxModel_1.useComboboxModel,
     elemPropsHook: exports.useComboboxCard,
 })(({ children, ...elemProps }, Element) => {
-    return ((0, jsx_runtime_1.jsx)(menu_1.Menu.Card, { as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.comboboxCardStencil)()), children: children }));
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu.Card, { as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps), children: children }));
 });

package/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -313,5 +313,28 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a dialog and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/commonjs/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/dialog/lib/Dialog.js

@@ -83,6 +83,12 @@ exports.Dialog = (0, common_1.createContainer)()({
          * {@link usePopupCloseButton}.
          */
         CloseButton: popup_1.Popup.CloseButton,
+        /**
+         * A `Dialog.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * group buttons within a dialog and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: popup_1.Popup.ButtonGroup,
     },
 })(({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });

package/dist/commonjs/modal/lib/Modal.d.ts

@@ -330,5 +330,28 @@ export declare const Modal: import("@workday/canvas-kit-react/common").Component
             hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Modal.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a modal and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: import("react").RefObject<HTMLDivElement>;
+            targetRef: import("react").RefObject<HTMLButtonElement>;
+            initialFocusRef: import("react").RefObject<any> | undefined;
+            returnFocusRef: import("react").RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Modal.d.ts.map

package/dist/commonjs/modal/lib/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAWA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAWA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/modal/lib/Modal.js

@@ -93,6 +93,12 @@ exports.Modal = (0, common_1.createContainer)()({
          * full body overflow is desired.
          */
         OverflowOverlay: ModalOverflowOverlay_1.ModalOverflowOverlay,
+        /**
+         * A `Modal.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * group buttons within a modal and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: popup_1.Popup.ButtonGroup,
     },
 })(elemProps => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: elemProps.children });

package/dist/commonjs/popup/lib/Popup.d.ts

@@ -296,5 +296,28 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Popup.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * visually group buttons within a popup and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Popup.d.ts.map

package/dist/commonjs/popup/lib/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/popup/lib/Popup.js

@@ -4,6 +4,7 @@ exports.Popup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const PopupBody_1 = require("./PopupBody");
+const PopupButtonGroup_1 = require("./PopupButtonGroup");
 const PopupCard_1 = require("./PopupCard");
 const PopupCloseButton_1 = require("./PopupCloseButton");
 const PopupCloseIcon_1 = require("./PopupCloseIcon");
@@ -104,6 +105,12 @@ exports.Popup = (0, common_1.createContainer)()({
          * {@link usePopupCloseButton}.
          */
         CloseButton: PopupCloseButton_1.PopupCloseButton,
+        /**
+         * A `Popup.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * visually group buttons within a popup and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: PopupButtonGroup_1.PopupButtonGroup,
     },
 })(({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });

package/dist/commonjs/popup/lib/PopupButtonGroup.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface PopupButtonGroupProps extends GrowthBehavior, CSProps {
+    /**
+     * The contents of the PopupButtonGroup. Can be `Button` children or any valid elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * The position of elements within the PopupButtonGroup. Can be `start`, `center`, or `end`.
+     * @default 'end'
+     */
+    position?: 'start' | 'center' | 'end';
+}
+export declare const popupButtonGroupStencil: import("@workday/canvas-kit-styling").Stencil<{
+    position: {
+        start: {
+            justifyContent: string;
+        };
+        center: {
+            justifyContent: string;
+        };
+        end: {
+            justifyContent: string;
+        };
+    };
+    grow: {
+        true: {
+            '& button': {
+                width: string;
+            };
+        };
+    };
+}, {}, {}, never, never>;
+export declare const PopupButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PopupButtonGroupProps, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=PopupButtonGroup.d.ts.map

package/dist/commonjs/popup/lib/PopupButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupButtonGroup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAKjF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,EAAE,OAAO;IACpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACvC;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;wBA4BlC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAS3B,CAAC"}

package/dist/commonjs/popup/lib/PopupButtonGroup.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupButtonGroup = exports.popupButtonGroupStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const hooks_1 = require("./hooks");
+exports.popupButtonGroupStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "u628z", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){flex-direction:column;}" },
+    modifiers: {
+        position: {
+            start: { name: "461870", styles: "justify-content:flex-start;" },
+            center: { name: "3xs59f", styles: "justify-content:center;" },
+            end: { name: "r67bx", styles: "justify-content:flex-end;" }
+        },
+        grow: {
+            true: { name: "1p9ysq", styles: "& button{width:100%;}" }
+        }
+    }
+}, "popup-button-group-1d7c77");
+exports.PopupButtonGroup = (0, common_1.createSubcomponent)('div')({
+    displayName: 'Popup.ButtonGroup',
+    modelHook: hooks_1.usePopupModel,
+})(({ children, position = 'end', grow, ...elemProps }, Element) => {
+    return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.popupButtonGroupStencil)({ position, grow })), children: children }));
+});

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAiC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.js

@@ -84,7 +84,7 @@ exports.popupCardStencil = (0, canvas_kit_styling_1.createStencil)({
         transformOriginHorizontal: '',
         transformOriginVertical: '',
     },
-    base: { name: "1k6kls", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-3);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-29kkhp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
+    base: { name: "1t20fc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-3);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-29kkhp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;padding:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));}" }
 }, "popup-card-b9f0ce");
 exports.PopupCard = (0, common_1.createSubcomponent)('div')({
     displayName: 'Popup.Card',

package/dist/commonjs/toast/lib/ToastCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}

package/dist/commonjs/toast/lib/ToastCloseIcon.js

@@ -6,9 +6,10 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const popup_1 = require("@workday/canvas-kit-react/popup");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.toastCloseIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "292ls0", styles: "box-sizing:border-box;position:absolute;inset-block-start:0.125rem;inset-inline-end:0.125rem;" }
-}, "toast-close-icon-2d1000");
+    base: { name: "2ifk0o", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
+}, "toast-close-icon-05fbc5");
 exports.ToastCloseIcon = (0, common_1.createComponent)('button')({
     displayName: 'Toast.CloseIcon',
     Component: (elemProps, ref, Element) => {

package/dist/es6/combobox/lib/ComboboxCard.d.ts

@@ -209,7 +209,6 @@ export declare const useComboboxCard: import("@workday/canvas-kit-react/common")
 }, {
     readonly minWidth: number;
 }>;
-export declare const comboboxCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const ComboboxCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ComboboxCardProps, {
     state: {
         stackRef: import("react").RefObject<HTMLDivElement>;

package/dist/es6/combobox/lib/ComboboxCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxCard.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAMpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,iJAM9B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC"}
+{"version":3,"file":"ComboboxCard.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/ComboboxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAKpD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC;CAAG;AAE5E;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC"}

package/dist/es6/combobox/lib/ComboboxCard.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { Menu } from '@workday/canvas-kit-react/menu';
-import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { handleCsProp } from '@workday/canvas-kit-styling';
 import { useComboboxModel } from './hooks/useComboboxModel';
 /**
  * This hook sets the `minWidth` style attribute to match the width of the
@@ -13,12 +12,9 @@ export const useComboboxCard = createElemPropsHook(useComboboxModel)(model => {
         minWidth: model.state.width,
     };
 });
-export const comboboxCardStencil = createStencil({
-    base: { name: "3gllpz", styles: "box-sizing:border-box;& :where([data-part=\"list-box-container\"]){border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));}" }
-}, "combobox-card-97127b");
 export const ComboboxCard = createSubcomponent('div')({
     modelHook: useComboboxModel,
     elemPropsHook: useComboboxCard,
 })(({ children, ...elemProps }, Element) => {
-    return (_jsx(Menu.Card, { as: Element, ...handleCsProp(elemProps, comboboxCardStencil()), children: children }));
+    return (_jsx(Menu.Card, { as: Element, ...handleCsProp(elemProps), children: children }));
 });

package/dist/es6/dialog/lib/Dialog.d.ts

@@ -313,5 +313,28 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a dialog and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/es6/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/dialog/lib/Dialog.js

@@ -80,6 +80,12 @@ export const Dialog = createContainer()({
          * {@link usePopupCloseButton}.
          */
         CloseButton: Popup.CloseButton,
+        /**
+         * A `Dialog.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * group buttons within a dialog and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: Popup.ButtonGroup,
     },
 })(({ children }) => {
     return _jsx(_Fragment, { children: children });

package/dist/es6/modal/lib/Modal.d.ts

@@ -330,5 +330,28 @@ export declare const Modal: import("@workday/canvas-kit-react/common").Component
             hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Modal.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a modal and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: import("react").RefObject<HTMLDivElement>;
+            targetRef: import("react").RefObject<HTMLButtonElement>;
+            initialFocusRef: import("react").RefObject<any> | undefined;
+            returnFocusRef: import("react").RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Modal.d.ts.map

package/dist/es6/modal/lib/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAWA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAWA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;;;;OAQG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/modal/lib/Modal.js

@@ -90,6 +90,12 @@ export const Modal = createContainer()({
          * full body overflow is desired.
          */
         OverflowOverlay: ModalOverflowOverlay,
+        /**
+         * A `Modal.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * group buttons within a modal and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: Popup.ButtonGroup,
     },
 })(elemProps => {
     return _jsx(_Fragment, { children: elemProps.children });

package/dist/es6/popup/lib/Popup.d.ts

@@ -296,5 +296,28 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Popup.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * visually group buttons within a popup and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupButtonGroup").PopupButtonGroupProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Popup.d.ts.map

package/dist/es6/popup/lib/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/popup/lib/Popup.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { PopupBody } from './PopupBody';
+import { PopupButtonGroup } from './PopupButtonGroup';
 import { PopupCard } from './PopupCard';
 import { PopupCloseButton } from './PopupCloseButton';
 import { PopupCloseIcon } from './PopupCloseIcon';
@@ -101,6 +102,12 @@ export const Popup = createContainer()({
          * {@link usePopupCloseButton}.
          */
         CloseButton: PopupCloseButton,
+        /**
+         * A `Popup.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+         * visually group buttons within a popup and can place buttons at the start, center, or end of the
+         * container.
+         */
+        ButtonGroup: PopupButtonGroup,
     },
 })(({ children }) => {
     return _jsx(_Fragment, { children: children });

package/dist/es6/popup/lib/PopupButtonGroup.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { GrowthBehavior } from '@workday/canvas-kit-react/common';
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface PopupButtonGroupProps extends GrowthBehavior, CSProps {
+    /**
+     * The contents of the PopupButtonGroup. Can be `Button` children or any valid elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * The position of elements within the PopupButtonGroup. Can be `start`, `center`, or `end`.
+     * @default 'end'
+     */
+    position?: 'start' | 'center' | 'end';
+}
+export declare const popupButtonGroupStencil: import("@workday/canvas-kit-styling").Stencil<{
+    position: {
+        start: {
+            justifyContent: string;
+        };
+        center: {
+            justifyContent: string;
+        };
+        end: {
+            justifyContent: string;
+        };
+    };
+    grow: {
+        true: {
+            '& button': {
+                width: string;
+            };
+        };
+    };
+}, {}, {}, never, never>;
+export declare const PopupButtonGroup: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PopupButtonGroupProps, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: "hidden" | "visible";
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
+//# sourceMappingURL=PopupButtonGroup.d.ts.map

package/dist/es6/popup/lib/PopupButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupButtonGroup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAqB,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAKjF,MAAM,WAAW,qBAAsB,SAAQ,cAAc,EAAE,OAAO;IACpE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACvC;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;wBA4BlC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAS3B,CAAC"}

package/dist/es6/popup/lib/PopupButtonGroup.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { usePopupModel } from './hooks';
+export const popupButtonGroupStencil = createStencil({
+    base: { name: "u628z", styles: "box-sizing:border-box;display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){flex-direction:column;}" },
+    modifiers: {
+        position: {
+            start: { name: "461870", styles: "justify-content:flex-start;" },
+            center: { name: "3xs59f", styles: "justify-content:center;" },
+            end: { name: "r67bx", styles: "justify-content:flex-end;" }
+        },
+        grow: {
+            true: { name: "1p9ysq", styles: "& button{width:100%;}" }
+        }
+    }
+}, "popup-button-group-1d7c77");
+export const PopupButtonGroup = createSubcomponent('div')({
+    displayName: 'Popup.ButtonGroup',
+    modelHook: usePopupModel,
+})(({ children, position = 'end', grow, ...elemProps }, Element) => {
+    return (_jsx(Element, { ...handleCsProp(elemProps, popupButtonGroupStencil({ position, grow })), children: children }));
+});

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAiC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}

package/dist/es6/popup/lib/PopupCard.js

@@ -58,7 +58,7 @@ export const popupCardStencil = createStencil({
         transformOriginHorizontal: '',
         transformOriginVertical: '',
     },
-    base: { name: "1k6kls", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-3);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-29kkhp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;}" }
+    base: { name: "1t20fc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-3);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-29kkhp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;padding:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));}" }
 }, "popup-card-b9f0ce");
 export const PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',

package/dist/es6/toast/lib/ToastCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
-import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "292ls0", styles: "box-sizing:border-box;position:absolute;inset-block-start:0.125rem;inset-inline-end:0.125rem;" }
-}, "toast-close-icon-2d1000");
+    base: { name: "2ifk0o", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
+}, "toast-close-icon-05fbc5");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',
     Component: (elemProps, ref, Element) => {

package/modal/lib/Modal.tsx

@@ -92,6 +92,12 @@ export const Modal = createContainer()({
      * full body overflow is desired.
      */
     OverflowOverlay: ModalOverflowOverlay,
+    /**
+     * A `Modal.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * group buttons within a modal and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: Popup.ButtonGroup,
   },
 })<ExtractProps<typeof Dialog, never>>(elemProps => {
   return <>{elemProps.children}</>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.0-alpha.0464-next.0",
+  "version": "16.0.0-alpha.0465-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,8 +53,8 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0464-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0464-next.0",
+    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0465-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0465-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "e91ae68242623c9e4d24b9fbdc3ce7ea8368c425"
+  "gitHead": "02dd284d77ccf92991d5526190f453d442ccebcc"
 }

package/popup/lib/Popup.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {createContainer} from '@workday/canvas-kit-react/common';
 
 import {PopupBody} from './PopupBody';
+import {PopupButtonGroup} from './PopupButtonGroup';
 import {PopupCard} from './PopupCard';
 import {PopupCloseButton} from './PopupCloseButton';
 import {PopupCloseIcon} from './PopupCloseIcon';
@@ -111,6 +112,12 @@ export const Popup = createContainer()({
      * {@link usePopupCloseButton}.
      */
     CloseButton: PopupCloseButton,
+    /**
+     * A `Popup.ButtonGroup` component styled with {@link popupButtonGroupStencil}. It is used to
+     * visually group buttons within a popup and can place buttons at the start, center, or end of the
+     * container.
+     */
+    ButtonGroup: PopupButtonGroup,
   },
 })<PopupProps>(({children}: PopupProps) => {
   return <>{children}</>;

package/popup/lib/PopupButtonGroup.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import {GrowthBehavior, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {usePopupModel} from './hooks';
+
+export interface PopupButtonGroupProps extends GrowthBehavior, CSProps {
+  /**
+   * The contents of the PopupButtonGroup. Can be `Button` children or any valid elements.
+   */
+  children?: React.ReactNode;
+  /**
+   * The position of elements within the PopupButtonGroup. Can be `start`, `center`, or `end`.
+   * @default 'end'
+   */
+  position?: 'start' | 'center' | 'end';
+}
+
+export const popupButtonGroupStencil = createStencil({
+  base: {
+    display: 'flex',
+    gap: system.legacy.gap.sm,
+    '@media screen and (max-width: 768px)': {
+      flexDirection: 'column',
+    },
+  },
+  modifiers: {
+    position: {
+      start: {
+        justifyContent: 'flex-start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      end: {
+        justifyContent: 'flex-end',
+      },
+    },
+    grow: {
+      true: {
+        '& button': {
+          width: '100%',
+        },
+      },
+    },
+  },
+});
+
+export const PopupButtonGroup = createSubcomponent('div')({
+  displayName: 'Popup.ButtonGroup',
+  modelHook: usePopupModel,
+})(({children, position = 'end', grow, ...elemProps}: PopupButtonGroupProps, Element) => {
+  return (
+    <Element {...handleCsProp(elemProps, popupButtonGroupStencil({position, grow}))}>
+      {children}
+    </Element>
+  );
+});

package/popup/lib/PopupCard.tsx

@@ -115,6 +115,7 @@ export const popupCardStencil = createStencil({
     },
     '@media screen and (max-width: 768px)': {
       transformOrigin: 'bottom center',
+      padding: system.legacy.padding.lg,
     },
   }),
 });

package/toast/lib/ToastCloseIcon.tsx

@@ -1,15 +1,16 @@
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
 export const toastCloseIconStencil = createStencil({
   base: {
     position: 'absolute',
-    insetBlockStart: px2rem(2),
-    insetInlineEnd: px2rem(2),
+    insetBlockStart: base.legacy.size50,
+    insetInlineEnd: base.legacy.size50,
   },
 });