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

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/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AA6C5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAqD5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}

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

@@ -3,7 +3,7 @@ import { createContainer } 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 { system } from '@workday/canvas-tokens-web';
+import { base, system } from '@workday/canvas-tokens-web';
 import { ToastBody } from './ToastBody';
 import { ToastCloseIcon } from './ToastCloseIcon';
 import { ToastIcon } from './ToastIcon';
@@ -42,8 +42,8 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "2iwoo", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));" }
-}, "toast-3c71ec");
+    base: { name: "3qkpd3", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-3);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" }
+}, "toast-4e8aec");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
  *

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

@@ -1 +1 @@
-{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,gBAAgB,iJAS3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFASpB,CAAC"}
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,gBAAgB,iJAQ3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFASpB,CAAC"}

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

@@ -2,10 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
 export const toastBodyStencil = createStencil({
-    base: { name: "ocyto", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-block:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));flex-grow:1;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" }
-}, "toast-body-ac2901");
+    base: { name: "3nmn23", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;flex-grow:1;gap:0;" }
+}, "toast-body-36e90e");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {

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,iJAIhC,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

@@ -3,12 +3,13 @@ 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 } from '@workday/canvas-kit-styling';
+import { base } from '@workday/canvas-tokens-web';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "22ooiv", styles: "box-sizing:border-box;position:relative;" }
-}, "toast-close-icon-f7cf19");
+    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) => {
-        return (_jsx(Popup.CloseIcon, { as: Element, ref: ref, size: "small", ...mergeStyles(elemProps, toastCloseIconStencil()) }));
+        return (_jsx(Popup.CloseIcon, { as: Element, ref: ref, size: "extraSmall", ...mergeStyles(elemProps, toastCloseIconStencil()) }));
     },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,gBAAgB,iJAK3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFAKpB,CAAC"}
+{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,gBAAgB,iJAI3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFAYpB,CAAC"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
+import { component } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "1cz629", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
-}, "toast-icon-4762f0");
+    base: { name: "19wdy9", styles: "box-sizing:border-box;align-self:start;" }
+}, "toast-icon-7830d1");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',
     Component: (elemProps, ref, Element) => {
-        return _jsx(SystemIcon, { ref: ref, as: Element, ...handleCsProp(elemProps, toastIconStencil()) });
+        return (_jsx(SystemIcon, { ref: ref, as: Element, size: component.legacy.systemIcon.size.md, ...handleCsProp(elemProps, toastIconStencil()) }));
     },
 });

package/dist/es6/tooltip/lib/TooltipContainer.d.ts

@@ -20,10 +20,7 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
 export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<{
     elementHasFocus: {
         true: {
-            padding: string;
-            '&:before': {
-                margin: "var(--cnvs-base-size-75, 0.375rem)";
-            };
+            margin: string;
         };
     };
 }, {}, {

package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;gBAuElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;gBAkElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -17,10 +17,10 @@ export const tooltipContainerStencil = createStencil({
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "1b889m", 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-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-3s4los;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
+    base: { name: "259blp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-3s4los;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
     modifiers: {
         elementHasFocus: {
-            true: { name: "2hslnx", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
+            true: { name: "ak2vn", styles: "margin:0.375rem;" }
         }
     }
 }, "tooltip-container-0d74d6");

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.0463-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.0463-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0463-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": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
+  "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/Toast.tsx

@@ -4,7 +4,7 @@ import {ExtractProps, createContainer} 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 {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {ToastBody} from './ToastBody';
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -52,9 +52,17 @@ const toastStencil = createStencil({
     display: 'flex',
     flexDirection: 'row',
     width: px2rem(360),
-    padding: 0,
-    gap: system.legacy.gap.xs,
+    paddingBlock: system.legacy.padding.sm,
+    paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.xl}`,
+    gap: base.legacy.size150,
     borderRadius: system.legacy.shape.xl,
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    backgroundColor: system.legacy.color.surface.default,
+    boxShadow: system.depth[3],
+
+    '@media (forced-colors: active)': {
+      outline: `${px2rem(1)} solid CanvasText`,
+    },
   },
 });
 

package/toast/lib/ToastBody.tsx

@@ -2,7 +2,6 @@ import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
@@ -11,9 +10,8 @@ export const toastBodyStencil = createStencil({
     alignItems: 'flex-start',
     flexDirection: 'column',
     justifyContent: 'center',
-    paddingBlock: system.legacy.padding.md,
     flexGrow: 1,
-    gap: system.legacy.gap.xs,
+    gap: 0,
   },
 });
 

package/toast/lib/ToastCloseIcon.tsx

@@ -2,12 +2,15 @@ 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} 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: 'relative',
+    position: 'absolute',
+    insetBlockStart: base.legacy.size50,
+    insetInlineEnd: base.legacy.size50,
   },
 });
 
@@ -18,7 +21,7 @@ export const ToastCloseIcon = createComponent('button')({
       <Popup.CloseIcon
         as={Element}
         ref={ref}
-        size="small"
+        size="extraSmall"
         {...mergeStyles(elemProps, toastCloseIconStencil())}
       />
     );

package/toast/lib/ToastIcon.tsx

@@ -1,20 +1,26 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {component} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
 export const toastIconStencil = createStencil({
   base: {
     alignSelf: 'start',
-    margin: `${system.legacy.gap.md} ${base.legacy.size150}`,
   },
 });
 
 export const ToastIcon = createComponent('div')({
   displayName: 'Toast.Icon',
   Component: (elemProps: ToastIconProps, ref, Element) => {
-    return <SystemIcon ref={ref} as={Element} {...handleCsProp(elemProps, toastIconStencil())} />;
+    return (
+      <SystemIcon
+        ref={ref}
+        as={Element}
+        size={component.legacy.systemIcon.size.md}
+        {...handleCsProp(elemProps, toastIconStencil())}
+      />
+    );
   },
 });