@app-studio/web 0.9.83 → 0.9.85

package/dist/web.umd.development.js

@@ -160,17 +160,17 @@
     outline: {
       borderWidth: 1,
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       transition: 'border-color 0.15s ease, background-color 0.15s ease',
       _hover: {
-        borderColor: 'color.gray.300'
+        borderColor: 'color-gray-300'
       }
     },
     filled: {
-      backgroundColor: 'color.gray.50',
+      backgroundColor: 'color-gray-50',
       transition: 'background-color 0.15s ease',
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }
     }
   };
@@ -226,7 +226,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       borderWidth: 1,
       borderStyle: "solid",
-      borderColor: "color.gray.200",
+      borderColor: "color-gray-200",
       marginBottom: 8,
       overflow: "hidden",
       opacity: isDisabled ? 0.5 : 1,
@@ -280,7 +280,7 @@
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       alignItems: 'center',
       justifyContent: 'space-between',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       width: '100%'
     }, views == null ? void 0 : views.container, props);
     // If asChild is true, clone the child element and merge props
@@ -326,7 +326,7 @@
       role: "region",
       "aria-labelledby": triggerId,
       padding: 16,
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       maxHeight: isExpanded ? '1000px' : '0',
       transition: "max-height 0.3s ease-in-out, opacity 0.3s ease-in-out",
       opacity: 1,
@@ -796,67 +796,67 @@
     return {
       default: {
         container: {
-          backgroundColor: 'color.gray.50',
-          borderColor: 'color.gray.200',
+          backgroundColor: 'color-gray-50',
+          borderColor: 'color-gray-200',
           boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
         },
         content: {
-          color: 'color.gray.700'
+          color: 'color-gray-700'
         },
         icon: {
-          color: 'color.gray.500'
+          color: 'color-gray-500'
         }
       },
       info: {
         container: {
-          backgroundColor: 'color.blue.50',
-          borderColor: 'color.blue.200',
+          backgroundColor: 'color-blue-50',
+          borderColor: 'color-blue-200',
           boxShadow: '0 1px 2px rgba(59, 130, 246, 0.05)'
         },
         content: {
-          color: 'color.blue.700'
+          color: 'color-blue-700'
         },
         icon: {
-          color: 'color.blue.500'
+          color: 'color-blue-500'
         }
       },
       success: {
         container: {
-          backgroundColor: 'color.green.50',
-          borderColor: 'color.green.200',
+          backgroundColor: 'color-green-50',
+          borderColor: 'color-green-200',
           boxShadow: '0 1px 2px rgba(34, 197, 94, 0.05)'
         },
         content: {
-          color: 'color.green.700'
+          color: 'color-green-700'
         },
         icon: {
-          color: 'color.green.500'
+          color: 'color-green-500'
         }
       },
       error: {
         container: {
-          backgroundColor: 'color.red.50',
-          borderColor: 'color.red.200',
+          backgroundColor: 'color-red-50',
+          borderColor: 'color-red-200',
           boxShadow: '0 1px 2px rgba(239, 68, 68, 0.05)'
         },
         content: {
-          color: 'color.red.700'
+          color: 'color-red-700'
         },
         icon: {
-          color: 'color.red.500'
+          color: 'color-red-500'
         }
       },
       warning: {
         container: {
-          backgroundColor: 'color.orange.50',
-          borderColor: 'color.orange.200',
+          backgroundColor: 'color-orange-50',
+          borderColor: 'color-orange-200',
           boxShadow: '0 1px 2px rgba(249, 115, 22, 0.05)'
         },
         content: {
-          color: 'color.orange.700'
+          color: 'color-orange-700'
         },
         icon: {
-          color: 'color.orange.500'
+          color: 'color-orange-500'
         }
       }
     };
@@ -1013,7 +1013,7 @@
     }, viewProps), bars.map((amplitude, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, {
       key: index,
       width: 2,
-      backgroundColor: isPaused ? 'color.gray.200' : amplitude >= 0 ? 'color.gray.900' : 'color.gray.500',
+      backgroundColor: isPaused ? 'color-gray-200' : amplitude >= 0 ? 'color-gray-900' : 'color-gray-500',
       style: {
         height: clamp(amplitude * scalingFactor, 2, 32) + "px"
       }
@@ -1115,69 +1115,69 @@
   var Themes = {
     info: {
       container: {
-        backgroundColor: 'color.blue.200',
-        border: 'color.blue.400'
+        backgroundColor: 'color-blue-200',
+        border: 'color-blue-400'
       },
       icon: {
-        color: 'color.blue.500',
+        color: 'color-blue-500',
         name: 'InformationIcon'
       },
       content: {
-        color: 'color.blue.500'
+        color: 'color-blue-500'
       },
       close: {
-        color: 'color.blue.500',
+        color: 'color-blue-500',
         name: 'CloseIcon'
       }
     },
     success: {
       container: {
-        backgroundColor: 'color.green.200',
-        border: 'color.green.400'
+        backgroundColor: 'color-green-200',
+        border: 'color-green-400'
       },
       icon: {
-        color: 'color.green.500',
+        color: 'color-green-500',
         name: 'SuccessIcon'
       },
       content: {
-        color: 'color.green.500'
+        color: 'color-green-500'
       },
       close: {
-        color: 'color.green.500',
+        color: 'color-green-500',
         name: 'CloseIcon'
       }
     },
     error: {
       container: {
-        backgroundColor: 'color.red.200',
-        border: 'color.red.400'
+        backgroundColor: 'color-red-200',
+        border: 'color-red-400'
       },
       icon: {
-        color: 'color.red.500',
+        color: 'color-red-500',
         name: 'ErrrorIcon'
       },
       content: {
-        color: 'color.red.500'
+        color: 'color-red-500'
       },
       close: {
-        color: 'color.red.500',
+        color: 'color-red-500',
         name: 'CloseIcon'
       }
     },
     warning: {
       container: {
-        backgroundColor: 'color.orange.200',
-        border: 'color.orange.400'
+        backgroundColor: 'color-orange-200',
+        border: 'color-orange-400'
       },
       icon: {
-        color: 'color.orange.500',
+        color: 'color-orange-500',
         name: 'ErrrorIcon'
       },
       content: {
-        color: 'color.orange.500'
+        color: 'color-orange-500'
       },
       close: {
-        color: 'color.orange.500',
+        color: 'color-orange-500',
         name: 'CloseIcon'
       }
     }
@@ -1586,7 +1586,7 @@
           height: 4,
           width: progress + "%",
           borderRadius: 2,
-          backgroundColor: "color.dark.50"
+          backgroundColor: "color-dark-50"
         }, views == null ? void 0 : views.view))), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
           fontSize: 12
         }, views == null ? void 0 : views.text), progress, "%"));
@@ -1766,7 +1766,7 @@
           height: '36px',
           cursor: 'pointer',
           _hover: {
-            backgroundColor: 'color.gray.100'
+            backgroundColor: 'color-gray-100'
           }
         }
       },
@@ -1780,7 +1780,7 @@
       },
       textProps: {
         fontSize: '14px',
-        color: 'color.gray.600'
+        color: 'color-gray-600'
       },
       validateFile: file => {
         if (file.size > 100 * 1024 * 1024) {
@@ -1800,13 +1800,13 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.600',
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-600',
       borderRadius: '50%',
       border: "none",
       cursor: "pointer",
       _hover: {
-        backgroundColor: 'color.gray.200'
+        backgroundColor: 'color-gray-200'
       }
     }, /*#__PURE__*/React__default.createElement(MicrophoneIcon, {
       widthHeight: 16,
@@ -1824,13 +1824,13 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.600',
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-600',
       borderRadius: '50%',
       border: "none",
       cursor: "pointer",
       _hover: {
-        backgroundColor: 'color.gray.200'
+        backgroundColor: 'color-gray-200'
       }
     }, paused ? (/*#__PURE__*/React__default.createElement(PlayIcon, {
       widthHeight: 16,
@@ -1849,13 +1849,13 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: 'theme.error',
-      color: 'color.white',
+      backgroundColor: 'theme-error',
+      color: 'color-white',
       borderRadius: '50%',
       border: "none",
       cursor: "pointer",
       _hover: {
-        backgroundColor: 'color.red.600'
+        backgroundColor: 'color-red-600'
       }
     }, /*#__PURE__*/React__default.createElement(StopIcon, {
       widthHeight: 16,
@@ -2108,13 +2108,13 @@
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'transparent',
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
       transition: 'all 0.2s ease'
     },
     fallback: {
       fontWeight: '500',
-      color: 'color.gray.600'
+      color: 'color-gray-600'
     },
     image: {
       objectFit: 'cover',
@@ -2144,7 +2144,7 @@
       width: avatarSize,
       height: avatarSize
     }, DefaultAvatarStyles.container, {
-      borderColor: imageError ? 'color.gray.400' : 'transparent',
+      borderColor: imageError ? 'color-gray-400' : 'transparent',
       onClick: onClick
     }, views == null ? void 0 : views.container), !imageError && src ? (/*#__PURE__*/React__default.createElement(appStudio.Image, {
       alt: "IM",
@@ -2292,8 +2292,8 @@
   var getBadgeVariants = themeMode => {
     return {
       filled: {
-        backgroundColor: 'theme.primary',
-        color: 'color.white',
+        backgroundColor: 'theme-primary',
+        color: 'color-white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -2303,8 +2303,8 @@
         backgroundColor: 'transparent',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'theme.primary',
-        color: 'theme.primary',
+        borderColor: 'theme-primary',
+        color: 'theme-primary',
         transition: 'all 0.2s ease'
       },
       link: {
@@ -2312,14 +2312,14 @@
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
-        color: 'theme.primary',
+        color: 'theme-primary',
         textDecoration: 'underline',
         textUnderlineOffset: '2px',
         transition: 'all 0.2s ease'
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: 'color.gray.500',
+        color: 'color-gray-500',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -2481,7 +2481,7 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading',
+        color = 'theme-loading',
         themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -2530,7 +2530,7 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading',
+        color = 'theme-loading',
         themeMode: elementMode
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
@@ -2578,7 +2578,7 @@
     var {
         size = 'md',
         speed = 'normal',
-        color = 'theme.loading',
+        color = 'theme-loading',
         themeMode: elementMode
       } = _ref3,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
@@ -2630,8 +2630,8 @@
     var {
       getColor
     } = appStudio.useTheme();
-    loaderColor = getColor(loaderColor || props.color || 'theme.loading');
-    textColor = getColor(textColor || props.color || 'theme.loading');
+    loaderColor = getColor(loaderColor || props.color || 'theme-loading');
+    textColor = getColor(textColor || props.color || 'theme-loading');
     var style = {
       size,
       speed,
@@ -3279,22 +3279,22 @@
       getColorHex
     } = appStudio.useTheme();
     /* MAIN COLOR – determines the entire palette */
-    // Priority: explicit backgroundColor/color prop -> theme.button.background -> theme.primary
-    var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.button.background';
+    // 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 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');
+    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';
+    // 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');
+    if (resolvedTextColor === 'theme-button-text') {
+      resolvedTextColor = getColorHex('color-white');
     }
     /* variant palette */
     var palette = React.useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
@@ -3397,23 +3397,23 @@
     var isDark = themeMode === 'dark';
     return {
       default: {
-        backgroundColor: isDark ? 'color.gray.900' : 'color.white',
+        backgroundColor: isDark ? 'color-gray-900' : 'color-white',
         border: 'none',
         transition: 'background-color 0.2s ease, box-shadow 0.2s ease'
       },
       outlined: {
-        backgroundColor: isDark ? 'color.gray.900' : 'color.white',
+        backgroundColor: isDark ? 'color-gray-900' : 'color-white',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: isDark ? 'color.gray.700' : 'color.gray.200',
+        borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
         transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
         _hover: {
-          borderColor: isDark ? 'color.gray.600' : 'color.gray.300',
+          borderColor: isDark ? 'color-gray-600' : 'color-gray-300',
           boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.05)'
         }
       },
       elevated: {
-        backgroundColor: isDark ? 'color.gray.900' : 'color.white',
+        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',
@@ -3431,8 +3431,8 @@
     var isDark = theme.themeMode === 'dark';
     return {
       container: {
-        backgroundColor: isDark ? 'color.gray.900' : 'color.white',
-        color: isDark ? 'color.white' : 'color.black',
+        backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+        color: isDark ? 'color-white' : 'color-black',
         borderRadius: '8px',
         overflow: 'hidden',
         transition: 'all 0.2s ease'
@@ -3441,18 +3441,18 @@
         padding: '16px',
         borderBottomWidth: '1px',
         borderBottomStyle: 'solid',
-        borderBottomColor: isDark ? 'color.gray.800' : 'color.gray.100',
-        color: 'theme.primary'
+        borderBottomColor: isDark ? 'color-gray-800' : 'color-gray-100',
+        color: 'theme-primary'
       },
       content: {
         padding: '16px',
-        color: isDark ? 'color.gray.300' : 'color.gray.600'
+        color: isDark ? 'color-gray-300' : 'color-gray-600'
       },
       footer: {
         padding: '16px',
         borderTopWidth: '1px',
         borderTopStyle: 'solid',
-        borderTopColor: isDark ? 'color.gray.800' : 'color.gray.100'
+        borderTopColor: isDark ? 'color-gray-800' : 'color-gray-100'
       }
     };
   };
@@ -3780,7 +3780,7 @@
       width: '10px',
       height: '10px',
       borderRadius: '50%',
-      backgroundColor: 'color.gray.300',
+      backgroundColor: 'color-gray-300',
       margin: '0 4px',
       cursor: 'pointer',
       transition: 'background-color 0.3s ease'
@@ -3789,7 +3789,7 @@
       width: '20px',
       height: '4px',
       borderRadius: '2px',
-      backgroundColor: 'color.gray.300',
+      backgroundColor: 'color-gray-300',
       margin: '0 4px',
       cursor: 'pointer',
       transition: 'background-color 0.3s ease'
@@ -3798,7 +3798,7 @@
       minWidth: '24px',
       height: '24px',
       borderRadius: '50%',
-      backgroundColor: 'color.gray.300',
+      backgroundColor: 'color-gray-300',
       margin: '0 4px',
       cursor: 'pointer',
       display: 'flex',
@@ -3810,22 +3810,22 @@
   };
   var ActiveIndicatorStyles = {
     dot: {
-      backgroundColor: 'theme.primary'
+      backgroundColor: 'theme-primary'
     },
     line: {
-      backgroundColor: 'theme.primary'
+      backgroundColor: 'theme-primary'
     },
     number: {
-      backgroundColor: 'theme.primary',
-      color: 'color.white'
+      backgroundColor: 'theme-primary',
+      color: 'color-white'
     }
   };
   var NavigationButtonStyles = {
     width: '40px',
     height: '40px',
     borderRadius: '50%',
-    backgroundColor: 'color.white',
-    color: 'color.gray.800',
+    backgroundColor: 'color-white',
+    color: 'color-gray-800',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -3834,7 +3834,7 @@
     zIndex: 1,
     transition: 'background-color 0.3s ease',
     _hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     }
   };
   // Default styles for the compound component pattern
@@ -4202,17 +4202,17 @@
    */
   var CHART_COLORS = {
     // Primary colors for all charts
-    blue: 'color.blue.500',
-    green: 'color.green.500',
-    purple: 'color.purple.500',
-    orange: 'color.orange.500',
-    red: 'color.red.500',
+    blue: 'color-blue-500',
+    green: 'color-green-500',
+    purple: 'color-purple-500',
+    orange: 'color-orange-500',
+    red: 'color-red-500',
     // Additional colors if needed
-    teal: 'color.teal.500',
-    pink: 'color.pink.500',
-    indigo: 'color.indigo.500',
-    yellow: 'color.yellow.500',
-    cyan: 'color.cyan.500'
+    teal: 'color-teal-500',
+    pink: 'color-pink-500',
+    indigo: 'color-indigo-500',
+    yellow: 'color-yellow-500',
+    cyan: 'color-cyan-500'
   };
   // Default color array for consistent ordering
   var DEFAULT_CHART_COLORS = [CHART_COLORS.blue, CHART_COLORS.green, CHART_COLORS.purple, CHART_COLORS.orange, CHART_COLORS.red, CHART_COLORS.teal, CHART_COLORS.pink, CHART_COLORS.indigo, CHART_COLORS.yellow, CHART_COLORS.cyan];
@@ -4261,18 +4261,18 @@
   };
   // Default styles for chart grid
   var GridStyles = {
-    stroke: 'color.gray.200',
+    stroke: 'color-gray-200',
     strokeWidth: '1px'
   };
   // Default styles for chart axis
   var AxisStyles = {
-    stroke: 'color.gray.300',
+    stroke: 'color-gray-300',
     strokeWidth: '1px'
   };
   // Default styles for axis labels
   var AxisLabelStyles = {
     fontSize: '12px',
-    fill: 'color.gray.600'
+    fill: 'color-gray-600'
   };
   // Default styles for bar chart bars
   var BarStyles = {
@@ -4328,12 +4328,12 @@
   // Default styles for error overlay
   var ErrorOverlayStyles = /*#__PURE__*/Object.assign({}, OverlayBaseStyles, {
     backgroundColor: 'rgba(255, 235, 238, 0.9)',
-    color: 'color.red.700'
+    color: 'color-red-700'
   });
   // Default styles for no data overlay
   var NoDataOverlayStyles = /*#__PURE__*/Object.assign({}, OverlayBaseStyles, {
     backgroundColor: 'rgba(245, 245, 245, 0.8)',
-    color: 'color.gray.600'
+    color: 'color-gray-600'
   });
 
   var useChartState = _ref => {
@@ -4569,7 +4569,7 @@
           backgroundColor: fillColor
         })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           marginTop: "4px",
-          color: "color.gray.500",
+          color: "color-gray-500",
           fontSize: "12px"
         }, categoryLabel), /*#__PURE__*/React__default.createElement(appStudio.View, {
           marginTop: "8px",
@@ -4579,7 +4579,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Value"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, value.toLocaleString())), sharePercentage !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -4587,7 +4587,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Share"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, sharePercentage + "%"))), /*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -4595,7 +4595,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Category total"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, categoryTotal.toLocaleString()))));
@@ -4775,7 +4775,7 @@
             backgroundColor: lineColor
           })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
             marginTop: "4px",
-            color: "color.gray.500",
+            color: "color-gray-500",
             fontSize: "12px"
           }, categoryLabel), /*#__PURE__*/React__default.createElement(appStudio.View, {
             marginTop: "8px",
@@ -4785,7 +4785,7 @@
             display: "flex",
             justifyContent: "space-between"
           }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-            color: "color.gray.500"
+            color: "color-gray-500"
           }, "Value"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
             fontWeight: "medium"
           }, value.toLocaleString())), formattedDelta !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -4793,7 +4793,7 @@
             display: "flex",
             justifyContent: "space-between"
           }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-            color: "color.gray.500"
+            color: "color-gray-500"
           }, "Change"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
             fontWeight: "medium"
           }, formattedDelta))), sharePercentage !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -4801,7 +4801,7 @@
             display: "flex",
             justifyContent: "space-between"
           }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-            color: "color.gray.500"
+            color: "color-gray-500"
           }, "Share"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
             fontWeight: "medium"
           }, sharePercentage + "%"))), /*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -4809,7 +4809,7 @@
             display: "flex",
             justifyContent: "space-between"
           }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-            color: "color.gray.500"
+            color: "color-gray-500"
           }, "Category total"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
             fontWeight: "medium"
           }, categoryTotal.toLocaleString()))));
@@ -4984,7 +4984,7 @@
           backgroundColor: slice.color
         })), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           marginTop: "4px",
-          color: "color.gray.500",
+          color: "color-gray-500",
           fontSize: "12px"
         }, "Slice ", slice.index + 1, " of ", dataPoints.length), /*#__PURE__*/React__default.createElement(appStudio.View, {
           marginTop: "8px",
@@ -4994,7 +4994,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Value"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, slice.value.toLocaleString())), /*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -5002,7 +5002,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Share"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, slice.percentage)), /*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -5010,7 +5010,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Total"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, total.toLocaleString())), remainingShare !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -5018,7 +5018,7 @@
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Remaining"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
           fontWeight: "medium"
         }, remainingShare.toFixed(1) + "%")))));
@@ -5146,11 +5146,11 @@
       position: "fixed",
       left: position.left + "px",
       top: position.top + "px",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       padding: "12px 16px",
       borderRadius: "8px",
       boxShadow: "0px 12px 24px rgba(15, 23, 42, 0.18)",
-      border: "1px solid color.gray.200",
+      border: "1px solid color-gray-200",
       fontSize: "14px",
       display: "flex",
       flexDirection: "column",
@@ -5543,10 +5543,10 @@
     }, title && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontWeight: "bold",
       fontSize: 18,
-      color: "color.black"
+      color: "color-black"
     }, views == null ? void 0 : views.title), title)), description && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: 14,
-      color: "color.black"
+      color: "color-black"
     }, views == null ? void 0 : views.description), typeof description === 'string' ? description : description)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       gap: 12,
       justifyContent: "flex-end",
@@ -5595,8 +5595,8 @@
    *   onAccept={() => console.log('Cookies accepted')}
    *   onCustomize={() => openPreferencesModal()}
    *   views={{
-   *     container: { backgroundColor: 'color.blue.50' },
-   *     title: { color: 'color.blue.800' }
+   *     container: { backgroundColor: 'color-blue-50' },
+   *     title: { color: 'color-blue-800' }
    *   }}
    * />
    */
@@ -5700,27 +5700,27 @@
   };
   var ContextMenuVariants = {
     default: {
-      backgroundColor: 'color.white',
-      color: 'color.gray.800'
+      backgroundColor: 'color-white',
+      color: 'color-gray-800'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.800'
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-800'
     },
     outline: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800'
     }
   };
   var ContextMenuItemStates = {
     hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     active: {
-      backgroundColor: 'color.gray.200'
+      backgroundColor: 'color-gray-200'
     },
     disabled: {
       opacity: 0.5,
@@ -6037,7 +6037,7 @@
         "data-disabled": disabled ? '' : undefined
       }, ContextMenuSizes[size], {
         _hover: !disabled ? ContextMenuItemStates.hover : {},
-        backgroundColor: isHovered && !disabled ? 'color.gray.100' : 'transparent',
+        backgroundColor: isHovered && !disabled ? 'color-gray-100' : 'transparent',
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onClick: _handleClick
@@ -6087,7 +6087,7 @@
       props = _objectWithoutPropertiesLoose(_ref5, _excluded4$5);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "1px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       margin: "4px 0",
       role: "separator",
       "aria-orientation": "horizontal"
@@ -6101,7 +6101,7 @@
       props = _objectWithoutPropertiesLoose(_ref6, _excluded5$1);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "1px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       margin: "4px 0",
       role: "separator",
       "aria-orientation": "horizontal"
@@ -6309,7 +6309,7 @@
       marginVertical: 0,
       marginHorizontal: 0,
       // Color properties
-      color: "color.gray.500" // Muted color for helper text
+      color: "color-gray-500" // Muted color for helper text
       ,
 
       // Animation
@@ -6341,7 +6341,7 @@
       marginHorizontal: 0,
       fontWeight: "500" // Medium weight for better readability
       ,
-      color: "color.red.500",
+      color: "color-red-500",
       transition: "all 0.2s ease"
     }, views == null ? void 0 : views.error), error)));
   });
@@ -6401,19 +6401,19 @@
     outline: {
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      backgroundColor: 'color.white',
+      borderColor: 'color-gray-200',
+      backgroundColor: 'color-white',
       transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
       _hover: {
-        borderColor: 'color.gray.300'
+        borderColor: 'color-gray-300'
       },
       _focus: {
-        borderColor: 'theme.primary',
+        borderColor: 'theme-primary',
         outline: 'none',
         boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.2)'
       },
       _focusVisible: {
-        borderColor: 'theme.primary',
+        borderColor: 'theme-primary',
         outline: 'none',
         boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.2)'
       }
@@ -6422,19 +6422,19 @@
       borderWidth: 0,
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
-      borderBottomColor: 'color.gray.200',
+      borderBottomColor: 'color-gray-200',
       borderRadius: 0,
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       transition: 'border-color 0.2s ease',
       _hover: {
-        borderBottomColor: 'color.gray.300'
+        borderBottomColor: 'color-gray-300'
       },
       _focus: {
-        borderBottomColor: 'theme.primary',
+        borderBottomColor: 'theme-primary',
         outline: 'none'
       },
       _focusVisible: {
-        borderBottomColor: 'theme.primary',
+        borderBottomColor: 'theme-primary',
         outline: 'none'
       }
     },
@@ -6507,7 +6507,7 @@
     // Determine if the field is in an interactive state
     var isInteractive = (isHovered || isFocused) && !isDisabled;
     // Set the appropriate color based on state
-    var color = error ? 'color.red.500' : isInteractive ? 'theme.primary' : 'color.gray.300';
+    var color = error ? 'color-red-500' : isInteractive ? 'theme-primary' : 'color-gray-300';
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal
     // Layout properties
     , Object.assign({
@@ -6522,7 +6522,7 @@
       // Visual properties
       borderStyle: "solid",
       borderColor: color,
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       fontSize: appStudio.Typography.fontSizes[size],
       // State properties
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'text',
@@ -6642,7 +6642,7 @@
         children,
         size = 'md',
         error = false,
-        color = 'theme.primary',
+        color = 'theme-primary',
         views = {
           label: {}
         }
@@ -6662,7 +6662,7 @@
       ,
       whiteSpace: "nowrap",
       // Color properties
-      color: error ? 'color.red.500' : color,
+      color: error ? 'color-red-500' : color,
       // Animation
       transition: "all 0.2s ease"
     }, views['label'], props), children);
@@ -6748,7 +6748,7 @@
       onMouseLeave: handleHover,
       onClick: e => handleOptionClick(e, option.value),
       // Visual properties
-      backgroundColor: isHovered ? 'color.gray.100' : 'transparent',
+      backgroundColor: isHovered ? 'color-gray-100' : 'transparent',
       borderRadius: "4px" // Subtle rounded corners for items
       ,
 
@@ -6801,7 +6801,7 @@
       letterSpacing: '-0.01em',
       // Visual properties
       backgroundColor: 'transparent',
-      color: isDisabled ? 'color.gray.400' : 'color.gray.900',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-900',
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       // Animation
@@ -6879,7 +6879,7 @@
       width: "100%",
       display: "flex",
       flexDirection: "column",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       transition: "all 0.2s ease",
       margin: 0,
       style: {
@@ -6902,7 +6902,7 @@
       style: views['text'],
       option: option,
       callback: handleCallback,
-      backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+      backgroundColor: index === highlightedIndex ? 'color-gray-100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index)
     }, itemStates)))));
   };
@@ -6924,7 +6924,7 @@
       padding: 8,
       alignItems: "center",
       borderRadius: "6px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       fontSize: appStudio.Typography.fontSizes[size],
       onClick: event => event.stopPropagation(),
       transition: "all 0.2s ease"
@@ -7104,7 +7104,7 @@
       shadow: shadow,
       variant: variant,
       value: value,
-      color: 'theme.primary',
+      color: 'theme-primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -7115,7 +7115,7 @@
       position: "relative"
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views), label)), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
       id: id,
@@ -7154,7 +7154,7 @@
       views: Object.assign({}, views, {
         dropDown: {
           borderRadius: '6px',
-          border: '1px solid color.gray.200',
+          border: '1px solid color-gray-200',
           boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
           padding: '8px',
           maxHeight: '240px',
@@ -7309,16 +7309,16 @@
   var ColorSchemes = {
     // Default colors
     default: {
-      active: 'theme.primary',
-      inactive: 'color.gray.300',
+      active: 'theme-primary',
+      inactive: 'color-gray-300',
       knob: 'white',
-      disabled: 'color.gray.200'
+      disabled: 'color-gray-200'
     },
     // State-specific colors
     states: {
       hover: {
-        active: 'theme.primary',
-        inactive: 'color.gray.400',
+        active: 'theme-primary',
+        inactive: 'color-gray-400',
         activeOpacity: 0.9
       },
       focus: {
@@ -7420,7 +7420,7 @@
     }, props)), labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontWeight: "500" // Medium weight for better readability
       ,
-      color: isDisabled ? 'color.gray.400' : 'color.gray.700',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-700',
       transition: "all 0.2s ease"
     }, label)), /*#__PURE__*/React__default.createElement(appStudio.View
     // Layout properties
@@ -7463,7 +7463,7 @@
     }, inActiveChild))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontWeight: "500" // Medium weight for better readability
       ,
-      color: isDisabled ? 'color.gray.400' : 'color.gray.700',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-700',
       transition: "all 0.2s ease"
     }, label)));
   };
@@ -7548,7 +7548,7 @@
     }, label && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       fontSize: "10px",
       letterSpacing: "wider",
-      color: "color.black.500",
+      color: "color-black-500",
       fontWeight: "bold",
       marginBottom: 12,
       alignItems: "center",
@@ -7563,8 +7563,8 @@
       gap: 0
     }, options.map((option, index, arr) => {
       var isSelected = value === option.value;
-      var borderColor = getColor('color.gray.200');
-      var textColor = getColor('color.gray.500');
+      var borderColor = getColor('color-gray-200');
+      var textColor = getColor('color-gray-500');
       var backgroundColor = 'transparent';
       if (isSelected) {
         if (option.color) {
@@ -7579,10 +7579,10 @@
           backgroundColor = 'rgba(0,0,0,0.05)'; // Generic active background
         } else {
           // Default active style
-          var primary = getColor('theme.primary');
+          var primary = getColor('theme-primary');
           borderColor = primary;
           textColor = primary;
-          backgroundColor = 'color.gray.50';
+          backgroundColor = 'color-gray-50';
         }
         // Specific overrides based on user request "ComplexitySelector" style
         // If the values match 'High', 'Medium', 'Low' we can hardcode for *demo* fidelity if generic logic fails.
@@ -7595,8 +7595,8 @@
           backgroundColor = 'transparent';
         } else {
           // Default fallback
-          borderColor = getColor('theme.primary');
-          textColor = getColor('theme.primary');
+          borderColor = getColor('theme-primary');
+          textColor = getColor('theme-primary');
           backgroundColor = 'transparent';
         }
       }
@@ -7613,10 +7613,10 @@
       }, {
         fontWeight: isSelected ? 'bold' : 'normal',
         style: {
-          borderTop: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')),
-          borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color.gray.200')) : 'none',
+          borderTop: "1px solid " + (isSelected ? borderColor : getColor('color-gray-200')),
+          borderBottom: "1px solid " + (isSelected ? borderColor : getColor('color-gray-200')),
+          borderLeft: "1px solid " + (isSelected ? borderColor : getColor('color-gray-200')),
+          borderRight: index === arr.length - 1 || isSelected ? "1px solid " + (isSelected ? borderColor : getColor('color-gray-200')) : 'none',
           backgroundColor: backgroundColor,
           color: textColor,
           borderRadius: index === 0 ? '6px 0 0 6px' : index === arr.length - 1 ? '0 6px 6px 0' : '0',
@@ -7747,7 +7747,7 @@
       letterSpacing: '-0.01em',
       // Visual properties
       backgroundColor: 'transparent',
-      color: isDisabled ? 'color.gray.400' : 'color.gray.900',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-900',
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'text',
       // Animation
@@ -7784,7 +7784,7 @@
       shadow: shadow,
       variant: variant,
       value: value,
-      color: 'theme.primary',
+      color: 'theme-primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -7794,7 +7794,7 @@
       onMouseLeave: handleHover
     }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "textarea",
@@ -7914,7 +7914,7 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700', {
+    var IconColor = getColor('color-blueGray-700', {
       themeMode: elementMode ? elementMode : themeMode
     });
     var showLabel = !!(isFocused && label);
@@ -7941,7 +7941,7 @@
       letterSpacing: '-0.01em',
       // Visual properties
       backgroundColor: 'transparent',
-      color: isDisabled ? 'color.gray.400' : 'color.gray.900',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-900',
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'text',
       // Animation
@@ -7993,7 +7993,7 @@
       shadow: shadow,
       variant: variant,
       value: value,
-      color: 'theme.primary',
+      color: 'theme-primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -8003,7 +8003,7 @@
       onMouseLeave: handleHover
     }, left, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views), label)), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
       id: id,
@@ -8100,27 +8100,27 @@
    */
   var VariantStyles = {
     selected: {
-      backgroundColor: 'theme.primary',
-      borderColor: 'theme.primary',
+      backgroundColor: 'theme-primary',
+      borderColor: 'theme-primary',
       borderWidth: '2px',
       borderStyle: 'solid',
-      color: 'color.white',
+      color: 'color-white',
       transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease'
     },
     unselected: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '2px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
-      color: 'color.black',
+      borderColor: 'color-gray-300',
+      color: 'color-black',
       transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease'
     },
     indeterminate: {
-      backgroundColor: 'theme.primary',
-      borderColor: 'theme.primary',
+      backgroundColor: 'theme-primary',
+      borderColor: 'theme-primary',
       borderWidth: '2px',
       borderStyle: 'solid',
-      color: 'color.white',
+      color: 'color-white',
       transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease'
     }
   };
@@ -8133,8 +8133,8 @@
         opacity: 0.9
       },
       unselected: {
-        borderColor: 'color.gray.400',
-        backgroundColor: 'color.gray.50'
+        borderColor: 'color-gray-400',
+        backgroundColor: 'color-gray-50'
       },
       indeterminate: {
         opacity: 0.9
@@ -8156,34 +8156,34 @@
     },
     disabled: {
       selected: {
-        backgroundColor: 'color.gray.300',
-        borderColor: 'color.gray.300',
+        backgroundColor: 'color-gray-300',
+        borderColor: 'color-gray-300',
         opacity: 0.5,
         cursor: 'not-allowed'
       },
       unselected: {
-        borderColor: 'color.gray.300',
+        borderColor: 'color-gray-300',
         opacity: 0.5,
         cursor: 'not-allowed'
       },
       indeterminate: {
-        backgroundColor: 'color.gray.300',
-        borderColor: 'color.gray.300',
+        backgroundColor: 'color-gray-300',
+        borderColor: 'color-gray-300',
         opacity: 0.5,
         cursor: 'not-allowed'
       }
     },
     error: {
       selected: {
-        backgroundColor: 'color.red.500',
-        borderColor: 'color.red.500'
+        backgroundColor: 'color-red-500',
+        borderColor: 'color-red-500'
       },
       unselected: {
-        borderColor: 'color.red.500'
+        borderColor: 'color-red-500'
       },
       indeterminate: {
-        backgroundColor: 'color.red.500',
-        borderColor: 'color.red.500'
+        backgroundColor: 'color-red-500',
+        borderColor: 'color-red-500'
       }
     }
   };
@@ -8245,7 +8245,7 @@
         width: 'fit-content',
         // Typography properties
         // Visual properties
-        color: error ? 'color.red.600' : isDisabled ? 'color.gray.400' : 'color.gray.700',
+        color: error ? 'color-red-600' : isDisabled ? 'color-gray-400' : 'color-gray-700',
         // State properties
         cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer',
         opacity: isDisabled ? 0.6 : 1,
@@ -8288,7 +8288,7 @@
       fontWeight: "500" // Medium weight for better readability
     }, views == null ? void 0 : views.label), label))), infoText && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       marginLeft: labelPosition === 'left' ? 0 : 36,
-      color: "color.gray.500",
+      color: "color-gray-500",
       size: "sm",
       fontWeight: "400" // Regular weight
       ,
@@ -8297,7 +8297,7 @@
       size: "xs",
       marginTop: 4,
       marginHorizontal: 0,
-      color: "color.red.500",
+      color: "color-red-500",
       fontWeight: "500" // Medium weight for better readability
       ,
       transition: "all 0.2s ease"
@@ -8461,10 +8461,10 @@
       justifyContent: 'space-between',
       cursor: 'pointer',
       transition: 'all 0.2s ease',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
+      borderColor: 'color-gray-300',
       padding: '8px 12px'
     },
     dropdown: {
@@ -8473,11 +8473,11 @@
       left: 0,
       right: 0,
       zIndex: 1000,
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderRadius: '8px',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
       padding: '16px',
       minWidth: '280px'
@@ -8545,14 +8545,14 @@
    */
   var Variants = {
     default: {
-      backgroundColor: 'color.white',
-      borderColor: 'color.gray.300',
+      backgroundColor: 'color-white',
+      borderColor: 'color-gray-300',
       borderWidth: '1px',
       borderStyle: 'solid'
     },
     outline: {
       backgroundColor: 'transparent',
-      borderColor: 'color.gray.300',
+      borderColor: 'color-gray-300',
       borderWidth: '1px',
       borderStyle: 'solid'
     },
@@ -8569,105 +8569,105 @@
   // Primary colors
   {
     name: 'Red 500',
-    value: 'color.red.500'
+    value: 'color-red-500'
   }, {
     name: 'Orange 500',
-    value: 'color.orange.500'
+    value: 'color-orange-500'
   }, {
     name: 'Yellow 500',
-    value: 'color.yellow.500'
+    value: 'color-yellow-500'
   }, {
     name: 'Green 500',
-    value: 'color.green.500'
+    value: 'color-green-500'
   }, {
     name: 'Blue 500',
-    value: 'color.blue.500'
+    value: 'color-blue-500'
   }, {
     name: 'Indigo 500',
-    value: 'color.indigo.500'
+    value: 'color-indigo-500'
   }, {
     name: 'Purple 500',
-    value: 'color.purple.500'
+    value: 'color-purple-500'
   }, {
     name: 'Pink 500',
-    value: 'color.pink.500'
+    value: 'color-pink-500'
   },
   // Light variants
   {
     name: 'Red 300',
-    value: 'color.red.300'
+    value: 'color-red-300'
   }, {
     name: 'Orange 300',
-    value: 'color.orange.300'
+    value: 'color-orange-300'
   }, {
     name: 'Yellow 300',
-    value: 'color.yellow.300'
+    value: 'color-yellow-300'
   }, {
     name: 'Green 300',
-    value: 'color.green.300'
+    value: 'color-green-300'
   }, {
     name: 'Blue 300',
-    value: 'color.blue.300'
+    value: 'color-blue-300'
   }, {
     name: 'Indigo 300',
-    value: 'color.indigo.300'
+    value: 'color-indigo-300'
   }, {
     name: 'Purple 300',
-    value: 'color.purple.300'
+    value: 'color-purple-300'
   }, {
     name: 'Pink 300',
-    value: 'color.pink.300'
+    value: 'color-pink-300'
   },
   // Dark variants
   {
     name: 'Red 700',
-    value: 'color.red.700'
+    value: 'color-red-700'
   }, {
     name: 'Orange 700',
-    value: 'color.orange.700'
+    value: 'color-orange-700'
   }, {
     name: 'Yellow 700',
-    value: 'color.yellow.700'
+    value: 'color-yellow-700'
   }, {
     name: 'Green 700',
-    value: 'color.green.700'
+    value: 'color-green-700'
   }, {
     name: 'Blue 700',
-    value: 'color.blue.700'
+    value: 'color-blue-700'
   }, {
     name: 'Indigo 700',
-    value: 'color.indigo.700'
+    value: 'color-indigo-700'
   }, {
     name: 'Purple 700',
-    value: 'color.purple.700'
+    value: 'color-purple-700'
   }, {
     name: 'Pink 700',
-    value: 'color.pink.700'
+    value: 'color-pink-700'
   },
   // Grays
   {
     name: 'Gray 100',
-    value: 'color.gray.100'
+    value: 'color-gray-100'
   }, {
     name: 'Gray 300',
-    value: 'color.gray.300'
+    value: 'color-gray-300'
   }, {
     name: 'Gray 500',
-    value: 'color.gray.500'
+    value: 'color-gray-500'
   }, {
     name: 'Gray 700',
-    value: 'color.gray.700'
+    value: 'color-gray-700'
   }, {
     name: 'Gray 900',
-    value: 'color.gray.900'
+    value: 'color-gray-900'
   },
   // Special colors
   {
     name: 'White',
-    value: 'color.white'
+    value: 'color-white'
   }, {
     name: 'Black',
-    value: 'color.black'
+    value: 'color-black'
   }, {
     name: 'Transparent',
     value: 'transparent'
@@ -8721,21 +8721,21 @@
     // Combine styles
     var containerStyles = Object.assign({}, DefaultColorInputStyles.container, views == null ? void 0 : views.container);
     var triggerStyles = Object.assign({}, DefaultColorInputStyles.trigger, Sizes$1[size], Shapes$1[shape], Variants[variant], error && {
-      borderColor: 'color.red.500'
+      borderColor: 'color-red-500'
     }, isDisabled && {
       opacity: 0.6,
       cursor: 'not-allowed'
     }, isFocused && {
-      borderColor: 'color.blue.500',
+      borderColor: 'color-blue-500',
       boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
     }, isHovered && !isDisabled && {
-      borderColor: 'color.gray.400'
+      borderColor: 'color-gray-400'
     }, views == null ? void 0 : views.trigger, shadow && shadow);
     var dropdownStyles = Object.assign({}, DefaultColorInputStyles.dropdown, views == null ? void 0 : views.dropdown);
     var colorGridStyles = Object.assign({}, DefaultColorInputStyles.colorGrid, views == null ? void 0 : views.colorGrid);
     var recentColorsStyles = Object.assign({}, DefaultColorInputStyles.recentColors, views == null ? void 0 : views.recentColors);
     // Get display color for the selected color swatch
-    var displayColor = selectedColor || 'color.gray.200';
+    var displayColor = selectedColor || 'color-gray-200';
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React__default.createElement(Label, {
       htmlFor: id,
       size: size,
@@ -8763,10 +8763,10 @@
       backgroundColor: displayColor,
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.300"
+      borderColor: "color-gray-300"
     }), !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       widthHeight: 16,
-      color: "color.gray.500",
+      color: "color-gray-500",
       orientation: isOpen ? 'up' : 'down'
     }))), isOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef
@@ -8778,14 +8778,14 @@
       backgroundColor: colorOption.value,
       borderWidth: "2px",
       borderStyle: "solid",
-      borderColor: selectedColor === colorOption.value ? 'color.blue.500' : 'transparent',
+      borderColor: selectedColor === colorOption.value ? 'color-blue-500' : 'transparent',
       cursor: "pointer",
       transition: "all 0.2s ease",
       onClick: () => handleColorSelect(colorOption.value),
       title: colorOption.name,
       _hover: {
         transform: 'scale(1.1)',
-        borderColor: 'color.gray.400'
+        borderColor: 'color-gray-400'
       }
     }, views == null ? void 0 : views.colorSwatch))))), showRecentColors && recentColors.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 8,
@@ -8793,7 +8793,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
       fontWeight: "500",
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, "Recent Colors"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       gap: 4,
       flexWrap: "wrap"
@@ -8805,14 +8805,14 @@
       backgroundColor: color,
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: selectedColor === color ? 'color.blue.500' : 'color.gray.300',
+      borderColor: selectedColor === color ? 'color-blue-500' : 'color-gray-300',
       cursor: "pointer",
       transition: "all 0.2s ease",
       onClick: () => handleColorSelect(color),
       title: color,
       _hover: {
         transform: 'scale(1.1)',
-        borderColor: 'color.gray.400'
+        borderColor: 'color-gray-400'
       }
     })))))), showCustomInput && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 8,
@@ -8820,7 +8820,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
       fontWeight: "500",
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, "Custom Color"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8
     }, /*#__PURE__*/React__default.createElement(TextField, {
@@ -8834,24 +8834,24 @@
       views: views == null ? void 0 : views.customInput
     }), /*#__PURE__*/React__default.createElement(appStudio.View, {
       padding: "8px 12px",
-      backgroundColor: "color.blue.500",
+      backgroundColor: "color-blue-500",
       borderRadius: "4px",
       cursor: "pointer",
       onClick: handleCustomColorSubmit,
       _hover: {
-        backgroundColor: 'color.blue.600'
+        backgroundColor: 'color-blue-600'
       }
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.white",
+      color: "color-white",
       fontSize: "12px",
       fontWeight: "500"
     }, "Add"))))))), helperText && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: "12px",
-      color: error ? 'color.red.500' : 'color.gray.600',
+      color: error ? 'color-red-500' : 'color-gray-600',
       marginTop: "4px"
     }, views == null ? void 0 : views.helperText), helperText)), error && typeof error === 'string' && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: "12px",
-      color: "color.red.500",
+      color: "color-red-500",
       marginTop: "4px"
     }, views == null ? void 0 : views.error), error)));
   };
@@ -10421,7 +10421,7 @@
       borderRadius: 4,
       position: "absolute",
       flexDirection: "column",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
     }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
       key: option.code,
@@ -10471,7 +10471,7 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700', {
+    var IconColor = getColor('color-blueGray-700', {
       themeMode: elementMode ? elementMode : themeMode
     });
     var handleFocus = () => setIsFocused(true);
@@ -10512,7 +10512,7 @@
       },
       fontSize: appStudio.Typography.fontSizes[size],
       backgroundColor: 'transparent',
-      color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+      color: isDisabled ? 'color-trueGray-600' : 'color-blueGray-700',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
     }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
@@ -10529,17 +10529,17 @@
       shadow: shadow,
       variant: variant,
       value: value,
-      color: 'theme.primary',
+      color: 'theme-primary',
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
       isFocused: isFocused,
       showLabel: showLabel,
       _hover: !isDisabled && !error ? {
-        borderColor: 'theme.primary'
+        borderColor: 'theme-primary'
       } : undefined
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views), label)), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
       id: id,
@@ -10656,7 +10656,7 @@
       },
       fontSize: appStudio.Typography.fontSizes[size],
       backgroundColor: 'transparent',
-      color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+      color: isDisabled ? 'color-trueGray-600' : 'color-blueGray-700',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
     }, views['field']);
     return /*#__PURE__*/React__default.createElement(FieldContainer, {
@@ -10670,7 +10670,7 @@
       shape: shape,
       views: views,
       shadow: shadow,
-      color: 'theme.primary',
+      color: 'theme-primary',
       variant: variant,
       value: date,
       isHovered: isHovered,
@@ -10682,7 +10682,7 @@
       onMouseLeave: handleHover
     }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views), label)), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
       id: id,
@@ -10910,7 +10910,7 @@
     }, views == null ? void 0 : views.labelContainer), left, selectedItem.icon && selectedItem.label !== placeholder && (/*#__PURE__*/React__default.createElement(appStudio.View, null, selectedItem.icon)), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       weight: "medium",
       flexGrow: 1,
-      color: selectedItem.label === placeholder ? 'color.gray.500' : 'color.gray.800',
+      color: selectedItem.label === placeholder ? 'color-gray-500' : 'color-gray-800',
       style: {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -10922,11 +10922,11 @@
     }, right, /*#__PURE__*/React__default.createElement(ChevronIcon, {
       widthHeight: 16,
       orientation: isDropdownVisible ? 'up' : 'down',
-      color: "color.gray.500"
+      color: "color-gray-500"
     })))), isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef,
       id: "combobox-dropdown",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       boxShadow: "rgba(0, 0, 0, 0.16) 0px 4px 16px",
       overflowY: "auto",
       borderRadius: "8px",
@@ -10947,7 +10947,7 @@
       isClearable: false,
       left: /*#__PURE__*/React__default.createElement(SearchIcon, {
         widthHeight: 16,
-        color: "color.gray.400"
+        color: "color-gray-400"
       }),
       views: {
         container: Object.assign({
@@ -10967,19 +10967,19 @@
       padding: "8px 12px",
       cursor: "pointer",
       borderRadius: 4,
-      backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+      backgroundColor: index === highlightedIndex ? 'color-gray-100' : 'transparent',
       onMouseEnter: () => setHighlightedIndex(index),
       onClick: () => handleSelect(item),
       transition: "background-color 0.2s"
     }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.gray.800"
+      color: "color-gray-800"
     }, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && (/*#__PURE__*/React__default.createElement(TickIcon, {
       widthHeight: 16,
-      color: "theme.primary"
+      color: "theme-primary"
     })))))))), filteredItems.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
       padding: "12px"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.gray.500",
+      color: "color-gray-500",
       align: "center"
     }, "No items found")))))));
   };
@@ -11259,30 +11259,30 @@
       alignItems: "center",
       gap: 6,
       padding: chipSize.padding,
-      backgroundColor: "color.gray.100.100",
+      backgroundColor: "color-gray-100-100",
       borderRadius: "16px",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.100",
+      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 ? {
-        backgroundColor: 'color.gray.100.200',
-        borderColor: 'color.gray.200',
+        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.100' : 'theme.primary',
+      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.100' : 'transparent',
+      backgroundColor: isRemoveHovered ? 'color-red-100' : 'transparent',
       opacity: isRemoveHovered ? 1 : 0.7,
       onMouseEnter: () => setIsRemoveHovered(true),
       onMouseLeave: () => setIsRemoveHovered(false),
@@ -11291,11 +11291,11 @@
         onRemove();
       },
       _hover: {
-        backgroundColor: 'color.red.50'
+        backgroundColor: 'color-red-50'
       }
     }, views == null ? void 0 : views.tagRemove), /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: chipSize.iconSize,
-      color: isRemoveHovered ? 'color.red.500' : 'color.gray.400'
+      color: isRemoveHovered ? 'color-red-500' : 'color-gray-400'
     }))));
   };
   /**
@@ -11350,7 +11350,7 @@
       outline: 'none',
       backgroundColor: 'transparent',
       fontSize: appStudio.Typography.fontSizes[size],
-      color: isDisabled ? 'color.gray.400' : 'color.gray.800',
+      color: isDisabled ? 'color-gray-400' : 'color-gray-800',
       flex: 1,
       minWidth: '120px'
     }, views == null ? void 0 : views.input);
@@ -11411,7 +11411,7 @@
       autoComplete: "off"
     }, inputStyles))), isMaxReached && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: appStudio.Typography.fontSizes[size],
-      color: "color.gray.500",
+      color: "color-gray-500",
       fontStyle: "italic"
     }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
   };
@@ -11860,7 +11860,7 @@
         views: views,
         variant: variant,
         value: slot.char || '',
-        color: 'theme.primary',
+        color: 'theme-primary',
         isHovered: isHovered,
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
@@ -11880,13 +11880,13 @@
       }, views.text), type === 'password' ? '•' : slot.char)) : slot.placeholderChar ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         textAlign: "center",
         fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
-        color: "color.gray.400",
+        color: "color-gray-400",
         opacity: 0.5
       }, views.text), slot.placeholderChar)) : null, slot.hasFakeCaret && (/*#__PURE__*/React__default.createElement(appStudio.View, {
         position: "absolute",
         width: "2px",
         height: "60%",
-        backgroundColor: "theme.primary",
+        backgroundColor: "theme-primary",
         animation: "blink 1s step-start infinite",
         style: {
           animationName: 'blink',
@@ -11923,7 +11923,7 @@
       views: views
     }, props), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
-      color: 'theme.primary',
+      color: 'theme-primary',
       error: error
     }, views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.View, {
       ref: containerRef,
@@ -12421,10 +12421,10 @@
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderRadius: '12px',
       border: '1px solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       overflow: 'hidden',
       fontFamily: 'Inter, system-ui, sans-serif',
       position: 'relative'
@@ -12432,14 +12432,14 @@
     header: {
       padding: '16px',
       borderBottom: '1px solid',
-      borderBottomColor: 'color.gray.200',
-      backgroundColor: 'color.gray.50',
+      borderBottomColor: 'color-gray-200',
+      backgroundColor: 'color-gray-50',
       flexShrink: 0
     },
     messageList: {
       flex: 1,
       overflowY: 'auto',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       minHeight: '300px',
       maxHeight: '600px'
     },
@@ -12453,15 +12453,15 @@
     inputArea: {
       padding: '16px',
       borderTop: '1px solid',
-      borderTopColor: 'color.gray.200',
-      backgroundColor: 'color.gray.50',
+      borderTopColor: 'color-gray-200',
+      backgroundColor: 'color-gray-50',
       flexShrink: 0
     },
     attachmentArea: {
       padding: '12px 16px',
       borderTop: '1px solid',
-      borderTopColor: 'color.gray.200',
-      backgroundColor: 'color.gray.100',
+      borderTopColor: 'color-gray-200',
+      backgroundColor: 'color-gray-100',
       flexShrink: 0
     },
     message: {
@@ -12471,29 +12471,29 @@
       wordBreak: 'break-word'
     },
     userMessage: {
-      backgroundColor: 'color.blue.500',
+      backgroundColor: 'color-blue-500',
       color: 'white',
       alignSelf: 'flex-end',
       marginLeft: 'auto'
     },
     botMessage: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.900',
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-900',
       alignSelf: 'flex-start',
       marginRight: 'auto'
     },
     thoughtMessage: {
-      backgroundColor: 'color.yellow.50',
-      color: 'color.yellow.800',
+      backgroundColor: 'color-yellow-50',
+      color: 'color-yellow-800',
       border: '1px solid',
-      borderColor: 'color.yellow.200',
+      borderColor: 'color-yellow-200',
       fontStyle: 'italic'
     },
     loadingMessage: {
-      backgroundColor: 'color.gray.50',
-      color: 'color.gray.600',
+      backgroundColor: 'color-gray-50',
+      color: 'color-gray-600',
       border: '1px dashed',
-      borderColor: 'color.gray.300'
+      borderColor: 'color-gray-300'
     },
     messageHeader: {
       marginBottom: '4px'
@@ -12506,14 +12506,14 @@
     },
     timestamp: {
       fontSize: '12px',
-      color: 'color.gray.500',
+      color: 'color-gray-500',
       marginTop: '4px'
     },
     avatar: {
       width: '32px',
       height: '32px',
       borderRadius: '50%',
-      backgroundColor: 'color.gray.300',
+      backgroundColor: 'color-gray-300',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -12523,20 +12523,20 @@
       flexShrink: 0
     },
     userAvatar: {
-      backgroundColor: 'color.blue.500'
+      backgroundColor: 'color-blue-500'
     },
     botAvatar: {
-      backgroundColor: 'color.green.500'
+      backgroundColor: 'color-green-500'
     },
     attachmentPreview: {
       position: 'relative',
       display: 'inline-block',
       width: '60px',
       height: '60px',
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       borderRadius: '8px',
       border: '1px solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       overflow: 'hidden',
       cursor: 'pointer'
     },
@@ -12547,7 +12547,7 @@
       width: '20px',
       height: '20px',
       borderRadius: '50%',
-      backgroundColor: 'color.black.900',
+      backgroundColor: 'color-black-900',
       color: 'white',
       border: 'none',
       cursor: 'pointer',
@@ -12562,7 +12562,7 @@
       alignItems: 'center',
       gap: '8px',
       padding: '12px',
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       borderRadius: '8px',
       maxWidth: '80px',
       alignSelf: 'flex-start'
@@ -12571,27 +12571,27 @@
       width: '6px',
       height: '6px',
       borderRadius: '50%',
-      backgroundColor: 'color.gray.500'
+      backgroundColor: 'color-gray-500'
     },
     functionCall: {
-      backgroundColor: 'color.purple.50',
+      backgroundColor: 'color-purple-50',
       border: '1px solid',
-      borderColor: 'color.purple.200',
+      borderColor: 'color-purple-200',
       borderRadius: '8px',
       padding: '12px',
       marginTop: '8px'
     },
     functionResponse: {
-      backgroundColor: 'color.green.50',
+      backgroundColor: 'color-green-50',
       border: '1px solid',
-      borderColor: 'color.green.200',
+      borderColor: 'color-green-200',
       borderRadius: '8px',
       padding: '12px',
       marginTop: '8px'
     },
     codeBlock: {
-      backgroundColor: 'color.gray.900',
-      color: 'color.gray.100',
+      backgroundColor: 'color-gray-900',
+      color: 'color-gray-100',
       borderRadius: '8px',
       padding: '12px',
       fontFamily: 'Monaco, Consolas, monospace',
@@ -12604,13 +12604,13 @@
       borderRadius: '8px',
       overflow: 'hidden',
       border: '1px solid',
-      borderColor: 'color.gray.200'
+      borderColor: 'color-gray-200'
     },
     errorMessage: {
-      backgroundColor: 'color.red.50',
-      color: 'color.red.800',
+      backgroundColor: 'color-red-50',
+      color: 'color-red-800',
       border: '1px solid',
-      borderColor: 'color.red.200',
+      borderColor: 'color-red-200',
       borderRadius: '8px',
       padding: '12px',
       margin: '8px 16px'
@@ -12630,8 +12630,8 @@
     runProgress: {
       padding: '12px 16px',
       borderBottom: '1px solid',
-      borderBottomColor: 'color.gray.200',
-      backgroundColor: 'color.gray.50'
+      borderBottomColor: 'color-gray-200',
+      backgroundColor: 'color-gray-50'
     }
   };
   /**
@@ -12642,7 +12642,7 @@
       width: '100%',
       maxWidth: '100%',
       borderRadius: '12px',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       transition: 'all 0.2s ease',
       media: {
         mobile: {
@@ -12654,10 +12654,10 @@
       width: '100%',
       padding: '12px',
       borderRadius: '12px',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       media: {
         mobile: {
           padding: '10px',
@@ -12672,8 +12672,8 @@
       padding: '8px 12px',
       fontSize: '14px',
       lineHeight: '15px',
-      color: 'color.gray.900',
-      backgroundColor: 'color.white',
+      color: 'color-gray-900',
+      backgroundColor: 'color-white',
       border: 'none',
       outline: 'none',
       resize: 'none',
@@ -12698,22 +12698,22 @@
       gap: '6px',
       padding: '4px 8px',
       borderRadius: '6px',
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     attachmentName: {
       fontSize: '12px',
       fontWeight: '500',
-      color: 'color.gray.700'
+      color: 'color-gray-700'
     },
     attachmentSize: {
       fontSize: '10px',
-      color: 'color.gray.500'
+      color: 'color-gray-500'
     },
     attachmentRemove: {
       padding: '2px',
       borderRadius: '50%',
       cursor: 'pointer',
-      color: 'color.gray.500',
+      color: 'color-gray-500',
       backgroundColor: 'transparent',
       transition: 'all 0.2s ease'
     },
@@ -12722,8 +12722,8 @@
       minWidth: '36px',
       padding: '0 12px',
       borderRadius: '8px',
-      backgroundColor: 'theme.primary',
-      color: 'color.white',
+      backgroundColor: 'theme-primary',
+      color: 'color-white',
       transition: 'all 0.2s ease',
       media: {
         mobile: {
@@ -12738,7 +12738,7 @@
       padding: '0 12px',
       borderRadius: '8px',
       backgroundColor: 'transparent',
-      color: 'color.gray.500',
+      color: 'color-gray-500',
       transition: 'all 0.2s ease',
       media: {
         mobile: {
@@ -12752,7 +12752,7 @@
       padding: '0 12px',
       borderRadius: '8px',
       backgroundColor: 'transparent',
-      color: 'color.gray.500',
+      color: 'color-gray-500',
       transition: 'all 0.2s ease'
     },
     loadingIndicator: {
@@ -12807,16 +12807,16 @@
    */
   var Variants$1 = {
     default: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200'
+      borderColor: 'color-gray-200'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300'
+      borderColor: 'color-gray-300'
     },
     none: {
       backgroundColor: 'transparent',
@@ -13162,7 +13162,7 @@
         gap: "6px",
         padding: "4px 8px",
         borderRadius: "6px",
-        backgroundColor: "color.gray.100",
+        backgroundColor: "color-gray-100",
         animate: {
           from: {
             opacity: 0,
@@ -13192,17 +13192,17 @@
       })), isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
         width: "60px",
         height: "60px",
-        backgroundColor: "color.gray.200"
+        backgroundColor: "color-gray-200"
       }, /*#__PURE__*/React__default.createElement(AudioIcon, {
         widthHeight: 24,
-        color: "color.black"
+        color: "color-black"
       }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
         width: "60px",
         height: "60px",
-        backgroundColor: "color.gray.200"
+        backgroundColor: "color-gray-200"
       }, /*#__PURE__*/React__default.createElement(FileIcon, {
         widthHeight: 24,
-        color: "color.black"
+        color: "color-black"
       }))), onRemove && (/*#__PURE__*/React__default.createElement(appStudio.Button, Object.assign({}, DefaultAgentChatStyles.attachmentRemove, {
         onClick: e => {
           e.stopPropagation();
@@ -13500,7 +13500,7 @@
       position: "absolute",
       top: "8px",
       left: "8px",
-      color: "color.gray.400",
+      color: "color-gray-400",
       pointerEvents: "none",
       fontSize: "14px",
       zIndex: 1
@@ -13523,16 +13523,16 @@
       whiteSpace: "pre-wrap",
       wordBreak: "break-word",
       fontSize: "14px",
-      color: "color.gray.900",
+      color: "color-gray-900",
       backgroundColor: "transparent"
     }, views == null ? void 0 : views.input))), showMentions && filteredMentions.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "fixed",
       left: mentionPosition.x,
       top: mentionPosition.y,
       width: ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.offsetWidth) || 300,
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       border: "2px solid",
-      borderColor: "color.blue.300",
+      borderColor: "color-blue-300",
       borderRadius: "8px",
       boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)",
       zIndex: 9999,
@@ -13546,7 +13546,7 @@
       type: "button",
       width: "100%",
       padding: "12px 16px",
-      backgroundColor: index === selectedMentionIndex ? 'color.blue.50' : 'transparent',
+      backgroundColor: index === selectedMentionIndex ? 'color-blue-50' : 'transparent',
       border: "none",
       cursor: "pointer",
       textAlign: "left",
@@ -13554,17 +13554,17 @@
       onClick: () => handleMentionSelect(mention),
       onMouseEnter: () => setSelectedMentionIndex(index),
       _hover: {
-        backgroundColor: 'color.blue.50'
+        backgroundColor: 'color-blue-50'
       }
     }, views == null ? void 0 : views.mentionItem), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 4
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "14px",
-      color: "color.gray.900",
+      color: "color-gray-900",
       fontWeight: "medium"
     }, mentionTrigger, mention.name), mention.description && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, mention.description)))))),  (/*#__PURE__*/React__default.createElement("div", {
       style: {
         fontSize: '8px',
@@ -13576,9 +13576,9 @@
       left: suggestionPosition.x,
       top: suggestionPosition.y,
       width: ((_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) || 300,
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       border: "2px solid",
-      borderColor: "color.green.300",
+      borderColor: "color-green-300",
       borderRadius: "8px",
       boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)",
       zIndex: 9998,
@@ -13592,7 +13592,7 @@
       type: "button",
       width: "100%",
       padding: "12px 16px",
-      backgroundColor: index === selectedSuggestionIndex ? 'color.blue.50' : 'transparent',
+      backgroundColor: index === selectedSuggestionIndex ? 'color-blue-50' : 'transparent',
       border: "none",
       cursor: "pointer",
       textAlign: "left",
@@ -13600,17 +13600,17 @@
       onClick: () => handleSuggestionSelect(suggestion),
       onMouseEnter: () => setSelectedSuggestionIndex(index),
       _hover: {
-        backgroundColor: 'color.blue.50'
+        backgroundColor: 'color-blue-50'
       }
     }, views == null ? void 0 : views.suggestionItem), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
       gap: 4
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "14px",
-      color: "color.gray.900",
+      color: "color-gray-900",
       fontWeight: "medium"
     }, suggestion.text), suggestion.description && (/*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, suggestion.description)))))),  (/*#__PURE__*/React__default.createElement("div", {
       style: {
         fontSize: '8px',
@@ -13644,17 +13644,17 @@
       type: "button",
       padding: "8px 12px",
       borderRadius: "4px",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       border: "none",
       cursor: "pointer",
       transition: "all 0.2s ease",
       onClick: () => onSelect(example),
       _hover: {
-        backgroundColor: 'color.gray.200'
+        backgroundColor: 'color-gray-200'
       }
     }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: "14px",
-      color: "color.gray.700"
+      color: "color-gray-700"
     }, views == null ? void 0 : views.text), example.text)))));
   };
 
@@ -13701,13 +13701,13 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: recording ? 'theme.error' : 'color.gray.100',
-      color: recording ? 'color.white' : 'color.gray.600',
+      backgroundColor: recording ? 'theme-error' : 'color-gray-100',
+      color: recording ? 'color-white' : 'color-gray-600',
       borderRadius: "50%",
       border: "none",
       cursor: "pointer",
       _hover: {
-        backgroundColor: recording ? 'color.red.600' : 'color.gray.200'
+        backgroundColor: recording ? 'color-red-600' : 'color-gray-200'
       }
     }, views.button), recording ? (/*#__PURE__*/React__default.createElement(StopIcon, {
       widthHeight: 16,
@@ -13845,7 +13845,7 @@
         animation: 'spin 1s linear infinite'
       }
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.gray.500"
+      color: "color-gray-500"
     }, loadingText))), /*#__PURE__*/React__default.createElement(appStudio.View, {
       position: "relative",
       width: "100%",
@@ -13860,7 +13860,7 @@
     }, contentStyles, containerStyles, {
       paddingHorizontal: 16,
       paddingVertical: 10,
-      backgroundColor: isDraggingOver ? 'color.blue.50' : undefined
+      backgroundColor: isDraggingOver ? 'color-blue-50' : undefined
     }), /*#__PURE__*/React__default.createElement(AttachmentGroup, {
       files: uploadedFiles,
       sandboxId: sandboxId,
@@ -13921,10 +13921,10 @@
           // borderRadius: '8px',
           // backgroundColor: 'transparent',
           // border: '1px solid',
-          // borderColor: 'color.gray.300',
+          // borderColor: 'color-gray-300',
           cursor: 'pointer',
           _hover: {
-            backgroundColor: 'color.gray.100'
+            backgroundColor: 'color-gray-100'
           }
         }, views == null ? void 0 : views.fileButton)
       },
@@ -13938,7 +13938,7 @@
       },
       textProps: {
         fontSize: '14px',
-        color: 'color.gray.600'
+        color: 'color-gray-600'
       },
       validateFile: file => {
         if (file.size > 50 * 1024 * 1024) {
@@ -13964,15 +13964,15 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: isAgentRunning ? 'theme.error' : hasText ? 'theme.primary' : 'color.gray.300',
-      color: "color.white",
+      backgroundColor: isAgentRunning ? 'theme-error' : hasText ? 'theme-primary' : 'color-gray-300',
+      color: "color-white",
       borderRadius: shape === 'rounded' ? '50%' : 4,
       border: "none",
       cursor: hasText ? 'pointer' : 'not-allowed',
       disabled: !hasText || loading || disabled && !isAgentRunning,
       transition: "all 0.2s ease",
       _hover: {
-        backgroundColor: isAgentRunning ? 'color.red.600' : hasText ? 'color.blue.600' : 'color.gray.300'
+        backgroundColor: isAgentRunning ? 'color-red-600' : hasText ? 'color-blue-600' : 'color-gray-300'
       }
     }, views == null ? void 0 : views.submitButton), isAgentRunning ? (/*#__PURE__*/React__default.createElement(StopIcon, {
       widthHeight: 16,
@@ -13981,13 +13981,13 @@
     })) : loading ? (/*#__PURE__*/React__default.createElement(Loader, {
       type: "quarter",
       size: 16,
-      color: "color.white"
+      color: "color-white"
     })) : (/*#__PURE__*/React__default.createElement(SendIcon, {
       widthHeight: 16,
       color: "currentColor",
       filled: false
     }))), rightButtons)))), errorMessage && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-      color: "theme.error",
+      color: "theme-error",
       marginTop: "4px"
     }, views == null ? void 0 : views.bottomTip), errorMessage)));
   };
@@ -14053,7 +14053,7 @@
     return /*#__PURE__*/React__default.createElement(ColorInputView, Object.assign({}, colorInputStates, formProps));
   };
   /**
-   * Color input allows users to select a color from a predefined palette or enter a custom color.
+   * Color input allows users to select a color from a predefined palette or enter a custom color-
    */
   var FormikColorInput = ColorInputComponent$1;
 
@@ -14444,14 +14444,14 @@
   var getSlider = themeMode => {
     return {
       default: {
-        backgroundColor: 'color.gray.200',
+        backgroundColor: 'color-gray-200',
         transition: 'background-color 0.15s ease'
       },
       outline: {
         backgroundColor: 'transparent',
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: 'color.gray.300',
+        borderColor: 'color-gray-300',
         transition: 'border-color 0.15s ease'
       }
     };
@@ -14516,7 +14516,7 @@
         isDisabled = false,
         showValue = false,
         showTooltip = false,
-        backgroundColor = 'theme.primary',
+        backgroundColor = 'theme-primary',
         label,
         helperText,
         themeMode: elementMode,
@@ -14551,7 +14551,7 @@
     var themeColor = getColorHex(backgroundColor, {
       themeMode: elementMode || themeMode
     });
-    var disabledColor = getColorHex('theme.disabled', {
+    var disabledColor = getColorHex('theme-disabled', {
       themeMode: elementMode || themeMode
     });
     var trackColor = getColorHex(SliderVariants[variant].backgroundColor, {
@@ -14577,7 +14577,7 @@
       fontWeight: 500
     }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: 14,
-      color: "color.blueGray.500"
+      color: "color-blueGray-500"
     }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: trackRef,
       position: "relative",
@@ -14626,7 +14626,7 @@
       top: "50%",
       left: thumbPositionPercent + "%",
       borderRadius: "50%",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
       border: "2px solid " + (isDisabled ? disabledColor : themeColor),
       transition: isDragging ? 'none' : 'transform 0.1s ease-in-out',
@@ -14642,8 +14642,8 @@
       transform: "translateX(-50%)",
       marginBottom: 8,
       padding: "4px 8px",
-      backgroundColor: "color.black",
-      color: "color.white",
+      backgroundColor: "color-black",
+      color: "color-white",
       borderRadius: 4,
       fontSize: 12,
       whiteSpace: "nowrap",
@@ -14667,7 +14667,7 @@
       fontWeight: 500
     }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: 14,
-      color: "color.blueGray.500"
+      color: "color-blueGray-500"
     }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: trackRef,
       position: "relative",
@@ -14726,7 +14726,7 @@
       height: thumbSize + "px",
       borderRadius: "50%",
       backgroundColor: isDisabled ? disabledColor : themeColor,
-      border: "2px solid color.white",
+      border: "2px solid color-white",
       boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
       cursor: isDisabled ? 'not-allowed' : 'grab',
       transform: isVertical ? 'translateX(-50%)' : 'translateY(-50%)',
@@ -14745,8 +14745,8 @@
     }, views == null ? void 0 : views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "absolute",
       padding: "4px 8px",
-      backgroundColor: 'color.black',
-      color: 'color.white',
+      backgroundColor: 'color-black',
+      color: 'color-white',
       borderRadius: "4px",
       whiteSpace: "nowrap",
       zIndex: 3
@@ -15001,7 +15001,7 @@
         gap: "6px",
         padding: "4px 8px",
         borderRadius: "6px",
-        backgroundColor: "color.gray.100",
+        backgroundColor: "color-gray-100",
         position: "relative",
         animate: {
           from: {
@@ -15036,19 +15036,19 @@
       })), isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
         width: "60px",
         height: "60px",
-        backgroundColor: "color.gray.200",
+        backgroundColor: "color-gray-200",
         borderRadius: "4px"
       }, /*#__PURE__*/React__default.createElement(AudioIcon, {
         widthHeight: 24,
-        color: "color.black"
+        color: "color-black"
       }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
         width: "60px",
         height: "60px",
-        backgroundColor: "color.gray.200",
+        backgroundColor: "color-gray-200",
         borderRadius: "4px"
       }, /*#__PURE__*/React__default.createElement(FileIcon, {
         widthHeight: 24,
-        color: "color.black"
+        color: "color-black"
       }))), onRemove && (/*#__PURE__*/React__default.createElement(appStudio.Button, {
         position: "absolute",
         top: "-4px",
@@ -15058,7 +15058,7 @@
         minWidth: "20px",
         minHeight: "20px",
         borderRadius: "50%",
-        backgroundColor: "color.red.500",
+        backgroundColor: "color-red-500",
         color: "white",
         fontSize: 14,
         fontWeight: "bold",
@@ -15069,7 +15069,7 @@
         cursor: "pointer",
         border: "2px solid white",
         _hover: {
-          backgroundColor: 'color.red.600'
+          backgroundColor: 'color-red-600'
         },
         onClick: e => {
           e.stopPropagation();
@@ -15142,7 +15142,7 @@
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       cursor: "pointer",
       onClick: handleClick
     }, isImage && (/*#__PURE__*/React__default.createElement(appStudio.Image, {
@@ -15169,7 +15169,7 @@
       onClick: e => e.stopPropagation()
     })), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React__default.createElement(FileIcon, {
       widthHeight: 24,
-      color: "color.gray.600"
+      color: "color-gray-600"
     })));
   };
 
@@ -15304,13 +15304,13 @@
       fontSize: '18px',
       fontWeight: '600',
       lineHeight: '24px',
-      color: 'color.gray.900'
+      color: 'color-gray-900'
     },
     body: {
       fontSize: '16px',
       fontWeight: '400',
       lineHeight: '24px',
-      color: 'color.gray.700'
+      color: 'color-gray-700'
     }
   };
 
@@ -15351,7 +15351,7 @@
       width: "100vw",
       height: "100vh",
       display: "flex",
-      backgroundColor: "color.blackAlpha.500",
+      backgroundColor: "color-blackAlpha-500",
       backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
       transition: "all 0.3s ease",
       onClick: handleClick
@@ -15383,7 +15383,7 @@
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
       cursor: "default",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       width: isFullScreen ? '100%' : 600,
       height: isFullScreen ? '100%' : 'fit-content',
       onClick: handleClick,
@@ -15401,7 +15401,7 @@
   var ModalHeader = _ref3 => {
     var {
         children,
-        buttonColor = 'theme.primary',
+        buttonColor = 'theme-primary',
         iconSize = 'md',
         buttonPosition = 'right',
         views
@@ -15421,7 +15421,7 @@
       paddingHorizontal: 24,
       borderBottomWidth: "1px",
       borderBottomStyle: "solid",
-      borderBottomColor: "color.gray.200",
+      borderBottomColor: "color-gray-200",
       media: {
         mobile: {
           paddingVertical: 12,
@@ -15466,7 +15466,7 @@
       paddingHorizontal: 24,
       borderTopWidth: "1px",
       borderTopStyle: "solid",
-      borderTopColor: "color.gray.200",
+      borderTopColor: "color-gray-200",
       gap: 12,
       media: {
         mobile: {
@@ -15546,7 +15546,7 @@
       height: '100vh',
       borderRightWidth: '1px',
       borderRightStyle: 'solid',
-      borderRightColor: 'color.gray.200'
+      borderRightColor: 'color-gray-200'
     },
     right: {
       top: 0,
@@ -15555,7 +15555,7 @@
       height: '100vh',
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid',
-      borderLeftColor: 'color.gray.200'
+      borderLeftColor: 'color-gray-200'
     },
     top: {
       top: 0,
@@ -15564,7 +15564,7 @@
       width: '100vw',
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
-      borderBottomColor: 'color.gray.200'
+      borderBottomColor: 'color-gray-200'
     },
     bottom: {
       bottom: 0,
@@ -15573,7 +15573,7 @@
       width: '100vw',
       borderTopWidth: '1px',
       borderTopStyle: 'solid',
-      borderTopColor: 'color.gray.200'
+      borderTopColor: 'color-gray-200'
     }
   };
 
@@ -15620,7 +15620,7 @@
       visibility: isOpen ? 'visible' : 'hidden',
       onClick: handleClick,
       transition: "all 0.3s ease",
-      backgroundColor: isOpen ? 'color.blackAlpha.500' : 'transparent',
+      backgroundColor: isOpen ? 'color-blackAlpha-500' : 'transparent',
       backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
       pointerEvents: isOpen ? 'auto' : 'none'
     }, props), children);
@@ -15645,7 +15645,7 @@
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
       position: "absolute",
-      backgroundColor: "color.white"
+      backgroundColor: "color-white"
     }, DrawerPlacements[placement], dimensionProps, {
       onClick: handleClick,
       transition: "transform 0.3s ease"
@@ -15664,13 +15664,13 @@
       padding: 8
     }, /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: 20,
-      color: "color.gray.500"
+      color: "color-gray-500"
     })));
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       paddingHorizontal: 24,
       paddingVertical: 16,
       borderBottomWidth: "1px",
-      borderBottomColor: "color.gray.200",
+      borderBottomColor: "color-gray-200",
       alignItems: "center",
       justifyContent: buttonPosition === 'none' ? 'center' : 'space-between'
     }, props), buttonPosition === 'left' && closeButton, children, buttonPosition === 'right' && closeButton);
@@ -15695,7 +15695,7 @@
       paddingHorizontal: 24,
       paddingVertical: 16,
       borderTopWidth: "1px",
-      borderTopColor: "color.gray.200",
+      borderTopColor: "color-gray-200",
       alignItems: "center",
       justifyContent: "flex-end",
       gap: 12
@@ -15828,20 +15828,20 @@
   var NavigationMenuVariants = {
     default: {
       backgroundColor: 'transparent',
-      color: 'color.gray.800',
+      color: 'color-gray-800',
       transition: 'all 0.2s ease'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.800',
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-800',
       transition: 'all 0.2s ease'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800',
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800',
       transition: 'all 0.2s ease'
     }
   };
@@ -15869,15 +15869,15 @@
    */
   var NavigationMenuItemStates = {
     active: {
-      backgroundColor: 'color.blue.50',
-      color: 'color.blue.700',
+      backgroundColor: 'color-blue-50',
+      color: 'color-blue-700',
       fontWeight: '600',
       borderLeftWidth: 3,
       borderLeftStyle: 'solid',
-      borderLeftColor: 'color.blue.600'
+      borderLeftColor: 'color-blue-600'
     },
     hover: {
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       transition: 'background-color 0.2s ease'
     },
     disabled: {
@@ -16249,7 +16249,7 @@
       ref: contentRef,
       role: "menu",
       minWidth: "200px",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       borderRadius: 4,
       boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
       overflow: "hidden",
@@ -16431,7 +16431,7 @@
       overflow: 'hidden',
       boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.04)',
       border: '1px solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       transition: 'box-shadow 0.2s ease',
       media: {
         mobile: {
@@ -16442,15 +16442,15 @@
       }
     },
     thead: {
-      backgroundColor: 'color.gray.50',
+      backgroundColor: 'color-gray-50',
       borderBottom: '1px solid',
-      borderBottomColor: 'color.gray.200'
+      borderBottomColor: 'color-gray-200'
     },
     th: {
       padding: '12px 16px',
       fontWeight: '600',
       fontSize: '14px',
-      color: 'color.gray.700',
+      color: 'color-gray-700',
       textAlign: 'left',
       media: {
         mobile: {
@@ -16463,8 +16463,8 @@
       padding: '12px 16px',
       fontSize: '14px',
       borderBottom: '1px solid',
-      borderBottomColor: 'color.gray.100',
-      color: 'color.gray.900',
+      borderBottomColor: 'color-gray-100',
+      color: 'color-gray-900',
       media: {
         mobile: {
           padding: '8px 12px',
@@ -16475,22 +16475,22 @@
     tr: {
       transition: 'background-color 0.15s ease',
       _hover: {
-        backgroundColor: 'color.gray.50'
+        backgroundColor: 'color-gray-50'
       },
       _focus: {
         outline: 'none',
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }
     },
     tfoot: {
-      backgroundColor: 'color.gray.50',
+      backgroundColor: 'color-gray-50',
       fontWeight: '600',
       borderTop: '2px solid',
-      borderTopColor: 'color.gray.200'
+      borderTopColor: 'color-gray-200'
     },
     caption: {
       margin: '8px 0',
-      color: 'color.gray.600',
+      color: 'color-gray-600',
       fontSize: '14px',
       fontStyle: 'italic',
       media: {
@@ -16716,17 +16716,17 @@
       padding: '12px 16px',
       cursor: 'pointer',
       borderBottom: '2px solid',
-      borderBottomColor: isActive ? 'theme.primary' : 'transparent',
+      borderBottomColor: isActive ? 'theme-primary' : 'transparent',
       backgroundColor: 'transparent',
-      color: isActive ? 'theme.primary' : 'color.gray.600',
+      color: isActive ? 'theme-primary' : 'color-gray-600',
       fontWeight: isActive ? '600' : '500',
       marginBottom: '-1px',
       transition: 'all 0.2s ease',
       // Hover state
       on: {
         hover: {
-          color: 'theme.primary',
-          borderBottomColor: isActive ? 'theme.primary' : 'color.gray.300'
+          color: 'theme-primary',
+          borderBottomColor: isActive ? 'theme-primary' : 'color-gray-300'
         }
       }
     };
@@ -16811,7 +16811,7 @@
       }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
         width: "100%",
         borderBottom: "1px solid",
-        borderBottomColor: "color.gray.200"
+        borderBottomColor: "color-gray-200"
       }, views.headerTabs), tabs.map(tab => {
         // Determine if the current tab in the loop is the active one
         var isActive = (tab.value !== undefined ? tab.value : tab.title) === (activeTab.value !== undefined ? activeTab.value : activeTab.title);
@@ -16858,7 +16858,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       width: "100%",
       borderBottom: "1px solid",
-      borderBottomColor: "color.gray.200"
+      borderBottomColor: "color-gray-200"
     }, views == null ? void 0 : views.container), children);
   };
   // TabsTrigger compound component
@@ -16884,12 +16884,12 @@
       opacity: disabled ? 0.6 : 1,
       padding: "12px 16px",
       borderBottom: "2px solid",
-      borderBottomColor: isActive ? 'theme.primary' : 'transparent',
-      color: isActive ? 'theme.primary' : 'color.gray.600',
+      borderBottomColor: isActive ? 'theme-primary' : 'transparent',
+      color: isActive ? 'theme-primary' : 'color-gray-600',
       fontWeight: isActive ? '600' : '400',
       transition: "all 0.2s ease",
       _hover: !disabled ? {
-        color: 'theme.primary'
+        color: 'theme-primary'
       } : {},
       onClick: handleClick
     }, views == null ? void 0 : views.trigger, isActive ? views == null ? void 0 : views.activeState : {}), children);
@@ -17073,7 +17073,7 @@
     }),
     background: color => ({
       backgroundColor: color,
-      color: 'color.white',
+      color: 'color-white',
       padding: '0 8px',
       borderRadius: '4px'
     }),
@@ -17096,6 +17096,9 @@
       color: color,
       textShadow: "0 0 10px " + color + "80, 0 0 20px " + color + "40, 0 0 30px " + color + "20"
     }),
+    solid: color => ({
+      color: color
+    }),
     default: () => ({})
   };
 
@@ -17402,8 +17405,8 @@
     var {
         children,
         highlightText,
-        highlightStyle = 'default',
-        highlightColor = 'theme.primary',
+        highlightStyle = 'solid',
+        highlightColor = 'theme-primary',
         highlightSecondaryColor,
         size = 'lg',
         views,
@@ -17424,34 +17427,6 @@
       ref,
       inView
     } = appStudio.useInView();
-    var {
-      getColor,
-      themeMode,
-      theme
-    } = appStudio.useTheme();
-    var currentThemeMode = elementMode || themeMode;
-    var resolvedHighlightColor = getColor(highlightColor, {
-      themeMode: currentThemeMode
-    });
-    // Fallback: If getColor returns the token itself (resolution failed), try manual lookup in theme object
-    if (resolvedHighlightColor === highlightColor && highlightColor.startsWith('theme.') && theme) {
-      var tokenPath = highlightColor.replace('theme.', '');
-      var value = tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
-      if (typeof value === 'string') {
-        resolvedHighlightColor = value;
-      }
-    }
-    var resolvedHighlightSecondaryColor = highlightSecondaryColor ? getColor(highlightSecondaryColor, {
-      themeMode: currentThemeMode
-    }) : undefined;
-    // Fallback for secondary color
-    if (highlightSecondaryColor && resolvedHighlightSecondaryColor === highlightSecondaryColor && highlightSecondaryColor.startsWith('theme.') && theme) {
-      var _tokenPath = highlightSecondaryColor.replace('theme.', '');
-      var _value = _tokenPath.split('.').reduce((acc, part) => acc && acc[part], theme);
-      if (typeof _value === 'string') {
-        resolvedHighlightSecondaryColor = _value;
-      }
-    }
     var {
       finalDisplayedText,
       activeHighlightTarget,
@@ -17473,7 +17448,7 @@
     }, props));
     var fontSize = TitleSizes[size];
     // Highlight style props
-    var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
+    var highlightProps = HighlightStyles[highlightStyle](highlightColor, highlightSecondaryColor);
     // Apply loop control to animations
     var applyAnimationLoop = (animation, loopControl) => {
       if (!animation) return animation;
@@ -17543,11 +17518,11 @@
         lastIndex = match.index + match[0].length;
       }
       if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-      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, {
+      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, Object.assign({
         key: "text-" + idx,
         as: "span",
         display: "inline"
-      }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      }, views == null ? void 0 : views.text), renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         key: "highlight-" + idx,
         as: "span",
         display: "inline",
@@ -17563,7 +17538,7 @@
       }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
     }
     // Case 3: Default - no highlighting
-    return /*#__PURE__*/React__default.createElement(appStudio.Text, 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, views == null ? void 0 : views.text), renderWithLineBreaks(text));
   };
 
   /**
@@ -17583,7 +17558,7 @@
    *
    * @example
    * // With highlighting
-   * <Title highlightText="Platform" highlightStyle="background" highlightColor="theme.primary">
+   * <Title highlightText="Platform" highlightStyle="background" highlightColor="theme-primary">
    *   Welcome to Our Platform
    * </Title>
    *
@@ -17602,8 +17577,8 @@
    * <Title
    *   highlightText={["Amazing", "Features"]}
    *   highlightStyle="gradient"
-   *   highlightColor="theme.primary"
-   *   highlightSecondaryColor="theme.secondary"
+   *   highlightColor="theme-primary"
+   *   highlightSecondaryColor="theme-secondary"
    * >
    *   Discover our Amazing Product with Great Features
    * </Title>
@@ -17646,12 +17621,12 @@
       borderColor: color,
       _hover: {
         backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
+        color: isLight ? 'color-black' : 'color-white',
         transform: 'translateY(-1px)'
       },
       _active: {
         backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
+        color: isLight ? 'color-black' : 'color-white',
         transform: 'translateY(0)'
       },
       transition: 'all 0.2s ease'
@@ -17664,12 +17639,12 @@
       borderColor: 'transparent',
       _hover: {
         backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
+        color: isLight ? 'color-black' : 'color-white',
         transform: 'translateY(-1px)'
       },
       _active: {
         backgroundColor: color,
-        color: isLight ? 'color.black' : 'color.white',
+        color: isLight ? 'color-black' : 'color-white',
         transform: 'translateY(0)'
       },
       transition: 'all 0.2s ease'
@@ -17725,8 +17700,8 @@
     } = appStudio.useTheme();
     var mode = elementMode != null ? elementMode : themeMode;
     /* MAIN COLOR – determines the entire palette */
-    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme.primary';
-    var mainTone = getColor(isDisabled ? 'theme.disabled' : mainColorKey, {
+    var mainColorKey = (_ref2 = backgroundColor != null ? backgroundColor : color) != null ? _ref2 : 'theme-primary';
+    var mainTone = getColor(isDisabled ? 'theme-disabled' : mainColorKey, {
       themeMode: mode
     });
     var tone = contrast(mainTone);
@@ -17757,7 +17732,7 @@
       onMouseLeave: () => setIsHovered(false)
     }, base, isActive && {
       backgroundColor: mainTone,
-      color: tone === 'light' ? 'color.black' : 'color.white'
+      color: tone === 'light' ? 'color-black' : 'color-white'
     }, props, views == null ? void 0 : views.container), children);
   };
 
@@ -18079,27 +18054,27 @@
   };
   var DropdownMenuVariants = {
     default: {
-      backgroundColor: 'color.white',
-      color: 'color.gray.800'
+      backgroundColor: 'color-white',
+      color: 'color-gray-800'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.800'
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-800'
     },
     outline: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800'
     }
   };
   var DropdownMenuItemStates = {
     hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     active: {
-      backgroundColor: 'color.gray.200'
+      backgroundColor: 'color-gray-200'
     },
     disabled: {
       opacity: 0.5,
@@ -18344,7 +18319,7 @@
       position: "relative"
     }, DropdownMenuSizes[size], {
       _hover: !item.disabled ? DropdownMenuItemStates.hover : {},
-      backgroundColor: isHovered && !item.disabled ? 'color.gray.100' : 'transparent',
+      backgroundColor: isHovered && !item.disabled ? 'color-gray-100' : 'transparent',
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onClick: handleClick
@@ -18374,7 +18349,7 @@
       props = _objectWithoutPropertiesLoose(_ref5, _excluded4$9);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "1px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       margin: "4px 0"
     }, views == null ? void 0 : views.divider, props));
   };
@@ -18589,11 +18564,11 @@
       left: 0,
       right: 0,
       zIndex: 1000,
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderRadius: '8px',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
       padding: '16px',
       minWidth: '280px'
@@ -18616,7 +18591,7 @@
       marginBottom: '12px'
     },
     recentColors: {
-      borderTop: '1px solid color.gray.200',
+      borderTop: '1px solid color-gray-200',
       paddingTop: '12px'
     }
   };
@@ -18672,25 +18647,25 @@
    */
   var Variants$2 = {
     default: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-300',
+      color: 'color-gray-800'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-300',
+      color: 'color-gray-800'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800'
     }
   };
   /**
@@ -18700,133 +18675,133 @@
   // Primary colors
   {
     name: 'Blue 500',
-    value: 'color.blue.500',
+    value: 'color-blue-500',
     category: 'primary'
   }, {
     name: 'Purple 500',
-    value: 'color.purple.500',
+    value: 'color-purple-500',
     category: 'primary'
   }, {
     name: 'Pink 500',
-    value: 'color.pink.500',
+    value: 'color-pink-500',
     category: 'primary'
   }, {
     name: 'Red 500',
-    value: 'color.red.500',
+    value: 'color-red-500',
     category: 'primary'
   }, {
     name: 'Orange 500',
-    value: 'color.orange.500',
+    value: 'color-orange-500',
     category: 'primary'
   }, {
     name: 'Yellow 500',
-    value: 'color.yellow.500',
+    value: 'color-yellow-500',
     category: 'primary'
   }, {
     name: 'Green 500',
-    value: 'color.green.500',
+    value: 'color-green-500',
     category: 'primary'
   }, {
     name: 'Teal 500',
-    value: 'color.teal.500',
+    value: 'color-teal-500',
     category: 'primary'
   },
   // Light variants
   {
     name: 'Blue 300',
-    value: 'color.blue.300',
+    value: 'color-blue-300',
     category: 'light'
   }, {
     name: 'Purple 300',
-    value: 'color.purple.300',
+    value: 'color-purple-300',
     category: 'light'
   }, {
     name: 'Pink 300',
-    value: 'color.pink.300',
+    value: 'color-pink-300',
     category: 'light'
   }, {
     name: 'Red 300',
-    value: 'color.red.300',
+    value: 'color-red-300',
     category: 'light'
   }, {
     name: 'Orange 300',
-    value: 'color.orange.300',
+    value: 'color-orange-300',
     category: 'light'
   }, {
     name: 'Yellow 300',
-    value: 'color.yellow.300',
+    value: 'color-yellow-300',
     category: 'light'
   }, {
     name: 'Green 300',
-    value: 'color.green.300',
+    value: 'color-green-300',
     category: 'light'
   }, {
     name: 'Teal 300',
-    value: 'color.teal.300',
+    value: 'color-teal-300',
     category: 'light'
   },
   // Dark variants
   {
     name: 'Blue 700',
-    value: 'color.blue.700',
+    value: 'color-blue-700',
     category: 'dark'
   }, {
     name: 'Purple 700',
-    value: 'color.purple.700',
+    value: 'color-purple-700',
     category: 'dark'
   }, {
     name: 'Pink 700',
-    value: 'color.pink.700',
+    value: 'color-pink-700',
     category: 'dark'
   }, {
     name: 'Red 700',
-    value: 'color.red.700',
+    value: 'color-red-700',
     category: 'dark'
   }, {
     name: 'Orange 700',
-    value: 'color.orange.700',
+    value: 'color-orange-700',
     category: 'dark'
   }, {
     name: 'Yellow 700',
-    value: 'color.yellow.700',
+    value: 'color-yellow-700',
     category: 'dark'
   }, {
     name: 'Green 700',
-    value: 'color.green.700',
+    value: 'color-green-700',
     category: 'dark'
   }, {
     name: 'Teal 700',
-    value: 'color.teal.700',
+    value: 'color-teal-700',
     category: 'dark'
   },
   // Grays
   {
     name: 'Gray 100',
-    value: 'color.gray.100',
+    value: 'color-gray-100',
     category: 'neutral'
   }, {
     name: 'Gray 300',
-    value: 'color.gray.300',
+    value: 'color-gray-300',
     category: 'neutral'
   }, {
     name: 'Gray 500',
-    value: 'color.gray.500',
+    value: 'color-gray-500',
     category: 'neutral'
   }, {
     name: 'Gray 700',
-    value: 'color.gray.700',
+    value: 'color-gray-700',
     category: 'neutral'
   }, {
     name: 'Gray 900',
-    value: 'color.gray.900',
+    value: 'color-gray-900',
     category: 'neutral'
   }, {
     name: 'Black',
-    value: 'color.black',
+    value: 'color-black',
     category: 'neutral'
   }, {
     name: 'White',
-    value: 'color.white',
+    value: 'color-white',
     category: 'neutral'
   }];
 
@@ -18872,7 +18847,7 @@
     // Combine styles
     var containerStyles = Object.assign({}, DefaultColorPickerStyles.container, views == null ? void 0 : views.container);
     var triggerStyles = Object.assign({}, DefaultColorPickerStyles.trigger, Sizes$3[size], Shapes$3[shape], Variants$2[variant], error && {
-      borderColor: 'color.red.500'
+      borderColor: 'color-red-500'
     }, isDisabled && {
       opacity: 0.6,
       cursor: 'not-allowed'
@@ -18881,11 +18856,11 @@
     var colorGridStyles = Object.assign({}, DefaultColorPickerStyles.colorGrid, views == null ? void 0 : views.colorGrid);
     var recentColorsStyles = Object.assign({}, DefaultColorPickerStyles.recentColors, views == null ? void 0 : views.recentColors);
     // Get display color for the selected color swatch
-    var displayColor = selectedColor || 'color.gray.200';
+    var displayColor = selectedColor || 'color-gray-200';
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: size === 'xs' ? '12px' : size === 'sm' ? '14px' : '16px',
       fontWeight: "500",
-      color: "color.gray.700",
+      color: "color-gray-700",
       marginBottom: "4px"
     }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: triggerRef,
@@ -18900,13 +18875,13 @@
       backgroundColor: displayColor,
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.300"
+      borderColor: "color-gray-300"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: selectedColor ? 'color.gray.800' : 'color.gray.500',
+      color: selectedColor ? 'color-gray-800' : 'color-gray-500',
       fontSize: "inherit"
     }, selectedColor || placeholder)), !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       widthHeight: 16,
-      color: "color.gray.500",
+      color: "color-gray-500",
       orientation: isOpen ? 'up' : 'down'
     }))), isOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef
@@ -18918,14 +18893,14 @@
       backgroundColor: colorOption.value,
       borderWidth: "2px",
       borderStyle: "solid",
-      borderColor: selectedColor === colorOption.value ? 'color.blue.500' : 'transparent',
+      borderColor: selectedColor === colorOption.value ? 'color-blue-500' : 'transparent',
       cursor: "pointer",
       transition: "all 0.2s ease",
       onClick: () => handleColorSelect(colorOption.value),
       title: colorOption.name,
       _hover: {
         transform: 'scale(1.1)',
-        borderColor: 'color.gray.400'
+        borderColor: 'color-gray-400'
       }
     }, views == null ? void 0 : views.colorSwatch))))), showCustomInput && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultColorPickerStyles.customInput, views == null ? void 0 : views.customInput), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8,
@@ -18950,7 +18925,7 @@
       title: "Pick a color"
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, "Use native color picker")), /*#__PURE__*/React__default.createElement(TextField, {
       placeholder: "Enter hex color (e.g., #ff0000)",
       value: customColor,
@@ -18968,13 +18943,13 @@
         backgroundColor: customColor,
         borderWidth: "1px",
         borderStyle: "solid",
-        borderColor: "color.gray.300",
+        borderColor: "color-gray-300",
         cursor: "pointer",
         onClick: handleCustomColorSubmit
       }))
     }))), showRecentColors && recentColors.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, recentColorsStyles), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontWeight: "500",
-      color: "color.gray.600",
+      color: "color-gray-600",
       marginBottom: "8px"
     }, "Recent Colors"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
       gap: 8,
@@ -18987,7 +18962,7 @@
       backgroundColor: color,
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.300",
+      borderColor: "color-gray-300",
       cursor: "pointer",
       onClick: () => handleColorSelect(color),
       title: color,
@@ -18995,7 +18970,7 @@
         transform: 'scale(1.1)'
       }
     })))))))), helperText && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-      color: error ? 'color.red.500' : 'color.gray.600',
+      color: error ? 'color-red-500' : 'color-gray-600',
       marginTop: "4px"
     }, views == null ? void 0 : views.helperText), helperText)));
   };
@@ -19032,11 +19007,11 @@
       left: 0,
       right: 0,
       zIndex: 1000,
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderRadius: '8px',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
+      borderColor: 'color-gray-200',
       boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
       padding: '16px',
       minWidth: '320px',
@@ -19048,7 +19023,7 @@
     },
     categoryTabs: {
       display: 'flex',
-      borderBottom: '1px solid color.gray.200',
+      borderBottom: '1px solid color-gray-200',
       marginBottom: '12px',
       overflowX: 'auto'
     },
@@ -19059,7 +19034,7 @@
       transition: 'all 0.2s ease',
       fontSize: '14px',
       fontWeight: '500',
-      color: 'color.gray.600',
+      color: 'color-gray-600',
       whiteSpace: 'nowrap'
     },
     emojiGrid: {
@@ -19069,7 +19044,7 @@
       maxHeight: '240px',
       overflowY: 'auto',
       padding: '4px',
-      color: 'color.black'
+      color: 'color-black'
     },
     emoji: {
       width: '32px',
@@ -19083,7 +19058,7 @@
       transition: 'all 0.2s ease'
     },
     recentEmojis: {
-      borderBottom: '1px solid color.gray.200',
+      borderBottom: '1px solid color-gray-200',
       marginBottom: '12px',
       paddingBottom: '12px'
     }
@@ -19140,25 +19115,25 @@
    */
   var Variants$3 = {
     default: {
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-300',
+      color: 'color-gray-800'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.300',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-300',
+      color: 'color-gray-800'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
+      backgroundColor: 'color-gray-100',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800'
     }
   };
   /**
@@ -21242,7 +21217,7 @@
     // Combine styles
     var containerStyles = Object.assign({}, DefaultEmojiPickerStyles.container, views == null ? void 0 : views.container);
     var triggerStyles = Object.assign({}, DefaultEmojiPickerStyles.trigger, Sizes$4[size], Shapes$4[shape], Variants$3[variant], error && {
-      borderColor: 'color.red.500'
+      borderColor: 'color-red-500'
     }, isDisabled && {
       opacity: 0.6,
       cursor: 'not-allowed'
@@ -21260,7 +21235,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: size === 'xs' ? '12px' : size === 'sm' ? '14px' : '16px',
       fontWeight: "500",
-      color: "color.gray.700",
+      color: "color-gray-700",
       marginBottom: "4px"
     }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: triggerRef,
@@ -21269,11 +21244,11 @@
       alignItems: "center",
       gap: 8
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: selectedEmoji ? 'color.gray.800' : 'color.gray.500',
+      color: selectedEmoji ? 'color-gray-800' : 'color-gray-500',
       fontSize: "inherit"
     }, selectedEmoji || placeholder)), !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(ChevronIcon, {
       widthHeight: 16,
-      color: "color.gray.500",
+      color: "color-gray-500",
       orientation: isOpen ? 'up' : 'down'
     }))), isOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: dropdownRef
@@ -21285,8 +21260,8 @@
     }))), showCategories && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, categoryTabsStyles), availableCategories.map(category => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       key: category
     }, DefaultEmojiPickerStyles.categoryTab, activeCategory === category && {
-      borderBottomColor: 'color.blue.500',
-      color: 'color.blue.600'
+      borderBottomColor: 'color-blue-500',
+      color: 'color-blue-600'
     }, {
       onClick: () => handleCategoryChange(category),
       title: category.charAt(0).toUpperCase() + category.slice(1)
@@ -21296,18 +21271,18 @@
       onClick: () => handleEmojiSelect(emoji),
       title: emoji.name,
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       },
-      color: "color.gray.800"
+      color: "color-gray-800"
     }, views == null ? void 0 : views.emoji), emoji.emoji))) : (/*#__PURE__*/React__default.createElement(appStudio.View, {
       gridColumn: "1 / -1",
       padding: "20px",
       textAlign: "center",
-      color: "color.gray.500"
+      color: "color-gray-500"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "14px"
     }, searchQuery ? 'No emojis found' : 'No emojis in this category')))))), helperText && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-      color: error ? 'color.red.500' : 'color.gray.600',
+      color: error ? 'color-red-500' : 'color-gray-600',
       marginTop: "4px"
     }, views == null ? void 0 : views.helperText), helperText)));
   };
@@ -21387,18 +21362,18 @@
   var MenubarVariants = {
     default: {
       backgroundColor: 'transparent',
-      color: 'color.gray.800'
+      color: 'color-gray-800'
     },
     filled: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.800'
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-800'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800'
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800'
     }
   };
   var MenubarOrientations = {
@@ -21411,11 +21386,11 @@
   };
   var MenubarItemStates = {
     active: {
-      backgroundColor: 'color.gray.200',
+      backgroundColor: 'color-gray-200',
       fontWeight: 'bold'
     },
     hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     disabled: {
       opacity: 0.5,
@@ -21684,7 +21659,7 @@
       id: "menubar-content",
       role: "menu",
       minWidth: "200px",
-      backgroundColor: "color.white",
+      backgroundColor: "color-white",
       borderRadius: 4,
       boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
       overflow: "hidden",
@@ -21730,7 +21705,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       role: "separator",
       height: "1px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       margin: "4px 0"
     }, views == null ? void 0 : views.separator));
   };
@@ -21927,26 +21902,26 @@
   var PaginationVariants = {
     default: {
       backgroundColor: 'transparent',
-      color: 'color.gray.800',
+      color: 'color-gray-800',
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }
     },
     filled: {
-      backgroundColor: 'color.gray.100',
-      color: 'color.gray.800',
+      backgroundColor: 'color-gray-100',
+      color: 'color-gray-800',
       _hover: {
-        backgroundColor: 'color.gray.200'
+        backgroundColor: 'color-gray-200'
       }
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200',
-      color: 'color.gray.800',
+      borderColor: 'color-gray-200',
+      color: 'color-gray-800',
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }
     }
   };
@@ -21962,10 +21937,10 @@
     }
   };
   var ActivePageButtonStyles = {
-    backgroundColor: 'color.blue.500',
-    color: 'color.white',
+    backgroundColor: 'color-blue-500',
+    color: 'color-white',
     _hover: {
-      backgroundColor: 'color.blue.600'
+      backgroundColor: 'color-blue-600'
     }
   };
   var DisabledButtonStyles = {
@@ -22107,7 +22082,7 @@
       marginLeft: "-8px"
     }))), showPageInfo && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       marginLeft: 16,
-      color: "color.gray.600"
+      color: "color-gray-600"
     }, views == null ? void 0 : views.pageInfo), "Page ", currentPage, " of ", totalPages)), showPageSizeSelector && onPageSizeChange && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "select",
       marginLeft: 16,
@@ -22115,8 +22090,8 @@
       borderRadius: "4px",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.200",
-      backgroundColor: "color.white",
+      borderColor: "color-gray-200",
+      backgroundColor: "color-white",
       cursor: "pointer",
       value: pageSize,
       onChange: handlePageSizeChange
@@ -22177,14 +22152,14 @@
         shape = 'linear',
         value = 0,
         max = 100,
-        color = 'theme.primary',
-        backgroundColor = 'color.gray.200',
+        color = 'theme-primary',
+        backgroundColor = 'color-gray-200',
         height,
         size,
         radius = 4,
         strokeWidth = 10,
         showLabel = false,
-        labelColor = 'theme.text.primary',
+        labelColor = 'theme-text-primary',
         animated = true,
         animationDuration = '0.5s',
         views,
@@ -22329,15 +22304,15 @@
       transition: 'opacity 0.15s ease'
     },
     line: {
-      backgroundColor: 'color.gray.200',
+      backgroundColor: 'color-gray-200',
       transition: 'background-color 0.15s ease'
     },
     label: {
       fontSize: '14px',
       fontWeight: '500',
-      color: 'color.gray.600',
+      color: 'color-gray-600',
       paddingHorizontal: '8px',
-      backgroundColor: 'color.white',
+      backgroundColor: 'color-white',
       transition: 'color 0.15s ease'
     }
   };
@@ -22360,7 +22335,7 @@
       themeMode
     } = appStudio.useTheme();
     // Use provided color or default from theme
-    var separatorColor = color || 'color.gray.200';
+    var separatorColor = color || 'color-gray-200';
     var borderStyle = SeparatorVariants[variant];
     var borderWidth = SeparatorThicknesses[thickness];
     // Set appropriate ARIA attributes based on decorative prop
@@ -22567,42 +22542,42 @@
     return {
       default: {
         indicator: {
-          backgroundColor: 'color.gray.400'
+          backgroundColor: 'color-gray-400'
         },
         label: {
-          color: 'color.gray.700'
+          color: 'color-gray-700'
         }
       },
       info: {
         indicator: {
-          backgroundColor: 'color.blue.500'
+          backgroundColor: 'color-blue-500'
         },
         label: {
-          color: 'color.blue.700'
+          color: 'color-blue-700'
         }
       },
       success: {
         indicator: {
-          backgroundColor: 'color.green.500'
+          backgroundColor: 'color-green-500'
         },
         label: {
-          color: 'color.green.700'
+          color: 'color-green-700'
         }
       },
       warning: {
         indicator: {
-          backgroundColor: 'color.orange.500'
+          backgroundColor: 'color-orange-500'
         },
         label: {
-          color: 'color.orange.700'
+          color: 'color-orange-700'
         }
       },
       error: {
         indicator: {
-          backgroundColor: 'color.red.500'
+          backgroundColor: 'color-red-500'
         },
         label: {
-          color: 'color.red.700'
+          color: 'color-red-700'
         }
       }
     };
@@ -22724,32 +22699,32 @@
   var getSidebar = themeMode => {
     return {
       default: {
-        backgroundColor: 'color.white',
-        color: 'color.gray.800',
+        backgroundColor: 'color-white',
+        color: 'color-gray-800',
         transition: 'all 0.2s ease'
       },
       filled: {
-        backgroundColor: 'color.gray.100',
-        color: 'color.gray.800',
+        backgroundColor: 'color-gray-100',
+        color: 'color-gray-800',
         transition: 'all 0.2s ease'
       },
       outline: {
-        backgroundColor: 'color.white',
+        backgroundColor: 'color-white',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'color.gray.200',
-        color: 'color.gray.800',
+        borderColor: 'color-gray-200',
+        color: 'color-gray-800',
         transition: 'all 0.2s ease'
       },
       subtle: {
-        backgroundColor: 'color.gray.50',
-        color: 'color.gray.800',
+        backgroundColor: 'color-gray-50',
+        color: 'color-gray-800',
         transition: 'all 0.2s ease'
       },
       elevated: {
-        backgroundColor: 'color.white',
+        backgroundColor: 'color-white',
         boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-        color: 'color.gray.800',
+        color: 'color-gray-800',
         transition: 'all 0.2s ease'
       }
     };
@@ -22765,13 +22740,13 @@
       left: 0,
       borderRightWidth: '1px',
       borderRightStyle: 'solid',
-      borderRightColor: 'color.gray.200'
+      borderRightColor: 'color-gray-200'
     },
     right: {
       right: 0,
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid',
-      borderLeftColor: 'color.gray.200'
+      borderLeftColor: 'color-gray-200'
     }
   };
   /**
@@ -22843,7 +22818,7 @@
       padding: "16px",
       borderBottomWidth: "1px",
       borderBottomStyle: "solid",
-      borderBottomColor: "color.gray.200",
+      borderBottomColor: "color-gray-200",
       alignItems: "center",
       justifyContent: "space-between"
     }, views == null ? void 0 : views.header, props), isExpanded ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
@@ -22861,7 +22836,7 @@
       backgroundColor: "transparent",
       cursor: "pointer",
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       },
       onClick: toggleExpanded,
       "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar'
@@ -22884,7 +22859,7 @@
       backgroundColor: "transparent",
       cursor: "pointer",
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       },
       onClick: toggleExpanded,
       "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar'
@@ -22926,7 +22901,7 @@
       padding: "16px",
       borderTopWidth: "1px",
       borderTopStyle: "solid",
-      borderTopColor: "color.gray.200"
+      borderTopColor: "color-gray-200"
     }, views == null ? void 0 : views.footer, props), isExpanded ? children : null);
   };
   // Main Sidebar View component
@@ -22969,7 +22944,7 @@
       left: 0,
       width: "100vw",
       height: "100vh",
-      backgroundColor: "color.blackAlpha.500",
+      backgroundColor: "color-blackAlpha-500",
       zIndex: 998,
       onClick: collapse
     }, views == null ? void 0 : views.backdrop))), isVisible && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
@@ -23430,28 +23405,28 @@
       default: {
         backgroundColor: 'transparent',
         _hover: {
-          backgroundColor: 'color.gray.200'
+          backgroundColor: 'color-gray-200'
         },
         _active: {
-          backgroundColor: 'color.gray.300'
+          backgroundColor: 'color-gray-300'
         }
       },
       subtle: {
         backgroundColor: 'transparent',
         _hover: {
-          backgroundColor: 'color.gray.100'
+          backgroundColor: 'color-gray-100'
         },
         _active: {
-          backgroundColor: 'color.gray.200'
+          backgroundColor: 'color-gray-200'
         }
       },
       prominent: {
-        backgroundColor: 'color.gray.100',
+        backgroundColor: 'color-gray-100',
         _hover: {
-          backgroundColor: 'color.gray.200'
+          backgroundColor: 'color-gray-200'
         },
         _active: {
-          backgroundColor: 'color.gray.300'
+          backgroundColor: 'color-gray-300'
         }
       }
     };
@@ -23463,13 +23438,13 @@
     horizontal: {
       width: '2px',
       height: '20px',
-      backgroundColor: 'color.gray.400',
+      backgroundColor: 'color-gray-400',
       margin: '0 1px'
     },
     vertical: {
       width: '20px',
       height: '2px',
-      backgroundColor: 'color.gray.400',
+      backgroundColor: 'color-gray-400',
       margin: '1px 0'
     }
   };
@@ -23557,7 +23532,7 @@
         flex: "0 0 auto",
         width: orientation === 'horizontal' ? '10px' : '100%',
         height: orientation === 'vertical' ? '10px' : '100%',
-        backgroundColor: "color.gray.200",
+        backgroundColor: "color-gray-200",
         cursor: "pointer",
         onClick: () => togglePanelCollapse(id),
         "aria-label": "Expand panel " + id,
@@ -23669,9 +23644,9 @@
       width: "16px",
       height: "16px",
       borderRadius: "full",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       border: "1px solid",
-      borderColor: "color.gray.300",
+      borderColor: "color-gray-300",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -23683,7 +23658,7 @@
       tabIndex: 0,
       pointerEvents: "auto",
       _hover: {
-        backgroundColor: 'color.gray.200'
+        backgroundColor: 'color-gray-200'
       }
     }, views == null ? void 0 : views.collapseIcon), /*#__PURE__*/React__default.createElement(appStudio.View, {
       width: "8px",
@@ -23697,11 +23672,11 @@
     React__default.createElement(appStudio.Horizontal, null, /*#__PURE__*/React__default.createElement(appStudio.View, {
       width: "6px",
       height: "2px",
-      backgroundColor: "color.gray.600"
+      backgroundColor: "color-gray-600"
     }), /*#__PURE__*/React__default.createElement(appStudio.View, {
       width: "2px",
       height: "6px",
-      backgroundColor: "color.gray.600",
+      backgroundColor: "color-gray-600",
       position: "absolute"
     }))) : (
     /*#__PURE__*/
@@ -23709,7 +23684,7 @@
     React__default.createElement(appStudio.View, {
       width: "6px",
       height: "2px",
-      backgroundColor: "color.gray.600"
+      backgroundColor: "color-gray-600"
     }))))));
   };
   // Main Resizable View component
@@ -23822,50 +23797,50 @@
   var Themes$1 = {
     info: {
       container: {
-        backgroundColor: 'color.blue.50',
-        border: 'color.blue.300'
+        backgroundColor: 'color-blue-50',
+        border: 'color-blue-300'
       },
       content: {
-        color: 'color.blue.700'
+        color: 'color-blue-700'
       },
       icon: {
-        color: 'color.blue.500'
+        color: 'color-blue-500'
       }
     },
     success: {
       container: {
-        backgroundColor: 'color.green.50',
-        border: 'color.green.300'
+        backgroundColor: 'color-green-50',
+        border: 'color-green-300'
       },
       content: {
-        color: 'color.green.700'
+        color: 'color-green-700'
       },
       icon: {
-        color: 'color.green.500'
+        color: 'color-green-500'
       }
     },
     warning: {
       container: {
-        backgroundColor: 'color.orange.50',
-        border: 'color.orange.300'
+        backgroundColor: 'color-orange-50',
+        border: 'color-orange-300'
       },
       content: {
-        color: 'color.orange.700'
+        color: 'color-orange-700'
       },
       icon: {
-        color: 'color.orange.500'
+        color: 'color-orange-500'
       }
     },
     error: {
       container: {
-        backgroundColor: 'color.red.50',
-        border: 'color.red.300'
+        backgroundColor: 'color-red-50',
+        border: 'color-red-300'
       },
       content: {
-        color: 'color.red.700'
+        color: 'color-red-700'
       },
       icon: {
-        color: 'color.red.500'
+        color: 'color-red-500'
       }
     }
   };
@@ -24019,37 +23994,40 @@
     var Theme = theme != null ? theme : Themes$1;
     // Get the appropriate icon based on the variant
     var getIcon = () => {
+      var _Themes$variant;
       // If a custom icon is provided, use it
       if (customIcon !== undefined) {
         return customIcon;
       }
       // Otherwise use the default icon based on variant
+      // Get icon color from Themes configuration
+      var iconColor = variant ? (_Themes$variant = Themes$1[variant]) == null || (_Themes$variant = _Themes$variant.icon) == null ? void 0 : _Themes$variant.color : Themes$1.info.icon.color;
       switch (variant) {
         case 'info':
           return /*#__PURE__*/React__default.createElement(InfoIcon, {
             widthHeight: 20,
-            color: Theme.info.icon.color
+            color: iconColor
           });
         case 'success':
           return /*#__PURE__*/React__default.createElement(PlayIcon, {
             widthHeight: 20,
-            color: Theme.success.icon.color
+            color: iconColor
           });
         case 'warning':
           return /*#__PURE__*/React__default.createElement(InfoIcon, {
             widthHeight: 20,
-            color: Theme.warning.icon.color,
+            color: iconColor,
             orientation: "down"
           });
         case 'error':
           return /*#__PURE__*/React__default.createElement(DustBinIcon, {
             widthHeight: 20,
-            color: Theme.error.icon.color
+            color: iconColor
           });
         default:
           return /*#__PURE__*/React__default.createElement(InfoIcon, {
             widthHeight: 20,
-            color: Theme.info.icon.color
+            color: Themes$1.info.icon.color
           });
       }
     };
@@ -24403,24 +24381,24 @@
   var getCommand = themeMode => {
     return {
       default: {
-        backgroundColor: 'color.white',
+        backgroundColor: 'color-white',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'color.gray.200',
+        borderColor: 'color-gray-200',
         boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
       },
       filled: {
-        backgroundColor: 'color.gray.50',
+        backgroundColor: 'color-gray-50',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'color.gray.200',
+        borderColor: 'color-gray-200',
         boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
       },
       outline: {
-        backgroundColor: 'color.white',
+        backgroundColor: 'color-white',
         borderWidth: '2px',
         borderStyle: 'solid',
-        borderColor: 'color.gray.300',
+        borderColor: 'color-gray-300',
         boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
       }
     };
@@ -24434,7 +24412,7 @@
     padding: '12px 16px',
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: 'color.gray.200'
+    borderBottomColor: 'color-gray-200'
   };
   var CommandListStyles = {
     overflow: 'auto',
@@ -24447,7 +24425,7 @@
     padding: '8px 16px',
     fontSize: '12px',
     fontWeight: 'bold',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     textTransform: 'uppercase'
   };
   var CommandItemStyles = {
@@ -24459,13 +24437,13 @@
     borderRadius: '4px',
     margin: '0 8px',
     _hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     }
   };
   var CommandItemSelectedStyles = {
-    backgroundColor: 'color.blue.50',
+    backgroundColor: 'color-blue-50',
     _hover: {
-      backgroundColor: 'color.blue.100'
+      backgroundColor: 'color-blue-100'
     }
   };
   var CommandItemDisabledStyles = {
@@ -24480,7 +24458,7 @@
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: '12px',
-    color: 'color.gray.500'
+    color: 'color-gray-500'
   };
   var CommandItemContentStyles = {
     display: 'flex',
@@ -24493,7 +24471,7 @@
   };
   var CommandItemDescriptionStyles = {
     fontSize: '12px',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     marginTop: '2px'
   };
   var CommandItemShortcutStyles = {
@@ -24501,14 +24479,14 @@
     alignItems: 'center',
     marginLeft: '12px',
     fontSize: '12px',
-    color: 'color.gray.500'
+    color: 'color-gray-500'
   };
   var CommandEmptyStyles = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     padding: '16px',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     textAlign: 'center'
   };
   var CommandFooterStyles = {
@@ -24518,9 +24496,9 @@
     padding: '8px 16px',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: 'color.gray.200',
+    borderTopColor: 'color-gray-200',
     fontSize: '12px',
-    color: 'color.gray.500'
+    color: 'color-gray-500'
   };
 
   var _excluded$1j = ["value", "onValueChange", "placeholder", "views"],
@@ -24565,7 +24543,7 @@
     }, []);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandInputStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(SearchIcon, {
       widthHeight: 16,
-      color: "color.gray.400",
+      color: "color-gray-400",
       marginRight: "8px"
     }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "input",
@@ -24916,25 +24894,25 @@
   var getTooltip = themeMode => {
     return {
       default: {
-        backgroundColor: 'color.gray.900',
-        color: 'color.white',
+        backgroundColor: 'color-gray-900',
+        color: 'color-white',
         borderRadius: '6px',
         boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)',
         transition: 'opacity 0.15s ease'
       },
       light: {
-        backgroundColor: 'color.white',
-        color: 'color.gray.800',
+        backgroundColor: 'color-white',
+        color: 'color-gray-800',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'color.gray.200',
+        borderColor: 'color-gray-200',
         borderRadius: '6px',
         boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04)',
         transition: 'opacity 0.15s ease'
       },
       dark: {
-        backgroundColor: 'color.gray.950',
-        color: 'color.white',
+        backgroundColor: 'color-gray-950',
+        color: 'color-white',
         borderRadius: '6px',
         boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.12)',
         transition: 'opacity 0.15s ease'
@@ -25409,33 +25387,33 @@
    */
   var DefaultColorStops = {
     linear: [{
-      color: 'color.blue.500',
+      color: 'color-blue-500',
       position: '0%'
     }, {
-      color: 'color.purple.500',
+      color: 'color-purple-500',
       position: '100%'
     }],
     radial: [{
-      color: 'color.blue.500',
+      color: 'color-blue-500',
       position: '0%'
     }, {
-      color: 'color.purple.500',
+      color: 'color-purple-500',
       position: '100%'
     }],
     conic: [{
-      color: 'color.red.500',
+      color: 'color-red-500',
       position: '0deg'
     }, {
-      color: 'color.yellow.500',
+      color: 'color-yellow-500',
       position: '90deg'
     }, {
-      color: 'color.green.500',
+      color: 'color-green-500',
       position: '180deg'
     }, {
-      color: 'color.blue.500',
+      color: 'color-blue-500',
       position: '270deg'
     }, {
-      color: 'color.red.500',
+      color: 'color-red-500',
       position: '360deg'
     }]
   };
@@ -25541,14 +25519,9 @@
         animate = false,
         animationDuration = 3,
         children,
-        views,
-        themeMode: elementMode
+        views
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
-    var {
-      getColor,
-      themeMode
-    } = appStudio.useTheme();
     // Determine color stops to use
     var colorStops = React.useMemo(() => {
       // If colors array is provided, use it
@@ -25572,12 +25545,10 @@
     var gradientString = React.useMemo(() => {
       // Process color stops to resolve theme colors
       var processedColorStops = colorStops.map(stop => Object.assign({}, stop, {
-        color: getColor(stop.color, elementMode ? {
-          themeMode: elementMode
-        } : undefined)
+        color: stop.color
       }));
       return generateGradientString(type, processedColorStops, direction, shape, position);
-    }, [type, colorStops, direction, shape, position, getColor, themeMode, elementMode]);
+    }, [type, colorStops, direction, shape, position]);
     // Prepare animation styles if animation is enabled
     var animationStyles = React.useMemo(() => {
       if (!animate) return {};
@@ -25600,16 +25571,16 @@
    *
    * @example
    * // Basic linear gradient
-   * <Gradient from="blue.500" to="purple.500" height="200px" width="100%" />
+   * <Gradient from="blue-500" to="purple-500" height="200px" width="100%" />
    *
    * @example
    * // Radial gradient with content
    * <Gradient
    *   type="radial"
    *   colors={[
-   *     { color: 'red.500', position: '0%' },
-   *     { color: 'orange.500', position: '50%' },
-   *     { color: 'yellow.500', position: '100%' }
+   *     { color: 'red-500', position: '0%' },
+   *     { color: 'orange-500', position: '50%' },
+   *     { color: 'yellow-500', position: '100%' }
    *   ]}
    *   height="200px"
    * >
@@ -25744,7 +25715,7 @@
       height: 300,
       position: "relative",
       overflow: "hidden",
-      backgroundColor: "color.gray.50",
+      backgroundColor: "color-gray-50",
       zIndex: 0,
       transform: "skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)"
     }, props), rowsArray.map((_, i) => (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
@@ -25755,7 +25726,7 @@
       height: squareSize / 3,
       width: squareSize,
       borderStyle: "solid",
-      borderColor: "color.gray.200",
+      borderColor: "color-gray-200",
       borderWidth: 0.5,
       backgroundColor: "transparent",
       cursor: "pointer",
@@ -25799,7 +25770,7 @@
       height: 300,
       position: "relative",
       overflow: "hidden",
-      backgroundColor: "color.gray.900"
+      backgroundColor: "color-gray-900"
     }, props), particles.map(idx => {
       var size = Math.random() * 8 + 4; // 4-12px
       var startX = Math.random() * 400;
@@ -25883,7 +25854,7 @@
       height: 300,
       position: "relative",
       overflow: "hidden",
-      backgroundColor: "color.gray.900"
+      backgroundColor: "color-gray-900"
     }, props), Array.from({
       length: cols + 1
     }, (_, i) => (/*#__PURE__*/React__default.createElement(appStudio.View, {
@@ -25959,7 +25930,7 @@
       height: 300,
       position: "relative",
       overflow: "hidden",
-      backgroundColor: "color.gray.100"
+      backgroundColor: "color-gray-100"
     }, props), ripples.map(ripple => (/*#__PURE__*/React__default.createElement(appStudio.View, {
       key: ripple.id,
       position: "absolute",
@@ -26085,15 +26056,15 @@
   var BackgroundOverlay = _ref10 => {
     var {
         contentPosition,
-        backgroundColor = 'color.black.900'
+        backgroundColor = 'color-black-900'
       } = _ref10,
       props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     var getDefaultOverlay = () => {
-      var ligthBackground = backgroundColor + ".100";
-      var darkBackground = backgroundColor + ".900";
-      var midBackground = backgroundColor + ".600";
-      var midDarkBackground = backgroundColor + ".400";
-      if (backgroundColor.indexOf('.') === -1) {
+      var ligthBackground = backgroundColor + "-100";
+      var darkBackground = backgroundColor + "-900";
+      var midBackground = backgroundColor + "-600";
+      var midDarkBackground = backgroundColor + "-400";
+      if (backgroundColor.indexOf('-') === -1) {
         ligthBackground = "color-mix(in srgb, " + backgroundColor + " 10%, transparent)";
         darkBackground = "color-mix(in srgb, " + backgroundColor + " 90%, transparent)";
         midBackground = "color-mix(in srgb, " + backgroundColor + " 70%, transparent)";
@@ -26166,7 +26137,7 @@
     var rotationOffset = Math.sin(rotationRad) * 100; // percentage-based estimate
     var scaleOffset = (decorationScale - 1) * 100 / 2;
     var extraPadding = Math.ceil(rotationOffset + scaleOffset);
-    var backgroundColor = (_props$backgroundColo = props.backgroundColor) != null ? _props$backgroundColo : 'theme.primary';
+    var backgroundColor = (_props$backgroundColo = props.backgroundColor) != null ? _props$backgroundColo : 'theme-primary';
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, props, {
       ref: ref,
       backgroundColor: 'transparent',
@@ -26266,7 +26237,7 @@
    *
    * @example
    * // Background Gradient
-   * <Background.Gradient from="blue.500" to="purple.500" animate={true}>
+   * <Background.Gradient from="blue-500" to="purple-500" animate={true}>
    *   <Text color="white">Content over gradient</Text>
    * </Background.Gradient>
    */
@@ -26567,7 +26538,7 @@
       alignItems: "center",
       justifyContent: "center",
       flex: 1,
-      color: "color.gray.400"
+      color: "color-gray-400"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "14px"
     }, "No messages yet. Start a conversation!"))) : messages.map(message => (/*#__PURE__*/React__default.createElement(ChatBubble, {
@@ -26599,7 +26570,7 @@
         animation: 'spin 1s linear infinite'
       }
     }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.gray.500",
+      color: "color-gray-500",
       fontSize: "14px"
     }, loadingText)))), /*#__PURE__*/React__default.createElement(appStudio.View, null, selectedContextElements.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       gap: 8,
@@ -26616,7 +26587,7 @@
       gap: 6
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
-      color: "color.blue.700",
+      color: "color-blue-700",
       fontWeight: "500"
     }, element.name), /*#__PURE__*/React__default.createElement(appStudio.View, {
       as: "button",
@@ -26629,7 +26600,7 @@
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: 12,
-      color: "color.blue.700"
+      color: "color-blue-700"
     }))))))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "form",
       onSubmit: handleSubmit
@@ -26638,11 +26609,11 @@
       type: "button"
     }, DefaultChatWidgetStyles.attachmentButton, styles.attachmentButton, {
       _hover: {
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }
     }), /*#__PURE__*/React__default.createElement(AttachmentIcon, {
       widthHeight: 16,
-      color: "color.gray.600"
+      color: "color-gray-600"
     }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "textarea",
       ref: inputRef,
@@ -26664,20 +26635,20 @@
       onClick: onContextPickerClick
     }, DefaultChatWidgetStyles.attachmentButton, styles.contextPickerButton, {
       _hover: Object.assign({
-        backgroundColor: 'color.gray.100'
+        backgroundColor: 'color-gray-100'
       }, (_styles$contextPicker = styles.contextPickerButton) == null ? void 0 : _styles$contextPicker._hover),
       title: "Select element from page"
     }), /*#__PURE__*/React__default.createElement(MousePointerIcon, {
       widthHeight: 16,
-      color: "color.gray.600"
+      color: "color-gray-600"
     }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       as: "button",
       type: "submit",
       disabled: !hasText || disableInput || isLoading
     }, DefaultChatWidgetStyles.sendButton, {
-      backgroundColor: hasText ? 'theme.primary' : 'color.gray.300',
+      backgroundColor: hasText ? 'theme-primary' : 'color-gray-300',
       _hover: {
-        backgroundColor: hasText ? 'color.blue.600' : 'color.gray.300'
+        backgroundColor: hasText ? 'color-blue-600' : 'color-gray-300'
       }
     }, styles.sendButton, {
       style: {
@@ -26686,7 +26657,7 @@
       }
     }), /*#__PURE__*/React__default.createElement(SendIcon, {
       widthHeight: 16,
-      color: "color.white",
+      color: "color-white",
       filled: false
     }))))));
   };
@@ -26716,10 +26687,10 @@
         opacity: 0.7
       }, /*#__PURE__*/React__default.createElement(InfoIcon, {
         widthHeight: 12,
-        color: "color.gray.600"
+        color: "color-gray-600"
       }), /*#__PURE__*/React__default.createElement(appStudio.Text, {
         fontSize: "12px",
-        color: "color.gray.600",
+        color: "color-gray-600",
         fontStyle: "italic"
       }, message.content)));
     }
@@ -26740,16 +26711,16 @@
         border: "1px solid rgba(0,0,0,0.05)"
       }, /*#__PURE__*/React__default.createElement(SettingsIcon, {
         widthHeight: 14,
-        color: "color.gray.600"
+        color: "color-gray-600"
       }), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
         gap: 2
       }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
         fontSize: "11px",
         fontWeight: "600",
-        color: "color.gray.700"
+        color: "color-gray-700"
       }, "Tool Usage"), /*#__PURE__*/React__default.createElement(appStudio.Text, {
         fontSize: "12px",
-        color: "color.gray.600",
+        color: "color-gray-600",
         fontFamily: "monospace"
       }, message.content))));
     }
@@ -26797,12 +26768,12 @@
       padding: 0
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "11px",
-      color: "color.gray.500",
+      color: "color-gray-500",
       fontWeight: "600"
     }, "Thinking Process"), /*#__PURE__*/React__default.createElement(ChevronIcon, {
       orientation: isReasoningOpen ? 'down' : 'right',
       widthHeight: 10,
-      color: "color.gray.500"
+      color: "color-gray-500"
     })), isReasoningOpen && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       padding: "8px",
       backgroundColor: "rgba(0,0,0,0.03)",
@@ -26810,7 +26781,7 @@
       marginTop: "4px"
     }, styles.reasoningContent), /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontSize: "12px",
-      color: "color.gray.600",
+      color: "color-gray-600",
       fontStyle: "italic"
     }, message.reasoning))))), /*#__PURE__*/React__default.createElement(appStudio.View, {
       whiteSpace: "pre-wrap",
@@ -26843,7 +26814,7 @@
       fontSize: "11px",
       border: "1px solid rgba(37, 99, 235, 0.2)"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
-      color: "color.blue.700",
+      color: "color-blue-700",
       fontWeight: "500"
     }, element.name))))))));
   };
@@ -27116,7 +27087,7 @@
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, {
       fontWeight: "bold",
-      color: "color.gray.800"
+      color: "color-gray-800"
     }, "ChatWidget Assistant"), /*#__PURE__*/React__default.createElement(appStudio.View, {
       as: "button",
       onClick: () => setIsOpen(false),
@@ -27130,7 +27101,7 @@
       }
     }, /*#__PURE__*/React__default.createElement(CloseIcon, {
       widthHeight: 16,
-      color: "color.gray.500"
+      color: "color-gray-500"
     }))), /*#__PURE__*/React__default.createElement(ChatWidget, {
       messages: messages,
       onSubmit: handleSubmit,
@@ -27157,7 +27128,7 @@
       width: "56px",
       height: "56px",
       borderRadius: "50%",
-      backgroundColor: "theme.primary",
+      backgroundColor: "theme-primary",
       border: "none",
       boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
       cursor: "pointer",