@dynatrace/strato-components 1.14.0 → 1.16.0

package/esm/typography/highlight/Highlight.js

@@ -1,152 +1,59 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import {
-  Children,
-  cloneElement,
-  createElement,
-  Fragment as Fragment2,
-  isValidElement
-} from "react";
-import {
-  FormattedMessage,
-  useIntl
-} from "react-intl";
-import { isElement } from "react-is";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
 import * as styles from "./Highlight.sty.js";
-const HTML_CHARS_OVERRIDES = [
-  [/&lt;/g, "<"],
-  [/&gt;/g, ">"],
-  [/&amp;/g, "&"],
-  [/&nbsp;/g, " "]
-];
-function escapeRegExp(text) {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function highlightChildren(intl, children, term, caseSensitive, dataTestId, dataDtrumMask, dataDtrumAllow) {
-  const terms = (() => {
+import { createRangedHighlights } from "./utils/create-ranged-highlights.js";
+import { getOrCreateSharedHighlight } from "./utils/get-or-create-shared-highlight.js";
+import { devLog } from "../../core/utils/logging.js";
+const Highlight = (props) => {
+  const {
+    children,
+    term,
+    caseSensitive = false,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow
+  } = props;
+  const rootRef = useRef(null);
+  const terms = useMemo(() => {
     if (Array.isArray(term)) {
       return term.filter((t) => t);
     }
     return term ? [term] : [];
-  })();
-  return terms.length > 0 ? Children.map(
-    children,
-    (child) => highlightRecursive(
-      intl,
-      child,
-      terms,
-      caseSensitive,
-      dataTestId,
-      dataDtrumMask,
-      dataDtrumAllow
-    )
-  ) : children;
-}
-function isFormattedMessageElement(node) {
-  return isElement(node) && node.type !== void 0 && node.type === FormattedMessage;
-}
-function highlightRecursive(intl, sourceElement, terms, caseSensitive, dataTestId, dataDtrumMask, dataDtrumAllow) {
-  if (!sourceElement) {
-    return sourceElement;
-  }
-  let elementToHighlight = sourceElement;
-  if (isFormattedMessageElement(elementToHighlight)) {
-    const { id, description, defaultMessage, values } = elementToHighlight.props;
-    const messageDescriptor = {
-      id,
-      description,
-      defaultMessage
-    };
-    elementToHighlight = intl.formatMessage(messageDescriptor, values);
-    if (Array.isArray(elementToHighlight)) {
-      return highlightRecursive(
-        intl,
-        createElement(Fragment2, {}, elementToHighlight),
+  }, [term]);
+  const highlight = getOrCreateSharedHighlight();
+  useEffect(() => {
+    const currentElement = rootRef.current;
+    const storedRanges = [];
+    if (currentElement) {
+      const ranges = createRangedHighlights(
+        currentElement,
         terms,
         caseSensitive,
-        dataTestId,
-        dataDtrumMask,
-        dataDtrumAllow
+        highlight
       );
+      storedRanges.push(...ranges);
     }
-  }
-  if (isValidElement(elementToHighlight)) {
-    const children = Children.map(
-      elementToHighlight.props.children,
-      (child) => highlightRecursive(
-        intl,
-        child,
-        terms,
-        caseSensitive,
-        dataTestId,
-        dataDtrumMask,
-        dataDtrumAllow
-      )
-    );
-    return cloneElement(
-      elementToHighlight,
-      elementToHighlight.props,
+    return () => {
+      for (const storedRange of storedRanges) {
+        try {
+          highlight.delete(storedRange);
+        } catch {
+          devLog("Failed to delete range", storedRange);
+        }
+      }
+    };
+  }, [children, highlight, terms, caseSensitive]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: rootRef,
+      className: styles.wrapper,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       children
-    );
-  }
-  return highlightLeafElement(
-    elementToHighlight,
-    terms,
-    caseSensitive,
-    dataTestId,
-    dataDtrumMask,
-    dataDtrumAllow
-  );
-}
-function highlightLeafElement(textContent, terms, caseSensitive, dataTestId, dataDtrumMask, dataDtrumAllow) {
-  if (terms.length === 0) {
-    return textContent;
-  }
-  const sanitizedTextContent = HTML_CHARS_OVERRIDES.reduce(
-    (text, [needle, replacement]) => text.replace(needle, replacement),
-    `${textContent}`
-  );
-  const termsInLowerCase = terms.map((t) => t.toLowerCase());
-  return getTextTokens(sanitizedTextContent, terms, caseSensitive).map(
-    (token, index) => termsInLowerCase.includes(token.toLowerCase()) ? /* @__PURE__ */ jsx(
-      "mark",
-      {
-        role: "mark",
-        className: styles.highlight,
-        "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow,
-        children: token
-      },
-      `${token}-${index}`
-    ) : /* @__PURE__ */ jsx("span", { className: styles.text, children: token }, `${token}-${index}`)
-  );
-}
-function getTextTokens(textContent, terms, caseSensitive) {
-  const flags = caseSensitive ? "gm" : "gmi";
-  const regExp = new RegExp(
-    `(${terms.map((t) => escapeRegExp(t)).join("|")})`,
-    flags
+    }
   );
-  return textContent.toString().split(regExp).filter((s) => s.length > 0);
-}
-const Highlight = (props) => {
-  const {
-    children,
-    term,
-    caseSensitive = false,
-    "data-testid": dataTestId,
-    "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
-  } = props;
-  const intl = useIntl();
-  return /* @__PURE__ */ jsx(Fragment, { children: highlightChildren(
-    intl,
-    children,
-    term,
-    caseSensitive,
-    dataTestId,
-    dataDtrumMask,
-    dataDtrumAllow
-  ) });
 };
 Highlight.displayName = "Highlight";
 export {

package/esm/typography/highlight/Highlight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/highlight/Highlight.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  cloneElement,\n  createElement,\n  Fragment,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport {\n  FormattedMessage,\n  useIntl,\n  type IntlShape,\n  type MessageDescriptor,\n} from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Highlight.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * The props for the Heading component.\n * @public\n */\nexport interface HighlightProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * Either a substring or an array of multiple different substrings that\n   * should be highlighted in the projected content.\n   * Every occurrence of the string(s) is highlighted accordingly.\n   */\n  term: string | string[];\n\n  /**\n   * Property that determines whether the highlighting search is case-sensitive.\n   * If set to `true`, the component searches for case sensitive occurrences.\n   * @defaultValue false\n   */\n  caseSensitive?: boolean;\n}\n\nconst HTML_CHARS_OVERRIDES: [RegExp, string][] = [\n  [/&lt;/g, '<'],\n  [/&gt;/g, '>'],\n  [/&amp;/g, '&'],\n  [/&nbsp;/g, ' '],\n];\n\n/** Escapes all characters that could be dangerous for a regular expression */\nfunction escapeRegExp(text: string): string {\n  return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n\n/** Highlights all occurences of a list of terms within a ReactNode. */\nfunction highlightChildren(\n  intl: IntlShape,\n  children: ReactNode,\n  term: string | string[],\n  caseSensitive: boolean,\n  dataTestId?: string,\n  dataDtrumMask?: boolean,\n  dataDtrumAllow?: boolean,\n) {\n  const terms = (() => {\n    if (Array.isArray(term)) {\n      return term.filter((t) => t);\n    }\n\n    return term ? [term] : [];\n  })();\n\n  return terms.length > 0\n    ? Children.map(children, (child: ReactNode) =>\n        highlightRecursive(\n          intl,\n          child,\n          terms,\n          caseSensitive,\n          dataTestId,\n          dataDtrumMask,\n          dataDtrumAllow,\n        ),\n      )\n    : children;\n}\n\nfunction isFormattedMessageElement(\n  node: ReactNode,\n  // Needs to overlap with the types from the FormattedMessage function\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): node is ReactElement<MessageDescriptor & { values: Record<string, any> }> {\n  return (\n    isElement(node) && node.type !== undefined && node.type === FormattedMessage\n  );\n}\n\n/**\n * Iterates over all children of a ReactNode recursively to look\n * for a list of terms and highlights them.\n */\nfunction highlightRecursive(\n  intl: IntlShape,\n  sourceElement: ReactNode,\n  terms: string[],\n  caseSensitive: boolean,\n  dataTestId?: string,\n  dataDtrumMask?: boolean,\n  dataDtrumAllow?: boolean,\n): ReactNode {\n  if (!sourceElement) {\n    return sourceElement;\n  }\n\n  let elementToHighlight = sourceElement;\n\n  // For `FormattedMessage` components explicitly retrieve its node(s)\n  if (isFormattedMessageElement(elementToHighlight)) {\n    const { id, description, defaultMessage, values } =\n      elementToHighlight.props;\n\n    const messageDescriptor = {\n      id,\n      description,\n      defaultMessage,\n    };\n    elementToHighlight = intl.formatMessage(messageDescriptor, values);\n\n    if (Array.isArray(elementToHighlight)) {\n      return highlightRecursive(\n        intl,\n        createElement(Fragment, {}, elementToHighlight),\n        terms,\n        caseSensitive,\n        dataTestId,\n        dataDtrumMask,\n        dataDtrumAllow,\n      );\n    }\n  }\n\n  if (isValidElement(elementToHighlight)) {\n    const children = Children.map(\n      (elementToHighlight.props as PropsWithChildren).children,\n      (child) =>\n        highlightRecursive(\n          intl,\n          child,\n          terms,\n          caseSensitive,\n          dataTestId,\n          dataDtrumMask,\n          dataDtrumAllow,\n        ),\n    );\n\n    return cloneElement(\n      elementToHighlight,\n      elementToHighlight.props as PropsWithChildren,\n      children,\n    );\n  }\n\n  return highlightLeafElement(\n    elementToHighlight as string | number,\n    terms,\n    caseSensitive,\n    dataTestId,\n    dataDtrumMask,\n    dataDtrumAllow,\n  );\n}\n\n/** Highlights parts of the text that match a certain group of terms. */\nfunction highlightLeafElement(\n  textContent: string | number,\n  terms: string[],\n  caseSensitive: boolean,\n  dataTestId?: string,\n  dataDtrumMask?: boolean,\n  dataDtrumAllow?: boolean,\n): ReactNode {\n  if (terms.length === 0) {\n    return textContent;\n  }\n\n  const sanitizedTextContent = HTML_CHARS_OVERRIDES.reduce(\n    (text, [needle, replacement]) => text.replace(needle, replacement),\n    `${textContent}`,\n  );\n  const termsInLowerCase = terms.map((t) => t.toLowerCase());\n\n  return getTextTokens(sanitizedTextContent, terms, caseSensitive).map(\n    (token: string, index) =>\n      termsInLowerCase.includes(token.toLowerCase()) ? (\n        <mark\n          key={`${token}-${index}`}\n          role=\"mark\"\n          className={styles.highlight}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n        >\n          {token}\n        </mark>\n      ) : (\n        <span className={styles.text} key={`${token}-${index}`}>\n          {token}\n        </span>\n      ),\n  );\n}\n\n/**\n * Splits text into an array of strings where a given list of terms\n * acts as separator strings.\n */\nfunction getTextTokens(\n  textContent: string | number,\n  terms: string[],\n  caseSensitive: boolean,\n): string[] {\n  const flags = caseSensitive ? 'gm' : 'gmi';\n  const regExp = new RegExp(\n    `(${terms.map((t) => escapeRegExp(t)).join('|')})`,\n    flags,\n  );\n\n  return textContent\n    .toString()\n    .split(regExp)\n    .filter((s) => s.length > 0);\n}\n\n/**\n * Use the `Highlight` component to highlight one or more substrings within a\n * text.\n * @public\n */\nexport const Highlight = (props: HighlightProps): ReactElement => {\n  const {\n    children,\n    term,\n    caseSensitive = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n\n  return (\n    <>\n      {highlightChildren(\n        intl,\n        children,\n        term,\n        caseSensitive,\n        dataTestId,\n        dataDtrumMask,\n        dataDtrumAllow,\n      )}\n    </>\n  );\n};\n\n(Highlight as typeof Highlight & { displayName: string }).displayName =\n  'Highlight';\n"],
-  "mappings": "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",
-  "names": ["Fragment"]
+  "sourcesContent": ["import { useEffect, useMemo, useRef, type ReactElement } from 'react';\n\nimport * as styles from './Highlight.sty.js';\nimport { createRangedHighlights } from './utils/create-ranged-highlights.js';\nimport { getOrCreateSharedHighlight } from './utils/get-or-create-shared-highlight.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { devLog } from '../../core/utils/logging.js';\n\n/**\n * The props for the Highlight component.\n * @public\n */\nexport interface HighlightProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * Either a substring or an array of multiple different substrings that\n   * should be highlighted in the projected content.\n   * Every occurrence of the string(s) is highlighted accordingly.\n   */\n  term: string | string[];\n\n  /**\n   * Property that determines whether the highlighting search is case-sensitive.\n   * If set to `true`, the component searches for case sensitive occurrences.\n   * @defaultValue false\n   */\n  caseSensitive?: boolean;\n}\n\n/**\n * Use the `Highlight` component to highlight one or more substrings within a\n * text.\n * @public\n */\nexport const Highlight = (props: HighlightProps): ReactElement => {\n  const {\n    children,\n    term,\n    caseSensitive = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const terms = useMemo(() => {\n    if (Array.isArray(term)) {\n      return term.filter((t) => t);\n    }\n\n    return term ? [term] : [];\n  }, [term]);\n\n  const highlight = getOrCreateSharedHighlight();\n\n  useEffect(() => {\n    const currentElement = rootRef.current;\n    const storedRanges: Array<Range> = [];\n\n    if (currentElement) {\n      const ranges = createRangedHighlights(\n        currentElement,\n        terms,\n        caseSensitive,\n        highlight,\n      );\n      storedRanges.push(...ranges);\n    }\n\n    return () => {\n      for (const storedRange of storedRanges) {\n        try {\n          highlight.delete(storedRange);\n        } catch {\n          devLog('Failed to delete range', storedRange);\n        }\n      }\n    };\n  }, [children, highlight, terms, caseSensitive]);\n\n  return (\n    <span\n      ref={rootRef}\n      className={styles.wrapper}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      {children}\n    </span>\n  );\n};\n\n(Highlight as typeof Highlight & { displayName: string }).displayName =\n  'Highlight';\n"],
+  "mappings": "AAkFI;AAlFJ,SAAS,WAAW,SAAS,cAAiC;AAE9D,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAI3C,SAAS,cAAc;AA2BhB,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,UAAU,OAAwB,IAAI;AAE5C,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,aAAO,KAAK,OAAO,CAAC,MAAM,CAAC;AAAA,IAC7B;AAEA,WAAO,OAAO,CAAC,IAAI,IAAI,CAAC;AAAA,EAC1B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YAAY,2BAA2B;AAE7C,YAAU,MAAM;AACd,UAAM,iBAAiB,QAAQ;AAC/B,UAAM,eAA6B,CAAC;AAEpC,QAAI,gBAAgB;AAClB,YAAM,SAAS;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,mBAAa,KAAK,GAAG,MAAM;AAAA,IAC7B;AAEA,WAAO,MAAM;AACX,iBAAW,eAAe,cAAc;AACtC,YAAI;AACF,oBAAU,OAAO,WAAW;AAAA,QAC9B,QAAQ;AACN,iBAAO,0BAA0B,WAAW;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,OAAO,aAAa,CAAC;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,OAAO;AAAA,MAClB,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH;AAEJ;AAEC,UAAyD,cACxD;",
+  "names": []
 }

package/esm/typography/highlight/Highlight.sty.js

@@ -1,8 +1,6 @@
 import "./Highlight.css";
-var highlight = "_lajjl30-1-14-0";
-var text = "_lajjl31-1-14-0";
+var wrapper = "_lajjl30-1-16-0";
 export {
-  highlight,
-  text
+  wrapper
 };
 //# sourceMappingURL=Highlight.sty.js.map

package/esm/typography/highlight/Highlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/highlight/Highlight.css.ts"],
-  "sourcesContent": ["import './Highlight.css';\nexport var highlight = '_lajjl30-1-14-0';\nexport var text = '_lajjl31-1-14-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,OAAO;",
+  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-1-16-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/highlight/utils/create-ranged-highlights.js

@@ -0,0 +1,51 @@
+import { devLog } from "../../../core/utils/logging.js";
+function collectTextNodes(node, textNodes = []) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    textNodes.push(node);
+  } else {
+    for (const child of Array.from(node.childNodes)) {
+      collectTextNodes(child, textNodes);
+    }
+  }
+  return textNodes;
+}
+function getTextRangeForHighlight(element, terms, caseSensitive) {
+  const textNodes = collectTextNodes(element);
+  const ranges = [];
+  for (const textNode of textNodes) {
+    const textContent = textNode.textContent ?? "";
+    const searchText = caseSensitive ? textContent : textContent.toLocaleLowerCase();
+    for (const term of terms) {
+      const searchTerm = caseSensitive ? term : term.toLocaleLowerCase();
+      let index = 0;
+      while ((index = searchText.indexOf(searchTerm, index)) !== -1) {
+        const range = new Range();
+        range.setStart(textNode, index);
+        range.setEnd(textNode, index + term.length);
+        ranges.push(range);
+        index += term.length;
+      }
+    }
+  }
+  return ranges;
+}
+function createRangedHighlights(targetElement, terms, caseSensitive, highlight) {
+  const storedRanges = [];
+  if (terms.length === 0) {
+    return storedRanges;
+  }
+  const ranges = getTextRangeForHighlight(targetElement, terms, caseSensitive);
+  for (const range of ranges) {
+    try {
+      highlight.add(range);
+      storedRanges.push(range);
+    } catch {
+      devLog("Failed to add range", range);
+    }
+  }
+  return storedRanges;
+}
+export {
+  createRangedHighlights
+};
+//# sourceMappingURL=create-ranged-highlights.js.map

package/esm/typography/highlight/utils/create-ranged-highlights.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/typography/highlight/utils/create-ranged-highlights.ts"],
+  "sourcesContent": ["import { devLog } from '../../../core/utils/logging.js';\n\n/**\n * Recursively collects all text nodes within a given node.\n * @param node - The node to collect text nodes from.\n * @param textNodes - The array to store collected text nodes.\n * @returns An array with all text nodes.\n */\nfunction collectTextNodes(node: Node, textNodes: Node[] = []): Node[] {\n  if (node.nodeType === Node.TEXT_NODE) {\n    textNodes.push(node);\n  } else {\n    for (const child of Array.from(node.childNodes)) {\n      collectTextNodes(child, textNodes);\n    }\n  }\n\n  return textNodes;\n}\n\n/**\n * Gets all text ranges for the given search terms.\n * @param element - The element to search.\n * @param terms - The terms to highlight.\n * @param caseSensitive - Whether the search is case-sensitive.\n * @returns An array of ranges matching the search terms.\n */\nfunction getTextRangeForHighlight(\n  element: HTMLElement,\n  terms: string[],\n  caseSensitive: boolean,\n): Range[] {\n  const textNodes: Node[] = collectTextNodes(element);\n\n  // Collect ranges for all search terms\n  const ranges: Range[] = [];\n\n  for (const textNode of textNodes) {\n    const textContent = textNode.textContent ?? '';\n    // Normalize text content if case sensitivity is disabled\n    const searchText = caseSensitive\n      ? textContent\n      : textContent.toLocaleLowerCase();\n\n    for (const term of terms) {\n      // Normalize search term if case sensitivity is disabled\n      const searchTerm = caseSensitive ? term : term.toLocaleLowerCase();\n      let index = 0;\n\n      while ((index = searchText.indexOf(searchTerm, index)) !== -1) {\n        const range = new Range();\n        range.setStart(textNode, index);\n        range.setEnd(textNode, index + term.length);\n        ranges.push(range);\n        index += term.length;\n      }\n    }\n  }\n\n  return ranges;\n}\n\n/**\n * Creates a local range array that is added to the highlight and returns it.\n * @param targetElement - The element to search within.\n * @param terms - The terms to highlight.\n * @param caseSensitive - Whether the search is case-sensitive.\n * @param highlight - The Highlight instance to add the ranges to.\n * @returns An array of ranges that were added to the highlight.\n * @internal\n */\nexport function createRangedHighlights(\n  targetElement: HTMLElement,\n  terms: string[],\n  caseSensitive: boolean,\n  highlight: Set<AbstractRange> | Highlight,\n): Range[] {\n  const storedRanges: Range[] = [];\n\n  if (terms.length === 0) {\n    return storedRanges;\n  }\n\n  const ranges = getTextRangeForHighlight(targetElement, terms, caseSensitive);\n\n  for (const range of ranges) {\n    try {\n      highlight.add(range);\n      storedRanges.push(range);\n    } catch {\n      devLog('Failed to add range', range);\n    }\n  }\n\n  return storedRanges;\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAQvB,SAAS,iBAAiB,MAAY,YAAoB,CAAC,GAAW;AACpE,MAAI,KAAK,aAAa,KAAK,WAAW;AACpC,cAAU,KAAK,IAAI;AAAA,EACrB,OAAO;AACL,eAAW,SAAS,MAAM,KAAK,KAAK,UAAU,GAAG;AAC/C,uBAAiB,OAAO,SAAS;AAAA,IACnC;AAAA,EACF;AAEA,SAAO;AACT;AASA,SAAS,yBACP,SACA,OACA,eACS;AACT,QAAM,YAAoB,iBAAiB,OAAO;AAGlD,QAAM,SAAkB,CAAC;AAEzB,aAAW,YAAY,WAAW;AAChC,UAAM,cAAc,SAAS,eAAe;AAE5C,UAAM,aAAa,gBACf,cACA,YAAY,kBAAkB;AAElC,eAAW,QAAQ,OAAO;AAExB,YAAM,aAAa,gBAAgB,OAAO,KAAK,kBAAkB;AACjE,UAAI,QAAQ;AAEZ,cAAQ,QAAQ,WAAW,QAAQ,YAAY,KAAK,OAAO,IAAI;AAC7D,cAAM,QAAQ,IAAI,MAAM;AACxB,cAAM,SAAS,UAAU,KAAK;AAC9B,cAAM,OAAO,UAAU,QAAQ,KAAK,MAAM;AAC1C,eAAO,KAAK,KAAK;AACjB,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAWO,SAAS,uBACd,eACA,OACA,eACA,WACS;AACT,QAAM,eAAwB,CAAC;AAE/B,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,yBAAyB,eAAe,OAAO,aAAa;AAE3E,aAAW,SAAS,QAAQ;AAC1B,QAAI;AACF,gBAAU,IAAI,KAAK;AACnB,mBAAa,KAAK,KAAK;AAAA,IACzB,QAAQ;AACN,aAAO,uBAAuB,KAAK;AAAA,IACrC;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/typography/highlight/utils/get-or-create-shared-highlight.js

@@ -0,0 +1,25 @@
+import { devLog } from "../../../core/utils/logging.js";
+const HIGHLIGHT_NAME = "strato-typography-highlight";
+let sharedHighlight = null;
+function getOrCreateSharedHighlight() {
+  if (sharedHighlight) {
+    return sharedHighlight;
+  }
+  if ("Highlight" in window) {
+    sharedHighlight = new Highlight();
+    if (sharedHighlight instanceof Highlight) {
+      CSS.highlights.set(HIGHLIGHT_NAME, sharedHighlight);
+    }
+  } else {
+    sharedHighlight = /* @__PURE__ */ new Set();
+    devLog(
+      "CSS Highlight API is not supported in this browser. Text highlighting will not be visible."
+    );
+  }
+  return sharedHighlight;
+}
+export {
+  HIGHLIGHT_NAME,
+  getOrCreateSharedHighlight
+};
+//# sourceMappingURL=get-or-create-shared-highlight.js.map

package/esm/typography/highlight/utils/get-or-create-shared-highlight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/typography/highlight/utils/get-or-create-shared-highlight.ts"],
+  "sourcesContent": ["import { devLog } from '../../../core/utils/logging.js';\n\nexport const HIGHLIGHT_NAME = 'strato-typography-highlight';\nlet sharedHighlight: Set<AbstractRange> | Highlight | null = null;\n\n/**\n * Gets or creates the shared text highlight.\n * All Highlight components share the same highlight instance.\n * @internal\n */\nexport function getOrCreateSharedHighlight(): Set<AbstractRange> | Highlight {\n  if (sharedHighlight) {\n    return sharedHighlight;\n  }\n\n  if ('Highlight' in window) {\n    sharedHighlight = new Highlight();\n    if (sharedHighlight instanceof Highlight) {\n      CSS.highlights.set(HIGHLIGHT_NAME, sharedHighlight);\n    }\n  } else {\n    // Fallback for browsers without CSS Highlight API support\n    sharedHighlight = new Set();\n    devLog(\n      'CSS Highlight API is not supported in this browser. Text highlighting will not be visible.',\n    );\n  }\n\n  return sharedHighlight;\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEhB,MAAM,iBAAiB;AAC9B,IAAI,kBAAyD;AAOtD,SAAS,6BAA6D;AAC3E,MAAI,iBAAiB;AACnB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,QAAQ;AACzB,sBAAkB,IAAI,UAAU;AAChC,QAAI,2BAA2B,WAAW;AACxC,UAAI,WAAW,IAAI,gBAAgB,eAAe;AAAA,IACpD;AAAA,EACF,OAAO;AAEL,sBAAkB,oBAAI,IAAI;AAC1B;AAAA,MACE;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/typography/link/Link.css

@@ -1,12 +1,12 @@
-._1iksxp40-1-14-0 {
+._1iksxp40-1-16-0 {
   display: inline;
   color: var(--dt-colors-text-primary-default, #464cce);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40-1-14-0:hover {
+._1iksxp40-1-16-0:hover {
   color: var(--dt-colors-text-primary-default-hover, #3431b3);
 }
-._1iksxp40-1-14-0:active {
+._1iksxp40-1-16-0:active {
   color: var(--dt-colors-text-primary-default-active, #250f98);
 }

package/esm/typography/link/Link.sty.js

@@ -1,5 +1,5 @@
 import "./Link.css";
-var link = "_1iksxp40-1-14-0";
+var link = "_1iksxp40-1-16-0";
 export {
   link
 };

package/esm/typography/link/Link.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/link/Link.css.ts"],
-  "sourcesContent": ["import './Link.css';\nexport var link = '_1iksxp40-1-14-0';"],
+  "sourcesContent": ["import './Link.css';\nexport var link = '_1iksxp40-1-16-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/typography/list/List.css

@@ -1,16 +1,16 @@
-._16276mt0-1-14-0 {
+._16276mt0-1-16-0 {
   margin: 0;
   padding-left: var(--dt-spacings-size-40, 40px);
 }
-._16276mt0-1-14-0 ._16276mt0-1-14-0 {
+._16276mt0-1-16-0 ._16276mt0-1-16-0 {
   margin-block: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._16276mt1-1-14-0 {
+._16276mt1-1-16-0 {
   position: relative;
   overflow-wrap: break-word;
   margin-block: var(--dt-spacings-size-2, 2px);
 }
-._16276mt1-1-14-0::marker {
+._16276mt1-1-16-0::marker {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }

package/esm/typography/list/List.sty.js

@@ -1,6 +1,6 @@
 import "./List.css";
-var listCSS = "_16276mt0-1-14-0";
-var listItemCSS = "_16276mt1-1-14-0";
+var listCSS = "_16276mt0-1-16-0";
+var listItemCSS = "_16276mt1-1-16-0";
 export {
   listCSS,
   listItemCSS

package/esm/typography/list/List.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/list/List.css.ts"],
-  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-1-14-0';\nexport var listItemCSS = '_16276mt1-1-14-0';"],
+  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-1-16-0';\nexport var listItemCSS = '_16276mt1-1-16-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/paragraph/Paragraph.css

@@ -1,17 +1,17 @@
-._487p2n0-1-14-0 {
+._487p2n0-1-16-0 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: inherit;
   font-style: normal;
 }
-._487p2n1-1-14-0 {
+._487p2n1-1-16-0 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._487p2n2-1-14-0 {
+._487p2n2-1-16-0 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/esm/typography/paragraph/Paragraph.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import { paragraphCSS } from "./Paragraph.sty.js";
-import { textStyleCSS } from "../../styles/textStyle.sty.js";
+import { paragraph } from "./Paragraph.sty.js";
+import { textStyle } from "../../styles/textStyle.sty.js";
 const Paragraph = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
     children,
@@ -29,11 +29,7 @@ const Paragraph = /* @__PURE__ */ forwardRef((props, ref) => {
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: clsx(
-        paragraphCSS({ ellipsis }),
-        textStyleCSS(),
-        consumerClassName
-      ),
+      className: clsx(paragraph({ ellipsis }), textStyle(), consumerClassName),
       style: {
         ...consumerStyle,
         "--strato-ellipsis-line-clamp": maxLines

package/esm/typography/paragraph/Paragraph.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/paragraph/Paragraph.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { paragraphCSS } from './Paragraph.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * The props for the Paragraph component.\n * @public\n *  */\nexport interface ParagraphProps\n  extends WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Limits the text to the given number of lines and adds ellipsis if the text would need more lines.\n   */\n  maxLines?: number;\n}\n\n/**\n * The `Paragraph` component displays a block of text with the default text style and supports text truncation.\n * @public\n */\nexport const Paragraph = /* @__PURE__ */ forwardRef<\n  HTMLParagraphElement,\n  ParagraphProps\n>((props, ref) => {\n  const {\n    children,\n    maxLines,\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  let ellipsis: undefined | 'singleLine' | 'multiLine';\n  if (maxLines === undefined || maxLines === 0) {\n    ellipsis = undefined;\n  } else if (maxLines === 1) {\n    ellipsis = 'singleLine';\n  } else {\n    ellipsis = 'multiLine';\n  }\n\n  return (\n    <p\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(\n        paragraphCSS({ ellipsis }),\n        textStyleCSS(),\n        consumerClassName,\n      )}\n      style={\n        {\n          ...consumerStyle,\n          '--strato-ellipsis-line-clamp': maxLines,\n        } as CSSProperties\n      }\n      {...remainingProps}\n    >\n      {children}\n    </p>\n  );\n});\n(Paragraph as typeof Paragraph & { displayName: string }).displayName =\n  'Paragraph';\n"],
-  "mappings": "AAwDI;AAxDJ,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,oBAAoB;AAM7B,SAAS,oBAAoB;AAsBtB,MAAM,YAA4B,2BAGvC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,MAAI;AACJ,MAAI,aAAa,UAAa,aAAa,GAAG;AAC5C,eAAW;AAAA,EACb,WAAW,aAAa,GAAG;AACzB,eAAW;AAAA,EACb,OAAO;AACL,eAAW;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,aAAa,EAAE,SAAS,CAAC;AAAA,QACzB,aAAa;AAAA,QACb;AAAA,MACF;AAAA,MACA,OACE;AAAA,QACE,GAAG;AAAA,QACH,gCAAgC;AAAA,MAClC;AAAA,MAED,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,UAAyD,cACxD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { paragraph } from './Paragraph.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.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';\nimport { textStyle } from '../../styles/textStyle.sty.js';\n\n/**\n * The props for the Paragraph component.\n * @public\n *  */\nexport interface ParagraphProps\n  extends WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Limits the text to the given number of lines and adds ellipsis if the text would need more lines.\n   */\n  maxLines?: number;\n}\n\n/**\n * The `Paragraph` component displays a block of text with the default text style and supports text truncation.\n * @public\n */\nexport const Paragraph = /* @__PURE__ */ forwardRef<\n  HTMLParagraphElement,\n  ParagraphProps\n>((props, ref) => {\n  const {\n    children,\n    maxLines,\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  let ellipsis: undefined | 'singleLine' | 'multiLine';\n  if (maxLines === undefined || maxLines === 0) {\n    ellipsis = undefined;\n  } else if (maxLines === 1) {\n    ellipsis = 'singleLine';\n  } else {\n    ellipsis = 'multiLine';\n  }\n\n  return (\n    <p\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(paragraph({ ellipsis }), textStyle(), consumerClassName)}\n      style={\n        {\n          ...consumerStyle,\n          '--strato-ellipsis-line-clamp': maxLines,\n        } as CSSProperties\n      }\n      {...remainingProps}\n    >\n      {children}\n    </p>\n  );\n});\n(Paragraph as typeof Paragraph & { displayName: string }).displayName =\n  'Paragraph';\n"],
+  "mappings": "AAwDI;AAxDJ,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,iBAAiB;AAM1B,SAAS,iBAAiB;AAsBnB,MAAM,YAA4B,2BAGvC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,MAAI;AACJ,MAAI,aAAa,UAAa,aAAa,GAAG;AAC5C,eAAW;AAAA,EACb,WAAW,aAAa,GAAG;AACzB,eAAW;AAAA,EACb,OAAO;AACL,eAAW;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,UAAU,EAAE,SAAS,CAAC,GAAG,UAAU,GAAG,iBAAiB;AAAA,MACvE,OACE;AAAA,QACE,GAAG;AAAA,QACH,gCAAgC;AAAA,MAClC;AAAA,MAED,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,UAAyD,cACxD;",
   "names": []
 }

package/esm/typography/paragraph/Paragraph.sty.js

@@ -1,7 +1,7 @@
 import "./Paragraph.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var paragraphCSS = _7a468({ defaultClassName: "_487p2n0-1-14-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-14-0", multiLine: "_487p2n2-1-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraph = _7a468({ defaultClassName: "_487p2n0-1-16-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-16-0", multiLine: "_487p2n2-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
-  paragraphCSS
+  paragraph
 };
 //# sourceMappingURL=Paragraph.sty.js.map

package/esm/typography/paragraph/Paragraph.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/paragraph/Paragraph.css.ts"],
-  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraphCSS = _7a468({defaultClassName:'_487p2n0-1-14-0',variantClassNames:{ellipsis:{singleLine:'_487p2n1-1-14-0',multiLine:'_487p2n2-1-14-0'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,YAAW,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-1-16-0',variantClassNames:{ellipsis:{singleLine:'_487p2n1-1-16-0',multiLine:'_487p2n2-1-16-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,YAAW,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/strikethrough/Strikethrough.css

@@ -1,4 +1,4 @@
-._4oao6y0-1-14-0 {
+._4oao6y0-1-16-0 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/esm/typography/strikethrough/Strikethrough.sty.js

@@ -1,5 +1,5 @@
 import "./Strikethrough.css";
-var strikethroughCSS = "_4oao6y0-1-14-0";
+var strikethroughCSS = "_4oao6y0-1-16-0";
 export {
   strikethroughCSS
 };

package/esm/typography/strikethrough/Strikethrough.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strikethrough/Strikethrough.css.ts"],
-  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-1-14-0';"],
+  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-1-16-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/typography/strong/Strong.css

@@ -1,4 +1,4 @@
-._wxp4dd0-1-14-0 {
+._wxp4dd0-1-16-0 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   overflow-wrap: break-word;
 }

package/esm/typography/strong/Strong.sty.js

@@ -1,5 +1,5 @@
 import "./Strong.css";
-var strongCSS = "_wxp4dd0-1-14-0";
+var strongCSS = "_wxp4dd0-1-16-0";
 export {
   strongCSS
 };

package/esm/typography/strong/Strong.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strong/Strong.css.ts"],
-  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-1-14-0';"],
+  "sourcesContent": ["import './Strong.css';\nexport var strongCSS = '_wxp4dd0-1-16-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/typography/text/Text.css

@@ -1,16 +1,16 @@
-._rup8ap0-1-14-0 {
+._rup8ap0-1-16-0 {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   overflow-wrap: break-word;
 }
-._rup8ap1-1-14-0 {
+._rup8ap1-1-16-0 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._rup8ap2-1-14-0 {
+._rup8ap2-1-16-0 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;