@atlaskit/navigation-system 7.3.0 → 8.1.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/components/skip-links/skip-link.compiled.css

@@ -1 +1,2 @@
-._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

package/dist/es2019/components/skip-links/skip-link.js

@@ -3,10 +3,12 @@ import "./skip-link.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor } from '@atlaskit/primitives/compiled';
 const styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -100,7 +102,7 @@ export const SkipLink = ({
     window.scrollTo(0, 0);
   }, [id, onBeforeNavigate]);
   return /*#__PURE__*/React.createElement("li", {
-    className: ax([styles.skipLinkListItem])
+    className: ax([styles.skipLinkListItem, fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListItemNew])
   }, /*#__PURE__*/React.createElement(Anchor
   /**
    * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/

package/dist/es2019/components/skip-links/skip-links-container.compiled.css

@@ -1,8 +1,12 @@
-
+._11c8i4vh{font:var(--ds-font-heading-xxsmall,normal 653 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._152tv47k{inset-block-start:var(--ds-space-250,20px)}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
 ._1e0c1txw{display:flex}
@@ -15,6 +19,7 @@
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._kqsw1n9t{position:fixed}
 ._lcxvglyw{pointer-events:none}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
 ._tzy4idpf{opacity:0}
 ._18eu1wug:focus-within{pointer-events:auto}
 ._1digjh3g:focus-within{z-index:calc(infinity)}

package/dist/es2019/components/skip-links/skip-links-container.js

@@ -3,11 +3,16 @@ import "./skip-links-container.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 const styles = {
-  root: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp _1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
-  skipLinkList: "_zulp1b66 _1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t"
+  root: "_1e0c1txw _2lx21bp4 _kqsw1n9t _1e02v47k _152tv47k _bfhk1bhr _16qs130s _1pby1mrw _tzy4idpf _lcxvglyw _1digjh3g _1mygkb7n _18eu1wug",
+  rootOld: "_zulp1b66 _2rko12b0 _1rjcutpp _18zrutpp",
+  rootNew: "_2rko1mok _1rjcu2gc _18zrpxbi",
+  label: "_11c8i4vh _1rjcu2gc _syazazsu",
+  skipLinkList: "_1e0c1txw _2lx21bp4 _1x8w11lx _2mzuglyw _1pfhze3t _bozgze3t",
+  skipLinkListOld: "_zulp1b66"
 };
 
 /**
@@ -88,12 +93,15 @@ export function SkipLinksContainer({
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? `${testId}--skip-links-container` : undefined,
-    className: ax([styles.root])
-  }, !isEmptyLabel && /*#__PURE__*/React.createElement(Text, {
+    className: ax([styles.root, fg('platform_dst_nav4_skip_link_a11y_1') ? styles.rootNew : styles.rootOld])
+  }, !isEmptyLabel && (fg('platform_dst_nav4_skip_link_a11y_1') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? `${testId}--skip-links-container--label` : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? `${testId}--skip-links-container--label` : undefined
-  }, label), /*#__PURE__*/React.createElement("ol", {
-    className: ax([styles.skipLinkList])
+  }, label)), /*#__PURE__*/React.createElement("ol", {
+    className: ax([styles.skipLinkList, !fg('platform_dst_nav4_skip_link_a11y_1') && styles.skipLinkListOld])
   }, sortedLinks.map(({
     id,
     label,