@app-studio/web 0.9.47 → 0.9.49

package/dist/web.esm.js

@@ -4829,65 +4829,42 @@ var Loader = LoaderComponent;
  * - Rounded corners: Consistent border radius
  * - Transitions: Subtle animations
  */
+var ButtonFontSize = {
+  xs: 10,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+var ButtonLineHeight = {
+  xs: 14,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 32
+};
+var getButtonSize = size => {
+  return {
+    minHeight: ButtonLineHeight[size] * 2,
+    paddingHorizontal: ButtonLineHeight[size] / 2,
+    fontSize: ButtonFontSize[size],
+    fontWeight: 500,
+    lineHeight: ButtonLineHeight[size],
+    letterSpacing: '-0.01em',
+    paddingInline: ButtonLineHeight[size],
+    paddingBlock: ButtonLineHeight[size] / 2,
+    outlineWidth: 'medium'
+  };
+};
 /**
  * Button sizes following the 4px grid system
  */
 var ButtonSizes = {
-  xs: {
-    minHeight: 8 * 4,
-    paddingTop: 1,
-    paddingBottom: 1,
-    paddingLeft: 2,
-    paddingRight: 2,
-    fontSize: 10,
-    fontWeight: '500',
-    lineHeight: 14,
-    letterSpacing: '-0.01em'
-  },
-  sm: {
-    minHeight: 10 * 4,
-    paddingTop: 4,
-    paddingBottom: 4,
-    paddingLeft: 8,
-    paddingRight: 8,
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: 16,
-    letterSpacing: '-0.01em'
-  },
-  md: {
-    minHeight: 12 * 4,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 20,
-    paddingRight: 20,
-    fontSize: 16,
-    fontWeight: 550,
-    lineHeight: 24,
-    letterSpacing: '-0.01em'
-  },
-  lg: {
-    minHeight: 14 * 4,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 16,
-    paddingRight: 16,
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 18,
-    letterSpacing: '-0.01em'
-  },
-  xl: {
-    minHeight: 16 * 4,
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 20,
-    paddingRight: 20,
-    fontSize: 20,
-    fontWeight: '500',
-    lineHeight: 22,
-    letterSpacing: '-0.01em'
-  }
+  xs: /*#__PURE__*/getButtonSize('xs'),
+  sm: /*#__PURE__*/getButtonSize('sm'),
+  md: /*#__PURE__*/getButtonSize('md'),
+  lg: /*#__PURE__*/getButtonSize('lg'),
+  xl: /*#__PURE__*/getButtonSize('xl')
 };
 /**
  * Button shapes with consistent border radius
@@ -4937,17 +4914,28 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       borderStyle: 'solid',
       borderColor: 'transparent',
       _hover: {
-        opacity: 0.9,
-        color: textColor
+        opacity: 0.9
       },
       _active: {
-        opacity: 0.95,
-        color: textColor
+        opacity: 0.95
       },
       _focusVisible: {
         outline: 'none',
-        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color,
-        color: textColor
+        boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+      },
+      transition: 'background-color 0.2s ease, opacity 0.2s ease'
+    },
+    reversed: {
+      backgroundColor: textColor,
+      color: color,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: textColor,
+      _hover: {
+        opacity: 0.9
+      },
+      _active: {
+        opacity: 0.95
       },
       transition: 'background-color 0.2s ease, opacity 0.2s ease'
     },
@@ -4987,7 +4975,6 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
         opacity: 0.9
       },
       _active: {
-        color: color,
         opacity: 0.95
       },
       _focusVisible: {
@@ -5007,11 +4994,9 @@ var getButtonVariants = function getButtonVariants(color, isLight, isThemeLight)
       textDecorationThickness: '1px',
       textDecorationColor: color,
       _hover: {
-        color: color,
         opacity: 0.8
       },
       _active: {
-        color: color,
         opacity: 0.9
       },
       _focusVisible: {
@@ -5319,7 +5304,7 @@ var ButtonView = _ref5 => {
       // primary candidate for main color
       color,
       // 2nd candidate for main color (NOT text‑color)
-      isAuto,
+      isAuto = true,
       isFilled,
       isDisabled,
       isLoading,