@app-studio/web 0.9.79 → 0.9.81

package/dist/web.cjs.development.js

@@ -184,7 +184,7 @@ var useAccordionState = _ref => {
 };
 
 var AccordionShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -1299,17 +1299,14 @@ var MessageView = _ref => {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     size: "md",
-    weight: "semiBold",
-    backgroundColor: Theme[variant].container.backgroundColor
+    weight: "semiBold"
   }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-    size: "sm",
-    backgroundColor: Theme[variant].container.backgroundColor
+    size: "sm"
   }, views == null ? void 0 : views.subtitle), subtitle))), showAction && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     marginRight: 10,
     onClick: action,
     padding: "6px 10px",
-    whiteSpace: "nowrap",
-    backgroundColor: Theme[variant].container.backgroundColor
+    whiteSpace: "nowrap"
   }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
     zIndex: 10000,
@@ -2297,9 +2294,9 @@ var BadgeSizes = {
  * Badge shapes with consistent border radius
  */
 var BadgeShapes = {
-  sharp: 0,
+  square: 0,
   rounded: '8px',
-  pillShaped: '9999px'
+  pill: '9999px'
 };
 /**
  * Badge positions for absolute positioning
@@ -2377,7 +2374,7 @@ var BadgeView = _ref => {
   var {
       content,
       position,
-      shape = 'pillShaped',
+      shape = 'pill',
       variant = 'filled',
       size = 'md',
       views,
@@ -2751,9 +2748,9 @@ var ButtonSizes = {
  * Button shapes with consistent border radius
  */
 var ButtonShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 8,
-  pillShaped: 999
+  pill: 999
 };
 /**
  * Icon sizes for different button sizes
@@ -3319,11 +3316,23 @@ var ButtonView = _ref5 => {
     getColorHex
   } = appStudio.useTheme();
   /* MAIN COLOR – determines the entire palette */
-  var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.primary';
-  var mainTone = getColorHex(isDisabled ? 'theme.disabled' : mainColorKey);
+  // Priority: explicit backgroundColor/color prop -> theme.button.background -> theme.primary
+  var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.button.background';
+  // Decide which theme token to resolve based on state
+  var stateColorKey = isDisabled ? 'theme.disabled' : isLoading ? 'theme.loading' : mainColorKey;
+  // Resolve to actual hex color. 
+  // If 'theme.button.background' isn't defined, it falls back to 'theme.primary'
+  var mainTone = getColorHex(stateColorKey);
+  if (mainTone === 'theme.button.background' || mainTone === 'theme.loading') {
+    mainTone = getColorHex(isLoading ? 'color.dark.500' : 'theme.primary');
+  }
   /* text color - explicitly provided or default to white */
-  var resolvedTextColorKey = textColor != null ? textColor : 'color.white';
+  // Priority: explicit textColor prop -> theme.button.text -> color.white
+  var resolvedTextColorKey = textColor != null ? textColor : 'theme.button.text';
   var resolvedTextColor = getColorHex(resolvedTextColorKey);
+  if (resolvedTextColor === 'theme.button.text') {
+    resolvedTextColor = getColorHex('color.white');
+  }
   /* variant palette */
   var palette = React.useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
   var base = palette[variant];
@@ -3396,50 +3405,57 @@ var Button = ButtonComponent;
  * - Rounded corners: Consistent border radius
  * - Transitions: Subtle animations
  */
+/**
+ * Card sizes following the 4px grid system
+ */
+var CardSizes = {
+  sm: {
+    padding: '12px'
+  },
+  md: {
+    padding: '16px'
+  },
+  lg: {
+    padding: '24px'
+  }
+};
 /**
  * Card shapes with consistent border radius
  */
 var CardShapes = {
-  sharp: 0,
+  square: 0,
   rounded: '8px',
-  pillShaped: '16px'
+  pill: '24px'
 };
 /**
  * Get card variants with consistent styling based on theme mode
  */
 var getCardVariants = themeMode => {
+  var isDark = themeMode === 'dark';
   return {
     default: {
-      backgroundColor: 'color.white',
+      backgroundColor: isDark ? 'color.gray.900' : 'color.white',
       border: 'none',
       transition: 'background-color 0.2s ease, box-shadow 0.2s ease'
     },
     outlined: {
-      backgroundColor: 'color.white',
+      backgroundColor: isDark ? 'color.gray.900' : 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: isDark ? 'color.gray.700' : 'color.gray.200',
       transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
       _hover: {
-        borderColor: 'color.gray.300',
+        borderColor: isDark ? 'color.gray.600' : 'color.gray.300',
         boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.05)'
-      },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1)'
       }
     },
     elevated: {
-      backgroundColor: 'color.white',
-      boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.06)',
+      backgroundColor: isDark ? 'color.gray.900' : 'color.white',
+      boxShadow: isDark ? '0px 4px 12px rgba(0, 0, 0, 0.3)' : '0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.06)',
       border: 'none',
       transition: 'box-shadow 0.2s ease',
       _hover: {
-        boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.06)'
-      },
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.08)'
+        boxShadow: isDark ? '0px 8px 16px rgba(0, 0, 0, 0.4)' : '0px 4px 6px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.06)'
       }
     }
   };
@@ -3449,50 +3465,31 @@ var getCardVariants = themeMode => {
  * @param theme - Theme object from useTheme hook
  */
 var getDefaultCardStyles = theme => {
+  var isDark = theme.themeMode === 'dark';
   return {
     container: {
-      backgroundColor: 'color.white',
-      color: 'color.black',
+      backgroundColor: isDark ? 'color.gray.900' : 'color.white',
+      color: isDark ? 'color.white' : 'color.black',
       borderRadius: '8px',
       overflow: 'hidden',
-      transition: 'all 0.2s ease',
-      media: {
-        mobile: {
-          borderRadius: '4px'
-        }
-      }
+      transition: 'all 0.2s ease'
     },
     header: {
       padding: '16px',
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
-      borderBottomColor: 'color.gray.200',
-      color: 'color.black',
-      media: {
-        mobile: {
-          padding: '12px'
-        }
-      }
+      borderBottomColor: isDark ? 'color.gray.800' : 'color.gray.100',
+      color: 'theme.primary'
     },
     content: {
       padding: '16px',
-      color: 'color.black',
-      media: {
-        mobile: {
-          padding: '12px'
-        }
-      }
+      color: isDark ? 'color.gray.300' : 'color.gray.600'
     },
     footer: {
       padding: '16px',
       borderTopWidth: '1px',
       borderTopStyle: 'solid',
-      borderTopColor: 'color.gray.200',
-      media: {
-        mobile: {
-          padding: '12px'
-        }
-      }
+      borderTopColor: isDark ? 'color.gray.800' : 'color.gray.100'
     }
   };
 };
@@ -3517,12 +3514,14 @@ var CardHeader = _ref => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().header;
+  var defaultStyles = getDefaultCardStyles(theme).header;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.header, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$header = contextStyles.header) == null ? void 0 : _contextStyles$header.style, style)
   });
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, mergedProps), children);
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    gap: 8
+  }, mergedProps), children);
 };
 var CardContent = _ref2 => {
   var _contextStyles$conten;
@@ -3535,12 +3534,14 @@ var CardContent = _ref2 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().content;
+  var defaultStyles = getDefaultCardStyles(theme).content;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.content, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$conten = contextStyles.content) == null ? void 0 : _contextStyles$conten.style, style)
   });
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, mergedProps), children);
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    gap: 12
+  }, mergedProps), children);
 };
 var CardFooter = _ref3 => {
   var _contextStyles$footer;
@@ -3553,15 +3554,17 @@ var CardFooter = _ref3 => {
   var {
     styles: contextStyles
   } = useCardContext();
-  var defaultStyles = getDefaultCardStyles().footer;
+  var defaultStyles = getDefaultCardStyles(theme).footer;
   // Merge styles: Default < Context Override < Direct Props/Style
   var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.footer, props, {
     style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$footer = contextStyles.footer) == null ? void 0 : _contextStyles$footer.style, style)
   });
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, mergedProps), children);
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    gap: 8
+  }, mergedProps), children);
 };
 var CardView = _ref4 => {
-  var _contextValue$styles$;
+  var _CardSizes$size, _contextValue$styles$;
   var {
       variant = 'default',
       size = 'md',
@@ -3576,31 +3579,46 @@ var CardView = _ref4 => {
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var theme = appStudio.useTheme();
-  var defaultStyles = getDefaultCardStyles();
+  var defaultStyles = getDefaultCardStyles(theme);
+  // Get size padding
+  var sizePadding = ((_CardSizes$size = CardSizes[size]) == null ? void 0 : _CardSizes$size.padding) || '16px';
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = React.useMemo(() => ({
     styles: {
-      container: Object.assign({}, defaultStyles.container, views == null ? void 0 : views.container),
-      header: Object.assign({}, defaultStyles.header, views == null ? void 0 : views.header),
-      content: Object.assign({}, defaultStyles.content, views == null ? void 0 : views.content),
-      footer: Object.assign({}, defaultStyles.footer, views == null ? void 0 : views.footer)
-    }
-  }), [defaultStyles, views]);
+      container: Object.assign({}, defaultStyles.container, {
+        borderRadius: CardShapes[shape]
+      }, views == null ? void 0 : views.container),
+      header: Object.assign({}, defaultStyles.header, {
+        padding: sizePadding
+      }, views == null ? void 0 : views.header),
+      content: Object.assign({}, defaultStyles.content, {
+        padding: sizePadding
+      }, views == null ? void 0 : views.content),
+      footer: Object.assign({}, defaultStyles.footer, {
+        padding: sizePadding
+      }, views == null ? void 0 : views.footer)
+    }
+  }), [defaultStyles, views, sizePadding, shape]);
   // Determine if we have explicit Card.Header, Card.Content, Card.Footer components
-  // or if we need to wrap children in a default layout
   var hasExplicitStructure = React__default.Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
-  var variantStyles = getCardVariants()[variant];
+  // Get the appropriate variant styles based on theme mode
+  var {
+    themeMode
+  } = theme;
+  var currentThemeMode = elementMode || themeMode;
+  var variantStyles = getCardVariants(currentThemeMode)[variant];
   // Merge styles for the root element
   var mergedRootProps = Object.assign({
     width: isFullWidth ? '100%' : 'auto',
-    borderRadius: CardShapes[shape],
     overflow: 'hidden'
   }, variantStyles, contextValue.styles.container, props, {
     style: Object.assign({}, (_contextValue$styles$ = contextValue.styles.container) == null ? void 0 : _contextValue$styles$.style, style)
   });
   return /*#__PURE__*/React__default.createElement(CardContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, mergedRootProps), hasExplicitStructure ? children : (/*#__PURE__*/React__default.createElement(appStudio.Vertical, null, header && /*#__PURE__*/React__default.createElement(CardHeader, null, header), /*#__PURE__*/React__default.createElement(CardContent, null, children), footer && /*#__PURE__*/React__default.createElement(CardFooter, null, footer)))));
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, mergedRootProps), hasExplicitStructure ? children : (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+    width: "100%"
+  }, header && /*#__PURE__*/React__default.createElement(CardHeader, null, header), /*#__PURE__*/React__default.createElement(CardContent, null, children), footer && /*#__PURE__*/React__default.createElement(CardFooter, null, footer)))));
 };
 
 /**
@@ -6388,7 +6406,7 @@ var Shapes = {
       }
     }
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -6399,7 +6417,7 @@ var Shapes = {
       }
     }
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -7336,12 +7354,9 @@ var ColorSchemes = {
   // State-specific colors
   states: {
     hover: {
-      active: {
-        opacity: 0.9
-      },
-      inactive: {
-        backgroundColor: 'color.gray.400'
-      }
+      active: 'theme.primary',
+      inactive: 'color.gray.400',
+      activeOpacity: 0.9
     },
     focus: {
       active: {
@@ -7355,6 +7370,17 @@ var ColorSchemes = {
     }
   }
 };
+/**
+ * Transition styles for the Switch component
+ */
+var TransitionStyles = {
+  slider: {
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+  },
+  knob: {
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+  }
+};
 
 var _excluded$t = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
 var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
@@ -7393,7 +7419,8 @@ var SwitchView = _ref => {
       if (onChange) onChange(newValue);
     }
   };
-  var handleHover = () => setIsHovered(!isHovered);
+  var handleMouseEnter = () => setIsHovered(true);
+  var handleMouseLeave = () => setIsHovered(false);
   /**
    * Styles for the switch component
    */
@@ -7415,8 +7442,8 @@ var SwitchView = _ref => {
   };
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     htmlFor: id,
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, switchStyle.container, props), /*#__PURE__*/React__default.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
@@ -7444,12 +7471,10 @@ var SwitchView = _ref => {
     borderRadius: "9999px" // Full rounded for pill shape
     ,
     backgroundColor: isDisabled ? ColorSchemes.default.disabled : value ? isHovered ? ColorSchemes.states.hover.active : ColorSchemes.default.active : isHovered ? ColorSchemes.states.hover.inactive : ColorSchemes.default.inactive,
-    overflow: "hidden",
+    opacity: !isDisabled && value && isHovered ? ColorSchemes.states.hover.activeOpacity : 1,
     // State properties
-    cursor: "pointer",
-    // Animation
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-  }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+    cursor: "pointer"
+  }, TransitionStyles.slider, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
     marginLeft: 8,
     marginRight: 4,
     transition: "all 0.3s ease",
@@ -7460,8 +7485,9 @@ var SwitchView = _ref => {
   }, activeChild)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     borderRadius: "50%",
     backgroundColor: ColorSchemes.default.knob,
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    boxShadow: isHovered ? '0 2px 4px rgba(0, 0, 0, 0.2)' : '0 1px 2px rgba(0, 0, 0, 0.1)',
+    transform: isHovered ? 'scale(1.05)' : 'scale(1)'
+  }, TransitionStyles.knob, {
     zIndex: 1
   }, KnobSizes[size], views['circle'])), inActiveChild && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
     marginRight: 8,
@@ -8541,13 +8567,13 @@ var Shapes$1 = {
   default: {
     borderRadius: '6px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -11235,9 +11261,6 @@ var TagChip = _ref => {
     isReadOnly
   } = _ref;
   var [isRemoveHovered, setIsRemoveHovered] = React__default.useState(false);
-  var {
-    getColor
-  } = appStudio.useTheme();
   var chipSize = {
     xs: {
       padding: '2px 8px',
@@ -11273,29 +11296,31 @@ var TagChip = _ref => {
     alignItems: "center",
     gap: 6,
     padding: chipSize.padding,
-    backgroundColor: "white",
+    backgroundColor: "color.gray.100.100",
     borderRadius: "16px",
-    border: "1px solid",
-    borderColor: "color.black.100",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "color.gray.100",
     boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
     transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
     opacity: isDisabled ? 0.6 : 1,
     _hover: !isDisabled && !isReadOnly ? {
-      borderColor: 'color.gray.300',
+      backgroundColor: 'color.gray.100.200',
+      borderColor: 'color.gray.200',
       boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
       transform: 'translateY(-1px)'
     } : {}
   }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
     fontSize: chipSize.fontSize,
-    color: isDisabled ? 'color.gray.400' : 'color.gray.700',
-    fontWeight: "500",
+    color: isDisabled ? 'color.gray.100' : 'theme.primary',
     whiteSpace: "nowrap"
   }, views == null ? void 0 : views.tagText), tag), isRemovable && !isDisabled && !isReadOnly && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     cursor: "pointer",
     padding: "2px",
     borderRadius: "50%",
     transition: "all 0.2s ease",
-    backgroundColor: isRemoveHovered ? 'color.red.50' : 'transparent',
+    backgroundColor: isRemoveHovered ? 'color.red.100' : 'transparent',
+    opacity: isRemoveHovered ? 1 : 0.7,
     onMouseEnter: () => setIsRemoveHovered(true),
     onMouseLeave: () => setIsRemoveHovered(false),
     onClick: e => {
@@ -11362,7 +11387,7 @@ var TagInputView = _ref2 => {
     outline: 'none',
     backgroundColor: 'transparent',
     fontSize: appStudio.Typography.fontSizes[size],
-    color: isDisabled ? 'color.gray.400' : 'color.gray.900',
+    color: isDisabled ? 'color.gray.400' : 'color.gray.800',
     flex: 1,
     minWidth: '120px'
   }, views == null ? void 0 : views.input);
@@ -12782,7 +12807,7 @@ var Shapes$2 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
@@ -14449,9 +14474,9 @@ var ThumbSizes = {
   }
 };
 var SliderShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 4,
-  pillShaped: 24
+  pill: 24
 };
 var getSlider = themeMode => {
   return {
@@ -15265,7 +15290,7 @@ var hideModal = name => {
  * Following the 4px grid system
  */
 var ContainerShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -16714,30 +16739,25 @@ var TabHeader = _ref => {
     textStyles
   } = _ref;
   // Base styles for the tab header
+  // Base styles for the tab header
   var baseStyles = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: '10px 16px',
+    padding: '12px 16px',
     cursor: 'pointer',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: isActive ? 'theme.primary' : 'transparent',
-    borderBottomColor: isActive ? 'transparent' : 'color.gray.200',
-    backgroundColor: isActive ? 'color.white' : 'transparent',
+    borderBottom: '2px solid',
+    borderBottomColor: isActive ? 'theme.primary' : 'transparent',
+    backgroundColor: 'transparent',
     color: isActive ? 'theme.primary' : 'color.gray.600',
-    fontWeight: 'normal',
-    position: 'relative',
-    // If active, show a bottom border that matches the background color
-    // to create the illusion that the tab is connected to the content
+    fontWeight: isActive ? '600' : '500',
+    marginBottom: '-1px',
+    transition: 'all 0.2s ease',
     // Hover state
     on: {
       hover: {
-        color: 'theme.primary'
+        color: 'theme.primary',
+        borderBottomColor: isActive ? 'theme.primary' : 'color.gray.300'
       }
     }
   };
@@ -16799,7 +16819,11 @@ var TabsView = _ref => {
     React__default.createElement(appStudio.Vertical, Object.assign({
       width: "100%",
       height: '100%'
-    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
+    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      width: "100%",
+      borderBottom: "1px solid",
+      borderBottomColor: "color.gray.200"
+    }, views.headerTabs), tabs.map(tab => {
       // Determine if the current tab in the loop is the active one
       var isActive = tab.title === activeTab.title;
       // Prepare the onClick handler for this specific tab
@@ -17373,7 +17397,7 @@ var SlideEffect = _ref => {
   }))))));
 };
 
-var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
+var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -17404,8 +17428,7 @@ var TitleView = _ref => {
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
       highlightSlideSequential = true,
-      themeMode: elementMode,
-      textComponent
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
@@ -17459,7 +17482,6 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
-  var TextComponent = textComponent || appStudio.Text;
   var fontSize = TitleSizes[size];
   // Highlight style props
   var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
@@ -17480,13 +17502,12 @@ var TitleView = _ref => {
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
   // Common container props
-  var containerProps = Object.assign({
+  var containerProps = {
     ref,
-    animate: inView ? controlledAnimate : undefined
-  }, !textComponent && {
+    animate: inView ? controlledAnimate : undefined,
     as: 'h1',
     fontSize
-  });
+  };
   // Render highlighted text content (typewriter, slide, or plain)
   var renderHighlightedContent = content => {
     // If animations are enabled but not in view, render invisible placeholder
@@ -17502,8 +17523,7 @@ var TitleView = _ref => {
       return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
         text: content,
         typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
-        cursorColor: "currentColor",
-        textComponent: TextComponent
+        cursorColor: "currentColor"
       }, highlightProps));
     }
     if (highlightSlide) {
@@ -17514,8 +17534,7 @@ var TitleView = _ref => {
         sequential: stateHighlightSlideSequential,
         direction: "up",
         fontSize: fontSize,
-        wordProps: highlightProps,
-        textComponent: TextComponent
+        wordProps: highlightProps
       });
     }
     return renderWithLineBreaks(content);
@@ -17535,13 +17554,11 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       key: "text-" + idx,
       as: "span",
       display: "inline"
-    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
@@ -17550,16 +17567,14 @@ var TitleView = _ref => {
   }
   // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
     }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
   }
   // Case 3: Default - no highlighting
-  return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
+  return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
 };
 
 /**
@@ -17625,9 +17640,9 @@ var useToggleState = defaultToggled => {
 };
 
 var ToggleShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 4,
-  pillShaped: 24
+  pill: 24
 };
 /**
  * Generate toggle variants with proper color combinations based on main color and contrast
@@ -17744,7 +17759,7 @@ var ToggleView = _ref => {
   };
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     role: "Toggle",
-    padding: shape === 'pillShaped' ? '10px 12px' : '8px',
+    padding: shape === 'pill' ? '10px 12px' : '8px',
     width: "fit-content",
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     borderRadius: ToggleShapes[shape],
@@ -18653,13 +18668,13 @@ var Shapes$3 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -19121,13 +19136,13 @@ var Shapes$4 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };