@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,85 +1,101 @@
 "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);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toast = void 0;
-var React = __importStar(require("react"));
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var common_1 = require("@workday/canvas-kit-react/common");
-var button_1 = require("@workday/canvas-kit-react/button");
-var toastWidth = 360;
-var ToastContentContainer = common_1.styled('div')(__assign({ display: 'flex', alignItems: 'center' }, tokens_1.type.levels.subtext.large), function (_a) {
-    var onClose = _a.onClose;
-    return ({
-        marginRight: onClose ? tokens_1.space.m : undefined,
-    });
-});
-var ToastSystemIcon = common_1.styled(icon_1.SystemIcon)({
-    marginRight: tokens_1.space.s,
-    alignSelf: 'start',
-});
-var _a = tokens_1.type.levels.subtext.large, color = _a.color, subTextLargeStyles = __rest(_a, ["color"]);
-var StyledActionButton = common_1.styled(button_1.Hyperlink)(__assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: tokens_1.space.xxxs }));
-var Message = common_1.styled('div')({
-    wordBreak: 'break-word',
-});
-exports.Toast = common_1.createComponent('div')({
+const react_1 = __importDefault(require("react"));
+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 ToastCloseIcon_1 = require("./ToastCloseIcon");
+const ToastIcon_1 = require("./ToastIcon");
+const ToastMessage_1 = require("./ToastMessage");
+const ToastLink_1 = require("./ToastLink");
+const ToastBody_1 = require("./ToastBody");
+const useToastModel_1 = require("./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
+ */
+const getAriaAttributes = (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>
+ * );
+ *```
+ */
+exports.Toast = common_1.createContainer('div')({
     displayName: 'Toast',
-    Component: function (_a, ref, Element) {
-        var _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.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 ? tokens_1.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 === tokens_1.colors.cinnamon500 && icon === canvas_system_icons_web_1.exclamationCircleIcon;
-        return (React.createElement(popup_1.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_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
-            React.createElement(popup_1.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_1.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_1.ToastBody,
+        /**
+         * `Toast.CloseIcon` renders a {@link PopupCloseIcon}. You can pass an `onClick` when used with `Popper` to dismiss the `Toast`.
+         */
+        CloseIcon: ToastCloseIcon_1.ToastCloseIcon,
+        /**
+         * `ToastIcon` renders a `SystemIcon` where you have access to all styling properties from `SystemIcon`.
+         */
+        Icon: ToastIcon_1.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_1.ToastMessage,
+        /**
+         * `Toast.Link` renders our `Hyperlink` component. If you need to link to more information, use this component.
+         */
+        Link: ToastLink_1.ToastLink,
     },
+})(({ children, ...elemProps }, _, model) => {
+    return (react_1.default.createElement(popup_1.Popup.Card, Object.assign({ as: layout_1.Flex, width: 360, padding: "0" }, getAriaAttributes(model.state.mode, model.state.id), { flexDirection: "row", gap: "xxxs" }, elemProps), children));
 });

package/dist/commonjs/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/commonjs/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/commonjs/toast/lib/ToastBody.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastBody = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+exports.ToastBody = common_1.createComponent('div')({
+    displayName: 'Toast.Body',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(layout_1.Flex, Object.assign({ alignItems: "flex-start", flexDirection: "column", justifyContent: "center", paddingY: "s", ref: ref, as: Element, flexGrow: 1, gap: "xxxs" }, elemProps), children));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/toast/lib/ToastCloseIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastCloseIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+exports.ToastCloseIcon = common_1.createComponent('button')({
+    displayName: 'Toast.CloseIcon',
+    Component: (elemProps, ref, Element) => {
+        return (react_1.default.createElement(popup_1.Popup.CloseIcon, Object.assign({ as: Element, ref: ref, size: "small", position: "relative" }, elemProps)));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/toast/lib/ToastIcon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+exports.ToastIcon = common_1.createComponent('div')({
+    displayName: 'Toast.Icon',
+    Component: (elemProps, ref, Element) => {
+        return (react_1.default.createElement(icon_1.SystemIcon, Object.assign({ colorHover: elemProps.color, marginY: "s", marginX: "xs", alignSelf: "start", ref: ref, as: Element }, elemProps)));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/toast/lib/ToastLink.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastLink = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const button_1 = require("@workday/canvas-kit-react/button");
+exports.ToastLink = common_1.createComponent('a')({
+    displayName: 'Toast.Link',
+    Component: ({ children, href, ...elemProps }, ref, Element) => {
+        return (react_1.default.createElement(button_1.Hyperlink, Object.assign({ ref: ref, href: href, as: Element }, elemProps), children));
+    },
+});

package/dist/commonjs/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/commonjs/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"}

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastMessage = void 0;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useToastModel_1 = require("./hooks/useToastModel");
+const text_1 = require("@workday/canvas-kit-react/text");
+exports.ToastMessage = common_1.createSubcomponent('p')({
+    modelHook: useToastModel_1.useToastModel,
+})(({ children, ...elemProps }, Element, model) => {
+    return (react_1.default.createElement(text_1.Subtext, Object.assign({ size: "large", wordBreak: "break-word", marginY: "zero", id: model.state.id, as: Element }, elemProps), children));
+});

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,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastModel = void 0;
+const 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: '',
+    },
+})(config => {
+    const id = common_1.useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
+    return { state, events: {} };
+});

package/dist/commonjs/tokens/index.d.ts

@@ -410,6 +410,6 @@ export declare const canvas: {
     };
 };
 export * from '@workday/canvas-colors-web';
-export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValues, CSSProperties, };
-export type { CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues, CanvasColor, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
+export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, };
+export type { CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues, CanvasColor, CanvasDepth, CanvasDepthValues, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, CSSProperties, };
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,GACd,CAAA"}

package/dist/commonjs/tokens/index.js

@@ -11,19 +11,19 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BrandingColor = exports.monoFontFamily = exports.fontFamily = exports.type = exports.spaceNumbers = exports.space = exports.depth = exports.gradients = exports.colors = exports.borderRadius = exports.canvas = void 0;
-var canvas_colors_web_1 = require("@workday/canvas-colors-web");
+const canvas_colors_web_1 = require("@workday/canvas-colors-web");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return canvas_colors_web_1.colors; } });
 Object.defineProperty(exports, "gradients", { enumerable: true, get: function () { return canvas_colors_web_1.gradients; } });
-var radius_1 = require("./lib/radius");
+const radius_1 = require("./lib/radius");
 Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return radius_1.borderRadius; } });
-var colors_types_1 = require("./lib/colors.types");
+const colors_types_1 = require("./lib/colors.types");
 Object.defineProperty(exports, "BrandingColor", { enumerable: true, get: function () { return colors_types_1.BrandingColor; } });
-var depth_1 = require("./lib/depth");
+const depth_1 = require("./lib/depth");
 Object.defineProperty(exports, "depth", { enumerable: true, get: function () { return depth_1.depth; } });
-var space_1 = require("./lib/space");
+const space_1 = require("./lib/space");
 Object.defineProperty(exports, "space", { enumerable: true, get: function () { return space_1.space; } });
 Object.defineProperty(exports, "spaceNumbers", { enumerable: true, get: function () { return space_1.spaceNumbers; } });
-var type_1 = require("./lib/type");
+const type_1 = require("./lib/type");
 Object.defineProperty(exports, "type", { enumerable: true, get: function () { return type_1.type; } });
 Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return type_1.fontFamily; } });
 Object.defineProperty(exports, "monoFontFamily", { enumerable: true, get: function () { return type_1.monoFontFamily; } });

package/dist/commonjs/tokens/lib/depth.d.ts

@@ -29,7 +29,7 @@ export declare type CanvasDepth = {
      * ```
      */
     1: {
-        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 2
@@ -45,7 +45,7 @@ export declare type CanvasDepth = {
      * ```
      */
     2: {
-        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 3
@@ -61,12 +61,11 @@ export declare type CanvasDepth = {
      * ```
      */
     3: {
-        boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 4
      *
-     *
      * @example
      * ```ts
      * import { depth } from '@workday/canvas-kit-react/tokens';
@@ -77,7 +76,7 @@ export declare type CanvasDepth = {
      * ```
      */
     4: {
-        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 5
@@ -93,7 +92,7 @@ export declare type CanvasDepth = {
      * ```
      */
     5: {
-        boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 6
@@ -109,7 +108,7 @@ export declare type CanvasDepth = {
      * ```
      */
     6: {
-        boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
+        boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)';
     };
 };
 declare type ValueOf<T> = T[keyof T];

package/dist/commonjs/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,iEAAiE,CAAC;KAC9E,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kEAAkE,CAAC;KAC/E,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mEAAmE,CAAC;KAChF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mEAAmE,CAAC;KAChF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oEAAoE,CAAC;KACjF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oEAAoE,CAAC;KACjF,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAsBnB,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,wEAAwE,CAAC;KACrF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,yEAAyE,CAAC;KACtF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,0EAA0E,CAAC;KACvF,CAAC;IACF;;;;;;;;;;;OAWG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,0EAA0E,CAAC;KACvF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,2EAA2E,CAAC;KACxF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,2EAA2E,CAAC;KACxF,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAsBnB,CAAC"}

package/dist/commonjs/tokens/lib/depth.js

@@ -28,21 +28,21 @@ exports.depth = {
         boxShadow: 'none',
     },
     1: {
-        boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)',
     },
     2: {
-        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)',
     },
     3: {
-        boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)',
     },
     4: {
-        boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)',
     },
     5: {
-        boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)',
     },
     6: {
-        boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
+        boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)',
     },
 };

package/dist/commonjs/tokens/lib/type/fontFamilies.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fontFamilies.d.ts","sourceRoot":"","sources":["../../../../../tokens/lib/type/fontFamilies.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,UAAU,QAEyC,CAAC;AACjE,eAAO,MAAM,cAAc,QAGgD,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAG1B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B;;;SAGK;IACL,OAAO,EAAE,OAAO,UAAU,CAAC;IAC3B;;;SAGK;IACL,SAAS,EAAE,OAAO,cAAc,CAAC;CAClC,CAAC"}
+{"version":3,"file":"fontFamilies.d.ts","sourceRoot":"","sources":["../../../../../tokens/lib/type/fontFamilies.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,QAEyC,CAAC;AACjE,eAAO,MAAM,cAAc,QAGgD,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAG1B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B;;;SAGK;IACL,OAAO,EAAE,OAAO,UAAU,CAAC;IAC3B;;;SAGK;IACL,SAAS,EAAE,OAAO,cAAc,CAAC;CAClC,CAAC"}

package/dist/commonjs/tokens/lib/type/fontFamilies.js

@@ -1,12 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fontFamilies = exports.monoFontFamily = exports.fontFamily = void 0;
-var get_1 = __importDefault(require("lodash/get"));
-var inheritFont = typeof window !== 'undefined' && get_1.default(window, 'window.workday.canvas.inheritFontFamily');
-var inheritMonoFont = typeof window !== 'undefined' && get_1.default(window, 'window.workday.canvas.inheritMonoFontFamily');
+// prettier-ignore
+//@ts-ignore
+const canvasObject = typeof window !== 'undefined' && window.workday && window.workday.canvas && window.workday.canvas;
+const inheritFont = typeof canvasObject !== 'undefined' && canvasObject.inheritFontFamily;
+const inheritMonoFont = typeof canvasObject !== 'undefined' && canvasObject.inheritMonoFontFamily;
 exports.fontFamily = inheritFont
     ? 'inherit'
     : '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif';