@dynatrace/strato-components 3.1.3 → 3.2.0

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

@@ -1,7 +1,7 @@
 import "./CodeSnippet.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var copyButtonContainer = _7a468({ defaultClassName: "_17pa72a1-3-1-3", variantClassNames: { size: { "default": "_17pa72a2-3-1-3", condensed: "_17pa72a3-3-1-3" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-1-3";
+var copyButtonContainer = _7a468({ 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";
 export {
   copyButtonContainer,
   wrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeSnippet.css.ts"],
-  "sourcesContent": ["import './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-1-3',variantClassNames:{size:{'default':'_17pa72a2-3-1-3',condensed:'_17pa72a3-3-1-3'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-1-3';"],
+  "sourcesContent": ["import './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-2-0',variantClassNames:{size:{'default':'_17pa72a2-3-2-0',condensed:'_17pa72a3-3-2-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7M,IAAI,UAAU;",
   "names": []
 }

package/esm/content/code-snippet/HighlightExtended.js

@@ -2,7 +2,7 @@ import { Fragment, jsx } from "react/jsx-runtime";
 import { Prism, Highlight } from "prism-react-renderer";
 import { useEffect, useState } from "react";
 import { prismDqlLanguage } from "./prism-dql-language.js";
-import { isDev } from "../../core/utils/is-node-environment.js";
+import { devLog } from "../../core/utils/logging.js";
 import { DTPrismTheme } from "../../core/utils/prism-theme.js";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 Prism.languages.dql = prismDqlLanguage;
@@ -17,18 +17,14 @@ const HighlightExtended = (props) => {
       import("prismjs/components/prism-bash.js").then(() => {
         setAdditionalLangLoaded((prev) => ({ ...prev, bash: true }));
       }).catch((error) => {
-        if (isDev()) {
-          console.warn("Failed to load language:", error);
-        }
+        devLog("Failed to load language:", error);
       });
     }
     if (language === "log" && !additionalLangLoaded.log) {
       import("prismjs/components/prism-log.js").then(() => {
         setAdditionalLangLoaded((prev) => ({ ...prev, log: true }));
       }).catch((error) => {
-        if (isDev()) {
-          console.warn("Failed to load language:", error);
-        }
+        devLog("Failed to load language:", error);
       });
     }
   }, [language, additionalLangLoaded]);

package/esm/content/code-snippet/HighlightExtended.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/HighlightExtended.tsx"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\n\nimport { Prism, Highlight, type RenderProps } from 'prism-react-renderer';\nimport { useEffect, useState } from 'react';\n\nimport { prismDqlLanguage } from './prism-dql-language.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { DTPrismTheme } from '../../core/utils/prism-theme.js';\n\n// Ensure Prism is globally available\n(typeof global !== 'undefined' ? global : window).Prism = Prism;\n\nPrism.languages.dql = prismDqlLanguage;\n\n/**\n * @public\n */\nexport type HighlightLanguage =\n  | 'markup'\n  | 'bash'\n  | 'clike'\n  | 'c'\n  | 'cpp'\n  | 'css'\n  | 'javascript'\n  | 'jsx'\n  | 'coffeescript'\n  | 'actionscript'\n  | 'go'\n  | 'graphql'\n  | 'json'\n  | 'markdown'\n  | 'objectivec'\n  | 'python'\n  | 'reason'\n  | 'sql'\n  | 'tsx'\n  | 'typescript'\n  | 'yaml'\n  | 'dql'\n  | 'log';\n\ninterface HighlightExtendedProps {\n  language?: HighlightLanguage;\n  code: string;\n  children: (props: RenderProps) => JSX.Element;\n}\n\n/**\n * Extends the `Highlight` component from the Prism library.\n * This component can be used across Strato components to handle loading additional and custom languages.\n * @internal\n */\nexport const HighlightExtended = (props: HighlightExtendedProps) => {\n  const { language, code, children } = props;\n  const [additionalLangLoaded, setAdditionalLangLoaded] = useState({\n    bash: Prism.languages.bash !== undefined,\n    log: Prism.languages.log !== undefined,\n  });\n\n  // This useEffect hook dynamically loads the additional Prism languages that are not included in the 'prism-react-renderer' basic set of languages.\n  // With that it ensures that the necessary syntax highlighting for additional languages is implemented when the Prism instance is available.\n  // The language prop accepts a limited set of languages that doesn't include `bash` and `log`, for which highlighting should be supported.\n  // Therefore, they are imported from Prism.js.\n  useEffect(() => {\n    if (language === 'bash' && !additionalLangLoaded.bash) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore\n      import('prismjs/components/prism-bash.js')\n        .then(() => {\n          setAdditionalLangLoaded((prev) => ({ ...prev, bash: true }));\n        })\n        .catch((error) => {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Failed to load language:', error);\n          }\n        });\n    }\n\n    if (language === 'log' && !additionalLangLoaded.log) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore\n      import('prismjs/components/prism-log.js')\n        .then(() => {\n          setAdditionalLangLoaded((prev) => ({ ...prev, log: true }));\n        })\n        .catch((error) => {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Failed to load language:', error);\n          }\n        });\n    }\n  }, [language, additionalLangLoaded]);\n\n  return (\n    <Highlight\n      language={language ?? 'plain'}\n      code={code}\n      theme={language === 'log' ? DTPrismTheme.Log : DTPrismTheme.Default}\n      // @ts-expect-error language prop accepts limited set of languages that don't include `log`\n      Prism={Prism}\n    >\n      {({ tokens, getLineProps, getTokenProps, className, style }) => (\n        <>\n          {children({\n            tokens,\n            getLineProps,\n            getTokenProps,\n            className,\n            style,\n          })}\n        </>\n      )}\n    </Highlight>\n  );\n};\n"],
-  "mappings": "AAyGQ;AAvGR,SAAS,OAAO,iBAAmC;AACnD,SAAS,WAAW,gBAAgB;AAEpC,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAAA,CAG5B,OAAO,WAAW,cAAc,SAAS,QAAQ,QAAQ;AAE1D,MAAM,UAAU,MAAM;AAyCf,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AACrC,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS;AAAA,IAC/D,MAAM,MAAM,UAAU,SAAS;AAAA,IAC/B,KAAK,MAAM,UAAU,QAAQ;AAAA,EAC/B,CAAC;AAMD,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,CAAC,qBAAqB,MAAM;AAGrD,aAAO,kCAAkC,EACtC,KAAK,MAAM;AACV,gCAAwB,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,KAAK,EAAE;AAAA,MAC7D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,YAAI,MAAM,GAAG;AAEX,kBAAQ,KAAK,4BAA4B,KAAK;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACL;AAEA,QAAI,aAAa,SAAS,CAAC,qBAAqB,KAAK;AAGnD,aAAO,iCAAiC,EACrC,KAAK,MAAM;AACV,gCAAwB,CAAC,UAAU,EAAE,GAAG,MAAM,KAAK,KAAK,EAAE;AAAA,MAC5D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,YAAI,MAAM,GAAG;AAEX,kBAAQ,KAAK,4BAA4B,KAAK;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,oBAAoB,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,OAAO,aAAa,QAAQ,aAAa,MAAM,aAAa;AAAA,MAE5D;AAAA,MAEC,WAAC,EAAE,QAAQ,cAAc,eAAe,WAAW,MAAM,MACxD,gCACG,mBAAS;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import { Prism, Highlight, type RenderProps } from 'prism-react-renderer';\nimport { useEffect, useState, type JSX } from 'react';\n\nimport { prismDqlLanguage } from './prism-dql-language.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { DTPrismTheme } from '../../core/utils/prism-theme.js';\n\n// Ensure Prism is globally available\n(typeof global !== 'undefined' ? global : window).Prism = Prism;\n\nPrism.languages.dql = prismDqlLanguage;\n\n/**\n * @public\n */\nexport type HighlightLanguage =\n  | 'markup'\n  | 'bash'\n  | 'clike'\n  | 'c'\n  | 'cpp'\n  | 'css'\n  | 'javascript'\n  | 'jsx'\n  | 'coffeescript'\n  | 'actionscript'\n  | 'go'\n  | 'graphql'\n  | 'json'\n  | 'markdown'\n  | 'objectivec'\n  | 'python'\n  | 'reason'\n  | 'sql'\n  | 'tsx'\n  | 'typescript'\n  | 'yaml'\n  | 'dql'\n  | 'log';\n\ninterface HighlightExtendedProps {\n  language?: HighlightLanguage;\n  code: string;\n  children: (props: RenderProps) => JSX.Element;\n}\n\n/**\n * Extends the `Highlight` component from the Prism library.\n * This component can be used across Strato components to handle loading additional and custom languages.\n * @internal\n */\nexport const HighlightExtended = (props: HighlightExtendedProps) => {\n  const { language, code, children } = props;\n  const [additionalLangLoaded, setAdditionalLangLoaded] = useState({\n    bash: Prism.languages.bash !== undefined,\n    log: Prism.languages.log !== undefined,\n  });\n\n  // This useEffect hook dynamically loads the additional Prism languages that are not included in the 'prism-react-renderer' basic set of languages.\n  // With that it ensures that the necessary syntax highlighting for additional languages is implemented when the Prism instance is available.\n  // The language prop accepts a limited set of languages that doesn't include `bash` and `log`, for which highlighting should be supported.\n  // Therefore, they are imported from Prism.js.\n  useEffect(() => {\n    if (language === 'bash' && !additionalLangLoaded.bash) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore\n      import('prismjs/components/prism-bash.js')\n        .then(() => {\n          setAdditionalLangLoaded((prev) => ({ ...prev, bash: true }));\n        })\n        .catch((error) => {\n          devLog('Failed to load language:', error);\n        });\n    }\n\n    if (language === 'log' && !additionalLangLoaded.log) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore\n      import('prismjs/components/prism-log.js')\n        .then(() => {\n          setAdditionalLangLoaded((prev) => ({ ...prev, log: true }));\n        })\n        .catch((error) => {\n          devLog('Failed to load language:', error);\n        });\n    }\n  }, [language, additionalLangLoaded]);\n\n  return (\n    <Highlight\n      language={language ?? 'plain'}\n      code={code}\n      theme={language === 'log' ? DTPrismTheme.Log : DTPrismTheme.Default}\n      // @ts-expect-error language prop accepts limited set of languages that don't include `log`\n      Prism={Prism}\n    >\n      {({ tokens, getLineProps, getTokenProps, className, style }) => (\n        <>\n          {children({\n            tokens,\n            getLineProps,\n            getTokenProps,\n            className,\n            style,\n          })}\n        </>\n      )}\n    </Highlight>\n  );\n};\n"],
+  "mappings": "AAiGQ;AAjGR,SAAS,OAAO,iBAAmC;AACnD,SAAS,WAAW,gBAA0B;AAE9C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAAA,CAG5B,OAAO,WAAW,cAAc,SAAS,QAAQ,QAAQ;AAE1D,MAAM,UAAU,MAAM;AAyCf,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AACrC,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS;AAAA,IAC/D,MAAM,MAAM,UAAU,SAAS;AAAA,IAC/B,KAAK,MAAM,UAAU,QAAQ;AAAA,EAC/B,CAAC;AAMD,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,CAAC,qBAAqB,MAAM;AAGrD,aAAO,kCAAkC,EACtC,KAAK,MAAM;AACV,gCAAwB,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,KAAK,EAAE;AAAA,MAC7D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,eAAO,4BAA4B,KAAK;AAAA,MAC1C,CAAC;AAAA,IACL;AAEA,QAAI,aAAa,SAAS,CAAC,qBAAqB,KAAK;AAGnD,aAAO,iCAAiC,EACrC,KAAK,MAAM;AACV,gCAAwB,CAAC,UAAU,EAAE,GAAG,MAAM,KAAK,KAAK,EAAE;AAAA,MAC5D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,eAAO,4BAA4B,KAAK;AAAA,MAC1C,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,oBAAoB,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,OAAO,aAAa,QAAQ,aAAa,MAAM,aAAa;AAAA,MAE5D;AAAA,MAEC,WAAC,EAAE,QAAQ,cAAc,eAAe,WAAW,MAAM,MACxD,gCACG,mBAAS;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,53 @@
+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)
+  };
+}
+export {
+  splitCodeForHighlighting
+};
+//# sourceMappingURL=highlighting-utils.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/code-snippet/utils/highlighting-utils.ts"],
+  "sourcesContent": ["/**\n * Default maximum number of characters passed to the Prism tokenizer.\n */\nconst DEFAULT_MAX_TOKENIZATION_LENGTH = 100_000;\n\ninterface SplitResult {\n  /** Code that Prism will tokenize (syntax-highlighted). */\n  highlightCode: string;\n  /**\n   * Plain text that continues the last highlighted line (mid-line cut).\n   * Should be rendered inside the same visual line as the last highlighted\n   * token so that no extra line number is created.\n   */\n  noHighlightInline: string;\n  /** Plain-text block of complete lines that follow the highlighted portion. */\n  noHighlightCode: string;\n  /** `\\n`-separated line numbers for {@link noHighlightCode}. */\n  noHighlightLineNumbers: string;\n}\n\n/**\n * Count newline characters in `str`.\n *\n * Uses `codePointAt` instead of `=== '\\n'` for performance \u2013 avoids\n * per-character string allocation when iterating over multi-megabyte strings.\n */\nfunction countNewlines(str: string): number {\n  let count = 0;\n  for (let i = 0; i < str.length; i++) {\n    if (str.codePointAt(i) === 10) {\n      count++;\n    }\n  }\n  return count;\n}\n\n/**\n * Build a `\\n`-separated string of consecutive line numbers.\n */\nfunction buildLineNumbers(startLine: number, lineCount: number): string {\n  const numbers = new Array<string>(lineCount);\n  for (let i = 0; i < lineCount; i++) {\n    numbers[i] = String(startLine + i);\n  }\n  return numbers.join('\\n');\n}\n\n/**\n * Splits `code` so only the first portion is tokenized by Prism.\n *\n * Always cuts at `maxLength`. The remainder is split at its first newline:\n * text before that newline continues the last highlighted line\n * (`noHighlightInline`), text after it forms a separate plain-text block\n * (`noHighlightCode`) with its own line numbers.\n *\n * @param code - The full code string.\n * @param maxLength - Maximum number of characters to highlight.\n *   Defaults to {@link DEFAULT_MAX_TOKENIZATION_LENGTH}.\n *\n * @internal\n */\nexport function splitCodeForHighlighting(\n  code: string,\n  maxLength: number = DEFAULT_MAX_TOKENIZATION_LENGTH,\n): SplitResult {\n  // If the code is short enough, there is no need for splitting, highlight it all.\n  if (code.length <= maxLength) {\n    return {\n      highlightCode: code,\n      noHighlightInline: '',\n      noHighlightCode: '',\n      noHighlightLineNumbers: '',\n    };\n  }\n\n  const highlight = code.substring(0, maxLength);\n  const remaining = code.substring(maxLength);\n\n  // Split the remainder at the first newline: text before it continues the\n  // last highlighted line (inline), text after it forms a separate block.\n  const firstNewline = remaining.indexOf('\\n');\n  const inlinePart =\n    firstNewline < 0 ? remaining : remaining.substring(0, firstNewline);\n  const blockPart =\n    firstNewline < 0 ? '' : remaining.substring(firstNewline + 1);\n\n  // Edge case: if there is no newline in the remainder,\n  // then all the remaining text is inline (e.g. in case of a single long line).\n  if (blockPart.length === 0) {\n    return {\n      highlightCode: highlight,\n      noHighlightInline: inlinePart,\n      noHighlightCode: '',\n      noHighlightLineNumbers: '',\n    };\n  }\n\n  // line count is 1 more than the number of newlines\n  const highlightedLineCount = countNewlines(highlight) + 1;\n  // line number of the first line in the non-highlighted block\n  const startLine = highlightedLineCount + 1;\n  const blockLineCount = countNewlines(blockPart) + 1;\n\n  return {\n    highlightCode: highlight,\n    noHighlightInline: inlinePart,\n    noHighlightCode: blockPart,\n    noHighlightLineNumbers: buildLineNumbers(startLine, blockLineCount),\n  };\n}\n"],
+  "mappings": "AAGA,MAAM,kCAAkC;AAuBxC,SAAS,cAAc,KAAqB;AAC1C,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK;AACnC,QAAI,IAAI,YAAY,CAAC,MAAM,IAAI;AAC7B;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAKA,SAAS,iBAAiB,WAAmB,WAA2B;AACtE,QAAM,UAAU,IAAI,MAAc,SAAS;AAC3C,WAAS,IAAI,GAAG,IAAI,WAAW,KAAK;AAClC,YAAQ,CAAC,IAAI,OAAO,YAAY,CAAC;AAAA,EACnC;AACA,SAAO,QAAQ,KAAK,IAAI;AAC1B;AAgBO,SAAS,yBACd,MACA,YAAoB,iCACP;AAEb,MAAI,KAAK,UAAU,WAAW;AAC5B,WAAO;AAAA,MACL,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,YAAY,KAAK,UAAU,GAAG,SAAS;AAC7C,QAAM,YAAY,KAAK,UAAU,SAAS;AAI1C,QAAM,eAAe,UAAU,QAAQ,IAAI;AAC3C,QAAM,aACJ,eAAe,IAAI,YAAY,UAAU,UAAU,GAAG,YAAY;AACpE,QAAM,YACJ,eAAe,IAAI,KAAK,UAAU,UAAU,eAAe,CAAC;AAI9D,MAAI,UAAU,WAAW,GAAG;AAC1B,WAAO;AAAA,MACL,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,uBAAuB,cAAc,SAAS,IAAI;AAExD,QAAM,YAAY,uBAAuB;AACzC,QAAM,iBAAiB,cAAc,SAAS,IAAI;AAElD,SAAO;AAAA,IACL,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,iBAAiB;AAAA,IACjB,wBAAwB,iBAAiB,WAAW,cAAc;AAAA,EACpE;AACF;",
+  "names": []
+}

package/esm/content/empty-state/EmptyState.css

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

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

@@ -1,12 +1,12 @@
 import "./EmptyState.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var actionsSlotCss = "_1os652u9-3-1-3";
-var contentContainerCss = "_1os652u6-3-1-3";
-var detailsSlotCss = "_1os652u8-3-1-3";
-var emptyStateContainerCss = _7a468({ defaultClassName: "_1os652u0-3-1-3", variantClassNames: { size: { small: "_1os652u1-3-1-3", "default": "_1os652u2-3-1-3", large: "_1os652u3-3-1-3", largeResponsive: "_1os652u4-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var footerSlotCss = "_1os652ua-3-1-3";
-var titleSlotCss = "_1os652u7-3-1-3";
-var visualSlotCss = "_1os652u5-3-1-3";
+var actionsSlotCss = "_1os652u9-3-2-0";
+var contentContainerCss = "_1os652u6-3-2-0";
+var detailsSlotCss = "_1os652u8-3-2-0";
+var emptyStateContainerCss = _7a468({ 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";
 export {
   actionsSlotCss,
   contentContainerCss,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/empty-state/EmptyState.css.ts"],
-  "sourcesContent": ["import './EmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsSlotCss = '_1os652u9-3-1-3';\nexport var contentContainerCss = '_1os652u6-3-1-3';\nexport var detailsSlotCss = '_1os652u8-3-1-3';\nexport var emptyStateContainerCss = _7a468({defaultClassName:'_1os652u0-3-1-3',variantClassNames:{size:{small:'_1os652u1-3-1-3','default':'_1os652u2-3-1-3',large:'_1os652u3-3-1-3',largeResponsive:'_1os652u4-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var footerSlotCss = '_1os652ua-3-1-3';\nexport var titleSlotCss = '_1os652u7-3-1-3';\nexport var visualSlotCss = '_1os652u5-3-1-3';"],
+  "sourcesContent": ["import './EmptyState.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var actionsSlotCss = '_1os652u9-3-2-0';\nexport var contentContainerCss = '_1os652u6-3-2-0';\nexport var detailsSlotCss = '_1os652u8-3-2-0';\nexport var emptyStateContainerCss = _7a468({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:[]});\nexport var footerSlotCss = '_1os652ua-3-2-0';\nexport var titleSlotCss = '_1os652u7-3-2-0';\nexport var visualSlotCss = '_1os652u5-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,iBAAiB;AACrB,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,OAAM,mBAAkB,WAAU,mBAAkB,OAAM,mBAAkB,iBAAgB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxP,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./Footer.css";
-var footerCSS = "_ueufet0-3-1-3";
+var footerCSS = "_ueufet0-3-2-0";
 export {
   footerCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Footer.css.ts"],
-  "sourcesContent": ["import './Footer.css';\nexport var footerCSS = '_ueufet0-3-1-3';"],
+  "sourcesContent": ["import './Footer.css';\nexport var footerCSS = '_ueufet0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./Visual.css";
-var visualContainerCSS = "_nlpkgy0-3-1-3";
+var visualContainerCSS = "_nlpkgy0-3-2-0";
 export {
   visualContainerCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/content/empty-state/slot-components/Visual.css.ts"],
-  "sourcesContent": ["import './Visual.css';\nexport var visualContainerCSS = '_nlpkgy0-3-1-3';"],
+  "sourcesContent": ["import './Visual.css';\nexport var visualContainerCSS = '_nlpkgy0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/content/expandable-text/ExpandableText.css

@@ -1,13 +1,13 @@
-._19jh2ut0-3-1-3 {
+._19jh2ut0-3-2-0 {
   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-1-3 {
+._19jh2ut1-3-2-0 {
   opacity: 1;
 }
-._19jh2ut2-3-1-3 {
+._19jh2ut2-3-2-0 {
   opacity: 0;
 }
-._19jh2ut3-3-1-3 {
+._19jh2ut3-3-2-0 {
   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-1-3:hover {
+._19jh2ut3-3-2-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._19jh2ut3-3-1-3:active {
+._19jh2ut3-3-2-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._19jh2ut3-3-1-3:focus-visible {
+._19jh2ut3-3-2-0:focus-visible {
   text-decoration: none;
 }

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

@@ -87,6 +87,7 @@ const ExpandableText = forwardRef(
           className: expandableTextButtonCSS,
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
+          "data-dt-name": isExpanded ? "ShowLessButton" : "ShowMoreButton",
           children: isExpanded ? collapseLabel : expandLabel
         }
       )

package/esm/content/expandable-text/ExpandableText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/expandable-text/ExpandableText.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  expandableTextCSS,\n  expandableTextButtonCSS,\n} from './ExpandableText.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'ExpandableText';\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface ExpandableTextBaseProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Text shown for expanding the content.\n   * @defaultValue 'Show more'\n   */\n  expandLabel?: ReactNode;\n  /**\n   * Text shown for collapsing the content.\n   * @defaultValue 'Show less'\n   */\n  collapseLabel?: ReactNode;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextUncontrolledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   * @defaultValue false\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded?: never;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange?: never;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextControlledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   */\n  defaultExpanded?: never;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded: boolean;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange: (expanded: boolean) => void;\n}\n\n/**\n * Accepted properties for ExpandableText\n * @public\n */\nexport type ExpandableTextProps = ExpandableTextBaseProps &\n  (ExpandableTextControlledProps | ExpandableTextUncontrolledProps);\n\n/**\n * The `ExpandableText` component provides expand and collapse functionality for inline text.\n * @public\n */\nexport const ExpandableText = forwardRef<HTMLElement, ExpandableTextProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expandLabel = (\n        <FormattedMessage\n          description=\"Shown for expandable text.\"\n          defaultMessage=\"Show more\"\n          id=\"DV3d5lBJda+EHJja\"\n        />\n      ),\n      collapseLabel = (\n        <FormattedMessage\n          description=\"Shown for collapsible text.\"\n          defaultMessage=\"Show less\"\n          id=\"986buSbL34GVFlBf\"\n        />\n      ),\n      defaultExpanded = false,\n      expanded,\n      onExpandChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const [isExpanded, setExpanded] = useControllableState({\n      defaultValue: defaultExpanded,\n      value: expanded,\n      onChange: onExpandChange,\n    });\n\n    const textId = useId();\n\n    // note: need to check for more than just space character\n    const beginsWithWhitespace =\n      Array.isArray(children) === false &&\n      typeof children === 'string' &&\n      /^\\s/.test(children);\n\n    return (\n      <>\n        <span\n          ref={forwardedRef}\n          id={textId}\n          role=\"region\"\n          className={clsx(\n            expandableTextCSS({ expanded: isExpanded }),\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          {...ariaLabelingProps}\n          {...behavioralTrackingProps}\n          {...forwardProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {isExpanded && beginsWithWhitespace && ' '}\n          {isExpanded && children}\n        </span>{' '}\n        <button\n          onClick={() => setExpanded(!isExpanded)}\n          aria-controls={textId}\n          aria-expanded={isExpanded}\n          className={expandableTextButtonCSS}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n        >\n          {isExpanded ? collapseLabel : expandLabel}\n        </button>\n      </>\n    );\n  },\n);\n\n(\n  ExpandableText as typeof ExpandableText & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAoGQ,SA4CF,UA5CE,KA6CA,YA7CA;AApGR,OAAO,UAAU;AAEjB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AA0EhB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,cACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,gBACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,CAAC,YAAY,WAAW,IAAI,qBAAqB;AAAA,MACrD,cAAc;AAAA,MACd,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,SAAS,MAAM;AAGrB,UAAM,uBACJ,MAAM,QAAQ,QAAQ,MAAM,SAC5B,OAAO,aAAa,YACpB,MAAM,KAAK,QAAQ;AAErB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAW;AAAA,YACT,kBAAkB,EAAE,UAAU,WAAW,CAAC;AAAA,YAC1C;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,qBAAmB;AAAA,UAElB;AAAA,0BAAc,wBAAwB;AAAA,YACtC,cAAc;AAAA;AAAA;AAAA,MACjB;AAAA,MAAQ;AAAA,MACR;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,CAAC,UAAU;AAAA,UACtC,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAEjB,uBAAa,gBAAgB;AAAA;AAAA,MAChC;AAAA,OACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  expandableTextCSS,\n  expandableTextButtonCSS,\n} from './ExpandableText.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'ExpandableText';\n\n// #region Typings\n\n/**\n * @public\n */\nexport interface ExpandableTextBaseProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Text shown for expanding the content.\n   * @defaultValue 'Show more'\n   */\n  expandLabel?: ReactNode;\n  /**\n   * Text shown for collapsing the content.\n   * @defaultValue 'Show less'\n   */\n  collapseLabel?: ReactNode;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextUncontrolledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   * @defaultValue false\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded?: never;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange?: never;\n}\n\n/**\n * @public\n */\nexport interface ExpandableTextControlledProps {\n  /**\n   * Determines whether or not the content is initially expanded in an uncontrolled scenario.\n   */\n  defaultExpanded?: never;\n  /**\n   * Determines whether or not the content is expanded in a controlled scenario.\n   */\n  expanded: boolean;\n  /**\n   * Callback fired when the expanded attribute changes in a controlled scenario.\n   */\n  onExpandChange: (expanded: boolean) => void;\n}\n\n/**\n * Accepted properties for ExpandableText\n * @public\n */\nexport type ExpandableTextProps = ExpandableTextBaseProps &\n  (ExpandableTextControlledProps | ExpandableTextUncontrolledProps);\n\n/**\n * The `ExpandableText` component provides expand and collapse functionality for inline text.\n * @public\n */\nexport const ExpandableText = forwardRef<HTMLElement, ExpandableTextProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expandLabel = (\n        <FormattedMessage\n          description=\"Shown for expandable text.\"\n          defaultMessage=\"Show more\"\n          id=\"DV3d5lBJda+EHJja\"\n        />\n      ),\n      collapseLabel = (\n        <FormattedMessage\n          description=\"Shown for collapsible text.\"\n          defaultMessage=\"Show less\"\n          id=\"986buSbL34GVFlBf\"\n        />\n      ),\n      defaultExpanded = false,\n      expanded,\n      onExpandChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const [isExpanded, setExpanded] = useControllableState({\n      defaultValue: defaultExpanded,\n      value: expanded,\n      onChange: onExpandChange,\n    });\n\n    const textId = useId();\n\n    // note: need to check for more than just space character\n    const beginsWithWhitespace =\n      Array.isArray(children) === false &&\n      typeof children === 'string' &&\n      /^\\s/.test(children);\n\n    return (\n      <>\n        <span\n          ref={forwardedRef}\n          id={textId}\n          role=\"region\"\n          className={clsx(\n            expandableTextCSS({ expanded: isExpanded }),\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          {...ariaLabelingProps}\n          {...behavioralTrackingProps}\n          {...forwardProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {isExpanded && beginsWithWhitespace && ' '}\n          {isExpanded && children}\n        </span>{' '}\n        <button\n          onClick={() => setExpanded(!isExpanded)}\n          aria-controls={textId}\n          aria-expanded={isExpanded}\n          className={expandableTextButtonCSS}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dt-name={isExpanded ? 'ShowLessButton' : 'ShowMoreButton'}\n        >\n          {isExpanded ? collapseLabel : expandLabel}\n        </button>\n      </>\n    );\n  },\n);\n\n(\n  ExpandableText as typeof ExpandableText & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAoGQ,SA4CF,UA5CE,KA6CA,YA7CA;AApGR,OAAO,UAAU;AAEjB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,MAAM,iBAAiB;AA0EhB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,cACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,gBACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,IAAG;AAAA;AAAA,MACL;AAAA,MAEF,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,UAAM,oBAAoB,qBAAqB,SAAS;AACxD,UAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,UAAM,CAAC,YAAY,WAAW,IAAI,qBAAqB;AAAA,MACrD,cAAc;AAAA,MACd,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,SAAS,MAAM;AAGrB,UAAM,uBACJ,MAAM,QAAQ,QAAQ,MAAM,SAC5B,OAAO,aAAa,YACpB,MAAM,KAAK,QAAQ;AAErB,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAW;AAAA,YACT,kBAAkB,EAAE,UAAU,WAAW,CAAC;AAAA,YAC1C;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,qBAAmB;AAAA,UAElB;AAAA,0BAAc,wBAAwB;AAAA,YACtC,cAAc;AAAA;AAAA;AAAA,MACjB;AAAA,MAAQ;AAAA,MACR;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,MAAM,YAAY,CAAC,UAAU;AAAA,UACtC,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc,aAAa,mBAAmB;AAAA,UAE7C,uBAAa,gBAAgB;AAAA;AAAA,MAChC;AAAA,OACF;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import "../../core/styles/focusRingStatic.css";
 import "./ExpandableText.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var expandableTextButtonCSS = "_19jh2ut3-3-1-3 _z0fq9b4-3-1-3 _z0fq9bc-3-1-3 _z0fq9b5-3-1-3 _z0fq9ba-3-1-3";
-var expandableTextCSS = _7a468({ defaultClassName: "_19jh2ut0-3-1-3", variantClassNames: { expanded: { true: "_19jh2ut1-3-1-3", false: "_19jh2ut2-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var expandableTextButtonCSS = "_19jh2ut3-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b5-3-2-0 _z0fq9ba-3-2-0";
+var expandableTextCSS = _7a468({ defaultClassName: "_19jh2ut0-3-2-0", variantClassNames: { expanded: { true: "_19jh2ut1-3-2-0", false: "_19jh2ut2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   expandableTextButtonCSS,
   expandableTextCSS

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/expandable-text/ExpandableText.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExpandableText.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandableTextButtonCSS = '_19jh2ut3-3-1-3 _z0fq9b4-3-1-3 _z0fq9bc-3-1-3 _z0fq9b5-3-1-3 _z0fq9ba-3-1-3';\nexport var expandableTextCSS = _7a468({defaultClassName:'_19jh2ut0-3-1-3',variantClassNames:{expanded:{true:'_19jh2ut1-3-1-3',false:'_19jh2ut2-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExpandableText.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandableTextButtonCSS = '_19jh2ut3-3-2-0 _z0fq9b4-3-2-0 _z0fq9bc-3-2-0 _z0fq9b5-3-2-0 _z0fq9ba-3-2-0';\nexport var expandableTextCSS = _7a468({defaultClassName:'_19jh2ut0-3-2-0',variantClassNames:{expanded:{true:'_19jh2ut1-3-2-0',false:'_19jh2ut2-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/feature-highlight/FeatureHighlight.css

@@ -1,4 +1,4 @@
-._1t60p5x0-3-1-3 {
+._1t60p5x0-3-2-0 {
   box-sizing: border-box;
   max-width: min(400px, 100vw);
   max-height: 100vh;
@@ -7,7 +7,7 @@
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1t60p5x1-3-1-3 {
+._1t60p5x1-3-2-0 {
   position: absolute;
   width: var(--dt-spacings-size-12, 12px);
   height: var(--dt-spacings-size-12, 12px);
@@ -15,7 +15,7 @@
   visibility: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._1t60p5x1-3-1-3:before {
+._1t60p5x1-3-2-0:before {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-12, 12px);
@@ -25,35 +25,35 @@
   transform: rotate(45deg);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-[data-popper-placement^="top"] > ._1t60p5x1-3-1-3 {
+[data-popper-placement^="top"] > ._1t60p5x1-3-2-0 {
   bottom: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="top"] > ._1t60p5x1-3-1-3:before {
+[data-popper-placement^="top"] > ._1t60p5x1-3-2-0:before {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0;
   clip-path: polygon(200% -103%, 200% 200%, -100% 197%);
 }
-[data-popper-placement^="bottom"] > ._1t60p5x1-3-1-3 {
+[data-popper-placement^="bottom"] > ._1t60p5x1-3-2-0 {
   top: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="bottom"] > ._1t60p5x1-3-1-3:before {
+[data-popper-placement^="bottom"] > ._1t60p5x1-3-2-0:before {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0;
   clip-path: polygon(203% -100%, -100% -100%, -97% 200%);
 }
-[data-popper-placement^="left"] > ._1t60p5x1-3-1-3 {
+[data-popper-placement^="left"] > ._1t60p5x1-3-2-0 {
   right: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="left"] > ._1t60p5x1-3-1-3:before {
+[data-popper-placement^="left"] > ._1t60p5x1-3-2-0:before {
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px);
   clip-path: polygon(-100% -97%, 200% -100%, 197% 200%);
 }
-[data-popper-placement^="right"] > ._1t60p5x1-3-1-3 {
+[data-popper-placement^="right"] > ._1t60p5x1-3-2-0 {
   left: calc(calc(var(--dt-spacings-size-12, 12px) / 2) * -1);
 }
-[data-popper-placement^="right"] > ._1t60p5x1-3-1-3:before {
+[data-popper-placement^="right"] > ._1t60p5x1-3-2-0:before {
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px);
   clip-path: polygon(-100% -103%, -100% 200%, 203% 200%);
 }
-._1t60p5x2-3-1-3 {
+._1t60p5x2-3-2-0 {
   position: relative;
   right: calc(var(--dt-spacings-size-8, 8px) * -1);
   z-index: calc(var(--dt-elevations-default, 1) - 1);

package/esm/content/feature-highlight/FeatureHighlight.js

@@ -310,6 +310,7 @@ const FeatureHighlightRoot = forwardRef(
                               id: "XQHEJyt2t/js0TGr",
                               description: "Close the feature highlight."
                             }),
+                            "data-dt-name": "CloseButton",
                             children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(XmarkIcon, {}) })
                           }
                         )