@dynatrace/strato-components 1.13.0 → 1.15.0

package/content/progress/ProgressCircle.css

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

package/content/progress/ProgressCircle.js

@@ -170,7 +170,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
             "label",
             {
               className: (0, import_clsx.default)(
-                (0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
+                (0, import_textStyle_css.textStyle)({ 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-13-0";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-13-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-13-0", false: "_kvldjh8-1-13-0" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-13-0", variantClassNames: { size: { small: "_kvldjhb-1-13-0", large: "_kvldjhc-1-13-0" }, color: { critical: "_kvldjhd-1-13-0", neutral: "_kvldjhe-1-13-0", primary: "_kvldjhf-1-13-0", success: "_kvldjhg-1-13-0", warning: "_kvldjhh-1-13-0" }, variant: { "default": "_kvldjhi-1-13-0", accent: "_kvldjhj-1-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-13-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-13-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-13-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-13-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-13-0"]] });
-var progressCircleRootCSS = "_kvldjh4-1-13-0";
-var progressCircleSvgCss = "_kvldjh5-1-13-0";
+var progressCircleBackgroundCSS = "_kvldjh9-1-15-0";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-15-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-15-0", false: "_kvldjh8-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-15-0", variantClassNames: { size: { small: "_kvldjhb-1-15-0", large: "_kvldjhc-1-15-0" }, color: { critical: "_kvldjhd-1-15-0", neutral: "_kvldjhe-1-15-0", primary: "_kvldjhf-1-15-0", success: "_kvldjhg-1-15-0", warning: "_kvldjhh-1-15-0" }, variant: { "default": "_kvldjhi-1-15-0", accent: "_kvldjhj-1-15-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-15-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-15-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-15-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-15-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-15-0"]] });
+var progressCircleRootCSS = "_kvldjh4-1-15-0";
+var progressCircleSvgCss = "_kvldjh5-1-15-0";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-1-13-0 {
+._1a1ozfd0-1-15-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-1-13-0 {
+._1a1ozfd1-1-15-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-1-13-0 {
+._1a1ozfd2-1-15-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-1-13-0 {
+._1a1ozfd3-1-15-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-1-13-0 stop {
+._1a1ozfd4-1-15-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-1-13-0 {
+._1a1ozfd5-1-15-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-1-13-0 {
+  ._1a1ozfd6-1-15-0 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.sty.js

@@ -27,8 +27,8 @@ __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: "_1a1ozfd0-1-13-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-13-0", rounded: "_1a1ozfd2-1-13-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-13-0";
-var skeletonSvgCSS = "_1a1ozfd3-1-13-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-1-13-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-13-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-15-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-15-0", rounded: "_1a1ozfd2-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-15-0";
+var skeletonSvgCSS = "_1a1ozfd3-1-15-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-1-15-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-15-0";

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

@@ -8,7 +8,13 @@ import { type StylingProps } from '../../types/styling-props.js';
  * AppRoot component props.
  * @public
  */
-export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & MaskingProps>;
+export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & MaskingProps> & {
+    /**
+     * The path to the folder of translations. Needs to always end with a `/` value and contain language files like en.json + ja.json.
+     * The default path depends on your host domain and looks something like 'https://example.com/ui/lang/'.
+     */
+    translationRootPath?: string;
+};
 /**
  * In order to have all the providers in place for rendering overlays, applying
  * global styles or internationalization, you need to wrap your app in the
@@ -19,4 +25,10 @@ export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & Masking
  */
 export declare const AppRoot: (props: DataTestId & StylingProps & MaskingProps & {
     children?: import("react").ReactNode | undefined;
+} & {
+    /**
+     * The path to the folder of translations. Needs to always end with a `/` value and contain language files like en.json + ja.json.
+     * The default path depends on your host domain and looks something like 'https://example.com/ui/lang/'.
+     */
+    translationRootPath?: string;
 } & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -43,7 +43,8 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
       className: consumerClassName,
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow
+      "data-dtrum-allow": dataDtrumAllow,
+      translationRootPath = `${getBaseHref()}lang/`
     } = props;
     const [messages, setMessages] = (0, import_react.useState)({});
     const { children } = props;
@@ -64,7 +65,7 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
       if (language === "en") {
         return;
       }
-      fetch(`${getBaseHref()}lang/${language}.json`).then((res) => {
+      fetch(`${translationRootPath}${language}.json`).then((res) => {
         return res.json();
       }).then((receivedMessages) => {
         setMessages(receivedMessages);

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-1-13-0 {
+._z2r50s3-1-15-0 {
   outline: none;
 }
-._z2r50s3-1-13-0:focus-visible {
+._z2r50s3-1-15-0:focus-visible {
   outline: none;
 }
-._z2r50s4-1-13-0 {
+._z2r50s4-1-15-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-13-0);
-  background-color: var(--_z2r50s2-1-13-0);
-}
-._z2r50s5-1-13-0._z2r50s5-1-13-0 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-13-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-13-0);
-}
-._z2r50s6-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-1-13-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-15-0);
+  background-color: var(--_z2r50s2-1-15-0);
+}
+._z2r50s5-1-15-0._z2r50s5-1-15-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-15-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-15-0);
+}
+._z2r50s6-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-1-15-0:focus-within {
   outline: none;
 }
-._z2r50sc-1-13-0:focus-within {
+._z2r50sc-1-15-0:focus-within {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-13-0);
-  background-color: var(--_z2r50s2-1-13-0);
-}
-._z2r50sd-1-13-0:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-13-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-13-0);
-}
-._z2r50se-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-1-13-0 {
-  --_z2r50s0-1-13-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-13-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-15-0);
+  background-color: var(--_z2r50s2-1-15-0);
+}
+._z2r50sd-1-15-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-15-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-15-0);
+}
+._z2r50se-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-1-15-0 {
+  --_z2r50s0-1-15-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-15-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-15-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/core/styles/focusRing.sty.js

@@ -24,5 +24,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-13-0", variantClassNames: { minimal: { true: "_z2r50s4-1-13-0", false: "_z2r50s5-1-13-0" }, variant: { neutral: "_z2r50s6-1-13-0", primary: "_z2r50s7-1-13-0", success: "_z2r50s8-1-13-0", warning: "_z2r50s9-1-13-0", critical: "_z2r50sa-1-13-0" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-13-0", variantClassNames: { minimal: { true: "_z2r50sc-1-13-0", false: "_z2r50sd-1-13-0" }, variant: { neutral: "_z2r50se-1-13-0", primary: "_z2r50sf-1-13-0", success: "_z2r50sg-1-13-0", warning: "_z2r50sh-1-13-0", critical: "_z2r50si-1-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-15-0", variantClassNames: { minimal: { true: "_z2r50s4-1-15-0", false: "_z2r50s5-1-15-0" }, variant: { neutral: "_z2r50s6-1-15-0", primary: "_z2r50s7-1-15-0", success: "_z2r50s8-1-15-0", warning: "_z2r50s9-1-15-0", critical: "_z2r50sa-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-15-0", variantClassNames: { minimal: { true: "_z2r50sc-1-15-0", false: "_z2r50sd-1-15-0" }, variant: { neutral: "_z2r50se-1-15-0", primary: "_z2r50sf-1-15-0", success: "_z2r50sg-1-15-0", warning: "_z2r50sh-1-15-0", critical: "_z2r50si-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });

package/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-1-13-0: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-1-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-1-15-0: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-1-15-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-1-13-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-1-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-1-15-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-1-13-0: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-1-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-1-15-0: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-1-15-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-1-13-0: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-1-13-0: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-1-15-0: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-1-15-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-1-13-0: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-1-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-1-15-0: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-1-15-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-1-13-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-1-13-0: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-1-15-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-1-15-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-1-13-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-1-13-0: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-1-15-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-1-15-0: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-1-13-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-1-13-0: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-1-15-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-1-15-0: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-1-13-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-1-13-0: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-1-15-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-1-15-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-1-13-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-1-13-0: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-1-15-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-1-15-0: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-1-13-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-1-13-0: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-1-15-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-1-15-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-1-13-0: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-1-13-0: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-1-15-0: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-1-15-0: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-1-13-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-1-13-0: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-1-15-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-1-15-0: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-1-13-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-1-13-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-1-15-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-1-15-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-1-13-0 {
-  --_k096v40-1-13-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-1-13-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-1-13-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-1-15-0 {
+  --_k096v40-1-15-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-1-15-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-1-15-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/core/utils/colorUtils.sty.js

@@ -24,5 +24,5 @@ __export(colorUtils_css_exports, {
 module.exports = __toCommonJS(colorUtils_css_exports);
 var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-13-0", variantClassNames: { color: { critical: "_k096v44-1-13-0", neutral: "_k096v45-1-13-0", primary: "_k096v46-1-13-0", success: "_k096v47-1-13-0", warning: "_k096v48-1-13-0" }, variant: { "default": "_k096v49-1-13-0", accent: "_k096v4a-1-13-0" }, disabled: { true: "_k096v4b-1-13-0", false: "_k096v4c-1-13-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-13-0"], [{ color: "success", variant: "accent" }, "_k096v4e-1-13-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-13-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-13-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-13-0"], [{ color: "primary", disabled: true }, "_k096v4i-1-13-0"], [{ color: "success", disabled: true }, "_k096v4j-1-13-0"], [{ color: "warning", disabled: true }, "_k096v4k-1-13-0"], [{ color: "critical", disabled: true }, "_k096v4l-1-13-0"], [{ color: "neutral", disabled: true }, "_k096v4m-1-13-0"]] });
-var colorUtilsVars = { text: "var(--_k096v40-1-13-0)", icon: "var(--_k096v41-1-13-0)", borderColor: "var(--_k096v42-1-13-0)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-15-0", variantClassNames: { color: { critical: "_k096v44-1-15-0", neutral: "_k096v45-1-15-0", primary: "_k096v46-1-15-0", success: "_k096v47-1-15-0", warning: "_k096v48-1-15-0" }, variant: { "default": "_k096v49-1-15-0", accent: "_k096v4a-1-15-0" }, disabled: { true: "_k096v4b-1-15-0", false: "_k096v4c-1-15-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-15-0"], [{ color: "success", variant: "accent" }, "_k096v4e-1-15-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-15-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-15-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-15-0"], [{ color: "primary", disabled: true }, "_k096v4i-1-15-0"], [{ color: "success", disabled: true }, "_k096v4j-1-15-0"], [{ color: "warning", disabled: true }, "_k096v4k-1-15-0"], [{ color: "critical", disabled: true }, "_k096v4l-1-15-0"], [{ color: "neutral", disabled: true }, "_k096v4m-1-15-0"]] });
+var colorUtilsVars = { text: "var(--_k096v40-1-15-0)", icon: "var(--_k096v41-1-15-0)", borderColor: "var(--_k096v42-1-15-0)" };

package/core/utils/is-node-environment.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns a boolean depending on whether we are in developer mode
+ * @internal
+ */
+export declare function isDev(): boolean;
+/**
+ * Returns a boolean depending on whether we are in production mode
+ * @internal
+ */
+export declare function isProduction(): boolean;
+/**
+ * Returns a boolean depending on whether we are in testing mode
+ * @internal
+ */
+export declare function isTest(): boolean;

package/core/utils/is-node-environment.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var is_node_environment_exports = {};
+__export(is_node_environment_exports, {
+  isDev: () => isDev,
+  isProduction: () => isProduction,
+  isTest: () => isTest
+});
+module.exports = __toCommonJS(is_node_environment_exports);
+function isDev() {
+  return true;
+}
+function isProduction() {
+  return false;
+}
+function isTest() {
+  return false;
+}

package/core/utils/logging.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Logs the given message as a warning, if we are in developer mode.
+ * Does nothing otherwise.
+ *
+ * @param log - main part of the log message.
+ * @param details - passed as second parameter to the console warn.
+ */
+export declare function devLog(log: string, details?: unknown): void;