@synerise/ds-alert 0.3.25 → 0.4.3

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.4.2...@synerise/ds-alert@0.4.3) (2021-12-22)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [0.4.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.4.1...@synerise/ds-alert@0.4.2) (2021-11-22)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [0.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.25...@synerise/ds-alert@0.4.1) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.25...@synerise/ds-alert@0.4.0) (2021-11-09)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
 ## [0.3.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.24...@synerise/ds-alert@0.3.25) (2021-11-05)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/dist/Alert.js

@@ -2,17 +2,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from 'react';
 import "./style/index.css";
-import { Check2M, Close2M, NotificationsM } from '@synerise/ds-icon/dist/icons';
-import Icon from '@synerise/ds-icon';
+import Icon, { Check2M, Close2M, NotificationsM } from '@synerise/ds-icon';
 import * as S from './Alert.styles';
 import InlineAlert from './InlineAlert/InlineAlert';
 var ICONS = {
-  success: React.createElement(Check2M, null),
-  warning: React.createElement(Check2M, null),
-  error: React.createElement(Close2M, null),
-  info: React.createElement(NotificationsM, null)
+  success: /*#__PURE__*/React.createElement(Check2M, null),
+  warning: /*#__PURE__*/React.createElement(Check2M, null),
+  error: /*#__PURE__*/React.createElement(Close2M, null),
+  info: /*#__PURE__*/React.createElement(NotificationsM, null)
 };
-var DEFAULT_ICON = React.createElement(Check2M, null);
+var DEFAULT_ICON = /*#__PURE__*/React.createElement(Check2M, null);
 
 var Alert = function Alert(props) {
   var icon = props.icon,
@@ -22,7 +21,7 @@ var Alert = function Alert(props) {
       showMoreLabel = props.showMoreLabel,
       onShowMore = props.onShowMore;
   var renderMessage = React.useMemo(function () {
-    return React.createElement(S.AlertContent, null, message && React.createElement(S.AlertMessage, null, message), description && React.createElement(S.AlertDescription, null, description), onShowMore && showMoreLabel && React.createElement(S.AlertShowMore, {
+    return /*#__PURE__*/React.createElement(S.AlertContent, null, message && /*#__PURE__*/React.createElement(S.AlertMessage, null, message), description && /*#__PURE__*/React.createElement(S.AlertDescription, null, description), onShowMore && showMoreLabel && /*#__PURE__*/React.createElement(S.AlertShowMore, {
       onClick: onShowMore
     }, showMoreLabel));
   }, [message, description, showMoreLabel, onShowMore]);
@@ -31,9 +30,9 @@ var Alert = function Alert(props) {
     if (ICONS[type]) return ICONS[type];
     return DEFAULT_ICON;
   }, [icon, type]);
-  return React.createElement(S.AntdAlert, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(S.AntdAlert, _extends({}, props, {
     className: "ds-alert",
-    icon: React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
       component: renderIcon
     }),
     message: renderMessage,

package/dist/Alert.styles.js

@@ -7,16 +7,16 @@ var getColor = function getColor(props) {
   var color = props.color,
       theme = props.theme;
   var hue = DARKER_COLORS.includes(color) ? '700' : '600';
-  return theme.palette["".concat(color, "-").concat(hue)];
+  return theme.palette[color + "-" + hue];
 };
 
 export var AntdAlert = styled(function (props) {
-  return React.createElement(Alert, props);
+  return /*#__PURE__*/React.createElement(Alert, props);
 }).withConfig({
   displayName: "Alertstyles__AntdAlert",
   componentId: "k5v82n-0"
 })(["", ";", ";", ";"], function (props) {
-  return Boolean(props.color) && css(["&&&{box-shadow:0 0 0 1px ", ";background-color:", ";color:", ";.ant-alert-icon{svg{color:", ";fill:", ";}}}"], props.theme.palette["".concat(props.color, "-600")], props.theme.palette["".concat(props.color, "-050")], getColor(props), getColor(props), getColor(props));
+  return Boolean(props.color) && css(["&&&{box-shadow:0 0 0 1px ", ";background-color:", ";color:", ";.ant-alert-icon{svg{color:", ";fill:", ";}}}"], props.theme.palette[props.color + "-600"], props.theme.palette[props.color + "-050"], getColor(props), getColor(props), getColor(props));
 }, function (props) {
   return (props.mode === 'background' || props.mode === 'clear' || !props.mode) && css(["&&&{box-shadow:none;}"]);
 }, function (props) {

package/dist/Alert.types.js

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

package/dist/AlertInfo/AlertInfo.js

@@ -1,20 +1,14 @@
-var _mapSizeToPx;
+var _excluded = ["IconComponent"];
 
-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; }
+var _mapSizeToPx;
 
 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; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import * as React from 'react';
-import Icon from '@synerise/ds-icon';
-import CheckL from '@synerise/ds-icon/dist/icons/L/CheckL';
-import WarningL from '@synerise/ds-icon/dist/icons/L/WarningL';
-import WarningXl from '@synerise/ds-icon/dist/icons/XL/WarningXl';
-import CheckXl from '@synerise/ds-icon/dist/icons/XL/CheckXl';
+import Icon, { CheckL, WarningL, WarningXl, CheckXl } from '@synerise/ds-icon';
 import { AlertSize } from './AlertInfo.types';
 import * as S from './AlertInfo.styles';
-var mapSizeToPx = (_mapSizeToPx = {}, _defineProperty(_mapSizeToPx, AlertSize.SMALL, 48), _defineProperty(_mapSizeToPx, AlertSize.MEDIUM, 96), _mapSizeToPx);
+var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[AlertSize.SMALL] = 48, _mapSizeToPx[AlertSize.MEDIUM] = 96, _mapSizeToPx);
 
 var AlertInfo = function AlertInfo(_ref) {
   var _ref$size = _ref.size,
@@ -44,21 +38,21 @@ var AlertInfo = function AlertInfo(_ref) {
 
   var _mapTypeToStatus$type = mapTypeToStatus[type],
       IconComponent = _mapTypeToStatus$type.IconComponent,
-      iconContainerStyles = _objectWithoutProperties(_mapTypeToStatus$type, ["IconComponent"]);
+      iconContainerStyles = _objectWithoutPropertiesLoose(_mapTypeToStatus$type, _excluded);
 
-  return React.createElement(S.AlertWrapper, {
+  return /*#__PURE__*/React.createElement(S.AlertWrapper, {
     mode: mode,
     className: "ds-alert-info",
     labelPosition: labelPosition
-  }, React.createElement(S.AlertIconContainer, null, React.createElement(S.StatusIconContainer, iconContainerStyles, React.createElement(Icon, {
-    component: React.createElement(IconComponent, null),
+  }, /*#__PURE__*/React.createElement(S.AlertIconContainer, null, /*#__PURE__*/React.createElement(S.StatusIconContainer, iconContainerStyles, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(IconComponent, null),
     size: mapSizeToPx[size]
-  }))), text && React.createElement(S.HeaderWrapper, {
+  }))), text && /*#__PURE__*/React.createElement(S.HeaderWrapper, {
     size: size,
     fontSize: fontSize
-  }, text), React.createElement(S.TextWrapper, {
+  }, text), /*#__PURE__*/React.createElement(S.TextWrapper, {
     labelPosition: labelPosition
-  }, label), button && React.createElement(S.ButtonWrapper, null, button));
+  }, label), button && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, button));
 };
 
 export default AlertInfo;

package/dist/AlertInfo/AlertInfo.styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { IconContainer } from '@synerise/ds-icon/dist/Icon.styles';
+import { IconContainer } from '@synerise/ds-icon';
 import { AlertSize, FontSize } from './AlertInfo.types';
 var FONT_SIZE_DEFAULT = 14;
 var mapElementsPosition = {

package/dist/AlertInfo/AlertInfo.types.js

@@ -1,7 +1,5 @@
 var _IconSize, _FontSize;
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 export var AlertSize;
 
 (function (AlertSize) {
@@ -9,5 +7,5 @@ export var AlertSize;
   AlertSize["MEDIUM"] = "medium";
 })(AlertSize || (AlertSize = {}));
 
-export var IconSize = (_IconSize = {}, _defineProperty(_IconSize, AlertSize.SMALL, 48), _defineProperty(_IconSize, AlertSize.MEDIUM, 96), _IconSize);
-export var FontSize = (_FontSize = {}, _defineProperty(_FontSize, AlertSize.SMALL, 14), _defineProperty(_FontSize, AlertSize.MEDIUM, 18), _FontSize);
+export var IconSize = (_IconSize = {}, _IconSize[AlertSize.SMALL] = 48, _IconSize[AlertSize.MEDIUM] = 96, _IconSize);
+export var FontSize = (_FontSize = {}, _FontSize[AlertSize.SMALL] = 14, _FontSize[AlertSize.MEDIUM] = 18, _FontSize);

package/dist/BroadcastBar/BroadcastBar.js

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

package/dist/BroadcastBar/BroadcastBar.styles.js

@@ -6,7 +6,7 @@ var getColorBackground = function getColorBackground(props) {
     return props.theme.palette['red-500'];
   }
 
-  return props.theme.palette["".concat(props.color, "-600")];
+  return props.theme.palette[props.color + "-600"];
 };
 
 var getColorIcon = function getColorIcon(props) {

package/dist/BroadcastBar/BroadcastBar.types.js

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

package/dist/ColorSemantic/AlertSemanticColor.js

@@ -1,21 +1,17 @@
-import Icon from '@synerise/ds-icon';
-import { WarningFillM, InfoFillM, Check3M, HelpFillM } from '@synerise/ds-icon/dist/icons';
 import * as React from 'react';
-import UserCheckM from '@synerise/ds-icon/dist/icons/UserCheckM';
-import UpdateDataM from '@synerise/ds-icon/dist/icons/UpdateDataM';
-import NotificationsReceiveM from '@synerise/ds-icon/dist/icons/NotificationsReceiveM';
+import Icon, { UserCheckM, UpdateDataM, WarningFillM, InfoFillM, Check3M, HelpFillM, NotificationsReceiveM } from '@synerise/ds-icon';
 import * as S from './AlertSemanticColor.styles';
 var ICONS = {
-  positive: React.createElement(Check3M, null),
-  notice: React.createElement(WarningFillM, null),
-  negative: React.createElement(WarningFillM, null),
-  informative: React.createElement(InfoFillM, null),
-  neutral: React.createElement(HelpFillM, null),
-  supply: React.createElement(UserCheckM, null),
-  service: React.createElement(UpdateDataM, null),
-  entity: React.createElement(NotificationsReceiveM, null)
+  positive: /*#__PURE__*/React.createElement(Check3M, null),
+  notice: /*#__PURE__*/React.createElement(WarningFillM, null),
+  negative: /*#__PURE__*/React.createElement(WarningFillM, null),
+  informative: /*#__PURE__*/React.createElement(InfoFillM, null),
+  neutral: /*#__PURE__*/React.createElement(HelpFillM, null),
+  supply: /*#__PURE__*/React.createElement(UserCheckM, null),
+  service: /*#__PURE__*/React.createElement(UpdateDataM, null),
+  entity: /*#__PURE__*/React.createElement(NotificationsReceiveM, null)
 };
-var DEFAULT_ICON = React.createElement(WarningFillM, null);
+var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);
 
 var AlertSemanticColor = function AlertSemanticColor(_ref) {
   var icon = _ref.icon,
@@ -27,13 +23,13 @@ var AlertSemanticColor = function AlertSemanticColor(_ref) {
     if (ICONS[type]) return ICONS[type];
     return DEFAULT_ICON;
   }, [icon, type]);
-  return React.createElement(S.Container, {
+  return /*#__PURE__*/React.createElement(S.Container, {
     mode: mode,
     color: color
-  }, React.createElement(S.IconWrapper, {
+  }, /*#__PURE__*/React.createElement(S.IconWrapper, {
     mode: mode,
     color: color
-  }, React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     component: renderIcon
   })));
 };

package/dist/ColorSemantic/AlertSemanticColor.styles.js

@@ -5,16 +5,16 @@ var getAlertIconColor = function getAlertIconColor(props) {
     return props.theme.palette.white;
   }
 
-  return props.theme.palette["".concat(props.color, "-600")];
+  return props.theme.palette[props.color + "-600"];
 };
 
 var getAlertColor = function getAlertColor(props) {
   if (props.mode === 'background' || props.mode === 'shadow') {
-    return props.theme.palette["".concat(props.color, "-600")];
+    return props.theme.palette[props.color + "-600"];
   }
 
   if (props.mode === 'background-outline') {
-    return props.theme.palette["".concat(props.color, "-050")];
+    return props.theme.palette[props.color + "-050"];
   }
 
   return props.theme.palette.white;
@@ -28,9 +28,9 @@ export var Container = styled.div.withConfig({
   displayName: "AlertSemanticColorstyles__Container",
   componentId: "sc-1rxl2y2-1"
 })(["width:100px;height:100px;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-radius:4px;-webkit-box-shadow:", ";box-shadow:", ";"], getAlertColor, function (props) {
-  return props.mode === 'background-outline' ? props.theme.palette["".concat(props.color, "-200")] : 'none';
+  return props.mode === 'background-outline' ? props.theme.palette[props.color + "-200"] : 'none';
 }, function (props) {
-  return props.mode === 'shadow' ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-300"]) : 'none';
+  return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
 }, function (props) {
-  return props.mode === 'shadow' ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-300"]) : 'none';
+  return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
 });

package/dist/ColorSemantic/AlertSemanticColor.types.js

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

package/dist/IconAlert/IconAlert.js

@@ -1,18 +1,17 @@
-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); }
+var _excluded = ["type", "iconAlert", "message", "withLink", "withEmphasis", "hoverButton", "disabled"];
 
-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 _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 _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 Icon, { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon';
 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)
+  success: /*#__PURE__*/React.createElement(Check2M, null),
+  alert: /*#__PURE__*/React.createElement(WarningFillM, null),
+  warning: /*#__PURE__*/React.createElement(WarningFillM, null),
+  info: /*#__PURE__*/React.createElement(InfoM, null)
 };
 
 var IconAlert = function IconAlert(_ref) {
@@ -24,19 +23,19 @@ var IconAlert = function IconAlert(_ref) {
       withEmphasis = _ref.withEmphasis,
       hoverButton = _ref.hoverButton,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, ["type", "iconAlert", "message", "withLink", "withEmphasis", "hoverButton", "disabled"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var icon = React.useMemo(function () {
     return ICONS[type];
   }, [type]);
-  return React.createElement(S.IconAlertWrapper, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(S.IconAlertWrapper, _extends({}, rest, {
     type: type,
     disabled: disabled,
     hoverButton: hoverButton,
     className: "ds-inline-alert"
-  }), iconAlert && React.createElement(Icon, {
+  }), iconAlert && /*#__PURE__*/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)));
+  }), message && /*#__PURE__*/React.createElement(S.Message, null, message, withLink && /*#__PURE__*/React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && /*#__PURE__*/React.createElement(S.EmphasisWrapper, null, withEmphasis)));
 };
 
 export default IconAlert;

package/dist/IconAlert/IconAlert.types.js

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

package/dist/InlineAlert/InlineAlert.js

@@ -1,12 +1,11 @@
-import { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon/dist/icons';
 import * as React from 'react';
-import Icon from '@synerise/ds-icon';
+import Icon, { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon';
 import * as S from './InlineAlert.styles';
 var ICONS = {
-  success: React.createElement(Check2M, null),
-  alert: React.createElement(WarningFillM, null),
-  warning: React.createElement(WarningFillM, null),
-  info: React.createElement(InfoM, null)
+  success: /*#__PURE__*/React.createElement(Check2M, null),
+  alert: /*#__PURE__*/React.createElement(WarningFillM, null),
+  warning: /*#__PURE__*/React.createElement(WarningFillM, null),
+  info: /*#__PURE__*/React.createElement(InfoM, null)
 };
 
 var InlineAlert = function InlineAlert(_ref) {
@@ -16,12 +15,12 @@ var InlineAlert = function InlineAlert(_ref) {
   var icon = React.useMemo(function () {
     return ICONS[type];
   }, [type]);
-  return React.createElement(S.InlineAlertWrapper, {
+  return /*#__PURE__*/React.createElement(S.InlineAlertWrapper, {
     type: type,
     className: "ds-inline-alert"
-  }, React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     component: icon
-  }), React.createElement(S.Message, null, message));
+  }), /*#__PURE__*/React.createElement(S.Message, null, message));
 };
 
 export default InlineAlert;

package/dist/InlineAlert/InlineAlert.types.js

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

package/dist/SectionMessage/SectionMessage.js

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { CloseM, WarningFillM, UserAddM, Check3M, HelpFillM, UserUpM, UpdateDataM, NotificationsReceiveM } from '@synerise/ds-icon/dist/icons';
+import Icon, { CloseM, WarningFillM, UserAddM, Check3M, HelpFillM, UserUpM, UpdateDataM, NotificationsReceiveM } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
-import Icon from '@synerise/ds-icon';
 import * as S from './SectionMessage.styles';
 var ICONS = {
-  positive: React.createElement(Check3M, null),
-  notice: React.createElement(WarningFillM, null),
-  negative: React.createElement(WarningFillM, null),
-  neutral: React.createElement(HelpFillM, null),
-  supply: React.createElement(UserUpM, null),
-  service: React.createElement(UpdateDataM, null),
-  entity: React.createElement(NotificationsReceiveM, null)
+  positive: /*#__PURE__*/React.createElement(Check3M, null),
+  notice: /*#__PURE__*/React.createElement(WarningFillM, null),
+  negative: /*#__PURE__*/React.createElement(WarningFillM, null),
+  neutral: /*#__PURE__*/React.createElement(HelpFillM, null),
+  supply: /*#__PURE__*/React.createElement(UserUpM, null),
+  service: /*#__PURE__*/React.createElement(UpdateDataM, null),
+  entity: /*#__PURE__*/React.createElement(NotificationsReceiveM, null)
 };
-var DEFAULT_ICON = React.createElement(WarningFillM, null);
+var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);
 
 var SectionMessage = function SectionMessage(_ref) {
   var icon = _ref.icon,
@@ -33,9 +32,9 @@ var SectionMessage = function SectionMessage(_ref) {
       customIcon = _ref.customIcon,
       textButton = _ref.textButton;
   var renderMessage = React.useMemo(function () {
-    return React.createElement(S.AlertContent, {
+    return /*#__PURE__*/React.createElement(S.AlertContent, {
       withLink: withLink
-    }, message && React.createElement(S.AlertMessage, null, message), React.createElement(S.Text, null, description && React.createElement(S.AlertDescription, null, description), withLink && React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && React.createElement(S.EmphasisWrapper, null, withEmphasis)), onShowMore && showMoreLabel && React.createElement(S.AlertShowMore, {
+    }, message && /*#__PURE__*/React.createElement(S.AlertMessage, null, message), /*#__PURE__*/React.createElement(S.Text, null, description && /*#__PURE__*/React.createElement(S.AlertDescription, null, description), withLink && /*#__PURE__*/React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && /*#__PURE__*/React.createElement(S.EmphasisWrapper, null, withEmphasis)), onShowMore && showMoreLabel && /*#__PURE__*/React.createElement(S.AlertShowMore, {
       onClick: onShowMore
     }, showMoreLabel), moreButtons, unorderedList && !moreButtons && unorderedList);
   }, [message, description, showMoreLabel, onShowMore, moreButtons, withEmphasis, withLink, unorderedList]);
@@ -44,21 +43,21 @@ var SectionMessage = function SectionMessage(_ref) {
     if (ICONS[type]) return ICONS[type];
     return DEFAULT_ICON;
   }, [icon, type]);
-  return React.createElement(S.Container, {
+  return /*#__PURE__*/React.createElement(S.Container, {
     color: color,
     customColor: customColor
-  }, React.createElement(S.WrapperSectionMessage, null, React.createElement(S.AllContent, null, React.createElement(S.IconWrapper, {
+  }, /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
     color: color,
     customColorIcon: customColorIcon
-  }, customIcon || React.createElement(Icon, {
+  }, customIcon || /*#__PURE__*/React.createElement(Icon, {
     component: renderIcon
-  })), renderMessage), React.createElement(S.ButtonWrapper, null, newClient && React.createElement(Button, {
+  })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, newClient && /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
     mode: "icon-label"
-  }, React.createElement(Icon, {
-    component: React.createElement(UserAddM, null)
-  }), textButton), withClose && React.createElement(S.IconCloseWrapper, null, React.createElement(Icon, {
-    component: React.createElement(CloseM, null)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(UserAddM, null)
+  }), textButton), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
   })))));
 };
 

package/dist/SectionMessage/SectionMessage.styles.js

@@ -17,9 +17,9 @@ export var IconWrapper = styled.div.withConfig({
   displayName: "SectionMessagestyles__IconWrapper",
   componentId: "sc-1kuq4h0-3"
 })(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
 }, function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
 });
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "SectionMessagestyles__IconCloseWrapper",
@@ -75,11 +75,11 @@ export var Container = styled.div.withConfig({
   displayName: "SectionMessagestyles__Container",
   componentId: "sc-1kuq4h0-12"
 })(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-050")] : props.theme.palette["".concat(props.color, "-050")];
+  return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
 }, function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-200")] : props.theme.palette["".concat(props.color, "-200")];
+  return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
 }, function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "SectionMessagestyles__WrapperSectionMessage",

package/dist/SectionMessage/SectionMessage.types.js

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

package/dist/Toast/Toast.js

@@ -1,15 +1,14 @@
 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 Icon, { CloseM, WarningFillM, Check3M, HelpFillM, InfoFillM, AngleDownS } 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)
+  success: /*#__PURE__*/React.createElement(Check3M, null),
+  warning: /*#__PURE__*/React.createElement(WarningFillM, null),
+  negative: /*#__PURE__*/React.createElement(WarningFillM, null),
+  neutral: /*#__PURE__*/React.createElement(HelpFillM, null),
+  informative: /*#__PURE__*/React.createElement(InfoFillM, null)
 };
-var DEFAULT_ICON = React.createElement(WarningFillM, null);
+var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);
 
 var Toast = function Toast(_ref) {
   var icon = _ref.icon,
@@ -31,18 +30,18 @@ var Toast = function Toast(_ref) {
       show = _ref.show,
       button = _ref.button;
   var renderMessage = React.useMemo(function () {
-    return React.createElement(S.AlertContent, null, message && React.createElement(S.AlertMessage, {
+    return /*#__PURE__*/React.createElement(S.AlertContent, null, message && /*#__PURE__*/React.createElement(S.AlertMessage, {
       customColorText: customColorText,
       color: color
-    }, message), React.createElement(S.Text, {
+    }, message), /*#__PURE__*/React.createElement(S.Text, {
       customColorText: customColorText,
       color: color
-    }, description && React.createElement(S.AlertDescription, {
+    }, description && /*#__PURE__*/React.createElement(S.AlertDescription, {
       expandedContent: expandedContent,
       button: button,
       customColorText: customColorText,
       color: color
-    }, description)), expandedContent && expanded && React.createElement(S.ListWrapper, {
+    }, description)), expandedContent && expanded && /*#__PURE__*/React.createElement(S.ListWrapper, {
       description: description,
       visible: expanded
     }, expandedContent), button);
@@ -55,7 +54,7 @@ var Toast = function Toast(_ref) {
   var expandContent = React.useCallback(function () {
     onExpand && onExpand(!expanded);
   }, [onExpand, expanded]);
-  return React.createElement(S.Container, {
+  return /*#__PURE__*/React.createElement(S.Container, {
     expander: expander,
     expandedContent: expandedContent,
     withClose: withClose,
@@ -63,25 +62,25 @@ var Toast = function Toast(_ref) {
     onCloseClick: onCloseClick,
     color: color,
     customColor: customColor
-  }, React.createElement(S.WrapperSectionMessage, null, React.createElement(S.AllContent, null, React.createElement(S.IconWrapper, {
+  }, /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
     colorIcon: colorIcon,
     customColorIcon: customColorIcon
-  }, customIcon || React.createElement(Icon, {
+  }, customIcon || /*#__PURE__*/React.createElement(Icon, {
     component: renderIcon
-  })), renderMessage), React.createElement(S.ButtonWrapper, null, expander && React.createElement(S.IconExpanderWrapper, {
+  })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, expander && /*#__PURE__*/React.createElement(S.IconExpanderWrapper, {
     onClick: expandContent,
     expanded: expanded,
     customColorText: customColorText,
     color: color
-  }, React.createElement(Icon, {
-    component: React.createElement(AngleDownS, null),
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleDownS, null),
     size: 24
-  })), withClose && React.createElement(S.IconCloseWrapper, {
+  })), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
     onClick: onCloseClick,
     customColorText: customColorText,
     color: color
-  }, React.createElement(Icon, {
-    component: React.createElement(CloseM, null)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
   })))));
 };
 

package/dist/Toast/Toast.styles.js

@@ -45,7 +45,7 @@ var getColorBackground = function getColorBackground(props) {
       return props.theme.palette['red-500'];
 
     default:
-      return props.theme.palette["".concat(props.color, "-600")];
+      return props.theme.palette[props.color + "-600"];
   }
 };
 
@@ -75,27 +75,27 @@ 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);
+  return props.customColorText ? props.theme.palette[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;
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
 }, function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
+  return props.customColorIcon ? props.theme.palette[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);
+  return props.customColorText ? props.theme.palette[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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.expanded ? '180deg' : '0deg';
 });
@@ -113,7 +113,7 @@ export var NumberWrapper = styled.div.withConfig({
 })(["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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var ListWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ListWrapper",
@@ -125,7 +125,7 @@ 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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.theme.palette['blue-600'];
 });
@@ -133,11 +133,11 @@ 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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, IconOrderWrapper, NumberWrapper, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var Wrapper = styled.div.withConfig({
   displayName: "Toaststyles__Wrapper",
@@ -157,9 +157,9 @@ export var Container = styled.div.withConfig({
 })(["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);
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorBackground(props);
 }, function (props) {
-  return props.color ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-200"]) : 'none';
+  return props.color ? "0px 16px 32px 5px " + props.theme.palette["grey-200"] : 'none';
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "Toaststyles__WrapperSectionMessage",
@@ -169,7 +169,7 @@ 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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var AlertDescription = styled.span.withConfig({
   displayName: "Toaststyles__AlertDescription",
@@ -177,5 +177,5 @@ export var AlertDescription = styled.span.withConfig({
 })(["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);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });

package/dist/Toast/Toast.types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.3.25",
+  "version": "0.4.3",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.15.0",
-    "@synerise/ds-icon": "^0.45.2",
-    "@synerise/ds-typography": "^0.11.9",
-    "@synerise/ds-unordered-list": "^0.1.48",
+    "@synerise/ds-button": "^0.16.3",
+    "@synerise/ds-icon": "^0.46.2",
+    "@synerise/ds-typography": "^0.12.2",
+    "@synerise/ds-unordered-list": "^0.2.3",
     "animate.css": "^4.1.1",
     "react-animate-height": "^2.0.23",
     "react-mount-animation": "0.0.9"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "bf865b6d1967c42effb68dc794f34dd18ddebe27"
+  "gitHead": "a89cd14cdbe25b06949b3b9763e58a080111c160"
 }