@app-studio/web 0.9.83 → 0.9.85

package/dist/web.cjs.development.js

@@ -200,17 +200,17 @@ var AccordionVariants = {
   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'
     }
   }
 };
@@ -266,7 +266,7 @@ var AccordionItem = _ref2 => {
   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,
@@ -320,7 +320,7 @@ var AccordionTrigger = _ref3 => {
     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
@@ -366,7 +366,7 @@ var AccordionContent = _ref4 => {
     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,
@@ -836,67 +836,67 @@ var getThemes = themeMode => {
   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'
       }
     }
   };
@@ -1053,7 +1053,7 @@ var AudioWaveformView = _ref => {
   }, 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"
     }
@@ -1155,69 +1155,69 @@ var hideMessage = () => {
 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'
     }
   }
@@ -1626,7 +1626,7 @@ var UploadView = _ref => {
         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, "%"));
@@ -1806,7 +1806,7 @@ function AudioInputView(_ref) {
         height: '36px',
         cursor: 'pointer',
         _hover: {
-          backgroundColor: 'color.gray.100'
+          backgroundColor: 'color-gray-100'
         }
       }
     },
@@ -1820,7 +1820,7 @@ function AudioInputView(_ref) {
     },
     textProps: {
       fontSize: '14px',
-      color: 'color.gray.600'
+      color: 'color-gray-600'
     },
     validateFile: file => {
       if (file.size > 100 * 1024 * 1024) {
@@ -1840,13 +1840,13 @@ function AudioInputView(_ref) {
     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,
@@ -1864,13 +1864,13 @@ function AudioInputView(_ref) {
     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,
@@ -1889,13 +1889,13 @@ function AudioInputView(_ref) {
     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,
@@ -2148,13 +2148,13 @@ var DefaultAvatarStyles = {
     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',
@@ -2184,7 +2184,7 @@ var AvatarView = _ref => {
     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",
@@ -2332,8 +2332,8 @@ var PositionStyles = {
 var getBadgeVariants = themeMode => {
   return {
     filled: {
-      backgroundColor: 'theme.primary',
-      color: 'color.white',
+      backgroundColor: 'theme-primary',
+      color: 'color-white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'transparent',
@@ -2343,8 +2343,8 @@ var getBadgeVariants = themeMode => {
       backgroundColor: 'transparent',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'theme.primary',
-      color: 'theme.primary',
+      borderColor: 'theme-primary',
+      color: 'theme-primary',
       transition: 'all 0.2s ease'
     },
     link: {
@@ -2352,14 +2352,14 @@ var getBadgeVariants = themeMode => {
       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',
@@ -2521,7 +2521,7 @@ var DefaultSpinner = _ref => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -2570,7 +2570,7 @@ var Dotted = _ref2 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
@@ -2618,7 +2618,7 @@ var Quarter = _ref3 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
@@ -2670,8 +2670,8 @@ var LoaderView = _ref4 => {
   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,
@@ -3319,22 +3319,22 @@ var ButtonView = _ref5 => {
     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]);
@@ -3437,23 +3437,23 @@ var getCardVariants = themeMode => {
   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',
@@ -3471,8 +3471,8 @@ var getDefaultCardStyles = theme => {
   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'
@@ -3481,18 +3481,18 @@ var getDefaultCardStyles = theme => {
       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'
     }
   };
 };
@@ -3820,7 +3820,7 @@ var IndicatorStyles = {
     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'
@@ -3829,7 +3829,7 @@ var IndicatorStyles = {
     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'
@@ -3838,7 +3838,7 @@ var IndicatorStyles = {
     minWidth: '24px',
     height: '24px',
     borderRadius: '50%',
-    backgroundColor: 'color.gray.300',
+    backgroundColor: 'color-gray-300',
     margin: '0 4px',
     cursor: 'pointer',
     display: 'flex',
@@ -3850,22 +3850,22 @@ var IndicatorStyles = {
 };
 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',
@@ -3874,7 +3874,7 @@ var NavigationButtonStyles = {
   zIndex: 1,
   transition: 'background-color 0.3s ease',
   _hover: {
-    backgroundColor: 'color.gray.100'
+    backgroundColor: 'color-gray-100'
   }
 };
 // Default styles for the compound component pattern
@@ -4242,17 +4242,17 @@ Carousel.Next = CarouselNextComponent; // Compound component pattern
  */
 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];
@@ -4301,18 +4301,18 @@ var LegendTextStyles = {
 };
 // 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 = {
@@ -4368,12 +4368,12 @@ var LoadingOverlayStyles = /*#__PURE__*/Object.assign({}, OverlayBaseStyles);
 // 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 => {
@@ -4609,7 +4609,7 @@ var BarChart = _ref => {
         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",
@@ -4619,7 +4619,7 @@ var BarChart = _ref => {
         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, {
@@ -4627,7 +4627,7 @@ var BarChart = _ref => {
         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, {
@@ -4635,7 +4635,7 @@ var BarChart = _ref => {
         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()))));
@@ -4815,7 +4815,7 @@ var LineChart = _ref => {
           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",
@@ -4825,7 +4825,7 @@ var LineChart = _ref => {
           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, {
@@ -4833,7 +4833,7 @@ var LineChart = _ref => {
           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, {
@@ -4841,7 +4841,7 @@ var LineChart = _ref => {
           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, {
@@ -4849,7 +4849,7 @@ var LineChart = _ref => {
           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()))));
@@ -5024,7 +5024,7 @@ var PieChart = _ref => {
         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",
@@ -5034,7 +5034,7 @@ var PieChart = _ref => {
         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, {
@@ -5042,7 +5042,7 @@ var PieChart = _ref => {
         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, {
@@ -5050,7 +5050,7 @@ var PieChart = _ref => {
         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, {
@@ -5058,7 +5058,7 @@ var PieChart = _ref => {
         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) + "%")))));
@@ -5186,11 +5186,11 @@ var ChartTooltip = _ref => {
     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",
@@ -5583,10 +5583,10 @@ var CookieConsentView = _ref => {
   }, 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",
@@ -5635,8 +5635,8 @@ var CookieConsentView = _ref => {
  *   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' }
  *   }}
  * />
  */
@@ -5740,27 +5740,27 @@ var ContextMenuSizes = {
 };
 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,
@@ -6077,7 +6077,7 @@ var ContextMenuItem = _ref4 => {
       "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
@@ -6127,7 +6127,7 @@ var ContextMenuDivider = _ref5 => {
     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"
@@ -6141,7 +6141,7 @@ var ContextMenuSeparator = _ref6 => {
     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"
@@ -6349,7 +6349,7 @@ var HelperText = _ref => {
     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
@@ -6381,7 +6381,7 @@ var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     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)));
 });
@@ -6441,19 +6441,19 @@ var InputVariants = {
   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)'
     }
@@ -6462,19 +6462,19 @@ var InputVariants = {
     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'
     }
   },
@@ -6547,7 +6547,7 @@ var FieldContent = _ref => {
   // 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({
@@ -6562,7 +6562,7 @@ var FieldContent = _ref => {
     // 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',
@@ -6682,7 +6682,7 @@ var FieldLabel = _ref => {
       children,
       size = 'md',
       error = false,
-      color = 'theme.primary',
+      color = 'theme-primary',
       views = {
         label: {}
       }
@@ -6702,7 +6702,7 @@ var FieldLabel = _ref => {
     ,
     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);
@@ -6788,7 +6788,7 @@ var Item = _ref => {
     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
     ,
 
@@ -6841,7 +6841,7 @@ var SelectBox = _ref2 => {
     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
@@ -6919,7 +6919,7 @@ var DropDown = _ref5 => {
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "color.white",
+    backgroundColor: "color-white",
     transition: "all 0.2s ease",
     margin: 0,
     style: {
@@ -6942,7 +6942,7 @@ var DropDown = _ref5 => {
     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)))));
 };
@@ -6964,7 +6964,7 @@ var MultiSelect = _ref6 => {
     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"
@@ -7144,7 +7144,7 @@ var SelectView = _ref7 => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -7155,7 +7155,7 @@ var SelectView = _ref7 => {
     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,
@@ -7194,7 +7194,7 @@ var SelectView = _ref7 => {
     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',
@@ -7349,16 +7349,16 @@ var SliderPadding = {
 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: {
@@ -7460,7 +7460,7 @@ var SwitchView = _ref => {
   }, 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
@@ -7503,7 +7503,7 @@ var SwitchView = _ref => {
   }, 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)));
 };
@@ -7588,7 +7588,7 @@ var SelectorView = _ref => {
   }, 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",
@@ -7603,8 +7603,8 @@ var SelectorView = _ref => {
     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) {
@@ -7619,10 +7619,10 @@ var SelectorView = _ref => {
         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.
@@ -7635,8 +7635,8 @@ var SelectorView = _ref => {
         backgroundColor = 'transparent';
       } else {
         // Default fallback
-        borderColor = getColor('theme.primary');
-        textColor = getColor('theme.primary');
+        borderColor = getColor('theme-primary');
+        textColor = getColor('theme-primary');
         backgroundColor = 'transparent';
       }
     }
@@ -7653,10 +7653,10 @@ var SelectorView = _ref => {
     }, {
       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',
@@ -7787,7 +7787,7 @@ var TextAreaView = _ref => {
     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
@@ -7824,7 +7824,7 @@ var TextAreaView = _ref => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -7834,7 +7834,7 @@ var TextAreaView = _ref => {
     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",
@@ -7954,7 +7954,7 @@ var TextFieldView = _ref => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700', {
+  var IconColor = getColor('color-blueGray-700', {
     themeMode: elementMode ? elementMode : themeMode
   });
   var showLabel = !!(isFocused && label);
@@ -7981,7 +7981,7 @@ var TextFieldView = _ref => {
     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
@@ -8033,7 +8033,7 @@ var TextFieldView = _ref => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -8043,7 +8043,7 @@ var TextFieldView = _ref => {
     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,
@@ -8140,27 +8140,27 @@ var IconSizes$3 = {
  */
 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'
   }
 };
@@ -8173,8 +8173,8 @@ var StateStyles = {
       opacity: 0.9
     },
     unselected: {
-      borderColor: 'color.gray.400',
-      backgroundColor: 'color.gray.50'
+      borderColor: 'color-gray-400',
+      backgroundColor: 'color-gray-50'
     },
     indeterminate: {
       opacity: 0.9
@@ -8196,34 +8196,34 @@ var StateStyles = {
   },
   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'
     }
   }
 };
@@ -8285,7 +8285,7 @@ var CheckboxView = _ref => {
       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,
@@ -8328,7 +8328,7 @@ var CheckboxView = _ref => {
     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
     ,
@@ -8337,7 +8337,7 @@ var CheckboxView = _ref => {
     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"
@@ -8501,10 +8501,10 @@ var DefaultColorInputStyles = {
     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: {
@@ -8513,11 +8513,11 @@ var DefaultColorInputStyles = {
     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'
@@ -8585,14 +8585,14 @@ var Shapes$1 = {
  */
 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'
   },
@@ -8609,105 +8609,105 @@ var DefaultColorPalette = [
 // 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'
@@ -8761,21 +8761,21 @@ var ColorInputView = _ref => {
   // 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,
@@ -8803,10 +8803,10 @@ var ColorInputView = _ref => {
     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
@@ -8818,14 +8818,14 @@ var ColorInputView = _ref => {
     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,
@@ -8833,7 +8833,7 @@ var ColorInputView = _ref => {
   }, /*#__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"
@@ -8845,14 +8845,14 @@ var ColorInputView = _ref => {
     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,
@@ -8860,7 +8860,7 @@ var ColorInputView = _ref => {
   }, /*#__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, {
@@ -8874,24 +8874,24 @@ var ColorInputView = _ref => {
     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)));
 };
@@ -10461,7 +10461,7 @@ var DropDown$1 = _ref4 => {
     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,
@@ -10511,7 +10511,7 @@ var CountryPickerView = _ref5 => {
     getColor,
     themeMode
   } = appStudio.useTheme();
-  var IconColor = getColor('color.blueGray.700', {
+  var IconColor = getColor('color-blueGray-700', {
     themeMode: elementMode ? elementMode : themeMode
   });
   var handleFocus = () => setIsFocused(true);
@@ -10552,7 +10552,7 @@ var CountryPickerView = _ref5 => {
     },
     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, {
@@ -10569,17 +10569,17 @@ var CountryPickerView = _ref5 => {
     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,
@@ -10696,7 +10696,7 @@ var DatePickerView = _ref => {
     },
     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, {
@@ -10710,7 +10710,7 @@ var DatePickerView = _ref => {
     shape: shape,
     views: views,
     shadow: shadow,
-    color: 'theme.primary',
+    color: 'theme-primary',
     variant: variant,
     value: date,
     isHovered: isHovered,
@@ -10722,7 +10722,7 @@ var DatePickerView = _ref => {
     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,
@@ -10950,7 +10950,7 @@ var ComboBoxView = _ref => {
   }, 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',
@@ -10962,11 +10962,11 @@ var ComboBoxView = _ref => {
   }, 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",
@@ -10987,7 +10987,7 @@ var ComboBoxView = _ref => {
     isClearable: false,
     left: /*#__PURE__*/React__default.createElement(SearchIcon, {
       widthHeight: 16,
-      color: "color.gray.400"
+      color: "color-gray-400"
     }),
     views: {
       container: Object.assign({
@@ -11007,19 +11007,19 @@ var ComboBoxView = _ref => {
     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")))))));
 };
@@ -11299,30 +11299,30 @@ var TagChip = _ref => {
     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),
@@ -11331,11 +11331,11 @@ var TagChip = _ref => {
       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'
   }))));
 };
 /**
@@ -11390,7 +11390,7 @@ var TagInputView = _ref2 => {
     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);
@@ -11451,7 +11451,7 @@ var TagInputView = _ref2 => {
     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));
 };
@@ -11900,7 +11900,7 @@ var OTPInputView = _ref => {
       views: views,
       variant: variant,
       value: slot.char || '',
-      color: 'theme.primary',
+      color: 'theme-primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -11920,13 +11920,13 @@ var OTPInputView = _ref => {
     }, 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',
@@ -11963,7 +11963,7 @@ var OTPInputView = _ref => {
     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,
@@ -12461,10 +12461,10 @@ var DefaultAgentChatStyles = {
     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'
@@ -12472,14 +12472,14 @@ var DefaultAgentChatStyles = {
   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'
   },
@@ -12493,15 +12493,15 @@ var DefaultAgentChatStyles = {
   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: {
@@ -12511,29 +12511,29 @@ var DefaultAgentChatStyles = {
     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'
@@ -12546,14 +12546,14 @@ var DefaultAgentChatStyles = {
   },
   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',
@@ -12563,20 +12563,20 @@ var DefaultAgentChatStyles = {
     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'
   },
@@ -12587,7 +12587,7 @@ var DefaultAgentChatStyles = {
     width: '20px',
     height: '20px',
     borderRadius: '50%',
-    backgroundColor: 'color.black.900',
+    backgroundColor: 'color-black-900',
     color: 'white',
     border: 'none',
     cursor: 'pointer',
@@ -12602,7 +12602,7 @@ var DefaultAgentChatStyles = {
     alignItems: 'center',
     gap: '8px',
     padding: '12px',
-    backgroundColor: 'color.gray.100',
+    backgroundColor: 'color-gray-100',
     borderRadius: '8px',
     maxWidth: '80px',
     alignSelf: 'flex-start'
@@ -12611,27 +12611,27 @@ var DefaultAgentChatStyles = {
     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',
@@ -12644,13 +12644,13 @@ var DefaultAgentChatStyles = {
     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'
@@ -12670,8 +12670,8 @@ var DefaultAgentChatStyles = {
   runProgress: {
     padding: '12px 16px',
     borderBottom: '1px solid',
-    borderBottomColor: 'color.gray.200',
-    backgroundColor: 'color.gray.50'
+    borderBottomColor: 'color-gray-200',
+    backgroundColor: 'color-gray-50'
   }
 };
 /**
@@ -12682,7 +12682,7 @@ var DefaultChatInputStyles = {
     width: '100%',
     maxWidth: '100%',
     borderRadius: '12px',
-    backgroundColor: 'color.white',
+    backgroundColor: 'color-white',
     transition: 'all 0.2s ease',
     media: {
       mobile: {
@@ -12694,10 +12694,10 @@ var DefaultChatInputStyles = {
     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',
@@ -12712,8 +12712,8 @@ var DefaultChatInputStyles = {
     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',
@@ -12738,22 +12738,22 @@ var DefaultChatInputStyles = {
     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'
   },
@@ -12762,8 +12762,8 @@ var DefaultChatInputStyles = {
     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: {
@@ -12778,7 +12778,7 @@ var DefaultChatInputStyles = {
     padding: '0 12px',
     borderRadius: '8px',
     backgroundColor: 'transparent',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     transition: 'all 0.2s ease',
     media: {
       mobile: {
@@ -12792,7 +12792,7 @@ var DefaultChatInputStyles = {
     padding: '0 12px',
     borderRadius: '8px',
     backgroundColor: 'transparent',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     transition: 'all 0.2s ease'
   },
   loadingIndicator: {
@@ -12847,16 +12847,16 @@ var Sizes$2 = {
  */
 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',
@@ -13202,7 +13202,7 @@ var AttachmentGroup = _ref => {
       gap: "6px",
       padding: "4px 8px",
       borderRadius: "6px",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       animate: {
         from: {
           opacity: 0,
@@ -13232,17 +13232,17 @@ var AttachmentGroup = _ref => {
     })), 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();
@@ -13540,7 +13540,7 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     position: "absolute",
     top: "8px",
     left: "8px",
-    color: "color.gray.400",
+    color: "color-gray-400",
     pointerEvents: "none",
     fontSize: "14px",
     zIndex: 1
@@ -13563,16 +13563,16 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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,
@@ -13586,7 +13586,7 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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",
@@ -13594,17 +13594,17 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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',
@@ -13616,9 +13616,9 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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,
@@ -13632,7 +13632,7 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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",
@@ -13640,17 +13640,17 @@ var EditableInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     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',
@@ -13684,17 +13684,17 @@ var PromptExamples = _ref => {
     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)))));
 };
 
@@ -13741,13 +13741,13 @@ var AudioRecorder = _ref => {
     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,
@@ -13885,7 +13885,7 @@ var ChatInputView = _ref => {
       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%",
@@ -13900,7 +13900,7 @@ var ChatInputView = _ref => {
   }, 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,
@@ -13961,10 +13961,10 @@ var ChatInputView = _ref => {
         // 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)
     },
@@ -13978,7 +13978,7 @@ var ChatInputView = _ref => {
     },
     textProps: {
       fontSize: '14px',
-      color: 'color.gray.600'
+      color: 'color-gray-600'
     },
     validateFile: file => {
       if (file.size > 50 * 1024 * 1024) {
@@ -14004,15 +14004,15 @@ var ChatInputView = _ref => {
     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,
@@ -14021,13 +14021,13 @@ var ChatInputView = _ref => {
   })) : 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)));
 };
@@ -14093,7 +14093,7 @@ var ColorInputComponent$1 = props => {
   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;
 
@@ -14484,14 +14484,14 @@ var SliderShapes = {
 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'
     }
   };
@@ -14556,7 +14556,7 @@ var SliderView = _ref => {
       isDisabled = false,
       showValue = false,
       showTooltip = false,
-      backgroundColor = 'theme.primary',
+      backgroundColor = 'theme-primary',
       label,
       helperText,
       themeMode: elementMode,
@@ -14591,7 +14591,7 @@ var SliderView = _ref => {
   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, {
@@ -14617,7 +14617,7 @@ var SliderView = _ref => {
     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",
@@ -14666,7 +14666,7 @@ var SliderView = _ref => {
     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',
@@ -14682,8 +14682,8 @@ var SliderView = _ref => {
     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",
@@ -14707,7 +14707,7 @@ var SliderView = _ref => {
     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",
@@ -14766,7 +14766,7 @@ var SliderView = _ref => {
     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%)',
@@ -14785,8 +14785,8 @@ var SliderView = _ref => {
   }, 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
@@ -15041,7 +15041,7 @@ var AttachmentPreview = _ref => {
       gap: "6px",
       padding: "4px 8px",
       borderRadius: "6px",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       position: "relative",
       animate: {
         from: {
@@ -15076,19 +15076,19 @@ var AttachmentPreview = _ref => {
     })), 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",
@@ -15098,7 +15098,7 @@ var AttachmentPreview = _ref => {
       minWidth: "20px",
       minHeight: "20px",
       borderRadius: "50%",
-      backgroundColor: "color.red.500",
+      backgroundColor: "color-red-500",
       color: "white",
       fontSize: 14,
       fontWeight: "bold",
@@ -15109,7 +15109,7 @@ var AttachmentPreview = _ref => {
       cursor: "pointer",
       border: "2px solid white",
       _hover: {
-        backgroundColor: 'color.red.600'
+        backgroundColor: 'color-red-600'
       },
       onClick: e => {
         e.stopPropagation();
@@ -15182,7 +15182,7 @@ var MediaPreview = _ref => {
     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, {
@@ -15209,7 +15209,7 @@ var MediaPreview = _ref => {
     onClick: e => e.stopPropagation()
   })), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React__default.createElement(FileIcon, {
     widthHeight: 24,
-    color: "color.gray.600"
+    color: "color-gray-600"
   })));
 };
 
@@ -15344,13 +15344,13 @@ var ModalTypography = {
     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'
   }
 };
 
@@ -15391,7 +15391,7 @@ var ModalOverlay = _ref => {
     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
@@ -15423,7 +15423,7 @@ var ModalContainer = _ref2 => {
   };
   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,
@@ -15441,7 +15441,7 @@ var ModalContainer = _ref2 => {
 var ModalHeader = _ref3 => {
   var {
       children,
-      buttonColor = 'theme.primary',
+      buttonColor = 'theme-primary',
       iconSize = 'md',
       buttonPosition = 'right',
       views
@@ -15461,7 +15461,7 @@ var ModalHeader = _ref3 => {
     paddingHorizontal: 24,
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
-    borderBottomColor: "color.gray.200",
+    borderBottomColor: "color-gray-200",
     media: {
       mobile: {
         paddingVertical: 12,
@@ -15506,7 +15506,7 @@ var ModalFooter = _ref5 => {
     paddingHorizontal: 24,
     borderTopWidth: "1px",
     borderTopStyle: "solid",
-    borderTopColor: "color.gray.200",
+    borderTopColor: "color-gray-200",
     gap: 12,
     media: {
       mobile: {
@@ -15586,7 +15586,7 @@ var DrawerPlacements = {
     height: '100vh',
     borderRightWidth: '1px',
     borderRightStyle: 'solid',
-    borderRightColor: 'color.gray.200'
+    borderRightColor: 'color-gray-200'
   },
   right: {
     top: 0,
@@ -15595,7 +15595,7 @@ var DrawerPlacements = {
     height: '100vh',
     borderLeftWidth: '1px',
     borderLeftStyle: 'solid',
-    borderLeftColor: 'color.gray.200'
+    borderLeftColor: 'color-gray-200'
   },
   top: {
     top: 0,
@@ -15604,7 +15604,7 @@ var DrawerPlacements = {
     width: '100vw',
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: 'color.gray.200'
+    borderBottomColor: 'color-gray-200'
   },
   bottom: {
     bottom: 0,
@@ -15613,7 +15613,7 @@ var DrawerPlacements = {
     width: '100vw',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: 'color.gray.200'
+    borderTopColor: 'color-gray-200'
   }
 };
 
@@ -15660,7 +15660,7 @@ var DrawerOverlay = _ref => {
     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);
@@ -15685,7 +15685,7 @@ var DrawerContainer = _ref2 => {
   };
   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"
@@ -15704,13 +15704,13 @@ var DrawerHeader = _ref3 => {
     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);
@@ -15735,7 +15735,7 @@ var DrawerFooter = _ref5 => {
     paddingHorizontal: 24,
     paddingVertical: 16,
     borderTopWidth: "1px",
-    borderTopColor: "color.gray.200",
+    borderTopColor: "color-gray-200",
     alignItems: "center",
     justifyContent: "flex-end",
     gap: 12
@@ -15868,20 +15868,20 @@ var NavigationMenuSizes = {
 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'
   }
 };
@@ -15909,15 +15909,15 @@ var NavigationMenuOrientations = {
  */
 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: {
@@ -16289,7 +16289,7 @@ var NavigationMenuContent = _ref5 => {
     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",
@@ -16471,7 +16471,7 @@ var DefaultTableStyles = {
     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: {
@@ -16482,15 +16482,15 @@ var DefaultTableStyles = {
     }
   },
   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: {
@@ -16503,8 +16503,8 @@ var DefaultTableStyles = {
     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',
@@ -16515,22 +16515,22 @@ var DefaultTableStyles = {
   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: {
@@ -16756,17 +16756,17 @@ var TabHeader = _ref => {
     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'
       }
     }
   };
@@ -16851,7 +16851,7 @@ var TabsView = _ref => {
     }, 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);
@@ -16898,7 +16898,7 @@ var TabsList = _ref2 => {
   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
@@ -16924,12 +16924,12 @@ var TabsTrigger = _ref3 => {
     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);
@@ -17113,7 +17113,7 @@ var HighlightStyles = {
   }),
   background: color => ({
     backgroundColor: color,
-    color: 'color.white',
+    color: 'color-white',
     padding: '0 8px',
     borderRadius: '4px'
   }),
@@ -17136,6 +17136,9 @@ var HighlightStyles = {
     color: color,
     textShadow: "0 0 10px " + color + "80, 0 0 20px " + color + "40, 0 0 30px " + color + "20"
   }),
+  solid: color => ({
+    color: color
+  }),
   default: () => ({})
 };
 
@@ -17442,8 +17445,8 @@ var TitleView = _ref => {
   var {
       children,
       highlightText,
-      highlightStyle = 'default',
-      highlightColor = 'theme.primary',
+      highlightStyle = 'solid',
+      highlightColor = 'theme-primary',
       highlightSecondaryColor,
       size = 'lg',
       views,
@@ -17464,34 +17467,6 @@ var TitleView = _ref => {
     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,
@@ -17513,7 +17488,7 @@ var TitleView = _ref => {
   }, 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;
@@ -17583,11 +17558,11 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, 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",
@@ -17603,7 +17578,7 @@ var TitleView = _ref => {
     }, !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));
 };
 
 /**
@@ -17623,7 +17598,7 @@ var TitleView = _ref => {
  *
  * @example
  * // With highlighting
- * <Title highlightText="Platform" highlightStyle="background" highlightColor="theme.primary">
+ * <Title highlightText="Platform" highlightStyle="background" highlightColor="theme-primary">
  *   Welcome to Our Platform
  * </Title>
  *
@@ -17642,8 +17617,8 @@ var TitleView = _ref => {
  * <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>
@@ -17686,12 +17661,12 @@ var getToggleVariants = (color, isLight) => ({
     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'
@@ -17704,12 +17679,12 @@ var getToggleVariants = (color, isLight) => ({
     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'
@@ -17765,8 +17740,8 @@ var ToggleView = _ref => {
   } = 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);
@@ -17797,7 +17772,7 @@ var ToggleView = _ref => {
     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);
 };
 
@@ -18119,27 +18094,27 @@ var DropdownMenuSizes = {
 };
 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,
@@ -18384,7 +18359,7 @@ var DropdownMenuItem = _ref4 => {
     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
@@ -18414,7 +18389,7 @@ var DropdownMenuDivider = _ref5 => {
     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));
 };
@@ -18629,11 +18604,11 @@ var DefaultColorPickerStyles = {
     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'
@@ -18656,7 +18631,7 @@ var DefaultColorPickerStyles = {
     marginBottom: '12px'
   },
   recentColors: {
-    borderTop: '1px solid color.gray.200',
+    borderTop: '1px solid color-gray-200',
     paddingTop: '12px'
   }
 };
@@ -18712,25 +18687,25 @@ var Shapes$3 = {
  */
 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'
   }
 };
 /**
@@ -18740,133 +18715,133 @@ var DefaultColorPalette$1 = [
 // 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'
 }];
 
@@ -18912,7 +18887,7 @@ var ColorPickerView = _ref => {
   // 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'
@@ -18921,11 +18896,11 @@ var ColorPickerView = _ref => {
   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,
@@ -18940,13 +18915,13 @@ var ColorPickerView = _ref => {
     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
@@ -18958,14 +18933,14 @@ var ColorPickerView = _ref => {
     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,
@@ -18990,7 +18965,7 @@ var ColorPickerView = _ref => {
     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,
@@ -19008,13 +18983,13 @@ var ColorPickerView = _ref => {
       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,
@@ -19027,7 +19002,7 @@ var ColorPickerView = _ref => {
     backgroundColor: color,
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: "color.gray.300",
+    borderColor: "color-gray-300",
     cursor: "pointer",
     onClick: () => handleColorSelect(color),
     title: color,
@@ -19035,7 +19010,7 @@ var ColorPickerView = _ref => {
       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)));
 };
@@ -19072,11 +19047,11 @@ var DefaultEmojiPickerStyles = {
     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',
@@ -19088,7 +19063,7 @@ var DefaultEmojiPickerStyles = {
   },
   categoryTabs: {
     display: 'flex',
-    borderBottom: '1px solid color.gray.200',
+    borderBottom: '1px solid color-gray-200',
     marginBottom: '12px',
     overflowX: 'auto'
   },
@@ -19099,7 +19074,7 @@ var DefaultEmojiPickerStyles = {
     transition: 'all 0.2s ease',
     fontSize: '14px',
     fontWeight: '500',
-    color: 'color.gray.600',
+    color: 'color-gray-600',
     whiteSpace: 'nowrap'
   },
   emojiGrid: {
@@ -19109,7 +19084,7 @@ var DefaultEmojiPickerStyles = {
     maxHeight: '240px',
     overflowY: 'auto',
     padding: '4px',
-    color: 'color.black'
+    color: 'color-black'
   },
   emoji: {
     width: '32px',
@@ -19123,7 +19098,7 @@ var DefaultEmojiPickerStyles = {
     transition: 'all 0.2s ease'
   },
   recentEmojis: {
-    borderBottom: '1px solid color.gray.200',
+    borderBottom: '1px solid color-gray-200',
     marginBottom: '12px',
     paddingBottom: '12px'
   }
@@ -19180,25 +19155,25 @@ var Shapes$4 = {
  */
 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'
   }
 };
 /**
@@ -21282,7 +21257,7 @@ var EmojiPickerView = _ref => {
   // 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'
@@ -21300,7 +21275,7 @@ var EmojiPickerView = _ref => {
   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,
@@ -21309,11 +21284,11 @@ var EmojiPickerView = _ref => {
     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
@@ -21325,8 +21300,8 @@ var EmojiPickerView = _ref => {
   }))), 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)
@@ -21336,18 +21311,18 @@ var EmojiPickerView = _ref => {
     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)));
 };
@@ -21427,18 +21402,18 @@ var MenubarSizes = {
 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 = {
@@ -21451,11 +21426,11 @@ var MenubarOrientations = {
 };
 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,
@@ -21724,7 +21699,7 @@ var MenubarContent = _ref5 => {
     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",
@@ -21770,7 +21745,7 @@ var MenubarSeparator = _ref7 => {
   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));
 };
@@ -21967,26 +21942,26 @@ var PaginationSizes = {
 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'
     }
   }
 };
@@ -22002,10 +21977,10 @@ var PaginationShapes = {
   }
 };
 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 = {
@@ -22147,7 +22122,7 @@ var PaginationView = _ref => {
     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,
@@ -22155,8 +22130,8 @@ var PaginationView = _ref => {
     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
@@ -22217,14 +22192,14 @@ var ProgressBarView = _ref => {
       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,
@@ -22369,15 +22344,15 @@ var DefaultSeparatorStyles = {
     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'
   }
 };
@@ -22400,7 +22375,7 @@ var SeparatorView = _ref => {
     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
@@ -22607,42 +22582,42 @@ var getThemes$2 = themeMode => {
   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'
       }
     }
   };
@@ -22764,32 +22739,32 @@ var SidebarSizes = {
 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'
     }
   };
@@ -22805,13 +22780,13 @@ var SidebarPositions = {
     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'
   }
 };
 /**
@@ -22883,7 +22858,7 @@ var SidebarHeader = _ref2 => {
     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, {
@@ -22901,7 +22876,7 @@ var SidebarHeader = _ref2 => {
     backgroundColor: "transparent",
     cursor: "pointer",
     _hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     onClick: toggleExpanded,
     "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar'
@@ -22924,7 +22899,7 @@ var SidebarHeader = _ref2 => {
     backgroundColor: "transparent",
     cursor: "pointer",
     _hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     },
     onClick: toggleExpanded,
     "aria-label": isExpanded ? 'Collapse sidebar' : 'Expand sidebar'
@@ -22966,7 +22941,7 @@ var SidebarFooter = _ref4 => {
     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
@@ -23009,7 +22984,7 @@ var SidebarView = _ref5 => {
     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({
@@ -23470,28 +23445,28 @@ var getHandle = themeMode => {
     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'
       }
     }
   };
@@ -23503,13 +23478,13 @@ var HandleIconStyles = {
   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'
   }
 };
@@ -23597,7 +23572,7 @@ var ResizablePanel = _ref2 => {
       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,
@@ -23709,9 +23684,9 @@ var ResizableHandle = _ref3 => {
     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",
@@ -23723,7 +23698,7 @@ var ResizableHandle = _ref3 => {
     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",
@@ -23737,11 +23712,11 @@ var ResizableHandle = _ref3 => {
   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__*/
@@ -23749,7 +23724,7 @@ var ResizableHandle = _ref3 => {
   React__default.createElement(appStudio.View, {
     width: "6px",
     height: "2px",
-    backgroundColor: "color.gray.600"
+    backgroundColor: "color-gray-600"
   }))))));
 };
 // Main Resizable View component
@@ -23862,50 +23837,50 @@ Resizable.Handle = ResizableHandle;
 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'
     }
   }
 };
@@ -24059,37 +24034,40 @@ var ToastView = _ref => {
   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
         });
     }
   };
@@ -24443,24 +24421,24 @@ var CommandSizes = {
 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)'
     }
   };
@@ -24474,7 +24452,7 @@ var CommandInputStyles = {
   padding: '12px 16px',
   borderBottomWidth: '1px',
   borderBottomStyle: 'solid',
-  borderBottomColor: 'color.gray.200'
+  borderBottomColor: 'color-gray-200'
 };
 var CommandListStyles = {
   overflow: 'auto',
@@ -24487,7 +24465,7 @@ var CommandGroupHeadingStyles = {
   padding: '8px 16px',
   fontSize: '12px',
   fontWeight: 'bold',
-  color: 'color.gray.500',
+  color: 'color-gray-500',
   textTransform: 'uppercase'
 };
 var CommandItemStyles = {
@@ -24499,13 +24477,13 @@ var CommandItemStyles = {
   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 = {
@@ -24520,7 +24498,7 @@ var CommandItemIconStyles = {
   alignItems: 'center',
   justifyContent: 'center',
   marginRight: '12px',
-  color: 'color.gray.500'
+  color: 'color-gray-500'
 };
 var CommandItemContentStyles = {
   display: 'flex',
@@ -24533,7 +24511,7 @@ var CommandItemNameStyles = {
 };
 var CommandItemDescriptionStyles = {
   fontSize: '12px',
-  color: 'color.gray.500',
+  color: 'color-gray-500',
   marginTop: '2px'
 };
 var CommandItemShortcutStyles = {
@@ -24541,14 +24519,14 @@ var CommandItemShortcutStyles = {
   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 = {
@@ -24558,9 +24536,9 @@ var CommandFooterStyles = {
   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"],
@@ -24605,7 +24583,7 @@ var CommandInput = _ref2 => {
   }, []);
   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",
@@ -24956,25 +24934,25 @@ var TooltipSizes = {
 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'
@@ -25449,33 +25427,33 @@ var PositionMap = {
  */
 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'
   }]
 };
@@ -25581,14 +25559,9 @@ var GradientView = _ref => {
       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
@@ -25612,12 +25585,10 @@ var GradientView = _ref => {
   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 {};
@@ -25640,16 +25611,16 @@ var GradientView = _ref => {
  *
  * @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"
  * >
@@ -25784,7 +25755,7 @@ var Wall = _ref3 => {
     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, {
@@ -25795,7 +25766,7 @@ var Wall = _ref3 => {
     height: squareSize / 3,
     width: squareSize,
     borderStyle: "solid",
-    borderColor: "color.gray.200",
+    borderColor: "color-gray-200",
     borderWidth: 0.5,
     backgroundColor: "transparent",
     cursor: "pointer",
@@ -25839,7 +25810,7 @@ var Particles = _ref4 => {
     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;
@@ -25923,7 +25894,7 @@ var Grid = _ref5 => {
     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, {
@@ -25999,7 +25970,7 @@ var Ripples = _ref6 => {
     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",
@@ -26125,15 +26096,15 @@ var BackgroundGradient = _ref9 => {
 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)";
@@ -26206,7 +26177,7 @@ var BackgroundLayout = /*#__PURE__*/React__default.forwardRef((_ref12, ref) => {
   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',
@@ -26306,7 +26277,7 @@ BackgroundView.Layout = BackgroundLayout;
  *
  * @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>
  */
@@ -26607,7 +26578,7 @@ var ChatWidgetView = _ref => {
     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, {
@@ -26639,7 +26610,7 @@ var ChatWidgetView = _ref => {
       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,
@@ -26656,7 +26627,7 @@ var ChatWidgetView = _ref => {
     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",
@@ -26669,7 +26640,7 @@ var ChatWidgetView = _ref => {
     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
@@ -26678,11 +26649,11 @@ var ChatWidgetView = _ref => {
     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,
@@ -26704,20 +26675,20 @@ var ChatWidgetView = _ref => {
     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: {
@@ -26726,7 +26697,7 @@ var ChatWidgetView = _ref => {
     }
   }), /*#__PURE__*/React__default.createElement(SendIcon, {
     widthHeight: 16,
-    color: "color.white",
+    color: "color-white",
     filled: false
   }))))));
 };
@@ -26756,10 +26727,10 @@ var ChatBubble = _ref2 => {
       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)));
   }
@@ -26780,16 +26751,16 @@ var ChatBubble = _ref2 => {
       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))));
   }
@@ -26837,12 +26808,12 @@ var ChatBubble = _ref2 => {
     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)",
@@ -26850,7 +26821,7 @@ var ChatBubble = _ref2 => {
     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",
@@ -26883,7 +26854,7 @@ var ChatBubble = _ref2 => {
     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))))))));
 };
@@ -27156,7 +27127,7 @@ var ChatWidgetWidget = _ref => {
     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),
@@ -27170,7 +27141,7 @@ var ChatWidgetWidget = _ref => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseIcon, {
     widthHeight: 16,
-    color: "color.gray.500"
+    color: "color-gray-500"
   }))), /*#__PURE__*/React__default.createElement(ChatWidget, {
     messages: messages,
     onSubmit: handleSubmit,
@@ -27197,7 +27168,7 @@ var ChatWidgetWidget = _ref => {
     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",