@synerise/ds-alert 0.3.20 → 0.3.24

package/CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.22...@synerise/ds-alert@0.3.24) (2021-10-26)
+
+
+### Bug Fixes
+
+* **alert:** fix button and padding ([0152d97](https://github.com/Synerise/synerise-design/commit/0152d973610af603ed7e59ab6c66de4f1d064a9f))
+* **alert:** fix button and padding ([f4f8ab4](https://github.com/Synerise/synerise-design/commit/f4f8ab48b937338e989af2e68cd9e1f01e31b3e4))
+* **alert:** fix component ([210baa2](https://github.com/Synerise/synerise-design/commit/210baa238e131bf4b2ca430e451479ea25c88f9b))
+* **alert:** fix component ([fb7b928](https://github.com/Synerise/synerise-design/commit/fb7b92844fe958cddc10bbe01fa1e3f3378471d6))
+* **alert:** fix padding of textDescription ([0689a5c](https://github.com/Synerise/synerise-design/commit/0689a5c2bd270ef193778605fa2943261663e5f4))
+* **alert:** fix padding of textDescription ([bdce3ed](https://github.com/Synerise/synerise-design/commit/bdce3ed176e0775836cd37a3e31438cf9e9aeef8))
+* **alert:** fix prop ([37cf9e2](https://github.com/Synerise/synerise-design/commit/37cf9e20fc6a859ae2a2f8fe3dc1abb9b83d584f))
+* **alert:** fix prop ([8cd3a2a](https://github.com/Synerise/synerise-design/commit/8cd3a2a9a34f47be88f54f0ba01d09952947a459))
+* **alert:** fix props ([ab9b3f1](https://github.com/Synerise/synerise-design/commit/ab9b3f1350d4349cd86c6fcb0eca2a2b4fdb92de))
+* **alert:** fix props ([d262657](https://github.com/Synerise/synerise-design/commit/d262657b8f66ef31cdc0b9abde6b6321048b050a))
+* **alert:** fix styles and add props ([0d829d2](https://github.com/Synerise/synerise-design/commit/0d829d26111780ee006cd26c3c5dc76962ae8c99))
+* **alert:** fix styles and add props ([b555b8a](https://github.com/Synerise/synerise-design/commit/b555b8af547c632fca82d8024514561f20636dd6))
+* **alert:** fix styles of toast ([65c8a2b](https://github.com/Synerise/synerise-design/commit/65c8a2b963ec671e365967dffa364922f4b95d79))
+* **alert:** fix styles of toast ([c76c197](https://github.com/Synerise/synerise-design/commit/c76c197c79bcb1fc69b08f65cb69096521a4c440))
+* **alert:** new component broadcast-bar ([0525d34](https://github.com/Synerise/synerise-design/commit/0525d345c2aefc097db832b8fd2693dca3902ea5))
+* **alert:** new component Toast ([f1ed36b](https://github.com/Synerise/synerise-design/commit/f1ed36b88d98ef81e487eb6b8418ea6bb4be6a3d))
+* **alert:** new component Toast ([665f9dc](https://github.com/Synerise/synerise-design/commit/665f9dcc2ea5812ef7ef3a5fa4fafd6590c78ecb))
+* **alert:** update documentation ([3fa6258](https://github.com/Synerise/synerise-design/commit/3fa62584962af09ae0593ed7853043946b749618))
+* **alert:** update documentation ([0aaff46](https://github.com/Synerise/synerise-design/commit/0aaff46cc8f7c5043648920dd788c579e63ea0d0))
+
+
+
+
+
+## [0.3.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.22...@synerise/ds-alert@0.3.23) (2021-10-19)
+
+
+### Bug Fixes
+
+* **alert:** fix button and padding ([0152d97](https://github.com/Synerise/synerise-design/commit/0152d973610af603ed7e59ab6c66de4f1d064a9f))
+* **alert:** fix button and padding ([f4f8ab4](https://github.com/Synerise/synerise-design/commit/f4f8ab48b937338e989af2e68cd9e1f01e31b3e4))
+* **alert:** fix component ([210baa2](https://github.com/Synerise/synerise-design/commit/210baa238e131bf4b2ca430e451479ea25c88f9b))
+* **alert:** fix component ([fb7b928](https://github.com/Synerise/synerise-design/commit/fb7b92844fe958cddc10bbe01fa1e3f3378471d6))
+* **alert:** fix padding of textDescription ([0689a5c](https://github.com/Synerise/synerise-design/commit/0689a5c2bd270ef193778605fa2943261663e5f4))
+* **alert:** fix padding of textDescription ([bdce3ed](https://github.com/Synerise/synerise-design/commit/bdce3ed176e0775836cd37a3e31438cf9e9aeef8))
+* **alert:** fix prop ([37cf9e2](https://github.com/Synerise/synerise-design/commit/37cf9e20fc6a859ae2a2f8fe3dc1abb9b83d584f))
+* **alert:** fix prop ([8cd3a2a](https://github.com/Synerise/synerise-design/commit/8cd3a2a9a34f47be88f54f0ba01d09952947a459))
+* **alert:** fix props ([ab9b3f1](https://github.com/Synerise/synerise-design/commit/ab9b3f1350d4349cd86c6fcb0eca2a2b4fdb92de))
+* **alert:** fix props ([d262657](https://github.com/Synerise/synerise-design/commit/d262657b8f66ef31cdc0b9abde6b6321048b050a))
+* **alert:** fix styles and add props ([0d829d2](https://github.com/Synerise/synerise-design/commit/0d829d26111780ee006cd26c3c5dc76962ae8c99))
+* **alert:** fix styles and add props ([b555b8a](https://github.com/Synerise/synerise-design/commit/b555b8af547c632fca82d8024514561f20636dd6))
+* **alert:** fix styles of toast ([65c8a2b](https://github.com/Synerise/synerise-design/commit/65c8a2b963ec671e365967dffa364922f4b95d79))
+* **alert:** fix styles of toast ([c76c197](https://github.com/Synerise/synerise-design/commit/c76c197c79bcb1fc69b08f65cb69096521a4c440))
+* **alert:** new component broadcast-bar ([0525d34](https://github.com/Synerise/synerise-design/commit/0525d345c2aefc097db832b8fd2693dca3902ea5))
+* **alert:** new component Toast ([f1ed36b](https://github.com/Synerise/synerise-design/commit/f1ed36b88d98ef81e487eb6b8418ea6bb4be6a3d))
+* **alert:** new component Toast ([665f9dc](https://github.com/Synerise/synerise-design/commit/665f9dcc2ea5812ef7ef3a5fa4fafd6590c78ecb))
+* **alert:** update documentation ([3fa6258](https://github.com/Synerise/synerise-design/commit/3fa62584962af09ae0593ed7853043946b749618))
+* **alert:** update documentation ([0aaff46](https://github.com/Synerise/synerise-design/commit/0aaff46cc8f7c5043648920dd788c579e63ea0d0))
+
+
+
+
+
+## [0.3.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.21...@synerise/ds-alert@0.3.22) (2021-10-19)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [0.3.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.20...@synerise/ds-alert@0.3.21) (2021-09-21)
+
+
+### Bug Fixes
+
+* **alert:** fix styles ([a24c6a3](https://github.com/Synerise/synerise-design/commit/a24c6a353f6209205794b57ca115f5ebd3c605c1))
+* **alert:** fix styles ([ddce48c](https://github.com/Synerise/synerise-design/commit/ddce48c5e36f9beb2078a123364990a2a6b9e741))
+* **alert:** two new components IconAlert and InlineAlert ([7e28f50](https://github.com/Synerise/synerise-design/commit/7e28f50cb5b5d5c35d10b7c196d3cb36b112df15))
+
+
+
+
+
 ## [0.3.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.19...@synerise/ds-alert@0.3.20) (2021-09-09)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/README.md

@@ -82,4 +82,52 @@ import Alert from '@synerise/ds-alert'
 | ---      | ---                                                         | ---                          | ---       | 
 | type     | Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity`                | `string`                    | `positive` |
 | color    | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue`                                                  | `string`                    | -          |
-| mode     | type of modes, options: `background`, `background-outline`,`outline`,`shadow`                                                            | `string`                    | -          |
+| mode     | type of modes, options: `background`, `background-outline`,`outline`,`shadow`                                                            | `string`                    | -          |
+
+### Alert.IconAlert
+
+| Property        | Description                                                                                                            | Type                        | Default    | 
+| ----            | ---                                                                                                                    | ---                         | ---        | 
+| type            | Type of Alert styles, options: `success`, `info`, `warning`, `error`                                                   | `string`                    | `warning`  | 
+| message         | Message of Icon Alert                                                                                                  | `React.ReactNode`           | -          | 
+| disabled        | prop to set disabled icon                                                                                              | `boolean`                   | -          |
+| withEmphasis    | prop to show bolder text                                                                                               | `React.ReactNode`           | -          |
+| withLink        | prop to show highlited text                                                                                            | `React.ReactNode`           | -          |
+| iconAlert       | prop to set custom icon                                                                                                | `boolean`                   | -          |
+| hoverButton     | prop to set hover state button                                                                                         | `boolean`                   | -          |
+
+
+### Alert.Toast
+
+| Property        | Description                                                                                                            | Type                        | Default    | 
+| ----            | ---                                                                                                                    | ---                         | ---        | 
+| type            | Type of Alert styles, options: `success`, `info`, `warning`, `error`                                                   | `string`                    | `warning`  | 
+| message         | Message of Icon Alert                                                                                                  | `React.ReactNode`           | -          | 
+| button          | prop to set button                                                                                                     | `React.ReactNode`           | -          |
+| expanded        | prop to set show expanded content                                                                                      | `boolean`                   | -          |
+| onExpand        | prop on click to show content                                                                                          | `isExpanded:boolean => void`| -          |
+| customColor     | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`                    | -          |
+| customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`                    | -          |
+| color           | type of colors,options: `red`, `green`,`yellow`,`grey`,`blue`                                                          | `string`                    | -          |
+| colorIcon       | type of colors,options: `white`, `black`,`yellow`,`grey`,`blue`                                                        | `string`                    | -          |
+| customColorText | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string`                    | -          |
+| withClose       | prop to show close button                                                                                              | `React.ReactNode`           | -          |
+| customIcon      | prop to set custom icon                                                                                                | `React.ReactNode`           | -          |
+| expander        | prop to set expanded icon                                                                                              | `React.ReactNode`           | -          |
+| expanderContent | prop to set custom icon                                                                                                | `React.ReactNode`           | -          |
+| onCloseClick    | Callback when Toast is closed                                                                                          | `(e: MouseEvent) => void`   | -          |
+| show            | prop to show Toast                                                                                                     | `boolean`                   | -          |
+
+### Alert.BroadcastBar
+
+| Property        | Description                                                                                                            | Type                        | Default    | 
+| ----            | ---                                                                                                                    | ---                         | ---        | 
+| type            | Type of Alert styles, options: `success`, `warning`, `negative`                                                        | `string`                    | `warning`  | 
+| color           | type of colors,options: `red`, `green`,`yellow`                                                                        | `string`                    | -          |
+| onCloseClick    | prop to close broadcastBar                                                                                             | `void`                      | -          |
+| withEmphasis    | prop to show bolder text                                                                                               | `React.ReactNode`           | -          |
+| withLink        | prop to show highlited text                                                                                            | `React.ReactNode`           | -          |
+| withClose       | prop to set closeIcon                                                                                                  | `React.ReactNode`           | -          |
+| button          | prop to set button                                                                                                     | `boolean`                   | -          |
+| textButton      | string of button                                                                                                       | `string`                    | -          |
+| text            | string of withEmphasis or withLink                                                                                     | `string`                    | -          |

package/dist/BroadcastBar/BroadcastBar.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Props } from './BroadcastBar.types';
+declare const BroadcastBar: React.FC<Props>;
+export default BroadcastBar;

package/dist/BroadcastBar/BroadcastBar.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { CloseM, WarningFillM, Check3M, ErrorFillM } from '@synerise/ds-icon/dist/icons';
+import Icon from '@synerise/ds-icon';
+import * as S from './BroadcastBar.styles';
+var ICONS = {
+  success: React.createElement(Check3M, null),
+  warning: React.createElement(WarningFillM, null),
+  negative: React.createElement(ErrorFillM, null)
+};
+var DEFAULT_ICON = React.createElement(WarningFillM, null);
+
+var BroadcastBar = function BroadcastBar(_ref) {
+  var icon = _ref.icon,
+      type = _ref.type,
+      description = _ref.description,
+      button = _ref.button,
+      withEmphasis = _ref.withEmphasis,
+      withLink = _ref.withLink,
+      color = _ref.color,
+      withClose = _ref.withClose,
+      textButton = _ref.textButton,
+      onCloseClick = _ref.onCloseClick,
+      text = _ref.text;
+  var renderMessage = React.useMemo(function () {
+    return React.createElement(S.AlertContent, {
+      color: color,
+      withLink: withLink
+    }, React.createElement(S.Text, {
+      color: color
+    }, description && !withEmphasis && React.createElement(S.AlertDescription, {
+      color: color
+    }, description), withLink && !withEmphasis && !description && React.createElement(S.LinkWrapper, {
+      color: color
+    }, React.createElement(S.WrapperText, null, text), React.createElement(S.Link, null, withLink)), withEmphasis && React.createElement(S.EmphasisWrapper, {
+      color: color
+    }, React.createElement(S.WrapperText, {
+      emphasis: withEmphasis
+    }, text), withEmphasis)));
+  }, [description, withEmphasis, withLink, text, color]);
+  var renderIcon = React.useMemo(function () {
+    if (icon) return icon;
+    if (ICONS[type]) return ICONS[type];
+    return DEFAULT_ICON;
+  }, [icon, type]);
+  return React.createElement(S.Container, {
+    color: color
+  }, React.createElement(S.WrapperSectionMessage, {
+    color: color
+  }, React.createElement("div", null), React.createElement(S.AllContent, {
+    close: withClose,
+    color: color
+  }, React.createElement(S.IconWrapper, {
+    color: color
+  }, React.createElement(Icon, {
+    component: renderIcon
+  })), renderMessage, React.createElement(S.ButtonWrapper, {
+    color: color
+  }, button && React.createElement(S.BroadcastButton, {
+    color: color,
+    type: color === 'yellow' ? 'tertiary' : 'tertiary-white',
+    mode: "label"
+  }, textButton))), React.createElement(S.ButtonCloseWrapper, {
+    color: color
+  }, withClose && React.createElement(S.IconCloseWrapper, {
+    onClick: onCloseClick,
+    color: color
+  }, React.createElement(Icon, {
+    component: React.createElement(CloseM, null)
+  })))));
+};
+
+export default BroadcastBar;

package/dist/BroadcastBar/BroadcastBar.styles.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@synerise/ds-button';
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
+    withLink?: React.ReactNode;
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const AllContent: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+    close?: boolean | React.ReactNode;
+}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const BroadcastButton: import("styled-components").StyledComponent<typeof Button, any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const ButtonCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const WrapperText: import("styled-components").StyledComponent<"span", any, {
+    emphasis?: boolean | React.ReactNode;
+}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {
+    color?: "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const Link: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/BroadcastBar/BroadcastBar.styles.js

@@ -0,0 +1,117 @@
+import styled from 'styled-components';
+import Button from '@synerise/ds-button';
+
+var getColorBackground = function getColorBackground(props) {
+  if (props.color === 'red') {
+    return props.theme.palette['red-500'];
+  }
+
+  return props.theme.palette["".concat(props.color, "-600")];
+};
+
+var getColorIcon = function getColorIcon(props) {
+  if (props.color === 'yellow') {
+    return props.theme.palette['grey-800'];
+  }
+
+  return props.theme.palette.white;
+};
+
+export var AlertContent = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__AlertContent",
+  componentId: "sc-1xh5805-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var AllContent = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__AllContent",
+  componentId: "sc-1xh5805-1"
+})(["display:flex;margin-left:", ";color:", ";"], function (props) {
+  return props.close ? '34px' : '0';
+}, function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var Text = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__Text",
+  componentId: "sc-1xh5805-2"
+})(["display:flex;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var IconWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__IconWrapper",
+  componentId: "sc-1xh5805-3"
+})(["margin:10px 12px;color:", ";fill:", ";}"], function (props) {
+  return getColorIcon(props);
+}, function (props) {
+  return getColorIcon(props);
+});
+export var IconCloseWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__IconCloseWrapper",
+  componentId: "sc-1xh5805-4"
+})(["margin:3px 5px 2px;cursor:pointer;svg{color:", ";fill:", ";}"], function (props) {
+  return getColorIcon(props);
+}, function (props) {
+  return getColorIcon(props);
+});
+export var ButtonWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__ButtonWrapper",
+  componentId: "sc-1xh5805-5"
+})(["margin:6px 8px;border-radius:3px;display:flex;background-color:rgba(255,255,255,0.2);"]);
+export var BroadcastButton = styled(Button).withConfig({
+  displayName: "BroadcastBarstyles__BroadcastButton",
+  componentId: "sc-1xh5805-6"
+})(["color:", ";&&&:hover{color:", " !important;}"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+}, function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var ButtonCloseWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__ButtonCloseWrapper",
+  componentId: "sc-1xh5805-7"
+})(["margin:6px 8px;display:flex;"]);
+export var Wrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__Wrapper",
+  componentId: "sc-1xh5805-8"
+})(["margin-top:10px;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var Container = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__Container",
+  componentId: "sc-1xh5805-9"
+})(["width:100%;background-color:", ";"], function (props) {
+  return getColorBackground(props);
+});
+export var WrapperSectionMessage = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__WrapperSectionMessage",
+  componentId: "sc-1xh5805-10"
+})(["font-size:13px;display:flex;color:", ";justify-content:space-between;"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var AlertDescription = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__AlertDescription",
+  componentId: "sc-1xh5805-11"
+})(["display:flex;max-width:800px;white-space:normal;font-size:13px;line-height:1.39;font-weight:500;margin-top:1px;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var EmphasisWrapper = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__EmphasisWrapper",
+  componentId: "sc-1xh5805-12"
+})(["font-size:13px;max-width:800px;line-height:1.39;font-weight:500;margin-top:1px;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var WrapperText = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__WrapperText",
+  componentId: "sc-1xh5805-13"
+})(["font-weight:", ";margin-right:3px;max-width:800px;"], function (props) {
+  return props.emphasis ? '400' : '500';
+});
+export var LinkWrapper = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__LinkWrapper",
+  componentId: "sc-1xh5805-14"
+})(["font-size:13px;line-height:1.5;max-width:800px;font-weight:500;margin-top:1px;color:", ";"], function (props) {
+  return props.color === 'yellow' ? props.theme.palette['grey-800'] : props.theme.palette.white;
+});
+export var Link = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__Link",
+  componentId: "sc-1xh5805-15"
+})(["text-decoration:underline;cursor:pointer;max-width:800px;"]);

package/dist/BroadcastBar/BroadcastBar.types.d.ts

@@ -0,0 +1,15 @@
+import { AlertProps } from 'antd/lib/alert';
+import * as React from 'react';
+export declare type BroadcastBarTypes = 'success' | 'warning' | 'negative';
+export declare type ColorType = 'red' | 'green' | 'yellow';
+export interface Props extends Omit<AlertProps, 'type' | 'message'> {
+    type: string | BroadcastBarTypes;
+    color?: ColorType;
+    button?: boolean | React.ReactNode;
+    withEmphasis?: React.ReactNode;
+    withLink?: React.ReactNode;
+    withClose?: React.ReactNode;
+    onCloseClick?: () => void;
+    textButton?: string;
+    text?: string | React.ReactNode;
+}

package/dist/IconAlert/IconAlert.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconAlertProps } from './IconAlert.types';
+declare const IconAlert: React.FC<IconAlertProps>;
+export default IconAlert;

package/dist/IconAlert/IconAlert.js

@@ -0,0 +1,42 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon/dist/icons';
+import * as React from 'react';
+import Icon from '@synerise/ds-icon';
+import * as S from './IconAlert.styles';
+var ICONS = {
+  success: React.createElement(Check2M, null),
+  alert: React.createElement(WarningFillM, null),
+  warning: React.createElement(WarningFillM, null),
+  info: React.createElement(InfoM, null)
+};
+
+var IconAlert = function IconAlert(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'warning' : _ref$type,
+      iconAlert = _ref.iconAlert,
+      message = _ref.message,
+      withLink = _ref.withLink,
+      withEmphasis = _ref.withEmphasis,
+      hoverButton = _ref.hoverButton,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, ["type", "iconAlert", "message", "withLink", "withEmphasis", "hoverButton", "disabled"]);
+
+  var icon = React.useMemo(function () {
+    return ICONS[type];
+  }, [type]);
+  return React.createElement(S.IconAlertWrapper, _extends({}, rest, {
+    type: type,
+    disabled: disabled,
+    hoverButton: hoverButton,
+    className: "ds-inline-alert"
+  }), iconAlert && React.createElement(Icon, {
+    component: icon
+  }), message && React.createElement(S.Message, null, message, withLink && React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && React.createElement(S.EmphasisWrapper, null, withEmphasis)));
+};
+
+export default IconAlert;

package/dist/IconAlert/IconAlert.styles.d.ts

@@ -0,0 +1,9 @@
+import { IconAlertType } from './IconAlert.types';
+export declare const Message: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const IconAlertWrapper: import("styled-components").StyledComponent<"span", any, {
+    type: IconAlertType;
+    hoverButton?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;
+export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/IconAlert/IconAlert.styles.js

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+var COLORS = {
+  success: 'green-600',
+  warning: 'yellow-600',
+  alert: 'red-600',
+  info: 'grey-600'
+};
+var COLORS_TEXT = {
+  success: 'green-700',
+  warning: 'yellow-700',
+  alert: 'red-700',
+  info: 'grey-700'
+};
+var COLORS_HOVER = {
+  success: 'green-700',
+  warning: 'yellow-700',
+  alert: 'red-700',
+  info: 'grey-700'
+};
+export var Message = styled.span.withConfig({
+  displayName: "IconAlertstyles__Message",
+  componentId: "sc-1ty06sp-0"
+})(["display:flex;font-size:13px;line-height:18px;font-weight:400;color:inherit;margin-left:4px;"]);
+export var IconAlertWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__IconAlertWrapper",
+  componentId: "sc-1ty06sp-1"
+})(["display:flex;align-items:center;justify-content:flex-start;flex-direction:row;&:hover{cursor:", ";svg{color:", ";fill:", ";}}&:active{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", ";", "{color:", ";}"], function (props) {
+  return props.hoverButton ? 'pointer' : 'auto';
+}, function (props) {
+  return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return !!props.disabled && css(["pointer-events:none;opacity:0.4;"]);
+}, Message, function (props) {
+  return props.theme.palette[COLORS_TEXT[props.type]];
+});
+export var EmphasisWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__EmphasisWrapper",
+  componentId: "sc-1ty06sp-2"
+})(["display:flex;padding-bottom:1px;font-size:13px;line-height:1.39;padding-left:3px;font-weight:500;color:inherit;"]);
+export var LinkWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__LinkWrapper",
+  componentId: "sc-1ty06sp-3"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:400;margin-left:3px;color:inherit;text-decoration:underline;cursor:pointer;"]);

package/dist/IconAlert/IconAlert.types.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare type IconAlertType = 'success' | 'alert' | 'warning' | 'info';
+export declare type IconAlertProps = {
+    type: IconAlertType;
+    message: string | React.ReactNode;
+    withEmphasis?: React.ReactNode;
+    withLink?: React.ReactNode;
+    iconAlert?: boolean;
+    hoverButton?: boolean;
+    disabled?: boolean;
+};

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Props } from './Toast.types';
+declare const Toast: React.FC<Props>;
+export default Toast;

package/dist/Toast/Toast.js

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { CloseM, WarningFillM, Check3M, HelpFillM, InfoFillM, AngleDownS } from '@synerise/ds-icon/dist/icons';
+import Icon from '@synerise/ds-icon';
+import * as S from './Toast.styles';
+var ICONS = {
+  success: React.createElement(Check3M, null),
+  warning: React.createElement(WarningFillM, null),
+  negative: React.createElement(WarningFillM, null),
+  neutral: React.createElement(HelpFillM, null),
+  informative: React.createElement(InfoFillM, null)
+};
+var DEFAULT_ICON = React.createElement(WarningFillM, null);
+
+var Toast = function Toast(_ref) {
+  var icon = _ref.icon,
+      type = _ref.type,
+      message = _ref.message,
+      description = _ref.description,
+      expander = _ref.expander,
+      expandedContent = _ref.expandedContent,
+      color = _ref.color,
+      withClose = _ref.withClose,
+      customColor = _ref.customColor,
+      customColorIcon = _ref.customColorIcon,
+      customIcon = _ref.customIcon,
+      colorIcon = _ref.colorIcon,
+      customColorText = _ref.customColorText,
+      expanded = _ref.expanded,
+      onExpand = _ref.onExpand,
+      onCloseClick = _ref.onCloseClick,
+      show = _ref.show,
+      button = _ref.button;
+  var renderMessage = React.useMemo(function () {
+    return React.createElement(S.AlertContent, null, message && React.createElement(S.AlertMessage, {
+      customColorText: customColorText,
+      color: color
+    }, message), React.createElement(S.Text, {
+      customColorText: customColorText,
+      color: color
+    }, description && React.createElement(S.AlertDescription, {
+      expandedContent: expandedContent,
+      button: button,
+      customColorText: customColorText,
+      color: color
+    }, description)), expandedContent && expanded && React.createElement(S.ListWrapper, {
+      description: description,
+      visible: expanded
+    }, expandedContent), button);
+  }, [message, description, expandedContent, customColorText, color, expanded, button]);
+  var renderIcon = React.useMemo(function () {
+    if (icon) return icon;
+    if (ICONS[type]) return ICONS[type];
+    return DEFAULT_ICON;
+  }, [icon, type]);
+  var expandContent = React.useCallback(function () {
+    onExpand && onExpand(!expanded);
+  }, [onExpand, expanded]);
+  return React.createElement(S.Container, {
+    expander: expander,
+    expandedContent: expandedContent,
+    withClose: withClose,
+    visible: show,
+    onCloseClick: onCloseClick,
+    color: color,
+    customColor: customColor
+  }, React.createElement(S.WrapperSectionMessage, null, React.createElement(S.AllContent, null, React.createElement(S.IconWrapper, {
+    colorIcon: colorIcon,
+    customColorIcon: customColorIcon
+  }, customIcon || React.createElement(Icon, {
+    component: renderIcon
+  })), renderMessage), React.createElement(S.ButtonWrapper, null, expander && React.createElement(S.IconExpanderWrapper, {
+    onClick: expandContent,
+    expanded: expanded,
+    customColorText: customColorText,
+    color: color
+  }, React.createElement(Icon, {
+    component: React.createElement(AngleDownS, null),
+    size: 24
+  })), withClose && React.createElement(S.IconCloseWrapper, {
+    onClick: onCloseClick,
+    customColorText: customColorText,
+    color: color
+  }, React.createElement(Icon, {
+    component: React.createElement(CloseM, null)
+  })))));
+};
+
+export default Toast;

package/dist/Toast/Toast.styles.d.ts

@@ -0,0 +1,69 @@
+import { Keyframes } from 'styled-components';
+import * as React from 'react';
+import 'animate.css';
+export declare const openingAnimation: () => Keyframes;
+export declare const closingAnimation: () => Keyframes;
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    colorIcon?: "blue" | "grey" | "yellow" | "white" | "black" | undefined;
+    customColorIcon?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+}, never>;
+export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const IconExpanderWrapper: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+    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, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {
+    visible?: boolean | undefined;
+    description?: React.ReactNode;
+}, never>;
+export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, 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 Container: import("styled-components").StyledComponent<"div", any, {
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+    visible?: React.ReactNode | boolean;
+    customColor?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    onCloseClick?: (() => void) | undefined;
+    expandedContent?: React.ReactNode | boolean;
+    expander?: React.ReactNode | boolean;
+    withClose?: React.ReactNode | boolean;
+}, never>;
+export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+}, never>;
+export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {
+    customColorText?: "blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet" | undefined;
+    color?: "blue" | "grey" | "red" | "green" | "yellow" | undefined;
+    button?: React.ReactNode | boolean;
+    expandedContent?: React.ReactNode | boolean;
+}, never>;

package/dist/Toast/Toast.styles.js

@@ -0,0 +1,181 @@
+import styled, { keyframes } from 'styled-components';
+import 'animate.css';
+
+var getColorIcon = function getColorIcon(props) {
+  switch (props.colorIcon) {
+    case 'white':
+      return props.theme.palette.white;
+
+    case 'grey':
+      return props.theme.palette['grey-600'];
+
+    case 'black':
+      return props.theme.palette['grey-800'];
+
+    default:
+      return props.theme.palette['blue-600'];
+  }
+};
+
+var getColorText = function getColorText(props) {
+  switch (props.color) {
+    case 'red':
+      return props.theme.palette.white;
+
+    case 'green':
+      return props.theme.palette.white;
+
+    case 'yellow':
+      return props.theme.palette['grey-800'];
+
+    default:
+      return props.theme.palette['grey-600'];
+  }
+};
+
+var getColorBackground = function getColorBackground(props) {
+  switch (props.color) {
+    case 'grey':
+      return props.theme.palette.white;
+
+    case 'blue':
+      return props.theme.palette['blue-050'];
+
+    case 'red':
+      return props.theme.palette['red-500'];
+
+    default:
+      return props.theme.palette["".concat(props.color, "-600")];
+  }
+};
+
+var getWidth = function getWidth(props) {
+  if (props.expandedContent || props.expander && props.withClose) {
+    return '420px';
+  }
+
+  return '354px';
+};
+
+export 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: "q5tn0-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 0;"]);
+export var AllContent = styled.div.withConfig({
+  displayName: "Toaststyles__AllContent",
+  componentId: "q5tn0-1"
+})(["display:flex;color:inherit;"]);
+export var Text = styled.div.withConfig({
+  displayName: "Toaststyles__Text",
+  componentId: "q5tn0-2"
+})(["display:flex;color:", ";"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});
+export var IconWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconWrapper",
+  componentId: "q5tn0-3"
+})(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
+  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
+}, function (props) {
+  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
+});
+export var IconCloseWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconCloseWrapper",
+  componentId: "q5tn0-4"
+})(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";}"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});
+export var IconExpanderWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconExpanderWrapper",
+  componentId: "q5tn0-5"
+})(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+}, function (props) {
+  return props.expanded ? '180deg' : '0deg';
+});
+export var ButtonWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__ButtonWrapper",
+  componentId: "q5tn0-6"
+})(["padding:6px 8px 0 8px;display:flex;"]);
+export var FirstButtonWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__FirstButtonWrapper",
+  componentId: "q5tn0-7"
+})(["margin-right:8px;"]);
+export var NumberWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__NumberWrapper",
+  componentId: "q5tn0-8"
+})(["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;color:", ";}"], function (props) {
+  return props.theme.palette['grey-400'];
+}, function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});
+export var ListWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__ListWrapper",
+  componentId: "q5tn0-9"
+})(["display:flex;margin-top:", ";"], function (props) {
+  return !props.description ? '10px' : '0';
+});
+export var IconOrderWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__IconOrderWrapper",
+  componentId: "q5tn0-10"
+})(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+}, function (props) {
+  return props.theme.palette['blue-600'];
+});
+export var OrderWrapper = styled.div.withConfig({
+  displayName: "Toaststyles__OrderWrapper",
+  componentId: "q5tn0-11"
+})(["display:flex;color:", ";&:hover{", "{display:block;}", "{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;color:", ";}}"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+}, IconOrderWrapper, NumberWrapper, function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+}, function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});
+export var Wrapper = styled.div.withConfig({
+  displayName: "Toaststyles__Wrapper",
+  componentId: "q5tn0-12"
+})(["color:", ";"], function (props) {
+  return props.theme.palette['grey-050'];
+});
+export var AnimationContainer = styled.div.withConfig({
+  displayName: "Toaststyles__AnimationContainer",
+  componentId: "q5tn0-13"
+})(["animation:", " 0.5s ease-in-out 0s 1;"], function (props) {
+  return props.show ? openingAnimation() : closingAnimation();
+});
+export var Container = styled.div.withConfig({
+  displayName: "Toaststyles__Container",
+  componentId: "q5tn0-14"
+})(["width:", ";align-items:center;justify-content:center;background-color:", ";border-radius:4px;box-shadow:", ";"], function (props) {
+  return props.expander && props.expandedContent && props.withClose ? '460px' : getWidth(props);
+}, function (props) {
+  return props.customColor ? props.theme.palette["".concat(props.customColor, "-600")] : getColorBackground(props);
+}, function (props) {
+  return props.color ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-200"]) : 'none';
+});
+export var WrapperSectionMessage = styled.div.withConfig({
+  displayName: "Toaststyles__WrapperSectionMessage",
+  componentId: "q5tn0-15"
+})(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
+export var AlertMessage = styled.span.withConfig({
+  displayName: "Toaststyles__AlertMessage",
+  componentId: "q5tn0-16"
+})(["font-size:16px;line-height:1.25;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});
+export var AlertDescription = styled.span.withConfig({
+  displayName: "Toaststyles__AlertDescription",
+  componentId: "q5tn0-17"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding:", ";margin-top:2px;color:", ";"], function (props) {
+  return props.button || props.expandedContent ? ' 0 3px 10px 0' : '0px';
+}, function (props) {
+  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+});

package/dist/Toast/Toast.types.d.ts

@@ -0,0 +1,24 @@
+import { AlertProps } from 'antd/lib/alert';
+import * as React from 'react';
+export declare type ToastType = 'success' | 'warning' | 'negative' | 'informative' | 'neutral';
+export declare type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
+export declare type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'blue';
+export declare type ColorIconType = 'white' | 'grey' | 'black' | 'yellow' | 'blue';
+export interface Props extends Omit<AlertProps, 'type' | 'message'> {
+    message?: React.ReactNode;
+    type: string | ToastType;
+    customColor?: CustomColorType;
+    customColorText?: CustomColorType;
+    customColorIcon?: CustomColorType;
+    color?: ColorType;
+    colorIcon?: ColorIconType;
+    expander?: boolean | React.ReactNode;
+    expandedContent?: React.ReactNode;
+    withClose?: React.ReactNode;
+    customIcon?: React.ReactElement;
+    button?: React.ReactNode;
+    expanded?: boolean;
+    onExpand?: (isExpanded: boolean) => void;
+    onCloseClick?: () => void;
+    show?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.3.20",
+  "version": "0.3.24",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,17 +32,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.13.65",
-    "@synerise/ds-icon": "^0.44.11",
-    "@synerise/ds-typography": "^0.11.8",
-    "@synerise/ds-unordered-list": "^0.1.43"
+    "@synerise/ds-button": "^0.15.0",
+    "@synerise/ds-icon": "^0.45.2",
+    "@synerise/ds-typography": "^0.11.9",
+    "@synerise/ds-unordered-list": "^0.1.47",
+    "animate.css": "^4.1.1",
+    "react-animate-height": "^2.0.23",
+    "react-mount-animation": "0.0.9"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.18.0"
+    "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "caf34e68324b104ff3665d9383e5aabccdb9d522"
+  "gitHead": "daaf50ad62081d7ad77eb4ac65100173df77c731"
 }