@dynatrace/strato-components 3.1.1 → 3.2.0

package/content/code-snippet/CodeHighlight.d.ts

@@ -5,22 +5,32 @@ interface CodeHighlightProps {
      * @defaultValue true
      */
     showLineNumbers?: boolean;
+    /**
+     * The code language of the snippet for syntax highlighting.
+     */
     language?: HighlightLanguage;
+    /**
+     * The code snippet to be highlighted.
+     */
     code: string;
     /**
-     * Whether the content breaks into new lines automatically or not.
+     * Whether the content breaks into new lines automatically.
      * @defaultValue false
      */
     lineBreaks?: boolean;
-    /** @defaultValue false */
-    buttonPadding?: boolean;
+    /**
+     * Max height of the code container in px.
+     */
     maxHeight?: number;
-    /** @defaultValue 'default' */
+    /**
+     * Layout size, which affects font size, padding and margins.
+     * @defaultValue 'default'
+     */
     size?: 'default' | 'condensed';
 }
 /**
- * Highlights code with prism tokenisation
+ * Highlights code with prism tokenization.
  * @internal
  */
-export declare const CodeHighlight: (props: CodeHighlightProps & import("react").RefAttributes<HTMLPreElement>) => React.ReactElement | null;
+export declare const CodeHighlight: (props: CodeHighlightProps & import("react").RefAttributes<HTMLPreElement>) => import("react").ReactElement | null;
 export {};

package/content/code-snippet/CodeHighlight.js

@@ -37,7 +37,47 @@ var import_react = require("react");
 var import_react_error_boundary = require("react-error-boundary");
 var styles = __toESM(require("./CodeHighlight.sty.js"));
 var import_HighlightExtended = require("./HighlightExtended.js");
+var import_highlighting_utils = require("./utils/highlighting-utils.js");
 var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
+function NonHighlightedBlock({
+  showLineNumbers,
+  size,
+  isMultiLine,
+  lineNumbers,
+  code
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.line, children: [
+    showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_clsx.default)(
+          "line-number",
+          styles.lineNumberContainer({ multiLine: isMultiLine })
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: styles.lineNumber({
+              size,
+              multiLine: isMultiLine
+            }),
+            children: lineNumbers
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: styles.lineContent({
+          size,
+          multiLine: isMultiLine
+        }),
+        children: code
+      }
+    )
+  ] });
+}
 const CodeHighlight = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     code,
@@ -48,6 +88,15 @@ const CodeHighlight = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     size = "default"
   } = props;
   const stratoLogger = (0, import_sdk_logger.useStratoLogger)("CodeSnippet");
+  const {
+    highlightCode,
+    noHighlightInline,
+    noHighlightCode,
+    noHighlightLineNumbers
+  } = (0, import_react.useMemo)(() => (0, import_highlighting_utils.splitCodeForHighlighting)(code), [code]);
+  const isNonHighlightedMultiLine = noHighlightLineNumbers.includes("\n");
+  const hasNonHighlightedBlock = noHighlightCode.length > 0;
+  const isFullyHighlighted = noHighlightInline.length === 0 && !hasNonHighlightedBlock;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "pre",
     {
@@ -67,54 +116,64 @@ const CodeHighlight = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
               info
             });
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HighlightExtended.HighlightExtended, { language, code, children: ({ tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: tokens.map((line, i) => {
-            const isSingleLine = tokens.length === 1;
-            const { className: lineClassName, ...remainingLineProps } = getLineProps({ line });
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                className: (0, import_clsx.default)(lineClassName, styles.line),
-                ...remainingLineProps,
-                children: [
-                  showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: (0, import_clsx.default)(
-                        "line-number",
-                        styles.lineNumberContainer
-                      ),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HighlightExtended.HighlightExtended, { language, code: highlightCode, children: ({ tokens, getLineProps, getTokenProps }) => {
+            const isSingleLine = tokens.length === 1 && isFullyHighlighted;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              tokens.map((line, i) => {
+                const isLastLine = i === tokens.length - 1;
+                const { className: lineClassName, ...remainingLineProps } = getLineProps({ line });
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    className: (0, import_clsx.default)(lineClassName, styles.line),
+                    ...remainingLineProps,
+                    children: [
+                      showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "span",
                         {
-                          className: styles.lineNumber({ size }),
-                          "data-linenumber": i + 1
+                          className: (0, import_clsx.default)(
+                            "line-number",
+                            styles.lineNumberContainer()
+                          ),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "span",
+                            {
+                              className: styles.lineNumber({ size }),
+                              "data-linenumber": i + 1
+                            }
+                          )
                         }
-                      )
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: styles.lineContent({ size }),
-                      style: {
-                        verticalAlign: isSingleLine ? "middle" : void 0
-                      },
-                      children: line.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         "span",
                         {
-                          ...getTokenProps({
-                            token
-                          })
-                        },
-                        index
-                      ))
-                    }
-                  )
-                ]
-              },
-              i
-            );
-          }) }) })
+                          className: styles.lineContent({ size }),
+                          style: {
+                            verticalAlign: isSingleLine ? "middle" : void 0
+                          },
+                          children: [
+                            line.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getTokenProps({ token }) }, index)),
+                            isLastLine && noHighlightInline.length > 0 ? noHighlightInline : null
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  i
+                );
+              }),
+              hasNonHighlightedBlock ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                NonHighlightedBlock,
+                {
+                  showLineNumbers,
+                  size,
+                  isMultiLine: isNonHighlightedMultiLine,
+                  lineNumbers: noHighlightLineNumbers,
+                  code: noHighlightCode
+                }
+              ) : null
+            ] });
+          } })
         }
       )
     }

package/content/code-snippet/CodeHighlight.sty.d.ts

@@ -14,7 +14,16 @@ export declare const highlightWrapper: import("@vanilla-extract/recipes").Runtim
         };
     };
 }>;
-export declare const lineNumberContainer: string;
+export declare const lineNumberContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    multiLine: {
+        false: {
+            whiteSpace: "nowrap";
+        };
+        true: {
+            whiteSpace: "pre";
+        };
+    };
+}>;
 export declare const line: string;
 export declare const lineNumber: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
@@ -27,6 +36,12 @@ export declare const lineNumber: import("@vanilla-extract/recipes").RuntimeFn<{
             minWidth: number;
         };
     };
+    multiLine: {
+        false: {};
+        true: {
+            whiteSpace: "pre";
+        };
+    };
 }>;
 export declare const lineContent: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
@@ -39,4 +54,10 @@ export declare const lineContent: import("@vanilla-extract/recipes").RuntimeFn<{
             paddingRight: string;
         };
     };
+    multiLine: {
+        false: {};
+        true: {
+            whiteSpace: "pre";
+        };
+    };
 }>;

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

@@ -27,8 +27,8 @@ __export(CodeHighlight_css_exports, {
 module.exports = __toCommonJS(CodeHighlight_css_exports);
 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-1-1", variantClassNames: { size: { "default": "_1jmxup81-3-1-1", condensed: "_1jmxup82-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup84-3-1-1";
-var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-1-1", variantClassNames: { size: { "default": "_1jmxup89-3-1-1", condensed: "_1jmxup8a-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup85-3-1-1", variantClassNames: { size: { "default": "_1jmxup86-3-1-1", condensed: "_1jmxup87-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var lineNumberContainer = "_1jmxup83-3-1-1";
+var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup80-3-2-0", variantClassNames: { size: { "default": "_1jmxup81-3-2-0", condensed: "_1jmxup82-3-2-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup86-3-2-0";
+var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8c-3-2-0", variantClassNames: { size: { "default": "_1jmxup8d-3-2-0", condensed: "_1jmxup8e-3-2-0" }, multiLine: { false: "_1jmxup8f-3-2-0", true: "_1jmxup8g-3-2-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup87-3-2-0", variantClassNames: { size: { "default": "_1jmxup88-3-2-0", condensed: "_1jmxup89-3-2-0" }, multiLine: { false: "_1jmxup8a-3-2-0", true: "_1jmxup8b-3-2-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup83-3-2-0", variantClassNames: { multiLine: { false: "_1jmxup84-3-2-0", true: "_1jmxup85-3-2-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });

package/content/code-snippet/CodeSnippet.css

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

@@ -56,4 +56,4 @@ export interface CodeSnippetProps extends WithChildren, FocusEvents, StylingProp
  * By default, the code is formatted but not highlighted.
  * @public
  */
-export declare const CodeSnippet: (props: CodeSnippetProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const CodeSnippet: (props: CodeSnippetProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/content/code-snippet/CodeSnippet.js

@@ -131,7 +131,6 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
             code: copyText,
             showLineNumbers,
             lineBreaks,
-            buttonPadding: showCopyAction,
             maxHeight,
             size
           }
@@ -157,6 +156,7 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
                 "aria-label": copyLabel,
                 onClick: handleCopy,
                 style: { borderRadius: import_borders.default.Radius.Field.Subdued },
+                "data-dt-name": "CopyButton",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CopyIcon, {}) })
               }
             )

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

@@ -24,5 +24,5 @@ __export(CodeSnippet_css_exports, {
 module.exports = __toCommonJS(CodeSnippet_css_exports);
 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-1-1", variantClassNames: { size: { "default": "_17pa72a2-3-1-1", condensed: "_17pa72a3-3-1-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-1-1";
+var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a1-3-2-0", variantClassNames: { size: { "default": "_17pa72a2-3-2-0", condensed: "_17pa72a3-3-2-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a0-3-2-0";

package/content/code-snippet/HighlightExtended.d.ts

@@ -1,4 +1,5 @@
 import { type RenderProps } from 'prism-react-renderer';
+import { type JSX } from 'react';
 /**
  * @public
  */

package/content/code-snippet/HighlightExtended.js

@@ -35,7 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_prism_react_renderer = require("prism-react-renderer");
 var import_react = require("react");
 var import_prism_dql_language = require("./prism-dql-language.js");
-var import_is_node_environment = require("../../core/utils/is-node-environment.js");
+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;
@@ -50,18 +50,14 @@ const HighlightExtended = (props) => {
       Promise.resolve().then(() => __toESM(require("prismjs/components/prism-bash.js"))).then(() => {
         setAdditionalLangLoaded((prev) => ({ ...prev, bash: true }));
       }).catch((error) => {
-        if ((0, import_is_node_environment.isDev)()) {
-          console.warn("Failed to load language:", error);
-        }
+        (0, import_logging.devLog)("Failed to load language:", error);
       });
     }
     if (language === "log" && !additionalLangLoaded.log) {
       Promise.resolve().then(() => __toESM(require("prismjs/components/prism-log.js"))).then(() => {
         setAdditionalLangLoaded((prev) => ({ ...prev, log: true }));
       }).catch((error) => {
-        if ((0, import_is_node_environment.isDev)()) {
-          console.warn("Failed to load language:", error);
-        }
+        (0, import_logging.devLog)("Failed to load language:", error);
       });
     }
   }, [language, additionalLangLoaded]);

package/content/code-snippet/utils/highlighting-utils.d.ts

@@ -0,0 +1,30 @@
+interface SplitResult {
+    /** Code that Prism will tokenize (syntax-highlighted). */
+    highlightCode: string;
+    /**
+     * Plain text that continues the last highlighted line (mid-line cut).
+     * Should be rendered inside the same visual line as the last highlighted
+     * token so that no extra line number is created.
+     */
+    noHighlightInline: string;
+    /** Plain-text block of complete lines that follow the highlighted portion. */
+    noHighlightCode: string;
+    /** `\n`-separated line numbers for {@link noHighlightCode}. */
+    noHighlightLineNumbers: string;
+}
+/**
+ * Splits `code` so only the first portion is tokenized by Prism.
+ *
+ * Always cuts at `maxLength`. The remainder is split at its first newline:
+ * text before that newline continues the last highlighted line
+ * (`noHighlightInline`), text after it forms a separate plain-text block
+ * (`noHighlightCode`) with its own line numbers.
+ *
+ * @param code - The full code string.
+ * @param maxLength - Maximum number of characters to highlight.
+ *   Defaults to {@link DEFAULT_MAX_TOKENIZATION_LENGTH}.
+ *
+ * @internal
+ */
+export declare function splitCodeForHighlighting(code: string, maxLength?: number): SplitResult;
+export {};

package/content/code-snippet/utils/highlighting-utils.js

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var highlighting_utils_exports = {};
+__export(highlighting_utils_exports, {
+  splitCodeForHighlighting: () => splitCodeForHighlighting
+});
+module.exports = __toCommonJS(highlighting_utils_exports);
+const DEFAULT_MAX_TOKENIZATION_LENGTH = 1e5;
+function countNewlines(str) {
+  let count = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (str.codePointAt(i) === 10) {
+      count++;
+    }
+  }
+  return count;
+}
+function buildLineNumbers(startLine, lineCount) {
+  const numbers = new Array(lineCount);
+  for (let i = 0; i < lineCount; i++) {
+    numbers[i] = String(startLine + i);
+  }
+  return numbers.join("\n");
+}
+function splitCodeForHighlighting(code, maxLength = DEFAULT_MAX_TOKENIZATION_LENGTH) {
+  if (code.length <= maxLength) {
+    return {
+      highlightCode: code,
+      noHighlightInline: "",
+      noHighlightCode: "",
+      noHighlightLineNumbers: ""
+    };
+  }
+  const highlight = code.substring(0, maxLength);
+  const remaining = code.substring(maxLength);
+  const firstNewline = remaining.indexOf("\n");
+  const inlinePart = firstNewline < 0 ? remaining : remaining.substring(0, firstNewline);
+  const blockPart = firstNewline < 0 ? "" : remaining.substring(firstNewline + 1);
+  if (blockPart.length === 0) {
+    return {
+      highlightCode: highlight,
+      noHighlightInline: inlinePart,
+      noHighlightCode: "",
+      noHighlightLineNumbers: ""
+    };
+  }
+  const highlightedLineCount = countNewlines(highlight) + 1;
+  const startLine = highlightedLineCount + 1;
+  const blockLineCount = countNewlines(blockPart) + 1;
+  return {
+    highlightCode: highlight,
+    noHighlightInline: inlinePart,
+    noHighlightCode: blockPart,
+    noHighlightLineNumbers: buildLineNumbers(startLine, blockLineCount)
+  };
+}

package/content/empty-state/EmptyState.css

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

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

@@ -5,11 +5,11 @@ import type { EmptyStateProps } from './types/empty-state-types.js';
  * missing, requires special permission, or has not been yet created, for example.
  * @public
  */
-export declare const EmptyState: ((props: EmptyStateProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
-    Actions: (props: import("./slot-components/Actions.js").EmptyStateActionsProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Details: (props: import("./slot-components/Details.js").EmptyStateDetailsProps & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
-    Footer: (props: import("./slot-components/Footer.js").EmptyStateFooterProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;
-    Title: (props: import("./slot-components/Title.js").EmptyStateTitleProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Visual: (props: import("./slot-components/Visual.js").EmptyStateVisualProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    VisualPreset: (props: import("./types/empty-state-types.js").EmptyStateVisualPresetProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
+export declare const EmptyState: ((props: EmptyStateProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
+    Actions: (props: import("./slot-components/Actions.js").EmptyStateActionsProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Details: (props: import("./slot-components/Details.js").EmptyStateDetailsProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactElement | null;
+    Footer: (props: import("./slot-components/Footer.js").EmptyStateFooterProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+    Title: (props: import("./slot-components/Title.js").EmptyStateTitleProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Visual: (props: import("./slot-components/Visual.js").EmptyStateVisualProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    VisualPreset: (props: import("./types/empty-state-types.js").EmptyStateVisualPresetProps & import("react").RefAttributes<HTMLImageElement>) => import("react").ReactElement | null;
 };

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

@@ -29,10 +29,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-1-1";
-var contentContainerCss = "_1os652u6-3-1-1";
-var detailsSlotCss = "_1os652u8-3-1-1";
-var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-1-1", variantClassNames: { size: { small: "_1os652u1-3-1-1", "default": "_1os652u2-3-1-1", large: "_1os652u3-3-1-1", largeResponsive: "_1os652u4-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var footerSlotCss = "_1os652ua-3-1-1";
-var titleSlotCss = "_1os652u7-3-1-1";
-var visualSlotCss = "_1os652u5-3-1-1";
+var actionsSlotCss = "_1os652u9-3-2-0";
+var contentContainerCss = "_1os652u6-3-2-0";
+var detailsSlotCss = "_1os652u8-3-2-0";
+var emptyStateContainerCss = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1os652u0-3-2-0", variantClassNames: { size: { small: "_1os652u1-3-2-0", "default": "_1os652u2-3-2-0", large: "_1os652u3-3-2-0", largeResponsive: "_1os652u4-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var footerSlotCss = "_1os652ua-3-2-0";
+var titleSlotCss = "_1os652u7-3-2-0";
+var visualSlotCss = "_1os652u5-3-2-0";