@atlaskit/help 8.0.9 → 9.0.0

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

@@ -1,8 +1,7 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 /** @jsxFrag */
 
 import React, { useState } from 'react';
@@ -16,12 +15,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';
@@ -30,15 +25,9 @@ const FEEDBACK_REASON_TEXT_MAX_LENGTH = '16000';
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticleWasHelpfulForm',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
-const buttonStyles = css({
-  padding: '0',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& span': {
-    margin: '0'
-  }
-});
+const buttonStyles = null;
 export const ArticleWasHelpfulForm = ({
   onWasHelpfulSubmit,
   onWasHelpfulYesButtonClick,
@@ -135,26 +124,22 @@ export const ArticleWasHelpfulForm = ({
   };
   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
       }, ({
         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
@@ -174,86 +159,82 @@ export const ArticleWasHelpfulForm = ({
             // 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
         }, ({
           fieldProps
-        }) => jsx(RadioGroup, _extends({}, fieldProps, {
+        }) => /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
           options: negativeFeedbackReason,
           onChange: radioGroupReasonOnChange,
           "aria-labelledby": "feedbackReason-label"
-        })))), jsx(Field, {
+        })))), /*#__PURE__*/React.createElement(Field, {
           name: "feedbackReasonText",
           defaultValue: ""
         }, ({
           fieldProps
-        }) => 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, {
+        }) => /*#__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"
         }, ({
           fieldProps
-        }) => jsx(Checkbox, _extends({}, fieldProps, {
+        }) => /*#__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, ${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;
 };
 const 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/es2019/components/Article/HelpArticle/WasHelpfulForm/styled.compiled.css

@@ -0,0 +1,5 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1e0c1o8l{display:inline-block}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._kqswh2mm{position:relative}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}

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

@@ -1,28 +1,38 @@
-/**
- * @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 "./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 const 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 const 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, ${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, ${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 const ArticleFeedbackAnswerWrapper = styled.div({
-  paddingTop: "var(--ds-space-200, 16px)"
-});
+import { N200 } from '@atlaskit/theme/colors';
+const {
+  heading
+} = fontFallback;
+const articleFeedbackContainerStyles = null;
+export const ArticleFeedbackContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswh2mm"])
+}, children);
+const articleFeedbackTextStyles = null;
+export const ArticleFeedbackText = ({
+  id,
+  top,
+  paddingRight,
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({
+  id: id,
+  style: {
+    top: top,
+    paddingRight: paddingRight
+  }
+}, rest, {
+  className: ax(["_11c81vhk _syaz1wmz _kqswh2mm _1e0c1o8l"])
+}), children);
+const articleFeedbackAnswerWrapperStyles = null;
+export const ArticleFeedbackAnswerWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0qpxbi"])
+}, children);

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

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

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

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

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

@@ -0,0 +1,15 @@
+._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}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1rc1{color:var(--ds-text-subtlest,#5e6c84)}

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

@@ -1,64 +1,39 @@
-/**
- * @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 "./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 const WhatsNewTypeTitle = styled.span({
-  textDecoration: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${colors.N300})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
-  verticalAlign: 'middle',
-  paddingLeft: "var(--ds-space-050, 4px)",
-  whiteSpace: 'normal',
-  overflowX: 'hidden'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WhatsNewIconContainer = styled.div({
-  display: 'block',
-  paddingBottom: "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 const WhatsNewTitleText = styled.span({
-  textDecoration: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text, ${colors.N800})`,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  whiteSpace: 'normal',
-  overflowX: 'hidden',
-  paddingBottom: "var(--ds-space-100, 8px)",
-  display: 'block'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WhatsNewRelatedLinksTitleText = styled.span({
-  textDecoration: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text, ${colors.N800})`,
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  whiteSpace: 'normal',
-  overflowX: 'hidden',
-  paddingBottom: "var(--ds-space-100, 8px)",
-  display: 'block'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const RelatedLinkContainer = styled.div({
-  marginBottom: "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 const ExternalLinkIconContainer = styled.div({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  paddingLeft: "var(--ds-space-050, 4px)"
-});
+import { N300, N800 } from '@atlaskit/theme/colors';
+const {
+  body
+} = fontFallback;
+const whatsNewTypeTitleStyles = null;
+export const WhatsNewTypeTitle = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1rc1 _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"])
+}, children);
+const whatsNewIconContainerStyles = null;
+export const WhatsNewIconContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1ule _n3tdu2gc"])
+}, children);
+const whatsNewTitleText = null;
+export const WhatsNewTitleText = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1fxt _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"])
+}, children);
+const relatedLinkContainerStyles = null;
+export const RelatedLinkContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_otyru2gc"])
+}, children);
+const externalLinkIconContainerStyles = null;
+export const ExternalLinkIconContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66"])
+}, children);

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

@@ -0,0 +1,20 @@
+._154i1eca{top:var(--ds-space-800,60px)}
+._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1bsb1osq{width:100%}
+._1ltv1osq{left:100%}
+._1o9zkb7n{flex-shrink:1}
+._1pbycs5v{z-index:2}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4t3i1kz6{height:calc(100% - var(--ds-space-800, 60px))}
+._4t3i1osq{height:100%}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._i0dlf1ug{flex-basis:0%}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,14 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useState, useLayoutEffect, useRef, useEffect, useCallback } from 'react';
 import { Transition } from 'react-transition-group';
 import { useNavigationContext } from '../contexts/navigationContext';
 import { useHelpArticleContext } from '../contexts/helpArticleContext';
 import { SLIDEIN_OVERLAY_TRANSITION_DURATION_MS, VIEW } from '../constants';
-import { ArticleContainer, ArticleContainerAi } from './styled';
 import ArticleContent from './ArticleContent';
+const articleContainerStyles = null;
+const articleContainerAiStyles = null;
+
 // Animation
-const defaultStyle = {
-  left: '100%'
-};
 const enableTransition = {
   enabled: {
     transition: `left ${SLIDEIN_OVERLAY_TRANSITION_DURATION_MS}ms cubic-bezier(0.2, 0, 0, 1) 0s`
@@ -104,16 +106,15 @@ export const Article = ({
     unmountOnExit: true,
     mountOnEnter: true
   }, state => {
-    return /*#__PURE__*/React.createElement(ArticleContainerAi, {
+    return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
       style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ...defaultStyle,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...transitionStyles[state],
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']
-      }
+      },
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3i1kz6 _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
     }, /*#__PURE__*/React.createElement(ArticleContent, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
@@ -128,16 +129,15 @@ export const Article = ({
     unmountOnExit: true,
     mountOnEnter: true
   }, state => {
-    return /*#__PURE__*/React.createElement(ArticleContainer, {
+    return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
       style: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ...defaultStyle,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...transitionStyles[state],
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']
-      }
+      },
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"])
     }, /*#__PURE__*/React.createElement(ArticleContent, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,

package/dist/es2019/components/ArticlesList/ArticlesListItem/index.js

@@ -8,7 +8,7 @@ import { ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTit
 const ANALYTICS_CONTEXT_DATA = {
   componentName: 'ArticlesListItem',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 const highlightText = text => {
   if (!text) {

package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.compiled.css

@@ -0,0 +1,60 @@
+._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko1l7b{border-radius:3px}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._1bsb1osq{width:100%}
+._1e0c116y{display:inline-flex}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1gicv77o>span{margin-right:var(--ds-space-025,2px)}
+._1hmsglyw{text-decoration-line:none}
+._1p1dangw{text-transform:uppercase}
+._1reo15vq{overflow-x:hidden}
+._1wpz1wug{align-self:auto}
+._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._80omtlke{cursor:pointer}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1onh{background-color:var(--ds-background-accent-yellow-subtlest,#ffe380)}
+._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._k48p1igg{font-weight:var(--ds-font-weight-bold,bold)}
+._kqswh2mm{position:relative}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721q9c{white-space:nowrap}
+._o5724jg8{white-space:normal}
+._otyrh9hh{margin-bottom:var(--ds-space-100,4px)}
+._otyridpf{margin-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._syaz1a45{color:var(--ds-text-subtle,#505f79)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syazn5hs{color:var(--ds-text-subtlest,rgba(9,30,66,.71))}
+._u5f3idpf{padding-right:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._vwz4gktf{line-height:20px}
+._7ehi1ssq:focus{box-shadow:var(--ds-border-focused,#4c9aff) 0 0 0 2px inset}
+._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
+._13roglyw:active, ._1bg4glyw:focus, ._1qb1glyw:hover, ._1dnaglyw:visited{outline-offset:none}
+._1di61l7b:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
+._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}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover, ._1x28glyw:visited{text-decoration-line:none}