@atlaskit/help 8.0.9 → 9.0.0

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

@@ -1,150 +1,89 @@
-/**
- * @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 ArticlesListItemWrapper = styled.a({
-  position: 'relative',
-  boxSizing: 'border-box',
-  padding: "var(--ds-space-100, 8px)",
-  display: 'block',
-  textDecoration: 'none',
-  cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${colors.N200})`,
-  borderRadius: '3px',
-  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
-  '&:hover, &:focus, &:visited, &:active': {
-    textDecoration: 'none',
-    outline: 'none',
-    outlineOffset: 'none'
-  },
-  '&:focus': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    boxShadow: `${`var(--ds-border-focused, ${colors.B100})`} 0px 0px 0px 2px inset`
-  },
-  '&:hover': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${colors.N30})`
-  },
-  '&:active': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${colors.B50})`
-  }
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-props => props.styles);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListItemContainer = styled.div({
-  width: '100%',
-  whiteSpace: 'nowrap',
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemTitleSection = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListItemTypeTitle = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
-  fontWeight: "var(--ds-font-weight-bold, bold)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${colors.N200})`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListItemLinkIcon = styled.span({
-  alignSelf: 'auto',
-  paddingInlineStart: "var(--ds-space-050, 4px)",
-  verticalAlign: 'middle'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListItemTitleText = styled.p({
-  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})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
-  display: 'inline-block',
-  whiteSpace: 'normal',
-  overflow: 'hidden',
-  marginBottom: "var(--ds-space-100, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListItemDescription = styled.p({
-  display: 'block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '20px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtle, ${colors.N400})`,
-  margin: 0,
-  paddingBottom: "var(--ds-space-025, 2px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemSource = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  // 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.N400A})`,
-  padding: `${"var(--ds-space-050, 4px)"} 0`,
-  fontWeight: "var(--ds-font-weight-bold, bold)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemTrustFactor = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${colors.N400A})`,
-  paddingTop: "var(--ds-space-025, 2px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemViewCount = styled.span({
-  paddingRight: "var(--ds-space-100, 8px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemHelpfulCount = styled.span({
-  display: 'inline-flex',
-  paddingRight: "var(--ds-space-100, 8px)",
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '& > span': {
-    marginRight: "var(--ds-space-025, 2px)"
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemLastModified = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${colors.N400A})`,
-  padding: `${"var(--ds-space-050, 4px)"} 0`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export const ArticlesListItemDescriptionHighlight = styled.mark({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-background-accent-yellow-subtlest, ${colors.Y100})`
-});
+import { B100, B50, N200, N30, N400, N400A, N800, Y100 } from '@atlaskit/theme/colors';
+const {
+  heading,
+  body
+} = fontFallback;
+const articlesListItemWrapperStyles = null;
+export const ArticlesListItemWrapper = ({
+  styles,
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("a", _extends({
+  style: styles
+}, rest, {
+  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rko1l7b _kqswh2mm _vchhusvi _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1ule _80omtlke _syaz1wmz _bfhkqtfy _7ehi1ssq _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 _irr314ae _1di61l7b"])
+}), children);
+const articlesListItemContainerStyles = null;
+export const ArticlesListItemContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1osq _o5721q9c _1e0c1txw"])
+}, children);
+const articlesListItemTitleSectionStyles = null;
+export const ArticlesListItemTitleSection = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1txw _2lx21bp4 _16jlkb7n"])
+}, children);
+const articlesListItemLinkIconStyles = null;
+export const ArticlesListItemLinkIcon = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_1wpz1wug _bozg1b66 _s7n4nkob"])
+}, children);
+const articlesListItemTitleTextStyles = null;
+export const ArticlesListItemTitleText = ({
+  children
+}) => /*#__PURE__*/React.createElement("p", {
+  className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c8140y _1reo15vq _18m915vq _syaz1fxt _1e0c1o8l _o5724jg8 _otyrh9hh"])
+}, children);
+const articlesListItemDescriptionStyles = null;
+export const ArticlesListItemDescription = ({
+  children
+}) => /*#__PURE__*/React.createElement("p", {
+  className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1ule _vwz4gktf _syaz1a45 _n3tdv77o"])
+}, children);
+const articlesListItemSourceStyles = null;
+export const ArticlesListItemSource = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c81vhk _1e0c1txw _4cvr1h6o _syazn5hs _ca0q1b66 _u5f3idpf _n3td1b66 _19bvidpf _k48p1igg _1p1dangw"])
+}, children);
+const articlesListItemTrustFactorStyles = null;
+export const ArticlesListItemTrustFactor = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c81o8v _1e0c1txw _4cvr1h6o _syazn5hs _ca0qv77o"])
+}, children);
+const articlesListItemViewCountStyles = null;
+export const ArticlesListItemViewCount = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_u5f3u2gc"])
+}, children);
+const articlesListItemHelpfulCountStyles = null;
+export const ArticlesListItemHelpfulCount = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_1e0c116y _u5f3u2gc _4cvr1h6o _1gicv77o"])
+}, children);
+const articlesListItemLastModifiedStyles = null;
+export const ArticlesListItemLastModified = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c81o8v _syazn5hs _ca0q1b66 _u5f3idpf _n3td1b66 _19bvidpf"])
+}, children);
+const articlesListItemDescriptionHighlightStyles = null;
+export const ArticlesListItemDescriptionHighlight = ({
+  key,
+  children
+}) => /*#__PURE__*/React.createElement("mark", {
+  key: key,
+  className: ax(["_bfhk1onh"])
+}, children);

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

@@ -0,0 +1,9 @@
+._19bvidpf{padding-left:0}
+._1ipkidpf span{margin-top:0}
+._1kdcidpf span{margin-right:0}
+._1w2uidpf span{margin-left:0}
+._3glyidpf span{margin-bottom:0}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3idpf{padding-right:0}

package/dist/es2019/components/ArticlesList/styled.js

@@ -1,30 +1,16 @@
-/**
- * @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';
-export const truncate = (width = '100%') => 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
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ArticlesListContainer = 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 ToggleShowMoreArticlesContainer = styled.div({
-  padding: `${"var(--ds-space-100, 8px)"} 0`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    margin: 0
-  }
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const articlesListContainerStyles = null;
+export const ArticlesListContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswh2mm"])
+}, children);
+const toggleShowMoreArticlesContainerStyles = null;
+export const ToggleShowMoreArticlesContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf"])
+}, children);

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

@@ -5,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
-const defaultStyle = {
-  transition: `left ${TRANSITION_DURATION_MS}ms, opacity ${TRANSITION_DURATION_MS}ms`,
-  left: "var(--ds-space-300, 24px)",
-  opacity: 0
-};
-const 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 const BackButton = ({
   onClick,
   isVisible = true,
@@ -43,16 +26,11 @@ export const BackButton = ({
   };
   return /*#__PURE__*/React.createElement(Transition, {
     in: isVisible,
-    timeout: TRANSITION_DURATION_MS,
+    timeout: BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS,
     mountOnEnter: true,
     unmountOnExit: true
   }, state => /*#__PURE__*/React.createElement(BackButtonContainer, {
-    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]
-    }
+    transitionState: state
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: event => {
       if (state === 'entered') {
@@ -72,7 +50,7 @@ const BackButtonWithContext = props => {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help",
-      packageVersion: "8.0.9"
+      packageVersion: "9.0.0"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

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

@@ -7,7 +7,7 @@ import { HelpContentButtonContainer, HelpContentButtonIcon, HelpContentButtonTex
 const analitycsContextData = {
   componentName: 'HelpContentButton',
   packageName: "@atlaskit/help",
-  packageVersion: "8.0.9"
+  packageVersion: "9.0.0"
 };
 const HelpContentButton = ({
   id = '',
@@ -43,7 +43,7 @@ const HelpContentButton = ({
     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/es2019/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)}
+._1bsbgktf{width:20px}
+._1bsbnau3{width:calc(100% - var(--ds-space-200, 1pc))}
+._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}
+._syazc8hx{color:var(--ds-text-subtle,#344563)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._vr2wstnw span{position:absolute}
+._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}
+._9h8hc8hx:active, ._f8pjc8hx:focus, ._30l3c8hx:hover, ._1053c8hx:visited{color:var(--ds-text-subtle,#344563)}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover, ._1x28glyw:visited{text-decoration-line:none}

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

@@ -1,80 +1,49 @@
-/**
- * @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 const HelpContentButtonContainer = styled.a`
-	display: block;
-	cursor: pointer;
-	width: calc(100% - ${"var(--ds-space-200, 16px)"});
-	color: ${`var(--ds-text-subtle, ${colors.N600})`};
-	padding: ${"var(--ds-space-100, 8px)"};
-	border-radius: 3px;
-
-	&:hover,
-	&:focus,
-	&:visited,
-	&:active {
-		text-decoration: none;
-		outline: none;
-		outline-offset: none;
-		color: ${`var(--ds-text-subtle, ${colors.N600})`};
-	}
-
-	&:focus {
-		box-shadow: ${`var(--ds-border-focused, ${colors.B100})`} 0 0 0 2px inset;
-	}
-
-	&:hover {
-		background-color: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30})`};
-	}
-
-	&:active {
-		background-color: ${`var(--ds-background-neutral-subtle-pressed, ${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 const HelpContentButtonIcon = styled.div`
-	display: inline-block;
-	vertical-align: middle;
-	width: 20px;
-	height: 20px;
-	border-radius: 4px;
-	position: relative;
-
-	& span {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-`;
-
-// 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 HelpContentButtonText = styled.div`
-	width: calc(100% - 20px);
-	display: inline-block;
-	vertical-align: middle;
-	padding: 0 ${"var(--ds-space-100, 8px)"};
-	box-sizing: border-box;
-`;
-
-// 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 HelpContentButtonExternalLinkIcon = styled.div`
-	display: inline-block;
-	vertical-align: middle;
-	padding-left: ${"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 const HelpContentButtonExternalNotificationIcon = styled.div`
-	display: inline-block;
-	vertical-align: middle;
-	margin-top: ${"var(--ds-space-negative-050, -4px)"};
-	padding-left: ${"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';
+const helpContentButtonContainerStyles = null;
+export const HelpContentButtonContainer = ({
+  onClick,
+  onKeyDown,
+  href,
+  id,
+  tabIndex,
+  target,
+  children
+}) => /*#__PURE__*/React.createElement("a", {
+  onClick: onClick,
+  onKeyDown: onKeyDown,
+  href: href,
+  id: id,
+  tabIndex: tabIndex,
+  target: target,
+  className: ax(["_2rko1l7b _1e0c1ule _80omtlke _1bsbnau3 _syazc8hx _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _7ehi1ssq _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 _9h8hc8hx _f8pjc8hx _30l3c8hx _1053c8hx _irr314ae _1di61l7b"])
+}, children);
+const helpContentButtonIconStyles = null;
+export const HelpContentButtonIcon = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_2rko1y44 _1e0c1o8l _s7n4nkob _1bsbgktf _4t3igktf _kqswh2mm _vr2wstnw _1t181ssb _1t981ssb _1eab1ooe"])
+}, children);
+const helpContentButtonTextStyles = null;
+export const HelpContentButtonText = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1o8l _s7n4nkob _1bsbwgn3 _ca0qidpf _u5f3u2gc _n3tdidpf _19bvu2gc _vchhusvi"])
+}, children);
+const helpContentButtonExternalLinkIconStyles = null;
+export const HelpContentButtonExternalLinkIcon = ({
+  dataTestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": dataTestId,
+  className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66"])
+}, children);
+const helpContentButtonExternalNotificationIconStyles = null;
+export const HelpContentButtonExternalNotificationIcon = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66 _19pkr5cr"])
+}, children);

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

@@ -1,41 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const 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 const 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 const 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';
+const needMoreHelpContainerStyles = null;
+export const NeedMoreHelpContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1pbyibnn _1wpz1h6o _ae4v1h6o _bfhk1ozg _1bsbzddy _4t3iw1ge _16qst7d8 _kdamz7t1"])
+}, children);
+const needMoreHelpContentStyles = null;
+export const NeedMoreHelpContent = ({
+  children
+}) => /*#__PURE__*/React.createElement("p", {
+  className: ax(["_11c81vhk _19pkidpf _2hwxidpf _otyridpf _18u0idpf _syaz1fxt _1e0c1o8l _1wpz1h6o"])
+}, children);
+const helpAskAIStyles = null;
+export const HelpAskAI = ({
+  children,
+  onClick
+}) => /*#__PURE__*/React.createElement("p", {
+  onClick: onClick,
+  className: ax(["_11c81vhk _19pkidpf _2hwxidpf _otyridpf _18u0idpf _syazaqb7 _1e0c1o8l _1wpz1h6o _80omtlke _9oik1r31 _1bnx8stv _jf4cnqa1"])
+}, children);