@atlaskit/navigation-system 7.3.0 → 8.1.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.
  */

package/dist/esm/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/esm/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';
 var styles = {
-  skipLinkListItem: "_1pfhze3t"
+  skipLinkListItem: "_1pfhze3t",
+  skipLinkListItemNew: "_1rjcu2gc"
 };
 
 /**
@@ -99,7 +101,7 @@ export var SkipLink = function SkipLink(_ref) {
     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/esm/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/esm/components/skip-links/skip-links-container.js

@@ -7,11 +7,16 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { SkipLink } from './skip-link';
 var 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"
 };
 
 /**
@@ -98,12 +103,15 @@ export function SkipLinksContainer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     onKeyDown: closeOnEscape,
     "data-testid": testId ? "".concat(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 ? "".concat(testId, "--skip-links-container--label") : undefined,
+    className: ax([styles.label])
+  }, label) : /*#__PURE__*/React.createElement(Text, {
     weight: "bold",
     testId: testId ? "".concat(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(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,

package/dist/esm/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 var SkipLinksContext = /*#__PURE__*/createContext({
   registerSkipLink: noop,
   unregisterSkipLink: noop
-});
-var useSkipLinks = function useSkipLinks() {
-  return 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 var useSkipLinkInternal = function useSkipLinkInternal(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    listIndex = _ref.listIndex,
-    onBeforeNavigate = _ref.onBeforeNavigate,
-    isHidden = _ref.isHidden;
-  var _useSkipLinks = useSkipLinks(),
-    registerSkipLink = _useSkipLinks.registerSkipLink,
-    unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
-  useEffect(function () {
-    if (isHidden) {
-      /**
-       * Skip links are hidden for slots with 0 height or width.
-       * They should not be registered.
-       */
-      return;
-    }
-    registerSkipLink({
-      id: id,
-      label: label,
-      listIndex: listIndex,
-      onBeforeNavigate: onBeforeNavigate,
-      isHidden: isHidden
-    });
-    return function () {
-      unregisterSkipLink(id);
-    };
-  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
-};
-
-/**
- * Call `useSkipLink` to register a skip link for important elements on the page.
- */
-export var useSkipLink = function useSkipLink(id, label, listIndex) {
-  useSkipLinkInternal({
-    id: id,
-    label: label,
-    listIndex: listIndex
-  });
-};
+});

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

@@ -0,0 +1,39 @@
+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 var useSkipLinkInternal = function useSkipLinkInternal(_ref) {
+  var id = _ref.id,
+    label = _ref.label,
+    listIndex = _ref.listIndex,
+    onBeforeNavigate = _ref.onBeforeNavigate,
+    isHidden = _ref.isHidden;
+  var _useContext = useContext(SkipLinksContext),
+    registerSkipLink = _useContext.registerSkipLink,
+    unregisterSkipLink = _useContext.unregisterSkipLink;
+  useEffect(function () {
+    if (isHidden) {
+      /**
+       * Skip links are hidden for slots with 0 height or width.
+       * They should not be registered.
+       */
+      return;
+    }
+    registerSkipLink({
+      id: id,
+      label: label,
+      listIndex: listIndex,
+      onBeforeNavigate: onBeforeNavigate,
+      isHidden: isHidden
+    });
+    return function () {
+      unregisterSkipLink(id);
+    };
+  }, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
+};

package/dist/esm/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 var useSkipLink = function useSkipLink(id, label, listIndex) {
+  useSkipLinkInternal({
+    id: id,
+    label: label,
+    listIndex: listIndex
+  });
+};

package/dist/esm/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 var TopNavStartAttachRef = /*#__PURE__*/createContext(__noop);

package/dist/esm/context/top-nav-start/top-nav-start-context-provider.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { TopNavStartAttachRef, TopNavStartElement } from './top-nav-start-context';
+import { TopNavStartAttachRef } from './top-nav-start-attach-ref';
+import { TopNavStartElement } from './top-nav-start-element';
 
 /**
  * Provider for the TopNavStart container element contexts.