@app-studio/web 0.8.86 → 0.8.87

package/dist/web.esm.js

@@ -3615,11 +3615,11 @@ var Loader = LoaderComponent;
 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',
@@ -3628,54 +3628,53 @@ var ButtonSizes = {
   },
   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'
   }
 };
@@ -3725,15 +3724,16 @@ var getButtonVariants = (color, isLight) => ({
     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'
   },
@@ -3746,12 +3746,18 @@ var getButtonVariants = (color, isLight) => ({
     _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'
   },
@@ -3764,12 +3770,18 @@ var getButtonVariants = (color, isLight) => ({
     _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'
   },
@@ -3780,12 +3792,13 @@ var getButtonVariants = (color, isLight) => ({
     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'
   }
@@ -3803,10 +3816,8 @@ var ButtonView = _ref => {
       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,
@@ -3881,21 +3892,14 @@ var ButtonView = _ref => {
     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.createElement(Link, Object.assign({
+  }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React.createElement(Link, Object.assign({
     to: to,
     isExternal: isExternal,
     color: 'inherit',