@atlaskit/help 8.0.9 → 9.0.0

package/dist/esm/components/WhatsNew/WhatsNewResults/styled.js

@@ -1,55 +1,30 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+/* 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';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var WhatsNewResultsContainer = styled.div({
-  position: 'absolute',
-  height: '100%',
-  width: '100%',
-  top: 0,
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  flex: 1,
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  zIndex: 1,
-  padding: "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
-export var WhatsNewResultsContainerAi = styled.div({
-  paddingBottom: "var(--ds-space-200, 16px)",
-  paddingLeft: "var(--ds-space-200, 16px)",
-  paddingRight: "var(--ds-space-200, 16px)",
-  position: 'absolute',
-  width: '100%',
-  top: "var(--ds-space-800, 60px)",
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  flex: 1,
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  zIndex: 1
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var SelectContainer = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: "".concat(19 * gridSize(), "px")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var WhatsNewResultsListContainer = styled.div({
-  paddingTop: "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
-export var WhatsNewResultsListTitleContainer = styled.div({
-  padding: "0 ".concat("var(--ds-space-100, 8px)")
-});
+var selectContainerStyles = null;
+export var SelectContainer = function SelectContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1ina"]),
+    style: {
+      "--_18eyph8": ix("".concat(19 * gridSize(), "px"))
+    }
+  }, children);
+};
+var whatsNewResultsListContainerStyles = null;
+export var WhatsNewResultsListContainer = function WhatsNewResultsListContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0qu2gc"])
+  }, children);
+};
+var whatsNewResultsListTitleContainerStyles = null;
+export var WhatsNewResultsListTitleContainer = function WhatsNewResultsListTitleContainer(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0qidpf _u5f3u2gc _n3tdidpf _19bvu2gc"])
+  }, children);
+};

package/dist/esm/components/constants.js

@@ -13,6 +13,4 @@ export var VIEW = /*#__PURE__*/function (VIEW) {
 // Animation related consts
 export var SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 export var FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
-export var HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
-// Animation related consts
-export var TRANSITION_DURATION_MS = 220;
+export var HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;

package/dist/esm/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/esm/components/styled.js

@@ -1,91 +1,92 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import * as colors from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var HelpBodyContainer = styled.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
-export var HelpBody = styled.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
-export var HelpBodyAi = styled.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
-export var Home = styled.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
-export var HomeAi = styled.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
-export var HelpFooter = styled.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
-export var BackButtonContainer = styled.div({
-  position: 'absolute',
-  marginTop: "var(--ds-space-200, 14px)",
-  left: "var(--ds-space-100, 8px)",
-  height: "var(--ds-space-400, 32px)"
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
+import React from 'react';
+import { N10, N30 } from '@atlaskit/theme/colors';
+var helpBodyContainerStyles = null;
+export var HelpBodyContainer = function HelpBodyContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1tkeidpf _kqswh2mm _18m91wug _1reo15vq _1e0c1txw _2lx21bp4 _1n261q9c _1bah1yb4 _ae4v1fhb _4cvr1y6m"])
+  }, children);
+};
+var helpBodyStyles = null;
+export var HelpBody = function HelpBody(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm _1reo15vq _18m91wug"])
+  }, children);
+};
+var helpBodyAiStyles = null;
+export var HelpBodyAi = function HelpBodyAi(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm"])
+  }, children);
+};
+var homeStyles = null;
+export var Home = function Home(_ref4) {
+  var isOverlayFullyVisible = _ref4.isOverlayFullyVisible,
+    isOverlayVisible = _ref4.isOverlayVisible,
+    children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: isOverlayFullyVisible ? 'none' : 'block',
+      overflow: isOverlayVisible ? 'hidden' : 'auto'
+    },
+    className: ax(["_1reo1wug _18m91wug _1e0c1ule _4t3i1osq _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _vchhusvi"])
+  }, children);
+};
+var homeAiStyles = null;
+export var HomeAi = function HomeAi(_ref5) {
+  var isOverlayFullyVisible = _ref5.isOverlayFullyVisible,
+    isOverlayVisible = _ref5.isOverlayVisible,
+    children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: isOverlayFullyVisible ? 'none' : 'block',
+      overflow: isOverlayVisible ? 'hidden' : 'auto'
+    },
+    className: ax(["_1reo1wug _18m91wug _1e0c1ule _19bvpxbi _u5f3pxbi _n3tdpxbi _vchhusvi"])
+  }, children);
+};
+var helpFooterStyles = null;
+export var HelpFooter = function HelpFooter(_ref6) {
+  var children = _ref6.children,
+    rest = _objectWithoutProperties(_ref6, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: ax(["_x3do3yx5 _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _1bsb1osq _bfhk1v7z _1bah1yb4"]),
+    style: {
+      "--_1xglsrh": ix("var(--ds-background-neutral, ".concat(N10, ")")),
+      "--_1it2dty": ix("var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(N30, ")")))
+    }
+  }), children);
+};
+export var 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
+  }
+};
+export var BackButtonContainer = function BackButtonContainer(_ref7) {
+  var transitionState = _ref7.transitionState,
+    children = _ref7.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_v5641tic _kqswstnw _19pkou31 _1ltv1ejb _4t3ixy5q _tzy4idpf"]),
+    style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
+      "--_m9bkgq": ix("left ".concat(BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS, "ms, opacity ").concat(BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS, "ms"))
+    })
+  }, children);
+};

package/dist/esm/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/esm/util/styled.js

@@ -1,127 +1,89 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { keyframes } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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; }
+import React, { useEffect, useState } from 'react';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
 import { WHATS_NEW_ITEM_TYPES } from '../model/WhatsNew';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var DividerLine = styled.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'
-});
+import { B500, G300, N30, N30A, N40, N400, N700, P500, Y200 } from '@atlaskit/theme/colors';
+var dividerLineStyles = null;
+export var DividerLine = function DividerLine(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_bfhk17xe _4t3iyh40 _1bsb1osq _ca0qidpf _u5f3pxbi _n3tdidpf _19bvpxbi _19pkpxbi _vchhusvi"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_kmlon4": ix("var(--ds-border, ".concat(N30A, ")"))
+    })
+  });
+};
 
 /**
  * Loading container
  */
 
-var shimmer = 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
-export var LoadingRectangle = styled.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 : 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
-export var LoadingCircle = styled.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(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(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
-export var WhatsNewTypeIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return "var(--ds-icon-warning, ".concat(colors.Y200, ")");
-    case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return "var(--ds-icon-success, ".concat(colors.G300, ")");
-    case WHATS_NEW_ITEM_TYPES.FIX:
-      return "var(--ds-icon-information, ".concat(colors.B500, ")");
-    case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return "var(--ds-icon-discovery, ".concat(colors.P500, ")");
-    case WHATS_NEW_ITEM_TYPES.REMOVED:
-      return "var(--ds-icon-disabled, ".concat(colors.N700, ")");
-    default:
-      return "var(--ds-icon, ".concat(colors.N400, ")");
-  }
-}, gridSize() / 2, gridSize() / 2);
+var shimmer = null;
+var loadingRectangleStyles = null;
+export var LoadingRectangle = function LoadingRectangle(_ref2) {
+  var style = _ref2.style,
+    contentHeight = _ref2.contentHeight,
+    contentWidth = _ref2.contentWidth,
+    marginTop = _ref2.marginTop;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 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 : gridSize() + 'px',
+      width: contentWidth !== null && contentWidth !== void 0 ? contentWidth : '100%',
+      "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
+      "--_otzjef": 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
+      N30
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      , ")"), " 10%, ", "var(--ds-background-neutral, ".concat(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
+      N30, ")"), " 30% )"))
+    })
+  });
+};
+var whatsNewTypeIconStyles = null;
+export var WhatsNewTypeIcon = function WhatsNewTypeIcon(_ref3) {
+  var type = _ref3.type,
+    children = _ref3.children;
+  var _useState = useState("var(--ds-icon, ".concat(N400, ")")),
+    _useState2 = _slicedToArray(_useState, 2),
+    backgroundColor = _useState2[0],
+    setBackgroundColor = _useState2[1];
+  useEffect(function () {
+    switch (type) {
+      case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
+        setBackgroundColor("var(--ds-icon-warning, ".concat(Y200, ")"));
+        break;
+      case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
+        setBackgroundColor("var(--ds-icon-success, ".concat(G300, ")"));
+        break;
+      case WHATS_NEW_ITEM_TYPES.FIX:
+        setBackgroundColor("var(--ds-icon-information, ".concat(B500, ")"));
+        break;
+      case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
+        setBackgroundColor("var(--ds-icon-discovery, ".concat(P500, ")"));
+        break;
+      case WHATS_NEW_ITEM_TYPES.REMOVED:
+        setBackgroundColor("var(--ds-icon-disabled, ".concat(N700, ")"));
+        break;
+      default:
+        setBackgroundColor("var(--ds-icon, ".concat(N400, ")"));
+    }
+  }, [type]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rkoyh40 _1e0c1o8l _s7n4nkob _kqswh2mm _4t3ipxbi _1bsbpxbi _syazu67f _iu1x1cra _100g1cra _yti7stnw _5s2h1ssb _se2z1ssb _9qcx1ooe _15jg1osq _1jrq1osq"]),
+    style: {
+      backgroundColor: backgroundColor,
+      "--_1qkluan": ix("calc(100% - ".concat(gridSize() / 2, "px)"))
+    }
+  }, children);
+};

package/dist/types/components/Article/ArticleLoadingFail/styled.d.ts

@@ -1,13 +1,14 @@
-/// <reference types="react" />
-export declare const LoadingErrorMessage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoadingErrorButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoadingErrorHeading: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export declare const LoadingErrorMessage: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const LoadingErrorButtonContainer: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const LoadingErrorHeading: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;