@yahoo/uds 3.161.0 → 3.162.0

package/dist/css-animation/Radio/Radio.cjs

@@ -0,0 +1,92 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../styles/styler.cjs");
+const require_components_Box = require("../../components/Box.cjs");
+const require_components_client_Radio_RadioBase = require("../../components/client/Radio/RadioBase.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/css-animation/Radio/Radio.tsx
+/**
+* CSS-animation Radio variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from '@yahoo/uds/css-animation';
+*
+* <Radio label="Name" />
+* ```
+*/
+const Radio = (0, react.forwardRef)(function Radio(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Radio_RadioBase.RadioBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(hasLabel ? "label" : "div", {
+				className: require_styles_styler.cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, checked, disabled, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
+			const classNames = {
+				radio: require_styles_styler.getStyles({
+					radioSizeRadio: size,
+					radioVariantRadio: variant,
+					radioVariantValueRadio: checked ? "checked" : "unchecked",
+					className: require_styles_styler.cx([
+						"border",
+						"uds-ring",
+						"uds-ring-within",
+						!disabled && "group-hover:scale-110",
+						!disabled && !checked && "group-active:scale-90",
+						!disabled && !checked && "group-active:uds-inset-shadow-lg-invert",
+						!disabled && checked && "group-hover:uds-inset-shadow-lg-invert",
+						cssAnimationDuration,
+						"transition-[background-color,border-color,transform]",
+						"transition-shadow"
+					])
+				}),
+				radioCircle: require_styles_styler.getStyles({
+					radioVariantRadioCircle: variant,
+					radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+					className: require_styles_styler.cx([
+						"pointer-events-none",
+						"w-[8px]",
+						"h-[8px]",
+						checked ? "opacity-100" : "opacity-0",
+						cssAnimationDuration,
+						"transition-opacity"
+					])
+				})
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				...radioSlotProps,
+				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle,
+					...radioIconSlotProps
+				})]
+			});
+		}
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+exports.Radio = Radio;

package/dist/css-animation/Radio/Radio.d.cts

@@ -0,0 +1,22 @@
+
+import { RadioProps as RadioProps$1 } from "../../components/client/Radio/types.cjs";
+import React from "react";
+
+//#region src/css-animation/Radio/Radio.d.ts
+type RadioProps = RadioProps$1;
+/**
+ * CSS-animation Radio variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from '@yahoo/uds/css-animation';
+ *
+ * <Radio label="Name" />
+ * ```
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/Radio.d.ts

@@ -0,0 +1,23 @@
+
+"use client";
+import { RadioProps as RadioProps$1 } from "../../components/client/Radio/types.js";
+import React from "react";
+
+//#region src/css-animation/Radio/Radio.d.ts
+type RadioProps = RadioProps$1;
+/**
+ * CSS-animation Radio variant. This component intentionally never imports motion.
+ *
+ * @componentType Client component
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Radio } from '@yahoo/uds/css-animation';
+ *
+ * <Radio label="Name" />
+ * ```
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/Radio.js

@@ -0,0 +1,89 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../styles/styler.js";
+import { Box } from "../../components/Box.js";
+import { RadioBase } from "../../components/client/Radio/RadioBase.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/css-animation/Radio/Radio.tsx
+/**
+* CSS-animation Radio variant. This component intentionally never imports motion.
+*
+* @componentType Client component
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Radio } from '@yahoo/uds/css-animation';
+*
+* <Radio label="Name" />
+* ```
+*/
+const Radio = forwardRef(function Radio(props, parentRef) {
+	const cssAnimationDuration = "duration-120";
+	return /* @__PURE__ */ jsx(RadioBase, {
+		...props,
+		ref: parentRef,
+		cssAnimationDuration,
+		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
+			return /* @__PURE__ */ jsx(hasLabel ? "label" : "div", {
+				className: cx("group", className),
+				"data-testid": "container",
+				style,
+				tabIndex: -1,
+				...rootSlotProps,
+				children
+			});
+		},
+		renderIndicator: ({ size, variant, checked, disabled, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
+			const classNames = {
+				radio: getStyles({
+					radioSizeRadio: size,
+					radioVariantRadio: variant,
+					radioVariantValueRadio: checked ? "checked" : "unchecked",
+					className: cx([
+						"border",
+						"uds-ring",
+						"uds-ring-within",
+						!disabled && "group-hover:scale-110",
+						!disabled && !checked && "group-active:scale-90",
+						!disabled && !checked && "group-active:uds-inset-shadow-lg-invert",
+						!disabled && checked && "group-hover:uds-inset-shadow-lg-invert",
+						cssAnimationDuration,
+						"transition-[background-color,border-color,transform]",
+						"transition-shadow"
+					])
+				}),
+				radioCircle: getStyles({
+					radioVariantRadioCircle: variant,
+					radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+					className: cx([
+						"pointer-events-none",
+						"w-[8px]",
+						"h-[8px]",
+						checked ? "opacity-100" : "opacity-0",
+						cssAnimationDuration,
+						"transition-opacity"
+					])
+				})
+			};
+			return /* @__PURE__ */ jsxs(Box, {
+				position: "relative",
+				borderRadius: "full",
+				alignItems: "center",
+				justifyContent: "center",
+				flex: "none",
+				className: classNames.radio,
+				...radioSlotProps,
+				children: [children, /* @__PURE__ */ jsx(Box, {
+					borderRadius: "full",
+					className: classNames.radioCircle,
+					...radioIconSlotProps
+				})]
+			});
+		}
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio };

package/dist/css-animation/Radio/index.cjs

@@ -0,0 +1,5 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_css_animation_Radio_Radio = require("./Radio.cjs");
+exports.Radio = require_css_animation_Radio_Radio.Radio;

package/dist/css-animation/Radio/index.d.cts

@@ -0,0 +1,3 @@
+
+import { Radio, RadioProps } from "./Radio.cjs";
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/index.d.ts

@@ -0,0 +1,4 @@
+
+"use client";
+import { Radio, RadioProps } from "./Radio.js";
+export { Radio, type RadioProps };

package/dist/css-animation/Radio/index.js

@@ -0,0 +1,4 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { Radio } from "./Radio.js";
+export { Radio };

package/dist/css-animation/index.cjs

@@ -2,8 +2,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_css_animation_Button_Button = require("./Button/Button.cjs");
+const require_css_animation_Checkbox_Checkbox = require("./Checkbox/Checkbox.cjs");
 const require_css_animation_IconButton_IconButton = require("./IconButton/IconButton.cjs");
+const require_css_animation_Radio_Radio = require("./Radio/Radio.cjs");
 const require_css_animation_Switch_Switch = require("./Switch/Switch.cjs");
 exports.Button = require_css_animation_Button_Button.Button;
+exports.Checkbox = require_css_animation_Checkbox_Checkbox.Checkbox;
 exports.IconButton = require_css_animation_IconButton_IconButton.IconButton;
+exports.Radio = require_css_animation_Radio_Radio.Radio;
 exports.Switch = require_css_animation_Switch_Switch.Switch;

package/dist/css-animation/index.d.cts

@@ -2,6 +2,8 @@
 import { ButtonProps } from "../components/client/Button/Button.cjs";
 import { IconButtonProps } from "../components/client/IconButton/IconButton.cjs";
 import { Button } from "./Button/Button.cjs";
+import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox.cjs";
 import { IconButton } from "./IconButton/IconButton.cjs";
+import { Radio, RadioProps } from "./Radio/Radio.cjs";
 import { Switch, SwitchProps } from "./Switch/Switch.cjs";
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Switch, type SwitchProps };
+export { Button, type ButtonProps, Checkbox, type CheckboxProps, IconButton, type IconButtonProps, Radio, type RadioProps, Switch, type SwitchProps };

package/dist/css-animation/index.d.ts

@@ -3,6 +3,8 @@
 import { ButtonProps } from "../components/client/Button/Button.js";
 import { IconButtonProps } from "../components/client/IconButton/IconButton.js";
 import { Button } from "./Button/Button.js";
+import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox.js";
 import { IconButton } from "./IconButton/IconButton.js";
+import { Radio, RadioProps } from "./Radio/Radio.js";
 import { Switch, SwitchProps } from "./Switch/Switch.js";
-export { Button, type ButtonProps, IconButton, type IconButtonProps, Switch, type SwitchProps };
+export { Button, type ButtonProps, Checkbox, type CheckboxProps, IconButton, type IconButtonProps, Radio, type RadioProps, Switch, type SwitchProps };

package/dist/css-animation/index.js

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { Button } from "./Button/Button.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
 import { IconButton } from "./IconButton/IconButton.js";
+import { Radio } from "./Radio/Radio.js";
 import { Switch } from "./Switch/Switch.js";
-export { Button, IconButton, Switch };
+export { Button, Checkbox, IconButton, Radio, Switch };

package/dist/index.cjs

@@ -63,7 +63,7 @@ const require_getPaginationControlWidthPx = require("./automated-config/dist/uti
 const require_isConfiguratorPropertyVisible = require("./automated-config/dist/utils/isConfiguratorPropertyVisible.cjs");
 const require_index$2 = require("./automated-config/dist/utils/index.cjs");
 const require_components_client_Button_Button = require("./components/client/Button/Button.cjs");
-const require_components_client_Checkbox = require("./components/client/Checkbox.cjs");
+const require_components_client_Checkbox_Checkbox = require("./components/client/Checkbox/Checkbox.cjs");
 const require_components_client_Chip_ChipButton = require("./components/client/Chip/ChipButton.cjs");
 const require_components_client_Chip_ChipDismissible = require("./components/client/Chip/ChipDismissible.cjs");
 const require_components_client_Chip_ChipLink = require("./components/client/Chip/ChipLink.cjs");
@@ -169,7 +169,7 @@ exports.BottomSheetTrigger = require_components_client_BottomSheet_BottomSheetTr
 exports.Box = require_components_Box.Box;
 exports.Button = require_components_client_Button_Button.Button;
 exports.ButtonConfig = require_generatedConfigs.ButtonConfig;
-exports.Checkbox = require_components_client_Checkbox.Checkbox;
+exports.Checkbox = require_components_client_Checkbox_Checkbox.Checkbox;
 exports.CheckboxConfig = require_generatedConfigs.CheckboxConfig;
 exports.Chip = require_components_client_Chip_Chip.Chip;
 exports.ChipButton = require_components_client_Chip_ChipButton.ChipButton;

package/dist/index.d.cts

@@ -76,7 +76,7 @@ import { BottomSheetProvider, BottomSheetProviderProps } from "./components/clie
 import { BottomSheetTrigger, BottomSheetTriggerProps } from "./components/client/BottomSheet/BottomSheetTrigger.cjs";
 import { UDSBottomSheetConfigContextType, configToBottomSheetConfigContext } from "./runtime/bottomSheetConfig.cjs";
 import { Button, ButtonProps } from "./components/client/Button/Button.cjs";
-import { Checkbox, CheckboxProps } from "./components/client/Checkbox.cjs";
+import { Checkbox, CheckboxProps } from "./components/client/Checkbox/Checkbox.cjs";
 import { Chip, ChipProps } from "./components/client/Chip/Chip.cjs";
 import { ChipButton, ChipButtonProps } from "./components/client/Chip/ChipButton.cjs";
 import { ChipDismissible, ChipDismissibleProps } from "./components/client/Chip/ChipDismissible.cjs";

package/dist/index.d.ts

@@ -76,7 +76,7 @@ import { BottomSheetProvider, BottomSheetProviderProps } from "./components/clie
 import { BottomSheetTrigger, BottomSheetTriggerProps } from "./components/client/BottomSheet/BottomSheetTrigger.js";
 import { UDSBottomSheetConfigContextType, configToBottomSheetConfigContext } from "./runtime/bottomSheetConfig.js";
 import { Button, ButtonProps } from "./components/client/Button/Button.js";
-import { Checkbox, CheckboxProps } from "./components/client/Checkbox.js";
+import { Checkbox, CheckboxProps } from "./components/client/Checkbox/Checkbox.js";
 import { Chip, ChipProps } from "./components/client/Chip/Chip.js";
 import { ChipButton, ChipButtonProps } from "./components/client/Chip/ChipButton.js";
 import { ChipDismissible, ChipDismissibleProps } from "./components/client/Chip/ChipDismissible.js";

package/dist/index.js

@@ -62,7 +62,7 @@ import { getPaginationControlWidthPx, syncPaginationWidthVarForSize } from "./au
 import { isConfiguratorPropertyVisible } from "./automated-config/dist/utils/isConfiguratorPropertyVisible.js";
 import { applyBoxShadowBorder, createComponentStates, createConfigurableProperty, createLayerConfig, createSubComponentConfig, createVariantConfig, createVariantConfigWithComponentStates, createVariantConfigWithProperties, generateClassName, generateConfigStyles, generateDeclaration, generateStyles, mergeUniversalUnderOverride, statePseudoMapDocsMode } from "./automated-config/dist/utils/index.js";
 import { Button } from "./components/client/Button/Button.js";
-import { Checkbox } from "./components/client/Checkbox.js";
+import { Checkbox } from "./components/client/Checkbox/Checkbox.js";
 import { ChipButton } from "./components/client/Chip/ChipButton.js";
 import { ChipDismissible } from "./components/client/Chip/ChipDismissible.js";
 import { ChipLink } from "./components/client/Chip/ChipLink.js";

package/dist/styles/styler.d.cts

@@ -12,8 +12,8 @@ declare const cva: CVA<string>;
 declare const getStylesInternal: (props?: ({
   avatarIconVariantRoot?: "primary" | "secondary" | "default" | undefined;
   avatarImageVariantRoot?: "primary" | "secondary" | "default" | undefined;
-  avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "2xs" | "3xl" | undefined;
-  avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "2xs" | "3xl" | undefined;
+  avatarSizeIcon?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "default" | "2xs" | "3xl" | undefined;
+  avatarSizeRoot?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "default" | "2xs" | "3xl" | undefined;
   avatarTextVariantRoot?: "primary" | "secondary" | "default" | undefined;
   badgeSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
   badgeSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
@@ -33,8 +33,8 @@ declare const getStylesInternal: (props?: ({
   bottomsheetVariantRoot?: "default" | undefined;
   buttonSizeIcon?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
   buttonSizeRoot?: "xs" | "sm" | "md" | "lg" | "default" | undefined;
-  buttonVariantIcon?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
-  buttonVariantRoot?: "primary" | "secondary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "tertiary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
+  buttonVariantIcon?: "primary" | "secondary" | "tertiary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
+  buttonVariantRoot?: "primary" | "secondary" | "tertiary" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "default" | "alert-tertiary" | "brand-tertiary" | "contrast-high" | "contrast-low" | "contrast-medium" | "info-tertiary" | "positive-tertiary" | "warning-tertiary" | undefined;
   checkboxSizeCheckbox?: "sm" | "md" | "default" | undefined;
   checkboxSizeRoot?: "sm" | "md" | "default" | undefined;
   checkboxVariantCheckbox?: "primary" | "secondary" | "alert" | "alert-secondary" | "default" | undefined;
@@ -200,10 +200,10 @@ declare const getStylesInternal: (props?: ({
   toastSizeIcon?: "default" | undefined;
   toastSizeLabel?: "default" | undefined;
   toastSizeRoot?: "default" | undefined;
-  toastVariantActionButton?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
-  toastVariantCloseIcon?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
-  toastVariantIcon?: "loading" | "warning" | "info" | "default" | "success" | "error" | undefined;
-  toastVariantRoot?: "loading" | "warning" | "info" | "default" | "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;
@@ -214,37 +214,37 @@ declare const getStylesInternal: (props?: ({
   tooltipVariantIcon?: "default" | undefined;
   tooltipVariantRoot?: "default" | undefined;
   tooltipVariantSvg?: "default" | undefined;
-  color?: "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;
-  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;
+  color?: "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "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" | undefined;
+  placeholderColor?: "primary" | "secondary" | "tertiary" | "muted" | "on-color" | "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" | 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?: "black" | "thin" | "medium" | "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" | "bold" | "extralight" | "light" | "regular" | "semibold" | "extrabold" | undefined;
+  fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "bold" | "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;
   textTransform?: "none" | "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" | "uppercase" | "lowercase" | "capitalize" | undefined;
-  spacing?: "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;
-  spacingHorizontal?: "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;
-  spacingVertical?: "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;
-  spacingBottom?: "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;
-  spacingEnd?: "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;
-  spacingStart?: "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;
-  spacingTop?: "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;
-  offset?: "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;
-  offsetVertical?: "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;
-  offsetHorizontal?: "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;
-  offsetBottom?: "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;
-  offsetEnd?: "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;
-  offsetStart?: "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;
-  offsetTop?: "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;
-  columnGap?: "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;
-  rowGap?: "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;
+  spacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  spacingTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offset?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetVertical?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetHorizontal?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetBottom?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetEnd?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetStart?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  offsetTop?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  columnGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
+  rowGap?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
   backgroundColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
-  borderColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
-  borderStartColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
-  borderEndColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
-  borderBottomColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
-  borderTopColor?: "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "tertiary" | "muted" | undefined;
+  borderColor?: "primary" | "secondary" | "tertiary" | "muted" | "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
+  borderStartColor?: "primary" | "secondary" | "tertiary" | "muted" | "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
+  borderEndColor?: "primary" | "secondary" | "tertiary" | "muted" | "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
+  borderBottomColor?: "primary" | "secondary" | "tertiary" | "muted" | "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
+  borderTopColor?: "primary" | "secondary" | "tertiary" | "muted" | "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" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | undefined;
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderTopStartRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
   borderTopEndRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
@@ -259,31 +259,31 @@ declare const getStylesInternal: (props?: ({
   borderBottomWidth?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "thin" | "medium" | "thick" | undefined;
   avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "3xl" | undefined;
   iconSize?: "xs" | "sm" | "md" | "lg" | undefined;
-  alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | undefined;
-  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | undefined;
-  alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline" | "auto" | undefined;
-  flex?: "none" | "1" | "auto" | "initial" | undefined;
+  alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+  alignItems?: "center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+  alignSelf?: "center" | "auto" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined;
+  flex?: "none" | "auto" | "1" | "initial" | undefined;
   flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
   flexGrow?: "0" | "1" | "2" | "3" | undefined;
   flexShrink?: "0" | "1" | undefined;
   flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
-  justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | undefined;
+  justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
   flexBasis?: "min-content" | undefined;
-  display?: "flex" | "none" | "block" | "inline-block" | "inline" | "inline-flex" | "table" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "grid" | "contents" | undefined;
+  display?: "table" | "none" | "grid" | "inline" | "flex" | "block" | "inline-block" | "inline-flex" | "inline-table" | "table-caption" | "table-cell" | "table-column" | "table-column-group" | "table-footer-group" | "table-header-group" | "table-row-group" | "table-row" | "flow-root" | "contents" | undefined;
   overflow?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
   position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
-  contentFit?: "cover" | "contain" | "fill" | "none" | "scale-down" | undefined;
+  contentFit?: "fill" | "none" | "cover" | "contain" | "scale-down" | undefined;
   colorMode?: "light" | "dark" | undefined;
-  scaleMode?: "medium" | "small" | "xSmall" | "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?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
-  insetShadow?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs-invert" | "sm-invert" | "md-invert" | "lg-invert" | "xl-invert" | "2xl-invert" | undefined;
+  dropShadow?: "none" | "xs" | "sm" | "md" | "lg" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "xl" | "2xl" | undefined;
+  insetShadow?: "none" | "xs" | "sm" | "md" | "lg" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "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?: "none" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "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;
+  nestedBorderRadiusSpacing?: "0" | "px" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "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;
 } & {
   className?: string | undefined;