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

package/dist/es6/lib/specs.js

@@ -6903,66 +6903,6 @@ module.exports = {specifications: [
   {
     "type": "file",
     "name": "Toast.spec.ts",
-    "children": [
-      {
-        "type": "describe",
-        "name": "Toast",
-        "children": [
-          {
-            "type": "describe",
-            "name": "given the 'Error' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the 'Success' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the toast with no close icon or action button",
-            "children": [
-              {
-                "type": "it",
-                "name": "should have a role of status"
-              },
-              {
-                "type": "it",
-                "name": "should have aria live set to polite"
-              },
-              {
-                "type": "it",
-                "name": "should have aria atomic set to true"
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the toast with a close button  and action button",
-            "children": [
-              {
-                "type": "it",
-                "name": "should have a role of dialog"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "type": "file",
-    "name": "ToastLabs.spec.ts",
     "children": [
       {
         "type": "describe",

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

@@ -11,6 +11,7 @@ any questions.
   - [Stack](#stack-hstack-vstack)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
+	- [Toast](#toast)
 - [Utility Updates](#utility-updates)
   - [focusRing](#focusring)
 
@@ -127,6 +128,37 @@ This change affects all of our `buttons` including:
 If you still wish for a specific `button` within a `form` to submit, just add the attribute
 `type="submit"`.
 
+### Toast
+
+We've promoted `Toast` from Labs (`@workday/canvas-kit-labs-react`) to the Main
+(`@workday/canvas-kit-react`) package.
+
+- This component is a
+  [compound component](/getting-started/for-developers/resources/compound-components/).
+- It has a `mode` prop that allows for proper accessibility attributes to be defined.
+- Its sub components allow for more flexibility and access to lower level elements.
+
+```tsx
+// v8
+<Toast actionText="View more details" onClose={handleClose}>Your workbook was successfully processed.</Toast>
+
+// v9
+<Toast mode="dialog">
+  <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>
+```
+
+🤖 The codemod will convert the `Toast` into a compound component with it's sub components having
+the correct props.
+
+> **Note**: If your Toast is a warning of some kind, you'll have to manually set the `mode` to
+> `alert`.
+
 ## Utility Updates
 
 ### focusRing

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -32,9 +32,9 @@ export default () => {
    * @param id The id of the item that will be removed
    */
   const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
-    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
-    const nextId = model.getId(model.state.items[nextIndex]);
+    const nextId = model.state.items[nextIndex].id;
     if (model.state.selectedIds[0] === id) {
       // We're removing the currently selected item. Select next item
       model.events.select({id: nextId});

package/dist/mdx/{labs-react → react}/toast/examples/Basic.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
   return (
     <Toast>
-      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Icon icon={checkIcon} color="greenApple400" />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       </Toast.Body>

package/dist/mdx/react/toast/examples/RTL.tsx

@@ -1,14 +1,22 @@
-import * as React from 'react';
+import React from 'react';
+
 import {Toast} from '@workday/canvas-kit-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const handleClose = () => {
-    console.log('close button clicked');
-  };
+  const handleClose = () => console.log('close button clicked');
+
   return (
     <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Toast onClose={handleClose}>Your workbook was successfully processed.</Toast>
+      <Toast mode="dialog">
+        <Toast.Icon icon={checkIcon} color="greenApple400" />
+        <Toast.Body>
+          <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        </Toast.Body>
+        <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+      </Toast>
     </CanvasProvider>
   );
 };

package/dist/mdx/{labs-react → react}/toast/examples/ToastAlert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {Toast} from '@workday/canvas-kit-react/toast';
 import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';
 

package/dist/mdx/{labs-react → react}/toast/examples/ToastDialog.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
 
 export default () => (
-  <Toast mode="dialog">
-    <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+  <Toast mode="dialog" aria-label="notification">
+    <Toast.Icon icon={checkIcon} color="greenApple400" />
     <Toast.Body>
       <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       <Toast.Link href="#hreflink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -1,16 +1,20 @@
-import * as React from 'react';
+import React from 'react';
+
 import {Toast} from '@workday/canvas-kit-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
-  const handleActionClick = () => {
-    console.log('action button clicked');
-  };
-  const handleClose = () => {
-    console.log('close button clicked');
-  };
+  const handleClose = () => console.log('close button clicked');
+
   return (
-    <Toast actionText="View more details" onActionClick={handleActionClick} onClose={handleClose}>
-      Your workbook was successfully processed.
+    <Toast mode="dialog" aria-label="notification">
+      <Toast.Icon icon={checkIcon} color="greenApple400" />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully</Toast.Message>
+        <Toast.Link href="#hyperlink">Custom Link</Toast.Link>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
     </Toast>
   );
 };

package/dist/mdx/react/toast/examples/WithCloseButton.tsx

@@ -1,9 +1,19 @@
-import * as React from 'react';
+import React from 'react';
+
 import {Toast} from '@workday/canvas-kit-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
-  const handleClose = () => {
-    console.log('close button clicked');
-  };
-  return <Toast onClose={handleClose}>Your workbook was successfully processed.</Toast>;
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <Toast>
+      <Toast.Icon icon={checkIcon} color="greenApple400" />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+    </Toast>
+  );
 };

package/dist/mdx/react/toast/examples/WithPopper.tsx

@@ -1,7 +1,10 @@
-import * as React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {Popper} from '@workday/canvas-kit-react/popup';
+import React from 'react';
+
 import {Toast} from '@workday/canvas-kit-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {Popper} from '@workday/canvas-kit-react/popup';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => {
   const [open, setOpen] = React.useState(false);
@@ -19,7 +22,13 @@ export default () => {
     <div ref={containerRef}>
       <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
       <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
-        <Toast onClose={handleClose}>Your workbook was successfully processed.</Toast>
+        <Toast mode="dialog" aria-label="notification">
+          <Toast.Icon icon={checkIcon} color="greenApple400" />
+          <Toast.Body>
+            <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+          </Toast.Body>
+          <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+        </Toast>
       </Popper>
     </div>
   );

package/dist/mdx/react/toast/toast.mdx

@@ -1,10 +1,10 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {Toast} from '@workday/canvas-kit-react/toast';
-import Success from './examples/Success';
-import Error from './examples/Error';
+import Basic from './examples/Basic';
+import ToastAlert from './examples/ToastAlert';
 import WithCloseButton from './examples/WithCloseButton';
-import WithActionLink from './examples/WithActionLink';
+import ToastDialog from './examples/ToastDialog';
 import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
 import WithPopper from './examples/WithPopper';
 import RTL from './examples/RTL';
@@ -12,10 +12,8 @@ import RTL from './examples/RTL';
 
 # Canvas Kit Toast
 
-`Toast` is a Canvas-styled React toast component. It allows for a brief message to be be shown about
-a process or action occurring in the app.
-
-[> Workday Design Reference](https://design.workday.com/components/popups/toasts)
+`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+that contains updates or messages about the status of an application's process.
 
 ## Installation
 
@@ -25,39 +23,89 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Basic Usage
+### Basic Example
+
+`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,
+`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.
+
+`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode
+conveys a different purpose of the message and assigns the necessary ARIA attributes to support that
+purpose and provide an accessible experience.
+
+By default, `mode` is set to `status`, which indicates the message contains advisory information
+such as a successful action.
 
-Below are examples we expect will work for most use cases. Note that all examples include icons as
-they are an important signifier to communicate meaning. For this reason, Toast notifications should
-always include an icon.
+<ExampleCodeBlock code={Basic} />
 
-#### Complete Example with Popper
+A `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of
+`status`.
 
-We use Popper to position Toast. Here's an example of how to use them together.
+Here's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is
+positioned using `Popper`.
 
 <ExampleCodeBlock code={WithPopper} />
 
-#### Success
+### Alert
 
-<ExampleCodeBlock code={Success} />
+Set the `mode` prop to `alert` to convey urgent and important information such as an error.
 
-#### Error
+<ExampleCodeBlock code={ToastAlert} />
 
-<ExampleCodeBlock code={Error} />
+An `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of
+`alert`.
 
-#### WithCloseButton
+### Dialog
 
-<ExampleCodeBlock code={WithCloseButton} />
+Set the `mode` prop to `dialog` to convey the presence of a follow-up action. If you use this
+`mode`, you need to add an `aria-label`. This `aria-label` should be like additional information for the
+`Toast`. The `Toast` will also add an `aria-describedby` that links the `Toast` to `Toast.Message`
+so that it is read out to screen readers. The `aria-label` should be different that the contents of
+the `Toast` so there is no duplication being read out by screen readers.
+
+<ExampleCodeBlock code={ToastDialog} />
+
+The `Toast` will be given a role of `dialog`. You need to provide an `aria-label` to add
+additional information regarding the contents.
 
-#### With an Action Link
+Screen readers will read it out in the following order: `"Notifcation: Your workbook was
+successfully processed."
 
-<ExampleCodeBlock code={WithActionLink} />
+> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`
+> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to
+> provide a specific `id` for the `Toast.Message`:
 
-#### With an Action Link and CloseIcon
+```tsx
+export const CustomIDToast = () => {
+  const model = useToastModel({
+    id: '12df5',
+    mode: 'dialog',
+  });
+  return (
+    <Toast model={model}>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        <Toast.Link href="#href">View More Details</Toast.Link>
+      </Toast.Body>
+    </Toast>
+  );
+};
+```
+
+### Close Icon Button
+
+Include the `Toast.CloseIcon` subcomponent to display a close button within the Toast.
+
+<ExampleCodeBlock code={WithCloseButton} />
+
+`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action
+link and a close button.
 
 <ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
 
-#### With RTL
+### Right-to-Left (RTL)
+
+`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
 
 <ExampleCodeBlock code={RTL} />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.359-next.4+6d2e2650",
+  "version": "9.0.0-alpha.362-next.2+ea2fe722",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.359-next.4+6d2e2650",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.359-next.4+6d2e2650",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.359-next.4+6d2e2650",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.362-next.2+ea2fe722",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.362-next.2+ea2fe722",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.362-next.2+ea2fe722",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "6d2e2650a991da4f2e1b0f60bba9643fe8f483b1"
+  "gitHead": "ea2fe722d1176835120f765c4b9b88dcd5234fe5"
 }

package/dist/mdx/labs-react/toast/examples/RTL.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
-import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
-
-export default () => {
-  const handleClose = () => console.log('close button clicked');
-
-  return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Toast mode="dialog">
-        <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
-        <Toast.Body>
-          <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-        </Toast.Body>
-        <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
-      </Toast>
-    </CanvasProvider>
-  );
-};

package/dist/mdx/labs-react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
-import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const handleClose = () => console.log('close button clicked');
-
-  return (
-    <Toast mode="dialog">
-      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
-      <Toast.Body>
-        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-        <Toast.Link href="#hyperlink">Custom Link</Toast.Link>
-      </Toast.Body>
-      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
-    </Toast>
-  );
-};

package/dist/mdx/labs-react/toast/examples/WithCloseButton.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
-import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const handleClose = () => console.log('close button clicked');
-
-  return (
-    <Toast>
-      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
-      <Toast.Body>
-        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-      </Toast.Body>
-      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
-    </Toast>
-  );
-};

package/dist/mdx/labs-react/toast/examples/WithPopper.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
-import {checkIcon} from '@workday/canvas-system-icons-web';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {Popper} from '@workday/canvas-kit-react/popup';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-
-export default () => {
-  const [open, setOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  return (
-    <div ref={containerRef}>
-      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
-      <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
-        <Toast mode="dialog">
-          <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
-          <Toast.Body>
-            <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-          </Toast.Body>
-          <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
-        </Toast>
-      </Popper>
-    </div>
-  );
-};

package/dist/mdx/labs-react/toast/toast.mdx

@@ -1,107 +0,0 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Toast} from '@workday/canvas-kit-labs-react/toast';
-import Basic from './examples/Basic';
-import ToastAlert from './examples/ToastAlert';
-import WithCloseButton from './examples/WithCloseButton';
-import ToastDialog from './examples/ToastDialog';
-import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
-import WithPopper from './examples/WithPopper';
-import RTL from './examples/RTL';
-
-
-# Canvas Kit Toast
-
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
-that contains updates or messages about the status of an application's process.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-labs-react
-```
-
-## Usage
-
-### Basic Example
-
-`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,
-`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.
-
-`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode
-conveys a different purpose of the message and assigns the necessary ARIA attributes to support that
-purpose and provide an accessible experience.
-
-By default, `mode` is set to `status`, which indicates the message contains advisory information
-such as a successful action.
-
-<ExampleCodeBlock code={Basic} />
-
-A `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of
-`status`.
-
-Here's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is
-positioned using `Popper`.
-
-<ExampleCodeBlock code={WithPopper} />
-
-### Alert
-
-Set the `mode` prop to `alert` to convey urgent and important information such as an error.
-
-<ExampleCodeBlock code={ToastAlert} />
-
-An `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of
-`alert`.
-
-### Dialog
-
-Set the `mode` prop to `dialog` to convey the presence of a follow-up action.
-
-<ExampleCodeBlock code={ToastDialog} />
-
-The `Toast` will be given a role of `dialog` along with an `aria-label` to indicate that it's a
-notification.
-
-> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`
-> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to
-> provide a specific `id` for the `Toast.Message`:
-
-```tsx
-export const CustomIDToast = () => {
-  const model = useToastModel({
-    id: '12df5',
-    mode: 'dialog',
-  });
-  return (
-    <Toast model={model}>
-      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
-      <Toast.Body>
-        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
-        <Toast.Link href="#href">View More Details</Toast.Link>
-      </Toast.Body>
-    </Toast>
-  );
-};
-```
-
-### Close Icon Button
-
-Include the `Toast.CloseIcon` subcomponent to display a close button within the Toast.
-
-<ExampleCodeBlock code={WithCloseButton} />
-
-`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action
-link and a close button.
-
-<ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
-
-### Right-to-Left (RTL)
-
-`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
-
-<ExampleCodeBlock code={RTL} />
-
-## Component API
-
-<SymbolDoc name="Toast" fileName="/labs-react/" />