@atlaskit/help 8.0.9 → 9.0.0

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

@@ -0,0 +1,36 @@
+
+._v5641tic{transition:var(--_m9bkgq)}
+._x3do3yx5{border-top:var(--_1it2dty)}._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bvidpf{padding-left:0}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkou31{margin-top:var(--ds-space-200,14px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1f49idpf{order:0}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1wpz1wug{align-self:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1osq{height:100%}
+._4t3ixy5q{height:var(--ds-space-400,2pc)}
+._ae4v1fhb{align-content:stretch}
+._bfhk1v7z{background-color:var(--_1xglsrh)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/components/styled.js

@@ -1,102 +1,99 @@
+/* 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.HomeAi = exports.Home = exports.HelpFooter = exports.HelpBodyContainer = exports.HelpBodyAi = exports.HelpBody = 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 HelpBodyContainer = exports.HelpBodyContainer = _styled.default.div({
-  flexGrow: 1,
-  minHeight: 0,
-  position: 'relative',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  flexWrap: 'nowrap',
-  justifyContent: 'space-between',
-  alignContent: 'stretch',
-  alignItems: 'flex-start'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HelpBody = exports.HelpBody = _styled.default.div({
-  width: '100%',
-  boxSizing: 'border-box',
-  order: 0,
-  flex: '1 1 auto',
-  alignSelf: 'auto',
-  position: 'relative',
-  overflowX: 'hidden',
-  overflowY: 'auto'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var HelpBodyAi = exports.HelpBodyAi = _styled.default.div({
-  width: '100%',
-  boxSizing: 'border-box',
-  order: 0,
-  flex: '1 1 auto',
-  alignSelf: 'auto',
-  position: 'relative'
-});
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-var Home = exports.Home = _styled.default.div(function (props) {
-  return {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    display: props.isOverlayFullyVisible ? 'none' : 'block',
-    height: '100%',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    overflow: props.isOverlayVisible ? 'hidden' : 'auto',
-    padding: "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, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-var HomeAi = exports.HomeAi = _styled.default.div(function (props) {
-  return {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    display: props.isOverlayFullyVisible ? 'none' : 'block',
-    // height: `calc(100% - ${token('space.800', '60px')})`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    overflow: props.isOverlayVisible ? 'hidden' : 'auto',
-    paddingLeft: "var(--ds-space-200, 16px)",
-    paddingRight: "var(--ds-space-200, 16px)",
-    paddingBottom: "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',
-  width: '100%',
-  // 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'
-});
-
-// 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',
-  marginTop: "var(--ds-space-200, 14px)",
-  left: "var(--ds-space-100, 8px)",
-  height: "var(--ds-space-400, 32px)"
-});
+exports.HomeAi = exports.Home = exports.HelpFooter = exports.HelpBodyContainer = exports.HelpBodyAi = exports.HelpBody = exports.BackButtonContainer = exports.BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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"];
+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 helpBodyContainerStyles = null;
+var HelpBodyContainer = exports.HelpBodyContainer = function HelpBodyContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1tkeidpf _kqswh2mm _18m91wug _1reo15vq _1e0c1txw _2lx21bp4 _1n261q9c _1bah1yb4 _ae4v1fhb _4cvr1y6m"])
+  }, children);
+};
+var helpBodyStyles = null;
+var HelpBody = exports.HelpBody = function HelpBody(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm _1reo15vq _18m91wug"])
+  }, children);
+};
+var helpBodyAiStyles = null;
+var HelpBodyAi = exports.HelpBodyAi = function HelpBodyAi(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm"])
+  }, children);
+};
+var homeStyles = null;
+var Home = exports.Home = function Home(_ref4) {
+  var isOverlayFullyVisible = _ref4.isOverlayFullyVisible,
+    isOverlayVisible = _ref4.isOverlayVisible,
+    children = _ref4.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: isOverlayFullyVisible ? 'none' : 'block',
+      overflow: isOverlayVisible ? 'hidden' : 'auto'
+    },
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1ule _4t3i1osq _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _vchhusvi"])
+  }, children);
+};
+var homeAiStyles = null;
+var HomeAi = exports.HomeAi = function HomeAi(_ref5) {
+  var isOverlayFullyVisible = _ref5.isOverlayFullyVisible,
+    isOverlayVisible = _ref5.isOverlayVisible,
+    children = _ref5.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: isOverlayFullyVisible ? 'none' : 'block',
+      overflow: isOverlayVisible ? 'hidden' : 'auto'
+    },
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1ule _19bvpxbi _u5f3pxbi _n3tdpxbi _vchhusvi"])
+  }, children);
+};
+var helpFooterStyles = null;
+var HelpFooter = exports.HelpFooter = function HelpFooter(_ref6) {
+  var children = _ref6.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _runtime.ax)(["_x3do3yx5 _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _1bsb1osq _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);
+};
+var BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS = exports.BACK_BUTTON_CONTAINER_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(_ref7) {
+  var transitionState = _ref7.transitionState,
+    children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_v5641tic _kqswstnw _19pkou31 _1ltv1ejb _4t3ixy5q _tzy4idpf"]),
+    style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
+      "--_m9bkgq": (0, _runtime.ix)("left ".concat(BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS, "ms, opacity ").concat(BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS, "ms"))
+    })
+  }, children);
+};

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

@@ -0,0 +1,33 @@
+
+._2rkoyh40{border-radius:2px}._100g1cra>img{height:var(--_1qkluan)}
+._12vemgnk{background-repeat:no-repeat}
+._15jg1osq>img>svg{height:100%}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bsb1osq{width:100%}
+._1bsbpxbi{width:var(--ds-space-200,1pc)}
+._1e0c1o8l{display:inline-block}
+._1itk1tr1{background-image:var(--_otzjef)}
+._1jrq1osq>img>svg{width:100%}
+._1o51q7pw{animation-fill-mode:forwards}
+._1pglp3kn{animation-timing-function:linear}
+._4t3ipxbi{height:var(--ds-space-200,1pc)}
+._4t3iyh40{height:2px}
+._5s2h1ssb>img{left:50%}
+._5sag126j{animation-duration:1.2s}
+._9qcx1ooe>img{transform:translate(-50%,-50%)}
+._bfhk17xe{background-color:var(--_kmlon4)}
+._bfhkptpz{background-color:var(--_19g1tth)}
+._ca0qidpf{padding-top:0}
+._iu1x1cra>img{width:var(--_1qkluan)}
+._j7hq1en8{animation-name:k6xje6p}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._se2z1ssb>img{top:50%}
+._syazu67f{color:#fff}
+._tip812c5{animation-iteration-count:infinite}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+._yti7stnw>img{position:absolute}
+@keyframes k6xje6p{0%{background-position:-300px 0}to{background-position:750pt 0}}

package/dist/cjs/util/styled.js

@@ -1,3 +1,4 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,131 +6,93 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WhatsNewTypeIcon = exports.LoadingRectangle = exports.LoadingCircle = exports.DividerLine = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+exports.WhatsNewTypeIcon = exports.LoadingRectangle = exports.DividerLine = void 0;
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _constants = require("@atlaskit/theme/constants");
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _WhatsNew = require("../model/WhatsNew");
-var _templateObject;
-/**
- * @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
+var _colors = 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; }
-// 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: '2px',
-  width: '100%',
-  padding: "0 ".concat("var(--ds-space-200, 16px)"),
-  marginTop: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-});
+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; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var dividerLineStyles = null;
+var DividerLine = exports.DividerLine = function DividerLine(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_bfhk17xe _4t3iyh40 _1bsb1osq _ca0qidpf _u5f3pxbi _n3tdidpf _19bvpxbi _19pkpxbi _vchhusvi"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_kmlon4": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.N30A, ")"))
+    })
+  });
+};
 
 /**
  * Loading container
  */
 
-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, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-var LoadingRectangle = exports.LoadingRectangle = _styled.default.div(function (props) {
-  return {
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: props.contentHeight ? props.contentHeight : '1rem',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    marginTop: props.marginTop ? props.marginTop : (0, _constants.gridSize)() + 'px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: props.contentWidth ? props.contentWidth : '100%',
-    borderRadius: '2px',
-    animationDuration: '1.2s',
-    animationFillMode: 'forwards',
-    animationIterationCount: 'infinite',
-    animationName: shimmer,
-    animationTimingFunction: 'linear',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    backgroundColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
-    backgroundImage: "linear-gradient( to right, ".concat("var(--ds-background-neutral-subtle, ".concat(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    colors.N30
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    , ")"), " 10%, ", "var(--ds-background-neutral, ".concat(colors.N40, ")"), " 20%, ", "var(--ds-background-neutral-subtle, ".concat(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    colors.N30, ")"), " 30% )"),
-    backgroundRepeat: 'no-repeat'
-  };
-});
-
-/**
- * Loading Circle
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-var LoadingCircle = exports.LoadingCircle = _styled.default.div(function (props) {
-  return {
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    height: props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginTop: props.marginTop ? props.marginTop : '',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    width: props.radius ? props.radius : "".concat((0, _constants.gridSize)() * 4, "px"),
-    borderRadius: '50%',
-    animationDuration: '1.2s',
-    animationFillMode: 'forwards',
-    animationIterationCount: 'infinite',
-    animationName: shimmer,
-    animationTimingFunction: 'linear',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    backgroundColor: "var(--ds-background-neutral, ".concat(colors.N30, ")"),
-    backgroundImage: "linear-gradient( to right, ".concat("var(--ds-background-neutral-subtle, ".concat(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    colors.N30
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    , ")"), " 10%, ", "var(--ds-background-neutral, ".concat(colors.N40, ")"), " 20%, ", "var(--ds-background-neutral-subtle, ".concat(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    colors.N30, ")"), " 30% )"),
-    backgroundRepeat: 'no-repeat'
-  };
-});
-
-/**
- * What's new icon
- */
-
-// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var WhatsNewTypeIcon = exports.WhatsNewTypeIcon = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tposition: relative;\n\theight: ", ";\n\twidth: ", ";\n\tborder-radius: 2px;\n\tcolor: #ffff;\n\tbackground-color: ", ";\n\n\t& > img {\n\t\twidth: calc(100% - ", "px);\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\n\t\t& > svg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)", function (_ref) {
-  var type = _ref.type;
-  switch (type) {
-    case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return "var(--ds-icon-warning, ".concat(colors.Y200, ")");
-    case _WhatsNew.WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return "var(--ds-icon-success, ".concat(colors.G300, ")");
-    case _WhatsNew.WHATS_NEW_ITEM_TYPES.FIX:
-      return "var(--ds-icon-information, ".concat(colors.B500, ")");
-    case _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return "var(--ds-icon-discovery, ".concat(colors.P500, ")");
-    case _WhatsNew.WHATS_NEW_ITEM_TYPES.REMOVED:
-      return "var(--ds-icon-disabled, ".concat(colors.N700, ")");
-    default:
-      return "var(--ds-icon, ".concat(colors.N400, ")");
-  }
-}, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var shimmer = null;
+var loadingRectangleStyles = null;
+var LoadingRectangle = exports.LoadingRectangle = function LoadingRectangle(_ref2) {
+  var style = _ref2.style,
+    contentHeight = _ref2.contentHeight,
+    contentWidth = _ref2.contentWidth,
+    marginTop = _ref2.marginTop;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_2rkoyh40 _1e0c1o8l _s7n4nkob _kqswh2mm _5sag126j _1o51q7pw _tip812c5 _j7hq1en8 _1pglp3kn _bfhkptpz _1itk1tr1 _12vemgnk"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      height: contentHeight !== null && contentHeight !== void 0 ? contentHeight : '1rem',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      marginTop: marginTop !== null && marginTop !== void 0 ? marginTop : (0, _constants.gridSize)() + 'px',
+      width: contentWidth !== null && contentWidth !== void 0 ? contentWidth : '100%',
+      "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
+      "--_otzjef": (0, _runtime.ix)("linear-gradient( to right, ".concat("var(--ds-background-neutral-subtle, ".concat(
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      _colors.N30
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      , ")"), " 10%, ", "var(--ds-background-neutral, ".concat(_colors.N40, ")"), " 20%, ", "var(--ds-background-neutral-subtle, ".concat(
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      _colors.N30, ")"), " 30% )"))
+    })
+  });
+};
+var whatsNewTypeIconStyles = null;
+var WhatsNewTypeIcon = exports.WhatsNewTypeIcon = function WhatsNewTypeIcon(_ref3) {
+  var type = _ref3.type,
+    children = _ref3.children;
+  var _useState = (0, _react.useState)("var(--ds-icon, ".concat(_colors.N400, ")")),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    backgroundColor = _useState2[0],
+    setBackgroundColor = _useState2[1];
+  (0, _react.useEffect)(function () {
+    switch (type) {
+      case _WhatsNew.WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
+        setBackgroundColor("var(--ds-icon-warning, ".concat(_colors.Y200, ")"));
+        break;
+      case _WhatsNew.WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
+        setBackgroundColor("var(--ds-icon-success, ".concat(_colors.G300, ")"));
+        break;
+      case _WhatsNew.WHATS_NEW_ITEM_TYPES.FIX:
+        setBackgroundColor("var(--ds-icon-information, ".concat(_colors.B500, ")"));
+        break;
+      case _WhatsNew.WHATS_NEW_ITEM_TYPES.EXPERIMENT:
+        setBackgroundColor("var(--ds-icon-discovery, ".concat(_colors.P500, ")"));
+        break;
+      case _WhatsNew.WHATS_NEW_ITEM_TYPES.REMOVED:
+        setBackgroundColor("var(--ds-icon-disabled, ".concat(_colors.N700, ")"));
+        break;
+      default:
+        setBackgroundColor("var(--ds-icon, ".concat(_colors.N400, ")"));
+    }
+  }, [type]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_2rkoyh40 _1e0c1o8l _s7n4nkob _kqswh2mm _4t3ipxbi _1bsbpxbi _syazu67f _iu1x1cra _100g1cra _yti7stnw _5s2h1ssb _se2z1ssb _9qcx1ooe _15jg1osq _1jrq1osq"]),
+    style: {
+      backgroundColor: backgroundColor,
+      "--_1qkluan": (0, _runtime.ix)("calc(100% - ".concat((0, _constants.gridSize)() / 2, "px)"))
+    }
+  }, children);
+};

package/dist/es2019/analytics.js

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

package/dist/es2019/assets/IconWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex } from '@atlaskit/primitives/compiled';
 import { IconTile } from '@atlaskit/icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 export const IconWrapper = ({

package/dist/es2019/components/Article/ArticleLoadingFail/index.js

@@ -3,14 +3,14 @@ import Button from '@atlaskit/button';
 import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Heading from '@atlaskit/heading';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../messages';
 import SomethingWrongImage from '../../../assets/SomethingWrongImage';
 import { LoadingErrorMessage, LoadingErrorButtonContainer, LoadingErrorHeading } from './styled';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 export const ArticleLoadingFail = ({
   onTryAgainButtonClick,

package/dist/es2019/components/Article/ArticleLoadingFail/styled.compiled.css

@@ -0,0 +1,3 @@
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0q1jfw{padding-top:var(--ds-space-500,40px)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/components/Article/ArticleLoadingFail/styled.js

@@ -1,23 +1,22 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingErrorMessage = styled.div({
-  paddingTop: "var(--ds-space-300, 24px)",
-  textAlign: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingErrorButtonContainer = styled.div({
-  paddingTop: "var(--ds-space-300, 24px)",
-  textAlign: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingErrorHeading = styled.div({
-  paddingTop: "var(--ds-space-500, 40px)",
-  textAlign: 'center'
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const loadingErrorMessageStyles = null;
+export const LoadingErrorMessage = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0q1ejb _y3gn1h6o"])
+}, children);
+const loadingErrorButtonContainerStyles = null;
+export const LoadingErrorButtonContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0q1ejb _y3gn1h6o"])
+}, children);
+const loadingErrorHeadingStyles = null;
+export const LoadingErrorHeading = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0q1jfw _y3gn1h6o"])
+}, children);

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulNoButton',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 export const ArticleWasHelpfulNoButton = ({
   isSelected = false,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -6,7 +6,7 @@ import { messages } from '../../../../messages';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulYesButton',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 export const ArticleWasHelpfulYesButton = ({
   isSelected = false,

package/dist/es2019/components/Article/HelpArticle/WasHelpfulForm/index.compiled.css

@@ -0,0 +1,8 @@
+._19bvidpf{padding-left:0}
+._1ipkidpf span{margin-top:0}
+._1kdcidpf span{margin-right:0}
+._1w2uidpf span{margin-left:0}
+._3glyidpf span{margin-bottom:0}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._u5f3idpf{padding-right:0}