@atlaskit/navigation-system 0.166.0

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

@@ -0,0 +1,158 @@
+import { themedLogoIcon, themedLogoText } from '../nav-logo';
+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 { themedSearchBorder, themedSearchBorderFocused } from './search';
+
+/**
+ * Expects colors to be passed as `RGB` objects.
+ *
+ * Allows `string` for hex strings only, for backwards compatibility.
+ * This will likely be removed in the future.
+ *
+ * Allows `null` for ergonomic reasons, because our color parsing utilities can return
+ * `null` if they cannot parse a color string.
+ */
+
+function toRGBString({
+  r,
+  g,
+  b
+}) {
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function toRGBAString({
+  r,
+  g,
+  b,
+  a
+}) {
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+// Using raw hex codes because custom colors break out of the tokens model
+// We will need to invert the colors based on backgroundColor independently of the app's color mode (dark/light)
+// 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
+  },
+  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
+  }
+};
+const logoStyles = {
+  light: {
+    [themedLogoIcon]: palette.DarkNeutral0,
+    [themedLogoText]: palette.DarkNeutral0
+  },
+  dark: {
+    [themedLogoIcon]: palette.Neutral0,
+    [themedLogoText]: palette.Neutral0
+  }
+};
+
+/**
+ * Provides a `style` prop value for the `TopNav` that defines required CSS variables.
+ *
+ * If a provided `backgroundColor` or `highlightColor` cannot be parsed,
+ * then `null` will be returned.
+ */
+export function getCustomThemeStyles({
+  backgroundColor,
+  highlightColor
+}) {
+  const backgroundRgb = typeof backgroundColor === 'string' ? parseHex(backgroundColor) : backgroundColor;
+  const highlightRgb = typeof highlightColor === 'string' ? parseHex(highlightColor) : highlightColor;
+  if (!backgroundRgb || !highlightRgb) {
+    return null;
+  }
+  const textColor = getTextColor(backgroundRgb);
+  const colorMode = getColorMode(backgroundRgb);
+  const highlightTextColor = getTextColor(highlightRgb);
+  return {
+    backgroundColor: toRGBString(backgroundRgb),
+    color: textColor.hex,
+    ...buttonStyles[colorMode],
+    ...logoStyles[colorMode],
+    ...getSelectedStyles({
+      backgroundColor: backgroundRgb,
+      colorMode
+    }),
+    /**
+     * Search colors are the same as Nav 3
+     */
+    [themedSearchBorder]: toRGBAString({
+      ...textColor.rgb,
+      a: 0.5
+    }),
+    [themedSearchBorderFocused]: toRGBAString({
+      ...highlightRgb,
+      a: 0.8
+    }),
+    /**
+     * Primary button colors are the same as Nav 3,
+     * except the text color which can sometimes differ because we're
+     * now following WCAG
+     */
+    [themedButtonPrimaryBackground]: toRGBString(highlightRgb),
+    [themedButtonPrimaryBackgroundHovered]: toRGBAString({
+      ...highlightRgb,
+      a: 0.8
+    }),
+    [themedButtonPrimaryBackgroundPressed]: toRGBAString({
+      ...highlightRgb,
+      a: 0.65
+    }),
+    [themedButtonPrimaryText]: highlightTextColor.hex
+  };
+}
+
+/**
+ * Precomputed RGBA values for the selected backgrounds
+ */
+const selectedBackgroundRGBA = {
+  light: paletteRgba.Neutral300A,
+  dark: paletteRgba.DarkNeutral300A
+};
+function getSelectedStyles({
+  backgroundColor,
+  colorMode
+}) {
+  /**
+   * The background color of the selected button in its default state.
+   *
+   * We are referring to this as a foreground color because it is semi-transparent,
+   * so is not the actual color displayed when the button is on top of a background color.
+   */
+  const foregroundColor = selectedBackgroundRGBA[colorMode];
+
+  /**
+   * The blended color seen when the selected background is over the top bar.
+   */
+  const blendedBackground = simpleAlphaComposite({
+    background: backgroundColor,
+    foreground: foregroundColor
+  });
+  return {
+    [themedButtonSelectedText]: getTextColor(blendedBackground).hex,
+    // Border colors are chosen to match the text, while remaining in the palette
+    [themedButtonSelectedBorder]: isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100
+  };
+}

package/dist/es2019/ui/top-nav-items/themed/has-custom-theme-context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context to let components know if a custom theme is being applied.
+ */
+export const HasCustomThemeContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Returns whether a custom theme is being applied.
+ */
+export function useHasCustomTheme() {
+  return useContext(HasCustomThemeContext);
+}

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

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import AkButton, { IconButton as AkIconButton, LinkButton as AkLinkButton, LinkIconButton as AkLinkIconButton } from '@atlaskit/button/new';
+import { ThemedButton, ThemedIconButton, ThemedLinkButton, ThemedLinkIconButton } from './button';
+import { useHasCustomTheme } from './has-custom-theme-context';
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedIconButton : AkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+const LinkIconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedLinkIconButton : AkLinkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedButton : AkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const hasCustomTheme = useHasCustomTheme();
+  const Component = hasCustomTheme ? ThemedLinkButton : AkLinkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+export { IconButton, Button, LinkIconButton, LinkButton };

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

@@ -0,0 +1,62 @@
+/**
+ * Copied from the brand refresh palette.
+ *
+ * Ideally we'd codegen this but the brand refresh palette isn't exposed
+ * through public API and we shouldn't use the private API of another package.
+ */
+export const palette = {
+  'DarkNeutral-100': '#111213',
+  'DarkNeutral-100A': '#01040475',
+  DarkNeutral0: '#18191A',
+  DarkNeutral100: '#1F1F21',
+  DarkNeutral100A: '#BDBDBD0A',
+  DarkNeutral200: '#242528',
+  DarkNeutral200A: '#CECED912',
+  DarkNeutral250: '#2B2C2F',
+  DarkNeutral250A: '#D9DAE71A',
+  DarkNeutral300: '#303134',
+  DarkNeutral300A: '#E3E4F21F',
+  DarkNeutral350: '#3D3F43',
+  DarkNeutral350A: '#E8EDFD2E',
+  DarkNeutral400: '#4B4D51',
+  DarkNeutral400A: '#E5E9F640',
+  DarkNeutral500: '#63666B',
+  DarkNeutral500A: '#E9F0FB5C',
+  DarkNeutral600: '#7E8188',
+  DarkNeutral700: '#96999E',
+  DarkNeutral800: '#A9ABAF',
+  DarkNeutral900: '#BFC1C4',
+  DarkNeutral1000: '#CECFD2',
+  DarkNeutral1100: '#E2E3E4',
+  Neutral0: '#FFFFFF',
+  Neutral100: '#F8F8F8',
+  Neutral100A: '#17171708',
+  Neutral200: '#F0F1F2',
+  Neutral200A: '#0515240F',
+  Neutral300: '#DDDEE1',
+  Neutral300A: '#0B120E24',
+  Neutral400: '#B7B9BE',
+  Neutral400A: '#080F214A',
+  Neutral500: '#8C8F97',
+  Neutral500A: '#050C1F75',
+  Neutral600: '#7D818A',
+  Neutral700: '#6B6E76',
+  Neutral800: '#505258',
+  Neutral900: '#3B3D42',
+  Neutral1000: '#292A2E',
+  Neutral1100: '#1E1F21'
+};
+export const paletteRgba = {
+  DarkNeutral300A: {
+    r: 0xe3,
+    g: 0xe4,
+    b: 0xf2,
+    a: 0x1f / 255
+  },
+  Neutral300A: {
+    r: 0x0b,
+    g: 0x12,
+    b: 0x0e,
+    a: 0x24 / 255
+  }
+};

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

@@ -0,0 +1,64 @@
+import { themedButtonBackgroundHovered } from './button';
+import { useHasCustomTheme } from './has-custom-theme-context';
+export const themedSearchBorder = '--ds-top-bar-search-border';
+export const themedSearchBorderFocused = '--ds-top-bar-search-border-focused';
+
+/**
+ * Theme object intended for use with Search Platform components while transitioning to nav4.
+ *
+ * This is for backwards compatibility with the legacy theming API that was designed for nav3.
+ *
+ * As nav4 matures we will ideally evolve the theming solution inside Search Platform,
+ * at which point this legacy theme object will not be needed.
+ */
+const legacySearchTheme = {
+  default: {
+    backgroundColor: 'transparent',
+    color: 'currentColor',
+    borderColor: `var(${themedSearchBorder})`
+  },
+  focus: {
+    /**
+     * When expanded the input ignores the custom theme,
+     * except for its border which is derived from the highlight color.
+     */
+    color: "var(--ds-text, #172B4D)",
+    backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)",
+    borderColor: `var(${themedSearchBorderFocused})`,
+    boxShadow: `inset 0px 0px 0px 1px var(${themedSearchBorderFocused})`
+  },
+  hover: {
+    /**
+     * This is not actually used for the search bar input (at least by the Search Platform components).
+     *
+     * Instead it's used as the hover background color for a close button when on mobile.
+     */
+    backgroundColor: `var(${themedButtonBackgroundHovered})`
+  }
+};
+
+/**
+ * We are just using the inferred type instead of declaring it as `SearchCSS` (the type `@atlassian/search-dialog` expects)
+ *
+ * Importing the type from `@atlassian/search-dialog` means we have to declare it as a full dependency,
+ * rather than a dev dependency. Even though it's type-only, this is how local consumption is setup.
+ *
+ * This was failing typechecking in Post Office, presumably due to different versions of `@emotion/styled`.
+ * It is also a code smell having an unnecessary dependency.
+ *
+ * We still have indirect type safety from our example + product integrations, so a PR that breaks the types won't be able to merge.
+ */
+
+/**
+ * Provides the `theme` value for Search Platform components.
+ *
+ * This may be a `SearchCSS` object or undefined,
+ * depending on if the top bar is using custom theming.
+ */
+export function useLegacySearchTheme() {
+  const hasCustomTheme = useHasCustomTheme();
+  if (hasCustomTheme) {
+    return legacySearchTheme;
+  }
+  return undefined;
+}

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

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { getCustomThemeStyles } from './get-custom-theme-styles';
+/**
+ * Processes the provided theme and returns theme styles if possible.
+ */
+export function useCustomTheme(theme) {
+  const value = useMemo(() => {
+    if (!(theme !== null && theme !== void 0 && theme.backgroundColor) || !(theme !== null && theme !== void 0 && theme.highlightColor)) {
+      return {
+        isEnabled: false
+      };
+    }
+
+    /**
+     * Re-creating the `theme` object from it's pieces.
+     *
+     * _Technically_ we could just use `theme`, but that would involve an eslint opt out
+     * as we would be leveraging a value (`theme`) not in the dependency array.
+     *
+     * The current approach is the most correct™️ and avoids foot guns.
+     * We are only using values in the effect that are defined in the dependency array 🙌
+     */
+    const value = {
+      backgroundColor: theme.backgroundColor,
+      highlightColor: theme.highlightColor
+    };
+    const style = getCustomThemeStyles(value);
+    if (!style) {
+      // Either the `backgroundColor` or `highlightColor` could not be parsed
+      return {
+        isEnabled: false
+      };
+    }
+    return {
+      isEnabled: true,
+      style
+    };
+  },
+  // Using individual properties as keys for improved memoization.
+  // Now this effect will only run if the values change rather than
+  // the reference to the object (which might be new on every call)
+  [theme === null || theme === void 0 ? void 0 : theme.backgroundColor, theme === null || theme === void 0 ? void 0 : theme.highlightColor]);
+  return value;
+}

package/dist/esm/components/badge-container.compiled.css

@@ -0,0 +1,7 @@
+._152tr5cr{inset-block-start:var(--ds-space-negative-050,-4px)}
+._1e02utpp{inset-inline-start:var(--ds-space-150,9pt)}
+._1e0c1txw{display:flex}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._o5721q9c{white-space:nowrap}

package/dist/esm/components/badge-container.js

@@ -0,0 +1,29 @@
+/* badge-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./badge-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var styles = {
+  root: "_kqswh2mm _1e0c1txw",
+  badgeContainer: "_kqswstnw _o5721q9c _152tr5cr _1e02utpp _lcxvglyw"
+};
+/**
+ * __Badge container__
+ *
+ * Adds a badge to the top right corner of the child element.
+ * Example of usage is showing the number of notifications in the top navigation bar.
+ */
+export var BadgeContainer = function BadgeContainer(_ref) {
+  var children = _ref.children,
+    badgeId = _ref.id,
+    Badge = _ref.badge,
+    _ref$isListItem = _ref.isListItem,
+    isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem;
+  return /*#__PURE__*/React.createElement("div", {
+    role: isListItem ? 'listitem' : undefined,
+    className: ax([styles.root])
+  }, children, /*#__PURE__*/React.createElement("div", {
+    id: badgeId,
+    "aria-hidden": true,
+    className: ax([styles.badgeContainer])
+  }, /*#__PURE__*/React.createElement(Badge, null)));
+};

package/dist/esm/components/forward-ref-with-generic.js

@@ -0,0 +1,6 @@
+import { forwardRef } from 'react';
+
+/**
+ * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
+ */
+export var forwardRefWithGeneric = forwardRef;

package/dist/esm/components/list-item.js

@@ -0,0 +1,22 @@
+/* list-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _ListItem(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "listitem",
+    ref: ref,
+    className: xcss,
+    "data-testid": testId
+  }, children);
+}
+
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export var ListItem = /*#__PURE__*/forwardRef(_ListItem);

package/dist/esm/components/list.js

@@ -0,0 +1,32 @@
+/* list.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+function _List(_ref, forwardedRef) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss;
+  return (
+    /*#__PURE__*/
+    /**
+     * We are using `role="list"` instead of a `ul` element to enable more flexible
+     * composition. By using ARIA roles we can validly have elements between a list
+     * and list items, as long as those in-between elements have no semantics.
+     */
+    React.createElement("div", {
+      role: "list",
+      ref: forwardedRef,
+      className: xcss,
+      "data-testid": testId
+    }, children)
+  );
+}
+
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+export var List = /*#__PURE__*/forwardRef(_List);

package/dist/esm/components/skip-links/skip-link.compiled.css

@@ -0,0 +1 @@
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}

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

@@ -0,0 +1,113 @@
+/* skip-link.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./skip-link.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { bind } from 'bind-event-listener';
+import { Anchor } from '@atlaskit/primitives';
+var styles = {
+  skipLinkListItem: "_1pfhze3t"
+};
+
+/**
+ * Used for moving focus to the corresponding slot or custom target after clicking on a skip link.
+ */
+function focusElement(element) {
+  /**
+   * Elements without an explicit `tabindex` attribute are not guaranteed to be focusable:
+   * https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex
+   *
+   * Our slots are not interactive, so this is required.
+   *
+   * In the future we may want to check if there is an existing `tabindex` attribute,
+   * as custom skip linked elements might already have one.
+   */
+  element.setAttribute('tabindex', '-1');
+
+  /**
+   * Cleanup the `tabindex` attribute we set when the slot or custom target loses focus.
+   *
+   * This is preferable to always having `tabindex="-1"` because always applying the tab index can:
+   *
+   * - mess with click events
+   * - potentially cause a focus ring to be always visible
+   */
+  bind(element, {
+    type: 'blur',
+    listener: function listener() {
+      element.removeAttribute('tabindex');
+    },
+    options: {
+      // Using a one-time listener so it cleans itself up
+      once: true
+    }
+  });
+
+  /**
+   * Move focus to the slot or custom target.
+   *
+   * Calling `.focus()` will also scroll the element into view:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+   */
+  element.focus({
+    // Forces the focus ring to appear after moving focus to the slot
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+    // @ts-expect-error - new and not in types yet
+    focusVisible: true
+  });
+}
+
+/**
+ * A link that moves current tab position to a different element
+ *
+ * This component is rendered internally and is not exported publicly.
+ */
+export var SkipLink = function SkipLink(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    onBeforeNavigate = _ref.onBeforeNavigate;
+  var href = "#".concat(id);
+  var onClick = useCallback(function (event) {
+    event.preventDefault();
+
+    // Intentionally not using `document.querySelector` because many valid IDs are not valid selectors.
+    var target = document.getElementById(id);
+    if (!target) {
+      return;
+    }
+
+    /**
+     * Internal slots can attach an `onBeforeNavigate` callback.
+     *
+     * Side nav uses this to ensure it is expanded.
+     */
+    onBeforeNavigate === null || onBeforeNavigate === void 0 || onBeforeNavigate();
+    focusElement(target);
+
+    /**
+     * We should look into removing this, or only calling it in specific cases.
+     *
+     * It means if the skip link element is in the window scroll container
+     * then it might not get scrolled into view properly.
+     *
+     * This is not an issue for the default slots on desktop, but could break custom skip links or
+     * even `Aside` on mobile.
+     *
+     * Keeping existing behavior for now because resetting the window scroll is actually good for some cases.
+     * E.g. jumping to main / aside it makes sense to look at the start of the content.
+     */
+    window.scrollTo(0, 0);
+  }, [id, onBeforeNavigate]);
+  return /*#__PURE__*/React.createElement("li", {
+    className: ax([styles.skipLinkListItem])
+  }, /*#__PURE__*/React.createElement(Anchor
+  /**
+   * It looks like Safari handles link clicks during `pointerdown` unless it has an explicit `tabIndex={0}` :/
+   *
+   * Adding this explicitly makes the behavior consistent between browsers and lets us `event.preventDefault()`
+   * in the `onClick` handler.
+   */, {
+    tabIndex: 0,
+    href: href,
+    onClick: onClick
+  }, children));
+};

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

@@ -0,0 +1,21 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._152tv47k{inset-block-start:var(--ds-space-250,20px)}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._1e02v47k{inset-inline-start:var(--ds-space-250,20px)}
+._1e0c1txw{display:flex}
+._1pby1mrw{z-index:-1}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._1x8w11lx{list-style-position:outside}
+._2lx21bp4{flex-direction:column}
+._2mzuglyw{list-style-type:none}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._kqsw1n9t{position:fixed}
+._lcxvglyw{pointer-events:none}
+._tzy4idpf{opacity:0}
+._18eu1wug:focus-within{pointer-events:auto}
+._1digjh3g:focus-within{z-index:calc(infinity)}
+._1mygkb7n:focus-within{opacity:1}