@atlaskit/help 8.0.9 → 9.0.0

package/dist/es2019/util/styled.js

@@ -1,145 +1,72 @@
-/**
- * @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 "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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 const DividerLine = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-border, ${colors.N30A})`,
-  height: '2px',
-  width: '100%',
-  padding: `0 ${"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';
+const dividerLineStyles = null;
+export const DividerLine = ({
+  style
+}) => /*#__PURE__*/React.createElement("div", {
+  style: style,
+  className: ax(["_bfhkpt7r _4t3iyh40 _1bsb1osq _ca0qidpf _u5f3pxbi _n3tdidpf _19bvpxbi _19pkpxbi _vchhusvi"])
 });
 
 /**
  * Loading container
  */
 
-const shimmer = keyframes({
-  '0%': {
-    backgroundPosition: '-300px 0'
+const shimmer = null;
+const loadingRectangleStyles = null;
+export const LoadingRectangle = ({
+  style,
+  contentHeight,
+  contentWidth,
+  marginTop
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ...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%'
   },
-  '100%': {
-    backgroundPosition: '1000px 0'
-  }
+  className: ax(["_2rkoyh40 _1e0c1o8l _s7n4nkob _kqswh2mm _5sag126j _1o51q7pw _tip812c5 _j7hq1en8 _1pglp3kn _bfhk1yrq _1itk67kk _12vemgnk"])
 });
-
-// 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 const LoadingRectangle = styled.div(props => ({
-  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, ${colors.N30})`,
-  backgroundImage: `linear-gradient( to right, ${`var(--ds-background-neutral-subtle, ${
-  // 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, ${colors.N40})`} 20%, ${`var(--ds-background-neutral-subtle, ${
-  // 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 const LoadingCircle = styled.div(props => ({
-  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 : `${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 : `${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, ${colors.N30})`,
-  backgroundImage: `linear-gradient( to right, ${`var(--ds-background-neutral-subtle, ${
-  // 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, ${colors.N40})`} 20%, ${`var(--ds-background-neutral-subtle, ${
-  // 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 const WhatsNewTypeIcon = styled.div`
-	display: inline-block;
-	vertical-align: middle;
-	position: relative;
-	height: ${"var(--ds-space-200, 16px)"};
-	width: ${"var(--ds-space-200, 16px)"};
-	border-radius: 2px;
-	color: #ffff;
-	background-color: ${({
-  type
+const whatsNewTypeIconStyles = null;
+export const WhatsNewTypeIcon = ({
+  type,
+  children
 }) => {
-  switch (type) {
-    case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
-      return `var(--ds-icon-warning, ${colors.Y200})`;
-    case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
-      return `var(--ds-icon-success, ${colors.G300})`;
-    case WHATS_NEW_ITEM_TYPES.FIX:
-      return `var(--ds-icon-information, ${colors.B500})`;
-    case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
-      return `var(--ds-icon-discovery, ${colors.P500})`;
-    case WHATS_NEW_ITEM_TYPES.REMOVED:
-      return `var(--ds-icon-disabled, ${colors.N700})`;
-    default:
-      return `var(--ds-icon, ${colors.N400})`;
-  }
-}};
-
-	& > img {
-		width: calc(100% - ${gridSize() / 2}px);
-		height: calc(100% - ${gridSize() / 2}px);
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-
-		& > svg {
-			height: 100%;
-			width: 100%;
-		}
-	}
-`;
+  const [backgroundColor, setBackgroundColor] = useState(`var(--ds-icon, ${N400})`);
+  useEffect(() => {
+    switch (type) {
+      case WHATS_NEW_ITEM_TYPES.IMPROVEMENT:
+        setBackgroundColor(`var(--ds-icon-warning, ${Y200})`);
+        break;
+      case WHATS_NEW_ITEM_TYPES.NEW_FEATURE:
+        setBackgroundColor(`var(--ds-icon-success, ${G300})`);
+        break;
+      case WHATS_NEW_ITEM_TYPES.FIX:
+        setBackgroundColor(`var(--ds-icon-information, ${B500})`);
+        break;
+      case WHATS_NEW_ITEM_TYPES.EXPERIMENT:
+        setBackgroundColor(`var(--ds-icon-discovery, ${P500})`);
+        break;
+      case WHATS_NEW_ITEM_TYPES.REMOVED:
+        setBackgroundColor(`var(--ds-icon-disabled, ${N700})`);
+        break;
+      default:
+        setBackgroundColor(`var(--ds-icon, ${N400})`);
+    }
+  }, [type]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor
+    },
+    className: ax(["_2rkoyh40 _1e0c1o8l _s7n4nkob _kqswh2mm _4t3ipxbi _1bsbpxbi _syazu67f _iu1xmslj _100gmslj _yti7stnw _5s2h1ssb _se2z1ssb _9qcx1ooe _15jg1osq _1jrq1osq"])
+  }, children);
+};

package/dist/esm/analytics.js

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

package/dist/esm/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 var IconWrapper = function IconWrapper(_ref) {

package/dist/esm/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';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleLoadingFail',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 export var ArticleLoadingFail = function ArticleLoadingFail(_ref) {
   var onTryAgainButtonClick = _ref.onTryAgainButtonClick,

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

@@ -1,23 +1,25 @@
-/**
- * @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 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 var 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 var 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';
+var loadingErrorMessageStyles = null;
+export var LoadingErrorMessage = function LoadingErrorMessage(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0q1ejb _y3gn1h6o"])
+  }, children);
+};
+var loadingErrorButtonContainerStyles = null;
+export var LoadingErrorButtonContainer = function LoadingErrorButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0q1ejb _y3gn1h6o"])
+  }, children);
+};
+var loadingErrorHeadingStyles = null;
+export var LoadingErrorHeading = function LoadingErrorHeading(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0q1jfw _y3gn1h6o"])
+  }, children);
+};

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

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

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

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

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

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/index.js

@@ -1,9 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 /** @jsxFrag */
 
 import React, { useState } from 'react';
@@ -17,12 +16,8 @@ import { RadioGroup } from '@atlaskit/radio';
 import { Checkbox } from '@atlaskit/checkbox';
 import TextArea from '@atlaskit/textarea';
 import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 import { messages } from '../../../../messages';
 import ArticleWasHelpfulYesButton from './WasHelpfulYesButton';
 import ArticleWasHelpfulNoButton from './WasHelpfulNoButton';
@@ -31,15 +26,9 @@ var FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 var ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
-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 buttonStyles = null;
 export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   var onWasHelpfulSubmit = _ref.onWasHelpfulSubmit,
     onWasHelpfulYesButtonClick = _ref.onWasHelpfulYesButtonClick,
@@ -153,25 +142,21 @@ export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
   };
   if (!wasHelpfulFormSubmitedFailed) {
     if ((handleArticleWasHelpfulYesButtonClick || handleArticleWasHelpfulNoButtonClick) && !wasHelpfulFormSubmited) {
-      return jsx(React.Fragment, null, jsx(ArticleFeedbackContainer, null, jsx(ArticleFeedbackText
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      , {
-        style: {
-          paddingRight: "var(--ds-space-100, 8px)"
-        }
-      }, formatMessage(messages.help_article_rating_title)), jsx(ButtonGroup, null, handleArticleWasHelpfulYesButtonClick && jsx(ArticleWasHelpfulYesButton, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticleFeedbackContainer, null, /*#__PURE__*/React.createElement(ArticleFeedbackText, {
+        paddingRight: "var(--ds-space-100, 8px)"
+      }, formatMessage(messages.help_article_rating_title)), /*#__PURE__*/React.createElement(ButtonGroup, null, handleArticleWasHelpfulYesButtonClick && /*#__PURE__*/React.createElement(ArticleWasHelpfulYesButton, {
         onClick: handleArticleWasHelpfulYesButtonClick,
         isSelected: wasHelpful === true
-      }), handleArticleWasHelpfulNoButtonClick && jsx(ArticleWasHelpfulNoButton, {
+      }), handleArticleWasHelpfulNoButtonClick && /*#__PURE__*/React.createElement(ArticleWasHelpfulNoButton, {
         onClick: handleArticleWasHelpfulNoButtonClick,
         isSelected: wasHelpful === false
-      }))), wasHelpful !== null && onWasHelpfulSubmit && jsx(ArticleFeedbackAnswerWrapper, null, jsx(Form, {
+      }))), wasHelpful !== null && onWasHelpfulSubmit && /*#__PURE__*/React.createElement(ArticleFeedbackAnswerWrapper, null, /*#__PURE__*/React.createElement(Form, {
         onSubmit: onFeedbackSubmitClick
       }, function (_ref2) {
         var formProps = _ref2.formProps;
-        return jsx("form", _extends({}, formProps, {
+        return /*#__PURE__*/React.createElement("form", _extends({}, formProps, {
           name: "form-example"
-        }), !wasHelpful && jsx("fieldset", null, jsx("legend", {
+        }), !wasHelpful && /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("legend", {
           id: "feedbackReason-label",
           style: {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -191,89 +176,85 @@ export var ArticleWasHelpfulForm = function ArticleWasHelpfulForm(_ref) {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             overflow: 'hidden'
           }
-        }, formatMessage(messages.help_article_rating_form_title)), jsx(Field, {
+        }, formatMessage(messages.help_article_rating_form_title)), /*#__PURE__*/React.createElement(Field, {
           name: "feedbackReason",
           isRequired: true
         }, function (_ref3) {
           var fieldProps = _ref3.fieldProps;
-          return jsx(RadioGroup, _extends({}, fieldProps, {
+          return /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
             options: negativeFeedbackReason,
             onChange: radioGroupReasonOnChange,
             "aria-labelledby": "feedbackReason-label"
           }));
-        })), jsx(Field, {
+        })), /*#__PURE__*/React.createElement(Field, {
           name: "feedbackReasonText",
           defaultValue: ""
         }, function (_ref4) {
           var fieldProps = _ref4.fieldProps;
-          return jsx(React.Fragment, null, jsx(ArticleFeedbackText, {
-            id: "articleFeedbackText"
-            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-            ,
-            style: {
-              top: "var(--ds-space-negative-100, -8px)"
-            }
-          }, formatMessage(messages.help_article_rating_form_title)), jsx(TextArea, _extends({}, fieldProps, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticleFeedbackText, {
+            id: "articleFeedbackText",
+            top: "var(--ds-space-negative-100, -8px)"
+          }, formatMessage(messages.help_article_rating_form_title)), /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {
             minimumRows: 4,
             "aria-labelledby": "articleFeedbackText",
             maxLength: FEEDBACK_REASON_TEXT_MAX_LENGTH,
             value: feedbackReasonText,
             onChange: feedbackReasonTextOnChange
           })));
-        }), jsx(CheckboxField, {
+        }), /*#__PURE__*/React.createElement(CheckboxField, {
           name: "contactMe"
         }, function (_ref5) {
           var fieldProps = _ref5.fieldProps;
-          return jsx(Checkbox, _extends({}, fieldProps, {
+          return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
             isChecked: contactMe,
             onChange: checkboxContactMeOnChange,
             label: formatMessage(messages.help_article_rating_form_contact_me)
           }));
-        }), jsx(FormFooter, null, jsx(ButtonGroup, null, jsx(Button, {
+        }), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
           type: "submit",
           appearance: "primary",
           isDisabled: !wasHelpful && feedbackReason === '',
           isLoading: wasHelpfulFormSubmitLoading
-        }, formatMessage(messages.help_article_rating_form_submit)), jsx(Button, {
+        }, formatMessage(messages.help_article_rating_form_submit)), /*#__PURE__*/React.createElement(Button, {
           onClick: onFeedbackSubmitCancel
         }, formatMessage(messages.help_article_rating_form_cancel)))));
       })));
     } else if (wasHelpfulFormSubmited && wasHelpful === null) {
-      return jsx(ArticleFeedbackContainer, null, jsx("span", {
+      return /*#__PURE__*/React.createElement(ArticleFeedbackContainer, null, /*#__PURE__*/React.createElement("span", {
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           paddingRight: "var(--ds-space-100, 8px)",
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           verticalAlign: 'middle'
         }
-      }, jsx(CheckCircleIcon, {
+      }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
         spacing: "spacious",
         color: "var(--ds-icon-success, ".concat(colors.G400, ")"),
         label: ""
-      })), jsx(ArticleFeedbackText, {
+      })), /*#__PURE__*/React.createElement(ArticleFeedbackText, {
         role: "alert",
         "aria-live": "polite"
       }, formatMessage(messages.help_article_rating_form_Success)));
     }
   } else if (wasHelpfulFormSubmited && wasHelpfulFormSubmitedFailed) {
-    return jsx(React.Fragment, null, wasHelpfulFormSubmited && wasHelpfulFormSubmitedFailed && jsx(ArticleFeedbackContainer, null, jsx(SectionMessage, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, wasHelpfulFormSubmited && wasHelpfulFormSubmitedFailed && /*#__PURE__*/React.createElement(ArticleFeedbackContainer, null, /*#__PURE__*/React.createElement(SectionMessage, {
       appearance: "warning"
-    }, jsx(Text, {
+    }, /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, formatMessage(messages.help_article_rating_form_failed)), jsx(Text, {
+    }, formatMessage(messages.help_article_rating_form_failed)), /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, jsx(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "link",
       spacing: "compact",
-      css: buttonStyles,
-      onClick: handleTryAgainOnClick
+      onClick: handleTryAgainOnClick,
+      className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf"])
     }, formatMessage(messages.help_article_rating_form_failed_try_again))))));
   }
   return null;
 };
 var ArticleWasHelpfulFormWithContext = function ArticleWasHelpfulFormWithContext(props) {
-  return jsx(AnalyticsContext, {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: ANALYTICS_CONTEXT_DATA
-  }, jsx(ArticleWasHelpfulForm, props));
+  }, /*#__PURE__*/React.createElement(ArticleWasHelpfulForm, props));
 };
 export default injectIntl(ArticleWasHelpfulFormWithContext);

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/styled.compiled.css

@@ -0,0 +1,5 @@
+._11c8kn18{font:var(--_1a31d1l)}
+._1e0c1o8l{display:inline-block}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._kqswh2mm{position:relative}
+._syazpsu8{color:var(--_vrm7dk)}

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/styled.js

@@ -1,28 +1,43 @@
-/**
- * @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';
+/* 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 = ["id", "top", "paddingRight", "children"];
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
 import { fontFallback } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ArticleFeedbackContainer = styled.div({
-  position: 'relative'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ArticleFeedbackText = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-heading-xxsmall, ".concat(fontFallback.heading.xxsmall, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
-  position: 'relative',
-  display: 'inline-block'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var ArticleFeedbackAnswerWrapper = styled.div({
-  paddingTop: "var(--ds-space-200, 16px)"
-});
+import { N200 } from '@atlaskit/theme/colors';
+var heading = fontFallback.heading;
+var articleFeedbackContainerStyles = null;
+export var ArticleFeedbackContainer = function ArticleFeedbackContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswh2mm"])
+  }, children);
+};
+var articleFeedbackTextStyles = null;
+export var ArticleFeedbackText = function ArticleFeedbackText(_ref2) {
+  var id = _ref2.id,
+    top = _ref2.top,
+    paddingRight = _ref2.paddingRight,
+    children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id
+  }, rest, {
+    className: ax(["_11c8kn18 _syazpsu8 _kqswh2mm _1e0c1o8l"]),
+    style: {
+      top: top,
+      paddingRight: paddingRight,
+      "--_1a31d1l": ix("var(--ds-font-heading-xxsmall, ".concat(heading.xxsmall, ")")),
+      "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")"))
+    }
+  }), children);
+};
+var articleFeedbackAnswerWrapperStyles = null;
+export var ArticleFeedbackAnswerWrapper = function ArticleFeedbackAnswerWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0qpxbi"])
+  }, children);
+};

package/dist/esm/components/Article/HelpArticle/index.js

@@ -56,7 +56,7 @@ export var HelpArticle = function HelpArticle(_ref) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',
       packageName: "@atlaskit/help",
-      packageVersion: "8.0.9"
+      packageVersion: "9.0.0"
     };
     if (onRelatedArticlesShowMoreClick) {
       onRelatedArticlesShowMoreClick(event, analyticsEvent, isCollapsed);

package/dist/esm/components/Article/WhatsNewArticle/index.js

@@ -13,7 +13,7 @@ import { WhatsNewTypeTitle, WhatsNewTitleText, WhatsNewIconContainer, RelatedLin
 var analyticsContextData = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 export var WhatsNewArticle = function WhatsNewArticle(_ref) {
   var formatMessage = _ref.intl.formatMessage,

package/dist/esm/components/Article/WhatsNewArticle/styled.compiled.css

@@ -0,0 +1,16 @@
+._11c81bq0{font:var(--_bo9t81)}
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1o8l{display:inline-block}
+._1e0c1ule{display:block}
+._1hmsglyw{text-decoration-line:none}
+._1reo15vq{overflow-x:hidden}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._o5724jg8{white-space:normal}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
+._s7n4nkob{vertical-align:middle}
+._syaz1o8f{color:var(--_ggxzyp)}
+._syazg0pi{color:var(--_1dzgjqk)}