@dynatrace/strato-components 1.16.1 → 1.17.0

package/esm/typography/external-link/ExternalLink.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/external-link/ExternalLink.css.ts"],
-  "sourcesContent": ["import './ExternalLink.css';\nexport var externalLink = '_1v1skpy0-1-16-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './ExternalLink.css';\nexport var externalLink = '_1v1skpy0-1-17-0 _z0fq9b4-1-17-0 _z0fq9bc-1-17-0 _z0fq9b5-1-17-0 _z0fq9b8-1-17-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/typography/heading/Heading.css

@@ -1,10 +1,10 @@
-._5ei34w0-1-16-1 {
+._5ei34w0-1-17-0 {
   margin: 0;
   overflow-wrap: break-word;
   font-style: normal;
   color: inherit;
 }
-._5ei34w1-1-16-1 {
+._5ei34w1-1-17-0 {
   font-family: var(--dt-typography-heading-level-1-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-1-size, 32px);
   font-weight: var(--dt-typography-heading-level-1-weight, 600);
@@ -12,7 +12,7 @@
   text-transform: var(--dt-typography-heading-level-1-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-1-text-decoration, none);
 }
-._5ei34w2-1-16-1 {
+._5ei34w2-1-17-0 {
   font-family: var(--dt-typography-heading-level-2-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-2-size, 28px);
   font-weight: var(--dt-typography-heading-level-2-weight, 600);
@@ -20,7 +20,7 @@
   text-transform: var(--dt-typography-heading-level-2-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-2-text-decoration, none);
 }
-._5ei34w3-1-16-1 {
+._5ei34w3-1-17-0 {
   font-family: var(--dt-typography-heading-level-3-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-3-size, 24px);
   font-weight: var(--dt-typography-heading-level-3-weight, 600);
@@ -28,7 +28,7 @@
   text-transform: var(--dt-typography-heading-level-3-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-3-text-decoration, none);
 }
-._5ei34w4-1-16-1 {
+._5ei34w4-1-17-0 {
   font-family: var(--dt-typography-heading-level-4-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-4-size, 20px);
   font-weight: var(--dt-typography-heading-level-4-weight, 600);
@@ -36,7 +36,7 @@
   text-transform: var(--dt-typography-heading-level-4-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-4-text-decoration, none);
 }
-._5ei34w5-1-16-1 {
+._5ei34w5-1-17-0 {
   font-family: var(--dt-typography-heading-level-5-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-5-size, 16px);
   font-weight: var(--dt-typography-heading-level-5-weight, 600);
@@ -44,7 +44,7 @@
   text-transform: var(--dt-typography-heading-level-5-text-transform, none);
   text-decoration: var(--dt-typography-heading-level-5-text-decoration, none);
 }
-._5ei34w6-1-16-1 {
+._5ei34w6-1-17-0 {
   font-family: var(--dt-typography-heading-level-6-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-heading-level-6-size, 14px);
   font-weight: var(--dt-typography-heading-level-6-weight, 600);

package/esm/typography/heading/Heading.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { headingCSS } from "./Heading.sty.js";
+const COMPONENT_NAME = "Heading";
 const Heading = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     level,
@@ -26,11 +27,12 @@ const Heading = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       className: clsx(headingCSS({ visualLevel }), consumerClassName),
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 });
-Heading.displayName = "Heading";
+Heading.displayName = COMPONENT_NAME;
 export {
   Heading
 };

package/esm/typography/heading/Heading.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/heading/Heading.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { headingCSS } from './Heading.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { _HeadingTag } from '../../core/types/heading.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\n/**\n * Props used for the Heading component\n * @public\n */\nexport interface HeadingProps\n  extends DOMProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The visual level of the heading.\n   * @defaultValue 1\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * The polymorphed HTML tag that determines the semantic level of the heading.\n   * @defaultValue 'h1'\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\n/**\n * Use the `Heading` to render semantic HTML heading elements (`h1`, `h2`, etc.).\n * The component allows you to independently define both the visual and the semantic level of the heading.\n * @public\n */\nexport const Heading = /* @__PURE__ */ forwardRef<\n  HTMLHeadingElement,\n  HeadingProps\n>((props, forwardedRef) => {\n  const {\n    level,\n    children,\n    as,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const visualLevel = level ?? 1;\n  // semantic level\n  const HeadingTag: _HeadingTag = as ?? (`h${visualLevel}` as _HeadingTag);\n\n  return (\n    <HeadingTag\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(headingCSS({ visualLevel }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      {children}\n    </HeadingTag>\n  );\n});\n\n(Heading as typeof Heading & { displayName: string }).displayName = 'Heading';\n"],
-  "mappings": "AA2DI;AA3DJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAmCpB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAc,SAAS;AAE7B,QAAM,aAA0B,MAAO,IAAI,WAAW;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB;AAAA,MAC9D,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { headingCSS } from './Heading.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { _HeadingTag } from '../../core/types/heading.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 = 'Heading';\n\n/**\n * Props used for the Heading component\n * @public\n */\nexport interface HeadingProps\n  extends DOMProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The visual level of the heading.\n   * @defaultValue 1\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * The polymorphed HTML tag that determines the semantic level of the heading.\n   * @defaultValue 'h1'\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\n/**\n * Use the `Heading` to render semantic HTML heading elements (`h1`, `h2`, etc.).\n * The component allows you to independently define both the visual and the semantic level of the heading.\n * @public\n */\nexport const Heading = /* @__PURE__ */ forwardRef<\n  HTMLHeadingElement,\n  HeadingProps\n>((props, forwardedRef) => {\n  const {\n    level,\n    children,\n    as,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const visualLevel = level ?? 1;\n  // semantic level\n  const HeadingTag: _HeadingTag = as ?? (`h${visualLevel}` as _HeadingTag);\n\n  return (\n    <HeadingTag\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(headingCSS({ visualLevel }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </HeadingTag>\n  );\n});\n\n(Heading as typeof Heading & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA6DI;AA7DJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAQ3B,MAAM,iBAAiB;AA6BhB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,cAAc,SAAS;AAE7B,QAAM,aAA0B,MAAO,IAAI,WAAW;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB;AAAA,MAC9D,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/typography/heading/Heading.sty.js

@@ -1,6 +1,6 @@
 import "./Heading.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var headingCSS = _7a468({ defaultClassName: "_5ei34w0-1-16-1", variantClassNames: { visualLevel: { "1": "_5ei34w1-1-16-1", "2": "_5ei34w2-1-16-1", "3": "_5ei34w3-1-16-1", "4": "_5ei34w4-1-16-1", "5": "_5ei34w5-1-16-1", "6": "_5ei34w6-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var headingCSS = _7a468({ defaultClassName: "_5ei34w0-1-17-0", variantClassNames: { visualLevel: { "1": "_5ei34w1-1-17-0", "2": "_5ei34w2-1-17-0", "3": "_5ei34w3-1-17-0", "4": "_5ei34w4-1-17-0", "5": "_5ei34w5-1-17-0", "6": "_5ei34w6-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   headingCSS
 };

package/esm/typography/heading/Heading.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/heading/Heading.css.ts"],
-  "sourcesContent": ["import './Heading.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var headingCSS = _7a468({defaultClassName:'_5ei34w0-1-16-1',variantClassNames:{visualLevel:{'1':'_5ei34w1-1-16-1','2':'_5ei34w2-1-16-1','3':'_5ei34w3-1-16-1','4':'_5ei34w4-1-16-1','5':'_5ei34w5-1-16-1','6':'_5ei34w6-1-16-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Heading.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var headingCSS = _7a468({defaultClassName:'_5ei34w0-1-17-0',variantClassNames:{visualLevel:{'1':'_5ei34w1-1-17-0','2':'_5ei34w2-1-17-0','3':'_5ei34w3-1-17-0','4':'_5ei34w4-1-17-0','5':'_5ei34w5-1-17-0','6':'_5ei34w6-1-17-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,KAAI,mBAAkB,KAAI,mBAAkB,KAAI,mBAAkB,KAAI,mBAAkB,KAAI,mBAAkB,KAAI,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/typography/highlight/Highlight.css

@@ -1,8 +1,8 @@
-._lajjl30-1-16-1 {
+._lajjl30-1-17-0 {
   white-space: pre-wrap;
   flex: none;
 }
-._lajjl30-1-16-1::highlight(strato-typography-highlight), ._lajjl30-1-16-1 *::highlight(strato-typography-highlight) {
+._lajjl30-1-17-0::highlight(strato-typography-highlight), ._lajjl30-1-17-0 *::highlight(strato-typography-highlight) {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5b5c81);
 }

package/esm/typography/highlight/Highlight.js

@@ -4,6 +4,7 @@ import * as styles from "./Highlight.sty.js";
 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 COMPONENT_NAME = "Highlight";
 const Highlight = (props) => {
   const {
     children,
@@ -51,11 +52,12 @@ const Highlight = (props) => {
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 };
-Highlight.displayName = "Highlight";
+Highlight.displayName = COMPONENT_NAME;
 export {
   Highlight
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/highlight/Highlight.tsx"],
-  "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;",
+  "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\nconst COMPONENT_NAME = 'Highlight';\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      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </span>\n  );\n};\n\n(Highlight as typeof Highlight & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAoFI;AApFJ,SAAS,WAAW,SAAS,cAAiC;AAE9D,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAI3C,SAAS,cAAc;AAEvB,MAAM,iBAAiB;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,MAClB,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ;AAEC,UAAyD,cACxD;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Highlight.css";
-var wrapper = "_lajjl30-1-16-1";
+var wrapper = "_lajjl30-1-17-0";
 export {
   wrapper
 };

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 wrapper = '_lajjl30-1-16-1';"],
+  "sourcesContent": ["import './Highlight.css';\nexport var wrapper = '_lajjl30-1-17-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/typography/link/Link.css

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

package/esm/typography/link/Link.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import * as styles from "./Link.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
-import { mergeProps } from "../../core/utils/merge-props.js";
+const COMPONENT_NAME = "Link";
 const Link = /* @__PURE__ */ forwardRef(
   ({
     children,
@@ -15,10 +14,6 @@ const Link = /* @__PURE__ */ forwardRef(
     style: consumerStyle,
     ...remainingProps
   }, ref) => {
-    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({
-      variant: "primary",
-      isMinimal: true
-    });
     const LinkTag = as || "a";
     return /* @__PURE__ */ jsx(
       LinkTag,
@@ -27,24 +22,16 @@ const Link = /* @__PURE__ */ forwardRef(
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
-        className: clsx(focusClassName, styles.link, consumerClassName),
-        style: {
-          ...isFocusVisible && { textDecoration: "none" },
-          ...consumerStyle
-        },
-        ...mergeProps(
-          // Need to cast this one as the inference of mergeProps would generate
-          // a not allowed overlap. The remainingProps type is too complex due to the
-          // polymorphic inheritance.
-          remainingProps,
-          focusProps
-        ),
+        className: clsx(styles.link, consumerClassName),
+        style: consumerStyle,
+        ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children
       }
     );
   }
 );
-Link.displayName = "Link";
+Link.displayName = COMPONENT_NAME;
 export {
   Link
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/link/Link.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, forwardRef, type ReactElement } from 'react';\n\nimport * as styles from './Link.sty.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * Use the `Link` component to link to any internal resources.\n * For external resources (i.e., outside the current environment), use the\n * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n * @public\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      as,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    }: LinkProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      variant: 'primary',\n      isMinimal: true,\n    });\n    const LinkTag = as || 'a';\n\n    return (\n      <LinkTag\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(focusClassName, styles.link, consumerClassName)}\n        style={{\n          ...(isFocusVisible && { textDecoration: 'none' }),\n          ...consumerStyle,\n        }}\n        {...mergeProps(\n          // Need to cast this one as the inference of mergeProps would generate\n          // a not allowed overlap. The remainingProps type is too complex due to the\n          // polymorphic inheritance.\n          remainingProps as Record<string, unknown>,\n          focusProps,\n        )}\n      >\n        {children}\n      </LinkTag>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
-  "mappings": "AAmDM;AAnDN,OAAO,UAAU;AACjB,SAA2B,kBAAqC;AAEhE,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAM7B,SAAS,kBAAkB;AAkBpB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,YAAY,gBAAgB,eAAe,IAAI,aAAa;AAAA,MAClE,SAAS;AAAA,MACT,WAAW;AAAA,IACb,CAAC;AACD,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,OAAO,MAAM,iBAAiB;AAAA,QAC9D,OAAO;AAAA,UACL,GAAI,kBAAkB,EAAE,gBAAgB,OAAO;AAAA,UAC/C,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ElementType, forwardRef, type ReactElement } from 'react';\n\nimport * as styles from './Link.sty.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\n\nconst COMPONENT_NAME = 'Link';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * Use the `Link` component to link to any internal resources.\n * For external resources (i.e., outside the current environment), use the\n * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n * @public\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      as,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    }: LinkProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const LinkTag = as || 'a';\n\n    return (\n      <LinkTag\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(styles.link, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n      </LinkTag>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AA+CM;AA/CN,OAAO,UAAU;AACjB,SAA2B,kBAAqC;AAEhE,YAAY,YAAY;AAOxB,MAAM,iBAAiB;AAkBhB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,OAAO,MAAM,iBAAiB;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
+import "../../core/styles/focusRingStatic.css";
 import "./Link.css";
-var link = "_1iksxp40-1-16-1";
+var link = "_1iksxp40-1-17-0 _z0fq9b4-1-17-0 _z0fq9bc-1-17-0 _z0fq9b5-1-17-0 _z0fq9b8-1-17-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-16-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
+  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Link.css';\nexport var link = '_1iksxp40-1-17-0 _z0fq9b4-1-17-0 _z0fq9bc-1-17-0 _z0fq9b5-1-17-0 _z0fq9b8-1-17-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/typography/list/List.css

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

package/esm/typography/list/List.js

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { listCSS, listItemCSS } from "./List.sty.js";
 import { Text } from "../text/Text.js";
+const COMPONENT_NAME = "List";
 function interleaveListItems(listItems) {
   const items = [];
   Children.forEach(listItems, (listItem) => {
@@ -74,12 +75,13 @@ const List = /* @__PURE__ */ forwardRef(
         className: clsx(listCSS, consumerClassName),
         style: consumerStyle,
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: interleaveListItems(children)
       }
     );
   }
 );
-List.displayName = "List";
+List.displayName = COMPONENT_NAME;
 export {
   List
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/list/List.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.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';\nimport { Text } from '../text/Text.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n   * @defaultValue false\n   */\n  ordered?: TOrdered;\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'base'\n   */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'text'\n   */\n  fontStyle?: 'text' | 'code';\n  /**\n   * Sets the starting number of the first item in an ordered list.\n   * The value is always treated as an integer (floor).\n   * @defaultValue 1\n   */\n  start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: ReactNode) {\n  const items: ReactNode[][] = [];\n\n  Children.forEach(listItems, (listItem) => {\n    if (isValidElement(listItem)) {\n      if (listItem.type === List) {\n        if (items.length === 0) {\n          items.push([listItem]);\n        } else {\n          items[items.length - 1].push(listItem);\n        }\n      } else {\n        items.push([listItem]);\n      }\n    }\n  });\n\n  return items.map((values, index) => {\n    const itemKey = `list-item-${getItemKey(values, index)}`;\n    return (\n      <li key={itemKey} className={listItemCSS}>\n        {values}\n      </li>\n    );\n  });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: ReactNode, index: number): string | number {\n  const isArray = Array.isArray(values);\n  const value = isArray ? values?.[0] : values;\n  if (isValidElement<PropsWithChildren>(value)) {\n    if (value.key) {\n      return value.key;\n    } else if (value.props && value.props.children) {\n      return getItemKey(value.props.children, index);\n    }\n    return value as unknown as string | number;\n  }\n\n  if (value === undefined) {\n    return index;\n  }\n\n  return value as unknown as string | number;\n}\n\n/**\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n * @public\n */\nexport const List = /* @__PURE__ */ forwardRef(\n  <TOrdered extends boolean = false>(\n    props: ListProps<TOrdered>,\n    ref: ForwardedRef<\n      TOrdered extends true ? HTMLOListElement : HTMLUListElement\n    >,\n  ) => {\n    const {\n      children,\n      ordered = undefined,\n      textStyle,\n      fontStyle,\n      start = 1,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    return (\n      <Text\n        ref={ref}\n        as={ordered ? 'ol' : 'ul'}\n        {...(ordered && {\n          start,\n        })}\n        textStyle={textStyle}\n        fontStyle={fontStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(listCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {interleaveListItems(children)}\n      </Text>\n    );\n  },\n);\n\n(List as typeof List & { displayName: string }).displayName = 'List';\n"],
-  "mappings": "AAsEM;AAtEN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,SAAS,mBAAmB;AAKrC,SAAS,YAAY;AAmCrB,SAAS,oBAAoB,WAAsB;AACjD,QAAM,QAAuB,CAAC;AAE9B,WAAS,QAAQ,WAAW,CAAC,aAAa;AACxC,QAAI,eAAe,QAAQ,GAAG;AAC5B,UAAI,SAAS,SAAS,MAAM;AAC1B,YAAI,MAAM,WAAW,GAAG;AACtB,gBAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,QACvB,OAAO;AACL,gBAAM,MAAM,SAAS,CAAC,EAAE,KAAK,QAAQ;AAAA,QACvC;AAAA,MACF,OAAO;AACL,cAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,MAAM,IAAI,CAAC,QAAQ,UAAU;AAClC,UAAM,UAAU,aAAa,WAAW,QAAQ,KAAK,CAAC;AACtD,WACE,oBAAC,QAAiB,WAAW,aAC1B,oBADM,OAET;AAAA,EAEJ,CAAC;AACH;AAaA,SAAS,WAAW,QAAmB,OAAgC;AACrE,QAAM,UAAU,MAAM,QAAQ,MAAM;AACpC,QAAM,QAAQ,UAAU,SAAS,CAAC,IAAI;AACtC,MAAI,eAAkC,KAAK,GAAG;AAC5C,QAAI,MAAM,KAAK;AACb,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,SAAS,MAAM,MAAM,UAAU;AAC9C,aAAO,WAAW,MAAM,MAAM,UAAU,KAAK;AAAA,IAC/C;AACA,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQO,MAAM,OAAuB;AAAA,EAClC,CACE,OACA,QAGG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,OAAO;AAAA,QACpB,GAAI,WAAW;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,8BAAoB,QAAQ;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.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';\nimport { Text } from '../text/Text.js';\n\nconst COMPONENT_NAME = 'List';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n   * @defaultValue false\n   */\n  ordered?: TOrdered;\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'base'\n   */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /**\n   * Sets the text style for the List.\n   * @defaultValue 'text'\n   */\n  fontStyle?: 'text' | 'code';\n  /**\n   * Sets the starting number of the first item in an ordered list.\n   * The value is always treated as an integer (floor).\n   * @defaultValue 1\n   */\n  start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: ReactNode) {\n  const items: ReactNode[][] = [];\n\n  Children.forEach(listItems, (listItem) => {\n    if (isValidElement(listItem)) {\n      if (listItem.type === List) {\n        if (items.length === 0) {\n          items.push([listItem]);\n        } else {\n          items[items.length - 1].push(listItem);\n        }\n      } else {\n        items.push([listItem]);\n      }\n    }\n  });\n\n  return items.map((values, index) => {\n    const itemKey = `list-item-${getItemKey(values, index)}`;\n    return (\n      <li key={itemKey} className={listItemCSS}>\n        {values}\n      </li>\n    );\n  });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: ReactNode, index: number): string | number {\n  const isArray = Array.isArray(values);\n  const value = isArray ? values?.[0] : values;\n  if (isValidElement<PropsWithChildren>(value)) {\n    if (value.key) {\n      return value.key;\n    } else if (value.props && value.props.children) {\n      return getItemKey(value.props.children, index);\n    }\n    return value as unknown as string | number;\n  }\n\n  if (value === undefined) {\n    return index;\n  }\n\n  return value as unknown as string | number;\n}\n\n/**\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n * @public\n */\nexport const List = /* @__PURE__ */ forwardRef(\n  <TOrdered extends boolean = false>(\n    props: ListProps<TOrdered>,\n    ref: ForwardedRef<\n      TOrdered extends true ? HTMLOListElement : HTMLUListElement\n    >,\n  ) => {\n    const {\n      children,\n      ordered = undefined,\n      textStyle,\n      fontStyle,\n      start = 1,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    return (\n      <Text\n        ref={ref}\n        as={ordered ? 'ol' : 'ul'}\n        {...(ordered && {\n          start,\n        })}\n        textStyle={textStyle}\n        fontStyle={fontStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(listCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {interleaveListItems(children)}\n      </Text>\n    );\n  },\n);\n\n(List as typeof List & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAwEM;AAxEN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,SAAS,mBAAmB;AAKrC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAmCvB,SAAS,oBAAoB,WAAsB;AACjD,QAAM,QAAuB,CAAC;AAE9B,WAAS,QAAQ,WAAW,CAAC,aAAa;AACxC,QAAI,eAAe,QAAQ,GAAG;AAC5B,UAAI,SAAS,SAAS,MAAM;AAC1B,YAAI,MAAM,WAAW,GAAG;AACtB,gBAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,QACvB,OAAO;AACL,gBAAM,MAAM,SAAS,CAAC,EAAE,KAAK,QAAQ;AAAA,QACvC;AAAA,MACF,OAAO;AACL,cAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,MAAM,IAAI,CAAC,QAAQ,UAAU;AAClC,UAAM,UAAU,aAAa,WAAW,QAAQ,KAAK,CAAC;AACtD,WACE,oBAAC,QAAiB,WAAW,aAC1B,oBADM,OAET;AAAA,EAEJ,CAAC;AACH;AAaA,SAAS,WAAW,QAAmB,OAAgC;AACrE,QAAM,UAAU,MAAM,QAAQ,MAAM;AACpC,QAAM,QAAQ,UAAU,SAAS,CAAC,IAAI;AACtC,MAAI,eAAkC,KAAK,GAAG;AAC5C,QAAI,MAAM,KAAK;AACb,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,SAAS,MAAM,MAAM,UAAU;AAC9C,aAAO,WAAW,MAAM,MAAM,UAAU,KAAK;AAAA,IAC/C;AACA,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQO,MAAM,OAAuB;AAAA,EAClC,CACE,OACA,QAGG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,OAAO;AAAA,QACpB,GAAI,WAAW;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB,8BAAoB,QAAQ;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./List.css";
-var listCSS = "_16276mt0-1-16-1";
-var listItemCSS = "_16276mt1-1-16-1";
+var listCSS = "_16276mt0-1-17-0";
+var listItemCSS = "_16276mt1-1-17-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-16-1';\nexport var listItemCSS = '_16276mt1-1-16-1';"],
+  "sourcesContent": ["import './List.css';\nexport var listCSS = '_16276mt0-1-17-0';\nexport var listItemCSS = '_16276mt1-1-17-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,cAAc;",
   "names": []
 }

package/esm/typography/paragraph/Paragraph.css

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

package/esm/typography/paragraph/Paragraph.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { paragraph } from "./Paragraph.sty.js";
 import { textStyle } from "../../styles/textStyle.sty.js";
+const COMPONENT_NAME = "Paragraph";
 const Paragraph = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
     children,
@@ -35,11 +36,12 @@ const Paragraph = /* @__PURE__ */ forwardRef((props, ref) => {
         "--strato-ellipsis-line-clamp": maxLines
       },
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 });
-Paragraph.displayName = "Paragraph";
+Paragraph.displayName = COMPONENT_NAME;
 export {
   Paragraph
 };

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 { 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;",
+  "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\nconst COMPONENT_NAME = 'Paragraph';\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      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </p>\n  );\n});\n(Paragraph as typeof Paragraph & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA0DI;AA1DJ,OAAO,UAAU;AACjB,SAA6B,kBAAkB;AAE/C,SAAS,iBAAiB;AAM1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAsBhB,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,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,UAAyD,cACxD;",
   "names": []
 }

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

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

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 paragraph = _7a468({defaultClassName:'_487p2n0-1-16-1',variantClassNames:{ellipsis:{singleLine:'_487p2n1-1-16-1',multiLine:'_487p2n2-1-16-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Paragraph.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var paragraph = _7a468({defaultClassName:'_487p2n0-1-17-0',variantClassNames:{ellipsis:{singleLine:'_487p2n1-1-17-0',multiLine:'_487p2n2-1-17-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-16-1 {
+._4oao6y0-1-17-0 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/esm/typography/strikethrough/Strikethrough.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { strikethroughCSS } from "./Strikethrough.sty.js";
+const COMPONENT_NAME = "Strikethrough";
 const Strikethrough = /* @__PURE__ */ forwardRef((props, ref) => {
   const {
     children,
@@ -22,11 +23,12 @@ const Strikethrough = /* @__PURE__ */ forwardRef((props, ref) => {
       className: clsx(strikethroughCSS, consumerClassName),
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 });
-Strikethrough.displayName = "Strikethrough";
+Strikethrough.displayName = COMPONENT_NAME;
 export {
   Strikethrough
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/strikethrough/Strikethrough.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.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\n/**\n * The props for the Strikethrough component.\n * @public\n */\nexport interface StrikethroughProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * The `Strikethrough` component renders text with a line through it. Use it to\n * represent things that are no longer relevant or accurate.\n * @public\n */\nexport const Strikethrough = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  StrikethroughProps\n>((props, ref) => {\n  const {\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <s\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(strikethroughCSS, consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      {children}\n    </s>\n  );\n});\n(Strikethrough as typeof Strikethrough & { displayName: string }).displayName =\n  'Strikethrough';\n"],
-  "mappings": "AAuCI;AAvCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AAqB1B,MAAM,gBAAgC,2BAG3C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.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 = 'Strikethrough';\n\n/**\n * The props for the Strikethrough component.\n * @public\n */\nexport interface StrikethroughProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * The `Strikethrough` component renders text with a line through it. Use it to\n * represent things that are no longer relevant or accurate.\n * @public\n */\nexport const Strikethrough = /* @__PURE__ */ forwardRef<\n  HTMLElement,\n  StrikethroughProps\n>((props, ref) => {\n  const {\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <s\n      ref={ref}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(strikethroughCSS, consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </s>\n  );\n});\n(Strikethrough as typeof Strikethrough & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAyCI;AAzCJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AAMjC,MAAM,iBAAiB;AAiBhB,MAAM,gBAAgC,2BAG3C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,kBAAkB,iBAAiB;AAAA,MACnD,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./Strikethrough.css";
-var strikethroughCSS = "_4oao6y0-1-16-1";
+var strikethroughCSS = "_4oao6y0-1-17-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-16-1';"],
+  "sourcesContent": ["import './Strikethrough.css';\nexport var strikethroughCSS = '_4oao6y0-1-17-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/typography/strong/Strong.css

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