@synerise/ds-section-message 1.0.24 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +21 -17
  3. package/dist/SectionMessage.const.d.ts +2 -2
  4. package/dist/SectionMessage.const.js +17 -12
  5. package/dist/SectionMessage.d.ts +2 -2
  6. package/dist/SectionMessage.js +52 -49
  7. package/dist/SectionMessage.styles.d.ts +20 -20
  8. package/dist/SectionMessage.styles.js +50 -62
  9. package/dist/SectionMessage.types.d.ts +2 -2
  10. package/dist/SectionMessage.types.js +1 -1
  11. package/dist/SectionMessage.utils.d.ts +2 -2
  12. package/dist/SectionMessage.utils.js +51 -45
  13. package/dist/index.js +4 -1
  14. package/dist/modules.d.js +1 -1
  15. package/dist/modules.d.ts +0 -0
  16. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.25...@synerise/ds-section-message@1.0.26) (2026-03-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-section-message
9
+
10
+ ## [1.0.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.24...@synerise/ds-section-message@1.0.25) (2026-03-20)
11
+
12
+ ### Bug Fixes
13
+
14
+ - **section-message:** change border to be ass div ([bf52965](https://github.com/Synerise/synerise-design/commit/bf5296551846c1c271f3130926ed6a2b6727fb24))
15
+
6
16
  ## [1.0.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-section-message@1.0.23...@synerise/ds-section-message@1.0.24) (2026-02-19)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-section-message
package/README.md CHANGED
@@ -11,6 +11,8 @@ SectionMessage UI Component
11
11
  npm i @synerise/ds-section-message
12
12
  or
13
13
  yarn add @synerise/ds-section-message
14
+ or
15
+ pnpm add @synerise/ds-section-message
14
16
  ```
15
17
 
16
18
  ## Usage
@@ -28,20 +30,22 @@ import SectionMessage from '@synerise/ds-section-message'
28
30
 
29
31
  ## API
30
32
 
31
- | Property | Description | Type | Default |
32
- | --------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- | ---------- |
33
- | type | Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity` | `string` | `negative` |
34
- | message | Message of section messsage | `ReactNode` | - |
35
- | customColor | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
36
- | customColorIcon | type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink` | `string` | - |
37
- | showMoreLabel | prop to show label | `ReactNode` | - |
38
- | onShowMore | callback executed after clicking | `void` | - |
39
- | moreButtons | prop to show buttons | `ReactNode` | - |
40
- | withEmphasis | prop to show bolder text | `ReactNode` | - |
41
- | withLink | prop to show highlited text | `ReactNode` | - |
42
- | unorderedList | prop to show unordered list | `ReactNode` | - |
43
- | withClose | prop to show close button | `ReactNode` | - |
44
- | customIcon | prop to set custom icon | `ReactNode` | - |
45
- | textButton | text for button | `string ` | - |
46
- | icon | prop to set icon | `ReactNode` | - |
47
- | description | prop to show description | `ReactNode` | - |
33
+ | Property | Description | Type | Default |
34
+ | --------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------- |
35
+ | type | Visual variant. Options: `notice`, `negative`, `positive`, `neutral`, `supply`, `service`, `entity` | `SectionType` | — (required) |
36
+ | message | Bold heading text | `ReactNode` | - |
37
+ | description | Regular-weight body text rendered below the message | `ReactNode` | - |
38
+ | icon | Overrides the automatic type-derived icon (passed as `component` prop to `<Icon>`) | `ReactNode` | - |
39
+ | customIcon | Renders a React element directly inside the icon wrapper, bypassing the `<Icon>` wrapper; takes precedence over `icon` | `ReactElement` | - |
40
+ | customColor | Overrides background and border colours. Options: `red`, `blue`, `green`, `yellow`, `grey`, `purple`, `violet`, `cyan`, `fern`, `orange`, `mars`, `pink` | `CustomColorType` | - |
41
+ | customColorIcon | Overrides the icon and top-border colour. Same options as `customColor` | `CustomColorType` | - |
42
+ | showMoreLabel | Label for the "show more" link; only rendered when `onShowMore` is also provided | `ReactNode` | - |
43
+ | onShowMore | Callback executed when the "show more" link is clicked; requires `showMoreLabel` | `() => void` | - |
44
+ | onClose | Callback executed when the close button is clicked; requires `withClose` to be truthy | `() => void` | - |
45
+ | withClose | When truthy, shows a close button in the right-hand area | `ReactNode` | - |
46
+ | suffixel | Content placed in the right-hand action area, before the close button | `ReactNode` | - |
47
+ | moreButtons | Additional action content rendered inside the content area | `ReactNode` | - |
48
+ | withEmphasis | Bold inline content; only rendered when `withLink` is falsy | `ReactNode` | - |
49
+ | withLink | Underlined link content; rendered instead of `withEmphasis`; also adjusts content area padding | `ReactNode` | - |
50
+ | unorderedList | List content; only rendered when `moreButtons` is falsy | `ReactNode` | - |
51
+ | color | **Deprecated** — use `customColor` instead | `ColorType` | - |
package/dist/SectionMessage.const.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React, { type ReactNode } from 'react';
2
- import { type SectionType } from './SectionMessage.types';
1
+ import { default as React, ReactNode } from 'react';
2
+ import { SectionType } from './SectionMessage.types';
3
3
  export declare const ICONS: Record<SectionType, ReactNode>;
4
4
  export declare const DEFAULT_ICON: React.JSX.Element;
5
5
  export declare const SECTION_TYPES: SectionType[];
package/dist/SectionMessage.const.js CHANGED
@@ -1,13 +1,18 @@
1
- import React from 'react';
2
- import { Check2M, InfoM, NotificationsReceiveM, UpdateDataM, UserUpM, WarningM } from '@synerise/ds-icon';
3
- export var ICONS = {
4
- positive: /*#__PURE__*/React.createElement(Check2M, null),
5
- notice: /*#__PURE__*/React.createElement(WarningM, null),
6
- negative: /*#__PURE__*/React.createElement(WarningM, null),
7
- neutral: /*#__PURE__*/React.createElement(InfoM, null),
8
- supply: /*#__PURE__*/React.createElement(UserUpM, null),
9
- service: /*#__PURE__*/React.createElement(UpdateDataM, null),
10
- entity: /*#__PURE__*/React.createElement(NotificationsReceiveM, null)
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { WarningM, NotificationsReceiveM, UpdateDataM, UserUpM, InfoM, Check2M } from "@synerise/ds-icon";
3
+ const ICONS = {
4
+ positive: /* @__PURE__ */ jsx(Check2M, {}),
5
+ notice: /* @__PURE__ */ jsx(WarningM, {}),
6
+ negative: /* @__PURE__ */ jsx(WarningM, {}),
7
+ neutral: /* @__PURE__ */ jsx(InfoM, {}),
8
+ supply: /* @__PURE__ */ jsx(UserUpM, {}),
9
+ service: /* @__PURE__ */ jsx(UpdateDataM, {}),
10
+ entity: /* @__PURE__ */ jsx(NotificationsReceiveM, {})
11
+ };
12
+ const DEFAULT_ICON = /* @__PURE__ */ jsx(WarningM, {});
13
+ const SECTION_TYPES = ["positive", "notice", "negative", "neutral", "supply", "service", "entity"];
14
+ export {
15
+ DEFAULT_ICON,
16
+ ICONS,
17
+ SECTION_TYPES
11
18
  };
12
- export var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningM, null);
13
- export var SECTION_TYPES = ['positive', 'notice', 'negative', 'neutral', 'supply', 'service', 'entity'];
package/dist/SectionMessage.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
- import { type SectionMessageProps } from './SectionMessage.types';
1
+ import { default as React } from 'react';
2
+ import { SectionMessageProps } from './SectionMessage.types';
3
3
  declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, withClose, customColor, customColorIcon, customIcon, ...htmlAttributes }: SectionMessageProps) => React.JSX.Element;
4
4
  export default SectionMessage;
package/dist/SectionMessage.js CHANGED
@@ -1,37 +1,42 @@
1
- var _excluded = ["icon", "type", "message", "description", "showMoreLabel", "onShowMore", "onClose", "suffixel", "moreButtons", "withEmphasis", "withLink", "unorderedList", "withClose", "customColor", "customColorIcon", "customIcon"];
2
- function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
- import React, { useMemo } from 'react';
5
- import Icon, { CloseM } from '@synerise/ds-icon';
6
- import { DEFAULT_ICON, ICONS } from './SectionMessage.const';
7
- import * as S from './SectionMessage.styles';
8
- import { isSectionType } from './SectionMessage.utils';
9
- var SectionMessage = function SectionMessage(_ref) {
10
- var icon = _ref.icon,
11
- type = _ref.type,
12
- message = _ref.message,
13
- description = _ref.description,
14
- showMoreLabel = _ref.showMoreLabel,
15
- onShowMore = _ref.onShowMore,
16
- onClose = _ref.onClose,
17
- suffixel = _ref.suffixel,
18
- moreButtons = _ref.moreButtons,
19
- withEmphasis = _ref.withEmphasis,
20
- withLink = _ref.withLink,
21
- unorderedList = _ref.unorderedList,
22
- withClose = _ref.withClose,
23
- customColor = _ref.customColor,
24
- customColorIcon = _ref.customColorIcon,
25
- customIcon = _ref.customIcon,
26
- htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
27
- var renderMessage = useMemo(function () {
28
- return /*#__PURE__*/React.createElement(S.AlertContent, {
29
- withLink: withLink
30
- }, 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, {
31
- onClick: onShowMore
32
- }, showMoreLabel), moreButtons, unorderedList && !moreButtons && unorderedList);
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useMemo } from "react";
3
+ import Icon, { CloseM } from "@synerise/ds-icon";
4
+ import { ICONS, DEFAULT_ICON } from "./SectionMessage.const.js";
5
+ import { AlertContent, AlertMessage, Text, AlertDescription, LinkWrapper, EmphasisWrapper, AlertShowMore, Container, WrapperSectionMessage, AllContent, IconWrapper, ButtonWrapper, SuffixWrapper, IconCloseWrapper } from "./SectionMessage.styles.js";
6
+ import { isSectionType } from "./SectionMessage.utils.js";
7
+ const SectionMessage = ({
8
+ icon,
9
+ type,
10
+ message,
11
+ description,
12
+ showMoreLabel,
13
+ onShowMore,
14
+ onClose,
15
+ suffixel,
16
+ moreButtons,
17
+ withEmphasis,
18
+ withLink,
19
+ unorderedList,
20
+ withClose,
21
+ customColor,
22
+ customColorIcon,
23
+ customIcon,
24
+ ...htmlAttributes
25
+ }) => {
26
+ const renderMessage = useMemo(() => {
27
+ return /* @__PURE__ */ jsxs(AlertContent, { withLink, children: [
28
+ message && /* @__PURE__ */ jsx(AlertMessage, { children: message }),
29
+ /* @__PURE__ */ jsxs(Text, { children: [
30
+ description && /* @__PURE__ */ jsx(AlertDescription, { children: description }),
31
+ withLink && /* @__PURE__ */ jsx(LinkWrapper, { children: withLink }),
32
+ withEmphasis && !withLink && /* @__PURE__ */ jsx(EmphasisWrapper, { children: withEmphasis })
33
+ ] }),
34
+ onShowMore && showMoreLabel && /* @__PURE__ */ jsx(AlertShowMore, { onClick: onShowMore, children: showMoreLabel }),
35
+ moreButtons,
36
+ unorderedList && !moreButtons && unorderedList
37
+ ] });
33
38
  }, [message, description, showMoreLabel, onShowMore, moreButtons, withEmphasis, withLink, unorderedList]);
34
- var renderIcon = useMemo(function () {
39
+ const renderIcon = useMemo(() => {
35
40
  if (icon) {
36
41
  return icon;
37
42
  }
@@ -40,22 +45,20 @@ var SectionMessage = function SectionMessage(_ref) {
40
45
  }
41
46
  return DEFAULT_ICON;
42
47
  }, [icon, type]);
43
- var handleClose = function handleClose() {
48
+ const handleClose = () => {
44
49
  onClose && onClose();
45
50
  };
46
- return /*#__PURE__*/React.createElement(S.Container, _extends({
47
- "data-testid": "ds-section-message-" + type,
48
- type: type,
49
- customColor: customColor
50
- }, htmlAttributes), /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
51
- type: type,
52
- customColorIcon: customColorIcon
53
- }, customIcon || /*#__PURE__*/React.createElement(Icon, {
54
- component: renderIcon
55
- })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
56
- onClick: handleClose
57
- }, /*#__PURE__*/React.createElement(Icon, {
58
- component: /*#__PURE__*/React.createElement(CloseM, null)
59
- })))));
51
+ return /* @__PURE__ */ jsx(Container, { "data-testid": `ds-section-message-${type}`, type, customColor, ...htmlAttributes, children: /* @__PURE__ */ jsxs(WrapperSectionMessage, { children: [
52
+ /* @__PURE__ */ jsxs(AllContent, { children: [
53
+ /* @__PURE__ */ jsx(IconWrapper, { type, customColorIcon, children: customIcon || /* @__PURE__ */ jsx(Icon, { component: renderIcon }) }),
54
+ renderMessage
55
+ ] }),
56
+ /* @__PURE__ */ jsxs(ButtonWrapper, { children: [
57
+ suffixel && /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel }),
58
+ withClose && /* @__PURE__ */ jsx(IconCloseWrapper, { onClick: handleClose, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) })
59
+ ] })
60
+ ] }) });
61
+ };
62
+ export {
63
+ SectionMessage as default
60
64
  };
61
- export default SectionMessage;
package/dist/SectionMessage.styles.d.ts CHANGED
@@ -1,28 +1,28 @@
1
- import type { ReactNode } from 'react';
2
- import { type CustomColorType, type SectionType } from './SectionMessage.types';
3
- export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
1
+ import { ReactNode } from 'react';
2
+ import { CustomColorType, SectionType } from './SectionMessage.types';
3
+ export declare const AlertContent: import('styled-components').StyledComponent<"div", any, {
4
4
  withLink?: ReactNode;
5
5
  }, never>;
6
- export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
6
+ export declare const AllContent: import('styled-components').StyledComponent<"div", any, {}, never>;
7
+ export declare const Text: import('styled-components').StyledComponent<"div", any, {}, never>;
8
+ export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
9
9
  type?: SectionType;
10
10
  customColorIcon?: CustomColorType;
11
11
  }, never>;
12
- export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
13
- export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
14
- export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
15
- export declare const Container: import("styled-components").StyledComponent<"div", any, {
12
+ export declare const IconCloseWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
13
+ export declare const ButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
14
+ export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
15
+ export declare const Container: import('styled-components').StyledComponent<"div", any, {
16
16
  type?: SectionType;
17
17
  customColor?: CustomColorType;
18
18
  }, never>;
19
- export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
20
- export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {}, never>;
21
- export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
22
- export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
23
- export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
24
- export declare const AlertShowMore: import("styled-components").StyledComponent<"span", any, {}, never>;
25
- export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
26
- export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
27
- export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
28
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
19
+ export declare const WrapperSectionMessage: import('styled-components').StyledComponent<"div", any, {}, never>;
20
+ export declare const AlertMessage: import('styled-components').StyledComponent<"span", any, {}, never>;
21
+ export declare const AlertDescription: import('styled-components').StyledComponent<"span", any, {}, never>;
22
+ export declare const EmphasisWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
23
+ export declare const LinkWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
24
+ export declare const AlertShowMore: import('styled-components').StyledComponent<"span", any, {}, never>;
25
+ export declare const NumberWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
26
+ export declare const IconOrderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
27
+ export declare const OrderWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
28
+ export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
package/dist/SectionMessage.styles.js CHANGED
@@ -1,106 +1,94 @@
1
- import styled from 'styled-components';
2
- import { getColorBackground, getColorBorder, getColorIconAndBorderTop } from './SectionMessage.utils';
3
- export var AlertContent = styled.div.withConfig({
1
+ import styled from "styled-components";
2
+ import { getColorBackground, getColorBorder, getColorIconAndBorderTop } from "./SectionMessage.utils.js";
3
+ const AlertContent = /* @__PURE__ */ styled.div.withConfig({
4
4
  displayName: "SectionMessagestyles__AlertContent",
5
5
  componentId: "sc-1qohcjm-0"
6
- })(["display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";"], function (props) {
7
- return props.withLink ? '12px 0 11px' : '12px 0';
8
- });
9
- export var AllContent = styled.div.withConfig({
6
+ })(["display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";"], (props) => props.withLink ? "12px 0 11px" : "12px 0");
7
+ const AllContent = /* @__PURE__ */ styled.div.withConfig({
10
8
  displayName: "SectionMessagestyles__AllContent",
11
9
  componentId: "sc-1qohcjm-1"
12
10
  })(["display:flex;min-width:0;color:inherit;"]);
13
- export var Text = styled.div.withConfig({
11
+ const Text = /* @__PURE__ */ styled.div.withConfig({
14
12
  displayName: "SectionMessagestyles__Text",
15
13
  componentId: "sc-1qohcjm-2"
16
14
  })(["display:flex;min-width:0;width:100%;"]);
17
- export var IconWrapper = styled.div.withConfig({
15
+ const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
18
16
  displayName: "SectionMessagestyles__IconWrapper",
19
17
  componentId: "sc-1qohcjm-3"
20
- })(["margin:10px 12px;display:flex;color:", ";"], function (props) {
21
- return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIconAndBorderTop(props.type, props.theme);
22
- });
23
- export var IconCloseWrapper = styled.div.withConfig({
18
+ })(["margin:10px 12px;display:flex;color:", ";"], (props) => props.customColorIcon ? props.theme.palette[`${props.customColorIcon}-600`] : getColorIconAndBorderTop(props.type, props.theme));
19
+ const IconCloseWrapper = /* @__PURE__ */ styled.div.withConfig({
24
20
  displayName: "SectionMessagestyles__IconCloseWrapper",
25
21
  componentId: "sc-1qohcjm-4"
26
- })(["margin:3px 5px 2px;cursor:pointer;color:", ";"], function (props) {
27
- return props.theme.palette['grey-700'];
28
- });
29
- export var ButtonWrapper = styled.div.withConfig({
22
+ })(["margin:3px 5px 2px;cursor:pointer;color:", ";"], (props) => props.theme.palette["grey-700"]);
23
+ const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
30
24
  displayName: "SectionMessagestyles__ButtonWrapper",
31
25
  componentId: "sc-1qohcjm-5"
32
26
  })(["padding:6px 8px 0 8px;display:flex;"]);
33
- export var SuffixWrapper = styled.div.withConfig({
27
+ const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
34
28
  displayName: "SectionMessagestyles__SuffixWrapper",
35
29
  componentId: "sc-1qohcjm-6"
36
30
  })(["display:flex;"]);
37
- export var Container = styled.div.withConfig({
31
+ const Container = /* @__PURE__ */ styled.div.withConfig({
38
32
  displayName: "SectionMessagestyles__Container",
39
33
  componentId: "sc-1qohcjm-7"
40
- })(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
41
- return props.customColor ? props.theme.palette[props.customColor + "-050"] : getColorBackground(props.type, props.theme);
42
- }, function (props) {
43
- return props.customColor ? props.theme.palette[props.customColor + "-200"] : getColorBorder(props.type, props.theme);
44
- }, function (props) {
45
- return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorIconAndBorderTop(props.type, props.theme);
46
- });
47
- export var WrapperSectionMessage = styled.div.withConfig({
34
+ })(["width:100%;align-items:center;justify-content:center;position:relative;background-color:", ";border:1px solid ", ";border-radius:3px;&::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;border-radius:3px 3px 0 0;background-color:", ";}"], (props) => props.customColor ? props.theme.palette[`${props.customColor}-050`] : getColorBackground(props.type, props.theme), (props) => props.customColor ? props.theme.palette[`${props.customColor}-200`] : getColorBorder(props.type, props.theme), (props) => props.customColor ? props.theme.palette[`${props.customColor}-600`] : getColorIconAndBorderTop(props.type, props.theme));
35
+ const WrapperSectionMessage = /* @__PURE__ */ styled.div.withConfig({
48
36
  displayName: "SectionMessagestyles__WrapperSectionMessage",
49
37
  componentId: "sc-1qohcjm-8"
50
38
  })(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
51
- export var AlertMessage = styled.span.withConfig({
39
+ const AlertMessage = /* @__PURE__ */ styled.span.withConfig({
52
40
  displayName: "SectionMessagestyles__AlertMessage",
53
41
  componentId: "sc-1qohcjm-9"
54
- })(["font-size:13px;line-height:1.39;font-weight:500;overflow-wrap:break-word;min-width:0;width:100%;color:", ";"], function (props) {
55
- return props.theme.palette['grey-700'];
56
- });
57
- export var AlertDescription = styled.span.withConfig({
42
+ })(["font-size:13px;line-height:1.39;font-weight:500;overflow-wrap:break-word;min-width:0;width:100%;color:", ";"], (props) => props.theme.palette["grey-700"]);
43
+ const AlertDescription = /* @__PURE__ */ styled.span.withConfig({
58
44
  displayName: "SectionMessagestyles__AlertDescription",
59
45
  componentId: "sc-1qohcjm-10"
60
- })(["overflow-wrap:break-word;min-width:0;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], function (props) {
61
- return props.theme.palette['grey-700'];
62
- });
63
- export var EmphasisWrapper = styled.span.withConfig({
46
+ })(["overflow-wrap:break-word;min-width:0;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], (props) => props.theme.palette["grey-700"]);
47
+ const EmphasisWrapper = /* @__PURE__ */ styled.span.withConfig({
64
48
  displayName: "SectionMessagestyles__EmphasisWrapper",
65
49
  componentId: "sc-1qohcjm-11"
66
50
  })(["display:flex;font-size:13px;line-height:1.39;font-weight:500;margin-top:2px;color:inherit;"]);
67
- export var LinkWrapper = styled.span.withConfig({
51
+ const LinkWrapper = /* @__PURE__ */ styled.span.withConfig({
68
52
  displayName: "SectionMessagestyles__LinkWrapper",
69
53
  componentId: "sc-1qohcjm-12"
70
54
  })(["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;}"]);
71
- export var AlertShowMore = styled.span.withConfig({
55
+ const AlertShowMore = /* @__PURE__ */ styled.span.withConfig({
72
56
  displayName: "SectionMessagestyles__AlertShowMore",
73
57
  componentId: "sc-1qohcjm-13"
74
58
  })(["display:flex;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;"]);
75
- export var NumberWrapper = styled.div.withConfig({
59
+ const NumberWrapper = /* @__PURE__ */ styled.div.withConfig({
76
60
  displayName: "SectionMessagestyles__NumberWrapper",
77
61
  componentId: "sc-1qohcjm-14"
78
- })(["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) {
79
- return props.theme.palette['grey-400'];
80
- }, function (props) {
81
- return props.theme.palette['grey-400'];
82
- }, function (props) {
83
- return props.theme.palette['grey-700'];
84
- });
85
- export var IconOrderWrapper = styled.div.withConfig({
62
+ })(["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:", ";}"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-700"]);
63
+ const IconOrderWrapper = /* @__PURE__ */ styled.div.withConfig({
86
64
  displayName: "SectionMessagestyles__IconOrderWrapper",
87
65
  componentId: "sc-1qohcjm-15"
88
- })(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
89
- return props.theme.palette['grey-700'];
90
- }, function (props) {
91
- return props.theme.palette['blue-600'];
92
- });
93
- export var OrderWrapper = styled.div.withConfig({
66
+ })(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["blue-600"]);
67
+ const OrderWrapper = /* @__PURE__ */ styled.div.withConfig({
94
68
  displayName: "SectionMessagestyles__OrderWrapper",
95
69
  componentId: "sc-1qohcjm-16"
96
- })(["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) {
97
- return props.theme.palette['grey-400'];
98
- }, function (props) {
99
- return props.theme.palette['grey-700'];
100
- });
101
- export var Wrapper = styled.div.withConfig({
70
+ })(["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, (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-700"]);
71
+ const Wrapper = /* @__PURE__ */ styled.div.withConfig({
102
72
  displayName: "SectionMessagestyles__Wrapper",
103
73
  componentId: "sc-1qohcjm-17"
104
- })(["margin-top:10px;color:", ";"], function (props) {
105
- return props.theme.palette['grey-700'];
106
- });
74
+ })(["margin-top:10px;color:", ";"], (props) => props.theme.palette["grey-700"]);
75
+ export {
76
+ AlertContent,
77
+ AlertDescription,
78
+ AlertMessage,
79
+ AlertShowMore,
80
+ AllContent,
81
+ ButtonWrapper,
82
+ Container,
83
+ EmphasisWrapper,
84
+ IconCloseWrapper,
85
+ IconOrderWrapper,
86
+ IconWrapper,
87
+ LinkWrapper,
88
+ NumberWrapper,
89
+ OrderWrapper,
90
+ SuffixWrapper,
91
+ Text,
92
+ Wrapper,
93
+ WrapperSectionMessage
94
+ };
package/dist/SectionMessage.types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { ReactElement, ReactNode } from 'react';
2
- import type { WithHTMLAttributes } from '@synerise/ds-utils';
1
+ import { ReactElement, ReactNode } from 'react';
2
+ import { WithHTMLAttributes } from '@synerise/ds-utils';
3
3
  export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
4
4
  /** @deprecated */
5
5
  export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'violet' | 'purple' | 'cyan';
package/dist/SectionMessage.types.js CHANGED
@@ -1 +1 @@
1
- export {};
1
+
package/dist/SectionMessage.utils.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type ThemePropsVars } from '@synerise/ds-core';
2
- import { type SectionType } from './SectionMessage.types';
1
+ import { ThemePropsVars } from '@synerise/ds-core';
2
+ import { SectionType } from './SectionMessage.types';
3
3
  export declare const isSectionType: (type: string) => type is SectionType;
4
4
  export declare const getColorBackground: (type: SectionType, theme: ThemePropsVars) => string;
5
5
  export declare const getColorIconAndBorderTop: (type: SectionType, theme: ThemePropsVars) => string;
package/dist/SectionMessage.utils.js CHANGED
@@ -1,67 +1,73 @@
1
- import { SECTION_TYPES } from './SectionMessage.const';
2
- export var isSectionType = function isSectionType(type) {
1
+ import { SECTION_TYPES } from "./SectionMessage.const.js";
2
+ const isSectionType = (type) => {
3
3
  return SECTION_TYPES.includes(type);
4
4
  };
5
- export var getColorBackground = function getColorBackground(type, theme) {
6
- if (type === 'positive') {
7
- return theme.palette['green-050'];
5
+ const getColorBackground = (type, theme) => {
6
+ if (type === "positive") {
7
+ return theme.palette["green-050"];
8
8
  }
9
- if (type === 'negative') {
10
- return theme.palette['red-050'];
9
+ if (type === "negative") {
10
+ return theme.palette["red-050"];
11
11
  }
12
- if (type === 'notice') {
13
- return theme.palette['yellow-050'];
12
+ if (type === "notice") {
13
+ return theme.palette["yellow-050"];
14
14
  }
15
- if (type === 'service') {
16
- return theme.palette['purple-050'];
15
+ if (type === "service") {
16
+ return theme.palette["purple-050"];
17
17
  }
18
- if (type === 'supply') {
19
- return theme.palette['violet-050'];
18
+ if (type === "supply") {
19
+ return theme.palette["violet-050"];
20
20
  }
21
- if (type === 'entity') {
22
- return theme.palette['cyan-050'];
21
+ if (type === "entity") {
22
+ return theme.palette["cyan-050"];
23
23
  }
24
- return theme.palette["grey-050"];
24
+ return theme.palette[`grey-050`];
25
25
  };
26
- export var getColorIconAndBorderTop = function getColorIconAndBorderTop(type, theme) {
27
- if (type === 'positive') {
28
- return theme.palette['green-600'];
26
+ const getColorIconAndBorderTop = (type, theme) => {
27
+ if (type === "positive") {
28
+ return theme.palette["green-600"];
29
29
  }
30
- if (type === 'negative') {
31
- return theme.palette['red-600'];
30
+ if (type === "negative") {
31
+ return theme.palette["red-600"];
32
32
  }
33
- if (type === 'notice') {
34
- return theme.palette['yellow-600'];
33
+ if (type === "notice") {
34
+ return theme.palette["yellow-600"];
35
35
  }
36
- if (type === 'service') {
37
- return theme.palette['purple-600'];
36
+ if (type === "service") {
37
+ return theme.palette["purple-600"];
38
38
  }
39
- if (type === 'supply') {
40
- return theme.palette['violet-600'];
39
+ if (type === "supply") {
40
+ return theme.palette["violet-600"];
41
41
  }
42
- if (type === 'entity') {
43
- return theme.palette['cyan-600'];
42
+ if (type === "entity") {
43
+ return theme.palette["cyan-600"];
44
44
  }
45
- return theme.palette["grey-600"];
45
+ return theme.palette[`grey-600`];
46
46
  };
47
- export var getColorBorder = function getColorBorder(type, theme) {
48
- if (type === 'positive') {
49
- return theme.palette['green-200'];
47
+ const getColorBorder = (type, theme) => {
48
+ if (type === "positive") {
49
+ return theme.palette["green-200"];
50
50
  }
51
- if (type === 'negative') {
52
- return theme.palette['red-200'];
51
+ if (type === "negative") {
52
+ return theme.palette["red-200"];
53
53
  }
54
- if (type === 'notice') {
55
- return theme.palette['yellow-200'];
54
+ if (type === "notice") {
55
+ return theme.palette["yellow-200"];
56
56
  }
57
- if (type === 'service') {
58
- return theme.palette['purple-200'];
57
+ if (type === "service") {
58
+ return theme.palette["purple-200"];
59
59
  }
60
- if (type === 'supply') {
61
- return theme.palette['violet-200'];
60
+ if (type === "supply") {
61
+ return theme.palette["violet-200"];
62
62
  }
63
- if (type === 'entity') {
64
- return theme.palette['cyan-200'];
63
+ if (type === "entity") {
64
+ return theme.palette["cyan-200"];
65
65
  }
66
- return theme.palette["grey-200"];
67
- };
66
+ return theme.palette[`grey-200`];
67
+ };
68
+ export {
69
+ getColorBackground,
70
+ getColorBorder,
71
+ getColorIconAndBorderTop,
72
+ isSectionType
73
+ };
package/dist/index.js CHANGED
@@ -1 +1,4 @@
1
- export { default } from './SectionMessage';
1
+ import { default as default2 } from "./SectionMessage.js";
2
+ export {
3
+ default2 as default
4
+ };
package/dist/modules.d.js CHANGED
@@ -1 +1 @@
1
- import '@testing-library/jest-dom';
1
+ import "@testing-library/jest-dom";
package/dist/modules.d.ts ADDED
File without changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-section-message",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
4
4
  "description": "SectionMessage UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
16
16
  "access": "public"
17
17
  },
18
18
  "scripts": {
19
- "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
19
+ "build": "vite build",
20
20
  "build:css": "node ../../../scripts/style/less.js",
21
21
  "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
- "build:watch": "pnpm run build:js -- --watch",
22
+ "build:watch": "vite build --watch",
23
23
  "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
24
  "prepublish": "pnpm run build",
25
25
  "types": "tsc --noEmit",
@@ -35,13 +35,13 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-icon": "^1.14.1",
39
- "@synerise/ds-utils": "^1.6.0"
38
+ "@synerise/ds-icon": "^1.15.1",
39
+ "@synerise/ds-utils": "^1.7.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@synerise/ds-core": "*",
43
43
  "react": ">=16.9.0 <= 18.3.1",
44
44
  "styled-components": "^5.3.3"
45
45
  },
46
- "gitHead": "b3d1312cbfbe69aba1cb5667b54be7f76938156c"
46
+ "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
47
47
  }