@atlaskit/help 8.0.9 → 9.0.0

package/dist/esm/components/BackButton/index.js

@@ -1,6 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -8,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 { BackButtonContainer } from '../styled';
-import { TRANSITION_DURATION_MS } from '../constants';
-// Animation
-var defaultStyle = {
-  transition: "left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(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
-  }
-};
+import { BackButtonContainer, BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS } from '../styled';
 export var BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
     _ref$isVisible = _ref.isVisible,
@@ -43,12 +23,12 @@ export var BackButton = function BackButton(_ref) {
   };
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
-    timeout: TRANSITION_DURATION_MS,
+    timeout: BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS,
     mountOnEnter: true,
     unmountOnExit: true
   }, function (state) {
     return /*#__PURE__*/React.createElement(BackButtonContainer, {
-      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+      transitionState: state
     }, /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick(event) {
         if (state === 'entered') {
@@ -69,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help",
-      packageVersion: "8.0.9"
+      packageVersion: "9.0.0"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/esm/components/HelpContentButton/index.js

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 var analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 var HelpContentButton = function HelpContentButton(_ref) {
   var _ref$id = _ref.id,
@@ -43,7 +43,7 @@ var HelpContentButton = function HelpContentButton(_ref) {
     max: notificationMax,
     appearance: "primary"
   })), href != null && /*#__PURE__*/React.createElement(HelpContentButtonExternalLinkIcon, {
-    "data-testid": "shortcutIcon"
+    dataTestId: "shortcutIcon"
   }, /*#__PURE__*/React.createElement(ShortcutIcon, {
     color: "currentColor",
     LEGACY_size: "small",

package/dist/esm/components/HelpContentButton/styled.compiled.css

@@ -0,0 +1,36 @@
+
+._2rko1l7b{border-radius:3px}
+._2rko1y44{border-radius:4px}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
+._1bsbb8xr{width:var(--_2br7en)}
+._1bsbgktf{width:20px}
+._1bsbwgn3{width:calc(100% - 20px)}
+._1e0c1o8l{display:inline-block}
+._1e0c1ule{display:block}
+._1eab1ooe span{transform:translate(-50%,-50%)}
+._1t181ssb span{top:50%}
+._1t981ssb span{left:50%}
+._4t3igktf{height:20px}
+._80omtlke{cursor:pointer}
+._ca0qidpf{padding-top:0}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._s7n4nkob{vertical-align:middle}
+._syaz1a5u{color:var(--_1oh641w)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._vr2wstnw span{position:absolute}
+._7ehiu5t6:focus{box-shadow:var(--_ow3z6t)}
+._irr32tgk:hover{background-color:var(--_1y60f1n)}._13roglyw:active, ._1bg4glyw:focus, ._1qb1glyw:hover, ._1dnaglyw:visited{outline-offset:none}
+._1di618xb:active{background-color:var(--_18th9fi)}
+._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover, ._1726nqa1:visited{text-decoration-style:solid}
+._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover, ._1ydc1r31:visited{text-decoration-color:currentColor}
+._1ohyglyw:active, ._49pcglyw:focus, ._ksodglyw:hover, ._tpgfglyw:visited{outline-style:none}
+._1q5t1r31:active, ._nt751r31:focus, ._1dit1r31:hover, ._9nxe1r31:visited{outline-color:currentColor}
+._1r9x1o36:active, ._1hvw1o36:focus, ._4hz81o36:hover, ._12gr1o36:visited{outline-width:medium}
+._9h8h1a5u:active, ._f8pj1a5u:focus, ._30l31a5u:hover, ._10531a5u:visited{color:var(--_1oh641w)}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover, ._1x28glyw:visited{text-decoration-line:none}

package/dist/esm/components/HelpContentButton/styled.js

@@ -1,24 +1,61 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from 'styled-components';
-import * as colors from '@atlaskit/theme/colors';
-// 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 HelpContentButtonContainer = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: block;\n\tcursor: pointer;\n\twidth: calc(100% - ", ");\n\tcolor: ", ";\n\tpadding: ", ";\n\tborder-radius: 3px;\n\n\t&:hover,\n\t&:focus,\n\t&:visited,\n\t&:active {\n\t\ttext-decoration: none;\n\t\toutline: none;\n\t\toutline-offset: none;\n\t\tcolor: ", ";\n\t}\n\n\t&:focus {\n\t\tbox-shadow: ", " 0 0 0 2px inset;\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:active {\n\t\tbackground-color: ", ";\n\t}\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(colors.N600, ")"), "var(--ds-border-focused, ".concat(colors.B100, ")"), "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle-pressed, ".concat(colors.B50, ")"));
-
-// 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 HelpContentButtonIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\twidth: 20px;\n\theight: 20px;\n\tborder-radius: 4px;\n\tposition: relative;\n\n\t& span {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t}\n"])));
-
-// 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 HelpContentButtonText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\twidth: calc(100% - 20px);\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tpadding: 0 ", ";\n\tbox-sizing: border-box;\n"])), "var(--ds-space-100, 8px)");
-
-// 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 HelpContentButtonExternalLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tpadding-left: ", ";\n"])), "var(--ds-space-050, 4px)");
-
-// 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 HelpContentButtonExternalNotificationIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tmargin-top: ", ";\n\tpadding-left: ", ";\n"])), "var(--ds-space-negative-050, -4px)", "var(--ds-space-050, 4px)");
+/* 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';
+import { B100, B50, N30, N600 } from '@atlaskit/theme/colors';
+var helpContentButtonContainerStyles = null;
+export var HelpContentButtonContainer = function HelpContentButtonContainer(_ref) {
+  var onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    href = _ref.href,
+    id = _ref.id,
+    tabIndex = _ref.tabIndex,
+    target = _ref.target,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("a", {
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    href: href,
+    id: id,
+    tabIndex: tabIndex,
+    target: target,
+    className: ax(["_2rko1l7b _1e0c1ule _80omtlke _1bsbb8xr _syaz1a5u _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _7ehiu5t6 _1nrm1r31 _1a3b1r31 _9oik1r31 _1ydc1r31 _c2waglyw _4fprglyw _1bnxglyw _1x28glyw _1iohnqa1 _5goinqa1 _jf4cnqa1 _1726nqa1 _1q5t1r31 _nt751r31 _1dit1r31 _9nxe1r31 _1ohyglyw _49pcglyw _ksodglyw _tpgfglyw _1r9x1o36 _1hvw1o36 _4hz81o36 _12gr1o36 _13roglyw _1bg4glyw _1qb1glyw _1dnaglyw _9h8h1a5u _f8pj1a5u _30l31a5u _10531a5u _irr32tgk _1di618xb"]),
+    style: {
+      "--_2br7en": ix("calc(100% - ".concat("var(--ds-space-200, 16px)", ")")),
+      "--_1oh641w": ix("var(--ds-text-subtle, ".concat(N600, ")")),
+      "--_ow3z6t": ix("".concat("var(--ds-border-focused, ".concat(B100, ")"), " 0 0 0 2px inset")),
+      "--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
+      "--_18th9fi": ix("var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"))
+    }
+  }, children);
+};
+var helpContentButtonIconStyles = null;
+export var HelpContentButtonIcon = function HelpContentButtonIcon(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1y44 _1e0c1o8l _s7n4nkob _1bsbgktf _4t3igktf _kqswh2mm _vr2wstnw _1t181ssb _1t981ssb _1eab1ooe"])
+  }, children);
+};
+var helpContentButtonTextStyles = null;
+export var HelpContentButtonText = function HelpContentButtonText(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1o8l _s7n4nkob _1bsbwgn3 _ca0qidpf _u5f3u2gc _n3tdidpf _19bvu2gc _vchhusvi"])
+  }, children);
+};
+var helpContentButtonExternalLinkIconStyles = null;
+export var HelpContentButtonExternalLinkIcon = function HelpContentButtonExternalLinkIcon(_ref4) {
+  var dataTestId = _ref4.dataTestId,
+    children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": dataTestId,
+    className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66"])
+  }, children);
+};
+var helpContentButtonExternalNotificationIconStyles = null;
+export var HelpContentButtonExternalNotificationIcon = function HelpContentButtonExternalNotificationIcon(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66 _19pkr5cr"])
+  }, children);
+};

package/dist/esm/components/NeedMoreHelp/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import LightbulbIcon from '@atlaskit/icon/core/migration/lightbulb';
-import { Inline } from '@atlaskit/primitives';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { useIntl } from 'react-intl-next';
 import { NeedMoreHelpContainer, NeedMoreHelpContent, HelpAskAI } from './styled';
 import { VIEW } from '../constants';

package/dist/esm/components/NeedMoreHelp/styled.compiled.css

@@ -0,0 +1,20 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._16qst7d8{box-shadow:var(--ds-shadow-overlay,0 0 0 1px var(--shadow-overlay-third,rgba(188,214,240,0)) inset)}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
+._1bsbzddy{width:187px}
+._1e0c1o8l{display:inline-block}
+._1pbyibnn{z-index:11}
+._1wpz1h6o{align-self:center}
+._2hwxidpf{margin-right:0}
+._4t3iw1ge{height:var(--ds-space-500,42px)}
+._80omtlke{cursor:pointer}
+._ae4v1h6o{align-content:center}
+._bfhk1ozg{background-color:var(--ds-background-accent-yellow-subtlest,#fff7d6)}
+._kdamz7t1{filter:drop-shadow(0 8px 9pt var(--shadow-overlay-second,rgba(9,30,66,.15))) drop-shadow(0 0 1px rgba(9,30,66,.31))}
+._otyridpf{margin-bottom:0}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}

package/dist/esm/components/NeedMoreHelp/styled.js

@@ -1,41 +1,27 @@
-/**
- * @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 var NeedMoreHelpContainer = styled.div({
-  zIndex: 11,
-  alignSelf: 'center',
-  alignContent: 'center',
-  backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
-  width: '187px',
-  height: "var(--ds-space-500, 42px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  boxShadow: "var(--ds-shadow-overlay, 0px 0px 0px 1px var(--shadow-overlay-third,rgba(188,214,240,0.00)) inset)",
-  filter: 'drop-shadow(0px 8px 12px var(--shadow-overlay-second, rgba(9,30,66,0.15))) drop-shadow(0px 0px 1px rgba(9,30,66,0.31))'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var NeedMoreHelpContent = styled.p({
-  color: "var(--ds-text, #172B4D)",
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  display: 'inline-block',
-  alignSelf: 'center',
-  margin: 0
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var HelpAskAI = styled.p({
-  color: "var(--ds-text-selected, #0C66E4)",
-  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  display: 'inline-block',
-  alignSelf: 'center',
-  margin: 0,
-  cursor: 'pointer',
-  '&:hover': {
-    textDecoration: 'underline'
-  }
-});
+/* 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';
+var needMoreHelpContainerStyles = null;
+export var NeedMoreHelpContainer = function NeedMoreHelpContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pbyibnn _1wpz1h6o _ae4v1h6o _bfhk1ozg _1bsbzddy _4t3iw1ge _16qst7d8 _kdamz7t1"])
+  }, children);
+};
+var needMoreHelpContentStyles = null;
+export var NeedMoreHelpContent = function NeedMoreHelpContent(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("p", {
+    className: ax(["_11c81vhk _19pkidpf _2hwxidpf _otyridpf _18u0idpf _syaz1fxt _1e0c1o8l _1wpz1h6o"])
+  }, children);
+};
+var helpAskAIStyles = null;
+export var HelpAskAI = function HelpAskAI(_ref3) {
+  var children = _ref3.children,
+    onClick = _ref3.onClick;
+  return /*#__PURE__*/React.createElement("p", {
+    onClick: onClick,
+    className: ax(["_11c81vhk _19pkidpf _2hwxidpf _otyridpf _18u0idpf _syazaqb7 _1e0c1o8l _1wpz1h6o _80omtlke _9oik1r31 _1bnx8stv _jf4cnqa1"])
+  }, children);
+};

package/dist/esm/components/RelatedArticles/RelatedArticlesLoading.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import { DividerLine, LoadingRectangle } from '../../util/styled';
-import { LoadignRelatedArticleList, LoadignRelatedArticleListItem } from './styled';
+import { LoadingRelatedArticleList, LoadingRelatedArticleListItem } from './styled';
 var RelatedArticlesLoading = function RelatedArticlesLoading(_ref) {
   var formatMessage = _ref.intl.formatMessage;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadignRelatedArticleList, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LoadingRelatedArticleList, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
-  }, /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  }, /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
@@ -24,7 +24,7 @@ var RelatedArticlesLoading = function RelatedArticlesLoading(_ref) {
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "100%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
@@ -40,7 +40,7 @@ var RelatedArticlesLoading = function RelatedArticlesLoading(_ref) {
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "100%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingRelatedArticleListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"

package/dist/esm/components/RelatedArticles/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}

package/dist/esm/components/RelatedArticles/index.js

@@ -1,10 +1,9 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 /** @jsxFrag */
 
 import React, { useState, useEffect, useCallback } from 'react';
@@ -12,6 +11,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import { injectIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../messages';
 import ArticlesList from '../ArticlesList';
 import RelatedArticlesLoading from './RelatedArticlesLoading';
@@ -19,19 +19,9 @@ import { DividerLine } from '../../util/styled';
 import { RelatedArticlesTitle } from './styled';
 import useCancellablePromise from '../../util/hooks/cancellablePromise';
 import { usePrevious } from '../../util/hooks/previous';
-import { Text } from '@atlaskit/primitives';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 var packageName = "@atlaskit/help";
-var packageVersion = "8.0.9";
-var buttonStyles = css({
-  padding: '0',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& span': {
-    margin: '0'
-  }
-});
+var packageVersion = "9.0.0";
+var buttonStyles = null;
 export var RelatedArticles = function RelatedArticles(_ref) {
   var _ref$style = _ref.style,
     style = _ref$style === void 0 ? 'primary' : _ref$style,
@@ -108,24 +98,24 @@ export var RelatedArticles = function RelatedArticles(_ref) {
     }
   }, [prevRouteGroup, prevRouteName, routeGroup, routeName, updateRelatedArticles]);
   if (hasError) {
-    return jsx(SectionMessage, {
+    return /*#__PURE__*/React.createElement(SectionMessage, {
       appearance: "warning"
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       as: "strong"
-    }, formatMessage(messages.help_related_article_endpoint_error_title))), jsx(Text, {
+    }, formatMessage(messages.help_related_article_endpoint_error_title))), /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, formatMessage(messages.help_related_article_endpoint_error_description)), jsx(Text, {
+    }, formatMessage(messages.help_related_article_endpoint_error_description)), /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, jsx(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "link",
       spacing: "compact",
-      css: buttonStyles,
-      onClick: updateRelatedArticles
+      onClick: updateRelatedArticles,
+      className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf"])
     }, formatMessage(messages.help_related_article_endpoint_error_button_label))));
   } else {
-    return jsx(React.Fragment, null, style === 'secondary' && relatedArticles.length > 0 && jsx(React.Fragment, null, jsx(DividerLine, null), jsx(RelatedArticlesTitle, null, formatMessage(messages.help_related_article_title))), isLoading ? jsx(RelatedArticlesLoading, null) : jsx(ArticlesList
+    return /*#__PURE__*/React.createElement(React.Fragment, null, style === 'secondary' && relatedArticles.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DividerLine, null), /*#__PURE__*/React.createElement(RelatedArticlesTitle, null, formatMessage(messages.help_related_article_title))), isLoading ? /*#__PURE__*/React.createElement(RelatedArticlesLoading, null) : /*#__PURE__*/React.createElement(ArticlesList
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     , {
       style: style,

package/dist/esm/components/RelatedArticles/styled.compiled.css

@@ -0,0 +1,20 @@
+._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._2hwxidpf{margin-right:0}
+._ca0qidpf{padding-top:0}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdidpf{padding-bottom:0}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._syaz1o8f{color:var(--_ggxzyp)}
+._u5f3idpf{padding-right:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/components/RelatedArticles/styled.js

@@ -1,53 +1,38 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-// 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';
-export var truncate = function truncate() {
-  var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return css({
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: width
-  });
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+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";
+import React from 'react';
+import { N800 } from '@atlaskit/theme/colors';
+var relatedArticlesTitleStyles = null;
+export var RelatedArticlesTitle = function RelatedArticlesTitle(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8nbxd _syaz1o8f _ca0qpxbi _u5f3idpf _n3tdpxbi _19bvidpf"]),
+    style: {
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    }
+  }, children);
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export var RelatedArticlesTitle = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text, ".concat(colors.N800, ")"),
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  padding: "var(--ds-space-200, 16px)".concat(" 0")
-});
-
 /**
  * Loading styled-components
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var LoadignRelatedArticleSection = styled.div({
-  marginTop: "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 LoadignRelatedArticleList = styled.ul({
-  width: '100%',
-  margin: 0,
-  padding: 0,
-  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 LoadignRelatedArticleListItem = styled.li({
-  display: 'block',
-  width: '100%',
-  padding: "var(--ds-space-100, 8px)",
-  marginBottom: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-});
+var loadingRelatedArticleListStyles = null;
+export var LoadingRelatedArticleList = function LoadingRelatedArticleList(_ref2) {
+  var children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsb1osq _vchhusvi"])
+  }), children);
+};
+var loadingRelatedArticleListItemStyles = null;
+export var LoadingRelatedArticleListItem = function LoadingRelatedArticleListItem(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("li", {
+    className: ax(["_1e0c1ule _1bsb1osq _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _otyrpxbi _vchhusvi"])
+  }, children);
+};

package/dist/esm/components/Search/SearchInput/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1aw7{width:var(--_1sdd41g)}
+._4t3i1aw7{height:var(--_1sdd41g)}

package/dist/esm/components/Search/SearchInput/index.js

@@ -1,8 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef, useCallback } from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Textfield from '@atlaskit/textfield';
@@ -11,8 +9,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import Spinner from '@atlaskit/spinner';
 import SearchIcon from '@atlaskit/icon/core/migration/search';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';
@@ -23,14 +19,9 @@ import { useNavigationContext } from '../../contexts/navigationContext';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'searchInput',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
-var buttonStyles = css({
-  // 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(gridSize() * 3, "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: "".concat(gridSize() * 3, "px")
-});
+var buttonStyles = null;
 export var SearchInput = function SearchInput(_ref) {
   var formatMessage = _ref.intl.formatMessage,
     _ref$isAiEnabled = _ref.isAiEnabled,
@@ -87,26 +78,29 @@ export var SearchInput = function SearchInput(_ref) {
     return null;
   }
   var WrapperComponent = isAiEnabled ? SearchInputContainerAi : SearchInputContainer;
-  return jsx(WrapperComponent, null, jsx(Textfield, {
+  return /*#__PURE__*/React.createElement(WrapperComponent, null, /*#__PURE__*/React.createElement(Textfield, {
     "aria-label": formatMessage(messages.help_search_placeholder),
     autoComplete: "off",
     ref: inputRef,
     name: "help-search-input",
-    elemBeforeInput: jsx(SearchIconContainer, null, jsx(SearchIcon, {
+    elemBeforeInput: /*#__PURE__*/React.createElement(SearchIconContainer, null, /*#__PURE__*/React.createElement(SearchIcon, {
       LEGACY_margin: "0 2px",
       color: "currentColor",
       spacing: "spacious",
       label: ""
     })),
-    elemAfterInput: jsx(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && jsx(Spinner, {
+    elemAfterInput: /*#__PURE__*/React.createElement(CloseButtonAndSpinnerContainer, null, searchState === REQUEST_STATE.loading && /*#__PURE__*/React.createElement(Spinner, {
       size: "small"
-    }), searchValue !== '' && jsx(Button, {
-      css: buttonStyles,
+    }), searchValue !== '' && /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: handleOnClearButtonClick,
       spacing: "none",
-      "aria-label": "Clear field"
-    }, jsx(EditorCloseIcon, {
+      "aria-label": "Clear field",
+      className: ax(["_1bsb1aw7 _4t3i1aw7"]),
+      style: {
+        "--_1sdd41g": ix("".concat(gridSize() * 3, "px"))
+      }
+    }, /*#__PURE__*/React.createElement(EditorCloseIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: ""
@@ -118,8 +112,8 @@ export var SearchInput = function SearchInput(_ref) {
   }));
 };
 var SearchInputWithContext = function SearchInputWithContext(props) {
-  return jsx(AnalyticsContext, {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, jsx(SearchInput, props));
+  }, /*#__PURE__*/React.createElement(SearchInput, props));
 };
 export default injectIntl(SearchInputWithContext);