@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/navigation/menu/contexts/MenuSubLevelContext.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+const MenuSubLevelContext = createContext(null);
+function useMenuSubLevelCoordinator() {
+  return useContext(MenuSubLevelContext);
+}
+function MenuSubLevelProvider({ children }) {
+  const subsRef = useRef(/* @__PURE__ */ new Map());
+  const coordinator = 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__ */ jsx(MenuSubLevelContext.Provider, { value: coordinator, children });
+}
+export {
+  MenuSubLevelProvider,
+  useMenuSubLevelCoordinator
+};
+//# sourceMappingURL=MenuSubLevelContext.js.map

package/esm/navigation/menu/contexts/MenuSubLevelContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/navigation/menu/contexts/MenuSubLevelContext.tsx"],
+  "sourcesContent": ["import {\n  createContext,\n  useContext,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from 'react';\n\ntype SubLevelCoordinator = {\n  register: (id: symbol, close: () => void) => void;\n  unregister: (id: symbol) => void;\n  notifyOpened: (id: symbol) => void;\n};\n\nconst MenuSubLevelContext = createContext<SubLevelCoordinator | null>(null);\n\nexport function useMenuSubLevelCoordinator(): SubLevelCoordinator | null {\n  return useContext(MenuSubLevelContext);\n}\n\nexport function MenuSubLevelProvider({ children }: { children: ReactNode }) {\n  const subsRef = useRef(new Map<symbol, () => void>());\n  const coordinator = useMemo<SubLevelCoordinator>(\n    () => ({\n      register: (id, close) => {\n        subsRef.current.set(id, close);\n      },\n      unregister: (id) => {\n        subsRef.current.delete(id);\n      },\n      notifyOpened: (id) => {\n        subsRef.current.forEach((close, subId) => {\n          if (subId !== id) {\n            close();\n          }\n        });\n      },\n    }),\n    [],\n  );\n\n  return (\n    <MenuSubLevelContext.Provider value={coordinator}>\n      {children}\n    </MenuSubLevelContext.Provider>\n  );\n}\n"],
+  "mappings": "AA0CI;AA1CJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAQP,MAAM,sBAAsB,cAA0C,IAAI;AAEnE,SAAS,6BAAyD;AACvE,SAAO,WAAW,mBAAmB;AACvC;AAEO,SAAS,qBAAqB,EAAE,SAAS,GAA4B;AAC1E,QAAM,UAAU,OAAO,oBAAI,IAAwB,CAAC;AACpD,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,UAAU,CAAC,IAAI,UAAU;AACvB,gBAAQ,QAAQ,IAAI,IAAI,KAAK;AAAA,MAC/B;AAAA,MACA,YAAY,CAAC,OAAO;AAClB,gBAAQ,QAAQ,OAAO,EAAE;AAAA,MAC3B;AAAA,MACA,cAAc,CAAC,OAAO;AACpB,gBAAQ,QAAQ,QAAQ,CAAC,OAAO,UAAU;AACxC,cAAI,UAAU,IAAI;AAChB,kBAAM;AAAA,UACR;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,aAClC,UACH;AAEJ;",
+  "names": []
+}

package/esm/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/esm/navigation/tabs/RenderTab.sty.js

@@ -1,8 +1,8 @@
 import "./RenderTab.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledTabWrapperCSS = "_39c1kf7-3-7-0";
-var tabButtonCSS = _7a468({ 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 = _7a468({ 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";
 export {
   disabledTabWrapperCSS,
   tabButtonCSS,

package/esm/navigation/tabs/RenderTab.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/RenderTab.css.ts"],
-  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-7-0';\nexport var tabButtonCSS = _7a468({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']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-7-0';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-8-0';\nexport var tabButtonCSS = _7a468({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']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACzR,IAAI,uBAAuB;",
   "names": []
 }

package/esm/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/esm/navigation/tabs/TabPanel.sty.js

@@ -1,6 +1,6 @@
 import "./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" };
 export {
   tabPanelCSS,
   tabPanelOverflowBehaviorCSS

package/esm/navigation/tabs/TabPanel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.css.ts"],
-  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-7-0';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-7-0','scroll-y':'_b4irt12-3-7-0'};"],
+  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-8-0';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-8-0','scroll-y':'_b4irt12-3-8-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;AAClB,IAAI,8BAA8B,EAAC,QAAO,kBAAiB,YAAW,iBAAgB;",
   "names": []
 }

package/esm/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/esm/navigation/tabs/Tabs.sty.js

@@ -1,9 +1,9 @@
 import "./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" };
 export {
   tabsArrowButtonCSS,
   tabsArrowWrapperCSS,

package/esm/navigation/tabs/Tabs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.css.ts"],
-  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-7-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-7-0';\nexport var tabsCSS = '_1tfbrxp0-3-7-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-7-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-7-0',right:'_1tfbrxp3-3-7-0',both:'_1tfbrxp4-3-7-0'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-8-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-8-0';\nexport var tabsCSS = '_1tfbrxp0-3-8-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-8-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-8-0',right:'_1tfbrxp3-3-8-0',both:'_1tfbrxp4-3-8-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;AAC1B,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,yBAAyB,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }

package/esm/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/esm/notifications/notification-settings/NotificationSettings.sty.js

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-7-0";
+var overlayText = "_1cohdty0-3-8-0";
 export {
   overlayText
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.css.ts"],
-  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-7-0';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

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

@@ -10,14 +10,10 @@ const CopyPermissionsButton = (props) => {
     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__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/components/CopyPermissionsButton.tsx"],
-  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { notificationMessages } from '../messages.js';\n\n/**\n * The copy permissions button shown in the NotifyButton toast if the user doesn't have permissions to toggle notifications.\n * @internal\n */\nexport const CopyPermissionsButton = (\n  props: Readonly<{ readOrWrite: 'read' | 'write' }>,\n) => {\n  const intl = useIntl();\n\n  return (\n    <Button\n      variant=\"emphasized\"\n      onClick={async (e: ReactMouseEvent) => {\n        e.stopPropagation();\n        try {\n          await navigator.clipboard.writeText(\n            `notification:notifications:${props.readOrWrite}`,\n          );\n        } catch {\n          // For now, we silently ignore clipboard write errors.\n        }\n      }}\n    >\n      <Button.Prefix>\n        <CopyIcon />\n      </Button.Prefix>\n      <Text textStyle=\"base-emphasized\">\n        {intl.formatMessage(notificationMessages.copyMissingPermissions)}\n      </Text>\n    </Button>\n  );\n};\n"],
-  "mappings": "AAmBI,SAcI,KAdJ;AAlBJ,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,4BAA4B;AAM9B,MAAM,wBAAwB,CACnC,UACG;AACH,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,OAAO,MAAuB;AACrC,UAAE,gBAAgB;AAClB,YAAI;AACF,gBAAM,UAAU,UAAU;AAAA,YACxB,8BAA8B,MAAM,WAAW;AAAA,UACjD;AAAA,QACF,QAAQ;AAAA,QAER;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,YAAS,GACZ;AAAA,QACA,oBAAC,QAAK,WAAU,mBACb,eAAK,cAAc,qBAAqB,sBAAsB,GACjE;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { notificationMessages } from '../messages.js';\n\n/**\n * The copy permissions button shown in the NotifyButton toast if the user doesn't have permissions to toggle notifications.\n * @internal\n */\nexport const CopyPermissionsButton = (\n  props: Readonly<{ readOrWrite: 'read' | 'write' }>,\n) => {\n  const intl = useIntl();\n\n  return (\n    <Button\n      variant=\"emphasized\"\n      onClick={(e: ReactMouseEvent) => {\n        e.stopPropagation();\n        navigator.clipboard\n          .writeText(`notification:notifications:${props.readOrWrite}`)\n          .catch(() => {\n            // silently ignore clipboard write errors\n          });\n      }}\n    >\n      <Button.Prefix>\n        <CopyIcon />\n      </Button.Prefix>\n      <Text textStyle=\"base-emphasized\">\n        {intl.formatMessage(notificationMessages.copyMissingPermissions)}\n      </Text>\n    </Button>\n  );\n};\n"],
+  "mappings": "AAmBI,SAYI,KAZJ;AAlBJ,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,4BAA4B;AAM9B,MAAM,wBAAwB,CACnC,UACG;AACH,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,CAAC,MAAuB;AAC/B,UAAE,gBAAgB;AAClB,kBAAU,UACP,UAAU,8BAA8B,MAAM,WAAW,EAAE,EAC3D,MAAM,MAAM;AAAA,QAEb,CAAC;AAAA,MACL;AAAA,MAEA;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,YAAS,GACZ;AAAA,QACA,oBAAC,QAAK,WAAU,mBACb,eAAK,cAAc,qBAAqB,sBAAsB,GACjE;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/notifications/notification-settings/components/ToggleButton.js

@@ -17,7 +17,9 @@ function NotificationToggleButton() {
     {
       variant: enabled ? "emphasized" : "accent",
       color: enabled ? "neutral" : "primary",
-      onClick: toggleNotifications,
+      onClick: () => {
+        void toggleNotifications();
+      },
       disabled: !hasReadPermission || hasNotFoundError,
       loading,
       children: /* @__PURE__ */ jsx(

package/esm/notifications/notification-settings/components/ToggleButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/components/ToggleButton.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { NotificationSettingsContext } from '../contexts/NotificationSettingsContext.js';\nimport { notificationMessages } from '../messages.js';\n\n/**\n *\n * @internal\n */\nexport function NotificationToggleButton() {\n  const {\n    enabled,\n    loading,\n    toggleNotifications,\n    hasReadPermission,\n    hasNotFoundError,\n  } = useContext(NotificationSettingsContext);\n\n  return (\n    <Button\n      variant={enabled ? 'emphasized' : 'accent'}\n      color={enabled ? 'neutral' : 'primary'}\n      onClick={toggleNotifications}\n      disabled={!hasReadPermission || hasNotFoundError}\n      loading={loading}\n    >\n      <FormattedMessage\n        {...notificationMessages.notificationsToggle}\n        values={{ notificationEnabled: enabled }}\n      />\n    </Button>\n  );\n}\n"],
-  "mappings": "AA4BM;AA5BN,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AAM9B,SAAS,2BAA2B;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,UAAU,eAAe;AAAA,MAClC,OAAO,UAAU,YAAY;AAAA,MAC7B,SAAS;AAAA,MACT,UAAU,CAAC,qBAAqB;AAAA,MAChC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,qBAAqB;AAAA,UACzB,QAAQ,EAAE,qBAAqB,QAAQ;AAAA;AAAA,MACzC;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { NotificationSettingsContext } from '../contexts/NotificationSettingsContext.js';\nimport { notificationMessages } from '../messages.js';\n\n/**\n *\n * @internal\n */\nexport function NotificationToggleButton() {\n  const {\n    enabled,\n    loading,\n    toggleNotifications,\n    hasReadPermission,\n    hasNotFoundError,\n  } = useContext(NotificationSettingsContext);\n\n  return (\n    <Button\n      variant={enabled ? 'emphasized' : 'accent'}\n      color={enabled ? 'neutral' : 'primary'}\n      onClick={() => {\n        void toggleNotifications();\n      }}\n      disabled={!hasReadPermission || hasNotFoundError}\n      loading={loading}\n    >\n      <FormattedMessage\n        {...notificationMessages.notificationsToggle}\n        values={{ notificationEnabled: enabled }}\n      />\n    </Button>\n  );\n}\n"],
+  "mappings": "AA8BM;AA9BN,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AAM9B,SAAS,2BAA2B;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,2BAA2B;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,UAAU,eAAe;AAAA,MAClC,OAAO,UAAU,YAAY;AAAA,MAC7B,SAAS,MAAM;AACb,aAAK,oBAAoB;AAAA,MAC3B;AAAA,MACA,UAAU,CAAC,qBAAqB;AAAA,MAChC;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG,qBAAqB;AAAA,UACzB,QAAQ,EAAE,qBAAqB,QAAQ;AAAA;AAAA,MACzC;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

@@ -1,11 +1,11 @@
-._yjszxq0-3-7-0 {
+._yjszxq0-3-8-0 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-7-0 {
+._yjszxq1-3-8-0 {
   display: flex;
 }
-._yjszxq1-3-7-0._yjszxq1-3-7-0 {
+._yjszxq1-3-8-0._yjszxq1-3-8-0 {
   border: 0;
   border-radius: 0;
   padding-left: var(--dt-spacings-size-8, 8px);
@@ -13,14 +13,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-7-0 {
+._yjszxq2-3-8-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-7-0 {
+._yjszxq3-3-8-0 {
   max-width: 100%;
 }
-._yjszxq3-3-7-0._yjszxq3-3-7-0 {
+._yjszxq3-3-8-0._yjszxq3-3-8-0 {
   overflow-wrap: anywhere;
 }

package/esm/notifications/toast/Toast.sty.js

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var flexContainer = "_yjszxq2-3-7-0";
-var icon = "_yjszxq1-3-7-0";
-var root = "_yjszxq0-3-7-0";
-var text = "_yjszxq3-3-7-0";
+var flexContainer = "_yjszxq2-3-8-0";
+var icon = "_yjszxq1-3-8-0";
+var root = "_yjszxq0-3-8-0";
+var text = "_yjszxq3-3-8-0";
 export {
   flexContainer,
   icon,

package/esm/notifications/toast/Toast.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.css.ts"],
-  "sourcesContent": ["import './Toast.css';\nexport var flexContainer = '_yjszxq2-3-7-0';\nexport var icon = '_yjszxq1-3-7-0';\nexport var root = '_yjszxq0-3-7-0';\nexport var text = '_yjszxq3-3-7-0';"],
+  "sourcesContent": ["import './Toast.css';\nexport var flexContainer = '_yjszxq2-3-8-0';\nexport var icon = '_yjszxq1-3-8-0';\nexport var root = '_yjszxq0-3-8-0';\nexport var text = '_yjszxq3-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,OAAO;",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-7-0 {
+@keyframes _rxr5810-3-8-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-7-0 {
+@keyframes _rxr5811-3-8-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-7-0 {
+@keyframes _rxr5812-3-8-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,34 +22,34 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-7-0 {
+._rxr5813-3-8-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._rxr5813-3-7-0 .Toastify__toast-container {
+._rxr5813-3-8-0 .Toastify__toast-container {
   z-index: 9999;
   position: fixed;
   max-width: 400px;
   width: calc(100% - var(--dt-spacings-size-32, 32px));
   box-sizing: border-box;
 }
-._rxr5813-3-7-0 .Toastify__toast-container--bottom-left {
+._rxr5813-3-8-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-._rxr5813-3-7-0 .Toastify__toast-container--bottom-right {
+._rxr5813-3-8-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-._rxr5813-3-7-0 .Toastify__toast-container--bottom-center {
+._rxr5813-3-8-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-._rxr5813-3-7-0 .Toastify__toast {
+._rxr5813-3-8-0 .Toastify__toast {
   margin: 0;
   align-items: start;
   border: none;
@@ -72,24 +72,24 @@
   margin-top: var(--dt-spacings-size-8, 8px);
   max-width: 100%;
 }
-._rxr5813-3-7-0 .Toastify__toast-body {
+._rxr5813-3-8-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-._rxr5813-3-7-0 .Toastify__toast-body > div {
+._rxr5813-3-8-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._rxr5813-3-7-0 .Toastify__toast-icon {
+._rxr5813-3-8-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-._rxr5813-3-7-0 .Toastify__progress-bar {
+._rxr5813-3-8-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -98,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-._rxr5813-3-7-0 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-7-0 1 forwards;
+._rxr5813-3-8-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-8-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-7-0;
+  animation-name: _rxr5810-3-8-0;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-7-0;
+  animation-name: _rxr5811-3-8-0;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/esm/notifications/toast/ToastContainer.sty.js

@@ -1,5 +1,5 @@
 import "./ToastContainer.css";
-var root = "_rxr5813-3-7-0";
+var root = "_rxr5813-3-8-0";
 export {
   root
 };

package/esm/notifications/toast/ToastContainer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.css.ts"],
-  "sourcesContent": ["import './ToastContainer.css';\nexport var root = '_rxr5813-3-7-0';"],
+  "sourcesContent": ["import './ToastContainer.css';\nexport var root = '_rxr5813-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-7-0 {
+._14971970-3-8-0 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-7-0 {
+._14971971-3-8-0 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-7-0 {
+._14971972-3-8-0 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-7-0 {
+._14971973-3-8-0 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-7-0 {
+._14971974-3-8-0 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-7-0 {
+._14971975-3-8-0 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-7-0 {
+._14971976-3-8-0 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-7-0 {
+._14971977-3-8-0 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-7-0 {
+._14971978-3-8-0 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.sty.js

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-7-0";
-var DrawerCSS = "_14971970-3-7-0";
-var DrawerContentCSS = "_14971978-3-7-0";
-var DrawerPlacementCSS = { left: "_14971971-3-7-0", right: "_14971972-3-7-0" };
-var DrawerWidthStyles = { narrow: "_14971973-3-7-0", medium: "_14971974-3-7-0", wide: "_14971975-3-7-0", full: "_14971976-3-7-0" };
+var DrawerBackdropCSS = "_14971977-3-8-0";
+var DrawerCSS = "_14971970-3-8-0";
+var DrawerContentCSS = "_14971978-3-8-0";
+var DrawerPlacementCSS = { left: "_14971971-3-8-0", right: "_14971972-3-8-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-8-0", medium: "_14971974-3-8-0", wide: "_14971975-3-8-0", full: "_14971976-3-8-0" };
 export {
   DrawerBackdropCSS,
   DrawerCSS,

package/esm/overlays/drawer/Drawer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.css.ts"],
-  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-7-0';\nexport var DrawerCSS = '_14971970-3-7-0';\nexport var DrawerContentCSS = '_14971978-3-7-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-7-0',right:'_14971972-3-7-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-7-0',medium:'_14971974-3-7-0',wide:'_14971975-3-7-0',full:'_14971976-3-7-0'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-8-0';\nexport var DrawerCSS = '_14971970-3-8-0';\nexport var DrawerContentCSS = '_14971978-3-8-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-8-0',right:'_14971972-3-8-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-8-0',medium:'_14971974-3-8-0',wide:'_14971975-3-8-0',full:'_14971976-3-8-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,qBAAqB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB;AACxE,IAAI,oBAAoB,EAAC,QAAO,mBAAkB,QAAO,mBAAkB,MAAK,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }