@workday/canvas-kit-react 9.0.0-alpha.359-next.4 → 9.0.0-alpha.362-next.2

package/dist/commonjs/toast/lib/hooks/useToastModel.d.ts

@@ -0,0 +1,75 @@
+export declare type AriaRoleMode = 'dialog' | 'status' | 'alert';
+export declare const useToastModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: string;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+    /**
+     * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+     */
+    id: string;
+}, {}, {
+    id: string;
+    /**
+     * Sets the correct aria attributes for the Toast.
+     * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+     * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+     * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+     * If you use this mode, you must add an aria-label to the main `Toast` component.
+     * The aria-label should provide additional information to the contents of the `Toast`.
+     * @default 'status'
+     */
+    mode: AriaRoleMode;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: AriaRoleMode;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useToastModel.d.ts.map

package/dist/commonjs/toast/lib/hooks/useToastModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastModel.d.ts","sourceRoot":"","sources":["../../../../../toast/lib/hooks/useToastModel.tsx"],"names":[],"mappings":"AACA,oBAAY,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,eAAO,MAAM,aAAa;IAEtB;;;;;;;;OAQG;;IAEH;;OAEG;;;;;QAZH;;;;;;;;WAQG;;;;;IARH;;;;;;;;OAQG;;IAEH;;OAEG;;;;IAZH;;;;;;;;OAQG;;;;;QARH;;;;;;;;WAQG;;;;EAeL,CAAC"}

package/dist/commonjs/toast/lib/hooks/useToastModel.js

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastModel = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+exports.useToastModel = common_1.createModelHook({
+    defaultConfig: {
+        /**
+         * Sets the correct aria attributes for the Toast.
+         * Alert toasts are used to convey urgency and important information. The `role` is set to `alert`
+         * Status toasts are used to convey a message or a successful action. The `role` is set to `status`
+         * Dialog toasts are used when there's an action to be taken. The `role` is set to `dialog`.
+         * If you use this mode, you must add an aria-label to the main `Toast` component.
+         * The aria-label should provide additional information to the contents of the `Toast`.
+         * @default 'status'
+         */
+        mode: 'status',
+        /**
+         * When the Toast has a `mode="dialog"` this adds a unique id to `Toast.Message` so that the message gets read out for screen readers.
+         */
+        id: '',
+    },
+})(function (config) {
+    var id = common_1.useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
+    return { state: state, events: {} };
+});

package/dist/es6/collection/lib/useCursorListModel.js

@@ -278,7 +278,7 @@ export var useCursorListModel = createModelHook({
     var _b = React.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
     var columnCount = config.columnCount || 0;
     var list = useBaseListModel(config);
-    var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(config.items[0]) : ''));
+    var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
     var navigation = config.navigation;
     var state = __assign(__assign({}, list.state), { 
         /** The id of the list item the cursor is pointing to */

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}

package/dist/es6/collection/lib/useListItemRovingFocus.js

@@ -66,12 +66,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
 ```
  */
 export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(function (_a, ref, elemProps) {
-    var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;
+    var state = _a.state, events = _a.events, navigation = _a.navigation;
     if (elemProps === void 0) { elemProps = {}; }
     // Tracks when this element has focus. If this item is removed while still focused, we have to
     // inform the model to move the cursor to the next item.
     var focusRef = React.useRef(false);
-    var getIdRef = React.useRef(getId);
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
     // empty array
@@ -88,7 +87,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
             requestAnimationFrame(function () {
                 var _a;
                 (_a = document
-                    .querySelector("[data-focus-id=\"" + (state.id + "-" + getIdRef.current(item_1)) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
+                    .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
             });
             keyDownRef.current = false;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAMhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;CAAG;AAQ1F,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAMzB,CAAC"}
+{"version":3,"file":"PopupCloseIcon.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;CAAG;AAE1F,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;EAiBzB,CAAC"}

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

@@ -22,20 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { xIcon } from '@workday/canvas-system-icons-web';
-import { styled, createSubcomponent, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { usePopupCloseButton, usePopupModel } from './hooks';
-var closeIconSpacing = 4;
-var StyledCloseIcon = styled(TertiaryButton)({
-    position: 'absolute',
-    right: closeIconSpacing,
-    top: closeIconSpacing,
-});
 export var PopupCloseIcon = createSubcomponent('button')({
     displayName: 'Popup.CloseIcon',
     modelHook: usePopupModel,
     elemPropsHook: usePopupCloseButton,
 })(function (_a, Element) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return React.createElement(StyledCloseIcon, __assign({ as: Element, size: "medium", icon: xIcon, type: "button" }, elemProps));
+    return (React.createElement(TertiaryButton, __assign({ as: Element, size: "medium", icon: xIcon, type: "button", position: "absolute", right: space.xxxs, top: space.xxxs }, elemProps)));
 });

package/dist/es6/toast/index.d.ts

@@ -1,2 +1,3 @@
 export * from './lib/Toast';
+export * from './lib/hooks/useToastModel';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC"}

package/dist/es6/toast/index.js

@@ -1 +1,2 @@
 export * from './lib/Toast';
+export * from './lib/hooks/useToastModel';

package/dist/es6/toast/lib/Toast.d.ts

@@ -1,34 +1,68 @@
-import { Popup } from '@workday/canvas-kit-react/popup';
-import { CanvasColor } from '@workday/canvas-kit-react/tokens';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-export interface ToastProps extends ExtractProps<typeof Popup.Card, never> {
-    /**
-     * The icon of the Toast.
-     * @default checkIcon
-     */
-    icon?: CanvasSystemIcon;
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {
+}
+/**
+ * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
+ *
+ * ```tsx
+ * import { Toast } from "@workday/canvas-kit-react/toast";
+ *
+ * const MyToast = (props: CardProps) => (
+ *    <Toast mode="dialog" aria-label="notifcation">
+ *      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+ *      <Toast.Body>
+ *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+ *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+ *      </Toast.Body>
+ *      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+ *    </Toast>
+ * );
+ *```
+ */
+export declare const Toast: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ToastProps & Partial<{
+    mode: import("./hooks/useToastModel").AriaRoleMode;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        mode: import("./hooks/useToastModel").AriaRoleMode;
+    };
+    events: {};
+}> & {
     /**
-     * The color of the Toast icon.
-     * @default colors.greenApple400
+     * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
+     *
+     * ```tsx
+     * <Toast.Body>
+     *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+     *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+     * </Toast.Body>
+     * ```
      */
-    iconColor?: CanvasColor | string;
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastBody").ToastBodyProps>;
     /**
-     * The text of the Toast message.
+     * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
      */
-    children: string;
+    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ToastCloseIcon").ToastCloseIconProps>;
     /**
-     * The function called when the Toast is closed.
+     * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
      */
-    onClose?: () => void;
+    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ToastIcon").ToastIconProps>;
     /**
-     * The function called when the Toast action is clicked.
+     * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
+     * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
      */
-    onActionClick?: () => void;
+    Message: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("./ToastMessage").ToastMessageProps, {
+        state: {
+            id: string;
+            mode: import("./hooks/useToastModel").AriaRoleMode;
+        };
+        events: {};
+    }>;
     /**
-     * The text of the Toast action.
+     * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
      */
-    actionText?: string;
-}
-export declare const Toast: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastProps>;
+    Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("./ToastLink").ToastLinkProps>;
+};
 //# sourceMappingURL=Toast.d.ts.map

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,KAAK,EAAC,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAsB,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGlF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAkB,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAGnG,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAiCD,eAAO,MAAM,KAAK,gFA+ChB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAStD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAkC5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAiBL,CAAC"}

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

@@ -20,44 +20,99 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as React from 'react';
+import React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
-import { space, colors, type } from '@workday/canvas-kit-react/tokens';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { checkIcon, exclamationCircleIcon } from '@workday/canvas-system-icons-web';
-import { createComponent, styled } from '@workday/canvas-kit-react/common';
-import { Hyperlink } from '@workday/canvas-kit-react/button';
-var toastWidth = 360;
-var ToastContentContainer = styled('div')(__assign({ display: 'flex', alignItems: 'center' }, type.levels.subtext.large), function (_a) {
-    var onClose = _a.onClose;
-    return ({
-        marginRight: onClose ? space.m : undefined,
-    });
-});
-var ToastSystemIcon = styled(SystemIcon)({
-    marginRight: space.s,
-    alignSelf: 'start',
-});
-var _a = type.levels.subtext.large, color = _a.color, subTextLargeStyles = __rest(_a, ["color"]);
-var StyledActionButton = styled(Hyperlink)(__assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: space.xxxs }));
-var Message = styled('div')({
-    wordBreak: 'break-word',
-});
-export var Toast = createComponent('div')({
+import { ToastCloseIcon } from './ToastCloseIcon';
+import { ToastIcon } from './ToastIcon';
+import { ToastMessage } from './ToastMessage';
+import { ToastLink } from './ToastLink';
+import { ToastBody } from './ToastBody';
+import { useToastModel } from './hooks/useToastModel';
+/**
+ * The function helps set the correct aria attributes based on the mode
+ * @param mode Defines what aria attributes will be added to the main container
+ * @param id Used to tie the Toast to Toast.Message for screen readers
+ */
+var getAriaAttributes = function (mode, id) {
+    switch (mode) {
+        case 'dialog':
+            return {
+                'aria-describedby': id,
+                // This is added by Popup.Card, so overwriting to remove it
+                'aria-labelledby': undefined,
+                role: 'dialog',
+            };
+        case 'alert':
+            return {
+                role: 'alert',
+                'aria-live': 'assertive',
+                'aria-atomic': true,
+            };
+        case 'status':
+            return {
+                role: 'status',
+                'aria-live': 'polite',
+                'aria-atomic': true,
+            };
+        default: {
+            return {};
+        }
+    }
+};
+/**
+ * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
+ *
+ * ```tsx
+ * import { Toast } from "@workday/canvas-kit-react/toast";
+ *
+ * const MyToast = (props: CardProps) => (
+ *    <Toast mode="dialog" aria-label="notifcation">
+ *      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+ *      <Toast.Body>
+ *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+ *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+ *      </Toast.Body>
+ *      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+ *    </Toast>
+ * );
+ *```
+ */
+export var Toast = createContainer('div')({
     displayName: 'Toast',
-    Component: function (_a, ref, Element) {
-        var _b = _a.icon, icon = _b === void 0 ? checkIcon : _b, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
-        _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
-        iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
-        var isInteractive = onClose || onActionClick;
-        var isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
-        return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
-            onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
-            React.createElement(Popup.Body, null,
-                React.createElement(ToastContentContainer, { onClose: onClose },
-                    icon && React.createElement(ToastSystemIcon, { color: iconColor, colorHover: iconColor, icon: icon }),
-                    React.createElement(Message, null,
-                        children,
-                        onActionClick && (React.createElement(StyledActionButton, { as: "button", onClick: onActionClick }, actionText)))))));
+    modelHook: useToastModel,
+    subComponents: {
+        /**
+         * `Toast.Body` should container `Toast.Message` and `Toast.Link`. This ensures proper styling and spacing between elements.
+         *
+         * ```tsx
+         * <Toast.Body>
+         *  <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+         *  <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+         * </Toast.Body>
+         * ```
+         */
+        Body: ToastBody,
+        /**
+         * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
+         */
+        CloseIcon: ToastCloseIcon,
+        /**
+         * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
+         */
+        Icon: ToastIcon,
+        /**
+         * `Toast.Message` renders our `Subtext` component where you can style however way you'd like with style properties.
+         * This component also has an `id` so that when the `Toast` has a prop of `mode="dialog"` the message is read out by screen readers by adding an `aria-describedby` on the main `Toast` component.
+         */
+        Message: ToastMessage,
+        /**
+         * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
+         */
+        Link: ToastLink,
     },
+})(function (_a, _, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(Popup.Card, __assign({ as: Flex, width: 360, padding: "0" }, getAriaAttributes(model.state.mode, model.state.id), { flexDirection: "row", gap: "xxxs" }, elemProps), children));
 });

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

@@ -0,0 +1,6 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {
+}
+export declare const ToastBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastBodyProps>;
+//# sourceMappingURL=ToastBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,SAAS,oFAmBpB,CAAC"}

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

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export var ToastBody = createComponent('div')({
+    displayName: 'Toast.Body',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Flex, __assign({ alignItems: "flex-start", flexDirection: "column", justifyContent: "center", paddingY: "s", ref: ref, as: Element, flexGrow: 1, gap: "xxxs" }, elemProps), children));
+    },
+});

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

@@ -0,0 +1,6 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {
+}
+export declare const ToastCloseIcon: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToastCloseIconProps>;
+//# sourceMappingURL=ToastCloseIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAEtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,cAAc,4FAOzB,CAAC"}

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

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+export var ToastCloseIcon = createComponent('button')({
+    displayName: 'Toast.CloseIcon',
+    Component: function (elemProps, ref, Element) {
+        return (React.createElement(Popup.CloseIcon, __assign({ as: Element, ref: ref, size: "small", position: "relative" }, elemProps)));
+    },
+});

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

@@ -0,0 +1,5 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {
+}
+export declare const ToastIcon: import("@workday/canvas-kit-react/common").ElementComponent<"div", ToastIconProps>;
+//# sourceMappingURL=ToastIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,SAAS,oFAepB,CAAC"}

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

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+export var ToastIcon = createComponent('div')({
+    displayName: 'Toast.Icon',
+    Component: function (elemProps, ref, Element) {
+        return (React.createElement(SystemIcon, __assign({ colorHover: elemProps.color, marginY: "s", marginX: "xs", alignSelf: "start", ref: ref, as: Element }, elemProps)));
+    },
+});

package/dist/es6/toast/lib/ToastLink.d.ts

@@ -0,0 +1,5 @@
+import { HyperlinkProps } from '@workday/canvas-kit-react/button';
+export interface ToastLinkProps extends HyperlinkProps {
+}
+export declare const ToastLink: import("@workday/canvas-kit-react/common").ElementComponent<"a", ToastLinkProps>;
+//# sourceMappingURL=ToastLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastLink.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastLink.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,cAAc;CAAG;AAEzD,eAAO,MAAM,SAAS,kFASpB,CAAC"}

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

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Hyperlink } from '@workday/canvas-kit-react/button';
+export var ToastLink = createComponent('a')({
+    displayName: 'Toast.Link',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, href = _a.href, elemProps = __rest(_a, ["children", "href"]);
+        return (React.createElement(Hyperlink, __assign({ ref: ref, href: href, as: Element }, elemProps), children));
+    },
+});

package/dist/es6/toast/lib/ToastMessage.d.ts

@@ -0,0 +1,12 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Subtext } from '@workday/canvas-kit-react/text';
+export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {
+}
+export declare const ToastMessage: import("@workday/canvas-kit-react/common").ElementComponentM<"p", ToastMessageProps, {
+    state: {
+        id: string;
+        mode: import("./hooks/useToastModel").AriaRoleMode;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=ToastMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastMessage.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAEvD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,CAAC,EAAE,MAAM,CAAC;CAAG;AAExF,eAAO,MAAM,YAAY;;;;;;EAevB,CAAC"}