@dynatrace/strato-components 1.5.1 → 1.6.2

package/content/progress/ProgressCircle.css

@@ -1,4 +1,4 @@
-@keyframes _kvldjh3-1-5-1 {
+@keyframes _kvldjh3-1-6-2 {
   0% {
     transform: rotate(0deg);
   }
@@ -6,79 +6,79 @@
     transform: rotate(360deg);
   }
 }
-._kvldjh4-1-5-1 {
+._kvldjh4-1-6-2 {
   display: inline-block;
 }
-._kvldjh5-1-5-1 {
+._kvldjh5-1-6-2 {
   display: block;
   transform: rotate(-90deg);
 }
-._kvldjh6-1-5-1 {
-  stroke: var(--_kvldjh2-1-5-1);
+._kvldjh6-1-6-2 {
+  stroke: var(--_kvldjh2-1-6-2);
   transform-origin: center;
 }
-._kvldjh7-1-5-1 {
+._kvldjh7-1-6-2 {
   stroke-dasharray: 90 360;
   transform-origin: 50% 50%;
-  animation-name: _kvldjh3-1-5-1;
+  animation-name: _kvldjh3-1-6-2;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
   animation-iteration-count: infinite;
 }
-._kvldjh8-1-5-1 {
+._kvldjh8-1-6-2 {
   animation-duration: var(--dt-timings-fast-moderate, 200ms);
   transition-property: stroke-dashoffset;
 }
-._kvldjh9-1-5-1 {
-  stroke: var(--_kvldjh1-1-5-1);
+._kvldjh9-1-6-2 {
+  stroke: var(--_kvldjh1-1-6-2);
 }
-._kvldjha-1-5-1 {
+._kvldjha-1-6-2 {
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--_kvldjh0-1-5-1);
+  color: var(--_kvldjh0-1-6-2);
 }
-._kvldjhb-1-5-1 {
+._kvldjhb-1-6-2 {
   gap: var(--dt-spacings-size-8, 8px);
 }
-._kvldjhc-1-5-1 {
+._kvldjhc-1-6-2 {
   gap: var(--dt-spacings-size-12, 12px);
 }
-._kvldjhd-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-critical-accent, #b80031);
+._kvldjhd-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
 }
-._kvldjhe-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-neutral-accent, #545587);
+._kvldjhe-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
 }
-._kvldjhf-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-primary-accent, #454cc9);
+._kvldjhf-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
 }
-._kvldjhg-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-success-accent, #2c6360);
+._kvldjhg-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
 }
-._kvldjhh-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-warning-accent, #805100);
+._kvldjhh-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-warning-accent, #805100);
 }
-._kvldjhi-1-5-1 {
-  --_kvldjh0-1-5-1: var(--dt-colors-text-neutral-default, #2b2a58);
-  --_kvldjh1-1-5-1: var(--dt-colors-border-neutral-default, #d2d3e1);
+._kvldjhi-1-6-2 {
+  --_kvldjh0-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
+  --_kvldjh1-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
 }
-._kvldjhj-1-5-1 {
-  --_kvldjh0-1-5-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_kvldjh1-1-5-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+._kvldjhj-1-6-2 {
+  --_kvldjh0-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_kvldjh1-1-6-2: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
 }
-._kvldjhk-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
+._kvldjhk-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
 }
-._kvldjhl-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
+._kvldjhl-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
 }
-._kvldjhm-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-warning-on-accent-default, #272025);
+._kvldjhm-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-warning-on-accent-default, #272025);
 }
-._kvldjhn-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
+._kvldjhn-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
 }
-._kvldjho-1-5-1 {
-  --_kvldjh2-1-5-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+._kvldjho-1-6-2 {
+  --_kvldjh2-1-6-2: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
 }

package/content/progress/ProgressCircle.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type AriaLabelingProps } from '../../core/types/a11y-props.js';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type DOMProps } from '../../core/types/dom.js';
@@ -47,4 +46,4 @@ export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelin
  * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.
  * @public
  * */
-export declare const ProgressCircle: (props: ProgressCircleProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const ProgressCircle: (props: ProgressCircleProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/content/progress/ProgressCircle.js

@@ -31,8 +31,9 @@ __export(ProgressCircle_exports, {
   ProgressCircle: () => ProgressCircle
 });
 module.exports = __toCommonJS(ProgressCircle_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_useProgressAriaProps = require("./hooks/useProgressAriaProps.js");
 var import_ProgressCircle_css = require("./ProgressCircle.sty.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
@@ -93,7 +94,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
         "If no label is provided please make sure to provide an aria label on your progressCircle element."
       );
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         "data-testid": dataTestId,
@@ -113,65 +114,69 @@ const ProgressCircle = (0, import_react.forwardRef)(
           })
         ),
         style: consumerStyle,
-        ...forwardProps
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          id,
-          className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleRootCSS),
-          style: {
-            height: `${progressCircleSizes[size]}px`,
-            width: `${progressCircleSizes[size]}px`
-          },
-          ...ariaLabelingProps,
-          ...progressAriaProps,
-          ...rootProps
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "svg",
-          {
-            className: import_ProgressCircle_css.progressCircleSvgCss,
-            viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
-            width: "100%",
-            height: "100%"
-          },
-          /* @__PURE__ */ import_react.default.createElement(
-            "circle",
+        ...forwardProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
             {
-              fill: "none",
-              className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleBackgroundCSS),
-              cx: progressCircleSizes[size] / 2,
-              cy: progressCircleSizes[size] / 2,
-              r: (progressCircleSizes[size] - progressCircleThickness) / 2,
-              strokeWidth: progressCircleThickness
+              id,
+              className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleRootCSS),
+              style: {
+                height: `${progressCircleSizes[size]}px`,
+                width: `${progressCircleSizes[size]}px`
+              },
+              ...ariaLabelingProps,
+              ...progressAriaProps,
+              ...rootProps,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "svg",
+                {
+                  className: import_ProgressCircle_css.progressCircleSvgCss,
+                  viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
+                  width: "100%",
+                  height: "100%",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "circle",
+                      {
+                        fill: "none",
+                        className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleBackgroundCSS),
+                        cx: progressCircleSizes[size] / 2,
+                        cy: progressCircleSizes[size] / 2,
+                        r: (progressCircleSizes[size] - progressCircleThickness) / 2,
+                        strokeWidth: progressCircleThickness
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "circle",
+                      {
+                        style: circleStyles,
+                        className: (0, import_ProgressCircle_css.progressCircleCSS)({ indeterminate: isIndeterminate }),
+                        fill: "none",
+                        pathLength: isIndeterminate ? 360 : circleStyles["strokeDasharray"],
+                        cx: progressCircleSizes[size] / 2,
+                        cy: progressCircleSizes[size] / 2,
+                        r: (progressCircleSizes[size] - progressCircleThickness) / 2,
+                        strokeWidth: progressCircleThickness
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "circle",
+          children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "label",
             {
-              style: circleStyles,
-              className: (0, import_ProgressCircle_css.progressCircleCSS)({ indeterminate: isIndeterminate }),
-              fill: "none",
-              pathLength: isIndeterminate ? 360 : circleStyles["strokeDasharray"],
-              cx: progressCircleSizes[size] / 2,
-              cy: progressCircleSizes[size] / 2,
-              r: (progressCircleSizes[size] - progressCircleThickness) / 2,
-              strokeWidth: progressCircleThickness
+              className: (0, import_clsx.default)(
+                (0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
+              ),
+              htmlFor: id,
+              children
             }
           )
-        )
-      ),
-      children && /* @__PURE__ */ import_react.default.createElement(
-        "label",
-        {
-          className: (0, import_clsx.default)(
-            (0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
-          ),
-          htmlFor: id
-        },
-        children
-      )
+        ]
+      }
     );
   }
 );

package/content/progress/ProgressCircle.sty.js

@@ -27,8 +27,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressCircleBackgroundCSS = "_kvldjh9-1-5-1";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-5-1", variantClassNames: { indeterminate: { true: "_kvldjh7-1-5-1", false: "_kvldjh8-1-5-1" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-5-1", variantClassNames: { size: { small: "_kvldjhb-1-5-1", large: "_kvldjhc-1-5-1" }, color: { critical: "_kvldjhd-1-5-1", neutral: "_kvldjhe-1-5-1", primary: "_kvldjhf-1-5-1", success: "_kvldjhg-1-5-1", warning: "_kvldjhh-1-5-1" }, variant: { "default": "_kvldjhi-1-5-1", accent: "_kvldjhj-1-5-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-5-1"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-5-1"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-5-1"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-5-1"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-5-1"]] });
-var progressCircleRootCSS = "_kvldjh4-1-5-1";
-var progressCircleSvgCss = "_kvldjh5-1-5-1";
+var progressCircleBackgroundCSS = "_kvldjh9-1-6-2";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-6-2", variantClassNames: { indeterminate: { true: "_kvldjh7-1-6-2", false: "_kvldjh8-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-6-2", variantClassNames: { size: { small: "_kvldjhb-1-6-2", large: "_kvldjhc-1-6-2" }, color: { critical: "_kvldjhd-1-6-2", neutral: "_kvldjhe-1-6-2", primary: "_kvldjhf-1-6-2", success: "_kvldjhg-1-6-2", warning: "_kvldjhh-1-6-2" }, variant: { "default": "_kvldjhi-1-6-2", accent: "_kvldjhj-1-6-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-6-2"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-6-2"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-6-2"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-6-2"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-6-2"]] });
+var progressCircleRootCSS = "_kvldjh4-1-6-2";
+var progressCircleSvgCss = "_kvldjh5-1-6-2";

package/content/progress/contexts/SharedProgressBarPropsContext.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export type SharedProgressBarProps = {
     id: string;
     density: 'default' | 'condensed';
 };
 /** Context provider for `ProgressBarProps` props meant to be provided to all its progressbar-related child nodes. */
-export declare const SharedProgressBarPropsContext: React.Context<SharedProgressBarProps>;
+export declare const SharedProgressBarPropsContext: import("react").Context<SharedProgressBarProps>;

package/content/progress/contexts/SharedProgressBarPropsContext.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,22 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SharedProgressBarPropsContext_exports = {};
 __export(SharedProgressBarPropsContext_exports, {
   SharedProgressBarPropsContext: () => SharedProgressBarPropsContext
 });
 module.exports = __toCommonJS(SharedProgressBarPropsContext_exports);
-var import_react = __toESM(require("react"));
-const SharedProgressBarPropsContext = import_react.default.createContext({
+var import_react = require("react");
+const SharedProgressBarPropsContext = (0, import_react.createContext)({
   id: "",
   density: "default"
 });

package/content/skeleton/Skeleton.css

@@ -1,4 +1,4 @@
-@keyframes _1a1ozfd0-1-5-1 {
+@keyframes _1a1ozfd0-1-6-2 {
   0% {
     transform: translateX(-100%) scaleX(0);
   }
@@ -6,12 +6,12 @@
     transform: translateX(100%) scaleX(1.5);
   }
 }
-._1a1ozfd1-1-5-1 {
+._1a1ozfd1-1-6-2 {
   position: relative;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
 }
-._1a1ozfd1-1-5-1:after {
+._1a1ozfd1-1-6-2:after {
   content: "";
   position: absolute;
   top: 0;
@@ -21,13 +21,13 @@
   background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
   animation-iteration-count: infinite;
   transform-origin: left center;
-  animation-name: _1a1ozfd0-1-5-1;
+  animation-name: _1a1ozfd0-1-6-2;
   animation-duration: var(--dt-timings-slow-gentle, 800ms);
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1a1ozfd2-1-5-1 {
+._1a1ozfd2-1-6-2 {
   border-radius: var(--dt-borders-radius-container-subdued, 8px);
 }
-._1a1ozfd3-1-5-1 {
+._1a1ozfd3-1-6-2 {
   border-radius: 9999px;
 }

package/content/skeleton/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 import { type WithChildren } from '../../core/types/with-children.js';
@@ -27,4 +27,4 @@ export interface SkeletonProps extends WithChildren, StylingProps, DataTestId {
  * The `Skeleton` component renders a colored block with an animated background, indicating that something is loading.
  * @public
  */
-export declare const Skeleton: (props: SkeletonProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Skeleton: (props: SkeletonProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/content/skeleton/Skeleton.js

@@ -31,8 +31,9 @@ __export(Skeleton_exports, {
   Skeleton: () => Skeleton
 });
 module.exports = __toCommonJS(Skeleton_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_Skeleton_css = require("./Skeleton.sty.js");
 const Skeleton = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
@@ -46,16 +47,16 @@ const Skeleton = (0, import_react.forwardRef)(
       "data-testid": dataTestId,
       ...remainingProps
     } = props;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         "data-testid": dataTestId,
         ref: forwardedRef,
         className: (0, import_clsx.default)((0, import_Skeleton_css.skeletonPlaceholderCSS)({ variant }), consumerClassName),
         style: { width, height, ...consumerStyle },
-        ...remainingProps
-      },
-      children
+        ...remainingProps,
+        children
+      }
     );
   }
 );

package/content/skeleton/Skeleton.sty.js

@@ -23,4 +23,4 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-1-5-1", variantClassNames: { variant: { "default": "_1a1ozfd2-1-5-1", rounded: "_1a1ozfd3-1-5-1" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-1-6-2", variantClassNames: { variant: { "default": "_1a1ozfd2-1-6-2", rounded: "_1a1ozfd3-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });

package/content/skeleton/SkeletonText.d.ts

@@ -1,4 +1,4 @@
-import React, { type CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 import { type DataTestId } from '../../core/types/data-props.js';
 import { type StylingProps } from '../../core/types/styling-props.js';
 /**
@@ -21,4 +21,4 @@ export interface SkeletonTextProps extends StylingProps, DataTestId {
  * The `SkeletonText` component renders a specified number of placeholder boxes for lines of text with an animated background.
  * @public
  */
-export declare const SkeletonText: (props: SkeletonTextProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const SkeletonText: (props: SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/content/skeleton/SkeletonText.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,21 +15,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SkeletonText_exports = {};
 __export(SkeletonText_exports, {
   SkeletonText: () => SkeletonText
 });
 module.exports = __toCommonJS(SkeletonText_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_Skeleton = require("./Skeleton.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 const SkeletonText = (0, import_react.forwardRef)(
@@ -55,19 +46,19 @@ const SkeletonText = (0, import_react.forwardRef)(
       for (let line = 0; line < lines2; line++) {
         const width2 = `calc(100% - ${getSkeletonLinesMargin(line, lines2)}px)`;
         render.push(
-          /* @__PURE__ */ import_react.default.createElement(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_Skeleton.Skeleton,
             {
-              key: `${lines2}-${line}`,
               width: width2,
               height: "12px"
-            }
+            },
+            `${lines2}-${line}`
           )
         );
       }
       return render;
     };
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Flex.Flex,
       {
         "data-testid": dataTestId,
@@ -77,9 +68,9 @@ const SkeletonText = (0, import_react.forwardRef)(
         paddingY: 4,
         className: consumerClassName,
         style: { width, ...consumerStyle },
-        ...remainingProps
-      },
-      getSkeletonLines(lines)
+        ...remainingProps,
+        children: getSkeletonLines(lines)
+      }
     );
   }
 );

package/core/components/app-root/AppRoot.d.ts

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import 'wicg-inert';
 import './AppRoot.sty.js';
 import { type DataTestId } from '../../types/data-props.js';
@@ -18,5 +18,5 @@ export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & Masking
  * @public
  */
 export declare const AppRoot: (props: DataTestId & StylingProps & MaskingProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/core/components/app-root/AppRoot.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,22 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var AppRoot_exports = {};
 __export(AppRoot_exports, {
   AppRoot: () => AppRoot
 });
 module.exports = __toCommonJS(AppRoot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_wicg_inert = require("wicg-inert");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
@@ -90,7 +81,7 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         setMessages((prev) => (0, import_lodash_es.isEmpty)(prev) ? prev : {});
       });
     }, [language]);
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: forwardedRef,
@@ -99,18 +90,18 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         style: consumerStyle,
         "data-theme": theme,
         "data-dtrum-mask": dataDtrumMask,
-        "data-dtrum-allow": dataDtrumAllow
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        import_react_intl.IntlProvider,
-        {
-          locale: language,
-          timeZone: timezone,
-          messages,
-          defaultLocale: defaultLanguage
-        },
-        /* @__PURE__ */ import_react.default.createElement(import_FocusProvider.FocusProvider, null, children)
-      )
+        "data-dtrum-allow": dataDtrumAllow,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_intl.IntlProvider,
+          {
+            locale: language,
+            timeZone: timezone,
+            messages,
+            defaultLocale: defaultLanguage,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusProvider.FocusProvider, { children })
+          }
+        )
+      }
     );
   }
 );

package/core/components/focus-scope/FocusScope.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { WithChildren } from '../../types/with-children.js';
 /**
  * Prop definition of the `FocusScope` component.
@@ -24,6 +23,6 @@ export interface FocusScopeProps extends WithChildren {
  * @public
  */
 export declare const FocusScope: {
-    (props: FocusScopeProps): React.JSX.Element;
+    (props: FocusScopeProps): import("react/jsx-runtime.js").JSX.Element;
     displayName: string;
 };