@yahoo/uds 3.137.0 → 3.137.2

package/dist/components/Scrim.cjs

@@ -11,7 +11,7 @@ const Scrim = (0, react.forwardRef)(function Scrim({ className, style, variant =
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,
 		display: "block",
-		className: require_styles_styler.cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
+		className: require_styles_styler.cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 motion-reduce:transition-none data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
 		...props,
 		style: {
 			...style,

package/dist/components/Scrim.js

@@ -9,7 +9,7 @@ const Scrim = forwardRef(function Scrim({ className, style, variant = "default",
 	return /* @__PURE__ */ jsx(Box, {
 		ref,
 		display: "block",
-		className: cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
+		className: cx(position === "fixed" ? "fixed" : "absolute", "inset-0 z-40", animateOpacity ? "transition-opacity duration-150 motion-reduce:transition-none data-[enter]:opacity-100 [&:not([data-enter])]:opacity-0" : "opacity-100", "uds-bgBlurFallback", rootVariantClass, className),
 		...props,
 		style: {
 			...style,

package/dist/components/client/BottomSheet/BottomSheet.cjs

@@ -5,8 +5,10 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_Box = require("../../Box.cjs");
 const require_components_Scrim = require("../../Scrim.cjs");
+const require_utils_exposeAriakitScrollbarWidth = require("../../../utils/exposeAriakitScrollbarWidth.cjs");
 const require_components_client_BottomSheet_BottomSheetHandle = require("./BottomSheetHandle.cjs");
 const require_components_client_BottomSheet_BottomSheetInternalContext = require("./BottomSheetInternalContext.cjs");
+const require_components_client_BottomSheet_getBottomSheetSnapTransition = require("./getBottomSheetSnapTransition.cjs");
 const require_components_client_BottomSheet_UDSBottomSheetConfigProvider = require("./UDSBottomSheetConfigProvider.cjs");
 const require_components_client_BottomSheet_useBottomSheetDrag = require("./useBottomSheetDrag.cjs");
 const require_components_client_BottomSheet_useBottomSheetSnapModel = require("./useBottomSheetSnapModel.cjs");
@@ -17,6 +19,7 @@ const require_components_client_BottomSheet_useVirtualKeyboard = require("./useV
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ariakit_react = require("@ariakit/react");
+let motion_react = require("motion/react");
 //#region src/components/client/BottomSheet/BottomSheet.tsx
 /**
 * Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
@@ -31,7 +34,8 @@ const DRAG_DISMISS_THRESHOLD_RATIO = .25;
 * Keeps a visible sliver of page content so the fully expanded state still reads as a bottom sheet.
 */
 const SHEET_MAX_HEIGHT_TOP_OFFSET_PX = 26;
-function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
+require_utils_exposeAriakitScrollbarWidth.exposeAriakitScrollbarWidth();
+function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, reduceMotion: forceReduceMotion = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
 	const storeFromContext = (0, _ariakit_react.useDialogContext)();
 	const dialogStore = controllerProp ? require_components_client_BottomSheet_useBottomSheetStore.getBottomSheetInternal(controllerProp) : storeFromContext;
 	const { backgroundColor: configBackgroundColor } = require_components_client_BottomSheet_UDSBottomSheetConfigProvider.useBottomSheetConfig();
@@ -39,6 +43,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const isOpen = dialogStore.useState().open;
 	const keyboardHeightPx = require_components_client_BottomSheet_useVirtualKeyboard.useVirtualKeyboard(isOpen);
 	const viewportHeightPx = require_components_client_BottomSheet_useViewportHeight.useViewportHeight();
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)() ?? false;
+	const reducedMotion = forceReduceMotion || prefersReducedMotion;
 	const isDraggingRef = (0, react.useRef)(false);
 	const forceZeroMarginsRef = (0, react.useRef)(false);
 	forceZeroMarginsRef.current = keyboardHeightPx > 0;
@@ -89,10 +95,20 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 			if (!el.style.height) {
 				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
+			} else if (reducedMotion) {
+				el.style.removeProperty("transition");
+				applySheetHeight(el, h);
+				applyExpansionMargins(el, nextTranslatePx);
 			} else {
-				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
-				let transition = `height 500ms ${easing}`;
-				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
+				const transition = require_components_client_BottomSheet_getBottomSheetSnapTransition.getBottomSheetSnapTransition({
+					prefersReducedMotion: reducedMotion,
+					animateExpansionMargins: expansionThresholdRef.current != null
+				});
+				if (!transition) {
+					applySheetHeight(el, h);
+					applyExpansionMargins(el, nextTranslatePx);
+					return;
+				}
 				el.style.transition = transition;
 				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
@@ -105,7 +121,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		}, [
 			applySheetHeight,
 			applyExpansionMargins,
-			expansionThresholdRef
+			expansionThresholdRef,
+			reducedMotion
 		]),
 		isDraggingRef
 	});
@@ -186,6 +203,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		hideOnEscape: dismissible ? hideOnEscape : false,
 		hideOnInteractOutside,
 		onClose,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
 		backdrop: dialogBackdrop,
 		portal,
 		portalElement,

package/dist/components/client/BottomSheet/BottomSheet.d.cts

@@ -6,7 +6,13 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DialogProps } from "@ariakit/react";
 
 //#region src/components/client/BottomSheet/BottomSheet.d.ts
-interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'> {
+type BottomSheetA11yProps = Pick<DialogProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
+interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'>, BottomSheetA11yProps {
+  /**
+   * Reduce motion and transition effects.
+   * @default false
+   */
+  reduceMotion?: boolean;
   /**
    * Controller returned from `useBottomSheetStore()`.
    * @remarks If omitted, uses the nearest `BottomSheetProvider` context.
@@ -65,6 +71,10 @@ declare function BottomSheet({
   showHandleIndicator,
   hideOnEscape,
   onClose,
+  reduceMotion: forceReduceMotion,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   backdrop,
   preventBodyScroll,
   slotProps,

package/dist/components/client/BottomSheet/BottomSheet.d.ts

@@ -7,7 +7,13 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DialogProps } from "@ariakit/react";
 
 //#region src/components/client/BottomSheet/BottomSheet.d.ts
-interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'> {
+type BottomSheetA11yProps = Pick<DialogProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
+interface BottomSheetProps extends UniversalBottomSheetProps, Pick<DialogProps, 'unmountOnHide' | 'onClose' | 'preventBodyScroll' | 'modal'>, BottomSheetA11yProps {
+  /**
+   * Reduce motion and transition effects.
+   * @default false
+   */
+  reduceMotion?: boolean;
   /**
    * Controller returned from `useBottomSheetStore()`.
    * @remarks If omitted, uses the nearest `BottomSheetProvider` context.
@@ -66,6 +72,10 @@ declare function BottomSheet({
   showHandleIndicator,
   hideOnEscape,
   onClose,
+  reduceMotion: forceReduceMotion,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   backdrop,
   preventBodyScroll,
   slotProps,

package/dist/components/client/BottomSheet/BottomSheet.js

@@ -3,8 +3,10 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Scrim } from "../../Scrim.js";
+import { exposeAriakitScrollbarWidth } from "../../../utils/exposeAriakitScrollbarWidth.js";
 import { BottomSheetHandle } from "./BottomSheetHandle.js";
 import { BottomSheetInternalContext } from "./BottomSheetInternalContext.js";
+import { getBottomSheetSnapTransition } from "./getBottomSheetSnapTransition.js";
 import { useBottomSheetConfig } from "./UDSBottomSheetConfigProvider.js";
 import { useBottomSheetDrag } from "./useBottomSheetDrag.js";
 import { useBottomSheetSnapModel } from "./useBottomSheetSnapModel.js";
@@ -15,6 +17,7 @@ import { useVirtualKeyboard } from "./useVirtualKeyboard.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog, useDialogContext } from "@ariakit/react";
+import { useReducedMotion } from "motion/react";
 //#region src/components/client/BottomSheet/BottomSheet.tsx
 /**
 * Drag-to-dismiss distance threshold as a ratio of the lowest snap point's
@@ -29,7 +32,8 @@ const DRAG_DISMISS_THRESHOLD_RATIO = .25;
 * Keeps a visible sliver of page content so the fully expanded state still reads as a bottom sheet.
 */
 const SHEET_MAX_HEIGHT_TOP_OFFSET_PX = 26;
-function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
+exposeAriakitScrollbarWidth();
+function BottomSheet({ children, className: sheetClassName, controller: controllerProp, variant = "default", snapPoints: snapPointsProp, defaultSnapPointIndex = 0, snapPointIndex: snapPointIndexProp, onSnapPointChange, height, modal = true, portal = true, portalElement, dismissible = true, enableDrag = true, showHandleIndicator = true, hideOnEscape = true, onClose, reduceMotion: forceReduceMotion = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, backdrop, preventBodyScroll, slotProps, fullWidthAtMaxSnap = false }) {
 	const storeFromContext = useDialogContext();
 	const dialogStore = controllerProp ? getBottomSheetInternal(controllerProp) : storeFromContext;
 	const { backgroundColor: configBackgroundColor } = useBottomSheetConfig();
@@ -37,6 +41,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 	const isOpen = dialogStore.useState().open;
 	const keyboardHeightPx = useVirtualKeyboard(isOpen);
 	const viewportHeightPx = useViewportHeight();
+	const prefersReducedMotion = useReducedMotion() ?? false;
+	const reducedMotion = forceReduceMotion || prefersReducedMotion;
 	const isDraggingRef = useRef(false);
 	const forceZeroMarginsRef = useRef(false);
 	forceZeroMarginsRef.current = keyboardHeightPx > 0;
@@ -87,10 +93,20 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 			if (!el.style.height) {
 				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
+			} else if (reducedMotion) {
+				el.style.removeProperty("transition");
+				applySheetHeight(el, h);
+				applyExpansionMargins(el, nextTranslatePx);
 			} else {
-				const easing = "cubic-bezier(0.32, 0.72, 0, 1)";
-				let transition = `height 500ms ${easing}`;
-				if (expansionThresholdRef.current != null) transition += `, margin-left 500ms ${easing}, margin-right 500ms ${easing}, margin-bottom 500ms ${easing}`;
+				const transition = getBottomSheetSnapTransition({
+					prefersReducedMotion: reducedMotion,
+					animateExpansionMargins: expansionThresholdRef.current != null
+				});
+				if (!transition) {
+					applySheetHeight(el, h);
+					applyExpansionMargins(el, nextTranslatePx);
+					return;
+				}
 				el.style.transition = transition;
 				applySheetHeight(el, h);
 				applyExpansionMargins(el, nextTranslatePx);
@@ -103,7 +119,8 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		}, [
 			applySheetHeight,
 			applyExpansionMargins,
-			expansionThresholdRef
+			expansionThresholdRef,
+			reducedMotion
 		]),
 		isDraggingRef
 	});
@@ -184,6 +201,9 @@ function BottomSheet({ children, className: sheetClassName, controller: controll
 		hideOnEscape: dismissible ? hideOnEscape : false,
 		hideOnInteractOutside,
 		onClose,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
 		backdrop: dialogBackdrop,
 		portal,
 		portalElement,

package/dist/components/client/BottomSheet/BottomSheetHeader.cjs

@@ -6,6 +6,7 @@ const require_styles_styler = require("../../../styles/styler.cjs");
 const require_components_Text = require("../../Text.cjs");
 const require_components_Box = require("../../Box.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
 //#region src/components/client/BottomSheet/BottomSheetHeader.tsx
 function BottomSheetHeader({ children, start, end, variant = "default", className }) {
 	const headerVariantClass = require_styles_styler.getStyles({ bottomsheetVariantHeader: variant });
@@ -20,11 +21,16 @@ function BottomSheetHeader({ children, start, end, variant = "default", classNam
 				justifyContent: "flex-start",
 				children: resolvedStart
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
-				variant: "inherit",
-				color: "inherit",
-				textAlign: "center",
-				className: "w-full",
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.DialogHeading, {
+				render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+					as: "p",
+					variant: "inherit",
+					color: "inherit",
+					textAlign: "center",
+					className: "m-0 w-full"
+				}),
+				role: "heading",
+				"aria-level": 1,
 				children
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {

package/dist/components/client/BottomSheet/BottomSheetHeader.js

@@ -4,6 +4,7 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { Text } from "../../Text.js";
 import { Box } from "../../Box.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { DialogHeading } from "@ariakit/react";
 //#region src/components/client/BottomSheet/BottomSheetHeader.tsx
 function BottomSheetHeader({ children, start, end, variant = "default", className }) {
 	const headerVariantClass = getStyles({ bottomsheetVariantHeader: variant });
@@ -18,11 +19,16 @@ function BottomSheetHeader({ children, start, end, variant = "default", classNam
 				justifyContent: "flex-start",
 				children: resolvedStart
 			}),
-			/* @__PURE__ */ jsx(Text, {
-				variant: "inherit",
-				color: "inherit",
-				textAlign: "center",
-				className: "w-full",
+			/* @__PURE__ */ jsx(DialogHeading, {
+				render: /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					variant: "inherit",
+					color: "inherit",
+					textAlign: "center",
+					className: "m-0 w-full"
+				}),
+				role: "heading",
+				"aria-level": 1,
 				children
 			}),
 			/* @__PURE__ */ jsx(Box, {

package/dist/components/client/BottomSheet/getBottomSheetSnapTransition.cjs

@@ -0,0 +1,13 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/BottomSheet/getBottomSheetSnapTransition.ts
+const SNAP_TRANSITION_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+function getBottomSheetSnapTransition({ prefersReducedMotion, animateExpansionMargins }) {
+	if (prefersReducedMotion) return;
+	let transition = `height 500ms ${SNAP_TRANSITION_EASING}`;
+	if (animateExpansionMargins) transition += `, margin-left 500ms ${SNAP_TRANSITION_EASING}, margin-right 500ms ${SNAP_TRANSITION_EASING}, margin-bottom 500ms ${SNAP_TRANSITION_EASING}`;
+	return transition;
+}
+//#endregion
+exports.getBottomSheetSnapTransition = getBottomSheetSnapTransition;

package/dist/components/client/BottomSheet/getBottomSheetSnapTransition.d.cts

@@ -0,0 +1,12 @@
+
+//#region src/components/client/BottomSheet/getBottomSheetSnapTransition.d.ts
+interface GetBottomSheetSnapTransitionParams {
+  prefersReducedMotion: boolean;
+  animateExpansionMargins: boolean;
+}
+declare function getBottomSheetSnapTransition({
+  prefersReducedMotion,
+  animateExpansionMargins
+}: GetBottomSheetSnapTransitionParams): string | undefined;
+//#endregion
+export { getBottomSheetSnapTransition };

package/dist/components/client/BottomSheet/getBottomSheetSnapTransition.d.ts

@@ -0,0 +1,13 @@
+
+"use client";
+//#region src/components/client/BottomSheet/getBottomSheetSnapTransition.d.ts
+interface GetBottomSheetSnapTransitionParams {
+  prefersReducedMotion: boolean;
+  animateExpansionMargins: boolean;
+}
+declare function getBottomSheetSnapTransition({
+  prefersReducedMotion,
+  animateExpansionMargins
+}: GetBottomSheetSnapTransitionParams): string | undefined;
+//#endregion
+export { getBottomSheetSnapTransition };

package/dist/components/client/BottomSheet/getBottomSheetSnapTransition.js

@@ -0,0 +1,12 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+//#region src/components/client/BottomSheet/getBottomSheetSnapTransition.ts
+const SNAP_TRANSITION_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+function getBottomSheetSnapTransition({ prefersReducedMotion, animateExpansionMargins }) {
+	if (prefersReducedMotion) return;
+	let transition = `height 500ms ${SNAP_TRANSITION_EASING}`;
+	if (animateExpansionMargins) transition += `, margin-left 500ms ${SNAP_TRANSITION_EASING}, margin-right 500ms ${SNAP_TRANSITION_EASING}, margin-bottom 500ms ${SNAP_TRANSITION_EASING}`;
+	return transition;
+}
+//#endregion
+export { getBottomSheetSnapTransition };

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts

@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/styles/styler.d.cts

@@ -171,10 +171,10 @@ declare const getStylesInternal: (props?: ({
   toastSizeIcon?: "default" | undefined;
   toastSizeLabel?: "default" | undefined;
   toastSizeRoot?: "default" | undefined;
-  toastVariantActionButton?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantCloseIcon?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantIcon?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantRoot?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
+  toastVariantActionButton?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantCloseIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantRoot?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
   tooltipSizeBody?: "default" | undefined;
   tooltipSizeEndContent?: "default" | undefined;
   tooltipSizeIcon?: "default" | undefined;
@@ -189,7 +189,7 @@ declare const getStylesInternal: (props?: ({
   placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
   fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
   fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  fontWeight?: "medium" | "black" | "thin" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "bold" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   textAlign?: "center" | "justify" | "start" | "end" | undefined;
@@ -221,13 +221,13 @@ declare const getStylesInternal: (props?: ({
   borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  borderWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderVerticalWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderHorizontalWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderStartWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderEndWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderTopWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderBottomWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
+  borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
   iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
   alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
@@ -245,15 +245,15 @@ declare const getStylesInternal: (props?: ({
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
+  contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
-  scaleMode?: "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
   width?: "full" | "fit" | "screen" | undefined;
   height?: "full" | "fit" | "screen" | undefined;
   dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
   insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
   nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  nestedBorderRadiusWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
+  nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   nestedBorderRadiusSpacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   nestedBorderRadius?: boolean | "first" | "last" | undefined;
 } & {

package/dist/styles/styler.d.ts

@@ -171,10 +171,10 @@ declare const getStylesInternal: (props?: ({
   toastSizeIcon?: "default" | undefined;
   toastSizeLabel?: "default" | undefined;
   toastSizeRoot?: "default" | undefined;
-  toastVariantActionButton?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantCloseIcon?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantIcon?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
-  toastVariantRoot?: "warning" | "info" | "default" | "loading" | "success" | "error" | undefined;
+  toastVariantActionButton?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantCloseIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantIcon?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
+  toastVariantRoot?: "warning" | "info" | "loading" | "default" | "success" | "error" | undefined;
   tooltipSizeBody?: "default" | undefined;
   tooltipSizeEndContent?: "default" | undefined;
   tooltipSizeIcon?: "default" | undefined;
@@ -189,7 +189,7 @@ declare const getStylesInternal: (props?: ({
   placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
   fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
   fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
-  fontWeight?: "medium" | "black" | "thin" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "bold" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
   lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
   textAlign?: "center" | "justify" | "start" | "end" | undefined;
@@ -221,13 +221,13 @@ declare const getStylesInternal: (props?: ({
   borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderBottomEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  borderWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderVerticalWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderHorizontalWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderStartWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderEndWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderTopWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
-  borderBottomWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
+  borderWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderVerticalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderHorizontalWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderStartWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderEndWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderTopWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
+  borderBottomWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
   iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
   alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
@@ -245,15 +245,15 @@ declare const getStylesInternal: (props?: ({
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
+  contentFit?: "none" | "cover" | "contain" | "fill" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
-  scaleMode?: "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
+  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
   width?: "full" | "fit" | "screen" | undefined;
   height?: "full" | "fit" | "screen" | undefined;
   dropShadow?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
   insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
   nestedBorderRadiusSize?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
-  nestedBorderRadiusWidth?: "medium" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "thick" | undefined;
+  nestedBorderRadiusWidth?: "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "none" | "thin" | "medium" | "thick" | undefined;
   nestedBorderRadiusSpacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
   nestedBorderRadius?: boolean | "first" | "last" | undefined;
 } & {