@dynatrace/strato-components 0.84.31 → 0.84.51

package/esm/content/progress/ProgressCircle.css

@@ -0,0 +1,52 @@
+@keyframes ProgressCircle_circularIndeterminateKeyframes__kvldjh0 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.ProgressCircle_progressCircleRootCSS__kvldjh1 {
+  display: inline-block;
+  color: var(--vars_borderColor__17bwkb02);
+}
+.ProgressCircle_ProgressCircleSVGCSS__kvldjh2 {
+  display: block;
+  transform: rotate(-90deg);
+}
+.ProgressCircle_progressCircleCSS__kvldjh3 {
+  stroke: currentColor;
+  transform-origin: center;
+}
+.ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4 {
+  stroke-dasharray: 90 360;
+  transform-origin: 50 50;
+  animation-name: ProgressCircle_circularIndeterminateKeyframes__kvldjh0;
+  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;
+}
+.ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5 {
+  animation-duration: var(--dt-timings-fast-moderate, 200ms);
+  transition-property: stroke-dashoffset;
+}
+.ProgressCircle_progressCircleBackgroundCSS__kvldjh6 {
+  stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7 {
+  stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
+}
+.ProgressCircle_progressCircleContainerCSS__kvldjhd {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe {
+  gap: var(--dt-spacings-size-8, 8px);
+}
+.ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf {
+  gap: var(--dt-spacings-size-12, 12px);
+}
+.ProgressCircle_progressCircleChildCSS__kvldjhg {
+  color: var(--vars_text__6levse0);
+}

package/esm/content/progress/ProgressCircle.js

@@ -0,0 +1,153 @@
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { useProgressAriaProps } from "./hooks/useProgressAriaProps.js";
+import {
+  progressCircleBackgroundCSS,
+  progressCircleChildCSS,
+  progressCircleContainerCSS,
+  progressCircleCSS,
+  progressCircleRootCSS,
+  ProgressCircleSVGCSS
+} from "./ProgressCircle.sty.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useId } from "../../core/hooks/useId.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
+import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
+import { containerColorsCSS } from "../../styles/container.sty.js";
+import { textStyleCSS } from "../../styles/textStyle.sty.js";
+const progressCircleSizes = {
+  small: 20,
+  large: 40
+};
+const progressCircleThickness = 5;
+const ProgressCircle = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      value: originalValue,
+      min = 0,
+      max = 100,
+      size = "large",
+      variant = "primary",
+      children,
+      id: propId,
+      "aria-valuetext": ariaValuetext,
+      className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...remainingProps
+    } = props;
+    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(
+      originalValue,
+      min,
+      max,
+      ariaValuetext
+    );
+    const ariaLabelingProps = useAriaLabelingProps(remainingProps);
+    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
+    const generatedId = useId({ prefix: "progress-circle" });
+    const id = propId ?? generatedId;
+    const circleStyles = {};
+    const rootProps = {};
+    if (!isIndeterminate && value !== void 0) {
+      const circumference = 2 * Math.PI * ((progressCircleSizes[size] - progressCircleThickness) / 2);
+      circleStyles["strokeDasharray"] = circumference.toFixed(3);
+      const dashOffset = Number(
+        ((max - value) / max * circumference).toFixed(3)
+      );
+      circleStyles["strokeDashoffset"] = `${dashOffset >= 0 ? dashOffset : 0}px`;
+    }
+    if (!children && !ariaLabelingProps["aria-label"] && !ariaLabelingProps["aria-labelledby"]) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "If no label is provided please make sure to provide an aria label on your progressCircle element."
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        ref: forwardedRef,
+        className: clsx(
+          consumerClassName,
+          containerColorsCSS({
+            color: "neutral",
+            variant: variant === "onAccent" ? "accent" : "default"
+          }),
+          progressCircleContainerCSS({ size })
+        ),
+        style: consumerStyle,
+        ...forwardProps
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id,
+          className: clsx(
+            colorUtilsCSS({ color: variant, variant: "accent" }),
+            progressCircleRootCSS
+          ),
+          style: {
+            height: `${progressCircleSizes[size]}px`,
+            width: `${progressCircleSizes[size]}px`
+          },
+          ...ariaLabelingProps,
+          ...progressAriaProps,
+          ...rootProps
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            className: ProgressCircleSVGCSS,
+            viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
+            width: "100%",
+            height: "100%"
+          },
+          /* @__PURE__ */ React.createElement(
+            "circle",
+            {
+              fill: "none",
+              className: clsx(progressCircleBackgroundCSS({ variant })),
+              cx: progressCircleSizes[size] / 2,
+              cy: progressCircleSizes[size] / 2,
+              r: (progressCircleSizes[size] - progressCircleThickness) / 2,
+              strokeWidth: progressCircleThickness
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            "circle",
+            {
+              style: circleStyles,
+              className: 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
+            }
+          )
+        )
+      ),
+      children && /* @__PURE__ */ React.createElement(
+        "label",
+        {
+          className: clsx(
+            progressCircleChildCSS,
+            textStyleCSS({ textStyle: size === "small" ? "small" : "base" })
+          ),
+          htmlFor: id
+        },
+        children
+      )
+    );
+  }
+);
+ProgressCircle.displayName = "ProgressCircle";
+export {
+  ProgressCircle
+};
+//# sourceMappingURL=ProgressCircle.js.map

package/esm/content/progress/ProgressCircle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/progress/ProgressCircle.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef } from 'react';\n\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n  progressCircleBackgroundCSS,\n  progressCircleChildCSS,\n  progressCircleContainerCSS,\n  progressCircleCSS,\n  progressCircleRootCSS,\n  ProgressCircleSVGCSS,\n} from './ProgressCircle.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.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 RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressCircle.\n * @public\n */\nexport interface ProgressCircleProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The smallest allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the size of the rendered progress.\n   * @defaultValue 'large'\n   */\n  size?: 'small' | 'large';\n  /**\n   * Controls the appearance of the progress.\n   * @defaultValue 'primary'\n   */\n  variant?: RoleVariantType;\n\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\nconst progressCircleSizes = {\n  small: 20,\n  large: 40,\n};\nconst progressCircleThickness = 5;\n\n/**\n * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.\n * @public\n * */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      min = 0,\n      max = 100,\n      size = 'large',\n      variant = 'primary',\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressCircleProps = props;\n\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId({ prefix: 'progress-circle' });\n    const id = propId ?? generatedId;\n\n    const circleStyles: CSSProperties = {};\n    const rootProps = {};\n\n    if (!isIndeterminate && value !== undefined) {\n      const circumference =\n        2 *\n        Math.PI *\n        ((progressCircleSizes[size] - progressCircleThickness) / 2);\n      circleStyles['strokeDasharray'] = circumference.toFixed(3);\n      const dashOffset = Number(\n        (((max - value) / max) * circumference).toFixed(3),\n      );\n      circleStyles['strokeDashoffset'] = `${\n        dashOffset >= 0 ? dashOffset : 0\n      }px`;\n    }\n\n    if (\n      !children &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          consumerClassName,\n          containerColorsCSS({\n            color: 'neutral',\n            variant: variant === 'onAccent' ? 'accent' : 'default',\n          }),\n          progressCircleContainerCSS({ size }),\n        )}\n        style={consumerStyle}\n        {...forwardProps}\n      >\n        <span\n          id={id}\n          className={clsx(\n            colorUtilsCSS({ color: variant, variant: 'accent' }),\n            progressCircleRootCSS,\n          )}\n          style={{\n            height: `${progressCircleSizes[size]}px`,\n            width: `${progressCircleSizes[size]}px`,\n          }}\n          {...ariaLabelingProps}\n          {...progressAriaProps}\n          {...rootProps}\n        >\n          <svg\n            className={ProgressCircleSVGCSS}\n            viewBox={`0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`}\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <circle\n              fill=\"none\"\n              className={clsx(progressCircleBackgroundCSS({ variant }))}\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n            <circle\n              style={circleStyles}\n              className={progressCircleCSS({ indeterminate: isIndeterminate })}\n              fill=\"none\"\n              pathLength={\n                isIndeterminate ? 360 : circleStyles['strokeDasharray']\n              }\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n          </svg>\n        </span>\n        {children && (\n          <label\n            className={clsx(\n              progressCircleChildCSS,\n              textStyleCSS({ textStyle: size === 'small' ? 'small' : 'base' }),\n            )}\n            htmlFor={id}\n          >\n            {children}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\n(\n  ProgressCircle as typeof ProgressCircle & { displayName: string }\n).displayName = 'ProgressCircle';\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAwB,kBAAkB;AAEjD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAgD7B,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AACT;AACA,MAAM,0BAA0B;AAMzB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,IAAI;AAAA,MACJ,kBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAyB;AAEzB,UAAM,EAAE,OAAO,iBAAiB,kBAAkB,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,oBAAoB,qBAAqB,cAAc;AAC7D,UAAM,eAAe,oBAAoB,gBAAgB,iBAAiB;AAE1E,UAAM,cAAc,MAAM,EAAE,QAAQ,kBAAkB,CAAC;AACvD,UAAM,KAAK,UAAU;AAErB,UAAM,eAA8B,CAAC;AACrC,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,mBAAmB,UAAU,QAAW;AAC3C,YAAM,gBACJ,IACA,KAAK,OACH,oBAAoB,IAAI,IAAI,2BAA2B;AAC3D,mBAAa,iBAAiB,IAAI,cAAc,QAAQ,CAAC;AACzD,YAAM,aAAa;AAAA,UACd,MAAM,SAAS,MAAO,eAAe,QAAQ,CAAC;AAAA,MACnD;AACA,mBAAa,kBAAkB,IAAI,GACjC,cAAc,IAAI,aAAa,CACjC;AAAA,IACF;AAEA,QACE,CAAC,YACD,CAAC,kBAAkB,YAAY,KAC/B,CAAC,kBAAkB,iBAAiB,GACpC;AACA;AAAA,MAEE,QAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,mBAAmB;AAAA,YACjB,OAAO;AAAA,YACP,SAAS,YAAY,aAAa,WAAW;AAAA,UAC/C,CAAC;AAAA,UACD,2BAA2B,EAAE,KAAK,CAAC;AAAA,QACrC;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT,cAAc,EAAE,OAAO,SAAS,SAAS,SAAS,CAAC;AAAA,YACnD;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,QAAQ,GAAG,oBAAoB,IAAI,CAAC;AAAA,YACpC,OAAO,GAAG,oBAAoB,IAAI,CAAC;AAAA,UACrC;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,SAAS,OAAO,oBAAoB,IAAI,CAAC,IAAI,oBAAoB,IAAI,CAAC;AAAA,YACtE,OAAM;AAAA,YACN,QAAO;AAAA;AAAA,UAEP;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,KAAK,4BAA4B,EAAE,QAAQ,CAAC,CAAC;AAAA,cACxD,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI,2BAA2B;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,WAAW,kBAAkB,EAAE,eAAe,gBAAgB,CAAC;AAAA,cAC/D,MAAK;AAAA,cACL,YACE,kBAAkB,MAAM,aAAa,iBAAiB;AAAA,cAExD,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI,2BAA2B;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aAAa,EAAE,WAAW,SAAS,UAAU,UAAU,OAAO,CAAC;AAAA,UACjE;AAAA,UACA,SAAS;AAAA;AAAA,QAER;AAAA,MACH;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
+  "names": []
+}

package/esm/content/progress/ProgressCircle.sty.js

@@ -0,0 +1,19 @@
+import "../../styles/colorUtils.css";
+import "../../styles/container.css";
+import "./ProgressCircle.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var ProgressCircleSVGCSS = "ProgressCircle_ProgressCircleSVGCSS__kvldjh2";
+var progressCircleBackgroundCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleBackgroundCSS__kvldjh6", variantClassNames: { variant: { onAccent: "ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7", primary: "ProgressCircle_progressCircleBackgroundCSS_variant_primary__kvldjh8", success: "ProgressCircle_progressCircleBackgroundCSS_variant_success__kvldjh9", warning: "ProgressCircle_progressCircleBackgroundCSS_variant_warning__kvldjha", critical: "ProgressCircle_progressCircleBackgroundCSS_variant_critical__kvldjhb", neutral: "ProgressCircle_progressCircleBackgroundCSS_variant_neutral__kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleCSS__kvldjh3", variantClassNames: { indeterminate: { true: "ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4", false: "ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleChildCSS = "ProgressCircle_progressCircleChildCSS__kvldjhg";
+var progressCircleContainerCSS = _7a468({ defaultClassName: "ProgressCircle_progressCircleContainerCSS__kvldjhd", variantClassNames: { size: { small: "ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe", large: "ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleRootCSS = "ProgressCircle_progressCircleRootCSS__kvldjh1";
+export {
+  ProgressCircleSVGCSS,
+  progressCircleBackgroundCSS,
+  progressCircleCSS,
+  progressCircleChildCSS,
+  progressCircleContainerCSS,
+  progressCircleRootCSS
+};
+//# sourceMappingURL=ProgressCircle.sty.js.map

package/esm/content/progress/ProgressCircle.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/progress/ProgressCircle.css.ts"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport '../../styles/container.css';\nimport './ProgressCircle.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ProgressCircleSVGCSS = 'ProgressCircle_ProgressCircleSVGCSS__kvldjh2';\nexport var progressCircleBackgroundCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleBackgroundCSS__kvldjh6',variantClassNames:{variant:{onAccent:'ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7',primary:'ProgressCircle_progressCircleBackgroundCSS_variant_primary__kvldjh8',success:'ProgressCircle_progressCircleBackgroundCSS_variant_success__kvldjh9',warning:'ProgressCircle_progressCircleBackgroundCSS_variant_warning__kvldjha',critical:'ProgressCircle_progressCircleBackgroundCSS_variant_critical__kvldjhb',neutral:'ProgressCircle_progressCircleBackgroundCSS_variant_neutral__kvldjhc'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleCSS__kvldjh3',variantClassNames:{indeterminate:{true:'ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4',false:'ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleChildCSS = 'ProgressCircle_progressCircleChildCSS__kvldjhg';\nexport var progressCircleContainerCSS = _7a468({defaultClassName:'ProgressCircle_progressCircleContainerCSS__kvldjhd',variantClassNames:{size:{small:'ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe',large:'ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCircleRootCSS = 'ProgressCircle_progressCircleRootCSS__kvldjh1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,uDAAsD,mBAAkB,EAAC,SAAQ,EAAC,UAAS,wEAAuE,SAAQ,uEAAsE,SAAQ,uEAAsE,SAAQ,uEAAsE,UAAS,wEAAuE,SAAQ,sEAAqE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9oB,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,6CAA4C,mBAAkB,EAAC,eAAc,EAAC,MAAK,gEAA+D,OAAM,gEAA+D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClT,IAAI,yBAAyB;AAC7B,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,sDAAqD,mBAAkB,EAAC,MAAK,EAAC,OAAM,iEAAgE,OAAM,gEAA+D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7T,IAAI,wBAAwB;",
+  "names": []
+}

package/esm/content/progress/contexts/SharedProgressBarPropsContext.js

@@ -0,0 +1,10 @@
+import React from "react";
+const SharedProgressBarPropsContext = React.createContext({
+  id: "",
+  density: "default",
+  variant: "neutral"
+});
+export {
+  SharedProgressBarPropsContext
+};
+//# sourceMappingURL=SharedProgressBarPropsContext.js.map

package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/progress/contexts/SharedProgressBarPropsContext.ts"],
+  "sourcesContent": ["import React from 'react';\n\nimport { RoleVariantType } from '../../../core/types/role-variant.js';\n\nexport type SharedProgressBarProps = {\n  id: string;\n  variant: RoleVariantType;\n  density: 'default' | 'condensed';\n};\n\n/** Context provider for `ProgressBarProps` props meant to be provided to all its progressbar-related child nodes. */\nexport const SharedProgressBarPropsContext =\n  React.createContext<SharedProgressBarProps>({\n    id: '',\n    density: 'default',\n    variant: 'neutral',\n  });\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAWX,MAAM,gCACX,MAAM,cAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "names": []
+}

package/esm/content/progress/hooks/useProgressAriaProps.js

@@ -0,0 +1,45 @@
+import { clamp } from "lodash-es";
+import { format, units } from "@dynatrace-sdk/units";
+function useProgressAriaProps(originalValue, min, max, valueText) {
+  let value;
+  let isIndeterminate;
+  if (originalValue === "indeterminate" || originalValue === void 0) {
+    value = void 0;
+    isIndeterminate = true;
+  } else {
+    value = originalValue;
+    isIndeterminate = false;
+  }
+  if (!isIndeterminate) {
+    value = clamp(originalValue, min, max);
+  }
+  if (!isIndeterminate && value !== void 0 && !valueText) {
+    valueText = format(value, { input: units.percentage.percent });
+  }
+  const progressAriaProps = {
+    // aria-valuenow should only be provided and updated if the value is not indeterminate https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuenow": isIndeterminate ? void 0 : value,
+    "aria-valuetext": isIndeterminate ? void 0 : valueText,
+    // aria-valuemin should only be provided if min is not 0 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuemin": min !== 0 ? min : void 0,
+    // aria-valuemax should only be provided if min is not 100 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuemax": max !== 100 ? max : void 0,
+    role: "progressbar"
+  };
+  if (isIndeterminate === true && value === void 0) {
+    return {
+      value: void 0,
+      isIndeterminate: true,
+      progressAriaProps
+    };
+  }
+  return {
+    value,
+    isIndeterminate: false,
+    progressAriaProps
+  };
+}
+export {
+  useProgressAriaProps
+};
+//# sourceMappingURL=useProgressAriaProps.js.map

package/esm/content/progress/hooks/useProgressAriaProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/progress/hooks/useProgressAriaProps.ts"],
+  "sourcesContent": ["import { clamp } from 'lodash-es';\n\nimport { format, units } from '@dynatrace-sdk/units';\n\ninterface ProgressAriaValueReturnProps {\n  /**\n   * The properly clamped progress value or undefined if progress is indeterminate.\n   */\n  value: number;\n  /**\n   * indicates if the progress is indeterminate or has a value.\n   */\n  isIndeterminate: false;\n}\ninterface ProgressAriaIndeterminateReturnProps {\n  /**\n   * The properly clamped progress value or undefined if progress is indeterminate.\n   */\n  value: undefined;\n  /**\n   * indicates if the progress is indeterminate or has a value.\n   */\n  isIndeterminate: true;\n}\n\ntype ProgressAriaReturnProps = (\n  | ProgressAriaValueReturnProps\n  | ProgressAriaIndeterminateReturnProps\n) & {\n  /**\n   * Aria props for a ProgressBar element that is not a native <progress /> element.\n   */\n  progressAriaProps: {\n    'aria-valuenow'?: number;\n    'aria-valuetext'?: string;\n    'aria-valuemin'?: number;\n    'aria-valuemax'?: number;\n    role: string;\n  };\n};\n\n/**\n * Returns aria-props for a progress as well as the properly clamped value property.\n * @internal\n */\nexport function useProgressAriaProps(\n  originalValue: undefined | number | 'indeterminate',\n  min: number,\n  max: number,\n  valueText?: string,\n): ProgressAriaReturnProps {\n  let value: number | undefined;\n  let isIndeterminate: boolean;\n\n  if (originalValue === 'indeterminate' || originalValue === undefined) {\n    value = undefined;\n    isIndeterminate = true;\n  } else {\n    value = originalValue;\n    isIndeterminate = false;\n  }\n\n  if (!isIndeterminate) {\n    value = clamp(originalValue as number, min, max);\n  }\n\n  if (!isIndeterminate && value !== undefined && !valueText) {\n    valueText = format(value, { input: units.percentage.percent });\n  }\n\n  const progressAriaProps = {\n    // aria-valuenow should only be provided and updated if the value is not indeterminate https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)\n    'aria-valuenow': isIndeterminate ? undefined : value,\n    'aria-valuetext': isIndeterminate ? undefined : valueText,\n    // aria-valuemin should only be provided if min is not 0 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)\n    'aria-valuemin': min !== 0 ? min : undefined,\n    // aria-valuemax should only be provided if min is not 100 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)\n    'aria-valuemax': max !== 100 ? max : undefined,\n    role: 'progressbar',\n  };\n\n  if (isIndeterminate === true && value === undefined) {\n    return {\n      value: undefined,\n      isIndeterminate: true,\n      progressAriaProps,\n    };\n  }\n\n  return {\n    value: value as number,\n    isIndeterminate: false,\n    progressAriaProps,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,QAAQ,aAAa;AA2CvB,SAAS,qBACd,eACA,KACA,KACA,WACyB;AACzB,MAAI;AACJ,MAAI;AAEJ,MAAI,kBAAkB,mBAAmB,kBAAkB,QAAW;AACpE,YAAQ;AACR,sBAAkB;AAAA,EACpB,OAAO;AACL,YAAQ;AACR,sBAAkB;AAAA,EACpB;AAEA,MAAI,CAAC,iBAAiB;AACpB,YAAQ,MAAM,eAAyB,KAAK,GAAG;AAAA,EACjD;AAEA,MAAI,CAAC,mBAAmB,UAAU,UAAa,CAAC,WAAW;AACzD,gBAAY,OAAO,OAAO,EAAE,OAAO,MAAM,WAAW,QAAQ,CAAC;AAAA,EAC/D;AAEA,QAAM,oBAAoB;AAAA;AAAA,IAExB,iBAAiB,kBAAkB,SAAY;AAAA,IAC/C,kBAAkB,kBAAkB,SAAY;AAAA;AAAA,IAEhD,iBAAiB,QAAQ,IAAI,MAAM;AAAA;AAAA,IAEnC,iBAAiB,QAAQ,MAAM,MAAM;AAAA,IACrC,MAAM;AAAA,EACR;AAEA,MAAI,oBAAoB,QAAQ,UAAU,QAAW;AACnD,WAAO;AAAA,MACL,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/content/progress/hooks/useProgressBarPropsContext.js

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import {
+  SharedProgressBarPropsContext
+} from "../contexts/SharedProgressBarPropsContext.js";
+function _useSharedProgressBarPropsContext() {
+  const context = useContext(SharedProgressBarPropsContext);
+  return {
+    id: context.id,
+    variant: context.variant,
+    density: context.density
+  };
+}
+export {
+  _useSharedProgressBarPropsContext
+};
+//# sourceMappingURL=useProgressBarPropsContext.js.map

package/esm/content/progress/hooks/useProgressBarPropsContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/content/progress/hooks/useProgressBarPropsContext.ts"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport {\n  SharedProgressBarProps,\n  SharedProgressBarPropsContext,\n} from '../contexts/SharedProgressBarPropsContext.js';\n\nexport function _useSharedProgressBarPropsContext(): SharedProgressBarProps {\n  const context = useContext(SharedProgressBarPropsContext);\n\n  return {\n    id: context.id,\n    variant: context.variant,\n    density: context.density,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,OACK;AAEA,SAAS,oCAA4D;AAC1E,QAAM,UAAU,WAAW,6BAA6B;AAExD,SAAO;AAAA,IACL,IAAI,QAAQ;AAAA,IACZ,SAAS,QAAQ;AAAA,IACjB,SAAS,QAAQ;AAAA,EACnB;AACF;",
+  "names": []
+}

package/esm/content/progress/utils.js

@@ -0,0 +1,22 @@
+import Colors from "@dynatrace/strato-design-tokens/colors";
+function getFillColorFromVariant($variant) {
+  switch ($variant) {
+    case "onAccent":
+      return Colors.Border.OnAccent.Default;
+    case "primary":
+      return Colors.Border.Primary.Accent;
+    case "success":
+      return Colors.Border.Success.Accent;
+    case "warning":
+      return Colors.Border.Warning.Accent;
+    case "critical":
+      return Colors.Border.Critical.Accent;
+    case "neutral":
+    default:
+      return Colors.Border.Neutral.Accent;
+  }
+}
+export {
+  getFillColorFromVariant
+};
+//# sourceMappingURL=utils.js.map

package/esm/content/progress/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/content/progress/utils.ts"],
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { RoleVariantType } from '../../core/types/role-variant.js';\n\nexport function getFillColorFromVariant($variant: RoleVariantType) {\n  switch ($variant) {\n    case 'onAccent':\n      return Colors.Border.OnAccent.Default;\n    case 'primary':\n      return Colors.Border.Primary.Accent;\n    case 'success':\n      return Colors.Border.Success.Accent;\n    case 'warning':\n      return Colors.Border.Warning.Accent;\n    case 'critical':\n      return Colors.Border.Critical.Accent;\n    case 'neutral':\n    default:\n      return Colors.Border.Neutral.Accent;\n  }\n}\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAIZ,SAAS,wBAAwB,UAA2B;AACjE,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,OAAO,OAAO,SAAS;AAAA,IAChC,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,SAAS;AAAA,IAChC,KAAK;AAAA,IACL;AACE,aAAO,OAAO,OAAO,QAAQ;AAAA,EACjC;AACF;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * @public\n * AppRoot component props.\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * @public\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // As we should not use @import within the createGlobalStyles\n      // https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle\n      // and we need to inject the fonts at run time to decouple font usage\n      // from the cli build / deployment\n      // we will inject the link tag here in the root on initial load.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // As we should not use @import within the createGlobalStyles\n      // https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle\n      // and we need to inject the fonts at run time to decouple font usage\n      // from the cli build / deployment\n      // we will inject the link tag here in the root on initial load.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
   "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAMpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
   "names": []
 }

package/esm/core/hooks/useAriaLabelingProps.js

@@ -0,0 +1,12 @@
+function useAriaLabelingProps(props) {
+  return {
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-describedby": props["aria-describedby"],
+    "aria-details": props["aria-details"]
+  };
+}
+export {
+  useAriaLabelingProps
+};
+//# sourceMappingURL=useAriaLabelingProps.js.map

package/esm/core/hooks/useAriaLabelingProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useAriaLabelingProps.ts"],
+  "sourcesContent": ["import { AriaLabelingProps } from '../types/a11y-props.js';\n\n/**\n * Utility function to extract aria-labeling props from component props to easily spread them to the desired child.\n * @internal\n */\nexport function useAriaLabelingProps<T extends object>(\n  props: AriaLabelingProps & T,\n): AriaLabelingProps {\n  return {\n    'aria-label': props['aria-label'],\n    'aria-labelledby': props['aria-labelledby'],\n    'aria-describedby': props['aria-describedby'],\n    'aria-details': props['aria-details'],\n  };\n}\n"],
+  "mappings": "AAMO,SAAS,qBACd,OACmB;AACnB,SAAO;AAAA,IACL,cAAc,MAAM,YAAY;AAAA,IAChC,mBAAmB,MAAM,iBAAiB;AAAA,IAC1C,oBAAoB,MAAM,kBAAkB;AAAA,IAC5C,gBAAgB,MAAM,cAAc;AAAA,EACtC;AACF;",
+  "names": []
+}

package/esm/core/hooks/useCurrentTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/hooks/useCurrentTheme.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/**\n * @public\n * Returns the current theme based on sdk-setting or browsers preferred color-scheme\n */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
+  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/**\n * Returns the current theme based on sdk-setting or browsers preferred color-scheme.\n * @public\n */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
   "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAMnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
   "names": []
 }

package/esm/core/hooks/useFontsUpdated.js

@@ -0,0 +1,33 @@
+import { isEqual } from "lodash-es";
+import { useRef, useState } from "react";
+function _useFontsUpdated(callback) {
+  const [fontsUpdated, setFontsUpdated] = useState(false);
+  const prevFontFamilies = useRef();
+  const fontFamilies = [];
+  const firstRender = useRef(true);
+  if (document.fonts) {
+    if (firstRender.current) {
+      const loadedFontFamilies = [];
+      document.fonts.forEach(
+        (fontFace) => loadedFontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      prevFontFamilies.current = loadedFontFamilies;
+      firstRender.current = false;
+    }
+    document.fonts.ready.then((fontFaceSet) => {
+      fontFaceSet.forEach(
+        (fontFace) => fontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      if (!isEqual(prevFontFamilies.current, fontFamilies)) {
+        prevFontFamilies.current = fontFamilies;
+        callback?.();
+        setFontsUpdated(true);
+      }
+    });
+  }
+  return fontsUpdated;
+}
+export {
+  _useFontsUpdated
+};
+//# sourceMappingURL=useFontsUpdated.js.map

package/esm/core/hooks/useFontsUpdated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useFontsUpdated.ts"],
+  "sourcesContent": ["import { isEqual } from 'lodash-es';\nimport { useRef, useState } from 'react';\n\n/**\n * Hook that checks if the initially loaded fonts were updated.\n * Used to trigger remeasuring in the DataTable (autoWidth) and TextEllipsis once all fonts are loaded.\n *\n * @param callback - optionally pass a function to be executed once when the fonts were updated\n * @returns boolean whether the fonts have changed\n * @internal\n */\nexport function _useFontsUpdated(callback?: () => void): boolean {\n  const [fontsUpdated, setFontsUpdated] = useState(false);\n  const prevFontFamilies = useRef<string[]>();\n  const fontFamilies: string[] = [];\n  const firstRender = useRef(true);\n\n  if (document.fonts) {\n    // gather the font families that are already loaded\n    if (firstRender.current) {\n      const loadedFontFamilies: string[] = [];\n      document.fonts.forEach((fontFace: FontFace) =>\n        loadedFontFamilies.push(`${fontFace.family} ${fontFace.weight}`),\n      );\n      prevFontFamilies.current = loadedFontFamilies;\n      firstRender.current = false;\n    }\n\n    document.fonts.ready.then((fontFaceSet: FontFaceSet) => {\n      fontFaceSet.forEach((fontFace: FontFace) =>\n        fontFamilies.push(`${fontFace.family} ${fontFace.weight}`),\n      );\n\n      if (!isEqual(prevFontFamilies.current, fontFamilies)) {\n        prevFontFamilies.current = fontFamilies;\n        callback?.();\n        setFontsUpdated(true);\n      }\n    });\n  }\n\n  return fontsUpdated;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,QAAQ,gBAAgB;AAU1B,SAAS,iBAAiB,UAAgC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,mBAAmB,OAAiB;AAC1C,QAAM,eAAyB,CAAC;AAChC,QAAM,cAAc,OAAO,IAAI;AAE/B,MAAI,SAAS,OAAO;AAElB,QAAI,YAAY,SAAS;AACvB,YAAM,qBAA+B,CAAC;AACtC,eAAS,MAAM;AAAA,QAAQ,CAAC,aACtB,mBAAmB,KAAK,GAAG,SAAS,MAAM,IAAI,SAAS,MAAM,EAAE;AAAA,MACjE;AACA,uBAAiB,UAAU;AAC3B,kBAAY,UAAU;AAAA,IACxB;AAEA,aAAS,MAAM,MAAM,KAAK,CAAC,gBAA6B;AACtD,kBAAY;AAAA,QAAQ,CAAC,aACnB,aAAa,KAAK,GAAG,SAAS,MAAM,IAAI,SAAS,MAAM,EAAE;AAAA,MAC3D;AAEA,UAAI,CAAC,QAAQ,iBAAiB,SAAS,YAAY,GAAG;AACpD,yBAAiB,UAAU;AAC3B,mBAAW;AACX,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/core/hooks/useId.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { uuidv4 } from "../utils/uuidv4.js";
+const useId = (props = {}) => {
+  const { prefix = "strato", seed } = props;
+  const generatedId = useMemo(
+    () => `${prefix}-${uuidv4(seed)}`,
+    [prefix, seed]
+  );
+  return generatedId;
+};
+export {
+  useId
+};
+//# sourceMappingURL=useId.js.map

package/esm/core/hooks/useId.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useId.ts"],
+  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { uuidv4 } from '../utils/uuidv4.js';\n\n/**\n * Hook used to generate a unique identifier.\n * @internal\n */\nexport const useId = (\n  props: {\n    /** If a prefix is defined, the hook prepends the prefix with a hyphen to the generated id.\n     * @defaultValue 'strato'\n     */\n    prefix?: string;\n    /** If a seed is defined, the hook uses a seeded random function to generate the id consistently. */\n    seed?: number;\n  } = {},\n) => {\n  const { prefix = 'strato', seed } = props;\n\n  const generatedId = useMemo(\n    () => `${prefix}-${uuidv4(seed)}`,\n    [prefix, seed],\n  );\n\n  return generatedId;\n};\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,cAAc;AAMhB,MAAM,QAAQ,CACnB,QAOI,CAAC,MACF;AACH,QAAM,EAAE,SAAS,UAAU,KAAK,IAAI;AAEpC,QAAM,cAAc;AAAA,IAClB,MAAM,GAAG,MAAM,IAAI,OAAO,IAAI,CAAC;AAAA,IAC/B,CAAC,QAAQ,IAAI;AAAA,EACf;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/core/hooks/useMergeRefs.js

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+function useMergeRefs(refs) {
+  return useCallback((value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== void 0 && ref !== null) {
+        ref.current = value;
+      }
+    }
+  }, refs);
+}
+export {
+  useMergeRefs
+};
+//# sourceMappingURL=useMergeRefs.js.map

package/esm/core/hooks/useMergeRefs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useMergeRefs.ts"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\n\n/**\n * If you have multiple references (e.g. from different hooks) you need to apply to\n * the same element, you can use the `useMergeRefs` hook to combine them into one\n * reference.\n */\nexport function useMergeRefs<T = unknown>(\n  refs: Array<\n    | React.MutableRefObject<T>\n    | React.LegacyRef<T>\n    | React.Dispatch<React.SetStateAction<T | null>>\n    | undefined\n  >,\n): React.RefCallback<T> {\n  return useCallback((value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref !== undefined && ref !== null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    }\n  }, refs); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],
+  "mappings": "AAAA,SAAgB,mBAAmB;AAO5B,SAAS,aACd,MAMsB;AACtB,SAAO,YAAY,CAAC,UAAU;AAC5B,eAAW,OAAO,MAAM;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,QAAQ,UAAa,QAAQ,MAAM;AAC5C,QAAC,IAAyC,UAAU;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,IAAI;AACT;",
+  "names": []
+}

package/esm/core/hooks/useSafeForwardProps.js

@@ -0,0 +1,16 @@
+function useSafeForwardProps(props, excludedProps) {
+  const ignoreStyles = ["className", "classNames", "style"];
+  const ignoreList = excludedProps ? [...ignoreStyles, ...Object.keys(excludedProps)] : ignoreStyles;
+  const safeForwardProps = {};
+  for (const [name, prop] of Object.entries(props)) {
+    if (!ignoreList.includes(name)) {
+      const localName = name;
+      safeForwardProps[localName] = prop;
+    }
+  }
+  return safeForwardProps;
+}
+export {
+  useSafeForwardProps
+};
+//# sourceMappingURL=useSafeForwardProps.js.map

package/esm/core/hooks/useSafeForwardProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useSafeForwardProps.ts"],
+  "sourcesContent": ["/**\n * The Filtered Props from 'useSafeForwardProps'\n * @internal\n */\nexport type UseSafeForwardReturnProps<T, P> = Omit<\n  T,\n  keyof P | 'className' | 'classNames' | 'style'\n>;\n\n/**\n * Filters props out of a prop list. Per default className, classNames & style are filtered.\n * @internal\n */\nexport function useSafeForwardProps<T extends object, P extends object>(\n  props: T,\n  excludedProps?: P,\n): UseSafeForwardReturnProps<T, P> {\n  const ignoreStyles = ['className', 'classNames', 'style'];\n  const ignoreList = excludedProps\n    ? [...ignoreStyles, ...Object.keys(excludedProps)]\n    : ignoreStyles;\n\n  const safeForwardProps = {} as UseSafeForwardReturnProps<T, P>;\n  for (const [name, prop] of Object.entries(props)) {\n    if (!ignoreList.includes(name)) {\n      const localName = name as keyof typeof safeForwardProps;\n      safeForwardProps[localName] = prop;\n    }\n  }\n\n  return safeForwardProps;\n}\n"],
+  "mappings": "AAaO,SAAS,oBACd,OACA,eACiC;AACjC,QAAM,eAAe,CAAC,aAAa,cAAc,OAAO;AACxD,QAAM,aAAa,gBACf,CAAC,GAAG,cAAc,GAAG,OAAO,KAAK,aAAa,CAAC,IAC/C;AAEJ,QAAM,mBAAmB,CAAC;AAC1B,aAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,QAAI,CAAC,WAAW,SAAS,IAAI,GAAG;AAC9B,YAAM,YAAY;AAClB,uBAAiB,SAAS,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}