@dynatrace/strato-components 3.4.1 → 3.5.2

package/content/code-snippet/CodeHighlight.css

@@ -1,4 +1,4 @@
-._1jmxup80-3-4-1 {
+._1jmxup80-3-5-2 {
   margin: 0;
   padding: 0;
   overflow: visible;
@@ -9,19 +9,19 @@
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup81-3-4-1 {
+._1jmxup81-3-5-2 {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   line-height: var(--dt-typography-code-base-default-line-height, 1.4285714286);
   min-height: calc(2 * var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-20, 20px));
 }
-._1jmxup82-3-4-1 {
+._1jmxup82-3-5-2 {
   font-family: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-small-default-size, 12px);
   line-height: var(--dt-typography-code-small-default-line-height, 1.333333333);
   min-height: calc(2 * var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-16, 16px));
 }
-._1jmxup83-3-4-1 {
+._1jmxup83-3-5-2 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -33,72 +33,75 @@
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   user-select: none;
 }
-._1jmxup84-3-4-1 {
+._1jgl8s50-3-5-2 ._1jmxup83-3-5-2 {
+  border-right-width: var(--dt-borders-width-default, 1px);
+}
+._1jmxup84-3-5-2 {
   white-space: nowrap;
 }
-._1jmxup85-3-4-1 {
+._1jmxup85-3-5-2 {
   white-space: pre;
 }
-._1jmxup86-3-4-1 {
+._1jmxup86-3-5-2 {
   display: table-row;
 }
-._1jmxup87-3-4-1 {
+._1jmxup87-3-5-2 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup87-3-4-1::before {
+._1jmxup87-3-5-2::before {
   content: attr(data-linenumber);
 }
-._1jmxup81-3-4-1 ._1jmxup86-3-4-1:first-child ._1jmxup87-3-4-1 {
+._1jmxup81-3-5-2 ._1jmxup86-3-5-2:first-child ._1jmxup87-3-5-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-1 ._1jmxup86-3-4-1:first-child ._1jmxup87-3-4-1 {
+._1jmxup82-3-5-2 ._1jmxup86-3-5-2:first-child ._1jmxup87-3-5-2 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-4-1 ._1jmxup86-3-4-1:last-child ._1jmxup87-3-4-1 {
+._1jmxup81-3-5-2 ._1jmxup86-3-5-2:last-child ._1jmxup87-3-5-2 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-1 ._1jmxup86-3-4-1:last-child ._1jmxup87-3-4-1 {
+._1jmxup82-3-5-2 ._1jmxup86-3-5-2:last-child ._1jmxup87-3-5-2 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup88-3-4-1 {
+._1jmxup88-3-5-2 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup89-3-4-1 {
+._1jmxup89-3-5-2 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup8b-3-4-1 {
+._1jmxup8b-3-5-2 {
   white-space: pre;
 }
-._1jmxup8c-3-4-1 {
+._1jmxup8c-3-5-2 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup81-3-4-1 ._1jmxup86-3-4-1:first-child ._1jmxup8c-3-4-1 {
+._1jmxup81-3-5-2 ._1jmxup86-3-5-2:first-child ._1jmxup8c-3-5-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-1 ._1jmxup86-3-4-1:first-child ._1jmxup8c-3-4-1 {
+._1jmxup82-3-5-2 ._1jmxup86-3-5-2:first-child ._1jmxup8c-3-5-2 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-4-1 ._1jmxup86-3-4-1:last-child ._1jmxup8c-3-4-1 {
+._1jmxup81-3-5-2 ._1jmxup86-3-5-2:last-child ._1jmxup8c-3-5-2 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-1 ._1jmxup86-3-4-1:last-child ._1jmxup8c-3-4-1 {
+._1jmxup82-3-5-2 ._1jmxup86-3-5-2:last-child ._1jmxup8c-3-5-2 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8d-3-4-1 {
+._1jmxup8d-3-5-2 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8e-3-4-1 {
+._1jmxup8e-3-5-2 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8g-3-4-1 {
+._1jmxup8g-3-5-2 {
   white-space: pre;
 }

package/content/code-snippet/CodeHighlight.sty.js

@@ -24,10 +24,11 @@ __export(CodeHighlight_css_exports, {
   lineNumberContainer: () => lineNumberContainer
 });
 module.exports = __toCommonJS(CodeHighlight_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-4-1", variantClassNames: { size: { "default": "_1jmxup81-3-4-1", condensed: "_1jmxup82-3-4-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup86-3-4-1";
-var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8c-3-4-1", variantClassNames: { size: { "default": "_1jmxup8d-3-4-1", condensed: "_1jmxup8e-3-4-1" }, multiLine: { false: "_1jmxup8f-3-4-1", true: "_1jmxup8g-3-4-1" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup87-3-4-1", variantClassNames: { size: { "default": "_1jmxup88-3-4-1", condensed: "_1jmxup89-3-4-1" }, multiLine: { false: "_1jmxup8a-3-4-1", true: "_1jmxup8b-3-4-1" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup83-3-4-1", variantClassNames: { multiLine: { false: "_1jmxup84-3-4-1", true: "_1jmxup85-3-4-1" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
+var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-5-2", variantClassNames: { size: { "default": "_1jmxup81-3-5-2", condensed: "_1jmxup82-3-5-2" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup86-3-5-2";
+var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8c-3-5-2", variantClassNames: { size: { "default": "_1jmxup8d-3-5-2", condensed: "_1jmxup8e-3-5-2" }, multiLine: { false: "_1jmxup8f-3-5-2", true: "_1jmxup8g-3-5-2" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup87-3-5-2", variantClassNames: { size: { "default": "_1jmxup88-3-5-2", condensed: "_1jmxup89-3-5-2" }, multiLine: { false: "_1jmxup8a-3-5-2", true: "_1jmxup8b-3-5-2" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup83-3-5-2", variantClassNames: { multiLine: { false: "_1jmxup84-3-5-2", true: "_1jmxup85-3-5-2" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });

package/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a0-3-4-1 {
+._17pa72a0-3-5-2 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,7 +9,10 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._17pa72a1-3-4-1 {
+._1jgl8s50-3-5-2 ._17pa72a0-3-5-2 {
+  border-width: var(--dt-borders-width-default, 1px);
+}
+._17pa72a1-3-5-2 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -18,9 +21,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a2-3-4-1 {
+._17pa72a2-3-5-2 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a3-3-4-1 {
+._17pa72a3-3-5-2 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/content/code-snippet/CodeSnippet.sty.js

@@ -21,7 +21,8 @@ __export(CodeSnippet_css_exports, {
   wrapper: () => wrapper
 });
 module.exports = __toCommonJS(CodeSnippet_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_CodeSnippet_css_ts_vanilla = require("./CodeSnippet.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-4-1", variantClassNames: { size: { "default": "_17pa72a2-3-4-1", condensed: "_17pa72a3-3-4-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-4-1";
+var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-5-2", variantClassNames: { size: { "default": "_17pa72a2-3-5-2", condensed: "_17pa72a3-3-5-2" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a0-3-5-2";

package/content/code-snippet/HighlightExtended.js

@@ -38,6 +38,20 @@ var import_logging = require("../../core/utils/logging.js");
 var import_prism_theme = require("../../core/utils/prism-theme.js");
 (typeof global !== "undefined" ? global : window).Prism = import_prism_react_renderer.Prism;
 import_prism_react_renderer.Prism.languages.dql = import_prism_dql_language.prismDqlLanguage;
+const SHORT_HEX_ID_TOKEN_NAME = "strato-short-hash";
+const SHORT_HEX_ID_PATTERN = /\b[a-f0-9]{16}\b/i;
+function enhancePrismLogLanguage() {
+  const logLanguage = import_prism_react_renderer.Prism.languages.log;
+  if (!logLanguage || SHORT_HEX_ID_TOKEN_NAME in logLanguage) {
+    return;
+  }
+  import_prism_react_renderer.Prism.languages.insertBefore("log", "property", {
+    [SHORT_HEX_ID_TOKEN_NAME]: {
+      pattern: SHORT_HEX_ID_PATTERN,
+      alias: "constant"
+    }
+  });
+}
 const additionalLanguageImports = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -62,12 +76,20 @@ const HighlightExtended = (props) => {
   (0, import_react.useEffect)(() => {
     if (language && additionalLanguageImports[language] && !loadedLanguages[language]) {
       additionalLanguageImports[language]().then(() => {
+        if (language === "log") {
+          enhancePrismLogLanguage();
+        }
         setLoadedLanguages((prev) => ({ ...prev, [language]: true }));
       }).catch((error) => {
         (0, import_logging.devLog)(`Failed to load language '${language}':`, error);
       });
     }
   }, [language, loadedLanguages]);
+  (0, import_react.useEffect)(() => {
+    if (language === "log" && loadedLanguages.log) {
+      enhancePrismLogLanguage();
+    }
+  }, [language, loadedLanguages.log]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_prism_react_renderer.Highlight,
     {

package/content/code-snippet/prism-dql-language.d.ts

@@ -53,6 +53,7 @@ export declare const prismDqlLanguage: {
                         alias: string;
                     };
                     number: RegExp;
+                    boolean: RegExp;
                     parameterName: {
                         pattern: RegExp;
                         alias: string;

package/content/code-snippet/prism-dql-language.js

@@ -20,9 +20,10 @@ __export(prism_dql_language_exports, {
   prismDqlLanguage: () => prismDqlLanguage
 });
 module.exports = __toCommonJS(prism_dql_language_exports);
+var import_dql_common = require("../../core/dql/dql-common.js");
 const comments = {
   comment: {
-    // All characters except for newline,carriage return, form feed, vertical tab characters
+    // All characters except for newline, carriage return, form feed, vertical tab characters
     pattern: /\/\/[^\n\r\v\f]*/,
     greedy: true
   },
@@ -35,6 +36,10 @@ const comments = {
 const stringPattern = /"(?:[^"\\]|\\.)*"/m;
 const backtickStringPattern = /`(?:[^`\\]|\\.)*`/m;
 const tripleQuoteStringPattern = /"""[\s\S]*"""/m;
+const dqlCommandNamePattern = new RegExp(
+  `\\b(?:${import_dql_common.sortedDqlCommands.join("|")})\\b`,
+  "i"
+);
 const commandNamePattern = /[A-Za-z]+/;
 const commandParametersPattern = new RegExp(
   `(${commandNamePattern.source})(?:${stringPattern.source}|[^|])*`
@@ -45,7 +50,7 @@ const commandPattern = new RegExp(
 );
 const commandName = {
   commandName: {
-    pattern: commandNamePattern,
+    pattern: dqlCommandNamePattern,
     alias: "keyword"
   }
 };
@@ -80,12 +85,17 @@ const prismDqlLanguage = {
             pattern: backtickStringPattern,
             alias: "string"
           },
-          number: /\b\d+(?:\.\d+)?\b/,
-          // Match standalone numbers not surrounded by words
-          parameterName: { pattern: /\w+:/, alias: "variable" },
+          number: new RegExp(`\\b\\d+(?:\\.\\d+)?${import_dql_common.dqlUnitSuffixPattern}?\\b`),
+          // Match numbers with optional unit suffix
+          boolean: import_dql_common.booleanLiteralPattern,
+          // Match boolean literals (true/false)
+          parameterName: { pattern: import_dql_common.parameterNamePattern, alias: "variable" },
           ...comments,
           commandName: {
-            pattern: new RegExp(`(\\[\\s*)${commandNamePattern.source}`),
+            pattern: new RegExp(
+              `(\\[\\s*)${dqlCommandNamePattern.source}`,
+              "i"
+            ),
             lookbehind: true,
             alias: "keyword"
           }

package/content/empty-state/EmptyState.css

@@ -1,104 +1,104 @@
-._1os652u1-3-4-1 {
+._1os652u1-3-5-2 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u2-3-4-1 {
+._1os652u2-3-5-2 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u3-3-4-1 {
+._1os652u3-3-5-2 {
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
   gap: var(--dt-spacings-size-64, 64px);
 }
-._1os652u4-3-4-1 {
+._1os652u4-3-5-2 {
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: var(--dt-spacings-size-0, 0);
 }
-._1os652u1-3-4-1 ._1os652u5-3-4-1 {
+._1os652u1-3-5-2 ._1os652u5-3-5-2 {
   margin-bottom: var(--dt-spacings-size-8, 8px);
   height: 128px;
   width: 128px;
 }
-._1os652u2-3-4-1 ._1os652u5-3-4-1 {
+._1os652u2-3-5-2 ._1os652u5-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
   height: 192px;
   width: 192px;
 }
-._1os652u3-3-4-1 ._1os652u5-3-4-1 {
+._1os652u3-3-5-2 ._1os652u5-3-5-2 {
   margin-bottom: var(--dt-spacings-size-0, 0);
   height: 320px;
   width: 320px;
 }
-._1os652u4-3-4-1 ._1os652u5-3-4-1 {
+._1os652u4-3-5-2 ._1os652u5-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
   height: 320px;
   width: 320px;
 }
-._1os652u1-3-4-1 ._1os652u6-3-4-1 {
+._1os652u1-3-5-2 ._1os652u6-3-5-2 {
   align-items: center;
 }
-._1os652u2-3-4-1 ._1os652u6-3-4-1 {
+._1os652u2-3-5-2 ._1os652u6-3-5-2 {
   align-items: center;
 }
-._1os652u3-3-4-1 ._1os652u6-3-4-1 {
+._1os652u3-3-5-2 ._1os652u6-3-5-2 {
   align-items: flex-start;
 }
-._1os652u4-3-4-1 ._1os652u6-3-4-1 {
+._1os652u4-3-5-2 ._1os652u6-3-5-2 {
   align-items: center;
 }
-._1os652u1-3-4-1 ._1os652u7-3-4-1 {
+._1os652u1-3-5-2 ._1os652u7-3-5-2 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1os652u2-3-4-1 ._1os652u7-3-4-1 {
+._1os652u2-3-5-2 ._1os652u7-3-5-2 {
   margin-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1os652u3-3-4-1 ._1os652u7-3-4-1 {
+._1os652u3-3-5-2 ._1os652u7-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u4-3-4-1 ._1os652u7-3-4-1 {
+._1os652u4-3-5-2 ._1os652u7-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u1-3-4-1 ._1os652u8-3-4-1 {
+._1os652u1-3-5-2 ._1os652u8-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-4-1 ._1os652u8-3-4-1 {
+._1os652u2-3-5-2 ._1os652u8-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u3-3-4-1 ._1os652u8-3-4-1 {
+._1os652u3-3-5-2 ._1os652u8-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-4-1 ._1os652u8-3-4-1 {
+._1os652u4-3-5-2 ._1os652u8-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-4-1 ._1os652u9-3-4-1 {
+._1os652u1-3-5-2 ._1os652u9-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-4-1 ._1os652u9-3-4-1 {
+._1os652u2-3-5-2 ._1os652u9-3-5-2 {
   margin-bottom: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-4-1 ._1os652u9-3-4-1 {
+._1os652u3-3-5-2 ._1os652u9-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-4-1 ._1os652u9-3-4-1 {
+._1os652u4-3-5-2 ._1os652u9-3-5-2 {
   margin-bottom: var(--dt-spacings-size-32, 32px);
 }
-._1os652u1-3-4-1 ._1os652ua-3-4-1 {
+._1os652u1-3-5-2 ._1os652ua-3-5-2 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u2-3-4-1 ._1os652ua-3-4-1 {
+._1os652u2-3-5-2 ._1os652ua-3-5-2 {
   margin-top: var(--dt-spacings-size-16, 16px);
 }
-._1os652u3-3-4-1 ._1os652ua-3-4-1 {
+._1os652u3-3-5-2 ._1os652ua-3-5-2 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }
-._1os652u4-3-4-1 ._1os652ua-3-4-1 {
+._1os652u4-3-5-2 ._1os652ua-3-5-2 {
   margin-top: var(--dt-spacings-size-32, 32px);
 }

package/content/empty-state/EmptyState.sty.js

@@ -28,10 +28,10 @@ __export(EmptyState_css_exports, {
 module.exports = __toCommonJS(EmptyState_css_exports);
 var import_EmptyState_css_ts_vanilla = require("./EmptyState.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var actionsSlotCss = "_1os652u9-3-4-1";
-var contentContainerCss = "_1os652u6-3-4-1";
-var detailsSlotCss = "_1os652u8-3-4-1";
-var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-4-1", variantClassNames: { size: { small: "_1os652u1-3-4-1", "default": "_1os652u2-3-4-1", large: "_1os652u3-3-4-1", largeResponsive: "_1os652u4-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var footerSlotCss = "_1os652ua-3-4-1";
-var titleSlotCss = "_1os652u7-3-4-1";
-var visualSlotCss = "_1os652u5-3-4-1";
+var actionsSlotCss = "_1os652u9-3-5-2";
+var contentContainerCss = "_1os652u6-3-5-2";
+var detailsSlotCss = "_1os652u8-3-5-2";
+var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-5-2", variantClassNames: { size: { small: "_1os652u1-3-5-2", "default": "_1os652u2-3-5-2", large: "_1os652u3-3-5-2", largeResponsive: "_1os652u4-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var footerSlotCss = "_1os652ua-3-5-2";
+var titleSlotCss = "_1os652u7-3-5-2";
+var visualSlotCss = "_1os652u5-3-5-2";

package/content/empty-state/assets/VisualPresetVariants.js

@@ -237,7 +237,7 @@ const VISUAL_REFRESH_EMPTY_STATE_ASSET_MAP = {
     },
     "something-missing": {
       dark: "https://dt-cdn.net/images/document-something-missing-dark-c87a4a01ba.svg",
-      light: "https://dt-cdn.net/images/document-something-missing-light-b73c92d0d8."
+      light: "https://dt-cdn.net/images/document-something-missing-light-b73c92d0d8.svg"
     },
     "something-wrong": {
       dark: "https://dt-cdn.net/images/document-something-wrong-dark-796e70b2c6.svg",

package/content/empty-state/empty-state-utils.d.ts

@@ -14,4 +14,4 @@ export declare function getHeadingVariant(size: 'small' | 'default' | 'large', a
 /**
  * @internal
  */
-export declare function generateVisualPresetCdnUrl(context: EmptyStateVisualPresetProps['context'], type: EmptyStateVisualPresetProps['type'], theme: 'light' | 'dark'): string;
+export declare function useVisualPresetCdnUrl(context: EmptyStateVisualPresetProps['context'], type: EmptyStateVisualPresetProps['type'], theme: 'light' | 'dark'): string;

package/content/empty-state/empty-state-utils.js

@@ -18,11 +18,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var empty_state_utils_exports = {};
 __export(empty_state_utils_exports, {
   _MIN_CONTAINER_WIDTH: () => _MIN_CONTAINER_WIDTH,
-  generateVisualPresetCdnUrl: () => generateVisualPresetCdnUrl,
-  getHeadingVariant: () => getHeadingVariant
+  getHeadingVariant: () => getHeadingVariant,
+  useVisualPresetCdnUrl: () => useVisualPresetCdnUrl
 });
 module.exports = __toCommonJS(empty_state_utils_exports);
+var import_react = require("react");
 var import_VisualPresetVariants = require("./assets/VisualPresetVariants.js");
+var import_is_visual_refresh_enabled = require("../../core/utils/is-visual-refresh-enabled.js");
 const _MIN_CONTAINER_WIDTH = 704;
 function getHeadingVariant(size, as) {
   if (size === "small") {
@@ -33,8 +35,14 @@ function getHeadingVariant(size, as) {
   }
   return { level: 3, as: as ?? "h3" };
 }
-function generateVisualPresetCdnUrl(context, type, theme) {
-  if (window.visualRefreshEnabled === true) {
+function useVisualPresetCdnUrl(context, type, theme) {
+  const visualRefreshEnabled = (0, import_react.useSyncExternalStore)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    () => () => globalThis.dtVisualRefreshEnabled,
+    () => (0, import_is_visual_refresh_enabled.isVisualRefreshEnabled)(),
+    () => false
+  );
+  if (visualRefreshEnabled) {
     return import_VisualPresetVariants.VISUAL_REFRESH_EMPTY_STATE_ASSET_MAP[context][type][theme];
   }
   return import_VisualPresetVariants.EMTPY_STATE_ASSET_MAP[context][type][theme];

package/content/empty-state/slot-components/Footer.css

@@ -1,4 +1,4 @@
-._ueufet0-3-4-1 {
+._ueufet0-3-5-2 {
   margin: 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/content/empty-state/slot-components/Footer.sty.js

@@ -21,4 +21,4 @@ __export(Footer_css_exports, {
 });
 module.exports = __toCommonJS(Footer_css_exports);
 var import_Footer_css_ts_vanilla = require("./Footer.css");
-var footerCSS = "_ueufet0-3-4-1";
+var footerCSS = "_ueufet0-3-5-2";

package/content/empty-state/slot-components/Visual.css

@@ -1,4 +1,4 @@
-._nlpkgy0-3-4-1 {
+._nlpkgy0-3-5-2 {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7,13 +7,13 @@
   max-width: 100%;
   aspect-ratio: 8 / 5;
 }
-._nlpkgy0-3-4-1 img, picture {
+._nlpkgy0-3-5-2 img, picture {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
 }
-._nlpkgy0-3-4-1 & figure {
+._nlpkgy0-3-5-2 & figure {
   margin: 0;
   max-width: 100%;
   max-height: 100%;

package/content/empty-state/slot-components/Visual.sty.js

@@ -21,4 +21,4 @@ __export(Visual_css_exports, {
 });
 module.exports = __toCommonJS(Visual_css_exports);
 var import_Visual_css_ts_vanilla = require("./Visual.css");
-var visualContainerCSS = "_nlpkgy0-3-4-1";
+var visualContainerCSS = "_nlpkgy0-3-5-2";

package/content/empty-state/slot-components/VisualPreset.js

@@ -33,11 +33,7 @@ const VisualPreset = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
     "data-testid": dataTestId
   } = props;
   const currentTheme = (0, import_useCurrentTheme.useCurrentTheme)();
-  const visualPresetUrl = (0, import_empty_state_utils.generateVisualPresetCdnUrl)(
-    context,
-    type,
-    currentTheme
-  );
+  const visualPresetUrl = (0, import_empty_state_utils.useVisualPresetCdnUrl)(context, type, currentTheme);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "img",
     {

package/content/expandable-text/ExpandableText.css

@@ -1,13 +1,13 @@
-._19jh2ut0-3-4-1 {
+._19jh2ut0-3-5-2 {
   transition: opacity var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._19jh2ut1-3-4-1 {
+._19jh2ut1-3-5-2 {
   opacity: 1;
 }
-._19jh2ut2-3-4-1 {
+._19jh2ut2-3-5-2 {
   opacity: 0;
 }
-._19jh2ut3-3-4-1 {
+._19jh2ut3-3-5-2 {
   border: none;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   background: transparent;
@@ -27,12 +27,12 @@
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._19jh2ut3-3-4-1:hover {
+._19jh2ut3-3-5-2:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._19jh2ut3-3-4-1:active {
+._19jh2ut3-3-5-2:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._19jh2ut3-3-4-1:focus-visible {
+._19jh2ut3-3-5-2:focus-visible {
   text-decoration: none;
 }

package/content/expandable-text/ExpandableText.sty.js

@@ -24,5 +24,5 @@ module.exports = __toCommonJS(ExpandableText_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_ExpandableText_css_ts_vanilla = require("./ExpandableText.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var expandableTextButtonCSS = "_19jh2ut3-3-4-1 _z0fq9b4-3-4-1 _z0fq9bc-3-4-1 _z0fq9b5-3-4-1 _z0fq9ba-3-4-1";
-var expandableTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19jh2ut0-3-4-1", variantClassNames: { expanded: { true: "_19jh2ut1-3-4-1", false: "_19jh2ut2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var expandableTextButtonCSS = "_19jh2ut3-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b5-3-5-2 _z0fq9bb-3-5-2";
+var expandableTextCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19jh2ut0-3-5-2", variantClassNames: { expanded: { true: "_19jh2ut1-3-5-2", false: "_19jh2ut2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });