@povio/ui 0.1.0 → 2.1.0

package/dist/components/buttons/InlineIconButton/InlineIconButton.js

@@ -7,7 +7,7 @@ const InlineIconButton = ({ label, ...props }) => {
       ...props,
       iconOnly: true,
       variant: "text",
-      size: "xxs",
+      size: "none",
       width: "hug",
       children: label
     }

package/dist/components/buttons/PillButton/pillButton.cva.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const pillButton: (props?: ({
     color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface PillButtonVariants extends VariantProps<typeof pillButton> {
 }
@@ -11,4 +12,5 @@ export declare const pillButtonContent: (props?: ({
 export declare const pillButtonIconSize: string;
 export declare const pillButtonTypography: (props: {
     color?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | null | undefined;
 }) => TypographyVariantProps | undefined;

package/dist/components/buttons/PillButton/pillButton.cva.js

@@ -6,65 +6,247 @@ const pillButton = cva(
   [
     uiOutlineClass,
     "flex items-center justify-center",
-    "rounded-pill-rounding-default border border-transparent px-pill-side-default py-pill-height-default"
+    "rounded-pill-rounding-default border border-solid px-pill-side-default py-pill-height-default"
   ],
   {
     variants: {
       color: {
-        primary: [
-          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
-          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
-          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
-          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus",
-          "selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
-          "selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
-          "selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover"
-        ],
-        secondary: [
-          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
-          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+        primary: "",
+        secondary: "",
+        success: "",
+        warning: "",
+        error: ""
+      },
+      variant: {
+        contained: "",
+        outlined: "",
+        subtle: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "contained",
+        color: "primary",
+        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:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
-          "selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
-          "selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover"
-        ],
-        success: [
-          "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
-          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
-          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
-          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        warning: [
-          "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
-          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
-          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
-          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
-          "focus-visible:outline-interactive-contained-primary-focus"
-        ],
-        error: [
-          "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
-          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
-          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
-          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-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"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "primary",
+        className: [
+          "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
+          "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
+          "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
+          "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
+          "focus-visible:outline-interactive-outlined-primary-focus",
+          "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
+        ]
+      },
+      {
+        variant: "subtle",
+        color: "primary",
+        className: [
+          "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-subtle-primary-focus",
+          "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
+        ]
+      },
+      {
+        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"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "secondary",
+        className: [
+          "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
+          "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
+          "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
+          "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
+          "focus-visible:outline-interactive-outlined-secondary-focus",
+          "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
+        ]
+      },
+      {
+        variant: "subtle",
+        color: "secondary",
+        className: [
+          "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-subtle-secondary-focus",
+          "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
+        ]
+      },
+      {
+        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"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        className: [
+          "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
+          "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
+          "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
+          "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
+          "focus-visible:outline-interactive-outlined-success-focus",
+          "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
+        ]
+      },
+      {
+        variant: "subtle",
+        color: "success",
+        className: [
+          "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-subtle-success-focus",
+          "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
+        ]
+      },
+      {
+        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"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "warning",
+        className: [
+          "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
+          "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
+          "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
+          "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
+          "focus-visible:outline-interactive-outlined-warning-focus",
+          "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
+        ]
+      },
+      {
+        variant: "subtle",
+        color: "warning",
+        className: [
+          "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-subtle-warning-focus",
+          "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
+        ]
+      },
+      {
+        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"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        className: [
+          "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
+          "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
+          "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
+          "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
+          "focus-visible:outline-interactive-outlined-error-focus",
+          "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
+          "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
+          "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
+        ]
+      },
+      {
+        variant: "subtle",
+        color: "error",
+        className: [
+          "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-subtle-error-focus",
+          "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
+          "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
+          "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
         ]
       }
-    },
+    ],
     defaultVariants: {
-      color: "primary"
+      color: "primary",
+      variant: "contained"
     }
   }
 );
 const pillButtonContent = cva("", {
   variants: {
     iconPosition: {
-      left: "gap-list-gap-icon-to-label pr-list-gap-content",
-      right: "gap-list-gap-icon-to-label pl-list-gap-content",
-      none: "gap-list-gap-icon-to-label"
+      left: "gap-button-gap-icon-to-label pr-button-side-button-content",
+      right: "gap-button-gap-icon-to-label pl-button-side-button-content",
+      none: "gap-button-gap-icon-to-label"
     }
   },
   defaultVariants: {

package/dist/components/buttons/SplitButton/SplitButton.js

@@ -31,7 +31,7 @@ const SplitButton = ({
             variant,
             color,
             link,
-            className: clsx("!rounded-r-none border-r border-solid", className),
+            className: clsx("!rounded-r-none! border-r border-solid", className),
             "data-separator": "",
             children: label
           }
@@ -47,7 +47,7 @@ const SplitButton = ({
                 color,
                 label: labelRight,
                 icon: ChevronDownIcon,
-                className: "!rounded-l-none !border-l-0"
+                className: "rounded-l-none! border-l-0!"
               }
             ),
             items

package/dist/components/buttons/TextButton/TextButton.js

@@ -6,7 +6,7 @@ const TextButton = ({ children, ...props }) => {
     {
       ...props,
       variant: "text",
-      size: "xxs",
+      size: "none",
       width: props.width ?? "hug",
       disableTooltip: props.disableTooltip,
       children

package/dist/components/inputs/Checkbox/CheckboxCheckmark.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { CheckboxCheckmarkIcon } from "../../../assets/icons/CheckboxCheckmark.js";
 import { CheckboxIndeterminateIcon } from "../../../assets/icons/CheckboxIndeterminate.js";
 import { checkbox } from "./checkbox.cva.js";
@@ -22,24 +21,8 @@ const CheckboxCheckmark = ({
         className
       }),
       children: [
-        /* @__PURE__ */ jsx(
-          SelectedIcon,
-          {
-            className: clsx(
-              "absolute hidden size-3 group-selected:block",
-              "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          IndeterminateIcon,
-          {
-            className: clsx(
-              "absolute hidden size-3 group-indeterminate:block",
-              "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover"
-            )
-          }
-        )
+        /* @__PURE__ */ jsx(SelectedIcon, { className: "absolute hidden size-3 group-selected:block" }),
+        /* @__PURE__ */ jsx(IndeterminateIcon, { className: "absolute hidden size-3 group-indeterminate:block" })
       ]
     }
   );

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -8,6 +8,10 @@ const checkbox = cva(
       variant: {
         default: [
           "m-1 border-interactive-contained-secondary-idle",
+          "text-interactive-contained-primary-on-idle",
+          "group-hover:text-interactive-contained-primary-on-hover",
+          "group-pressed:text-interactive-contained-primary-on-pressed",
+          "group-disabled:text-interactive-contained-primary-on-disabled",
           "group-disabled:border-interactive-contained-secondary-disabled",
           "group-hover:border-interactive-contained-secondary-hover",
           "group-pressed:border-interactive-contained-secondary-pressed",

package/dist/components/inputs/DateTime/shared/CalendarCell.js

@@ -109,9 +109,9 @@ const CalendarCell = ({
       "border border-transparent border-solid",
       // Base text colors
       !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
-      !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-primary-disabled",
+      !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled",
       // Selected cell styling
-      isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-text-primary-idle-inverted",
+      isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
       // Selection start cell styling
       isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none",
       // Selection end cell styling
@@ -121,7 +121,7 @@ const CalendarCell = ({
       // Disabled cell styling
       isDisabled && "opacity-20",
       // Regular hover state - only for non-selected, non-disabled, visible cells when not in selecting mode
-      !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !(isDisabled && !isOutsideVisibleRange) && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1",
+      !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover",
       // Range styling - for dates between start and end
       isInRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover",
       // Hover range styling - for potential range during hover

package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js

@@ -137,7 +137,7 @@ const CalendarSelectHeader = ({
               color: "secondary",
               iconPosition: "right",
               icon: ArrowDropDownIcon,
-              children: MONTHS[currentMonth]
+              children: MONTHS[currentMonth].slice(0, 3)
             }
           ),
           ignoreTriggerWidth: true,

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -120,7 +120,7 @@ const DatePickerInput = ({
                   {
                     label: "",
                     icon: TodayIcon,
-                    size: "xxs",
+                    size: "none",
                     onPress: onToday
                   }
                 ),

package/dist/components/inputs/DateTime/shared/RangeCalendar.js

@@ -48,10 +48,12 @@ const RangeCalendar = ({
     }
   };
   const isNextDisabled = useMemo(() => {
-    return leftDate.year > rightDate.year || leftDate.year === rightDate.year && leftDate.add({ months: 1 }).month === rightDate.month;
+    const leftNextDate = leftDate.add({ months: 1 });
+    return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
   }, [leftDate, rightDate]);
   const isPrevDisabled = useMemo(() => {
-    return rightDate.year < leftDate.year || rightDate.year === leftDate.year && rightDate.subtract({ months: 1 }).month === leftDate.month;
+    const rightPrevDate = rightDate.subtract({ months: 1 });
+    return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.month === leftDate.month;
   }, [leftDate, rightDate]);
   return /* @__PURE__ */ jsx("div", { className: clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className), children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
     /* @__PURE__ */ jsxs(
@@ -82,7 +84,7 @@ const RangeCalendar = ({
               onDateHover,
               hoverDate,
               onKeyboardNavigation: handleLeftKeyboardNavigation,
-              className: "!w-[304px] h-64",
+              className: "h-64 w-[304px]!",
               calendarSide: "left"
             }
           )
@@ -117,7 +119,7 @@ const RangeCalendar = ({
               onDateHover,
               hoverDate,
               onKeyboardNavigation: handleRightKeyboardNavigation,
-              className: "!w-[304px] h-64",
+              className: "h-64 w-[304px]!",
               calendarSide: "right"
             }
           )

package/dist/components/inputs/File/FileUpload.js

@@ -155,7 +155,7 @@ const FileUploadBase = (props) => {
       labelProps,
       className: clsx("w-full", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-input-gap-input-to-button-gap", children: /* @__PURE__ */ jsx(
           DropZone,
           {
             ...rest,
@@ -184,7 +184,7 @@ const FileUploadBase = (props) => {
                   title: emptyText,
                   uploadText,
                   browseText,
-                  className: "-translate-x-1/2 -translate-y-1/2 group-data-[drop-target]/file-upload-drop-zone:!flex absolute top-1/2 left-1/2 z-50 hidden flex-col"
+                  className: "-translate-x-1/2 -translate-y-1/2 group-drop-target/file-upload-drop-zone:flex! absolute top-1/2 left-1/2 z-50 hidden flex-col"
                 }
               )
             ] }) : /* @__PURE__ */ jsx(

package/dist/components/inputs/File/shared/FileUploadContentLoading.js

@@ -8,7 +8,7 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { Typography } from "../../../text/Typography/Typography.js";
 import { ns } from "../../../../config/i18n.js";
 import { FileUtils } from "../../../../utils/file.utils.js";
-import { FileProgressBar } from "./FileProgressBar.js";
+import { ProgressBar } from "./ProgressBar.js";
 const FileUploadContentLoading = ({
   index,
   variant,
@@ -51,7 +51,7 @@ const FileUploadContentLoading = ({
                       {
                         className: clsx("flex flex-col", {
                           "max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
-                          "max-w-[calc(100%_-_32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal"
+                          "max-w-[calc(100%-32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal"
                         }),
                         children: [
                           /* @__PURE__ */ jsx(
@@ -88,7 +88,7 @@ const FileUploadContentLoading = ({
                     "w-full": variant === "vertical"
                   }),
                   children: [
-                    /* @__PURE__ */ jsx(FileProgressBar, { progress: state.progress }),
+                    /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }),
                     (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(
                       InlineIconButton,
                       {

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -48,7 +48,6 @@ const InputUploadContent = (props) => {
                 {
                   isDisabled,
                   icon: UploadIcon,
-                  className: "p-0!",
                   children: t(($) => $.ui.fileUpload.upload)
                 }
               )
@@ -58,7 +57,7 @@ const InputUploadContent = (props) => {
         variant !== "nested" && /* @__PURE__ */ jsx(
           Button,
           {
-            size: "m",
+            size: "s",
             width: "hug",
             isDisabled,
             className: "truncate",

package/dist/components/inputs/File/shared/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+interface ProgressBarProps {
+    progress?: number;
+    valueLabel?: "leading" | "trailing" | "none";
+}
+export declare const ProgressBar: ({ progress, valueLabel }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/File/shared/ProgressBar.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Typography } from "../../../text/Typography/Typography.js";
+const ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions",
+        valueLabel === "leading" && "flex-row-reverse"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
+              style: { width: `${progress}%` }
+            }
+          )
+        ] }) }),
+        valueLabel !== "none" && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "default",
+            size: "label-2",
+            as: "span",
+            className: "text-center text-text-default-3",
+            children: [
+              progress,
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ProgressBar
+};

package/dist/components/inputs/File/shared/inputUploadButton.cva.js

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 const inputUploadButtonBase = cva(
-  ["flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap"],
+  ["flex w-full items-center justify-between gap-input-gap-input-to-button-gap"],
   {
     variants: {
       variant: {
@@ -22,7 +22,7 @@ const inputUploadDropZone = cva(
   [
     "min-w-0 flex-1",
     "flex items-center",
-    "group-data-[invalid]/input-upload:border group-data-[invalid]/input-upload:border-input-outlined-outline-error",
+    "group-invalid/input-upload:border group-invalid/input-upload:border-input-outlined-outline-error",
     "data-[drop-target]:border-input-outlined-outline-hover",
     "hover:border-input-outlined-outline-hover"
   ],

package/dist/components/inputs/FormField/FormFieldHeader.js

@@ -46,7 +46,7 @@ const FormFieldHeader = ({
       {
         slot: "description",
         size: "label-2",
-        className: clsx(isDisabled ? "text-interactive-3" : "text-text-default-2"),
+        className: "text-text-default-2",
         children: helperText
       }
     )