@povio/ui 0.0.7 → 0.0.8

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

@@ -1,672 +0,0 @@
-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
-};