@dynatrace/strato-components 3.2.1 → 3.3.1

package/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-2-1 {
+@keyframes _rxr5810-3-3-1 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-2-1 {
+@keyframes _rxr5811-3-3-1 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-2-1 {
+@keyframes _rxr5812-3-3-1 {
   0% {
     transform: scaleX(1);
   }
@@ -22,7 +22,7 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-2-1 {
+._rxr5813-3-3-1 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
@@ -100,16 +100,16 @@
   opacity: 0;
 }
 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-2-1 1 forwards;
+  animation: _rxr5812-3-3-1 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-2-1;
+  animation-name: _rxr5810-3-3-1;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-2-1;
+  animation-name: _rxr5811-3-3-1;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/notifications/toast/ToastContainer.js

@@ -108,7 +108,7 @@ const ToastContainer = (0, import_react.forwardRef)(
               ref: closeButtonRef,
               variant: "default",
               onPointerDown: (e) => e.stopPropagation(),
-              "data-dt-name": "CloseToast",
+              "data-dt-name": "CloseX",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {}) })
             }
           )

package/notifications/toast/ToastContainer.sty.js

@@ -22,4 +22,4 @@ __export(ToastContainer_css_exports, {
 });
 module.exports = __toCommonJS(ToastContainer_css_exports);
 var import_ToastContainer_css_ts_vanilla = require("./ToastContainer.css");
-var toastsCSS = "_rxr5813-3-2-1";
+var toastsCSS = "_rxr5813-3-3-1";

package/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-2-1 {
+._14971970-3-3-1 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-2-1 {
+._14971971-3-3-1 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-2-1 {
+._14971972-3-3-1 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-2-1 {
+._14971973-3-3-1 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-2-1 {
+._14971974-3-3-1 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-2-1 {
+._14971975-3-3-1 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-2-1 {
+._14971976-3-3-1 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-2-1 {
+._14971977-3-3-1 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-2-1 {
+._14971978-3-3-1 {
   width: 100%;
   height: 100%;
 }

package/overlays/drawer/Drawer.sty.js

@@ -26,8 +26,8 @@ __export(Drawer_css_exports, {
 });
 module.exports = __toCommonJS(Drawer_css_exports);
 var import_Drawer_css_ts_vanilla = require("./Drawer.css");
-var DrawerBackdropCSS = "_14971977-3-2-1";
-var DrawerCSS = "_14971970-3-2-1";
-var DrawerContentCSS = "_14971978-3-2-1";
-var DrawerPlacementCSS = { left: "_14971971-3-2-1", right: "_14971972-3-2-1" };
-var DrawerWidthStyles = { narrow: "_14971973-3-2-1", medium: "_14971974-3-2-1", wide: "_14971975-3-2-1", full: "_14971976-3-2-1" };
+var DrawerBackdropCSS = "_14971977-3-3-1";
+var DrawerCSS = "_14971970-3-3-1";
+var DrawerContentCSS = "_14971978-3-3-1";
+var DrawerPlacementCSS = { left: "_14971971-3-3-1", right: "_14971972-3-3-1" };
+var DrawerWidthStyles = { narrow: "_14971973-3-3-1", medium: "_14971974-3-3-1", wide: "_14971975-3-3-1", full: "_14971976-3-3-1" };

package/overlays/hooks/useOverlay.d.ts

@@ -93,5 +93,5 @@ export interface DismissButtonProps {
 
  * @public
  */
-export declare function DismissButton(props: Readonly<DismissButtonProps>): import("react/jsx-runtime.js").JSX.Element;
+export declare function DismissButton(props: Readonly<DismissButtonProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/overlays/modal/Modal.css

@@ -1,4 +1,4 @@
-._dmotjm0-3-2-1 {
+._dmotjm0-3-3-1 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -11,16 +11,16 @@
   background: var(--dt-colors-background-surface-default, #fff);
   overflow-y: auto;
 }
-._dmotjm1-3-2-1 {
+._dmotjm1-3-3-1 {
   max-width: 576px;
 }
-._dmotjm2-3-2-1 {
+._dmotjm2-3-3-1 {
   max-width: 768px;
 }
-._dmotjm3-3-2-1 {
+._dmotjm3-3-3-1 {
   max-width: 1280px;
 }
-._dmotjm4-3-2-1 {
+._dmotjm4-3-3-1 {
   position: fixed;
   top: 0;
   left: 0;
@@ -32,7 +32,7 @@
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
   z-index: var(--dt-elevations-default, 1);
 }
-._dmotjm5-3-2-1 {
+._dmotjm5-3-3-1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -40,7 +40,7 @@
   padding: var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-24, 24px) var(--dt-spacings-size-8, 8px);
 }
 @supports not (height: 1dvh) {
-  ._dmotjm0-3-2-1 {
+  ._dmotjm0-3-3-1 {
     max-height: 96vh;
   }
 }

package/overlays/modal/Modal.js

@@ -122,7 +122,7 @@ const Modal = /* @__PURE__ */ (0, import_react.forwardRef)(
                 onClick: onDismiss,
                 "aria-label": closeButtonLabel,
                 variant: "default",
-                "data-dt-name": "CloseModal",
+                "data-dt-name": "CloseX",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.XmarkIcon, {}) })
               }
             )

package/overlays/modal/Modal.sty.js

@@ -25,7 +25,7 @@ __export(Modal_css_exports, {
 });
 module.exports = __toCommonJS(Modal_css_exports);
 var import_Modal_css_ts_vanilla = require("./Modal.css");
-var backdrop = "_dmotjm4-3-2-1";
-var base = "_dmotjm0-3-2-1";
-var header = "_dmotjm5-3-2-1";
-var sizes = { small: "_dmotjm1-3-2-1", medium: "_dmotjm2-3-2-1", large: "_dmotjm3-3-2-1" };
+var backdrop = "_dmotjm4-3-3-1";
+var base = "_dmotjm0-3-3-1";
+var header = "_dmotjm5-3-3-1";
+var sizes = { small: "_dmotjm1-3-3-1", medium: "_dmotjm2-3-3-1", large: "_dmotjm3-3-3-1" };

package/overlays/overlay/Overlay.css

@@ -1,4 +1,4 @@
-._1dhu6810-3-2-1 {
+._1dhu6810-3-3-1 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);

package/overlays/overlay/Overlay.sty.js

@@ -22,4 +22,4 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var overlayCSS = "_1dhu6810-3-2-1";
+var overlayCSS = "_1dhu6810-3-3-1";

package/overlays/sheet/Sheet.css

@@ -1,4 +1,4 @@
-._d76u1n0-3-2-1 {
+._d76u1n0-3-3-1 {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -7,7 +7,7 @@
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._d76u1n1-3-2-1 {
+._d76u1n1-3-3-1 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -25,16 +25,16 @@
   padding-bottom: var(--dt-spacings-size-16, 16px);
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n1-3-2-1:after {
+._d76u1n1-3-3-1:after {
   content: "";
   display: block;
   padding-bottom: var(--dt-spacings-size-32, 32px);
 }
-._d76u1n2-3-2-1 {
+._d76u1n2-3-3-1 {
   overflow: auto;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._d76u1n3-3-2-1 {
+._d76u1n3-3-3-1 {
   height: 100vh;
   position: fixed;
   top: 0;
@@ -43,7 +43,7 @@
   z-index: var(--dt-elevations-overlay, 20);
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
 }
-._d76u1n4-3-2-1 {
+._d76u1n4-3-3-1 {
   word-break: normal;
   overflow-wrap: anywhere;
 }

package/overlays/sheet/Sheet.sty.js

@@ -26,8 +26,8 @@ __export(Sheet_css_exports, {
 });
 module.exports = __toCommonJS(Sheet_css_exports);
 var import_Sheet_css_ts_vanilla = require("./Sheet.css");
-var sheetBackdropCSS = "_d76u1n0-3-2-1";
-var sheetCSS = "_d76u1n1-3-2-1";
-var sheetHeadingCSS = "_d76u1n4-3-2-1";
-var sheetScrollableContainerCSS = "_d76u1n2-3-2-1";
-var sheetWrapperCSS = "_d76u1n3-3-2-1";
+var sheetBackdropCSS = "_d76u1n0-3-3-1";
+var sheetCSS = "_d76u1n1-3-3-1";
+var sheetHeadingCSS = "_d76u1n4-3-3-1";
+var sheetScrollableContainerCSS = "_d76u1n2-3-3-1";
+var sheetWrapperCSS = "_d76u1n3-3-3-1";

package/overlays/tooltip/Tooltip.js

@@ -54,6 +54,10 @@ const Tooltip = /* @__PURE__ */ (0, import_react.forwardRef)(
       ...remainingProps
     } = props;
     const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+    const {
+      "data-dt-name": dataDtName = "Trigger",
+      ...remainingBehavioralTrackingProps
+    } = behavioralTrackingProps;
     const generatedId = (0, import_useId.useId)();
     const id = propId ?? generatedId;
     const shouldReduceMotion = (0, import_framer_motion.useReducedMotion)();
@@ -134,9 +138,9 @@ const Tooltip = /* @__PURE__ */ (0, import_react.forwardRef)(
           ),
           onFocus: () => !disabled && modality !== "pointer" && modality !== "touch" && openTooltip(true),
           onBlur: () => !disabled && !isTooltipHovered.current && closeTooltip(),
+          "data-dt-name": dataDtName,
+          ...remainingBehavioralTrackingProps,
           ...restProps,
-          ...behavioralTrackingProps,
-          "data-dt-name": "Trigger",
           "data-dt-component": dataDtComponent,
           children
         }

package/overlays/tooltip/tooltip.css

@@ -1,54 +1,54 @@
-._hplwyr1-3-2-1 {
+._hplwyr1-3-3-1 {
   max-width: 240px;
   word-break: normal;
   overflow-wrap: anywhere;
   pointer-events: auto;
 }
-._hplwyr1-3-2-1[data-popper-placement^="top"]::after {
+._hplwyr1-3-3-1[data-popper-placement^="top"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-2-1);
+  height: var(--_hplwyr0-3-3-1);
   left: 0;
-  bottom: calc(var(--_hplwyr0-3-2-1) * -1);
+  bottom: calc(var(--_hplwyr0-3-3-1) * -1);
 }
-._hplwyr1-3-2-1[data-popper-placement^="bottom"]::after {
+._hplwyr1-3-3-1[data-popper-placement^="bottom"]::after {
   content: "";
   position: absolute;
   width: 100%;
-  height: var(--_hplwyr0-3-2-1);
+  height: var(--_hplwyr0-3-3-1);
   left: 0;
-  top: calc(var(--_hplwyr0-3-2-1) * -1);
+  top: calc(var(--_hplwyr0-3-3-1) * -1);
 }
-._hplwyr1-3-2-1[data-popper-placement^="left"]::after {
+._hplwyr1-3-3-1[data-popper-placement^="left"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-2-1);
+  width: var(--_hplwyr0-3-3-1);
   top: 0;
-  right: calc(var(--_hplwyr0-3-2-1) * -1);
+  right: calc(var(--_hplwyr0-3-3-1) * -1);
 }
-._hplwyr1-3-2-1[data-popper-placement^="right"]::after {
+._hplwyr1-3-3-1[data-popper-placement^="right"]::after {
   content: "";
   position: absolute;
   height: 100%;
-  width: var(--_hplwyr0-3-2-1);
+  width: var(--_hplwyr0-3-3-1);
   top: 0;
-  left: calc(var(--_hplwyr0-3-2-1) * -1);
+  left: calc(var(--_hplwyr0-3-3-1) * -1);
 }
-._hplwyr1-3-2-1[data-popper-placement^="top"] > div {
+._hplwyr1-3-3-1[data-popper-placement^="top"] > div {
   transform-origin: center bottom;
 }
-._hplwyr1-3-2-1[data-popper-placement^="bottom"] > div {
+._hplwyr1-3-3-1[data-popper-placement^="bottom"] > div {
   transform-origin: center top;
 }
-._hplwyr1-3-2-1[data-popper-placement^="left"] > div {
+._hplwyr1-3-3-1[data-popper-placement^="left"] > div {
   transform-origin: right center;
 }
-._hplwyr1-3-2-1[data-popper-placement^="right"] > div {
+._hplwyr1-3-3-1[data-popper-placement^="right"] > div {
   transform-origin: left center;
 }
-._hplwyr2-3-2-1 {
+._hplwyr2-3-3-1 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);

package/overlays/tooltip/tooltip.sty.js

@@ -24,6 +24,6 @@ __export(tooltip_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_css_exports);
 var import_tooltip_css_ts_vanilla = require("./tooltip.css");
-var tooltipAnimationWrapperCSS = "_hplwyr2-3-2-1";
-var tooltipElementCSS = "_hplwyr1-3-2-1";
-var tooltipOffsetVar = "var(--_hplwyr0-3-2-1)";
+var tooltipAnimationWrapperCSS = "_hplwyr2-3-3-1";
+var tooltipElementCSS = "_hplwyr1-3-3-1";
+var tooltipOffsetVar = "var(--_hplwyr0-3-3-1)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -124,12 +124,12 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-markdown": "6.5.0",
-    "@codemirror/language": "6.12.2",
+    "@codemirror/language": "6.12.3",
     "@codemirror/legacy-modes": "6.5.2",
-    "@codemirror/lint": "6.9.4",
+    "@codemirror/lint": "6.9.5",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.6.0",
-    "@codemirror/view": "6.40.0",
+    "@codemirror/view": "6.41.0",
     "@date-fns/tz": "^1.4.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -173,7 +173,7 @@
     "date-fns": "^4.1.0",
     "framer-motion": "^12.29.0",
     "identity-obj-proxy": "^3.0.0",
-    "lodash-es": "^4.17.23",
+    "lodash-es": "^4.18.1",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-error-boundary": "^5.0.0",
@@ -195,7 +195,7 @@
   "peerDependencies": {
     "@dynatrace-sdk/app-environment": "^1.1.0",
     "@dynatrace-sdk/client-filter-segment-management": "^1.6.5",
-    "@dynatrace-sdk/client-notification-v2": "^1.0.0",
+    "@dynatrace-sdk/client-notification-v2": "^1.0.0 || ^2.0.0",
     "@dynatrace-sdk/client-platform-management-service": "^1.7.0",
     "@dynatrace-sdk/client-query": "^1.21.1",
     "@dynatrace-sdk/client-state": "^1.8.2",
@@ -205,7 +205,7 @@
     "@dynatrace-sdk/units": "^1.5.0",
     "@dynatrace-sdk/user-preferences": "^1.1.1",
     "@dynatrace/strato-design-tokens": "^1.3.1",
-    "@dynatrace/strato-icons": "^2.1.1",
+    "@dynatrace/strato-icons": "^2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-intl": "^6.0.8 || ^7.0.0",

package/styles/colorUtils.css

@@ -1,75 +1,75 @@
-._17bwkb04-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-critical-default, #bb0731);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
+._17bwkb04-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-critical-default, #bb0731);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._17bwkb05-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+._17bwkb05-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._17bwkb06-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-primary-default, #464cce);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-primary-default, #464cce);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
+._17bwkb06-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-primary-default, #464cce);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-primary-default, #464cce);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._17bwkb07-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-success-default, #2d6761);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-success-default, #2d6761);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
+._17bwkb07-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-success-default, #2d6761);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-success-default, #2d6761);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-success-default, #d3dedd);
 }
-._17bwkb08-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-warning-default, #855400);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-warning-default, #855400);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
+._17bwkb08-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-warning-default, #855400);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-warning-default, #855400);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._17bwkb0d-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+._17bwkb0d-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._17bwkb0e-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+._17bwkb0e-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-success-accent, #2d6761);
 }
-._17bwkb0f-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+._17bwkb0f-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-warning-accent, #855400);
 }
-._17bwkb0g-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+._17bwkb0g-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._17bwkb0h-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._17bwkb0h-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._17bwkb0i-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-primary-disabled, #dadbe480);
+._17bwkb0i-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._17bwkb0j-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-success-disabled, #dadbe480);
+._17bwkb0j-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._17bwkb0k-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-warning-disabled, #dadbe480);
+._17bwkb0k-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._17bwkb0l-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+._17bwkb0l-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._17bwkb0m-3-2-1 {
-  --_17bwkb00-3-2-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_17bwkb01-3-2-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_17bwkb02-3-2-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._17bwkb0m-3-3-1 {
+  --_17bwkb00-3-3-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_17bwkb01-3-3-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_17bwkb02-3-3-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/styles/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 colorUtils = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17bwkb03-3-2-1", variantClassNames: { color: { critical: "_17bwkb04-3-2-1", neutral: "_17bwkb05-3-2-1", primary: "_17bwkb06-3-2-1", success: "_17bwkb07-3-2-1", warning: "_17bwkb08-3-2-1" }, variant: { "default": "_17bwkb09-3-2-1", accent: "_17bwkb0a-3-2-1" }, disabled: { true: "_17bwkb0b-3-2-1", false: "_17bwkb0c-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-2-1"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-2-1"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-2-1"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-2-1"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-2-1"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-2-1"], [{ color: "success", disabled: true }, "_17bwkb0j-3-2-1"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-2-1"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-2-1"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-2-1"]] });
-var colorUtilsVars = { text: "var(--_17bwkb00-3-2-1)", icon: "var(--_17bwkb01-3-2-1)", borderColor: "var(--_17bwkb02-3-2-1)" };
+var colorUtils = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17bwkb03-3-3-1", variantClassNames: { color: { critical: "_17bwkb04-3-3-1", neutral: "_17bwkb05-3-3-1", primary: "_17bwkb06-3-3-1", success: "_17bwkb07-3-3-1", warning: "_17bwkb08-3-3-1" }, variant: { "default": "_17bwkb09-3-3-1", accent: "_17bwkb0a-3-3-1" }, disabled: { true: "_17bwkb0b-3-3-1", false: "_17bwkb0c-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_17bwkb0d-3-3-1"], [{ color: "success", variant: "accent" }, "_17bwkb0e-3-3-1"], [{ color: "warning", variant: "accent" }, "_17bwkb0f-3-3-1"], [{ color: "critical", variant: "accent" }, "_17bwkb0g-3-3-1"], [{ color: "neutral", variant: "accent" }, "_17bwkb0h-3-3-1"], [{ color: "primary", disabled: true }, "_17bwkb0i-3-3-1"], [{ color: "success", disabled: true }, "_17bwkb0j-3-3-1"], [{ color: "warning", disabled: true }, "_17bwkb0k-3-3-1"], [{ color: "critical", disabled: true }, "_17bwkb0l-3-3-1"], [{ color: "neutral", disabled: true }, "_17bwkb0m-3-3-1"]] });
+var colorUtilsVars = { text: "var(--_17bwkb00-3-3-1)", icon: "var(--_17bwkb01-3-3-1)", borderColor: "var(--_17bwkb02-3-3-1)" };