@povio/ui 2.3.2 → 3.0.0

package/dist/components/buttons/Button/button.cva.js

@@ -1,609 +1,621 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
-import { cva } from "class-variance-authority";
 //#region src/components/buttons/Button/button.cva.ts
-var button = cva([
-	"group inline-flex items-center justify-center border border-solid",
-	uiOutlineClass,
-	"group-data-[split]/split:data-[separator]:relative",
-	"group-data-[split]/split:data-[separator]:after:content-['']",
-	"group-data-[split]/split:data-[separator]:after:h-full",
-	"group-data-[split]/split:data-[separator]:after:w-px",
-	"group-data-[split]/split:data-[separator]:after:absolute",
-	"group-data-[split]/split:data-[separator]:after:-right-px",
-	"group-data-[split]/split:data-[separator]:after:border-t",
-	"group-data-[split]/split:data-[separator]:after:border-b",
-	"group-data-[split]/split:data-[separator]:after:box-content"
-], {
-	variants: {
-		width: {
-			fill: "w-full",
-			hug: "w-auto"
-		},
-		size: {
-			none: "",
-			xs: "",
-			s: "",
-			m: "",
-			l: ""
-		},
-		color: {
-			primary: "",
-			secondary: "",
-			success: "",
-			warning: "",
-			error: "",
-			dual: ""
-		},
-		variant: {
-			contained: "",
-			outlined: "",
-			subtle: "",
-			text: "group-data-[split]/split:data-[separator]:after:hidden",
-			ghost: ""
-		},
-		inverted: {
-			true: "",
-			false: ""
-		}
-	},
-	compoundVariants: [
-		{
-			variant: "contained",
-			color: ["primary", "dual"],
-			className: [
-				"border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
-				"hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
-				"pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
-				"disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
-				"focus-visible:outline-interactive-contained-primary-focus",
-				"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
-				"selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-primary-on-idle!"
-			]
-		},
-		{
-			variant: "outlined",
-			color: ["primary", "dual"],
-			className: [
-				"border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
-				"hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
-				"pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
-				"disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
-				"focus-visible:outline-interactive-outlined-primary-focus",
-				"selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
-				"selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
-				"selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
-			]
-		},
-		{
-			variant: "subtle",
-			color: ["primary", "dual"],
-			className: [
-				"border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
-				"hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
-				"pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
-				"disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
-				"focus-visible:outline-interactive-subtle-primary-focus",
-				"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
-				"selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
-				"selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-primary-on-idle!"
-			]
+var buttonDefinition = UIOverrides.defineConfig({
+	base: [
+		"group inline-flex items-center justify-center border border-solid",
+		uiOutlineClass,
+		"group-data-[split]/split:data-[separator]:relative",
+		"group-data-[split]/split:data-[separator]:after:content-['']",
+		"group-data-[split]/split:data-[separator]:after:h-full",
+		"group-data-[split]/split:data-[separator]:after:w-px",
+		"group-data-[split]/split:data-[separator]:after:absolute",
+		"group-data-[split]/split:data-[separator]:after:-right-px",
+		"group-data-[split]/split:data-[separator]:after:border-t",
+		"group-data-[split]/split:data-[separator]:after:border-b",
+		"group-data-[split]/split:data-[separator]:after:box-content"
+	],
+	config: {
+		variants: {
+			width: {
+				fill: "w-full",
+				hug: "w-auto"
+			},
+			size: {
+				none: "",
+				xs: "",
+				s: "",
+				m: "",
+				l: ""
+			},
+			color: {
+				primary: "",
+				secondary: "",
+				success: "",
+				warning: "",
+				error: "",
+				dual: ""
+			},
+			variant: {
+				contained: "",
+				outlined: "",
+				subtle: "",
+				text: "group-data-[split]/split:data-[separator]:after:hidden",
+				ghost: ""
+			},
+			inverted: {
+				true: "",
+				false: ""
+			}
 		},
-		{
-			variant: "ghost",
+		compoundVariants: [
+			{
+				variant: "contained",
+				color: ["primary", "dual"],
+				className: [
+					"border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
+					"hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
+					"pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
+					"disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
+					"focus-visible:outline-interactive-contained-primary-focus",
+					"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+					"selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-primary-on-idle!"
+				]
+			},
+			{
+				variant: "outlined",
+				color: ["primary", "dual"],
+				className: [
+					"border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
+					"hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
+					"pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
+					"disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
+					"focus-visible:outline-interactive-outlined-primary-focus",
+					"selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
+				]
+			},
+			{
+				variant: "subtle",
+				color: ["primary", "dual"],
+				className: [
+					"border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+					"hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+					"pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+					"disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+					"focus-visible:outline-interactive-subtle-primary-focus",
+					"selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+					"selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
+					"selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-primary-on-idle!"
+				]
+			},
+			{
+				variant: "ghost",
+				color: "primary",
+				className: [
+					"border-interactive-ghost-primary-idle bg-interactive-ghost-primary-idle text-interactive-ghost-primary-on-idle",
+					"hover:border-interactive-ghost-primary-hover hover:bg-interactive-ghost-primary-hover hover:text-interactive-ghost-primary-on-hover",
+					"pressed:border-interactive-ghost-primary-pressed pressed:bg-interactive-ghost-primary-pressed pressed:text-interactive-ghost-primary-on-pressed",
+					"disabled:border-interactive-ghost-primary-disabled disabled:bg-interactive-ghost-primary-disabled disabled:text-interactive-ghost-primary-on-disabled",
+					"focus-visible:outline-interactive-ghost-primary-focus",
+					"selected:border-interactive-ghost-primary-toggled-idle selected:bg-interactive-ghost-primary-toggled-idle selected:text-interactive-ghost-primary-on-toggled-idle",
+					"selected:hover:border-interactive-ghost-primary-toggled-hover selected:hover:bg-interactive-ghost-primary-toggled-hover selected:hover:text-interactive-ghost-primary-on-toggled-hover",
+					"selected:disabled:border-interactive-ghost-primary-toggled-disabled selected:disabled:bg-interactive-ghost-primary-toggled-disabled selected:disabled:text-interactive-ghost-primary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:hidden"
+				]
+			},
+			{
+				variant: "contained",
+				color: "secondary",
+				className: [
+					"border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
+					"hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
+					"pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
+					"disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
+					"focus-visible:outline-interactive-contained-secondary-focus",
+					"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-secondary-on-idle!"
+				]
+			},
+			{
+				variant: "outlined",
+				color: "secondary",
+				className: [
+					"border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
+					"hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
+					"pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
+					"disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
+					"focus-visible:outline-interactive-outlined-secondary-focus",
+					"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
+				]
+			},
+			{
+				variant: "subtle",
+				color: "secondary",
+				className: [
+					"border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+					"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+					"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+					"disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+					"focus-visible:outline-interactive-subtle-secondary-focus",
+					"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-secondary-on-idle!"
+				]
+			},
+			{
+				variant: "ghost",
+				color: "secondary",
+				className: [
+					"border-interactive-ghost-secondary-idle bg-interactive-ghost-secondary-idle text-interactive-ghost-secondary-on-idle",
+					"hover:border-interactive-ghost-secondary-hover hover:bg-interactive-ghost-secondary-hover hover:text-interactive-ghost-secondary-on-hover",
+					"pressed:border-interactive-ghost-secondary-pressed pressed:bg-interactive-ghost-secondary-pressed pressed:text-interactive-ghost-secondary-on-pressed",
+					"disabled:border-interactive-ghost-secondary-disabled disabled:bg-interactive-ghost-secondary-disabled disabled:text-interactive-ghost-secondary-on-disabled",
+					"focus-visible:outline-interactive-ghost-secondary-focus",
+					"selected:border-interactive-ghost-secondary-toggled-idle selected:bg-interactive-ghost-secondary-toggled-idle selected:text-interactive-ghost-secondary-on-toggled-idle",
+					"selected:hover:border-interactive-ghost-secondary-toggled-hover selected:hover:bg-interactive-ghost-secondary-toggled-hover selected:hover:text-interactive-ghost-secondary-on-toggled-hover",
+					"selected:disabled:border-interactive-ghost-secondary-toggled-disabled selected:disabled:bg-interactive-ghost-secondary-toggled-disabled selected:disabled:text-interactive-ghost-secondary-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:hidden"
+				]
+			},
+			{
+				variant: "contained",
+				color: "success",
+				className: [
+					"border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
+					"hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
+					"pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
+					"disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
+					"focus-visible:outline-interactive-contained-success-focus",
+					"selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
+					"selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-success-on-idle!"
+				]
+			},
+			{
+				variant: "outlined",
+				color: "success",
+				className: [
+					"border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
+					"hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
+					"pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
+					"disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
+					"focus-visible:outline-interactive-outlined-success-focus",
+					"selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
+				]
+			},
+			{
+				variant: "subtle",
+				color: "success",
+				className: [
+					"border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+					"hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+					"pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+					"disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+					"focus-visible:outline-interactive-subtle-success-focus",
+					"selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
+					"selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
+					"selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-success-on-idle!"
+				]
+			},
+			{
+				variant: "ghost",
+				color: "success",
+				className: [
+					"border-interactive-ghost-success-idle bg-interactive-ghost-success-idle text-interactive-ghost-success-on-idle",
+					"hover:border-interactive-ghost-success-hover hover:bg-interactive-ghost-success-hover hover:text-interactive-ghost-success-on-hover",
+					"pressed:border-interactive-ghost-success-pressed pressed:bg-interactive-ghost-success-pressed pressed:text-interactive-ghost-success-on-pressed",
+					"disabled:border-interactive-ghost-success-disabled disabled:bg-interactive-ghost-success-disabled disabled:text-interactive-ghost-success-on-disabled",
+					"focus-visible:outline-interactive-ghost-success-focus",
+					"selected:border-interactive-ghost-success-toggled-idle selected:bg-interactive-ghost-success-toggled-idle selected:text-interactive-ghost-success-on-toggled-idle",
+					"selected:hover:border-interactive-ghost-success-toggled-hover selected:hover:bg-interactive-ghost-success-toggled-hover selected:hover:text-interactive-ghost-success-on-toggled-hover",
+					"selected:disabled:border-interactive-ghost-success-toggled-disabled selected:disabled:bg-interactive-ghost-success-toggled-disabled selected:disabled:text-interactive-ghost-success-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:hidden"
+				]
+			},
+			{
+				variant: "contained",
+				color: "warning",
+				className: [
+					"border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
+					"hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
+					"pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
+					"disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
+					"focus-visible:outline-interactive-contained-warning-focus",
+					"selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
+					"selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-warning-on-idle!"
+				]
+			},
+			{
+				variant: "outlined",
+				color: "warning",
+				className: [
+					"border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
+					"hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
+					"pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
+					"disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
+					"focus-visible:outline-interactive-outlined-warning-focus",
+					"selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
+				]
+			},
+			{
+				variant: "subtle",
+				color: "warning",
+				className: [
+					"border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+					"hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+					"pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+					"disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+					"focus-visible:outline-interactive-subtle-warning-focus",
+					"selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
+					"selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
+					"selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-warning-on-idle!"
+				]
+			},
+			{
+				variant: "ghost",
+				color: "warning",
+				className: [
+					"border-interactive-ghost-warning-idle bg-interactive-ghost-warning-idle text-interactive-ghost-warning-on-idle",
+					"hover:border-interactive-ghost-warning-hover hover:bg-interactive-ghost-warning-hover hover:text-interactive-ghost-warning-on-hover",
+					"pressed:border-interactive-ghost-warning-pressed pressed:bg-interactive-ghost-warning-pressed pressed:text-interactive-ghost-warning-on-pressed",
+					"disabled:border-interactive-ghost-warning-disabled disabled:bg-interactive-ghost-warning-disabled disabled:text-interactive-ghost-warning-on-disabled",
+					"focus-visible:outline-interactive-ghost-warning-focus",
+					"selected:border-interactive-ghost-warning-toggled-idle selected:bg-interactive-ghost-warning-toggled-idle selected:text-interactive-ghost-warning-on-toggled-idle",
+					"selected:hover:border-interactive-ghost-warning-toggled-hover selected:hover:bg-interactive-ghost-warning-toggled-hover selected:hover:text-interactive-ghost-warning-on-toggled-hover",
+					"selected:disabled:border-interactive-ghost-warning-toggled-disabled selected:disabled:bg-interactive-ghost-warning-toggled-disabled selected:disabled:text-interactive-ghost-warning-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:hidden"
+				]
+			},
+			{
+				variant: "contained",
+				color: "error",
+				className: [
+					"border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
+					"hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
+					"pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
+					"disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
+					"focus-visible:outline-interactive-contained-error-focus",
+					"selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
+					"selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
+					"selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-error-on-idle!"
+				]
+			},
+			{
+				variant: "outlined",
+				color: "error",
+				className: [
+					"border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
+					"hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
+					"pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
+					"disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
+					"focus-visible:outline-interactive-outlined-error-focus",
+					"selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
+					"selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
+					"selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
+				]
+			},
+			{
+				variant: "subtle",
+				color: "error",
+				className: [
+					"border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+					"hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+					"pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+					"disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+					"focus-visible:outline-interactive-subtle-error-focus",
+					"selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
+					"selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
+					"selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-error-on-idle!"
+				]
+			},
+			{
+				variant: "ghost",
+				color: "error",
+				className: [
+					"border-interactive-ghost-error-idle bg-interactive-ghost-error-idle text-interactive-ghost-error-on-idle",
+					"hover:border-interactive-ghost-error-hover hover:bg-interactive-ghost-error-hover hover:text-interactive-ghost-error-on-hover",
+					"pressed:border-interactive-ghost-error-pressed pressed:bg-interactive-ghost-error-pressed pressed:text-interactive-ghost-error-on-pressed",
+					"disabled:border-interactive-ghost-error-disabled disabled:bg-interactive-ghost-error-disabled disabled:text-interactive-ghost-error-on-disabled",
+					"focus-visible:outline-interactive-ghost-error-focus",
+					"selected:border-interactive-ghost-error-toggled-idle selected:bg-interactive-ghost-error-toggled-idle selected:text-interactive-ghost-error-on-toggled-idle",
+					"selected:hover:border-interactive-ghost-error-toggled-hover selected:hover:bg-interactive-ghost-error-toggled-hover selected:hover:text-interactive-ghost-error-on-toggled-hover",
+					"selected:disabled:border-interactive-ghost-error-toggled-disabled selected:disabled:bg-interactive-ghost-error-toggled-disabled selected:disabled:text-interactive-ghost-error-on-toggled-disabled",
+					"group-data-[split]/split:data-[separator]:after:hidden"
+				]
+			},
+			{
+				variant: "text",
+				color: "primary",
+				inverted: false,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-primary-idle",
+					"hover:text-interactive-text-primary-hover",
+					"pressed:text-interactive-text-primary-pressed",
+					"disabled:text-interactive-text-primary-disabled",
+					"focus-visible:outline-interactive-text-primary-focus",
+					"selected:text-interactive-text-primary-toggled-idle",
+					"selected:hover:text-interactive-text-primary-toggled-hovered",
+					"selected:disabled:text-interactive-text-primary-toggled-disabled"
+				]
+			},
+			{
+				variant: "text",
+				color: "secondary",
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-secondary-idle",
+					"hover:text-interactive-text-secondary-hover",
+					"pressed:text-interactive-text-secondary-pressed",
+					"disabled:text-interactive-text-secondary-disabled",
+					"focus-visible:outline-interactive-text-secondary-focus",
+					"selected:text-interactive-text-secondary-toggled-idle",
+					"selected:hover:text-interactive-text-secondary-toggled-hovered",
+					"selected:disabled:text-interactive-text-secondary-toggled-disabled"
+				]
+			},
+			{
+				variant: "text",
+				color: "success",
+				inverted: false,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-success-idle",
+					"hover:text-interactive-text-success-hover",
+					"pressed:text-interactive-text-success-pressed",
+					"disabled:text-interactive-text-success-disabled",
+					"focus-visible:outline-interactive-text-success-focus",
+					"selected:text-interactive-text-success-toggled-idle",
+					"selected:hover:text-interactive-text-success-toggled-hovered",
+					"selected:disabled:text-interactive-text-success-toggled-disabled"
+				]
+			},
+			{
+				variant: "text",
+				color: "warning",
+				inverted: false,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-warning-idle",
+					"hover:text-interactive-text-warning-hover",
+					"pressed:text-interactive-text-warning-pressed",
+					"disabled:text-interactive-text-warning-disabled",
+					"focus-visible:outline-interactive-text-warning-focus",
+					"selected:text-interactive-text-warning-toggled-idle",
+					"selected:hover:text-interactive-text-warning-toggled-hovered",
+					"selected:disabled:text-interactive-text-warning-toggled-disabled"
+				]
+			},
+			{
+				variant: "text",
+				color: "error",
+				inverted: false,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-error-idle",
+					"hover:text-interactive-text-error-hover",
+					"pressed:text-interactive-text-error-pressed",
+					"disabled:text-interactive-text-error-disabled",
+					"focus-visible:outline-interactive-text-error-focus",
+					"selected:text-interactive-text-error-toggled-idle",
+					"selected:hover:text-interactive-text-error-toggled-hovered",
+					"selected:disabled:text-interactive-text-error-toggled-disabled"
+				]
+			},
+			{
+				variant: "text",
+				color: "primary",
+				inverted: true,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-primary-idle-inverted",
+					"hover:text-interactive-text-primary-hover-inverted",
+					"pressed:text-interactive-text-primary-pressed-inverted",
+					"disabled:text-interactive-text-primary-disabled-inverted",
+					"focus-visible:outline-interactive-text-primary-focus-inverted",
+					"selected:text-interactive-text-primary-toggled-idle-inverted",
+					"selected:hover:text-interactive-text-primary-toggled-hovered-inverted",
+					"selected:disabled:text-interactive-text-primary-toggled-disabled-inverted"
+				]
+			},
+			{
+				variant: "text",
+				color: "success",
+				inverted: true,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-success-idle-inverted",
+					"hover:text-interactive-text-success-hover-inverted",
+					"pressed:text-interactive-text-success-pressed-inverted",
+					"disabled:text-interactive-text-success-disabled-inverted",
+					"focus-visible:outline-interactive-text-success-focus-inverted",
+					"selected:text-interactive-text-success-toggled-idle-inverted",
+					"selected:hover:text-interactive-text-success-toggled-hovered-inverted",
+					"selected:disabled:text-interactive-text-success-toggled-disabled-inverted"
+				]
+			},
+			{
+				variant: "text",
+				color: "warning",
+				inverted: true,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-warning-idle-inverted",
+					"hover:text-interactive-text-warning-hover-inverted",
+					"pressed:text-interactive-text-warning-pressed-inverted",
+					"disabled:text-interactive-text-warning-disabled-inverted",
+					"focus-visible:outline-interactive-text-warning-focus-inverted",
+					"selected:text-interactive-text-warning-toggled-idle-inverted",
+					"selected:hover:text-interactive-text-warning-toggled-hovered-inverted",
+					"selected:disabled:text-interactive-text-warning-toggled-disabled-inverted"
+				]
+			},
+			{
+				variant: "text",
+				color: "error",
+				inverted: true,
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-error-idle-inverted",
+					"hover:text-interactive-text-error-hover-inverted",
+					"pressed:text-interactive-text-error-pressed-inverted",
+					"disabled:text-interactive-text-error-disabled-inverted",
+					"focus-visible:outline-interactive-text-error-focus-inverted",
+					"selected:text-interactive-text-error-toggled-idle-inverted",
+					"selected:hover:text-interactive-text-error-toggled-hovered-inverted",
+					"selected:disabled:text-interactive-text-error-toggled-disabled-inverted"
+				]
+			},
+			{
+				variant: "text",
+				color: "dual",
+				className: [
+					"border-support-transparent-outline",
+					"text-interactive-text-secondary-idle [&_svg]:text-interactive-text-primary-idle",
+					"hover:text-interactive-text-primary-hover hover:[&_svg]:text-interactive-text-primary-hover",
+					"pressed:text-interactive-text-primary-pressed pressed:[&_svg]:text-interactive-text-primary-pressed",
+					"disabled:text-interactive-text-primary-disabled disabled:[&_svg]:text-interactive-text-primary-disabled",
+					"focus-visible:outline-interactive-text-primary-focus",
+					"selected:text-interactive-text-primery-toggled-idle selected:[&_svg]:text-interactive-text-primery-toggled-idle",
+					"selected:hover:text-interactive-text-primary-toggled-hovered selected:hover:[&_svg]:text-interactive-text-primary-toggled-hovered",
+					"selected:disabled:text-interactive-text-primary-toggled-disabled selected:disabled:[&_svg]:text-interactive-text-primary-toggled-disabled"
+				]
+			}
+		],
+		defaultVariants: {
+			width: "hug",
 			color: "primary",
-			className: [
-				"border-interactive-ghost-primary-idle bg-interactive-ghost-primary-idle text-interactive-ghost-primary-on-idle",
-				"hover:border-interactive-ghost-primary-hover hover:bg-interactive-ghost-primary-hover hover:text-interactive-ghost-primary-on-hover",
-				"pressed:border-interactive-ghost-primary-pressed pressed:bg-interactive-ghost-primary-pressed pressed:text-interactive-ghost-primary-on-pressed",
-				"disabled:border-interactive-ghost-primary-disabled disabled:bg-interactive-ghost-primary-disabled disabled:text-interactive-ghost-primary-on-disabled",
-				"focus-visible:outline-interactive-ghost-primary-focus",
-				"selected:border-interactive-ghost-primary-toggled-idle selected:bg-interactive-ghost-primary-toggled-idle selected:text-interactive-ghost-primary-on-toggled-idle",
-				"selected:hover:border-interactive-ghost-primary-toggled-hover selected:hover:bg-interactive-ghost-primary-toggled-hover selected:hover:text-interactive-ghost-primary-on-toggled-hover",
-				"selected:disabled:border-interactive-ghost-primary-toggled-disabled selected:disabled:bg-interactive-ghost-primary-toggled-disabled selected:disabled:text-interactive-ghost-primary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:hidden"
-			]
-		},
-		{
-			variant: "contained",
-			color: "secondary",
-			className: [
-				"border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
-				"hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
-				"pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
-				"disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
-				"focus-visible:outline-interactive-contained-secondary-focus",
-				"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
-				"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-secondary-on-idle!"
-			]
-		},
-		{
-			variant: "outlined",
-			color: "secondary",
-			className: [
-				"border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
-				"hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
-				"pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
-				"disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
-				"focus-visible:outline-interactive-outlined-secondary-focus",
-				"selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
-				"selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
-			]
-		},
-		{
-			variant: "subtle",
-			color: "secondary",
-			className: [
-				"border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
-				"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-				"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-				"disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-				"focus-visible:outline-interactive-subtle-secondary-focus",
-				"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
-				"selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
-				"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-secondary-on-idle!"
-			]
-		},
-		{
-			variant: "ghost",
-			color: "secondary",
-			className: [
-				"border-interactive-ghost-secondary-idle bg-interactive-ghost-secondary-idle text-interactive-ghost-secondary-on-idle",
-				"hover:border-interactive-ghost-secondary-hover hover:bg-interactive-ghost-secondary-hover hover:text-interactive-ghost-secondary-on-hover",
-				"pressed:border-interactive-ghost-secondary-pressed pressed:bg-interactive-ghost-secondary-pressed pressed:text-interactive-ghost-secondary-on-pressed",
-				"disabled:border-interactive-ghost-secondary-disabled disabled:bg-interactive-ghost-secondary-disabled disabled:text-interactive-ghost-secondary-on-disabled",
-				"focus-visible:outline-interactive-ghost-secondary-focus",
-				"selected:border-interactive-ghost-secondary-toggled-idle selected:bg-interactive-ghost-secondary-toggled-idle selected:text-interactive-ghost-secondary-on-toggled-idle",
-				"selected:hover:border-interactive-ghost-secondary-toggled-hover selected:hover:bg-interactive-ghost-secondary-toggled-hover selected:hover:text-interactive-ghost-secondary-on-toggled-hover",
-				"selected:disabled:border-interactive-ghost-secondary-toggled-disabled selected:disabled:bg-interactive-ghost-secondary-toggled-disabled selected:disabled:text-interactive-ghost-secondary-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:hidden"
-			]
-		},
-		{
 			variant: "contained",
-			color: "success",
-			className: [
-				"border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
-				"hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
-				"pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
-				"disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
-				"focus-visible:outline-interactive-contained-success-focus",
-				"selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
-				"selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-success-on-idle!"
-			]
-		},
-		{
-			variant: "outlined",
-			color: "success",
-			className: [
-				"border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
-				"hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
-				"pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
-				"disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
-				"focus-visible:outline-interactive-outlined-success-focus",
-				"selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
-				"selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
-				"selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
-			]
-		},
-		{
-			variant: "subtle",
-			color: "success",
-			className: [
-				"border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
-				"hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
-				"pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
-				"disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
-				"focus-visible:outline-interactive-subtle-success-focus",
-				"selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
-				"selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
-				"selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-success-on-idle!"
-			]
-		},
-		{
-			variant: "ghost",
-			color: "success",
-			className: [
-				"border-interactive-ghost-success-idle bg-interactive-ghost-success-idle text-interactive-ghost-success-on-idle",
-				"hover:border-interactive-ghost-success-hover hover:bg-interactive-ghost-success-hover hover:text-interactive-ghost-success-on-hover",
-				"pressed:border-interactive-ghost-success-pressed pressed:bg-interactive-ghost-success-pressed pressed:text-interactive-ghost-success-on-pressed",
-				"disabled:border-interactive-ghost-success-disabled disabled:bg-interactive-ghost-success-disabled disabled:text-interactive-ghost-success-on-disabled",
-				"focus-visible:outline-interactive-ghost-success-focus",
-				"selected:border-interactive-ghost-success-toggled-idle selected:bg-interactive-ghost-success-toggled-idle selected:text-interactive-ghost-success-on-toggled-idle",
-				"selected:hover:border-interactive-ghost-success-toggled-hover selected:hover:bg-interactive-ghost-success-toggled-hover selected:hover:text-interactive-ghost-success-on-toggled-hover",
-				"selected:disabled:border-interactive-ghost-success-toggled-disabled selected:disabled:bg-interactive-ghost-success-toggled-disabled selected:disabled:text-interactive-ghost-success-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:hidden"
-			]
-		},
-		{
-			variant: "contained",
-			color: "warning",
-			className: [
-				"border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
-				"hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
-				"pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
-				"disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
-				"focus-visible:outline-interactive-contained-warning-focus",
-				"selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
-				"selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-warning-on-idle!"
-			]
-		},
-		{
-			variant: "outlined",
-			color: "warning",
-			className: [
-				"border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
-				"hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
-				"pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
-				"disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
-				"focus-visible:outline-interactive-outlined-warning-focus",
-				"selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
-				"selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
-				"selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
-			]
-		},
-		{
-			variant: "subtle",
-			color: "warning",
-			className: [
-				"border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
-				"hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
-				"pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
-				"disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
-				"focus-visible:outline-interactive-subtle-warning-focus",
-				"selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
-				"selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
-				"selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-warning-on-idle!"
-			]
-		},
-		{
-			variant: "ghost",
-			color: "warning",
-			className: [
-				"border-interactive-ghost-warning-idle bg-interactive-ghost-warning-idle text-interactive-ghost-warning-on-idle",
-				"hover:border-interactive-ghost-warning-hover hover:bg-interactive-ghost-warning-hover hover:text-interactive-ghost-warning-on-hover",
-				"pressed:border-interactive-ghost-warning-pressed pressed:bg-interactive-ghost-warning-pressed pressed:text-interactive-ghost-warning-on-pressed",
-				"disabled:border-interactive-ghost-warning-disabled disabled:bg-interactive-ghost-warning-disabled disabled:text-interactive-ghost-warning-on-disabled",
-				"focus-visible:outline-interactive-ghost-warning-focus",
-				"selected:border-interactive-ghost-warning-toggled-idle selected:bg-interactive-ghost-warning-toggled-idle selected:text-interactive-ghost-warning-on-toggled-idle",
-				"selected:hover:border-interactive-ghost-warning-toggled-hover selected:hover:bg-interactive-ghost-warning-toggled-hover selected:hover:text-interactive-ghost-warning-on-toggled-hover",
-				"selected:disabled:border-interactive-ghost-warning-toggled-disabled selected:disabled:bg-interactive-ghost-warning-toggled-disabled selected:disabled:text-interactive-ghost-warning-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:hidden"
-			]
-		},
-		{
-			variant: "contained",
-			color: "error",
-			className: [
-				"border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
-				"hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
-				"pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
-				"disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
-				"focus-visible:outline-interactive-contained-error-focus",
-				"selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
-				"selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
-				"selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-contained-error-on-idle!"
-			]
-		},
-		{
-			variant: "outlined",
-			color: "error",
-			className: [
-				"border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
-				"hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
-				"pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
-				"disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
-				"focus-visible:outline-interactive-outlined-error-focus",
-				"selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
-				"selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
-				"selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
-			]
-		},
-		{
-			variant: "subtle",
-			color: "error",
-			className: [
-				"border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
-				"hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
-				"pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
-				"disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
-				"focus-visible:outline-interactive-subtle-error-focus",
-				"selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
-				"selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
-				"selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:bg-interactive-subtle-error-on-idle!"
-			]
-		},
-		{
-			variant: "ghost",
-			color: "error",
-			className: [
-				"border-interactive-ghost-error-idle bg-interactive-ghost-error-idle text-interactive-ghost-error-on-idle",
-				"hover:border-interactive-ghost-error-hover hover:bg-interactive-ghost-error-hover hover:text-interactive-ghost-error-on-hover",
-				"pressed:border-interactive-ghost-error-pressed pressed:bg-interactive-ghost-error-pressed pressed:text-interactive-ghost-error-on-pressed",
-				"disabled:border-interactive-ghost-error-disabled disabled:bg-interactive-ghost-error-disabled disabled:text-interactive-ghost-error-on-disabled",
-				"focus-visible:outline-interactive-ghost-error-focus",
-				"selected:border-interactive-ghost-error-toggled-idle selected:bg-interactive-ghost-error-toggled-idle selected:text-interactive-ghost-error-on-toggled-idle",
-				"selected:hover:border-interactive-ghost-error-toggled-hover selected:hover:bg-interactive-ghost-error-toggled-hover selected:hover:text-interactive-ghost-error-on-toggled-hover",
-				"selected:disabled:border-interactive-ghost-error-toggled-disabled selected:disabled:bg-interactive-ghost-error-toggled-disabled selected:disabled:text-interactive-ghost-error-on-toggled-disabled",
-				"group-data-[split]/split:data-[separator]:after:hidden"
-			]
-		},
-		{
-			variant: "text",
-			color: "primary",
-			inverted: false,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-primary-idle",
-				"hover:text-interactive-text-primary-hover",
-				"pressed:text-interactive-text-primary-pressed",
-				"disabled:text-interactive-text-primary-disabled",
-				"focus-visible:outline-interactive-text-primary-focus",
-				"selected:text-interactive-text-primary-toggled-idle",
-				"selected:hover:text-interactive-text-primary-toggled-hovered",
-				"selected:disabled:text-interactive-text-primary-toggled-disabled"
-			]
-		},
-		{
-			variant: "text",
-			color: "secondary",
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-secondary-idle",
-				"hover:text-interactive-text-secondary-hover",
-				"pressed:text-interactive-text-secondary-pressed",
-				"disabled:text-interactive-text-secondary-disabled",
-				"focus-visible:outline-interactive-text-secondary-focus",
-				"selected:text-interactive-text-secondary-toggled-idle",
-				"selected:hover:text-interactive-text-secondary-toggled-hovered",
-				"selected:disabled:text-interactive-text-secondary-toggled-disabled"
-			]
-		},
-		{
-			variant: "text",
-			color: "success",
-			inverted: false,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-success-idle",
-				"hover:text-interactive-text-success-hover",
-				"pressed:text-interactive-text-success-pressed",
-				"disabled:text-interactive-text-success-disabled",
-				"focus-visible:outline-interactive-text-success-focus",
-				"selected:text-interactive-text-success-toggled-idle",
-				"selected:hover:text-interactive-text-success-toggled-hovered",
-				"selected:disabled:text-interactive-text-success-toggled-disabled"
-			]
-		},
-		{
-			variant: "text",
-			color: "warning",
-			inverted: false,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-warning-idle",
-				"hover:text-interactive-text-warning-hover",
-				"pressed:text-interactive-text-warning-pressed",
-				"disabled:text-interactive-text-warning-disabled",
-				"focus-visible:outline-interactive-text-warning-focus",
-				"selected:text-interactive-text-warning-toggled-idle",
-				"selected:hover:text-interactive-text-warning-toggled-hovered",
-				"selected:disabled:text-interactive-text-warning-toggled-disabled"
-			]
-		},
-		{
-			variant: "text",
-			color: "error",
-			inverted: false,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-error-idle",
-				"hover:text-interactive-text-error-hover",
-				"pressed:text-interactive-text-error-pressed",
-				"disabled:text-interactive-text-error-disabled",
-				"focus-visible:outline-interactive-text-error-focus",
-				"selected:text-interactive-text-error-toggled-idle",
-				"selected:hover:text-interactive-text-error-toggled-hovered",
-				"selected:disabled:text-interactive-text-error-toggled-disabled"
-			]
-		},
-		{
-			variant: "text",
-			color: "primary",
-			inverted: true,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-primary-idle-inverted",
-				"hover:text-interactive-text-primary-hover-inverted",
-				"pressed:text-interactive-text-primary-pressed-inverted",
-				"disabled:text-interactive-text-primary-disabled-inverted",
-				"focus-visible:outline-interactive-text-primary-focus-inverted",
-				"selected:text-interactive-text-primary-toggled-idle-inverted",
-				"selected:hover:text-interactive-text-primary-toggled-hovered-inverted",
-				"selected:disabled:text-interactive-text-primary-toggled-disabled-inverted"
-			]
-		},
-		{
-			variant: "text",
-			color: "success",
-			inverted: true,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-success-idle-inverted",
-				"hover:text-interactive-text-success-hover-inverted",
-				"pressed:text-interactive-text-success-pressed-inverted",
-				"disabled:text-interactive-text-success-disabled-inverted",
-				"focus-visible:outline-interactive-text-success-focus-inverted",
-				"selected:text-interactive-text-success-toggled-idle-inverted",
-				"selected:hover:text-interactive-text-success-toggled-hovered-inverted",
-				"selected:disabled:text-interactive-text-success-toggled-disabled-inverted"
-			]
-		},
-		{
-			variant: "text",
-			color: "warning",
-			inverted: true,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-warning-idle-inverted",
-				"hover:text-interactive-text-warning-hover-inverted",
-				"pressed:text-interactive-text-warning-pressed-inverted",
-				"disabled:text-interactive-text-warning-disabled-inverted",
-				"focus-visible:outline-interactive-text-warning-focus-inverted",
-				"selected:text-interactive-text-warning-toggled-idle-inverted",
-				"selected:hover:text-interactive-text-warning-toggled-hovered-inverted",
-				"selected:disabled:text-interactive-text-warning-toggled-disabled-inverted"
-			]
-		},
-		{
-			variant: "text",
-			color: "error",
-			inverted: true,
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-error-idle-inverted",
-				"hover:text-interactive-text-error-hover-inverted",
-				"pressed:text-interactive-text-error-pressed-inverted",
-				"disabled:text-interactive-text-error-disabled-inverted",
-				"focus-visible:outline-interactive-text-error-focus-inverted",
-				"selected:text-interactive-text-error-toggled-idle-inverted",
-				"selected:hover:text-interactive-text-error-toggled-hovered-inverted",
-				"selected:disabled:text-interactive-text-error-toggled-disabled-inverted"
-			]
-		},
-		{
-			variant: "text",
-			color: "dual",
-			className: [
-				"border-support-transparent-outline",
-				"text-interactive-text-secondary-idle [&_svg]:text-interactive-text-primary-idle",
-				"hover:text-interactive-text-primary-hover hover:[&_svg]:text-interactive-text-primary-hover",
-				"pressed:text-interactive-text-primary-pressed pressed:[&_svg]:text-interactive-text-primary-pressed",
-				"disabled:text-interactive-text-primary-disabled disabled:[&_svg]:text-interactive-text-primary-disabled",
-				"focus-visible:outline-interactive-text-primary-focus",
-				"selected:text-interactive-text-primery-toggled-idle selected:[&_svg]:text-interactive-text-primery-toggled-idle",
-				"selected:hover:text-interactive-text-primary-toggled-hovered selected:hover:[&_svg]:text-interactive-text-primary-toggled-hovered",
-				"selected:disabled:text-interactive-text-primary-toggled-disabled selected:disabled:[&_svg]:text-interactive-text-primary-toggled-disabled"
-			]
+			inverted: false
 		}
-	],
-	defaultVariants: {
-		width: "hug",
-		color: "primary",
-		variant: "contained",
-		inverted: false
 	}
 });
-var buttonSize = cva("", {
-	variants: {
-		size: {
-			none: "rounded-button-rounding-s p-0",
-			xs: "rounded-button-rounding-s",
-			s: "rounded-button-rounding-s",
-			m: "rounded-button-rounding-m",
-			l: "rounded-button-rounding-l"
-		},
-		iconOnly: {
-			true: "",
-			false: ""
-		}
-	},
-	compoundVariants: [
-		{
-			size: "xs",
-			iconOnly: false,
-			className: "px-button-side-xs py-button-height-xs"
-		},
-		{
-			size: "s",
-			iconOnly: false,
-			className: "px-button-side-s py-button-height-s"
-		},
-		{
-			size: "m",
-			iconOnly: false,
-			className: "px-button-side-m py-button-height-m"
-		},
-		{
-			size: "l",
-			iconOnly: false,
-			className: "px-button-side-l py-button-height-l"
-		},
-		{
-			size: "xs",
-			iconOnly: true,
-			className: "p-button-height-xs"
-		},
-		{
-			size: "s",
-			iconOnly: true,
-			className: "p-button-height-s"
+var buttonSizeDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: {
+			size: {
+				none: "rounded-button-rounding-s p-0",
+				xs: "rounded-button-rounding-s",
+				s: "rounded-button-rounding-s",
+				m: "rounded-button-rounding-m",
+				l: "rounded-button-rounding-l"
+			},
+			iconOnly: {
+				true: "",
+				false: ""
+			}
 		},
-		{
+		compoundVariants: [
+			{
+				size: "xs",
+				iconOnly: false,
+				className: "px-button-side-xs py-button-height-xs"
+			},
+			{
+				size: "s",
+				iconOnly: false,
+				className: "px-button-side-s py-button-height-s"
+			},
+			{
+				size: "m",
+				iconOnly: false,
+				className: "px-button-side-m py-button-height-m"
+			},
+			{
+				size: "l",
+				iconOnly: false,
+				className: "px-button-side-l py-button-height-l"
+			},
+			{
+				size: "xs",
+				iconOnly: true,
+				className: "p-button-height-xs"
+			},
+			{
+				size: "s",
+				iconOnly: true,
+				className: "p-button-height-s"
+			},
+			{
+				size: "m",
+				iconOnly: true,
+				className: "p-button-height-m"
+			},
+			{
+				size: "l",
+				iconOnly: true,
+				className: "p-button-height-l"
+			}
+		],
+		defaultVariants: {
 			size: "m",
-			iconOnly: true,
-			className: "p-button-height-m"
-		},
-		{
-			size: "l",
-			iconOnly: true,
-			className: "p-button-height-l"
+			iconOnly: false
 		}
-	],
-	defaultVariants: {
-		size: "m",
-		iconOnly: false
 	}
 });
-var buttonContent = cva("", {
-	variants: {
-		size: {
-			none: "gap-button-gap-icon-to-label",
-			xs: "gap-button-gap-icon-to-label",
-			s: "gap-button-gap-icon-to-label",
-			m: "gap-button-gap-icon-to-label",
-			l: "gap-button-gap-icon-to-label"
-		},
-		iconPosition: {
-			left: "",
-			right: "",
-			none: ""
+var buttonContentDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: {
+			size: {
+				none: "gap-button-gap-icon-to-label",
+				xs: "gap-button-gap-icon-to-label",
+				s: "gap-button-gap-icon-to-label",
+				m: "gap-button-gap-icon-to-label",
+				l: "gap-button-gap-icon-to-label"
+			},
+			iconPosition: {
+				left: "",
+				right: "",
+				none: ""
+			},
+			iconOnly: {
+				true: "",
+				false: ""
+			}
 		},
-		iconOnly: {
-			true: "",
-			false: ""
+		defaultVariants: {
+			size: "m",
+			iconPosition: "left",
+			iconOnly: false
 		}
-	},
-	defaultVariants: {
-		size: "m",
-		iconPosition: "left",
-		iconOnly: false
 	}
 });
-var buttonIconSize = cva("", {
-	variants: { size: {
-		none: "h-6 w-6",
-		xs: "h-6 w-6",
-		s: "h-6 w-6",
-		m: "h-6 w-6",
-		l: "h-6 w-6"
-	} },
-	defaultVariants: { size: "m" }
+var buttonIconSizeDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: { size: {
+			none: "h-6 w-6",
+			xs: "h-6 w-6",
+			s: "h-6 w-6",
+			m: "h-6 w-6",
+			l: "h-6 w-6"
+		} },
+		defaultVariants: { size: "m" }
+	}
 });
 var buttonTypography = compoundMapper({
 	defaultVariants: { size: "m" },
@@ -646,4 +658,4 @@ var buttonTypography = compoundMapper({
 	]
 });
 //#endregion
-export { button, buttonContent, buttonIconSize, buttonSize, buttonTypography };
+export { buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, buttonTypography };