@dynatrace/strato-components 1.9.1 → 1.11.0

package/esm/core/components/app-root/AppRoot.css

@@ -59,15 +59,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto;
 }
 @font-face {
@@ -75,23 +67,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto;
 }
 @font-face {
@@ -99,15 +75,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto;
 }
 @font-face {
@@ -115,23 +83,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto;
 }
 @font-face {
@@ -139,15 +91,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -155,23 +99,7 @@
   font-weight: 400;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -179,15 +107,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSZ0me8iUI0lkQ.woff2) format('woff2');
-  unicode-range: U+0100-024F;
-  unicode-range: U+0259;
-  unicode-range: U+1E00-1EFF;
-  unicode-range: U+2020;
-  unicode-range: U+20A0-20AB;
-  unicode-range: U+20AD-20CF;
-  unicode-range: U+2113;
-  unicode-range: U+2C60-2C7F;
-  unicode-range: U+A720-A7FF;
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
   font-family: Roboto Mono;
 }
 @font-face {
@@ -195,23 +115,7 @@
   font-weight: 500;
   font-display: swap;
   src: url(https://dt-cdn.net/fonts/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0me8iUI0.woff2) format('woff2');
-  unicode-range: U+0000-00FF;
-  unicode-range: U+0131;
-  unicode-range: U+0152-0153;
-  unicode-range: U+02BB-02BC;
-  unicode-range: U+02C6;
-  unicode-range: U+02DA;
-  unicode-range: U+02DC;
-  unicode-range: U+2000-206F;
-  unicode-range: U+2074;
-  unicode-range: U+20AC;
-  unicode-range: U+2122;
-  unicode-range: U+2191;
-  unicode-range: U+2193;
-  unicode-range: U+2212;
-  unicode-range: U+2215;
-  unicode-range: U+FEFF;
-  unicode-range: U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   font-family: Roboto Mono;
 }
 :root {
@@ -219,12 +123,12 @@
   --dt-borders-style-dashed: dashed;
   --dt-borders-width-default: 1px;
   --dt-borders-width-emphasized: 2px;
-  --dt-borders-radius-surface-subdued: 12px;
-  --dt-borders-radius-surface-default: 16px;
-  --dt-borders-radius-container-subdued: 8px;
-  --dt-borders-radius-container-default: 12px;
-  --dt-borders-radius-field-subdued: 4px;
-  --dt-borders-radius-field-default: 8px;
+  --dt-borders-radius-surface-subdued: 9px;
+  --dt-borders-radius-surface-default: 12px;
+  --dt-borders-radius-container-subdued: 6px;
+  --dt-borders-radius-container-default: 9px;
+  --dt-borders-radius-field-subdued: 3px;
+  --dt-borders-radius-field-default: 6px;
   --dt-borders-radius-field-emphasized: 9999px;
   --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #2d2e4e0d;
   --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12;
@@ -1048,12 +952,12 @@
   --dt-borders-style-dashed: dashed;
   --dt-borders-width-default: 1px;
   --dt-borders-width-emphasized: 2px;
-  --dt-borders-radius-surface-subdued: 12px;
-  --dt-borders-radius-surface-default: 16px;
-  --dt-borders-radius-container-subdued: 8px;
-  --dt-borders-radius-container-default: 12px;
-  --dt-borders-radius-field-subdued: 4px;
-  --dt-borders-radius-field-default: 8px;
+  --dt-borders-radius-surface-subdued: 9px;
+  --dt-borders-radius-surface-default: 12px;
+  --dt-borders-radius-container-subdued: 6px;
+  --dt-borders-radius-container-default: 9px;
+  --dt-borders-radius-field-subdued: 3px;
+  --dt-borders-radius-field-default: 6px;
   --dt-borders-radius-field-emphasized: 9999px;
   --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #f0f0f514;
   --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #f0f0f514, 0px 1px 2px #112, 0px 4px 8px #112c;
@@ -1912,12 +1816,12 @@ body {
     --dt-borders-style-dashed: dashed;
     --dt-borders-width-default: 1px;
     --dt-borders-width-emphasized: 2px;
-    --dt-borders-radius-surface-subdued: 12px;
-    --dt-borders-radius-surface-default: 16px;
-    --dt-borders-radius-container-subdued: 8px;
-    --dt-borders-radius-container-default: 12px;
-    --dt-borders-radius-field-subdued: 4px;
-    --dt-borders-radius-field-default: 8px;
+    --dt-borders-radius-surface-subdued: 9px;
+    --dt-borders-radius-surface-default: 12px;
+    --dt-borders-radius-container-subdued: 6px;
+    --dt-borders-radius-container-default: 9px;
+    --dt-borders-radius-field-subdued: 3px;
+    --dt-borders-radius-field-default: 6px;
     --dt-borders-radius-field-emphasized: 9999px;
     --dt-box-shadows-surface-flat-rest: 0px 0px 0px 1px #2d2e4e0d;
     --dt-box-shadows-surface-flat-hover: 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12;
@@ -2737,8 +2641,7 @@ body {
   }
 }
 @supports (-moz-appearance:none) {
-  html, body {
-    scrollbar-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb) var(--dt-colors-background-base-default, #f9f9fa);
-    scrollbar-width: thin;
+  * {
+    scrollbar-color: var(--dt-colors-border-neutral-default, #dadbe4) transparent;
   }
 }

package/esm/core/hooks/useId.js

@@ -0,0 +1,12 @@
+import { useMemo, useId as useReactId } from "react";
+function useId() {
+  const id = useReactId();
+  const sanitizedId = useMemo(() => {
+    return id.replace(":", "\xAB").replace(":", "\xBB");
+  }, [id]);
+  return sanitizedId;
+}
+export {
+  useId
+};
+//# sourceMappingURL=useId.js.map

package/esm/core/hooks/useId.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useId.ts"],
+  "sourcesContent": ["// The one place where we actually need to use this import.\n// eslint-disable-next-line no-restricted-imports\nimport { useMemo, useId as useReactId } from 'react';\n\n/**\n * Custom hook to generate a sanitized react useId for use in DOM selectors.\n *\n * React's `useId()` may return IDs containing colons (e.g., `:r1:`), which are valid in HTML\n * but **not valid CSS identifiers**. This can cause issues when using `querySelector` or when\n * libraries like `nwsapi` attempt to parse selectors, especially in test environments like jest\n * with jsdom.\n *\n * This hook replaces colons with a safe, reversible encoding (`\u00AB` and `\u00BB`) to ensure the ID\n * remains unique and usable in CSS selectors. The characters are chosen to be the same as in the\n * react 19.2+ implementation.\n *\n * Background:\n * - React previously used colons in generated IDs to avoid collisions.\n * - This caused parsing errors in selector engines like `nwsapi` when used in test environments.\n * - React addressed this in [facebook/react#32001](https://github.com/facebook/react/pull/32001) in React 19.2+.\n *\n * This hook provides a workaround for environments still using older React versions or needing\n * compatibility with selector engines that strictly enforce CSS syntax.\n *\n * @returns A sanitized ID string safe for use in `querySelector` and CSS selectors.\n * @public\n */\nexport function useId() {\n  const id = useReactId();\n\n  const sanitizedId = useMemo(() => {\n    return id.replace(':', '\\u00AB').replace(':', '\\u00BB');\n  }, [id]);\n\n  return sanitizedId;\n}\n"],
+  "mappings": "AAEA,SAAS,SAAS,SAAS,kBAAkB;AAyBtC,SAAS,QAAQ;AACtB,QAAM,KAAK,WAAW;AAEtB,QAAM,cAAc,QAAQ,MAAM;AAChC,WAAO,GAAG,QAAQ,KAAK,MAAQ,EAAE,QAAQ,KAAK,MAAQ;AAAA,EACxD,GAAG,CAAC,EAAE,CAAC;AAEP,SAAO;AACT;",
+  "names": []
+}

package/esm/core/index.js

@@ -17,6 +17,7 @@ import {
   mergeProps
 } from "./utils/merge-props.js";
 import { useAriaLabelingProps } from "./hooks/useAriaLabelingProps.js";
+import { useId } from "./hooks/useId.js";
 import { useSafeForwardProps } from "./hooks/useSafeForwardProps.js";
 import { canReceiveDefaultTextFormat } from "./utils/can-receive-default-text-format.js";
 import { parseBoolean } from "./utils/parse-boolean.js";
@@ -36,6 +37,7 @@ export {
   useAriaLabelingProps as _useAriaLabelingProps,
   useFocusContext as _useFocusContext,
   useSafeForwardProps as _useSafeForwardProps,
-  useCurrentTheme
+  useCurrentTheme,
+  useId
 };
 //# sourceMappingURL=index.js.map

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,\n  type 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';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\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';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\n"],
-  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACE;AAAA,OAEK;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAUP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAgC,2BAA4B;AAO5D,SAAwC,mCAAoC;AAC5E,SAAyB,oBAAqB;",
+  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope,\n  type 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';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\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';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from './utils/can-receive-default-text-format.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\n"],
+  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACE;AAAA,OAEK;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAUP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAS,aAAa;AACtB,SAAgC,2BAA4B;AAO5D,SAAwC,mCAAoC;AAC5E,SAAyB,oBAAqB;",
   "names": []
 }

package/esm/core/styles/focusRing.css

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

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

@@ -1,7 +1,7 @@
 import "./focusRing.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var focusRingCSS = _7a468({ defaultClassName: "_z2r50s3-1-9-1", variantClassNames: { minimal: { true: "_z2r50s4-1-9-1", false: "_z2r50s5-1-9-1" }, variant: { neutral: "_z2r50s6-1-9-1", primary: "_z2r50s7-1-9-1", success: "_z2r50s8-1-9-1", warning: "_z2r50s9-1-9-1", critical: "_z2r50sa-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithinCSS = _7a468({ defaultClassName: "_z2r50sb-1-9-1", variantClassNames: { minimal: { true: "_z2r50sc-1-9-1", false: "_z2r50sd-1-9-1" }, variant: { neutral: "_z2r50se-1-9-1", primary: "_z2r50sf-1-9-1", success: "_z2r50sg-1-9-1", warning: "_z2r50sh-1-9-1", critical: "_z2r50si-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingCSS = _7a468({ defaultClassName: "_z2r50s3-1-11-0", variantClassNames: { minimal: { true: "_z2r50s4-1-11-0", false: "_z2r50s5-1-11-0" }, variant: { neutral: "_z2r50s6-1-11-0", primary: "_z2r50s7-1-11-0", success: "_z2r50s8-1-11-0", warning: "_z2r50s9-1-11-0", critical: "_z2r50sa-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = _7a468({ defaultClassName: "_z2r50sb-1-11-0", variantClassNames: { minimal: { true: "_z2r50sc-1-11-0", false: "_z2r50sd-1-11-0" }, variant: { neutral: "_z2r50se-1-11-0", primary: "_z2r50sf-1-11-0", success: "_z2r50sg-1-11-0", warning: "_z2r50sh-1-11-0", critical: "_z2r50si-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   focusRingCSS,
   focusRingFocusWithinCSS

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

@@ -1,7 +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:'_z2r50s3-1-9-1',variantClassNames:{minimal:{true:'_z2r50s4-1-9-1',false:'_z2r50s5-1-9-1'},variant:{neutral:'_z2r50s6-1-9-1',primary:'_z2r50s7-1-9-1',success:'_z2r50s8-1-9-1',warning:'_z2r50s9-1-9-1',critical:'_z2r50sa-1-9-1'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'_z2r50sb-1-9-1',variantClassNames:{minimal:{true:'_z2r50sc-1-9-1',false:'_z2r50sd-1-9-1'},variant:{neutral:'_z2r50se-1-9-1',primary:'_z2r50sf-1-9-1',success:'_z2r50sg-1-9-1',warning:'_z2r50sh-1-9-1',critical:'_z2r50si-1-9-1'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvT,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'_z2r50s3-1-11-0',variantClassNames:{minimal:{true:'_z2r50s4-1-11-0',false:'_z2r50s5-1-11-0'},variant:{neutral:'_z2r50s6-1-11-0',primary:'_z2r50s7-1-11-0',success:'_z2r50s8-1-11-0',warning:'_z2r50s9-1-11-0',critical:'_z2r50sa-1-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'_z2r50sb-1-11-0',variantClassNames:{minimal:{true:'_z2r50sc-1-11-0',false:'_z2r50sd-1-11-0'},variant:{neutral:'_z2r50se-1-11-0',primary:'_z2r50sf-1-11-0',success:'_z2r50sg-1-11-0',warning:'_z2r50sh-1-11-0',critical:'_z2r50si-1-11-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,SAAQ,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/T,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,SAAQ,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/core/styles/useFocusRing.js

@@ -4,7 +4,7 @@ import {
   useState
 } from "react";
 import { focusRingCSS, focusRingFocusWithinCSS } from "./focusRing.sty.js";
-import { _useFocusContext } from "../index.js";
+import { useFocusContext } from "../hooks/useFocusContext.js";
 function useFocusRing(props = {}) {
   const {
     variant = "neutral",
@@ -14,7 +14,7 @@ function useFocusRing(props = {}) {
     disabled = false
   } = props;
   const [isFocused, setIsFocused] = useState(false);
-  const { modality } = _useFocusContext();
+  const { modality } = useFocusContext();
   useEffect(() => {
     if (disabled) {
       setIsFocused(false);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/useFocusRing.ts"],
-  "sourcesContent": ["import {\n  type FocusEvent as ReactFocusEvent,\n  type FocusEventHandler,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { focusRingCSS, focusRingFocusWithinCSS } from './focusRing.sty.js';\nimport { _useFocusContext } from '../index.js';\n\n/** @internal */\nexport type VariantType =\n  | 'neutral'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'critical';\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: ReactFocusEvent) => void;\n    onBlur: (e: ReactFocusEvent) => 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;AAyD1B,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;",
+  "sourcesContent": ["import {\n  type FocusEvent as ReactFocusEvent,\n  type FocusEventHandler,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { focusRingCSS, focusRingFocusWithinCSS } from './focusRing.sty.js';\nimport { useFocusContext } from '../hooks/useFocusContext.js';\n\n/** @internal */\nexport type VariantType =\n  | 'neutral'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'critical';\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: ReactFocusEvent) => void;\n    onBlur: (e: ReactFocusEvent) => 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,uBAAuB;AAyDzB,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,gBAAgB;AAErC,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": []
 }