@sproutsocial/seeds-react-toast 1.0.0

package/dist/index.js

@@ -0,0 +1,288 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  TOAST_Z_INDEX: () => TOAST_Z_INDEX,
+  ToastContainer: () => ToastContainer2,
+  ToastContentContainer: () => ToastContentContainer,
+  ToastHighlight: () => ToastHighlight,
+  toast: () => toast,
+  toastDismiss: () => toastDismiss,
+  toastIsActive: () => toastIsActive,
+  toastUpdate: () => toastUpdate
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Toast.tsx
+var import_react_toastify2 = require("react-toastify");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_ReactToastify = require("react-toastify/dist/ReactToastify.css");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_react_toastify = require("react-toastify");
+var TOAST_Z_INDEX = 9999;
+var Container = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[350]};
+  font-family: ${({ theme }) => theme.fontFamily};
+  ${({ theme }) => theme.typography[200]}
+  position: relative;
+  padding: ${({ theme }) => theme.space[350]};
+`;
+var ToastRoot = (0, import_styled_components.default)(import_react_toastify.ToastContainer).attrs({
+  toastClassName: "Toastify-toast-overrides",
+  hideProgressBar: true,
+  closeButton: false,
+  icon: false,
+  position: "bottom-right"
+})`
+  --toastify-z-index: ${TOAST_Z_INDEX};
+  --toastify-toast-offset: ${({ theme }) => theme.space[400]};
+  --toastify-toast-width: 360px;
+  --toastify-toast-min-height: 48px;
+  --toastify-toast-max-height: 70vh;
+  --toastify-toast-bd-radius: ${({ theme }) => theme.radii[400]};
+  --toastify-toast-background: ${({ theme }) => theme.colors.container.background.base};
+  /* there's margin-bottom on the last toast so we can remove this */
+  --toastify-toast-bottom: 0;
+
+  padding: 0;
+
+  .Toastify-toast-overrides {
+    background: ${({ theme }) => theme.colors.container.background.base};
+    color: ${({ theme }) => theme.colors.text.body};
+    box-shadow: ${({ theme }) => theme.shadows.low};
+    padding: 0;
+    margin-bottom: var(--toastify-toast-offset);
+  }
+
+  .Toastify__toast-body {
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Override React Toastify's mobile width styles */
+  @media only screen and (max-width: 480px) {
+    .Toastify-container-overrides {
+      min-width: initial !important;
+    }
+  }
+
+  /* Zoom animation */
+  @keyframes SproutToast__zoom-in {
+    from {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+  @keyframes SproutToast__zoom-out {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3) translate3d(0, var(--y), 0);
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  .SproutToast__zoom-in {
+    animation: SproutToast__zoom-in ${({ theme }) => theme.duration.medium}
+      ${({ theme }) => theme.easing.ease_out} both;
+  }
+  .SproutToast__zoom-out {
+    animation: SproutToast__zoom-out ${({ theme }) => theme.duration.slow}
+      ${({ theme }) => theme.easing.ease_in} both;
+  }
+
+  /* No animation (it's still necessary to define classes for no animation to work properly) */
+  @keyframes SproutToast__none-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes SproutToast__none-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  .SproutToast__none-in {
+    animation: SproutToast__none-in 0s both;
+  }
+  .SproutToast__none-out {
+    animation: SproutToast__none-out 0s both;
+  }
+`;
+
+// src/Toast.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var toastDismiss = (...input) => (
+  // @ts-ignore Not sure what this type is supposed to be
+  import_react_toastify2.toast.dismiss(...input)
+);
+var toastIsActive = (...input) => import_react_toastify2.toast.isActive(...input);
+var toastUpdate = (...input) => import_react_toastify2.toast.update(...input);
+var NoTransition = (0, import_react_toastify2.cssTransition)({
+  enter: "SproutToast__none-in",
+  exit: "SproutToast__none-out"
+});
+var SproutZoomTransition = (0, import_react_toastify2.cssTransition)({
+  enter: "SproutToast__zoom-in",
+  exit: "SproutToast__zoom-out"
+});
+var ToastContainer2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastRoot, { ...props });
+var themeIcon = {
+  success: "circle-check-outline",
+  info: "circle-i-outline",
+  warning: "triangle-exclamation-outline",
+  error: "triangle-exclamation-outline"
+};
+function toast(options) {
+  const {
+    closeOnClick = true,
+    content,
+    onClose,
+    persist,
+    toastId: inputToastId,
+    useTransition = true,
+    position = "bottom-right",
+    autoClose = persist ? false : 6e3,
+    transition = useTransition ? SproutZoomTransition : NoTransition,
+    ...rest
+  } = options;
+  let toastId = inputToastId;
+  if (!toastId && typeof content === "string") {
+    toastId = content;
+  }
+  const renderToast = (toastInput) => {
+    const renderedContent = typeof content === "function" ? content(toastInput) : content;
+    if (options.theme === "custom") {
+      return renderedContent;
+    }
+    const theme = options.theme || "info";
+    const iconName = options.icon || themeIcon[theme];
+    const containerColor = options.color || {
+      success: "container.border.success",
+      error: "container.border.error",
+      info: "container.border.info",
+      warning: "container.border.warning"
+    }[theme];
+    const iconColor = options.color || {
+      success: "icon.success",
+      error: "icon.error",
+      info: "icon.info",
+      warning: "icon.warning"
+    }[theme];
+    return (
+      // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overridden
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ToastContentContainer,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { name: iconName, color: iconColor }),
+          close: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { name: "x-outline", color: "icon.base", "aria-hidden": true }),
+          highlightColor: containerColor,
+          children: renderedContent
+        }
+      )
+    );
+  };
+  const toastOptions = {
+    autoClose,
+    closeOnClick,
+    onClose,
+    toastId: toastId || void 0,
+    transition,
+    position,
+    ...rest,
+    icon: void 0,
+    color: void 0
+  };
+  if (toastId && toastIsActive(toastId)) {
+    import_react_toastify2.toast.update(toastId, {
+      ...toastOptions,
+      render: renderToast
+    });
+  } else {
+    toastId = (0, import_react_toastify2.toast)(renderToast, toastOptions);
+  }
+  return toastId;
+}
+var ToastContentContainer = ({
+  children,
+  icon,
+  close,
+  highlightColor
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { "data-qa-toast": "", children: [
+    highlightColor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastHighlight, { bg: highlightColor, "aria-hidden": true }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.default, { css: "line-height: 1;", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "div", color: "text.body", "data-qa-toast-content": "", children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.default, { css: "line-height: 1;", children: close })
+  ] });
+};
+var ToastHighlight = (0, import_styled_components2.default)(import_seeds_react_box2.default)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+`;
+
+// src/ToastTypes.ts
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TOAST_Z_INDEX,
+  ToastContainer,
+  ToastContentContainer,
+  ToastHighlight,
+  toast,
+  toastDismiss,
+  toastIsActive,
+  toastUpdate
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Toast.tsx","../src/styles.ts","../src/ToastTypes.ts"],"sourcesContent":["export * from \"./Toast\";\nexport * from \"./ToastTypes\";\nexport { TOAST_Z_INDEX } from \"./styles\";\n","import type { PropsWithChildren, ReactNode, ComponentProps } from \"react\";\nimport {\n  toast as toastifyToast,\n  cssTransition,\n  type ToastContent,\n} from \"react-toastify\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, ToastRoot } from \"./styles\";\nimport type { TypeToastOptions, TypeToastTheme } from \"./ToastTypes\";\nimport styled from \"styled-components\";\n\nexport const toastDismiss: typeof toastifyToast.dismiss = (...input) =>\n  // @ts-ignore Not sure what this type is supposed to be\n  toastifyToast.dismiss(...input);\nexport const toastIsActive: typeof toastifyToast.isActive = (...input) =>\n  toastifyToast.isActive(...input);\nexport const toastUpdate: typeof toastifyToast.update = (...input) =>\n  toastifyToast.update(...input);\n\nconst NoTransition = cssTransition({\n  enter: \"SproutToast__none-in\",\n  exit: \"SproutToast__none-out\",\n});\nconst SproutZoomTransition = cssTransition({\n  enter: \"SproutToast__zoom-in\",\n  exit: \"SproutToast__zoom-out\",\n});\n\nexport const ToastContainer = (\n  props: Partial<ComponentProps<typeof ToastRoot>>\n) => <ToastRoot {...props} />;\n\nconst themeIcon: Record<TypeToastTheme, TypeIconName> = {\n  success: \"circle-check-outline\",\n  info: \"circle-i-outline\",\n  warning: \"triangle-exclamation-outline\",\n  error: \"triangle-exclamation-outline\",\n} as const;\n\nexport function toast<TData = unknown>(\n  options: TypeToastOptions<TData>\n): ReturnType<typeof toastifyToast> {\n  const {\n    closeOnClick = true,\n    content,\n    onClose,\n    persist,\n    toastId: inputToastId,\n    useTransition = true,\n    position = \"bottom-right\",\n    autoClose = persist ? false : 6000,\n    transition = useTransition ? SproutZoomTransition : NoTransition,\n    ...rest\n  } = options;\n\n  let toastId = inputToastId;\n  if (!toastId && typeof content === \"string\") {\n    toastId = content;\n  }\n\n  const renderToast: ToastContent<TData> = (toastInput) => {\n    const renderedContent =\n      typeof content === \"function\" ? content(toastInput) : content;\n\n    if (options.theme === \"custom\") {\n      return renderedContent;\n    }\n\n    const theme = options.theme || \"info\";\n    const iconName = options.icon || themeIcon[theme];\n    const containerColor =\n      options.color ||\n      (\n        {\n          success: \"container.border.success\",\n          error: \"container.border.error\",\n          info: \"container.border.info\",\n          warning: \"container.border.warning\",\n        } as const\n      )[theme];\n    const iconColor =\n      options.color ||\n      (\n        {\n          success: \"icon.success\",\n          error: \"icon.error\",\n          info: \"icon.info\",\n          warning: \"icon.warning\",\n        } as const\n      )[theme];\n\n    return (\n      // TODO: if this closes when clicked, there should be a label saying \"Click to close\" that can be overridden\n      <ToastContentContainer\n        icon={<Icon name={iconName} color={iconColor} />}\n        close={<Icon name=\"x-outline\" color=\"icon.base\" aria-hidden />}\n        highlightColor={containerColor}\n      >\n        {renderedContent}\n      </ToastContentContainer>\n    );\n  };\n\n  const toastOptions = {\n    autoClose,\n    closeOnClick,\n    onClose,\n    toastId: toastId || undefined,\n    transition,\n    position,\n    ...rest,\n    icon: undefined,\n    color: undefined,\n  } as const;\n\n  if (toastId && toastIsActive(toastId)) {\n    toastifyToast.update<TData>(toastId, {\n      ...toastOptions,\n      render: renderToast,\n    });\n  } else {\n    toastId = toastifyToast<TData>(renderToast, toastOptions);\n  }\n\n  return toastId;\n}\n\nexport default ToastContainer;\n\nexport const ToastContentContainer = ({\n  children,\n  icon,\n  close,\n  highlightColor,\n}: PropsWithChildren<{\n  /**\n   * A ReactNode in the icon slot\n   */\n  icon: ReactNode;\n  /**\n   * A ReactNode in the close button slot\n   */\n  close: ReactNode;\n  highlightColor?: ComponentProps<typeof Box>[\"bg\"];\n}>) => {\n  return (\n    <Container data-qa-toast=\"\">\n      {highlightColor ? (\n        <ToastHighlight bg={highlightColor} aria-hidden />\n      ) : null}\n\n      <Box css=\"line-height: 1;\">{icon}</Box>\n\n      <Box flex={1}>\n        <Text as=\"div\" color=\"text.body\" data-qa-toast-content=\"\">\n          {children}\n        </Text>\n      </Box>\n\n      <Box css=\"line-height: 1;\">{close}</Box>\n    </Container>\n  );\n};\n\nexport const ToastHighlight = styled(Box)<ComponentProps<typeof Box>>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 2px;\n`;\n","import styled from \"styled-components\";\nimport type { ComponentProps } from \"react\";\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport \"react-toastify/dist/ReactToastify.css\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { ToastContainer } from \"react-toastify\";\n\nexport const TOAST_Z_INDEX = 9999;\n\nexport const Container = styled(Box)<ComponentProps<typeof Box>>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space[350]};\n  font-family: ${({ theme }) => theme.fontFamily};\n  ${({ theme }) => theme.typography[200]}\n  position: relative;\n  padding: ${({ theme }) => theme.space[350]};\n`;\n\nexport const ToastRoot = styled(ToastContainer).attrs({\n  toastClassName: \"Toastify-toast-overrides\",\n  hideProgressBar: true,\n  closeButton: false,\n  icon: false,\n  position: \"bottom-right\",\n})`\n  --toastify-z-index: ${TOAST_Z_INDEX};\n  --toastify-toast-offset: ${({ theme }) => theme.space[400]};\n  --toastify-toast-width: 360px;\n  --toastify-toast-min-height: 48px;\n  --toastify-toast-max-height: 70vh;\n  --toastify-toast-bd-radius: ${({ theme }) => theme.radii[400]};\n  --toastify-toast-background: ${({ theme }) =>\n    theme.colors.container.background.base};\n  /* there's margin-bottom on the last toast so we can remove this */\n  --toastify-toast-bottom: 0;\n\n  padding: 0;\n\n  .Toastify-toast-overrides {\n    background: ${({ theme }) => theme.colors.container.background.base};\n    color: ${({ theme }) => theme.colors.text.body};\n    box-shadow: ${({ theme }) => theme.shadows.low};\n    padding: 0;\n    margin-bottom: var(--toastify-toast-offset);\n  }\n\n  .Toastify__toast-body {\n    padding: 0;\n    margin: 0;\n  }\n\n  /* Override React Toastify's mobile width styles */\n  @media only screen and (max-width: 480px) {\n    .Toastify-container-overrides {\n      min-width: initial !important;\n    }\n  }\n\n  /* Zoom animation */\n  @keyframes SproutToast__zoom-in {\n    from {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n  @keyframes SproutToast__zoom-out {\n    from {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3) translate3d(0, var(--y), 0);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .SproutToast__zoom-in {\n    animation: SproutToast__zoom-in ${({ theme }) => theme.duration.medium}\n      ${({ theme }) => theme.easing.ease_out} both;\n  }\n  .SproutToast__zoom-out {\n    animation: SproutToast__zoom-out ${({ theme }) => theme.duration.slow}\n      ${({ theme }) => theme.easing.ease_in} both;\n  }\n\n  /* No animation (it's still necessary to define classes for no animation to work properly) */\n  @keyframes SproutToast__none-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes SproutToast__none-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .SproutToast__none-in {\n    animation: SproutToast__none-in 0s both;\n  }\n  .SproutToast__none-out {\n    animation: SproutToast__none-out 0s both;\n  }\n`;\n","import type { ComponentProps } from \"react\";\nimport { type Icon, type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport type { ToastContent, ToastOptions } from \"react-toastify\";\n\nexport type TypeToastTheme = \"info\" | \"success\" | \"warning\" | \"error\";\n\ninterface BaseToastOptions<TData>\n  extends Omit<ToastOptions<TData>, \"closeButton\" | \"icon\" | \"type\"> {\n  theme?: TypeToastTheme | \"custom\";\n  content: ToastContent<TData>;\n  persist?: boolean;\n  useTransition?: boolean;\n}\n\ninterface ThemedToastOptions<TData> extends BaseToastOptions<TData> {\n  /**\n   * One of `info`, `success`, `warning`, or `error`.\n   */\n  theme?: TypeToastTheme;\n  /**\n   * @deprecated Use `custom` theme instead.\n   */\n  color?: ComponentProps<typeof Icon>[\"color\"];\n  /**\n   * @deprecated Use `custom` theme instead.\n   */\n  icon?: TypeIconName;\n}\ninterface CustomToastOptions<TData> extends BaseToastOptions<TData> {\n  /**\n   * If you need to break out of the supported styles you can use the `custom` theme. You can use `ToastContentContainer` with `Icon` and `ToastHighlight` to build your custom toast.\n   */\n  theme: \"custom\";\n}\n\nexport type TypeToastOptions<TData> =\n  | ThemedToastOptions<TData>\n  | CustomToastOptions<TData>;\n"],"mappings":"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","names":["ToastContainer","import_react_toastify","import_seeds_react_box","styled","Box","import_styled_components","toastifyToast","ToastContainer","Icon","Box","Text","styled","import_seeds_react_icon"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-toast",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sproutsocial/seeds-react-toast",
+  "version": "1.0.0",
+  "description": "Seeds React Toast",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-text": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "react-toastify": "^10.0.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3",
+    "react-toastify": "^9.0.0 || ^10.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Toast.stories.tsx

@@ -0,0 +1,300 @@
+/* eslint-disable no-console */
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ToastContent as ToastifyToastContent } from "react-toastify";
+import { css } from "styled-components";
+import Icon, { type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Fieldset from "@sproutsocial/seeds-react-fieldset";
+import Input from "@sproutsocial/seeds-react-input";
+import Link from "@sproutsocial/seeds-react-link";
+import Radio from "@sproutsocial/seeds-react-radio";
+import Switch from "@sproutsocial/seeds-react-switch";
+import Text from "@sproutsocial/seeds-react-text";
+import {
+  toast,
+  toastDismiss,
+  ToastContainer,
+  ToastContentContainer,
+  ToastHighlight,
+} from "./Toast";
+import type { TypeToastTheme } from "./ToastTypes";
+
+const ToastContent = ({ verbose = false }) => (
+  <Box>
+    <Text as="div" color="text.header" fontWeight="semibold">
+      New Message
+    </Text>
+    <Text as="div" color="text.body">
+      Your message is scheduled for July 4, 2020.
+    </Text>
+    {verbose && (
+      <Text as="div" color="text.body">
+        Your message is scheduled for July 4, 2020. Your message is scheduled
+        for July 4, 2020. Your message is scheduled for July 4, 2020. Your
+        message is scheduled for July 4, 2020. Your message is scheduled for
+        July 4, 2020. Your message is scheduled for July 4, 2020.
+      </Text>
+    )}
+    <Text fontSize={100}>Now: {new Date().toLocaleString()}</Text>
+  </Box>
+);
+
+const meta: Meta = {
+  title: "Components/Toast",
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <DefaultStoryComponent />,
+};
+
+const DefaultStoryComponent = () => {
+  const [animation, setAnimation] = useState(true);
+  const [persist, setPersist] = useState(true);
+  const [toastId, setToastId] = useState("");
+  const positions = [
+    "top-left",
+    "top-center",
+    "top-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+  ] as const;
+  const [position, setPosition] =
+    useState<(typeof positions)[number]>("bottom-right");
+
+  const triggerToast = ({
+    theme,
+    verbose,
+    icon,
+    content,
+    color,
+    closeOnClick,
+  }: {
+    theme?: TypeToastTheme | "custom";
+    verbose?: boolean;
+    icon?: TypeIconName;
+    content?: ToastifyToastContent<unknown>;
+    color?: string;
+    closeOnClick?: boolean;
+  }) =>
+    toast({
+      content: content || <ToastContent verbose={verbose} />,
+      theme,
+      icon,
+      color,
+      persist,
+      toastId,
+      position,
+      useTransition: animation,
+      closeOnClick,
+
+      onOpen: () => {
+        console.log("Toast opened");
+      },
+      onClose: () => {
+        console.log("Toast closed");
+      },
+      onClick: () => {
+        console.log("Toast clicked");
+      },
+    });
+
+  return (
+    <>
+      <Box
+        bg="container.background.decorative.neutral"
+        height="100vh"
+        display="flex"
+        flexDirection="column"
+        gap={400}
+      >
+        <Fieldset label="Position" layout="horizontal">
+          {positions.map((value) => (
+            <Box key={value} display="flex" alignItems="center">
+              <Radio
+                id={`toast-position-${value}`}
+                name="position"
+                value={value}
+                label={value}
+                checked={value === position}
+                onChange={() => setPosition(value)}
+                mr={300}
+                mb={300}
+              />
+            </Box>
+          ))}
+        </Fieldset>
+        <Fieldset label="Animation" layout="horizontal">
+          <Switch
+            id="toast-animation"
+            checked={animation}
+            onClick={() => {
+              setAnimation((prev) => !prev);
+            }}
+          />
+        </Fieldset>
+        <Fieldset label="Persist">
+          <Switch
+            id="toast-persist"
+            checked={persist}
+            onClick={() => {
+              setPersist((prev) => !prev);
+            }}
+          />
+        </Fieldset>
+        <Fieldset label="ID">
+          <Input
+            id="toast-id-input"
+            name="toast-id"
+            onChange={(e) => {
+              setToastId(e.currentTarget.value);
+            }}
+          />
+        </Fieldset>
+        <Fieldset label="Variants" layout="horizontal">
+          <Button
+            appearance="secondary"
+            onClick={() =>
+              triggerToast({
+                content: <div>Now: {new Date().toLocaleString()}</div>,
+              })
+            }
+          >
+            Default
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() => triggerToast({ theme: "info" })}
+          >
+            Info
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() => triggerToast({ theme: "success" })}
+          >
+            Success
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() => triggerToast({ theme: "warning" })}
+          >
+            Warning
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() => triggerToast({ theme: "error" })}
+          >
+            Error
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() => triggerToast({ theme: "info", verbose: true })}
+          >
+            Verbose
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() =>
+              triggerToast({
+                icon: "tripadvisor",
+                color: "network.tripadvisor",
+              })
+            }
+          >
+            Social Network
+          </Button>
+          <Button
+            appearance="secondary"
+            onClick={() =>
+              triggerToast({
+                theme: "custom",
+                closeOnClick: false,
+                content: ({ closeToast }) => (
+                  <ToastContentContainer
+                    icon={<Icon name="hand-sparkle-outline" />}
+                    close={
+                      <Button onClick={closeToast} aria-label="Close" mr={-300}>
+                        <Icon name="x-outline" color="icon.base" aria-hidden />
+                      </Button>
+                    }
+                  >
+                    <ToastHighlight
+                      css={css`
+                        background: linear-gradient(
+                          to bottom,
+                          ${({ theme }) => theme.colors.teal[900]},
+                          ${({ theme }) => theme.colors.blue[800]}
+                        );
+                      `}
+                    />
+                    <Box display="flex" gap={400} alignItems="center">
+                      <Text as="p">How did AI Assist do?</Text>
+                      <Icon name="thumbs-up-outline" size="mini" />
+                      <Icon name="thumbs-down-outline" size="mini" />
+                    </Box>
+                  </ToastContentContainer>
+                ),
+              })
+            }
+          >
+            Custom
+          </Button>
+        </Fieldset>
+        <Fieldset label="Global Actions" layout="horizontal">
+          <Button
+            appearance="secondary"
+            onClick={() => {
+              toastDismiss();
+            }}
+          >
+            Clear all
+          </Button>
+        </Fieldset>
+      </Box>
+
+      <ToastContainer />
+    </>
+  );
+};
+
+export const WithLink: Story = {
+  render: () => {
+    const triggerToast = () =>
+      toast({
+        persist: true,
+        content: (
+          <Box
+            display="inline-flex"
+            width="100%"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <Text>Message completed</Text>
+            <Link
+              onClick={() => alert("Clicked!")}
+              ml={300}
+              fontSize={200}
+              p={0}
+            >
+              Undo
+            </Link>
+          </Box>
+        ),
+      });
+
+    return (
+      <Box>
+        <ToastContainer />
+
+        <Button appearance="secondary" onClick={triggerToast}>
+          Fire toast
+        </Button>
+      </Box>
+    );
+  },
+};