@atlaskit/navigation-system 0.166.0

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notifications = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _notification = _interopRequireDefault(require("@atlaskit/icon/core/notification"));
+var _badgeContainer = require("../../components/badge-container");
+var _endItem = require("./end-item");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var NOTIFICATIONS_BADGE_ID = 'atlassian-navigation-notification-count';
+/**
+ * __Notifications__
+ *
+ * The trigger button for the notifications menu in the top navigation bar.
+ */
+var Notifications = exports.Notifications = /*#__PURE__*/(0, _react.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.default.createElement(_badgeContainer.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.default.createElement(_endItem.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: _notification.default
+    // 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/cjs/ui/top-nav-items/profile.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Profile = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _endItem = require("./end-item");
+var _excluded = ["src"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * __Profile__
+ *
+ * The Profile button for the top navigation.
+ */
+var Profile = exports.Profile = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var src = _ref.src,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var ProfileAvatar = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_avatar.default, {
+      appearance: "circle",
+      src: src,
+      size: "small"
+    });
+  }, [src]);
+  return /*#__PURE__*/_react.default.createElement(_endItem.EndItem, (0, _extends2.default)({}, props, {
+    ref: ref,
+    icon: ProfileAvatar
+  }));
+});

package/dist/cjs/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/cjs/ui/top-nav-items/search.js

@@ -0,0 +1,68 @@
+/* search.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Search = void 0;
+require("./search.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _migration = require("./themed/migration");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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.
+ */
+var Search = exports.Search = function Search(_ref) {
+  var label = _ref.label,
+    onClick = _ref.onClick,
+    _ref$iconBefore = _ref.iconBefore,
+    IconBefore = _ref$iconBefore === void 0 ? _search.default : _ref$iconBefore,
+    elemAfter = _ref.elemAfter,
+    interactionName = _ref.interactionName;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.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.default.createElement("span", {
+    className: (0, _runtime.ax)([styles.iconBefore])
+  }, /*#__PURE__*/_react.default.createElement(IconBefore, {
+    color: "var(--ds-icon-subtle, #626F86)",
+    spacing: "spacious",
+    label: ""
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([styles.buttonText])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtlest"
+  }, label)), elemAfter && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([styles.elemAfter])
+  }, elemAfter)), /*#__PURE__*/_react.default.createElement(_compiled.Show, {
+    below: "xs"
+  }, /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
+    label: label,
+    appearance: "subtle",
+    icon: _search.default,
+    onClick: onClick,
+    interactionName: interactionName
+  })));
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Settings = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
+var _endItem = require("./end-item");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * __Settings__
+ *
+ * The Settings button for the top navigation.
+ */
+var Settings = exports.Settings = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_endItem.EndItem, (0, _extends2.default)({}, props, {
+    ref: ref,
+    icon: _settings.default
+  }));
+});

package/dist/cjs/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}

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -0,0 +1,352 @@
+/* button.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themedButtonSelectedText = exports.themedButtonSelectedBorder = exports.themedButtonSelectedBackgroundPressed = exports.themedButtonSelectedBackgroundHovered = exports.themedButtonSelectedBackground = exports.themedButtonPrimaryText = exports.themedButtonPrimaryBackgroundPressed = exports.themedButtonPrimaryBackgroundHovered = exports.themedButtonPrimaryBackground = exports.themedButtonDisabledText = exports.themedButtonDisabledBackground = exports.themedButtonBorder = exports.themedButtonBackgroundPressed = exports.themedButtonBackgroundHovered = exports.themedButtonBackground = exports.ThemedLinkIconButton = exports.ThemedLinkButton = exports.ThemedIconButton = exports.ThemedButton = void 0;
+require("./button.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _forwardRefWithGeneric = require("../../../components/forward-ref-with-generic");
+var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],
+  _excluded2 = ["appearance", "shape", "isSelected", "isDisabled"],
+  _excluded3 = ["appearance", "shape", "isSelected", "isDisabled"],
+  _excluded4 = ["iconBefore", "children"],
+  _excluded5 = ["iconBefore", "children"],
+  _excluded6 = ["icon", "label", "tooltip"],
+  _excluded7 = ["icon", "label", "tooltip"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Props from primitives that we explicitly ignore and remove from spread props,
+ * because they apply styles.
+ *
+ * `css` / `className` are not here because primitives don't support them.
+ *
+ * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
+ * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
+ */
+
+/**
+ * Returns the spread props to pass through to underlying primitive components.
+ *
+ * It removes the props which apply styles.
+ */
+function getPrimitiveSpreadProps(_ref) {
+  var style = _ref.style,
+    xcss = _ref.xcss,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return props;
+}
+
+/**
+ * Props present in underlying primitives but we want to override,
+ * so we don't want to inherit their definitions
+ */
+
+/**
+ * Props that are common between link buttons.
+ */
+
+/**
+ * Props shared by `Button` and `IconButton`
+ */
+
+var themedButtonBackground = exports.themedButtonBackground = '--ds-top-bar-button-background';
+var themedButtonBackgroundHovered = exports.themedButtonBackgroundHovered = '--ds-top-bar-button-background-hovered';
+var themedButtonBackgroundPressed = exports.themedButtonBackgroundPressed = '--ds-top-bar-button-background-pressed';
+var themedButtonBorder = exports.themedButtonBorder = '--ds-top-bar-button-border';
+var themedButtonPrimaryText = exports.themedButtonPrimaryText = '--ds-top-bar-button-primary-text';
+var themedButtonPrimaryBackground = exports.themedButtonPrimaryBackground = '--ds-top-bar-button-primary-background';
+var themedButtonPrimaryBackgroundHovered = exports.themedButtonPrimaryBackgroundHovered = '--ds-top-bar-button-primary-background-hovered';
+var themedButtonPrimaryBackgroundPressed = exports.themedButtonPrimaryBackgroundPressed = '--ds-top-bar-button-primary-background-pressed';
+var themedButtonSelectedText = exports.themedButtonSelectedText = '--ds-top-bar-button-selected-text';
+var themedButtonSelectedBackground = exports.themedButtonSelectedBackground = '--ds-top-bar-button-selected-background';
+var themedButtonSelectedBackgroundHovered = exports.themedButtonSelectedBackgroundHovered = '--ds-top-bar-button-selected-background-hovered';
+var themedButtonSelectedBackgroundPressed = exports.themedButtonSelectedBackgroundPressed = '--ds-top-bar-button-selected-background-pressed';
+var themedButtonSelectedBorder = exports.themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
+var themedButtonDisabledText = exports.themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
+var themedButtonDisabledBackground = exports.themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
+var styles = {
+  root: "_zulp12x7 _11c82smr _2rkosqtm _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
+  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
+  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
+  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
+};
+var shapeStyles = {
+  default: "_18zrutpp",
+  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
+};
+var appearanceStyles = {
+  default: "_11q7pkxg _syaz1r31 _8l3maykr _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
+  subtle: "_11q7pkxg _syaz1r31 _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
+  primary: "_11q7esko _syaz15o7 _f8pj15o7 _105315o7 _19lcp6hf _30l315o7 _j6xt5sko _9h8h15o7"
+};
+
+/**
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
+ */
+
+/**
+ * Intentionally an almost-duplicate of `ThemedAnchor` - make sure to update both.
+ *
+ * See `ThemedAnchor` for more context.
+ */
+var ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressable(_ref2, ref) {
+  var _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    _ref2$shape = _ref2.shape,
+    shape = _ref2$shape === void 0 ? 'default' : _ref2$shape,
+    isSelected = _ref2.isSelected,
+    isDisabled = _ref2.isDisabled,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, getPrimitiveSpreadProps(props), {
+    ref: ref,
+    type: "button"
+    /**
+     * We are using some style values that are outside of the strict
+     * `@atlaskit/css` types.
+     */
+    // @ts-expect-error
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
+    isDisabled: isDisabled
+  }));
+});
+/**
+ * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
+ *
+ * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
+ *
+ * Polymorphism had many typing issues and required sacrificing type safety.
+ *
+ * Render props had problems passing down styles through `xcss` to the `children` function.
+ */
+var ThemedAnchor = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedAnchor(_ref3, ref) {
+  var _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
+    _ref3$shape = _ref3.shape,
+    shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
+    isSelected = _ref3.isSelected,
+    isDisabled = _ref3.isDisabled,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({}, getPrimitiveSpreadProps(props), {
+    ref: ref
+    /**
+     * We are using some style values that are outside of the strict
+     * `@atlaskit/css` types.
+     */
+    // @ts-expect-error
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: (0, _react2.cx)(styles.root, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
+  }));
+});
+var textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+
+/**
+ * Props shared by `Button` and `LinkButton`
+ */
+
+/**
+ * __Themed button__
+ *
+ * A themed button for the top bar.
+ */
+var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedButton(_ref4, ref) {
+  var IconBefore = _ref4.iconBefore,
+    children = _ref4.children,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/_react.default.createElement(ThemedPressable, (0, _extends2.default)({}, props, {
+    ref: ref
+  }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.iconBefore])
+  }, /*#__PURE__*/_react.default.createElement(IconBefore, {
+    label: "",
+    color: "currentColor"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.text])
+  }, children));
+});
+/**
+ * __Themed link button__
+ *
+ * A themed link button for the top bar.
+ */
+var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedLinkButton(_ref5, ref) {
+  var IconBefore = _ref5.iconBefore,
+    children = _ref5.children,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/_react.default.createElement(ThemedAnchor, (0, _extends2.default)({}, props, {
+    ref: ref
+  }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.iconBefore])
+  }, /*#__PURE__*/_react.default.createElement(IconBefore, {
+    label: "",
+    color: "currentColor"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.text])
+  }, children));
+});
+
+/**
+ * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
+ */
+
+/**
+ * __Themed icon button__
+ *
+ * A themed icon button for the top bar.
+ */
+var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedIconButton(_ref6, ref) {
+  var _tooltip$content;
+  var Icon = _ref6.icon,
+    label = _ref6.label,
+    tooltip = _ref6.tooltip,
+    props = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, (0, _extends2.default)({}, tooltip, {
+    content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
+  }), function (triggerProps) {
+    return (
+      /*#__PURE__*/
+      /**
+       * The `aria-describedby` from `triggerProps` is intentionally not passed down,
+       * because it would cause double announcements with the `VisuallyHidden` label.
+       *
+       * The `@atlaskit/button` IconButton uses the same approach.
+       */
+      _react.default.createElement(ThemedPressable, (0, _extends2.default)({}, props, {
+        shape: "square",
+        ref: (0, _mergeRefs.default)([ref, triggerProps.ref]),
+        onClick: function onClick(event, analyticsEvent) {
+          var _props$onClick, _triggerProps$onClick;
+          (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
+        },
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse, _props$onMouseOver;
+          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+          (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 || _props$onMouseOver.call(props, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse2, _props$onMouseOut;
+          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+          (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 || _props$onMouseOut.call(props, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse3, _props$onMouseMove;
+          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+          (_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 || _props$onMouseMove.call(props, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse4, _props$onMouseDown;
+          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+          (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 || _props$onMouseDown.call(props, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus, _props$onFocus;
+          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+          (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur, _props$onBlur;
+          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+          (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
+        }
+      }), /*#__PURE__*/_react.default.createElement(Icon, {
+        label: "",
+        color: "currentColor"
+      }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
+    );
+  });
+});
+/**
+ * __Themed link icon button__
+ *
+ * A themed link icon button for the top bar.
+ */
+var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedLinkIconButton(_ref7, ref) {
+  var _tooltip$content2;
+  var Icon = _ref7.icon,
+    label = _ref7.label,
+    tooltip = _ref7.tooltip,
+    props = (0, _objectWithoutProperties2.default)(_ref7, _excluded7);
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, (0, _extends2.default)({}, tooltip, {
+    content: (_tooltip$content2 = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content2 !== void 0 ? _tooltip$content2 : label
+  }), function (triggerProps) {
+    return (
+      /*#__PURE__*/
+      /**
+       * The `aria-describedby` from `triggerProps` is intentionally not passed down,
+       * because it would cause double announcements with the `VisuallyHidden` label.
+       *
+       * The `@atlaskit/button` IconButton uses the same approach.
+       */
+      _react.default.createElement(ThemedAnchor, (0, _extends2.default)({}, props, {
+        shape: "square",
+        ref: (0, _mergeRefs.default)([ref, triggerProps.ref]),
+        onClick: function onClick(event, analyticsEvent) {
+          var _props$onClick2, _triggerProps$onClick2;
+          (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 || _props$onClick2.call(props, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick2 = triggerProps.onClick) === null || _triggerProps$onClick2 === void 0 || _triggerProps$onClick2.call(triggerProps, event);
+        },
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse5, _props$onMouseOver2;
+          (_triggerProps$onMouse5 = triggerProps.onMouseOver) === null || _triggerProps$onMouse5 === void 0 || _triggerProps$onMouse5.call(triggerProps, e);
+          (_props$onMouseOver2 = props.onMouseOver) === null || _props$onMouseOver2 === void 0 || _props$onMouseOver2.call(props, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse6, _props$onMouseOut2;
+          (_triggerProps$onMouse6 = triggerProps.onMouseOut) === null || _triggerProps$onMouse6 === void 0 || _triggerProps$onMouse6.call(triggerProps, e);
+          (_props$onMouseOut2 = props.onMouseOut) === null || _props$onMouseOut2 === void 0 || _props$onMouseOut2.call(props, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse7, _props$onMouseMove2;
+          (_triggerProps$onMouse7 = triggerProps.onMouseMove) === null || _triggerProps$onMouse7 === void 0 || _triggerProps$onMouse7.call(triggerProps, e);
+          (_props$onMouseMove2 = props.onMouseMove) === null || _props$onMouseMove2 === void 0 || _props$onMouseMove2.call(props, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse8, _props$onMouseDown2;
+          (_triggerProps$onMouse8 = triggerProps.onMouseDown) === null || _triggerProps$onMouse8 === void 0 || _triggerProps$onMouse8.call(triggerProps, e);
+          (_props$onMouseDown2 = props.onMouseDown) === null || _props$onMouseDown2 === void 0 || _props$onMouseDown2.call(props, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus2, _props$onFocus2;
+          (_triggerProps$onFocus2 = triggerProps.onFocus) === null || _triggerProps$onFocus2 === void 0 || _triggerProps$onFocus2.call(triggerProps, e);
+          (_props$onFocus2 = props.onFocus) === null || _props$onFocus2 === void 0 || _props$onFocus2.call(props, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur2, _props$onBlur2;
+          (_triggerProps$onBlur2 = triggerProps.onBlur) === null || _triggerProps$onBlur2 === void 0 || _triggerProps$onBlur2.call(triggerProps, e);
+          (_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 || _props$onBlur2.call(props, e);
+        }
+      }), /*#__PURE__*/_react.default.createElement(Icon, {
+        label: "",
+        color: "currentColor"
+      }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
+    );
+  });
+});