@dynatrace/strato-components 3.7.0 → 3.8.0

package/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-7-0 {
+._hw98ku0-3-8-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-7-0 {
+._hw98ku1-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-7-0 {
+._hw98ku2-3-8-0 {
   overflow: hidden;
 }
-._hw98ku3-3-7-0 {
+._hw98ku3-3-8-0 {
   overflow: visible;
 }
-._hw98ku4-3-7-0 {
+._hw98ku4-3-8-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-7-0 {
+._hw98ku5-3-8-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-7-0 {
+._hw98ku6-3-8-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-7-0 {
+._hw98ku7-3-8-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-7-0 {
+._hw98ku8-3-8-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -26,8 +26,8 @@ __export(Breadcrumbs_css_exports, {
 module.exports = __toCommonJS(Breadcrumbs_css_exports);
 var import_Breadcrumbs_css_ts_vanilla = require("./Breadcrumbs.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var breadcrumbsContainerCSS = "_hw98ku0-3-7-0";
-var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-7-0", variantClassNames: { disabled: { true: "_hw98ku6-3-7-0" }, isLastItem: { true: "_hw98ku7-3-7-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-7-0";
-var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-7-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-7-0", false: "_hw98ku3-3-7-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-7-0";
+var breadcrumbsContainerCSS = "_hw98ku0-3-8-0";
+var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-8-0", variantClassNames: { disabled: { true: "_hw98ku6-3-8-0" }, isLastItem: { true: "_hw98ku7-3-8-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-8-0";
+var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-8-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-8-0", false: "_hw98ku3-3-8-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-8-0";

package/navigation/menu/Content.js

@@ -33,6 +33,7 @@ module.exports = __toCommonJS(Content_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
+var import_MenuSubLevelContext = require("./contexts/MenuSubLevelContext.js");
 var import_useMenuContext = require("./hooks/useMenuContext.js");
 var styles = __toESM(require("./Menu.sty.js"));
 var import_useOverlayStacking = require("../../core/hooks/useOverlayStacking.js");
@@ -89,7 +90,7 @@ const Content = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
       collisionBoundary,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSubLevelContext.MenuSubLevelProvider, { children })
     }
   ) });
 });

package/navigation/menu/Item.js

@@ -72,6 +72,13 @@ const Item = /* @__PURE__ */ (0, import_react.forwardRef)(
     });
     const isTooltipHovered = (0, import_react.useRef)(false);
     const { isItemHovered, hoverProps } = (0, import_useIsMenuItemHovered.useIsMenuItemHovered)();
+    (0, import_react.useEffect)(() => {
+      if (!isOpen) {
+        return;
+      }
+      window.addEventListener("scroll", closeTooltip, { capture: true });
+      return () => window.removeEventListener("scroll", closeTooltip, { capture: true });
+    }, [isOpen, closeTooltip]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_dropdown_menu.Item,

package/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-7-0 {
+._1m01arl1-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   padding: var(--dt-spacings-size-8, 8px);
   max-width: 500px;
 }
-._1m01arl2-3-7-0 {
+._1m01arl2-3-8-0 {
   box-sizing: border-box;
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -18,13 +18,13 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   text-align: left;
 }
-._1m01arl0-3-7-0 ._1m01arl2-3-7-0 {
+._1m01arl0-3-8-0 ._1m01arl2-3-8-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._1m01arl3-3-7-0 {
+._1m01arl3-3-8-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -34,13 +34,22 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-7-0 ._1m01arl4-3-7-0:not(:last-child) {
+._1m01arl4-3-8-0 {
+  background: var(--dt-colors-background-surface-default, #fff);
+  border-radius: var(--dt-borders-radius-surface-subdued, 9px);
+  border-left: 2px solid var(--dt-colors-border-neutral-default, #dadbe4);
+  margin-left: var(--dt-spacings-size-12, 12px);
+  margin-top: var(--dt-spacings-size-2, 2px);
+  margin-bottom: var(--dt-spacings-size-2, 2px);
+  overflow-y: auto;
+}
+._1m01arl3-3-8-0 ._1m01arl5-3-8-0:not(:last-child) {
   width: 100%;
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-7-0 {
+._1m01arl6-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +65,49 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-7-0 {
+._1m01arl7-3-8-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-7-0:hover, ._1m01arl7-3-7-0[data-state="open"] {
+._1m01arl8-3-8-0:hover, ._1m01arl8-3-8-0[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-7-0:focus {
+._1m01arl8-3-8-0:focus {
   outline: none;
 }
-._1m01arl7-3-7-0:active {
+._1m01arl8-3-8-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-7-0 {
+._1m01arl9-3-8-0 {
   width: 100%;
 }
-._1m01arl5-3-7-0 > ._1m01arl8-3-7-0:first-child {
+._1m01arl6-3-8-0 > ._1m01arl9-3-8-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-7-0 > ._1m01arl8-3-7-0:last-child:not(:has(svg:last-child)) {
+._1m01arl6-3-8-0 > ._1m01arl9-3-8-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-7-0 {
+._1m01arla-3-8-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-7-0:first-child {
+._1m01arla-3-8-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
+}
+@media (max-width: 640px) {
+  ._1m01arl3-3-8-0 {
+    max-width: var(--radix-dropdown-menu-content-available-width);
+  }
+  ._1m01arl9-3-8-0 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  ._1m01arla-3-8-0 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

package/navigation/menu/Menu.sty.d.ts

@@ -2,6 +2,7 @@ export declare const tooltip: string;
 export declare const tooltipWrapper: string;
 export declare const label: string;
 export declare const content: string;
+export declare const subContentMobile: string;
 export declare const group: string;
 export declare const item: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {

package/navigation/menu/Menu.sty.js

@@ -23,17 +23,19 @@ __export(Menu_css_exports, {
   itemChildren: () => itemChildren,
   label: () => label,
   subChildren: () => subChildren,
+  subContentMobile: () => subContentMobile,
   tooltip: () => tooltip,
   tooltipWrapper: () => tooltipWrapper
 });
 module.exports = __toCommonJS(Menu_css_exports);
 var import_Menu_css_ts_vanilla = require("./Menu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var content = "_1m01arl3-3-7-0";
-var group = "_1m01arl4-3-7-0";
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl5-3-7-0", variantClassNames: { disabled: { true: "_1m01arl6-3-7-0", false: "_1m01arl7-3-7-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-7-0";
-var label = "_1m01arl2-3-7-0";
-var subChildren = "_1m01arl9-3-7-0";
-var tooltip = "_1m01arl0-3-7-0";
-var tooltipWrapper = "_1m01arl1-3-7-0";
+var content = "_1m01arl3-3-8-0";
+var group = "_1m01arl5-3-8-0";
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl6-3-8-0", variantClassNames: { disabled: { true: "_1m01arl7-3-8-0", false: "_1m01arl8-3-8-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl9-3-8-0";
+var label = "_1m01arl2-3-8-0";
+var subChildren = "_1m01arla-3-8-0";
+var subContentMobile = "_1m01arl4-3-8-0";
+var tooltip = "_1m01arl0-3-8-0";
+var tooltipWrapper = "_1m01arl1-3-8-0";

package/navigation/menu/Sub.js

@@ -25,6 +25,7 @@ var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
 var import_react_is = require("react-is");
 var import_MenuSubContext = require("./contexts/MenuSubContext.js");
+var import_MenuSubLevelContext = require("./contexts/MenuSubLevelContext.js");
 var import_useMenuAutoClose = require("./hooks/useMenuAutoClose.js");
 var import_SubContent = require("./SubContent.js");
 var import_SubTrigger = require("./SubTrigger.js");
@@ -78,6 +79,21 @@ const Sub = (props) => {
     value,
     onChange
   });
+  const coordinator = (0, import_MenuSubLevelContext.useMenuSubLevelCoordinator)();
+  const subId = (0, import_react.useRef)(/* @__PURE__ */ Symbol()).current;
+  const updateOpenRef = (0, import_react.useRef)(updateOpen);
+  updateOpenRef.current = updateOpen;
+  (0, import_react.useEffect)(() => {
+    coordinator?.register(subId, () => updateOpenRef.current(false));
+    return () => {
+      coordinator?.unregister(subId);
+    };
+  }, [coordinator, subId]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (open) {
+      coordinator?.notifyOpened(subId);
+    }
+  }, [open, coordinator, subId]);
   const slots = (0, import_react.useMemo)(
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]

package/navigation/menu/SubContent.js

@@ -34,8 +34,11 @@ module.exports = __toCommonJS(SubContent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
+var import_breakpoints_js = __toESM(require("@dynatrace/strato-design-tokens/breakpoints-js"));
+var import_MenuSubLevelContext = require("./contexts/MenuSubLevelContext.js");
 var styles = __toESM(require("./Menu.sty.js"));
 var import_useOverlayStacking = require("../../core/hooks/useOverlayStacking.js");
+var import_useBreakpoint = require("../../layouts/hooks/useBreakpoint.js");
 const SUB_CONTENT_SIDE_OFFSET = 0;
 const ALIGN_OFFSET = -4;
 const SubContent = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -49,6 +52,10 @@ const SubContent = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
     [_onTabKeyPressed]
   );
   const { style } = (0, import_useOverlayStacking.useOverlayStacking)(void 0, "overlay");
+  const isMobile = (0, import_useBreakpoint.useBreakpoint)(`(max-width: ${import_breakpoints_js.default.Max.Mobile}px)`);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: forwardedRef, className: styles.subContentMobile, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSubLevelContext.MenuSubLevelProvider, { children }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_dropdown_menu.SubContent,
     {
@@ -59,7 +66,7 @@ const SubContent = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
       className: styles.content,
       style: { zIndex: style.zIndex },
       collisionPadding: 2,
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MenuSubLevelContext.MenuSubLevelProvider, { children })
     }
   ) });
 });

package/navigation/menu/SubTrigger.js

@@ -34,13 +34,16 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_breakpoints_js = __toESM(require("@dynatrace/strato-design-tokens/breakpoints-js"));
 var import_strato_icons = require("@dynatrace/strato-icons");
+var import_MenuSubContext = require("./contexts/MenuSubContext.js");
 var import_useIsMenuItemHovered = require("./hooks/useIsMenuItemHovered.js");
 var import_item_slots = require("./item-slots.js");
 var styles = __toESM(require("./Menu.sty.js"));
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
+var import_useBreakpoint = require("../../layouts/hooks/useBreakpoint.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
 const SubTrigger = /* @__PURE__ */ (0, import_react.forwardRef)(
   ({
@@ -53,6 +56,8 @@ const SubTrigger = /* @__PURE__ */ (0, import_react.forwardRef)(
     ...remainingProps
   }, forwardedRef) => {
     const slots = (0, import_item_slots.getSubTriggerSlots)(children);
+    const { isOpen, setIsOpen } = (0, import_react.useContext)(import_MenuSubContext.MenuSubContext);
+    const isMobile = (0, import_useBreakpoint.useBreakpoint)(`(max-width: ${import_breakpoints_js.default.Max.Mobile}px)`);
     const { focusProps, focusClassName } = (0, import_useFocusRing.useFocusRing)({
       disabled
     });
@@ -75,11 +80,18 @@ const SubTrigger = /* @__PURE__ */ (0, import_react.forwardRef)(
         "aria-haspopup": true,
         role: "menuitem",
         asChild: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { justifyContent: "space-between", children: [
-          slots.prefix,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.subChildren, children: slots.freeform }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ChevronRightSmallIcon, {})
-        ] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_Flex.Flex,
+          {
+            justifyContent: "space-between",
+            onClick: isMobile && isOpen ? () => setIsOpen(false) : void 0,
+            children: [
+              slots.prefix,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.subChildren, children: slots.freeform }),
+              isMobile && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ChevronDownSmallIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ChevronRightSmallIcon, {})
+            ]
+          }
+        )
       }
     );
   }

package/navigation/menu/contexts/MenuSubLevelContext.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+type SubLevelCoordinator = {
+    register: (id: symbol, close: () => void) => void;
+    unregister: (id: symbol) => void;
+    notifyOpened: (id: symbol) => void;
+};
+export declare function useMenuSubLevelCoordinator(): SubLevelCoordinator | null;
+export declare function MenuSubLevelProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/navigation/menu/contexts/MenuSubLevelContext.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MenuSubLevelContext_exports = {};
+__export(MenuSubLevelContext_exports, {
+  MenuSubLevelProvider: () => MenuSubLevelProvider,
+  useMenuSubLevelCoordinator: () => useMenuSubLevelCoordinator
+});
+module.exports = __toCommonJS(MenuSubLevelContext_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const MenuSubLevelContext = (0, import_react.createContext)(null);
+function useMenuSubLevelCoordinator() {
+  return (0, import_react.useContext)(MenuSubLevelContext);
+}
+function MenuSubLevelProvider({ children }) {
+  const subsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const coordinator = (0, import_react.useMemo)(
+    () => ({
+      register: (id, close) => {
+        subsRef.current.set(id, close);
+      },
+      unregister: (id) => {
+        subsRef.current.delete(id);
+      },
+      notifyOpened: (id) => {
+        subsRef.current.forEach((close, subId) => {
+          if (subId !== id) {
+            close();
+          }
+        });
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubLevelContext.Provider, { value: coordinator, children });
+}

package/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-7-0 {
+._39c1kf0-3-8-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-7-0::after {
+._39c1kf0-3-8-0::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-7-0 {
+._39c1kf1-3-8-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-7-0 {
+._39c1kf2-3-8-0 {
   cursor: pointer;
 }
-._39c1kf2-3-7-0:hover {
+._39c1kf2-3-8-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-7-0:active {
+._39c1kf2-3-8-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-7-0 {
+._39c1kf5-3-8-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-7-0:hover {
+._39c1kf5-3-8-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-7-0:active {
+._39c1kf5-3-8-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-7-0::after {
+._39c1kf5-3-8-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-7-0 {
+._39c1kf6-3-8-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-7-0 {
+._39c1kf7-3-8-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-7-0 .text-content {
+._39c1kf0-3-8-0 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-7-0 svg + .text-content {
+._39c1kf0-3-8-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/navigation/tabs/RenderTab.sty.js

@@ -24,6 +24,6 @@ __export(RenderTab_css_exports, {
 module.exports = __toCommonJS(RenderTab_css_exports);
 var import_RenderTab_css_ts_vanilla = require("./RenderTab.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var disabledTabWrapperCSS = "_39c1kf7-3-7-0";
-var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-7-0", variantClassNames: { disabled: { true: "_39c1kf1-3-7-0", false: "_39c1kf2-3-7-0" }, selected: { true: "_39c1kf3-3-7-0", false: "_39c1kf4-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-7-0"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-7-0";
+var disabledTabWrapperCSS = "_39c1kf7-3-8-0";
+var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-8-0", variantClassNames: { disabled: { true: "_39c1kf1-3-8-0", false: "_39c1kf2-3-8-0" }, selected: { true: "_39c1kf3-3-8-0", false: "_39c1kf4-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-8-0"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-8-0";

package/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-7-0 {
+._b4irt10-3-8-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-7-0 {
+._b4irt11-3-8-0 {
   overflow: hidden;
 }
-._b4irt12-3-7-0 {
+._b4irt12-3-8-0 {
   overflow-y: auto;
 }

package/navigation/tabs/TabPanel.sty.js

@@ -22,5 +22,5 @@ __export(TabPanel_css_exports, {
 });
 module.exports = __toCommonJS(TabPanel_css_exports);
 var import_TabPanel_css_ts_vanilla = require("./TabPanel.css");
-var tabPanelCSS = "_b4irt10-3-7-0";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-7-0", "scroll-y": "_b4irt12-3-7-0" };
+var tabPanelCSS = "_b4irt10-3-8-0";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-8-0", "scroll-y": "_b4irt12-3-8-0" };

package/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-7-0 {
+._1tfbrxp0-3-8-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-7-0 {
+._1tfbrxp1-3-8-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-7-0::-webkit-scrollbar {
+._1tfbrxp1-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-7-0 {
+._1tfbrxp2-3-8-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp3-3-7-0 {
+._1tfbrxp3-3-8-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp4-3-7-0 {
+._1tfbrxp4-3-8-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp5-3-7-0 {
+._1tfbrxp5-3-8-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-7-0:after {
+._1tfbrxp5-3-8-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-7-0 {
+._1tfbrxp6-3-8-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/navigation/tabs/Tabs.sty.js

@@ -25,8 +25,8 @@ __export(Tabs_css_exports, {
 });
 module.exports = __toCommonJS(Tabs_css_exports);
 var import_Tabs_css_ts_vanilla = require("./Tabs.css");
-var tabsArrowButtonCSS = "_1tfbrxp6-3-7-0";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-7-0";
-var tabsCSS = "_1tfbrxp0-3-7-0";
-var tabsWrapperCSS = "_1tfbrxp1-3-7-0";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-7-0", right: "_1tfbrxp3-3-7-0", both: "_1tfbrxp4-3-7-0" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-8-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-8-0";
+var tabsCSS = "_1tfbrxp0-3-8-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-8-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-8-0", right: "_1tfbrxp3-3-8-0", both: "_1tfbrxp4-3-8-0" };

package/notifications/notification-settings/NotificationSettings.css

@@ -1,3 +1,3 @@
-._1cohdty0-3-7-0 {
+._1cohdty0-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/notifications/notification-settings/NotificationSettings.sty.js

@@ -21,4 +21,4 @@ __export(NotificationSettings_css_exports, {
 });
 module.exports = __toCommonJS(NotificationSettings_css_exports);
 var import_NotificationSettings_css_ts_vanilla = require("./NotificationSettings.css");
-var overlayText = "_1cohdty0-3-7-0";
+var overlayText = "_1cohdty0-3-8-0";

package/notifications/notification-settings/components/CopyPermissionsButton.js

@@ -32,14 +32,10 @@ const CopyPermissionsButton = (props) => {
     import_Button.Button,
     {
       variant: "emphasized",
-      onClick: async (e) => {
+      onClick: (e) => {
         e.stopPropagation();
-        try {
-          await navigator.clipboard.writeText(
-            `notification:notifications:${props.readOrWrite}`
-          );
-        } catch {
-        }
+        navigator.clipboard.writeText(`notification:notifications:${props.readOrWrite}`).catch(() => {
+        });
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CopyIcon, {}) }),