@yahoo/uds 3.161.0 → 3.162.1

package/dist/components/client/Radio/RadioBase.cjs

@@ -0,0 +1,133 @@
+/*! © 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_FormLabel = require("../../FormLabel.cjs");
+const require_components_client_Radio_radioConstants = require("./radioConstants.cjs");
+const require_components_client_Radio_useRadioGroup = require("./useRadioGroup.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/client/Radio/RadioBase.tsx
+const RadioBase = (0, react.forwardRef)(function RadioBase({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...radioProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = (0, react.useRef)(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = require_components_client_Radio_useRadioGroup.useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: checkedProp,
+		defaultChecked
+	});
+	const [isHovered, setIsHovered] = (0, react.useState)(false);
+	const [isPressed, setIsPressed] = (0, react.useState)(false);
+	/**
+	* Derived values
+	*/
+	const variant = (0, react.useMemo)(() => hasError ? require_components_client_Radio_radioConstants.VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && !checked && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleOnChange = (0, react.useCallback)((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = (0, react.useCallback)((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = (0, react.useCallback)((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	const classNames = {
+		root: require_styles_styler.getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: require_styles_styler.cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
+		}),
+		htmlRadio: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
+	};
+	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type: "radio",
+		tabIndex: 0,
+		...radioProps,
+		ref: (ref) => {
+			innerRef.current = ref;
+			if (typeof parentRef === "function") parentRef(ref);
+			else if (parentRef !== null) parentRef.current = ref;
+		},
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		id: uid,
+		name,
+		value: valueProp,
+		disabled,
+		"aria-invalid": hasError,
+		onChange: handleOnChange,
+		...isControlled ? { checked } : { defaultChecked },
+		className: classNames.htmlRadio
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderIndicator({
+			size,
+			variant,
+			checked: Boolean(checked),
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			radioSlotProps,
+			radioIconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+RadioBase.displayName = "RadioBase";
+//#endregion
+exports.RadioBase = RadioBase;

package/dist/components/client/Radio/RadioBase.d.cts

@@ -0,0 +1,45 @@
+
+import { RadioVariant } from "../../../types/dist/index.cjs";
+import { DataAttributes, RadioProps } from "./types.cjs";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Radio/RadioBase.d.ts
+type ResolvedRadioVariant = RadioVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<RadioProps['size']>;
+  variant: ResolvedRadioVariant;
+  checked: boolean;
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  radioSlotProps: DataAttributes;
+  radioIconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type RadioBaseProps = RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const RadioBase: React.ForwardRefExoticComponent<RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RadioBase, type RadioBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedRadioVariant };

package/dist/components/client/Radio/RadioBase.d.ts

@@ -0,0 +1,46 @@
+
+"use client";
+import { RadioVariant } from "../../../types/dist/index.js";
+import { DataAttributes, RadioProps } from "./types.js";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Radio/RadioBase.d.ts
+type ResolvedRadioVariant = RadioVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<RadioProps['size']>;
+  variant: ResolvedRadioVariant;
+  checked: boolean;
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  radioSlotProps: DataAttributes;
+  radioIconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type RadioBaseProps = RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const RadioBase: React.ForwardRefExoticComponent<RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RadioBase, type RadioBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedRadioVariant };

package/dist/components/client/Radio/RadioBase.js

@@ -0,0 +1,130 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { FormLabel } from "../../FormLabel.js";
+import { VARIANT_ERROR_MAP } from "./radioConstants.js";
+import { useRadioGroup } from "./useRadioGroup.js";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Radio/RadioBase.tsx
+const RadioBase = forwardRef(function RadioBase({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...radioProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: checkedProp,
+		defaultChecked
+	});
+	const [isHovered, setIsHovered] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+	/**
+	* Derived values
+	*/
+	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && !checked && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleOnChange = useCallback((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleHoverStart = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = useCallback(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	const classNames = {
+		root: getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
+		}),
+		htmlRadio: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
+		label: cx(labelPosition === "start" ? "text-start" : "text-end")
+	};
+	const input = /* @__PURE__ */ jsx("input", {
+		type: "radio",
+		tabIndex: 0,
+		...radioProps,
+		ref: (ref) => {
+			innerRef.current = ref;
+			if (typeof parentRef === "function") parentRef(ref);
+			else if (parentRef !== null) parentRef.current = ref;
+		},
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		id: uid,
+		name,
+		value: valueProp,
+		disabled,
+		"aria-invalid": hasError,
+		onChange: handleOnChange,
+		...isControlled ? { checked } : { defaultChecked },
+		className: classNames.htmlRadio
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [renderIndicator({
+			size,
+			variant,
+			checked: Boolean(checked),
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			radioSlotProps,
+			radioIconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ jsx(FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+RadioBase.displayName = "RadioBase";
+//#endregion
+export { RadioBase };

package/dist/components/client/Radio/radioConstants.cjs

@@ -0,0 +1,14 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/Radio/radioConstants.ts
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+//#endregion
+exports.RADIO_SIZES = RADIO_SIZES;
+exports.RADIO_VARIANTS = RADIO_VARIANTS;
+exports.VARIANT_ERROR_MAP = VARIANT_ERROR_MAP;

package/dist/components/client/Radio/radioConstants.d.cts

@@ -0,0 +1,8 @@
+
+import { RadioSize, RadioVariant } from "../../../types/dist/index.cjs";
+//#region src/components/client/Radio/radioConstants.d.ts
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+declare const VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/radioConstants.d.ts

@@ -0,0 +1,9 @@
+
+"use client";
+import { RadioSize, RadioVariant } from "../../../types/dist/index.js";
+//#region src/components/client/Radio/radioConstants.d.ts
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+declare const VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/radioConstants.js

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+//#region src/components/client/Radio/radioConstants.ts
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/types.cjs

@@ -0,0 +1,2 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";

package/dist/components/client/Radio/types.d.cts

@@ -0,0 +1,20 @@
+
+import { UniversalRadioProps } from "../../../types/dist/index.cjs";
+import React from "react";
+
+//#region src/components/client/Radio/types.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps, UniversalRadioProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
+  };
+}
+//#endregion
+export { type DataAttributes, type NativeInputProps, type RadioProps };

package/dist/components/client/Radio/types.d.ts

@@ -0,0 +1,21 @@
+
+"use client";
+import { UniversalRadioProps } from "../../../types/dist/index.js";
+import React from "react";
+
+//#region src/components/client/Radio/types.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+interface RadioProps extends NativeInputProps, UniversalRadioProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
+  };
+}
+//#endregion
+export { type DataAttributes, type NativeInputProps, type RadioProps };

package/dist/components/client/Radio/types.js

@@ -0,0 +1,2 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";

package/dist/components/client/Toast/UDSToastConfigProvider.d.cts

@@ -30,9 +30,9 @@ declare const useToastConfig: (sizeProp?: ToastSize | undefined, variantProp?: T
   autoClose: number | false;
   position: ToastPosition;
   backgroundColor: {
-    loading: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
     warning: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
     info: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
+    loading: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
     success: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
     error: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "elevation-0" | "elevation-1" | "elevation-2" | "elevation-3" | "elevation-4" | "elevation-5" | "gray-0" | "gray-1" | "gray-2" | "gray-3" | "gray-4" | "gray-5" | "gray-6" | "gray-7" | "gray-8" | "gray-9" | "gray-10" | "gray-11" | "gray-12" | "gray-13" | "gray-14" | "gray-15" | "purple-0" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "purple-11" | "purple-12" | "purple-13" | "purple-14" | "purple-15" | "indigo-0" | "indigo-1" | "indigo-2" | "indigo-3" | "indigo-4" | "indigo-5" | "indigo-6" | "indigo-7" | "indigo-8" | "indigo-9" | "indigo-10" | "indigo-11" | "indigo-12" | "indigo-13" | "indigo-14" | "indigo-15" | "blue-0" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "blue-11" | "blue-12" | "blue-13" | "blue-14" | "blue-15" | "cyan-0" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "cyan-11" | "cyan-12" | "cyan-13" | "cyan-14" | "cyan-15" | "teal-0" | "teal-1" | "teal-2" | "teal-3" | "teal-4" | "teal-5" | "teal-6" | "teal-7" | "teal-8" | "teal-9" | "teal-10" | "teal-11" | "teal-12" | "teal-13" | "teal-14" | "teal-15" | "mint-0" | "mint-1" | "mint-2" | "mint-3" | "mint-4" | "mint-5" | "mint-6" | "mint-7" | "mint-8" | "mint-9" | "mint-10" | "mint-11" | "mint-12" | "mint-13" | "mint-14" | "mint-15" | "green-0" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "green-11" | "green-12" | "green-13" | "green-14" | "green-15" | "lime-0" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "lime-11" | "lime-12" | "lime-13" | "lime-14" | "lime-15" | "citron-0" | "citron-1" | "citron-2" | "citron-3" | "citron-4" | "citron-5" | "citron-6" | "citron-7" | "citron-8" | "citron-9" | "citron-10" | "citron-11" | "citron-12" | "citron-13" | "citron-14" | "citron-15" | "yellow-0" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "yellow-11" | "yellow-12" | "yellow-13" | "yellow-14" | "yellow-15" | "brown-0" | "brown-1" | "brown-2" | "brown-3" | "brown-4" | "brown-5" | "brown-6" | "brown-7" | "brown-8" | "brown-9" | "brown-10" | "brown-11" | "brown-12" | "brown-13" | "brown-14" | "brown-15" | "nude-0" | "nude-1" | "nude-2" | "nude-3" | "nude-4" | "nude-5" | "nude-6" | "nude-7" | "nude-8" | "nude-9" | "nude-10" | "nude-11" | "nude-12" | "nude-13" | "nude-14" | "nude-15" | "orange-0" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "orange-11" | "orange-12" | "orange-13" | "orange-14" | "orange-15" | "sunset-0" | "sunset-1" | "sunset-2" | "sunset-3" | "sunset-4" | "sunset-5" | "sunset-6" | "sunset-7" | "sunset-8" | "sunset-9" | "sunset-10" | "sunset-11" | "sunset-12" | "sunset-13" | "sunset-14" | "sunset-15" | "red-0" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "red-11" | "red-12" | "red-13" | "red-14" | "red-15" | "rose-0" | "rose-1" | "rose-2" | "rose-3" | "rose-4" | "rose-5" | "rose-6" | "rose-7" | "rose-8" | "rose-9" | "rose-10" | "rose-11" | "rose-12" | "rose-13" | "rose-14" | "rose-15" | "pink-0" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "pink-11" | "pink-12" | "pink-13" | "pink-14" | "pink-15" | "magenta-0" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "magenta-11" | "magenta-12" | "magenta-13" | "magenta-14" | "magenta-15" | "carbon-0" | "carbon-1" | "carbon-2" | "carbon-3" | "carbon-4" | "carbon-5" | "carbon-6" | "carbon-7" | "carbon-8" | "carbon-9" | "carbon-10" | "carbon-11" | "carbon-12" | "carbon-13" | "carbon-14" | "carbon-15";
   };