@atlaskit/navigation-system 0.166.0

package/dist/esm/ui/top-nav-items/app-switcher.js

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+import AppSwitcherIcon from '@atlaskit/icon/core/app-switcher';
+import { IconButton } from './themed/migration';
+var toggleButtonTooltipOptions = {
+  // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
+  // when moving the mouse from the top bar to the side nav.
+  ignoreTooltipPointerEvents: true
+};
+
+/**
+ * __App switcher__
+ *
+ * The trigger button for the app switcher. Allows users to switch between Atlassian products.
+ */
+export var AppSwitcher = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    interactionName = _ref.interactionName,
+    isSelected = _ref.isSelected,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'];
+  return /*#__PURE__*/React.createElement(IconButton, {
+    ref: ref,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    icon: AppSwitcherIcon,
+    label: label,
+    appearance: "subtle",
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    interactionName: interactionName,
+    isTooltipDisabled: false,
+    tooltip: toggleButtonTooltipOptions,
+    isSelected: isSelected
+  });
+});

package/dist/esm/ui/top-nav-items/chat-button.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ChatIcon from '@atlaskit/icon/core/ai-chat';
+import { ListItem } from '../../components/list-item';
+import { Button } from './themed/migration';
+
+/**
+ * __Chat button__
+ *
+ * The chat button for the top navigation.
+ * TODO: check if this is still needed and remove. Jira doesn't use it - there's a separate button for ConversationAssistant
+ */
+export var ChatButton = function ChatButton(_ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    interactionName = _ref.interactionName;
+  return /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    iconBefore: ChatIcon,
+    onClick: onClick,
+    isSelected: isSelected,
+    interactionName: interactionName
+  }, children));
+};

package/dist/esm/ui/top-nav-items/create-button.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import AddIcon from '@atlaskit/icon/core/add';
+import { Button } from './themed/migration';
+/**
+ * __Create button__
+ *
+ * The create button for the top navigation.
+ */
+export var CreateButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    onClick = _ref.onClick,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName;
+  return /*#__PURE__*/React.createElement(Button, {
+    ref: ref,
+    appearance: "primary",
+    iconBefore: AddIcon,
+    onClick: onClick,
+    testId: testId,
+    interactionName: interactionName
+  }, children);
+});

package/dist/esm/ui/top-nav-items/custom-title.compiled.css

@@ -0,0 +1,11 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0cglyw{display:none}
+._1reo15vq{overflow-x:hidden}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._o5721q9c{white-space:nowrap}
+._p12fuuw1{max-width:200px}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+@media (min-width:64rem){._10y41txw._10y41txw{display:flex}}

package/dist/esm/ui/top-nav-items/custom-title.js

@@ -0,0 +1,28 @@
+/* custom-title.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./custom-title.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useHasCustomTheme } from './themed/has-custom-theme-context';
+var styles = {
+  root: "_1reo15vq _18m915vq _11c82smr _o5721q9c _p12fuuw1 _1bto1l2s _bozg1b66 _1e0cglyw _10y41txw",
+  subtleText: "_syaz1gjq",
+  paddingInlineEnd: "_y4tiu2gc"
+};
+/**
+ * __Custom title__
+ *
+ * A custom site title to be displayed in the top navigation, to the right of the logo.
+ * It is hidden on smaller viewports.
+ */
+export var CustomTitle = /*#__PURE__*/forwardRef(function CustomTitle(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  var hasCustomTheme = useHasCustomTheme();
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([styles.root, !hasCustomTheme && styles.subtleText, fg('platform_design_system_nav4_top_nav_min_widths') && styles.paddingInlineEnd])
+  }, children);
+});

package/dist/esm/ui/top-nav-items/end-item.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, Fragment } from 'react';
+import { ListItem } from '../../components/list-item';
+import { IconButton } from './themed/migration';
+/**
+ * __EndItem__
+ *
+ * An icon button for the `TopNavEnd` layout area of the top navigation. Used for adding custom actions that are not already provided.
+ *
+ * For common actions, like `Notifications`, `Help`, `Profile`, `Settings`, use the provided components as appropriate.
+ */
+export var EndItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    isSelected = _ref.isSelected,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem;
+  var Wrapper = isListItem ? ListItem : Fragment;
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconButton, {
+    ref: forwardedRef,
+    icon: icon,
+    label: label,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    appearance: "subtle",
+    isSelected: isSelected,
+    isTooltipDisabled: false,
+    testId: testId,
+    interactionName: interactionName,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup
+  }));
+});

package/dist/esm/ui/top-nav-items/help.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
+import React, { forwardRef } from 'react';
+import HelpIcon from '@atlaskit/icon/core/question-circle';
+import { BadgeContainer } from '../../components/badge-container';
+import { EndItem } from './end-item';
+var HELP_NOTIFICATION_BADGE_ID = 'atlassian-navigation-help-notification-count';
+/**
+ * __Help__
+ *
+ * The trigger button for the help menu in the top navigation bar.
+ */
+export var Help = /*#__PURE__*/forwardRef(function Help(_ref, ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    isSelected = _ref.isSelected,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName,
+    isListItem = _ref.isListItem,
+    badge = _ref.badge;
+  var sharedProps = {
+    icon: HelpIcon,
+    label: label,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    isSelected: isSelected,
+    testId: testId,
+    interactionName: interactionName,
+    ref: ref
+  };
+  if (!badge) {
+    return /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
+      isListItem: isListItem
+    }));
+  }
+  return /*#__PURE__*/React.createElement(BadgeContainer, {
+    id: HELP_NOTIFICATION_BADGE_ID,
+    badge: badge
+    // We only need to set the list item role on the top level element (BadgeContainer)
+    ,
+    isListItem: isListItem
+  }, /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
+    // We explicitly set the EndItem to not be a list item,
+    // because the BadgeContainer already has a list item role (if `isListItem` is true)
+    isListItem: false
+  })));
+});

package/dist/esm/ui/top-nav-items/log-in.js

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+import LogInIcon from '@atlaskit/icon/core/log-in';
+import { ListItem } from '../../components/list-item';
+import { LinkIconButton } from './themed/migration';
+/**
+ * __Log in__
+ *
+ * The Log in button for the top navigation.
+ */
+export var LogIn = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName,
+    href = _ref.href,
+    label = _ref.label;
+  return (
+    /*#__PURE__*/
+    /**
+     * This component doesn't use `EndItem` internally because it renders a
+     * `LinkIconButton` instead of an `IconButton`.
+     *
+     * We could make another abstraction, but this is the only top navigation item
+     * that renders a link.
+     */
+    React.createElement(ListItem, null, /*#__PURE__*/React.createElement(LinkIconButton, {
+      ref: ref,
+      label: label,
+      href: href,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      testId: testId,
+      interactionName: interactionName,
+      icon: LogInIcon,
+      appearance: "subtle",
+      isTooltipDisabled: false
+    }))
+  );
+});

package/dist/esm/ui/top-nav-items/nav-logo.compiled.css

@@ -0,0 +1,22 @@
+
+._2rkoftgi{border-radius:8px}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1jpx1f51 img{object-fit:contain}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._bna71tcg img{height:24px}
+._p12f1tcg{max-width:24px}
+._p12fnklw{max-width:20pc}
+._rtys1kw7 img{max-width:inherit}
+._vchh1ntv{box-sizing:content-box}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
+._1di61wwy:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)!important}
+._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
+@media (min-width:64rem){._10y41txw._10y41txw{display:flex}._10y4glyw._10y4glyw{display:none}}

package/dist/esm/ui/top-nav-items/nav-logo.js

@@ -0,0 +1,119 @@
+/* nav-logo.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./nav-logo.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { memo, useEffect, useRef } from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives';
+import { useHasCustomTheme } from './themed/has-custom-theme-context';
+export var themedLogoIcon = '--ds-top-bar-logo-icon';
+export var themedLogoText = '--ds-top-bar-logo-text';
+var anchorStyles = {
+  root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
+  newBorderRadius: "_2rkoftgi",
+  newMargin: "_ahbq1b66",
+  newInteractionStates: "_irr3166n _1di61wwy",
+  newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
+};
+var sharedIconOrLogoContainerStyles = {
+  root: "_1reo15vq _18m915vq _bna71tcg _rtys1kw7 _1jpx1f51",
+  appIconTilePaddingFlagged: "_18zr1b66"
+};
+var iconContainerStyles = {
+  root: "_18zr1b66 _1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
+};
+var logoContainerStyles = {
+  root: "_18zru2gc _1e0cglyw _p12fnklw _vchh1ntv _10y41txw"
+};
+
+/**
+ * __Nav logo__
+ *
+ * The product logo for the top navigation.
+ *
+ * To provide a responsive experience, it requires both a logo and an icon component.
+ * The logo component will be used for large viewports, and the icon component will be used for small viewports.
+ */
+export var NavLogo = function NavLogo(_ref) {
+  var href = _ref.href,
+    logo = _ref.logo,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    label = _ref.label;
+  var ref = useRef(null);
+  useEffect(function () {
+    var _img$parentElement, _img$parentElement2;
+    if (process.env.NODE_ENV === 'production') {
+      return;
+    }
+    if (!ref.current) {
+      return;
+    }
+    var img = ref.current.querySelector('img');
+    if (!img) {
+      return;
+    }
+
+    /**
+     * We want custom logo components to render the image as the immediate child
+     */
+    var hasExpectedStructure = ((_img$parentElement = img.parentElement) === null || _img$parentElement === void 0 ? void 0 : _img$parentElement.parentElement) === ref.current;
+    /**
+     * We want custom logo components to render only one image
+     */
+    var isOnlyChild = ((_img$parentElement2 = img.parentElement) === null || _img$parentElement2 === void 0 ? void 0 : _img$parentElement2.childElementCount) === 1;
+    if (!hasExpectedStructure || !isOnlyChild) {
+      // eslint-disable-next-line no-console
+      console.error('Custom logos should render only a single image tag with no wrappers.');
+    }
+    if (img.getAttribute('width') !== null || img.getAttribute('height') !== null || img.style.width !== '' || img.style.height !== '') {
+      // eslint-disable-next-line no-console
+      console.error('Do not set explicit dimensions on custom logo images. The container will resize the image to fit.');
+    }
+  }, []);
+  var hasCustomTheme = useHasCustomTheme();
+  return /*#__PURE__*/React.createElement(Anchor, {
+    ref: ref,
+    "aria-label": label,
+    href: href
+    // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: cx(anchorStyles.root, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin, fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newBorderRadius, fg('platform_design_system_nav_logo_interaction_states') && (hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates)),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
+  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+    logoOrIcon: icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
+  }, /*#__PURE__*/React.createElement(NavLogoRenderer, {
+    logoOrIcon: logo
+  })));
+};
+function NavLogoRenderer(_ref2) {
+  var logoOrIcon = _ref2.logoOrIcon;
+  return fg('jiv-20710-fix-nav-rerender') ? /*#__PURE__*/React.createElement(NavLogoRendererMemo, {
+    logoOrIcon: logoOrIcon
+  }) : /*#__PURE__*/React.createElement(NavLogoRendererNoMemo, {
+    logoOrIcon: logoOrIcon
+  });
+}
+var NavLogoRendererMemo = /*#__PURE__*/memo(NavLogoRendererNoMemo);
+function NavLogoRendererNoMemo(_ref3) {
+  var LogoOrIcon = _ref3.logoOrIcon;
+  var hasCustomTheme = useHasCustomTheme();
+  if (hasCustomTheme) {
+    return /*#__PURE__*/React.createElement(LogoOrIcon, {
+      size: "small",
+      label: "",
+      iconColor: "var(".concat(themedLogoIcon, ")"),
+      textColor: "var(".concat(themedLogoText, ")")
+    });
+  }
+  return /*#__PURE__*/React.createElement(LogoOrIcon, {
+    size: "small",
+    label: "",
+    appearance: "brand"
+  });
+}

package/dist/esm/ui/top-nav-items/notifications.js

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react';
+import NotificationsIcon from '@atlaskit/icon/core/notification';
+import { BadgeContainer } from '../../components/badge-container';
+import { EndItem } from './end-item';
+var NOTIFICATIONS_BADGE_ID = 'atlassian-navigation-notification-count';
+/**
+ * __Notifications__
+ *
+ * The trigger button for the notifications menu in the top navigation bar.
+ */
+export var Notifications = /*#__PURE__*/forwardRef(function Notifications(_ref, ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    isSelected = _ref.isSelected,
+    testId = _ref.testId,
+    interactionName = _ref.interactionName,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
+    isListItem = _ref.isListItem,
+    badge = _ref.badge;
+  return /*#__PURE__*/React.createElement(BadgeContainer, {
+    id: NOTIFICATIONS_BADGE_ID,
+    badge: badge
+    // We only need to set the list item role on the top level element (BadgeContainer)
+    ,
+    isListItem: isListItem
+  }, /*#__PURE__*/React.createElement(EndItem, {
+    label: label,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    isSelected: isSelected,
+    testId: testId,
+    interactionName: interactionName,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    ref: ref,
+    icon: NotificationsIcon
+    // We explicitly set the EndItem to not be a list item,
+    // because the BadgeContainer already has a list item role (if `isListItem` is true)
+    ,
+    isListItem: false
+  }));
+});

package/dist/esm/ui/top-nav-items/profile.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["src"];
+import React, { forwardRef, useCallback } from 'react';
+import Avatar from '@atlaskit/avatar';
+import { EndItem } from './end-item';
+/**
+ * __Profile__
+ *
+ * The Profile button for the top navigation.
+ */
+export var Profile = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var src = _ref.src,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ProfileAvatar = useCallback(function () {
+    return /*#__PURE__*/React.createElement(Avatar, {
+      appearance: "circle",
+      src: src,
+      size: "small"
+    });
+  }, [src]);
+  return /*#__PURE__*/React.createElement(EndItem, _extends({}, props, {
+    ref: ref,
+    icon: ProfileAvatar
+  }));
+});

package/dist/esm/ui/top-nav-items/search.compiled.css

@@ -0,0 +1,20 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1ii7kb7n{grid-row:1}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._yyhy11wp{grid-column:3}
+._yyhyjvu9{grid-column:1/-1}
+._yyhykb7n{grid-column:1}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._4cvr1h6o{align-items:center}
+._4t3izwfg{height:2pc}
+._80om1kdv{cursor:text}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._p12f1kvu{max-width:680px}
+._vchhusvi{box-sizing:border-box}
+._yv0e1mfv{grid-template-columns:auto 1fr auto}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._1di6r01l:active{background-color:var(--ds-background-input-pressed,#fff)}
+@media (min-width:30rem){._114b11p5{display:grid}}

package/dist/esm/ui/top-nav-items/search.js

@@ -0,0 +1,59 @@
+/* search.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./search.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment } from 'react';
+import SearchIcon from '@atlaskit/icon/core/search';
+import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
+import { IconButton } from './themed/migration';
+var styles = {
+  root: "_2rkoiti9 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr31d5g _1di6r01l _114b11p5",
+  buttonText: "_yyhyjvu9 _1ii7kb7n",
+  iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
+};
+
+/**
+ * __Search__
+ *
+ * The search element for the top navigation.
+ */
+export var Search = function Search(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    _ref$iconBefore = _ref.iconBefore,
+    IconBefore = _ref$iconBefore === void 0 ? SearchIcon : _ref$iconBefore,
+    elemAfter = _ref.elemAfter,
+    interactionName = _ref.interactionName;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
+    style: {
+      // To win the specificity war against Emotion we move this into inline styles
+      // When Emotion has been stripped from the Design System move this to Compiled.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      cursor: 'text',
+      border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-input, #8590A2)")
+    },
+    onClick: onClick,
+    xcss: styles.root,
+    interactionName: interactionName
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.iconBefore])
+  }, /*#__PURE__*/React.createElement(IconBefore, {
+    color: "var(--ds-icon-subtle, #626F86)",
+    spacing: "spacious",
+    label: ""
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.buttonText])
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest"
+  }, label)), elemAfter && /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.elemAfter])
+  }, elemAfter)), /*#__PURE__*/React.createElement(Show, {
+    below: "xs"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    label: label,
+    appearance: "subtle",
+    icon: SearchIcon,
+    onClick: onClick,
+    interactionName: interactionName
+  })));
+};

package/dist/esm/ui/top-nav-items/settings.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import SettingsIcon from '@atlaskit/icon/core/settings';
+import { EndItem } from './end-item';
+/**
+ * __Settings__
+ *
+ * The Settings button for the top navigation.
+ */
+export var Settings = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(EndItem, _extends({}, props, {
+    ref: ref,
+    icon: SettingsIcon
+  }));
+});

package/dist/esm/ui/top-nav-items/themed/button.compiled.css

@@ -0,0 +1,58 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11q71c9b{background:var(--ds-top-bar-button-disabled-background)}
+._11q71qds{background:var(--ds-top-bar-button-selected-background)}
+._11q7esko{background:var(--ds-top-bar-button-primary-background)}
+._11q7pkxg{background:var(--ds-top-bar-button-background)}
+._14mj1kw7:after{border-radius:inherit}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
+._9v7aze3t:after{inset:var(--ds-space-0,0)}
+._v5649dqc{transition:background .1s ease-out}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._18zrze3t{padding-inline:var(--ds-space-0,0)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._1tv3nqa1:after{border-style:solid}
+._39yqe4h9:after{border-width:var(--ds-border-width,1px)}
+._8l3m15jn:after{border-color:var(--ds-top-bar-button-selected-border)}
+._8l3m1j28:after{border-color:transparent}
+._8l3maykr:after{border-color:var(--ds-top-bar-button-border)}
+._18postnw:after{position:absolute}
+._1bah1h6o{justify-content:center}
+._1bsb5r7u{width:2.2857142857142856em}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._4t3i5r7u{height:2.2857142857142856em}
+._aetrb3bt:after{content:""}
+._ajmmnqa1{text-decoration-style:solid}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._kqswh2mm{position:relative}
+._syaz15o7{color:var(--ds-top-bar-button-primary-text)}
+._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}
+._syaz1r31{color:currentColor}
+._syazw5ct{color:var(--ds-top-bar-button-selected-text)}
+._vwz4idpf{line-height:0}
+._f8pj15o7:focus, ._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus, ._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus, ._10531r31:visited{color:currentColor}
+._f8pjw5ct:focus, ._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._19lc1c9b:hover{background:var(--ds-top-bar-button-disabled-background)}
+._19lc1rps:hover{background:var(--ds-top-bar-button-background-hovered)}
+._19lcjrv1:hover{background:var(--ds-top-bar-button-selected-background-hovered)}
+._19lcp6hf:hover{background:var(--ds-top-bar-button-primary-background-hovered)}
+._30l315o7:hover{color:var(--ds-top-bar-button-primary-text)}
+._30l31i3i:hover{color:var(--ds-top-bar-button-disabled-text)}
+._30l31r31:hover{color:currentColor}
+._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
+._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
+._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
+._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
+._j6xtqtgh:active{background:var(--ds-top-bar-button-background-pressed)}
+._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
+._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
+._9h8h15o7:active{color:var(--ds-top-bar-button-primary-text)}
+._9h8h1i3i:active{color:var(--ds-top-bar-button-disabled-text)}
+._9h8h1r31:active{color:currentColor}
+._9h8hw5ct:active{color:var(--ds-top-bar-button-selected-text)}
+._c2waglyw:active, ._4fprglyw:focus, ._1bnxglyw:hover{text-decoration-line:none}