@atlaskit/help-layout 5.0.5 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/help-layout
 
+## 6.0.1
+
+### Patch Changes
+
+- [#143181](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143181)
+  [`7f74322e75b83`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f74322e75b83) -
+  Removed `styled-components` from peer dependencies.
+
+## 6.0.0
+
+### Major Changes
+
+- [#142027](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142027)
+  [`92f1353dc03cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/92f1353dc03cc) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/help-layout`, you will need to ensure that
+  your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
+  support for `.css` imports, so you may not need to do anything. If you are using a different
+  bundler, please refer to the documentation for that bundler to understand how to handle `.css`
+  imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.5
 
 ### Patch Changes

package/analytics/package.json

@@ -4,7 +4,7 @@
   "module": "../dist/esm/analytics.js",
   "module:es2019": "../dist/es2019/analytics.js",
   "sideEffects": [
-    "*.compiled.css"
+    "**/*.compiled.css"
   ],
   "types": "../dist/types/analytics.d.ts",
   "typesVersions": {

package/dist/cjs/analytics.js

@@ -14,5 +14,5 @@ var createAndFire = exports.createAndFire = x.createAndFireEvent('atlaskit');
 var defaultAnalyticsAttributes = exports.defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "5.0.5"
+  packageVersion: "6.0.1"
 };

package/dist/cjs/components/Header/BackButton.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BackButton = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -13,26 +12,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _messages = require("../../messages");
-var _constants = require("../constants");
 var _styled = require("./styled");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// Animation
-var defaultStyle = {
-  transition: "left ".concat(_constants.TRANSITION_DURATION_MS, "ms, opacity ").concat(_constants.TRANSITION_DURATION_MS, "ms"),
-  left: "var(--ds-space-300, 24px)",
-  opacity: 0
-};
-var transitionStyles = {
-  entered: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 1
-  },
-  exited: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 0
-  }
-};
 var BackButton = exports.BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
     _ref$isVisible = _ref.isVisible,
@@ -50,12 +30,12 @@ var BackButton = exports.BackButton = function BackButton(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isVisible,
-    timeout: _constants.TRANSITION_DURATION_MS,
+    timeout: _styled.TRANSITION_DURATION_MS,
     mountOnEnter: true,
     unmountOnExit: true
   }, function (state) {
     return /*#__PURE__*/_react.default.createElement(_styled.BackButtonContainer, {
-      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+      transitionState: state
     }, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       onClick: function onClick(event) {
         if (state === 'entered') {
@@ -76,7 +56,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.5"
+      packageVersion: "6.0.1"
     }
   }, /*#__PURE__*/_react.default.createElement(BackButton, props));
 };

package/dist/cjs/components/Header/CloseButton.js

@@ -64,7 +64,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.5"
+      packageVersion: "6.0.1"
     }
   }, /*#__PURE__*/_react.default.createElement(CloseButton, props));
 };

package/dist/cjs/components/Header/styled.compiled.css

@@ -0,0 +1,31 @@
+._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._v5641kw6{transition:var(--_ejvfk7)}
+._n7zl3yx5{border-bottom:var(--_1it2dty)}
+._154i1q64{top:var(--ds-space-200,15px)}
+._154iutpp{top:var(--ds-space-150,9pt)}
+._18m915vq{overflow-y:hidden}
+._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsbb8xr{width:var(--_2br7en)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1o8l{display:inline-block}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1reo15vq{overflow-x:hidden}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._bfhk1v7z{background-color:var(--_1xglsrh)}
+._ca0qidpf{padding-top:0}
+._ca0qoybe{padding-top:var(--ds-space-250,18px)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._o5721q9c{white-space:nowrap}
+._s7n4nkob{vertical-align:middle}
+._syaz1425{color:var(--_13a5t4u)}
+._tzy4idpf{opacity:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vwz41u3r{line-height:var(--ds-space-800,56px)}
+._y3gn1e5h{text-align:left}
+._y3gn1h6o{text-align:center}

package/dist/cjs/components/Header/styled.js

@@ -1,88 +1,90 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeaderTitleAi = exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainerAi = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HeaderContainer = exports.HeaderContainer = _styled.default.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
-  justifyContent: 'space-between',
-  position: 'relative'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CloseButtonContainer = exports.CloseButtonContainer = _styled.default.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var CloseButtonContainerAi = exports.CloseButtonContainerAi = _styled.default.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-200, 15px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var BackButtonContainer = exports.BackButtonContainer = _styled.default.div({
-  position: 'absolute',
-  top: "var(--ds-space-150, 12px)",
-  left: "var(--ds-space-100, 8px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HeaderTitle = exports.HeaderTitle = _styled.default.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
-  textAlign: 'center',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "var(--ds-space-800, 56px)",
-  width: '100%',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  verticalAlign: 'middle'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HeaderTitleAi = exports.HeaderTitleAi = _styled.default.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
-  textAlign: 'left',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  paddingTop: "var(--ds-space-250, 18px)",
-  paddingBottom: "var(--ds-space-200, 16px)",
-  width: "calc(100% - ".concat("var(--ds-space-200, 16px)", ")"),
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  verticalAlign: 'middle',
-  marginLeft: "var(--ds-space-200, 16px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HeaderContent = exports.HeaderContent = _styled.default.div({
-  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
-});
+exports.TRANSITION_DURATION_MS = exports.HeaderTitleAi = exports.HeaderTitle = exports.HeaderContent = exports.HeaderContainer = exports.CloseButtonContainerAi = exports.CloseButtonContainer = exports.BackButtonContainer = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var headerContainerStyles = null;
+var HeaderContainer = exports.HeaderContainer = function HeaderContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_n7zl3yx5 _bfhk1v7z _1bah1yb4 _kqswh2mm"]),
+    style: {
+      "--_1xglsrh": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N10, ")")),
+      "--_1it2dty": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30, ")")))
+    }
+  }, children);
+};
+var closeButtonContainerStyles = null;
+var CloseButtonContainer = exports.CloseButtonContainer = function CloseButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _1xi2u2gc _154iutpp"])
+  }, children);
+};
+var closeButtonContainerAiStyles = null;
+var CloseButtonContainerAi = exports.CloseButtonContainerAi = function CloseButtonContainerAi(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _1xi2u2gc _154i1q64"])
+  }, children);
+};
+var TRANSITION_DURATION_MS = exports.TRANSITION_DURATION_MS = 220;
+var backButtonContainerStyles = null;
+var backButtonContainerTransitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+var BackButtonContainer = exports.BackButtonContainer = function BackButtonContainer(_ref4) {
+  var transitionState = _ref4.transitionState,
+    children = _ref4.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
+    style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
+      "--_ejvfk7": (0, _runtime.ix)("left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"))
+    })
+  }, children);
+};
+var headerTitleStyles = null;
+var HeaderTitle = exports.HeaderTitle = function HeaderTitle(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/_react.default.createElement("h1", {
+    className: (0, _runtime.ax)(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"]),
+    style: {
+      "--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")"))
+    }
+  }, children);
+};
+var headerTitleAiStyles = null;
+var HeaderTitleAi = exports.HeaderTitleAi = function HeaderTitleAi(_ref6) {
+  var children = _ref6.children;
+  return /*#__PURE__*/_react.default.createElement("h1", {
+    className: (0, _runtime.ax)(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbb8xr _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"]),
+    style: {
+      "--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")")),
+      "--_2br7en": (0, _runtime.ix)("calc(100% - ".concat("var(--ds-space-200, 16px)", ")"))
+    }
+  }, children);
+};
+var headerContentStyles = null;
+var HeaderContent = exports.HeaderContent = function HeaderContent(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
+  }, children);
+};

package/dist/cjs/components/HelpLayoutContent.js

@@ -44,7 +44,7 @@ var HelpContent = exports.HelpContent = function HelpContent(props) {
   }), /*#__PURE__*/_react.default.createElement(_styled.LoadingRectangle, {
     contentWidth: "70%"
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children), footer ? /*#__PURE__*/_react.default.createElement(_styled.HelpFooter, {
-    "data-testid": "footer"
+    dataTestId: "footer"
   }, footer) : null));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(HelpContent);

package/dist/cjs/components/constants.js

@@ -1,8 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TRANSITION_DURATION_MS = void 0;
-// Animation related consts
-var TRANSITION_DURATION_MS = exports.TRANSITION_DURATION_MS = 220;
+"use strict";

package/dist/cjs/components/styled.compiled.css

@@ -0,0 +1,36 @@
+
+._2rkov77o{border-radius:var(--ds-space-025,2px)}
+._x3do3yx5{border-top:var(--_1it2dty)}._12vemgnk{background-repeat:no-repeat}
+._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._19bvidpf{padding-left:0}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1itkwhjv{background-image:var(--_4aeagh)}
+._1ltvidpf{left:0}
+._1o51q7pw{animation-fill-mode:forwards}
+._1pglp3kn{animation-timing-function:linear}
+._1tkeidpf{min-height:0}
+._2lx21bp4{flex-direction:column}
+._4t3i1e9d{height:var(--ds-space-200,1rem)}
+._4t3i1osq{height:100%}
+._5sag126j{animation-duration:1.2s}
+._94n5idpf{bottom:0}
+._bfhk1v7z{background-color:var(--_1xglsrh)}
+._bfhkptpz{background-color:var(--_19g1tth)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._j7hq1en8{animation-name:k6xje6p}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._tip812c5{animation-iteration-count:infinite}
+._u5f3idpf{padding-right:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+@keyframes k6xje6p{0%{background-position:-300px 0}to{background-position:750pt 0}}

package/dist/cjs/components/styled.js

@@ -1,90 +1,73 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.HelpFooter = exports.DividerLine = exports.Container = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-var _templateObject;
+exports.Section = exports.LoadingRectangle = exports.LoadingContainer = exports.HelpFooter = exports.Container = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["children"];
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var Container = exports.Container = _styled.default.div({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface, #FFFFFF)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var Section = exports.Section = _styled.default.div({
-  flexGrow: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var DividerLine = exports.DividerLine = _styled.default.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
-  height: "var(--ds-space-025, 2px)",
-  width: '100%',
-  padding: "0 ".concat("var(--ds-space-200, 16px)"),
-  marginTop: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HelpFooter = exports.HelpFooter = _styled.default.div({
-  padding: "var(--ds-space-100, 8px)".concat(" 0"),
-  boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderTop: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
-  justifyContent: 'space-between'
-});
+var containerStyles = null;
+var Container = exports.Container = function Container(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _94n5idpf _1ltvidpf _1bsb1osq _1e0c1txw _2lx21bp4 _bfhkvuon"])
+  }, children);
+};
+var sectionStyles = null;
+var Section = exports.Section = function Section(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1e0c1txw _2lx21bp4 _1tkeidpf"])
+  }, children);
+};
+var helpFooterStyles = null;
+var HelpFooter = exports.HelpFooter = function HelpFooter(_ref3) {
+  var dataTestId = _ref3.dataTestId,
+    children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": dataTestId,
+    className: (0, _runtime.ax)(["_x3do3yx5 _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _bfhk1v7z _1bah1yb4"]),
+    style: {
+      "--_1xglsrh": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N10, ")")),
+      "--_1it2dty": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N30, ")")))
+    }
+  }, children);
+};
 
 /**
  * Loading
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LoadingContainer = exports.LoadingContainer = _styled.default.div({
-  padding: "var(--ds-space-200, 16px)",
-  height: '100%'
-});
-var shimmer = (0, _react.keyframes)({
-  '0%': {
-    backgroundPosition: '-300px 0'
-  },
-  '100%': {
-    backgroundPosition: '1000px 0'
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\theight: ", ";\n\tmargin-top: ", ";\n\twidth: ", ";\n\tborder-radius: ", ";\n\tanimation-duration: 1.2s;\n\tanimation-fill-mode: forwards;\n\tanimation-iteration-count: infinite;\n\tanimation-name: ", ";\n\tanimation-timing-function: linear;\n\tbackground-color: ", ";\n\tbackground-image: linear-gradient(\n\t\tto right,\n\t\t", " 10%,\n\t\t", " 20%,\n\t\t", " 30%\n\t);\n\tbackground-repeat: no-repeat;\n"])), function (props) {
-  return props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)";
-}, function (props) {
-  return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
-}, function (props) {
-  return props.contentWidth ? props.contentWidth : '100%';
-}, "var(--ds-space-025, 2px)", shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
+var loadingContainerStyles = null;
+var LoadingContainer = exports.LoadingContainer = function LoadingContainer(_ref4) {
+  var children = _ref4.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _runtime.ax)(["_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _4t3i1osq"])
+  }), children);
+};
+var shimmer = null;
+var loadingRectangleStyles = null;
+var LoadingRectangle = exports.LoadingRectangle = function LoadingRectangle(_ref5) {
+  var contentWidth = _ref5.contentWidth,
+    contentHeight = _ref5.contentHeight,
+    marginTop = _ref5.marginTop;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_2rkov77o _kqswh2mm _4t3i1e9d _19pku2gc _1bsb1osq _5sag126j _1o51q7pw _tip812c5 _j7hq1en8 _1pglp3kn _bfhkptpz _1itkwhjv _12vemgnk"]),
+    style: {
+      width: contentWidth,
+      height: contentHeight,
+      marginTop: marginTop,
+      "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
+      "--_4aeagh": (0, _runtime.ix)("linear-gradient(\n\t\tto right,\n\t\t".concat("var(--ds-background-neutral-subtle, ".concat(_colors.N30, ")"), " 10%,\n\t\t", "var(--ds-background-neutral, ".concat(_colors.N40, ")"), " 20%,\n\t\t", "var(--ds-background-neutral-subtle, ".concat(_colors.N30, ")"), " 30%\n\t)"))
+    }
+  });
+};

package/dist/es2019/analytics.js

@@ -5,5 +5,5 @@ export const createAndFire = x.createAndFireEvent('atlaskit');
 export const defaultAnalyticsAttributes = {
   componentName: 'helpPanel',
   packageName: "@atlaskit/help-layout",
-  packageVersion: "5.0.5"
+  packageVersion: "6.0.1"
 };

package/dist/es2019/components/Header/BackButton.js

@@ -5,24 +5,7 @@ import { Transition } from 'react-transition-group';
 import ArrowleftIcon from '@atlaskit/icon/core/migration/arrow-left';
 import Button from '@atlaskit/button/standard-button';
 import { messages } from '../../messages';
-import { TRANSITION_DURATION_MS } from '../constants';
-import { BackButtonContainer } from './styled';
-// Animation
-const defaultStyle = {
-  transition: `left ${TRANSITION_DURATION_MS}ms, opacity ${TRANSITION_DURATION_MS}ms`,
-  left: "var(--ds-space-300, 24px)",
-  opacity: 0
-};
-const transitionStyles = {
-  entered: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 1
-  },
-  exited: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 0
-  }
-};
+import { BackButtonContainer, TRANSITION_DURATION_MS } from './styled';
 export const BackButton = ({
   onClick,
   isVisible = true,
@@ -47,12 +30,7 @@ export const BackButton = ({
     mountOnEnter: true,
     unmountOnExit: true
   }, state => /*#__PURE__*/React.createElement(BackButtonContainer, {
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...defaultStyle,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ...transitionStyles[state]
-    }
+    transitionState: state
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: event => {
       if (state === 'entered') {
@@ -72,7 +50,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.5"
+      packageVersion: "6.0.1"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/es2019/components/Header/CloseButton.js

@@ -61,7 +61,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.5"
+      packageVersion: "6.0.1"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };