@dynatrace/strato-components 0.84.31 → 0.84.42

package/core/utils/colorUtils.css

@@ -0,0 +1,80 @@
+.colorUtils_colorUtilsCSS_color_critical__k096v44 {
+  --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.colorUtils_colorUtilsCSS_color_neutral__k096v45 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.colorUtils_colorUtilsCSS_color_primary__k096v46 {
+  --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.colorUtils_colorUtilsCSS_color_success__k096v47 {
+  --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
+}
+.colorUtils_colorUtilsCSS_color_warning__k096v48 {
+  --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+.colorUtils_colorUtilsCSS_compound_0__k096v4e {
+  --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+}
+.colorUtils_colorUtilsCSS_compound_1__k096v4f {
+  --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
+}
+.colorUtils_colorUtilsCSS_compound_2__k096v4g {
+  --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
+}
+.colorUtils_colorUtilsCSS_compound_3__k096v4h {
+  --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
+}
+.colorUtils_colorUtilsCSS_compound_4__k096v4i {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
+}
+.colorUtils_colorUtilsCSS_compound_5__k096v4j {
+  --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_6__k096v4k {
+  --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_7__k096v4l {
+  --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_8__k096v4m {
+  --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_9__k096v4n {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+}

package/core/utils/colorUtils.sty.d.ts

@@ -0,0 +1,48 @@
+declare const vars: {
+    text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    icon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const colorUtilsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+    variant: {
+        default: {};
+        accent: {};
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export { vars as colorUtilsVars };

package/core/utils/colorUtils.sty.js

@@ -0,0 +1,27 @@
+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 colorUtils_css_exports = {};
+__export(colorUtils_css_exports, {
+  colorUtilsCSS: () => colorUtilsCSS,
+  colorUtilsVars: () => colorUtilsVars
+});
+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: "colorUtils__k096v43", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__k096v44", neutral: "colorUtils_colorUtilsCSS_color_neutral__k096v45", primary: "colorUtils_colorUtilsCSS_color_primary__k096v46", success: "colorUtils_colorUtilsCSS_color_success__k096v47", warning: "colorUtils_colorUtilsCSS_color_warning__k096v48", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__k096v49" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__k096v4a", accent: "colorUtils_colorUtilsCSS_variant_accent__k096v4b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__k096v4c", false: "colorUtils_colorUtilsCSS_disabled_false__k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__k096v4e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__k096v4f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__k096v4g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__k096v4h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__k096v4i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__k096v4j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__k096v4k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__k096v4l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__k096v4m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__k096v4n"]] });
+var colorUtilsVars = { text: "var(--vars_text__k096v40)", icon: "var(--vars_icon__k096v41)", borderColor: "var(--vars_borderColor__k096v42)" };

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/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/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/core/index.ts"],
-  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\n"],
+  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\n\nexport type { AriaLabelingProps } from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport type {\n  PolymorphicComponentProps,\n  PolymorphProps,\n  PolymorphOwnProps,\n} from './types/polymorph.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\n"],
   "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAMP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;",
   "names": []
 }

package/esm/core/styles/focusRing.css

@@ -0,0 +1,88 @@
+.focusRing_focusRingCSS__z2r50s3 {
+  outline: none;
+}
+.focusRing_focusRingCSS__z2r50s3:focus-visible {
+  outline: none;
+}
+.focusRing_focusRingCSS_minimal_true__z2r50s4 {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingCSS_minimal_false__z2r50s5.focusRing_focusRingCSS_minimal_false__z2r50s5 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingCSS_variant_neutral__z2r50s6 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingCSS_variant_primary__z2r50s7 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingCSS_variant_success__z2r50s8 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingCSS_variant_warning__z2r50s9 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingCSS_variant_critical__z2r50sa {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingCSS_variant_onAccent__z2r50sb {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}
+.focusRing_focusRingFocusWithinCSS__z2r50sc:focus-within {
+  outline: none;
+  :focus-visible {
+    outline: none;
+  }
+}
+.focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd:focus-within {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}

package/esm/core/styles/focusRing.sty.js

@@ -0,0 +1,9 @@
+import "./focusRing.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var focusRingCSS = _7a468({ defaultClassName: "focusRing_focusRingCSS__z2r50s3", variantClassNames: { minimal: { true: "focusRing_focusRingCSS_minimal_true__z2r50s4", false: "focusRing_focusRingCSS_minimal_false__z2r50s5" }, variant: { neutral: "focusRing_focusRingCSS_variant_neutral__z2r50s6", primary: "focusRing_focusRingCSS_variant_primary__z2r50s7", success: "focusRing_focusRingCSS_variant_success__z2r50s8", warning: "focusRing_focusRingCSS_variant_warning__z2r50s9", critical: "focusRing_focusRingCSS_variant_critical__z2r50sa", onAccent: "focusRing_focusRingCSS_variant_onAccent__z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = _7a468({ defaultClassName: "focusRing_focusRingFocusWithinCSS__z2r50sc", variantClassNames: { minimal: { true: "focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd", false: "focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se" }, variant: { neutral: "focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf", primary: "focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg", success: "focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh", warning: "focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si", critical: "focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj", onAccent: "focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  focusRingCSS,
+  focusRingFocusWithinCSS
+};
+//# sourceMappingURL=focusRing.sty.js.map

package/esm/core/styles/focusRing.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/styles/focusRing.css.ts"],
+  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'focusRing_focusRingCSS__z2r50s3',variantClassNames:{minimal:{true:'focusRing_focusRingCSS_minimal_true__z2r50s4',false:'focusRing_focusRingCSS_minimal_false__z2r50s5'},variant:{neutral:'focusRing_focusRingCSS_variant_neutral__z2r50s6',primary:'focusRing_focusRingCSS_variant_primary__z2r50s7',success:'focusRing_focusRingCSS_variant_success__z2r50s8',warning:'focusRing_focusRingCSS_variant_warning__z2r50s9',critical:'focusRing_focusRingCSS_variant_critical__z2r50sa',onAccent:'focusRing_focusRingCSS_variant_onAccent__z2r50sb'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'focusRing_focusRingFocusWithinCSS__z2r50sc',variantClassNames:{minimal:{true:'focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd',false:'focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se'},variant:{neutral:'focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf',primary:'focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg',success:'focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh',warning:'focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si',critical:'focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj',onAccent:'focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mCAAkC,mBAAkB,EAAC,SAAQ,EAAC,MAAK,gDAA+C,OAAM,gDAA+C,GAAE,SAAQ,EAAC,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,UAAS,oDAAmD,UAAS,mDAAkD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvmB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,8CAA6C,mBAAkB,EAAC,SAAQ,EAAC,MAAK,2DAA0D,OAAM,2DAA0D,GAAE,SAAQ,EAAC,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,UAAS,+DAA8D,UAAS,8DAA6D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/core/styles/useFocusRing.js

@@ -0,0 +1,69 @@
+import {
+  useCallback,
+  useEffect,
+  useState
+} from "react";
+import { focusRingCSS, focusRingFocusWithinCSS } from "./focusRing.sty.js";
+import { _useFocusContext } from "../index.js";
+const variants = [
+  "neutral",
+  "primary",
+  "success",
+  "warning",
+  "critical",
+  "onAccent"
+];
+function useFocusRing(props = {}) {
+  const {
+    variant = "neutral",
+    ignoreModality = false,
+    isMinimal = false,
+    focusWithin = false,
+    disabled = false
+  } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  const { modality } = _useFocusContext();
+  useEffect(() => {
+    if (disabled) {
+      setIsFocused(false);
+    }
+  }, [disabled]);
+  const onBlur = useCallback((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(false);
+    }
+  }, []);
+  const onFocus = useCallback((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(true);
+    }
+  }, []);
+  const focusProps = {
+    onFocus,
+    onBlur
+  };
+  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
+    if (isMinimal) {
+      return {
+        focusClassName: focusWithin ? focusRingFocusWithinCSS({ minimal: true, variant }) : focusRingCSS({ minimal: true, variant }),
+        isFocusVisible: !focusWithin,
+        focusProps
+      };
+    }
+    return {
+      focusClassName: focusWithin ? focusRingFocusWithinCSS({ minimal: false, variant }) : focusRingCSS({ minimal: false, variant }),
+      isFocusVisible: !focusWithin,
+      focusProps
+    };
+  }
+  return {
+    focusClassName: focusWithin ? focusRingFocusWithinCSS() : focusRingCSS(),
+    isFocusVisible: false,
+    focusProps
+  };
+}
+export {
+  useFocusRing,
+  variants
+};
+//# sourceMappingURL=useFocusRing.js.map

package/esm/core/styles/useFocusRing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/styles/useFocusRing.ts"],
+  "sourcesContent": ["import {\n  FocusEvent,\n  FocusEventHandler,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { focusRingCSS, focusRingFocusWithinCSS } from './focusRing.sty.js';\nimport { _useFocusContext } from '../index.js';\n\nexport type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';\n\n/** @internal */\nexport const variants = [\n  'neutral',\n  'primary',\n  'success',\n  'warning',\n  'critical',\n  'onAccent',\n] as const;\n/** @internal */\nexport type VariantType = (typeof variants)[number];\n/** @internal */\nexport type UseFocusRingProps = {\n  /**\n   * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.\n   * @defaultValue false\n   */\n  isMinimal?: boolean;\n\n  /**\n   * Whether or not the modality should be ignored, so that the focus ring is also present if users clicks the element (not just by tabbing to it).\n   * @defaultValue false\n   */\n  ignoreModality?: boolean;\n\n  /**\n   * The styling variant of the element.\n   * @defaultValue neutral\n   */\n  variant?: VariantType;\n\n  /**\n   * Apply the focus ring styling if an embedded element gains the focus\n   */\n  focusWithin?: boolean;\n\n  /**\n   * Whether the element is disabled. If disabled changes to true, the focus will be removed.\n   */\n  disabled?: boolean;\n};\n\nexport type FocusRingProps = {\n  /** The focus styles that depend on modality. */\n  focusClassName: string;\n  /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/\n  focusProps: {\n    onFocus: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n  };\n  /** Whether or not the element got focus via keyboard. */\n  isFocusVisible: boolean;\n};\n\n/**\n * Custom hook used to determine focus styling depending on modality.\n * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.\n * @internal\n */\nexport function useFocusRing(props: UseFocusRingProps = {}): FocusRingProps {\n  const {\n    variant = 'neutral',\n    ignoreModality = false,\n    isMinimal = false,\n    focusWithin = false,\n    disabled = false,\n  } = props;\n  const [isFocused, setIsFocused] = useState(false);\n  const { modality } = _useFocusContext();\n\n  useEffect(() => {\n    if (disabled) {\n      setIsFocused(false);\n    }\n  }, [disabled]);\n\n  const onBlur = useCallback<FocusEventHandler>((e) => {\n    // trigger only when the self element is unfocused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(false);\n    }\n  }, []);\n\n  const onFocus = useCallback<FocusEventHandler>((e) => {\n    // trigger only when the self element is focused (stopPropagation)\n    if (e.currentTarget === e.target) {\n      setIsFocused(true);\n    }\n  }, []);\n\n  const focusProps = {\n    onFocus,\n    onBlur,\n  };\n\n  if (\n    ((ignoreModality || modality === 'keyboard') && isFocused) ||\n    focusWithin\n  ) {\n    if (isMinimal) {\n      return {\n        focusClassName: focusWithin\n          ? focusRingFocusWithinCSS({ minimal: true, variant })\n          : focusRingCSS({ minimal: true, variant }),\n        isFocusVisible: !focusWithin,\n        focusProps,\n      };\n    }\n\n    return {\n      focusClassName: focusWithin\n        ? focusRingFocusWithinCSS({ minimal: false, variant })\n        : focusRingCSS({ minimal: false, variant }),\n      isFocusVisible: !focusWithin,\n      focusProps,\n    };\n  }\n\n  return {\n    focusClassName: focusWithin ? focusRingFocusWithinCSS() : focusRingCSS(),\n    isFocusVisible: false,\n    focusProps,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,+BAA+B;AACtD,SAAS,wBAAwB;AAK1B,MAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAmDO,SAAS,aAAa,QAA2B,CAAC,GAAmB;AAC1E,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,SAAS,IAAI,iBAAiB;AAEtC,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,SAAS,YAA+B,CAAC,MAAM;AAEnD,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAA+B,CAAC,MAAM;AAEpD,QAAI,EAAE,kBAAkB,EAAE,QAAQ;AAChC,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,EACF;AAEA,OACI,kBAAkB,aAAa,eAAe,aAChD,aACA;AACA,QAAI,WAAW;AACb,aAAO;AAAA,QACL,gBAAgB,cACZ,wBAAwB,EAAE,SAAS,MAAM,QAAQ,CAAC,IAClD,aAAa,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,QAC3C,gBAAgB,CAAC;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,MACL,gBAAgB,cACZ,wBAAwB,EAAE,SAAS,OAAO,QAAQ,CAAC,IACnD,aAAa,EAAE,SAAS,OAAO,QAAQ,CAAC;AAAA,MAC5C,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,gBAAgB,cAAc,wBAAwB,IAAI,aAAa;AAAA,IACvE,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;",
+  "names": []
+}

package/esm/core/types/a11y-props.js

@@ -0,0 +1 @@
+//# sourceMappingURL=a11y-props.js.map

package/esm/core/types/a11y-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/dom.js

@@ -0,0 +1 @@
+//# sourceMappingURL=dom.js.map

package/esm/core/types/dom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/focusable-element.js

@@ -0,0 +1 @@
+//# sourceMappingURL=focusable-element.js.map

package/esm/core/types/focusable-element.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/heading.js

@@ -0,0 +1 @@
+//# sourceMappingURL=heading.js.map

package/esm/core/types/heading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/types/polymorph.js

@@ -0,0 +1 @@
+//# sourceMappingURL=polymorph.js.map

package/esm/core/types/polymorph.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/core/utils/colorUtils.css

@@ -0,0 +1,80 @@
+.colorUtils_colorUtilsCSS_color_critical__k096v44 {
+  --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.colorUtils_colorUtilsCSS_color_neutral__k096v45 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.colorUtils_colorUtilsCSS_color_primary__k096v46 {
+  --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.colorUtils_colorUtilsCSS_color_success__k096v47 {
+  --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
+}
+.colorUtils_colorUtilsCSS_color_warning__k096v48 {
+  --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+.colorUtils_colorUtilsCSS_compound_0__k096v4e {
+  --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+}
+.colorUtils_colorUtilsCSS_compound_1__k096v4f {
+  --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
+}
+.colorUtils_colorUtilsCSS_compound_2__k096v4g {
+  --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
+}
+.colorUtils_colorUtilsCSS_compound_3__k096v4h {
+  --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
+}
+.colorUtils_colorUtilsCSS_compound_4__k096v4i {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
+}
+.colorUtils_colorUtilsCSS_compound_5__k096v4j {
+  --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_6__k096v4k {
+  --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_7__k096v4l {
+  --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_8__k096v4m {
+  --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_9__k096v4n {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+}

package/esm/core/utils/colorUtils.sty.js

@@ -0,0 +1,9 @@
+import "./colorUtils.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var colorUtilsCSS = _7a468({ defaultClassName: "colorUtils__k096v43", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__k096v44", neutral: "colorUtils_colorUtilsCSS_color_neutral__k096v45", primary: "colorUtils_colorUtilsCSS_color_primary__k096v46", success: "colorUtils_colorUtilsCSS_color_success__k096v47", warning: "colorUtils_colorUtilsCSS_color_warning__k096v48", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__k096v49" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__k096v4a", accent: "colorUtils_colorUtilsCSS_variant_accent__k096v4b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__k096v4c", false: "colorUtils_colorUtilsCSS_disabled_false__k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__k096v4e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__k096v4f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__k096v4g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__k096v4h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__k096v4i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__k096v4j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__k096v4k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__k096v4l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__k096v4m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__k096v4n"]] });
+var colorUtilsVars = { text: "var(--vars_text__k096v40)", icon: "var(--vars_icon__k096v41)", borderColor: "var(--vars_borderColor__k096v42)" };
+export {
+  colorUtilsCSS,
+  colorUtilsVars
+};
+//# sourceMappingURL=colorUtils.sty.js.map

package/esm/core/utils/colorUtils.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/utils/colorUtils.css.ts"],
+  "sourcesContent": ["import './colorUtils.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var colorUtilsCSS = _7a468({defaultClassName:'colorUtils__k096v43',variantClassNames:{color:{critical:'colorUtils_colorUtilsCSS_color_critical__k096v44',neutral:'colorUtils_colorUtilsCSS_color_neutral__k096v45',primary:'colorUtils_colorUtilsCSS_color_primary__k096v46',success:'colorUtils_colorUtilsCSS_color_success__k096v47',warning:'colorUtils_colorUtilsCSS_color_warning__k096v48',onAccent:'colorUtils_colorUtilsCSS_color_onAccent__k096v49'},variant:{'default':'colorUtils_colorUtilsCSS_variant_default__k096v4a',accent:'colorUtils_colorUtilsCSS_variant_accent__k096v4b'},disabled:{true:'colorUtils_colorUtilsCSS_disabled_true__k096v4c',false:'colorUtils_colorUtilsCSS_disabled_false__k096v4d'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'accent'},'colorUtils_colorUtilsCSS_compound_0__k096v4e'],[{color:'success',variant:'accent'},'colorUtils_colorUtilsCSS_compound_1__k096v4f'],[{color:'warning',variant:'accent'},'colorUtils_colorUtilsCSS_compound_2__k096v4g'],[{color:'critical',variant:'accent'},'colorUtils_colorUtilsCSS_compound_3__k096v4h'],[{color:'neutral',variant:'accent'},'colorUtils_colorUtilsCSS_compound_4__k096v4i'],[{color:'primary',disabled:true},'colorUtils_colorUtilsCSS_compound_5__k096v4j'],[{color:'success',disabled:true},'colorUtils_colorUtilsCSS_compound_6__k096v4k'],[{color:'warning',disabled:true},'colorUtils_colorUtilsCSS_compound_7__k096v4l'],[{color:'critical',disabled:true},'colorUtils_colorUtilsCSS_compound_8__k096v4m'],[{color:'neutral',disabled:true},'colorUtils_colorUtilsCSS_compound_9__k096v4n']]});\nexport var colorUtilsVars = {text:'var(--vars_text__k096v40)',icon:'var(--vars_icon__k096v41)',borderColor:'var(--vars_borderColor__k096v42)'};"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,uBAAsB,mBAAkB,EAAC,OAAM,EAAC,UAAS,oDAAmD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,UAAS,mDAAkD,GAAE,SAAQ,EAAC,WAAU,qDAAoD,QAAO,mDAAkD,GAAE,UAAS,EAAC,MAAK,mDAAkD,OAAM,mDAAkD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,8CAA8C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,8CAA8C,CAAC,EAAC,CAAC;AAC7hD,IAAI,iBAAiB,EAAC,MAAK,6BAA4B,MAAK,6BAA4B,aAAY,mCAAkC;",
+  "names": []
+}

package/esm/index.js

@@ -1,2 +1,4 @@
 export * from "./core/index.js";
+export * from "./layouts/index.js";
+export * from "./typography/index.js";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './core/index.js';\n"],
-  "mappings": "AAAA,cAAc;",
+  "sourcesContent": ["export * from './core/index.js';\nexport * from './layouts/index.js';\nexport * from './typography/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }