@povio/ui 0.0.4 → 0.0.6

package/{src/components/buttons/Button/button.cva.ts → dist/components/buttons/Button/button.cva.js}

@@ -1,21 +1,18 @@
-import { type VariantProps, cva } from "class-variance-authority";
-
-import { uiOutlineClass } from "#ui/components/outline.clsx";
-import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
-import { compoundMapper } from "#ui/utils/compoundMapper";
-
-export const button = cva(["group inline-flex items-center justify-center border border-solid", uiOutlineClass], {
+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",
+      hug: "w-auto"
     },
     size: {
       xxs: "",
       xs: "",
       s: "",
       m: "",
-      l: "",
+      l: ""
     },
     color: {
       primary: "",
@@ -23,19 +20,19 @@ export const button = cva(["group inline-flex items-center justify-center border
       success: "",
       warning: "",
       error: "",
-      dual: "",
+      dual: ""
     },
     variant: {
       contained: "",
       outlined: "",
       subtle: "",
       text: "",
-      ghost: "",
+      ghost: ""
     },
     inverted: {
       true: "",
-      false: "",
-    },
+      false: ""
+    }
   },
   compoundVariants: [
     {
@@ -50,8 +47,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-primary-on-idle!"
+      ]
     },
     {
       variant: "outlined",
@@ -64,8 +61,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -79,8 +76,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-primary-on-idle!"
+      ]
     },
     {
       variant: "contained",
@@ -94,8 +91,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-secondary-on-idle!"
+      ]
     },
     {
       variant: "outlined",
@@ -108,8 +105,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -123,8 +120,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-secondary-on-idle!"
+      ]
     },
     {
       variant: "contained",
@@ -138,8 +135,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-success-on-idle!"
+      ]
     },
     {
       variant: "outlined",
@@ -152,8 +149,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -167,8 +164,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-success-on-idle!"
+      ]
     },
     {
       variant: "contained",
@@ -182,8 +179,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-warning-on-idle!"
+      ]
     },
     {
       variant: "outlined",
@@ -196,8 +193,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -211,8 +208,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-warning-on-idle!"
+      ]
     },
     {
       variant: "contained",
@@ -226,8 +223,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-error-on-idle!"
+      ]
     },
     {
       variant: "outlined",
@@ -240,8 +237,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -255,8 +252,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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!",
-      ],
+        "group-data-[split]/split:data-[separator]:border-r-interactive-contained-error-on-idle!"
+      ]
     },
     {
       variant: "text",
@@ -271,8 +268,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -286,8 +283,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -301,8 +298,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -316,8 +313,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -332,8 +329,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -348,8 +345,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -364,8 +361,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -379,8 +376,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -395,8 +392,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -410,8 +407,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -426,8 +423,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -442,8 +439,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -458,8 +455,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -474,8 +471,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -490,8 +487,8 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
+        "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",
@@ -503,176 +500,173 @@ export const button = cva(["group inline-flex items-center justify-center border
         "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",
-      ],
-    },
+        "disabled:[&_svg]:text-interactive-text-primary-disabled"
+      ]
+    }
   ],
   defaultVariants: {
     width: "fill",
     color: "primary",
     variant: "contained",
-    inverted: false,
-  },
+    inverted: false
+  }
 });
-
-// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
-export interface ButtonVariantProps extends VariantProps<typeof button> {}
-
-export const buttonSize = cva("", {
+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",
+      l: "rounded-button-rounding-m"
     },
     iconOnly: {
       true: "",
-      false: "",
-    },
+      false: ""
+    }
   },
   compoundVariants: [
     {
       size: "xxs",
       iconOnly: false,
-      className: "px-button-side-xxs py-button-height-none",
+      className: "px-button-side-xxs py-button-height-none"
     },
     {
       size: "xs",
       iconOnly: false,
-      className: "px-button-side-xs py-button-height-xs",
+      className: "px-button-side-xs py-button-height-xs"
     },
     {
       size: "s",
       iconOnly: false,
-      className: "px-button-side-s py-button-height-s",
+      className: "px-button-side-s py-button-height-s"
     },
     {
       size: "m",
       iconOnly: false,
-      className: "px-button-side-m py-button-height-m",
+      className: "px-button-side-m py-button-height-m"
     },
     {
       size: "l",
       iconOnly: false,
-      className: "px-button-side-l py-button-height-l",
+      className: "px-button-side-l py-button-height-l"
     },
     {
       size: "xxs",
       iconOnly: true,
-      className: "p-button-height-none",
+      className: "p-button-height-none"
     },
     {
       size: "xs",
       iconOnly: true,
-      className: "p-button-height-xs",
+      className: "p-button-height-xs"
     },
     {
       size: "s",
       iconOnly: true,
-      className: "p-button-height-s",
+      className: "p-button-height-s"
     },
     {
       size: "m",
       iconOnly: true,
-      className: "p-button-height-m",
+      className: "p-button-height-m"
     },
     {
       size: "l",
       iconOnly: true,
-      className: "p-button-height-l",
-    },
+      className: "p-button-height-l"
+    }
   ],
   defaultVariants: {
     size: "m",
-    iconOnly: false,
-  },
+    iconOnly: false
+  }
 });
-
-export const buttonContent = cva("", {
+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",
+      l: "gap-button-button-content-icon-to-label"
     },
     iconPosition: {
       left: "",
       right: "",
-      none: "",
+      none: ""
     },
     iconOnly: {
       true: "p-0",
-      false: "",
-    },
+      false: ""
+    }
   },
   compoundVariants: [
     { iconOnly: false, iconPosition: "left", className: "pr-button-button-content-side-default" },
-    { iconOnly: false, iconPosition: "right", className: "pl-button-button-content-side-default" },
+    { iconOnly: false, iconPosition: "right", className: "pl-button-button-content-side-default" }
   ],
-
   defaultVariants: {
     size: "m",
     iconPosition: "left",
-    iconOnly: false,
-  },
+    iconOnly: false
+  }
 });
-
-export const buttonIconSize = cva("", {
+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",
-    },
+      l: "h-6 w-6"
+    }
   },
   defaultVariants: {
-    size: "m",
-  },
+    size: "m"
+  }
 });
-
-export const buttonTypography = compoundMapper<TypographyVariantProps, ButtonVariantProps>({
+const buttonTypography = compoundMapper({
   defaultVariants: {
-    size: "m",
+    size: "m"
   },
   compoundVariants: [
     {
       size: "xs",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
+        variant: "prominent-1"
+      }
     },
     {
       size: "s",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
+        variant: "prominent-1"
+      }
     },
     {
       size: "m",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
+        variant: "prominent-1"
+      }
     },
     {
       size: "l",
       value: {
         size: "label-2",
-        variant: "prominent-1",
-      },
-    },
-  ],
+        variant: "prominent-1"
+      }
+    }
+  ]
 });
+export {
+  button,
+  buttonContent,
+  buttonIconSize,
+  buttonSize,
+  buttonTypography
+};

package/dist/components/buttons/IconButton/IconButton.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactElement, SVGProps } from 'react';
+import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonVariantProps } from '#ui/components/buttons/Button/button.cva';
+export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
+    label: string;
+    icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
+    link?: AriaLinkProps;
+    disableTooltip?: boolean;
+}
+export declare const IconButton: ({ label, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/IconButton/IconButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+const IconButton = ({ label, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      iconOnly: true,
+      width: "hug",
+      disableTooltip: props.disableTooltip,
+      children: label
+    }
+  );
+};
+export {
+  IconButton
+};