@dynatrace/strato-components 0.85.0 → 0.85.21

package/typography/{Heading → heading}/Heading.css

@@ -1,10 +1,10 @@
-.Heading_headingCSS__u4t9450 {
+.Heading_headingCSS__5ei34w0 {
   margin: 0;
   overflow-wrap: break-word;
   font-style: normal;
   color: var(--dt-colors-text-neutral-default, #2b2a58);
 }
-.Heading_headingCSS_visualLevel_1__u4t9451 {
+.Heading_headingCSS_visualLevel_1__5ei34w1 {
   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);
 }
-.Heading_headingCSS_visualLevel_2__u4t9452 {
+.Heading_headingCSS_visualLevel_2__5ei34w2 {
   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);
 }
-.Heading_headingCSS_visualLevel_3__u4t9453 {
+.Heading_headingCSS_visualLevel_3__5ei34w3 {
   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);
 }
-.Heading_headingCSS_visualLevel_4__u4t9454 {
+.Heading_headingCSS_visualLevel_4__5ei34w4 {
   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);
 }
-.Heading_headingCSS_visualLevel_5__u4t9455 {
+.Heading_headingCSS_visualLevel_5__5ei34w5 {
   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);
 }
-.Heading_headingCSS_visualLevel_6__u4t9456 {
+.Heading_headingCSS_visualLevel_6__5ei34w6 {
   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/typography/{Heading → heading}/Heading.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import { type DataTestId, type StylingProps, type WithChildren, type MaskingProps } from '../../core/index.js';
 import type { DOMProps } from '../../core/types/dom.js';
 /**
+ * Props used for the Heading component
  * @public
- *  Props used for the Heading component */
+ */
 export interface HeadingProps extends DOMProps, WithChildren, StylingProps, DataTestId, MaskingProps {
     /**
      * The visual level of the heading.
@@ -17,8 +18,8 @@ export interface HeadingProps extends DOMProps, WithChildren, StylingProps, Data
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 /**
- * @public
  * Use the `Heading` to render semantic HTML heading elements (`h1`, `h2`, etc.).
  * The component allows you to independently define both the visual and the semantic level of the heading.
+ * @public
  */
 export declare const Heading: (props: HeadingProps & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/typography/{Heading → heading}/Heading.sty.js

@@ -22,4 +22,4 @@ __export(Heading_css_exports, {
 module.exports = __toCommonJS(Heading_css_exports);
 var import_Heading_css_ts_vanilla = require("./Heading.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading_headingCSS__u4t9450", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__u4t9451", "2": "Heading_headingCSS_visualLevel_2__u4t9452", "3": "Heading_headingCSS_visualLevel_3__u4t9453", "4": "Heading_headingCSS_visualLevel_4__u4t9454", "5": "Heading_headingCSS_visualLevel_5__u4t9455", "6": "Heading_headingCSS_visualLevel_6__u4t9456" } }, defaultVariants: {}, compoundVariants: [] });
+var headingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Heading_headingCSS__5ei34w0", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__5ei34w1", "2": "Heading_headingCSS_visualLevel_2__5ei34w2", "3": "Heading_headingCSS_visualLevel_3__5ei34w3", "4": "Heading_headingCSS_visualLevel_4__5ei34w4", "5": "Heading_headingCSS_visualLevel_5__5ei34w5", "6": "Heading_headingCSS_visualLevel_6__5ei34w6" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/{Highlight → highlight}/Highlight.css

@@ -1,4 +1,4 @@
-.Highlight_highlightCSS__1u4tng00 {
+.Highlight_highlightCSS__lajjl30 {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background: var(--dt-colors-background-container-neutral-accent, #5a5b8c);
 }

package/typography/{Highlight → highlight}/Highlight.sty.js

@@ -21,4 +21,4 @@ __export(Highlight_css_exports, {
 });
 module.exports = __toCommonJS(Highlight_css_exports);
 var import_Highlight_css_ts_vanilla = require("./Highlight.css");
-var highlightCSS = "Highlight_highlightCSS__1u4tng00";
+var highlightCSS = "Highlight_highlightCSS__lajjl30";

package/typography/index.d.ts

@@ -1,28 +1,28 @@
-export { Blockquote } from './BlockQuote/Blockquote.js';
-export type { BlockquoteProps } from './BlockQuote/Blockquote.js';
-export { Code } from './Code/Code.js';
-export type { CodeProps } from './Code/Code.js';
-export { Emphasis } from './Emphasis/Emphasis.js';
-export type { EmphasisProps } from './Emphasis/Emphasis.js';
-export { ExternalLink } from './ExternalLink/ExternalLink.js';
-export type { ExternalLinkProps } from './ExternalLink/ExternalLink.js';
-export { Heading } from './Heading/Heading.js';
-export type { HeadingProps } from './Heading/Heading.js';
-export { Highlight } from './Highlight/Highlight.js';
-export type { HighlightProps } from './Highlight/Highlight.js';
-export { Link } from './Link/Link.js';
-export type { LinkProps } from './Link/Link.js';
-export { List } from './List/List.js';
-export type { ListProps } from './List/List.js';
-export { Paragraph } from './Paragraph/Paragraph.js';
-export type { ParagraphProps } from './Paragraph/Paragraph.js';
-export { Strikethrough } from './Strikethrough/Strikethrough.js';
-export type { StrikethroughProps } from './Strikethrough/Strikethrough.js';
-export { Strong } from './Strong/Strong.js';
-export type { StrongProps } from './Strong/Strong.js';
-export { Text } from './Text/Text.js';
-export type { TextOwnProps, TextProps } from './Text/Text.js';
-export { TextEllipsis } from './TextEllipsis/TextEllipsis.js';
-export type { TextEllipsisProps, _TruncationMode, } from './TextEllipsis/TextEllipsis.js';
+export { Blockquote } from './block-quote/Blockquote.js';
+export type { BlockquoteProps } from './block-quote/Blockquote.js';
+export { Code } from './code/Code.js';
+export type { CodeProps } from './code/Code.js';
+export { Emphasis } from './emphasis/Emphasis.js';
+export type { EmphasisProps } from './emphasis/Emphasis.js';
+export { ExternalLink } from './external-link/ExternalLink.js';
+export type { ExternalLinkProps } from './external-link/ExternalLink.js';
+export { Heading } from './heading/Heading.js';
+export type { HeadingProps } from './heading/Heading.js';
+export { Highlight } from './highlight/Highlight.js';
+export type { HighlightProps } from './highlight/Highlight.js';
+export { Link } from './link/Link.js';
+export type { LinkProps } from './link/Link.js';
+export { List } from './list/List.js';
+export type { ListProps } from './list/List.js';
+export { Paragraph } from './paragraph/Paragraph.js';
+export type { ParagraphProps } from './paragraph/Paragraph.js';
+export { Strikethrough } from './strikethrough/Strikethrough.js';
+export type { StrikethroughProps } from './strikethrough/Strikethrough.js';
+export { Strong } from './strong/Strong.js';
+export type { StrongProps } from './strong/Strong.js';
+export { Text } from './text/Text.js';
+export type { TextOwnProps, TextProps } from './text/Text.js';
+export { TextEllipsis } from './text-ellipsis/TextEllipsis.js';
+export type { TextEllipsisProps, _TruncationMode, } from './text-ellipsis/TextEllipsis.js';
 export { _calculateEllipsisInfo, _getTextHeight, _centerEllipsizeText, _getTextWidth, _ELLIPSIS_APPROXIMATION_THRESHOLD, _ELLIPSIS_CHARACTER, } from './utils.js';
 export type { _Font } from './utils.js';

package/typography/index.js

@@ -38,17 +38,17 @@ __export(typography_exports, {
   _getTextWidth: () => import_utils._getTextWidth
 });
 module.exports = __toCommonJS(typography_exports);
-var import_Blockquote = require("./BlockQuote/Blockquote.js");
-var import_Code = require("./Code/Code.js");
-var import_Emphasis = require("./Emphasis/Emphasis.js");
-var import_ExternalLink = require("./ExternalLink/ExternalLink.js");
-var import_Heading = require("./Heading/Heading.js");
-var import_Highlight = require("./Highlight/Highlight.js");
-var import_Link = require("./Link/Link.js");
-var import_List = require("./List/List.js");
-var import_Paragraph = require("./Paragraph/Paragraph.js");
-var import_Strikethrough = require("./Strikethrough/Strikethrough.js");
-var import_Strong = require("./Strong/Strong.js");
-var import_Text = require("./Text/Text.js");
-var import_TextEllipsis = require("./TextEllipsis/TextEllipsis.js");
+var import_Blockquote = require("./block-quote/Blockquote.js");
+var import_Code = require("./code/Code.js");
+var import_Emphasis = require("./emphasis/Emphasis.js");
+var import_ExternalLink = require("./external-link/ExternalLink.js");
+var import_Heading = require("./heading/Heading.js");
+var import_Highlight = require("./highlight/Highlight.js");
+var import_Link = require("./link/Link.js");
+var import_List = require("./list/List.js");
+var import_Paragraph = require("./paragraph/Paragraph.js");
+var import_Strikethrough = require("./strikethrough/Strikethrough.js");
+var import_Strong = require("./strong/Strong.js");
+var import_Text = require("./text/Text.js");
+var import_TextEllipsis = require("./text-ellipsis/TextEllipsis.js");
 var import_utils = require("./utils.js");

package/{esm/typography/Link → typography/link}/Link.css

@@ -1,15 +1,15 @@
-.Link_linkCSS__1ck42do0 {
+.Link_linkCSS__1iksxp40 {
   display: inline-block;
   color: var(--dt-colors-text-primary-default, #454cc9);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-.Link_linkCSS__1ck42do0:hover {
+.Link_linkCSS__1iksxp40:hover {
   color: var(--dt-colors-text-primary-default-hover, #3332ae);
 }
-.Link_linkCSS__1ck42do0:active {
+.Link_linkCSS__1iksxp40:active {
   color: var(--dt-colors-text-primary-default-active, #241193);
 }
-.Link_linkCSS__1ck42do0:focus-visible {
+.Link_linkCSS__1iksxp40:focus-visible {
   text-decoration: none;
 }

package/typography/{Link → link}/Link.d.ts

@@ -7,10 +7,10 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
  */
 export type LinkProps<E extends ElementType> = PolymorphicComponentProps<E, WithChildren & StylingProps & DataTestId & MaskingProps>;
 /**
- * @public
  * Use the `Link` component to navigate to a different page within the application.
  * For external resources in a different domain, use the
- * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/ExternalLink/ | `ExternalLink`}
+ * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}
  * component instead.
+ * @public
  */
 export declare const Link: <E extends ElementType = 'a'>(props: LinkProps<E>) => ReactElement | null;

package/typography/{Link → link}/Link.js

@@ -32,9 +32,9 @@ __export(Link_exports, {
 module.exports = __toCommonJS(Link_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_Link_css = require("./Link.sty.js");
 var import_core = require("../../core/index.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
-var import_Link_css = require("../Link/Link.sty.js");
 const Link = /* @__PURE__ */ (0, import_react.forwardRef)(
   ({
     children,

package/typography/{Link → link}/Link.sty.js

@@ -21,4 +21,4 @@ __export(Link_css_exports, {
 });
 module.exports = __toCommonJS(Link_css_exports);
 var import_Link_css_ts_vanilla = require("./Link.css");
-var linkCSS = "Link_linkCSS__1ck42do0";
+var linkCSS = "Link_linkCSS__1iksxp40";

package/typography/{List → list}/List.css

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

package/typography/{List → list}/List.js

@@ -33,7 +33,7 @@ module.exports = __toCommonJS(List_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_List_css = require("./List.sty.js");
-var import_Text = require("../Text/Text.js");
+var import_Text = require("../text/Text.js");
 function interleaveListItems(listItems) {
   const items = [];
   import_react.default.Children.forEach(listItems, (listItem) => {

package/typography/{List → list}/List.sty.js

@@ -22,5 +22,5 @@ __export(List_css_exports, {
 });
 module.exports = __toCommonJS(List_css_exports);
 var import_List_css_ts_vanilla = require("./List.css");
-var listCSS = "List_listCSS__13d6w3n0";
-var listItemCSS = "List_listItemCSS__13d6w3n1";
+var listCSS = "List_listCSS__16276mt0";
+var listItemCSS = "List_listItemCSS__16276mt1";

package/typography/{Paragraph → paragraph}/Paragraph.css

@@ -1,17 +1,17 @@
-.Paragraph_paragraphCSS__42lz6l0 {
+.Paragraph_paragraphCSS__487p2n0 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: var(--dt-colors-text-neutral-default, #2b2a58);
   font-style: normal;
 }
-.Paragraph_paragraphCSS_ellipsis_singleLine__42lz6l1 {
+.Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.Paragraph_paragraphCSS_ellipsis_multiLine__42lz6l2 {
+.Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/typography/{Paragraph → paragraph}/Paragraph.sty.js

@@ -22,4 +22,4 @@ __export(Paragraph_css_exports, {
 module.exports = __toCommonJS(Paragraph_css_exports);
 var import_Paragraph_css_ts_vanilla = require("./Paragraph.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Paragraph_paragraphCSS__42lz6l0", variantClassNames: { ellipsis: { singleLine: "Paragraph_paragraphCSS_ellipsis_singleLine__42lz6l1", multiLine: "Paragraph_paragraphCSS_ellipsis_multiLine__42lz6l2" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Paragraph_paragraphCSS__487p2n0", variantClassNames: { ellipsis: { singleLine: "Paragraph_paragraphCSS_ellipsis_singleLine__487p2n1", multiLine: "Paragraph_paragraphCSS_ellipsis_multiLine__487p2n2" } }, defaultVariants: {}, compoundVariants: [] });

package/{esm/typography/Strikethrough → typography/strikethrough}/Strikethrough.css

@@ -1,4 +1,4 @@
-.Strikethrough_strikethroughCSS__1178y080 {
+.Strikethrough_strikethroughCSS__4oao6y0 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/typography/{Strikethrough → strikethrough}/Strikethrough.d.ts

@@ -4,12 +4,12 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
 /**
  * The props for the Strikethrough component.
  * @public
- *  */
+ */
 export interface StrikethroughProps extends WithChildren, StylingProps, DataTestId, MaskingProps {
 }
 /**
- * @public
  * The `Strikethrough` component renders text with a line through it. Use it to
  * represent things that are no longer relevant or accurate.
+ * @public
  */
 export declare const Strikethrough: (props: StrikethroughProps & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/typography/{Strikethrough → strikethrough}/Strikethrough.sty.js

@@ -21,4 +21,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "Strikethrough_strikethroughCSS__1178y080";
+var strikethroughCSS = "Strikethrough_strikethroughCSS__4oao6y0";

package/{esm/typography/Strong → typography/strong}/Strong.css

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

package/typography/{Strong → strong}/Strong.sty.js

@@ -21,4 +21,4 @@ __export(Strong_css_exports, {
 });
 module.exports = __toCommonJS(Strong_css_exports);
 var import_Strong_css_ts_vanilla = require("./Strong.css");
-var strongCSS = "Strong_strongCSS__1sqovlt0";
+var strongCSS = "Strong_strongCSS__wxp4dd0";

package/{esm/typography/Text → typography/text}/Text.css

@@ -1,16 +1,16 @@
-.Text_textCSS__ty6wu50 {
+.Text_textCSS__rup8ap0 {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   overflow-wrap: break-word;
 }
-.Text_textCSS_ellipsis_singleLine__ty6wu51 {
+.Text_textCSS_ellipsis_singleLine__rup8ap1 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.Text_textCSS_ellipsis_multiLine__ty6wu52 {
+.Text_textCSS_ellipsis_multiLine__rup8ap2 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/typography/{Text → text}/Text.d.ts

@@ -7,8 +7,9 @@ import type { PolymorphicComponentProps } from '../../core/types/polymorph.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
 /**
+ * The props for the text component without any props coming from polymorphing.
  * @public
- * The props for the text component without any props coming from polymorphing. */
+ */
 export interface TextOwnProps extends WithChildren, DOMProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps {
     /** Sets the text style. Variants include "base", "base-emphasized", etc. */
     textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';
@@ -20,7 +21,7 @@ export interface TextOwnProps extends WithChildren, DOMProps, AriaLabelingProps,
  * Combined props for the text component - polymorphing and own props. */
 export type TextProps<E extends ElementType> = PolymorphicComponentProps<E, TextOwnProps>;
 /**
- * @public
  * Use the `Text` component for text that is rendered without any semantic markup.
+ * @public
  */
 export declare const Text: <E extends ElementType = 'span'>(props: TextProps<E>) => ReactElement | null;

package/typography/{Text → text}/Text.sty.js

@@ -22,4 +22,4 @@ __export(Text_css_exports, {
 module.exports = __toCommonJS(Text_css_exports);
 var import_Text_css_ts_vanilla = require("./Text.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Text_textCSS__ty6wu50", variantClassNames: { ellipsis: { singleLine: "Text_textCSS_ellipsis_singleLine__ty6wu51", multiLine: "Text_textCSS_ellipsis_multiLine__ty6wu52" } }, defaultVariants: {}, compoundVariants: [] });
+var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Text_textCSS__rup8ap0", variantClassNames: { ellipsis: { singleLine: "Text_textCSS_ellipsis_singleLine__rup8ap1", multiLine: "Text_textCSS_ellipsis_multiLine__rup8ap2" } }, defaultVariants: {}, compoundVariants: [] });

package/{esm/typography/TextEllipsis → typography/text-ellipsis}/TextEllipsis.css

@@ -1,4 +1,4 @@
-.TextEllipsis_textEllipsisCSS__1n6xzhd0 {
+.TextEllipsis_textEllipsisCSS__1mnpbqs0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,14 +9,14 @@
   text-decoration: inherit;
   width: 100%;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_start__1n6xzhd1 {
+.TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_middle__1n6xzhd2 {
+.TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2 {
   text-overflow: clip;
 }
-.TextEllipsis_textEllipsisCSS_truncationMode_end__1n6xzhd3 {
+.TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3 {
   text-overflow: ellipsis;
 }

package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.d.ts

@@ -5,12 +5,12 @@ import { type StylingProps } from '../../core/types/styling-props.js';
 /**
  * Available modes for how overly long text is truncated and where the ellipsis is placed.
  * @internal
- *  */
+ */
 export type _TruncationMode = 'start' | 'middle' | 'end';
 /**
  * The props for the TextEllipsis component.
  * @public
- *  */
+ */
 export interface TextEllipsisProps extends HTMLAttributes<HTMLSpanElement>, StylingProps, DataTestId, MaskingProps {
     /** The children (as text) passed to the component. */
     children: string;
@@ -23,10 +23,10 @@ export interface TextEllipsisProps extends HTMLAttributes<HTMLSpanElement>, Styl
     onTextOverflow?: (ellipsized: boolean) => void;
 }
 /**
- * @public
  * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever
  * there is insufficient space to render the entire text. While some of our Strato
  * components provide ellipsis out of the box, you need to take care of this yourself
  * when writing your own components.
+ * @public
  */
 export declare const TextEllipsis: (props: TextEllipsisProps & React.RefAttributes<HTMLSpanElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/typography/{TextEllipsis → text-ellipsis}/TextEllipsis.sty.js

@@ -22,4 +22,4 @@ __export(TextEllipsis_css_exports, {
 module.exports = __toCommonJS(TextEllipsis_css_exports);
 var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "TextEllipsis_textEllipsisCSS__1n6xzhd0", variantClassNames: { truncationMode: { start: "TextEllipsis_textEllipsisCSS_truncationMode_start__1n6xzhd1", middle: "TextEllipsis_textEllipsisCSS_truncationMode_middle__1n6xzhd2", end: "TextEllipsis_textEllipsisCSS_truncationMode_end__1n6xzhd3" } }, defaultVariants: {}, compoundVariants: [] });
+var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "TextEllipsis_textEllipsisCSS__1mnpbqs0", variantClassNames: { truncationMode: { start: "TextEllipsis_textEllipsisCSS_truncationMode_start__1mnpbqs1", middle: "TextEllipsis_textEllipsisCSS_truncationMode_middle__1mnpbqs2", end: "TextEllipsis_textEllipsisCSS_truncationMode_end__1mnpbqs3" } }, defaultVariants: {}, compoundVariants: [] });

package/esm/typography/Code/Code.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/Code/Code.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { codeCSS } from './Code.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Code component.\n * @public\n */\nexport interface CodeProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * @public\n * Use the `Code` component to display snippets of code inline. If you want to\n * display a block of code, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/content/CodeSnippet/ | `CodeSnippet`}\n * component instead.\n */\nexport const Code = /* @__PURE__ */ forwardRef<HTMLElement, CodeProps>(\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    return (\n      <code\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(codeCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </code>\n    );\n  },\n);\n\n(Code as typeof Code & { displayName: string }).displayName = 'Code';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,eAAe;AAyBjB,MAAM,OAAuB;AAAA,EAClC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
-  "names": []
-}

package/esm/typography/ExternalLink/ExternalLink.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/ExternalLink/ExternalLink.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef, MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ExternalLinkIcon } from '@dynatrace/strato-icons';\n\nimport { externalLinkCSS } from './ExternalLink.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the ExternalLink component.\n * @public\n */\nexport interface ExternalLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The href used for the link. */\n  href: string;\n  /** Callback handler called on click. */\n  onClick?: MouseEventHandler;\n}\n\n/**\n * @public\n * Use the `ExternalLink` component to link outside of the\n * Dynatrace platform. For resources within the Dynatrace platform, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/Link/ | `Link`}\n * component instead.\n */\nexport const ExternalLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  ExternalLinkProps\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  const { focusProps, focusClassName } = useFocusRing({\n    variant: 'primary',\n    isMinimal: true,\n  });\n\n  const intl = useIntl();\n\n  return (\n    <a\n      ref={ref}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(focusClassName, externalLinkCSS, consumerClassName)}\n      style={consumerStyle}\n      {..._mergeProps(remainingProps, focusProps)}\n    >\n      {children}\n      <span>\n        &#65279;\n        <ExternalLinkIcon\n          aria-hidden=\"false\"\n          // https://www.w3.org/WAI/tutorials/images/functional/#example-3-icon-image-conveying-information-within-link-text\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Opening the link in a new window',\n            id: 'JzYy8MUVfPcyf4l5',\n            description:\n              'External link icon that describes the external link icon',\n          })}\n        />\n      </span>\n    </a>\n  );\n});\n\n(ExternalLink as typeof ExternalLink & { displayName: string }).displayName =\n  'ExternalLink';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAqC;AACrD,SAAS,eAAe;AAExB,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAChC;AAAA,EAIE;AAAA,OACK;AACP,SAAS,oBAAoB;AAyBtB,MAAM,eAA+B,2BAG1C,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,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,gBAAgB,iBAAiB,iBAAiB;AAAA,MAClE,OAAO;AAAA,MACN,GAAG,YAAY,gBAAgB,UAAU;AAAA;AAAA,IAEzC;AAAA,IACD,oCAAC,cAAK,UAEJ;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QAEZ,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ,CAAC;AAAA;AAAA,IACH,CACF;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/Heading/Heading.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { headingCSS } from './Heading.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  type MaskingProps,\n} from '../../core/index.js';\nimport type { DOMProps } from '../../core/types/dom.js';\nimport type { _HeadingTag } from '../../core/types/heading.js';\n\n/**\n * @public\n *  Props used for the Heading component */\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 * @public\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 */\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(Heading as typeof Heading & { displayName: string }).displayName = 'Heading';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,kBAAkB;AAoCpB,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;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACA,QAAqD,cAAc;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-import "./Heading.css";
-import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var headingCSS = _7a468({ defaultClassName: "Heading_headingCSS__u4t9450", variantClassNames: { visualLevel: { "1": "Heading_headingCSS_visualLevel_1__u4t9451", "2": "Heading_headingCSS_visualLevel_2__u4t9452", "3": "Heading_headingCSS_visualLevel_3__u4t9453", "4": "Heading_headingCSS_visualLevel_4__u4t9454", "5": "Heading_headingCSS_visualLevel_5__u4t9455", "6": "Heading_headingCSS_visualLevel_6__u4t9456" } }, defaultVariants: {}, compoundVariants: [] });
-export {
-  headingCSS
-};
-//# sourceMappingURL=Heading.sty.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/Link/Link.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n  type PolymorphicComponentProps,\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { linkCSS } from '../Link/Link.sty.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 * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\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 } = 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, linkCSS, consumerClassName)}\n        style={consumerStyle}\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": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAsB,kBAAgC;AAE7D;AAAA,EAKE;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,eAAe;AAkBjB,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,eAAe,IAAI,aAAa;AAAA,MAClD,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,SAAS,iBAAiB;AAAA,QAC1D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
-  "names": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/Strikethrough/Strikethrough.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { strikethroughCSS } from './Strikethrough.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.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 * @public\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 */\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": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,wBAAwB;AAuB1B,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;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACA,cAAiE,cAChE;",
-  "names": []
-}

package/esm/typography/Text/Text.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/Text/Text.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { textCSS } from './Text.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.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 { 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 { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n * The props for the text component without any props coming from polymorphing. */\nexport interface TextOwnProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** Sets the text style. Variants include \"base\", \"base-emphasized\", etc. */\n  textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n  /** Sets the font style. Can either be \"text\" or \"code\" */\n  fontStyle?: 'text' | 'code';\n}\n\n/**\n * @public\n * Combined props for the text component - polymorphing and own props. */\nexport type TextProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  TextOwnProps\n>;\n\n/**\n * @public\n * Use the `Text` component for text that is rendered without any semantic markup.\n */\nexport const Text: <E extends ElementType = 'span'>(\n  props: TextProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      textStyle,\n      fontStyle,\n      as,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: TextProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const TextTag = as || 'span';\n\n    let ellipsis: undefined | 'singleLine' | 'multiLine';\n\n    return (\n      <TextTag\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={ref}\n        className={clsx([\n          textCSS({ ellipsis }),\n          (fontStyle || textStyle) && textStyleCSS({ fontStyle, textStyle }),\n          consumerClassName,\n        ])}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </TextTag>\n    );\n  },\n);\n\n(Text as typeof Text & { displayName: string }).displayName = 'Text';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAA8C,kBAAkB;AAEvE,SAAS,eAAe;AAQxB,SAAS,oBAAoB;AA8BtB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM;AAEtB,QAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK;AAAA,UACd,QAAQ,EAAE,SAAS,CAAC;AAAA,WACnB,aAAa,cAAc,aAAa,EAAE,WAAW,UAAU,CAAC;AAAA,UACjE;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
-  "names": []
-}

package/esm/typography/TextEllipsis/TextEllipsis.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/typography/TextEllipsis/TextEllipsis.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.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 _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\n *  */\nexport type _TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n *  */\nexport interface TextEllipsisProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The children (as text) passed to the component. */\n  children: string;\n  /**\n   * The mode used for for truncating the text, either at the start, in the middle or at the end.\n   * @defaultValue 'end'\n   */\n  truncationMode?: 'start' | 'middle' | 'end';\n  /** Gets called when text needs to get truncated due to lack of horizontal space. */\n  onTextOverflow?: (ellipsized: boolean) => void;\n}\n\n/**\n * Returns an object containing all font-related CSS properties from\n * a given DOM element that are relevant for rendering formatted text\n * in a 2D canvas context.\n *\n * @param textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n  const computedStyle = window.getComputedStyle(textWrapper, null);\n\n  return {\n    fontStyle: computedStyle.getPropertyValue('font-style'),\n    fontWeight: computedStyle.getPropertyValue('font-weight'),\n    fontSize: computedStyle.getPropertyValue('font-size'),\n    fontFamily: computedStyle.getPropertyValue('font-family'),\n  };\n}\n\n/**\n * Determines whether a CSS text-ellipsis is currently rendered in a container.\n * Note: `containerWidth` is only passed to avoid unnecessary reflows by calling `getBoundingClientRect()`\n */\nfunction isNativeEllipsisActive(\n  textWrapper: HTMLSpanElement,\n  containerWidth: number,\n): boolean {\n  const textWidth =\n    Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n  return textWidth > containerWidth;\n}\n\n/**\n * Detects whether a given formatted text has enough space within its\n * parent container and applies or removes an ellipsis accordingly.\n *\n * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for for truncating the text, either at the start, in the middle or at the end\n * @param containerRef - Object ref pointing towards the root element of the TextEllipsis component\n * @param wasEllipsized - Whether an ellipsis was applied during the last render cycle\n * @param onTextOverflow - Callback that gets called whenever the state of the ellipsis changes since the last render cycle\n */\nfunction renderEllipsizedText(\n  originalText: string,\n  truncationMode: TextEllipsisProps['truncationMode'],\n  containerRef: RefObject<HTMLSpanElement>,\n  wasEllipsized: boolean,\n  onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n  const containerElement = containerRef.current;\n  const textWrapper: HTMLSpanElement | null =\n    (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n  if (containerElement !== null && textWrapper !== null) {\n    if (textWrapper.textContent !== originalText) {\n      textWrapper.textContent = originalText; // always reset to full text before measuring container width\n    }\n\n    const containerWidth =\n      Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n    if (truncationMode === 'middle') {\n      if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n        const ellipsizedText = _centerEllipsizeText(\n          originalText,\n          getFontProps(textWrapper),\n          containerWidth,\n        );\n        textWrapper.textContent = ellipsizedText;\n\n        if (ellipsizedText !== originalText) {\n          if (onTextOverflow && !wasEllipsized) {\n            onTextOverflow(true);\n          }\n\n          return true;\n        }\n      }\n\n      if (onTextOverflow && wasEllipsized) {\n        onTextOverflow(false);\n      }\n    } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n      if (onTextOverflow && !wasEllipsized) {\n        onTextOverflow(true);\n      }\n\n      return true;\n    } else if (onTextOverflow && wasEllipsized) {\n      onTextOverflow(false);\n    }\n  }\n\n  return false;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    onTextOverflow,\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  // resize observer is needed to re-render the component in case of resizing\n  const { ref: observerContainerRef } = useResizeObserver<HTMLSpanElement>();\n  const containerRef = useRef<HTMLSpanElement | null>(null);\n  const ellipsisStateRef = useRef<boolean>(false);\n  const mergedRef = useMergeRefs<HTMLSpanElement | null>([\n    observerContainerRef,\n    (instance: HTMLSpanElement) => {\n      containerRef.current = instance;\n    },\n    forwardedRef,\n  ]);\n  const containerWidth = containerRef.current?.getBoundingClientRect().width;\n  const fontsUpdated = _useFontsUpdated();\n\n  useLayoutEffect(() => {\n    ellipsisStateRef.current = renderEllipsizedText(\n      children,\n      truncationMode,\n      containerRef,\n      ellipsisStateRef.current,\n      onTextOverflow,\n    );\n  }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n  return (\n    <span\n      ref={mergedRef}\n      aria-label={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    truncationMode = 'end',\n    onTextOverflow,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  return (\n    <span\n      ref={forwardedRef}\n      aria-label={children}\n      data-ellipsis\n      data-testid={dataTestId}\n      className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n      style={consumerStyle}\n      {...remainingProps}\n    >\n      <span>{children}</span>\n    </span>\n  );\n});\n\n/**\n * @public\n * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever\n * there is insufficient space to render the entire text. While some of our Strato\n * components provide ellipsis out of the box, you need to take care of this yourself\n * when writing your own components.\n */\nexport const TextEllipsis = /* @__PURE__ */ forwardRef<\n  HTMLSpanElement,\n  TextEllipsisProps\n>((props, forwardedRef) => {\n  // in case onTextOverflow is not defined and the ellipsis is start or end\n  // we can use css only which is significantly more performant\n  const cssOnlyEllipsis =\n    !props.onTextOverflow && props.truncationMode !== 'middle';\n\n  return cssOnlyEllipsis ? (\n    <CssTextEllipsis ref={forwardedRef} {...props} />\n  ) : (\n    <ComputedTextEllipsis ref={forwardedRef} {...props} />\n  );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n  'TextEllipsis';\n"],
-  "mappings": "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",
-  "names": []
-}