@atlaskit/help-layout 5.0.4 → 6.0.0

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

@@ -0,0 +1,31 @@
+._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._v5641kd4{transition:left .22s,opacity .22s}
+._n7zlmfkj{border-bottom:var(--ds-space-025,2px) solid var(--ds-border,#ebecf0)}
+._154i1q64{top:var(--ds-space-200,15px)}
+._154iutpp{top:var(--ds-space-150,9pt)}
+._18m915vq{overflow-y:hidden}
+._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsbnau3{width:calc(100% - var(--ds-space-200, 1pc))}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1o8l{display:inline-block}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1reo15vq{overflow-x:hidden}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._bfhk1gi7{background-color:var(--ds-background-neutral,#fafbfc)}
+._ca0qidpf{padding-top:0}
+._ca0qoybe{padding-top:var(--ds-space-250,18px)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._o5721q9c{white-space:nowrap}
+._s7n4nkob{vertical-align:middle}
+._syazjjyb{color:var(--ds-text-subtle,#42526e)}
+._tzy4idpf{opacity:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vwz41u3r{line-height:var(--ds-space-800,56px)}
+._y3gn1e5h{text-align:left}
+._y3gn1h6o{text-align:center}

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

@@ -1,77 +1,60 @@
-/**
- * @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 HeaderContainer = styled.div({
-  // 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
-  borderBottom: `${"var(--ds-space-025, 2px)"} solid ${`var(--ds-border, ${colors.N30})`}`,
-  justifyContent: 'space-between',
-  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 CloseButtonContainer = styled.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CloseButtonContainerAi = styled.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-200, 15px)"
-});
-
-// 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',
-  top: "var(--ds-space-150, 12px)",
-  left: "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 HeaderTitle = styled.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtle, ${colors.N500})`,
-  textAlign: 'center',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "var(--ds-space-800, 56px)",
-  width: '100%',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  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 HeaderTitleAi = styled.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtle, ${colors.N500})`,
-  textAlign: 'left',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  paddingTop: "var(--ds-space-250, 18px)",
-  paddingBottom: "var(--ds-space-200, 16px)",
-  width: `calc(100% - ${"var(--ds-space-200, 16px)"})`,
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  verticalAlign: 'middle',
-  marginLeft: "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 HeaderContent = styled.div({
-  padding: `0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"}`
-});
+/* 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 { N10, N30, N500 } from '@atlaskit/theme/colors';
+const headerContainerStyles = null;
+export const HeaderContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_n7zlmfkj _bfhk1gi7 _1bah1yb4 _kqswh2mm"])
+}, children);
+const closeButtonContainerStyles = null;
+export const CloseButtonContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _1xi2u2gc _154iutpp"])
+}, children);
+const closeButtonContainerAiStyles = null;
+export const CloseButtonContainerAi = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _1xi2u2gc _154i1q64"])
+}, children);
+export const 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", {
+  style: backButtonContainerTransitionStyles[transitionState],
+  className: ax(["_v5641kd4 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"])
+}, children);
+const headerTitleStyles = null;
+export const HeaderTitle = ({
+  children
+}) => /*#__PURE__*/React.createElement("h1", {
+  className: ax(["_11c81ixg _1reo15vq _18m915vq _syazjjyb _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"])
+}, children);
+const headerTitleAiStyles = null;
+export const HeaderTitleAi = ({
+  children
+}) => /*#__PURE__*/React.createElement("h1", {
+  className: ax(["_11c81ixg _1reo15vq _18m915vq _syazjjyb _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbnau3 _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"])
+}, children);
+const headerContentStyles = null;
+export const HeaderContent = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
+}, children);

package/dist/es2019/components/HelpLayoutContent.js

@@ -38,7 +38,7 @@ export const HelpContent = props => {
   }), /*#__PURE__*/React.createElement(LoadingRectangle, {
     contentWidth: "70%"
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, children), footer ? /*#__PURE__*/React.createElement(HelpFooter, {
-    "data-testid": "footer"
+    dataTestId: "footer"
   }, footer) : null));
 };
 export default injectIntl(HelpContent);

package/dist/es2019/components/constants.js

@@ -1,2 +0,0 @@
-// Animation related consts
-export const TRANSITION_DURATION_MS = 220;

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

@@ -0,0 +1,36 @@
+
+._2rkov77o{border-radius:var(--ds-space-025,2px)}
+._x3domfkj{border-top:var(--ds-space-025,2px) solid var(--ds-border,#ebecf0)}._12vemgnk{background-repeat:no-repeat}
+._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
+._19bvidpf{padding-left:0}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1itko982{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%)}
+._1ltvidpf{left:0}
+._1o51q7pw{animation-fill-mode:forwards}
+._1pglp3kn{animation-timing-function:linear}
+._1tkeidpf{min-height:0}
+._2lx21bp4{flex-direction:column}
+._4t3i1e9d{height:var(--ds-space-200,1rem)}
+._4t3i1osq{height:100%}
+._5sag126j{animation-duration:1.2s}
+._94n5idpf{bottom:0}
+._bfhk1gi7{background-color:var(--ds-background-neutral,#fafbfc)}
+._bfhk1yrq{background-color:var(--ds-background-neutral,#ebecf0)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._j7hq1en8{animation-name:k6xje6p}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._tip812c5{animation-iteration-count:infinite}
+._u5f3idpf{padding-right:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+@keyframes k6xje6p{0%{background-position:-300px 0}to{background-position:750pt 0}}

package/dist/es2019/components/styled.js

@@ -1,92 +1,54 @@
+/* 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";
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { keyframes } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-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 Container = styled.div({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  backgroundColor: "var(--ds-surface, #FFFFFF)"
-});
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const Section = styled.div({
-  flexGrow: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: 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 DividerLine = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-border, ${colors.N30A})`,
-  height: "var(--ds-space-025, 2px)",
-  width: '100%',
-  padding: `0 ${"var(--ds-space-200, 16px)"}`,
-  marginTop: "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',
-  // 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'
-});
+import React from 'react';
+import { N10, N30, N40 } from '@atlaskit/theme/colors';
+const containerStyles = null;
+export const Container = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_kqswstnw _154iidpf _94n5idpf _1ltvidpf _1bsb1osq _1e0c1txw _2lx21bp4 _bfhkvuon"])
+}, children);
+const sectionStyles = null;
+export const Section = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_16jlkb7n _1e0c1txw _2lx21bp4 _1tkeidpf"])
+}, children);
+const helpFooterStyles = null;
+export const HelpFooter = ({
+  dataTestId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": dataTestId,
+  className: ax(["_x3domfkj _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _bfhk1gi7 _1bah1yb4"])
+}, children);
 
 /**
  * Loading
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingContainer = styled.div({
-  padding: "var(--ds-space-200, 16px)",
-  height: '100%'
-});
-const shimmer = keyframes({
-  '0%': {
-    backgroundPosition: '-300px 0'
+const loadingContainerStyles = null;
+export const LoadingContainer = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  className: ax(["_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _4t3i1osq"])
+}), children);
+const shimmer = null;
+const loadingRectangleStyles = null;
+export const LoadingRectangle = ({
+  contentWidth,
+  contentHeight,
+  marginTop
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: contentWidth,
+    height: contentHeight,
+    marginTop
   },
-  '100%': {
-    backgroundPosition: '1000px 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 LoadingRectangle = styled.div`
-	position: relative;
-	height: ${props => props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)"};
-	margin-top: ${props => props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)"};
-	width: ${props => props.contentWidth ? props.contentWidth : '100%'};
-	border-radius: ${"var(--ds-space-025, 2px)"};
-	animation-duration: 1.2s;
-	animation-fill-mode: forwards;
-	animation-iteration-count: infinite;
-	animation-name: ${shimmer};
-	animation-timing-function: linear;
-	background-color: ${`var(--ds-background-neutral, ${colors.N30})`};
-	background-image: linear-gradient(
-		to right,
-		${`var(--ds-background-neutral-subtle, ${colors.N30})`} 10%,
-		${`var(--ds-background-neutral, ${colors.N40})`} 20%,
-		${`var(--ds-background-neutral-subtle, ${colors.N30})`} 30%
-	);
-	background-repeat: no-repeat;
-`;
+  className: ax(["_2rkov77o _kqswh2mm _4t3i1e9d _19pku2gc _1bsb1osq _5sag126j _1o51q7pw _tip812c5 _j7hq1en8 _1pglp3kn _bfhk1yrq _1itko982 _12vemgnk"])
+});

package/dist/esm/analytics.js

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

package/dist/esm/components/Header/BackButton.js

@@ -1,6 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
@@ -8,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 { TRANSITION_DURATION_MS } from '../constants';
-import { BackButtonContainer } from './styled';
-// Animation
-var defaultStyle = {
-  transition: "left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"),
-  left: "var(--ds-space-300, 24px)",
-  opacity: 0
-};
-var transitionStyles = {
-  entered: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 1
-  },
-  exited: {
-    left: "var(--ds-space-100, 8px)",
-    opacity: 0
-  }
-};
+import { BackButtonContainer, TRANSITION_DURATION_MS } from './styled';
 export var BackButton = function BackButton(_ref) {
   var onClick = _ref.onClick,
     _ref$isVisible = _ref.isVisible,
@@ -48,7 +28,7 @@ export var BackButton = function BackButton(_ref) {
     unmountOnExit: true
   }, function (state) {
     return /*#__PURE__*/React.createElement(BackButtonContainer, {
-      style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
+      transitionState: state
     }, /*#__PURE__*/React.createElement(Button, {
       onClick: function onClick(event) {
         if (state === 'entered') {
@@ -69,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.4"
+      packageVersion: "6.0.0"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

package/dist/esm/components/Header/CloseButton.js

@@ -57,7 +57,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "5.0.4"
+      packageVersion: "6.0.0"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

package/dist/esm/components/Header/styled.compiled.css

@@ -0,0 +1,31 @@
+._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._v5641kw6{transition:var(--_ejvfk7)}
+._n7zl3yx5{border-bottom:var(--_1it2dty)}
+._154i1q64{top:var(--ds-space-200,15px)}
+._154iutpp{top:var(--ds-space-150,9pt)}
+._18m915vq{overflow-y:hidden}
+._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsbb8xr{width:var(--_2br7en)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1o8l{display:inline-block}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
+._1reo15vq{overflow-x:hidden}
+._1xi2u2gc{right:var(--ds-space-100,8px)}
+._bfhk1v7z{background-color:var(--_1xglsrh)}
+._ca0qidpf{padding-top:0}
+._ca0qoybe{padding-top:var(--ds-space-250,18px)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._o5721q9c{white-space:nowrap}
+._s7n4nkob{vertical-align:middle}
+._syaz1425{color:var(--_13a5t4u)}
+._tzy4idpf{opacity:0}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vwz41u3r{line-height:var(--ds-space-800,56px)}
+._y3gn1e5h{text-align:left}
+._y3gn1h6o{text-align:center}

package/dist/esm/components/Header/styled.js

@@ -1,77 +1,83 @@
-/**
- * @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 var HeaderContainer = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-background-neutral, ".concat(colors.N10, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  borderBottom: "var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
-  justifyContent: 'space-between',
-  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 CloseButtonContainer = styled.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-150, 12px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var CloseButtonContainerAi = styled.div({
-  position: 'absolute',
-  right: "var(--ds-space-100, 8px)",
-  top: "var(--ds-space-200, 15px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var BackButtonContainer = styled.div({
-  position: 'absolute',
-  top: "var(--ds-space-150, 12px)",
-  left: "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 HeaderTitle = styled.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
-  textAlign: 'center',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: "var(--ds-space-800, 56px)",
-  width: '100%',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  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 HeaderTitleAi = styled.h1({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: "var(--ds-text-subtle, ".concat(colors.N500, ")"),
-  textAlign: 'left',
-  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  paddingTop: "var(--ds-space-250, 18px)",
-  paddingBottom: "var(--ds-space-200, 16px)",
-  width: "calc(100% - ".concat("var(--ds-space-200, 16px)", ")"),
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  display: 'inline-block',
-  overflow: 'hidden',
-  verticalAlign: 'middle',
-  marginLeft: "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 var HeaderContent = styled.div({
-  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
-});
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { N10, N30, N500 } from '@atlaskit/theme/colors';
+var headerContainerStyles = null;
+export var HeaderContainer = function HeaderContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_n7zl3yx5 _bfhk1v7z _1bah1yb4 _kqswh2mm"]),
+    style: {
+      "--_1xglsrh": ix("var(--ds-background-neutral, ".concat(N10, ")")),
+      "--_1it2dty": ix("var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(N30, ")")))
+    }
+  }, children);
+};
+var closeButtonContainerStyles = null;
+export var CloseButtonContainer = function CloseButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1xi2u2gc _154iutpp"])
+  }, children);
+};
+var closeButtonContainerAiStyles = null;
+export var CloseButtonContainerAi = function CloseButtonContainerAi(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1xi2u2gc _154i1q64"])
+  }, children);
+};
+export var TRANSITION_DURATION_MS = 220;
+var backButtonContainerStyles = null;
+var backButtonContainerTransitionStyles = {
+  entered: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 1
+  },
+  exited: {
+    left: "var(--ds-space-100, 8px)",
+    opacity: 0
+  }
+};
+export var BackButtonContainer = function BackButtonContainer(_ref4) {
+  var transitionState = _ref4.transitionState,
+    children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
+    style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
+      "--_ejvfk7": ix("left ".concat(TRANSITION_DURATION_MS, "ms, opacity ").concat(TRANSITION_DURATION_MS, "ms"))
+    })
+  }, children);
+};
+var headerTitleStyles = null;
+export var HeaderTitle = function HeaderTitle(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/React.createElement("h1", {
+    className: ax(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"]),
+    style: {
+      "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")"))
+    }
+  }, children);
+};
+var headerTitleAiStyles = null;
+export var HeaderTitleAi = function HeaderTitleAi(_ref6) {
+  var children = _ref6.children;
+  return /*#__PURE__*/React.createElement("h1", {
+    className: ax(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1e5h _k48p1pd9 _ca0qoybe _n3tdpxbi _1bsbb8xr _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob _18u0pxbi"]),
+    style: {
+      "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")")),
+      "--_2br7en": ix("calc(100% - ".concat("var(--ds-space-200, 16px)", ")"))
+    }
+  }, children);
+};
+var headerContentStyles = null;
+export var HeaderContent = function HeaderContent(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
+  }, children);
+};