@synerise/ds-alert 1.1.9 → 1.1.10

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/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/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.10",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   ],
   "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-button": "^1.4.5",
+    "@synerise/ds-icon": "^1.6.1",
+    "@synerise/ds-unordered-list": "^1.1.11",
     "@synerise/ds-utils": "^1.3.1",
     "animate.css": "^4.1.1"
   },
@@ -46,5 +46,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
+  "gitHead": "4e851d649cb25346f2f8e0575dde91cc50f43bc4"
 }

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 {};