@synerise/ds-alert 1.1.10 → 1.1.11

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "1.1.10",
+  "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.5",
-    "@synerise/ds-icon": "^1.6.1",
-    "@synerise/ds-unordered-list": "^1.1.11",
-    "@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": "4e851d649cb25346f2f8e0575dde91cc50f43bc4"
+  "gitHead": "b35b1875727156fe9f5b3bad55aed5ca447c8c8d"
 }