@atlaskit/help-layout 6.0.2 → 6.2.0

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

@@ -5,7 +5,7 @@ import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { messages } from '../../messages';
-import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
+import { CloseButtonContainer } from './styled';
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -14,7 +14,7 @@ import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
  */
 export const CloseButton = ({
   onClick,
-  isAiEnabled,
+  inDynamicHeader = false,
   intl: {
     formatMessage
   }
@@ -30,19 +30,9 @@ export const CloseButton = ({
       onClick(event, analyticsEvent);
     }
   };
-  return isAiEnabled ? /*#__PURE__*/React.createElement(CloseButtonContainerAi, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: formatMessage(messages.help_panel_header_close),
-    position: "left"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOnClick,
-    appearance: "subtle",
-    "aria-label": formatMessage(messages.help_panel_header_close_button),
-    iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-      color: "currentColor",
-      label: formatMessage(messages.help_panel_header_close),
-      LEGACY_size: "medium"
-    })
-  }))) : /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(CloseButtonContainer, {
+    inDynamicHeader: inDynamicHeader
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -61,7 +51,7 @@ const CloseButtonWithContext = props => {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.2.0"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

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

@@ -3,14 +3,13 @@ import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import CloseButton from './CloseButton';
 import BackButton from './BackButton';
-import { HeaderContainer, HeaderTitle, HeaderContent, HeaderTitleAi } from './styled';
+import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
 export const HelpContent = ({
   headerTitle,
   headerContent,
   isBackbuttonVisible = false,
   onCloseButtonClick,
   onBackButtonClick,
-  isAiEnabled,
   intl: {
     formatMessage
   }
@@ -23,9 +22,8 @@ export const HelpContent = ({
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), isAiEnabled ? /*#__PURE__*/React.createElement(HeaderTitleAi, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)) : /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onCloseButtonClick,
-    isAiEnabled: isAiEnabled
+  }), /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick
   }), headerContent && /*#__PURE__*/React.createElement(HeaderContent, null, headerContent));
 };
 export default injectIntl(HelpContent);

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

@@ -1,22 +1,17 @@
 ._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}
@@ -27,5 +22,4 @@
 ._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,6 +1,7 @@
 /* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./styled.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+import { Box, xcss } from '@atlaskit/primitives';
 import React from 'react';
 import { N10, N30, N500 } from '@atlaskit/theme/colors';
 const headerContainerStyles = null;
@@ -9,17 +10,16 @@ export const HeaderContainer = ({
 }) => /*#__PURE__*/React.createElement("div", {
   className: ax(["_n7zlmfkj _bfhk1gi7 _1bah1yb4 _kqswh2mm"])
 }, children);
-const closeButtonContainerStyles = null;
+const closeButtonContainerStyles = xcss({
+  position: 'absolute',
+  right: 'space.100',
+  top: 'space.150'
+});
 export const CloseButtonContainer = ({
+  inDynamicHeader,
   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"])
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: !inDynamicHeader && closeButtonContainerStyles
 }, children);
 export const TRANSITION_DURATION_MS = 220;
 const backButtonContainerStyles = null;
@@ -46,12 +46,6 @@ export const HeaderTitle = ({
 }) => /*#__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

package/dist/es2019/components/HelpLayoutContent.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Header from './Header';
+import { SideNav } from './SideNav';
 import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';
 export const HelpContent = props => {
@@ -11,9 +12,19 @@ export const HelpContent = props => {
     intl: {
       formatMessage
     },
+    sideNavTabs = [],
+    onLoad,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
+  useEffect(() => {
+    if (onLoad) {
+      onLoad();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return sideNavTabs !== null && sideNavTabs !== void 0 && sideNavTabs.length ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SideNav, {
+    sideNavTabs: sideNavTabs
+  }))) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {

package/dist/es2019/components/SideNav/index.compiled.css

@@ -0,0 +1,28 @@
+
+._19it145i{border:var(--ds-border-width,1px) solid transparent}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._18m91wug{overflow-y:auto}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91wqb{min-width:60px}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._80omtlke{cursor:pointer}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1j28{background-color:transparent}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._o5721q9c{white-space:nowrap}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._vchhusvi{box-sizing:border-box}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}

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

@@ -0,0 +1,57 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box, Flex, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
+import { DynamicHeader } from '../DynamicHeader';
+const styles = {
+  mainContent: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navBarWrapper: "_1reo1wug _18m91wug _4t3i1osq _1bsb1osq",
+  navButton: "_2rkoiti9 _zulpu2gc _19it145i _1rjcu2gc _1e0c1txw _bfhk1j28 _2lx21bp4 _4cvr1h6o _80omtlke _vchhusvi _o5721q9c _1bsb1osq _irr3166n _30l31fxt",
+  navButtonSelected: "_1h6d15qp _bfhkfg4m _syaz14q2 _irr3i1yw _30l314q2",
+  wrapper: "_1reo1wug _18m91wug _4t3i1osq _1ul91wqb _bfhk1d5g",
+  navItemWrapper: "_19pk1b66 _2hwx1b66 _otyr1b66 _18u01b66"
+};
+export const SideNav = ({
+  sideNavTabs
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.navBarWrapper
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "space-between",
+    xcss: styles.wrapper,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    testId: "side-nav-tabs"
+  }, sideNavTabs.map((tab, index) => /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.navItemWrapper,
+    key: tab.label,
+    testId: `side-nav-${tab.label}`
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ignoreTooltipPointerEvents: true,
+    position: "left",
+    content: tab.label
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: cx(styles.navButton, index === activeIndex && styles.navButtonSelected),
+    onClick: event => {
+      setActiveIndex(index);
+      tab.onClick && (tab === null || tab === void 0 ? void 0 : tab.onClick(event));
+    },
+    testId: `side-nav-button-${tab.label}`
+  }, tab.icon, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: index === activeIndex ? 'color.link' : 'color.text.subtle'
+  }, tab.label))))))), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    xcss: styles.mainContent
+  }, /*#__PURE__*/React.createElement(DynamicHeader, {
+    title: sideNavTabs[activeIndex].header.title,
+    onCloseButtonClick: sideNavTabs[activeIndex].header.onCloseButtonClick,
+    onNewChatButtonClick: sideNavTabs[activeIndex].header.onNewChatButtonClick,
+    newChatButtonDisabled: sideNavTabs[activeIndex].header.newChatButtonDisabled
+  }), sideNavTabs[activeIndex].content));
+};

package/dist/es2019/messages.js

@@ -24,5 +24,10 @@ export const messages = defineMessages({
     id: 'helpPanel.header.close.button',
     defaultMessage: 'Close Help Panel',
     description: ''
+  },
+  help_panel_new_chat_button: {
+    id: 'helpPanel.header.new.chat.button',
+    defaultMessage: 'New',
+    description: 'Start a new chat with CSM agent'
   }
 });

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: "6.0.2"
+  packageVersion: "6.2.0"
 };

package/dist/esm/components/DynamicHeader/NewChatButton.js

@@ -0,0 +1,26 @@
+/* NewChatButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Inline } from '@atlaskit/primitives/compiled';
+import Button from '@atlaskit/button/new';
+import EditIcon from '@atlaskit/icon/core/edit';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../messages';
+export var NewChatButton = function NewChatButton(_ref) {
+  var onClick = _ref.onClick,
+    isDisabled = _ref.isDisabled;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    isDisabled: isDisabled,
+    testId: "new-chat-button"
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    alignBlock: "center",
+    alignInline: "center"
+  }, /*#__PURE__*/React.createElement(EditIcon, {
+    color: "currentColor",
+    label: 'New chat'
+  }), formatMessage(messages.help_panel_new_chat_button)));
+};

package/dist/esm/components/DynamicHeader/index.compiled.css

@@ -0,0 +1,4 @@
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/esm/components/DynamicHeader/index.js

@@ -0,0 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Heading from '@atlaskit/heading';
+import CloseButton from '../Header/CloseButton';
+import { Flex, Inline } from '@atlaskit/primitives/compiled';
+import { NewChatButton } from './NewChatButton';
+var styles = {
+  container: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi"
+};
+export var DynamicHeader = function DynamicHeader(_ref) {
+  var title = _ref.title,
+    onCloseButtonClick = _ref.onCloseButtonClick,
+    onNewChatButtonClick = _ref.onNewChatButtonClick,
+    newChatButtonDisabled = _ref.newChatButtonDisabled;
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: "header-title-side-nav"
+  }, title), /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050",
+    alignBlock: "center"
+  }, onNewChatButtonClick && /*#__PURE__*/React.createElement(NewChatButton, {
+    onClick: onNewChatButtonClick,
+    isDisabled: newChatButtonDisabled
+  }), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick,
+    inDynamicHeader: true
+  })));
+};

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

@@ -49,7 +49,7 @@ var BackButtonWithContext = function BackButtonWithContext(props) {
     data: {
       componentName: 'backButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.2.0"
     }
   }, /*#__PURE__*/React.createElement(BackButton, props));
 };

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

@@ -5,7 +5,7 @@ import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/standard-button';
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { messages } from '../../messages';
-import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
+import { CloseButtonContainer } from './styled';
 /**
  * This function will return a CloseButton component only if the function
  * to be executed on the onClick event is passed as a parameter
@@ -14,7 +14,8 @@ import { CloseButtonContainer, CloseButtonContainerAi } from './styled';
  */
 export var CloseButton = function CloseButton(_ref) {
   var onClick = _ref.onClick,
-    isAiEnabled = _ref.isAiEnabled,
+    _ref$inDynamicHeader = _ref.inDynamicHeader,
+    inDynamicHeader = _ref$inDynamicHeader === void 0 ? false : _ref$inDynamicHeader,
     formatMessage = _ref.intl.formatMessage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -26,19 +27,9 @@ export var CloseButton = function CloseButton(_ref) {
       onClick(event, _analyticsEvent);
     }
   };
-  return isAiEnabled ? /*#__PURE__*/React.createElement(CloseButtonContainerAi, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: formatMessage(messages.help_panel_header_close),
-    position: "left"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOnClick,
-    appearance: "subtle",
-    "aria-label": formatMessage(messages.help_panel_header_close_button),
-    iconBefore: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-      color: "currentColor",
-      label: formatMessage(messages.help_panel_header_close),
-      LEGACY_size: "medium"
-    })
-  }))) : /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(CloseButtonContainer, {
+    inDynamicHeader: inDynamicHeader
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.help_panel_header_close),
     position: "left"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -57,7 +48,7 @@ var CloseButtonWithContext = function CloseButtonWithContext(props) {
     data: {
       componentName: 'closeButton',
       packageName: "@atlaskit/help-layout",
-      packageVersion: "6.0.2"
+      packageVersion: "6.2.0"
     }
   }, /*#__PURE__*/React.createElement(CloseButton, props));
 };

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

@@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import CloseButton from './CloseButton';
 import BackButton from './BackButton';
-import { HeaderContainer, HeaderTitle, HeaderContent, HeaderTitleAi } from './styled';
+import { HeaderContainer, HeaderTitle, HeaderContent } from './styled';
 export var HelpContent = function HelpContent(_ref) {
   var headerTitle = _ref.headerTitle,
     headerContent = _ref.headerContent,
@@ -11,7 +11,6 @@ export var HelpContent = function HelpContent(_ref) {
     isBackbuttonVisible = _ref$isBackbuttonVisi === void 0 ? false : _ref$isBackbuttonVisi,
     onCloseButtonClick = _ref.onCloseButtonClick,
     onBackButtonClick = _ref.onBackButtonClick,
-    isAiEnabled = _ref.isAiEnabled,
     formatMessage = _ref.intl.formatMessage;
   var handleOnBackButtonClick = function handleOnBackButtonClick(event, analyticsEvent) {
     if (onBackButtonClick) {
@@ -21,9 +20,8 @@ export var HelpContent = function HelpContent(_ref) {
   return /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(BackButton, {
     onClick: handleOnBackButtonClick,
     isVisible: isBackbuttonVisible
-  }), isAiEnabled ? /*#__PURE__*/React.createElement(HeaderTitleAi, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)) : /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onCloseButtonClick,
-    isAiEnabled: isAiEnabled
+  }), /*#__PURE__*/React.createElement(HeaderTitle, null, headerTitle ? headerTitle : formatMessage(messages.help_panel_header_title)), onCloseButtonClick && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onCloseButtonClick
   }), headerContent && /*#__PURE__*/React.createElement(HeaderContent, null, headerContent));
 };
 export default injectIntl(HelpContent);

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

@@ -1,22 +1,17 @@
 ._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}
@@ -27,5 +22,4 @@
 ._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

@@ -4,6 +4,7 @@ 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 { Box, xcss } from '@atlaskit/primitives';
 import React from 'react';
 import { N10, N30, N500 } from '@atlaskit/theme/colors';
 var headerContainerStyles = null;
@@ -17,18 +18,16 @@ export var HeaderContainer = function HeaderContainer(_ref) {
     }
   }, children);
 };
-var closeButtonContainerStyles = null;
+var closeButtonContainerStyles = xcss({
+  position: 'absolute',
+  right: 'space.100',
+  top: 'space.150'
+});
 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"])
+  var inDynamicHeader = _ref2.inDynamicHeader,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: !inDynamicHeader && closeButtonContainerStyles
   }, children);
 };
 export var TRANSITION_DURATION_MS = 220;
@@ -43,9 +42,9 @@ var backButtonContainerTransitionStyles = {
     opacity: 0
   }
 };
-export var BackButtonContainer = function BackButtonContainer(_ref4) {
-  var transitionState = _ref4.transitionState,
-    children = _ref4.children;
+export var BackButtonContainer = function BackButtonContainer(_ref3) {
+  var transitionState = _ref3.transitionState,
+    children = _ref3.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_v5641kw6 _1ltv1ejb _tzy4idpf _kqswstnw _154iutpp"]),
     style: _objectSpread(_objectSpread({}, backButtonContainerTransitionStyles[transitionState]), {}, {
@@ -54,8 +53,8 @@ export var BackButtonContainer = function BackButtonContainer(_ref4) {
   }, children);
 };
 var headerTitleStyles = null;
-export var HeaderTitle = function HeaderTitle(_ref5) {
-  var children = _ref5.children;
+export var HeaderTitle = function HeaderTitle(_ref4) {
+  var children = _ref4.children;
   return /*#__PURE__*/React.createElement("h1", {
     className: ax(["_11c81ixg _1reo15vq _18m915vq _syaz1425 _y3gn1h6o _k48p1pd9 _vwz41u3r _1bsb1osq _o5721q9c _1bto1l2s _1e0c1o8l _s7n4nkob"]),
     style: {
@@ -63,20 +62,9 @@ export var HeaderTitle = function HeaderTitle(_ref5) {
     }
   }, 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;
+export var HeaderContent = function HeaderContent(_ref5) {
+  var children = _ref5.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0qidpf _u5f3pxbi _n3tdpxbi _19bvpxbi"])
   }, children);

package/dist/esm/components/HelpLayoutContent.js

@@ -1,8 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "footer", "children", "intl"];
-import React from 'react';
+var _excluded = ["isLoading", "footer", "children", "intl", "sideNavTabs", "onLoad"];
+import React, { useEffect } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Header from './Header';
+import { SideNav } from './SideNav';
 import { messages } from '../messages';
 import { Container, Section, HelpFooter, LoadingContainer, LoadingRectangle } from './styled';
 export var HelpContent = function HelpContent(props) {
@@ -11,8 +12,19 @@ export var HelpContent = function HelpContent(props) {
     footer = props.footer,
     children = props.children,
     formatMessage = props.intl.formatMessage,
+    _props$sideNavTabs = props.sideNavTabs,
+    sideNavTabs = _props$sideNavTabs === void 0 ? [] : _props$sideNavTabs,
+    onLoad = props.onLoad,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
+  useEffect(function () {
+    if (onLoad) {
+      onLoad();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return sideNavTabs !== null && sideNavTabs !== void 0 && sideNavTabs.length ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(SideNav, {
+    sideNavTabs: sideNavTabs
+  }))) : /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, null, /*#__PURE__*/React.createElement(Header, rest), isLoading ? /*#__PURE__*/React.createElement(LoadingContainer, {
     "aria-label": formatMessage(messages.help_loading),
     role: "img"
   }, /*#__PURE__*/React.createElement(LoadingRectangle, {

package/dist/esm/components/SideNav/index.compiled.css

@@ -0,0 +1,28 @@
+
+._19it145i{border:var(--ds-border-width,1px) solid transparent}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._18m91wug{overflow-y:auto}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo1wug{overflow-x:auto}
+._1ul91wqb{min-width:60px}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._80omtlke{cursor:pointer}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1j28{background-color:transparent}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._o5721q9c{white-space:nowrap}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._vchhusvi{box-sizing:border-box}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31fxt:hover{color:var(--ds-text,#172b4d)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}