@atlaskit/navigation-system 7.2.1 → 8.0.0

package/dist/esm/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -2,10 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { themedLogoIcon, themedLogoText } from '../nav-logo/logo-renderer';
-import { themedButtonBackground, themedButtonBackgroundHovered, themedButtonBackgroundPressed, themedButtonBorder, themedButtonDisabledBackground, themedButtonDisabledText, themedButtonPrimaryBackground, themedButtonPrimaryBackgroundHovered, themedButtonPrimaryBackgroundPressed, themedButtonPrimaryText, themedButtonSelectedBackground, themedButtonSelectedBackgroundHovered, themedButtonSelectedBackgroundPressed, themedButtonSelectedBorder, themedButtonSelectedText } from './button';
 import { getColorMode, getTextColor, isLight, simpleAlphaComposite } from './color-utils';
 import { parseHex } from './color-utils/formats/hex';
-import { palette, paletteRgba } from './palette';
+import { palette } from './palette';
+import { paletteRgba } from './palette-rgba';
 import { themedSearchBorder, themedSearchBorderFocused } from './search';
 
 /**
@@ -35,11 +35,11 @@ function toRGBAString(_ref2) {
 // We will need to invert the colors based on backgroundColor independently of the app's color mode (dark/light)
 // Values here are not final
 var buttonStyles = {
-  light: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, themedButtonBackground, 'transparent'), themedButtonBackgroundHovered, palette.Neutral200A), themedButtonBackgroundPressed, palette.Neutral300A), themedButtonBorder, palette.Neutral300A), themedButtonSelectedBackground, palette.Neutral300A), themedButtonSelectedBackgroundHovered, palette.Neutral400A), themedButtonSelectedBackgroundPressed, palette.Neutral500A), themedButtonDisabledText, palette.Neutral400A), themedButtonDisabledBackground, palette.Neutral100A),
-  dark: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, themedButtonBackground, 'transparent'), themedButtonBackgroundHovered, palette.DarkNeutral200A), themedButtonBackgroundPressed, palette.DarkNeutral300A), themedButtonBorder, palette.DarkNeutral300A), themedButtonSelectedBackground, palette.DarkNeutral300A), themedButtonSelectedBackgroundHovered, palette.DarkNeutral400A), themedButtonSelectedBackgroundPressed, palette.DarkNeutral500A), themedButtonDisabledText, palette.DarkNeutral400A), themedButtonDisabledBackground, palette.DarkNeutral100A)
+  light: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds-top-bar-button-background', 'transparent'), '--ds-top-bar-button-background-hovered', palette.Neutral200A), '--ds-top-bar-button-background-pressed', palette.Neutral300A), '--ds-top-bar-button-border', palette.Neutral300A), '--ds-top-bar-button-selected-background', palette.Neutral300A), '--ds-top-bar-button-selected-background-hovered', palette.Neutral400A), '--ds-top-bar-button-selected-background-pressed', palette.Neutral500A), '--ds-top-bar-button-disabled-text', palette.Neutral400A), '--ds-top-bar-button-disabled-background', palette.Neutral100A),
+  dark: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds-top-bar-button-background', 'transparent'), '--ds-top-bar-button-background-hovered', palette.DarkNeutral200A), '--ds-top-bar-button-background-pressed', palette.DarkNeutral300A), '--ds-top-bar-button-border', palette.DarkNeutral300A), '--ds-top-bar-button-selected-background', palette.DarkNeutral300A), '--ds-top-bar-button-selected-background-hovered', palette.DarkNeutral400A), '--ds-top-bar-button-selected-background-pressed', palette.DarkNeutral500A), '--ds-top-bar-button-disabled-text', palette.DarkNeutral400A), '--ds-top-bar-button-disabled-background', palette.DarkNeutral100A)
 };
 var logoStyles = {
-  light: _defineProperty(_defineProperty({}, themedLogoIcon, palette.DarkNeutral0), themedLogoText, palette.DarkNeutral0),
+  light: _defineProperty(_defineProperty({}, '--ds-top-bar-logo-icon', palette.DarkNeutral0), '--ds-top-bar-logo-text', palette.DarkNeutral0),
   dark: _defineProperty(_defineProperty({}, themedLogoIcon, palette.Neutral0), themedLogoText, palette.Neutral0)
 };
 
@@ -70,11 +70,11 @@ export function getCustomThemeStyles(_ref3) {
     a: 0.5
   }))), themedSearchBorderFocused, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.8
-  }))), themedButtonPrimaryBackground, toRGBString(highlightRgb)), themedButtonPrimaryBackgroundHovered, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+  }))), '--ds-top-bar-button-primary-background', toRGBString(highlightRgb)), '--ds-top-bar-button-primary-background-hovered', toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.8
-  }))), themedButtonPrimaryBackgroundPressed, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+  }))), '--ds-top-bar-button-primary-background-pressed', toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.65
-  }))), themedButtonPrimaryText, highlightTextColor.hex));
+  }))), '--ds-top-bar-button-primary-text', highlightTextColor.hex));
 }
 
 /**
@@ -102,5 +102,5 @@ function getSelectedStyles(_ref4) {
     background: backgroundColor,
     foreground: foregroundColor
   });
-  return _defineProperty(_defineProperty({}, themedButtonSelectedText, getTextColor(blendedBackground).hex), themedButtonSelectedBorder, isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100);
+  return _defineProperty(_defineProperty({}, '--ds-top-bar-button-selected-text', getTextColor(blendedBackground).hex), '--ds-top-bar-button-selected-border', isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100);
 }

package/dist/esm/ui/top-nav-items/themed/get-primitives-spread-props.js

@@ -0,0 +1,32 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
+/**
+ * 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.
+ */
+// eslint-disable no-unused-vars
+export 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 = _objectWithoutProperties(_ref, _excluded);
+  return props;
+}

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { IconButton as AkIconButton } from '@atlaskit/button/new';
+import { useHasCustomTheme } from './has-custom-theme-context';
+import { ThemedIconButton } from './themed-icon-button';
+export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedIconButton : AkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { LinkButton as AkLinkButton } from '@atlaskit/button/new';
+import { useHasCustomTheme } from './has-custom-theme-context';
+import { ThemedLinkButton } from './themed-link-button';
+export var LinkButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedLinkButton : AkLinkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

package/dist/esm/ui/top-nav-items/themed/link-icon-button.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import { LinkIconButton as AkLinkIconButton } from '@atlaskit/button/new';
+import { useHasCustomTheme } from './has-custom-theme-context';
+import { ThemedLinkIconButton } from './themed-link-icon-button';
+export var LinkIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedLinkIconButton : AkLinkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

package/dist/esm/ui/top-nav-items/themed/palette-rgba.js

@@ -0,0 +1,14 @@
+export var paletteRgba = {
+  DarkNeutral300A: {
+    r: 0xe3,
+    g: 0xe4,
+    b: 0xf2,
+    a: 0x1f / 255
+  },
+  Neutral300A: {
+    r: 0x0b,
+    g: 0x12,
+    b: 0x0e,
+    a: 0x24 / 255
+  }
+};

package/dist/esm/ui/top-nav-items/themed/palette.js

@@ -1,9 +1,3 @@
-/**
- * Copied from the brand refresh palette.
- *
- * Ideally we'd codegen this but the brand refresh palette isn't exposed
- * through public API and we shouldn't use the private API of another package.
- */
 export var palette = {
   'DarkNeutral-100': '#111213',
   'DarkNeutral-100A': '#01040475',
@@ -45,18 +39,4 @@ export var palette = {
   Neutral900: '#3B3D42',
   Neutral1000: '#292A2E',
   Neutral1100: '#1E1F21'
-};
-export var paletteRgba = {
-  DarkNeutral300A: {
-    r: 0xe3,
-    g: 0xe4,
-    b: 0xf2,
-    a: 0x1f / 255
-  },
-  Neutral300A: {
-    r: 0x0b,
-    g: 0x12,
-    b: 0x0e,
-    a: 0x24 / 255
-  }
 };

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

@@ -1,4 +1,3 @@
-import { themedButtonBackgroundHovered } from './button';
 import { useHasCustomTheme } from './has-custom-theme-context';
 export var themedSearchBorder = '--ds-top-bar-search-border';
 export var themedSearchBorderFocused = '--ds-top-bar-search-border-focused';
@@ -33,7 +32,7 @@ var legacySearchTheme = {
      *
      * Instead it's used as the hover background color for a close button when on mobile.
      */
-    backgroundColor: "var(".concat(themedButtonBackgroundHovered, ")")
+    backgroundColor: "var(--ds-top-bar-button-background-hovered)"
   }
 };
 

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

@@ -0,0 +1,68 @@
+
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",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}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._2rkofajl{border-radius:var(--ds-radius-small,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}
+._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}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._10531r31:visited{color:currentColor}
+._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._1a3b1r31:focus{text-decoration-color:currentColor}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus{color:currentColor}
+._f8pjw5ct:focus{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)}
+._1bnxglyw:hover{text-decoration-line:none}
+._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)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._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{text-decoration-style:solid}
+._1nrm1r31:active{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{text-decoration-line:none}

package/dist/esm/ui/top-nav-items/themed/themed-anchor.js

@@ -0,0 +1,69 @@
+/* themed-anchor.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
+import "./themed-anchor.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@compiled/react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor } from '@atlaskit/primitives/compiled';
+import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
+var styles = {
+  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
+  rootT26Shape: "_2rko1qi0",
+  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 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"
+};
+var shapeStyles = {
+  default: "_18zrutpp",
+  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
+};
+
+/**
+ * Props that are common between link buttons.
+ */
+
+/**
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
+ */
+
+function ThemedAnchorFn(_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/React.createElement(Anchor, _extends({}, 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: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
+  }));
+}
+
+/**
+ * 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.
+ */
+export var ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);

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

@@ -0,0 +1,2 @@
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._vwz4idpf{line-height:0}

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

@@ -0,0 +1,31 @@
+/* themed-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["iconBefore", "children"];
+import "./themed-button.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import IconRenderer from '../icon-renderer';
+import { ThemedPressable } from './themed-pressable';
+var textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref, ref) {
+  var IconBefore = _ref.iconBefore,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ThemedPressable, _extends({}, props, {
+    ref: ref
+  }), IconBefore && /*#__PURE__*/React.createElement("span", {
+    className: ax([textButtonStyles.iconBefore])
+  }, fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+    icon: IconBefore
+  }) : /*#__PURE__*/React.createElement(IconBefore, {
+    label: "",
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: ax([textButtonStyles.text])
+  }, children));
+});

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

@@ -0,0 +1,76 @@
+/* themed-icon-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "label", "tooltip"];
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Tooltip from '@atlaskit/tooltip';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import IconRenderer from '../icon-renderer';
+import { ThemedPressable } from './themed-pressable';
+export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(_ref, ref) {
+  var _tooltip$content;
+  var Icon = _ref.icon,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, 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.createElement(ThemedPressable, _extends({}, props, {
+        shape: "square",
+        ref: mergeRefs([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);
+        }
+      }), fg('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/React.createElement(IconRenderer, {
+        icon: Icon
+      }) : /*#__PURE__*/React.createElement(Icon, {
+        label: "",
+        color: "currentColor"
+      }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))
+    );
+  });
+});

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

@@ -0,0 +1,2 @@
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._vwz4idpf{line-height:0}

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

@@ -0,0 +1,38 @@
+/* themed-link-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["iconBefore", "children"];
+import "./themed-link-button.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import { ThemedAnchor } from './themed-anchor';
+var textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+
+/**
+ * Props that are common between link buttons.
+ */
+
+function ThemedLinkButtonFn(_ref, ref) {
+  var IconBefore = _ref.iconBefore,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    React.createElement(ThemedAnchor, _extends({}, props, {
+      ref: ref
+    }), IconBefore && /*#__PURE__*/React.createElement("span", {
+      className: ax([textButtonStyles.iconBefore])
+    }, /*#__PURE__*/React.createElement(IconBefore, {
+      label: "",
+      color: "currentColor"
+    })), /*#__PURE__*/React.createElement("span", {
+      className: ax([textButtonStyles.text])
+    }, children))
+  );
+}
+export var ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);

package/dist/esm/ui/top-nav-items/themed/themed-link-icon-button.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "label", "tooltip"];
+import React from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import Tooltip from '@atlaskit/tooltip';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { ThemedAnchor } from './themed-anchor';
+
+/**
+ * Props that are common between link buttons.
+ */
+
+function ThemedLinkIconButtonFn(_ref, ref) {
+  var _tooltip$content;
+  var Icon = _ref.icon,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, 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.createElement(ThemedAnchor, _extends({}, props, {
+        shape: "square",
+        ref: mergeRefs([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.createElement(Icon, {
+        label: "",
+        color: "currentColor"
+      }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label))
+    );
+  });
+}
+export var ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

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

@@ -0,0 +1,68 @@
+
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",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}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._2rkofajl{border-radius:var(--ds-radius-small,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}
+._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}._105315o7:visited{color:var(--ds-top-bar-button-primary-text)}
+._10531i3i:visited{color:var(--ds-top-bar-button-disabled-text)}
+._10531r31:visited{color:currentColor}
+._1053w5ct:visited{color:var(--ds-top-bar-button-selected-text)}
+._1a3b1r31:focus{text-decoration-color:currentColor}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._f8pj15o7:focus{color:var(--ds-top-bar-button-primary-text)}
+._f8pj1i3i:focus{color:var(--ds-top-bar-button-disabled-text)}
+._f8pj1r31:focus{color:currentColor}
+._f8pjw5ct:focus{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)}
+._1bnxglyw:hover{text-decoration-line:none}
+._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)}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._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{text-decoration-style:solid}
+._1nrm1r31:active{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{text-decoration-line:none}