@atlaskit/help 8.0.9 → 9.0.0

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

@@ -1,64 +1,49 @@
-/**
- * @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 var 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, ".concat(colors.N300, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body, ".concat(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 var 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 var 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, ".concat(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 var 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, ".concat(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 var 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 var ExternalLinkIconContainer = styled.div({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  paddingLeft: "var(--ds-space-050, 4px)"
-});
+import { N300, N800 } from '@atlaskit/theme/colors';
+var body = fontFallback.body;
+var whatsNewTypeTitleStyles = null;
+export var WhatsNewTypeTitle = function WhatsNewTypeTitle(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c81bq0 _syazg0pi _s7n4nkob _19bv1b66 _o5724jg8 _1reo15vq"]),
+    style: {
+      "--_1dzgjqk": ix("var(--ds-text-subtlest, ".concat(N300, ")")),
+      "--_bo9t81": ix("var(--ds-font-body, ".concat(body.medium, ")"))
+    }
+  }, children);
+};
+var whatsNewIconContainerStyles = null;
+export var WhatsNewIconContainer = function WhatsNewIconContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1ule _n3tdu2gc"])
+  }, children);
+};
+var whatsNewTitleText = null;
+export var WhatsNewTitleText = function WhatsNewTitleText(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c82smr _syaz1o8f _k48p1pd9 _o5724jg8 _1reo15vq _n3tdu2gc _1e0c1ule"]),
+    style: {
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    }
+  }, children);
+};
+var relatedLinkContainerStyles = null;
+export var RelatedLinkContainer = function RelatedLinkContainer(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_otyru2gc"])
+  }, children);
+};
+var externalLinkIconContainerStyles = null;
+export var ExternalLinkIconContainer = function ExternalLinkIconContainer(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1o8l _s7n4nkob _19bv1b66"])
+  }, children);
+};

package/dist/esm/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}
+._4t3i1osq{height:100%}
+._4t3is6me{height:var(--_fwkl53)}
+._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/esm/components/Article/index.js

@@ -1,5 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState, useLayoutEffect, useRef, useEffect, useCallback } from 'react';
@@ -7,12 +10,11 @@ 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';
+var articleContainerStyles = null;
+var articleContainerAiStyles = null;
+
 // Animation
-var defaultStyle = {
-  left: '100%'
-};
 var enableTransition = {
   enabled: {
     transition: "left ".concat(SLIDEIN_OVERLAY_TRANSITION_DURATION_MS, "ms cubic-bezier(0.2, 0, 0, 1) 0s")
@@ -114,9 +116,12 @@ export var Article = function Article(_ref) {
     unmountOnExit: true,
     mountOnEnter: true
   }, function (state) {
-    return /*#__PURE__*/React.createElement(ArticleContainerAi, {
+    return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled'])
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _19bv1ejb _u5f31ejb _n3tdpxbi _kqswstnw _4t3is6me _1bsb1osq _154i1eca _bfhkvuon _1ltv1osq _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbycs5v"]),
+      style: _objectSpread(_objectSpread(_objectSpread({}, transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled']), {}, {
+        "--_fwkl53": ix("calc(100% - ".concat("var(--ds-space-800, 60px)", ")"))
+      })
     }, /*#__PURE__*/React.createElement(ArticleContent, {
       currentArticle: currentArticle,
       onHelpArticleLoadingFailTryAgainButtonClick: reloadHelpArticle && handleOnHelpArticleLoadingFailTryAgainButtonClick,
@@ -131,9 +136,10 @@ export var Article = function Article(_ref) {
     unmountOnExit: true,
     mountOnEnter: true
   }, function (state) {
-    return /*#__PURE__*/React.createElement(ArticleContainer, {
+    return /*#__PURE__*/React.createElement("div", {
       ref: articleContainerRef,
-      style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state]), enableTransition[!skipArticleSlideInAnimation ? 'enabled' : 'disabled'])
+      style: _objectSpread(_objectSpread({}, transitionStyles[state]), 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/esm/components/ArticlesList/ArticlesListItem/index.js

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

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

@@ -0,0 +1,60 @@
+._11c815ky{font:var(--_1hhs3jm)}
+._11c81ysy{font:var(--_9taizs)}
+._11c8kn18{font:var(--_1a31d1l)}
+._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}
+._bfhk1fc1{background-color:var(--_163kpkk)}
+._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}
+._syaz121t{color:var(--_1pseksa)}
+._syaz1hgm{color:var(--_1emrmq5)}
+._syaz1o8f{color:var(--_ggxzyp)}
+._syazpsu8{color:var(--_vrm7dk)}
+._u5f3idpf{padding-right:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}
+._vwz4gktf{line-height:20px}
+._7ehi13ga:focus{box-shadow:var(--_1cokla9)}
+._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}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover, ._1x28glyw:visited{text-decoration-line:none}

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

@@ -1,152 +1,130 @@
-/**
- * @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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["styles", "children"];
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
 import { 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 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, ".concat(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: "".concat("var(--ds-border-focused, ".concat(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, ".concat(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, ".concat(colors.B50, ")")
-  }
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-function (props) {
-  return 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 var 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 var 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 var 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, ".concat(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, ".concat(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 var 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 var 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, ".concat(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, ".concat(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 var 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, ".concat(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 var 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, ".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.N400A, ")"),
-  padding: "var(--ds-space-050, 4px)".concat(" 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 var 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, ".concat(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, ".concat(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 var 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 var 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 var 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, ".concat(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, ".concat(colors.N400A, ")"),
-  padding: "var(--ds-space-050, 4px)".concat(" 0")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-export var 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, ".concat(colors.Y100, ")")
-});
+import { B100, B50, N200, N30, N400, N400A, N800, Y100 } from '@atlaskit/theme/colors';
+var heading = fontFallback.heading,
+  body = fontFallback.body;
+var articlesListItemWrapperStyles = null;
+export var ArticlesListItemWrapper = function ArticlesListItemWrapper(_ref) {
+  var styles = _ref.styles,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
+    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _2rko1l7b _kqswh2mm _vchhusvi _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1ule _80omtlke _syazpsu8 _bfhkqtfy _7ehi13ga _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 _irr32tgk _1di618xb"]),
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
+      "--_1cokla9": ix("".concat("var(--ds-border-focused, ".concat(B100, ")"), " 0px 0px 0px 2px inset")),
+      "--_1y60f1n": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")),
+      "--_18th9fi": ix("var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"))
+    })
+  }), children);
+};
+var articlesListItemContainerStyles = null;
+export var ArticlesListItemContainer = function ArticlesListItemContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _o5721q9c _1e0c1txw"])
+  }, children);
+};
+var articlesListItemTitleSectionStyles = null;
+export var ArticlesListItemTitleSection = function ArticlesListItemTitleSection(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _2lx21bp4 _16jlkb7n"])
+  }, children);
+};
+var articlesListItemLinkIconStyles = null;
+export var ArticlesListItemLinkIcon = function ArticlesListItemLinkIcon(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1wpz1wug _bozg1b66 _s7n4nkob"])
+  }, children);
+};
+var articlesListItemTitleTextStyles = null;
+export var ArticlesListItemTitleText = function ArticlesListItemTitleText(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/React.createElement("p", {
+    className: ax(["_4bfu1r31 _1hmsglyw _ajmmnqa1 _11c81ysy _1reo15vq _18m915vq _syaz1o8f _1e0c1o8l _o5724jg8 _otyrh9hh"]),
+    style: {
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")")),
+      "--_9taizs": ix("var(--ds-font-heading-xsmall, ".concat(heading.xsmall, ")"))
+    }
+  }, children);
+};
+var articlesListItemDescriptionStyles = null;
+export var ArticlesListItemDescription = function ArticlesListItemDescription(_ref6) {
+  var children = _ref6.children;
+  return /*#__PURE__*/React.createElement("p", {
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1ule _vwz4gktf _syaz121t _n3tdv77o"]),
+    style: {
+      "--_1pseksa": ix("var(--ds-text-subtle, ".concat(N400, ")"))
+    }
+  }, children);
+};
+var articlesListItemSourceStyles = null;
+export var ArticlesListItemSource = function ArticlesListItemSource(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8kn18 _1e0c1txw _4cvr1h6o _syaz1hgm _ca0q1b66 _u5f3idpf _n3td1b66 _19bvidpf _k48p1igg _1p1dangw"]),
+    style: {
+      "--_1a31d1l": ix("var(--ds-font-heading-xxsmall, ".concat(heading.xxsmall, ")")),
+      "--_1emrmq5": ix("var(--ds-text-subtlest, ".concat(N400A, ")"))
+    }
+  }, children);
+};
+var articlesListItemTrustFactorStyles = null;
+export var ArticlesListItemTrustFactor = function ArticlesListItemTrustFactor(_ref8) {
+  var children = _ref8.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c815ky _1e0c1txw _4cvr1h6o _syaz1hgm _ca0qv77o"]),
+    style: {
+      "--_1hhs3jm": ix("var(--ds-font-body-small, ".concat(body.small, ")")),
+      "--_1emrmq5": ix("var(--ds-text-subtlest, ".concat(N400A, ")"))
+    }
+  }, children);
+};
+var articlesListItemViewCountStyles = null;
+export var ArticlesListItemViewCount = function ArticlesListItemViewCount(_ref9) {
+  var children = _ref9.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_u5f3u2gc"])
+  }, children);
+};
+var articlesListItemHelpfulCountStyles = null;
+export var ArticlesListItemHelpfulCount = function ArticlesListItemHelpfulCount(_ref10) {
+  var children = _ref10.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c116y _u5f3u2gc _4cvr1h6o _1gicv77o"])
+  }, children);
+};
+var articlesListItemLastModifiedStyles = null;
+export var ArticlesListItemLastModified = function ArticlesListItemLastModified(_ref11) {
+  var children = _ref11.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c815ky _syaz1hgm _ca0q1b66 _u5f3idpf _n3td1b66 _19bvidpf"]),
+    style: {
+      "--_1hhs3jm": ix("var(--ds-font-body-small, ".concat(body.small, ")")),
+      "--_1emrmq5": ix("var(--ds-text-subtlest, ".concat(N400A, ")"))
+    }
+  }, children);
+};
+var articlesListItemDescriptionHighlightStyles = null;
+export var ArticlesListItemDescriptionHighlight = function ArticlesListItemDescriptionHighlight(_ref12) {
+  var key = _ref12.key,
+    children = _ref12.children;
+  return /*#__PURE__*/React.createElement("mark", {
+    key: key,
+    className: ax(["_bfhk1fc1"]),
+    style: {
+      "--_163kpkk": ix("var(--ds-background-accent-yellow-subtlest, ".concat(Y100, ")"))
+    }
+  }, children);
+};

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

@@ -1,33 +1,18 @@
-/**
- * @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 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 "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+var articlesListContainerStyles = null;
+export var ArticlesListContainer = function ArticlesListContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswh2mm"])
+  }, children);
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var 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 var ToggleShowMoreArticlesContainer = styled.div({
-  padding: "var(--ds-space-100, 8px)".concat(" 0"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  span: {
-    margin: 0
-  }
-});
+var toggleShowMoreArticlesContainerStyles = null;
+export var ToggleShowMoreArticlesContainer = function ToggleShowMoreArticlesContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf"])
+  }, children);
+};