@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-4-0 {
+._1m01arl1-3-5-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-4-0 {
+._1m01arl2-3-5-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-4-0 ._1m01arl2-3-4-0 {
+._1m01arl0-3-5-0 ._1m01arl2-3-5-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-4-0 {
+._1m01arl3-3-5-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,13 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-4-0 ._1m01arl4-3-4-0:not(:last-child) {
+._1m01arl3-3-5-0 ._1m01arl4-3-5-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-4-0 {
+._1m01arl5-3-5-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +56,35 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-4-0 {
+._1m01arl6-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-4-0:hover, ._1m01arl7-3-4-0[data-state="open"] {
+._1m01arl7-3-5-0:hover, ._1m01arl7-3-5-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-4-0:focus {
+._1m01arl7-3-5-0:focus {
   outline: none;
 }
-._1m01arl7-3-4-0:active {
+._1m01arl7-3-5-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-4-0 {
+._1m01arl8-3-5-0 {
   width: 100%;
 }
-._1m01arl5-3-4-0 > ._1m01arl8-3-4-0:first-child {
+._1m01arl5-3-5-0 > ._1m01arl8-3-5-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-4-0 > ._1m01arl8-3-4-0:last-child:not(:has(svg:last-child)) {
+._1m01arl5-3-5-0 > ._1m01arl8-3-5-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-4-0 {
+._1m01arl9-3-5-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-4-0:first-child {
+._1m01arl9-3-5-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/navigation/menu/Menu.js

@@ -4,6 +4,7 @@ import {
   Children,
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useMemo
 } from "react";
@@ -24,6 +25,7 @@ import { SubTrigger } from "./SubTrigger.js";
 import { Suffix } from "./Suffix.js";
 import { Trigger } from "./Trigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
+import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function getMenuSlots(children) {
   const slots = {
@@ -83,17 +85,20 @@ const MenuRoot = (props) => {
     () => getMenuSlots(
       registerTabHandlers(children, () => updateOpen(false), dataDtComponent)
     ),
-    [children, updateOpen]
+    [children, updateOpen, dataDtComponent]
   );
-  const onWindowBlur = () => {
+  const onWindowBlur = useCallback(() => {
     updateOpen(false);
-  };
+  }, [updateOpen]);
   useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
     window.addEventListener("blur", onWindowBlur);
     return () => {
       window.removeEventListener("blur", onWindowBlur);
     };
-  });
+  }, [onWindowBlur]);
   const menuContextValue = useMemo(
     () => ({
       isOpen: open,

package/esm/navigation/menu/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.tsx"],
-  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = () => {\n    updateOpen(false);\n  };\n\n  useEffect(() => {\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  });\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen, dataDtComponent],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/navigation/menu/Menu.sty.js

@@ -1,13 +1,13 @@
 import "./Menu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = "_1m01arl3-3-4-0";
-var group = "_1m01arl4-3-4-0";
-var item = _7a468({ defaultClassName: "_1m01arl5-3-4-0", variantClassNames: { disabled: { true: "_1m01arl6-3-4-0", false: "_1m01arl7-3-4-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-4-0";
-var label = "_1m01arl2-3-4-0";
-var subChildren = "_1m01arl9-3-4-0";
-var tooltip = "_1m01arl0-3-4-0";
-var tooltipWrapper = "_1m01arl1-3-4-0";
+var content = "_1m01arl3-3-5-0";
+var group = "_1m01arl4-3-5-0";
+var item = _7a468({ defaultClassName: "_1m01arl5-3-5-0", variantClassNames: { disabled: { true: "_1m01arl6-3-5-0", false: "_1m01arl7-3-5-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl8-3-5-0";
+var label = "_1m01arl2-3-5-0";
+var subChildren = "_1m01arl9-3-5-0";
+var tooltip = "_1m01arl0-3-5-0";
+var tooltipWrapper = "_1m01arl1-3-5-0";
 export {
   content,
   group,

package/esm/navigation/menu/Menu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.css.ts"],
-  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-4-0';\nexport var group = '_1m01arl4-3-4-0';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-4-0',variantClassNames:{disabled:{true:'_1m01arl6-3-4-0',false:'_1m01arl7-3-4-0'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-4-0';\nexport var label = '_1m01arl2-3-4-0';\nexport var subChildren = '_1m01arl9-3-4-0';\nexport var tooltip = '_1m01arl0-3-4-0';\nexport var tooltipWrapper = '_1m01arl1-3-4-0';"],
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-5-0';\nexport var group = '_1m01arl4-3-5-0';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-5-0',variantClassNames:{disabled:{true:'_1m01arl6-3-5-0',false:'_1m01arl7-3-5-0'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-5-0';\nexport var label = '_1m01arl2-3-5-0';\nexport var subChildren = '_1m01arl9-3-5-0';\nexport var tooltip = '_1m01arl0-3-5-0';\nexport var tooltipWrapper = '_1m01arl1-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/menu/Sub.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Sub as RadixSub } from "@radix-ui/react-dropdown-menu";
 import {
+  useCallback,
   useEffect,
   useMemo,
   Children,
@@ -12,6 +13,7 @@ import { MenuSubContext } from "./contexts/MenuSubContext.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
+import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function registerTabHandlers(children, handleTabKeyPressed) {
   return Children.map(children, (child) => {
@@ -65,20 +67,23 @@ const Sub = (props) => {
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]
   );
-  const onWindowBlur = () => {
+  const onWindowBlur = useCallback(() => {
     updateOpen(false);
-  };
+  }, [updateOpen]);
   useEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
     window.addEventListener("blur", onWindowBlur);
     return () => {
       window.removeEventListener("blur", onWindowBlur);
     };
-  });
+  }, [onWindowBlur]);
   return /* @__PURE__ */ jsx(
     MenuSubContext.Provider,
     {
       value: {
-        isOpen: open,
+        isOpen: open ?? false,
         isDefaultOpen: defaultValue ?? false,
         setIsOpen: updateOpen
       },

package/esm/navigation/menu/Sub.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Sub.tsx"],
-  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useEffect,\n  useMemo,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = () => {\n    updateOpen(false);\n  };\n\n  useEffect(() => {\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  });\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
-  "mappings": "AAgII,cAOE,YAPF;AAhIJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAG1B,SAAS,sBAAsB;AAC/B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAIA,QAAM,eAAe,MAAM;AACzB,eAAW,KAAK;AAAA,EAClB;AAEA,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
+  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
+  "mappings": "AAoII,cAOE,YAPF;AApIJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,iBAAiB;AAC1B,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAIA,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
   "names": []
 }

package/esm/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-4-0 {
+._39c1kf0-3-5-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-4-0::after {
+._39c1kf0-3-5-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-4-0 {
+._39c1kf1-3-5-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-4-0 {
+._39c1kf2-3-5-0 {
   cursor: pointer;
 }
-._39c1kf2-3-4-0:hover {
+._39c1kf2-3-5-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-4-0:active {
+._39c1kf2-3-5-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-4-0 {
+._39c1kf5-3-5-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-4-0:hover {
+._39c1kf5-3-5-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-4-0:active {
+._39c1kf5-3-5-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-4-0::after {
+._39c1kf5-3-5-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-4-0 {
+._39c1kf6-3-5-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-4-0 {
+._39c1kf7-3-5-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-4-0 .text-content {
+._39c1kf0-3-5-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-4-0 svg + .text-content {
+._39c1kf0-3-5-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-4-0";
-var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-4-0", variantClassNames: { disabled: { true: "_39c1kf1-3-4-0", false: "_39c1kf2-3-4-0" }, selected: { true: "_39c1kf3-3-4-0", false: "_39c1kf4-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-4-0"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-4-0";
+var disabledTabWrapperCSS = "_39c1kf7-3-5-0";
+var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-5-0", variantClassNames: { disabled: { true: "_39c1kf1-3-5-0", false: "_39c1kf2-3-5-0" }, selected: { true: "_39c1kf3-3-5-0", false: "_39c1kf4-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-5-0"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-5-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-4-0';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-4-0',variantClassNames:{disabled:{true:'_39c1kf1-3-4-0',false:'_39c1kf2-3-4-0'},selected:{true:'_39c1kf3-3-4-0',false:'_39c1kf4-3-4-0'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-4-0']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-4-0';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-5-0';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-5-0',variantClassNames:{disabled:{true:'_39c1kf1-3-5-0',false:'_39c1kf2-3-5-0'},selected:{true:'_39c1kf3-3-5-0',false:'_39c1kf4-3-5-0'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-5-0']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-5-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-4-0 {
+._b4irt10-3-5-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-4-0 {
+._b4irt11-3-5-0 {
   overflow: hidden;
 }
-._b4irt12-3-4-0 {
+._b4irt12-3-5-0 {
   overflow-y: auto;
 }

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

@@ -1,6 +1,6 @@
 import "./TabPanel.css";
-var tabPanelCSS = "_b4irt10-3-4-0";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-4-0", "scroll-y": "_b4irt12-3-4-0" };
+var tabPanelCSS = "_b4irt10-3-5-0";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-5-0", "scroll-y": "_b4irt12-3-5-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-4-0';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-4-0','scroll-y':'_b4irt12-3-4-0'};"],
+  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-5-0';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-5-0','scroll-y':'_b4irt12-3-5-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-4-0 {
+._1tfbrxp0-3-5-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-4-0 {
+._1tfbrxp1-3-5-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-4-0::-webkit-scrollbar {
+._1tfbrxp1-3-5-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-4-0 {
+._1tfbrxp2-3-5-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-4-0 {
+._1tfbrxp3-3-5-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-4-0 {
+._1tfbrxp4-3-5-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-4-0 {
+._1tfbrxp5-3-5-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-4-0:after {
+._1tfbrxp5-3-5-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-4-0 {
+._1tfbrxp6-3-5-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-4-0";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-4-0";
-var tabsCSS = "_1tfbrxp0-3-4-0";
-var tabsWrapperCSS = "_1tfbrxp1-3-4-0";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-4-0", right: "_1tfbrxp3-3-4-0", both: "_1tfbrxp4-3-4-0" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-5-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-5-0";
+var tabsCSS = "_1tfbrxp0-3-5-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-5-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-5-0", right: "_1tfbrxp3-3-5-0", both: "_1tfbrxp4-3-5-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-4-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-4-0';\nexport var tabsCSS = '_1tfbrxp0-3-4-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-4-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-4-0',right:'_1tfbrxp3-3-4-0',both:'_1tfbrxp4-3-4-0'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-5-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-5-0';\nexport var tabsCSS = '_1tfbrxp0-3-5-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-5-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-5-0',right:'_1tfbrxp3-3-5-0',both:'_1tfbrxp4-3-5-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-4-0 {
+._1cohdty0-3-5-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-4-0";
+var overlayText = "_1cohdty0-3-5-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-4-0';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

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

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

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var toastCSS = "_yjszxq0-3-4-0";
-var toastFlexContainerCSS = "_yjszxq2-3-4-0";
-var toastIconCSS = "_yjszxq1-3-4-0";
-var toastTextCSS = "_yjszxq3-3-4-0";
+var toastCSS = "_yjszxq0-3-5-0";
+var toastFlexContainerCSS = "_yjszxq2-3-5-0";
+var toastIconCSS = "_yjszxq1-3-5-0";
+var toastTextCSS = "_yjszxq3-3-5-0";
 export {
   toastCSS,
   toastFlexContainerCSS,

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 toastCSS = '_yjszxq0-3-4-0';\nexport var toastFlexContainerCSS = '_yjszxq2-3-4-0';\nexport var toastIconCSS = '_yjszxq1-3-4-0';\nexport var toastTextCSS = '_yjszxq3-3-4-0';"],
+  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-5-0';\nexport var toastFlexContainerCSS = '_yjszxq2-3-5-0';\nexport var toastIconCSS = '_yjszxq1-3-5-0';\nexport var toastTextCSS = '_yjszxq3-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,eAAe;",
   "names": []
 }