@dynatrace/strato-components 0.84.31 → 0.84.51

package/core/styles/focusRing.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 focusRing_css_exports = {};
+__export(focusRing_css_exports, {
+  focusRingCSS: () => focusRingCSS,
+  focusRingFocusWithinCSS: () => focusRingFocusWithinCSS
+});
+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: "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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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: [] });

package/core/styles/useFocusRing.d.ts

@@ -0,0 +1,49 @@
+import { FocusEvent } from 'react';
+export type Modality = 'keyboard' | 'pointer' | 'touch' | 'unknown';
+/** @internal */
+export declare const variants: readonly ["neutral", "primary", "success", "warning", "critical", "onAccent"];
+/** @internal */
+export type VariantType = (typeof variants)[number];
+/** @internal */
+export type UseFocusRingProps = {
+    /**
+     * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.
+     * @defaultValue false
+     */
+    isMinimal?: boolean;
+    /**
+     * 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).
+     * @defaultValue false
+     */
+    ignoreModality?: boolean;
+    /**
+     * The styling variant of the element.
+     * @defaultValue neutral
+     */
+    variant?: VariantType;
+    /**
+     * Apply the focus ring styling if an embedded element gains the focus
+     */
+    focusWithin?: boolean;
+    /**
+     * Whether the element is disabled. If disabled changes to true, the focus will be removed.
+     */
+    disabled?: boolean;
+};
+export type FocusRingProps = {
+    /** The focus styles that depend on modality. */
+    focusClassName: string;
+    /** Focus handlers used to manage the focus state. Must be applied to the element that receives the focus.*/
+    focusProps: {
+        onFocus: (e: FocusEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    /** Whether or not the element got focus via keyboard. */
+    isFocusVisible: boolean;
+};
+/**
+ * Custom hook used to determine focus styling depending on modality.
+ * Returns the css classes (vanilla) that can be applied to the component in order to show the correct focus outline.
+ * @internal
+ */
+export declare function useFocusRing(props?: UseFocusRingProps): FocusRingProps;

package/core/styles/useFocusRing.js

@@ -0,0 +1,83 @@
+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 useFocusRing_exports = {};
+__export(useFocusRing_exports, {
+  useFocusRing: () => useFocusRing,
+  variants: () => variants
+});
+module.exports = __toCommonJS(useFocusRing_exports);
+var import_react = require("react");
+var import_focusRing_css = require("./focusRing.sty.js");
+var import__ = require("../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] = (0, import_react.useState)(false);
+  const { modality } = (0, import__._useFocusContext)();
+  (0, import_react.useEffect)(() => {
+    if (disabled) {
+      setIsFocused(false);
+    }
+  }, [disabled]);
+  const onBlur = (0, import_react.useCallback)((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(false);
+    }
+  }, []);
+  const onFocus = (0, import_react.useCallback)((e) => {
+    if (e.currentTarget === e.target) {
+      setIsFocused(true);
+    }
+  }, []);
+  const focusProps = {
+    onFocus,
+    onBlur
+  };
+  if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
+    if (isMinimal) {
+      return {
+        focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)({ minimal: true, variant }) : (0, import_focusRing_css.focusRingCSS)({ minimal: true, variant }),
+        isFocusVisible: !focusWithin,
+        focusProps
+      };
+    }
+    return {
+      focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)({ minimal: false, variant }) : (0, import_focusRing_css.focusRingCSS)({ minimal: false, variant }),
+      isFocusVisible: !focusWithin,
+      focusProps
+    };
+  }
+  return {
+    focusClassName: focusWithin ? (0, import_focusRing_css.focusRingFocusWithinCSS)() : (0, import_focusRing_css.focusRingCSS)(),
+    isFocusVisible: false,
+    focusProps
+  };
+}

package/core/types/a11y-props.d.ts

@@ -0,0 +1,26 @@
+import type { AriaAttributes } from 'react';
+/**
+ * Collection of component aria props.
+ * @public
+ */
+export interface AriaLabelingProps {
+    /** Labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that label(s) the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describe(s) the object. */
+    'aria-describedby'?: string;
+    /** Identifies the element (or elements) that provide(s) a detailed, extended description for the object. */
+    'aria-details'?: string;
+}
+/**
+ * Type used for the adding the `aria-disabled` prop.
+ * @public
+ */
+export type AriaDisabledProps = {
+    /**
+     * Whether the element and all focusable descendants are disabled.
+     * `aria-disabled="true"` only semantically exposes these elements as being disabled.
+     */
+    'aria-disabled'?: AriaAttributes['aria-disabled'];
+};

package/core/types/a11y-props.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 a11y_props_exports = {};
+module.exports = __toCommonJS(a11y_props_exports);

package/core/types/data-props.d.ts

@@ -1,6 +1,6 @@
 /**
- * @public
  * Type defining the data-testid prop that is mapped to the rendered components root node.
+ * @public
  */
 export type DataTestId = {
     /** Test id used for selecting the component's container. */

package/core/types/dom.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The props of a DOM Element.
+ * @public
+ */
+export interface DOMProps {
+    /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
+    id?: string;
+}

package/core/types/dom.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 dom_exports = {};
+module.exports = __toCommonJS(dom_exports);

package/core/types/heading.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type for heading levels
+ * @internal
+ */
+export type _HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Type for all correct semantic html tags
+ * @internal
+ */
+export type _HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/core/types/heading.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 heading_exports = {};
+module.exports = __toCommonJS(heading_exports);

package/core/types/masking-props.d.ts

@@ -1,6 +1,7 @@
 /**
+ * Props defining the masking of data in Session Replay. They are applied to the component's root node.
  * @public
- * Props defining the masking of data in Session Replay. They are applied to the component's root node. */
+ */
 export interface MaskingProps {
     /** Determines whether masking is enabled and the data is replaced with asterisks. */
     'data-dtrum-mask'?: boolean;

package/core/types/polymorph.d.ts

@@ -0,0 +1,28 @@
+import React, { type ComponentProps, type ElementType } from 'react';
+/**
+ * Props type to use with your own to add the as polymorphing prop.
+ * @public
+ */
+export type PolymorphOwnProps<E extends ElementType = ElementType> = {
+    /**
+     * The element type / component used for rendering
+     * e.g. when `a` is used, an anchor tag is created and the component
+     * accepts all props a native anchor also accepts, e.g. a `href` tag.
+     * Custom components with their own props are also supported, e.g. a `Link`
+     * from a router.
+     */
+    as?: E;
+};
+/**
+ * Combine the props that come from the underlying ElementType and from your own types and omit naming duplicates.
+ * @public
+ */
+export type PolymorphProps<E extends ElementType> = PolymorphOwnProps<E> & Omit<ComponentProps<E>, keyof PolymorphOwnProps>;
+/**
+ * Union type for the element types polymorphic props and your own props
+ * @public
+ */
+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;
+}

package/core/types/polymorph.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 polymorph_exports = {};
+module.exports = __toCommonJS(polymorph_exports);

package/core/types/role-variant.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Defines role / color variants
+ * @public
+ */
+export declare const roleVariants: readonly ["neutral", "primary", "success", "warning", "critical", "onAccent"];
+/**
+ * Defines the types of role variants
+ * @public
+ */
+export type RoleVariantType = (typeof roleVariants)[number];

package/core/types/role-variant.js

@@ -0,0 +1,30 @@
+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 role_variant_exports = {};
+__export(role_variant_exports, {
+  roleVariants: () => roleVariants
+});
+module.exports = __toCommonJS(role_variant_exports);
+const roleVariants = [
+  "neutral",
+  "primary",
+  "success",
+  "warning",
+  "critical",
+  "onAccent"
+];

package/core/types/styling-props.d.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 /**
- * @public
  * Collection of component styling props including `style` and `className` types.
+ * @public
  */
 export interface StylingProps {
     /**

package/core/types/with-children.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 /**
+ * Helper type to add children to props.
  * @public
- * Helper type to add children to props
  */
 export interface WithChildren {
     /** Children provided to the component. */

package/core/utils/_is-string-children.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Returns whether children only consist of text nodes.
+ * @internal
+ */
+export declare function isStringChildren(children: React.ReactNode): boolean;

package/core/utils/_is-string-children.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var is_string_children_exports = {};
+__export(is_string_children_exports, {
+  isStringChildren: () => isStringChildren
+});
+module.exports = __toCommonJS(is_string_children_exports);
+var import_react = __toESM(require("react"));
+var import_react_intl = require("react-intl");
+var import_react_is = require("react-is");
+function isStringChildren(children) {
+  const childrenArray = import_react.default.Children.toArray(children);
+  if (!childrenArray.some(import_react_is.isElement)) {
+    return true;
+  }
+  return childrenArray.every(
+    (child) => !(0, import_react_is.isElement)(child) || (0, import_react_is.isElement)(child) && child.type && child.type === import_react_intl.FormattedMessage
+  );
+}

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/core/utils/isBrowser.d.ts

@@ -2,6 +2,6 @@
  * @internal
  *
  * Whether the code is currently executed in a browser
- * @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/utils/src/dom.ts
+ * @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/utils/src/dom.ts}
  */
 export declare const isBrowser: boolean;

package/core/utils/merge-props.d.ts

@@ -1,6 +1,6 @@
 /**
+ * Internal helper mapper type for mergeProps.
  * @internal
- * Internal helper mapper type for mergeProps
  */
 export type TupleTypes<T> = {
     [P in keyof T]: T[P];
@@ -8,23 +8,22 @@ export type TupleTypes<T> = {
     [key: number]: infer V;
 } ? NullToObject<V> : never;
 /**
+ * Internal helper mapper type for mergeProps.
  * @internal
- * Internal helper mapper type for mergeProps
  */
 export type NullToObject<T> = T extends null | undefined ? {} : T;
 /**
+ * Internal helper mapper type for mergeProps.
  * @internal
- * Internal helper mapper type for mergeProps
  */
 export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 /**
- * @internal
- *
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids
  * will trigger a side-effect and re-render components hooked up with `useId`.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
+ * @internal
  */
 export declare function mergeProps<T extends ({
     [key: string]: any;

package/core/utils/seed-random.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generate a random seed function based on the mulberry32 algorithm
+ * @internal
+ */
+export declare function mulberry32(seed: number): () => number;