@synerise/ds-toast 1.4.10 → 1.4.12

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.11...@synerise/ds-toast@1.4.12) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-toast
+
+## [1.4.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.10...@synerise/ds-toast@1.4.11) (2026-03-20)
+
+### Bug Fixes
+
+- **toast:** add animations to toast ([5167350](https://github.com/Synerise/synerise-design/commit/5167350a1f15ad06f8fa4cb20ca97e6aa1269b64))
+
 ## [1.4.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-toast@1.4.9...@synerise/ds-toast@1.4.10) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-toast

package/README.md

@@ -34,7 +34,7 @@ import Button from '@synerise/ds-button';
 | type            | message type                                          | 'success' / 'negative' / 'warning' / 'informative' | -       |
 | message         | message main content                                  | ReactNode                                          | -       |
 | description     | message description                                   | ReactNode                                          | -       |
-| customIcon      | overwrite default icon (default icon depends on type) | ReactNode                                          | -       |
+| customIcon      | overwrite default icon (default icon depends on type) | ReactElement                                       | -       |
 | expander        | render with expander icon                             | boolean                                            | -       |
 | onExpand        | triggered on click of expander icon                   | (expanded: boolean) => void                        | -       |
 | expandedContent | content rendered if exapanded prop is true            | ReactNode                                          | -       |
@@ -74,4 +74,4 @@ Removes a specific or all displayed toasts with an exit animation.
 
 #### showToast(type, toastProps, toastOptions?)
 
-enders a Toast of specified `type`, using toastProps and then displays it using the Toaster with toastOptoins. returns a toastID that can be later used to remove / dismiss that toast manually.
+Renders a Toast of specified `type`, using toastProps and then displays it using the Toaster with toastOptions. Returns a toastId that can be later used to remove / dismiss that toast manually.

package/dist/Toast.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type ShowToastProps, type ToastCustomisationOptions, type ToastProps, type ToastType } from './Toast.types';
+import { default as React } from 'react';
+import { ShowToastProps, ToastCustomisationOptions, ToastProps, ToastType } from './Toast.types';
 export declare const Toast: {
-    ({ type, message, description, expander, expandedContent, withClose, customIcon, expanded, onExpand, onCloseClick, onDismiss, button, toastId, ...htmlAttributes }: ToastProps): React.JSX.Element;
+    ({ type, message, description, expander, expandedContent, withClose, customIcon, expanded, onExpand, onCloseClick, onDismiss, button, toastId, show, ...htmlAttributes }: ToastProps): React.JSX.Element;
     success(props: ShowToastProps, options?: ToastCustomisationOptions): string;
     error(props: ShowToastProps, options?: ToastCustomisationOptions): string;
     info(props: ShowToastProps, options?: ToastCustomisationOptions): string;

package/dist/Toast.js

@@ -1,94 +1,82 @@
-var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "onDismiss", "button", "toastId"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useEffect, useMemo } from 'react';
-import toast from 'react-hot-toast';
-import { v4 as uuid } from 'uuid';
-import Icon, { AngleDownS, CloseM } from '@synerise/ds-icon';
-import * as S from './Toast.styles';
-import { ICONS } from './constants';
-import { removeToast } from './utils';
-export var Toast = function Toast(_ref) {
-  var type = _ref.type,
-    message = _ref.message,
-    description = _ref.description,
-    expander = _ref.expander,
-    expandedContent = _ref.expandedContent,
-    withClose = _ref.withClose,
-    customIcon = _ref.customIcon,
-    expanded = _ref.expanded,
-    onExpand = _ref.onExpand,
-    onCloseClick = _ref.onCloseClick,
-    onDismiss = _ref.onDismiss,
-    button = _ref.button,
-    toastId = _ref.toastId,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var hasToastContent = button || description || expandedContent;
-  var toastContent = hasToastContent && /*#__PURE__*/React.createElement(S.AlertContent, {
-    hasBottomMargin: Boolean(button || description || expandedContent && expanded)
-  }, description && /*#__PURE__*/React.createElement(S.AlertDescription, {
-    expandedContent: !!expandedContent,
-    button: !!button
-  }, description), expandedContent && /*#__PURE__*/React.createElement(S.ListWrapper, {
-    description: description,
-    visible: expanded
-  }, expandedContent), button);
-  var iconComponentForType = useMemo(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useEffect } from "react";
+import toast from "react-hot-toast";
+import { v4 } from "uuid";
+import Icon, { AngleDownS, CloseM } from "@synerise/ds-icon";
+import { AnimationContainer, Container, IconWrapper, WrapperSectionMessage, AlertMessage, ButtonWrapper, IconExpanderWrapper, IconCloseWrapper, AlertContent, AlertDescription, ListWrapper } from "./Toast.styles.js";
+import { ICONS } from "./constants.js";
+const Toast = ({
+  type,
+  message,
+  description,
+  expander,
+  expandedContent,
+  withClose,
+  customIcon,
+  expanded,
+  onExpand,
+  onCloseClick,
+  onDismiss,
+  button,
+  toastId,
+  show = true,
+  ...htmlAttributes
+}) => {
+  const hasToastContent = button || description || expandedContent;
+  const toastContent = hasToastContent && /* @__PURE__ */ jsxs(AlertContent, { hasBottomMargin: Boolean(button || description || expandedContent && expanded), children: [
+    description && /* @__PURE__ */ jsx(AlertDescription, { expandedContent: !!expandedContent, button: !!button, children: description }),
+    expandedContent && /* @__PURE__ */ jsx(ListWrapper, { description, visible: expanded, children: expandedContent }),
+    button
+  ] });
+  const iconComponentForType = useMemo(() => {
     return ICONS[type];
   }, [type]);
-  var expandContent = useCallback(function () {
+  const expandContent = useCallback(() => {
     onExpand && onExpand(!expanded);
   }, [onExpand, expanded]);
-  var handleCloseClick = function handleCloseClick() {
-    onCloseClick == null || onCloseClick();
+  const handleCloseClick = () => {
+    onCloseClick?.();
     if (toastId) {
-      removeToast(toastId);
+      toast.dismiss(toastId);
     }
   };
-  useEffect(function () {
-    return function () {
-      onDismiss == null || onDismiss();
+  useEffect(() => {
+    return () => {
+      onDismiss?.();
     };
   }, []);
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    toastType: type,
-    "data-toastType": type
-  }, htmlAttributes), /*#__PURE__*/React.createElement(S.IconWrapper, null, customIcon || /*#__PURE__*/React.createElement(Icon, {
-    component: iconComponentForType
-  })), /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AlertMessage, {
-    noToastContent: !hasToastContent,
-    hasClose: !!withClose,
-    hasExpander: !!expander
-  }, message), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, expander && /*#__PURE__*/React.createElement(S.IconExpanderWrapper, {
-    onClick: expandContent,
-    expanded: expanded
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null),
-    size: 24
-  })), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
-    onClick: handleCloseClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseM, null)
-  }))), toastContent));
+  return /* @__PURE__ */ jsx(AnimationContainer, { $show: show, children: /* @__PURE__ */ jsxs(Container, { toastType: type, "data-toastType": type, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(IconWrapper, { children: customIcon || /* @__PURE__ */ jsx(Icon, { component: iconComponentForType }) }),
+    /* @__PURE__ */ jsxs(WrapperSectionMessage, { children: [
+      /* @__PURE__ */ jsx(AlertMessage, { noToastContent: !hasToastContent, hasClose: !!withClose, hasExpander: !!expander, children: message }),
+      /* @__PURE__ */ jsxs(ButtonWrapper, { children: [
+        expander && /* @__PURE__ */ jsx(IconExpanderWrapper, { onClick: expandContent, expanded, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), size: 24 }) }),
+        withClose && /* @__PURE__ */ jsx(IconCloseWrapper, { onClick: handleCloseClick, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) })
+      ] }),
+      toastContent
+    ] })
+  ] }) });
 };
-export var showToast = function showToast(type, props, options) {
-  var toastId = props.toastId || "toast-" + uuid();
-  return toast.custom(/*#__PURE__*/React.createElement(Toast, _extends({}, props, {
-    toastId: toastId,
-    type: type
-  })), _extends({}, options, {
+const showToast = (type, props, options) => {
+  const toastId = props.toastId || `toast-${v4()}`;
+  return toast.custom((t) => /* @__PURE__ */ jsx(Toast, { ...props, toastId, type, show: t.visible }), {
+    ...options,
     id: toastId
-  }));
+  });
 };
-Toast.success = function (props, options) {
-  return showToast('success', props, options);
+Toast.success = (props, options) => {
+  return showToast("success", props, options);
 };
-Toast.error = function (props, options) {
-  return showToast('negative', props, options);
+Toast.error = (props, options) => {
+  return showToast("negative", props, options);
 };
-Toast.info = function (props, options) {
-  return showToast('informative', props, options);
+Toast.info = (props, options) => {
+  return showToast("informative", props, options);
+};
+Toast.warning = (props, options) => {
+  return showToast("warning", props, options);
+};
+export {
+  Toast,
+  showToast
 };
-Toast.warning = function (props, options) {
-  return showToast('warning', props, options);
-};

package/dist/Toast.styles.d.ts

@@ -1,39 +1,39 @@
-import { type ReactNode } from 'react';
-import { type Keyframes } from 'styled-components';
-import { type ToastType } from './Toast.types';
+import { ReactNode } from 'react';
+import { Keyframes } from 'styled-components';
+import { ToastType } from './Toast.types';
 export declare const closingAnimation: () => Keyframes;
-export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
+export declare const AnimationContainer: import('styled-components').StyledComponent<"div", any, {
+    $show?: boolean;
+}, never>;
+export declare const AlertContent: import('styled-components').StyledComponent<"div", any, {
     hasBottomMargin?: boolean;
 }, never>;
-export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconExpanderWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const AllContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconCloseWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconExpanderWrapper: import('styled-components').StyledComponent<"div", any, {
     expanded?: boolean;
 }, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FirstButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FirstButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const NumberWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ListWrapper: import('styled-components').StyledComponent<"div", any, {
     visible?: boolean;
     description?: ReactNode;
 }, never>;
-export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AnimationContainer: import("styled-components").StyledComponent<"div", any, {
-    show?: boolean;
-}, never>;
-export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AlertMessage: import("styled-components").StyledComponent<"div", any, {
+export declare const IconOrderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const OrderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const WrapperSectionMessage: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AlertMessage: import('styled-components').StyledComponent<"div", any, {
     noToastContent?: boolean;
     hasClose?: boolean;
     hasExpander?: boolean;
 }, never>;
-export declare const AlertDescription: import("styled-components").StyledComponent<"div", any, {
+export declare const AlertDescription: import('styled-components').StyledComponent<"div", any, {
     button?: boolean;
     expandedContent?: boolean;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     toastType: ToastType;
 }, never>;

package/dist/Toast.styles.js

@@ -1,149 +1,133 @@
-import styled, { keyframes } from 'styled-components';
-import { UnorderedList } from '@synerise/ds-unordered-list/dist/Unordered-list.styles';
-var getIconColorForType = function getIconColorForType(_ref) {
-  var toastType = _ref.toastType,
-    theme = _ref.theme;
+import styled, { keyframes } from "styled-components";
+import { UnorderedList } from "@synerise/ds-unordered-list/dist/Unordered-list.styles";
+const getIconColorForType = ({
+  toastType,
+  theme
+}) => {
   switch (toastType) {
-    case 'informative':
-      return theme.palette['grey-600'];
-    case 'negative':
-      return theme.palette['red-500'];
-    case 'warning':
-      return theme.palette['yellow-600'];
-    case 'success':
+    case "informative":
+      return theme.palette["grey-600"];
+    case "negative":
+      return theme.palette["red-500"];
+    case "warning":
+      return theme.palette["yellow-600"];
+    case "success":
     default:
-      return theme.palette['green-600'];
+      return theme.palette["green-600"];
   }
 };
-var getBackgroundColorForType = function getBackgroundColorForType(_ref2) {
-  var toastType = _ref2.toastType,
-    theme = _ref2.theme;
+const getBackgroundColorForType = ({
+  toastType,
+  theme
+}) => {
   switch (toastType) {
-    case 'informative':
-      return theme.palette['grey-600'];
-    case 'negative':
-      return theme.palette['red-500'];
-    case 'warning':
-      return theme.palette['yellow-600'];
-    case 'success':
+    case "informative":
+      return theme.palette["grey-600"];
+    case "negative":
+      return theme.palette["red-500"];
+    case "warning":
+      return theme.palette["yellow-600"];
+    case "success":
     default:
-      return theme.palette['green-600'];
+      return theme.palette["green-600"];
   }
 };
-var getWidth = function getWidth(hasClose, hasExpander) {
+const getWidth = (hasClose, hasExpander) => {
   if (hasClose && hasExpander) {
-    return '72px';
+    return "72px";
   }
   if (hasClose || hasExpander) {
-    return '48px';
+    return "48px";
   }
-  return '24px';
+  return "24px";
 };
-var openingAnimation = function openingAnimation() {
-  return keyframes(["0%{height:0%;opacity:0;}100%{height:100%;opacity:1;}"]);
-};
-export var closingAnimation = function closingAnimation() {
-  return keyframes(["0%{height:100%;opacity:1;}100%{height:0%;opacity:0;}"]);
-};
-export var AlertContent = styled.div.withConfig({
-  displayName: "Toaststyles__AlertContent",
+const openingAnimation = () => keyframes(["0%{opacity:0;transform:translateY(60px);}100%{opacity:1;transform:translateY(0);}"]);
+const closingAnimation = () => keyframes(["0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-8px) scale(0.98);}"]);
+const AnimationContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__AnimationContainer",
   componentId: "sc-wwaizr-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;", " ", "{margin-bottom:8px;}"], function (props) {
-  return props.hasBottomMargin && 'margin-bottom:16px;';
-}, UnorderedList);
-export var AllContent = styled.div.withConfig({
-  displayName: "Toaststyles__AllContent",
+})(["animation:", " 0.6s cubic-bezier(0.4,0,0.2,1) forwards;"], (props) => props.$show ? openingAnimation() : closingAnimation());
+const AlertContent = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__AlertContent",
   componentId: "sc-wwaizr-1"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;", " ", "{margin-bottom:8px;}"], (props) => props.hasBottomMargin && "margin-bottom:16px;", UnorderedList);
+const AllContent = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__AllContent",
+  componentId: "sc-wwaizr-2"
 })(["display:flex;color:inherit;"]);
-export var IconWrapper = styled.div.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__IconWrapper",
-  componentId: "sc-wwaizr-2"
+  componentId: "sc-wwaizr-3"
 })(["margin:12px;display:flex;"]);
-export var IconCloseWrapper = styled.div.withConfig({
+const IconCloseWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__IconCloseWrapper",
-  componentId: "sc-wwaizr-3"
+  componentId: "sc-wwaizr-4"
 })(["cursor:pointer;"]);
-export var IconExpanderWrapper = styled.div.withConfig({
+const IconExpanderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__IconExpanderWrapper",
-  componentId: "sc-wwaizr-4"
-})(["cursor:pointer;svg{transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
-  return props.expanded ? '180deg' : '0deg';
-});
-export var ButtonWrapper = styled.div.withConfig({
-  displayName: "Toaststyles__ButtonWrapper",
   componentId: "sc-wwaizr-5"
+})(["cursor:pointer;svg{transition:transform 0.1s linear;transform:rotateZ(", ");}"], (props) => props.expanded ? "180deg" : "0deg");
+const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__ButtonWrapper",
+  componentId: "sc-wwaizr-6"
 })(["position:absolute;right:12px;top:12px;display:flex;"]);
-export var FirstButtonWrapper = styled.div.withConfig({
+const FirstButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__FirstButtonWrapper",
-  componentId: "sc-wwaizr-6"
+  componentId: "sc-wwaizr-7"
 })(["margin-right:8px;"]);
-export var NumberWrapper = styled.div.withConfig({
+const NumberWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__NumberWrapper",
-  componentId: "sc-wwaizr-7"
-})(["margin-left:4px;color:inherit;opacity:0.6;cursor:pointer;&:hover{background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;opacity:1;}"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var ListWrapper = styled.div.withConfig({
-  displayName: "Toaststyles__ListWrapper",
   componentId: "sc-wwaizr-8"
-})(["display:flex;visibility:", ";height:", ";margin-top:", ";"], function (props) {
-  return props.visible ? 'visible' : 'hidden';
-}, function (props) {
-  return props.visible ? 'auto' : '0';
-}, function (props) {
-  return !props.description && props.visible ? '10px' : '0';
-});
-export var IconOrderWrapper = styled.div.withConfig({
-  displayName: "Toaststyles__IconOrderWrapper",
+})(["margin-left:4px;color:inherit;opacity:0.6;cursor:pointer;&:hover{background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;opacity:1;}"], (props) => props.theme.palette["grey-400"]);
+const ListWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__ListWrapper",
   componentId: "sc-wwaizr-9"
-})(["visibility:hidden;margin:-4px 0;&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var OrderWrapper = styled.div.withConfig({
-  displayName: "Toaststyles__OrderWrapper",
+})(["display:flex;visibility:", ";height:", ";margin-top:", ";"], (props) => props.visible ? "visible" : "hidden", (props) => props.visible ? "auto" : "0", (props) => !props.description && props.visible ? "10px" : "0");
+const IconOrderWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__IconOrderWrapper",
   componentId: "sc-wwaizr-10"
+})(["visibility:hidden;margin:-4px 0;&:hover{svg{fill:", ";cursor:pointer;}}"], (props) => props.theme.palette["blue-600"]);
+const OrderWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Toaststyles__OrderWrapper",
+  componentId: "sc-wwaizr-11"
 })(["display:flex;&:hover{", "{visibility:visible;}", "{background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;opacity:1;}}"], IconOrderWrapper, NumberWrapper);
-export var Wrapper = styled.div.withConfig({
+const Wrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__Wrapper",
-  componentId: "sc-wwaizr-11"
-})(["color:", ";"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var AnimationContainer = styled.div.withConfig({
-  displayName: "Toaststyles__AnimationContainer",
   componentId: "sc-wwaizr-12"
-})(["animation:", " 0.5s ease-in-out 0s 1;"], function (props) {
-  return props.show ? openingAnimation() : closingAnimation();
-});
-export var WrapperSectionMessage = styled.div.withConfig({
+})(["color:", ";"], (props) => props.theme.palette["grey-600"]);
+const WrapperSectionMessage = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__WrapperSectionMessage",
   componentId: "sc-wwaizr-13"
 })(["position:relative;font-size:13px;min-width:0;color:inherit;"]);
-export var AlertMessage = styled.div.withConfig({
+const AlertMessage = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__AlertMessage",
   componentId: "sc-wwaizr-14"
-})(["font-size:14px;line-height:20px;padding-top:14px;", ";font-weight:500;overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis;padding-right:", ";"], function (props) {
-  return props.noToastContent && 'padding-bottom: 14px;';
-}, function (props) {
-  return getWidth(props.hasClose, props.hasExpander);
-});
-export var AlertDescription = styled.div.withConfig({
+})(["font-size:14px;line-height:20px;padding-top:14px;", ";font-weight:500;overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis;padding-right:", ";"], (props) => props.noToastContent && "padding-bottom: 14px;", (props) => getWidth(props.hasClose, props.hasExpander));
+const AlertDescription = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__AlertDescription",
   componentId: "sc-wwaizr-15"
-})(["font-size:13px;line-height:1.39;font-weight:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;padding-bottom:", ";margin-top:2px;"], function (props) {
-  return props.button || props.expandedContent ? '16px' : '0';
-});
-export var Container = styled.div.withConfig({
+})(["font-size:13px;line-height:1.39;font-weight:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;padding-bottom:", ";margin-top:2px;"], (props) => props.button || props.expandedContent ? "16px" : "0");
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Toaststyles__Container",
   componentId: "sc-wwaizr-16"
-})(["display:flex;flex-direction:row;max-width:500px;align-items:flex-start;justify-content:center;border-top:solid 2px ", ";background-color:", ";border-radius:4px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.12);", ",", ",", "{svg{fill:", ";}}", ",", ",", ",", ":hover,", "{color:", ";}", ":hover{", "{background-image:linear-gradient( to right,", ";20%,rgba(255,255,255,0) 10% );color:", ";}}", "{svg{color:", ";fill:", ";}}"], getBackgroundColorForType, function (props) {
-  return props.theme.palette.white;
-}, IconExpanderWrapper, IconOrderWrapper, IconCloseWrapper, function (props) {
-  return props.theme.palette['grey-600'];
-}, OrderWrapper, AlertMessage, ListWrapper, NumberWrapper, AlertDescription, function (props) {
-  return props.theme.palette['grey-600'];
-}, OrderWrapper, NumberWrapper, function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.theme.palette['grey-600'];
-}, IconWrapper, getIconColorForType, getIconColorForType);
+})(["display:flex;flex-direction:row;max-width:500px;align-items:flex-start;justify-content:center;border-top:solid 2px ", ";background-color:", ";border-radius:4px;box-shadow:0 16px 32px 0 rgba(35,41,54,0.12);", ",", ",", "{svg{fill:", ";}}", ",", ",", ",", ":hover,", "{color:", ";}", ":hover{", "{background-image:linear-gradient( to right,", ";20%,rgba(255,255,255,0) 10% );color:", ";}}", "{svg{color:", ";fill:", ";}}"], getBackgroundColorForType, (props) => props.theme.palette.white, IconExpanderWrapper, IconOrderWrapper, IconCloseWrapper, (props) => props.theme.palette["grey-600"], OrderWrapper, AlertMessage, ListWrapper, NumberWrapper, AlertDescription, (props) => props.theme.palette["grey-600"], OrderWrapper, NumberWrapper, (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-600"], IconWrapper, getIconColorForType, getIconColorForType);
+export {
+  AlertContent,
+  AlertDescription,
+  AlertMessage,
+  AllContent,
+  AnimationContainer,
+  ButtonWrapper,
+  Container,
+  FirstButtonWrapper,
+  IconCloseWrapper,
+  IconExpanderWrapper,
+  IconOrderWrapper,
+  IconWrapper,
+  ListWrapper,
+  NumberWrapper,
+  OrderWrapper,
+  Wrapper,
+  WrapperSectionMessage,
+  closingAnimation
+};

package/dist/Toast.types.d.ts

@@ -1,6 +1,6 @@
-import type { ReactElement, ReactNode } from 'react';
-import type { ToastOptions } from 'react-hot-toast';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactElement, ReactNode } from 'react';
+import { ToastOptions } from 'react-hot-toast';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type ToastType = 'success' | 'warning' | 'negative' | 'informative';
 export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     type: ToastType;
@@ -12,6 +12,7 @@ export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     withClose?: boolean;
     button?: ReactNode;
     expanded?: boolean;
+    show?: boolean;
     onExpand?: (isExpanded: boolean) => void;
     /**
      * fired when user manually dismisses the toast by clicking the X button
@@ -24,4 +25,4 @@ export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
     toastId?: string;
 }>;
 export type ToastCustomisationOptions = Pick<ToastOptions, 'duration' | 'position' | 'id' | 'removeDelay' | 'className' | 'style'>;
-export type ShowToastProps = Omit<ToastProps, 'type'>;
+export type ShowToastProps = Omit<ToastProps, 'type' | 'show'>;

package/dist/Toast.types.js

@@ -1 +1 @@
-export {};
+

package/dist/constants.d.ts

@@ -1,3 +1,3 @@
-import { type ReactNode } from 'react';
-import { type ToastType } from './Toast.types';
+import { ReactNode } from 'react';
+import { ToastType } from './Toast.types';
 export declare const ICONS: Record<ToastType, ReactNode>;

package/dist/constants.js

@@ -1,8 +1,11 @@
-import React from 'react';
-import { Check3M, InfoFillM, WarningFillM } from '@synerise/ds-icon';
-export var ICONS = {
-  success: /*#__PURE__*/React.createElement(Check3M, null),
-  warning: /*#__PURE__*/React.createElement(WarningFillM, null),
-  negative: /*#__PURE__*/React.createElement(WarningFillM, null),
-  informative: /*#__PURE__*/React.createElement(InfoFillM, null)
-};
+import { jsx } from "react/jsx-runtime";
+import { InfoFillM, WarningFillM, Check3M } from "@synerise/ds-icon";
+const ICONS = {
+  success: /* @__PURE__ */ jsx(Check3M, {}),
+  warning: /* @__PURE__ */ jsx(WarningFillM, {}),
+  negative: /* @__PURE__ */ jsx(WarningFillM, {}),
+  informative: /* @__PURE__ */ jsx(InfoFillM, {})
+};
+export {
+  ICONS
+};

package/dist/index.js

@@ -1,4 +1,12 @@
-export * from './Toast';
-export { Toast as default } from './Toast';
-export * from './utils';
-export * from './constants';
+import { Toast, Toast as Toast2, showToast } from "./Toast.js";
+import { dismissToast } from "./utils/dismissToast.js";
+import { removeToast } from "./utils/removeToast.js";
+import { ICONS } from "./constants.js";
+export {
+  ICONS,
+  Toast,
+  Toast2 as default,
+  dismissToast,
+  removeToast,
+  showToast
+};

package/dist/utils/dismissToast.js

@@ -1,2 +1,5 @@
-import toast from 'react-hot-toast';
-export var dismissToast = toast.dismiss;
+import toast from "react-hot-toast";
+const dismissToast = toast.dismiss;
+export {
+  dismissToast
+};

package/dist/utils/index.js

@@ -1,2 +1,6 @@
-export * from './dismissToast';
-export * from './removeToast';
+import { dismissToast } from "./dismissToast.js";
+import { removeToast } from "./removeToast.js";
+export {
+  dismissToast,
+  removeToast
+};

package/dist/utils/removeToast.js

@@ -1,2 +1,5 @@
-import toast from 'react-hot-toast';
-export var removeToast = toast.remove;
+import toast from "react-hot-toast";
+const removeToast = toast.remove;
+export {
+  removeToast
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-toast",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "Toast UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,15 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-unordered-list": "^1.1.38",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-unordered-list": "^1.1.40",
+    "@synerise/ds-utils": "^1.7.1",
     "react-hot-toast": "^2.5.2",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 18.3.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }