@dynatrace/strato-components 1.16.1 → 1.18.0

package/typography/paragraph/Paragraph.js

@@ -36,6 +36,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Paragraph_css = require("./Paragraph.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
+const COMPONENT_NAME = "Paragraph";
 const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
   const {
     children,
@@ -68,8 +69,9 @@ const Paragraph = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
         "--strato-ellipsis-line-clamp": maxLines
       },
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 });
-Paragraph.displayName = "Paragraph";
+Paragraph.displayName = COMPONENT_NAME;

package/typography/paragraph/Paragraph.sty.js

@@ -23,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 paragraph = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-1-16-1", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-16-1", multiLine: "_487p2n2-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraph = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-1-18-0", variantClassNames: { ellipsis: { singleLine: "_487p2n1-1-18-0", multiLine: "_487p2n2-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/strikethrough/Strikethrough.css

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

package/typography/strikethrough/Strikethrough.js

@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Strikethrough_css = require("./Strikethrough.sty.js");
+const COMPONENT_NAME = "Strikethrough";
 const Strikethrough = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) => {
   const {
     children,
@@ -55,8 +56,9 @@ const Strikethrough = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref)
       className: (0, import_clsx.default)(import_Strikethrough_css.strikethroughCSS, consumerClassName),
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );
 });
-Strikethrough.displayName = "Strikethrough";
+Strikethrough.displayName = COMPONENT_NAME;

package/typography/strikethrough/Strikethrough.sty.js

@@ -22,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-16-1";
+var strikethroughCSS = "_4oao6y0-1-18-0";

package/typography/strong/Strong.css

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

package/typography/strong/Strong.js

@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Strong_css = require("./Strong.sty.js");
+const COMPONENT_NAME = "Strong";
 const Strong = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, ref) => {
     const {
@@ -56,9 +57,10 @@ const Strong = /* @__PURE__ */ (0, import_react.forwardRef)(
         className: (0, import_clsx.default)(import_Strong_css.strongCSS, consumerClassName),
         style: consumerStyle,
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children
       }
     );
   }
 );
-Strong.displayName = "Strong";
+Strong.displayName = COMPONENT_NAME;

package/typography/strong/Strong.sty.js

@@ -22,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-16-1";
+var strongCSS = "_wxp4dd0-1-18-0";

package/typography/text/Text.css

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

package/typography/text/Text.js

@@ -36,6 +36,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Text_css = require("./Text.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
+const COMPONENT_NAME = "Text";
 const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
   ({
     children,
@@ -47,6 +48,7 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
     "data-testid": dataTestId,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
+    "data-dt-component": dataDtComponent = COMPONENT_NAME,
     ...remainingProps
   }, ref) => {
     const TextTag = as || "span";
@@ -57,6 +59,7 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "data-dt-component": dataDtComponent,
         ref,
         className: (0, import_clsx.default)([
           (0, import_Text_css.text)({ ellipsis }),
@@ -70,4 +73,4 @@ const Text = /* @__PURE__ */ (0, import_react.forwardRef)(
     );
   }
 );
-Text.displayName = "Text";
+Text.displayName = COMPONENT_NAME;

package/typography/text/Text.sty.js

@@ -23,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 text = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-16-1", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-16-1", multiLine: "_rup8ap2-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var text = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-18-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-18-0", multiLine: "_rup8ap2-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/text-ellipsis/TextEllipsis.css

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

package/typography/text-ellipsis/TextEllipsis.js

@@ -39,6 +39,7 @@ var import_useFontsUpdated = require("../../core/hooks/useFontsUpdated.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_utils = require("../utils.js");
 var styles = __toESM(require("./TextEllipsis.sty.js"));
+const COMPONENT_NAME = "TextEllipsis";
 function getFontProps(innerSpanElement) {
   const computedStyle = window.getComputedStyle(innerSpanElement, null);
   return {
@@ -141,6 +142,7 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
       }),
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
     }
   );
@@ -152,6 +154,8 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
     onTextOverflow,
     className: consumerClassName,
     style: consumerStyle,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
     "data-testid": dataTestId,
     ...remainingProps
   } = props;
@@ -162,9 +166,12 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       "aria-label": children,
       "data-ellipsis": true,
       "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       className: (0, import_clsx.default)(styles.ellipsis({ truncationMode }), consumerClassName),
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
     }
   );
@@ -173,4 +180,4 @@ const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwar
   const cssOnlyEllipsis = !props.onTextOverflow && props.truncationMode !== "middle";
   return cssOnlyEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CssTextEllipsis, { ref: forwardedRef, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComputedTextEllipsis, { ref: forwardedRef, ...props });
 });
-TextEllipsis.displayName = "TextEllipsis";
+TextEllipsis.displayName = COMPONENT_NAME;

package/typography/text-ellipsis/TextEllipsis.sty.js

@@ -24,5 +24,5 @@ __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 active = "_1mnpbqs0-1-16-1";
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-16-1", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-16-1", middle: "_1mnpbqs3-1-16-1", end: "_1mnpbqs4-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
+var active = "_1mnpbqs0-1-18-0";
+var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-18-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-18-0", middle: "_1mnpbqs3-1-18-0", end: "_1mnpbqs4-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });