@app-studio/web 0.9.33 → 0.9.35

package/dist/web.cjs.development.js

@@ -18,8 +18,9 @@ require('core-js/modules/es.parse-float.js');
 require('core-js/modules/es.string.trim-end.js');
 require('core-js/modules/es.parse-int.js');
 require('core-js/modules/es.regexp.exec.js');
-require('core-js/modules/es.string.pad-start.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/es.string.starts-with.js');
+require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.array-buffer.constructor.js');
 require('core-js/modules/es.array-buffer.slice.js');
 require('core-js/modules/es.typed-array.uint8-array.js');
@@ -27,7 +28,6 @@ require('core-js/modules/es.typed-array.fill.js');
 require('core-js/modules/es.typed-array.set.js');
 require('core-js/modules/es.typed-array.sort.js');
 require('core-js/modules/es.typed-array.to-locale-string.js');
-require('core-js/modules/es.string.starts-with.js');
 require('core-js/modules/web.url.js');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.url-search-params.js');
@@ -38,12 +38,9 @@ var contrast = _interopDefault(require('contrast'));
 require('core-js/modules/es.promise.js');
 require('core-js/modules/es.array.reduce.js');
 require('core-js/modules/es.number.to-fixed.js');
-require('core-js/modules/es.array.flat.js');
-require('core-js/modules/es.array.unscopables.flat.js');
-var dateFns = require('date-fns');
 require('core-js/modules/es.array.sort.js');
+require('core-js/modules/es.string.pad-start.js');
 var format = _interopDefault(require('date-fns/format'));
-require('core-js/modules/es.string.trim.js');
 require('core-js/modules/es.regexp.constructor.js');
 var formik = require('formik');
 var api = require('src/services/api');
@@ -199,15 +196,24 @@ var AccordionShapes = {
 var AccordionVariants = {
   default: {
     backgroundColor: 'transparent',
-    borderWidth: 0
+    borderWidth: 0,
+    transition: 'background-color 0.15s ease'
   },
   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'
+    }
   },
   filled: {
-    backgroundColor: 'color.gray.50'
+    backgroundColor: 'color.gray.50',
+    transition: 'background-color 0.15s ease',
+    _hover: {
+      backgroundColor: 'color.gray.100'
+    }
   }
 };
 
@@ -460,6 +466,7 @@ Accordion.Content = AccordionContent;
  */
 /**
  * Heading sizes following typography guidelines
+ * Matching shadcn/ui typography patterns
  */
 var HeadingSizes = {
   h1: {
@@ -467,42 +474,54 @@ var HeadingSizes = {
     lineHeight: '40px',
     fontWeight: '700',
     letterSpacing: '-0.02em',
-    marginBottom: '24px'
+    marginBottom: '24px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   },
   h2: {
     fontSize: '30px',
     lineHeight: '36px',
     fontWeight: '700',
     letterSpacing: '-0.02em',
-    marginBottom: '20px'
+    marginBottom: '20px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   },
   h3: {
     fontSize: '24px',
     lineHeight: '32px',
     fontWeight: '600',
     letterSpacing: '-0.01em',
-    marginBottom: '16px'
+    marginBottom: '16px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   },
   h4: {
     fontSize: '20px',
     lineHeight: '28px',
     fontWeight: '600',
     letterSpacing: '-0.01em',
-    marginBottom: '16px'
+    marginBottom: '16px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   },
   h5: {
     fontSize: '18px',
     lineHeight: '24px',
     fontWeight: '600',
     letterSpacing: '-0.01em',
-    marginBottom: '12px'
+    marginBottom: '12px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   },
   h6: {
     fontSize: '16px',
     lineHeight: '24px',
     fontWeight: '600',
     letterSpacing: '-0.01em',
-    marginBottom: '8px'
+    marginBottom: '8px',
+    color: 'color.gray.900',
+    transition: 'color 0.15s ease'
   }
 };
 /**
@@ -540,31 +559,40 @@ var FontWeights = {
   black: '900'
 };
 
+var normalizeHexColor = backgroundColor => {
+  if (!backgroundColor) {
+    return null;
+  }
+  var trimmed = backgroundColor.trim();
+  var withoutHash = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
+  if (withoutHash.length === 3) {
+    if (!/^[0-9a-fA-F]{3}$/.test(withoutHash)) {
+      return null;
+    }
+    return "#" + withoutHash.split('').map(char => char + char).join('');
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
+    return null;
+  }
+  return "#" + withoutHash.toLowerCase();
+};
 var getTextColorHex = backgroundColor => {
+  var normalized = normalizeHexColor(backgroundColor);
+  if (!normalized) {
+    return 'black';
+  }
   // Simple luminance calculation to determine text color contrast
-  var color = backgroundColor.replace('#', '');
+  var color = normalized.replace('#', '');
   var r = parseInt(color.substring(0, 2), 16);
   var g = parseInt(color.substring(2, 4), 16);
   var b = parseInt(color.substring(4, 6), 16);
   var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
   return luminance > 0.4 ? 'black' : 'white';
 };
-var getTextColor = backgroundColor => {
-  // Use complementary color for better contrast and return as hex
-  var color = backgroundColor.replace('#', '');
-  var r = parseInt(color.substring(0, 2), 16);
-  var g = parseInt(color.substring(2, 4), 16);
-  var b = parseInt(color.substring(4, 6), 16);
-  // Calculate the complementary color
-  var complementR = (255 - r).toString(16).padStart(2, '0');
-  var complementG = (255 - g).toString(16).padStart(2, '0');
-  var complementB = (255 - b).toString(16).padStart(2, '0');
-  // Return the color in hex format
-  return getTextColorHex("#" + complementR + complementG + complementB);
-};
+var getTextColor = backgroundColor => getTextColorHex(backgroundColor);
 
 var _excluded$2 = ["text", "maxLines", "views"],
-  _excluded2$1 = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size", "bgColor", "color", "views"];
+  _excluded2$1 = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "weight", "size", "bgColor", "backgroundColor", "color", "views"];
 /**
  * Renders text content with support for subscript and superscript
  */
@@ -668,6 +696,7 @@ var TruncateText = _ref2 => {
  * Main Text component that renders text with various styles and states
  */
 var TextView = _ref3 => {
+  var _views$container, _ref4;
   var {
       children,
       heading,
@@ -680,6 +709,7 @@ var TextView = _ref3 => {
       weight = 'normal',
       size = 'md',
       bgColor,
+      backgroundColor: backgroundColorProp,
       color,
       views
     } = _ref3,
@@ -694,7 +724,9 @@ var TextView = _ref3 => {
   var fontSize = FontSizes[size];
   var lineHeight = LineHeights[size];
   var fontWeight = FontWeights[weight];
-  var computedColor = color != null ? color : bgColor ? getTextColor(bgColor) : undefined;
+  var containerBackgroundColor = views == null || (_views$container = views.container) == null ? void 0 : _views$container.backgroundColor;
+  var effectiveBackgroundColor = (_ref4 = bgColor != null ? bgColor : backgroundColorProp) != null ? _ref4 : containerBackgroundColor;
+  var computedColor = color != null ? color : effectiveBackgroundColor ? getTextColor(effectiveBackgroundColor) : undefined;
   return /*#__PURE__*/React__default.createElement(appStudio.Element
   // Apply typography styles according to design guidelines
   , Object.assign({
@@ -705,7 +737,8 @@ var TextView = _ref3 => {
     fontWeight: fontWeight,
     letterSpacing: "-0.01em",
     textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none',
-    color: computedColor
+    color: computedColor,
+    backgroundColor: effectiveBackgroundColor
   }, noLineBreak, headingStyles, props, views == null ? void 0 : views.container), maxLines && typeof children === 'string' ? (/*#__PURE__*/React__default.createElement(TruncateText, {
     text: children,
     maxLines: maxLines
@@ -3366,13 +3399,15 @@ var AlertView = _ref => {
     fontWeight: "600" // Semi-bold
     ,
     lineHeight: "24px",
-    color: themes[variant].content.color
+    color: themes[variant].content.color,
+    bgColor: themes[variant].container.backgroundColor
   }, views == null ? void 0 : views.title), title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
     fontSize: "14px",
     fontWeight: "400" // Regular
     ,
     lineHeight: "20px",
-    color: themes[variant].content.color
+    color: themes[variant].content.color,
+    bgColor: themes[variant].container.backgroundColor
   }, views == null ? void 0 : views.description), description || children)));
 };
 
@@ -3694,14 +3729,17 @@ var MessageView = _ref => {
     width: "100%"
   }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "md",
-    weight: "semiBold"
+    weight: "semiBold",
+    bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-    size: "sm"
+    size: "sm",
+    bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.subtitle), subtitle))), showAction && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     marginRight: 10,
     onClick: action,
     padding: "6px 10px",
-    whiteSpace: "nowrap"
+    whiteSpace: "nowrap",
+    bgColor: Theme[variant].container.backgroundColor
   }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
     zIndex: 10000,
@@ -4799,7 +4837,8 @@ var BadgeView = _ref => {
     ,
     textAlign: "center"
   }, views == null ? void 0 : views.text, {
-    color: combinedStyles.color
+    color: combinedStyles.color,
+    bgColor: combinedStyles.backgroundColor
   }), content || ''));
 };
 
@@ -4849,9 +4888,18 @@ var LinkView = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   // Function to handle mouse enter/leave events to toggle hover state.
-  var handleHover = () => {
+  var handleMouseEnter = () => {
     if (underline === 'hover') setIsHovered(true);
   };
+  var handleMouseLeave = () => {
+    if (underline === 'hover') setIsHovered(false);
+  };
+  // Determine text decoration based on underline prop and hover state
+  var getTextDecoration = () => {
+    if (underline === 'underline') return 'underline';
+    if (underline === 'hover' && isHovered) return 'underline';
+    return 'none';
+  };
   return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: to,
     target: isExternal ? '_blank' : '_self',
@@ -4860,12 +4908,12 @@ var LinkView = _ref => {
       color: 'inherit'
     }
   }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-    onMouseEnter: handleHover,
-    onMouseLeave: handleHover,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     gap: 3,
     alignItems: "center",
     flexWrap: "nowrap",
-    textDecoration: 'none'
+    textDecoration: getTextDecoration()
   }, views.text, props), children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     widthHeight: IconSizes[iconSize]
   })));
@@ -5195,18 +5243,16 @@ var getButtonVariants = (color, isLight) => ({
     borderStyle: 'solid',
     borderColor: 'transparent',
     _hover: {
-      transform: 'translateY(-1px)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      opacity: 0.9
     },
     _active: {
-      transform: 'translateY(-1px)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      opacity: 0.95
     },
-    transition: 'all 0.2s ease'
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+    },
+    transition: 'background-color 0.2s ease, opacity 0.2s ease'
   },
   outline: {
     backgroundColor: 'transparent',
@@ -5216,21 +5262,19 @@ var getButtonVariants = (color, isLight) => ({
     borderColor: color,
     _hover: {
       backgroundColor: color,
-      color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(-1px)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      color: isLight ? 'color.black' : 'color.white',
+      opacity: 0.9
     },
     _active: {
       backgroundColor: color,
-      color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(0)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      color: isLight ? 'color.black' : 'color.white',
+      opacity: 0.95
     },
-    transition: 'all 0.2s ease'
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+    },
+    transition: 'background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease'
   },
   ghost: {
     backgroundColor: 'transparent',
@@ -5239,39 +5283,39 @@ var getButtonVariants = (color, isLight) => ({
     borderStyle: 'none',
     borderColor: 'transparent',
     _hover: {
-      backgroundColor: color,
-      color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(-1px)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      backgroundColor: isLight ? 'color.gray.100' : 'color.gray.800',
+      opacity: 0.9
     },
     _active: {
-      backgroundColor: color,
-      color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(0)',
-      textDecoration: 'underline',
-      textUnderlineOffset: '1px',
-      textDecorationThickness: '1px'
+      backgroundColor: isLight ? 'color.gray.200' : 'color.gray.700',
+      opacity: 0.95
     },
-    transition: 'all 0.2s ease'
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+    },
+    transition: 'background-color 0.2s ease, opacity 0.2s ease'
   },
   link: {
     backgroundColor: 'transparent',
-    color: isLight ? color : 'light.black',
+    color: isLight ? color : 'color.black',
     borderWidth: 0,
     borderStyle: 'none',
     borderColor: 'transparent',
     textDecoration: 'underline',
-    textUnderlineOffset: '1px',
+    textUnderlineOffset: '2px',
     textDecorationThickness: '1px',
     _hover: {
-      textDecorationThickness: '2px'
+      opacity: 0.8
     },
     _active: {
-      textDecorationThickness: '2px'
+      opacity: 0.9
     },
-    transition: 'all 0.2s ease'
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+    },
+    transition: 'opacity 0.2s ease'
   },
   borderMoving: {
     position: 'relative',
@@ -5280,7 +5324,12 @@ var getButtonVariants = (color, isLight) => ({
     color: 'white',
     borderWidth: 0,
     borderStyle: 'none',
-    borderColor: 'transparent'
+    borderColor: 'transparent',
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.8)'
+    },
+    transition: 'opacity 0.2s ease'
   },
   animatedStroke: {
     display: 'inline-block',
@@ -5293,7 +5342,12 @@ var getButtonVariants = (color, isLight) => ({
     backgroundColor: 'transparent',
     borderWidth: 0,
     borderStyle: 'none',
-    borderColor: 'transparent'
+    borderColor: 'transparent',
+    _focusVisible: {
+      outline: 'none',
+      boxShadow: "0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px " + color
+    },
+    transition: 'opacity 0.2s ease'
   }
 });
 /**
@@ -5631,26 +5685,34 @@ var getCardVariants = themeMode => {
     default: {
       backgroundColor: 'color.white',
       border: 'none',
-      transition: 'all 0.2s ease'
+      transition: 'background-color 0.2s ease, box-shadow 0.2s ease'
     },
     outlined: {
       backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
-      transition: 'all 0.2s ease',
+      transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
       _hover: {
-        borderColor: 'color.gray.300'
+        borderColor: 'color.gray.300',
+        boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.05)'
+      },
+      _focusVisible: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1)'
       }
     },
     elevated: {
       backgroundColor: 'color.white',
-      boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.08)',
+      boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.06)',
       border: 'none',
-      transition: 'all 0.2s ease',
+      transition: 'box-shadow 0.2s ease',
       _hover: {
-        boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.12)',
-        transform: 'translateY(-2px)'
+        boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.06)'
+      },
+      _focusVisible: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.08)'
       }
     }
   };
@@ -5666,24 +5728,44 @@ var getDefaultCardStyles = theme => {
       color: 'color.black',
       borderRadius: '8px',
       overflow: 'hidden',
-      transition: 'all 0.2s ease'
+      transition: 'all 0.2s ease',
+      media: {
+        mobile: {
+          borderRadius: '4px'
+        }
+      }
     },
     header: {
       padding: '16px',
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
       borderBottomColor: 'color.gray.200',
-      color: 'color.black'
+      color: 'color.black',
+      media: {
+        mobile: {
+          padding: '12px'
+        }
+      }
     },
     content: {
       padding: '16px',
-      color: 'color.black'
+      color: 'color.black',
+      media: {
+        mobile: {
+          padding: '12px'
+        }
+      }
     },
     footer: {
       padding: '16px',
       borderTopWidth: '1px',
       borderTopStyle: 'solid',
-      borderTopColor: 'color.gray.200'
+      borderTopColor: 'color.gray.200',
+      media: {
+        mobile: {
+          padding: '12px'
+        }
+      }
     }
   };
 };
@@ -6469,17 +6551,6 @@ var LegendColorStyles = {
 var LegendTextStyles = {
   fontSize: '14px'
 };
-// Default styles for tooltip
-var TooltipStyles = {
-  position: 'absolute',
-  backgroundColor: 'color.white',
-  padding: '8px 12px',
-  borderRadius: '4px',
-  boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
-  fontSize: '14px',
-  pointerEvents: 'none',
-  zIndex: 10
-};
 // Default styles for chart grid
 var GridStyles = {
   stroke: 'color.gray.200',
@@ -6572,7 +6643,7 @@ var useChartState = _ref => {
     visible: false,
     x: 0,
     y: 0,
-    content: ''
+    content: null
   });
   // Reference to animation frame
   var animationRef = React.useRef(null);
@@ -6731,7 +6802,12 @@ var BarChart = _ref => {
       x: x,
       y: y,
       textAnchor: "middle"
-    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel), label);
+    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel, {
+      style: {
+        textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))'
+      }
+    }), label);
   }), yAxisTicks.map((tick, index) => {
     var y = height - padding.bottom - tick / maxValue * chartHeight;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -6741,7 +6817,12 @@ var BarChart = _ref => {
       y: y,
       textAnchor: "end",
       dominantBaseline: "middle"
-    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel), tick.toFixed(0)), showGrid && (/*#__PURE__*/React__default.createElement("line", Object.assign({
+    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel, {
+      style: {
+        textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))'
+      }
+    }), tick.toFixed(0)), showGrid && (/*#__PURE__*/React__default.createElement("line", Object.assign({
       x1: padding.left,
       y1: y,
       x2: width - padding.right,
@@ -6753,8 +6834,61 @@ var BarChart = _ref => {
     var barHeight = value / maxValue * chartHeight * animationProgress;
     var x = padding.left + dataIndex * groupWidth + barSpacing * (seriesIndex + 1) + barWidth * seriesIndex;
     var y = height - padding.bottom - barHeight;
+    var categoryLabel = data.labels[dataIndex];
+    var categoryTotal = data.series.reduce((sum, currentSeries) => {
+      var seriesValue = currentSeries.data[dataIndex];
+      return sum + (typeof seriesValue === 'number' ? seriesValue : 0);
+    }, 0);
+    var sharePercentage = categoryTotal > 0 ? (value / categoryTotal * 100).toFixed(1) : null;
+    var fillColor = series.color ? getColor(series.color) : 'black';
     var handleMouseEnter = e => {
-      var tooltipContent = series.name + ": " + value;
+      var tooltipContent = /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        flexDirection: "column",
+        minWidth: "180px"
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "semibold"
+      }, series.name), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        width: "12px",
+        height: "12px",
+        borderRadius: "2px",
+        backgroundColor: fillColor
+      })), /*#__PURE__*/React__default.createElement(Text, {
+        marginTop: "4px",
+        color: "color.gray.500",
+        fontSize: "12px"
+      }, categoryLabel), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "8px",
+        display: "flex",
+        flexDirection: "column"
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Value"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, value.toLocaleString())), sharePercentage !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "4px",
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Share"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, sharePercentage + "%"))), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "4px",
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Category total"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, categoryTotal.toLocaleString()))));
       showTooltip(e.clientX, e.clientY, tooltipContent);
     };
     var handleClick = () => {
@@ -6768,7 +6902,7 @@ var BarChart = _ref => {
       y: y,
       width: barWidth,
       height: barHeight,
-      fill: series.color ? getColor(series.color) : 'black',
+      fill: fillColor,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: hideTooltip,
       onClick: handleClick
@@ -6862,7 +6996,12 @@ var LineChart = _ref => {
       x: x,
       y: y,
       textAnchor: "middle"
-    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel), label);
+    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel, {
+      style: {
+        textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))'
+      }
+    }), label);
   }), yAxisTicks.map((tick, index) => {
     var y = height - padding.bottom - tick / maxValue * chartHeight;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -6872,43 +7011,114 @@ var LineChart = _ref => {
       y: y,
       textAnchor: "end",
       dominantBaseline: "middle"
-    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel), tick.toFixed(0)), showGrid && (/*#__PURE__*/React__default.createElement("line", Object.assign({
+    }, AxisLabelStyles, views == null ? void 0 : views.axisLabel, {
+      style: {
+        textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))'
+      }
+    }), tick.toFixed(0)), showGrid && (/*#__PURE__*/React__default.createElement("line", Object.assign({
       x1: padding.left,
       y1: y,
       x2: width - padding.right,
       y2: y
     }, GridStyles, views == null ? void 0 : views.grid))));
-  }), data.series.map((series, seriesIndex) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: "series-" + seriesIndex
-  }, /*#__PURE__*/React__default.createElement("path", Object.assign({
-    d: generateAreaPath(series.data),
-    fill: series.color ? getColor(series.color) : 'black',
-    opacity: 0.1
-  }, views == null ? void 0 : views.area)), /*#__PURE__*/React__default.createElement("path", Object.assign({
-    d: generatePath(series.data),
-    stroke: series.color ? getColor(series.color) : 'black'
-  }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
-    var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
-    var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
-    var handleMouseEnter = e => {
-      var tooltipContent = series.name + ": " + value;
-      showTooltip(e.clientX, e.clientY, tooltipContent);
-    };
-    var handleClick = () => {
-      if (onPointClick) {
-        onPointClick(series.name, dataIndex);
-      }
-    };
-    return /*#__PURE__*/React__default.createElement("circle", Object.assign({
-      key: "point-" + seriesIndex + "-" + dataIndex,
-      cx: x,
-      cy: y,
-      fill: series.color,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: hideTooltip,
-      onClick: handleClick
-    }, PointStyles, views == null ? void 0 : views.point));
-  })))));
+  }), data.series.map((series, seriesIndex) => {
+    var lineColor = series.color ? getColor(series.color) : 'black';
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: "series-" + seriesIndex
+    }, /*#__PURE__*/React__default.createElement("path", Object.assign({
+      d: generateAreaPath(series.data),
+      fill: lineColor,
+      opacity: 0.1
+    }, views == null ? void 0 : views.area)), /*#__PURE__*/React__default.createElement("path", Object.assign({
+      d: generatePath(series.data),
+      stroke: lineColor
+    }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
+      var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
+      var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
+      var categoryLabel = data.labels[dataIndex];
+      var categoryTotal = data.series.reduce((sum, currentSeries) => {
+        var seriesValue = currentSeries.data[dataIndex];
+        return sum + (typeof seriesValue === 'number' ? seriesValue : 0);
+      }, 0);
+      var sharePercentage = categoryTotal > 0 ? (value / categoryTotal * 100).toFixed(1) : null;
+      var previousValue = dataIndex > 0 && typeof series.data[dataIndex - 1] === 'number' ? series.data[dataIndex - 1] : null;
+      var deltaValue = typeof previousValue === 'number' ? value - previousValue : null;
+      var formattedDelta = typeof deltaValue === 'number' ? "" + (deltaValue >= 0 ? '+' : '') + deltaValue.toLocaleString() : null;
+      var handleMouseEnter = e => {
+        var tooltipContent = /*#__PURE__*/React__default.createElement(appStudio.View, {
+          display: "flex",
+          flexDirection: "column",
+          minWidth: "200px"
+        }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }, /*#__PURE__*/React__default.createElement(Text, {
+          fontWeight: "semibold"
+        }, series.name), /*#__PURE__*/React__default.createElement(appStudio.View, {
+          width: "12px",
+          height: "12px",
+          borderRadius: "2px",
+          backgroundColor: lineColor
+        })), /*#__PURE__*/React__default.createElement(Text, {
+          marginTop: "4px",
+          color: "color.gray.500",
+          fontSize: "12px"
+        }, categoryLabel), /*#__PURE__*/React__default.createElement(appStudio.View, {
+          marginTop: "8px",
+          display: "flex",
+          flexDirection: "column"
+        }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+          display: "flex",
+          justifyContent: "space-between"
+        }, /*#__PURE__*/React__default.createElement(Text, {
+          color: "color.gray.500"
+        }, "Value"), /*#__PURE__*/React__default.createElement(Text, {
+          fontWeight: "medium"
+        }, value.toLocaleString())), formattedDelta !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+          marginTop: "4px",
+          display: "flex",
+          justifyContent: "space-between"
+        }, /*#__PURE__*/React__default.createElement(Text, {
+          color: "color.gray.500"
+        }, "Change"), /*#__PURE__*/React__default.createElement(Text, {
+          fontWeight: "medium"
+        }, formattedDelta))), sharePercentage !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+          marginTop: "4px",
+          display: "flex",
+          justifyContent: "space-between"
+        }, /*#__PURE__*/React__default.createElement(Text, {
+          color: "color.gray.500"
+        }, "Share"), /*#__PURE__*/React__default.createElement(Text, {
+          fontWeight: "medium"
+        }, sharePercentage + "%"))), /*#__PURE__*/React__default.createElement(appStudio.View, {
+          marginTop: "4px",
+          display: "flex",
+          justifyContent: "space-between"
+        }, /*#__PURE__*/React__default.createElement(Text, {
+          color: "color.gray.500"
+        }, "Category total"), /*#__PURE__*/React__default.createElement(Text, {
+          fontWeight: "medium"
+        }, categoryTotal.toLocaleString()))));
+        showTooltip(e.clientX, e.clientY, tooltipContent);
+      };
+      var handleClick = () => {
+        if (onPointClick) {
+          onPointClick(series.name, dataIndex);
+        }
+      };
+      return /*#__PURE__*/React__default.createElement("circle", Object.assign({
+        key: "point-" + seriesIndex + "-" + dataIndex,
+        cx: x,
+        cy: y,
+        fill: lineColor,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: hideTooltip,
+        onClick: handleClick
+      }, PointStyles, views == null ? void 0 : views.point));
+    }));
+  }));
 };
 
 var PieChart = _ref => {
@@ -7015,10 +7225,75 @@ var PieChart = _ref => {
   return /*#__PURE__*/React__default.createElement("svg", {
     ref: chartRef,
     width: width,
-    height: height
-  }, slices.map((slice, index) => {
+    height: height,
+    style: {
+      overflow: 'visible'
+    }
+  }, isDonut && (/*#__PURE__*/React__default.createElement("circle", {
+    cx: centerX,
+    cy: centerY,
+    r: donutRadius,
+    fill: "white",
+    pointerEvents: "none"
+  })), slices.map((slice, index) => {
     var handleMouseEnter = e => {
-      var tooltipContent = slice.label + ": " + slice.value + " (" + slice.percentage + ")";
+      var numericShare = total > 0 ? slice.value / total * 100 : 0;
+      var remainingShare = total > 0 ? Math.max(0, 100 - numericShare) : null;
+      var tooltipContent = /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        flexDirection: "column",
+        minWidth: "200px"
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "semibold"
+      }, slice.label), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        width: "12px",
+        height: "12px",
+        borderRadius: "2px",
+        backgroundColor: slice.color
+      })), /*#__PURE__*/React__default.createElement(Text, {
+        marginTop: "4px",
+        color: "color.gray.500",
+        fontSize: "12px"
+      }, "Slice ", slice.index + 1, " of ", dataPoints.length), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "8px",
+        display: "flex",
+        flexDirection: "column"
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Value"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, slice.value.toLocaleString())), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "4px",
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Share"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, slice.percentage)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "4px",
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Total"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, total.toLocaleString())), remainingShare !== null && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+        marginTop: "4px",
+        display: "flex",
+        justifyContent: "space-between"
+      }, /*#__PURE__*/React__default.createElement(Text, {
+        color: "color.gray.500"
+      }, "Remaining"), /*#__PURE__*/React__default.createElement(Text, {
+        fontWeight: "medium"
+      }, remainingShare.toFixed(1) + "%")))));
       // Use intelligent positioning based on useElementPosition relation data
       var x = e.clientX;
       var y = e.clientY;
@@ -7058,14 +7333,97 @@ var PieChart = _ref => {
       dominantBaseline: "middle",
       fill: "white",
       fontWeight: "bold",
-      pointerEvents: "none"
+      pointerEvents: "none",
+      style: {
+        textShadow: '0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3)',
+        filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))'
+      }
     }, slice.percentage)));
-  }), isDonut && (/*#__PURE__*/React__default.createElement("circle", {
-    cx: centerX,
-    cy: centerY,
-    r: donutRadius,
-    fill: "white"
-  })));
+  }));
+};
+
+var ChartTooltip = _ref => {
+  var {
+    visible,
+    x,
+    y,
+    content,
+    maxDistance = 100,
+    views
+  } = _ref;
+  var tooltipRef = React.useRef(null);
+  var [position, setPosition] = React.useState({
+    left: 0,
+    top: 0
+  });
+  React.useEffect(() => {
+    if (!visible || !tooltipRef.current) return;
+    var tooltip = tooltipRef.current;
+    var tooltipRect = tooltip.getBoundingClientRect();
+    var tooltipWidth = tooltipRect.width;
+    var tooltipHeight = tooltipRect.height;
+    var viewportOffset = 10;
+    var cursorOffset = 15;
+    // Start position: top-left corner near cursor
+    var left = x - cursorOffset;
+    var top = y - cursorOffset;
+    // Calculate the distance from cursor to tooltip edges
+    var distanceX = x - left; // Distance from cursor to left edge
+    var distanceY = y - top; // Distance from cursor to top edge
+    // If tooltip would be too far on X axis, adjust it
+    if (distanceX > maxDistance) {
+      left = x - maxDistance;
+    }
+    // If tooltip would be too far on Y axis, adjust it
+    if (distanceY > maxDistance) {
+      top = y - maxDistance;
+    }
+    // Ensure tooltip doesn't go off the right edge of viewport
+    if (left + tooltipWidth > window.innerWidth - viewportOffset) {
+      left = window.innerWidth - tooltipWidth - viewportOffset;
+      // Still respect max distance constraint
+      if (x - left > maxDistance) {
+        left = x - maxDistance;
+      }
+    }
+    // Ensure tooltip doesn't go off the left edge of viewport
+    if (left < viewportOffset) {
+      left = viewportOffset;
+    }
+    // Ensure tooltip doesn't go off the bottom edge of viewport
+    if (top + tooltipHeight > window.innerHeight - viewportOffset) {
+      top = window.innerHeight - tooltipHeight - viewportOffset;
+      // Still respect max distance constraint
+      if (y - top > maxDistance) {
+        top = y - maxDistance;
+      }
+    }
+    // Ensure tooltip doesn't go off the top edge of viewport
+    if (top < viewportOffset) {
+      top = viewportOffset;
+    }
+    setPosition({
+      left,
+      top
+    });
+  }, [visible, x, y, maxDistance]);
+  if (!visible) return null;
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: tooltipRef,
+    position: "fixed",
+    left: position.left + "px",
+    top: position.top + "px",
+    backgroundColor: "color.white",
+    padding: "12px 16px",
+    borderRadius: "8px",
+    boxShadow: "0px 12px 24px rgba(15, 23, 42, 0.18)",
+    border: "1px solid color.gray.200",
+    fontSize: "14px",
+    display: "flex",
+    flexDirection: "column",
+    pointerEvents: "none",
+    zIndex: 10
+  }, views == null ? void 0 : views.tooltip), content);
 };
 
 var _excluded$h = ["type", "data", "dataPoints", "title", "showLegend", "legendPosition", "showGrid", "showTooltips", "animated", "animationDuration", "responsive", "aspectRatio", "width", "height", "views", "onDataPointClick", "onSeriesClick", "isLoading", "error", "noData", "loadingIndicator", "errorIndicator", "noDataIndicator", "aria-label", "themeMode"];
@@ -7196,15 +7554,6 @@ var ChartView = _ref => {
         return null;
     }
   };
-  // Render tooltip
-  var renderTooltip = () => {
-    if (!showTooltips || !tooltip.visible) return null;
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      position: "fixed",
-      left: tooltip.x + "px",
-      top: tooltip.y - 40 + "px"
-    }, TooltipStyles, views == null ? void 0 : views.tooltip), tooltip.content);
-  };
   // Default loading indicator
   var renderLoadingIndicator = () => {
     if (!isLoading) return null;
@@ -7237,7 +7586,14 @@ var ChartView = _ref => {
     flex: 1,
     width: "100%",
     position: "relative"
-  }, views == null ? void 0 : views.chart), showChartContent && renderChart(), renderLoadingIndicator(), renderErrorIndicator(), renderNoDataIndicator()), showChartContent && legendPosition === 'bottom' && renderLegend(), renderTooltip());
+  }, views == null ? void 0 : views.chart), showChartContent && renderChart(), renderLoadingIndicator(), renderErrorIndicator(), renderNoDataIndicator()), showChartContent && legendPosition === 'bottom' && renderLegend(), /*#__PURE__*/React__default.createElement(ChartTooltip, {
+    visible: showTooltips && tooltip.visible,
+    x: tooltip.x,
+    y: tooltip.y,
+    content: tooltip.content,
+    maxDistance: 100,
+    views: views
+  }));
 };
 
 /**
@@ -7249,6 +7605,9 @@ var ChartComponent = props => {
 };
 var Chart = ChartComponent;
 
+var cloneColumns = inputColumns => inputColumns.map(column => Object.assign({}, column, {
+  cards: [...column.cards]
+}));
 var useKanbanBoardState = _ref => {
   var {
     columns: initialColumns,
@@ -7256,20 +7615,26 @@ var useKanbanBoardState = _ref => {
   } = _ref;
   var [columns, setColumns] = React.useState(initialColumns);
   var [draggedCardId, setDraggedCardId] = React.useState(null);
+  var [hoveredColumnId, setHoveredColumnId] = React.useState(null);
   var dragStateRef = React.useRef(null);
+  var originalColumnsRef = React.useRef(null);
+  var dropCommittedRef = React.useRef(false);
+  var getRelativeDropPosition = React.useCallback(event => {
+    var rect = event.currentTarget.getBoundingClientRect();
+    var offset = event.clientY - rect.top;
+    return offset < rect.height / 2 ? 'before' : 'after';
+  }, []);
   React.useEffect(() => {
     setColumns(initialColumns);
   }, [initialColumns]);
-  var commitMove = React.useCallback((targetColumnId, targetCardId) => {
+  var applyMove = React.useCallback((targetColumnId, targetCardId, position, options) => {
     var dragState = dragStateRef.current;
     if (!dragState) return;
     var {
       columnId: sourceColumnId,
       cardId
     } = dragState;
-    if (targetColumnId === sourceColumnId && (targetCardId === null || targetCardId === cardId)) {
-      dragStateRef.current = null;
-      setDraggedCardId(null);
+    if (targetColumnId === sourceColumnId && targetCardId === cardId) {
       return;
     }
     setColumns(prevColumns => {
@@ -7281,36 +7646,60 @@ var useKanbanBoardState = _ref => {
       if (!sourceColumn || !targetColumn) {
         return prevColumns;
       }
-      var sourceIndex = sourceColumn.cards.findIndex(card => card.id === cardId);
+      var sourceIndex = sourceColumn.cards.findIndex(cardItem => cardItem.id === cardId);
       if (sourceIndex === -1) {
         return prevColumns;
       }
       var [card] = sourceColumn.cards.splice(sourceIndex, 1);
-      var targetIndex = targetColumn.cards.length;
+      var dropPosition = position != null ? position : 'after';
+      var targetIndex;
       if (targetCardId) {
         var foundIndex = targetColumn.cards.findIndex(item => item.id === targetCardId);
         if (foundIndex !== -1) {
-          targetIndex = foundIndex;
-          if (targetColumnId === sourceColumnId && foundIndex > sourceIndex) {
-            targetIndex = foundIndex - 1;
-          }
+          targetIndex = dropPosition === 'before' ? foundIndex : foundIndex + 1;
+        } else {
+          targetIndex = targetColumn.cards.length;
         }
+      } else {
+        targetIndex = dropPosition === 'before' ? 0 : targetColumn.cards.length;
       }
       targetColumn.cards.splice(targetIndex, 0, card);
+      var hasChanged = workingColumns.some((column, columnIndex) => {
+        var previousColumn = prevColumns[columnIndex];
+        if (!previousColumn) {
+          return true;
+        }
+        if (column.cards.length !== previousColumn.cards.length) {
+          return true;
+        }
+        return column.cards.some((currentCard, cardIndex) => {
+          var _previousColumn$cards;
+          return currentCard.id !== ((_previousColumn$cards = previousColumn.cards[cardIndex]) == null ? void 0 : _previousColumn$cards.id);
+        });
+      });
+      if (!hasChanged) {
+        return prevColumns;
+      }
       var updatedColumns = workingColumns.map(column => Object.assign({}, column, {
         cards: [...column.cards]
       }));
-      onChange == null || onChange(updatedColumns);
+      dragStateRef.current = {
+        columnId: targetColumnId,
+        cardId
+      };
+      if (options != null && options.shouldCommit) {
+        onChange == null || onChange(updatedColumns);
+      }
       return updatedColumns;
     });
-    dragStateRef.current = null;
-    setDraggedCardId(null);
   }, [onChange]);
   var handleCardDragStart = React.useCallback((columnId, cardId, event) => {
     dragStateRef.current = {
       columnId,
       cardId
     };
+    originalColumnsRef.current = cloneColumns(columns);
+    dropCommittedRef.current = false;
     setDraggedCardId(cardId);
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
@@ -7320,35 +7709,52 @@ var useKanbanBoardState = _ref => {
         // Ignore errors from browsers that disallow setting data
       }
     }
-  }, []);
+  }, [columns]);
   var handleCardDragEnd = React.useCallback(() => {
+    if (!dropCommittedRef.current && originalColumnsRef.current) {
+      setColumns(cloneColumns(originalColumnsRef.current));
+    }
     dragStateRef.current = null;
+    originalColumnsRef.current = null;
+    dropCommittedRef.current = false;
     setDraggedCardId(null);
+    setHoveredColumnId(null);
   }, []);
-  var handleColumnDragOver = React.useCallback((_columnId, event) => {
+  var handleColumnDragOver = React.useCallback((columnId, event) => {
     event.preventDefault();
     if (event.dataTransfer) {
       event.dataTransfer.dropEffect = 'move';
     }
-  }, []);
-  var handleCardDragOver = React.useCallback((_columnId, _cardId, event) => {
+    setHoveredColumnId(columnId);
+    applyMove(columnId, null, getRelativeDropPosition(event));
+  }, [applyMove, getRelativeDropPosition]);
+  var handleCardDragOver = React.useCallback((columnId, cardId, event) => {
     event.preventDefault();
     if (event.dataTransfer) {
       event.dataTransfer.dropEffect = 'move';
     }
-  }, []);
+    setHoveredColumnId(columnId);
+    applyMove(columnId, cardId, getRelativeDropPosition(event));
+  }, [applyMove, getRelativeDropPosition]);
   var handleColumnDrop = React.useCallback((columnId, event) => {
     event.preventDefault();
-    commitMove(columnId, null);
-  }, [commitMove]);
+    dropCommittedRef.current = true;
+    applyMove(columnId, null, getRelativeDropPosition(event), {
+      shouldCommit: true
+    });
+  }, [applyMove, getRelativeDropPosition]);
   var handleCardDrop = React.useCallback((columnId, cardId, event) => {
     event.preventDefault();
     event.stopPropagation();
-    commitMove(columnId, cardId);
-  }, [commitMove]);
+    dropCommittedRef.current = true;
+    applyMove(columnId, cardId, getRelativeDropPosition(event), {
+      shouldCommit: true
+    });
+  }, [applyMove, getRelativeDropPosition]);
   return {
     columns,
     draggedCardId,
+    hoveredColumnId,
     onCardDragStart: handleCardDragStart,
     onCardDragEnd: handleCardDragEnd,
     onColumnDragOver: handleColumnDragOver,
@@ -7366,6 +7772,7 @@ var KanbanBoardView = _ref => {
     renderEmptyState,
     views,
     draggedCardId,
+    hoveredColumnId,
     onCardDragStart,
     onCardDragEnd,
     onColumnDragOver,
@@ -7410,7 +7817,9 @@ var KanbanBoardView = _ref => {
     gap: 12,
     minHeight: 40,
     onDragOver: event => onColumnDragOver(column.id, event),
-    onDrop: event => onColumnDrop(column.id, event)
+    onDrop: event => onColumnDrop(column.id, event),
+    opacity: draggedCardId && hoveredColumnId === column.id ? 0.9 : undefined,
+    transition: "all 0.15s ease-in-out"
   }, views == null ? void 0 : views.columnBody), column.cards.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     padding: 12,
     borderWidth: "1px",
@@ -7424,20 +7833,27 @@ var KanbanBoardView = _ref => {
   }, views == null ? void 0 : views.emptyState), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React__default.createElement(Text, {
     size: "sm",
     color: "#667085"
-  }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
     key: card.id,
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     draggable: true,
     cursor: "grab",
     backgroundColor: "#ffffff",
     borderRadius: 10,
     padding: "12px",
     boxShadow: "0 1px 2px 0 rgba(16, 24, 40, 0.08)",
-    opacity: draggedCardId === card.id ? 0.6 : 1,
     onDragStart: event => onCardDragStart(column.id, card.id, event),
     onDragEnd: onCardDragEnd,
-    onDragOver: event => onCardDragOver(column.id, card.id, event),
-    onDrop: event => onCardDrop(column.id, card.id, event)
-  }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card))))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
+    onDragOver: event => {
+      event.stopPropagation();
+      onCardDragOver(column.id, card.id, event);
+    },
+    onDrop: event => {
+      event.stopPropagation();
+      onCardDrop(column.id, card.id, event);
+    }
+  }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card)))))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
 };
 
 var KanbanBoardComponent = props => {
@@ -7446,734 +7862,1038 @@ var KanbanBoardComponent = props => {
 };
 var KanbanBoard = KanbanBoardComponent;
 
-// Generate a unique ID for ARIA attributes
-var generateId$1 = prefix => prefix + "-" + Math.random().toString(36).substring(2, 9);
-var useHoverCardState = function useHoverCardState(_temp) {
-  var {
-    openDelay = 200,
-    closeDelay = 300
-  } = _temp === void 0 ? {} : _temp;
-  var [isOpen, setIsOpen] = React.useState(false);
-  var openTimerRef = React.useRef(null);
-  var closeTimerRef = React.useRef(null);
-  // Refs for trigger and content elements for positioning
-  var triggerRef = React.useRef(null);
-  var contentRef = React.useRef(null);
-  // Unique IDs for ARIA attributes
-  var contentId = React.useMemo(() => generateId$1('hovercard-content'), []);
-  var triggerId = React.useMemo(() => generateId$1('hovercard-trigger'), []);
-  var clearTimers = React.useCallback(() => {
-    if (openTimerRef.current) {
-      clearTimeout(openTimerRef.current);
-      openTimerRef.current = null;
-    }
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  }, []);
-  var openCard = React.useCallback(() => {
-    clearTimers(); // Clear any pending close
-    if (!isOpen) {
-      openTimerRef.current = setTimeout(() => {
-        setIsOpen(true);
-      }, openDelay);
-    }
-  }, [isOpen, openDelay, clearTimers]);
-  var closeCard = React.useCallback(() => {
-    clearTimers(); // Clear any pending open
-    if (isOpen) {
-      closeTimerRef.current = setTimeout(() => {
-        setIsOpen(false);
-      }, closeDelay);
-    }
-  }, [isOpen, closeDelay, clearTimers]);
-  // Function specifically to cancel the close timer (e.g., when mouse enters content)
-  var cancelCloseTimer = React.useCallback(() => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-  }, []);
-  // Cleanup timers on unmount
-  React.useEffect(() => {
-    return () => clearTimers();
-  }, [clearTimers]);
-  return {
-    isOpen,
-    openCard,
-    closeCard,
-    cancelCloseTimer,
-    triggerRef,
-    contentRef,
-    contentId,
-    triggerId
-  };
+/**
+ * Convert an ISO date string to a UTC Date object
+ */
+var dateUTC = iso => {
+  return new Date(iso + (iso.includes('T') ? '' : 'T00:00:00Z'));
 };
-
-var _excluded$i = ["children", "views", "asChild"],
-  _excluded2$6 = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
-// Create context for the HoverCard
-var HoverCardContext = /*#__PURE__*/React.createContext({
-  isOpen: false,
-  openCard: () => {},
-  closeCard: () => {},
-  cancelCloseTimer: () => {},
-  triggerRef: {
-    current: null
-  },
-  contentRef: {
-    current: null
-  },
-  contentId: '',
-  triggerId: ''
-});
-var HoverCardProvider = _ref => {
-  var {
-    children,
-    value
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(HoverCardContext.Provider, {
-    value: value
-  }, children);
+/**
+ * Calculate the number of days between two ISO date strings
+ */
+var daysBetweenUTC = (a, b) => {
+  return Math.floor((dateUTC(a).getTime() - dateUTC(b).getTime()) / 86400000);
 };
-var useHoverCardContext = () => {
-  var context = React.useContext(HoverCardContext);
-  if (!context) {
-    throw new Error('useHoverCardContext must be used within a HoverCardProvider');
-  }
-  return context;
+/**
+ * Add a number of days to an ISO date string
+ */
+var addDateDays = (dateISO, days) => {
+  var d = new Date(dateISO + 'T00:00:00Z');
+  d.setUTCDate(d.getUTCDate() + days);
+  return d.toISOString().slice(0, 10);
 };
-var HoverCardTrigger = _ref2 => {
-  var {
-      children,
-      views,
-      asChild = false
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
-  var {
-    openCard,
-    closeCard,
-    triggerRef,
-    contentId,
-    triggerId
-  } = useHoverCardContext();
-  var handleMouseEnter = () => openCard();
-  var handleMouseLeave = () => closeCard();
-  var handleFocus = () => openCard(); // For keyboard accessibility
-  var handleBlur = () => closeCard(); // For keyboard accessibility
-  var triggerProps = Object.assign({
-    ref: triggerRef,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    id: triggerId,
-    'aria-describedby': contentId
-  }, views == null ? void 0 : views.container, props);
-  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
-    // Clone the child element and merge props
-    var child = React.Children.only(children);
-    return /*#__PURE__*/React.cloneElement(child, Object.assign({}, triggerProps, child.props));
-  }
-  // Default: wrap children in a View
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    position: "relative",
-    display: "inline-block"
-  }, triggerProps), children);
+/**
+ * Get the day of the week (0-6) from an ISO date string
+ */
+var getDayOfWeek = dateISO => {
+  return dateUTC(dateISO).getUTCDay();
 };
-var HoverCardContent = _ref3 => {
-  var {
-      children,
-      views,
-      side = 'bottom',
-      align = 'center',
-      sideOffset = 8,
-      style: userStyle,
-      // User provided style override
-      backgroundColor = 'white',
-      borderRadius = '4px',
-      boxShadow = '0px 2px 8px rgba(0, 0, 0, 0.15)',
-      padding = '12px',
-      minWidth = '50px',
-      maxWidth = '300px'
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
-  var {
-    isOpen,
-    cancelCloseTimer,
-    closeCard,
-    contentRef,
-    triggerRef,
-    contentId,
-    triggerId
-  } = useHoverCardContext();
-  // Use useElementPosition for intelligent positioning
-  var {
-    ref: positionRef,
-    relation
-  } = appStudio.useElementPosition({
-    trackChanges: true,
-    trackOnHover: true,
-    trackOnScroll: true,
-    trackOnResize: true
-  });
-  // Sync the position ref with the trigger ref for positioning calculations
-  React.useEffect(() => {
-    if (triggerRef != null && triggerRef.current && (positionRef == null ? void 0 : positionRef.current) !== triggerRef.current) {
-      // Update the position tracking to use the trigger element
-      if (positionRef) {
-        positionRef.current = triggerRef.current;
-      }
-    }
-  }, [triggerRef, positionRef, isOpen]);
-  var handleMouseEnter = () => cancelCloseTimer(); // Keep card open if mouse enters content
-  var handleMouseLeave = () => closeCard();
-  if (!isOpen) {
-    return null; // Don't render content if not open
-  }
-  // Create intelligent positioning styles based on useElementPosition relation data
-  var getPositionStyles = () => {
-    if (!relation || !(triggerRef != null && triggerRef.current)) {
-      // Fallback positioning if relation data is not available
-      return {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        zIndex: 1000
-      };
-    }
-    var triggerRect = triggerRef.current.getBoundingClientRect();
-    var placement = side;
-    // Use relation data to determine optimal placement
-    // If preferred side doesn't have enough space, use the side with more space
-    if (side === 'bottom' && relation.space.vertical === 'top') {
-      placement = 'top';
-    } else if (side === 'top' && relation.space.vertical === 'bottom') {
-      placement = 'bottom';
-    } else if (side === 'right' && relation.space.horizontal === 'left') {
-      placement = 'left';
-    } else if (side === 'left' && relation.space.horizontal === 'right') {
-      placement = 'right';
-    }
-    // Calculate position based on optimal placement
-    var x = 0;
-    var y = 0;
-    switch (placement) {
-      case 'bottom':
-        x = triggerRect.left + triggerRect.width / 2;
-        y = triggerRect.bottom + sideOffset;
-        break;
-      case 'top':
-        x = triggerRect.left + triggerRect.width / 2;
-        y = triggerRect.top - sideOffset;
-        break;
-      case 'right':
-        x = triggerRect.right + sideOffset;
-        y = triggerRect.top + triggerRect.height / 2;
-        break;
-      case 'left':
-        x = triggerRect.left - sideOffset;
-        y = triggerRect.top + triggerRect.height / 2;
-        break;
-    }
-    return {
-      position: 'fixed',
-      left: x,
-      top: y,
-      zIndex: 1000,
-      transform: getTransformOrigin(placement)
-    };
-  };
-  // Helper function to set transform origin for better positioning
-  var getTransformOrigin = placement => {
-    switch (placement) {
-      case 'bottom':
-        return 'translate(-50%, 0)';
-      case 'top':
-        return 'translate(-50%, -100%)';
-      case 'right':
-        return 'translate(0, -50%)';
-      case 'left':
-        return 'translate(-100%, -50%)';
-      default:
-        return 'translate(-50%, 0)';
-    }
-  };
-  var positionStyles = getPositionStyles();
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    ref: contentRef,
-    id: contentId,
-    role: "tooltip" // Use tooltip role for accessibility
-    ,
-    "aria-labelledby": triggerId,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    backgroundColor: backgroundColor,
-    borderRadius: borderRadius,
-    boxShadow: boxShadow,
-    padding: padding,
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    // Combine intelligent position styles with user styles
-    style: Object.assign({}, positionStyles, userStyle)
-  }, views == null ? void 0 : views.container, props), children);
+/**
+ * Get the date number (1-31) from an ISO date string
+ */
+var getDateNumber = dateISO => {
+  return dateUTC(dateISO).getUTCDate();
 };
-
-var _excluded$j = ["children", "views", "openDelay", "closeDelay"];
 /**
- * HoverCard component displays floating content when hovering over a trigger element.
- * Supports configurable open and close delays for a smoother user experience.
+ * Get the month (0-11) from an ISO date string
  */
-var HoverCardComponent = _ref => {
-  var {
-      children,
-      views,
-      openDelay,
-      closeDelay
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  var hoverCardState = useHoverCardState({
-    openDelay,
-    closeDelay
-  });
-  return /*#__PURE__*/React__default.createElement(HoverCardProvider, {
-    value: hoverCardState
-  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    position: "relative",
-    display: "inline-block"
-  }, views == null ? void 0 : views.container, props), children));
+var getMonth = dateISO => {
+  return dateUTC(dateISO).getUTCMonth();
 };
-var HoverCard = HoverCardComponent;
-HoverCard.Trigger = HoverCardTrigger;
-HoverCard.Content = HoverCardContent;
-
-var toDate = value => {
-  if (value instanceof Date) {
-    return value;
+/**
+ * Get the year from an ISO date string
+ */
+var getYear = dateISO => {
+  return dateUTC(dateISO).getUTCFullYear();
+};
+/**
+ * Get the first day of the month for a given date
+ */
+var getFirstDayOfMonth = dateISO => {
+  var d = dateUTC(dateISO);
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)).toISOString().slice(0, 10);
+};
+/**
+ * Get the start date of the calendar grid (may be in previous month)
+ */
+var getCalendarStartDate = function getCalendarStartDate(monthDateISO, weekStartsOn) {
+  if (weekStartsOn === void 0) {
+    weekStartsOn = 0;
   }
-  var parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) {
-    throw new Error("Invalid date value provided to Calendar: " + value);
+  var firstDay = getFirstDayOfMonth(monthDateISO);
+  var firstDayOfWeek = getDayOfWeek(firstDay);
+  var daysToSubtract = (firstDayOfWeek - weekStartsOn + 7) % 7;
+  return addDateDays(firstDay, -daysToSubtract);
+};
+/**
+ * Generate array of dates for the calendar grid (42 days = 6 weeks)
+ */
+var getCalendarDates = function getCalendarDates(monthDateISO, weekStartsOn) {
+  if (weekStartsOn === void 0) {
+    weekStartsOn = 0;
+  }
+  var startDate = getCalendarStartDate(monthDateISO, weekStartsOn);
+  var dates = [];
+  for (var i = 0; i < 42; i++) {
+    dates.push(addDateDays(startDate, i));
   }
-  return parsed;
-};
-var normalizeEvent = event => {
-  var startDate = toDate(event.start);
-  var rawEndDate = event.end ? toDate(event.end) : startDate;
-  var [earlier, later] = rawEndDate.getTime() >= startDate.getTime() ? [startDate, rawEndDate] : [rawEndDate, startDate];
-  return Object.assign({}, event, {
-    startDate: earlier,
-    endDate: later
+  return dates;
+};
+/**
+ * Get month name from date
+ */
+var getMonthName = dateISO => {
+  return dateUTC(dateISO).toLocaleDateString('en-US', {
+    month: 'long',
+    timeZone: 'UTC'
   });
 };
-var formatDayKey = date => dateFns.format(date, 'yyyy-MM-dd');
-var getEventsForDay = (events, day) => {
-  var dayInterval = {
-    start: dateFns.startOfDay(day),
-    end: dateFns.endOfDay(day)
-  };
-  return events.filter(event => {
-    var {
-      startDate,
-      endDate
-    } = event;
-    if (dateFns.isWithinInterval(startDate, dayInterval)) {
-      return true;
-    }
-    if (dateFns.isWithinInterval(endDate, dayInterval)) {
-      return true;
-    }
-    return startDate <= dayInterval.start && endDate >= dayInterval.end;
-  }).sort((a, b) => a.startDate.getTime() - b.startDate.getTime());
+/**
+ * Get the previous month date
+ */
+var getPreviousMonth = dateISO => {
+  var d = dateUTC(dateISO);
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() - 1, 1)).toISOString().slice(0, 10);
 };
-var chunk = (items, size) => {
-  var result = [];
-  for (var index = 0; index < items.length; index += size) {
-    result.push(items.slice(index, index + size));
-  }
-  return result;
+/**
+ * Get the next month date
+ */
+var getNextMonth = dateISO => {
+  var d = dateUTC(dateISO);
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1)).toISOString().slice(0, 10);
 };
-
-var VIEW_OPTIONS = [{
-  label: 'Day',
-  value: 'day'
-}, {
-  label: 'Week',
-  value: 'week'
-}, {
-  label: 'Month',
-  value: 'month'
-}];
-var today = /*#__PURE__*/new Date();
-var renderDefaultEvent = (event, context, views, key) => {
-  var timeRange = dateFns.format(event.startDate, 'p') + (event.endDate.getTime() !== event.startDate.getTime() ? " \u2013 " + dateFns.format(event.endDate, 'p') : '');
-  var eventCard = /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-    gap: 6,
-    padding: 12,
-    borderRadius: 8,
-    backgroundColor: context.isToday ? 'color.primary.50' : 'color.gray.100',
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: context.isToday ? 'color.primary.200' : 'color.gray.200',
-    flexShrink: 0,
-    cursor: "pointer"
-  }, views == null ? void 0 : views.event), /*#__PURE__*/React__default.createElement(Text, Object.assign({
-    fontWeight: "600",
-    fontSize: 14,
-    maxLines: 2
-  }, views == null ? void 0 : views.eventTitle), event.title), /*#__PURE__*/React__default.createElement(Text, Object.assign({
-    fontSize: 12,
-    color: "color.gray.600",
-    maxLines: 1
-  }, views == null ? void 0 : views.eventTime), timeRange), event.description && context.view !== 'month' && (/*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 12,
-    color: "color.gray.700",
-    maxLines: 2
-  }, event.description)));
-  return /*#__PURE__*/React__default.createElement(HoverCard, {
-    key: key,
-    openDelay: 100,
-    closeDelay: 200
-  }, /*#__PURE__*/React__default.createElement(HoverCard.Trigger, {
-    asChild: true
-  }, eventCard), /*#__PURE__*/React__default.createElement(HoverCard.Content, {
-    side: "top",
-    align: "start",
-    maxWidth: "350px",
-    backgroundColor: "color.white",
-    padding: 16,
-    boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)"
-  }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
-    gap: 12
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    fontWeight: "700",
-    fontSize: 16,
-    color: "color.gray.900"
-  }, event.title), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
-    gap: 6
-  }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
-    gap: 8,
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "color.gray.600"
-  }, "\uD83D\uDCC5"), /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 13,
-    color: "color.gray.700"
-  }, dateFns.format(event.startDate, 'EEEE, MMMM d, yyyy'))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
-    gap: 8,
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "color.gray.600"
-  }, "\uD83D\uDD50"), /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 13,
-    color: "color.gray.700"
-  }, timeRange))), event.description && (/*#__PURE__*/React__default.createElement(appStudio.Vertical, {
-    gap: 4
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "color.gray.600"
-  }, "Description"), /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: 13,
-    color: "color.gray.700"
-  }, event.description))))));
+/**
+ * Day names array (Sunday to Saturday)
+ */
+var DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+/**
+ * Get day names starting from specified day
+ */
+var getDayNames = function getDayNames(weekStartsOn) {
+  if (weekStartsOn === void 0) {
+    weekStartsOn = 0;
+  }
+  var names = [...DAY_NAMES];
+  return [...names.slice(weekStartsOn), ...names.slice(0, weekStartsOn)];
 };
-var CalendarViewComponent = _ref => {
-  var {
-    currentDate,
-    view,
-    label,
-    weeks,
-    weekdayLabels,
-    eventsByDay,
-    onPrevious,
-    onNext,
-    onToday,
-    onViewChange,
-    renderEvent,
-    views,
-    height = '800px'
-  } = _ref;
-  // Use same grid configuration for both header and days
-  var columnCount = weekdayLabels.length;
-  var weekdayRow = /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "grid",
-    gridTemplateColumns: "repeat(" + columnCount + ", 1fr)",
-    gap: 12,
-    padding: "8px 0"
-  }, views == null ? void 0 : views.weekdayRow), weekdayLabels.map(weekday => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-    key: formatDayKey(weekday),
-    alignItems: "center",
-    padding: 8
-  }, views == null ? void 0 : views.weekdayHeader), /*#__PURE__*/React__default.createElement(Text, Object.assign({
-    fontWeight: "600",
-    fontSize: 14,
-    color: "color.gray.600"
-  }, views == null ? void 0 : views.weekdayLabel, {
-    maxLines: 1
-  }), dateFns.format(weekday, 'EEE'))))));
-  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-    gap: 16,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: "color.gray.200",
-    borderRadius: 16,
-    padding: 24,
-    backgroundColor: "color.white",
-    height: height,
-    maxHeight: "90vh",
-    maxWidth: '100%',
-    display: "flex",
-    flexDirection: "column"
-  }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-    gap: 16,
-    flexShrink: 0
-  }, views == null ? void 0 : views.header), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
-    justifyContent: "space-between",
-    alignItems: "center",
-    maxWidth: '100%'
-  }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
-    fontSize: 20,
-    fontWeight: "700"
-  }, views == null ? void 0 : views.headerTitle), label), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-    gap: 8
-  }, views == null ? void 0 : views.viewSwitcher), VIEW_OPTIONS.map(option => (/*#__PURE__*/React__default.createElement(Button, Object.assign({
-    key: option.value,
-    variant: view === option.value ? 'filled' : 'ghost',
-    isDisabled: view === option.value,
-    onClick: () => onViewChange(option.value)
-  }, views == null ? void 0 : views.viewButton), option.label))))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-    gap: 8,
-    alignItems: "center"
-  }, views == null ? void 0 : views.navigation), /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    variant: "ghost",
-    onClick: onPrevious
-  }, views == null ? void 0 : views.navigationButton), "\u2190 Previous", ' ', view === 'day' ? 'Day' : view === 'week' ? 'Week' : 'Month'), /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    variant: "ghost",
-    onClick: onToday
-  }, views == null ? void 0 : views.navigationButton), "Today"), /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    variant: "ghost",
-    onClick: onNext
-  }, views == null ? void 0 : views.navigationButton), "Next ", view === 'day' ? 'Day' : view === 'week' ? 'Week' : 'Month', " \u2192"))), view !== 'day' && /*#__PURE__*/React__default.createElement(appStudio.View, {
-    flexShrink: 0
-  }, weekdayRow), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-    gap: 12,
-    flex: 1,
-    overflow: "auto"
-  }, views == null ? void 0 : views.grid), weeks.map((week, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    key: view + "-week-" + index,
-    display: "grid",
-    gridTemplateColumns: "repeat(" + week.length + ", 1fr)",
-    gap: 12,
-    height: view === 'month' ? '180px' : view === 'week' ? '100%' : 'auto',
-    minHeight: view === 'week' ? '300px' : 'auto'
-  }, views == null ? void 0 : views.weekRow), week.map(day => {
-    var _eventsByDay$get;
-    var dayKey = formatDayKey(day);
-    var isToday = dateFns.isSameDay(day, today);
-    var events = (_eventsByDay$get = eventsByDay.get(dayKey)) != null ? _eventsByDay$get : [];
-    var context = {
-      day,
-      isToday,
-      view
-    };
-    var shouldDim = view === 'month' && !dateFns.isSameMonth(day, currentDate);
-    return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-      key: dayKey,
-      gap: 12,
-      padding: 16,
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderColor: isToday ? 'color.primary.200' : 'color.gray.200',
-      borderRadius: 12,
-      backgroundColor: "color.gray.50",
-      opacity: shouldDim ? 0.6 : 1,
-      display: "flex",
-      flexDirection: "column",
-      height: "100%",
-      minHeight: view === 'month' ? '180px' : '300px'
-    }, views == null ? void 0 : views.dayColumn), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      justifyContent: "space-between",
-      alignItems: "center",
-      flexShrink: 0
-    }, views == null ? void 0 : views.dayHeader), /*#__PURE__*/React__default.createElement(Text, Object.assign({
-      fontWeight: "600",
-      fontSize: 16
-    }, views == null ? void 0 : views.dayNumber), dateFns.format(day, 'd')), view !== 'month' && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-      fontSize: 14,
-      color: "color.gray.600"
-    }, views == null ? void 0 : views.dayMeta), dateFns.format(day, 'EEEE')))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
-      gap: 8,
-      flex: 1,
-      overflow: "auto"
-    }, views == null ? void 0 : views.events), events.length > 0 ? events.map(event => {
-      var _event$id;
-      var key = formatDayKey(day) + "-" + ((_event$id = event.id) != null ? _event$id : event.title) + "-" + event.startDate.getTime();
-      if (renderEvent) {
-        var rendered = renderEvent(event, context);
-        if (/*#__PURE__*/React.isValidElement(rendered)) {
-          return /*#__PURE__*/React.cloneElement(rendered, {
-            key
-          });
-        }
-        return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-          key: key
-        }, rendered);
+/**
+ * Layout events with proper positioning to avoid overlaps
+ * Returns positioned events for each week
+ */
+var layoutEvents = (events, calendarDates) => {
+  var calendarStart = calendarDates[0];
+  // Convert events to positioned items with day indices
+  var items = events.map(ev => {
+    var startIdx = daysBetweenUTC(ev.start, calendarStart);
+    var endIdx = daysBetweenUTC(ev.end, calendarStart);
+    // Clamp to calendar boundaries (0-41 for 6 weeks)
+    var clampedStart = Math.max(0, Math.min(41, startIdx));
+    var clampedEnd = Math.max(0, Math.min(41, endIdx));
+    // Skip if completely outside calendar
+    if (endIdx < 0 || startIdx > 41) return null;
+    var duration = clampedEnd - clampedStart + 1;
+    var weekIndex = Math.floor(clampedStart / 7);
+    var dayOfWeek = clampedStart % 7;
+    return Object.assign({}, ev, {
+      startDay: clampedStart,
+      endDay: clampedEnd,
+      duration: duration,
+      row: 0,
+      weekIndex,
+      dayOfWeek
+    });
+  }).filter(item => item !== null);
+  // Sort by start day, then by duration (longer first)
+  items.sort((a, b) => {
+    if (a.startDay !== b.startDay) return a.startDay - b.startDay;
+    return b.duration - a.duration;
+  });
+  // Assign rows per week using greedy algorithm to prevent overlaps
+  var rowsByWeek = Array.from({
+    length: 6
+  }, () => []);
+  var rowCountByWeek = Array.from({
+    length: 6
+  }, () => 0);
+  items.forEach(item => {
+    var weekIdx = item.weekIndex;
+    var rows = rowsByWeek[weekIdx];
+    var placed = false;
+    for (var i = 0; i < rows.length; i++) {
+      var row = rows[i];
+      var hasConflict = row.some(existing => !(item.startDay > existing.endDay || item.endDay < existing.startDay));
+      if (!hasConflict) {
+        row.push(item);
+        item.row = i;
+        placed = true;
+        break;
       }
-      return renderDefaultEvent(event, context, views, key);
-    }) : view === 'day' && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-      fontSize: 12,
-      color: "color.gray.600",
-      fontStyle: "italic"
-    }, views == null ? void 0 : views.emptyState), "No events scheduled"))));
-  }))))));
+    }
+    if (!placed) {
+      item.row = rows.length;
+      rows.push([item]);
+    }
+    rowCountByWeek[weekIdx] = rows.length;
+  });
+  return {
+    items,
+    rowCountByWeek
+  };
+};
+/**
+ * Check if a date is in the current month
+ */
+var isInMonth = (dateISO, monthDateISO) => {
+  return getMonth(dateISO) === getMonth(monthDateISO) && getYear(dateISO) === getYear(monthDateISO);
 };
 
-var getLabelForView = (date, view, weekStartsOn) => {
-  if (view === 'day') {
-    return dateFns.format(date, 'MMMM d, yyyy');
-  }
-  if (view === 'week') {
-    var start = dateFns.startOfWeek(date, {
-      weekStartsOn
-    });
-    var end = dateFns.endOfWeek(date, {
-      weekStartsOn
-    });
-    if (start.getMonth() === end.getMonth()) {
-      return dateFns.format(start, 'MMM d') + " \u2013 " + dateFns.format(end, 'd, yyyy');
-    }
-    return dateFns.format(start, 'MMM d') + " \u2013 " + dateFns.format(end, 'MMM d, yyyy');
+/**
+ * Event color configurations
+ */
+var EVENT_COLORS = {
+  blue: {
+    background: 'color.blue.50',
+    border: 'color.blue.500',
+    text: 'color.blue.700'
+  },
+  red: {
+    background: 'color.red.50',
+    border: 'color.red.500',
+    text: 'color.red.700'
+  },
+  green: {
+    background: 'color.green.50',
+    border: 'color.green.500',
+    text: 'color.green.700'
+  },
+  purple: {
+    background: 'color.purple.50',
+    border: 'color.purple.500',
+    text: 'color.purple.700'
+  },
+  orange: {
+    background: 'color.orange.50',
+    border: 'color.orange.500',
+    text: 'color.orange.700'
   }
-  return dateFns.format(date, 'MMMM yyyy');
 };
-var normalizeEvents = events => events.map(event => normalizeEvent(event));
-var CalendarComponent = _ref => {
+/**
+ * Base styles for the calendar container
+ */
+var containerStyles = {
+  width: '100%',
+  maxWidth: 1200,
+  border: '1px solid',
+  borderColor: 'color.gray.200',
+  borderRadius: 8,
+  overflow: 'hidden',
+  backgroundColor: 'color.white'
+};
+/**
+ * Header styles (navigation bar)
+ */
+var headerStyles = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: 16,
+  paddingLeft: 20,
+  paddingRight: 20,
+  borderBottom: '1px solid',
+  borderColor: 'color.gray.200',
+  backgroundColor: 'color.white'
+};
+/**
+ * Month title styles
+ */
+var monthTitleStyles = {
+  fontSize: 20,
+  fontWeight: 500,
+  color: 'color.gray.900'
+};
+/**
+ * Month grid styles (7 columns for days)
+ */
+var monthGridStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: 'color.white'
+};
+/**
+ * Weekday header row styles
+ */
+var weekdayHeaderStyles = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(7, 1fr)',
+  borderBottom: '1px solid',
+  borderColor: 'color.gray.200',
+  backgroundColor: 'color.gray.50'
+};
+/**
+ * Individual weekday label styles
+ */
+var weekdayLabelStyles = {
+  padding: 8,
+  textAlign: 'center',
+  fontSize: 11,
+  fontWeight: 500,
+  color: 'color.gray.700',
+  textTransform: 'uppercase',
+  letterSpacing: 0.5
+};
+/**
+ * Individual day cell styles
+ */
+var dayCellStyles = {
+  border: '1px solid',
+  borderColor: 'color.gray.100',
+  minHeight: 120,
+  padding: 4,
+  paddingTop: 2,
+  backgroundColor: 'color.white',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column'
+};
+/**
+ * Day date styles (the circular number)
+ */
+var dayDateStyles = {
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  fontSize: 13,
+  fontWeight: 400,
+  color: 'color.gray.900',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
+  border: '2px solid transparent'
+};
+/**
+ * Day cell from different month
+ */
+var otherMonthDayCellStyles = {
+  backgroundColor: 'color.gray.50',
+  opacity: 0.5
+};
+/**
+ * Day number styles
+ */
+var dayNumberStyles = {
+  fontSize: 14,
+  fontWeight: 400,
+  color: 'color.gray.900',
+  marginBottom: 4,
+  padding: 4,
+  paddingLeft: 8,
+  paddingRight: 8,
+  borderRadius: 4,
+  alignSelf: 'flex-start'
+};
+/**
+ * Today day number styles
+ */
+var todayDayNumberStyles = {
+  backgroundColor: 'color.blue.500',
+  color: 'color.white',
+  fontWeight: 500
+};
+/**
+ * Selected day number styles
+ */
+var selectedDayNumberStyles = {
+  backgroundColor: 'color.blue.50',
+  color: 'color.blue.700',
+  fontWeight: 500
+};
+/**
+ * Events area styles (container for events in a day)
+ */
+var eventsAreaStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  flex: 1,
+  position: 'relative'
+};
+/**
+ * Base event styles
+ */
+var eventStyles = {
+  height: 20,
+  display: 'flex',
+  alignItems: 'center',
+  padding: 4,
+  paddingLeft: 6,
+  paddingRight: 6,
+  borderRadius: 3,
+  borderLeft: '3px solid',
+  fontSize: 11,
+  fontWeight: 500,
+  overflow: 'hidden',
+  cursor: 'grab',
+  transition: 'box-shadow 0.2s',
+  userSelect: 'none',
+  marginBottom: 2
+};
+/**
+ * Drop target indicator styles
+ */
+var dropTargetStyles = {
+  backgroundColor: 'rgba(26, 115, 232, 0.08)',
+  boxShadow: 'inset 0 0 0 2px rgba(26, 115, 232, 0.3)'
+};
+/**
+ * Button base styles
+ */
+var buttonStyles = {
+  padding: 8,
+  paddingLeft: 12,
+  paddingRight: 12,
+  borderRadius: 4,
+  fontSize: 14,
+  fontWeight: 500,
+  cursor: 'pointer',
+  border: '1px solid',
+  borderColor: 'color.gray.300',
+  backgroundColor: 'color.white',
+  color: 'color.gray.700',
+  transition: 'all 0.2s'
+};
+/**
+ * Icon button styles
+ */
+var iconButtonStyles = {
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  color: 'color.gray.700',
+  transition: 'all 0.2s',
+  border: 'none'
+};
+
+var ResizeHandle = _ref => {
   var {
-    events = [],
-    initialDate,
+    direction,
+    onMouseDown
+  } = _ref;
+  var [isHovered, setIsHovered] = React.useState(false);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 8,
+    opacity: isHovered ? 1 : 0,
+    transition: "opacity 0.2s",
+    cursor: direction === 'left' ? 'w-resize' : 'e-resize',
+    zIndex: 10,
+    backgroundColor: isHovered ? 'rgba(0,0,0,0.1)' : 'transparent'
+  }, direction === 'left' ? {
+    left: 0
+  } : {
+    right: 0
+  }, {
+    onMouseDown: onMouseDown,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }));
+};
+var MONTH_EVENT_ROW_HEIGHT = 22;
+var MONTH_EVENT_ROW_GAP = 4;
+var MONTH_EVENT_TOP_OFFSET = 32;
+var Calendar = _ref2 => {
+  var {
+    initialDate = new Date(),
     initialView = 'month',
-    weekStartsOn = 0,
-    height = '800px',
-    renderEvent,
+    events = [],
+    today = new Date().toISOString().slice(0, 10),
+    onEventDrop,
+    onEventResize,
+    onDateClick,
     onDateChange,
     onViewChange,
-    views
-  } = _ref;
-  var parsedInitialDate = React.useMemo(() => initialDate ? toDate(initialDate) : new Date(), [initialDate]);
-  var [currentDate, setCurrentDate] = React.useState(parsedInitialDate);
-  var [view, setView] = React.useState(initialView);
-  // Only update currentDate if initialDate prop is explicitly provided and changes
-  React.useEffect(() => {
-    if (initialDate !== undefined) {
-      setCurrentDate(parsedInitialDate);
-    }
-  }, [initialDate, parsedInitialDate]);
-  React.useEffect(() => {
-    setView(initialView);
-  }, [initialView]);
-  var handleDateChange = date => {
-    setCurrentDate(date);
-    onDateChange == null || onDateChange(date);
-  };
-  var handleViewChange = nextView => {
-    setView(nextView);
-    onViewChange == null || onViewChange(nextView);
-  };
-  var handleToday = () => handleDateChange(new Date());
-  var handlePrevious = () => {
-    switch (view) {
-      case 'day':
-        return handleDateChange(dateFns.subDays(currentDate, 1));
-      case 'week':
-        return handleDateChange(dateFns.subWeeks(currentDate, 1));
-      case 'month':
-      default:
-        return handleDateChange(dateFns.subMonths(currentDate, 1));
-    }
-  };
-  var handleNext = () => {
-    switch (view) {
-      case 'day':
-        return handleDateChange(dateFns.addDays(currentDate, 1));
-      case 'week':
-        return handleDateChange(dateFns.addWeeks(currentDate, 1));
-      case 'month':
-      default:
-        return handleDateChange(dateFns.addMonths(currentDate, 1));
-    }
-  };
-  var normalizedEvents = React.useMemo(() => normalizeEvents(events), [events]);
-  var visibleDays = React.useMemo(() => {
-    if (view === 'day') {
+    onEventAdd,
+    views = {},
+    width = '100%',
+    maxWidth = 1200,
+    weekStartsOn = 0
+  } = _ref2;
+  var {
+    getColor
+  } = appStudio.useTheme();
+  var gridRef = React.useRef(null);
+  // Convert initialDate to ISO string if it's a Date object
+  var initialDateISO = typeof initialDate === 'string' ? initialDate : initialDate.toISOString().slice(0, 10);
+  var [currentDate, setCurrentDate] = React.useState(initialDateISO);
+  var [currentView, setCurrentView] = React.useState(initialView);
+  var [selectedDate, setSelectedDate] = React.useState(null);
+  var [localEvents, setLocalEvents] = React.useState(events);
+  var [dropTargetDays, setDropTargetDays] = React.useState([]);
+  var dragStateRef = React.useRef({
+    isDragging: false,
+    isResizing: false,
+    resizeDirection: null,
+    event: null,
+    startX: 0,
+    startDay: 0,
+    startDuration: 0,
+    originalStart: null,
+    originalEnd: null
+  });
+  // Update local events when props change
+  React__default.useEffect(() => {
+    setLocalEvents(events);
+  }, [events]);
+  // Get the month start for current date
+  var currentMonth = React.useMemo(() => getFirstDayOfMonth(currentDate), [currentDate]);
+  // Generate calendar dates based on view
+  var calendarDates = React.useMemo(() => {
+    if (currentView === 'month') {
+      return getCalendarDates(currentMonth, weekStartsOn);
+    } else if (currentView === 'week') {
+      // Get week starting from current date
+      var dayOfWeek = getDayOfWeek(currentDate);
+      var weekStart = addDateDays(currentDate, -((dayOfWeek - weekStartsOn + 7) % 7));
+      var dates = [];
+      for (var i = 0; i < 7; i++) {
+        dates.push(addDateDays(weekStart, i));
+      }
+      return dates;
+    } else {
+      // Day view - just current date
       return [currentDate];
     }
-    if (view === 'week') {
-      var _start = dateFns.startOfWeek(currentDate, {
-        weekStartsOn
+  }, [currentDate, currentView, currentMonth, weekStartsOn]);
+  var monthWeeks = React.useMemo(() => {
+    var chunks = [];
+    for (var i = 0; i < calendarDates.length; i += 7) {
+      chunks.push(calendarDates.slice(i, i + 7));
+    }
+    return chunks;
+  }, [calendarDates]);
+  // Layout events
+  var {
+    items: positionedEvents
+  } = React.useMemo(() => layoutEvents(localEvents, calendarDates), [localEvents, calendarDates]);
+  var monthWeeksWithEvents = React.useMemo(() => {
+    return monthWeeks.map((dates, weekIndex) => {
+      var weekStartIdx = weekIndex * 7;
+      var weekEndIdx = weekStartIdx + dates.length - 1;
+      var segments = positionedEvents.filter(event => !(event.startDay > weekEndIdx || event.endDay < weekStartIdx)).map(event => {
+        var segmentStart = Math.max(event.startDay, weekStartIdx);
+        var segmentEnd = Math.min(event.endDay, weekEndIdx);
+        return Object.assign({}, event, {
+          weekIndex,
+          segmentStartDay: segmentStart - weekStartIdx,
+          segmentEndDay: segmentEnd - weekStartIdx,
+          segmentDuration: segmentEnd - segmentStart + 1,
+          segmentRow: 0
+        });
       });
-      return Array.from({
-        length: 7
-      }, (_, index) => dateFns.addDays(_start, index));
-    }
-    var monthStart = dateFns.startOfMonth(currentDate);
-    var monthEnd = dateFns.endOfMonth(currentDate);
-    var start = dateFns.startOfWeek(monthStart, {
-      weekStartsOn
-    });
-    var end = dateFns.endOfWeek(monthEnd, {
-      weekStartsOn
-    });
-    return dateFns.eachDayOfInterval({
-      start,
-      end
+      segments.sort((a, b) => {
+        if (a.segmentStartDay !== b.segmentStartDay) {
+          return a.segmentStartDay - b.segmentStartDay;
+        }
+        return b.segmentDuration - a.segmentDuration;
+      });
+      var rows = [];
+      segments.forEach(segment => {
+        var placed = false;
+        for (var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+          var row = rows[rowIdx];
+          var conflict = row.some(existing => !(segment.segmentStartDay > existing.segmentEndDay || segment.segmentEndDay < existing.segmentStartDay));
+          if (!conflict) {
+            segment.segmentRow = rowIdx;
+            row.push(segment);
+            placed = true;
+            break;
+          }
+        }
+        if (!placed) {
+          segment.segmentRow = rows.length;
+          rows.push([segment]);
+        }
+      });
+      return {
+        weekIndex,
+        dates,
+        segments,
+        rowCount: rows.length
+      };
     });
-  }, [currentDate, view, weekStartsOn]);
-  var weeks = React.useMemo(() => {
-    if (view === 'month') {
-      return chunk(visibleDays, 7);
-    }
-    return [visibleDays];
-  }, [visibleDays, view]);
-  var eventsByDay = React.useMemo(() => {
-    var days = weeks.flat();
-    var map = new Map();
-    days.forEach(day => {
-      map.set(formatDayKey(day), getEventsForDay(normalizedEvents, day));
+  }, [monthWeeks, positionedEvents]);
+  // Get day names
+  var dayNames = React.useMemo(() => getDayNames(weekStartsOn), [weekStartsOn]);
+  // Handle navigation
+  var handlePrevious = React.useCallback(() => {
+    var newDate;
+    if (currentView === 'month') {
+      newDate = getPreviousMonth(currentDate);
+    } else if (currentView === 'week') {
+      newDate = addDateDays(currentDate, -7);
+    } else {
+      newDate = addDateDays(currentDate, -1);
+    }
+    setCurrentDate(newDate);
+    onDateChange == null || onDateChange(new Date(newDate + 'T00:00:00Z'));
+  }, [currentDate, currentView, onDateChange]);
+  var handleNext = React.useCallback(() => {
+    var newDate;
+    if (currentView === 'month') {
+      newDate = getNextMonth(currentDate);
+    } else if (currentView === 'week') {
+      newDate = addDateDays(currentDate, 7);
+    } else {
+      newDate = addDateDays(currentDate, 1);
+    }
+    setCurrentDate(newDate);
+    onDateChange == null || onDateChange(new Date(newDate + 'T00:00:00Z'));
+  }, [currentDate, currentView, onDateChange]);
+  var handleToday = React.useCallback(() => {
+    setCurrentDate(today);
+    onDateChange == null || onDateChange(new Date(today + 'T00:00:00Z'));
+  }, [today, onDateChange]);
+  // Handle view change
+  var handleViewChange = React.useCallback(view => {
+    setCurrentView(view);
+    onViewChange == null || onViewChange(view);
+  }, [onViewChange]);
+  // Handle date click
+  var handleDateClick = React.useCallback(dateISO => {
+    setSelectedDate(dateISO);
+    onDateClick == null || onDateClick(dateISO);
+  }, [onDateClick]);
+  // Handle double-click to add event
+  var handleDateDoubleClick = React.useCallback((dateISO, hour) => {
+    if (onEventAdd) {
+      var start;
+      var end;
+      if (hour !== undefined) {
+        // Day view with time
+        var hourStr = hour.toString().padStart(2, '0');
+        start = dateISO + "T" + hourStr + ":00";
+        end = dateISO + "T" + (hour + 1).toString().padStart(2, '0') + ":00";
+      } else {
+        // Month/week view
+        start = dateISO;
+        end = dateISO;
+      }
+      onEventAdd(start, end);
+    }
+  }, [onEventAdd]);
+  // Handle mouse down on event (start dragging)
+  var handleEventMouseDown = React.useCallback((e, event) => {
+    e.preventDefault();
+    dragStateRef.current = {
+      isDragging: true,
+      isResizing: false,
+      resizeDirection: null,
+      event,
+      startX: e.clientX,
+      startDay: event.startDay,
+      startDuration: event.duration,
+      originalStart: event.start,
+      originalEnd: event.end
+    };
+  }, []);
+  // Handle resize start
+  var handleResizeStart = React.useCallback((e, event, direction) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragStateRef.current = {
+      isDragging: false,
+      isResizing: true,
+      resizeDirection: direction,
+      event,
+      startX: e.clientX,
+      startDay: event.startDay,
+      startDuration: event.duration,
+      originalStart: event.start,
+      originalEnd: event.end
+    };
+  }, []);
+  // Handle mouse move during resize or drag
+  var handleMouseMove = React.useCallback(e => {
+    var dragState = dragStateRef.current;
+    if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
+    if (!gridRef.current) return;
+    var rect = gridRef.current.getBoundingClientRect();
+    var deltaX = e.clientX - dragState.startX;
+    // Calculate day delta based on pixel movement
+    var daysDelta;
+    if (currentView === 'month') {
+      var dayWidth = rect.width / 7;
+      daysDelta = Math.round(deltaX / dayWidth);
+    } else if (currentView === 'week') {
+      var _dayWidth = rect.width / 7;
+      daysDelta = Math.round(deltaX / _dayWidth);
+    } else {
+      // Day view - no horizontal resize
+      return;
+    }
+    if (dragState.isDragging) {
+      // Dragging - move the event
+      var maxDays = calendarDates.length - 1;
+      var newStartDay = Math.max(0, Math.min(maxDays, dragState.startDay + daysDelta));
+      var duration = dragState.event.duration;
+      var newEndDay = Math.min(maxDays, newStartDay + duration - 1);
+      // Update drop target indicators
+      var targetDays = [];
+      for (var i = newStartDay; i <= newEndDay; i++) {
+        targetDays.push(i);
+      }
+      setDropTargetDays(targetDays);
+      // Update event position immediately for smooth dragging
+      var updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
+        start: addDateDays(dragState.originalStart, newStartDay - dragState.startDay),
+        end: addDateDays(dragState.originalEnd, newStartDay - dragState.startDay)
+      }) : ev);
+      setLocalEvents(updatedEvents);
+    } else if (dragState.isResizing) {
+      // Resizing
+      if (dragState.resizeDirection === 'right') {
+        // Resize from right
+        var newDuration = Math.max(1, dragState.startDuration + daysDelta);
+        var _maxDays = calendarDates.length - 1;
+        var _newEndDay = Math.min(_maxDays, dragState.startDay + newDuration - 1);
+        var actualDuration = _newEndDay - dragState.startDay + 1;
+        var _updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
+          end: addDateDays(dragState.originalStart, actualDuration - 1)
+        }) : ev);
+        setLocalEvents(_updatedEvents);
+      } else if (dragState.resizeDirection === 'left') {
+        // Resize from left
+        var _newStartDay = Math.max(0, Math.min(dragState.startDay + dragState.startDuration - 1, dragState.startDay + daysDelta));
+        var _updatedEvents2 = localEvents.map(ev => ev.id === dragState.event.id ? Object.assign({}, ev, {
+          start: addDateDays(dragState.originalStart, _newStartDay - dragState.startDay)
+        }) : ev);
+        setLocalEvents(_updatedEvents2);
+      }
+    }
+  }, [localEvents, calendarDates, currentView]);
+  // Handle mouse up - finish resize/drag
+  var handleMouseUp = React.useCallback(e => {
+    var dragState = dragStateRef.current;
+    if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
+    setDropTargetDays([]);
+    // Find the updated event
+    var updatedEvent = localEvents.find(ev => ev.id === dragState.event.id);
+    if (!updatedEvent) return;
+    // Call appropriate callback
+    if (dragState.isDragging) {
+      onEventDrop == null || onEventDrop(updatedEvent);
+    } else if (dragState.isResizing) {
+      onEventResize == null || onEventResize(updatedEvent);
+    }
+    // Reset drag state
+    dragStateRef.current = {
+      isDragging: false,
+      isResizing: false,
+      resizeDirection: null,
+      event: null,
+      startX: 0,
+      startDay: 0,
+      startDuration: 0,
+      originalStart: null,
+      originalEnd: null
+    };
+  }, [localEvents, onEventDrop, onEventResize]);
+  // Set up global mouse event listeners
+  React__default.useEffect(() => {
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+  // Group events by date for rendering
+  var eventsByDate = React.useMemo(() => {
+    var grouped = {};
+    calendarDates.forEach(date => {
+      grouped[date] = [];
     });
-    return map;
-  }, [normalizedEvents, weeks]);
-  var weekdayLabels = React.useMemo(() => {
-    var start = dateFns.startOfWeek(currentDate, {
-      weekStartsOn
+    positionedEvents.forEach(event => {
+      // For multi-day events, show on each day it spans
+      var startIdx = event.startDay;
+      var endIdx = event.endDay;
+      for (var i = startIdx; i <= endIdx && i < calendarDates.length; i++) {
+        var date = calendarDates[i];
+        if (date && grouped[date]) {
+          var isFirstDay = i === startIdx;
+          grouped[date].push(Object.assign({}, event, {
+            isFirstDay
+          }));
+        }
+      }
     });
-    return Array.from({
-      length: 7
-    }, (_, index) => dateFns.addDays(start, index));
-  }, [currentDate, weekStartsOn]);
-  var label = React.useMemo(() => getLabelForView(currentDate, view, weekStartsOn), [currentDate, view, weekStartsOn]);
-  return /*#__PURE__*/React__default.createElement(CalendarViewComponent, {
-    currentDate: currentDate,
-    view: view,
-    label: label,
-    weeks: weeks,
-    weekdayLabels: weekdayLabels,
-    eventsByDay: eventsByDay,
-    onPrevious: handlePrevious,
-    onNext: handleNext,
-    onToday: handleToday,
-    onViewChange: handleViewChange,
-    renderEvent: renderEvent,
-    views: views,
-    height: height
-  });
+    return grouped;
+  }, [positionedEvents, calendarDates]);
+  // Render month view
+  var renderMonthView = () => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayHeaderStyles, views.weekdayHeader), dayNames.map((dayName, index) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    key: index
+  }, weekdayLabelStyles, views.weekdayLabel), dayName)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: gridRef
+  }, monthGridStyles, views.monthGrid), monthWeeksWithEvents.map(week => {
+    var weekStartIdx = week.weekIndex * 7;
+    var weekEndIdx = weekStartIdx + week.dates.length - 1;
+    return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      key: "week-" + week.weekIndex,
+      position: "relative"
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, 1fr)"
+    }, week.dates.map((dateISO, dayOffset) => {
+      var dateNum = getDateNumber(dateISO);
+      var isToday = dateISO === today;
+      var isSelected = dateISO === selectedDate;
+      var isCurrentMonth = isInMonth(dateISO, currentMonth);
+      var dayIndex = weekStartIdx + dayOffset;
+      var isDropTarget = dropTargetDays.includes(dayIndex);
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: dateISO,
+        "data-date": dateISO
+      }, dayCellStyles, !isCurrentMonth && otherMonthDayCellStyles, isDropTarget && dropTargetStyles, {
+        onClick: () => handleDateClick(dateISO),
+        onDoubleClick: () => handleDateDoubleClick(dateISO)
+      }, views.dayCell), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
+        style: {
+          cursor: 'pointer'
+        }
+      }, views.dayNumber), dateNum));
+    })), week.segments.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: MONTH_EVENT_TOP_OFFSET,
+      pointerEvents: "none"
+    }, week.segments.map(event => {
+      var _dragStateRef$current, _dragStateRef$current2;
+      var colorConfig = EVENT_COLORS[event.color || 'blue'];
+      var dayWidth = 100 / week.dates.length;
+      var left = event.segmentStartDay * dayWidth;
+      var width = event.segmentDuration * dayWidth;
+      var isDragging = dragStateRef.current.isDragging && ((_dragStateRef$current = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current.id) === event.id;
+      var isResizing = dragStateRef.current.isResizing && ((_dragStateRef$current2 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current2.id) === event.id;
+      var showLeftHandle = event.startDay >= weekStartIdx && event.startDay <= weekEndIdx && event.segmentStartDay === event.startDay - weekStartIdx;
+      var showRightHandle = event.endDay >= weekStartIdx && event.endDay <= weekEndIdx && event.segmentEndDay === event.endDay - weekStartIdx;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: event.id + "-" + event.weekIndex + "-" + event.segmentStartDay,
+        position: "absolute",
+        height: MONTH_EVENT_ROW_HEIGHT,
+        display: "flex",
+        alignItems: "center",
+        paddingLeft: 8,
+        paddingRight: 8,
+        borderRadius: 4,
+        backgroundColor: colorConfig.background,
+        borderLeft: "3px solid",
+        borderLeftColor: colorConfig.border,
+        color: colorConfig.text,
+        fontSize: 11,
+        fontWeight: 500,
+        overflow: "hidden",
+        cursor: isDragging ? 'grabbing' : 'grab',
+        opacity: isDragging || isResizing ? 0.7 : 1,
+        boxShadow: isDragging || isResizing ? '0 4px 12px rgba(0,0,0,0.3)' : '0 1px 2px rgba(0,0,0,0.1)',
+        transition: isDragging || isResizing ? 'none' : 'box-shadow 0.2s',
+        pointerEvents: "auto",
+        userSelect: "none",
+        left: "calc(" + left + "% + 4px)",
+        width: "calc(" + width + "% - 8px)",
+        top: event.segmentRow * (MONTH_EVENT_ROW_HEIGHT + MONTH_EVENT_ROW_GAP) + "px",
+        onMouseDown: e => handleEventMouseDown(e, event),
+        title: event.title
+      }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        width: "100%"
+      }, event.title), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
+        direction: "left",
+        onMouseDown: e => handleResizeStart(e, event, 'left')
+      })), showRightHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
+        direction: "right",
+        onMouseDown: e => handleResizeStart(e, event, 'right')
+      })));
+    }))));
+  }))));
+  // Render week view
+  var renderWeekView = () => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayHeaderStyles, views.weekdayHeader), calendarDates.map((dateISO, index) => {
+    var dayOfWeek = getDayOfWeek(dateISO);
+    var dateNum = getDateNumber(dateISO);
+    var isToday = dateISO === today;
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      key: dateISO,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      padding: 8,
+      gap: 4
+    }, views.weekdayLabel), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayDateStyles, isToday && todayDayNumberStyles, {
+      fontSize: 16,
+      fontWeight: isToday ? 500 : 400
+    }), dateNum));
+  })), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    ref: gridRef,
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    minHeight: 400
+  }, calendarDates.map((dateISO, index) => {
+    var isDropTarget = dropTargetDays.includes(index);
+    var dayEvents = eventsByDate[dateISO] || [];
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      key: dateISO,
+      "data-date": dateISO
+    }, dayCellStyles, isDropTarget && dropTargetStyles, {
+      minHeight: 400,
+      onClick: () => handleDateClick(dateISO),
+      onDoubleClick: () => handleDateDoubleClick(dateISO)
+    }), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, eventsAreaStyles, views.eventsArea), dayEvents.map(event => {
+      var _dragStateRef$current3, _dragStateRef$current4;
+      var colorConfig = EVENT_COLORS[event.color || 'blue'];
+      var isFirstDay = event.isFirstDay !== false;
+      if (!isFirstDay) return null;
+      var isDragging = dragStateRef.current.isDragging && ((_dragStateRef$current3 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current3.id) === event.id;
+      var isResizing = dragStateRef.current.isResizing && ((_dragStateRef$current4 = dragStateRef.current.event) == null ? void 0 : _dragStateRef$current4.id) === event.id;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: event.id,
+        position: "relative"
+      }, eventStyles, {
+        backgroundColor: colorConfig.background,
+        borderLeftColor: colorConfig.border,
+        color: colorConfig.text,
+        cursor: isDragging ? 'grabbing' : 'grab',
+        opacity: isDragging || isResizing ? 0.7 : 1,
+        boxShadow: isDragging || isResizing ? '0 4px 12px rgba(0,0,0,0.3)' : '0 1px 2px rgba(0,0,0,0.1)',
+        transition: isDragging || isResizing ? 'none' : 'box-shadow 0.2s',
+        userSelect: "none",
+        onMouseDown: e => handleEventMouseDown(e, event),
+        title: event.title
+      }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        width: "100%"
+      }, event.title), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        direction: "left",
+        onMouseDown: e => handleResizeStart(e, event, 'left')
+      }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        direction: "right",
+        onMouseDown: e => handleResizeStart(e, event, 'right')
+      }));
+    })));
+  }))));
+  // Render day view with hourly time slots
+  var renderDayView = () => {
+    var hours = Array.from({
+      length: 24
+    }, (_, i) => i);
+    var dateISO = currentDate;
+    var dayEvents = eventsByDate[dateISO] || [];
+    return /*#__PURE__*/React__default.createElement(appStudio.View, {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1
+    }, hours.map(hour => {
+      var hourStr = hour.toString().padStart(2, '0') + ":00";
+      return /*#__PURE__*/React__default.createElement(appStudio.View, {
+        key: hour,
+        display: "flex",
+        borderBottom: "1px solid",
+        borderColor: "color.gray.200",
+        minHeight: 60,
+        onDoubleClick: () => handleDateDoubleClick(dateISO, hour),
+        cursor: "pointer",
+        _hover: {
+          backgroundColor: 'color.gray.50'
+        }
+      }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        width: 80,
+        padding: 8,
+        fontSize: 12,
+        color: "color.gray.600",
+        borderRight: "1px solid",
+        borderColor: "color.gray.200"
+      }, views.timeColumn), hourStr), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        flex: 1,
+        padding: 8,
+        position: "relative"
+      }, views.timeSlot), dayEvents.filter(event => {
+        // Simple check if event starts in this hour
+        if (event.start.includes('T')) {
+          var eventHour = parseInt(event.start.split('T')[1].split(':')[0]);
+          return eventHour === hour;
+        }
+        return false;
+      }).map(event => {
+        var colorConfig = EVENT_COLORS[event.color || 'blue'];
+        return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+          key: event.id
+        }, eventStyles, {
+          backgroundColor: colorConfig.background,
+          borderLeftColor: colorConfig.border,
+          color: colorConfig.text,
+          marginBottom: 4
+        }, views.event), event.title);
+      })));
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles, {
+    width: width,
+    maxWidth: maxWidth
+  }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({}, headerStyles, views.header), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, monthTitleStyles, views.monthTitle), getMonthName(currentMonth), " ", getYear(currentMonth)), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    gap: 8
+  }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    gap: 4
+  }, views.viewSwitcher), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, buttonStyles, {
+    backgroundColor: currentView === 'month' ? 'color.primary.100' : 'color.white',
+    color: currentView === 'month' ? 'color.primary.700' : 'color.gray.700',
+    onClick: () => handleViewChange('month'),
+    style: {
+      cursor: 'pointer'
+    }
+  }), "Month"), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, buttonStyles, {
+    backgroundColor: currentView === 'week' ? 'color.primary.100' : 'color.white',
+    color: currentView === 'week' ? 'color.primary.700' : 'color.gray.700',
+    onClick: () => handleViewChange('week'),
+    style: {
+      cursor: 'pointer'
+    }
+  }), "Week"), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, buttonStyles, {
+    backgroundColor: currentView === 'day' ? 'color.primary.100' : 'color.white',
+    color: currentView === 'day' ? 'color.primary.700' : 'color.gray.700',
+    onClick: () => handleViewChange('day'),
+    style: {
+      cursor: 'pointer'
+    }
+  }), "Day")), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, buttonStyles, {
+    onClick: handleToday,
+    style: {
+      cursor: 'pointer'
+    }
+  }, views.navButton), "Today"), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    gap: 4
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, iconButtonStyles, {
+    onClick: handlePrevious,
+    style: {
+      cursor: 'pointer'
+    }
+  }, views.navButton), "\u2039"), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, iconButtonStyles, {
+    onClick: handleNext,
+    style: {
+      cursor: 'pointer'
+    }
+  }, views.navButton), "\u203A")))), currentView === 'month' && renderMonthView(), currentView === 'week' && renderWeekView(), currentView === 'day' && renderDayView());
 };
-var Calendar = CalendarComponent;
 
 /**
  * Custom hook to manage cookie consent state
@@ -8305,7 +9025,7 @@ var getThemes$1 = themeMode => {
   };
 };
 
-var _excluded$k = ["title", "description", "acceptButtonText", "customizeButtonText", "position", "variant", "onAccept", "onCustomize", "views", "showCustomizeButton", "cookieExpiration", "themeMode"];
+var _excluded$i = ["title", "description", "acceptButtonText", "customizeButtonText", "position", "variant", "onAccept", "onCustomize", "views", "showCustomizeButton", "cookieExpiration", "themeMode"];
 /**
  * CookieConsent View Component
  *
@@ -8326,7 +9046,7 @@ var CookieConsentView = _ref => {
       cookieExpiration = 365,
       themeMode: propThemeMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   // Get theme context
   var {
     themeMode: contextThemeMode
@@ -8567,8 +9287,8 @@ var ContextMenuItemStates = {
 // Note: Manual positioning logic has been replaced with intelligent positioning
 // using viewport-aware algorithms in the ContextMenu component
 
-var _excluded$l = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
-  _excluded2$7 = ["items", "children", "position", "side", "align", "views", "style"],
+var _excluded$j = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
+  _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
   _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
   _excluded4$5 = ["views"],
   _excluded5$2 = ["views"],
@@ -8623,7 +9343,7 @@ var ContextMenuTrigger = _ref2 => {
       isDisabled = false,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
   var {
     triggerRef,
     contentId,
@@ -8677,7 +9397,7 @@ var ContextMenuContent = _ref3 => {
       views,
       style // Capture user-provided style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
   var {
     isOpen,
     position: contextPosition,
@@ -8969,7 +9689,7 @@ var ContextMenuView = _ref7 => {
   }));
 };
 
-var _excluded$m = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
+var _excluded$k = ["children", "items", "size", "variant", "disableNativeContextMenu", "onOpenChange", "views"];
 /**
  * ContextMenu component for displaying a custom context menu on right-click.
  * Supports both data-driven approach (with items prop) and compound component pattern.
@@ -8984,7 +9704,7 @@ var ContextMenuComponent = _ref => {
       onOpenChange,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var state = useContextMenuState({
     size,
     variant,
@@ -9036,15 +9756,15 @@ ContextMenu.Item = ContextMenuItem;
 ContextMenu.Divider = ContextMenuDivider;
 ContextMenu.Separator = ContextMenuSeparator; // Add the Separator component
 
-var _excluded$n = ["src", "color", "views", "themeMode"],
-  _excluded2$8 = ["path"];
+var _excluded$l = ["src", "color", "views", "themeMode"],
+  _excluded2$7 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
       color,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var {
     getColor,
     themeMode
@@ -9067,7 +9787,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -9120,7 +9840,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$o = ["children", "views"];
+var _excluded$m = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -9128,7 +9848,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(Text
   // Typography properties
   , Object.assign({
@@ -9154,7 +9874,7 @@ var HelperText = _ref => {
   }, views['helperText'], props), children);
 };
 
-var _excluded$p = ["children", "helperText", "error", "views"];
+var _excluded$n = ["children", "helperText", "error", "views"];
 var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var {
       children,
@@ -9162,7 +9882,7 @@ var FieldContainer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       error = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     ref: ref,
     // Layout properties
@@ -9198,13 +9918,23 @@ FieldContainer.displayName = 'FieldContainer';
  */
 var Shapes = {
   default: {
-    borderRadius: '8px'
+    borderRadius: '8px',
+    media: {
+      mobile: {
+        borderRadius: '6px'
+      }
+    }
   },
   sharp: {
     borderRadius: 0
   },
   rounded: {
-    borderRadius: '8px'
+    borderRadius: '8px',
+    media: {
+      mobile: {
+        borderRadius: '6px'
+      }
+    }
   },
   pillShaped: {
     borderRadius: '9999px'
@@ -9229,13 +9959,19 @@ var InputVariants = {
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
     backgroundColor: 'color.white',
-    transition: 'all 0.2s ease',
+    transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
     _hover: {
       borderColor: 'color.gray.300'
     },
     _focus: {
       borderColor: 'theme.primary',
-      boxShadow: '0 0 0 1px rgba(66, 153, 225, 0.2)'
+      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',
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.2)'
     }
   },
   default: {
@@ -9245,18 +9981,29 @@ var InputVariants = {
     borderBottomColor: 'color.gray.200',
     borderRadius: 0,
     backgroundColor: 'color.white',
-    transition: 'all 0.2s ease',
+    transition: 'border-color 0.2s ease',
     _hover: {
       borderBottomColor: 'color.gray.300'
     },
     _focus: {
-      borderBottomColor: 'theme.primary'
+      borderBottomColor: 'theme.primary',
+      outline: 'none'
+    },
+    _focusVisible: {
+      borderBottomColor: 'theme.primary',
+      outline: 'none'
     }
   },
   none: {
     border: 'none',
     backgroundColor: 'transparent',
-    transition: 'all 0.2s ease'
+    transition: 'background-color 0.2s ease',
+    _focus: {
+      outline: 'none'
+    },
+    _focusVisible: {
+      outline: 'none'
+    }
   }
 };
 /**
@@ -9266,7 +10013,15 @@ var PadddingWithLabel = {
   paddingTop: '16px',
   paddingBottom: '8px',
   paddingLeft: '16px',
-  paddingRight: '16px'
+  paddingRight: '16px',
+  media: {
+    mobile: {
+      paddingTop: '12px',
+      paddingBottom: '6px',
+      paddingLeft: '12px',
+      paddingRight: '12px'
+    }
+  }
 };
 /**
  * Padding for input without label following the 4px grid system
@@ -9275,10 +10030,18 @@ var PaddingWithoutLabel = {
   paddingTop: '12px',
   paddingBottom: '12px',
   paddingLeft: '16px',
-  paddingRight: '16px'
+  paddingRight: '16px',
+  media: {
+    mobile: {
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      paddingLeft: '12px',
+      paddingRight: '12px'
+    }
+  }
 };
 
-var _excluded$q = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
+var _excluded$o = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "showLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
 var FieldContent = _ref => {
   var {
       shadow,
@@ -9296,7 +10059,7 @@ var FieldContent = _ref => {
         pickerBox: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   // Determine if the field is in an interactive state
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   // Set the appropriate color based on state
@@ -9325,12 +10088,12 @@ var FieldContent = _ref => {
   }, showLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
 };
 
-var _excluded$r = ["children"];
+var _excluded$p = ["children"];
 var FieldIcons = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     gap: 10,
     right: 10,
@@ -9381,7 +10144,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$s = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
+var _excluded$q = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size", "dropDown"];
 var LabelView = _ref => {
   var {
       children,
@@ -9397,7 +10160,7 @@ var LabelView = _ref => {
       size = 'sm'
       // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -9429,7 +10192,7 @@ React__default.createElement(LabelView, Object.assign({}, props))
 var Label = LabelComponent;
 // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-var _excluded$t = ["children", "size", "error", "color", "views", "helperText"];
+var _excluded$r = ["children", "size", "error", "color", "views", "helperText"];
 var FieldLabel = _ref => {
   var {
       children,
@@ -9440,7 +10203,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(Label
   // Position properties
   , Object.assign({
@@ -9461,12 +10224,12 @@ var FieldLabel = _ref => {
   }, views['label'], props), children);
 };
 
-var _excluded$u = ["children"];
+var _excluded$s = ["children"];
 var FieldWrapper = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(appStudio.Vertical
   // Layout properties
   , Object.assign({
@@ -9499,8 +10262,8 @@ var IconSizes$2 = {
   xl: 28
 };
 
-var _excluded$v = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$9 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+var _excluded$t = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$6 = ["option", "size", "removeOption"],
   _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 /**
@@ -9517,7 +10280,7 @@ var Item = _ref => {
       callback = () => {},
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   // Handles the click event on an option by invoking the callback with the selected option's value
   var handleOptionClick = (e, option) => {
     e.stopPropagation();
@@ -9625,7 +10388,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$9);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -10110,18 +10873,27 @@ var ColorSchemes = {
   // State-specific colors
   states: {
     hover: {
-      active: 'color.blue.600',
-      inactive: 'color.gray.400'
+      active: {
+        opacity: 0.9
+      },
+      inactive: {
+        backgroundColor: 'color.gray.400'
+      }
     },
     focus: {
-      active: 'color.blue.600',
-      inactive: 'color.gray.400',
-      outline: 'rgba(66, 153, 225, 0.6)'
+      active: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.3)'
+      },
+      inactive: {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(0, 0, 0, 0.1)'
+      }
     }
   }
 };
 
-var _excluded$w = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+var _excluded$u = ["id", "name", "label", "inActiveChild", "isChecked", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
 var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -10149,7 +10921,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var handleToggle = event => {
     if (!isReadOnly && !isDisabled) {
       var newValue = event.target.checked;
@@ -10286,7 +11058,7 @@ var useTextAreaState = _ref => {
   // Export of the useTextAreaState hook for external usage.
 };
 
-var _excluded$x = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
+var _excluded$v = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
 var TextAreaView = _ref => {
   var {
       id,
@@ -10321,7 +11093,7 @@ var TextAreaView = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var showLabel = !!(isFocused && label);
   /**
    * Styles for the textarea field
@@ -10460,7 +11232,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$y = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
+var _excluded$w = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
 /**
  * Input component for text fields
  */
@@ -10506,7 +11278,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var {
     getColor,
     themeMode
@@ -10699,19 +11471,26 @@ var VariantStyles = {
   selected: {
     backgroundColor: 'theme.primary',
     borderColor: 'theme.primary',
-    color: 'color.white'
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    color: 'color.white',
+    transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease'
   },
   unselected: {
     backgroundColor: 'color.white',
     borderWidth: '2px',
     borderStyle: 'solid',
     borderColor: 'color.gray.300',
-    color: 'color.black'
+    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',
-    color: 'color.white'
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    color: 'color.white',
+    transition: 'background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease'
   }
 };
 /**
@@ -10720,31 +11499,47 @@ var VariantStyles = {
 var StateStyles = {
   hover: {
     selected: {
-      backgroundColor: 'color.blue.600',
-      borderColor: 'color.blue.600'
+      opacity: 0.9
     },
     unselected: {
-      borderColor: 'color.gray.400'
+      borderColor: 'color.gray.400',
+      backgroundColor: 'color.gray.50'
+    },
+    indeterminate: {
+      opacity: 0.9
+    }
+  },
+  focus: {
+    selected: {
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.3)'
+    },
+    unselected: {
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.3)'
     },
     indeterminate: {
-      backgroundColor: 'color.blue.600',
-      borderColor: 'color.blue.600'
+      outline: 'none',
+      boxShadow: '0 0 0 2px rgba(255, 255, 255, 1), 0 0 0 4px rgba(66, 153, 225, 0.3)'
     }
   },
   disabled: {
     selected: {
       backgroundColor: 'color.gray.300',
       borderColor: 'color.gray.300',
-      opacity: 0.6
+      opacity: 0.5,
+      cursor: 'not-allowed'
     },
     unselected: {
       borderColor: 'color.gray.300',
-      opacity: 0.6
+      opacity: 0.5,
+      cursor: 'not-allowed'
     },
     indeterminate: {
       backgroundColor: 'color.gray.300',
       borderColor: 'color.gray.300',
-      opacity: 0.6
+      opacity: 0.5,
+      cursor: 'not-allowed'
     }
   },
   error: {
@@ -10762,7 +11557,7 @@ var StateStyles = {
   }
 };
 
-var _excluded$z = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
+var _excluded$x = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
 var CheckboxView = _ref => {
   var {
       id,
@@ -10789,7 +11584,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -11247,7 +12042,7 @@ var DefaultColorPalette = [
   value: 'transparent'
 }];
 
-var _excluded$A = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef"];
+var _excluded$y = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "shadow", "error", "isDisabled", "isReadOnly", "isFocused", "isHovered", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "setIsFocused", "setIsHovered", "triggerRef", "dropdownRef"];
 var ColorInputView = _ref => {
   var {
       // Basic props
@@ -11288,7 +12083,7 @@ var ColorInputView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var {
     getColor
   } = appStudio.useTheme();
@@ -12927,11 +13722,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$B = ["size"],
-  _excluded2$a = ["size"],
+var _excluded$z = ["size"],
+  _excluded2$9 = ["size"],
   _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
@@ -12940,7 +13735,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$a);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$9);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -13172,7 +13967,7 @@ var useDatePickerState = () => {
   };
 };
 
-var _excluded$C = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$A = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -13205,7 +14000,7 @@ var DatePickerView = _ref => {
       onChange,
       onChangeText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var showLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -13292,8 +14087,8 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$D = ["visibleIcon", "hiddenIcon"],
-  _excluded2$b = ["isVisible", "setIsVisible"];
+var _excluded$B = ["visibleIcon", "hiddenIcon"],
+  _excluded2$a = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -13303,13 +14098,13 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$b);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$a);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -13357,7 +14152,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-var _excluded$E = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
+var _excluded$C = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
 // Defines the functional component 'ComboBoxView' with destructured props.
 var ComboBoxView = _ref => {
   var {
@@ -13382,7 +14177,7 @@ var ComboBoxView = _ref => {
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var {
     ref: triggerRef,
     relation
@@ -13529,7 +14324,7 @@ var ComboBoxView = _ref => {
   })))))))))));
 };
 
-var _excluded$F = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+var _excluded$D = ["id", "name", "items", "placeholder", "searchPlaceholder"];
 // Defines the ComboBoxComponent functional component with ComboBoxProps
 var ComboBoxComponent = _ref => {
   var {
@@ -13545,7 +14340,7 @@ var ComboBoxComponent = _ref => {
       searchPlaceholder
       // Destructures the rest of the props not explicitly defined
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   // Initializes ComboBox state using custom hook with items and placeholders
   var state = useComboBoxState(items, placeholder, searchPlaceholder);
   return (
@@ -13754,7 +14549,7 @@ var useTagInputState = props => {
   };
 };
 
-var _excluded$G = ["id", "name", "label", "placeholder", "helperText", "error", "inputValue", "tags", "left", "right", "shadow", "views", "size", "shape", "variant", "isDisabled", "isReadOnly", "isAutoFocus", "isRemovable", "isFocused", "isHovered", "maxTags", "handleInputChange", "handleKeyDown", "handleFocus", "handleBlur", "removeTag", "setIsHovered", "onClick"];
+var _excluded$E = ["id", "name", "label", "placeholder", "helperText", "error", "inputValue", "tags", "left", "right", "shadow", "views", "size", "shape", "variant", "isDisabled", "isReadOnly", "isAutoFocus", "isRemovable", "isFocused", "isHovered", "maxTags", "handleInputChange", "handleKeyDown", "handleFocus", "handleBlur", "removeTag", "setIsHovered", "onClick"];
 /**
  * Individual tag chip component
  */
@@ -13870,7 +14665,7 @@ var TagInputView = _ref2 => {
       setIsHovered,
       onClick
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$G);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
   var {
     getColor,
     themeMode
@@ -13953,7 +14748,7 @@ var TagInputView = _ref2 => {
   }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
 };
 
-var _excluded$H = ["tags"];
+var _excluded$F = ["tags"];
 /**
  * TagInput Component
  *
@@ -13965,7 +14760,7 @@ var TagInputComponent = props => {
   // Initialize state management with the custom hook
   var tagInputState = useTagInputState(props);
   // Separate the tags prop to avoid type conflicts
-  var restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
+  var restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
   // Render the view component with combined props and state
   return /*#__PURE__*/React__default.createElement(TagInputView, Object.assign({}, tagInputState, restProps));
 };
@@ -14278,7 +15073,7 @@ var useOTPInputState = _ref => {
   };
 };
 
-var _excluded$I = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
+var _excluded$G = ["id", "name", "label", "value", "length", "onChange", "onChangeText", "onComplete", "helperText", "placeholder", "shadow", "views", "size", "shape", "variant", "gap", "type", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isAutoFocus", "setValue", "setIsFocused", "setIsHovered", "inputRef", "containerRef", "mirrorSelectionStart", "mirrorSelectionEnd", "setMirrorSelectionStart", "setMirrorSelectionEnd", "handlePaste", "handleChange", "handleFocus", "handleBlur", "handleKeyDown", "handleKeyPress", "secureTextEntry", "isFirstColumn", "stepValues", "setInputRef", "onBlur", "onClick", "onFocus"];
 // Create a context for OTP input slots
 var OTPInputContext = /*#__PURE__*/React.createContext({
   slots: [],
@@ -14332,7 +15127,7 @@ var OTPInputView = _ref => {
       onFocus = () => {}
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   appStudio.useTheme(); // Initialize theme context
   var showLabel = !!label;
   // Create context value for slots
@@ -14564,7 +15359,7 @@ var OTPInputComponent = props => {
 };
 var OTPInput = OTPInputComponent;
 
-var _excluded$J = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$H = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -14580,7 +15375,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -14628,7 +15423,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$K = ["name", "type"];
+var _excluded$I = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -14667,7 +15462,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   var focus = useFormFocus();
   var {
     touched,
@@ -14711,13 +15506,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$L = ["value"];
+var _excluded$J = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$L);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$J);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -14973,7 +15768,12 @@ var DefaultChatInputStyles = {
     maxWidth: '100%',
     borderRadius: '12px',
     backgroundColor: 'color.white',
-    transition: 'all 0.2s ease'
+    transition: 'all 0.2s ease',
+    media: {
+      mobile: {
+        borderRadius: '8px'
+      }
+    }
   },
   content: {
     width: '100%',
@@ -14982,7 +15782,13 @@ var DefaultChatInputStyles = {
     backgroundColor: 'color.white',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: 'color.gray.200'
+    borderColor: 'color.gray.200',
+    media: {
+      mobile: {
+        padding: '10px',
+        borderRadius: '8px'
+      }
+    }
   },
   textarea: {
     width: '100%',
@@ -14996,7 +15802,14 @@ var DefaultChatInputStyles = {
     border: 'none',
     outline: 'none',
     resize: 'none',
-    overflow: 'auto'
+    overflow: 'auto',
+    media: {
+      mobile: {
+        padding: '6px 10px',
+        fontSize: '13px',
+        minHeight: '36px'
+      }
+    }
   },
   attachments: {
     display: 'flex',
@@ -15036,7 +15849,14 @@ var DefaultChatInputStyles = {
     borderRadius: '8px',
     backgroundColor: 'theme.primary',
     color: 'color.white',
-    transition: 'all 0.2s ease'
+    transition: 'all 0.2s ease',
+    media: {
+      mobile: {
+        height: '32px',
+        minWidth: '32px',
+        padding: '0 10px'
+      }
+    }
   },
   fileButton: {
     height: '36px',
@@ -15044,7 +15864,13 @@ var DefaultChatInputStyles = {
     borderRadius: '8px',
     backgroundColor: 'transparent',
     color: 'color.gray.500',
-    transition: 'all 0.2s ease'
+    transition: 'all 0.2s ease',
+    media: {
+      mobile: {
+        height: '32px',
+        padding: '0 10px'
+      }
+    }
   },
   modelSelector: {
     height: '36px',
@@ -15062,66 +15888,368 @@ var DefaultChatInputStyles = {
     padding: '8px 0'
   }
 };
-/**
- * Shape styles for the ChatInput component
- */
-var Shapes$2 = {
-  default: {
-    borderRadius: '8px'
-  },
-  sharp: {
-    borderRadius: '0px'
-  },
-  rounded: {
-    borderRadius: '8px'
+/**
+ * Shape styles for the ChatInput component
+ */
+var Shapes$2 = {
+  default: {
+    borderRadius: '8px'
+  },
+  sharp: {
+    borderRadius: '0px'
+  },
+  rounded: {
+    borderRadius: '8px'
+  }
+};
+/**
+ * Size styles for the ChatInput component
+ */
+var Sizes$2 = {
+  xs: {
+    fontSize: '10px',
+    padding: '4px 8px'
+  },
+  sm: {
+    fontSize: '12px',
+    padding: '6px 10px'
+  },
+  md: {
+    fontSize: '14px',
+    padding: '8px 12px'
+  },
+  lg: {
+    fontSize: '16px',
+    padding: '10px 14px'
+  },
+  xl: {
+    fontSize: '20px',
+    padding: '12px 16px'
+  }
+};
+/**
+ * Variant styles for the ChatInput component
+ */
+var Variants$1 = {
+  default: {
+    backgroundColor: 'color.white',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color.gray.200'
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color.gray.300'
+  },
+  none: {
+    backgroundColor: 'transparent',
+    border: 'none'
+  }
+};
+
+// Generate a unique ID for ARIA attributes
+var generateId$1 = prefix => prefix + "-" + Math.random().toString(36).substring(2, 9);
+var useHoverCardState = function useHoverCardState(_temp) {
+  var {
+    openDelay = 200,
+    closeDelay = 300
+  } = _temp === void 0 ? {} : _temp;
+  var [isOpen, setIsOpen] = React.useState(false);
+  var openTimerRef = React.useRef(null);
+  var closeTimerRef = React.useRef(null);
+  // Refs for trigger and content elements for positioning
+  var triggerRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  // Unique IDs for ARIA attributes
+  var contentId = React.useMemo(() => generateId$1('hovercard-content'), []);
+  var triggerId = React.useMemo(() => generateId$1('hovercard-trigger'), []);
+  var clearTimers = React.useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  var openCard = React.useCallback(() => {
+    clearTimers(); // Clear any pending close
+    if (!isOpen) {
+      openTimerRef.current = setTimeout(() => {
+        setIsOpen(true);
+      }, openDelay);
+    }
+  }, [isOpen, openDelay, clearTimers]);
+  var closeCard = React.useCallback(() => {
+    clearTimers(); // Clear any pending open
+    if (isOpen) {
+      closeTimerRef.current = setTimeout(() => {
+        setIsOpen(false);
+      }, closeDelay);
+    }
+  }, [isOpen, closeDelay, clearTimers]);
+  // Function specifically to cancel the close timer (e.g., when mouse enters content)
+  var cancelCloseTimer = React.useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  // Cleanup timers on unmount
+  React.useEffect(() => {
+    return () => clearTimers();
+  }, [clearTimers]);
+  return {
+    isOpen,
+    openCard,
+    closeCard,
+    cancelCloseTimer,
+    triggerRef,
+    contentRef,
+    contentId,
+    triggerId
+  };
+};
+
+var _excluded$K = ["children", "views", "asChild"],
+  _excluded2$b = ["children", "views", "side", "align", "sideOffset", "style", "backgroundColor", "borderRadius", "boxShadow", "padding", "minWidth", "maxWidth"];
+// Create context for the HoverCard
+var HoverCardContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  openCard: () => {},
+  closeCard: () => {},
+  cancelCloseTimer: () => {},
+  triggerRef: {
+    current: null
+  },
+  contentRef: {
+    current: null
+  },
+  contentId: '',
+  triggerId: ''
+});
+var HoverCardProvider = _ref => {
+  var {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(HoverCardContext.Provider, {
+    value: value
+  }, children);
+};
+var useHoverCardContext = () => {
+  var context = React.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error('useHoverCardContext must be used within a HoverCardProvider');
+  }
+  return context;
+};
+var HoverCardTrigger = _ref2 => {
+  var {
+      children,
+      views,
+      asChild = false
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$K);
+  var {
+    openCard,
+    closeCard,
+    triggerRef,
+    contentId,
+    triggerId
+  } = useHoverCardContext();
+  var handleMouseEnter = () => openCard();
+  var handleMouseLeave = () => closeCard();
+  var handleFocus = () => openCard(); // For keyboard accessibility
+  var handleBlur = () => closeCard(); // For keyboard accessibility
+  var triggerProps = Object.assign({
+    ref: triggerRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    id: triggerId,
+    'aria-describedby': contentId
+  }, views == null ? void 0 : views.container, props);
+  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
+    // Clone the child element and merge props
+    var child = React.Children.only(children);
+    return /*#__PURE__*/React.cloneElement(child, Object.assign({}, triggerProps, child.props));
   }
+  // Default: wrap children in a View
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "relative",
+    display: "inline-block"
+  }, triggerProps), children);
 };
-/**
- * Size styles for the ChatInput component
- */
-var Sizes$2 = {
-  xs: {
-    fontSize: '10px',
-    padding: '4px 8px'
-  },
-  sm: {
-    fontSize: '12px',
-    padding: '6px 10px'
-  },
-  md: {
-    fontSize: '14px',
-    padding: '8px 12px'
-  },
-  lg: {
-    fontSize: '16px',
-    padding: '10px 14px'
-  },
-  xl: {
-    fontSize: '20px',
-    padding: '12px 16px'
+var HoverCardContent = _ref3 => {
+  var {
+      children,
+      views,
+      side = 'bottom',
+      align = 'center',
+      sideOffset = 8,
+      style: userStyle,
+      // User provided style override
+      backgroundColor = 'white',
+      borderRadius = '4px',
+      boxShadow = '0px 2px 8px rgba(0, 0, 0, 0.15)',
+      padding = '12px',
+      minWidth = '50px',
+      maxWidth = '300px'
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$b);
+  var {
+    isOpen,
+    cancelCloseTimer,
+    closeCard,
+    contentRef,
+    triggerRef,
+    contentId,
+    triggerId
+  } = useHoverCardContext();
+  // Use useElementPosition for intelligent positioning
+  var {
+    ref: positionRef,
+    relation
+  } = appStudio.useElementPosition({
+    trackChanges: true,
+    trackOnHover: true,
+    trackOnScroll: true,
+    trackOnResize: true
+  });
+  // Sync the position ref with the trigger ref for positioning calculations
+  React.useEffect(() => {
+    if (triggerRef != null && triggerRef.current && (positionRef == null ? void 0 : positionRef.current) !== triggerRef.current) {
+      // Update the position tracking to use the trigger element
+      if (positionRef) {
+        positionRef.current = triggerRef.current;
+      }
+    }
+  }, [triggerRef, positionRef, isOpen]);
+  var handleMouseEnter = () => cancelCloseTimer(); // Keep card open if mouse enters content
+  var handleMouseLeave = () => closeCard();
+  if (!isOpen) {
+    return null; // Don't render content if not open
   }
+  // Create intelligent positioning styles based on useElementPosition relation data
+  var getPositionStyles = () => {
+    if (!relation || !(triggerRef != null && triggerRef.current)) {
+      // Fallback positioning if relation data is not available
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 1000
+      };
+    }
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var placement = side;
+    // Use relation data to determine optimal placement
+    // If preferred side doesn't have enough space, use the side with more space
+    if (side === 'bottom' && relation.space.vertical === 'top') {
+      placement = 'top';
+    } else if (side === 'top' && relation.space.vertical === 'bottom') {
+      placement = 'bottom';
+    } else if (side === 'right' && relation.space.horizontal === 'left') {
+      placement = 'left';
+    } else if (side === 'left' && relation.space.horizontal === 'right') {
+      placement = 'right';
+    }
+    // Calculate position based on optimal placement
+    var x = 0;
+    var y = 0;
+    switch (placement) {
+      case 'bottom':
+        x = triggerRect.left + triggerRect.width / 2;
+        y = triggerRect.bottom + sideOffset;
+        break;
+      case 'top':
+        x = triggerRect.left + triggerRect.width / 2;
+        y = triggerRect.top - sideOffset;
+        break;
+      case 'right':
+        x = triggerRect.right + sideOffset;
+        y = triggerRect.top + triggerRect.height / 2;
+        break;
+      case 'left':
+        x = triggerRect.left - sideOffset;
+        y = triggerRect.top + triggerRect.height / 2;
+        break;
+    }
+    return {
+      position: 'fixed',
+      left: x,
+      top: y,
+      zIndex: 1000,
+      transform: getTransformOrigin(placement)
+    };
+  };
+  // Helper function to set transform origin for better positioning
+  var getTransformOrigin = placement => {
+    switch (placement) {
+      case 'bottom':
+        return 'translate(-50%, 0)';
+      case 'top':
+        return 'translate(-50%, -100%)';
+      case 'right':
+        return 'translate(0, -50%)';
+      case 'left':
+        return 'translate(-100%, -50%)';
+      default:
+        return 'translate(-50%, 0)';
+    }
+  };
+  var positionStyles = getPositionStyles();
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: contentRef,
+    id: contentId,
+    role: "tooltip" // Use tooltip role for accessibility
+    ,
+    "aria-labelledby": triggerId,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    backgroundColor: backgroundColor,
+    borderRadius: borderRadius,
+    boxShadow: boxShadow,
+    padding: padding,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    // Combine intelligent position styles with user styles
+    style: Object.assign({}, positionStyles, userStyle)
+  }, views == null ? void 0 : views.container, props), children);
 };
+
+var _excluded$L = ["children", "views", "openDelay", "closeDelay"];
 /**
- * Variant styles for the ChatInput component
+ * HoverCard component displays floating content when hovering over a trigger element.
+ * Supports configurable open and close delays for a smoother user experience.
  */
-var Variants$1 = {
-  default: {
-    backgroundColor: 'color.white',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.200'
-  },
-  outline: {
-    backgroundColor: 'transparent',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'color.gray.300'
-  },
-  none: {
-    backgroundColor: 'transparent',
-    border: 'none'
-  }
+var HoverCardComponent = _ref => {
+  var {
+      children,
+      views,
+      openDelay,
+      closeDelay
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+  var hoverCardState = useHoverCardState({
+    openDelay,
+    closeDelay
+  });
+  return /*#__PURE__*/React__default.createElement(HoverCardProvider, {
+    value: hoverCardState
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "relative",
+    display: "inline-block"
+  }, views == null ? void 0 : views.container, props), children));
 };
+var HoverCard = HoverCardComponent;
+HoverCard.Trigger = HoverCardTrigger;
+HoverCard.Content = HoverCardContent;
 
 /**
  * Default styles for AgentChat component
@@ -16680,13 +17808,15 @@ var SliderShapes = {
 var getSlider = themeMode => {
   return {
     default: {
-      backgroundColor: 'color.blueGray.200'
+      backgroundColor: 'color.gray.200',
+      transition: 'background-color 0.15s ease'
     },
     outline: {
       backgroundColor: 'transparent',
       borderWidth: 1,
       borderStyle: 'solid',
-      borderColor: 'color.blueGray.300'
+      borderColor: 'color.gray.300',
+      transition: 'border-color 0.15s ease'
     }
   };
   // Add dark mode conditional styling here
@@ -17616,7 +18746,15 @@ var ModalContainer = _ref2 => {
     height: isFullScreen ? '100%' : 'fit-content',
     onClick: handleClick,
     transition: "all 0.3s ease"
-  }, shadow ? shadow : defaultShadow, ContainerShapes[shape], props, views == null ? void 0 : views.container), children);
+  }, shadow ? shadow : defaultShadow, ContainerShapes[shape], {
+    media: {
+      mobile: {
+        width: '90%',
+        maxWidth: '100%',
+        margin: '16px'
+      }
+    }
+  }, props, views == null ? void 0 : views.container), children);
 };
 var ModalHeader = _ref3 => {
   var {
@@ -17641,7 +18779,13 @@ var ModalHeader = _ref3 => {
     paddingHorizontal: 24,
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
-    borderBottomColor: "color.gray.200"
+    borderBottomColor: "color.gray.200",
+    media: {
+      mobile: {
+        paddingVertical: 12,
+        paddingHorizontal: 16
+      }
+    }
   }, props, views == null ? void 0 : views.header), buttonPosition === 'left' && buttonIcon, children, buttonPosition === 'right' && buttonIcon);
 };
 var ModalBody = _ref4 => {
@@ -17656,7 +18800,14 @@ var ModalBody = _ref4 => {
     fontSize: ModalTypography.body.fontSize,
     fontWeight: ModalTypography.body.fontWeight,
     lineHeight: ModalTypography.body.lineHeight,
-    color: ModalTypography.body.color
+    color: ModalTypography.body.color,
+    media: {
+      mobile: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        fontSize: '14px'
+      }
+    }
   }, props, views == null ? void 0 : views.view), children);
 };
 var ModalFooter = _ref5 => {
@@ -17674,7 +18825,14 @@ var ModalFooter = _ref5 => {
     borderTopWidth: "1px",
     borderTopStyle: "solid",
     borderTopColor: "color.gray.200",
-    gap: 12
+    gap: 12,
+    media: {
+      mobile: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        gap: 8
+      }
+    }
   }, props, views == null ? void 0 : views.container), children);
 };
 
@@ -17739,6 +18897,7 @@ var useNavigationMenuState = function useNavigationMenuState(defaultActiveItemId
   }
   var [activeItemId, setActiveItemId] = React.useState(defaultActiveItemId);
   var [expandedItemIds, setExpandedItemIds] = React.useState(defaultExpandedItemIds);
+  var triggerRefs = React.useRef({});
   var toggleExpandedItem = itemId => {
     setExpandedItemIds(prevExpandedItemIds => {
       // Check if the item is already expanded
@@ -17760,7 +18919,8 @@ var useNavigationMenuState = function useNavigationMenuState(defaultActiveItemId
     setActiveItemId,
     expandedItemIds,
     toggleExpandedItem,
-    isItemExpanded
+    isItemExpanded,
+    triggerRefs
   };
 };
 
@@ -17782,17 +18942,35 @@ var NavigationMenuSizes = {
   sm: {
     padding: '8px 12px',
     fontSize: '12px',
-    fontWeight: '500'
+    fontWeight: '500',
+    media: {
+      mobile: {
+        padding: '6px 10px',
+        fontSize: '11px'
+      }
+    }
   },
   md: {
     padding: '12px 16px',
     fontSize: '14px',
-    fontWeight: '500'
+    fontWeight: '500',
+    media: {
+      mobile: {
+        padding: '10px 14px',
+        fontSize: '13px'
+      }
+    }
   },
   lg: {
     padding: '16px 20px',
     fontSize: '16px',
-    fontWeight: '500'
+    fontWeight: '500',
+    media: {
+      mobile: {
+        padding: '12px 16px',
+        fontSize: '14px'
+      }
+    }
   }
 };
 /**
@@ -17824,7 +19002,13 @@ var NavigationMenuVariants = {
 var NavigationMenuOrientations = {
   horizontal: {
     flexDirection: 'row',
-    gap: '8px'
+    gap: '8px',
+    media: {
+      mobile: {
+        flexDirection: 'column',
+        gap: '4px'
+      }
+    }
   },
   vertical: {
     flexDirection: 'column',
@@ -17863,7 +19047,10 @@ var NavigationMenuContext = /*#__PURE__*/React.createContext({
   isItemExpanded: () => false,
   orientation: 'vertical',
   size: 'md',
-  variant: 'default'
+  variant: 'default',
+  triggerRefs: {
+    current: {}
+  }
 });
 // Provider component for the NavigationMenu context
 var NavigationMenuProvider = _ref => {
@@ -18017,16 +19204,30 @@ var NavigationMenuTrigger = _ref4 => {
     toggleExpandedItem,
     isItemExpanded,
     size,
-    variant
+    variant,
+    triggerRefs
   } = useNavigationMenuContext();
+  var triggerRef = React.useRef(null);
   var isActive = activeItemId === itemId;
   var isExpanded = isItemExpanded(itemId);
+  // Store the trigger ref in the context
+  React.useEffect(() => {
+    if (triggerRef.current && itemId) {
+      triggerRefs.current[itemId] = triggerRef.current;
+    }
+    return () => {
+      if (itemId) {
+        delete triggerRefs.current[itemId];
+      }
+    };
+  }, [itemId, triggerRefs]);
   var handleClick = e => {
     e.preventDefault();
     if (disabled) return;
     toggleExpandedItem(itemId);
   };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: triggerRef,
     onClick: handleClick,
     cursor: disabled ? 'not-allowed' : 'pointer',
     opacity: disabled ? 0.5 : 1,
@@ -18060,22 +19261,150 @@ var NavigationMenuContent = _ref5 => {
   } = _ref5;
   var {
     isItemExpanded,
-    orientation
+    orientation,
+    triggerRefs
   } = useNavigationMenuContext();
+  var contentRef = React.useRef(null);
+  var [optimalPosition, setOptimalPosition] = React.useState({
+    x: 0,
+    y: 0,
+    placement: orientation === 'horizontal' ? 'bottom' : 'right'
+  });
   var isExpanded = isItemExpanded(itemId);
+  // Calculate optimal position when the menu expands
+  React.useEffect(() => {
+    if (isExpanded && contentRef.current && itemId && triggerRefs.current[itemId] && orientation === 'horizontal') {
+      var contentRect = contentRef.current.getBoundingClientRect();
+      var triggerRect = triggerRefs.current[itemId].getBoundingClientRect();
+      // Get content dimensions
+      var contentWidth = Math.max(contentRect.width || 200, 200);
+      var contentHeight = Math.max(contentRect.height || 150, 150);
+      // Get viewport dimensions
+      var viewportWidth = window.innerWidth;
+      var viewportHeight = window.innerHeight;
+      // Calculate available space on all sides from the trigger
+      var availableSpace = {
+        top: triggerRect.top,
+        right: viewportWidth - triggerRect.right,
+        bottom: viewportHeight - triggerRect.bottom,
+        left: triggerRect.left
+      };
+      // Determine optimal placement based on orientation and available space
+      var placements = orientation === 'horizontal' ? [
+      // For horizontal navigation menu, prefer bottom placement
+      {
+        placement: 'bottom',
+        space: availableSpace.bottom,
+        fits: availableSpace.bottom >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.bottom + 8
+      }, {
+        placement: 'top',
+        space: availableSpace.top,
+        fits: availableSpace.top >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.top - contentHeight - 8
+      }, {
+        placement: 'right',
+        space: availableSpace.right,
+        fits: availableSpace.right >= contentWidth + 8,
+        x: triggerRect.right + 8,
+        y: triggerRect.top
+      }, {
+        placement: 'left',
+        space: availableSpace.left,
+        fits: availableSpace.left >= contentWidth + 8,
+        x: triggerRect.left - contentWidth - 8,
+        y: triggerRect.top
+      }] : [
+      // For vertical navigation menu, prefer right placement
+      {
+        placement: 'right',
+        space: availableSpace.right,
+        fits: availableSpace.right >= contentWidth + 8,
+        x: triggerRect.right + 8,
+        y: triggerRect.top
+      }, {
+        placement: 'left',
+        space: availableSpace.left,
+        fits: availableSpace.left >= contentWidth + 8,
+        x: triggerRect.left - contentWidth - 8,
+        y: triggerRect.top
+      }, {
+        placement: 'bottom',
+        space: availableSpace.bottom,
+        fits: availableSpace.bottom >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.bottom + 8
+      }, {
+        placement: 'top',
+        space: availableSpace.top,
+        fits: availableSpace.top >= contentHeight + 8,
+        x: triggerRect.left,
+        y: triggerRect.top - contentHeight - 8
+      }];
+      // Find the best fitting placement
+      var fittingPlacement = placements.find(p => p.fits);
+      if (fittingPlacement) {
+        setOptimalPosition({
+          x: fittingPlacement.x,
+          y: fittingPlacement.y,
+          placement: fittingPlacement.placement
+        });
+        return;
+      }
+      // If nothing fits, choose the placement with the most space
+      var bestPlacement = placements.reduce((best, current) => current.space > best.space ? current : best);
+      // Ensure the content stays within viewport bounds
+      var finalX = bestPlacement.x;
+      var finalY = bestPlacement.y;
+      if (finalX + contentWidth > viewportWidth) {
+        finalX = viewportWidth - contentWidth - 8;
+      }
+      if (finalX < 8) {
+        finalX = 8;
+      }
+      if (finalY + contentHeight > viewportHeight) {
+        finalY = viewportHeight - contentHeight - 8;
+      }
+      if (finalY < 8) {
+        finalY = 8;
+      }
+      setOptimalPosition({
+        x: finalX,
+        y: finalY,
+        placement: bestPlacement.placement
+      });
+    }
+  }, [isExpanded, orientation, itemId, triggerRefs]);
   if (!isExpanded) {
     return null;
   }
+  // For vertical orientation, keep the original relative positioning
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      paddingLeft: 16,
+      width: "100%",
+      position: "relative",
+      backgroundColor: "transparent"
+    }, views == null ? void 0 : views.container), children);
+  }
+  // For horizontal orientation, use fixed positioning with intelligent placement
+  var positionStyles = {
+    position: 'fixed',
+    left: optimalPosition.x,
+    top: optimalPosition.y,
+    zIndex: 1000
+  };
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    paddingLeft: orientation === 'vertical' ? 16 : 0,
-    paddingTop: orientation === 'horizontal' ? 8 : 0,
+    ref: contentRef,
+    role: "menu",
+    minWidth: "200px",
+    backgroundColor: "color.white",
+    borderRadius: 4,
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
     overflow: "hidden",
-    width: "100%",
-    position: orientation === 'horizontal' ? 'absolute' : 'relative',
-    backgroundColor: orientation === 'horizontal' ? 'white' : 'transparent',
-    boxShadow: orientation === 'horizontal' ? '0 4px 6px rgba(0, 0, 0, 0.1)' : 'none',
-    borderRadius: orientation === 'horizontal' ? '4px' : '0',
-    zIndex: orientation === 'horizontal' ? 10 : 1
+    style: positionStyles
   }, views == null ? void 0 : views.container), children);
 };
 var NavigationMenuLink = _ref6 => {
@@ -18174,7 +19503,8 @@ var NavigationMenuComponent = _ref => {
     setActiveItemId,
     expandedItemIds,
     toggleExpandedItem,
-    isItemExpanded
+    isItemExpanded,
+    triggerRefs
   } = useNavigationMenuState(defaultActiveItemId, defaultExpandedItemIds);
   return /*#__PURE__*/React__default.createElement(NavigationMenuProvider, {
     value: {
@@ -18186,7 +19516,8 @@ var NavigationMenuComponent = _ref => {
       orientation,
       size,
       variant,
-      onItemActivate
+      onItemActivate,
+      triggerRefs
     }
   }, items ? (/*#__PURE__*/React__default.createElement(NavigationMenuView, Object.assign({
     items: items,
@@ -18242,16 +19573,24 @@ var useTableContext = () => React.useContext(TableContext);
  */
 /**
  * Default table styles following the design system
+ * Matching shadcn/ui patterns with subtle shadows and transitions
  */
 var DefaultTableStyles = {
   table: {
     width: '100%',
     borderRadius: '8px',
     overflow: 'hidden',
-    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    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',
-    transition: 'all 0.2s ease'
+    transition: 'box-shadow 0.2s ease',
+    media: {
+      mobile: {
+        overflowX: 'auto',
+        display: 'block',
+        borderRadius: '4px'
+      }
+    }
   },
   thead: {
     backgroundColor: 'color.gray.50',
@@ -18263,18 +19602,35 @@ var DefaultTableStyles = {
     fontWeight: '600',
     fontSize: '14px',
     color: 'color.gray.700',
-    textAlign: 'left'
+    textAlign: 'left',
+    media: {
+      mobile: {
+        padding: '8px 12px',
+        fontSize: '12px'
+      }
+    }
   },
   td: {
     padding: '12px 16px',
     fontSize: '14px',
     borderBottom: '1px solid',
-    borderBottomColor: 'color.gray.100'
+    borderBottomColor: 'color.gray.100',
+    color: 'color.gray.900',
+    media: {
+      mobile: {
+        padding: '8px 12px',
+        fontSize: '12px'
+      }
+    }
   },
   tr: {
-    transition: 'background-color 0.2s ease',
+    transition: 'background-color 0.15s ease',
     _hover: {
       backgroundColor: 'color.gray.50'
+    },
+    _focus: {
+      outline: 'none',
+      backgroundColor: 'color.gray.100'
     }
   },
   tfoot: {
@@ -18287,7 +19643,12 @@ var DefaultTableStyles = {
     margin: '8px 0',
     color: 'color.gray.600',
     fontSize: '14px',
-    fontStyle: 'italic'
+    fontStyle: 'italic',
+    media: {
+      mobile: {
+        fontSize: '12px'
+      }
+    }
   }
 };
 
@@ -19082,6 +20443,13 @@ var TitleView = _ref => {
   };
   var resolvedColor = resolveColorValue(highlightColor);
   var resolvedSecondary = highlightSecondaryColor ? resolveColorValue(highlightSecondaryColor) : undefined;
+  var baseHighlightProps = HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary);
+  var highlightViewProps = highlightStyle === 'background' ? Object.assign({}, baseHighlightProps, {
+    color: undefined
+  }) : baseHighlightProps;
+  var highlightBackgroundOverrides = highlightStyle === 'background' ? {
+    bgColor: resolvedColor
+  } : {};
   var {
     finalDisplayedText,
     activeHighlightTarget,
@@ -19150,7 +20518,7 @@ var TitleView = _ref => {
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
-    }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+    }, highlightViewProps, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
       text: part.text,
       typingSpeed: Math.max(30, highlightTypewriterDuration / (part.text.length * 10)),
       showCursor: true,
@@ -19174,7 +20542,7 @@ var TitleView = _ref => {
       as: "span",
       display: "inline",
       animate: inView ? controlledHighlightAnimate : undefined
-    }, HighlightStyles[highlightStyle](resolvedColor, resolvedSecondary), views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
+    }, highlightViewProps, highlightBackgroundOverrides, views == null ? void 0 : views.highlight), highlightTypewriter ? (/*#__PURE__*/React__default.createElement(TypewriterEffect, {
       text: text,
       typingSpeed: Math.max(30, highlightTypewriterDuration / (text.length * 10)),
       showCursor: true,
@@ -23515,19 +24883,43 @@ var PaginationSizes = {
     fontSize: '12px',
     padding: '4px 8px',
     minWidth: '28px',
-    height: '28px'
+    height: '28px',
+    media: {
+      mobile: {
+        fontSize: '11px',
+        padding: '3px 6px',
+        minWidth: '24px',
+        height: '24px'
+      }
+    }
   },
   md: {
     fontSize: '14px',
     padding: '6px 12px',
     minWidth: '36px',
-    height: '36px'
+    height: '36px',
+    media: {
+      mobile: {
+        fontSize: '12px',
+        padding: '4px 8px',
+        minWidth: '28px',
+        height: '28px'
+      }
+    }
   },
   lg: {
     fontSize: '16px',
     padding: '8px 16px',
     minWidth: '44px',
-    height: '44px'
+    height: '44px',
+    media: {
+      mobile: {
+        fontSize: '14px',
+        padding: '6px 12px',
+        minWidth: '36px',
+        height: '36px'
+      }
+    }
   }
 };
 var PaginationVariants = {
@@ -23859,16 +25251,23 @@ var SeparatorThicknesses = {
 };
 /**
  * Default styles for the Separator component
+ * Matching shadcn/ui patterns with subtle colors
  */
 var DefaultSeparatorStyles = {
   container: {
-    transition: 'all 0.2s ease'
+    transition: 'opacity 0.15s ease'
+  },
+  line: {
+    backgroundColor: 'color.gray.200',
+    transition: 'background-color 0.15s ease'
   },
   label: {
     fontSize: '14px',
-    color: 'color.gray.500',
+    fontWeight: '500',
+    color: 'color.gray.600',
     paddingHorizontal: '8px',
-    transition: 'all 0.2s ease'
+    backgroundColor: 'color.white',
+    transition: 'color 0.15s ease'
   }
 };
 
@@ -24173,27 +25572,17 @@ var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpa
   if (defaultExpanded === void 0) {
     defaultExpanded = true;
   }
+  var {
+    on
+  } = appStudio.useResponsive();
+  var isMobile = on('mobile');
   var [isExpanded, setIsExpanded] = React.useState(expanded !== undefined ? expanded : defaultExpanded);
-  var [isMobile, setIsMobile] = React.useState(breakpoint ? window.innerWidth < breakpoint : false);
   // Handle controlled expanded state
   React.useEffect(() => {
     if (expanded !== undefined) {
       setIsExpanded(expanded);
     }
   }, [expanded]);
-  // Handle window resize for responsive behavior
-  React.useEffect(() => {
-    if (!breakpoint) return;
-    var handleResize = () => {
-      var newIsMobile = window.innerWidth < breakpoint;
-      setIsMobile(newIsMobile);
-    };
-    window.addEventListener('resize', handleResize);
-    handleResize(); // Initial check
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [breakpoint]);
   var toggleExpanded = () => {
     var newExpanded = !isExpanded;
     setIsExpanded(newExpanded);
@@ -24556,7 +25945,7 @@ var SidebarComponent = _ref => {
     expand,
     collapse,
     isMobile
-  } = useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint);
+  } = useSidebarState(defaultExpanded, expanded, onExpandedChange);
   return /*#__PURE__*/React__default.createElement(SidebarProvider, {
     value: {
       isExpanded,
@@ -25636,13 +27025,15 @@ var ToastView = _ref => {
     fontWeight: "600" // Semi-bold for better readability
     ,
     color: Theme[variant].content.color,
-    lineHeight: "1.4"
+    lineHeight: "1.4",
+    bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.title), title), description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "sm",
     color: Theme[variant].content.color,
     fontWeight: "400" // Regular weight
     ,
-    lineHeight: "1.5"
+    lineHeight: "1.5",
+    bgColor: Theme[variant].container.backgroundColor
   }, views == null ? void 0 : views.description), description)), action && actionText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "sm",
     fontWeight: "600" // Semi-bold for better readability
@@ -25651,6 +27042,7 @@ var ToastView = _ref => {
     ,
     cursor: "pointer",
     color: Theme[variant].content.color,
+    bgColor: Theme[variant].container.backgroundColor,
     onClick: e => {
       e.stopPropagation();
       action();
@@ -26455,19 +27847,28 @@ var TooltipSizes = {
 var getTooltip = themeMode => {
   return {
     default: {
-      backgroundColor: 'color.gray.800',
-      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',
       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.black',
-      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'
     }
   };
   // Add dark mode conditional styling here