@app-studio/web 0.8.86 → 0.8.87

package/dist/web.umd.development.js

@@ -3593,11 +3593,11 @@
   var ButtonSizes = {
     xs: {
       // Height: 24px (6 × 4px)
-      minHeight: 24,
+      minHeight: 4 * 4,
       paddingTop: 2,
       paddingBottom: 2,
-      paddingLeft: 6,
-      paddingRight: 6,
+      paddingLeft: 4,
+      paddingRight: 4,
       // Typography
       fontSize: 12,
       fontWeight: '500',
@@ -3606,54 +3606,53 @@
     },
     sm: {
       // Height: 32px (8 × 4px)
-      minHeight: 32,
+      minHeight: 6 * 4,
       paddingTop: 6,
       paddingBottom: 6,
       paddingLeft: 12,
       paddingRight: 12,
       // Typography
-      fontSize: 14,
+      fontSize: 12,
       fontWeight: '500',
-      lineHeight: 20,
+      lineHeight: 12,
       letterSpacing: '-0.01em'
     },
     md: {
       // Height: 40px (10 × 4px) - standard height for interactive elements
-      minHeight: 40,
+      minHeight: 8 * 4,
       paddingTop: 8,
       paddingBottom: 8,
       paddingLeft: 16,
       paddingRight: 16,
       // Typography
-      fontSize: 14,
+      fontSize: 16,
       fontWeight: '500',
-      lineHeight: 24,
+      lineHeight: 16,
       letterSpacing: '-0.01em'
     },
     lg: {
-      // Height: 48px (12 × 4px)
-      minHeight: 48,
-      paddingTop: 12,
-      paddingBottom: 12,
+      minHeight: 10 * 4,
+      paddingTop: 10,
+      paddingBottom: 10,
       paddingLeft: 20,
       paddingRight: 20,
       // Typography
       fontSize: 16,
       fontWeight: '500',
-      lineHeight: 24,
+      lineHeight: 20,
       letterSpacing: '-0.01em'
     },
     xl: {
       // Height: 60px (15 × 4px)
-      minHeight: 60,
-      paddingTop: 16,
-      paddingBottom: 16,
-      paddingLeft: 28,
-      paddingRight: 28,
+      minHeight: 12 * 4,
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingLeft: 24,
+      paddingRight: 24,
       // Typography
       fontSize: 18,
       fontWeight: '500',
-      lineHeight: 28,
+      lineHeight: 24,
       letterSpacing: '-0.01em'
     }
   };
@@ -3703,15 +3702,16 @@
       borderStyle: 'solid',
       borderColor: 'transparent',
       _hover: {
-        backgroundColor: 'transparent',
-        color: color,
-        borderColor: color,
-        transform: 'translateY(-1px)'
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       _active: {
-        color: color,
-        borderColor: color,
-        transform: 'translateY(0)'
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       transition: 'all 0.2s ease'
     },
@@ -3724,12 +3724,18 @@
       _hover: {
         backgroundColor: color,
         color: isLight ? 'light.black' : 'light.white',
-        transform: 'translateY(-1px)'
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       _active: {
         backgroundColor: color,
         color: isLight ? 'light.black' : 'light.white',
-        transform: 'translateY(0)'
+        transform: 'translateY(0)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       transition: 'all 0.2s ease'
     },
@@ -3742,12 +3748,18 @@
       _hover: {
         backgroundColor: color,
         color: isLight ? 'light.black' : 'light.white',
-        transform: 'translateY(-1px)'
+        transform: 'translateY(-1px)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       _active: {
         backgroundColor: color,
         color: isLight ? 'light.black' : 'light.white',
-        transform: 'translateY(0)'
+        transform: 'translateY(0)',
+        textDecoration: 'underline',
+        textUnderlineOffset: '1px',
+        textDecorationThickness: '1px'
       },
       transition: 'all 0.2s ease'
     },
@@ -3758,12 +3770,13 @@
       borderStyle: 'none',
       borderColor: 'transparent',
       textDecoration: 'underline',
-      textUnderlineOffset: 2,
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px',
       _hover: {
-        textDecorationThickness: 2
+        textDecorationThickness: '2px'
       },
       _active: {
-        textDecorationThickness: 2
+        textDecorationThickness: '2px'
       },
       transition: 'all 0.2s ease'
     }
@@ -3781,10 +3794,8 @@
         loaderPosition = 'left',
         backgroundColor,
         // primary candidate for main color
-        color,
-        // 2nd candidate for main color (NOT text‑color)
-        isAuto,
-        isFilled,
+        color // 2nd candidate for main color (NOT text‑color)
+        ,
         isDisabled,
         isLoading,
         isIconRounded,
@@ -3859,21 +3870,14 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined,
+      // width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined}
       /* visuals */
       borderRadius: ButtonShapes[shape],
-      backgroundColor: base.backgroundColor,
-      color: base.color,
-      borderWidth: base.borderWidth,
-      borderStyle: base.borderStyle,
-      borderColor: base.borderColor,
-      _hover: base._hover,
-      _active: base._active,
       boxShadow: shadow,
       transition: "all 0.2s ease",
       cursor: isDisabled ? 'default' : 'pointer',
       onClick: onClick
-    }, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+    }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
       to: to,
       isExternal: isExternal,
       color: 'inherit',