@atlaskit/navigation-system 7.3.0 → 8.0.0

package/dist/es2019/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 const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedIconButton : AkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

package/dist/es2019/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 const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedLinkButton : AkLinkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

package/dist/es2019/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 const LinkIconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedLinkIconButton : AkLinkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});

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

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

package/dist/es2019/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 const palette = {
   'DarkNeutral-100': '#111213',
   'DarkNeutral-100A': '#01040475',
@@ -45,18 +39,4 @@ export const palette = {
   Neutral900: '#3B3D42',
   Neutral1000: '#292A2E',
   Neutral1100: '#1E1F21'
-};
-export const paletteRgba = {
-  DarkNeutral300A: {
-    r: 0xe3,
-    g: 0xe4,
-    b: 0xf2,
-    a: 0x1f / 255
-  },
-  Neutral300A: {
-    r: 0x0b,
-    g: 0x12,
-    b: 0x0e,
-    a: 0x24 / 255
-  }
 };

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

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

package/dist/es2019/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css}

@@ -28,7 +28,6 @@
 ._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)}

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

@@ -0,0 +1,66 @@
+/* themed-anchor.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const 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"
+};
+const 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"
+};
+const shapeStyles = {
+  default: "_18zrutpp",
+  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
+};
+
+/**
+ * Props that are common between link buttons.
+ */
+
+/**
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
+ */
+
+function ThemedAnchorFn({
+  appearance = 'default',
+  shape = 'default',
+  isSelected,
+  isDisabled,
+  ...props
+}, ref) {
+  const 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 const ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);

package/dist/es2019/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/es2019/ui/top-nav-items/themed/themed-button.js

@@ -0,0 +1,30 @@
+/* themed-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+export const ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton({
+  iconBefore: IconBefore,
+  children,
+  ...props
+}, ref) {
+  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/es2019/ui/top-nav-items/themed/themed-icon-button.js

@@ -0,0 +1,72 @@
+/* themed-icon-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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 const ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton({
+  icon: Icon,
+  label,
+  tooltip,
+  ...props
+}, ref) {
+  var _tooltip$content;
+  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
+  }), triggerProps =>
+  /*#__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: (event, analyticsEvent) => {
+      var _props$onClick, _triggerProps$onClick;
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event, analyticsEvent);
+      triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
+    },
+    onMouseOver: e => {
+      var _triggerProps$onMouse, _props$onMouseOver;
+      (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
+      (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 ? void 0 : _props$onMouseOver.call(props, e);
+    },
+    onMouseOut: e => {
+      var _triggerProps$onMouse2, _props$onMouseOut;
+      (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
+      (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 ? void 0 : _props$onMouseOut.call(props, e);
+    },
+    onMouseMove: e => {
+      var _triggerProps$onMouse3, _props$onMouseMove;
+      (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
+      (_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 ? void 0 : _props$onMouseMove.call(props, e);
+    },
+    onMouseDown: e => {
+      var _triggerProps$onMouse4, _props$onMouseDown;
+      (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
+      (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, e);
+    },
+    onFocus: e => {
+      var _triggerProps$onFocus, _props$onFocus;
+      (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
+      (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, e);
+    },
+    onBlur: e => {
+      var _triggerProps$onBlur, _props$onBlur;
+      (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
+      (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? 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/es2019/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/es2019/ui/top-nav-items/themed/themed-link-button.js

@@ -0,0 +1,37 @@
+/* themed-link-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
+const textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+
+/**
+ * Props that are common between link buttons.
+ */
+
+function ThemedLinkButtonFn({
+  iconBefore: IconBefore,
+  children,
+  ...props
+}, ref) {
+  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 const ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+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({
+  icon: Icon,
+  label,
+  tooltip,
+  ...props
+}, ref) {
+  var _tooltip$content;
+  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
+  }), triggerProps =>
+  /*#__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: (event, analyticsEvent) => {
+      var _props$onClick, _triggerProps$onClick;
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event, analyticsEvent);
+      triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
+    },
+    onMouseOver: e => {
+      var _triggerProps$onMouse, _props$onMouseOver;
+      (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
+      (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 ? void 0 : _props$onMouseOver.call(props, e);
+    },
+    onMouseOut: e => {
+      var _triggerProps$onMouse2, _props$onMouseOut;
+      (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
+      (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 ? void 0 : _props$onMouseOut.call(props, e);
+    },
+    onMouseMove: e => {
+      var _triggerProps$onMouse3, _props$onMouseMove;
+      (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
+      (_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 ? void 0 : _props$onMouseMove.call(props, e);
+    },
+    onMouseDown: e => {
+      var _triggerProps$onMouse4, _props$onMouseDown;
+      (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
+      (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, e);
+    },
+    onFocus: e => {
+      var _triggerProps$onFocus, _props$onFocus;
+      (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
+      (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, e);
+    },
+    onBlur: e => {
+      var _triggerProps$onBlur, _props$onBlur;
+      (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
+      (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, e);
+    }
+  }), /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    color: "currentColor"
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
+}
+export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);

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

package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js

@@ -0,0 +1,52 @@
+/* themed-pressable.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./themed-pressable.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
+const 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"
+};
+const shapeStyles = {
+  default: "_18zrutpp",
+  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
+};
+const 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`
+ */
+
+export const ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable({
+  appearance = 'default',
+  shape = 'default',
+  isSelected,
+  isDisabled,
+  ...props
+}, ref) {
+  const hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, 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: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
+    isDisabled: isDisabled
+  }));
+});

package/dist/es2019/ui/top-nav-items/themed/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/top-nav-items/themed/use-custom-theme-new.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { useColorMode } from '@atlaskit/app-provider';
+import { getTokenValue } from '@atlaskit/tokens';
+import { parseHex } from './color-utils/formats/hex';
+import { useCustomTheme } from './use-custom-theme';
+function toRGBString({
+  r,
+  g,
+  b
+}) {
+  return `rgb(${r}, ${g}, ${b})`;
+}
+/**
+ * React hook that computes the custom theme style for the top navigation bar.
+ *
+ * Determines whether a custom theme is enabled, computes the resulting style,
+ * and checks if the background color matches the default for the current color mode.
+ *
+ * @param theme Optional custom theme configuration object.
+ * @returns An object indicating if the custom theme is enabled, the computed style,
+ *          and a flag specifying if the default background color is used.
+ */
+export function useCustomThemeNew(theme) {
+  const value = useCustomTheme(theme);
+
+  /**
+   * We use the color mode to determine the default background color for the top nav.
+   * We need to use the hook because the user could change their color mode preference.
+   */
+  const colorMode = useColorMode();
+  const hasDefaultBackground = useMemo(() => {
+    if (!value.isEnabled) {
+      return true;
+    }
+    const defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return {
+      ...value,
+      hasDefaultBackground
+    };
+  }
+  return value;
+}

package/dist/es2019/ui/top-nav-items/themed/use-custom-theme.js

@@ -1,43 +1,5 @@
 import { useMemo } from 'react';
-import { useColorMode } from '@atlaskit/app-provider';
-import { getTokenValue } from '@atlaskit/tokens';
-import { parseHex } from './color-utils/formats/hex';
 import { getCustomThemeStyles } from './get-custom-theme-styles';
-function toRGBString({
-  r,
-  g,
-  b
-}) {
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-// TODO: Fill in the hook {description}.
-/**
- * {description}.
- */
-export function useCustomThemeNew(theme) {
-  const value = useCustomTheme(theme);
-
-  /**
-   * We use the color mode to determine the default background color for the top nav.
-   * We need to use the hook because the user could change their color mode preference.
-   */
-  const colorMode = useColorMode();
-  const hasDefaultBackground = useMemo(() => {
-    if (!value.isEnabled) {
-      return true;
-    }
-    const defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
-    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
-  }, [value, colorMode]);
-  if (value.isEnabled) {
-    return {
-      ...value,
-      hasDefaultBackground
-    };
-  }
-  return value;
-}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */