@dynatrace/strato-components 1.16.0 → 1.17.0

package/content/progress/ProgressCircle.js

@@ -42,6 +42,7 @@ var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.j
 var import_Container = require("../../layouts/container/Container.js");
 var import_container_css = require("../../styles/container.sty.js");
 var import_textStyle_css = require("../../styles/textStyle.sty.js");
+const COMPONENT_NAME = "ProgressCircle";
 const progressCircleSizes = {
   small: 20,
   large: 40
@@ -116,6 +117,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
         ),
         style: consumerStyle,
         ...forwardProps,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
@@ -181,4 +183,4 @@ const ProgressCircle = (0, import_react.forwardRef)(
     );
   }
 );
-ProgressCircle.displayName = "ProgressCircle";
+ProgressCircle.displayName = COMPONENT_NAME;

package/content/progress/ProgressCircle.sty.js

@@ -27,8 +27,8 @@ __export(ProgressCircle_css_exports, {
 module.exports = __toCommonJS(ProgressCircle_css_exports);
 var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var progressCircleBackgroundCSS = "_kvldjh9-1-16-0";
-var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-16-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-16-0", false: "_kvldjh8-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });
-var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-16-0", variantClassNames: { size: { small: "_kvldjhb-1-16-0", large: "_kvldjhc-1-16-0" }, color: { critical: "_kvldjhd-1-16-0", neutral: "_kvldjhe-1-16-0", primary: "_kvldjhf-1-16-0", success: "_kvldjhg-1-16-0", warning: "_kvldjhh-1-16-0" }, variant: { "default": "_kvldjhi-1-16-0", accent: "_kvldjhj-1-16-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-16-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-16-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-16-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-16-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-16-0"]] });
-var progressCircleRootCSS = "_kvldjh4-1-16-0";
-var progressCircleSvgCss = "_kvldjh5-1-16-0";
+var progressCircleBackgroundCSS = "_kvldjh9-1-17-0";
+var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-1-17-0", variantClassNames: { indeterminate: { true: "_kvldjh7-1-17-0", false: "_kvldjh8-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
+var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-1-17-0", variantClassNames: { size: { small: "_kvldjhb-1-17-0", large: "_kvldjhc-1-17-0" }, color: { critical: "_kvldjhd-1-17-0", neutral: "_kvldjhe-1-17-0", primary: "_kvldjhf-1-17-0", success: "_kvldjhg-1-17-0", warning: "_kvldjhh-1-17-0" }, variant: { "default": "_kvldjhi-1-17-0", accent: "_kvldjhj-1-17-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-1-17-0"], [{ color: "success", variant: "accent" }, "_kvldjhl-1-17-0"], [{ color: "warning", variant: "accent" }, "_kvldjhm-1-17-0"], [{ color: "critical", variant: "accent" }, "_kvldjhn-1-17-0"], [{ color: "neutral", variant: "accent" }, "_kvldjho-1-17-0"]] });
+var progressCircleRootCSS = "_kvldjh4-1-17-0";
+var progressCircleSvgCss = "_kvldjh5-1-17-0";

package/content/skeleton/Skeleton.css

@@ -1,27 +1,27 @@
-._1a1ozfd0-1-16-0 {
+._1a1ozfd0-1-17-0 {
   position: relative;
   overflow: hidden;
 }
-._1a1ozfd1-1-16-0 {
+._1a1ozfd1-1-17-0 {
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
 }
-._1a1ozfd2-1-16-0 {
+._1a1ozfd2-1-17-0 {
   border-radius: 9999px;
 }
-._1a1ozfd3-1-16-0 {
+._1a1ozfd3-1-17-0 {
   width: 100%;
   height: 100%;
 }
-._1a1ozfd4-1-16-0 stop {
+._1a1ozfd4-1-17-0 stop {
   stop-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a1ozfd5-1-16-0 {
+._1a1ozfd5-1-17-0 {
   width: 100%;
   height: 100%;
   fill: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
 @media (prefers-reduced-motion) {
-  ._1a1ozfd6-1-16-0 {
+  ._1a1ozfd6-1-17-0 {
     display: contents;
   }
 }

package/content/skeleton/Skeleton.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
 var import_useId = require("../../core/hooks/useId.js");
+const COMPONENT_NAME = "Skeleton";
 const Skeleton = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
@@ -58,6 +59,7 @@ const Skeleton = (0, import_react.forwardRef)(
         className: (0, import_clsx.default)((0, import_Skeleton_css.skeletonPlaceholderCSS)({ variant }), consumerClassName),
         style: { width, height, ...consumerStyle },
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.SkeletonGradient, { id: gradientId }) }),
@@ -69,3 +71,4 @@ const Skeleton = (0, import_react.forwardRef)(
     );
   }
 );
+Skeleton.displayName = COMPONENT_NAME;

package/content/skeleton/Skeleton.sty.js

@@ -27,8 +27,8 @@ __export(Skeleton_css_exports, {
 module.exports = __toCommonJS(Skeleton_css_exports);
 var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-16-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-16-0", rounded: "_1a1ozfd2-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });
-var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-16-0";
-var skeletonSvgCSS = "_1a1ozfd3-1-16-0";
-var skeletonSvgGradientCSS = "_1a1ozfd4-1-16-0";
-var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-16-0";
+var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd0-1-17-0", variantClassNames: { variant: { "default": "_1a1ozfd1-1-17-0", rounded: "_1a1ozfd2-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
+var skeletonSvgBackgroundFillCSS = "_1a1ozfd5-1-17-0";
+var skeletonSvgCSS = "_1a1ozfd3-1-17-0";
+var skeletonSvgGradientCSS = "_1a1ozfd4-1-17-0";
+var skeletonSvgGradientRectCSS = "_1a1ozfd6-1-17-0";

package/content/skeleton/SkeletonText.js

@@ -26,6 +26,7 @@ var import_react = require("react");
 var import_Skeleton_css = require("./Skeleton.sty.js");
 var import_utils = require("./utils.js");
 var import_useId = require("../../core/hooks/useId.js");
+const COMPONENT_NAME = "SkeletonText";
 const lineHeight = 12;
 const linePadding = 8;
 const baseYOffset = linePadding * 0.5;
@@ -61,6 +62,7 @@ const SkeletonText = (0, import_react.forwardRef)(
           ...consumerStyle
         },
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: import_Skeleton_css.skeletonSvgCSS, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.SkeletonGradient, { id: gradientId }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mask", { id: maskId, children: new Array(lines).fill(null).map((_, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -86,3 +88,4 @@ const SkeletonText = (0, import_react.forwardRef)(
     );
   }
 );
+SkeletonText.displayName = COMPONENT_NAME;

package/core/components/app-root/AppRoot.js

@@ -30,6 +30,7 @@ var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_AppRoot_css = require("./AppRoot.sty.js");
 var import_useCurrentTheme = require("../../hooks/useCurrentTheme.js");
 var import_FocusProvider = require("../../providers/FocusProvider.js");
+const COMPONENT_NAME = "AppRoot";
 function getBaseHref() {
   const baseElement = document.querySelector("base");
   const href = baseElement?.href ?? "/";
@@ -83,6 +84,7 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-theme": theme,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "data-dt-component": COMPONENT_NAME,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_intl.IntlProvider,
           {
@@ -97,4 +99,4 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
     );
   }
 );
-AppRoot.displayName = "AppRoot";
+AppRoot.displayName = COMPONENT_NAME;

package/core/hooks/useBehavioralTrackingProps.d.ts

@@ -0,0 +1,2 @@
+import type { BehaviorTrackingProps } from '../types/behavior-tracking-props.js';
+export declare const useBehavioralTrackingProps: <TProps extends object>(props: TProps) => [BehaviorTrackingProps, Omit<TProps, keyof BehaviorTrackingProps>];

package/core/hooks/useBehavioralTrackingProps.js

@@ -0,0 +1,46 @@
+"use strict";
+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 useBehavioralTrackingProps_exports = {};
+__export(useBehavioralTrackingProps_exports, {
+  useBehavioralTrackingProps: () => useBehavioralTrackingProps
+});
+module.exports = __toCommonJS(useBehavioralTrackingProps_exports);
+var import_react = require("react");
+const behaviorTrackingPropKeys = [
+  "data-dt-content",
+  "data-dt-name",
+  "data-dt-children-name",
+  "data-dt-features",
+  "data-dt-properties",
+  "data-dt-mouse-over",
+  "data-dt-value-content",
+  "data-dt-children-value-content",
+  "data-dt-ancestor"
+];
+const useBehavioralTrackingProps = (props) => (0, import_react.useMemo)(() => {
+  const behavioralTrackingProps = {};
+  const restProps = { ...props };
+  for (const [key, value] of Object.entries(props)) {
+    if (behaviorTrackingPropKeys.includes(key) && typeof value === "string") {
+      behavioralTrackingProps[key] = value;
+      delete restProps[key];
+    }
+  }
+  return [behavioralTrackingProps, restProps];
+}, [props]);

package/core/index.d.ts

@@ -3,6 +3,7 @@ export { FocusScope, type FocusScopeProps, } from './components/focus-scope/Focu
 export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
 export { useCurrentTheme } from './hooks/useCurrentTheme.js';
 export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
+export { type VariantType, type UseFocusRingProps, type FocusRingProps, useFocusRing, } from './styles/useFocusRing.js';
 export { FocusProvider as _FocusProvider, type Modality as _Modality, } from './providers/FocusProvider.js';
 export type { MaskingProps } from './types/masking-props.js';
 export type { DataTestId } from './types/data-props.js';
@@ -25,3 +26,4 @@ export type { AriaDisabledProps, AriaLabelingProps, } from './types/a11y-props.j
 export type { DOMProps } from './types/dom.js';
 export { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';
 export { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';
+export type { BehaviorTrackingProps } from './types/behavior-tracking-props.js';

package/core/index.js

@@ -34,6 +34,7 @@ __export(core_exports, {
   _useFocusContext: () => import_useFocusContext.useFocusContext,
   _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
   useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme,
+  useFocusRing: () => import_useFocusRing.useFocusRing,
   useId: () => import_useId.useId
 });
 module.exports = __toCommonJS(core_exports);
@@ -41,6 +42,7 @@ var import_AppRoot = require("./components/app-root/AppRoot.js");
 var import_FocusScope = require("./components/focus-scope/FocusScope.js");
 var import_useCurrentTheme = require("./hooks/useCurrentTheme.js");
 var import_useFocusContext = require("./hooks/useFocusContext.js");
+var import_useFocusRing = require("./styles/useFocusRing.js");
 var import_FocusProvider = require("./providers/FocusProvider.js");
 var import_attempt_focus = require("./utils/focus-management/attempt-focus.js");
 var import_focus_first_descendant = require("./utils/focus-management/focus-first-descendant.js");

package/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-1-16-0 {
+._z2r50s3-1-17-0 {
   outline: none;
 }
-._z2r50s3-1-16-0:focus-visible {
+._z2r50s3-1-17-0:focus-visible {
   outline: none;
 }
-._z2r50s4-1-16-0 {
+._z2r50s4-1-17-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-16-0);
-  background-color: var(--_z2r50s2-1-16-0);
-}
-._z2r50s5-1-16-0._z2r50s5-1-16-0 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-16-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-16-0);
-}
-._z2r50s6-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-1-16-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-17-0);
+  background-color: var(--_z2r50s2-1-17-0);
+}
+._z2r50s5-1-17-0._z2r50s5-1-17-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-17-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-17-0);
+}
+._z2r50s6-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-1-17-0:focus-within {
   outline: none;
 }
-._z2r50sc-1-16-0:focus-within {
+._z2r50sc-1-17-0._z2r50sc-1-17-0:focus-within {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-16-0);
-  background-color: var(--_z2r50s2-1-16-0);
-}
-._z2r50sd-1-16-0:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-16-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-16-0);
-}
-._z2r50se-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-1-16-0 {
-  --_z2r50s0-1-16-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-1-16-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-1-16-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-17-0);
+  background-color: var(--_z2r50s2-1-17-0);
+}
+._z2r50sd-1-17-0._z2r50sd-1-17-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-17-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-17-0);
+}
+._z2r50se-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-1-17-0 {
+  --_z2r50s0-1-17-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-1-17-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-1-17-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/core/styles/focusRing.sty.d.ts

@@ -57,15 +57,19 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
 export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     minimal: {
         true: {
-            ':focus-within': {
-                borderRadius: string;
-                boxShadow: string;
-                backgroundColor: `var(--${string})`;
+            selectors: {
+                '&&:focus-within': {
+                    borderRadius: string;
+                    boxShadow: string;
+                    backgroundColor: `var(--${string})`;
+                };
             };
         };
         false: {
-            ':focus-within': {
-                boxShadow: string;
+            selectors: {
+                '&&:focus-within': {
+                    boxShadow: string;
+                };
             };
         };
     };

package/core/styles/focusRing.sty.js

@@ -24,5 +24,5 @@ __export(focusRing_css_exports, {
 module.exports = __toCommonJS(focusRing_css_exports);
 var import_focusRing_css_ts_vanilla = require("./focusRing.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-16-0", variantClassNames: { minimal: { true: "_z2r50s4-1-16-0", false: "_z2r50s5-1-16-0" }, variant: { neutral: "_z2r50s6-1-16-0", primary: "_z2r50s7-1-16-0", success: "_z2r50s8-1-16-0", warning: "_z2r50s9-1-16-0", critical: "_z2r50sa-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-16-0", variantClassNames: { minimal: { true: "_z2r50sc-1-16-0", false: "_z2r50sd-1-16-0" }, variant: { neutral: "_z2r50se-1-16-0", primary: "_z2r50sf-1-16-0", success: "_z2r50sg-1-16-0", warning: "_z2r50sh-1-16-0", critical: "_z2r50si-1-16-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-17-0", variantClassNames: { minimal: { true: "_z2r50s4-1-17-0", false: "_z2r50s5-1-17-0" }, variant: { neutral: "_z2r50s6-1-17-0", primary: "_z2r50s7-1-17-0", success: "_z2r50s8-1-17-0", warning: "_z2r50s9-1-17-0", critical: "_z2r50sa-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-17-0", variantClassNames: { minimal: { true: "_z2r50sc-1-17-0", false: "_z2r50sd-1-17-0" }, variant: { neutral: "_z2r50se-1-17-0", primary: "_z2r50sf-1-17-0", success: "_z2r50sg-1-17-0", warning: "_z2r50sh-1-17-0", critical: "_z2r50si-1-17-0" } }, defaultVariants: {}, compoundVariants: [] });

package/core/styles/focusRingStatic.css

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

package/core/styles/focusRingStatic.sty.d.ts

@@ -0,0 +1,77 @@
+declare const outerColor: `var(--${string})`;
+declare const innerColor: `var(--${string})`;
+declare const boxShadow: `var(--${string})`;
+declare const width: `var(--${string})`;
+export declare const focusRingStatic: import("@vanilla-extract/recipes").RuntimeFn<{
+    minimal: {
+        true: {
+            vars: {
+                [width]: string;
+                [boxShadow]: string;
+            };
+        };
+        false: {
+            vars: {
+                [width]: string;
+                [boxShadow]: string;
+            };
+        };
+    };
+    disabled: {
+        true: {
+            vars: {
+                [boxShadow]: string;
+            };
+        };
+    };
+    when: {
+        'focus-visible': {
+            ':focus-visible': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+        'focus-within': {
+            ':focus-within': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+        focus: {
+            ':focus': {
+                boxShadow: `var(--${string})`;
+            };
+        };
+    };
+    color: {
+        neutral: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        success: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [outerColor]: string;
+                [innerColor]: string;
+            };
+        };
+    };
+}>;
+export {};

package/core/styles/focusRingStatic.sty.js

@@ -0,0 +1,26 @@
+"use strict";
+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 focusRingStatic_css_exports = {};
+__export(focusRingStatic_css_exports, {
+  focusRingStatic: () => focusRingStatic
+});
+module.exports = __toCommonJS(focusRingStatic_css_exports);
+var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-1-17-0", variantClassNames: { minimal: { true: "_z0fq9b5-1-17-0", false: "_z0fq9b6-1-17-0" }, disabled: { true: "_z0fq9b7-1-17-0" }, when: { "focus-visible": "_z0fq9b8-1-17-0", "focus-within": "_z0fq9b9-1-17-0", focus: "_z0fq9ba-1-17-0" }, color: { neutral: "_z0fq9bb-1-17-0", primary: "_z0fq9bc-1-17-0", success: "_z0fq9bd-1-17-0", warning: "_z0fq9be-1-17-0", critical: "_z0fq9bf-1-17-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/styles/useFocusRing.d.ts

@@ -1,7 +1,7 @@
 import { type FocusEvent as ReactFocusEvent } from 'react';
-/** @internal */
+/** @public */
 export type VariantType = 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
-/** @internal */
+/** @public */
 export type UseFocusRingProps = {
     /**
      * A minimal focus outline is available for smaller content elements like links. This variant is applied when set to true.
@@ -27,20 +27,21 @@ export type UseFocusRingProps = {
      */
     disabled?: boolean;
 };
+/** @public */
 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: ReactFocusEvent) => void;
-        onBlur: (e: ReactFocusEvent) => void;
+        onFocus?: (e: ReactFocusEvent) => void;
+        onBlur?: (e: ReactFocusEvent) => 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
+ * Returns the css classNames that can be applied to the component in order to show the correct focus outline.
+ * @public
  */
 export declare function useFocusRing(props?: UseFocusRingProps): FocusRingProps;

package/core/styles/useFocusRing.js

@@ -39,20 +39,20 @@ function useFocusRing(props = {}) {
       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 = (0, import_react.useMemo)(() => {
+    return {
+      onBlur: (event) => {
+        if (event.currentTarget === event.target) {
+          setIsFocused(false);
+        }
+      },
+      onFocus: (event) => {
+        if (event.currentTarget === event.target) {
+          setIsFocused(true);
+        }
+      }
+    };
   }, []);
-  const focusProps = {
-    onFocus,
-    onBlur
-  };
   if ((ignoreModality || modality === "keyboard") && isFocused || focusWithin) {
     if (isMinimal) {
       return {