@atlaskit/navigation-system 11.2.3 → 11.3.0

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

@@ -10,21 +10,18 @@ exports.Search = void 0;
 require("./search.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _css = require("@atlaskit/css");
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _pressable = require("@atlaskit/primitives/compiled/pressable");
 var _show = require("@atlaskit/primitives/compiled/show");
 var _text = require("@atlaskit/primitives/compiled/text");
-var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
 var _iconButton = require("./themed/icon-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  root: "_2rko1qi0 _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1di6r01l _114b11p5",
+  root: "_2rko1qi0 _v564k6bl _1rjcze3t _18zr12x7 _yv0e1mfv _4cvr1h6o _bfhk1j9a _vchhusvi _80om1kdv _1e0cglyw _4t3izwfg _p12f1kvu _1bsb1osq _irr3l4ek _1ggl5xtf _1di6r01l _114b11p5",
   buttonText: "_yyhyjvu9 _1ii7kb7n",
   iconBefore: "_yyhykb7n _1ii7kb7n _1e0c1txw",
-  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw",
-  fullHeightSidebar: "_p12fktbq"
+  elemAfter: "_yyhy11wp _1ii7kb7n _1e0c1txw"
 };
 /**
  * __Search__
@@ -39,7 +36,6 @@ var Search = exports.Search = function Search(_ref) {
     elemAfter = _ref.elemAfter,
     interactionName = _ref.interactionName,
     ariaHaspopup = _ref['aria-haspopup'];
-  var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_pressable.Pressable, {
     style: {
       // To win the specificity war against Emotion we move this into inline styles
@@ -49,7 +45,7 @@ var Search = exports.Search = function Search(_ref) {
       border: "var(--ds-border-width, 1px)".concat(" solid ", (0, _fg.fg)('platform-dst-tokens-finesse') ? "var(--ds-border-input-search, #0B120E24)" : "var(--ds-border-input, #8C8F97)")
     },
     onClick: onClick,
-    xcss: (0, _css.cx)(styles.root, isFhsEnabled && styles.fullHeightSidebar),
+    xcss: styles.root,
     interactionName: interactionName,
     "aria-haspopup": ariaHaspopup
   }, /*#__PURE__*/_react.default.createElement("span", {

package/dist/es2019/ui/fhs-rollout/is-custom-is-fhs-enabled-context.js

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 /**
  * __Is custom is fhs enabled context__
  *
- * Tracks if a custom value has been provided for `IsFhsEnabledContext`.
- * Used to prevent nesting of the `IsFhsEnabledProvider`.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This context is no longer used and
+ * will be deleted in a future major release.
  */
 export const IsCustomIsFhsEnabledContext = /*#__PURE__*/createContext(false);

package/dist/es2019/ui/fhs-rollout/is-fhs-enabled-context.js

@@ -1,9 +1,11 @@
 import { createContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 /**
  * __Is fhs enabled context__
  *
- * Tracks is FHS enabled.
- * Defaults to feature gate 'navx-full-height-sidebar'.
+ * @deprecated Full height sidebar (FHS) has been rolled back and this context is no longer read by
+ * any platform component. Its value is ignored. Remove usages of it; it will be deleted in a future
+ * major release.
+ *
+ * See https://hello.atlassian.net/wiki/spaces/navx/pages/7189669176/Full+Height+Sidebar+FHS+Rollback+Plan
  */
-export const IsFhsEnabledContext = /*#__PURE__*/createContext(() => fg('navx-full-height-sidebar'));
+export const IsFhsEnabledContext = /*#__PURE__*/createContext(false);

package/dist/es2019/ui/fhs-rollout/is-fhs-enabled-provider.js

@@ -1,23 +1,18 @@
-import React, { useContext } from 'react';
-import { IsCustomIsFhsEnabledContext } from './is-custom-is-fhs-enabled-context';
-import { IsFhsEnabledContext } from './is-fhs-enabled-context';
+import React from 'react';
 
 /**
  * __Is fhs enabled provider__
  *
- * Used to provide a custom value for is FHS enabled.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This provider is now a passthrough:
+ * it renders its children and ignores `value`. Remove it from your app; it will be deleted in a
+ * future major release.
+ *
+ * See https://hello.atlassian.net/wiki/spaces/navx/pages/7189669176/Full+Height+Sidebar+FHS+Rollback+Plan
  */
 export const IsFhsEnabledProvider = ({
-  children,
-  value
-}) => {
-  const isCustomIsFhsEnabled = useContext(IsCustomIsFhsEnabledContext);
-  if (isCustomIsFhsEnabled) {
-    throw new Error('A custom value for IsFhsEnabledContext has already been provided');
-  }
-  return /*#__PURE__*/React.createElement(IsCustomIsFhsEnabledContext.Provider, {
-    value: true
-  }, /*#__PURE__*/React.createElement(IsFhsEnabledContext.Provider, {
-    value: value
-  }, children));
-};
+  children
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, children);
+
+/**
+ * @deprecated Full height sidebar (FHS) has been rolled back. `value` is ignored.
+ */

package/dist/es2019/ui/fhs-rollout/use-is-fhs-enabled.js

@@ -1,12 +1,9 @@
-import { useContext } from 'react';
-import { IsFhsEnabledContext } from './is-fhs-enabled-context';
-
 /**
  * __Use is fhs enabled__
  *
- * Retrieves is FHS enabled.
+ * @deprecated Full height sidebar (FHS) has been rolled back. This hook always returns `false`.
+ * Remove usages of it (treat it as `false`); it will be deleted in a future major release.
+ *
+ * See https://hello.atlassian.net/wiki/spaces/navx/pages/7189669176/Full+Height+Sidebar+FHS+Rollback+Plan
  */
-export const useIsFhsEnabled = () => {
-  const isFhsEnabled = useContext(IsFhsEnabledContext);
-  return typeof isFhsEnabled === 'boolean' ? isFhsEnabled : isFhsEnabled();
-};
+export const useIsFhsEnabled = () => false;

package/dist/es2019/ui/page-layout/banner.compiled.css

@@ -1,6 +1,5 @@
 ._nd5ldkfm{grid-area:banner}._152tidpf{inset-block-start:0}
 ._18m915vq{overflow-y:hidden}
-._1pby11wp{z-index:3}
 ._1pbyegat{z-index:4}
 ._1reo15vq{overflow-x:hidden}
 ._4t3iutvi{height:var(--n_bnrM)}

package/dist/es2019/ui/page-layout/banner.js

@@ -5,15 +5,13 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
-import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
 import { bannerMountedVar, UNSAFE_bannerVar } 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 { useLayoutId } from './use-layout-id';
 const styles = {
-  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
-  fullHeightSidebar: "_1pby11wp"
+  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat"
 };
 
 /**
@@ -34,7 +32,6 @@ export function Banner({
   const id = useLayoutId({
     providedId
   });
-  const isFhsEnabled = useIsFhsEnabled();
 
   /**
    * Don't show the skip link if the slot has 0 height.
@@ -49,7 +46,7 @@ export function Banner({
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-layout-slot": true,
-    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, xcss]),
+    className: ax([styles.root, xcss]),
     "data-testid": testId
   }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
     variableName: bannerMountedVar,

package/dist/es2019/ui/page-layout/constants.js

@@ -59,23 +59,11 @@ export const localSlotLayers = {
   // Chat overlays the app, including TopNav and SideNav, below the banner.
   chatPanelOverlay: 5,
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS is enabled.
-  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
-  sideNavPanelSplitterFHS: 4,
   topBar: 4,
   banner: 4,
-  // When FHS is enabled, the side nav is layered below the top nav,
-  // but above the panel
-  bannerFHS: 3,
-  topNavFHS: 3,
   sideNav: 2,
   panelSmallViewports: 1
 };
 export const openLayerObserverSideNavNamespace = 'side-nav';
-// We have separate OpenLayerObserver namespaces for each top nav layout area, instead of a single namespace for the entire top nav,
-// as we need to know if there are open layers in TopNavStart specifically to prevent the side nav from peeking.
-// The OpenLayerObserver doesn't support nested namespaces. We could update it, but for now it's simple enough to just have separate
-// namespaces.
-export const openLayerObserverTopNavStartNamespace = 'top-nav-start';
 export const openLayerObserverTopNavMiddleNamespace = 'top-nav-middle';
 export const openLayerObserverTopNavEndNamespace = 'top-nav-end';

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -31,7 +31,6 @@
 ._vp7g6x5g:focus-within{color:var(--ds-text-selected,#1868db)}
 ._30l31ihb:hover{color:var(--ds-border-bold,#7d818a)}
 ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
-._d0al11mm:hover{cursor:col-resize}
 ._d0aluf7j:hover{cursor:ew-resize}
 ._1gglglyw:active{transition:none}
 ._9h8h12zz:active{color:var(--ds-link-pressed,#1558bc)}

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -19,7 +19,6 @@ import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/preven
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import TooltipContainer from '@atlaskit/tooltip/TooltipContainer';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { contentInsetBlockStart } from '../constants';
 import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
 import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
@@ -43,8 +42,7 @@ const containerStyles = {
 };
 const grabAreaStyles = {
   root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _1oec6ebc _1lww188d _6fl41ytf _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
-  rootFinesse: "_vp7g1ihb _30l31ihb _9h8hq98m",
-  fullHeightSidebar: "_d0al11mm"
+  rootFinesse: "_vp7g1ihb _30l31ihb _9h8hq98m"
 };
 const lineStyles = {
   root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -145,7 +143,6 @@ const PortaledPanelSplitter = ({
   tooltipContent,
   shortcut
 }) => {
-  const isFhsEnabled = useIsFhsEnabled();
   const splitterRef = useRef(null);
   const labelId = useId();
   // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
@@ -436,7 +433,7 @@ const PortaledPanelSplitter = ({
     ref: splitterRef,
     "data-testid": testId,
     onDoubleClick: onDoubleClick,
-    className: ax([grabAreaStyles.root, fg('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
+    className: ax([grabAreaStyles.root, fg('platform-dst-tokens-finesse') && grabAreaStyles.rootFinesse])
   }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: rangeInputValue,

package/dist/es2019/ui/page-layout/panel-splitter/side-nav-panel-splitter.js

@@ -1,60 +1,10 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import invariant from 'tiny-invariant';
-import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { openLayerObserverSideNavNamespace, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavPanelSplitterId } from '../constants';
+import { sideNavPanelSplitterId } from '../constants';
 import { useToggleSideNav } from '../side-nav/use-toggle-side-nav';
 import { OnDoubleClickContext } from './on-double-click-context';
 import { PanelSplitter } from './panel-splitter';
 import { PanelSplitterContext } from './panel-splitter-context';
-
-/**
- * Namespaces to check for open layers that would interfere with the panel splitter.
- *
- * Placed outside the component for stability, as the list is used as an effect dependency.
- */
-const openLayerNamespacesToCheck = [
-// The side nav panel splitter is layered above the side nav, so needs to be disabled when there are open popups in the side nav.
-openLayerObserverSideNavNamespace,
-// The side nav panel splitter is layered above the top nav, so needs to be disabled when there are open popups in the top nav.
-openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];
-
-/**
- * Returns whether there are any open popups in the side nav or top nav
- */
-function useHasOpenPopupsInSideNavOrTopNav() {
-  const isFhsEnabled = useIsFhsEnabled();
-  const openLayerObserver = useOpenLayerObserver();
-  // Setting the initial state to false, as it is unlikely that there would be any open popups when the app starts.
-  const [hasOpenPopups, setHasOpenPopups] = useState(false);
-  useEffect(() => {
-    if (!openLayerObserver || !isFhsEnabled) {
-      return;
-    }
-    function updateState() {
-      if (!openLayerObserver) {
-        return;
-      }
-      const hasAnyOpenLayers = openLayerNamespacesToCheck.some(namespace => openLayerObserver.getCount({
-        namespace,
-        type: 'popup'
-      }) > 0);
-      setHasOpenPopups(hasAnyOpenLayers);
-    }
-
-    // Initial check. We do this _in case_ a popup is already open when the component mounts.
-    updateState();
-
-    // Subscribe to each namespace
-    const cleanups = openLayerNamespacesToCheck.map(namespace => openLayerObserver.onChange(updateState, {
-      namespace
-    }));
-    return function cleanupHook() {
-      cleanups.forEach(cleanup => cleanup());
-    };
-  }, [isFhsEnabled, openLayerObserver]);
-  return hasOpenPopups;
-}
 /**
  * _SideNavPanelSplitter_
  *
@@ -81,15 +31,6 @@ export const SideNavPanelSplitter = ({
   const toggleSideNav = useToggleSideNav({
     trigger: 'double-click'
   });
-  const isFhsEnabled = useIsFhsEnabled();
-
-  // The logic and state for disabling the panel splitter when there are open popups
-  // in the side nav or top nav is being placed here, instead of in `SideNav`, to prevent
-  // re-rendering the side nav anytime the number of open popups changes.
-  const hasOpenLayersInSideNavOrTopNav = useHasOpenPopupsInSideNavOrTopNav();
-  if (hasOpenLayersInSideNavOrTopNav && isFhsEnabled) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement(OnDoubleClickContext.Provider, {
     value: shouldCollapseOnDoubleClick ? toggleSideNav : undefined
   }, /*#__PURE__*/React.createElement(PanelSplitter, {

package/dist/es2019/ui/page-layout/ribbon.js

@@ -10,15 +10,8 @@ import { useLayoutId } from './use-layout-id';
 const localSlotLayersStatic = {
   chatPanelOverlay: 5,
   ribbon: 4,
-  // The side nav panel splitter is layered above the top nav when FHS is enabled.
-  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
-  sideNavPanelSplitterFHS: 4,
   topBar: 4,
   banner: 4,
-  // When FHS is enabled, the side nav is layered below the top nav,
-  // but above the panel
-  bannerFHS: 3,
-  topNavFHS: 3,
   sideNav: 2,
   panelSmallViewports: 1
 };

package/dist/es2019/ui/page-layout/side-nav/side-nav-content.js

@@ -1,10 +1,7 @@
 /* side-nav-content.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./side-nav-content.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef, useMemo, useRef } from 'react';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-
+import React, { forwardRef } from 'react';
 /**
  * The main content of the side nav, filling up the middle section. It acts as a scroll container.
  *
@@ -22,11 +19,8 @@ function _SideNavContent({
   children,
   testId
 }, forwardedRef) {
-  const isFhsEnabled = useIsFhsEnabled();
-  const internalRef = useRef(null);
-  const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
   return /*#__PURE__*/React.createElement("div", {
-    ref: isFhsEnabled ? mergedRef : forwardedRef,
+    ref: forwardedRef,
     "data-testid": testId,
     className: ax([styles.scrollContainer])
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

@@ -1,6 +1,5 @@
 ._191wglyw{border-inline-start:none}
 ._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
-._15yekb7n{--animation-direction:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -9,24 +8,18 @@
 ._1e0cglyw{display:none}
 ._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
-._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1osq{height:100%}
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._cjprp6j8{--enter-animation:var(--ds-sidenav-enter-left,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentLeft)}
 ._kqsw1if8{position:sticky}
-._kqsw1n9t{position:fixed}
-._t9ectl5p{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px))))}
-._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
 [dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
-[dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
+@media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._1lh81gzg{grid-area:main}._k1affm5y{animation:var(--exit-animation)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
-@media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@media (min-width:64rem){._cpcf1gzg._cpcf1gzg{grid-area:main}._6kttglyw._6kttglyw{border-inline-end:none}._w8v11bhr._w8v11bhr{background-color:var(--ds-surface-overlay,#fff)}._1jug130s._1jug130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo4so3{transition-delay:24ms}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

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

@@ -16,8 +16,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
-import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, mainMinimumWidthVar, openLayerObserverSideNavNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { convertResizeBoundToPixels } from '../panel-splitter/convert-resize-bound-to-pixels';
@@ -40,9 +39,6 @@ import { useSideNavVisibility } from './use-side-nav-visibility';
 import { useSideNavVisibilityCallbacks } from './use-side-nav-visibility-callbacks';
 import { useToggleSideNav } from './use-toggle-side-nav';
 const panelSplitterResizingVar = '--n_snvRsz';
-// Used to share the side nav width with the panel splitter, which is rendered outside the side nav element
-// but positioned to stay at its right edge.
-const sideNavClampedWidthVar = '--n_snvW';
 const fallbackMinWidth = '240px';
 function getPixelCustomProperty(element, propertyName, fallback) {
   const raw = getComputedStyle(element).getPropertyValue(propertyName).trim();
@@ -56,28 +52,16 @@ function getPixelCustomProperty(element, propertyName, fallback) {
  * Avoiding nesting the `@supports` at-rule inside of `@media` means Compiled can remove duplicate styles from the generated CSS.
  */
 const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-const panelSplitterPortalTargetStyles = {
-  root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
-};
 const styles = {
   root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw _89fi1b6c",
   chatPanelSizing: "_1bsbhc79",
   managedOverlay: "_cpcf1gzg _6kttglyw _w8v11bhr _1jug130s",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
-  animationRTLSupport: "_15yekb7n _65m41mrw",
-  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _17ly8iot _177m1a5r",
-  flyoutOpenFullHeightSidebar: "_hjoifnf5 _vgub1ku9 _s2eg1p9u",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _hjoifnf5 _vgub1mm8 _hh1u1p9u",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
-  hiddenDesktopOnly: "_dm25glyw",
-  animationBaseStyles: "_10t88iot _1vrh1a5r _xrrpfnf5",
-  expandAnimationMobile: "_1xq51ku9 _1nu51p9u",
-  collapseAnimationMobile: "_1lh81gzg _1xq51mm8 _aadi1p9u",
-  expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
-  collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
+  hiddenDesktopOnly: "_dm25glyw"
 };
 
 /**
@@ -99,8 +83,6 @@ const motionUpliftStyles = {
   collapseAnimationMobile: "_1lh81gzg _k1affm5y",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _4xci10ed _1tpv1mzy _sylc1a5r",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
-  flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
-  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
   expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo4so3",
   collapseAnimationDesktop: "_1sg81gzg _n2infm5y _17ly1wzp _hjoi1wsm _1wxo1cio"
 };
@@ -129,7 +111,6 @@ function SideNavInternal({
 }) {
   var _managedSizing$mode, _managedSizing$width, _sideNavState$lastTri;
   const isChatPanelLayoutEnabled = fg('platform-dst-chat-panel-layout');
-  const isFhsEnabled = useIsFhsEnabled();
   const id = useLayoutId({
     providedId
   });
@@ -258,7 +239,6 @@ function SideNavInternal({
   const clampedWidth = !isChatPanelLayoutEnabled ? `clamp(240px, ${inlineWidth}px, 50vw)` : managedSizing ? `${renderedWidth}px` : `clamp(${minWidth}, ${renderedWidth}px, ${configuredMaxWidth})`;
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const navRef = useRef(null);
-  const panelSplitterPortalTargetRef = useRef(null);
   const getResizeBounds = useCallback(() => {
     if (!isChatPanelLayoutEnabled) {
       return {
@@ -361,13 +341,6 @@ function SideNavInternal({
       }
     }
     function open() {
-      // Prevent the flyout from being opened if there are any open layers in the top nav start
-      if (openLayerObserver && openLayerObserver.getCount({
-        namespace: openLayerObserverTopNavStartNamespace,
-        type: 'popup'
-      }) > 0) {
-        return;
-      }
       const prevFlyoutState = flyoutStateRef.current;
       tryAbortPendingClose();
       flyoutStateRef.current = {
@@ -866,7 +839,7 @@ function SideNavInternal({
   const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-sidenav');
 
   // This is only used for the regular expand and collapse animations, not the flyout animations.
-  const shouldShowSidebarToggleAnimation = (isMotionUpliftEnabled || isFhsEnabled) &&
+  const shouldShowSidebarToggleAnimation = isMotionUpliftEnabled &&
   // We do not apply the animation styles on the initial render, as the `@starting-style` rule will cause the sidebar to
   // slide in initially.
   hasExpandedStateChanged &&
@@ -900,7 +873,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, !isMotionUpliftEnabled && isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && !isMotionUpliftEnabled && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && !isMotionUpliftEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, isChatPanelLayoutEnabled && styles.chatPanelSizing, isChatPanelLayoutEnabled && (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isMotionUpliftEnabled && motionUpliftStyles.animationRTLSupport, shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && isMotionUpliftEnabled && motionUpliftStyles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && isMotionUpliftEnabled && motionUpliftStyles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isMotionUpliftEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && isMotionUpliftEnabled && motionUpliftStyles.flyoutAnimateClosed, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isMotionUpliftEnabled && styles.flyoutAnimateClosed])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",
@@ -919,7 +892,6 @@ function SideNavInternal({
   , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
     panelId: sideNavPanelSplitterId,
     panelRef: navRef,
-    portalRef: isFhsEnabled ? panelSplitterPortalTargetRef : undefined,
     panelWidth: renderedWidth,
     onCompleteResize: onCompleteResize,
     onResizeStartInternal: isChatPanelLayoutEnabled && managedSizing ? onResizeStartInternal : undefined,
@@ -932,18 +904,7 @@ function SideNavInternal({
     shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.flexContainer])
-  }, children))), isFhsEnabled && /*#__PURE__*/React.createElement("div", {
-    ref: panelSplitterPortalTargetRef,
-    "data-layout-slot": true,
-    style: {
-      // We need to use an inline style here to share the side nav width to position the panel splitter.
-      // We can't use the existing --n_sNvlw variable (sideNavLiveWidthVar) because it is set to 0 when the side nav is collapsed on desktop,
-      // however the panel splitter is still visible and usable on small viewports until 48rem.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      [sideNavClampedWidthVar]: clampedWidth
-    },
-    className: ax([panelSplitterPortalTargetStyles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop])
-  }));
+  }, children))));
 }
 
 /**

package/dist/es2019/ui/page-layout/top-nav/top-nav-end.compiled.css

@@ -5,6 +5,5 @@
 ._1e0cglyw{display:none}
 ._1ul9zwfg{min-width:2pc}
 ._4cvr1h6o{align-items:center}
-._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 @media (min-width:48rem){._181n1txw{display:flex}._1d2y1ris{min-width:max-content}}
 @media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._ndwch9n0{justify-self:end}}

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

@@ -11,14 +11,12 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Popup } from '@atlaskit/popup/popup';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled/use-media-query';
 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/icon-button';
 import { openLayerObserverTopNavEndNamespace } from '../constants';
 const containerStyles = {
   root: "_yyhy11wp _1e0c1txw _1bahh9n0 _1ul9zwfg _1d2y1ris _glte1ris _15rip2n4 _1gs5usvi _ndwch9n0",
-  withPersistentItems: "_zulp1b66 _4cvr1h6o",
-  fullHeightSidebar: "_y4tiutpp"
+  withPersistentItems: "_zulp1b66 _4cvr1h6o"
 };
 const listStyles = {
   root: "_zulp1b66 _4cvr1h6o _1e0c1txw",
@@ -41,7 +39,6 @@ export function TopNavEnd({
   showMoreButtonLabel = 'Show more'
 }) {
   const hasPersistentItems = fg('platform-dst-chat-panel-layout') && persistentItems != null;
-  const isFhsEnabled = useIsFhsEnabled();
   const [isOpen, setIsOpen] = useState(false);
   // Always setting to `false` for the initial render (will flip in an effect for mobile)
   const [isMobile, setIsMobile] = useState(false);
@@ -66,7 +63,7 @@ export function TopNavEnd({
   }, children);
   const content = /*#__PURE__*/React.createElement("nav", {
     "aria-label": label,
-    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems, isFhsEnabled && containerStyles.fullHeightSidebar])
+    className: ax([containerStyles.root, hasPersistentItems && containerStyles.withPersistentItems])
   }, isMobile ? /*#__PURE__*/React.createElement(Popup, {
     isOpen: isOpen,
     onClose: () => setIsOpen(false)

package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css

@@ -1,15 +1,5 @@
 ._zulp1b66{gap:var(--ds-space-050,4px)}
-._zulp1kw7{gap:inherit}
-._yyhykb7n{grid-column:1}._15yekb7n{--animation-direction:1}
-._1e0c1kw7{display:inherit}
-._1e0c1txw{display:flex}
-._1ul9idpf{min-width:0}
+._yyhykb7n{grid-column:1}._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
-._ahbq1wug{margin-inline-start:auto}
-._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
-._vchhusvi{box-sizing:border-box}
-[dir=rtl] ._65m41mrw{--animation-direction:-1}
-@media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
-@media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap319ly{background-color:revert}._1m5lglyw:after{display:none}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
+@media (min-width:64rem){._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}}