@dynatrace/strato-components 3.1.3 → 3.2.1

package/core/components/visually-hidden/VisuallyHidden.d.ts

@@ -10,4 +10,4 @@ export type VisuallyHiddenProps = WithChildren & DataTestId & StylingProps;
  * Element with styles that visually hides the contents.
  * @internal
  */
-export declare const VisuallyHidden: (props: WithChildren & DataTestId & StylingProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const VisuallyHidden: (props: WithChildren & DataTestId & StylingProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/core/components/visually-hidden/VisuallyHidden.sty.js

@@ -22,4 +22,4 @@ __export(VisuallyHidden_css_exports, {
 });
 module.exports = __toCommonJS(VisuallyHidden_css_exports);
 var import_VisuallyHidden_css_ts_vanilla = require("./VisuallyHidden.css");
-var visuallyHidden = "_1xz8nhz0-3-1-3";
+var visuallyHidden = "_1xz8nhz0-3-2-1";

package/core/hooks/intent.d.ts

@@ -7,8 +7,6 @@ export interface IntentParams {
     options?: SendIntentOptions<IntentPayload>;
 }
 interface UseIntentBaseReturn {
-    /** A static intent link, generated with `getIntentLink()` */
-    link: string;
     iconURL: string | null;
 }
 /**

package/core/hooks/intent.js

@@ -31,7 +31,6 @@ function getAppIconURL(appId) {
   return `/platform/app-engine/registry/v1/app-icons/${appId}`;
 }
 function useIntent({ payload, options }) {
-  const link = (0, import_navigation.getIntentLink)(payload);
   let iconURL = null;
   if (options?.recommendedAppId) {
     iconURL = getAppIconURL(options.recommendedAppId);
@@ -42,7 +41,7 @@ function useIntent({ payload, options }) {
     }
     return (0, import_navigation.sendIntent)(payload, options);
   }
-  return { send, link, iconURL };
+  return { send, iconURL };
 }
 function reducer(_, action) {
   switch (action.type) {
@@ -60,7 +59,6 @@ function useIntentWithResponse({
   payload,
   options
 }) {
-  const link = (0, import_navigation.getIntentLink)(payload);
   const iconURL = getAppIconURL(options.recommendedAppId);
   const [state, dispatch] = (0, import_react.useReducer)(reducer, {
     status: "idle"
@@ -97,5 +95,5 @@ function useIntentWithResponse({
       };
     }
   }
-  return { send, state, link, iconURL };
+  return { send, state, iconURL };
 }

package/core/sdk/sdk-logger.js

@@ -41,7 +41,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.1.3"
+          version: "3.2.1"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -49,7 +49,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.1.3"
+          version: "3.2.1"
         }
       });
     }

package/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-1-3 {
+._1rtjj3o0-3-2-1 {
   line-height: normal;
   width: inherit;
 }

package/core/styles/defaultChartValues.sty.js

@@ -22,4 +22,4 @@ __export(defaultChartValues_css_exports, {
 });
 module.exports = __toCommonJS(defaultChartValues_css_exports);
 var import_defaultChartValues_css_ts_vanilla = require("./defaultChartValues.css");
-var defaultChartSize = "_1rtjj3o0-3-1-3";
+var defaultChartSize = "_1rtjj3o0-3-2-1";

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-3-1-3 {
+._z2r50s3-3-2-1 {
   outline: none;
 }
-._z2r50s3-3-1-3:focus-visible {
+._z2r50s3-3-2-1:focus-visible {
   outline: none;
 }
-._z2r50s4-3-1-3 {
+._z2r50s4-3-2-1 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-1-3);
-  background-color: var(--_z2r50s2-3-1-3);
-}
-._z2r50s5-3-1-3._z2r50s5-3-1-3 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-1-3), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-1-3);
-}
-._z2r50s6-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-3-1-3:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-2-1);
+  background-color: var(--_z2r50s2-3-2-1);
+}
+._z2r50s5-3-2-1._z2r50s5-3-2-1 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-2-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-2-1);
+}
+._z2r50s6-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-3-2-1:focus-within {
   outline: none;
 }
-._z2r50sc-3-1-3:focus-within {
+._z2r50sc-3-2-1: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-3-1-3);
-  background-color: var(--_z2r50s2-3-1-3);
-}
-._z2r50sd-3-1-3:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-1-3), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-1-3);
-}
-._z2r50se-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-3-1-3 {
-  --_z2r50s0-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-1-3: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-1-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-2-1);
+  background-color: var(--_z2r50s2-3-2-1);
+}
+._z2r50sd-3-2-1:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-2-1), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-2-1);
+}
+._z2r50se-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-2-1: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-3-2-1 {
+  --_z2r50s0-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-2-1: 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-3-1-3", variantClassNames: { minimal: { true: "_z2r50s4-3-1-3", false: "_z2r50s5-3-1-3" }, color: { neutral: "_z2r50s6-3-1-3", primary: "_z2r50s7-3-1-3", success: "_z2r50s8-3-1-3", warning: "_z2r50s9-3-1-3", critical: "_z2r50sa-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-3-1-3", variantClassNames: { minimal: { true: "_z2r50sc-3-1-3", false: "_z2r50sd-3-1-3" }, color: { neutral: "_z2r50se-3-1-3", primary: "_z2r50sf-3-1-3", success: "_z2r50sg-3-1-3", warning: "_z2r50sh-3-1-3", critical: "_z2r50si-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-3-2-1", variantClassNames: { minimal: { true: "_z2r50s4-3-2-1", false: "_z2r50s5-3-2-1" }, color: { neutral: "_z2r50s6-3-2-1", primary: "_z2r50s7-3-2-1", success: "_z2r50s8-3-2-1", warning: "_z2r50s9-3-2-1", critical: "_z2r50sa-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-3-2-1", variantClassNames: { minimal: { true: "_z2r50sc-3-2-1", false: "_z2r50sd-3-2-1" }, color: { neutral: "_z2r50se-3-2-1", primary: "_z2r50sf-3-2-1", success: "_z2r50sg-3-2-1", warning: "_z2r50sh-3-2-1", critical: "_z2r50si-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/focusRingStatic.css

@@ -1,47 +1,47 @@
-._z0fq9b4-3-1-3 {
+._z0fq9b4-3-2-1 {
   outline: none;
   box-shadow: none;
 }
-._z0fq9b5-3-1-3 {
-  --_z0fq9b3-3-1-3: var(--dt-borders-width-default, 1px);
-  --_z0fq9b2-3-1-3: 0 0 0 var(--_z0fq9b3-3-1-3) var(--_z0fq9b0-3-1-3) inset;
+._z0fq9b5-3-2-1 {
+  --_z0fq9b3-3-2-1: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-3-2-1: 0 0 0 var(--_z0fq9b3-3-2-1) var(--_z0fq9b0-3-2-1) inset;
 }
-._z0fq9b6-3-1-3 {
-  --_z0fq9b3-3-1-3: var(--dt-borders-width-emphasized, 2px);
-  --_z0fq9b2-3-1-3: 0 0 0 var(--_z0fq9b3-3-1-3) var(--_z0fq9b0-3-1-3) inset, 0 0 0 calc(var(--_z0fq9b3-3-1-3) + 1px) var(--_z0fq9b1-3-1-3) inset;
+._z0fq9b6-3-2-1 {
+  --_z0fq9b3-3-2-1: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-3-2-1: 0 0 0 var(--_z0fq9b3-3-2-1) var(--_z0fq9b0-3-2-1) inset, 0 0 0 calc(var(--_z0fq9b3-3-2-1) + 1px) var(--_z0fq9b1-3-2-1) inset;
 }
-._z0fq9b7-3-1-3 {
-  --_z0fq9b2-3-1-3: none;
+._z0fq9b7-3-2-1 {
+  --_z0fq9b2-3-2-1: none;
 }
-._z0fq9b8-3-1-3:focus-visible {
-  box-shadow: var(--_z0fq9b2-3-1-3);
+._z0fq9b8-3-2-1:focus-visible {
+  box-shadow: var(--_z0fq9b2-3-2-1);
 }
-._z0fq9b9-3-1-3:focus-within {
-  box-shadow: var(--_z0fq9b2-3-1-3);
+._z0fq9b9-3-2-1:focus-within {
+  box-shadow: var(--_z0fq9b2-3-2-1);
 }
-._z0fq9ba-3-1-3:has(:focus-visible) {
-  box-shadow: var(--_z0fq9b2-3-1-3);
+._z0fq9ba-3-2-1:has(:focus-visible) {
+  box-shadow: var(--_z0fq9b2-3-2-1);
 }
-._z0fq9bb-3-1-3:focus {
-  box-shadow: var(--_z0fq9b2-3-1-3);
+._z0fq9bb-3-2-1:focus {
+  box-shadow: var(--_z0fq9b2-3-2-1);
 }
-._z0fq9bc-3-1-3 {
-  --_z0fq9b0-3-1-3: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z0fq9b1-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
+._z0fq9bc-3-2-1 {
+  --_z0fq9b0-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._z0fq9bd-3-1-3 {
-  --_z0fq9b0-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
-  --_z0fq9b1-3-1-3: var(--dt-colors-border-primary-default, #d5dbf6);
+._z0fq9bd-3-2-1 {
+  --_z0fq9b0-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._z0fq9be-3-1-3 {
-  --_z0fq9b0-3-1-3: var(--dt-colors-border-success-accent, #2d6761);
-  --_z0fq9b1-3-1-3: var(--dt-colors-border-success-default, #d3dedd);
+._z0fq9be-3-2-1 {
+  --_z0fq9b0-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
 }
-._z0fq9bf-3-1-3 {
-  --_z0fq9b0-3-1-3: var(--dt-colors-border-warning-accent, #855400);
-  --_z0fq9b1-3-1-3: var(--dt-colors-border-warning-default, #f9ebdb);
+._z0fq9bf-3-2-1 {
+  --_z0fq9b0-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._z0fq9bg-3-1-3 {
-  --_z0fq9b0-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z0fq9b1-3-1-3: var(--dt-colors-border-critical-default, #f6d6d5);
+._z0fq9bg-3-2-1 {
+  --_z0fq9b0-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
 }

package/core/styles/focusRingStatic.sty.js

@@ -23,4 +23,4 @@ __export(focusRingStatic_css_exports, {
 module.exports = __toCommonJS(focusRingStatic_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-1-3", variantClassNames: { minimal: { true: "_z0fq9b5-3-1-3", false: "_z0fq9b6-3-1-3" }, disabled: { true: "_z0fq9b7-3-1-3" }, when: { "focus-visible": "_z0fq9b8-3-1-3", "focus-within": "_z0fq9b9-3-1-3", "focus-within-visible": "_z0fq9ba-3-1-3", focus: "_z0fq9bb-3-1-3" }, color: { neutral: "_z0fq9bc-3-1-3", primary: "_z0fq9bd-3-1-3", success: "_z0fq9be-3-1-3", warning: "_z0fq9bf-3-1-3", critical: "_z0fq9bg-3-1-3" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-2-1", variantClassNames: { minimal: { true: "_z0fq9b5-3-2-1", false: "_z0fq9b6-3-2-1" }, disabled: { true: "_z0fq9b7-3-2-1" }, when: { "focus-visible": "_z0fq9b8-3-2-1", "focus-within": "_z0fq9b9-3-2-1", "focus-within-visible": "_z0fq9ba-3-2-1", focus: "_z0fq9bb-3-2-1" }, color: { neutral: "_z0fq9bc-3-2-1", primary: "_z0fq9bd-3-2-1", success: "_z0fq9be-3-2-1", warning: "_z0fq9bf-3-2-1", critical: "_z0fq9bg-3-2-1" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/types/polymorph.d.ts

@@ -24,5 +24,5 @@ export type PolymorphProps<E extends ElementType> = PolymorphOwnProps<E> & Omit<
  */
 export type PolymorphicComponentProps<E extends ElementType, P> = P & PolymorphProps<E>;
 declare module 'react' {
-    function forwardRef<T, P = unknown>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+    function forwardRef<T, P = unknown>(render: (props: P, ref: import('react').Ref<T>) => import('react').ReactElement | null): (props: P & import('react').RefAttributes<T>) => import('react').ReactElement | null;
 }

package/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-3-1-3: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-3-1-3: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-3-2-1: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-3-1-3: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-3-1-3: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-3-1-3: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-3-1-3: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-3-2-1: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-3-1-3: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-3-1-3: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-3-2-1: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-3-1-3: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-3-1-3: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-3-2-1: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-3-1-3: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-3-2-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-3-1-3: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-3-1-3: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-3-2-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-3-1-3: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-3-1-3: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-3-2-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-3-2-1: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-3-1-3: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-3-2-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-3-1-3: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-3-1-3: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-3-1-3: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-3-1-3: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-3-2-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-3-2-1: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-3-1-3: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-3-1-3: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-3-2-1: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-3-2-1: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-3-1-3: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-3-1-3: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-3-2-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-3-2-1: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-3-1-3: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-3-1-3: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-3-2-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-3-2-1: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-3-1-3 {
-  --_k096v40-3-1-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-3-1-3: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-3-1-3: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-3-2-1 {
+  --_k096v40-3-2-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-3-2-1: 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-3-1-3", variantClassNames: { color: { critical: "_k096v44-3-1-3", neutral: "_k096v45-3-1-3", primary: "_k096v46-3-1-3", success: "_k096v47-3-1-3", warning: "_k096v48-3-1-3" }, variant: { "default": "_k096v49-3-1-3", accent: "_k096v4a-3-1-3" }, disabled: { true: "_k096v4b-3-1-3", false: "_k096v4c-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-1-3"], [{ color: "success", variant: "accent" }, "_k096v4e-3-1-3"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-1-3"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-1-3"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-1-3"], [{ color: "primary", disabled: true }, "_k096v4i-3-1-3"], [{ color: "success", disabled: true }, "_k096v4j-3-1-3"], [{ color: "warning", disabled: true }, "_k096v4k-3-1-3"], [{ color: "critical", disabled: true }, "_k096v4l-3-1-3"], [{ color: "neutral", disabled: true }, "_k096v4m-3-1-3"]] });
-var colorUtilsVars = { text: "var(--_k096v40-3-1-3)", icon: "var(--_k096v41-3-1-3)", borderColor: "var(--_k096v42-3-1-3)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-2-1", variantClassNames: { color: { critical: "_k096v44-3-2-1", neutral: "_k096v45-3-2-1", primary: "_k096v46-3-2-1", success: "_k096v47-3-2-1", warning: "_k096v48-3-2-1" }, variant: { "default": "_k096v49-3-2-1", accent: "_k096v4a-3-2-1" }, disabled: { true: "_k096v4b-3-2-1", false: "_k096v4c-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-2-1"], [{ color: "success", variant: "accent" }, "_k096v4e-3-2-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-2-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-2-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-2-1"], [{ color: "primary", disabled: true }, "_k096v4i-3-2-1"], [{ color: "success", disabled: true }, "_k096v4j-3-2-1"], [{ color: "warning", disabled: true }, "_k096v4k-3-2-1"], [{ color: "critical", disabled: true }, "_k096v4l-3-2-1"], [{ color: "neutral", disabled: true }, "_k096v4m-3-2-1"]] });
+var colorUtilsVars = { text: "var(--_k096v40-3-2-1)", icon: "var(--_k096v41-3-2-1)", borderColor: "var(--_k096v42-3-2-1)" };