Update themed components with refs and css

lib/component/button/Button.tsx

@@ -4,8 +4,7 @@ import { forwardRef } from "react";
 
 
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((
-{
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 	className,
 	type="button",
 	rounding = "lg",
@@ -15,52 +14,53 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((
 	disabled,
 	...buttonProps
 }, ref ) => {
-		return (
-			<button
-				data-testid="mattrixwv-button"
-				ref={ref}
-				type={type}
-				{...buttonProps}
-				disabled={disabled}
-				className={clsx(
-					className,
-					//Focus
-					"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-					//Rounding
-					{
-						"rounded-sm": rounding === "sm",
-						"rounded-md": rounding === "md",
-						"rounded-lg": rounding === "lg",
-						"rounded-full": rounding === "full"
-					},
-					//Size and shape
-					{
-						"p-0": size === "xs" && shape === "square",
-						"p-1": size === "sm" && shape === "square",
-						"p-2": size === "md" && shape === "square",
-						"p-3": size === "lg" && shape === "square",
-						"p-4": size === "xl" && shape === "square",
+	return (
+		<button
+			data-testid="mattrixwv-button"
+			ref={ref}
+			type={type}
+			{...buttonProps}
+			disabled={disabled}
+			className={clsx(
+				className,
+				//Focus
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+				//Rounding
+				{
+					"rounded-sm": rounding === "sm",
+					"rounded-md": rounding === "md",
+					"rounded-lg": rounding === "lg",
+					"rounded-full": rounding === "full"
+				},
+				//Size and shape
+				{
+					"p-0": size === "xs" && shape === "square",
+					"p-1": size === "sm" && shape === "square",
+					"p-2": size === "md" && shape === "square",
+					"p-3": size === "lg" && shape === "square",
+					"p-4": size === "xl" && shape === "square",
 
-						"px-1 py-0": size === "xs" && shape === "rectangle",
-						"px-2 py-1": size === "sm" && shape === "rectangle",
-						"px-4 py-2": size === "md" && shape === "rectangle",
-						"px-6 py-3": size === "lg" && shape === "rectangle",
-						"px-8 py-4": size === "xl" && shape === "rectangle",
-					},
-					//Variant
-					{
-						"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
-						"border-none": variant === "ghost" || variant === "icon"
-					},
-					//Disabled
-					{
-						"cursor-pointer": !disabled,
-						"cursor-not-allowed opacity-75": disabled
-					}
-				)}
-			/>
-		);
-	}
-);
+					"px-1 py-0": size === "xs" && shape === "rectangle",
+					"px-2 py-1": size === "sm" && shape === "rectangle",
+					"px-4 py-2": size === "md" && shape === "rectangle",
+					"px-6 py-3": size === "lg" && shape === "rectangle",
+					"px-8 py-4": size === "xl" && shape === "rectangle",
+				},
+				//Variant
+				{
+					"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
+					"border-none": variant === "ghost" || variant === "icon"
+				},
+				//Disabled
+				{
+					"cursor-pointer": !disabled,
+					"cursor-not-allowed opacity-75": disabled
+				}
+			)}
+		/>
+	);
+});
+
+Button.displayName = "Button";
 
 export default Button;

lib/component/button/DangerButton.tsx

@@ -1,47 +1,51 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function DangerButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
 
+const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-danger-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "standard") && (!disabled),
-					"bg-red-400/80": (variant === "standard") && (disabled),
+					"bg-danger active:bg-danger-dark": (variant === "standard") && (!disabled),
+					"bg-danger-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-danger active:bg-danger-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-red-600 hover:border-red-700 active:border-red-800": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-red-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-red-600 hover:border-red-600 active:border-red-700": (variant === "outline-ghost") && (!disabled),
-					"border-red-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-danger active:border-danger-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-danger-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-white": variant === "standard",
-					"text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-danger active:text-danger-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-danger-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-danger hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+DangerButton.displayName = "DangerButton";
+
+export default DangerButton;

lib/component/button/DarkButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function DarkButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-dark-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-black hover:bg-neutral-700 active:bg-neutral-600": (variant === "standard") && (!disabled),
-					"bg-neutral-700/80": (variant === "standard") && (disabled),
+					"bg-dark active:bg-dark-mid": (variant === "standard") && (!disabled),
+					"bg-dark-mid/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-dark active:bg-dark-mid": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-black hover:border-neutral-700 active:border-neutral-600": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-neutral-700/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-black hover:border-black active:border-neutral-700": (variant === "outline-ghost") && (!disabled),
-					"border-neutral-700/80 ": (variant === "outline-ghost") && (disabled)
+					"border-dark active:border-dark-mid": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-dark-mid/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-white": variant === "standard",
-					"text-black hover:text-neutral-700 active:text-neutral-600": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-neutral-700/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-neutral-700/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-dark active:text-dark-mid": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-dark-mid/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-dark hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+DarkButton.displayName = "DarkButton";
+
+export default DarkButton;

lib/component/button/InfoButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function InfoButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-info-button"
-			{...props}
+			{...buttonProps}
+			variant={variant}
+			disabled={disabled}
+			ref={ref}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-cyan-500 hover:bg-cyan-600 active:bg-cyan-700": (variant === "standard") && (!disabled),
-					"bg-sky-300/80": (variant === "standard") && (disabled),
+					"bg-info active:bg-info-dark": (variant === "standard") && (!disabled),
+					"bg-info-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-cyan-500 active:bg-cyan-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-info active:bg-info-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-cyan-500 hover:border-cyan-600 active:border-cyan-700": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-sky-300/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-cyan-500 hover:border-cyan-500 active:border-cyan-600": (variant === "outline-ghost") && (!disabled),
-					"border-sky-300/80 ": (variant === "outline-ghost") && (disabled)
+					"border-info active:border-info-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-info-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-black": variant === "standard",
-					"text-cyan-500 hover:text-cyan-600 active:text-cyan-700": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-sky-300/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-cyan-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-sky-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-info active:text-info-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-info-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-info hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+InfoButton.displayName = "InfoButton";
+
+export default InfoButton;

lib/component/button/LightButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function LightButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-light-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "standard") && (!disabled),
-					"bg-neutral-400/80": (variant === "standard") && (disabled),
+					"bg-light active:bg-light-dark": (variant === "standard") && (!disabled),
+					"bg-light-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-light active:bg-light-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-white hover:border-neutral-300 active:border-neutral-400": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-neutral-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-white hover:border-white active:border-neutral-300": (variant === "outline-ghost") && (!disabled),
-					"border-neutral-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-light active:border-light-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-neutral-400/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-black": variant === "standard",
-					"text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-light active:text-light-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-light-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-light hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+LightButton.displayName = "LightButton";
+
+export default LightButton;

lib/component/button/MoltenButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function MoltenButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-molten-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "standard") && (!disabled),
-					"bg-orange-400/80": (variant === "standard") && (disabled),
+					"bg-molten active:bg-molten-dark": (variant === "standard") && (!disabled),
+					"bg-molten-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-molten active:bg-molten-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-orange-600 hover:border-orange-700 active:border-orange-800": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-orange-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-orange-600 hover:border-orange-600 active:border-orange-700": (variant === "outline-ghost") && (!disabled),
-					"border-orange-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-molten active:border-molten-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-molten-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
-					"text-white": variant === "standard",
-					"text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-black": variant === "standard",
+					"text-molten active:text-molten-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-molten-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-molten hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+MoltenButton.displayName = "MoltenButton";
+
+export default MoltenButton;

lib/component/button/PrimaryButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function PrimaryButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-primary-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "standard") && (!disabled),
-					"bg-blue-400/80": (variant === "standard") && (disabled),
+					"bg-primary active:bg-primary-dark": (variant === "standard") && (!disabled),
+					"bg-primary-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-primary active:bg-primary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-blue-600 hover:border-blue-700 active:border-blue-800": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-blue-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-blue-600 hover:border-blue-600 active:border-blue-700": (variant === "outline-ghost") && (!disabled),
-					"border-blue-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-primary active:border-primary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-primary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-white": variant === "standard",
-					"text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-blue-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-primary active:text-primary-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-primary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-primary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+PrimaryButton.displayName = "PrimaryButton";
+
+export default PrimaryButton;

lib/component/button/SecondaryButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function SecondaryButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-secondary-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "standard") && (!disabled),
-					"bg-neutral-300/80": (variant === "standard") && (disabled),
+					"bg-secondary active:bg-secondary-dark": (variant === "standard") && (!disabled),
+					"bg-secondary-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-secondary active:bg-secondary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-neutral-500 hover:border-neutral-600 active:border-neutral-700": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-neutral-300/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-neutral-500 hover:border-neutral-500 active:border-neutral-600": (variant === "outline-ghost") && (!disabled),
-					"border-neutral-300/80 ": (variant === "outline-ghost") && (disabled)
+					"border-secondary active:border-secondary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-secondary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-white": variant === "standard",
-					"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-neutral-300/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-neutral-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-neutral-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-secondary active:text-secondary-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-secondary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-secondary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+SecondaryButton.displayName = "SecondaryButton";
+
+export default SecondaryButton;

lib/component/button/SuccessButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function SuccessButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-success-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "standard") && (!disabled),
-					"bg-green-400/80": (variant === "standard") && (disabled),
+					"bg-success active:bg-success-dark": (variant === "standard") && (!disabled),
+					"bg-success-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-success active:bg-success-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-green-600 hover:border-green-700 active:border-green-800": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-green-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-green-600 hover:border-green-600 active:border-green-700": (variant === "outline-ghost") && (!disabled),
-					"border-green-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-success active:border-success-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-success-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
-					"text-white": variant === "standard",
-					"text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-green-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-green-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-black": variant === "standard",
+					"text-success active:text-success-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-success-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-success hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+SuccessButton.displayName = "SuccessButton";
+
+export default SuccessButton;

lib/component/button/TertiaryButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function TertiaryButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-tertiary-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "standard") && (!disabled),
-					"bg-purple-400/80": (variant === "standard") && (disabled),
+					"bg-tertiary active:bg-tertiary-dark": (variant === "standard") && (!disabled),
+					"bg-tertiary-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-tertiary active:bg-tertiary-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-purple-600 hover:border-purple-700 active:border-purple-800": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-purple-400/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-purple-600 hover:border-purple-600 active:border-purple-700": (variant === "outline-ghost") && (!disabled),
-					"border-purple-400/80 ": (variant === "outline-ghost") && (disabled)
+					"border-tertiary active:border-tertiary-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-tertiary-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-white": variant === "standard",
-					"text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-tertiary active:text-tertiary-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-tertiary-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-tertiary hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+TertiaryButton.displayName = "TertiaryButton";
+
+export default TertiaryButton;

lib/component/button/WarningButton.tsx

@@ -1,47 +1,50 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import Button from "./Button";
 
 
-export default function WarningButton(props: ButtonProps){
-	const {
-		className,
-		variant = "standard",
-		disabled
-	} = props;
-
-
+const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+	className,
+	variant = "standard",
+	disabled,
+	...buttonProps
+}, ref) => {
 	return (
 		<Button
 			data-testid="mattrixwv-warning-button"
-			{...props}
+			{...buttonProps}
+			ref={ref}
+			variant={variant}
+			disabled={disabled}
 			className={clsx(
 				"transition duration-300",
 				className,
 				//Background
 				{
-					"bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700": (variant === "standard") && (!disabled),
-					"bg-yellow-300/80": (variant === "standard") && (disabled),
+					"bg-warning active:bg-warning-dark": (variant === "standard") && (!disabled),
+					"bg-warning-light/80": (variant === "standard") && (disabled),
 					"bg-transparent": (variant === "outline" || variant === "icon"),
-					"bg-transparent hover:bg-yellow-500 active:bg-yellow-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
+					"bg-transparent hover:bg-warning active:bg-warning-dark": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
 					"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
 				},
 				//Outline
 				{
-					"border-yellow-500 hover:border-yellow-600 active:border-yellow-700": (variant === "standard" || variant === "outline") && (!disabled),
-					"border-yellow-300/80": (variant === "standard" || variant === "outline") && (disabled),
-					"border-yellow-500 hover:border-yellow-500 active:border-yellow-600": (variant === "outline-ghost") && (!disabled),
-					"border-yellow-300/80 ": (variant === "outline-ghost") && (disabled)
+					"border-warning active:border-warning-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
+					"border-warning-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
 				},
 				//Text
 				{
 					"text-black": variant === "standard",
-					"text-yellow-500 hover:text-yellow-600 active:text-yellow-700": (variant === "outline" || variant === "icon") && (!disabled),
-					"text-yellow-300/80": (variant === "outline" || variant === "icon") && (disabled),
-					"text-yellow-500 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
-					"text-yellow-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
+					"text-warning active:text-warning-dark": (variant === "outline" || variant === "icon") && (!disabled),
+					"text-warning-light/80": (variant === "outline" || variant === "icon" || variant === "ghost" || variant === "outline-ghost") && (disabled),
+					"text-warning hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled)
 				}
 			)}
 		/>
 	);
-}
+});
+
+WarningButton.displayName = "WarningButton";
+
+export default WarningButton;

lib/component/input/checkbox/DangerCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function DangerCheckbox({
+const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-red-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-red-600": !box
+					"group-data-checked:bg-danger group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-danger": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DangerCheckbox.displayName = "DangerCheckbox";
+
+export default DangerCheckbox;

lib/component/input/checkbox/DarkCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function DarkCheckbox({
+const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-black group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-black": !box
+					"group-data-checked:bg-dark group-data-checked:stroke-light": box,
+					"group-data-checked:stroke-dark": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkCheckbox.displayName = "DarkCheckbox";
+
+export default DarkCheckbox;

lib/component/input/checkbox/InfoCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function InfoCheckbox({
+const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-cyan-500 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-cyan-500": !box
+					"group-data-checked:bg-info group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-info": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+InfoCheckbox.displayName = "InfoCheckbox";
+
+export default InfoCheckbox;

lib/component/input/checkbox/LightCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function LightCheckbox({
+const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-white group-data-checked:stroke-black": box,
-					"group-data-checked:stroke-white": !box
+					"group-data-checked:bg-light group-data-checked:stroke-dark": box,
+					"group-data-checked:stroke-light": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+LightCheckbox.displayName = "LightCheckbox";
+
+export default LightCheckbox;

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,9 +1,10 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import { Checkbox } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function MattrixwvCheckbox({
+const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	id,
 	className,
 	labelClassName,
@@ -16,7 +17,7 @@ export default function MattrixwvCheckbox({
 	strokeWidth = 2,
 	value,
 	children
-}: CheckboxProps){
+}, ref ) => {
 	return (
 		<Checkbox
 			id={id}
@@ -29,6 +30,7 @@ export default function MattrixwvCheckbox({
 			defaultChecked={defaultChecked}
 			onChange={onChange}
 			value={value}
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -49,6 +51,7 @@ export default function MattrixwvCheckbox({
 				<svg
 					viewBox="0 0 14 14"
 					fill="none"
+					aria-label="checkbox"
 				>
 					<path
 						d="M3 8L6 11L11 3.5"
@@ -68,4 +71,8 @@ export default function MattrixwvCheckbox({
 			}
 		</Checkbox>
 	);
-}
+});
+
+MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
+
+export default MattrixwvCheckbox;

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function MoltenCheckbox({
+const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-orange-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-orange-600": !box
+					"group-data-checked:bg-molten group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-molten": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MoltenCheckbox.displayName = "MoltenCheckbox";
+
+export default MoltenCheckbox;

lib/component/input/checkbox/PrimaryCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function PrimaryCheckbox({
+const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-blue-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-blue-600": !box
+					"group-data-checked:bg-primary group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-primary": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+PrimaryCheckbox.displayName = "PrimaryCheckbox";
+
+export default PrimaryCheckbox;

lib/component/input/checkbox/SecondaryCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function SecondaryCheckbox({
+const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-neutral-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-neutral-600": !box
+					"group-data-checked:bg-secondary group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-secondary": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SecondaryCheckbox.displayName = "SecondaryCheckbox";
+
+export default SecondaryCheckbox;

lib/component/input/checkbox/SuccessCheckbox.tsx

@@ -1,25 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function SuccessCheckbox({
+const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-green-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-green-600": !box
+					"group-data-checked:bg-success group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-success": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
 
+SuccessCheckbox.displayName = "SuccessCheckbox";
+
+export default SuccessCheckbox;

lib/component/input/checkbox/TertiaryCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function TertiaryCheckbox({
+const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-purple-600 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-purple-600": !box
+					"group-data-checked:bg-tertiary group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-tertiary": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+TertiaryCheckbox.displayName = "TertiaryCheckbox";
+
+export default TertiaryCheckbox;

lib/component/input/checkbox/WarningCheckbox.tsx

@@ -1,24 +1,30 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-export default function WarningCheckbox({
+const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	className,
 	box = true,
 	...props
-}: CheckboxProps){
+}, ref) => {
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
 				className,
 				{
-					"group-data-checked:bg-yellow-500 group-data-checked:stroke-white": box,
-					"group-data-checked:stroke-yellow-500": !box
+					"group-data-checked:bg-warning group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-warning": !box
 				}
 			)}
 			box={box}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+WarningCheckbox.displayName = "WarningCheckbox";
+
+export default WarningCheckbox;

lib/component/input/radio/DangerRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function DangerRadioButton({
+const DangerRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-red-600",
+				"group-data-checked:bg-danger",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+DangerRadioButton.displayName = "DangerRadioButton";
+
+export default DangerRadioButton;

lib/component/input/radio/DarkRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function DarkRadioButton({
+const DarkRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-black",
+				"group-data-checked:bg-dark",
 				className
 			)}
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkRadioButton.displayName = "DarkRadioButton";
+
+export default DarkRadioButton;

lib/component/input/radio/InfoRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function InfoRadioButton({
+const InfoRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-cyan-500",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+InfoRadioButton.displayName = "InfoRadioButton";
+
+export default InfoRadioButton;

lib/component/input/radio/LightRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function LightRadioButton({
+const LightRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-white",
+				"group-data-checked:bg-light",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+LightRadioButton.displayName = "LightRadioButton";
+
+export default LightRadioButton;

lib/component/input/radio/MoltenRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function MoltenRadioButton({
+const MoltenRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-orange-600",
+				"group-data-checked:bg-molten",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+MoltenRadioButton.displayName = "MoltenRadioButton";
+
+export default MoltenRadioButton;

lib/component/input/radio/PrimaryRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function PrimaryRadioButton({
+const PrimaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-blue-500",
+				"group-data-checked:bg-primary",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+PrimaryRadioButton.displayName = "PrimaryRadioButton";
+
+export default PrimaryRadioButton;

lib/component/input/radio/RadioButton.tsx

@@ -1,21 +1,23 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import { Radio } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function RadioButton({
+const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	id,
 	className,
 	labelClassName,
 	size = "sm",
 	value,
 	children
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<Radio
 			id={id}
 			value={value}
 			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -41,4 +43,8 @@ export default function RadioButton({
 			}
 		</Radio>
 	);
-}
+});
+
+RadioButton.displayName = "RadioButton";
+
+export default RadioButton;

lib/component/input/radio/RadioList.tsx

@@ -12,7 +12,7 @@ export default function RadioList({
 	defaultValue,
 	direction = "horizontal",
 	children
-}: RadioListProps){
+}: Readonly<RadioListProps>){
 	return (
 		<RadioGroup
 			id={id}

lib/component/input/radio/SecondaryRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function SecondaryRadioButton({
+const SecondaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-neutral-600",
+				"group-data-checked:bg-secondary",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+SecondaryRadioButton.displayName = "SecondaryRadioButton";
+
+export default SecondaryRadioButton;

lib/component/input/radio/SuccessRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function SuccessRadioButton({
+const SuccessRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
 				"group-data-checked:bg-green-600",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+SuccessRadioButton.displayName = "SuccessRadioButton";
+
+export default SuccessRadioButton;

lib/component/input/radio/TertiaryRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function TertiaryRadioButton({
+const TertiaryRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-purple-600",
+				"group-data-checked:bg-tertiary",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+TertiaryRadioButton.displayName = "TertiaryRadioButton";
+
+export default TertiaryRadioButton;

lib/component/input/radio/WarningRadioButton.tsx

@@ -1,19 +1,25 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import RadioButton from "./RadioButton";
 
 
-export default function WarningRadioButton({
+const WarningRadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	className,
 	...props
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<RadioButton
 			className={clsx(
-				"group-data-checked:bg-yellow-500",
+				"group-data-checked:bg-warning",
 				className
 			)}
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+WarningRadioButton.displayName = "WarningRadioButton";
+
+export default WarningRadioButton;

lib/component/input/switch/ButtonSwitch.tsx

@@ -1,8 +1,9 @@
 import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
 import { Switch } from "@headlessui/react";
+import { forwardRef } from "react";
 
 
-export default function ButtonSwitch({
+const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>(({
 	id,
 	className,
 	name,
@@ -13,7 +14,7 @@ export default function ButtonSwitch({
 	disabled,
 	onNode,
 	offNode
-}: MattrixwvButtonSwitchProps){
+}, ref ) => {
 	return (
 		<Switch
 			id={id}
@@ -24,6 +25,7 @@ export default function ButtonSwitch({
 			checked={checked}
 			onChange={onChange}
 			disabled={disabled}
+			ref={ref}
 		>
 			{({ checked }) => (
 				<>
@@ -32,4 +34,8 @@ export default function ButtonSwitch({
 			)}
 		</Switch>
 	);
-}
+});
+
+ButtonSwitch.displayName = "ButtonSwitch";
+
+export default ButtonSwitch;

lib/component/input/switch/DangerSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function DangerSwitch({
+const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-red-600": !disabled,
-					"data-checked:bg-red-400/80": disabled
+					"data-checked:bg-danger": !disabled,
+					"data-checked:bg-danger-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DangerSwitch.displayName = "DangerSwitch";
+
+export default DangerSwitch;

lib/component/input/switch/DarkSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function DarkSwitch({
+const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-black": !disabled,
-					"data-checked:bg-neutral-800/80": disabled
+					"data-checked:bg-dark": !disabled,
+					"data-checked:bg-dark-mid/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkSwitch.displayName = "DarkSwitch";
+
+export default DarkSwitch;

lib/component/input/switch/InfoSwitch.tsx

@@ -0,0 +1,39 @@
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}, ref ) => {
+	return (
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-info": !disabled,
+					"data-checked:bg-info-light/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-neutral-light": disabled
+				}
+			)}
+			disabled={disabled}
+			ref={ref}
+		/>
+	);
+});
+
+InfoSwitch.displayName = "InfoSwitch";
+
+export default InfoSwitch;

lib/component/input/switch/LightSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function LightSwitch({
+const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-white": !disabled,
-					"data-checked:bg-neutral-300/80": disabled
+					"data-checked:bg-light": !disabled,
+					"data-checked:bg-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-black": !disabled,
-					"bg-neutral-800": disabled
+					"bg-neutral-dark": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+LightSwitch.displayName = "LightSwitch";
+
+export default LightSwitch;

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -1,10 +1,11 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import { Field, Label, Switch } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 
-export default function MattrixwvSwitch({
+const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	id,
 	className,
 	knobClassName,
@@ -19,7 +20,7 @@ export default function MattrixwvSwitch({
 	children,
 	offText,
 	onText
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<Field as={Fragment}>
 			<Switch
@@ -53,6 +54,7 @@ export default function MattrixwvSwitch({
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
+				ref={ref}
 			>
 				{
 					offText &&
@@ -105,4 +107,8 @@ export default function MattrixwvSwitch({
 			</Label>
 		</Field>
 	);
-}
+});
+
+MattrixwvSwitch.displayName = "MattrixwvSwitch";
+
+export default MattrixwvSwitch;

lib/component/input/switch/MoltenSwitch.tsx

@@ -0,0 +1,39 @@
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}, ref ) => {
+	return (
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-neutral-mid",
+				className,
+				{
+					"data-checked:bg-molten": !disabled,
+					"data-checked:bg-molten-light/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-neutral-light": disabled
+				}
+			)}
+			disabled={disabled}
+			ref={ref}
+		/>
+	);
+});
+
+MoltenSwitch.displayName = "MoltenSwitch";
+
+export default MoltenSwitch;

lib/component/input/switch/PrimarySwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function PrimarySwitch({
+const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-blue-600": !disabled,
-					"data-checked:bg-blue-400/80": disabled
+					"data-checked:bg-primary": !disabled,
+					"data-checked:bg-primary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+PrimarySwitch.displayName = "PrimarySwitch";
+
+export default PrimarySwitch;

lib/component/input/switch/SecondarySwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SecondarySwitch({
+const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-neutral-600": !disabled,
-					"data-checked:bg-neutral-400/80": disabled
+					"data-checked:bg-secondary": !disabled,
+					"data-checked:bg-secondary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SecondarySwitch.displayName = "SecondarySwitch";
+
+export default SecondarySwitch;

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,32 +1,38 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SuccessDangerSwitch({
+const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
 				className,
 				{
-					"bg-red-600 data-checked:bg-green-600": !disabled,
-					"bg-red-400/80 data-checked:bg-green-400/80": disabled
+					"bg-danger data-checked:bg-success": !disabled,
+					"bg-danger-light/80 data-checked:bg-success-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
+
+export default SuccessDangerSwitch;

lib/component/input/switch/SuccessSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SuccessSwitch({
+const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-green-600": !disabled,
-					"data-checked:bg-green-400/80": disabled
+					"data-checked:bg-success": !disabled,
+					"data-checked:bg-success-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessSwitch.displayName = "SuccessSwitch";
+
+export default SuccessSwitch;

lib/component/input/switch/TertiarySwitch.tsx

@@ -1,14 +1,15 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function TertiarySwitch({
+const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
@@ -16,18 +17,23 @@ export default function TertiarySwitch({
 				"bg-gray-400",
 				className,
 				{
-					"data-checked:bg-purple-600": !disabled,
-					"data-checked:bg-purple-400/80": disabled
+					"data-checked:bg-tertiary": !disabled,
+					"data-checked:bg-tertiary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+TertiarySwitch.displayName = "TertiarySwitch";
+
+export default TertiarySwitch;

lib/component/input/switch/WarningSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function WarningSwitch({
+const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-yellow-500": !disabled,
-					"data-checked:bg-yellow-300/80": disabled
+					"data-checked:bg-warning": !disabled,
+					"data-checked:bg-warning-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+WarningSwitch.displayName = "WarningSwitch";
+
+export default WarningSwitch;

lib/component/message/DangerMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function DangerMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-danger-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-red-200 text-red-600"
+				"bg-danger-xlight text-danger-dark"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DangerMessageBlock.displayName = "DangerMessageBlock";
+
+export default DangerMessageBlock;

lib/component/message/DarkMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function DarkMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-dark-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-black text-white"
+				"bg-dark text-dark-xlight"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkMessageBlock.displayName = "DarkMessageBlock";
+
+export default DarkMessageBlock;

lib/component/message/InfoMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function InfoMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-info-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-cyan-100 text-blue-600"
+				"bg-info-xlight text-info-xdark"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+InfoMessageBlock.displayName = "InfoMessageBlock";
+
+export default InfoMessageBlock;

lib/component/message/LightMessageBlock.tsx

@@ -1,15 +1,13 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function LightMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-light-message-block"
@@ -18,6 +16,11 @@ export default function LightMessageBlock(props: MessageBlockProps){
 				className,
 				"bg-white text-black"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+LightMessageBlock.displayName = "LightMessageBlock";
+
+export default LightMessageBlock;

lib/component/message/MessageBlock.tsx

@@ -1,16 +1,14 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function MessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		outline = "sm",
-		rounded = "lg",
-		...messageProps
-	} = props;
-
-
+const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	outline = "sm",
+	rounded = "lg",
+	...messageProps
+}, ref ) => {
 	return (
 		<div
 			data-testid="mattrixwv-message-block"
@@ -33,6 +31,11 @@ export default function MessageBlock(props: MessageBlockProps){
 					"rounded-xl": rounded === "xl"
 				}
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MessageBlock.displayName = "MessageBlock";
+
+export default MessageBlock;

lib/component/message/MoltenMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function MoltenMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-molten-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-orange-100 text-orange-600"
+				"bg-molten-xlight text-molten-mid"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MoltenMessageBlock.displayName = "MoltenMessageBlock";
+
+export default MoltenMessageBlock;

lib/component/message/PrimaryMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function PrimaryMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-primary-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-blue-200 text-blue-600"
+				"bg-primary-xlight text-primary-dark"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+PrimaryMessageBlock.displayName = "PrimaryMessageBlock";
+
+export default PrimaryMessageBlock;

lib/component/message/SecondaryMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function SecondaryMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-secondary-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-neutral-200 text-neutral-600"
+				"bg-secondary-xlight text-secondary-mid"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SecondaryMessageBlock.displayName = "SecondaryMessageBlock";
+
+export default SecondaryMessageBlock;

lib/component/message/SuccessMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function SuccessMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-success-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-green-100 text-green-600"
+				"bg-success-xlight text-success-mid"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessMessageBlock.displayName = "SuccessMessageBlock";
+
+export default SuccessMessageBlock;

lib/component/message/TertiaryMessageBlock.tsx

@@ -1,24 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function TertiaryMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-tertiary-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-purple-200 text-purple-600"
+				"bg-tertiary-xlight text-tertiary-mid"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
 
+TertiaryMessageBlock.displayName = "TertiaryMessageBlock";
+
+export default TertiaryMessageBlock;

lib/component/message/WarningMessageBlock.tsx

@@ -1,23 +1,26 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-export default function WarningMessageBlock(props: MessageBlockProps){
-	const {
-		className,
-		...messageProps
-	} = props;
-
-
+const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+	className,
+	...messageProps
+}, ref ) => {
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-warning-message-block"
 			{...messageProps}
 			className={clsx(
 				className,
-				"bg-yellow-100 text-yellow-600"
+				"bg-warning-xlight text-warning-dark"
 			)}
+			ref={ref}
 		/>
 	);
-}
+});
+
+WarningMessageBlock.displayName = "WarningMessageBlock";
+
+export default WarningMessageBlock;

lib/component/progress/DangerProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function DangerProgress(props: ThemedProgressProps){
+const DangerProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-red-600)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-danger)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DangerProgress.displayName = "DangerProgress";
+
+export default DangerProgress;

lib/component/progress/DarkProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function DarkProgress(props: ThemedProgressProps){
+const DarkProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-white)"
-			progressColor="var(--color-black)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-dark)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkProgress.displayName = "DarkProgress";
+
+export default DarkProgress;

lib/component/progress/InfoProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function InfoProgress(props: ThemedProgressProps){
+const InfoProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-cyan-500)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-info)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+InfoProgress.displayName = "InfoProgress";
+
+export default InfoProgress;

lib/component/progress/LightProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function LightProgress(props: ThemedProgressProps){
+const LightProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-black)"
-			progressColor="var(--color-white)"
+			backgroundColor="var(--color-dark)"
+			progressColor="var(--color-light)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+LightProgress.displayName = "LightProgress";
+
+export default LightProgress;

lib/component/progress/MoltenProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function MoltenProgress(props: ThemedProgressProps){
+const MoltenProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-orange-600)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-molten)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+MoltenProgress.displayName = "MoltenProgress";
+
+export default MoltenProgress;

lib/component/progress/PrimaryProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function PrimaryProgress(props: ThemedProgressProps){
+const PrimaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-blue-500)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-primary)"
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+PrimaryProgress.displayName = "PrimaryProgress";
+
+export default PrimaryProgress;

lib/component/progress/Progress.tsx

@@ -1,9 +1,9 @@
 import type { ProgressProps } from "$/types/ProgressTypes";
 import clsx from "clsx";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 
 
-export default function Progress({
+const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
 	id,
 	className,
 	value,
@@ -15,7 +15,7 @@ export default function Progress({
 	tabIndex,
 	progressColor,
 	backgroundColor
-}: ProgressProps){
+}, ref ) => {
 	const percentage = useMemo(() => {
 		const num = !value || Number.isNaN(value) ? min : Math.max(value, min);
 		const den = (!value || Number.isNaN(value) ? max : Math.max(value, max)) - min;
@@ -55,6 +55,7 @@ export default function Progress({
 			aria-valuenow={value ? Math.round(value * 10000) / 100 : undefined}
 			aria-label={label}
 			tabIndex={tabIndex ?? 0}
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -76,4 +77,8 @@ export default function Progress({
 			/>
 		</div>
 	);
-}
+});
+
+Progress.displayName = "Progress";
+
+export default Progress;

lib/component/progress/SecondaryProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function SecondaryProgress(props: ThemedProgressProps){
+const SecondaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
 			backgroundColor="var(--color-gray-300)"
 			progressColor="var(--color-neutral-500)"
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+SecondaryProgress.displayName = "SecondaryProgress";
+
+export default SecondaryProgress;

lib/component/progress/SuccessProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function SuccessProgress(props: ThemedProgressProps){
+const SuccessProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-green-600)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-success)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessProgress.displayName = "SuccessProgress";
+
+export default SuccessProgress;

lib/component/progress/TertiaryProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function TertiaryProgress(props: ThemedProgressProps){
+const TertiaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-purple-600)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-tertiary)"
 			{...props}
+			ref={ref}
 		/>
 	);
-}
+});
+
+TertiaryProgress.displayName = "TertiaryProgress";
+
+export default TertiaryProgress;

lib/component/progress/WarningProgress.tsx

@@ -1,13 +1,21 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
+import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-export default function WarningProgress(props: ThemedProgressProps){
+const WarningProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+	...props
+}, ref ) => {
 	return (
 		<Progress
-			backgroundColor="var(--color-gray-300)"
-			progressColor="var(--color-yellow-500)"
+			backgroundColor="var(--color-neutral)"
+			progressColor="var(--color-warning)"
+			ref={ref}
 			{...props}
 		/>
 	);
-}
+});
+
+WarningProgress.displayName = "WarningProgress";
+
+export default WarningProgress;

lib/styles.css

@@ -0,0 +1,80 @@
+@import "tailwindcss";
+
+@theme {
+	/* Universal */
+	--color-neutral-light: oklch(92.8% 0.006 264.531);	/* gray-200 */
+	--color-neutral: oklch(87.2% 0.01 258.338);			/* gray-300 */
+	--color-neutral-mid: oklch(70.7% 0.022 261.325);	/* gray-400 */
+	--color-neutral-dark: oklch(26.9% 0 0);				/* gray-800 */
+
+	/* Primary */
+	--color-primary-xlight: oklch(88.2% 0.059 254.128);	/* blue-200 */
+	--color-primary-light: oklch(70.7% 0.165 254.624);	/* blue-400 */
+	--color-primary: oklch(54.6% 0.245 262.881);		/* blue-600 */
+	--color-primary-mid: oklch(48.8% 0.243 264.376);	/* blue-700 */
+	--color-primary-dark: oklch(42.4% 0.199 265.638);	/* blue-800 */
+
+	/* Secondary */
+	--color-secondary-xlight: oklch(92.2% 0 0);	/* neutral-200 */
+	--color-secondary-light: oklch(87% 0 0);	/* neutral-300 */
+	--color-secondary: oklch(55.6% 0 0);	/* neutral-500 */
+	--color-secondary-mid: oklch(43.9% 0 0);	/* neutral-600 */
+	--color-secondary-dark: oklch(37.1% 0 0);	/* neutral-700 */
+
+	/* Tertiary */
+	--color-tertiary-xlight: oklch(90.2% 0.063 306.703);	/* purple-200 */
+	--color-tertiary-light: oklch(71.4% 0.203 305.504);		/* purple-400 */
+	--color-tertiary: oklch(55.8% 0.288 302.321);			/* purple-600 */
+	--color-tertiary-mid: oklch(49.6% 0.265 301.924);		/* purple-700 */
+	--color-tertiary-dark: oklch(43.8% 0.218 303.724);		/* purple-800 */
+
+	/* Info */
+	--color-info-xlight: oklch(95.6% 0.045 203.388);	/* cyan-100 */
+	--color-info-light: oklch(82.8% 0.111 230.318);		/* sky-300  */
+	--color-info: oklch(71.5% 0.143 215.221);			/* cyan-500 */
+	--color-info-mid: oklch(60.9% 0.126 221.723);		/* cyan-600 */
+	--color-info-dark: oklch(52% 0.105 223.128);		/* cyan-700 */
+	--color-info-xdark: oklch(54.6% 0.245 262.881);		/* blue-600 */
+
+	/* Molten */
+	--color-molten-xlight: oklch(95.4% 0.038 75.164);	/* orange-100 */
+	--color-molten-light: oklch(75% 0.183 55.934);		/* orange-400 */
+	--color-molten: oklch(64.6% 0.222 41.116);			/* orange-600 */
+	--color-molten-mid: oklch(55.3% 0.195 38.402);		/* orange-700 */
+	--color-molten-dark: oklch(47% 0.157 37.304);		/* orange-800 */
+
+	/* Success */
+	--color-success-xlight: oklch(96.2% 0.044 156.743);	/* green-100 */
+	--color-success-light: oklch(79.2% 0.209 151.711);	/* green-400 */
+	--color-success: oklch(62.7% 0.194 149.214);		/* green-600 */
+	--color-success-mid: oklch(52.7% 0.154 150.069);	/* green-700 */
+	--color-success-dark: oklch(44.8% 0.119 151.328);	/* green-800 */
+
+	/* Warning */
+	--color-warning-xlight: oklch(97.3% 0.071 103.193);	/* yellow-100 */
+	--color-warning-light: oklch(90.5% 0.182 98.111);	/* yellow-300 */
+	--color-warning: oklch(79.5% 0.184 86.047);			/* yellow-500 */
+	--color-warning-mid: oklch(68.1% 0.162 75.834);		/* yellow-600 */
+	--color-warning-dark: oklch(55.4% 0.135 66.442);	/* yellow-700 */
+
+	/* Danger */
+	--color-danger-xlight: oklch(88.5% 0.062 18.334);	/* red-200 */
+	--color-danger-light: oklch(70.4% 0.191 22.216);	/* red-400 */
+	--color-danger: oklch(57.7% 0.245 27.325);			/* red-600 */
+	--color-danger-mid: oklch(50.5% 0.213 27.518);		/* red-700 */
+	--color-danger-dark: oklch(44.4% 0.177 26.899);		/* red-800 */
+
+	/* Light */
+	--color-light-xlight: oklch(87% 0 0);	/* neutral-300 */
+	--color-light-light: oklch(70.8% 0 0);	/* neutral-400 */
+	--color-light: oklch(100% 0 0);			/* white */
+	--color-light-mid: oklch(87% 0 0);		/* neutral-300 */
+	--color-light-dark: oklch(70.8% 0 0);	/* neutral-400 */
+
+	/* Dark */
+	--color-dark-xlight: oklch(100% 0 0);	/* white */
+	--color-dark-light: oklch(37.1% 0 0);	/* neutral-700 */
+	--color-dark: oklch(0% 0 0);			/* black */
+	--color-dark-mid: oklch(37.1% 0 0);		/* neutral-700 */
+	--color-dark-dark: oklch(43.9% 0 0);	/* neutral-600 */
+}

src/index.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
+@import "../lib/styles.css";
+
+
 @theme {
 	--color-neutral-825: oklch(0.253 0 0);
 	--color-neutral-850: oklch(0.237 0 0);

src/util/InputUtils.tsx

@@ -29,8 +29,10 @@ import WarningRadioButton from "$/component/input/radio/WarningRadioButton";
 import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
 import DangerSwitch from "$/component/input/switch/DangerSwitch";
 import DarkSwitch from "$/component/input/switch/DarkSwitch";
+import InfoSwitch from "$/component/input/switch/InfoSwitch";
 import LightSwitch from "$/component/input/switch/LightSwitch";
 import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
+import MoltenSwitch from "$/component/input/switch/MoltenSwitch";
 import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
 import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
 import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
@@ -206,6 +208,44 @@ export function SwitchContent(){
 					</TertiarySwitch>
 				</div>
 			</SwitchDisplay>
+			<SwitchDisplay title="Info">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<InfoSwitch
+								size={size}
+								defaultChecked={true}
+							>
+								{size} Switch
+							</InfoSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<InfoSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</InfoSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<InfoSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</InfoSwitch>
+				</div>
+			</SwitchDisplay>
 			<SwitchDisplay title="Success">
 				{
 					sizes.map((size) => (
@@ -320,6 +360,44 @@ export function SwitchContent(){
 					</DangerSwitch>
 				</div>
 			</SwitchDisplay>
+			<SwitchDisplay title="Molten">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<MoltenSwitch
+								size={size}
+								defaultChecked={true}
+							>
+								{size} Switch
+							</MoltenSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<MoltenSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</MoltenSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<MoltenSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</MoltenSwitch>
+				</div>
+			</SwitchDisplay>
 			<SwitchDisplay title="Dark">
 				{
 					sizes.map((size) => (