@dynatrace/strato-components 0.84.31 → 0.84.51

package/content/progress/hooks/useProgressAriaProps.js

@@ -0,0 +1,63 @@
+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 useProgressAriaProps_exports = {};
+__export(useProgressAriaProps_exports, {
+  useProgressAriaProps: () => useProgressAriaProps
+});
+module.exports = __toCommonJS(useProgressAriaProps_exports);
+var import_lodash_es = require("lodash");
+var import_units = require("@dynatrace-sdk/units");
+function useProgressAriaProps(originalValue, min, max, valueText) {
+  let value;
+  let isIndeterminate;
+  if (originalValue === "indeterminate" || originalValue === void 0) {
+    value = void 0;
+    isIndeterminate = true;
+  } else {
+    value = originalValue;
+    isIndeterminate = false;
+  }
+  if (!isIndeterminate) {
+    value = (0, import_lodash_es.clamp)(originalValue, min, max);
+  }
+  if (!isIndeterminate && value !== void 0 && !valueText) {
+    valueText = (0, import_units.format)(value, { input: import_units.units.percentage.percent });
+  }
+  const progressAriaProps = {
+    // aria-valuenow should only be provided and updated if the value is not indeterminate https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuenow": isIndeterminate ? void 0 : value,
+    "aria-valuetext": isIndeterminate ? void 0 : valueText,
+    // aria-valuemin should only be provided if min is not 0 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuemin": min !== 0 ? min : void 0,
+    // aria-valuemax should only be provided if min is not 100 (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
+    "aria-valuemax": max !== 100 ? max : void 0,
+    role: "progressbar"
+  };
+  if (isIndeterminate === true && value === void 0) {
+    return {
+      value: void 0,
+      isIndeterminate: true,
+      progressAriaProps
+    };
+  }
+  return {
+    value,
+    isIndeterminate: false,
+    progressAriaProps
+  };
+}

package/content/progress/hooks/useProgressBarPropsContext.d.ts

@@ -0,0 +1,2 @@
+import { SharedProgressBarProps } from '../contexts/SharedProgressBarPropsContext.js';
+export declare function _useSharedProgressBarPropsContext(): SharedProgressBarProps;

package/content/progress/hooks/useProgressBarPropsContext.js

@@ -0,0 +1,32 @@
+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 useProgressBarPropsContext_exports = {};
+__export(useProgressBarPropsContext_exports, {
+  _useSharedProgressBarPropsContext: () => _useSharedProgressBarPropsContext
+});
+module.exports = __toCommonJS(useProgressBarPropsContext_exports);
+var import_react = require("react");
+var import_SharedProgressBarPropsContext = require("../contexts/SharedProgressBarPropsContext.js");
+function _useSharedProgressBarPropsContext() {
+  const context = (0, import_react.useContext)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext);
+  return {
+    id: context.id,
+    variant: context.variant,
+    density: context.density
+  };
+}

package/content/progress/utils.d.ts

@@ -0,0 +1,2 @@
+import { RoleVariantType } from '../../core/types/role-variant.js';
+export declare function getFillColorFromVariant($variant: RoleVariantType): string;

package/content/progress/utils.js

@@ -0,0 +1,50 @@
+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 utils_exports = {};
+__export(utils_exports, {
+  getFillColorFromVariant: () => getFillColorFromVariant
+});
+module.exports = __toCommonJS(utils_exports);
+var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
+function getFillColorFromVariant($variant) {
+  switch ($variant) {
+    case "onAccent":
+      return import_colors.default.Border.OnAccent.Default;
+    case "primary":
+      return import_colors.default.Border.Primary.Accent;
+    case "success":
+      return import_colors.default.Border.Success.Accent;
+    case "warning":
+      return import_colors.default.Border.Warning.Accent;
+    case "critical":
+      return import_colors.default.Border.Critical.Accent;
+    case "neutral":
+    default:
+      return import_colors.default.Border.Neutral.Accent;
+  }
+}

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

@@ -5,18 +5,18 @@ import { type DataTestId } from '../../types/data-props.js';
 import { type MaskingProps } from '../../types/masking-props.js';
 import { type StylingProps } from '../../types/styling-props.js';
 /**
- * @public
  * AppRoot component props.
+ * @public
  */
 export type AppRootProps = PropsWithChildren<DataTestId & StylingProps & MaskingProps>;
 /**
- * @public
  * In order to have all the providers in place for rendering overlays, applying
  * global styles or internationalization, you need to wrap your app in the
  * `AppRoot`. If you're using the `dt-app` to create your app, this is
  * automatically taken care of and you can start working on your app without
  * further ado.
+ * @public
  */
-export declare const AppRoot: React.ForwardRefExoticComponent<DataTestId & StylingProps & MaskingProps & {
+export declare const AppRoot: (props: DataTestId & StylingProps & MaskingProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

package/core/hooks/useAriaLabelingProps.d.ts

@@ -0,0 +1,6 @@
+import { AriaLabelingProps } from '../types/a11y-props.js';
+/**
+ * Utility function to extract aria-labeling props from component props to easily spread them to the desired child.
+ * @internal
+ */
+export declare function useAriaLabelingProps<T extends object>(props: AriaLabelingProps & T): AriaLabelingProps;

package/core/hooks/useAriaLabelingProps.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 useAriaLabelingProps_exports = {};
+__export(useAriaLabelingProps_exports, {
+  useAriaLabelingProps: () => useAriaLabelingProps
+});
+module.exports = __toCommonJS(useAriaLabelingProps_exports);
+function useAriaLabelingProps(props) {
+  return {
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-describedby": props["aria-describedby"],
+    "aria-details": props["aria-details"]
+  };
+}

package/core/hooks/useCurrentTheme.d.ts

@@ -1,5 +1,5 @@
 /**
+ * Returns the current theme based on sdk-setting or browsers preferred color-scheme.
  * @public
- * Returns the current theme based on sdk-setting or browsers preferred color-scheme
  */
 export declare function useCurrentTheme(): 'light' | 'dark';

package/core/hooks/useFontsUpdated.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook that checks if the initially loaded fonts were updated.
+ * Used to trigger remeasuring in the DataTable (autoWidth) and TextEllipsis once all fonts are loaded.
+ *
+ * @param callback - optionally pass a function to be executed once when the fonts were updated
+ * @returns boolean whether the fonts have changed
+ * @internal
+ */
+export declare function _useFontsUpdated(callback?: () => void): boolean;

package/core/hooks/useFontsUpdated.js

@@ -0,0 +1,51 @@
+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 useFontsUpdated_exports = {};
+__export(useFontsUpdated_exports, {
+  _useFontsUpdated: () => _useFontsUpdated
+});
+module.exports = __toCommonJS(useFontsUpdated_exports);
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+function _useFontsUpdated(callback) {
+  const [fontsUpdated, setFontsUpdated] = (0, import_react.useState)(false);
+  const prevFontFamilies = (0, import_react.useRef)();
+  const fontFamilies = [];
+  const firstRender = (0, import_react.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 (!(0, import_lodash_es.isEqual)(prevFontFamilies.current, fontFamilies)) {
+        prevFontFamilies.current = fontFamilies;
+        callback?.();
+        setFontsUpdated(true);
+      }
+    });
+  }
+  return fontsUpdated;
+}

package/core/hooks/useId.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hook used to generate a unique identifier.
+ * @internal
+ */
+export declare const useId: (props?: {
+    /** If a prefix is defined, the hook prepends the prefix with a hyphen to the generated id.
+     * @defaultValue 'strato'
+     */
+    prefix?: string;
+    /** If a seed is defined, the hook uses a seeded random function to generate the id consistently. */
+    seed?: number;
+}) => string;

package/core/hooks/useId.js

@@ -0,0 +1,32 @@
+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 useId_exports = {};
+__export(useId_exports, {
+  useId: () => useId
+});
+module.exports = __toCommonJS(useId_exports);
+var import_react = require("react");
+var import_uuidv4 = require("../utils/uuidv4.js");
+const useId = (props = {}) => {
+  const { prefix = "strato", seed } = props;
+  const generatedId = (0, import_react.useMemo)(
+    () => `${prefix}-${(0, import_uuidv4.uuidv4)(seed)}`,
+    [prefix, seed]
+  );
+  return generatedId;
+};

package/core/hooks/useMergeRefs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * If you have multiple references (e.g. from different hooks) you need to apply to
+ * the same element, you can use the `useMergeRefs` hook to combine them into one
+ * reference.
+ */
+export declare function useMergeRefs<T = unknown>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | React.Dispatch<React.SetStateAction<T | null>> | undefined>): React.RefCallback<T>;

package/core/hooks/useMergeRefs.js

@@ -0,0 +1,34 @@
+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 useMergeRefs_exports = {};
+__export(useMergeRefs_exports, {
+  useMergeRefs: () => useMergeRefs
+});
+module.exports = __toCommonJS(useMergeRefs_exports);
+var import_react = require("react");
+function useMergeRefs(refs) {
+  return (0, import_react.useCallback)((value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== void 0 && ref !== null) {
+        ref.current = value;
+      }
+    }
+  }, refs);
+}

package/core/hooks/useSafeForwardProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The Filtered Props from 'useSafeForwardProps'
+ * @internal
+ */
+export type UseSafeForwardReturnProps<T, P> = Omit<T, keyof P | 'className' | 'classNames' | 'style'>;
+/**
+ * Filters props out of a prop list. Per default className, classNames & style are filtered.
+ * @internal
+ */
+export declare function useSafeForwardProps<T extends object, P extends object>(props: T, excludedProps?: P): UseSafeForwardReturnProps<T, P>;

package/core/hooks/useSafeForwardProps.js

@@ -0,0 +1,34 @@
+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 useSafeForwardProps_exports = {};
+__export(useSafeForwardProps_exports, {
+  useSafeForwardProps: () => useSafeForwardProps
+});
+module.exports = __toCommonJS(useSafeForwardProps_exports);
+function useSafeForwardProps(props, excludedProps) {
+  const ignoreStyles = ["className", "classNames", "style"];
+  const ignoreList = excludedProps ? [...ignoreStyles, ...Object.keys(excludedProps)] : ignoreStyles;
+  const safeForwardProps = {};
+  for (const [name, prop] of Object.entries(props)) {
+    if (!ignoreList.includes(name)) {
+      const localName = name;
+      safeForwardProps[localName] = prop;
+    }
+  }
+  return safeForwardProps;
+}

package/core/index.d.ts

@@ -8,6 +8,7 @@ export type { MaskingProps } from './types/masking-props.js';
 export type { DataTestId } from './types/data-props.js';
 export type { StylingProps } from './types/styling-props.js';
 export type { WithChildren } from './types/with-children.js';
+export type { PolymorphOwnProps, PolymorphProps, PolymorphicComponentProps, } from './types/polymorph.js';
 export { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';
 export { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';
 export { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';
@@ -15,3 +16,14 @@ export { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-m
 export { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';
 export { isBrowser as _isBrowser } from './utils/isBrowser.js';
 export { mergeProps as _mergeProps, type NullToObject as _NullToObject, type TupleTypes as _TupleTypes, type UnionToIntersection as _UnionToIntersection, } from './utils/merge-props.js';
+export { type _HeadingLevel, type _HeadingTag } from './types/heading.js';
+export { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';
+export { useId as _useId } from './hooks/useId.js';
+export { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';
+export type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';
+export type { AriaDisabledProps, AriaLabelingProps, } from './types/a11y-props.js';
+export type { DOMProps } from './types/dom.js';
+export { roleVariants } from './types/role-variant.js';
+export type { RoleVariantType } from './types/role-variant.js';
+export { uuidv4 as _uuidv4 } from './utils/uuidv4.js';
+export { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';

package/core/index.js

@@ -26,8 +26,14 @@ __export(core_exports, {
   _getLastFocusableChild: () => import_get_last_focusable_child.getLastFocusableChild,
   _isBrowser: () => import_isBrowser.isBrowser,
   _isFocusable: () => import_is_focusable.isFocusable,
+  _isStringChildren: () => import_is_string_children.isStringChildren,
   _mergeProps: () => import_merge_props.mergeProps,
+  _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
   _useFocusContext: () => import_useFocusContext.useFocusContext,
+  _useId: () => import_useId.useId,
+  _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
+  _uuidv4: () => import_uuidv4.uuidv4,
+  roleVariants: () => import_role_variant.roleVariants,
   useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
 });
 module.exports = __toCommonJS(core_exports);
@@ -43,3 +49,9 @@ var import_get_last_focusable_child = require("./utils/focus-management/get-last
 var import_is_focusable = require("./utils/focus-management/is-focusable.js");
 var import_isBrowser = require("./utils/isBrowser.js");
 var import_merge_props = require("./utils/merge-props.js");
+var import_useAriaLabelingProps = require("./hooks/useAriaLabelingProps.js");
+var import_useId = require("./hooks/useId.js");
+var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
+var import_role_variant = require("./types/role-variant.js");
+var import_uuidv4 = require("./utils/uuidv4.js");
+var import_is_string_children = require("./utils/_is-string-children.js");

package/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/core/styles/focusRing.sty.d.ts

@@ -0,0 +1,96 @@
+export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            borderRadius: string;
+            boxShadow: string;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        false: {
+            selectors: {
+                '&&': {
+                    boxShadow: string;
+                };
+            };
+        };
+    };
+    variant: {
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+}>;
+export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            ':focus-within': {
+                borderRadius: string;
+                boxShadow: string;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        false: {
+            ':focus-within': {
+                boxShadow: string;
+            };
+        };
+    };
+    variant: {
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+}>;