@atlaskit/help-layout 5.0.4 → 6.0.0

package/dist/esm/components/HelpLayoutContent.js

@@ -37,7 +37,7 @@ export var HelpContent = function 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/esm/components/constants.js

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

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

@@ -0,0 +1,36 @@
+
+._2rkov77o{border-radius:var(--ds-space-025,2px)}
+._x3do3yx5{border-top:var(--_1it2dty)}._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}
+._1itkwhjv{background-image:var(--_4aeagh)}
+._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}
+._bfhk1v7z{background-color:var(--_1xglsrh)}
+._bfhkptpz{background-color:var(--_19g1tth)}
+._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/esm/components/styled.js

@@ -1,81 +1,67 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+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 var 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 var 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 var DividerLine = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-border, ".concat(colors.N30A, ")"),
-  height: "var(--ds-space-025, 2px)",
-  width: '100%',
-  padding: "0 ".concat("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 var HelpFooter = styled.div({
-  padding: "var(--ds-space-100, 8px)".concat(" 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, ".concat(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)".concat(" solid ", "var(--ds-border, ".concat(colors.N30, ")")),
-  justifyContent: 'space-between'
-});
+import React from 'react';
+import { N10, N30, N40 } from '@atlaskit/theme/colors';
+var containerStyles = null;
+export var Container = function Container(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iidpf _94n5idpf _1ltvidpf _1bsb1osq _1e0c1txw _2lx21bp4 _bfhkvuon"])
+  }, children);
+};
+var sectionStyles = null;
+export var Section = function Section(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1e0c1txw _2lx21bp4 _1tkeidpf"])
+  }, children);
+};
+var helpFooterStyles = null;
+export var HelpFooter = function HelpFooter(_ref3) {
+  var dataTestId = _ref3.dataTestId,
+    children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": dataTestId,
+    className: ax(["_x3do3yx5 _ca0qu2gc _u5f3idpf _n3tdu2gc _19bvidpf _vchhusvi _bfhk1v7z _1bah1yb4"]),
+    style: {
+      "--_1xglsrh": ix("var(--ds-background-neutral, ".concat(N10, ")")),
+      "--_1it2dty": ix("var(--ds-space-025, 2px)".concat(" solid ", "var(--ds-border, ".concat(N30, ")")))
+    }
+  }, 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 var LoadingContainer = styled.div({
-  padding: "var(--ds-space-200, 16px)",
-  height: '100%'
-});
-var shimmer = keyframes({
-  '0%': {
-    backgroundPosition: '-300px 0'
-  },
-  '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 var LoadingRectangle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\theight: ", ";\n\tmargin-top: ", ";\n\twidth: ", ";\n\tborder-radius: ", ";\n\tanimation-duration: 1.2s;\n\tanimation-fill-mode: forwards;\n\tanimation-iteration-count: infinite;\n\tanimation-name: ", ";\n\tanimation-timing-function: linear;\n\tbackground-color: ", ";\n\tbackground-image: linear-gradient(\n\t\tto right,\n\t\t", " 10%,\n\t\t", " 20%,\n\t\t", " 30%\n\t);\n\tbackground-repeat: no-repeat;\n"])), function (props) {
-  return props.contentHeight ? props.contentHeight : "var(--ds-space-200, 1rem)";
-}, function (props) {
-  return props.marginTop ? props.marginTop : "var(--ds-space-100, 8px)";
-}, function (props) {
-  return props.contentWidth ? props.contentWidth : '100%';
-}, "var(--ds-space-025, 2px)", shimmer, "var(--ds-background-neutral, ".concat(colors.N30, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"));
+var loadingContainerStyles = null;
+export var LoadingContainer = function LoadingContainer(_ref4) {
+  var children = _ref4.children,
+    rest = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: ax(["_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _4t3i1osq"])
+  }), children);
+};
+var shimmer = null;
+var loadingRectangleStyles = null;
+export var LoadingRectangle = function LoadingRectangle(_ref5) {
+  var contentWidth = _ref5.contentWidth,
+    contentHeight = _ref5.contentHeight,
+    marginTop = _ref5.marginTop;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rkov77o _kqswh2mm _4t3i1e9d _19pku2gc _1bsb1osq _5sag126j _1o51q7pw _tip812c5 _j7hq1en8 _1pglp3kn _bfhkptpz _1itkwhjv _12vemgnk"]),
+    style: {
+      width: contentWidth,
+      height: contentHeight,
+      marginTop: marginTop,
+      "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
+      "--_4aeagh": ix("linear-gradient(\n\t\tto right,\n\t\t".concat("var(--ds-background-neutral-subtle, ".concat(N30, ")"), " 10%,\n\t\t", "var(--ds-background-neutral, ".concat(N40, ")"), " 20%,\n\t\t", "var(--ds-background-neutral-subtle, ".concat(N30, ")"), " 30%\n\t)"))
+    }
+  });
+};

package/dist/types/components/Header/styled.d.ts

@@ -1,29 +1,29 @@
-/// <reference types="react" />
-export declare const HeaderContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButtonContainerAi: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BackButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const HeaderTitleAi: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { TransitionStatus } from '../constants';
+export declare const HeaderContainer: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const CloseButtonContainer: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const CloseButtonContainerAi: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const TRANSITION_DURATION_MS = 220;
+export declare const BackButtonContainer: ({ transitionState, children, }: {
+    transitionState: TransitionStatus;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderTitle: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderTitleAi: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderContent: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types/components/constants.d.ts

@@ -1,2 +1 @@
-export declare const TRANSITION_DURATION_MS = 220;
 export type TransitionStatus = 'unmounted' | 'exiting' | 'entering' | 'entered' | 'exited';

package/dist/types/components/styled.d.ts

@@ -2,37 +2,24 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Section: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DividerLine: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HelpFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Loading
- */
-export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import React from 'react';
+export declare const Container: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const Section: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HelpFooter: ({ dataTestId, children }: {
+    dataTestId: string;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const LoadingContainer: ({ children, ...rest }: {
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 type LoadingRectangleProps = {
     contentWidth?: string;
     contentHeight?: string;
     marginTop?: string;
 };
-export declare const LoadingRectangle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & LoadingRectangleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoadingRectangle: ({ contentWidth, contentHeight, marginTop, }: LoadingRectangleProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/Header/styled.d.ts

@@ -1,29 +1,29 @@
-/// <reference types="react" />
-export declare const HeaderContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CloseButtonContainerAi: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BackButtonContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderTitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const HeaderTitleAi: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { TransitionStatus } from '../constants';
+export declare const HeaderContainer: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const CloseButtonContainer: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const CloseButtonContainerAi: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const TRANSITION_DURATION_MS = 220;
+export declare const BackButtonContainer: ({ transitionState, children, }: {
+    transitionState: TransitionStatus;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderTitle: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderTitleAi: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HeaderContent: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/types-ts4.5/components/constants.d.ts

@@ -1,2 +1 @@
-export declare const TRANSITION_DURATION_MS = 220;
 export type TransitionStatus = 'unmounted' | 'exiting' | 'entering' | 'entered' | 'exited';

package/dist/types-ts4.5/components/styled.d.ts

@@ -1,38 +1,25 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Section: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DividerLine: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HelpFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Loading
- */
-export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import React from 'react';
+export declare const Container: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const Section: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const HelpFooter: ({ dataTestId, children }: {
+    dataTestId: string;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const LoadingContainer: ({ children, ...rest }: {
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 type LoadingRectangleProps = {
     contentWidth?: string;
     contentHeight?: string;
     marginTop?: string;
 };
-export declare const LoadingRectangle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & LoadingRectangleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoadingRectangle: ({ contentWidth, contentHeight, marginTop, }: LoadingRectangleProps) => JSX.Element;
 export {};

package/messages/package.json

@@ -4,7 +4,7 @@
   "module": "../dist/esm/messages.js",
   "module:es2019": "../dist/es2019/messages.js",
   "sideEffects": [
-    "*.compiled.css"
+    "**/*.compiled.css"
   ],
   "types": "../dist/types/messages.d.ts",
   "typesVersions": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-layout",
-	"version": "5.0.4",
+	"version": "6.0.0",
 	"description": "Layout for the atlaskit/help component.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
 		}
 	},
 	"sideEffects": [
-		"*.compiled.css"
+		"**/*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
@@ -33,14 +33,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/button": "^22.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
-		"@emotion/styled": "^11.0.0",
+		"@compiled/react": "^0.18.3",
 		"react-transition-group": "^4.4.1"
 	},
 	"peerDependencies": {
@@ -68,6 +67,9 @@
 			"design-tokens": [
 				"color",
 				"spacing"
+			],
+			"styling": [
+				"compiled"
 			]
 		}
 	},