@atlaskit/navigation-system 7.2.1 → 8.0.0

package/dist/esm/ui/page-layout/side-nav/toggle-button.js

@@ -12,13 +12,13 @@ import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { IconButton } from '../../top-nav-items/themed/migration';
-import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { IconButton } from '../../top-nav-items/themed/icon-button';
+import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
 import { sideNavToggleTooltipKeyboardShortcut } from './side-nav-toggle-tooltip-keyboard-shortcut';
-import { SideNavToggleButtonAttachRef } from './toggle-button-context';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
+import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useToggleSideNav } from './use-toggle-side-nav';
-import { SideNavVisibilityState } from './visibility-context';
 var 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/esm/ui/page-layout/side-nav/use-expand-side-nav.js

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { SetSideNavVisibilityState } from './visibility-context';
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 /**
  * __useExpandSideNav__
  *

package/dist/esm/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { IsSideNavShortcutEnabledContext } from './is-side-nav-shortcut-enabled-context';
+
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export function useIsSideNavShortcutEnabled() {
+  return useContext(IsSideNavShortcutEnabledContext);
+}

package/dist/esm/ui/page-layout/side-nav/use-side-nav-ref.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SideNavRefContext } from './side-nav-ref-context';
+
+/**
+ * Returns a ref for the side navigation that is accessible to other Page Layout slots.
+ *
+ * Used by the Panel to measure the SideNav when it is calculating its resize bounds.
+ */
+export function useSideNavRef() {
+  return useContext(SideNavRefContext);
+}

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -3,7 +3,7 @@ import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { useIsSideNavShortcutEnabled } from './is-side-nav-shortcut-enabled-context';
+import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
 
 /**

package/dist/esm/ui/page-layout/side-nav/use-side-nav-visibility.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SideNavVisibilityState } from './visibility-context';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
 /**
  * This hook is intended to be used internally within the `@atlaskit/navigation-system` package.
  *

package/dist/esm/ui/page-layout/side-nav/use-toggle-side-nav.js

@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import { SetSideNavVisibilityState } from './visibility-context';
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
 /**
  * __useToggleSideNav__
  *

package/dist/esm/ui/page-layout/side-nav/visibility-provider.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { SetSideNavVisibilityState, SideNavVisibilityState } from './visibility-context';
-
+import { SetSideNavVisibilityState } from './set-side-nav-visibility-state';
+import { SideNavVisibilityState } from './side-nav-visibility-state';
 /**
  * Manages the side nav visibility state and provides the context.
  */

package/dist/esm/ui/page-layout/top-nav/top-nav-end.js

@@ -13,7 +13,7 @@ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/comp
 import { List } from '../../../components/list';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
-import { IconButton } from '../../top-nav-items/themed/migration';
+import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 var containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",

package/dist/esm/ui/page-layout/top-nav/top-nav-start.js

@@ -7,13 +7,13 @@ import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
-import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
+import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-attach-ref';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useHasCustomTheme } from '../../top-nav-items/themed/has-custom-theme-context';
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { openLayerObserverTopNavStartNamespace } from '../constants';
+import { SideNavVisibilityState } from '../side-nav/side-nav-visibility-state';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-import { SideNavVisibilityState } from '../side-nav/visibility-context';
 
 /**
  * Firefox does support these reorder animations, but only partially enabling layout animations would look odd.

package/dist/esm/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.
  *
@@ -40,7 +43,7 @@ function TopNavOld(_ref) {
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
     testId = _ref.testId,
     providedId = _ref.id,
-    UNSAFE_theme = _ref.UNSAFE_theme;
+    customThemeConfig = _ref.customTheme;
   var isFhsEnabled = useIsFhsEnabled();
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
@@ -49,7 +52,7 @@ function TopNavOld(_ref) {
   useSkipLink(id, skipLinkLabel);
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  var customTheme = useCustomTheme(UNSAFE_theme);
+  var customTheme = useCustomTheme(customThemeConfig);
   var _useSideNavVisibility = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
   return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
@@ -89,7 +92,7 @@ function TopNavNew(_ref2) {
     skipLinkLabel = _ref2$skipLinkLabel === void 0 ? 'Top Bar' : _ref2$skipLinkLabel,
     testId = _ref2.testId,
     providedId = _ref2.id,
-    UNSAFE_theme = _ref2.UNSAFE_theme;
+    customThemeConfig = _ref2.customTheme;
   var isFhsEnabled = useIsFhsEnabled();
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
@@ -98,7 +101,7 @@ function TopNavNew(_ref2) {
   useSkipLink(id, skipLinkLabel);
   var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
   var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
-  var customTheme = useCustomThemeNew(UNSAFE_theme);
+  var customTheme = useCustomThemeNew(customThemeConfig);
   var hasDefaultBackground = customTheme.isEnabled ? customTheme.hasDefaultBackground : true;
   var _useSideNavVisibility2 = useSideNavVisibility(),
     isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;

package/dist/esm/ui/page-layout/{id-utils.js → use-layout-id.js}

@@ -1,15 +1,4 @@
-import { useId } from '@atlaskit/ds-lib/use-id';
-
-// Exposing a hook as a convenience for consumers, so they don't need to import
-// from ds-lib themselves.
-/**
- * Returns a unique ID for use by layout elements and skip links.
- * You can use this for custom skip links.
- */
-export function useSkipLinkId() {
-  var uniqueId = useId();
-  return uniqueId;
-}
+import { useSkipLinkId } from './use-skip-link-id';
 
 /**
  * Returns an ID for use by the layout element and skip links.

package/dist/esm/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/esm/ui/page-layout/use-skip-link-id.js

@@ -0,0 +1,12 @@
+import { useId } from '@atlaskit/ds-lib/use-id';
+
+// Exposing a hook as a convenience for consumers, so they don't need to import
+// from ds-lib themselves.
+/**
+ * Returns a unique ID for use by layout elements and skip links.
+ * You can use this for custom skip links.
+ */
+export function useSkipLinkId() {
+  var uniqueId = useId();
+  return uniqueId;
+}

package/dist/esm/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';
 var 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/esm/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/esm/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/esm/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/esm/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/esm/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';
 var styles = {
   root: "_2rko12b0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
   rootT26Shape: "_2rko1qi0",

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

@@ -1,361 +1,14 @@
-/* button.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],
-  _excluded2 = ["appearance", "shape", "isSelected", "isDisabled"],
-  _excluded3 = ["appearance", "shape", "isSelected", "isDisabled"],
-  _excluded4 = ["iconBefore", "children"],
-  _excluded5 = ["iconBefore", "children"],
-  _excluded6 = ["icon", "label", "tooltip"],
-  _excluded7 = ["icon", "label", "tooltip"];
-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(_ref) {
-  var style = _ref.style,
-    xcss = _ref.xcss,
-    backgroundColor = _ref.backgroundColor,
-    padding = _ref.padding,
-    paddingBlock = _ref.paddingBlock,
-    paddingBlockStart = _ref.paddingBlockStart,
-    paddingBlockEnd = _ref.paddingBlockEnd,
-    paddingInline = _ref.paddingInline,
-    paddingInlineStart = _ref.paddingInlineStart,
-    paddingInlineEnd = _ref.paddingInlineEnd,
-    props = _objectWithoutProperties(_ref, _excluded);
-  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 var themedButtonBackground = '--ds-top-bar-button-background';
-export var themedButtonBackgroundHovered = '--ds-top-bar-button-background-hovered';
-export var themedButtonBackgroundPressed = '--ds-top-bar-button-background-pressed';
-export var themedButtonBorder = '--ds-top-bar-button-border';
-export var themedButtonPrimaryText = '--ds-top-bar-button-primary-text';
-export var themedButtonPrimaryBackground = '--ds-top-bar-button-primary-background';
-export var themedButtonPrimaryBackgroundHovered = '--ds-top-bar-button-primary-background-hovered';
-export var themedButtonPrimaryBackgroundPressed = '--ds-top-bar-button-primary-background-pressed';
-export var themedButtonSelectedText = '--ds-top-bar-button-selected-text';
-export var themedButtonSelectedBackground = '--ds-top-bar-button-selected-background';
-export var themedButtonSelectedBackgroundHovered = '--ds-top-bar-button-selected-background-hovered';
-export var themedButtonSelectedBackgroundPressed = '--ds-top-bar-button-selected-background-pressed';
-export var themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
-export var themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
-export var themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
-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`
- */
-
-/**
- * Intentionally an almost-duplicate of `ThemedAnchor` - make sure to update both.
- *
- * See `ThemedAnchor` for more context.
- */
-var ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(_ref2, ref) {
-  var _ref2$appearance = _ref2.appearance,
-    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
-    _ref2$shape = _ref2.shape,
-    shape = _ref2$shape === void 0 ? 'default' : _ref2$shape,
-    isSelected = _ref2.isSelected,
-    isDisabled = _ref2.isDisabled,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var 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(_ref3, ref) {
-  var _ref3$appearance = _ref3.appearance,
-    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
-    _ref3$shape = _ref3.shape,
-    shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
-    isSelected = _ref3.isSelected,
-    isDisabled = _ref3.isDisabled,
-    props = _objectWithoutProperties(_ref3, _excluded3);
-  var 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 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var 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.
- */
-var ThemedAnchor = forwardRefWithGeneric(ThemedAnchorFn);
-var textButtonStyles = {
-  iconBefore: "_vwz4idpf",
-  text: "_k48p1wq8"
-};
-
-/**
- * Props shared by `Button` and `LinkButton`
- */
-
-/**
- * __Themed button__
- *
- * A themed button for the top bar.
- */
-export var ThemedButton = /*#__PURE__*/forwardRef(function ThemedButton(_ref4, ref) {
-  var IconBefore = _ref4.iconBefore,
-    children = _ref4.children,
-    props = _objectWithoutProperties(_ref4, _excluded4);
-  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(_ref5, ref) {
-  var IconBefore = _ref5.iconBefore,
-    children = _ref5.children,
-    props = _objectWithoutProperties(_ref5, _excluded5);
-  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 var ThemedLinkButton = forwardRefWithGeneric(ThemedLinkButtonFn);
-
-/**
- * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
- */
-
-/**
- * __Themed icon button__
- *
- * A themed icon button for the top bar.
- */
-export var ThemedIconButton = /*#__PURE__*/forwardRef(function ThemedIconButton(_ref6, ref) {
-  var _tooltip$content;
-  var Icon = _ref6.icon,
-    label = _ref6.label,
-    tooltip = _ref6.tooltip,
-    props = _objectWithoutProperties(_ref6, _excluded6);
-  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
-  }), 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.createElement(ThemedPressable, _extends({}, props, {
-        shape: "square",
-        ref: mergeRefs([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);
-        }
-      }), 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(_ref7, ref) {
-  var _tooltip$content2;
-  var Icon = _ref7.icon,
-    label = _ref7.label,
-    tooltip = _ref7.tooltip,
-    props = _objectWithoutProperties(_ref7, _excluded7);
-  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
-  }), 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.createElement(ThemedAnchor, _extends({}, props, {
-        shape: "square",
-        ref: mergeRefs([ref, triggerProps.ref]),
-        onClick: function onClick(event, analyticsEvent) {
-          var _props$onClick2, _triggerProps$onClick2;
-          (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 || _props$onClick2.call(props, event, analyticsEvent);
-          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick2 = triggerProps.onClick) === null || _triggerProps$onClick2 === void 0 || _triggerProps$onClick2.call(triggerProps, event);
-        },
-        onMouseOver: function onMouseOver(e) {
-          var _triggerProps$onMouse5, _props$onMouseOver2;
-          (_triggerProps$onMouse5 = triggerProps.onMouseOver) === null || _triggerProps$onMouse5 === void 0 || _triggerProps$onMouse5.call(triggerProps, e);
-          (_props$onMouseOver2 = props.onMouseOver) === null || _props$onMouseOver2 === void 0 || _props$onMouseOver2.call(props, e);
-        },
-        onMouseOut: function onMouseOut(e) {
-          var _triggerProps$onMouse6, _props$onMouseOut2;
-          (_triggerProps$onMouse6 = triggerProps.onMouseOut) === null || _triggerProps$onMouse6 === void 0 || _triggerProps$onMouse6.call(triggerProps, e);
-          (_props$onMouseOut2 = props.onMouseOut) === null || _props$onMouseOut2 === void 0 || _props$onMouseOut2.call(props, e);
-        },
-        onMouseMove: function onMouseMove(e) {
-          var _triggerProps$onMouse7, _props$onMouseMove2;
-          (_triggerProps$onMouse7 = triggerProps.onMouseMove) === null || _triggerProps$onMouse7 === void 0 || _triggerProps$onMouse7.call(triggerProps, e);
-          (_props$onMouseMove2 = props.onMouseMove) === null || _props$onMouseMove2 === void 0 || _props$onMouseMove2.call(props, e);
-        },
-        onMouseDown: function onMouseDown(e) {
-          var _triggerProps$onMouse8, _props$onMouseDown2;
-          (_triggerProps$onMouse8 = triggerProps.onMouseDown) === null || _triggerProps$onMouse8 === void 0 || _triggerProps$onMouse8.call(triggerProps, e);
-          (_props$onMouseDown2 = props.onMouseDown) === null || _props$onMouseDown2 === void 0 || _props$onMouseDown2.call(props, e);
-        },
-        onFocus: function onFocus(e) {
-          var _triggerProps$onFocus2, _props$onFocus2;
-          (_triggerProps$onFocus2 = triggerProps.onFocus) === null || _triggerProps$onFocus2 === void 0 || _triggerProps$onFocus2.call(triggerProps, e);
-          (_props$onFocus2 = props.onFocus) === null || _props$onFocus2 === void 0 || _props$onFocus2.call(props, e);
-        },
-        onBlur: function onBlur(e) {
-          var _triggerProps$onBlur2, _props$onBlur2;
-          (_triggerProps$onBlur2 = triggerProps.onBlur) === null || _triggerProps$onBlur2 === void 0 || _triggerProps$onBlur2.call(triggerProps, e);
-          (_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === 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 var ThemedLinkIconButton = forwardRefWithGeneric(ThemedLinkIconButtonFn);
+  }, props));
+});