@app-studio/web 0.9.78 → 0.9.80

package/dist/web.umd.development.js

@@ -1,12 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.split.js'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.split.js', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, global.dynamic, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, global.contrast, null, null, null, global.format, null, null, null, global.formik));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, dynamic, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('core-js/modules/es.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.split.js'), require('contrast'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.split.js', 'contrast', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, global.dynamic, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, null, null, null, global.format, null, null, null, global.formik, null, null, global.contrast));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, dynamic, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, es_string_replace_js, es_string_split_js, contrast) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
-  contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
+  contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
 
   function asyncGeneratorStep(n, t, e, r, o, a, c) {
     try {
@@ -2745,11 +2745,10 @@
       padding: 14
     }
   };
-  var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
+  var getButtonVariants = function getButtonVariants(color, textColor, reversed) {
     if (reversed === void 0) {
       reversed = false;
     }
-    var textColor = isLight ? '#000000' : '#FFFFFF';
     // Determine effective colors based on reversed state
     var effectiveBg = reversed ? textColor : color;
     var effectiveContent = reversed ? color : textColor;
@@ -2876,8 +2875,8 @@
 
   var _excluded$d = ["asComponent", "isDisabled", "isLoading", "isWrapped", "borderRadius", "width", "height", "baseStyles", "sizeStyles", "iconPad", "mainTone", "resolvedTextColor", "children", "borderWidth"],
     _excluded2$3 = ["shape", "isDisabled", "onClick", "shadow", "borderWidth", "isAuto", "isFilled", "views", "children"],
-    _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
-    _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
+    _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
+    _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "textColor", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
   // --- Helper: Button Content ---
   // Renders the inner content: Loader, Icon, and Children.
   var ButtonContent = _ref => {
@@ -3237,7 +3236,7 @@
   // --- Main Component ---
   // --- Main Component ---
   var ButtonView = _ref5 => {
-    var _ref6, _ref7, _base$color;
+    var _ref6, _base$color;
     var {
         /* behaviour */
         variant = 'filled',
@@ -3246,13 +3245,13 @@
         iconPosition = 'left',
         loaderPosition = 'left',
         backgroundColor,
-        // primary candidate for main color
+        // Primary override for main color
         color,
-        // 2nd candidate for main color (NOT text‑color)
-        scheme,
-        // New scheme prop
+        // Main button color (theme tokens or color palette)
+        textColor,
+        // Explicit text color
         reversed = false,
-        // New reversed prop
+        // Reverse colors for dark backgrounds
         isAuto = true,
         isFilled,
         isDisabled,
@@ -3277,24 +3276,30 @@
       props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
     /* theme helpers */
     var {
-      getColorHex,
-      themeMode
+      getColorHex
     } = appStudio.useTheme();
     /* MAIN COLOR – determines the entire palette */
-    var mainColorKey = (_ref6 = (_ref7 = backgroundColor != null ? backgroundColor : color) != null ? _ref7 : scheme) != null ? _ref6 : 'theme.primary';
-    var mainTone = getColorHex(isDisabled ? 'theme.disabled' : mainColorKey);
-    var tone = contrast(mainTone);
-    /* text color with mixBlendMode for maximum visibility */
-    var textColor;
-    if (tone === 'light') {
-      textColor = '#000000';
-    } else {
-      textColor = '#FFFFFF';
+    // 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 */
+    // 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, tone === 'light', reversed), [mainTone, tone, reversed]);
+    var palette = React.useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
     var base = palette[variant];
-    var resolvedTextColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : textColor;
+    var finalContentColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : resolvedTextColor;
     // Render content logic safely
     var content = /*#__PURE__*/React__default.createElement(ButtonContent, {
       icon: icon,
@@ -3302,7 +3307,7 @@
       iconPosition: iconPosition,
       loaderPosition: loaderPosition,
       size: size,
-      resolvedTextColor: resolvedTextColor,
+      resolvedTextColor: finalContentColor,
       isIconRounded: isIconRounded,
       views: views
     }, children);
@@ -3325,11 +3330,10 @@
       baseStyles: base,
       sizeStyles: sizeStyles,
       iconPad: iconPad,
-      resolvedTextColor: resolvedTextColor,
+      resolvedTextColor: finalContentColor,
       content: content,
       size: size,
       mainTone: mainTone,
-      tone: tone,
       borderMovingDuration: borderMovingDuration,
       borderMovingGradientColors: borderMovingGradientColors,
       animatedStrokeAccentColor: animatedStrokeAccentColor,
@@ -3364,50 +3368,57 @@
    * - 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,
     rounded: '8px',
-    pillShaped: '16px'
+    pillShaped: '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)'
         }
       }
     };
@@ -3417,50 +3428,31 @@
    * @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'
       }
     };
   };
@@ -3485,12 +3477,14 @@
     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;
@@ -3503,12 +3497,14 @@
     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;
@@ -3521,15 +3517,17 @@
     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',
@@ -3544,20 +3542,32 @@
       } = _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]);
+        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]);
     // 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',
@@ -3568,7 +3578,9 @@
     });
     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)))));
   };
 
   /**
@@ -7304,12 +7316,9 @@
     // 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: {
@@ -7323,6 +7332,17 @@
       }
     }
   };
+  /**
+   * 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({
@@ -7361,7 +7381,8 @@
         if (onChange) onChange(newValue);
       }
     };
-    var handleHover = () => setIsHovered(!isHovered);
+    var handleMouseEnter = () => setIsHovered(true);
+    var handleMouseLeave = () => setIsHovered(false);
     /**
      * Styles for the switch component
      */
@@ -7383,8 +7404,8 @@
     };
     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,
@@ -7412,12 +7433,10 @@
       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",
@@ -7428,8 +7447,9 @@
     }, 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,
@@ -11241,29 +11261,32 @@
       alignItems: "center",
       gap: 6,
       padding: chipSize.padding,
-      backgroundColor: "white",
+      backgroundColor: "color.gray.100",
       borderRadius: "16px",
-      border: "1px solid",
-      borderColor: "color.black.100",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "color.gray.300",
       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.200',
+        borderColor: 'color.gray.400',
         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.400' : 'theme.primary',
+      fontWeight: "bold",
       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 => {
@@ -11330,7 +11353,7 @@
       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);