@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-5-2 {
+._39c1kf0-3-7-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-5-2::after {
+._39c1kf0-3-7-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-5-2 {
+._39c1kf1-3-7-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-5-2 {
+._39c1kf2-3-7-0 {
   cursor: pointer;
 }
-._39c1kf2-3-5-2:hover {
+._39c1kf2-3-7-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-5-2:active {
+._39c1kf2-3-7-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-5-2 {
+._39c1kf5-3-7-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-5-2:hover {
+._39c1kf5-3-7-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-5-2:active {
+._39c1kf5-3-7-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-5-2::after {
+._39c1kf5-3-7-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-5-2 {
+._39c1kf6-3-7-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-5-2 {
+._39c1kf7-3-7-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-5-2 .text-content {
+._39c1kf0-3-7-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-5-2 svg + .text-content {
+._39c1kf0-3-7-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/esm/navigation/tabs/RenderTab.js

@@ -8,7 +8,7 @@ import {
   tabButtonCSS,
   tabContentWrapperCSS
 } from "./RenderTab.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { Text } from "../../typography/text/Text.js";
 const RenderTab = (props) => {
   const {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/RenderTab.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ReactElement,\n  useRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport {\n  disabledTabWrapperCSS,\n  tabButtonCSS,\n  tabContentWrapperCSS,\n} from './RenderTab.sty.js';\nimport { TabProps } from './Tab.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Text } from '../../typography/text/Text.js';\n\ninterface RenderTabProps {\n  tabItem: ReactElement<TabProps>;\n  /** @defaultValue false */\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  ariaControls?: string;\n  onActivate?: () => void;\n  onKeyDown?: (event: ReactKeyboardEvent) => void;\n}\n\n/**\n * actually rendered tab component\n */\nexport const RenderTab = (props: RenderTabProps) => {\n  const {\n    isDisabled: propsDisabled = false,\n    isSelected = false,\n    tabItem,\n    ariaControls,\n    onActivate,\n    onKeyDown,\n  } = props;\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const { key, props: tabProps } = tabItem;\n  const {\n    title,\n    disabled,\n    children,\n    prefixIcon,\n    id = key ?? undefined,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    keepMounted,\n    ...restProps\n  } = tabProps;\n\n  const isDisabled = propsDisabled || (disabled ?? false);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: !isDisabled && isSelected ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  return (\n    <div className={clsx({ [disabledTabWrapperCSS]: isDisabled })}>\n      <button\n        data-testid={dataTestId}\n        {...restProps}\n        ref={ref}\n        type=\"button\"\n        data-key={key}\n        role=\"tab\"\n        id={id}\n        disabled={isDisabled}\n        aria-selected={isSelected}\n        aria-controls={ariaControls}\n        {...(!isDisabled &&\n          !propsDisabled && {\n            onClick: onActivate,\n            onKeyDown,\n            onBlur: focusProps.onBlur,\n            onFocus: focusProps.onFocus,\n          })}\n        className={clsx(\n          tabButtonCSS({\n            disabled: isDisabled,\n            selected: isSelected,\n          }),\n          focusClassName,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n      >\n        <div className={tabContentWrapperCSS}>\n          {prefixIcon !== undefined && prefixIcon}\n          <Text className=\"text-content\" as=\"div\" textStyle=\"base\">\n            {title}\n          </Text>\n        </div>\n      </button>\n    </div>\n  );\n};\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ReactElement,\n  useRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport {\n  disabledTabWrapperCSS,\n  tabButtonCSS,\n  tabContentWrapperCSS,\n} from './RenderTab.sty.js';\nimport { TabProps } from './Tab.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { Text } from '../../typography/text/Text.js';\n\ninterface RenderTabProps {\n  tabItem: ReactElement<TabProps>;\n  /** @defaultValue false */\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  ariaControls?: string;\n  onActivate?: () => void;\n  onKeyDown?: (event: ReactKeyboardEvent) => void;\n}\n\n/**\n * actually rendered tab component\n */\nexport const RenderTab = (props: RenderTabProps) => {\n  const {\n    isDisabled: propsDisabled = false,\n    isSelected = false,\n    tabItem,\n    ariaControls,\n    onActivate,\n    onKeyDown,\n  } = props;\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const { key, props: tabProps } = tabItem;\n  const {\n    title,\n    disabled,\n    children,\n    prefixIcon,\n    id = key ?? undefined,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    keepMounted,\n    ...restProps\n  } = tabProps;\n\n  const isDisabled = propsDisabled || (disabled ?? false);\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: !isDisabled && isSelected ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  return (\n    <div className={clsx({ [disabledTabWrapperCSS]: isDisabled })}>\n      <button\n        data-testid={dataTestId}\n        {...restProps}\n        ref={ref}\n        type=\"button\"\n        data-key={key}\n        role=\"tab\"\n        id={id}\n        disabled={isDisabled}\n        aria-selected={isSelected}\n        aria-controls={ariaControls}\n        {...(!isDisabled &&\n          !propsDisabled && {\n            onClick: onActivate,\n            onKeyDown,\n            onBlur: focusProps.onBlur,\n            onFocus: focusProps.onFocus,\n          })}\n        className={clsx(\n          tabButtonCSS({\n            disabled: isDisabled,\n            selected: isSelected,\n          }),\n          focusClassName,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n      >\n        <div className={tabContentWrapperCSS}>\n          {prefixIcon !== undefined && prefixIcon}\n          <Text className=\"text-content\" as=\"div\" textStyle=\"base\">\n            {title}\n          </Text>\n        </div>\n      </button>\n    </div>\n  );\n};\n"],
   "mappings": "AA2FQ,SAEE,KAFF;AA3FR,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAed,MAAM,YAAY,CAAC,UAA0B;AAClD,QAAM;AAAA,IACJ,YAAY,gBAAgB;AAAA,IAC5B,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,EAAE,KAAK,OAAO,SAAS,IAAI;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK,OAAO;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,kBAAkB,YAAY;AAEjD,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,OAAO,CAAC,cAAc,aAAa,YAAY;AAAA,IAC/C,UAAU;AAAA,EACZ,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,KAAK,EAAE,CAAC,qBAAqB,GAAG,WAAW,CAAC,GAC1D;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACZ,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL,YAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,iBAAe;AAAA,MACf,iBAAe;AAAA,MACd,GAAI,CAAC,cACJ,CAAC,iBAAiB;AAAA,QAChB,SAAS;AAAA,QACT;AAAA,QACA,QAAQ,WAAW;AAAA,QACnB,SAAS,WAAW;AAAA,MACtB;AAAA,MACF,WAAW;AAAA,QACT,aAAa;AAAA,UACX,UAAU;AAAA,UACV,UAAU;AAAA,QACZ,CAAC;AAAA,QACD;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MAEP,+BAAC,SAAI,WAAW,sBACb;AAAA,uBAAe,UAAa;AAAA,QAC7B,oBAAC,QAAK,WAAU,gBAAe,IAAG,OAAM,WAAU,QAC/C,iBACH;AAAA,SACF;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

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-5-2";
-var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-5-2", variantClassNames: { disabled: { true: "_39c1kf1-3-5-2", false: "_39c1kf2-3-5-2" }, selected: { true: "_39c1kf3-3-5-2", false: "_39c1kf4-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-5-2"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-5-2";
+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";
 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-5-2';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-5-2',variantClassNames:{disabled:{true:'_39c1kf1-3-5-2',false:'_39c1kf2-3-5-2'},selected:{true:'_39c1kf3-3-5-2',false:'_39c1kf4-3-5-2'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-5-2']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-5-2';"],
+  "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';"],
   "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-5-2 {
+._b4irt10-3-7-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-5-2 {
+._b4irt11-3-7-0 {
   overflow: hidden;
 }
-._b4irt12-3-5-2 {
+._b4irt12-3-7-0 {
   overflow-y: auto;
 }

package/esm/navigation/tabs/TabPanel.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { tabPanelCSS, tabPanelOverflowBehaviorCSS } from "./TabPanel.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { getFirstFocusableChild as _getFirstFocusableChild } from "../../core/utils/focus-management/get-first-focusable-child.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 const TabPanel = (props) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { tabPanelCSS, tabPanelOverflowBehaviorCSS } from './TabPanel.sty.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\ninterface TabPanelProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the tab panel is disabled.\n   * If true, its content is not rendered.\n   */\n  disabled: boolean;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow: 'hidden' | 'scroll-y';\n}\n\n/**\n * TabPanel component, used to display the content of a tab.\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const {\n    children,\n    disabled,\n    panelOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { focusProps, focusClassName } = useFocusRing({ disabled });\n  const [hasFocusableChildren, setHasFocusableChildren] =\n    useState<boolean>(false);\n\n  // Check if the tab panel has focusable children to focus on them instead of the panel per a11y rules\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setHasFocusableChildren(_getFirstFocusableChild(ref.current) !== null);\n    }\n  }, [children]);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(\n        consumerClassName,\n        focusClassName,\n        tabPanelCSS,\n        tabPanelOverflowBehaviorCSS[panelOverflow],\n      )}\n      style={consumerStyle}\n      ref={ref}\n      {..._mergeProps(focusProps, restProps)}\n      tabIndex={hasFocusableChildren ? -1 : 0}\n      role=\"tabpanel\"\n    >\n      {!disabled && children}\n    </div>\n  );\n};\nTabPanel['displayName'] = 'TabPanel';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { tabPanelCSS, tabPanelOverflowBehaviorCSS } from './TabPanel.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { getFirstFocusableChild as _getFirstFocusableChild } from '../../core/utils/focus-management/get-first-focusable-child.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\ninterface TabPanelProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the tab panel is disabled.\n   * If true, its content is not rendered.\n   */\n  disabled: boolean;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow: 'hidden' | 'scroll-y';\n}\n\n/**\n * TabPanel component, used to display the content of a tab.\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const {\n    children,\n    disabled,\n    panelOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...restProps\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { focusProps, focusClassName } = useFocusRing({ disabled });\n  const [hasFocusableChildren, setHasFocusableChildren] =\n    useState<boolean>(false);\n\n  // Check if the tab panel has focusable children to focus on them instead of the panel per a11y rules\n  useLayoutEffect(() => {\n    if (ref.current) {\n      setHasFocusableChildren(_getFirstFocusableChild(ref.current) !== null);\n    }\n  }, [children]);\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(\n        consumerClassName,\n        focusClassName,\n        tabPanelCSS,\n        tabPanelOverflowBehaviorCSS[panelOverflow],\n      )}\n      style={consumerStyle}\n      ref={ref}\n      {..._mergeProps(focusProps, restProps)}\n      tabIndex={hasFocusableChildren ? -1 : 0}\n      role=\"tabpanel\"\n    >\n      {!disabled && children}\n    </div>\n  );\n};\nTabPanel['displayName'] = 'TabPanel';\n"],
   "mappings": "AAsDI;AAtDJ,OAAO,UAAU;AACjB,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,aAAa,mCAAmC;AACzD,SAAS,oBAAoB;AAM7B,SAAS,0BAA0B,+BAA+B;AAClE,SAAS,cAAc,mBAAmB;AAmBnC,MAAM,WAAW,CAAC,UAAyB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,MAAM,OAAuB,IAAI;AAEvC,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa,EAAE,SAAS,CAAC;AAChE,QAAM,CAAC,sBAAsB,uBAAuB,IAClD,SAAkB,KAAK;AAGzB,kBAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,8BAAwB,wBAAwB,IAAI,OAAO,MAAM,IAAI;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,4BAA4B,aAAa;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACC,GAAG,YAAY,YAAY,SAAS;AAAA,MACrC,UAAU,uBAAuB,KAAK;AAAA,MACtC,MAAK;AAAA,MAEJ,WAAC,YAAY;AAAA;AAAA,EAChB;AAEJ;AACA,SAAS,aAAa,IAAI;",
   "names": []
 }

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

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

package/esm/notifications/toast/Toast.css

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

package/esm/notifications/toast/Toast.js

@@ -10,12 +10,7 @@ import {
   SuccessIcon,
   WarningIcon
 } from "@dynatrace/strato-icons";
-import {
-  toastCSS,
-  toastFlexContainerCSS,
-  toastIconCSS,
-  toastTextCSS
-} from "./Toast.sty.js";
+import * as styles from "./Toast.sty.js";
 import { OverlayStackingContext } from "../../core/contexts/OverlayStacking.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
@@ -62,7 +57,7 @@ const Toast = (props) => {
     "div",
     {
       onKeyDown: closeToastOnEsc,
-      className: clsx(consumerClassName, toastCSS),
+      className: clsx(consumerClassName, styles.root),
       style: consumerStyle,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
@@ -75,7 +70,7 @@ const Toast = (props) => {
           {
             variant: "accent",
             color: type === "info" ? "primary" : type,
-            className: toastIconCSS,
+            className: styles.icon,
             children: Icon
           }
         ),
@@ -83,7 +78,7 @@ const Toast = (props) => {
           Flex,
           {
             className: clsx(
-              toastFlexContainerCSS,
+              styles.flexContainer,
               textStyleCSS({ textStyle: "base" })
             ),
             paddingLeft: 16,
@@ -95,8 +90,8 @@ const Toast = (props) => {
             flexGrow: 1,
             gap: 6,
             children: [
-              title && /* @__PURE__ */ jsx(Text, { className: toastTextCSS, textStyle: "base-emphasized", as: "p", children: title }),
-              message && /* @__PURE__ */ jsx(Text, { className: toastTextCSS, textStyle: "base", as: "p", children: message }),
+              title && /* @__PURE__ */ jsx(Text, { className: styles.text, textStyle: "base-emphasized", as: "p", children: title }),
+              message && /* @__PURE__ */ jsx(Text, { className: styles.text, textStyle: "base", as: "p", children: message }),
               children
             ]
           }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type JSX,\n  type KeyboardEvent,\n  type PropsWithChildren,\n} from 'react';\nimport { toast } from 'react-toastify';\n\nimport {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  toastCSS,\n  toastFlexContainerCSS,\n  toastIconCSS,\n  toastTextCSS,\n} from './Toast.sty.js';\nimport { OverlayStackingContext } from '../../core/contexts/OverlayStacking.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Text } from '../../typography/text/Text.js';\n\nconst COMPONENT_NAME = 'Toast';\n\ntype ToastProps = PropsWithChildren<{\n  type: 'info' | 'warning' | 'critical' | 'success';\n  title: string;\n  message?: string | JSX.Element;\n  closeToast: () => void;\n}> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n\nconst Toast = (props: ToastProps) => {\n  const {\n    children,\n    type,\n    title,\n    message,\n    closeToast,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n  const Icon = useMemo(() => {\n    switch (type) {\n      case 'warning':\n        return <WarningIcon />;\n      case 'success':\n        return <SuccessIcon />;\n      case 'critical':\n        return <CriticalIcon />;\n      case 'info':\n        return <InformationIcon />;\n    }\n  }, [type]);\n\n  // Handle the escape key\n  const closeToastOnEsc = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closeToast();\n    }\n  };\n\n  return (\n    <div\n      onKeyDown={closeToastOnEsc}\n      className={clsx(consumerClassName, toastCSS)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n    >\n      {/*\n      Our internal `OverlayStackingProvider` has some built in logic to only always\n      increment by one layer. For actually creating the correct zIndex offset for the\n      \"always on top\" toast, we need to add a couple more layers to it.\n      */}\n      <OverlayStackingContext.Provider value={100}>\n        <Container\n          variant=\"accent\"\n          color={type === 'info' ? 'primary' : type}\n          className={toastIconCSS}\n        >\n          {Icon}\n        </Container>\n        <Flex\n          className={clsx(\n            toastFlexContainerCSS,\n            textStyleCSS({ textStyle: 'base' }),\n          )}\n          paddingLeft={16}\n          paddingTop={12}\n          paddingBottom={12}\n          paddingRight={8}\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          flexGrow={1}\n          gap={6}\n        >\n          {title && (\n            <Text className={toastTextCSS} textStyle=\"base-emphasized\" as=\"p\">\n              {title}\n            </Text>\n          )}\n          {message && (\n            <Text className={toastTextCSS} textStyle=\"base\" as=\"p\">\n              {message}\n            </Text>\n          )}\n          {children}\n        </Flex>\n      </OverlayStackingContext.Provider>\n    </div>\n  );\n};\n\n// #region Typings\n/**\n * Options that can be given to the showToast function.\n * @public\n */\nexport interface ToastOptions\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /** A unique id for the toast. Using this toast id consumer can control\n   *  the behavior of individual toast notifications.  Toast messages with same\n   *  id will only be shown once.\n   */\n  id?: string | number;\n\n  /** Title displayed in the toast notification. */\n  title: string;\n  /**\n   * Type of the notification. Also indicates the color and icon.\n   * @defaultValue 'info'\n   * */\n  type?: 'info' | 'warning' | 'critical' | 'success';\n  /** Message displayed in the toast notification. */\n  message?: string | JSX.Element;\n  /**\n   * The Toast notification will automatically close after a certain period of\n   * time given in milliseconds. If 'infinite' is provided, the user must close the toast.\n   * @defaultValue info and success: 8000, critical and warning: 'infinite'\n   * */\n  lifespan?: number | 'infinite';\n  /**\n   * Optional actions passed to the toast element, appended on the bottom left.\n   * Should only be used to either add a Button or a Link.\n   */\n  actions?: JSX.Element;\n  /**\n   * Live region roles\n   * @defaultValue info, success and warning: 'status', critical: 'alert'\n   */\n  role?: 'alert' | 'log' | 'status';\n  /**\n   * Position of toast\n   * @defaultValue 'bottom-left'\n   */\n  position?: 'bottom-right' | 'bottom-center' | 'bottom-left';\n}\n// #endregion Typings\n\n/**\n * Function to open a toast configuration.\n *\n * @returns the respective toast id\n * @public\n */\nexport function showToast({\n  id,\n  type = 'info',\n  role,\n  lifespan,\n  title,\n  message,\n  position = 'bottom-left',\n  actions,\n  className: consumerClassName,\n  style: consumerStyle,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-details': ariaDetails,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n  ...remainingProps\n}: ToastOptions): number | string {\n  // default role according to type\n  const defaultRole = type === 'critical' ? 'alert' : 'status';\n  // default lifespan according to type\n  const defaultAutoClose =\n    type === 'warning' || type === 'critical' ? false : 8000;\n  const autoClose = lifespan === 'infinite' ? false : lifespan;\n\n  return toast(\n    <Toast\n      type={type}\n      title={title}\n      message={message}\n      closeToast={() => undefined}\n      className={consumerClassName}\n      style={consumerStyle}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {actions}\n    </Toast>,\n    {\n      toastId: id,\n      autoClose: autoClose ?? defaultAutoClose,\n      role: role ?? defaultRole,\n      position,\n    },\n  );\n}\n\n/**\n * Function to close a single toast.\n *\n * @param id - id of the toast that should be dismissed\n * @public\n */\nexport function dismissToast(id: string | number): void {\n  toast.dismiss(id);\n}\n\n/**\n * Function to close all open toasts at once.\n * @public\n */\nexport function dismissAllToasts(): void {\n  toast.dismiss();\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type JSX,\n  type KeyboardEvent,\n  type PropsWithChildren,\n} from 'react';\nimport { toast } from 'react-toastify';\n\nimport {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './Toast.sty.js';\nimport { OverlayStackingContext } from '../../core/contexts/OverlayStacking.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Text } from '../../typography/text/Text.js';\n\nconst COMPONENT_NAME = 'Toast';\n\ntype ToastProps = PropsWithChildren<{\n  type: 'info' | 'warning' | 'critical' | 'success';\n  title: string;\n  message?: string | JSX.Element;\n  closeToast: () => void;\n}> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n\nconst Toast = (props: ToastProps) => {\n  const {\n    children,\n    type,\n    title,\n    message,\n    closeToast,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n  const Icon = useMemo(() => {\n    switch (type) {\n      case 'warning':\n        return <WarningIcon />;\n      case 'success':\n        return <SuccessIcon />;\n      case 'critical':\n        return <CriticalIcon />;\n      case 'info':\n        return <InformationIcon />;\n    }\n  }, [type]);\n\n  // Handle the escape key\n  const closeToastOnEsc = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closeToast();\n    }\n  };\n\n  return (\n    <div\n      onKeyDown={closeToastOnEsc}\n      className={clsx(consumerClassName, styles.root)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n    >\n      {/*\n      Our internal `OverlayStackingProvider` has some built in logic to only always\n      increment by one layer. For actually creating the correct zIndex offset for the\n      \"always on top\" toast, we need to add a couple more layers to it.\n      */}\n      <OverlayStackingContext.Provider value={100}>\n        <Container\n          variant=\"accent\"\n          color={type === 'info' ? 'primary' : type}\n          className={styles.icon}\n        >\n          {Icon}\n        </Container>\n        <Flex\n          className={clsx(\n            styles.flexContainer,\n            textStyleCSS({ textStyle: 'base' }),\n          )}\n          paddingLeft={16}\n          paddingTop={12}\n          paddingBottom={12}\n          paddingRight={8}\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          flexGrow={1}\n          gap={6}\n        >\n          {title && (\n            <Text className={styles.text} textStyle=\"base-emphasized\" as=\"p\">\n              {title}\n            </Text>\n          )}\n          {message && (\n            <Text className={styles.text} textStyle=\"base\" as=\"p\">\n              {message}\n            </Text>\n          )}\n          {children}\n        </Flex>\n      </OverlayStackingContext.Provider>\n    </div>\n  );\n};\n\n// #region Typings\n/**\n * Options that can be given to the showToast function.\n * @public\n */\nexport interface ToastOptions\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /** A unique id for the toast. Using this toast id consumer can control\n   *  the behavior of individual toast notifications.  Toast messages with same\n   *  id will only be shown once.\n   */\n  id?: string | number;\n\n  /** Title displayed in the toast notification. */\n  title: string;\n  /**\n   * Type of the notification. Also indicates the color and icon.\n   * @defaultValue 'info'\n   * */\n  type?: 'info' | 'warning' | 'critical' | 'success';\n  /** Message displayed in the toast notification. */\n  message?: string | JSX.Element;\n  /**\n   * The Toast notification will automatically close after a certain period of\n   * time given in milliseconds. If 'infinite' is provided, the user must close the toast.\n   * @defaultValue info and success: 8000, critical and warning: 'infinite'\n   * */\n  lifespan?: number | 'infinite';\n  /**\n   * Optional actions passed to the toast element, appended on the bottom left.\n   * Should only be used to either add a Button or a Link.\n   */\n  actions?: JSX.Element;\n  /**\n   * Live region roles\n   * @defaultValue info, success and warning: 'status', critical: 'alert'\n   */\n  role?: 'alert' | 'log' | 'status';\n  /**\n   * Position of toast\n   * @defaultValue 'bottom-left'\n   */\n  position?: 'bottom-right' | 'bottom-center' | 'bottom-left';\n}\n// #endregion Typings\n\n/**\n * Function to open a toast configuration.\n *\n * @returns the respective toast id\n * @public\n */\nexport function showToast({\n  id,\n  type = 'info',\n  role,\n  lifespan,\n  title,\n  message,\n  position = 'bottom-left',\n  actions,\n  className: consumerClassName,\n  style: consumerStyle,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-details': ariaDetails,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n  ...remainingProps\n}: ToastOptions): number | string {\n  // default role according to type\n  const defaultRole = type === 'critical' ? 'alert' : 'status';\n  // default lifespan according to type\n  const defaultAutoClose =\n    type === 'warning' || type === 'critical' ? false : 8000;\n  const autoClose = lifespan === 'infinite' ? false : lifespan;\n\n  return toast(\n    <Toast\n      type={type}\n      title={title}\n      message={message}\n      closeToast={() => undefined}\n      className={consumerClassName}\n      style={consumerStyle}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {actions}\n    </Toast>,\n    {\n      toastId: id,\n      autoClose: autoClose ?? defaultAutoClose,\n      role: role ?? defaultRole,\n      position,\n    },\n  );\n}\n\n/**\n * Function to close a single toast.\n *\n * @param id - id of the toast that should be dismissed\n * @public\n */\nexport function dismissToast(id: string | number): void {\n  toast.dismiss(id);\n}\n\n/**\n * Function to close all open toasts at once.\n * @public\n */\nexport function dismissAllToasts(): void {\n  toast.dismiss();\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,12 +1,12 @@
 import "./Toast.css";
-var toastCSS = "_yjszxq0-3-5-2";
-var toastFlexContainerCSS = "_yjszxq2-3-5-2";
-var toastIconCSS = "_yjszxq1-3-5-2";
-var toastTextCSS = "_yjszxq3-3-5-2";
+var flexContainer = "_yjszxq2-3-7-0";
+var icon = "_yjszxq1-3-7-0";
+var root = "_yjszxq0-3-7-0";
+var text = "_yjszxq3-3-7-0";
 export {
-  toastCSS,
-  toastFlexContainerCSS,
-  toastIconCSS,
-  toastTextCSS
+  flexContainer,
+  icon,
+  root,
+  text
 };
 //# sourceMappingURL=Toast.sty.js.map

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-5-2';\nexport var toastFlexContainerCSS = '_yjszxq2-3-5-2';\nexport var toastIconCSS = '_yjszxq1-3-5-2';\nexport var toastTextCSS = '_yjszxq3-3-5-2';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,eAAe;",
+  "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';"],
+  "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-5-2 {
+@keyframes _rxr5810-3-7-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-5-2 {
+@keyframes _rxr5811-3-7-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-5-2 {
+@keyframes _rxr5812-3-7-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,34 +22,34 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-5-2 {
+._rxr5813-3-7-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._rxr5813-3-5-2 .Toastify__toast-container {
+._rxr5813-3-7-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-5-2 .Toastify__toast-container--bottom-left {
+._rxr5813-3-7-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-._rxr5813-3-5-2 .Toastify__toast-container--bottom-right {
+._rxr5813-3-7-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-._rxr5813-3-5-2 .Toastify__toast-container--bottom-center {
+._rxr5813-3-7-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-._rxr5813-3-5-2 .Toastify__toast {
+._rxr5813-3-7-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-5-2 .Toastify__toast-body {
+._rxr5813-3-7-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-._rxr5813-3-5-2 .Toastify__toast-body > div {
+._rxr5813-3-7-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._rxr5813-3-5-2 .Toastify__toast-icon {
+._rxr5813-3-7-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-._rxr5813-3-5-2 .Toastify__progress-bar {
+._rxr5813-3-7-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -98,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-._rxr5813-3-5-2 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-5-2 1 forwards;
+._rxr5813-3-7-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-7-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-5-2;
+  animation-name: _rxr5810-3-7-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-5-2;
+  animation-name: _rxr5811-3-7-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-5-2";
+var root = "_rxr5813-3-7-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-5-2';"],
+  "sourcesContent": ["import './ToastContainer.css';\nexport var root = '_rxr5813-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }