@atlaskit/section-message 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/section-message
 
+## 6.3.0
+
+### Minor Changes
+
+- [`7a9e73ec430`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a9e73ec430) - [ux] Internal changes to how styles are represented in SectionMessage. Some minor visual changes to the color and spacing of SectionMessage. No changes to the SectionMessage API.
+
+### Patch Changes
+
+- [`5f07e7b56a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f07e7b56a2) - Updates to the public types to better reflect the actual API.
+- Updated dependencies
+
+## 6.2.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 6.2.0
 
 ### Minor Changes

package/__perf__/with-actions.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+
 import SectionMessage, { SectionMessageAction } from '../src';
 
 export default () => {
@@ -15,13 +17,13 @@ export default () => {
         </SectionMessageAction>,
       ]}
     >
-      <p>
+      <Text>
         You will rejoice to hear that no disaster has accompanied the
         commencement of an enterprise which you have regarded with such evil
         forebodings. I arrived here yesterday, and my first task is to assure my
         dear sister of my welfare and increasing confidence in the success of my
         undertaking.
-      </p>
+      </Text>
     </SectionMessage>
   );
 };

package/__perf__/without-actions.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+
 import SectionMessage from '../src';
 
 export default () => {
   return (
     <SectionMessage title="The Modern Prometheus">
-      <p>
+      <Text>
         You will rejoice to hear that no disaster has accompanied the
         commencement of an enterprise which you have regarded with such evil
         forebodings. I arrived here yesterday, and my first task is to assure my
         dear sister of my welfare and increasing confidence in the success of my
         undertaking.
-      </p>
+      </Text>
     </SectionMessage>
   );
 };

package/dist/cjs/section-message-action.js

@@ -2,63 +2,47 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("react");
-
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
-var _colors = require("@atlaskit/theme/colors");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var _constants = require("@atlaskit/theme/constants");
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsx jsx */
-var actionsSeparatorWidth = (0, _constants.gridSize)() * 2;
-var actionStyles = (0, _react2.css)({
-  display: 'flex',
-  margin: 0,
-  alignItems: 'center',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '&:not(:last-child)::after': {
-    display: 'inline-block',
-    width: "".concat(actionsSeparatorWidth, "px"),
-    color: "".concat("var(--ds-text-subtle, ".concat(_colors.N500, ")")),
-    content: '"·"',
-    textAlign: 'center',
-    verticalAlign: 'middle'
-  }
-});
 /**
  * __Section message action__
  *
  * A section message action is designed to work with the `action` prop from
  * `SectionMessage`. It renders either a button or a link depending on whether
- * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-
 var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessageAction(_ref) {
   var children = _ref.children,
       onClick = _ref.onClick,
       href = _ref.href,
       testId = _ref.testId,
       linkComponent = _ref.linkComponent;
-  return (0, _react2.jsx)("li", {
-    css: actionStyles,
-    "data-testid": testId
-  }, onClick || href ? (0, _react2.jsx)(_standardButton.default, {
+  // FIXME: This path doesn't make sense
+  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
+  // makes the use case invalid. This should be addressed.
+  return onClick || href ? /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    testId: testId,
     appearance: "link",
     spacing: "none",
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : children);
+  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 });
 SectionMessageAction.displayName = 'SectionMessageAction';
 var _default = SectionMessageAction;

package/dist/cjs/section-message.js

@@ -9,19 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = require("@emotion/react");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
-var _constants = require("@atlaskit/theme/constants");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 
-var _typography = require("@atlaskit/theme/typography");
+var _colors = require("@atlaskit/theme/colors");
 
 var _appearanceIcon = require("./internal/appearance-icon");
 
@@ -29,98 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsx jsx */
-var spacing = (0, _constants.gridSize)();
-var titleMarginBottom = spacing;
-var containerPadding = spacing * 2;
-var actionMarginTop = spacing;
-var iconWrapperWidth = spacing * 5;
-var titleColor = {
-  light: "var(--ds-text, ".concat(_colors.N800, ")"),
-  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
-};
-var containerStyles = (0, _react2.css)({
-  display: 'flex',
-  padding: "".concat(containerPadding, "px"),
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px")
-});
-var contentContainerStyles = (0, _react2.css)({
-  flexGrow: 1,
-  wordBreak: 'break-word'
-});
-var titleStyles = (0, _react2.css)({
-  margin: "0 0 ".concat(titleMarginBottom, "px"),
-  fontSize: "".concat(_typography.headingSizes.h500.size / (0, _constants.fontSize)(), "em"),
-  fontStyle: 'inherit',
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: "".concat(_typography.headingSizes.h500.lineHeight / _typography.headingSizes.h500.size)
-});
-var actionsStyles = (0, _react2.css)({
-  display: 'flex',
-  marginTop: "".concat(actionMarginTop, "px"),
-  paddingLeft: 0,
-  flexWrap: 'wrap',
-  listStyle: 'none'
-}); // If the icon is not wrapped in a div with a width, and we instead use margin or
-// padding, the icon is shrunk by the padding.
-// Since the icons will have a consistent size, we can treat them as pre-calculated
-// space.
-
-var iconWrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  margin: '-2px 0',
-  flex: "0 0 ".concat(iconWrapperWidth, "px")
-});
-var SectionMessageWithMode = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(_ref, ref) {
-  var children = _ref.children,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
-      actions = _ref.actions,
-      title = _ref.title,
-      icon = _ref.icon,
-      testId = _ref.testId,
-      mode = _ref.mode;
-
-  var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon),
-      backgroundColor = _getAppearanceIconSty.backgroundColor,
-      primaryIconColor = _getAppearanceIconSty.primaryIconColor,
-      Icon = _getAppearanceIconSty.Icon;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-  var containerStyleWithBackground = (0, _react.useMemo)(function () {
-    return {
-      backgroundColor: backgroundColor
-    };
-  }, [backgroundColor]);
-  var memoizedTitleColor = (0, _react.useMemo)(function () {
-    return {
-      color: titleColor[mode]
-    };
-  }, [mode]);
-
-  var actionsArray = _react.default.Children.toArray(actions);
-
-  return (0, _react2.jsx)("section", {
-    css: containerStyles,
-    style: containerStyleWithBackground,
-    "data-testid": testId,
-    ref: ref
-  }, (0, _react2.jsx)("div", {
-    css: iconWrapperStyles
-  }, (0, _react2.jsx)(Icon, {
-    primaryColor: primaryIconColor,
-    secondaryColor: backgroundColor
-  })), (0, _react2.jsx)("div", {
-    css: contentContainerStyles,
-    "data-testid": testId && "".concat(testId, "--content")
-  }, title ? (0, _react2.jsx)("h1", {
-    css: titleStyles,
-    style: memoizedTitleColor
-  }, title) : null, (0, _react2.jsx)("div", null, children), actionsArray.length > 0 ? (0, _react2.jsx)("ul", {
-    css: actionsStyles,
-    "data-testid": testId && "".concat(testId, "--actions")
-  }, actionsArray) : null));
-});
 /**
  * __Section message__
  *
@@ -130,16 +34,66 @@ var SectionMessageWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Sectio
  * - [Code](https://atlassian.design/components/section-message/code)
  * - [Usage](https://atlassian.design/components/section-message/usage)
  */
+var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(_ref, ref) {
+  var children = _ref.children,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
+      actions = _ref.actions,
+      title = _ref.title,
+      icon = _ref.icon,
+      testId = _ref.testId;
 
-var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(props, ref) {
-  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(SectionMessageWithMode, (0, _extends2.default)({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
+  var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon),
+      primaryColor = _getAppearanceIconSty.primaryIconColor,
+      secondaryColor = _getAppearanceIconSty.backgroundColor,
+      Icon = _getAppearanceIconSty.Icon;
+
+  var actionElements = actions && actions.type === _react.default.Fragment ? actions.props.children : actions;
+
+  var actionsArray = _react.default.Children.toArray(actionElements);
+
+  return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
+    as: "section",
+    backgroundColor: [appearanceMap[appearance], secondaryColor],
+    padding: "sp-200",
+    borderRadius: "normal",
+    testId: testId,
+    ref: ref,
+    UNSAFE_style: {
+      wordBreak: 'break-word'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Inline, {
+    gap: "sp-200"
+  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
+    UNSAFE_style: {
+      margin: '-2px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    size: "medium",
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor
+  })), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Stack, {
+    gap: "sp-100",
+    testId: testId && "".concat(testId, "--content")
+  }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
+    as: "h2",
+    level: "h500"
+  }, title), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, null, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Inline, {
+    flexWrap: "wrap",
+    testId: testId && "".concat(testId, "--actions"),
+    divider: /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, {
+      color: ['subtle', _colors.N500]
+    }, "\xB7"),
+    gap: "sp-75"
+  }, actionsArray))));
 });
+var appearanceMap = {
+  information: 'information',
+  warning: 'warning',
+  error: 'danger',
+  success: 'success',
+  discovery: 'discovery'
+};
 SectionMessage.displayName = 'SectionMessage';
 var _default = SectionMessage;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"sideEffects": false
 }

package/dist/es2019/section-message-action.js

@@ -1,34 +1,15 @@
-/** @jsx jsx */
-import { memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
-import { N500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-const actionsSeparatorWidth = gridSize() * 2;
-const actionStyles = css({
-  display: 'flex',
-  margin: 0,
-  alignItems: 'center',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '&:not(:last-child)::after': {
-    display: 'inline-block',
-    width: `${actionsSeparatorWidth}px`,
-    color: `${`var(--ds-text-subtle, ${N500})`}`,
-    content: '"·"',
-    textAlign: 'center',
-    verticalAlign: 'middle'
-  }
-});
+
 /**
  * __Section message action__
  *
  * A section message action is designed to work with the `action` prop from
  * `SectionMessage`. It renders either a button or a link depending on whether
- * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-
 const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
   children,
   onClick,
@@ -36,16 +17,17 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
   testId,
   linkComponent
 }) {
-  return jsx("li", {
-    css: actionStyles,
-    "data-testid": testId
-  }, onClick || href ? jsx(Button, {
+  // FIXME: This path doesn't make sense
+  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
+  // makes the use case invalid. This should be addressed.
+  return onClick || href ? /*#__PURE__*/React.createElement(Button, {
+    testId: testId,
     appearance: "link",
     spacing: "none",
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : children);
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
 SectionMessageAction.displayName = 'SectionMessageAction';
 export default SectionMessageAction;

package/dist/es2019/section-message.js

@@ -1,97 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import React, { forwardRef, useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { DN600, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { headingSizes } from '@atlaskit/theme/typography';
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React, { forwardRef } from 'react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Heading from '@atlaskit/heading';
+import { N500 } from '@atlaskit/theme/colors';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
-const spacing = gridSize();
-const titleMarginBottom = spacing;
-const containerPadding = spacing * 2;
-const actionMarginTop = spacing;
-const iconWrapperWidth = spacing * 5;
-const titleColor = {
-  light: `var(--ds-text, ${N800})`,
-  dark: `var(--ds-text, ${DN600})`
-};
-const containerStyles = css({
-  display: 'flex',
-  padding: `${containerPadding}px`,
-  borderRadius: `${borderRadius()}px`
-});
-const contentContainerStyles = css({
-  flexGrow: 1,
-  wordBreak: 'break-word'
-});
-const titleStyles = css({
-  margin: `0 0 ${titleMarginBottom}px`,
-  fontSize: `${headingSizes.h500.size / fontSize()}em`,
-  fontStyle: 'inherit',
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: `${headingSizes.h500.lineHeight / headingSizes.h500.size}`
-});
-const actionsStyles = css({
-  display: 'flex',
-  marginTop: `${actionMarginTop}px`,
-  paddingLeft: 0,
-  flexWrap: 'wrap',
-  listStyle: 'none'
-}); // If the icon is not wrapped in a div with a width, and we instead use margin or
-// padding, the icon is shrunk by the padding.
-// Since the icons will have a consistent size, we can treat them as pre-calculated
-// space.
 
-const iconWrapperStyles = css({
-  display: 'flex',
-  margin: '-2px 0',
-  flex: `0 0 ${iconWrapperWidth}px`
-});
-const SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage({
-  children,
-  appearance = 'information',
-  actions,
-  title,
-  icon,
-  testId,
-  mode
-}, ref) {
-  const {
-    backgroundColor,
-    primaryIconColor,
-    Icon
-  } = getAppearanceIconStyles(appearance, icon);
-  const containerStyleWithBackground = useMemo(() => ({
-    backgroundColor: backgroundColor
-  }), [backgroundColor]);
-  const memoizedTitleColor = useMemo(() => ({
-    color: titleColor[mode]
-  }), [mode]);
-  const actionsArray = React.Children.toArray(actions);
-  return jsx("section", {
-    css: containerStyles,
-    style: containerStyleWithBackground,
-    "data-testid": testId,
-    ref: ref
-  }, jsx("div", {
-    css: iconWrapperStyles
-  }, jsx(Icon, {
-    primaryColor: primaryIconColor,
-    secondaryColor: backgroundColor
-  })), jsx("div", {
-    css: contentContainerStyles,
-    "data-testid": testId && `${testId}--content`
-  }, title ? jsx("h1", {
-    css: titleStyles,
-    style: memoizedTitleColor
-  }, title) : null, jsx("div", null, children), actionsArray.length > 0 ? jsx("ul", {
-    css: actionsStyles,
-    "data-testid": testId && `${testId}--actions`
-  }, actionsArray) : null));
-});
 /**
  * __Section message__
  *
@@ -101,14 +14,62 @@ const SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage({
  * - [Code](https://atlassian.design/components/section-message/code)
  * - [Usage](https://atlassian.design/components/section-message/usage)
  */
-
-const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(SectionMessageWithMode, _extends({}, props, {
-    mode: mode,
-    ref: ref
-  })));
+const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
+  children,
+  appearance = 'information',
+  actions,
+  title,
+  icon,
+  testId
+}, ref) {
+  const {
+    primaryIconColor: primaryColor,
+    backgroundColor: secondaryColor,
+    Icon
+  } = getAppearanceIconStyles(appearance, icon);
+  const actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
+  const actionsArray = React.Children.toArray(actionElements);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "section",
+    backgroundColor: [appearanceMap[appearance], secondaryColor],
+    padding: "sp-200",
+    borderRadius: "normal",
+    testId: testId,
+    ref: ref,
+    UNSAFE_style: {
+      wordBreak: 'break-word'
+    }
+  }, /*#__PURE__*/React.createElement(Inline, {
+    gap: "sp-200"
+  }, /*#__PURE__*/React.createElement(Box, {
+    UNSAFE_style: {
+      margin: '-2px 0'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "medium",
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor
+  })), /*#__PURE__*/React.createElement(Stack, {
+    gap: "sp-100",
+    testId: testId && `${testId}--content`
+  }, !!title && /*#__PURE__*/React.createElement(Heading, {
+    as: "h2",
+    level: "h500"
+  }, title), /*#__PURE__*/React.createElement(Text, null, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
+    flexWrap: "wrap",
+    testId: testId && `${testId}--actions`,
+    divider: /*#__PURE__*/React.createElement(Text, {
+      color: ['subtle', N500]
+    }, "\xB7"),
+    gap: "sp-75"
+  }, actionsArray))));
 });
+const appearanceMap = {
+  information: 'information',
+  warning: 'warning',
+  error: 'danger',
+  success: 'success',
+  discovery: 'discovery'
+};
 SectionMessage.displayName = 'SectionMessage';
 export default SectionMessage;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"sideEffects": false
 }

package/dist/esm/section-message-action.js

@@ -1,50 +1,32 @@
-/** @jsx jsx */
-import { memo } from 'react';
-import { css, jsx } from '@emotion/react';
+import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
-import { N500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
-var actionsSeparatorWidth = gridSize() * 2;
-var actionStyles = css({
-  display: 'flex',
-  margin: 0,
-  alignItems: 'center',
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '&:not(:last-child)::after': {
-    display: 'inline-block',
-    width: "".concat(actionsSeparatorWidth, "px"),
-    color: "".concat("var(--ds-text-subtle, ".concat(N500, ")")),
-    content: '"·"',
-    textAlign: 'center',
-    verticalAlign: 'middle'
-  }
-});
+
 /**
  * __Section message action__
  *
  * A section message action is designed to work with the `action` prop from
  * `SectionMessage`. It renders either a button or a link depending on whether
- * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-
 var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref) {
   var children = _ref.children,
       onClick = _ref.onClick,
       href = _ref.href,
       testId = _ref.testId,
       linkComponent = _ref.linkComponent;
-  return jsx("li", {
-    css: actionStyles,
-    "data-testid": testId
-  }, onClick || href ? jsx(Button, {
+  // FIXME: This path doesn't make sense
+  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
+  // makes the use case invalid. This should be addressed.
+  return onClick || href ? /*#__PURE__*/React.createElement(Button, {
+    testId: testId,
     appearance: "link",
     spacing: "none",
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : children);
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
 SectionMessageAction.displayName = 'SectionMessageAction';
 export default SectionMessageAction;

package/dist/esm/section-message.js

@@ -1,102 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import React, { forwardRef, useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { DN600, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { headingSizes } from '@atlaskit/theme/typography';
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import React, { forwardRef } from 'react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import Heading from '@atlaskit/heading';
+import { N500 } from '@atlaskit/theme/colors';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
-var spacing = gridSize();
-var titleMarginBottom = spacing;
-var containerPadding = spacing * 2;
-var actionMarginTop = spacing;
-var iconWrapperWidth = spacing * 5;
-var titleColor = {
-  light: "var(--ds-text, ".concat(N800, ")"),
-  dark: "var(--ds-text, ".concat(DN600, ")")
-};
-var containerStyles = css({
-  display: 'flex',
-  padding: "".concat(containerPadding, "px"),
-  borderRadius: "".concat(borderRadius(), "px")
-});
-var contentContainerStyles = css({
-  flexGrow: 1,
-  wordBreak: 'break-word'
-});
-var titleStyles = css({
-  margin: "0 0 ".concat(titleMarginBottom, "px"),
-  fontSize: "".concat(headingSizes.h500.size / fontSize(), "em"),
-  fontStyle: 'inherit',
-  fontWeight: 600,
-  letterSpacing: '-0.006em',
-  lineHeight: "".concat(headingSizes.h500.lineHeight / headingSizes.h500.size)
-});
-var actionsStyles = css({
-  display: 'flex',
-  marginTop: "".concat(actionMarginTop, "px"),
-  paddingLeft: 0,
-  flexWrap: 'wrap',
-  listStyle: 'none'
-}); // If the icon is not wrapped in a div with a width, and we instead use margin or
-// padding, the icon is shrunk by the padding.
-// Since the icons will have a consistent size, we can treat them as pre-calculated
-// space.
-
-var iconWrapperStyles = css({
-  display: 'flex',
-  margin: '-2px 0',
-  flex: "0 0 ".concat(iconWrapperWidth, "px")
-});
-var SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref) {
-  var children = _ref.children,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
-      actions = _ref.actions,
-      title = _ref.title,
-      icon = _ref.icon,
-      testId = _ref.testId,
-      mode = _ref.mode;
 
-  var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon),
-      backgroundColor = _getAppearanceIconSty.backgroundColor,
-      primaryIconColor = _getAppearanceIconSty.primaryIconColor,
-      Icon = _getAppearanceIconSty.Icon;
-
-  var containerStyleWithBackground = useMemo(function () {
-    return {
-      backgroundColor: backgroundColor
-    };
-  }, [backgroundColor]);
-  var memoizedTitleColor = useMemo(function () {
-    return {
-      color: titleColor[mode]
-    };
-  }, [mode]);
-  var actionsArray = React.Children.toArray(actions);
-  return jsx("section", {
-    css: containerStyles,
-    style: containerStyleWithBackground,
-    "data-testid": testId,
-    ref: ref
-  }, jsx("div", {
-    css: iconWrapperStyles
-  }, jsx(Icon, {
-    primaryColor: primaryIconColor,
-    secondaryColor: backgroundColor
-  })), jsx("div", {
-    css: contentContainerStyles,
-    "data-testid": testId && "".concat(testId, "--content")
-  }, title ? jsx("h1", {
-    css: titleStyles,
-    style: memoizedTitleColor
-  }, title) : null, jsx("div", null, children), actionsArray.length > 0 ? jsx("ul", {
-    css: actionsStyles,
-    "data-testid": testId && "".concat(testId, "--actions")
-  }, actionsArray) : null));
-});
 /**
  * __Section message__
  *
@@ -106,15 +14,63 @@ var SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage(_re
  * - [Code](https://atlassian.design/components/section-message/code)
  * - [Usage](https://atlassian.design/components/section-message/usage)
  */
+var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref) {
+  var children = _ref.children,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'information' : _ref$appearance,
+      actions = _ref.actions,
+      title = _ref.title,
+      icon = _ref.icon,
+      testId = _ref.testId;
+
+  var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon),
+      primaryColor = _getAppearanceIconSty.primaryIconColor,
+      secondaryColor = _getAppearanceIconSty.backgroundColor,
+      Icon = _getAppearanceIconSty.Icon;
 
-var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(SectionMessageWithMode, _extends({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
+  var actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
+  var actionsArray = React.Children.toArray(actionElements);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "section",
+    backgroundColor: [appearanceMap[appearance], secondaryColor],
+    padding: "sp-200",
+    borderRadius: "normal",
+    testId: testId,
+    ref: ref,
+    UNSAFE_style: {
+      wordBreak: 'break-word'
+    }
+  }, /*#__PURE__*/React.createElement(Inline, {
+    gap: "sp-200"
+  }, /*#__PURE__*/React.createElement(Box, {
+    UNSAFE_style: {
+      margin: '-2px 0'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: "medium",
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor
+  })), /*#__PURE__*/React.createElement(Stack, {
+    gap: "sp-100",
+    testId: testId && "".concat(testId, "--content")
+  }, !!title && /*#__PURE__*/React.createElement(Heading, {
+    as: "h2",
+    level: "h500"
+  }, title), /*#__PURE__*/React.createElement(Text, null, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
+    flexWrap: "wrap",
+    testId: testId && "".concat(testId, "--actions"),
+    divider: /*#__PURE__*/React.createElement(Text, {
+      color: ['subtle', N500]
+    }, "\xB7"),
+    gap: "sp-75"
+  }, actionsArray))));
 });
+var appearanceMap = {
+  information: 'information',
+  warning: 'warning',
+  error: 'danger',
+  success: 'success',
+  discovery: 'discovery'
+};
 SectionMessage.displayName = 'SectionMessage';
 export default SectionMessage;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"sideEffects": false
 }

package/dist/types/section-message-action.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
 import type { SectionMessageActionProps } from './types';
 /**
  * __Section message action__
  *
  * A section message action is designed to work with the `action` prop from
  * `SectionMessage`. It renders either a button or a link depending on whether
- * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
+declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
 export default SectionMessageAction;

package/dist/types/section-message.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import type { SectionMessageProps } from './types';
 /**

package/dist/types-ts4.0/entry-points/section-message-action.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../section-message-action';
+export type { SectionMessageActionProps } from '../types';

package/dist/types-ts4.0/entry-points/section-message.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../section-message';
+export type { SectionMessageProps } from '../types';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { Appearance, SectionMessageProps, SectionMessageActionProps, } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './section-message';
+export { default as SectionMessageAction } from './section-message-action';
+export type { Appearance, SectionMessageProps, SectionMessageActionProps, } from './types';

package/dist/types-ts4.0/internal/appearance-icon.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType } from 'react';
+import type { Appearance, SectionMessageProps } from '../types';
+interface AppearanceIconSchema {
+    backgroundColor: string;
+    primaryIconColor: string;
+    Icon: ComponentType<any>;
+}
+export declare const appearanceIconSchema: {
+    [key in Appearance]: AppearanceIconSchema;
+};
+export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
+    Icon: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
+    backgroundColor: string;
+    primaryIconColor: string;
+};
+export {};

package/dist/types-ts4.0/section-message-action.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SectionMessageActionProps } from './types';
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
+export default SectionMessageAction;

package/dist/types-ts4.0/section-message.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SectionMessageProps } from './types';
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
+declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
+export default SectionMessage;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+/**
+ * Appearance determines the icon and background color pairing indicating the message type
+ */
+export declare type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
+export interface SectionMessageProps {
+    /**
+     * The appearance styling to use for the section message.
+     */
+    appearance?: Appearance;
+    /**
+     * The main content of the section message. This accepts a react node, although
+     * we recommend that this should be a paragraph.
+     */
+    children: React.ReactNode;
+    /**
+     * The heading of the section message.
+     */
+    title?: string;
+    /**
+     * Actions for the user to take after reading the section message. Accepts a ReactElement
+     * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
+     * Middle dots are automatically added between multiple link buttons, so no elements
+     * should be present between multiple actions.
+     *
+     * In general, avoid using more than two actions.
+     */
+    actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
+    /**
+     * An Icon component to be rendered instead of the default icon for the component.
+     * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
+     * to see how to provide this icon.
+     */
+    icon?: React.ElementType;
+    /**
+     * A `testId` prop is a unique string that appears as a data attribute `data-testid`
+     * in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+export interface SectionMessageActionProps {
+    /**
+     * The text that needs to be displayed for section message action.
+     */
+    children: React.ReactNode;
+    /**
+     * A custom link component. This prop is designed to allow a custom link
+     * component to be passed to the rendered link button. The
+     * intended use-case is for when a custom router component such as react router
+     * is being used within the application.
+     *
+     * This component will only be used if a href prop is passed.
+     */
+    linkComponent?: React.ComponentType<any>;
+    /**
+     * Click handler which will be attached to the rendered link button. The second argument can be used to
+     * track analytics data. See the tutorial in the analytics-next package for details.
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * The URL that the rendered link button will point to.
+     */
+    href?: string;
+    /**
+     * A `testId` prop is a unique string that appears as a data attribute `data-testid`
+     * in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -31,33 +38,34 @@
   "dependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/heading": "^0.1.13",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.1.2",
-    "@atlaskit/code": "^14.3.0",
+    "@atlaskit/code": "^14.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/range": "^6.0.0",
+    "@atlaskit/range": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "exenv": "^1.2.2",
     "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -66,11 +74,13 @@
     "@repo/internal": {
       "design-system": "v1",
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
       "styling": [
-        "static",
-        "emotion"
+        "static"
       ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"

package/report.api.md

@@ -1,16 +1,17 @@
-## API Report File for "@atlaskit/section-message"
+## API Report File for "@atlaskit/section-message".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
 
-```ts
-/// <reference types="react" />
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
-import { NamedExoticComponent } from 'react';
+```ts
 import { default as React_2 } from 'react';
 import type { ReactElement } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-/** Appearance determines the icon and background color pairing indicating the message type */
+/**
+ * Appearance determines the icon and background color pairing indicating the message type
+ */
 export declare type Appearance =
   | 'information'
   | 'warning'
@@ -18,15 +19,44 @@ export declare type Appearance =
   | 'success'
   | 'discovery';
 
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
 declare const SectionMessage: React_2.ForwardRefExoticComponent<
   SectionMessageProps & React_2.RefAttributes<HTMLElement>
 >;
 export default SectionMessage;
 
-export declare const SectionMessageAction: NamedExoticComponent<SectionMessageActionProps>;
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+export declare const SectionMessageAction: React_2.NamedExoticComponent<SectionMessageActionProps>;
 
 export declare interface SectionMessageActionProps {
+  /**
+   * The text that needs to be displayed for section message action.
+   */
   children: React.ReactNode;
+  /**
+   * A custom link component. This prop is designed to allow a custom link
+   * component to be passed to the rendered link button. The
+   * intended use-case is for when a custom router component such as react router
+   * is being used within the application.
+   *
+   * This component will only be used if a href prop is passed.
+   */
   linkComponent?: React.ComponentType<any>;
   /**
    * Click handler which will be attached to the rendered link button. The second argument can be used to
@@ -40,16 +70,46 @@ export declare interface SectionMessageActionProps {
    * The URL that the rendered link button will point to.
    */
   href?: string;
+  /**
+   * A `testId` prop is a unique string that appears as a data attribute `data-testid`
+   * in the rendered code, serving as a hook for automated tests.
+   */
   testId?: string;
 }
 
 export declare interface SectionMessageProps {
-  /** The appearance styling to use for the section message. */
+  /**
+   * The appearance styling to use for the section message.
+   */
   appearance?: Appearance;
+  /**
+   * The main content of the section message. This accepts a react node, although
+   * we recommend that this should be a paragraph.
+   */
   children: React.ReactNode;
+  /**
+   * The heading of the section message.
+   */
   title?: string;
+  /**
+   * Actions for the user to take after reading the section message. Accepts a ReactElement
+   * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
+   * Middle dots are automatically added between multiple link buttons, so no elements
+   * should be present between multiple actions.
+   *
+   * In general, avoid using more than two actions.
+   */
   actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
+  /**
+   * An Icon component to be rendered instead of the default icon for the component.
+   * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
+   * to see how to provide this icon.
+   */
   icon?: React.ElementType;
+  /**
+   * A `testId` prop is a unique string that appears as a data attribute `data-testid`
+   * in the rendered code, serving as a hook for automated tests.
+   */
   testId?: string;
 }
 

package/section-message/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/section-message.js",
   "module:es2019": "../dist/es2019/entry-points/section-message.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/section-message.d.ts"
+  "types": "../dist/types/entry-points/section-message.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/section-message.d.ts"
+      ]
+    }
+  }
 }

package/section-message-action/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/section-message-action.js",
   "module:es2019": "../dist/es2019/entry-points/section-message-action.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/section-message-action.d.ts"
+  "types": "../dist/types/entry-points/section-message-action.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/section-message-action.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/types.d.ts"
+  "types": "../dist/types/entry-points/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/types.d.ts"
+      ]
+    }
+  }
 }