@synerise/ds-toast 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2025-05-07)
+
+
+### Features
+
+* **toast:** toast component ([0cb20d0](https://github.com/Synerise/synerise-design/commit/0cb20d07b48d1c768a0ddf133b1970a4a13444ca))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+---
+id: toast
+title: Toast
+---
+
+Toast UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-toast
+or
+yarn add @synerise/ds-toast
+```
+
+## Usage
+
+```
+import Toast from '@synerise/ds-toast';
+import Button from '@synerise/ds-button';
+
+<Button onClick={() => Toast.success({message: 'Message title'})} />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-toast--default"></iframe>
+
+## API
+
+| Property        | Description                                           | Type                                               | Default |
+| --------------- | ----------------------------------------------------- | -------------------------------------------------- | ------- |
+| 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                                          | -       |
+| 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                                          | -       |
+| expanded        | toggles rendering expanded content                    | boolean                                            | -       |
+| withClose       | renders X icon to manually dismiss toast              | boolean                                            | -       |
+| onCloseClick    | triggered on click of close icon                      | () => void                                         | -       |
+| button          | button element to render below message content        | ReactNode                                          | -       |
+
+## Static methods
+
+To display a Toast using Toaster (it is rendered inside DSProvider by default) use any of the shortcut methods provided:
+
+- Toast.success(props) - shows a Toast type 'success'
+- Toast.error(props) - shows a Toast type 'negative'
+- Toast.info(props) - shows a Toast type 'informative'
+- Toast.warning(props) - shows a Toast type 'warning'
+
+```
+
+import Toast from '@synerise/ds-toast';
+import Button from '@synerise/ds-button';
+
+<Button onClick={() => Toast.success({message: 'Message title'})} />
+
+```
+
+### Additional methods
+
+#### removeToast(toastId?)
+Removes a specific or all displayed toasts instantly
+
+#### dismissToast(toastId?)
+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.

package/dist/Toast.d.ts

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

package/dist/Toast.js

@@ -0,0 +1,69 @@
+var _excluded = ["type", "message", "description", "expander", "expandedContent", "withClose", "customIcon", "expanded", "onExpand", "onCloseClick", "button"];
+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, useMemo } from 'react';
+import Icon, { CloseM, AngleDownS } from '@synerise/ds-icon';
+import * as S from './Toast.styles';
+import { showToast } from './utils/showToast';
+import { ICONS } from './constants';
+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,
+    button = _ref.button,
+    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 () {
+    return ICONS[type];
+  }, [type]);
+  var expandContent = useCallback(function () {
+    onExpand && onExpand(!expanded);
+  }, [onExpand, expanded]);
+  return /*#__PURE__*/React.createElement(S.Container, _extends({
+    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: onCloseClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  }))), toastContent));
+};
+Toast.success = function (props, options) {
+  return showToast('success', props, options);
+};
+Toast.error = function (props, options) {
+  return showToast('negative', props, options);
+};
+Toast.info = function (props, options) {
+  return showToast('informative', props, options);
+};
+Toast.warning = function (props, options) {
+  return showToast('warning', props, options);
+};

package/dist/Toast.styles.d.ts

@@ -0,0 +1,39 @@
+import { Keyframes } from 'styled-components';
+import { ReactNode } from 'react';
+import { ToastType } from './Toast.types';
+export declare const closingAnimation: () => Keyframes;
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
+    hasBottomMargin?: boolean | undefined;
+}, 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, {
+    expanded?: boolean | undefined;
+}, 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, {
+    visible?: boolean | undefined;
+    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 | undefined;
+}, never>;
+export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AlertMessage: import("styled-components").StyledComponent<"div", any, {
+    noToastContent?: boolean | undefined;
+    hasClose?: boolean | undefined;
+    hasExpander?: boolean | undefined;
+}, never>;
+export declare const AlertDescription: import("styled-components").StyledComponent<"div", any, {
+    button?: boolean | undefined;
+    expandedContent?: boolean | undefined;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    toastType: ToastType;
+}, never>;

package/dist/Toast.styles.js

@@ -0,0 +1,153 @@
+import styled, { keyframes } from 'styled-components';
+import { hexToRgba } from '@synerise/ds-utils';
+import { UnorderedList } from '@synerise/ds-unordered-list/dist/Unordered-list.styles';
+var getDescriptionColorForType = function getDescriptionColorForType(_ref) {
+  var toastType = _ref.toastType,
+    theme = _ref.theme;
+  switch (toastType) {
+    case 'informative':
+      return theme.palette['grey-600'];
+    case 'negative':
+    case 'success':
+    case 'warning':
+    default:
+      return theme.palette.white;
+  }
+};
+var getIconColorForType = function getIconColorForType(_ref2) {
+  var toastType = _ref2.toastType,
+    theme = _ref2.theme;
+  switch (toastType) {
+    case 'informative':
+      return theme.palette['grey-600'];
+    case 'negative':
+    case 'success':
+    case 'warning':
+    default:
+      return theme.palette.white;
+  }
+};
+var getBackgroundColorForType = function getBackgroundColorForType(_ref3) {
+  var toastType = _ref3.toastType,
+    theme = _ref3.theme;
+  switch (toastType) {
+    case 'informative':
+      return theme.palette['grey-050'];
+    case 'negative':
+      return theme.palette['red-500'];
+    case 'warning':
+      return theme.palette['yellow-600'];
+    case 'success':
+    default:
+      return theme.palette['green-600'];
+  }
+};
+var getWidth = function getWidth(hasClose, hasExpander) {
+  if (hasClose && hasExpander) {
+    return '72px';
+  }
+  if (hasClose || hasExpander) {
+    return '48px';
+  }
+  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",
+  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",
+  componentId: "sc-wwaizr-1"
+})(["display:flex;color:inherit;"]);
+export var IconWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconWrapper",
+  componentId: "sc-wwaizr-2"
+})(["margin:12px;display:flex;"]);
+export var IconCloseWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconCloseWrapper",
+  componentId: "sc-wwaizr-3"
+})(["cursor:pointer;"]);
+export var IconExpanderWrapper = 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"
+})(["position:absolute;right:12px;top:12px;display:flex;"]);
+export var FirstButtonWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__FirstButtonWrapper",
+  componentId: "sc-wwaizr-6"
+})(["margin-right:8px;"]);
+export var NumberWrapper = 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",
+  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",
+  componentId: "sc-wwaizr-10"
+})(["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({
+  displayName: "Toaststyles__Wrapper",
+  componentId: "sc-wwaizr-11"
+})(["color:", ";"], function (props) {
+  return props.theme.palette['grey-050'];
+});
+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({
+  displayName: "Toaststyles__WrapperSectionMessage",
+  componentId: "sc-wwaizr-13"
+})(["position:relative;font-size:13px;min-width:0;color:inherit;"]);
+export var AlertMessage = 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({
+  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({
+  displayName: "Toaststyles__Container",
+  componentId: "sc-wwaizr-16"
+})(["display:flex;flex-direction:row;max-width:500px;align-items:flex-start;justify-content:center;background-color:", ";border-radius:4px;box-shadow:", ";", ",", ",", "{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.color ? "0px 16px 32px 5px " + hexToRgba(props.theme.palette['grey-900'], 0.2) : 'none';
+}, IconExpanderWrapper, IconOrderWrapper, IconCloseWrapper, getDescriptionColorForType, OrderWrapper, AlertMessage, NumberWrapper, AlertDescription, getDescriptionColorForType, OrderWrapper, NumberWrapper, getDescriptionColorForType, getDescriptionColorForType, IconWrapper, getIconColorForType, getIconColorForType);

package/dist/Toast.types.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { ToastOptions } from 'react-hot-toast';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type ToastType = 'success' | 'warning' | 'negative' | 'informative';
+export type ToastProps = WithHTMLAttributes<HTMLDivElement, {
+    type: ToastType;
+    message?: ReactNode;
+    description?: ReactNode;
+    customIcon?: ReactElement;
+    expander?: boolean;
+    expandedContent?: ReactNode;
+    withClose?: ReactNode;
+    button?: ReactNode;
+    expanded?: boolean;
+    onExpand?: (isExpanded: boolean) => void;
+    onCloseClick?: () => void;
+}>;
+export type ToastCustomisationOptions = Pick<ToastOptions, 'duration' | 'position' | 'id' | 'removeDelay' | 'className' | 'style'>;
+export type ShowToastProps = Omit<ToastProps, 'type'>;

package/dist/Toast.types.js

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

package/dist/constants.d.ts

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

package/dist/constants.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WarningFillM, Check3M, InfoFillM } 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)
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Toast';
+export { Toast as default } from './Toast';
+export * from './utils';
+export * from './constants';
+export type { ToastProps } from './Toast.types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './Toast';
+export { Toast as default } from './Toast';
+export * from './utils';
+export * from './constants';

package/dist/utils/dismissToast.d.ts

@@ -0,0 +1 @@
+export declare const dismissToast: (toastId?: string | undefined) => void;

package/dist/utils/dismissToast.js

@@ -0,0 +1,2 @@
+import toast from 'react-hot-toast';
+export var dismissToast = toast.dismiss;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dismissToast';
+export * from './removeToast';
+export * from './showToast';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './dismissToast';
+export * from './removeToast';
+export * from './showToast';

package/dist/utils/removeToast.d.ts

@@ -0,0 +1 @@
+export declare const removeToast: (toastId?: string | undefined) => void;

package/dist/utils/removeToast.js

@@ -0,0 +1,2 @@
+import toast from 'react-hot-toast';
+export var removeToast = toast.remove;

package/dist/utils/showToast.d.ts

@@ -0,0 +1,2 @@
+import { ShowToastProps, ToastCustomisationOptions, ToastType } from '../Toast.types';
+export declare const showToast: (type: ToastType, props: ShowToastProps, options?: ToastCustomisationOptions) => string;

package/dist/utils/showToast.js

@@ -0,0 +1,9 @@
+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); }
+import React from 'react';
+import toast from 'react-hot-toast';
+import { Toast } from '../Toast';
+export var showToast = function showToast(type, props, options) {
+  return toast.custom(/*#__PURE__*/React.createElement(Toast, _extends({}, props, {
+    type: type
+  })), options);
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@synerise/ds-toast",
+  "version": "1.1.0",
+  "description": "Toast UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "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": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-icon": "^1.4.2",
+    "@synerise/ds-unordered-list": "^1.1.2",
+    "@synerise/ds-utils": "^1.1.0",
+    "react-hot-toast": "^2.5.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1"
+  },
+  "devDependencies": {
+    "@synerise/ds-toaster": "^1.1.0"
+  },
+  "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
+}