@synerise/ds-alert 1.1.9 → 1.1.11

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@1.1.10...@synerise/ds-alert@1.1.11) (2025-07-24)
+
+
+### Bug Fixes
+
+* **result:** fix styles to match figma ([1b17374](https://github.com/Synerise/synerise-design/commit/1b173747daf73f5a768241a3116ba7b3c7c90eb1))
+
+
+
+
+
+## [1.1.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@1.1.9...@synerise/ds-alert@1.1.10) (2025-07-17)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
 ## [1.1.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@1.1.8...@synerise/ds-alert@1.1.9) (2025-07-15)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/dist/Alert.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { type AlertSubComponents, type Props } from './Alert.types';
 import './style/index.less';
+/**
+ * @deprecated use `@synerise/ds-section-message` or `@synerise/ds-toast`  instead
+ */
 declare const Alert: React.FC<Props> & AlertSubComponents;
 export default Alert;

package/dist/Alert.js

@@ -11,6 +11,10 @@ var ICONS = {
   info: /*#__PURE__*/React.createElement(NotificationsM, null)
 };
 var DEFAULT_ICON = /*#__PURE__*/React.createElement(Check2M, null);
+
+/**
+ * @deprecated use `@synerise/ds-section-message` or `@synerise/ds-toast`  instead
+ */
 var Alert = function Alert(props) {
   var icon = props.icon,
     type = props.type,

package/dist/Alert.styles.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { type ThemeProps } from 'styled-components';
 import { type Props } from './Alert.types';
 export declare const AntdAlert: import("styled-components").StyledComponent<(props: Props & {
     message: React.ReactNode;
-}) => React.JSX.Element, any, {}, never>;
+}) => React.JSX.Element, any, ThemeProps<Props>, never>;
 export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/AlertInfo/AlertInfo.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { type AlertInfoProps } from './AlertInfo.types';
+/**
+ * @deprecated use `@synerise/ds-result` instead
+ */
 declare const AlertInfo: React.FC<AlertInfoProps>;
 export default AlertInfo;

package/dist/AlertInfo/AlertInfo.js

@@ -6,6 +6,10 @@ import Icon, { CheckL, CheckXl, WarningL, WarningXl } from '@synerise/ds-icon';
 import * as S from './AlertInfo.styles';
 import { AlertSize } from './AlertInfo.types';
 var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[AlertSize.SMALL] = 48, _mapSizeToPx[AlertSize.MEDIUM] = 96, _mapSizeToPx);
+
+/**
+ * @deprecated use `@synerise/ds-result` instead
+ */
 var AlertInfo = function AlertInfo(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? AlertSize.SMALL : _ref$size,

package/dist/AlertInfo/AlertInfo.styles.d.ts

@@ -1,18 +1,17 @@
 import { AlertSize } from './AlertInfo.types';
 export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {
-    labelPosition: 'bottom' | 'right';
+    labelPosition: "bottom" | "right";
 }, never>;
 export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
-    fontSize?: AlertSize | undefined;
-    size?: AlertSize | undefined;
+    fontSize?: AlertSize;
+    size?: AlertSize;
 }, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AlertWrapper: import("styled-components").StyledComponent<"div", any, {
-    labelPosition: 'bottom' | 'right';
-    mode?: "absolute" | undefined;
+    labelPosition: "bottom" | "right";
+    mode?: "absolute";
 }, never>;
 export declare const AlertIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StatusIconContainer: import("styled-components").StyledComponent<"div", any, {
     iconColor: string;
-    background: string;
 }, never>;

package/dist/AlertInfo/AlertInfo.styles.js

@@ -18,7 +18,7 @@ export var HeaderWrapper = styled.div.withConfig({
 })(["display:flex;line-height:16px;color:", ";font-size:", "px;font-weight:500;margin-top:", ";padding:", ";"], function (props) {
   return props.theme.palette['grey-800'];
 }, function (props) {
-  return FontSize[props.fontSize] || FONT_SIZE_DEFAULT;
+  return props.fontSize ? FontSize[props.fontSize] : FONT_SIZE_DEFAULT;
 }, function (props) {
   return props.size === AlertSize.SMALL ? '0px' : '30px';
 }, function (props) {
@@ -43,8 +43,6 @@ export var AlertIconContainer = styled.div.withConfig({
 export var StatusIconContainer = styled.div.withConfig({
   displayName: "AlertInfostyles__StatusIconContainer",
   componentId: "sc-a78l8a-5"
-})(["background-color:", ";width:40px;height:40px;border-radius:20px;text-align:center;display:flex;align-items:center;justify-content:center;margin:0 auto;&&{", "{fill:", ";}}"], function (props) {
-  return props.theme.palette[props.background];
-}, IconContainer, function (props) {
+})(["width:40px;height:40px;border-radius:20px;text-align:center;display:flex;align-items:center;justify-content:center;margin:0 auto;&&{", "{fill:", ";}}"], IconContainer, function (props) {
   return props.theme.palette[props.iconColor];
 });

package/dist/AlertInfo/AlertInfo.types.d.ts

@@ -1,14 +1,14 @@
-import type React from 'react';
+import type { ReactNode } from 'react';
 export type AlertInfoProps = {
     size?: AlertSize;
     fontSize?: AlertSize;
-    text?: string | React.ReactNode;
-    button?: string | React.ReactNode;
-    label?: string | React.ReactNode;
+    text?: ReactNode;
+    button?: ReactNode;
+    label?: ReactNode;
     labelPosition?: 'bottom' | 'right';
     mode?: 'absolute';
     customIcon?: React.ReactElement;
-    type: string | 'warning' | 'error' | 'success';
+    type: 'warning' | 'error' | 'success';
 };
 export declare enum AlertSize {
     SMALL = "small",

package/dist/BroadcastBar/BroadcastBar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type Props } from './BroadcastBar.types';
-declare const BroadcastBar: React.FC<Props>;
+declare const BroadcastBar: ({ icon, type, description, button, withEmphasis, withLink, color, withClose, textButton, onCloseClick, text, }: Props) => React.JSX.Element;
 export default BroadcastBar;

package/dist/BroadcastBar/BroadcastBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import Icon, { Check3M, CloseM, ErrorFillM, WarningFillM } from '@synerise/ds-icon';
 import * as S from './BroadcastBar.styles';
 var ICONS = {
@@ -19,7 +19,7 @@ var BroadcastBar = function BroadcastBar(_ref) {
     textButton = _ref.textButton,
     onCloseClick = _ref.onCloseClick,
     text = _ref.text;
-  var renderMessage = React.useMemo(function () {
+  var renderMessage = useMemo(function () {
     return /*#__PURE__*/React.createElement(S.AlertContent, {
       color: color,
       withLink: withLink
@@ -35,7 +35,7 @@ var BroadcastBar = function BroadcastBar(_ref) {
       emphasis: withEmphasis
     }, text), withEmphasis)));
   }, [description, withEmphasis, withLink, text, color]);
-  var renderIcon = React.useMemo(function () {
+  var renderIcon = useMemo(function () {
     if (icon) {
       return icon;
     }

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

@@ -3,47 +3,47 @@ import Button from '@synerise/ds-button';
 import { type ColorType } from './BroadcastBar.types';
 export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
     withLink?: React.ReactNode;
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const AllContent: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
     close?: boolean | React.ReactNode;
 }, never>;
 export declare const Text: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const BroadcastButton: import("styled-components").StyledComponent<typeof Button, any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const ButtonCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {
-    color?: ColorType | undefined;
+    color?: ColorType;
 }, 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?: ColorType | undefined;
+    color?: ColorType;
 }, never>;
 export declare const Link: import("styled-components").StyledComponent<"span", any, {}, never>;

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

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

package/dist/ColorSemantic/AlertSemanticColor.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { type Props } from './AlertSemanticColor.types';
+/**
+ * @deprecated
+ */
 declare const AlertSemanticColor: React.FC<Props>;
 export default AlertSemanticColor;

package/dist/ColorSemantic/AlertSemanticColor.js

@@ -12,6 +12,10 @@ var ICONS = {
   entity: /*#__PURE__*/React.createElement(NotificationsReceiveM, null)
 };
 var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);
+
+/**
+ * @deprecated
+ */
 var AlertSemanticColor = function AlertSemanticColor(_ref) {
   var icon = _ref.icon,
     type = _ref.type,

package/dist/ColorSemantic/AlertSemanticColor.styles.d.ts

@@ -1,9 +1,9 @@
 import { type ColorType, type ModeType } from './AlertSemanticColor.types';
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    mode?: ModeType | undefined;
-    color?: ColorType | undefined;
+    mode?: ModeType;
+    color?: ColorType;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    mode?: ModeType | undefined;
-    color?: ColorType | undefined;
+    mode?: ModeType;
+    color?: ColorType;
 }, never>;

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

@@ -2,8 +2,8 @@ import { type 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;
+    hoverButton?: boolean;
+    disabled?: boolean;
 }, 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/InlineAlert/InlineAlert.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { type InlineAlertProps } from './InlineAlert.types';
+/**
+ * @deprecated use `@synerise/ds-inline-alert` instead
+ */
 declare const InlineAlert: ({ type, message }: InlineAlertProps) => React.JSX.Element;
 export default InlineAlert;

package/dist/InlineAlert/InlineAlert.js

@@ -7,6 +7,10 @@ var ICONS = {
   warning: /*#__PURE__*/React.createElement(WarningFillM, null),
   info: /*#__PURE__*/React.createElement(InfoFillM, null)
 };
+
+/**
+ * @deprecated use `@synerise/ds-inline-alert` instead
+ */
 var InlineAlert = function InlineAlert(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'warning' : _ref$type,

package/dist/SectionMessage/SectionMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import { type Props } from './SectionMessage.types';
-declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, color, withClose, customColor, customColorIcon, customIcon, }: Props) => React.JSX.Element;
+import SectionMessage from '@synerise/ds-section-message';
+/** @deprecated use `@synerise/ds-section-message` instead */
 export default SectionMessage;

package/dist/SectionMessage/SectionMessage.js

@@ -1,66 +1,4 @@
-import React, { useMemo } from 'react';
-import Icon, { Check3M, CloseM, HelpFillM, NotificationsReceiveM, UpdateDataM, UserUpM, WarningFillM } from '@synerise/ds-icon';
-import * as S from './SectionMessage.styles';
-var ICONS = {
-  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 = /*#__PURE__*/React.createElement(WarningFillM, null);
-var SectionMessage = function SectionMessage(_ref) {
-  var icon = _ref.icon,
-    type = _ref.type,
-    message = _ref.message,
-    description = _ref.description,
-    showMoreLabel = _ref.showMoreLabel,
-    onShowMore = _ref.onShowMore,
-    onClose = _ref.onClose,
-    suffixel = _ref.suffixel,
-    moreButtons = _ref.moreButtons,
-    withEmphasis = _ref.withEmphasis,
-    withLink = _ref.withLink,
-    unorderedList = _ref.unorderedList,
-    color = _ref.color,
-    withClose = _ref.withClose,
-    customColor = _ref.customColor,
-    customColorIcon = _ref.customColorIcon,
-    customIcon = _ref.customIcon;
-  var renderMessage = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.AlertContent, {
-      withLink: withLink
-    }, 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]);
-  var renderIcon = useMemo(function () {
-    if (icon) {
-      return icon;
-    }
-    if (ICONS[type]) {
-      return ICONS[type];
-    }
-    return DEFAULT_ICON;
-  }, [icon, type]);
-  var handleClose = function handleClose() {
-    onClose && onClose();
-  };
-  return /*#__PURE__*/React.createElement(S.Container, {
-    "data-testid": "ds-section-message-" + type,
-    color: color,
-    customColor: customColor
-  }, /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
-    color: color,
-    customColorIcon: customColorIcon
-  }, customIcon || /*#__PURE__*/React.createElement(Icon, {
-    component: renderIcon
-  })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CloseM, null)
-  })))));
-};
+import SectionMessage from '@synerise/ds-section-message';
+
+/** @deprecated use `@synerise/ds-section-message` instead */
 export default SectionMessage;

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

@@ -4,62 +4,62 @@ import { type Keyframes } from 'styled-components';
 import { type ColorIconType, type ColorType, type CustomColorType } from './Toast.types';
 export declare const closingAnimation: () => Keyframes;
 export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
-    hasBottomMargin?: boolean | undefined;
+    hasBottomMargin?: boolean;
 }, never>;
 export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    colorIcon?: ColorIconType | undefined;
-    customColorIcon?: CustomColorType | undefined;
+    colorIcon?: ColorIconType;
+    customColorIcon?: CustomColorType;
 }, never>;
 export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
 }, never>;
 export declare const IconExpanderWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
-    expanded?: boolean | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
+    expanded?: boolean;
 }, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FirstButtonWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
 }, never>;
 export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
 }, never>;
 export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {
-    visible?: boolean | undefined;
+    visible?: boolean;
     description?: ReactNode;
 }, never>;
 export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
 }, never>;
 export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
 }, 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;
+    show?: boolean;
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
-    customColor?: CustomColorType | undefined;
+    color?: ColorType;
+    customColor?: CustomColorType;
 }, never>;
 export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AlertMessage: import("styled-components").StyledComponent<"div", any, {
-    noToastContent?: boolean | undefined;
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
-    hasClose?: boolean | undefined;
-    hasExpander?: boolean | undefined;
+    noToastContent?: boolean;
+    customColorText?: CustomColorType;
+    color?: ColorType;
+    hasClose?: boolean;
+    hasExpander?: boolean;
 }, never>;
 export declare const AlertDescription: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
-    button?: boolean | undefined;
-    expandedContent?: boolean | undefined;
+    customColorText?: CustomColorType;
+    color?: ColorType;
+    button?: boolean;
+    expandedContent?: boolean;
 }, never>;

package/dist/Toast/Toast.styles.js

@@ -67,9 +67,9 @@ export var IconWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconWrapper",
   componentId: "sc-q5tn0-2"
 })(["margin:12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
-  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon(props);
 }, function (props) {
-  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon(props);
 });
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconCloseWrapper",
@@ -80,7 +80,7 @@ export var IconCloseWrapper = styled.div.withConfig({
 export var IconExpanderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconExpanderWrapper",
   componentId: "sc-q5tn0-4"
-})(["cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ( ", " );}"], function (props) {
+})(["cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.expanded ? '180deg' : '0deg';

package/dist/index.d.ts

@@ -1,16 +1,14 @@
 import * as MainAlertStyles from './Alert.styles';
 import * as IconAlertStyles from './IconAlert/IconAlert.styles';
-import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
 import * as ToastStyles from './Toast/Toast.styles';
 export { default } from './Alert';
 export declare const AlertStyles: {
     Alert: typeof MainAlertStyles;
-    SectionMessage: typeof SectionMessageStyles;
     Toast: typeof ToastStyles;
     IconAlert: typeof IconAlertStyles;
 };
+/** @deprecated use `@synerise/ds-section-message` instead */
 export { default as SectionMessage } from './SectionMessage/SectionMessage';
-export type { Props as SectionMessageProps, ColorType as SectionMessageColorType, AlertTypes as SectionMessageAlertTypes, } from './SectionMessage/SectionMessage.types';
 export { default as Toast } from './Toast/Toast';
 export { default as BroadcastBar } from './BroadcastBar/BroadcastBar';
 export { default as IconAlert } from './IconAlert/IconAlert';

package/dist/index.js

@@ -1,14 +1,14 @@
 import * as MainAlertStyles from './Alert.styles';
 import * as IconAlertStyles from './IconAlert/IconAlert.styles';
-import * as SectionMessageStyles from './SectionMessage/SectionMessage.styles';
 import * as ToastStyles from './Toast/Toast.styles';
 export { default } from './Alert';
 export var AlertStyles = {
   Alert: MainAlertStyles,
-  SectionMessage: SectionMessageStyles,
   Toast: ToastStyles,
   IconAlert: IconAlertStyles
 };
+
+/** @deprecated use `@synerise/ds-section-message` instead */
 export { default as SectionMessage } from './SectionMessage/SectionMessage';
 export { default as Toast } from './Toast/Toast';
 export { default as BroadcastBar } from './BroadcastBar/BroadcastBar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.4",
-    "@synerise/ds-icon": "^1.6.0",
-    "@synerise/ds-unordered-list": "^1.1.10",
-    "@synerise/ds-utils": "^1.3.1",
+    "@synerise/ds-button": "^1.4.6",
+    "@synerise/ds-icon": "^1.6.2",
+    "@synerise/ds-unordered-list": "^1.1.12",
+    "@synerise/ds-utils": "^1.4.0",
     "animate.css": "^4.1.1"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
+  "gitHead": "b35b1875727156fe9f5b3bad55aed5ca447c8c8d"
 }

package/dist/SectionMessage/SectionMessage.styles.d.ts

@@ -1,30 +0,0 @@
-import type React from 'react';
-import { type ColorType, type CustomColorType } from './SectionMessage.types';
-export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
-    withLink?: React.ReactNode;
-}, never>;
-export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
-    customColorIcon?: CustomColorType | undefined;
-}, never>;
-export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FirstButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    color?: ColorType | undefined;
-    customColor?: CustomColorType | undefined;
-}, never>;
-export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const AlertShowMore: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/SectionMessage/SectionMessage.styles.js

@@ -1,115 +0,0 @@
-import styled from 'styled-components';
-export var AlertContent = styled.div.withConfig({
-  displayName: "SectionMessagestyles__AlertContent",
-  componentId: "sc-1kuq4h0-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";"], function (props) {
-  return props.withLink ? '12px 0 11px' : '12px 0';
-});
-export var AllContent = styled.div.withConfig({
-  displayName: "SectionMessagestyles__AllContent",
-  componentId: "sc-1kuq4h0-1"
-})(["display:flex;color:inherit;"]);
-export var Text = styled.div.withConfig({
-  displayName: "SectionMessagestyles__Text",
-  componentId: "sc-1kuq4h0-2"
-})(["display:flex;"]);
-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[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
-}, function (props) {
-  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
-});
-export var IconCloseWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__IconCloseWrapper",
-  componentId: "sc-1kuq4h0-4"
-})(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";}"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var ButtonWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__ButtonWrapper",
-  componentId: "sc-1kuq4h0-5"
-})(["padding:6px 8px 0 8px;display:flex;"]);
-export var FirstButtonWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__FirstButtonWrapper",
-  componentId: "sc-1kuq4h0-6"
-})(["margin-right:8px;"]);
-export var NumberWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__NumberWrapper",
-  componentId: "sc-1kuq4h0-7"
-})(["margin-left:4px;color:", ";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;color:", ";}"], function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var ButtonsWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__ButtonsWrapper",
-  componentId: "sc-1kuq4h0-8"
-})(["padding:16px 0 0 0;display:flex;"]);
-export var SuffixWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__SuffixWrapper",
-  componentId: "sc-1kuq4h0-9"
-})(["display:flex;"]);
-export var IconOrderWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__IconOrderWrapper",
-  componentId: "sc-1kuq4h0-10"
-})(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
-  return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var OrderWrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__OrderWrapper",
-  componentId: "sc-1kuq4h0-11"
-})(["display:flex;&: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;color:", ";}}"], IconOrderWrapper, NumberWrapper, function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var Wrapper = styled.div.withConfig({
-  displayName: "SectionMessagestyles__Wrapper",
-  componentId: "sc-1kuq4h0-12"
-})(["margin-top:10px;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var Container = styled.div.withConfig({
-  displayName: "SectionMessagestyles__Container",
-  componentId: "sc-1kuq4h0-13"
-})(["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[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
-}, function (props) {
-  return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
-}, function (props) {
-  return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
-});
-export var WrapperSectionMessage = styled.div.withConfig({
-  displayName: "SectionMessagestyles__WrapperSectionMessage",
-  componentId: "sc-1kuq4h0-14"
-})(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
-export var AlertMessage = styled.span.withConfig({
-  displayName: "SectionMessagestyles__AlertMessage",
-  componentId: "sc-1kuq4h0-15"
-})(["font-size:13px;line-height:1.39;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var AlertDescription = styled.span.withConfig({
-  displayName: "SectionMessagestyles__AlertDescription",
-  componentId: "sc-1kuq4h0-16"
-})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var EmphasisWrapper = styled.span.withConfig({
-  displayName: "SectionMessagestyles__EmphasisWrapper",
-  componentId: "sc-1kuq4h0-17"
-})(["display:flex;font-size:13px;line-height:1.39;font-weight:500;margin-top:2px;color:inherit;"]);
-export var LinkWrapper = styled.span.withConfig({
-  displayName: "SectionMessagestyles__LinkWrapper",
-  componentId: "sc-1kuq4h0-18"
-})(["display:flex;font-size:13px;line-height:1.5;font-weight:400;margin-top:2px;color:inherit;text-decoration:underline;cursor:pointer;a{color:inherit;}"]);
-export var AlertShowMore = styled.span.withConfig({
-  displayName: "SectionMessagestyles__AlertShowMore",
-  componentId: "sc-1kuq4h0-19"
-})(["display:flex;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;"]);

package/dist/SectionMessage/SectionMessage.types.d.ts

@@ -1,25 +0,0 @@
-import { type AlertProps } from 'antd/lib/alert';
-import type React from 'react';
-import { type AlertType } from '../ColorSemantic/AlertSemanticColor.types';
-export type AlertTypes = Exclude<AlertType, 'informative'>;
-export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
-export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'violet' | 'purple' | 'cyan';
-export type ModeType = 'background' | 'background-outline' | 'outline' | 'clear';
-export interface Props extends Omit<AlertProps, 'type' | 'message'> {
-    message?: React.ReactNode;
-    type: string | AlertTypes;
-    customColor?: CustomColorType;
-    customColorIcon?: CustomColorType;
-    color?: ColorType;
-    mode?: ModeType;
-    showMoreLabel?: React.ReactNode;
-    onShowMore?: () => void;
-    onClose?: () => void;
-    suffixel?: React.ReactNode;
-    moreButtons?: boolean | React.ReactNode;
-    withEmphasis?: React.ReactNode;
-    withLink?: React.ReactNode;
-    unorderedList?: React.ReactNode;
-    withClose?: React.ReactNode;
-    customIcon?: React.ReactElement;
-}

package/dist/SectionMessage/SectionMessage.types.js

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