@sproutsocial/seeds-react-toast 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-toast/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     9.51 KB
+CJS dist/index.js.map 13.09 KB
+CJS ⚡️ Build success in 276ms
+ESM dist/esm/index.js     6.76 KB
+ESM dist/esm/index.js.map 12.64 KB
+ESM ⚡️ Build success in 277ms
+DTS Build start
+DTS ⚡️ Build success in 49568ms
+DTS dist/index.d.ts  3.18 KB
+DTS dist/index.d.mts 3.18 KB
+Done in 60.27s.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @sproutsocial/seeds-react-toast
+
+## 1.0.0
+
+### Major Changes
+
+- bd8d03d: Migrate Toast to a seeds-react-toast component
+
+### Patch Changes
+
+- Updated dependencies [bd8d03d]
+  - @sproutsocial/seeds-react-text@1.3.0

package/dist/esm/index.js

@@ -0,0 +1,247 @@
+// src/Toast.tsx
+import {
+  toast as toastifyToast,
+  cssTransition
+} from "react-toastify";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/styles.ts
+import styled from "styled-components";
+import "react-toastify/dist/ReactToastify.css";
+import Box from "@sproutsocial/seeds-react-box";
+import { ToastContainer } from "react-toastify";
+var TOAST_Z_INDEX = 9999;
+var Container = styled(Box)`
+  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 = styled(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
+import styled2 from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toastDismiss = (...input) => (
+  // @ts-ignore Not sure what this type is supposed to be
+  toastifyToast.dismiss(...input)
+);
+var toastIsActive = (...input) => toastifyToast.isActive(...input);
+var toastUpdate = (...input) => toastifyToast.update(...input);
+var NoTransition = cssTransition({
+  enter: "SproutToast__none-in",
+  exit: "SproutToast__none-out"
+});
+var SproutZoomTransition = cssTransition({
+  enter: "SproutToast__zoom-in",
+  exit: "SproutToast__zoom-out"
+});
+var ToastContainer2 = (props) => /* @__PURE__ */ 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__ */ jsx(
+        ToastContentContainer,
+        {
+          icon: /* @__PURE__ */ jsx(Icon, { name: iconName, color: iconColor }),
+          close: /* @__PURE__ */ jsx(Icon, { 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)) {
+    toastifyToast.update(toastId, {
+      ...toastOptions,
+      render: renderToast
+    });
+  } else {
+    toastId = toastifyToast(renderToast, toastOptions);
+  }
+  return toastId;
+}
+var ToastContentContainer = ({
+  children,
+  icon,
+  close,
+  highlightColor
+}) => {
+  return /* @__PURE__ */ jsxs(Container, { "data-qa-toast": "", children: [
+    highlightColor ? /* @__PURE__ */ jsx(ToastHighlight, { bg: highlightColor, "aria-hidden": true }) : null,
+    /* @__PURE__ */ jsx(Box2, { css: "line-height: 1;", children: icon }),
+    /* @__PURE__ */ jsx(Box2, { flex: 1, children: /* @__PURE__ */ jsx(Text, { as: "div", color: "text.body", "data-qa-toast-content": "", children }) }),
+    /* @__PURE__ */ jsx(Box2, { css: "line-height: 1;", children: close })
+  ] });
+};
+var ToastHighlight = styled2(Box2)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+`;
+
+// src/ToastTypes.ts
+import "@sproutsocial/seeds-react-icon";
+export {
+  TOAST_Z_INDEX,
+  ToastContainer2 as ToastContainer,
+  ToastContentContainer,
+  ToastHighlight,
+  toast,
+  toastDismiss,
+  toastIsActive,
+  toastUpdate
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toast.tsx","../../src/styles.ts","../../src/ToastTypes.ts"],"sourcesContent":["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":["Box","styled","ToastContainer","Box","styled"]}

package/dist/index.d.mts

@@ -0,0 +1,67 @@
+import * as styled_components from 'styled-components';
+import * as react from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
+import _sproutsocial_seeds_react_box__default from '@sproutsocial/seeds-react-box';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToastContainer as ToastContainer$1, ToastOptions, ToastContent, toast as toast$1 } from 'react-toastify';
+import { Icon, TypeIconName } from '@sproutsocial/seeds-react-icon';
+
+declare const TOAST_Z_INDEX = 9999;
+declare const ToastRoot: styled_components.StyledComponent<typeof ToastContainer$1, styled_components.DefaultTheme, {
+    toastClassName: "Toastify-toast-overrides";
+    hideProgressBar: true;
+    closeButton: false;
+    icon: false;
+    position: "bottom-right";
+}, "position" | "toastClassName" | "closeButton" | "hideProgressBar" | "icon">;
+
+type TypeToastTheme = "info" | "success" | "warning" | "error";
+interface BaseToastOptions<TData> extends Omit<ToastOptions<TData>, "closeButton" | "icon" | "type"> {
+    theme?: TypeToastTheme | "custom";
+    content: ToastContent<TData>;
+    persist?: boolean;
+    useTransition?: boolean;
+}
+interface ThemedToastOptions<TData> extends BaseToastOptions<TData> {
+    /**
+     * One of `info`, `success`, `warning`, or `error`.
+     */
+    theme?: TypeToastTheme;
+    /**
+     * @deprecated Use `custom` theme instead.
+     */
+    color?: ComponentProps<typeof Icon>["color"];
+    /**
+     * @deprecated Use `custom` theme instead.
+     */
+    icon?: TypeIconName;
+}
+interface CustomToastOptions<TData> extends BaseToastOptions<TData> {
+    /**
+     * 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.
+     */
+    theme: "custom";
+}
+type TypeToastOptions<TData> = ThemedToastOptions<TData> | CustomToastOptions<TData>;
+
+declare const toastDismiss: typeof toast$1.dismiss;
+declare const toastIsActive: typeof toast$1.isActive;
+declare const toastUpdate: typeof toast$1.update;
+declare const ToastContainer: (props: Partial<ComponentProps<typeof ToastRoot>>) => react_jsx_runtime.JSX.Element;
+declare function toast<TData = unknown>(options: TypeToastOptions<TData>): ReturnType<typeof toast$1>;
+
+declare const ToastContentContainer: ({ children, icon, close, highlightColor, }: PropsWithChildren<{
+    /**
+     * A ReactNode in the icon slot
+     */
+    icon: ReactNode;
+    /**
+     * A ReactNode in the close button slot
+     */
+    close: ReactNode;
+    highlightColor?: ComponentProps<typeof _sproutsocial_seeds_react_box__default>["bg"];
+}>) => react_jsx_runtime.JSX.Element;
+declare const ToastHighlight: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>, never>;
+
+export { TOAST_Z_INDEX, ToastContainer, ToastContentContainer, ToastHighlight, type TypeToastOptions, type TypeToastTheme, toast, toastDismiss, toastIsActive, toastUpdate };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import * as styled_components from 'styled-components';
+import * as react from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
+import _sproutsocial_seeds_react_box__default from '@sproutsocial/seeds-react-box';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToastContainer as ToastContainer$1, ToastOptions, ToastContent, toast as toast$1 } from 'react-toastify';
+import { Icon, TypeIconName } from '@sproutsocial/seeds-react-icon';
+
+declare const TOAST_Z_INDEX = 9999;
+declare const ToastRoot: styled_components.StyledComponent<typeof ToastContainer$1, styled_components.DefaultTheme, {
+    toastClassName: "Toastify-toast-overrides";
+    hideProgressBar: true;
+    closeButton: false;
+    icon: false;
+    position: "bottom-right";
+}, "position" | "toastClassName" | "closeButton" | "hideProgressBar" | "icon">;
+
+type TypeToastTheme = "info" | "success" | "warning" | "error";
+interface BaseToastOptions<TData> extends Omit<ToastOptions<TData>, "closeButton" | "icon" | "type"> {
+    theme?: TypeToastTheme | "custom";
+    content: ToastContent<TData>;
+    persist?: boolean;
+    useTransition?: boolean;
+}
+interface ThemedToastOptions<TData> extends BaseToastOptions<TData> {
+    /**
+     * One of `info`, `success`, `warning`, or `error`.
+     */
+    theme?: TypeToastTheme;
+    /**
+     * @deprecated Use `custom` theme instead.
+     */
+    color?: ComponentProps<typeof Icon>["color"];
+    /**
+     * @deprecated Use `custom` theme instead.
+     */
+    icon?: TypeIconName;
+}
+interface CustomToastOptions<TData> extends BaseToastOptions<TData> {
+    /**
+     * 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.
+     */
+    theme: "custom";
+}
+type TypeToastOptions<TData> = ThemedToastOptions<TData> | CustomToastOptions<TData>;
+
+declare const toastDismiss: typeof toast$1.dismiss;
+declare const toastIsActive: typeof toast$1.isActive;
+declare const toastUpdate: typeof toast$1.update;
+declare const ToastContainer: (props: Partial<ComponentProps<typeof ToastRoot>>) => react_jsx_runtime.JSX.Element;
+declare function toast<TData = unknown>(options: TypeToastOptions<TData>): ReturnType<typeof toast$1>;
+
+declare const ToastContentContainer: ({ children, icon, close, highlightColor, }: PropsWithChildren<{
+    /**
+     * A ReactNode in the icon slot
+     */
+    icon: ReactNode;
+    /**
+     * A ReactNode in the close button slot
+     */
+    close: ReactNode;
+    highlightColor?: ComponentProps<typeof _sproutsocial_seeds_react_box__default>["bg"];
+}>) => react_jsx_runtime.JSX.Element;
+declare const ToastHighlight: styled_components.StyledComponent<react.ForwardRefExoticComponent<Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>, styled_components.DefaultTheme, Omit<_sproutsocial_seeds_react_box.TypeBoxProps, "ref"> & react.RefAttributes<HTMLDivElement>, never>;
+
+export { TOAST_Z_INDEX, ToastContainer, ToastContentContainer, ToastHighlight, type TypeToastOptions, type TypeToastTheme, toast, toastDismiss, toastIsActive, toastUpdate };