@app-studio/web 0.9.84 → 0.9.85

package/dist/web.esm.js

@@ -193,17 +193,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'
     }
   }
 };
@@ -259,7 +259,7 @@ var AccordionItem = _ref2 => {
   return /*#__PURE__*/React.createElement(View, Object.assign({
     borderWidth: 1,
     borderStyle: "solid",
-    borderColor: "color.gray.200",
+    borderColor: "color-gray-200",
     marginBottom: 8,
     overflow: "hidden",
     opacity: isDisabled ? 0.5 : 1,
@@ -313,7 +313,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
@@ -359,7 +359,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,
@@ -829,67 +829,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'
       }
     }
   };
@@ -1046,7 +1046,7 @@ var AudioWaveformView = _ref => {
   }, viewProps), bars.map((amplitude, index) => (/*#__PURE__*/React.createElement(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"
     }
@@ -1148,69 +1148,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'
     }
   }
@@ -1619,7 +1619,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.createElement(Text, Object.assign({
         fontSize: 12
       }, views == null ? void 0 : views.text), progress, "%"));
@@ -1799,7 +1799,7 @@ function AudioInputView(_ref) {
         height: '36px',
         cursor: 'pointer',
         _hover: {
-          backgroundColor: 'color.gray.100'
+          backgroundColor: 'color-gray-100'
         }
       }
     },
@@ -1813,7 +1813,7 @@ function AudioInputView(_ref) {
     },
     textProps: {
       fontSize: '14px',
-      color: 'color.gray.600'
+      color: 'color-gray-600'
     },
     validateFile: file => {
       if (file.size > 100 * 1024 * 1024) {
@@ -1833,13 +1833,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.createElement(MicrophoneIcon, {
     widthHeight: 16,
@@ -1857,13 +1857,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.createElement(PlayIcon, {
     widthHeight: 16,
@@ -1882,13 +1882,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.createElement(StopIcon, {
     widthHeight: 16,
@@ -2141,13 +2141,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',
@@ -2177,7 +2177,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.createElement(Image, {
     alt: "IM",
@@ -2325,8 +2325,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',
@@ -2336,8 +2336,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: {
@@ -2345,14 +2345,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',
@@ -2514,7 +2514,7 @@ var DefaultSpinner = _ref => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
@@ -2563,7 +2563,7 @@ var Dotted = _ref2 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
@@ -2611,7 +2611,7 @@ var Quarter = _ref3 => {
   var {
       size = 'md',
       speed = 'normal',
-      color = 'theme.loading',
+      color = 'theme-loading',
       themeMode: elementMode
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
@@ -2663,8 +2663,8 @@ var LoaderView = _ref4 => {
   var {
     getColor
   } = 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,
@@ -3312,22 +3312,22 @@ var ButtonView = _ref5 => {
     getColorHex
   } = 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 = useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
@@ -3430,23 +3430,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',
@@ -3464,8 +3464,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'
@@ -3474,18 +3474,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'
     }
   };
 };
@@ -3813,7 +3813,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'
@@ -3822,7 +3822,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'
@@ -3831,7 +3831,7 @@ var IndicatorStyles = {
     minWidth: '24px',
     height: '24px',
     borderRadius: '50%',
-    backgroundColor: 'color.gray.300',
+    backgroundColor: 'color-gray-300',
     margin: '0 4px',
     cursor: 'pointer',
     display: 'flex',
@@ -3843,22 +3843,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',
@@ -3867,7 +3867,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
@@ -4235,17 +4235,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];
@@ -4294,18 +4294,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 = {
@@ -4361,12 +4361,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 => {
@@ -4602,7 +4602,7 @@ var BarChart = _ref => {
         backgroundColor: fillColor
       })), /*#__PURE__*/React.createElement(Text, {
         marginTop: "4px",
-        color: "color.gray.500",
+        color: "color-gray-500",
         fontSize: "12px"
       }, categoryLabel), /*#__PURE__*/React.createElement(View, {
         marginTop: "8px",
@@ -4612,7 +4612,7 @@ var BarChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Value"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, value.toLocaleString())), sharePercentage !== null && (/*#__PURE__*/React.createElement(View, {
@@ -4620,7 +4620,7 @@ var BarChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Share"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, sharePercentage + "%"))), /*#__PURE__*/React.createElement(View, {
@@ -4628,7 +4628,7 @@ var BarChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Category total"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, categoryTotal.toLocaleString()))));
@@ -4808,7 +4808,7 @@ var LineChart = _ref => {
           backgroundColor: lineColor
         })), /*#__PURE__*/React.createElement(Text, {
           marginTop: "4px",
-          color: "color.gray.500",
+          color: "color-gray-500",
           fontSize: "12px"
         }, categoryLabel), /*#__PURE__*/React.createElement(View, {
           marginTop: "8px",
@@ -4818,7 +4818,7 @@ var LineChart = _ref => {
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React.createElement(Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Value"), /*#__PURE__*/React.createElement(Text, {
           fontWeight: "medium"
         }, value.toLocaleString())), formattedDelta !== null && (/*#__PURE__*/React.createElement(View, {
@@ -4826,7 +4826,7 @@ var LineChart = _ref => {
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React.createElement(Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Change"), /*#__PURE__*/React.createElement(Text, {
           fontWeight: "medium"
         }, formattedDelta))), sharePercentage !== null && (/*#__PURE__*/React.createElement(View, {
@@ -4834,7 +4834,7 @@ var LineChart = _ref => {
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React.createElement(Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Share"), /*#__PURE__*/React.createElement(Text, {
           fontWeight: "medium"
         }, sharePercentage + "%"))), /*#__PURE__*/React.createElement(View, {
@@ -4842,7 +4842,7 @@ var LineChart = _ref => {
           display: "flex",
           justifyContent: "space-between"
         }, /*#__PURE__*/React.createElement(Text, {
-          color: "color.gray.500"
+          color: "color-gray-500"
         }, "Category total"), /*#__PURE__*/React.createElement(Text, {
           fontWeight: "medium"
         }, categoryTotal.toLocaleString()))));
@@ -5017,7 +5017,7 @@ var PieChart = _ref => {
         backgroundColor: slice.color
       })), /*#__PURE__*/React.createElement(Text, {
         marginTop: "4px",
-        color: "color.gray.500",
+        color: "color-gray-500",
         fontSize: "12px"
       }, "Slice ", slice.index + 1, " of ", dataPoints.length), /*#__PURE__*/React.createElement(View, {
         marginTop: "8px",
@@ -5027,7 +5027,7 @@ var PieChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Value"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, slice.value.toLocaleString())), /*#__PURE__*/React.createElement(View, {
@@ -5035,7 +5035,7 @@ var PieChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Share"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, slice.percentage)), /*#__PURE__*/React.createElement(View, {
@@ -5043,7 +5043,7 @@ var PieChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Total"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, total.toLocaleString())), remainingShare !== null && (/*#__PURE__*/React.createElement(View, {
@@ -5051,7 +5051,7 @@ var PieChart = _ref => {
         display: "flex",
         justifyContent: "space-between"
       }, /*#__PURE__*/React.createElement(Text, {
-        color: "color.gray.500"
+        color: "color-gray-500"
       }, "Remaining"), /*#__PURE__*/React.createElement(Text, {
         fontWeight: "medium"
       }, remainingShare.toFixed(1) + "%")))));
@@ -5179,11 +5179,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",
@@ -5576,10 +5576,10 @@ var CookieConsentView = _ref => {
   }, title && (/*#__PURE__*/React.createElement(Text, Object.assign({
     fontWeight: "bold",
     fontSize: 18,
-    color: "color.black"
+    color: "color-black"
   }, views == null ? void 0 : views.title), title)), description && (/*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: 14,
-    color: "color.black"
+    color: "color-black"
   }, views == null ? void 0 : views.description), typeof description === 'string' ? description : description)), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     gap: 12,
     justifyContent: "flex-end",
@@ -5628,8 +5628,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' }
  *   }}
  * />
  */
@@ -5733,27 +5733,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,
@@ -6070,7 +6070,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
@@ -6120,7 +6120,7 @@ var ContextMenuDivider = _ref5 => {
     props = _objectWithoutPropertiesLoose(_ref5, _excluded4$5);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     height: "1px",
-    backgroundColor: "color.gray.200",
+    backgroundColor: "color-gray-200",
     margin: "4px 0",
     role: "separator",
     "aria-orientation": "horizontal"
@@ -6134,7 +6134,7 @@ var ContextMenuSeparator = _ref6 => {
     props = _objectWithoutPropertiesLoose(_ref6, _excluded5$1);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     height: "1px",
-    backgroundColor: "color.gray.200",
+    backgroundColor: "color-gray-200",
     margin: "4px 0",
     role: "separator",
     "aria-orientation": "horizontal"
@@ -6342,7 +6342,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
@@ -6374,7 +6374,7 @@ var FieldContainer = /*#__PURE__*/React.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)));
 });
@@ -6434,19 +6434,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)'
     }
@@ -6455,19 +6455,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'
     }
   },
@@ -6540,7 +6540,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.createElement(Horizontal
   // Layout properties
   , Object.assign({
@@ -6555,7 +6555,7 @@ var FieldContent = _ref => {
     // Visual properties
     borderStyle: "solid",
     borderColor: color,
-    backgroundColor: "color.white",
+    backgroundColor: "color-white",
     fontSize: Typography.fontSizes[size],
     // State properties
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'text',
@@ -6675,7 +6675,7 @@ var FieldLabel = _ref => {
       children,
       size = 'md',
       error = false,
-      color = 'theme.primary',
+      color = 'theme-primary',
       views = {
         label: {}
       }
@@ -6695,7 +6695,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);
@@ -6781,7 +6781,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
     ,
 
@@ -6834,7 +6834,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
@@ -6912,7 +6912,7 @@ var DropDown = _ref5 => {
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "color.white",
+    backgroundColor: "color-white",
     transition: "all 0.2s ease",
     margin: 0,
     style: {
@@ -6935,7 +6935,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)))));
 };
@@ -6957,7 +6957,7 @@ var MultiSelect = _ref6 => {
     padding: 8,
     alignItems: "center",
     borderRadius: "6px",
-    backgroundColor: "color.gray.200",
+    backgroundColor: "color-gray-200",
     fontSize: Typography.fontSizes[size],
     onClick: event => event.stopPropagation(),
     transition: "all 0.2s ease"
@@ -7137,7 +7137,7 @@ var SelectView = _ref7 => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -7148,7 +7148,7 @@ var SelectView = _ref7 => {
     position: "relative"
   }, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views), label)), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
     id: id,
@@ -7187,7 +7187,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',
@@ -7342,16 +7342,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: {
@@ -7453,7 +7453,7 @@ var SwitchView = _ref => {
   }, props)), labelPosition === 'left' && label && (/*#__PURE__*/React.createElement(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.createElement(View
   // Layout properties
@@ -7496,7 +7496,7 @@ var SwitchView = _ref => {
   }, inActiveChild))), labelPosition === 'right' && label && (/*#__PURE__*/React.createElement(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)));
 };
@@ -7581,7 +7581,7 @@ var SelectorView = _ref => {
   }, label && (/*#__PURE__*/React.createElement(Horizontal, {
     fontSize: "10px",
     letterSpacing: "wider",
-    color: "color.black.500",
+    color: "color-black-500",
     fontWeight: "bold",
     marginBottom: 12,
     alignItems: "center",
@@ -7596,8 +7596,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) {
@@ -7612,10 +7612,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.
@@ -7628,8 +7628,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';
       }
     }
@@ -7646,10 +7646,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',
@@ -7780,7 +7780,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
@@ -7817,7 +7817,7 @@ var TextAreaView = _ref => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -7827,7 +7827,7 @@ var TextAreaView = _ref => {
     onMouseLeave: handleHover
   }, views == null ? void 0 : views.content), /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "textarea",
@@ -7947,7 +7947,7 @@ var TextFieldView = _ref => {
     getColor,
     themeMode
   } = useTheme();
-  var IconColor = getColor('color.blueGray.700', {
+  var IconColor = getColor('color-blueGray-700', {
     themeMode: elementMode ? elementMode : themeMode
   });
   var showLabel = !!(isFocused && label);
@@ -7974,7 +7974,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
@@ -8026,7 +8026,7 @@ var TextFieldView = _ref => {
     shadow: shadow,
     variant: variant,
     value: value,
-    color: 'theme.primary',
+    color: 'theme-primary',
     isHovered: isHovered,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -8036,7 +8036,7 @@ var TextFieldView = _ref => {
     onMouseLeave: handleHover
   }, left, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views), label)), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
     id: id,
@@ -8133,27 +8133,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'
   }
 };
@@ -8166,8 +8166,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
@@ -8189,34 +8189,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'
     }
   }
 };
@@ -8278,7 +8278,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,
@@ -8321,7 +8321,7 @@ var CheckboxView = _ref => {
     fontWeight: "500" // Medium weight for better readability
   }, views == null ? void 0 : views.label), label))), infoText && (/*#__PURE__*/React.createElement(Text, Object.assign({
     marginLeft: labelPosition === 'left' ? 0 : 36,
-    color: "color.gray.500",
+    color: "color-gray-500",
     size: "sm",
     fontWeight: "400" // Regular weight
     ,
@@ -8330,7 +8330,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"
@@ -8494,10 +8494,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: {
@@ -8506,11 +8506,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'
@@ -8578,14 +8578,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'
   },
@@ -8602,105 +8602,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'
@@ -8754,21 +8754,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.createElement(View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React.createElement(Label, {
     htmlFor: id,
     size: size,
@@ -8796,10 +8796,10 @@ var ColorInputView = _ref => {
     backgroundColor: displayColor,
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: "color.gray.300"
+    borderColor: "color-gray-300"
   }), !isReadOnly && !isDisabled && (/*#__PURE__*/React.createElement(ChevronIcon, {
     widthHeight: 16,
-    color: "color.gray.500",
+    color: "color-gray-500",
     orientation: isOpen ? 'up' : 'down'
   }))), isOpen && (/*#__PURE__*/React.createElement(View, Object.assign({
     ref: dropdownRef
@@ -8811,14 +8811,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.createElement(Vertical, {
     gap: 8,
@@ -8826,7 +8826,7 @@ var ColorInputView = _ref => {
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontWeight: "500",
-    color: "color.gray.600"
+    color: "color-gray-600"
   }, "Recent Colors"), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     gap: 4,
     flexWrap: "wrap"
@@ -8838,14 +8838,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.createElement(Vertical, {
     gap: 8,
@@ -8853,7 +8853,7 @@ var ColorInputView = _ref => {
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontWeight: "500",
-    color: "color.gray.600"
+    color: "color-gray-600"
   }, "Custom Color"), /*#__PURE__*/React.createElement(Horizontal, {
     gap: 8
   }, /*#__PURE__*/React.createElement(TextField, {
@@ -8867,24 +8867,24 @@ var ColorInputView = _ref => {
     views: views == null ? void 0 : views.customInput
   }), /*#__PURE__*/React.createElement(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.createElement(Text, {
-    color: "color.white",
+    color: "color-white",
     fontSize: "12px",
     fontWeight: "500"
   }, "Add"))))))), helperText && (/*#__PURE__*/React.createElement(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.createElement(Text, Object.assign({
     fontSize: "12px",
-    color: "color.red.500",
+    color: "color-red-500",
     marginTop: "4px"
   }, views == null ? void 0 : views.error), error)));
 };
@@ -10454,7 +10454,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.createElement(DropDownItem, Object.assign({
     key: option.code,
@@ -10504,7 +10504,7 @@ var CountryPickerView = _ref5 => {
     getColor,
     themeMode
   } = useTheme();
-  var IconColor = getColor('color.blueGray.700', {
+  var IconColor = getColor('color-blueGray-700', {
     themeMode: elementMode ? elementMode : themeMode
   });
   var handleFocus = () => setIsFocused(true);
@@ -10545,7 +10545,7 @@ var CountryPickerView = _ref5 => {
     },
     fontSize: 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.createElement(FieldContainer, {
@@ -10562,17 +10562,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.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views), label)), /*#__PURE__*/React.createElement(CountrySelector, Object.assign({
     id: id,
@@ -10689,7 +10689,7 @@ var DatePickerView = _ref => {
     },
     fontSize: 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.createElement(FieldContainer, {
@@ -10703,7 +10703,7 @@ var DatePickerView = _ref => {
     shape: shape,
     views: views,
     shadow: shadow,
-    color: 'theme.primary',
+    color: 'theme-primary',
     variant: variant,
     value: date,
     isHovered: isHovered,
@@ -10715,7 +10715,7 @@ var DatePickerView = _ref => {
     onMouseLeave: handleHover
   }, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views), label)), /*#__PURE__*/React.createElement(DatePickerContent, Object.assign({
     id: id,
@@ -10943,7 +10943,7 @@ var ComboBoxView = _ref => {
   }, views == null ? void 0 : views.labelContainer), left, selectedItem.icon && selectedItem.label !== placeholder && (/*#__PURE__*/React.createElement(View, null, selectedItem.icon)), /*#__PURE__*/React.createElement(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',
@@ -10955,11 +10955,11 @@ var ComboBoxView = _ref => {
   }, right, /*#__PURE__*/React.createElement(ChevronIcon, {
     widthHeight: 16,
     orientation: isDropdownVisible ? 'up' : 'down',
-    color: "color.gray.500"
+    color: "color-gray-500"
   })))), isDropdownVisible && (/*#__PURE__*/React.createElement(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",
@@ -10980,7 +10980,7 @@ var ComboBoxView = _ref => {
     isClearable: false,
     left: /*#__PURE__*/React.createElement(SearchIcon, {
       widthHeight: 16,
-      color: "color.gray.400"
+      color: "color-gray-400"
     }),
     views: {
       container: Object.assign({
@@ -11000,19 +11000,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.createElement(Text, {
-    color: "color.gray.800"
+    color: "color-gray-800"
   }, item.label), /*#__PURE__*/React.createElement(React.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && (/*#__PURE__*/React.createElement(TickIcon, {
     widthHeight: 16,
-    color: "theme.primary"
+    color: "theme-primary"
   })))))))), filteredItems.length === 0 && (/*#__PURE__*/React.createElement(View, {
     padding: "12px"
   }, /*#__PURE__*/React.createElement(Text, {
-    color: "color.gray.500",
+    color: "color-gray-500",
     align: "center"
   }, "No items found")))))));
 };
@@ -11292,30 +11292,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.createElement(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.createElement(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),
@@ -11324,11 +11324,11 @@ var TagChip = _ref => {
       onRemove();
     },
     _hover: {
-      backgroundColor: 'color.red.50'
+      backgroundColor: 'color-red-50'
     }
   }, views == null ? void 0 : views.tagRemove), /*#__PURE__*/React.createElement(CloseIcon, {
     widthHeight: chipSize.iconSize,
-    color: isRemoveHovered ? 'color.red.500' : 'color.gray.400'
+    color: isRemoveHovered ? 'color-red-500' : 'color-gray-400'
   }))));
 };
 /**
@@ -11383,7 +11383,7 @@ var TagInputView = _ref2 => {
     outline: 'none',
     backgroundColor: 'transparent',
     fontSize: 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);
@@ -11444,7 +11444,7 @@ var TagInputView = _ref2 => {
     autoComplete: "off"
   }, inputStyles))), isMaxReached && (/*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: Typography.fontSizes[size],
-    color: "color.gray.500",
+    color: "color-gray-500",
     fontStyle: "italic"
   }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
 };
@@ -11893,7 +11893,7 @@ var OTPInputView = _ref => {
       views: views,
       variant: variant,
       value: slot.char || '',
-      color: 'theme.primary',
+      color: 'theme-primary',
       isHovered: isHovered,
       isDisabled: isDisabled,
       isReadOnly: isReadOnly,
@@ -11913,13 +11913,13 @@ var OTPInputView = _ref => {
     }, views.text), type === 'password' ? '•' : slot.char)) : slot.placeholderChar ? (/*#__PURE__*/React.createElement(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.createElement(View, {
       position: "absolute",
       width: "2px",
       height: "60%",
-      backgroundColor: "theme.primary",
+      backgroundColor: "theme-primary",
       animation: "blink 1s step-start infinite",
       style: {
         animationName: 'blink',
@@ -11956,7 +11956,7 @@ var OTPInputView = _ref => {
     views: views
   }, props), showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
-    color: 'theme.primary',
+    color: 'theme-primary',
     error: error
   }, views.label), label)), /*#__PURE__*/React.createElement(View, {
     ref: containerRef,
@@ -12454,10 +12454,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'
@@ -12465,14 +12465,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'
   },
@@ -12486,15 +12486,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: {
@@ -12504,29 +12504,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'
@@ -12539,14 +12539,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',
@@ -12556,20 +12556,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'
   },
@@ -12580,7 +12580,7 @@ var DefaultAgentChatStyles = {
     width: '20px',
     height: '20px',
     borderRadius: '50%',
-    backgroundColor: 'color.black.900',
+    backgroundColor: 'color-black-900',
     color: 'white',
     border: 'none',
     cursor: 'pointer',
@@ -12595,7 +12595,7 @@ var DefaultAgentChatStyles = {
     alignItems: 'center',
     gap: '8px',
     padding: '12px',
-    backgroundColor: 'color.gray.100',
+    backgroundColor: 'color-gray-100',
     borderRadius: '8px',
     maxWidth: '80px',
     alignSelf: 'flex-start'
@@ -12604,27 +12604,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',
@@ -12637,13 +12637,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'
@@ -12663,8 +12663,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'
   }
 };
 /**
@@ -12675,7 +12675,7 @@ var DefaultChatInputStyles = {
     width: '100%',
     maxWidth: '100%',
     borderRadius: '12px',
-    backgroundColor: 'color.white',
+    backgroundColor: 'color-white',
     transition: 'all 0.2s ease',
     media: {
       mobile: {
@@ -12687,10 +12687,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',
@@ -12705,8 +12705,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',
@@ -12731,22 +12731,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'
   },
@@ -12755,8 +12755,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: {
@@ -12771,7 +12771,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: {
@@ -12785,7 +12785,7 @@ var DefaultChatInputStyles = {
     padding: '0 12px',
     borderRadius: '8px',
     backgroundColor: 'transparent',
-    color: 'color.gray.500',
+    color: 'color-gray-500',
     transition: 'all 0.2s ease'
   },
   loadingIndicator: {
@@ -12840,16 +12840,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',
@@ -13195,7 +13195,7 @@ var AttachmentGroup = _ref => {
       gap: "6px",
       padding: "4px 8px",
       borderRadius: "6px",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       animate: {
         from: {
           opacity: 0,
@@ -13225,17 +13225,17 @@ var AttachmentGroup = _ref => {
     })), isAudio && (/*#__PURE__*/React.createElement(Center, {
       width: "60px",
       height: "60px",
-      backgroundColor: "color.gray.200"
+      backgroundColor: "color-gray-200"
     }, /*#__PURE__*/React.createElement(AudioIcon, {
       widthHeight: 24,
-      color: "color.black"
+      color: "color-black"
     }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React.createElement(Center, {
       width: "60px",
       height: "60px",
-      backgroundColor: "color.gray.200"
+      backgroundColor: "color-gray-200"
     }, /*#__PURE__*/React.createElement(FileIcon, {
       widthHeight: 24,
-      color: "color.black"
+      color: "color-black"
     }))), onRemove && (/*#__PURE__*/React.createElement(Button$1, Object.assign({}, DefaultAgentChatStyles.attachmentRemove, {
       onClick: e => {
         e.stopPropagation();
@@ -13533,7 +13533,7 @@ var EditableInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     position: "absolute",
     top: "8px",
     left: "8px",
-    color: "color.gray.400",
+    color: "color-gray-400",
     pointerEvents: "none",
     fontSize: "14px",
     zIndex: 1
@@ -13556,16 +13556,16 @@ var EditableInput = /*#__PURE__*/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.createElement(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,
@@ -13579,7 +13579,7 @@ var EditableInput = /*#__PURE__*/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",
@@ -13587,17 +13587,17 @@ var EditableInput = /*#__PURE__*/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.createElement(Vertical, {
     gap: 4
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "14px",
-    color: "color.gray.900",
+    color: "color-gray-900",
     fontWeight: "medium"
   }, mentionTrigger, mention.name), mention.description && (/*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
-    color: "color.gray.600"
+    color: "color-gray-600"
   }, mention.description)))))), process.env.NODE_ENV === 'development' && (/*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: '8px',
@@ -13609,9 +13609,9 @@ var EditableInput = /*#__PURE__*/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,
@@ -13625,7 +13625,7 @@ var EditableInput = /*#__PURE__*/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",
@@ -13633,17 +13633,17 @@ var EditableInput = /*#__PURE__*/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.createElement(Vertical, {
     gap: 4
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "14px",
-    color: "color.gray.900",
+    color: "color-gray-900",
     fontWeight: "medium"
   }, suggestion.text), suggestion.description && (/*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
-    color: "color.gray.600"
+    color: "color-gray-600"
   }, suggestion.description)))))), process.env.NODE_ENV === 'development' && (/*#__PURE__*/React.createElement("div", {
     style: {
       fontSize: '8px',
@@ -13677,17 +13677,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.createElement(Text, Object.assign({
     fontSize: "14px",
-    color: "color.gray.700"
+    color: "color-gray-700"
   }, views == null ? void 0 : views.text), example.text)))));
 };
 
@@ -13734,13 +13734,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.createElement(StopIcon, {
     widthHeight: 16,
@@ -13878,7 +13878,7 @@ var ChatInputView = _ref => {
       animation: 'spin 1s linear infinite'
     }
   }), /*#__PURE__*/React.createElement(Text, {
-    color: "color.gray.500"
+    color: "color-gray-500"
   }, loadingText))), /*#__PURE__*/React.createElement(View, {
     position: "relative",
     width: "100%",
@@ -13893,7 +13893,7 @@ var ChatInputView = _ref => {
   }, contentStyles, containerStyles, {
     paddingHorizontal: 16,
     paddingVertical: 10,
-    backgroundColor: isDraggingOver ? 'color.blue.50' : undefined
+    backgroundColor: isDraggingOver ? 'color-blue-50' : undefined
   }), /*#__PURE__*/React.createElement(AttachmentGroup, {
     files: uploadedFiles,
     sandboxId: sandboxId,
@@ -13954,10 +13954,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)
     },
@@ -13971,7 +13971,7 @@ var ChatInputView = _ref => {
     },
     textProps: {
       fontSize: '14px',
-      color: 'color.gray.600'
+      color: 'color-gray-600'
     },
     validateFile: file => {
       if (file.size > 50 * 1024 * 1024) {
@@ -13997,15 +13997,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.createElement(StopIcon, {
     widthHeight: 16,
@@ -14014,13 +14014,13 @@ var ChatInputView = _ref => {
   })) : loading ? (/*#__PURE__*/React.createElement(Loader, {
     type: "quarter",
     size: 16,
-    color: "color.white"
+    color: "color-white"
   })) : (/*#__PURE__*/React.createElement(SendIcon, {
     widthHeight: 16,
     color: "currentColor",
     filled: false
   }))), rightButtons)))), errorMessage && (/*#__PURE__*/React.createElement(Text, Object.assign({
-    color: "theme.error",
+    color: "theme-error",
     marginTop: "4px"
   }, views == null ? void 0 : views.bottomTip), errorMessage)));
 };
@@ -14086,7 +14086,7 @@ var ColorInputComponent$1 = props => {
   return /*#__PURE__*/React.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;
 
@@ -14477,14 +14477,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'
     }
   };
@@ -14549,7 +14549,7 @@ var SliderView = _ref => {
       isDisabled = false,
       showValue = false,
       showTooltip = false,
-      backgroundColor = 'theme.primary',
+      backgroundColor = 'theme-primary',
       label,
       helperText,
       themeMode: elementMode,
@@ -14584,7 +14584,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, {
@@ -14610,7 +14610,7 @@ var SliderView = _ref => {
     fontWeight: 500
   }, views.label), label), showValue && (/*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: 14,
-    color: "color.blueGray.500"
+    color: "color-blueGray-500"
   }, views.valueLabel), currentValue)))), /*#__PURE__*/React.createElement(View, Object.assign({
     ref: trackRef,
     position: "relative",
@@ -14659,7 +14659,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',
@@ -14675,8 +14675,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",
@@ -14700,7 +14700,7 @@ var SliderView = _ref => {
     fontWeight: 500
   }, views.label), label), showValue && (/*#__PURE__*/React.createElement(Text, Object.assign({
     fontSize: 14,
-    color: "color.blueGray.500"
+    color: "color-blueGray-500"
   }, views.valueLabel), currentValue)))), /*#__PURE__*/React.createElement(View, Object.assign({
     ref: trackRef,
     position: "relative",
@@ -14759,7 +14759,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%)',
@@ -14778,8 +14778,8 @@ var SliderView = _ref => {
   }, views == null ? void 0 : views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React.createElement(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
@@ -15034,7 +15034,7 @@ var AttachmentPreview = _ref => {
       gap: "6px",
       padding: "4px 8px",
       borderRadius: "6px",
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color-gray-100",
       position: "relative",
       animate: {
         from: {
@@ -15069,19 +15069,19 @@ var AttachmentPreview = _ref => {
     })), isAudio && (/*#__PURE__*/React.createElement(Center, {
       width: "60px",
       height: "60px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       borderRadius: "4px"
     }, /*#__PURE__*/React.createElement(AudioIcon, {
       widthHeight: 24,
-      color: "color.black"
+      color: "color-black"
     }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React.createElement(Center, {
       width: "60px",
       height: "60px",
-      backgroundColor: "color.gray.200",
+      backgroundColor: "color-gray-200",
       borderRadius: "4px"
     }, /*#__PURE__*/React.createElement(FileIcon, {
       widthHeight: 24,
-      color: "color.black"
+      color: "color-black"
     }))), onRemove && (/*#__PURE__*/React.createElement(Button$1, {
       position: "absolute",
       top: "-4px",
@@ -15091,7 +15091,7 @@ var AttachmentPreview = _ref => {
       minWidth: "20px",
       minHeight: "20px",
       borderRadius: "50%",
-      backgroundColor: "color.red.500",
+      backgroundColor: "color-red-500",
       color: "white",
       fontSize: 14,
       fontWeight: "bold",
@@ -15102,7 +15102,7 @@ var AttachmentPreview = _ref => {
       cursor: "pointer",
       border: "2px solid white",
       _hover: {
-        backgroundColor: 'color.red.600'
+        backgroundColor: 'color-red-600'
       },
       onClick: e => {
         e.stopPropagation();
@@ -15175,7 +15175,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.createElement(Image, {
@@ -15202,7 +15202,7 @@ var MediaPreview = _ref => {
     onClick: e => e.stopPropagation()
   })), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React.createElement(FileIcon, {
     widthHeight: 24,
-    color: "color.gray.600"
+    color: "color-gray-600"
   })));
 };
 
@@ -15337,13 +15337,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'
   }
 };
 
@@ -15384,7 +15384,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
@@ -15416,7 +15416,7 @@ var ModalContainer = _ref2 => {
   };
   return /*#__PURE__*/React.createElement(Vertical, Object.assign({
     cursor: "default",
-    backgroundColor: "color.white",
+    backgroundColor: "color-white",
     width: isFullScreen ? '100%' : 600,
     height: isFullScreen ? '100%' : 'fit-content',
     onClick: handleClick,
@@ -15434,7 +15434,7 @@ var ModalContainer = _ref2 => {
 var ModalHeader = _ref3 => {
   var {
       children,
-      buttonColor = 'theme.primary',
+      buttonColor = 'theme-primary',
       iconSize = 'md',
       buttonPosition = 'right',
       views
@@ -15454,7 +15454,7 @@ var ModalHeader = _ref3 => {
     paddingHorizontal: 24,
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
-    borderBottomColor: "color.gray.200",
+    borderBottomColor: "color-gray-200",
     media: {
       mobile: {
         paddingVertical: 12,
@@ -15499,7 +15499,7 @@ var ModalFooter = _ref5 => {
     paddingHorizontal: 24,
     borderTopWidth: "1px",
     borderTopStyle: "solid",
-    borderTopColor: "color.gray.200",
+    borderTopColor: "color-gray-200",
     gap: 12,
     media: {
       mobile: {
@@ -15579,7 +15579,7 @@ var DrawerPlacements = {
     height: '100vh',
     borderRightWidth: '1px',
     borderRightStyle: 'solid',
-    borderRightColor: 'color.gray.200'
+    borderRightColor: 'color-gray-200'
   },
   right: {
     top: 0,
@@ -15588,7 +15588,7 @@ var DrawerPlacements = {
     height: '100vh',
     borderLeftWidth: '1px',
     borderLeftStyle: 'solid',
-    borderLeftColor: 'color.gray.200'
+    borderLeftColor: 'color-gray-200'
   },
   top: {
     top: 0,
@@ -15597,7 +15597,7 @@ var DrawerPlacements = {
     width: '100vw',
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: 'color.gray.200'
+    borderBottomColor: 'color-gray-200'
   },
   bottom: {
     bottom: 0,
@@ -15606,7 +15606,7 @@ var DrawerPlacements = {
     width: '100vw',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: 'color.gray.200'
+    borderTopColor: 'color-gray-200'
   }
 };
 
@@ -15653,7 +15653,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);
@@ -15678,7 +15678,7 @@ var DrawerContainer = _ref2 => {
   };
   return /*#__PURE__*/React.createElement(Vertical, Object.assign({
     position: "absolute",
-    backgroundColor: "color.white"
+    backgroundColor: "color-white"
   }, DrawerPlacements[placement], dimensionProps, {
     onClick: handleClick,
     transition: "transform 0.3s ease"
@@ -15697,13 +15697,13 @@ var DrawerHeader = _ref3 => {
     padding: 8
   }, /*#__PURE__*/React.createElement(CloseIcon, {
     widthHeight: 20,
-    color: "color.gray.500"
+    color: "color-gray-500"
   })));
   return /*#__PURE__*/React.createElement(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);
@@ -15728,7 +15728,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
@@ -15861,20 +15861,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'
   }
 };
@@ -15902,15 +15902,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: {
@@ -16282,7 +16282,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",
@@ -16464,7 +16464,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: {
@@ -16475,15 +16475,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: {
@@ -16496,8 +16496,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',
@@ -16508,22 +16508,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: {
@@ -16749,17 +16749,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'
       }
     }
   };
@@ -16844,7 +16844,7 @@ var TabsView = _ref => {
     }, views.container), /*#__PURE__*/React.createElement(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);
@@ -16891,7 +16891,7 @@ var TabsList = _ref2 => {
   return /*#__PURE__*/React.createElement(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
@@ -16917,12 +16917,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);
@@ -17106,7 +17106,7 @@ var HighlightStyles = {
   }),
   background: color => ({
     backgroundColor: color,
-    color: 'color.white',
+    color: 'color-white',
     padding: '0 8px',
     borderRadius: '4px'
   }),
@@ -17129,6 +17129,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: () => ({})
 };
 
@@ -17435,8 +17438,8 @@ var TitleView = _ref => {
   var {
       children,
       highlightText,
-      highlightStyle = 'default',
-      highlightColor = 'theme.primary',
+      highlightStyle = 'solid',
+      highlightColor = 'theme-primary',
       highlightSecondaryColor,
       size = 'lg',
       views,
@@ -17457,34 +17460,6 @@ var TitleView = _ref => {
     ref,
     inView
   } = useInView();
-  var {
-    getColor,
-    themeMode,
-    theme
-  } = 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,
@@ -17506,7 +17481,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;
@@ -17616,7 +17591,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>
  *
@@ -17635,8 +17610,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>
@@ -17679,12 +17654,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'
@@ -17697,12 +17672,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'
@@ -17758,8 +17733,8 @@ var ToggleView = _ref => {
   } = 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);
@@ -17790,7 +17765,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);
 };
 
@@ -18112,27 +18087,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,
@@ -18377,7 +18352,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
@@ -18407,7 +18382,7 @@ var DropdownMenuDivider = _ref5 => {
     props = _objectWithoutPropertiesLoose(_ref5, _excluded4$9);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     height: "1px",
-    backgroundColor: "color.gray.200",
+    backgroundColor: "color-gray-200",
     margin: "4px 0"
   }, views == null ? void 0 : views.divider, props));
 };
@@ -18622,11 +18597,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'
@@ -18649,7 +18624,7 @@ var DefaultColorPickerStyles = {
     marginBottom: '12px'
   },
   recentColors: {
-    borderTop: '1px solid color.gray.200',
+    borderTop: '1px solid color-gray-200',
     paddingTop: '12px'
   }
 };
@@ -18705,25 +18680,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'
   }
 };
 /**
@@ -18733,133 +18708,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'
 }];
 
@@ -18905,7 +18880,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'
@@ -18914,11 +18889,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.createElement(View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
     ref: triggerRef,
@@ -18933,13 +18908,13 @@ var ColorPickerView = _ref => {
     backgroundColor: displayColor,
     borderWidth: "1px",
     borderStyle: "solid",
-    borderColor: "color.gray.300"
+    borderColor: "color-gray-300"
   }), /*#__PURE__*/React.createElement(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.createElement(ChevronIcon, {
     widthHeight: 16,
-    color: "color.gray.500",
+    color: "color-gray-500",
     orientation: isOpen ? 'up' : 'down'
   }))), isOpen && (/*#__PURE__*/React.createElement(View, Object.assign({
     ref: dropdownRef
@@ -18951,14 +18926,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.createElement(View, Object.assign({}, DefaultColorPickerStyles.customInput, views == null ? void 0 : views.customInput), /*#__PURE__*/React.createElement(Horizontal, {
     gap: 8,
@@ -18983,7 +18958,7 @@ var ColorPickerView = _ref => {
     title: "Pick a color"
   }), /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
-    color: "color.gray.600"
+    color: "color-gray-600"
   }, "Use native color picker")), /*#__PURE__*/React.createElement(TextField, {
     placeholder: "Enter hex color (e.g., #ff0000)",
     value: customColor,
@@ -19001,13 +18976,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.createElement(View, Object.assign({}, recentColorsStyles), /*#__PURE__*/React.createElement(Text, {
     fontWeight: "500",
-    color: "color.gray.600",
+    color: "color-gray-600",
     marginBottom: "8px"
   }, "Recent Colors"), /*#__PURE__*/React.createElement(Horizontal, {
     gap: 8,
@@ -19020,7 +18995,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,
@@ -19028,7 +19003,7 @@ var ColorPickerView = _ref => {
       transform: 'scale(1.1)'
     }
   })))))))), helperText && (/*#__PURE__*/React.createElement(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)));
 };
@@ -19065,11 +19040,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',
@@ -19081,7 +19056,7 @@ var DefaultEmojiPickerStyles = {
   },
   categoryTabs: {
     display: 'flex',
-    borderBottom: '1px solid color.gray.200',
+    borderBottom: '1px solid color-gray-200',
     marginBottom: '12px',
     overflowX: 'auto'
   },
@@ -19092,7 +19067,7 @@ var DefaultEmojiPickerStyles = {
     transition: 'all 0.2s ease',
     fontSize: '14px',
     fontWeight: '500',
-    color: 'color.gray.600',
+    color: 'color-gray-600',
     whiteSpace: 'nowrap'
   },
   emojiGrid: {
@@ -19102,7 +19077,7 @@ var DefaultEmojiPickerStyles = {
     maxHeight: '240px',
     overflowY: 'auto',
     padding: '4px',
-    color: 'color.black'
+    color: 'color-black'
   },
   emoji: {
     width: '32px',
@@ -19116,7 +19091,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'
   }
@@ -19173,25 +19148,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'
   }
 };
 /**
@@ -21275,7 +21250,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'
@@ -21293,7 +21268,7 @@ var EmojiPickerView = _ref => {
   return /*#__PURE__*/React.createElement(View, Object.assign({}, containerStyles, props), label && (/*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
     ref: triggerRef,
@@ -21302,11 +21277,11 @@ var EmojiPickerView = _ref => {
     alignItems: "center",
     gap: 8
   }, /*#__PURE__*/React.createElement(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.createElement(ChevronIcon, {
     widthHeight: 16,
-    color: "color.gray.500",
+    color: "color-gray-500",
     orientation: isOpen ? 'up' : 'down'
   }))), isOpen && (/*#__PURE__*/React.createElement(View, Object.assign({
     ref: dropdownRef
@@ -21318,8 +21293,8 @@ var EmojiPickerView = _ref => {
   }))), showCategories && (/*#__PURE__*/React.createElement(View, Object.assign({}, categoryTabsStyles), availableCategories.map(category => (/*#__PURE__*/React.createElement(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)
@@ -21329,18 +21304,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.createElement(View, {
     gridColumn: "1 / -1",
     padding: "20px",
     textAlign: "center",
-    color: "color.gray.500"
+    color: "color-gray-500"
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "14px"
   }, searchQuery ? 'No emojis found' : 'No emojis in this category')))))), helperText && (/*#__PURE__*/React.createElement(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)));
 };
@@ -21420,18 +21395,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 = {
@@ -21444,11 +21419,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,
@@ -21717,7 +21692,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",
@@ -21763,7 +21738,7 @@ var MenubarSeparator = _ref7 => {
   return /*#__PURE__*/React.createElement(View, Object.assign({
     role: "separator",
     height: "1px",
-    backgroundColor: "color.gray.200",
+    backgroundColor: "color-gray-200",
     margin: "4px 0"
   }, views == null ? void 0 : views.separator));
 };
@@ -21960,26 +21935,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'
     }
   }
 };
@@ -21995,10 +21970,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 = {
@@ -22140,7 +22115,7 @@ var PaginationView = _ref => {
     marginLeft: "-8px"
   }))), showPageInfo && (/*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
     as: "select",
     marginLeft: 16,
@@ -22148,8 +22123,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
@@ -22210,14 +22185,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,
@@ -22362,15 +22337,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'
   }
 };
@@ -22393,7 +22368,7 @@ var SeparatorView = _ref => {
     themeMode
   } = 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
@@ -22600,42 +22575,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'
       }
     }
   };
@@ -22757,32 +22732,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'
     }
   };
@@ -22798,13 +22773,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'
   }
 };
 /**
@@ -22876,7 +22851,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.createElement(Horizontal, {
@@ -22894,7 +22869,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'
@@ -22917,7 +22892,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'
@@ -22959,7 +22934,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
@@ -23002,7 +22977,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.createElement(Vertical, Object.assign({
@@ -23463,28 +23438,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'
       }
     }
   };
@@ -23496,13 +23471,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'
   }
 };
@@ -23590,7 +23565,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,
@@ -23702,9 +23677,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",
@@ -23716,7 +23691,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.createElement(View, {
     width: "8px",
@@ -23730,11 +23705,11 @@ var ResizableHandle = _ref3 => {
   React.createElement(Horizontal, null, /*#__PURE__*/React.createElement(View, {
     width: "6px",
     height: "2px",
-    backgroundColor: "color.gray.600"
+    backgroundColor: "color-gray-600"
   }), /*#__PURE__*/React.createElement(View, {
     width: "2px",
     height: "6px",
-    backgroundColor: "color.gray.600",
+    backgroundColor: "color-gray-600",
     position: "absolute"
   }))) : (
   /*#__PURE__*/
@@ -23742,7 +23717,7 @@ var ResizableHandle = _ref3 => {
   React.createElement(View, {
     width: "6px",
     height: "2px",
-    backgroundColor: "color.gray.600"
+    backgroundColor: "color-gray-600"
   }))))));
 };
 // Main Resizable View component
@@ -23855,50 +23830,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'
     }
   }
 };
@@ -24052,37 +24027,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.createElement(InfoIcon, {
           widthHeight: 20,
-          color: Theme.info.icon.color
+          color: iconColor
         });
       case 'success':
         return /*#__PURE__*/React.createElement(PlayIcon, {
           widthHeight: 20,
-          color: Theme.success.icon.color
+          color: iconColor
         });
       case 'warning':
         return /*#__PURE__*/React.createElement(InfoIcon, {
           widthHeight: 20,
-          color: Theme.warning.icon.color,
+          color: iconColor,
           orientation: "down"
         });
       case 'error':
         return /*#__PURE__*/React.createElement(DustBinIcon, {
           widthHeight: 20,
-          color: Theme.error.icon.color
+          color: iconColor
         });
       default:
         return /*#__PURE__*/React.createElement(InfoIcon, {
           widthHeight: 20,
-          color: Theme.info.icon.color
+          color: Themes$1.info.icon.color
         });
     }
   };
@@ -24436,24 +24414,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)'
     }
   };
@@ -24467,7 +24445,7 @@ var CommandInputStyles = {
   padding: '12px 16px',
   borderBottomWidth: '1px',
   borderBottomStyle: 'solid',
-  borderBottomColor: 'color.gray.200'
+  borderBottomColor: 'color-gray-200'
 };
 var CommandListStyles = {
   overflow: 'auto',
@@ -24480,7 +24458,7 @@ var CommandGroupHeadingStyles = {
   padding: '8px 16px',
   fontSize: '12px',
   fontWeight: 'bold',
-  color: 'color.gray.500',
+  color: 'color-gray-500',
   textTransform: 'uppercase'
 };
 var CommandItemStyles = {
@@ -24492,13 +24470,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 = {
@@ -24513,7 +24491,7 @@ var CommandItemIconStyles = {
   alignItems: 'center',
   justifyContent: 'center',
   marginRight: '12px',
-  color: 'color.gray.500'
+  color: 'color-gray-500'
 };
 var CommandItemContentStyles = {
   display: 'flex',
@@ -24526,7 +24504,7 @@ var CommandItemNameStyles = {
 };
 var CommandItemDescriptionStyles = {
   fontSize: '12px',
-  color: 'color.gray.500',
+  color: 'color-gray-500',
   marginTop: '2px'
 };
 var CommandItemShortcutStyles = {
@@ -24534,14 +24512,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 = {
@@ -24551,9 +24529,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"],
@@ -24598,7 +24576,7 @@ var CommandInput = _ref2 => {
   }, []);
   return /*#__PURE__*/React.createElement(View, Object.assign({}, CommandInputStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(SearchIcon, {
     widthHeight: 16,
-    color: "color.gray.400",
+    color: "color-gray-400",
     marginRight: "8px"
   }), /*#__PURE__*/React.createElement(View, Object.assign({
     as: "input",
@@ -24949,25 +24927,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'
@@ -25442,33 +25420,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'
   }]
 };
@@ -25574,14 +25552,9 @@ var GradientView = _ref => {
       animate = false,
       animationDuration = 3,
       children,
-      views,
-      themeMode: elementMode
+      views
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1n);
-  var {
-    getColor,
-    themeMode
-  } = useTheme();
   // Determine color stops to use
   var colorStops = useMemo(() => {
     // If colors array is provided, use it
@@ -25605,12 +25578,10 @@ var GradientView = _ref => {
   var gradientString = 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 = useMemo(() => {
     if (!animate) return {};
@@ -25633,16 +25604,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"
  * >
@@ -25777,7 +25748,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.createElement(Horizontal, {
@@ -25788,7 +25759,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",
@@ -25832,7 +25803,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;
@@ -25916,7 +25887,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.createElement(View, {
@@ -25992,7 +25963,7 @@ var Ripples = _ref6 => {
     height: 300,
     position: "relative",
     overflow: "hidden",
-    backgroundColor: "color.gray.100"
+    backgroundColor: "color-gray-100"
   }, props), ripples.map(ripple => (/*#__PURE__*/React.createElement(View, {
     key: ripple.id,
     position: "absolute",
@@ -26118,15 +26089,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)";
@@ -26199,7 +26170,7 @@ var BackgroundLayout = /*#__PURE__*/React.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.createElement(View, Object.assign({}, props, {
     ref: ref,
     backgroundColor: 'transparent',
@@ -26299,7 +26270,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>
  */
@@ -26600,7 +26571,7 @@ var ChatWidgetView = _ref => {
     alignItems: "center",
     justifyContent: "center",
     flex: 1,
-    color: "color.gray.400"
+    color: "color-gray-400"
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "14px"
   }, "No messages yet. Start a conversation!"))) : messages.map(message => (/*#__PURE__*/React.createElement(ChatBubble, {
@@ -26632,7 +26603,7 @@ var ChatWidgetView = _ref => {
       animation: 'spin 1s linear infinite'
     }
   }), /*#__PURE__*/React.createElement(Text, {
-    color: "color.gray.500",
+    color: "color-gray-500",
     fontSize: "14px"
   }, loadingText)))), /*#__PURE__*/React.createElement(View, null, selectedContextElements.length > 0 && (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
     gap: 8,
@@ -26649,7 +26620,7 @@ var ChatWidgetView = _ref => {
     gap: 6
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
-    color: "color.blue.700",
+    color: "color-blue-700",
     fontWeight: "500"
   }, element.name), /*#__PURE__*/React.createElement(View, {
     as: "button",
@@ -26662,7 +26633,7 @@ var ChatWidgetView = _ref => {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(CloseIcon, {
     widthHeight: 12,
-    color: "color.blue.700"
+    color: "color-blue-700"
   }))))))), /*#__PURE__*/React.createElement(View, Object.assign({
     as: "form",
     onSubmit: handleSubmit
@@ -26671,11 +26642,11 @@ var ChatWidgetView = _ref => {
     type: "button"
   }, DefaultChatWidgetStyles.attachmentButton, styles.attachmentButton, {
     _hover: {
-      backgroundColor: 'color.gray.100'
+      backgroundColor: 'color-gray-100'
     }
   }), /*#__PURE__*/React.createElement(AttachmentIcon, {
     widthHeight: 16,
-    color: "color.gray.600"
+    color: "color-gray-600"
   }))), /*#__PURE__*/React.createElement(View, Object.assign({
     as: "textarea",
     ref: inputRef,
@@ -26697,20 +26668,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.createElement(MousePointerIcon, {
     widthHeight: 16,
-    color: "color.gray.600"
+    color: "color-gray-600"
   }))), /*#__PURE__*/React.createElement(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: {
@@ -26719,7 +26690,7 @@ var ChatWidgetView = _ref => {
     }
   }), /*#__PURE__*/React.createElement(SendIcon, {
     widthHeight: 16,
-    color: "color.white",
+    color: "color-white",
     filled: false
   }))))));
 };
@@ -26749,10 +26720,10 @@ var ChatBubble = _ref2 => {
       opacity: 0.7
     }, /*#__PURE__*/React.createElement(InfoIcon, {
       widthHeight: 12,
-      color: "color.gray.600"
+      color: "color-gray-600"
     }), /*#__PURE__*/React.createElement(Text, {
       fontSize: "12px",
-      color: "color.gray.600",
+      color: "color-gray-600",
       fontStyle: "italic"
     }, message.content)));
   }
@@ -26773,16 +26744,16 @@ var ChatBubble = _ref2 => {
       border: "1px solid rgba(0,0,0,0.05)"
     }, /*#__PURE__*/React.createElement(SettingsIcon, {
       widthHeight: 14,
-      color: "color.gray.600"
+      color: "color-gray-600"
     }), /*#__PURE__*/React.createElement(Vertical, {
       gap: 2
     }, /*#__PURE__*/React.createElement(Text, {
       fontSize: "11px",
       fontWeight: "600",
-      color: "color.gray.700"
+      color: "color-gray-700"
     }, "Tool Usage"), /*#__PURE__*/React.createElement(Text, {
       fontSize: "12px",
-      color: "color.gray.600",
+      color: "color-gray-600",
       fontFamily: "monospace"
     }, message.content))));
   }
@@ -26830,12 +26801,12 @@ var ChatBubble = _ref2 => {
     padding: 0
   }, /*#__PURE__*/React.createElement(Text, {
     fontSize: "11px",
-    color: "color.gray.500",
+    color: "color-gray-500",
     fontWeight: "600"
   }, "Thinking Process"), /*#__PURE__*/React.createElement(ChevronIcon, {
     orientation: isReasoningOpen ? 'down' : 'right',
     widthHeight: 10,
-    color: "color.gray.500"
+    color: "color-gray-500"
   })), isReasoningOpen && (/*#__PURE__*/React.createElement(View, Object.assign({
     padding: "8px",
     backgroundColor: "rgba(0,0,0,0.03)",
@@ -26843,7 +26814,7 @@ var ChatBubble = _ref2 => {
     marginTop: "4px"
   }, styles.reasoningContent), /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
-    color: "color.gray.600",
+    color: "color-gray-600",
     fontStyle: "italic"
   }, message.reasoning))))), /*#__PURE__*/React.createElement(View, {
     whiteSpace: "pre-wrap",
@@ -26876,7 +26847,7 @@ var ChatBubble = _ref2 => {
     fontSize: "11px",
     border: "1px solid rgba(37, 99, 235, 0.2)"
   }, /*#__PURE__*/React.createElement(Text, {
-    color: "color.blue.700",
+    color: "color-blue-700",
     fontWeight: "500"
   }, element.name))))))));
 };
@@ -27149,7 +27120,7 @@ var ChatWidgetWidget = _ref => {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(Text, {
     fontWeight: "bold",
-    color: "color.gray.800"
+    color: "color-gray-800"
   }, "ChatWidget Assistant"), /*#__PURE__*/React.createElement(View, {
     as: "button",
     onClick: () => setIsOpen(false),
@@ -27163,7 +27134,7 @@ var ChatWidgetWidget = _ref => {
     }
   }, /*#__PURE__*/React.createElement(CloseIcon, {
     widthHeight: 16,
-    color: "color.gray.500"
+    color: "color-gray-500"
   }))), /*#__PURE__*/React.createElement(ChatWidget, {
     messages: messages,
     onSubmit: handleSubmit,
@@ -27190,7 +27161,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",