@dynatrace/strato-components 0.85.41 → 0.85.50

package/esm/content/progress/ProgressBarValue.sty.js

@@ -1,7 +1,7 @@
 import "../../styles/ellipsis.css";
 import "./ProgressBarValue.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var progressBarValueCSS = _7a468({ defaultClassName: "ProgressBarValue__1ri4i7o0", variantClassNames: { variant: { onAccent: "ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1", primary: "ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2", success: "ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3", warning: "ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4", critical: "ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5", neutral: "ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6" }, size: { condensed: "ProgressBarValue_progressBarValueCSS_size_condensed__1ri4i7o7", "default": "ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8" }, childIsText: { true: "ProgressBarValue_progressBarValueCSS_childIsText_true__1ri4i7o9", false: "ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob ellipsis_ellipsisCSS__oqqp1n0"]] });
+var progressBarValueCSS = _7a468({ defaultClassName: "_1ri4i7o0", variantClassNames: { variant: { onAccent: "_1ri4i7o1", primary: "_1ri4i7o2", success: "_1ri4i7o3", warning: "_1ri4i7o4", critical: "_1ri4i7o5", neutral: "_1ri4i7o6" }, size: { condensed: "_1ri4i7o7", "default": "_1ri4i7o8" }, childIsText: { true: "_1ri4i7o9", false: "_1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7ob oqqp1n0"]] });
 export {
   progressBarValueCSS
 };

package/esm/content/progress/ProgressBarValue.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressBarValue.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'ProgressBarValue__1ri4i7o0',variantClassNames:{variant:{onAccent:'ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1',primary:'ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2',success:'ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3',warning:'ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4',critical:'ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5',neutral:'ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6'},size:{condensed:'ProgressBarValue_progressBarValueCSS_size_condensed__1ri4i7o7','default':'ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8'},childIsText:{true:'ProgressBarValue_progressBarValueCSS_childIsText_true__1ri4i7o9',false:'ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob ellipsis_ellipsisCSS__oqqp1n0']]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,8BAA6B,mBAAkB,EAAC,SAAQ,EAAC,UAAS,mEAAkE,SAAQ,kEAAiE,SAAQ,kEAAiE,SAAQ,kEAAiE,UAAS,mEAAkE,SAAQ,iEAAgE,GAAE,MAAK,EAAC,WAAU,iEAAgE,WAAU,8DAA6D,GAAE,aAAY,EAAC,MAAK,mEAAkE,OAAM,mEAAkE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,yFAAyF,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'_1ri4i7o0',variantClassNames:{variant:{onAccent:'_1ri4i7o1',primary:'_1ri4i7o2',success:'_1ri4i7o3',warning:'_1ri4i7o4',critical:'_1ri4i7o5',neutral:'_1ri4i7o6'},size:{condensed:'_1ri4i7o7','default':'_1ri4i7o8'},childIsText:{true:'_1ri4i7o9',false:'_1ri4i7oa'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'_1ri4i7ob oqqp1n0']]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,UAAS,aAAY,SAAQ,aAAY,SAAQ,aAAY,SAAQ,aAAY,UAAS,aAAY,SAAQ,YAAW,GAAE,MAAK,EAAC,WAAU,aAAY,WAAU,YAAW,GAAE,aAAY,EAAC,MAAK,aAAY,OAAM,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,mBAAmB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes ProgressCircle_circularIndeterminateKeyframes__kvldjh0 {
+@keyframes kvldjh0 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,47 +6,47 @@
     transform: rotate(360deg);
   }
 }
-.ProgressCircle_progressCircleRootCSS__kvldjh1 {
+.kvldjh1 {
   display: inline-block;
-  color: var(--vars_borderColor__17bwkb02);
+  color: var(--_17bwkb02);
 }
-.ProgressCircle_ProgressCircleSVGCSS__kvldjh2 {
+.kvldjh2 {
   display: block;
   transform: rotate(-90deg);
 }
-.ProgressCircle_progressCircleCSS__kvldjh3 {
+.kvldjh3 {
   stroke: currentColor;
   transform-origin: center;
 }
-.ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4 {
+.kvldjh4 {
   stroke-dasharray: 90 360;
   transform-origin: 50 50;
-  animation-name: ProgressCircle_circularIndeterminateKeyframes__kvldjh0;
+  animation-name: kvldjh0;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-.ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5 {
+.kvldjh5 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-.ProgressCircle_progressCircleBackgroundCSS__kvldjh6 {
+.kvldjh6 {
   stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
 }
-.ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7 {
+.kvldjh7 {
   stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-.ProgressCircle_progressCircleContainerCSS__kvldjhd {
+.kvldjhd {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe {
+.kvldjhe {
   gap: var(--dt-spacings-size-8, 8px);
 }
-.ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf {
+.kvldjhf {
   gap: var(--dt-spacings-size-12, 12px);
 }
-.ProgressCircle_progressCircleChildCSS__kvldjhg {
-  color: var(--vars_text__6levse0);
+.kvldjhg {
+  color: var(--_6levse0);
 }

package/esm/content/progress/ProgressCircle.sty.js

@@ -2,12 +2,12 @@ import "../../styles/colorUtils.css";
 import "../../styles/container.css";
 import "./ProgressCircle.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var ProgressCircleSVGCSS = "ProgressCircle_ProgressCircleSVGCSS__kvldjh2";
-var progressCircleBackgroundCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleBackgroundCSS__kvldjh6", variantClassNames: { variant: { onAccent: "ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7", primary: "ProgressCircle_progressCircleBackgroundCSS_variant_primary__kvldjh8", success: "ProgressCircle_progressCircleBackgroundCSS_variant_success__kvldjh9", warning: "ProgressCircle_progressCircleBackgroundCSS_variant_warning__kvldjha", critical: "ProgressCircle_progressCircleBackgroundCSS_variant_critical__kvldjhb", neutral: "ProgressCircle_progressCircleBackgroundCSS_variant_neutral__kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleCSS__kvldjh3", variantClassNames: { indeterminate: { true: "ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4", false: "ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleChildCSS = "ProgressCircle_progressCircleChildCSS__kvldjhg";
-var progressCircleContainerCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleContainerCSS__kvldjhd", variantClassNames: { size: { small: "ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe", large: "ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleRootCSS = "ProgressCircle_progressCircleRootCSS__kvldjh1";
+var ProgressCircleSVGCSS = "kvldjh2";
+var progressCircleBackgroundCSS = _7a468({ defaultClassName: "kvldjh6", variantClassNames: { variant: { onAccent: "kvldjh7", primary: "kvldjh8", success: "kvldjh9", warning: "kvldjha", critical: "kvldjhb", neutral: "kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleCSS = _7a468({ defaultClassName: "kvldjh3", variantClassNames: { indeterminate: { true: "kvldjh4", false: "kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleChildCSS = "kvldjhg";
+var progressCircleContainerCSS = _7a468({ defaultClassName: "kvldjhd", variantClassNames: { size: { small: "kvldjhe", large: "kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleRootCSS = "kvldjh1";
 export {
   ProgressCircleSVGCSS,
   progressCircleBackgroundCSS,

package/esm/content/progress/ProgressCircle.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressCircle.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport '../../styles/container.css';\nimport './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ProgressCircleSVGCSS = 'ProgressCircle_ProgressCircleSVGCSS__kvldjh2';\nexport var progressCircleBackgroundCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleBackgroundCSS__kvldjh6',variantClassNames:{variant:{onAccent:'ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7',primary:'ProgressCircle_progressCircleBackgroundCSS_variant_primary__kvldjh8',success:'ProgressCircle_progressCircleBackgroundCSS_variant_success__kvldjh9',warning:'ProgressCircle_progressCircleBackgroundCSS_variant_warning__kvldjha',critical:'ProgressCircle_progressCircleBackgroundCSS_variant_critical__kvldjhb',neutral:'ProgressCircle_progressCircleBackgroundCSS_variant_neutral__kvldjhc'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleCSS__kvldjh3',variantClassNames:{indeterminate:{true:'ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4',false:'ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleChildCSS = 'ProgressCircle_progressCircleChildCSS__kvldjhg';\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleContainerCSS__kvldjhd',variantClassNames:{size:{small:'ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe',large:'ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleRootCSS = 'ProgressCircle_progressCircleRootCSS__kvldjh1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,uDAAsD,mBAAkB,EAAC,SAAQ,EAAC,UAAS,wEAAuE,SAAQ,uEAAsE,SAAQ,uEAAsE,SAAQ,uEAAsE,UAAS,wEAAuE,SAAQ,sEAAqE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9oB,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,6CAA4C,mBAAkB,EAAC,eAAc,EAAC,MAAK,gEAA+D,OAAM,gEAA+D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClT,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,sDAAqD,mBAAkB,EAAC,MAAK,EAAC,OAAM,iEAAgE,OAAM,gEAA+D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7T,IAAI,wBAAwB;",
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport '../../styles/container.css';\nimport './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ProgressCircleSVGCSS = 'kvldjh2';\nexport var progressCircleBackgroundCSS = _7a468({defaultClassName:'kvldjh6',variantClassNames:{variant:{onAccent:'kvldjh7',primary:'kvldjh8',success:'kvldjh9',warning:'kvldjha',critical:'kvldjhb',neutral:'kvldjhc'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleCSS = _7a468({defaultClassName:'kvldjh3',variantClassNames:{indeterminate:{true:'kvldjh4',false:'kvldjh5'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleChildCSS = 'kvldjhg';\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'kvldjhd',variantClassNames:{size:{small:'kvldjhe',large:'kvldjhf'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleRootCSS = 'kvldjh1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,UAAS,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,SAAQ,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxP,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,eAAc,EAAC,MAAK,WAAU,OAAM,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrK,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,MAAK,EAAC,OAAM,WAAU,OAAM,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,wBAAwB;",
   "names": []
 }

package/esm/content/skeleton/Skeleton.css

@@ -1,4 +1,4 @@
-@keyframes Skeleton_skeletonAnimationKeyframes__1a1ozfd0 {
+@keyframes _1a1ozfd0 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,12 +6,12 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-.Skeleton_skeletonPlaceholderCSS__1a1ozfd1 {
+._1a1ozfd1 {
   position: relative;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
 }
-.Skeleton_skeletonPlaceholderCSS__1a1ozfd1:after {
+._1a1ozfd1:after {
   content: "";
   position: absolute;
   top: 0;
@@ -21,13 +21,13 @@
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
   animation-iteration-count: infinite;
   transform-origin: left center;
-  animation-name: Skeleton_skeletonAnimationKeyframes__1a1ozfd0;
+  animation-name: _1a1ozfd0;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-.Skeleton_skeletonPlaceholderCSS_variant_default__1a1ozfd2 {
+._1a1ozfd2 {
   border-radius: var(--dt-borders-radius-container-subdued, 8px);
 }
-.Skeleton_skeletonPlaceholderCSS_variant_rounded__1a1ozfd3 {
+._1a1ozfd3 {
   border-radius: 9999px;
 }

package/esm/content/skeleton/Skeleton.sty.js

@@ -1,6 +1,6 @@
 import "./Skeleton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var skeletonPlaceholderCSS = _7a468({ defaultClassName: "Skeleton_skeletonPlaceholderCSS__1a1ozfd1", variantClassNames: { variant: { "default": "Skeleton_skeletonPlaceholderCSS_variant_default__1a1ozfd2", rounded: "Skeleton_skeletonPlaceholderCSS_variant_rounded__1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonPlaceholderCSS = _7a468({ defaultClassName: "_1a1ozfd1", variantClassNames: { variant: { "default": "_1a1ozfd2", rounded: "_1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   skeletonPlaceholderCSS
 };

package/esm/content/skeleton/Skeleton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/skeleton/Skeleton.css.ts"],
-  "sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'Skeleton_skeletonPlaceholderCSS__1a1ozfd1',variantClassNames:{variant:{'default':'Skeleton_skeletonPlaceholderCSS_variant_default__1a1ozfd2',rounded:'Skeleton_skeletonPlaceholderCSS_variant_rounded__1a1ozfd3'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,6CAA4C,mBAAkB,EAAC,SAAQ,EAAC,WAAU,6DAA4D,SAAQ,4DAA2D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './Skeleton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var skeletonPlaceholderCSS = _7a468({defaultClassName:'_1a1ozfd1',variantClassNames:{variant:{'default':'_1a1ozfd2',rounded:'_1a1ozfd3'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,WAAU,aAAY,SAAQ,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/core/components/app-root/AppRoot.js

@@ -33,7 +33,7 @@ const AppRoot = /* @__PURE__ */ forwardRef(
     let timezone = getTimezone();
     try {
       new Intl.DateTimeFormat(language, { timeZone: timezone });
-    } catch (error) {
+    } catch {
       timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     }
     useLayoutEffect(() => {

package/esm/core/components/app-root/AppRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // Right now the font css file is not automatically injected into\n      // the app index.html file. And as there are no static ways to @import\n      // css with vanilla extract, we need to inject the link here.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAIpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // Right now the font css file is not automatically injected into\n      // the app index.html file. And as there are no static ways to @import\n      // css with vanilla extract, we need to inject the link here.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,QAAQ;AAGN,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAIpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
   "names": []
 }

package/esm/core/styles/focusRing.css

@@ -1,88 +1,88 @@
-.focusRing_focusRingCSS__z2r50s3 {
+.z2r50s3 {
   outline: none;
 }
-.focusRing_focusRingCSS__z2r50s3:focus-visible {
+.z2r50s3:focus-visible {
   outline: none;
 }
-.focusRing_focusRingCSS_minimal_true__z2r50s4 {
+.z2r50s4 {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
-  background-color: var(--backgroundColor__z2r50s2);
-}
-.focusRing_focusRingCSS_minimal_false__z2r50s5.focusRing_focusRingCSS_minimal_false__z2r50s5 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
-}
-.focusRing_focusRingCSS_variant_neutral__z2r50s6 {
-  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.focusRing_focusRingCSS_variant_primary__z2r50s7 {
-  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.focusRing_focusRingCSS_variant_success__z2r50s8 {
-  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.focusRing_focusRingCSS_variant_warning__z2r50s9 {
-  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.focusRing_focusRingCSS_variant_critical__z2r50sa {
-  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.focusRing_focusRingCSS_variant_onAccent__z2r50sb {
-  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
-}
-.focusRing_focusRingFocusWithinCSS__z2r50sc:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
+  background-color: var(--z2r50s2);
+}
+.z2r50s5.z2r50s5 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
+}
+.z2r50s6 {
+  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.z2r50s7 {
+  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.z2r50s8 {
+  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.z2r50s9 {
+  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.z2r50sa {
+  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.z2r50sb {
+  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}
+.z2r50sc:focus-within {
   outline: none;
   :focus-visible {
     outline: none;
   }
 }
-.focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd:focus-within {
+.z2r50sd:focus-within {
   border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
-  background-color: var(--backgroundColor__z2r50s2);
-}
-.focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
-}
-.focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf {
-  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
-  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
-}
-.focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg {
-  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
-  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
-}
-.focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh {
-  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
-  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
-}
-.focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si {
-  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
-  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
-}
-.focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj {
-  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
-  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
-}
-.focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk {
-  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
-  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
+  background-color: var(--z2r50s2);
+}
+.z2r50se:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
+}
+.z2r50sf {
+  --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.z2r50sg {
+  --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.z2r50sh {
+  --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.z2r50si {
+  --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.z2r50sj {
+  --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.z2r50sk {
+  --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
 }

package/esm/core/styles/focusRing.sty.js

@@ -1,7 +1,7 @@
 import "./focusRing.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var focusRingCSS = _7a468({ defaultClassName: "focusRing_focusRingCSS__z2r50s3", variantClassNames: { minimal: { true: "focusRing_focusRingCSS_minimal_true__z2r50s4", false: "focusRing_focusRingCSS_minimal_false__z2r50s5" }, variant: { neutral: "focusRing_focusRingCSS_variant_neutral__z2r50s6", primary: "focusRing_focusRingCSS_variant_primary__z2r50s7", success: "focusRing_focusRingCSS_variant_success__z2r50s8", warning: "focusRing_focusRingCSS_variant_warning__z2r50s9", critical: "focusRing_focusRingCSS_variant_critical__z2r50sa", onAccent: "focusRing_focusRingCSS_variant_onAccent__z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = _7a468({ defaultClassName: "focusRing_focusRingFocusWithinCSS__z2r50sc", variantClassNames: { minimal: { true: "focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd", false: "focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se" }, variant: { neutral: "focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf", primary: "focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg", success: "focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh", warning: "focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si", critical: "focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj", onAccent: "focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = _7a468({ defaultClassName: "z2r50s3", variantClassNames: { minimal: { true: "z2r50s4", false: "z2r50s5" }, variant: { neutral: "z2r50s6", primary: "z2r50s7", success: "z2r50s8", warning: "z2r50s9", critical: "z2r50sa", onAccent: "z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = _7a468({ defaultClassName: "z2r50sc", variantClassNames: { minimal: { true: "z2r50sd", false: "z2r50se" }, variant: { neutral: "z2r50sf", primary: "z2r50sg", success: "z2r50sh", warning: "z2r50si", critical: "z2r50sj", onAccent: "z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   focusRingCSS,
   focusRingFocusWithinCSS

package/esm/core/styles/focusRing.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/focusRing.css.ts"],
-  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'focusRing_focusRingCSS__z2r50s3',variantClassNames:{minimal:{true:'focusRing_focusRingCSS_minimal_true__z2r50s4',false:'focusRing_focusRingCSS_minimal_false__z2r50s5'},variant:{neutral:'focusRing_focusRingCSS_variant_neutral__z2r50s6',primary:'focusRing_focusRingCSS_variant_primary__z2r50s7',success:'focusRing_focusRingCSS_variant_success__z2r50s8',warning:'focusRing_focusRingCSS_variant_warning__z2r50s9',critical:'focusRing_focusRingCSS_variant_critical__z2r50sa',onAccent:'focusRing_focusRingCSS_variant_onAccent__z2r50sb'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'focusRing_focusRingFocusWithinCSS__z2r50sc',variantClassNames:{minimal:{true:'focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd',false:'focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se'},variant:{neutral:'focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf',primary:'focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg',success:'focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh',warning:'focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si',critical:'focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj',onAccent:'focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mCAAkC,mBAAkB,EAAC,SAAQ,EAAC,MAAK,gDAA+C,OAAM,gDAA+C,GAAE,SAAQ,EAAC,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,UAAS,oDAAmD,UAAS,mDAAkD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvmB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,8CAA6C,mBAAkB,EAAC,SAAQ,EAAC,MAAK,2DAA0D,OAAM,2DAA0D,GAAE,SAAQ,EAAC,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,UAAS,+DAA8D,UAAS,8DAA6D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'z2r50s3',variantClassNames:{minimal:{true:'z2r50s4',false:'z2r50s5'},variant:{neutral:'z2r50s6',primary:'z2r50s7',success:'z2r50s8',warning:'z2r50s9',critical:'z2r50sa',onAccent:'z2r50sb'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'z2r50sc',variantClassNames:{minimal:{true:'z2r50sd',false:'z2r50se'},variant:{neutral:'z2r50sf',primary:'z2r50sg',success:'z2r50sh',warning:'z2r50si',critical:'z2r50sj',onAccent:'z2r50sk'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,MAAK,WAAU,OAAM,UAAS,GAAE,SAAQ,EAAC,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,UAAS,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClR,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,WAAU,mBAAkB,EAAC,SAAQ,EAAC,MAAK,WAAU,OAAM,UAAS,GAAE,SAAQ,EAAC,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,SAAQ,WAAU,UAAS,WAAU,UAAS,UAAS,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/core/utils/_is-string-children.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/utils/_is-string-children.ts"],
-  "sourcesContent": ["import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\n/**\n * Returns whether children only consist of text nodes.\n * @internal\n */\nexport function isStringChildren(children: React.ReactNode): boolean {\n  const childrenArray = React.Children.toArray(children);\n\n  if (!childrenArray.some(isElement)) {\n    return true; // All children are strings\n  }\n\n  return childrenArray.every(\n    (child) =>\n      !isElement(child) ||\n      (isElement(child) && child.type && child.type === FormattedMessage),\n  );\n}\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAMnB,SAAS,iBAAiB,UAAoC;AACnE,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AAErD,MAAI,CAAC,cAAc,KAAK,SAAS,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,SAAO,cAAc;AAAA,IACnB,CAAC,UACC,CAAC,UAAU,KAAK,KACf,UAAU,KAAK,KAAK,MAAM,QAAQ,MAAM,SAAS;AAAA,EACtD;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\n/**\n * Returns whether children only consist of text nodes.\n * @internal\n */\nexport function isStringChildren(\n  children: React.ReactNode,\n): children is string {\n  const childrenArray = React.Children.toArray(children);\n\n  if (!childrenArray.some(isElement)) {\n    return true; // All children are strings\n  }\n\n  return childrenArray.every(\n    (child) =>\n      !isElement(child) ||\n      (isElement(child) && child.type && child.type === FormattedMessage),\n  );\n}\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAMnB,SAAS,iBACd,UACoB;AACpB,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AAErD,MAAI,CAAC,cAAc,KAAK,SAAS,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,SAAO,cAAc;AAAA,IACnB,CAAC,UACC,CAAC,UAAU,KAAK,KACf,UAAU,KAAK,KAAK,MAAM,QAAQ,MAAM,SAAS;AAAA,EACtD;AACF;",
   "names": []
 }

package/esm/core/utils/colorUtils.css

@@ -1,80 +1,80 @@
-.colorUtils_colorUtilsCSS_color_critical__k096v44 {
-  --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
-  --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
-  --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+.k096v44 {
+  --k096v40: var(--dt-colors-text-critical-default, #b80031);
+  --k096v41: var(--dt-colors-icon-critical-default, #b80031);
+  --k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
 }
-.colorUtils_colorUtilsCSS_color_neutral__k096v45 {
-  --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
-  --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
-  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+.k096v45 {
+  --k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
+  --k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
 }
-.colorUtils_colorUtilsCSS_color_primary__k096v46 {
-  --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
-  --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
-  --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+.k096v46 {
+  --k096v40: var(--dt-colors-text-primary-default, #454cc9);
+  --k096v41: var(--dt-colors-icon-primary-default, #454cc9);
+  --k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
 }
-.colorUtils_colorUtilsCSS_color_success__k096v47 {
-  --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
-  --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
-  --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
+.k096v47 {
+  --k096v40: var(--dt-colors-text-success-default, #2c6360);
+  --k096v41: var(--dt-colors-icon-success-default, #2c6360);
+  --k096v42: var(--dt-colors-border-success-default, #cad6d7);
 }
-.colorUtils_colorUtilsCSS_color_warning__k096v48 {
-  --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
-  --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
-  --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+.k096v48 {
+  --k096v40: var(--dt-colors-text-warning-default, #805100);
+  --k096v41: var(--dt-colors-icon-warning-default, #805100);
+  --k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
 }
-.colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
-  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+.k096v49 {
+  --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }
-.colorUtils_colorUtilsCSS_compound_0__k096v4e {
-  --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+.k096v4e {
+  --k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --k096v42: var(--dt-colors-border-primary-accent, #454cc9);
 }
-.colorUtils_colorUtilsCSS_compound_1__k096v4f {
-  --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
+.k096v4f {
+  --k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --k096v42: var(--dt-colors-border-success-accent, #2c6360);
 }
-.colorUtils_colorUtilsCSS_compound_2__k096v4g {
-  --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
-  --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
-  --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
+.k096v4g {
+  --k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --k096v42: var(--dt-colors-border-warning-accent, #805100);
 }
-.colorUtils_colorUtilsCSS_compound_3__k096v4h {
-  --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
+.k096v4h {
+  --k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --k096v42: var(--dt-colors-border-critical-accent, #b80031);
 }
-.colorUtils_colorUtilsCSS_compound_4__k096v4i {
-  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
+.k096v4i {
+  --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --k096v42: var(--dt-colors-border-neutral-accent, #545587);
 }
-.colorUtils_colorUtilsCSS_compound_5__k096v4j {
-  --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
-  --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
-  --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+.k096v4j {
+  --k096v40: var(--dt-colors-text-primary-disabled, #54558780);
+  --k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
+  --k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
 }
-.colorUtils_colorUtilsCSS_compound_6__k096v4k {
-  --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
-  --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
-  --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+.k096v4k {
+  --k096v40: var(--dt-colors-text-success-disabled, #54558780);
+  --k096v41: var(--dt-colors-icon-success-disabled, #54558780);
+  --k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
 }
-.colorUtils_colorUtilsCSS_compound_7__k096v4l {
-  --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
-  --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
-  --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+.k096v4l {
+  --k096v40: var(--dt-colors-text-warning-disabled, #54558780);
+  --k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
+  --k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
 }
-.colorUtils_colorUtilsCSS_compound_8__k096v4m {
-  --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
-  --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
-  --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+.k096v4m {
+  --k096v40: var(--dt-colors-text-critical-disabled, #54558780);
+  --k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
+  --k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
 }
-.colorUtils_colorUtilsCSS_compound_9__k096v4n {
-  --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
-  --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
-  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+.k096v4n {
+  --k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
+  --k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
 }