@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,672 @@
+import { cva } from "class-variance-authority";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const button = cva(["group inline-flex items-center justify-center border border-solid", uiOutlineClass], {
+  variants: {
+    width: {
+      fill: "w-full",
+      hug: "w-auto"
+    },
+    size: {
+      xxs: "",
+      xs: "",
+      s: "",
+      m: "",
+      l: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      error: "",
+      dual: ""
+    },
+    variant: {
+      contained: "",
+      outlined: "",
+      subtle: "",
+      text: "",
+      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]:border-r-interactive-contained-primary-on-idle!"
+      ]
+    },
+    {
+      variant: "outlined",
+      color: ["primary", "dual"],
+      className: [
+        "border-interactive-outlined-primary-outline-idle text-interactive-outlined-primary-on-idle",
+        "hover:border-interactive-outlined-primary-outline-hover hover:text-interactive-outlined-primary-on-hover",
+        "pressed:border-interactive-outlined-primary-outline-pressed pressed:text-interactive-outlined-primary-on-pressed",
+        "disabled:border-interactive-outlined-primary-outline-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-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]:border-r-interactive-contained-primary-on-idle!"
+      ]
+    },
+    {
+      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]:border-r-interactive-contained-secondary-on-idle!"
+      ]
+    },
+    {
+      variant: "outlined",
+      color: "secondary",
+      className: [
+        "border-interactive-outlined-secondary-outline-idle text-interactive-outlined-secondary-on-idle",
+        "hover:border-interactive-outlined-secondary-outline-hover hover:text-interactive-outlined-secondary-on-hover",
+        "pressed:border-interactive-outlined-secondary-outline-pressed pressed:text-interactive-outlined-secondary-on-pressed",
+        "disabled:border-interactive-outlined-secondary-outline-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-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]:border-r-interactive-contained-secondary-on-idle!"
+      ]
+    },
+    {
+      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]:border-r-interactive-contained-success-on-idle!"
+      ]
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      className: [
+        "border-interactive-outlined-success-outline-idle text-interactive-outlined-success-on-idle",
+        "hover:border-interactive-outlined-success-outline-hover hover:text-interactive-outlined-success-on-hover",
+        "pressed:border-interactive-outlined-success-outline-pressed pressed:text-interactive-outlined-success-on-pressed",
+        "disabled:border-interactive-outlined-success-outline-disabled disabled:text-interactive-outlined-success-on-disabled",
+        "focus-visible:outline-interactive-outlined-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"
+      ]
+    },
+    {
+      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-idle",
+        "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-idle",
+        "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-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]:border-r-interactive-contained-success-on-idle!"
+      ]
+    },
+    {
+      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]:border-r-interactive-contained-warning-on-idle!"
+      ]
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      className: [
+        "border-interactive-outlined-warning-outline-idle text-interactive-outlined-warning-on-idle",
+        "hover:border-interactive-outlined-warning-outline-hover hover:text-interactive-outlined-warning-on-hover",
+        "pressed:border-interactive-outlined-warning-outline-pressed pressed:text-interactive-outlined-warning-on-pressed",
+        "disabled:border-interactive-outlined-warning-outline-disabled disabled:text-interactive-outlined-warning-on-disabled",
+        "focus-visible:outline-interactive-outlined-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"
+      ]
+    },
+    {
+      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-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]:border-r-interactive-contained-warning-on-idle!"
+      ]
+    },
+    {
+      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]:border-r-interactive-contained-error-on-idle!"
+      ]
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      className: [
+        "border-interactive-outlined-error-outline-idle text-interactive-outlined-error-on-idle",
+        "hover:border-interactive-outlined-error-outline-hover hover:text-interactive-outlined-error-on-hover",
+        "pressed:border-interactive-outlined-error-outline-pressed pressed:text-interactive-outlined-error-on-pressed",
+        "disabled:border-interactive-outlined-error-outline-disabled disabled:text-interactive-outlined-error-on-disabled",
+        "focus-visible:outline-interactive-outlined-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"
+      ]
+    },
+    {
+      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-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]:border-r-interactive-contained-error-on-idle!"
+      ]
+    },
+    {
+      variant: "text",
+      color: "primary",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "primary",
+      className: [
+        "border-transparent",
+        "text-interactive-text-primary-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",
+        "focus-visible:outline-interactive-subtle-primary-focus",
+        "disabled:border-transparent disabled:bg-transparent disabled:text-interactive-text-primary-disabled",
+        "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "secondary",
+      className: [
+        "border-transparent",
+        "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: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"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-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-transparent disabled:bg-transparent disabled:text-interactive-text-secondary-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "success",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "text-interactive-text-success-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-transparent disabled:bg-transparent disabled:text-interactive-text-success-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "warning",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      className: [
+        "border-transparent",
+        "text-interactive-text-warning-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-transparent disabled:bg-transparent disabled:text-interactive-text-warning-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "error",
+      inverted: false,
+      className: [
+        "border-transparent",
+        "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: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"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "error",
+      className: [
+        "border-transparent",
+        "text-interactive-text-error-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-transparent disabled:bg-transparent disabled:text-interactive-text-error-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "primary",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "selected:border-interactive-subtle-primary-toggled-idle selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "secondary",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-idle-inverted",
+        "hover:text-interactive-text-secondary-hover-inverted",
+        "pressed:text-interactive-text-secondary-pressed-inverted",
+        "disabled:text-interactive-text-secondary-disabled-inverted",
+        "focus-visible:outline-interactive-text-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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "success",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "warning",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "error",
+      inverted: true,
+      className: [
+        "border-transparent",
+        "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",
+        "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"
+      ]
+    },
+    {
+      variant: "text",
+      color: "dual",
+      className: [
+        "border-transparent",
+        "text-interactive-text-secondary-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",
+        "[&_svg]:text-interactive-text-primary-idle",
+        "hover:[&_svg]:text-interactive-text-primary-hover",
+        "pressed:[&_svg]:text-interactive-text-primary-pressed",
+        "disabled:[&_svg]:text-interactive-text-primary-disabled"
+      ]
+    }
+  ],
+  defaultVariants: {
+    width: "fill",
+    color: "primary",
+    variant: "contained",
+    inverted: false
+  }
+});
+const buttonSize = cva("", {
+  variants: {
+    size: {
+      xxs: "rounded-button-rounding-m",
+      xs: "rounded-button-rounding-m",
+      s: "rounded-button-rounding-m",
+      m: "rounded-button-rounding-m",
+      l: "rounded-button-rounding-m"
+    },
+    iconOnly: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      size: "xxs",
+      iconOnly: false,
+      className: "px-button-side-xxs py-button-height-none"
+    },
+    {
+      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: "xxs",
+      iconOnly: true,
+      className: "p-button-height-none"
+    },
+    {
+      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: false
+  }
+});
+const buttonContent = cva("", {
+  variants: {
+    size: {
+      xxs: "gap-button-button-content-icon-to-label",
+      xs: "gap-button-button-content-icon-to-label",
+      s: "gap-button-button-content-icon-to-label",
+      m: "gap-button-button-content-icon-to-label",
+      l: "gap-button-button-content-icon-to-label"
+    },
+    iconPosition: {
+      left: "",
+      right: "",
+      none: ""
+    },
+    iconOnly: {
+      true: "p-0",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { iconOnly: false, iconPosition: "left", className: "pr-button-button-content-side-default" },
+    { iconOnly: false, iconPosition: "right", className: "pl-button-button-content-side-default" }
+  ],
+  defaultVariants: {
+    size: "m",
+    iconPosition: "left",
+    iconOnly: false
+  }
+});
+const buttonIconSize = cva("", {
+  variants: {
+    size: {
+      xxs: "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"
+  }
+});
+const buttonTypography = compoundMapper({
+  defaultVariants: {
+    size: "m"
+  },
+  compoundVariants: [
+    {
+      size: "xs",
+      value: {
+        size: "label-2",
+        variant: "prominent-1"
+      }
+    },
+    {
+      size: "s",
+      value: {
+        size: "label-2",
+        variant: "prominent-1"
+      }
+    },
+    {
+      size: "m",
+      value: {
+        size: "label-2",
+        variant: "prominent-1"
+      }
+    },
+    {
+      size: "l",
+      value: {
+        size: "label-2",
+        variant: "prominent-1"
+      }
+    }
+  ]
+});
+export {
+  button,
+  buttonContent,
+  buttonIconSize,
+  buttonSize,
+  buttonTypography
+};