@atlaskit/navigation-system 7.3.0 → 8.0.0

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

@@ -0,0 +1,76 @@
+/* themed-anchor.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedAnchor = void 0;
+require("./themed-anchor.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 = _interopRequireDefault(require("react"));
+var _react2 = require("@compiled/react");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _getPrimitivesSpreadProps = require("./get-primitives-spread-props");
+var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({}, (0, _getPrimitivesSpreadProps.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, (0, _platformFeatureFlags.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.
+ */
+var ThemedAnchor = exports.ThemedAnchor = (0, _forwardRefWithGeneric.default)(ThemedAnchorFn);

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

@@ -0,0 +1,40 @@
+/* themed-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedButton = void 0;
+require("./themed-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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
+var _themedPressable = require("./themed-pressable");
+var _excluded = ["iconBefore", "children"];
+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 textButtonStyles = {
+  iconBefore: "_vwz4idpf",
+  text: "_k48p1wq8"
+};
+var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedButton(_ref, ref) {
+  var IconBefore = _ref.iconBefore,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_themedPressable.ThemedPressable, (0, _extends2.default)({}, props, {
+    ref: ref
+  }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.iconBefore])
+  }, (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+    icon: IconBefore
+  }) : /*#__PURE__*/_react.default.createElement(IconBefore, {
+    label: "",
+    color: "currentColor"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([textButtonStyles.text])
+  }, children));
+});

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

@@ -0,0 +1,85 @@
+/* themed-icon-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedIconButton = void 0;
+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 _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
+var _themedPressable = require("./themed-pressable");
+var _excluded = ["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); }
+var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedIconButton(_ref, ref) {
+  var _tooltip$content;
+  var Icon = _ref.icon,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  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.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);
+        }
+      }), (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
+        icon: Icon
+      }) : /*#__PURE__*/_react.default.createElement(Icon, {
+        label: "",
+        color: "currentColor"
+      }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
+    );
+  });
+});

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

@@ -0,0 +1,45 @@
+/* themed-link-button.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedLinkButton = void 0;
+require("./themed-link-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 = _interopRequireDefault(require("react"));
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _themedAnchor = require("./themed-anchor");
+var _excluded = ["iconBefore", "children"];
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    _react.default.createElement(_themedAnchor.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))
+  );
+}
+var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(ThemedLinkButtonFn);

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedLinkIconButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _themedAnchor = require("./themed-anchor");
+var _excluded = ["icon", "label", "tooltip"];
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  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(_themedAnchor.ThemedAnchor, (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))
+    );
+  });
+}
+var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(ThemedLinkIconButtonFn);

package/dist/{esm/ui/top-nav-items/themed/button.compiled.css → cjs/ui/top-nav-items/themed/themed-pressable.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/cjs/ui/top-nav-items/themed/themed-pressable.js

@@ -0,0 +1,64 @@
+/* themed-pressable.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemedPressable = void 0;
+require("./themed-pressable.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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _getPrimitivesSpreadProps = require("./get-primitives-spread-props");
+var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
+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: "_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 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`
+ */
+
+var ThemedPressable = exports.ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressable(_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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, (0, _getPrimitivesSpreadProps.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, (0, _platformFeatureFlags.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/cjs/ui/top-nav-items/themed/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomThemeNew = useCustomThemeNew;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _appProvider = require("@atlaskit/app-provider");
+var _tokens = require("@atlaskit/tokens");
+var _hex = require("./color-utils/formats/hex");
+var _useCustomTheme = require("./use-custom-theme");
+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) { (0, _defineProperty2.default)(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; }
+function toRGBString(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return "rgb(".concat(r, ", ").concat(g, ", ").concat(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.
+ */
+function useCustomThemeNew(theme) {
+  var value = (0, _useCustomTheme.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.
+   */
+  var colorMode = (0, _appProvider.useColorMode)();
+  var hasDefaultBackground = (0, _react.useMemo)(function () {
+    if (!value.isEnabled) {
+      return true;
+    }
+    var defaultBackground = (0, _hex.parseHex)((0, _tokens.getTokenValue)('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return _objectSpread(_objectSpread({}, value), {}, {
+      hasDefaultBackground: hasDefaultBackground
+    });
+  }
+  return value;
+}

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

@@ -1,52 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCustomTheme = useCustomTheme;
-exports.useCustomThemeNew = useCustomThemeNew;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _appProvider = require("@atlaskit/app-provider");
-var _tokens = require("@atlaskit/tokens");
-var _hex = require("./color-utils/formats/hex");
 var _getCustomThemeStyles = require("./get-custom-theme-styles");
-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) { (0, _defineProperty2.default)(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; }
-function toRGBString(_ref) {
-  var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
-  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
-}
-
-// TODO: Fill in the hook {description}.
-/**
- * {description}.
- */
-function useCustomThemeNew(theme) {
-  var 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.
-   */
-  var colorMode = (0, _appProvider.useColorMode)();
-  var hasDefaultBackground = (0, _react.useMemo)(function () {
-    if (!value.isEnabled) {
-      return true;
-    }
-    var defaultBackground = (0, _hex.parseHex)((0, _tokens.getTokenValue)('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
-    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
-  }, [value, colorMode]);
-  if (value.isEnabled) {
-    return _objectSpread(_objectSpread({}, value), {}, {
-      hasDefaultBackground: hasDefaultBackground
-    });
-  }
-  return value;
-}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */

package/dist/es2019/context/skip-links/skip-links-context.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect } from 'react';
+import { createContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 /**
  * Provides a way to register and unregister skip links
@@ -6,56 +6,4 @@ import noop from '@atlaskit/ds-lib/noop';
 export const SkipLinksContext = /*#__PURE__*/createContext({
   registerSkipLink: noop,
   unregisterSkipLink: noop
-});
-const useSkipLinks = () => useContext(SkipLinksContext);
-
-/**
- * Internal-only hook for registering skip links.
- *
- * `useSkipLink` is the public API wrapper of this.
- *
- * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
- * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
- */
-export const useSkipLinkInternal = ({
-  id,
-  label,
-  listIndex,
-  onBeforeNavigate,
-  isHidden
-}) => {
-  const {
-    registerSkipLink,
-    unregisterSkipLink
-  } = useSkipLinks();
-  useEffect(() => {
-    if (isHidden) {
-      /**
-       * Skip links are hidden for slots with 0 height or width.
-       * They should not be registered.
-       */
-      return;
-    }
-    registerSkipLink({
-      id,
-      label,
-      listIndex,
-      onBeforeNavigate,
-      isHidden
-    });
-    return () => {
-      unregisterSkipLink(id);
-    };
-  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
-};
-
-/**
- * Call `useSkipLink` to register a skip link for important elements on the page.
- */
-export const useSkipLink = (id, label, listIndex) => {
-  useSkipLinkInternal({
-    id,
-    label,
-    listIndex
-  });
-};
+});

package/dist/es2019/context/skip-links/use-skip-link-internal.js

@@ -0,0 +1,41 @@
+import { useContext, useEffect } from 'react';
+import { SkipLinksContext } from './skip-links-context';
+/**
+ * Internal-only hook for registering skip links.
+ *
+ * `useSkipLink` is the public API wrapper of this.
+ *
+ * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
+ * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
+ */
+export const useSkipLinkInternal = ({
+  id,
+  label,
+  listIndex,
+  onBeforeNavigate,
+  isHidden
+}) => {
+  const {
+    registerSkipLink,
+    unregisterSkipLink
+  } = useContext(SkipLinksContext);
+  useEffect(() => {
+    if (isHidden) {
+      /**
+       * Skip links are hidden for slots with 0 height or width.
+       * They should not be registered.
+       */
+      return;
+    }
+    registerSkipLink({
+      id,
+      label,
+      listIndex,
+      onBeforeNavigate,
+      isHidden
+    });
+    return () => {
+      unregisterSkipLink(id);
+    };
+  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
+};

package/dist/es2019/context/skip-links/use-skip-link.js

@@ -0,0 +1,12 @@
+import { useSkipLinkInternal } from './use-skip-link-internal';
+
+/**
+ * Call `useSkipLink` to register a skip link for important elements on the page.
+ */
+export const useSkipLink = (id, label, listIndex) => {
+  useSkipLinkInternal({
+    id,
+    label,
+    listIndex
+  });
+};

package/dist/es2019/context/top-nav-start/top-nav-start-attach-ref.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+export const TopNavStartAttachRef = /*#__PURE__*/createContext(__noop);