@dynatrace/strato-components 1.4.0 → 1.6.0

package/typography/highlight/Highlight.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Highlight_exports, {
   Highlight: () => Highlight
 });
 module.exports = __toCommonJS(Highlight_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_react_is = require("react-is");
 var import_Highlight_css = require("./Highlight.sty.js");
@@ -51,7 +53,7 @@ function highlightChildren(intl, children, term, caseSensitive, dataTestId, data
     }
     return term ? [term] : [];
   })();
-  return terms.length > 0 ? import_react.default.Children.map(
+  return terms.length > 0 ? import_react.Children.map(
     children,
     (child) => highlightRecursive(
       intl,
@@ -64,12 +66,15 @@ function highlightChildren(intl, children, term, caseSensitive, dataTestId, data
     )
   ) : children;
 }
+function isFormattedMessageElement(node) {
+  return (0, import_react_is.isElement)(node) && node.type !== void 0 && node.type === import_react_intl.FormattedMessage;
+}
 function highlightRecursive(intl, sourceElement, terms, caseSensitive, dataTestId, dataDtrumMask, dataDtrumAllow) {
   if (!sourceElement) {
     return sourceElement;
   }
   let elementToHighlight = sourceElement;
-  if ((0, import_react_is.isElement)(elementToHighlight) && elementToHighlight.type && elementToHighlight.type === import_react_intl.FormattedMessage) {
+  if (isFormattedMessageElement(elementToHighlight)) {
     const { id, description, defaultMessage, values } = elementToHighlight.props;
     const messageDescriptor = {
       id,
@@ -80,7 +85,7 @@ function highlightRecursive(intl, sourceElement, terms, caseSensitive, dataTestI
     if (Array.isArray(elementToHighlight)) {
       return highlightRecursive(
         intl,
-        import_react.default.createElement(import_react.default.Fragment, { children: elementToHighlight }),
+        (0, import_react.createElement)(import_react.Fragment, { children: elementToHighlight }),
         terms,
         caseSensitive,
         dataTestId,
@@ -89,8 +94,8 @@ function highlightRecursive(intl, sourceElement, terms, caseSensitive, dataTestI
       );
     }
   }
-  if (import_react.default.isValidElement(elementToHighlight)) {
-    const children = import_react.default.Children.map(
+  if ((0, import_react.isValidElement)(elementToHighlight)) {
+    const children = import_react.Children.map(
       elementToHighlight.props.children,
       (child) => highlightRecursive(
         intl,
@@ -102,7 +107,7 @@ function highlightRecursive(intl, sourceElement, terms, caseSensitive, dataTestI
         dataDtrumAllow
       )
     );
-    return import_react.default.cloneElement(
+    return (0, import_react.cloneElement)(
       elementToHighlight,
       elementToHighlight.props,
       children
@@ -127,24 +132,24 @@ function highlightLeafElement(textContent, terms, caseSensitive, dataTestId, dat
   );
   const termsInLowerCase = terms.map((t) => t.toLowerCase());
   return getTextTokens(sanitizedTextContent, terms, caseSensitive).map(
-    (token) => termsInLowerCase.includes(token.toLowerCase()) ? /* @__PURE__ */ import_react.default.createElement(
+    (token) => termsInLowerCase.includes(token.toLowerCase()) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "mark",
       {
         role: "mark",
         className: (0, import_clsx.default)(import_Highlight_css.highlightCSS),
         "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow
-      },
-      token
-    ) : /* @__PURE__ */ import_react.default.createElement(
+        "data-dtrum-allow": dataDtrumAllow,
+        children: token
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
         style: {
           whiteSpace: "pre-wrap",
           flex: "none"
-        }
-      },
-      token
+        },
+        children: token
+      }
     )
   );
 }
@@ -166,7 +171,7 @@ const Highlight = (props) => {
     "data-dtrum-allow": dataDtrumAllow
   } = props;
   const intl = (0, import_react_intl.useIntl)();
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, highlightChildren(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: highlightChildren(
     intl,
     children,
     term,
@@ -174,6 +179,6 @@ const Highlight = (props) => {
     dataTestId,
     dataDtrumMask,
     dataDtrumAllow
-  ));
+  ) });
 };
 Highlight.displayName = "Highlight";

package/typography/highlight/Highlight.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Highlight_css_exports, {
 });
 module.exports = __toCommonJS(Highlight_css_exports);
 var import_Highlight_css_ts_vanilla = require("./Highlight.css");
-var highlightCSS = "_lajjl30-1-4-0";
+var highlightCSS = "_lajjl30-1-6-0";

package/typography/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/typography/link/Link.css

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

package/typography/link/Link.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, ReactElement } from 'react';
+import { type ElementType, type ReactElement } from 'react';
 import { type PolymorphicComponentProps, type DataTestId, type StylingProps, type WithChildren } from '../../core/index.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
 /**

package/typography/link/Link.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Link_exports, {
   Link: () => Link
 });
 module.exports = __toCommonJS(Link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = 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");
@@ -51,7 +53,7 @@ const Link = /* @__PURE__ */ (0, import_react.forwardRef)(
       isMinimal: true
     });
     const LinkTag = as || "a";
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       LinkTag,
       {
         ref,
@@ -66,9 +68,9 @@ const Link = /* @__PURE__ */ (0, import_react.forwardRef)(
           // polymorphic inheritance.
           remainingProps,
           focusProps
-        )
-      },
-      children
+        ),
+        children
+      }
     );
   }
 );

package/typography/link/Link.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Link_css_exports, {
 });
 module.exports = __toCommonJS(Link_css_exports);
 var import_Link_css_ts_vanilla = require("./Link.css");
-var linkCSS = "_1iksxp40-1-4-0";
+var linkCSS = "_1iksxp40-1-6-0";

package/typography/list/List.css

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

package/typography/list/List.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type MaskingProps } from '../../core/types/masking-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
@@ -36,4 +35,4 @@ export interface ListProps<TOrdered extends boolean = false> extends WithChildre
  * (for unordered lists).
  * @public
  */
-export declare const List: <TOrdered extends boolean = false>(props: ListProps<TOrdered> & React.RefAttributes<TOrdered extends true ? HTMLOListElement : HTMLUListElement>) => React.ReactElement | null;
+export declare const List: <TOrdered extends boolean = false>(props: ListProps<TOrdered> & import("react").RefAttributes<TOrdered extends true ? HTMLOListElement : HTMLUListElement>) => React.ReactElement | null;

package/typography/list/List.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,14 +31,15 @@ __export(List_exports, {
   List: () => List
 });
 module.exports = __toCommonJS(List_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_List_css = require("./List.sty.js");
 var import_Text = require("../text/Text.js");
 function interleaveListItems(listItems) {
   const items = [];
-  import_react.default.Children.forEach(listItems, (listItem) => {
-    if (import_react.default.isValidElement(listItem)) {
+  import_react.Children.forEach(listItems, (listItem) => {
+    if ((0, import_react.isValidElement)(listItem)) {
       if (listItem.type === List) {
         if (items.length === 0) {
           items.push([listItem]);
@@ -51,13 +53,13 @@ function interleaveListItems(listItems) {
   });
   return items.map((values, index) => {
     const itemKey = `list-item-${getItemKey(values, index)}`;
-    return /* @__PURE__ */ import_react.default.createElement("li", { key: itemKey, className: import_List_css.listItemCSS }, values);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: import_List_css.listItemCSS, children: values }, itemKey);
   });
 }
 function getItemKey(values, index) {
   const isArray = Array.isArray(values);
   const value = isArray ? values?.[0] : values;
-  if (import_react.default.isValidElement(value)) {
+  if ((0, import_react.isValidElement)(value)) {
     if (value.key) {
       return value.key;
     } else if (value.props && value.props.children) {
@@ -85,7 +87,7 @@ const List = /* @__PURE__ */ (0, import_react.forwardRef)(
       style: consumerStyle,
       ...remainingProps
     } = props;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Text.Text,
       {
         ref,
@@ -100,9 +102,9 @@ const List = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-dtrum-allow": dataDtrumAllow,
         className: (0, import_clsx.default)(import_List_css.listCSS, consumerClassName),
         style: consumerStyle,
-        ...remainingProps
-      },
-      interleaveListItems(children)
+        ...remainingProps,
+        children: interleaveListItems(children)
+      }
     );
   }
 );

package/typography/list/List.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,5 +23,5 @@ __export(List_css_exports, {
 });
 module.exports = __toCommonJS(List_css_exports);
 var import_List_css_ts_vanilla = require("./List.css");
-var listCSS = "_16276mt0-1-4-0";
-var listItemCSS = "_16276mt1-1-4-0";
+var listCSS = "_16276mt0-1-6-0";
+var listItemCSS = "_16276mt1-1-6-0";

package/typography/paragraph/Paragraph.css

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

package/typography/paragraph/Paragraph.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type DataTestId, type StylingProps, type WithChildren } from '../../core/index.js';
 import type { DOMProps } from '../../core/types/dom.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
@@ -16,4 +15,4 @@ export interface ParagraphProps extends WithChildren, DOMProps, StylingProps, Da
  * The `Paragraph` component displays a block of text with the default text style and supports text truncation.
  * @public
  */
-export declare const Paragraph: (props: ParagraphProps & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const Paragraph: (props: ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;

package/typography/paragraph/Paragraph.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Paragraph_exports, {
   Paragraph: () => Paragraph
 });
 module.exports = __toCommonJS(Paragraph_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Paragraph_css = require("./Paragraph.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
 const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
@@ -53,7 +55,7 @@ const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
   } else {
     ellipsis = "multiLine";
   }
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "p",
     {
       ref,
@@ -69,9 +71,9 @@ const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
         ...consumerStyle,
         "--strato-ellipsis-line-clamp": maxLines
       },
-      ...remainingProps
-    },
-    children
+      ...remainingProps,
+      children
+    }
   );
 });
 Paragraph.displayName = "Paragraph";

package/typography/paragraph/Paragraph.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,4 +23,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: "_487p2n0-1-4-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-4-0", multiLine: "_487p2n2-1-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-1-6-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-6-0", multiLine: "_487p2n2-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/strikethrough/Strikethrough.css

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

package/typography/strikethrough/Strikethrough.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type DataTestId, type StylingProps, type WithChildren } from '../../core/index.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
 /**
@@ -12,4 +11,4 @@ export interface StrikethroughProps extends WithChildren, StylingProps, DataTest
  * represent things that are no longer relevant or accurate.
  * @public
  */
-export declare const Strikethrough: (props: StrikethroughProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+export declare const Strikethrough: (props: StrikethroughProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;

package/typography/strikethrough/Strikethrough.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Strikethrough_exports, {
   Strikethrough: () => Strikethrough
 });
 module.exports = __toCommonJS(Strikethrough_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Strikethrough_css = require("./Strikethrough.sty.js");
 const Strikethrough = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
   const {
@@ -43,7 +45,7 @@ const Strikethrough = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref)
     style: consumerStyle,
     ...remainingProps
   } = props;
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "s",
     {
       ref,
@@ -52,9 +54,9 @@ const Strikethrough = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref)
       "data-dtrum-allow": dataDtrumAllow,
       className: (0, import_clsx.default)(import_Strikethrough_css.strikethroughCSS, consumerClassName),
       style: consumerStyle,
-      ...remainingProps
-    },
-    children
+      ...remainingProps,
+      children
+    }
   );
 });
 Strikethrough.displayName = "Strikethrough";

package/typography/strikethrough/Strikethrough.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "_4oao6y0-1-4-0";
+var strikethroughCSS = "_4oao6y0-1-6-0";

package/typography/strong/Strong.css

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

package/typography/strong/Strong.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type DataTestId, type StylingProps, type WithChildren } from '../../core/index.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
 /**
@@ -11,4 +10,4 @@ export interface StrongProps extends WithChildren, StylingProps, DataTestId, Mas
  * Use the `Strong` component to render text in bold type to emphasize it.
  * @public
  */
-export declare const Strong: (props: StrongProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+export declare const Strong: (props: StrongProps & import("react").RefAttributes<HTMLElement>) => React.ReactElement | null;

package/typography/strong/Strong.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Strong_exports, {
   Strong: () => Strong
 });
 module.exports = __toCommonJS(Strong_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Strong_css = require("./Strong.sty.js");
 const Strong = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, ref) => {
@@ -44,7 +46,7 @@ const Strong = /* @__PURE__ */ (0, import_react.forwardRef)(
       style: consumerStyle,
       ...remainingProps
     } = props;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "strong",
       {
         ref,
@@ -53,9 +55,9 @@ const Strong = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-dtrum-allow": dataDtrumAllow,
         className: (0, import_clsx.default)(import_Strong_css.strongCSS, consumerClassName),
         style: consumerStyle,
-        ...remainingProps
-      },
-      children
+        ...remainingProps,
+        children
+      }
     );
   }
 );

package/typography/strong/Strong.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Strong_css_exports, {
 });
 module.exports = __toCommonJS(Strong_css_exports);
 var import_Strong_css_ts_vanilla = require("./Strong.css");
-var strongCSS = "_wxp4dd0-1-4-0";
+var strongCSS = "_wxp4dd0-1-6-0";

package/typography/text/Text.css

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

package/typography/text/Text.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,8 +31,9 @@ __export(Text_exports, {
   Text: () => Text
 });
 module.exports = __toCommonJS(Text_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Text_css = require("./Text.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
 const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
@@ -49,7 +51,7 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
   }, ref) => {
     const TextTag = as || "span";
     let ellipsis;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       TextTag,
       {
         "data-testid": dataTestId,
@@ -62,9 +64,9 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
           consumerClassName
         ]),
         style: consumerStyle,
-        ...remainingProps
-      },
-      children
+        ...remainingProps,
+        children
+      }
     );
   }
 );

package/typography/text/Text.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,4 +23,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: "_rup8ap0-1-4-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-4-0", multiLine: "_rup8ap2-1-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-6-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-6-0", multiLine: "_rup8ap2-1-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/text-ellipsis/TextEllipsis.css

@@ -1,4 +1,4 @@
-._1mnpbqs1-1-4-0 {
+._1mnpbqs1-1-6-0 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,15 +9,18 @@
   text-decoration: inherit;
   width: 100%;
 }
-._1mnpbqs2-1-4-0 {
+._1mnpbqs2-1-6-0 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._1mnpbqs3-1-4-0 {
+._1mnpbqs2-1-6-0::after {
+  content: "‎";
+}
+._1mnpbqs3-1-6-0 {
   text-overflow: clip;
 }
-._1mnpbqs3-1-4-0._1mnpbqs0-1-4-0:after {
+._1mnpbqs3-1-6-0._1mnpbqs0-1-6-0:after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -25,6 +28,6 @@
   line-height: 0;
   user-select: none;
 }
-._1mnpbqs4-1-4-0 {
+._1mnpbqs4-1-6-0 {
   text-overflow: ellipsis;
 }