@atlaskit/help 8.0.9 → 9.0.0

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/index.js

@@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl-next';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../../messages';
 import { LoadingRectangle } from '../../../../util/styled';
-import { LoadignWhatsNewResultsList, LoadignWhatsNewResultsListItem } from './styled';
+import { LoadingWhatsNewResultsList, LoadingWhatsNewResultsListItem } from './styled';
 import { WhatsNewResultsListTitleContainer } from '../styled';
 export const WhatsNewResultsLoading = ({
   intl: {
@@ -14,14 +14,14 @@ export const WhatsNewResultsLoading = ({
     contentHeight: `${gridSize() * 5}px`,
     contentWidth: "152px",
     marginTop: "0"
-  }), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsList, {
+  }), /*#__PURE__*/React.createElement(LoadingWhatsNewResultsList, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(WhatsNewResultsListTitleContainer, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'inline-block',
@@ -47,7 +47,7 @@ export const WhatsNewResultsLoading = ({
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'inline-block',
@@ -77,7 +77,7 @@ export const WhatsNewResultsLoading = ({
     contentHeight: "11px",
     contentWidth: "60px",
     marginTop: "0"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'inline-block',
@@ -103,7 +103,7 @@ export const WhatsNewResultsLoading = ({
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "90%",
     marginTop: "4px"
-  })), /*#__PURE__*/React.createElement(LoadignWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
+  })), /*#__PURE__*/React.createElement(LoadingWhatsNewResultsListItem, null, /*#__PURE__*/React.createElement(LoadingRectangle, {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'inline-block',

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.compiled.css

@@ -0,0 +1,16 @@
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bsb1osq{width:100%}
+._1e0c1ule{display:block}
+._2hwxidpf{margin-right:0}
+._ca0qidpf{padding-top:0}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdidpf{padding-bottom:0}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsLoading/styled.js

@@ -1,26 +1,21 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// 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 _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
 /**
  * Loading styled-components
  */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadignWhatsNewResultsList = styled.ul({
-  width: '100%',
-  margin: 0,
-  padding: 0,
-  boxSizing: 'border-box',
-  marginTop: "var(--ds-space-200, 16px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadignWhatsNewResultsListItem = styled.li({
-  display: 'block',
-  width: '100%',
-  padding: "var(--ds-space-100, 8px)",
-  margin: 0,
-  boxSizing: 'border-box'
-});
+const loadingWhatsNewResultsListStyles = null;
+export const LoadingWhatsNewResultsList = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("ul", _extends({}, rest, {
+  className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsb1osq _vchhusvi _19pkpxbi"])
+}), children);
+const loadingWhatsNewResultsListItemStyles = null;
+export const LoadingWhatsNewResultsListItem = ({
+  children
+}) => /*#__PURE__*/React.createElement("li", {
+  className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1ule _1bsb1osq _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _vchhusvi"])
+}, children);

package/dist/es2019/components/WhatsNew/WhatsNewResults/index.compiled.css

@@ -0,0 +1,21 @@
+
+._v5643rtd{transition:opacity .44s}._154i1eca{top:var(--ds-space-800,60px)}
+._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bsb1osq{width:100%}
+._1o9zkb7n{flex-shrink:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._3um015vq{visibility:hidden}
+._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)}
+._tzy4idpf{opacity:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js

@@ -1,3 +1,7 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/** @jsxFrag */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useState, useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import isEqual from 'lodash/isEqual';
@@ -7,7 +11,7 @@ import { VIEW } from '../../constants';
 import { messages } from '../../../messages';
 import { WHATS_NEW_ITEM_TYPES } from '../../../model/WhatsNew';
 import { REQUEST_STATE } from '../../../model/Requests';
-import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../constants';
+import { NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../constants';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
 import { useAiContext } from '../../contexts/aiAgentContext';
@@ -15,12 +19,10 @@ import WhatsNewResultsEmpty from './WhatsNewResultsEmpty';
 import WhatsNewResultsError from './WhatsNewResultsError';
 import WhatsNewResultsLoading from './WhatsNewResultsLoading';
 import WhatsNewResultsList from './WhatsNewResultsList';
-import { WhatsNewResultsContainer, SelectContainer, WhatsNewResultsListContainer, WhatsNewResultsContainerAi } from './styled';
-const defaultStyle = {
-  transition: `opacity ${FADEIN_OVERLAY_TRANSITION_DURATION_MS}ms`,
-  opacity: 0,
-  visibility: 'hidden'
-};
+import { SelectContainer, WhatsNewResultsListContainer } from './styled';
+const FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
+const whatsNewResultsContainerStyles = null;
+const whatsNewResultsContainerAiStyles = null;
 const transitionStyles = {
   entering: {
     opacity: 1,
@@ -111,15 +113,14 @@ export const WhatsNewResults = ({
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
     onEnter: handleOnEnter,
     onExit: handleOnExit
-  }, state => isAiEnabled ? /*#__PURE__*/React.createElement(WhatsNewResultsContainerAi, {
+  }, state => isAiEnabled ? /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     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]
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
+    },
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _n3tdpxbi _19bvpxbi _u5f3pxbi _kqswstnw _1bsb1osq _154i1eca _bfhkvuon _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbykb7n"])
+  }, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
     defaultValue: selectedOption
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
@@ -167,15 +168,14 @@ export const WhatsNewResults = ({
     onClearFilter: handleOnClearFilter
   }))), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
     onSearch: onSearchWhatsNewArticles
-  }))) : /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
+  })) : /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     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]
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
+    },
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _v5643rtd _kqswstnw _4t3i1osq _1bsb1osq _154iidpf _bfhkvuon _2lx21bp4 _vchhusvi _1reo15vq _18m91wug _1pbykb7n _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _tzy4idpf _3um015vq"])
+  }, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
     defaultValue: selectedOption
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
@@ -223,6 +223,6 @@ export const WhatsNewResults = ({
     onClearFilter: handleOnClearFilter
   }))), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
     onSearch: onSearchWhatsNewArticles
-  }))));
+  })));
 };
 export default injectIntl(WhatsNewResults);

package/dist/es2019/components/WhatsNew/WhatsNewResults/styled.compiled.css

@@ -0,0 +1,6 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bsb1llu{width:152px}
+._ca0qidpf{padding-top:0}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdidpf{padding-bottom:0}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/components/WhatsNew/WhatsNewResults/styled.js

@@ -1,55 +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';
+/* 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';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WhatsNewResultsContainer = styled.div({
-  position: 'absolute',
-  height: '100%',
-  width: '100%',
-  top: 0,
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  flex: 1,
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  zIndex: 1,
-  padding: "var(--ds-space-200, 16px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WhatsNewResultsContainerAi = styled.div({
-  paddingBottom: "var(--ds-space-200, 16px)",
-  paddingLeft: "var(--ds-space-200, 16px)",
-  paddingRight: "var(--ds-space-200, 16px)",
-  position: 'absolute',
-  width: '100%',
-  top: "var(--ds-space-800, 60px)",
-  backgroundColor: "var(--ds-surface, #FFFFFF)",
-  flex: 1,
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  zIndex: 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 SelectContainer = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: `${19 * gridSize()}px`
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WhatsNewResultsListContainer = styled.div({
-  paddingTop: "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 WhatsNewResultsListTitleContainer = styled.div({
-  padding: `0 ${"var(--ds-space-100, 8px)"}`
-});
+const selectContainerStyles = null;
+export const SelectContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1llu"])
+}, children);
+const whatsNewResultsListContainerStyles = null;
+export const WhatsNewResultsListContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0qu2gc"])
+}, children);
+const whatsNewResultsListTitleContainerStyles = null;
+export const WhatsNewResultsListTitleContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0qidpf _u5f3u2gc _n3tdidpf _19bvu2gc"])
+}, children);

package/dist/es2019/components/constants.js

@@ -13,6 +13,4 @@ export let VIEW = /*#__PURE__*/function (VIEW) {
 // Animation related consts
 export const SLIDEIN_OVERLAY_TRANSITION_DURATION_MS = 300;
 export const FADEIN_OVERLAY_TRANSITION_DURATION_MS = 440;
-export const HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;
-// Animation related consts
-export const TRANSITION_DURATION_MS = 220;
+export const HIDE_CONTENT_DELAY = FADEIN_OVERLAY_TRANSITION_DURATION_MS + 200;

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

@@ -0,0 +1,36 @@
+
+._v5641kd4{transition:left .22s,opacity .22s}
+._x3domfkj{border-top:var(--ds-space-025,2px) solid var(--ds-border,#ebecf0)}._16jlkb7n{flex-grow:1}
+._18m91wug{overflow-y:auto}
+._19bvidpf{padding-left:0}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkou31{margin-top:var(--ds-space-200,14px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1f49idpf{order:0}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1n261q9c{flex-wrap:nowrap}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1wpz1wug{align-self:auto}
+._2lx21bp4{flex-direction:column}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1osq{height:100%}
+._4t3ixy5q{height:var(--ds-space-400,2pc)}
+._ae4v1fhb{align-content:stretch}
+._bfhk1gi7{background-color:var(--ds-background-neutral,#fafbfc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/components/styled.js

@@ -1,87 +1,75 @@
-/**
- * @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';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const HelpBodyContainer = styled.div({
-  flexGrow: 1,
-  minHeight: 0,
-  position: 'relative',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  flexWrap: 'nowrap',
-  justifyContent: 'space-between',
-  alignContent: 'stretch',
-  alignItems: 'flex-start'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const HelpBody = styled.div({
-  width: '100%',
-  boxSizing: 'border-box',
-  order: 0,
-  flex: '1 1 auto',
-  alignSelf: 'auto',
-  position: 'relative',
-  overflowX: 'hidden',
-  overflowY: 'auto'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const HelpBodyAi = styled.div({
-  width: '100%',
-  boxSizing: 'border-box',
-  order: 0,
-  flex: '1 1 auto',
-  alignSelf: 'auto',
-  position: 'relative'
-});
-// 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 Home = styled.div(props => ({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  display: props.isOverlayFullyVisible ? 'none' : 'block',
-  height: '100%',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  overflow: props.isOverlayVisible ? 'hidden' : 'auto',
-  padding: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-}));
-
-// 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 HomeAi = styled.div(props => ({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  display: props.isOverlayFullyVisible ? 'none' : 'block',
-  // height: `calc(100% - ${token('space.800', '60px')})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  overflow: props.isOverlayVisible ? 'hidden' : 'auto',
-  paddingLeft: "var(--ds-space-200, 16px)",
-  paddingRight: "var(--ds-space-200, 16px)",
-  paddingBottom: "var(--ds-space-200, 16px)",
-  boxSizing: 'border-box'
-}));
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const HelpFooter = styled.div({
-  padding: `${"var(--ds-space-100, 8px)"} 0`,
-  boxSizing: 'border-box',
-  width: '100%',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-background-neutral, ${colors.N10})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderTop: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
-  justifyContent: 'space-between'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const BackButtonContainer = styled.div({
-  position: 'absolute',
-  marginTop: "var(--ds-space-200, 14px)",
-  left: "var(--ds-space-100, 8px)",
-  height: "var(--ds-space-400, 32px)"
-});
+/* 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 { N10, N30 } from '@atlaskit/theme/colors';
+const helpBodyContainerStyles = null;
+export const HelpBodyContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1tkeidpf _kqswh2mm _18m91wug _1reo15vq _1e0c1txw _2lx21bp4 _1n261q9c _1bah1yb4 _ae4v1fhb _4cvr1y6m"])
+}, children);
+const helpBodyStyles = null;
+export const HelpBody = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm _1reo15vq _18m91wug"])
+}, children);
+const helpBodyAiStyles = null;
+export const HelpBodyAi = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1bsb1osq _vchhusvi _1f49idpf _1wpz1wug _kqswh2mm"])
+}, children);
+const homeStyles = null;
+export const Home = ({
+  isOverlayFullyVisible,
+  isOverlayVisible,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: isOverlayFullyVisible ? 'none' : 'block',
+    overflow: isOverlayVisible ? 'hidden' : 'auto'
+  },
+  className: ax(["_1reo1wug _18m91wug _1e0c1ule _4t3i1osq _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _vchhusvi"])
+}, children);
+const homeAiStyles = null;
+export const HomeAi = ({
+  isOverlayFullyVisible,
+  isOverlayVisible,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: isOverlayFullyVisible ? 'none' : 'block',
+    overflow: isOverlayVisible ? 'hidden' : 'auto'
+  },
+  className: ax(["_1reo1wug _18m91wug _1e0c1ule _19bvpxbi _u5f3pxbi _n3tdpxbi _vchhusvi"])
+}, children);
+const helpFooterStyles = null;
+export const HelpFooter = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  className: ax(["_x3domfkj _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _1bsb1osq _bfhk1gi7 _1bah1yb4"])
+}), children);
+export const BACK_BUTTON_CONTAINER_TRANSITION_DURATION_MS = 220;
+const backButtonContainerStyles = null;
+const backButtonContainerTransitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+export const BackButtonContainer = ({
+  transitionState,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  style: backButtonContainerTransitionStyles[transitionState],
+  className: ax(["_v5641kd4 _kqswstnw _19pkou31 _1ltv1ejb _4t3ixy5q _tzy4idpf"])
+}, children);

package/dist/es2019/util/styled.compiled.css

@@ -0,0 +1,33 @@
+
+._2rkoyh40{border-radius:2px}._100gmslj>img{height:calc(100% - 4px)}
+._12vemgnk{background-repeat:no-repeat}
+._15jg1osq>img>svg{height:100%}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bsb1osq{width:100%}
+._1bsbpxbi{width:var(--ds-space-200,1pc)}
+._1e0c1o8l{display:inline-block}
+._1itk67kk{background-image:linear-gradient(to right,var(--ds-background-neutral-subtle,#ebecf0) 10%,var(--ds-background-neutral,#dfe1e6) 20%,var(--ds-background-neutral-subtle,#ebecf0) 30%)}
+._1jrq1osq>img>svg{width:100%}
+._1o51q7pw{animation-fill-mode:forwards}
+._1pglp3kn{animation-timing-function:linear}
+._4t3ipxbi{height:var(--ds-space-200,1pc)}
+._4t3iyh40{height:2px}
+._5s2h1ssb>img{left:50%}
+._5sag126j{animation-duration:1.2s}
+._9qcx1ooe>img{transform:translate(-50%,-50%)}
+._bfhk1yrq{background-color:var(--ds-background-neutral,#ebecf0)}
+._bfhkpt7r{background-color:var(--ds-border,rgba(9,30,66,.08))}
+._ca0qidpf{padding-top:0}
+._iu1xmslj>img{width:calc(100% - 4px)}
+._j7hq1en8{animation-name:k6xje6p}
+._kqswh2mm{position:relative}
+._n3tdidpf{padding-bottom:0}
+._s7n4nkob{vertical-align:middle}
+._se2z1ssb>img{top:50%}
+._syazu67f{color:#fff}
+._tip812c5{animation-iteration-count:infinite}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+._yti7stnw>img{position:absolute}
+@keyframes k6xje6p{0%{background-position:-300px 0}to{background-position:750pt 0}}