@atlaskit/navigation-system 7.2.1 → 8.0.0

package/dist/es2019/ui/page-layout/top-nav/top-nav.js

@@ -5,16 +5,19 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { useSkipLink } from '../../../context/skip-links/skip-links-context';
+import { useSkipLink } from '../../../context/skip-links/use-skip-link';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
-import { useCustomTheme, useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme';
+import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
+import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
 import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
+import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
-import { useLayoutId } from '../id-utils';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
+import { useLayoutId } from '../use-layout-id';
+
 /**
  * Styles for the container for the top nav items.
  *
@@ -39,7 +42,7 @@ function TopNavOld({
   skipLinkLabel = 'Top Bar',
   testId,
   id: providedId,
-  UNSAFE_theme
+  customTheme: customThemeConfig
 }) {
   const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
@@ -49,7 +52,7 @@ function TopNavOld({
   useSkipLink(id, skipLinkLabel);
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  const customTheme = useCustomTheme(UNSAFE_theme);
+  const customTheme = useCustomTheme(customThemeConfig);
   const {
     isExpandedOnDesktop
   } = useSideNavVisibility();
@@ -89,7 +92,7 @@ function TopNavNew({
   skipLinkLabel = 'Top Bar',
   testId,
   id: providedId,
-  UNSAFE_theme
+  customTheme: customThemeConfig
 }) {
   const isFhsEnabled = useIsFhsEnabled();
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
@@ -99,7 +102,7 @@ function TopNavNew({
   useSkipLink(id, skipLinkLabel);
   const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  const customTheme = useCustomThemeNew(UNSAFE_theme);
+  const customTheme = useCustomThemeNew(customThemeConfig);
   const hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   const {
     isExpandedOnDesktop

package/dist/es2019/ui/page-layout/use-layout-id.js

@@ -0,0 +1,15 @@
+import { useSkipLinkId } from './use-skip-link-id';
+
+/**
+ * Returns an ID for use by the layout element and skip links.
+ *
+ * If the consumer has already provided an ID, it will be used instead.
+ * Otherwise, a unique ID will be returned.
+ */
+export function useLayoutId({
+  providedId
+} = {}) {
+  const uniqueId = useSkipLinkId();
+  const id = providedId ? providedId : uniqueId;
+  return id;
+}

package/dist/es2019/ui/page-layout/use-resizing-width-css-var-on-root-element.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { isPanelSplitterDragData } from './panel-splitter/panel-splitter';
+import { isPanelSplitterDragData } from './panel-splitter/is-panel-splitter-drag-data';
 
 /**
  * Monitors resizing on the panel splitter with the provided `panelId`

package/dist/es2019/ui/page-layout/{id-utils.js → use-skip-link-id.js}

@@ -9,18 +9,4 @@ import { useId } from '@atlaskit/ds-lib/use-id';
 export function useSkipLinkId() {
   const uniqueId = useId();
   return uniqueId;
-}
-
-/**
- * Returns an ID for use by the layout element and skip links.
- *
- * If the consumer has already provided an ID, it will be used instead.
- * Otherwise, a unique ID will be returned.
- */
-export function useLayoutId({
-  providedId
-} = {}) {
-  const uniqueId = useSkipLinkId();
-  const id = providedId ? providedId : uniqueId;
-  return id;
 }

package/dist/es2019/ui/top-nav-items/app-switcher.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import AppSwitcherIcon from '@atlaskit/icon/core/app-switcher';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 const toggleButtonTooltipOptions = {
   // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
   // when moving the mouse from the top bar to the side nav.

package/dist/es2019/ui/top-nav-items/chat-button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatIcon from '@atlaskit/icon/core/ai-chat';
 import { ListItem } from '../../components/list-item';
-import { Button } from './themed/migration';
+import { Button } from './themed/button';
 
 /**
  * __Chat button__

package/dist/es2019/ui/top-nav-items/create-button.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import AddIcon from '@atlaskit/icon/core/add';
-import { Button } from './themed/migration';
+import { Button } from './themed/button';
 /**
  * __Create button__
  *

package/dist/es2019/ui/top-nav-items/end-item.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, Fragment } from 'react';
 import { ListItem } from '../../components/list-item';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 /**
  * __EndItem__
  *

package/dist/es2019/ui/top-nav-items/log-in.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import LogInIcon from '@atlaskit/icon/core/log-in';
 import { ListItem } from '../../components/list-item';
-import { LinkIconButton } from './themed/migration';
+import { LinkIconButton } from './themed/link-icon-button';
 /**
  * __Log in__
  *

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

@@ -7,7 +7,7 @@ import SearchIcon from '@atlaskit/icon/core/search';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, Show, Text } from '@atlaskit/primitives/compiled';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { IconButton } from './themed/migration';
+import { IconButton } from './themed/icon-button';
 const styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
   rootT26Shape: "_2rko1qi0",

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

@@ -1,350 +1,14 @@
-/* button.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./button.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
-import { cx } from '@compiled/react';
-import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
-import Tooltip from '@atlaskit/tooltip';
-import VisuallyHidden from '@atlaskit/visually-hidden';
-import IconRenderer from '../icon-renderer';
-
-/**
- * Props from primitives that we explicitly ignore and remove from spread props,
- * because they apply styles.
- *
- * `css` / `className` are not here because primitives don't support them.
- *
- * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
- * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
- */
-
-/**
- * Returns the spread props to pass through to underlying primitive components.
- *
- * It removes the props which apply styles.
- */
-// eslint-disable no-unused-vars
-function getPrimitiveSpreadProps({
-  style,
-  xcss,
-  backgroundColor,
-  padding,
-  paddingBlock,
-  paddingBlockStart,
-  paddingBlockEnd,
-  paddingInline,
-  paddingInlineStart,
-  paddingInlineEnd,
-  ...props
-}) {
-  return props;
-}
-// eslint-enable no-unused-vars
-
-/**
- * Props present in underlying primitives but we want to override,
- * so we don't want to inherit their definitions
- */
-
-/**
- * Props that are common between link buttons.
- */
-
-/**
- * Props shared by `Button` and `IconButton`
- */
-
-export const themedButtonBackground = '--ds-top-bar-button-background';
-export const themedButtonBackgroundHovered = '--ds-top-bar-button-background-hovered';
-export const themedButtonBackgroundPressed = '--ds-top-bar-button-background-pressed';
-export const themedButtonBorder = '--ds-top-bar-button-border';
-export const themedButtonPrimaryText = '--ds-top-bar-button-primary-text';
-export const themedButtonPrimaryBackground = '--ds-top-bar-button-primary-background';
-export const themedButtonPrimaryBackgroundHovered = '--ds-top-bar-button-primary-background-hovered';
-export const themedButtonPrimaryBackgroundPressed = '--ds-top-bar-button-primary-background-pressed';
-export const themedButtonSelectedText = '--ds-top-bar-button-selected-text';
-export const themedButtonSelectedBackground = '--ds-top-bar-button-selected-background';
-export const themedButtonSelectedBackgroundHovered = '--ds-top-bar-button-selected-background-hovered';
-export const themedButtonSelectedBackgroundPressed = '--ds-top-bar-button-selected-background-pressed';
-export const themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
-export const themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
-export const themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
-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`
- */
-
-/**
- * Intentionally an almost-duplicate of `ThemedAnchor` - make sure to update both.
- *
- * See `ThemedAnchor` for more context.
- */
-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
-  }));
-});
-function ThemedAnchorFn({
-  appearance = 'default',
-  shape = 'default',
-  isSelected,
-  isDisabled,
-  ...props
-}, ref) {
-  const hasBorder = appearance === 'default' || isSelected;
-  return /*#__PURE__*/React.createElement(Anchor, _extends({}, getPrimitiveSpreadProps(props), {
+import AkButton from '@atlaskit/button/new';
+import { useHasCustomTheme } from './has-custom-theme-context';
+import { ThemedButton } from './themed-button';
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+export const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedButton : AkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref
-    /**
-     * We are using some style values that are outside of the strict
-     * `@atlaskit/css` types.
-     */
-    // @ts-expect-error
-    // eslint-disable-next-line @compiled/no-suppress-xcss
-    ,
-    xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
-  }));
-}
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-const ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
-const textButtonStyles = {
-  iconBefore: "_vwz4idpf",
-  text: "_k48p1wq8"
-};
-
-/**
- * Props shared by `Button` and `LinkButton`
- */
-
-/**
- * __Themed button__
- *
- * A themed button for the top bar.
- */
-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));
-});
-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))
-  );
-}
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export const ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
-
-/**
- * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
- */
-
-/**
- * __Themed icon button__
- *
- * A themed icon button for the top bar.
- */
-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)));
-});
-function ThemedLinkIconButtonFn({
-  icon: Icon,
-  label,
-  tooltip,
-  ...props
-}, ref) {
-  var _tooltip$content2;
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
-    content: (_tooltip$content2 = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content2 !== void 0 ? _tooltip$content2 : 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$onClick2, _triggerProps$onClick2;
-      (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 ? void 0 : _props$onClick2.call(props, event, analyticsEvent);
-      triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick2 = triggerProps.onClick) === null || _triggerProps$onClick2 === void 0 ? void 0 : _triggerProps$onClick2.call(triggerProps, event);
-    },
-    onMouseOver: e => {
-      var _triggerProps$onMouse5, _props$onMouseOver2;
-      (_triggerProps$onMouse5 = triggerProps.onMouseOver) === null || _triggerProps$onMouse5 === void 0 ? void 0 : _triggerProps$onMouse5.call(triggerProps, e);
-      (_props$onMouseOver2 = props.onMouseOver) === null || _props$onMouseOver2 === void 0 ? void 0 : _props$onMouseOver2.call(props, e);
-    },
-    onMouseOut: e => {
-      var _triggerProps$onMouse6, _props$onMouseOut2;
-      (_triggerProps$onMouse6 = triggerProps.onMouseOut) === null || _triggerProps$onMouse6 === void 0 ? void 0 : _triggerProps$onMouse6.call(triggerProps, e);
-      (_props$onMouseOut2 = props.onMouseOut) === null || _props$onMouseOut2 === void 0 ? void 0 : _props$onMouseOut2.call(props, e);
-    },
-    onMouseMove: e => {
-      var _triggerProps$onMouse7, _props$onMouseMove2;
-      (_triggerProps$onMouse7 = triggerProps.onMouseMove) === null || _triggerProps$onMouse7 === void 0 ? void 0 : _triggerProps$onMouse7.call(triggerProps, e);
-      (_props$onMouseMove2 = props.onMouseMove) === null || _props$onMouseMove2 === void 0 ? void 0 : _props$onMouseMove2.call(props, e);
-    },
-    onMouseDown: e => {
-      var _triggerProps$onMouse8, _props$onMouseDown2;
-      (_triggerProps$onMouse8 = triggerProps.onMouseDown) === null || _triggerProps$onMouse8 === void 0 ? void 0 : _triggerProps$onMouse8.call(triggerProps, e);
-      (_props$onMouseDown2 = props.onMouseDown) === null || _props$onMouseDown2 === void 0 ? void 0 : _props$onMouseDown2.call(props, e);
-    },
-    onFocus: e => {
-      var _triggerProps$onFocus2, _props$onFocus2;
-      (_triggerProps$onFocus2 = triggerProps.onFocus) === null || _triggerProps$onFocus2 === void 0 ? void 0 : _triggerProps$onFocus2.call(triggerProps, e);
-      (_props$onFocus2 = props.onFocus) === null || _props$onFocus2 === void 0 ? void 0 : _props$onFocus2.call(props, e);
-    },
-    onBlur: e => {
-      var _triggerProps$onBlur2, _props$onBlur2;
-      (_triggerProps$onBlur2 = triggerProps.onBlur) === null || _triggerProps$onBlur2 === void 0 ? void 0 : _triggerProps$onBlur2.call(triggerProps, e);
-      (_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 ? void 0 : _props$onBlur2.call(props, e);
-    }
-  }), /*#__PURE__*/React.createElement(Icon, {
-    label: "",
-    color: "currentColor"
-  }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)));
-}
-
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export const ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);
+  }, props));
+});

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

@@ -1,8 +1,8 @@
 import { themedLogoIcon, themedLogoText } from '../nav-logo/logo-renderer';
-import { themedButtonBackground, themedButtonBackgroundHovered, themedButtonBackgroundPressed, themedButtonBorder, themedButtonDisabledBackground, themedButtonDisabledText, themedButtonPrimaryBackground, themedButtonPrimaryBackgroundHovered, themedButtonPrimaryBackgroundPressed, themedButtonPrimaryText, themedButtonSelectedBackground, themedButtonSelectedBackgroundHovered, themedButtonSelectedBackgroundPressed, themedButtonSelectedBorder, themedButtonSelectedText } from './button';
 import { getColorMode, getTextColor, isLight, simpleAlphaComposite } from './color-utils';
 import { parseHex } from './color-utils/formats/hex';
-import { palette, paletteRgba } from './palette';
+import { palette } from './palette';
+import { paletteRgba } from './palette-rgba';
 import { themedSearchBorder, themedSearchBorderFocused } from './search';
 
 /**
@@ -35,32 +35,32 @@ function toRGBAString({
 // Values here are not final
 const buttonStyles = {
   light: {
-    [themedButtonBackground]: 'transparent',
-    [themedButtonBackgroundHovered]: palette.Neutral200A,
-    [themedButtonBackgroundPressed]: palette.Neutral300A,
-    [themedButtonBorder]: palette.Neutral300A,
-    [themedButtonSelectedBackground]: palette.Neutral300A,
-    [themedButtonSelectedBackgroundHovered]: palette.Neutral400A,
-    [themedButtonSelectedBackgroundPressed]: palette.Neutral500A,
-    [themedButtonDisabledText]: palette.Neutral400A,
-    [themedButtonDisabledBackground]: palette.Neutral100A
+    ['--ds-top-bar-button-background']: 'transparent',
+    ['--ds-top-bar-button-background-hovered']: palette.Neutral200A,
+    ['--ds-top-bar-button-background-pressed']: palette.Neutral300A,
+    ['--ds-top-bar-button-border']: palette.Neutral300A,
+    ['--ds-top-bar-button-selected-background']: palette.Neutral300A,
+    ['--ds-top-bar-button-selected-background-hovered']: palette.Neutral400A,
+    ['--ds-top-bar-button-selected-background-pressed']: palette.Neutral500A,
+    ['--ds-top-bar-button-disabled-text']: palette.Neutral400A,
+    ['--ds-top-bar-button-disabled-background']: palette.Neutral100A
   },
   dark: {
-    [themedButtonBackground]: 'transparent',
-    [themedButtonBackgroundHovered]: palette.DarkNeutral200A,
-    [themedButtonBackgroundPressed]: palette.DarkNeutral300A,
-    [themedButtonBorder]: palette.DarkNeutral300A,
-    [themedButtonSelectedBackground]: palette.DarkNeutral300A,
-    [themedButtonSelectedBackgroundHovered]: palette.DarkNeutral400A,
-    [themedButtonSelectedBackgroundPressed]: palette.DarkNeutral500A,
-    [themedButtonDisabledText]: palette.DarkNeutral400A,
-    [themedButtonDisabledBackground]: palette.DarkNeutral100A
+    ['--ds-top-bar-button-background']: 'transparent',
+    ['--ds-top-bar-button-background-hovered']: palette.DarkNeutral200A,
+    ['--ds-top-bar-button-background-pressed']: palette.DarkNeutral300A,
+    ['--ds-top-bar-button-border']: palette.DarkNeutral300A,
+    ['--ds-top-bar-button-selected-background']: palette.DarkNeutral300A,
+    ['--ds-top-bar-button-selected-background-hovered']: palette.DarkNeutral400A,
+    ['--ds-top-bar-button-selected-background-pressed']: palette.DarkNeutral500A,
+    ['--ds-top-bar-button-disabled-text']: palette.DarkNeutral400A,
+    ['--ds-top-bar-button-disabled-background']: palette.DarkNeutral100A
   }
 };
 const logoStyles = {
   light: {
-    [themedLogoIcon]: palette.DarkNeutral0,
-    [themedLogoText]: palette.DarkNeutral0
+    ['--ds-top-bar-logo-icon']: palette.DarkNeutral0,
+    ['--ds-top-bar-logo-text']: palette.DarkNeutral0
   },
   dark: {
     [themedLogoIcon]: palette.Neutral0,
@@ -111,16 +111,16 @@ export function getCustomThemeStyles({
      * except the text color which can sometimes differ because we're
      * now following WCAG
      */
-    [themedButtonPrimaryBackground]: toRGBString(highlightRgb),
-    [themedButtonPrimaryBackgroundHovered]: toRGBAString({
+    ['--ds-top-bar-button-primary-background']: toRGBString(highlightRgb),
+    ['--ds-top-bar-button-primary-background-hovered']: toRGBAString({
       ...highlightRgb,
       a: 0.8
     }),
-    [themedButtonPrimaryBackgroundPressed]: toRGBAString({
+    ['--ds-top-bar-button-primary-background-pressed']: toRGBAString({
       ...highlightRgb,
       a: 0.65
     }),
-    [themedButtonPrimaryText]: highlightTextColor.hex
+    ['--ds-top-bar-button-primary-text']: highlightTextColor.hex
   };
 }
 
@@ -151,8 +151,8 @@ function getSelectedStyles({
     foreground: foregroundColor
   });
   return {
-    [themedButtonSelectedText]: getTextColor(blendedBackground).hex,
+    ['--ds-top-bar-button-selected-text']: getTextColor(blendedBackground).hex,
     // Border colors are chosen to match the text, while remaining in the palette
-    [themedButtonSelectedBorder]: isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100
+    ['--ds-top-bar-button-selected-border']: isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100
   };
 }

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

@@ -0,0 +1,31 @@
+/**
+ * Props from primitives that we explicitly ignore and remove from spread props,
+ * because they apply styles.
+ *
+ * `css` / `className` are not here because primitives don't support them.
+ *
+ * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
+ * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
+ */
+
+/**
+ * Returns the spread props to pass through to underlying primitive components.
+ *
+ * It removes the props which apply styles.
+ */
+// eslint-disable no-unused-vars
+export function getPrimitiveSpreadProps({
+  style,
+  xcss,
+  backgroundColor,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  ...props
+}) {
+  return props;
+}