@app-studio/web 0.9.33 → 0.9.35

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('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.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.array.flat.js'), require('core-js/modules/es.array.unscopables.flat.js'), require('date-fns'), require('core-js/modules/es.array.sort.js'), require('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('formik'), require('src/services/api'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.exec.js', 'core-js/modules/es.string.pad-start.js', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.array.flat.js', 'core-js/modules/es.array.unscopables.flat.js', 'date-fns', 'core-js/modules/es.array.sort.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'formik', 'src/services/api', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, global.reactRouterDom, null, global.contrast, null, null, null, null, null, global.dateFns, null, global.format, null, null, global.formik, global.api));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, es_regexp_exec_js, es_string_padStart_js, es_string_replace_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_array_flat_js, es_array_unscopables_flat_js, dateFns, es_array_sort_js, format, es_string_trim_js, es_regexp_constructor_js, formik, api) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('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.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'), 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/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('react-router-dom'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.array.sort.js'), require('core-js/modules/es.string.pad-start.js'), require('date-fns/format'), require('core-js/modules/es.regexp.constructor.js'), require('formik'), require('src/services/api'), require('core-js/modules/es.promise.finally.js'), require('core-js/modules/es.string.match.js'), require('core-js/modules/es.string.search.js'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.trim-end.js', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.exec.js', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.starts-with.js', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'react-router-dom', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.array.sort.js', 'core-js/modules/es.string.pad-start.js', 'date-fns/format', 'core-js/modules/es.regexp.constructor.js', 'formik', 'src/services/api', 'core-js/modules/es.promise.finally.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, global.zustand, global.reactRouterDom, null, global.contrast, null, null, null, null, null, global.format, null, global.formik, global.api));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, es_string_trimEnd_js, es_parseInt_js, es_regexp_exec_js, es_string_replace_js, es_string_startsWith_js, es_string_trim_js, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, reactRouterDom, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_array_sort_js, es_string_padStart_js, format, es_regexp_constructor_js, formik, api) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
@@ -154,15 +154,24 @@
   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'
+      }
     }
   };
 
@@ -415,6 +424,7 @@
    */
   /**
    * Heading sizes following typography guidelines
+   * Matching shadcn/ui typography patterns
    */
   var HeadingSizes = {
     h1: {
@@ -422,42 +432,54 @@
       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'
     }
   };
   /**
@@ -495,31 +517,40 @@
     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
    */
@@ -623,6 +654,7 @@
    * Main Text component that renders text with various styles and states
    */
   var TextView = _ref3 => {
+    var _views$container, _ref4;
     var {
         children,
         heading,
@@ -635,6 +667,7 @@
         weight = 'normal',
         size = 'md',
         bgColor,
+        backgroundColor: backgroundColorProp,
         color,
         views
       } = _ref3,
@@ -649,7 +682,9 @@
     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({
@@ -660,7 +695,8 @@
       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
@@ -3321,13 +3357,15 @@
       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)));
   };
 
@@ -3649,14 +3687,17 @@
       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,
@@ -4754,7 +4795,8 @@
       ,
       textAlign: "center"
     }, views == null ? void 0 : views.text, {
-      color: combinedStyles.color
+      color: combinedStyles.color,
+      bgColor: combinedStyles.backgroundColor
     }), content || ''));
   };
 
@@ -4804,9 +4846,18 @@
       } = _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',
@@ -4815,12 +4866,12 @@
         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]
     })));
@@ -5150,18 +5201,16 @@
       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',
@@ -5171,21 +5220,19 @@
       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',
@@ -5194,39 +5241,39 @@
       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',
@@ -5235,7 +5282,12 @@
       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',
@@ -5248,7 +5300,12 @@
       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'
     }
   });
   /**
@@ -5586,26 +5643,34 @@
       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)'
         }
       }
     };
@@ -5621,24 +5686,44 @@
         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'
+          }
+        }
       }
     };
   };
@@ -6424,17 +6509,6 @@
   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',
@@ -6527,7 +6601,7 @@
       visible: false,
       x: 0,
       y: 0,
-      content: ''
+      content: null
     });
     // Reference to animation frame
     var animationRef = React.useRef(null);
@@ -6686,7 +6760,12 @@
         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, {
@@ -6696,7 +6775,12 @@
         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,
@@ -6708,8 +6792,61 @@
       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 = () => {
@@ -6723,7 +6860,7 @@
         y: y,
         width: barWidth,
         height: barHeight,
-        fill: series.color ? getColor(series.color) : 'black',
+        fill: fillColor,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: hideTooltip,
         onClick: handleClick
@@ -6817,7 +6954,12 @@
         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, {
@@ -6827,43 +6969,114 @@
         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 => {
@@ -6970,10 +7183,75 @@
     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;
@@ -7013,14 +7291,97 @@
         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"];
@@ -7151,15 +7512,6 @@
           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;
@@ -7192,7 +7544,14 @@
       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
+    }));
   };
 
   /**
@@ -7204,6 +7563,9 @@
   };
   var Chart = ChartComponent;
 
+  var cloneColumns = inputColumns => inputColumns.map(column => Object.assign({}, column, {
+    cards: [...column.cards]
+  }));
   var useKanbanBoardState = _ref => {
     var {
       columns: initialColumns,
@@ -7211,20 +7573,26 @@
     } = _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 => {
@@ -7236,36 +7604,60 @@
         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';
@@ -7275,35 +7667,52 @@
           // 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,
@@ -7321,6 +7730,7 @@
       renderEmptyState,
       views,
       draggedCardId,
+      hoveredColumnId,
       onCardDragStart,
       onCardDragEnd,
       onColumnDragOver,
@@ -7365,7 +7775,9 @@
       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",
@@ -7379,20 +7791,27 @@
     }, 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 => {
@@ -7401,734 +7820,1038 @@
   };
   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 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 parsed = new Date(value);
-    if (Number.isNaN(parsed.getTime())) {
-      throw new Error("Invalid date value provided to Calendar: " + value);
+    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
@@ -8260,7 +8983,7 @@
     };
   };
 
-  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
    *
@@ -8281,7 +9004,7 @@
         cookieExpiration = 365,
         themeMode: propThemeMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     // Get theme context
     var {
       themeMode: contextThemeMode
@@ -8522,8 +9245,8 @@
   // 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"],
@@ -8578,7 +9301,7 @@
         isDisabled = false,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
     var {
       triggerRef,
       contentId,
@@ -8632,7 +9355,7 @@
         views,
         style // Capture user-provided style
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$7);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$6);
     var {
       isOpen,
       position: contextPosition,
@@ -8924,7 +9647,7 @@
     }));
   };
 
-  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.
@@ -8939,7 +9662,7 @@
         onOpenChange,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     var state = useContextMenuState({
       size,
       variant,
@@ -8991,15 +9714,15 @@
   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
@@ -9022,7 +9745,7 @@
     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));
@@ -9075,7 +9798,7 @@
     };
   };
 
-  var _excluded$o = ["children", "views"];
+  var _excluded$m = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
@@ -9083,7 +9806,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     return /*#__PURE__*/React__default.createElement(Text
     // Typography properties
     , Object.assign({
@@ -9109,7 +9832,7 @@
     }, 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,
@@ -9117,7 +9840,7 @@
         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
@@ -9153,13 +9876,23 @@
    */
   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'
@@ -9184,13 +9917,19 @@
       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: {
@@ -9200,18 +9939,29 @@
       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'
+      }
     }
   };
   /**
@@ -9221,7 +9971,15 @@
     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
@@ -9230,10 +9988,18 @@
     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,
@@ -9251,7 +10017,7 @@
           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
@@ -9280,12 +10046,12 @@
     }, 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,
@@ -9336,7 +10102,7 @@
     }
   };
 
-  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,
@@ -9352,7 +10118,7 @@
         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.
@@ -9384,7 +10150,7 @@
   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,
@@ -9395,7 +10161,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     return /*#__PURE__*/React__default.createElement(Label
     // Position properties
     , Object.assign({
@@ -9416,12 +10182,12 @@
     }, 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({
@@ -9454,8 +10220,8 @@
     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"];
   /**
@@ -9472,7 +10238,7 @@
         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();
@@ -9580,7 +10346,7 @@
         isReadOnly = false,
         options = []
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$9);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$8);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -10065,18 +10831,27 @@
     // 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));
@@ -10104,7 +10879,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
     var handleToggle = event => {
       if (!isReadOnly && !isDisabled) {
         var newValue = event.target.checked;
@@ -10241,7 +11016,7 @@
     // 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,
@@ -10276,7 +11051,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the textarea field
@@ -10415,7 +11190,7 @@
     };
   };
 
-  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
    */
@@ -10461,7 +11236,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var {
       getColor,
       themeMode
@@ -10654,19 +11429,26 @@
     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'
     }
   };
   /**
@@ -10675,31 +11457,47 @@
   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: {
@@ -10717,7 +11515,7 @@
     }
   };
 
-  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,
@@ -10744,7 +11542,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -11202,7 +12000,7 @@
     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
@@ -11243,7 +12041,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     var {
       getColor
     } = appStudio.useTheme();
@@ -12882,11 +13680,11 @@
     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));
@@ -12895,7 +13693,7 @@
     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));
@@ -13127,7 +13925,7 @@
     };
   };
 
-  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));
@@ -13160,7 +13958,7 @@
         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);
@@ -13247,8 +14045,8 @@
     }, 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, {
@@ -13258,13 +14056,13 @@
           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,
@@ -13312,7 +14110,7 @@
     };
   };
 
-  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 {
@@ -13337,7 +14135,7 @@
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     var {
       ref: triggerRef,
       relation
@@ -13484,7 +14282,7 @@
     })))))))))));
   };
 
-  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 {
@@ -13500,7 +14298,7 @@
         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 (
@@ -13709,7 +14507,7 @@
     };
   };
 
-  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
    */
@@ -13825,7 +14623,7 @@
         setIsHovered,
         onClick
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$G);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$E);
     var {
       getColor,
       themeMode
@@ -13908,7 +14706,7 @@
     }, views == null ? void 0 : views.placeholder), "Maximum ", maxTags, " tags reached")))), right));
   };
 
-  var _excluded$H = ["tags"];
+  var _excluded$F = ["tags"];
   /**
    * TagInput Component
    *
@@ -13920,7 +14718,7 @@
     // 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));
   };
@@ -14233,7 +15031,7 @@
     };
   };
 
-  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: [],
@@ -14287,7 +15085,7 @@
         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
@@ -14519,7 +15317,7 @@
   };
   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: () => {},
@@ -14535,7 +15333,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -14583,7 +15381,7 @@
     }, /*#__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':
@@ -14622,7 +15420,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
     var focus = useFormFocus();
     var {
       touched,
@@ -14666,13 +15464,13 @@
     } : {});
   };
 
-  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));
@@ -14928,7 +15726,12 @@
       maxWidth: '100%',
       borderRadius: '12px',
       backgroundColor: 'color.white',
-      transition: 'all 0.2s ease'
+      transition: 'all 0.2s ease',
+      media: {
+        mobile: {
+          borderRadius: '8px'
+        }
+      }
     },
     content: {
       width: '100%',
@@ -14937,7 +15740,13 @@
       backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderColor: 'color.gray.200'
+      borderColor: 'color.gray.200',
+      media: {
+        mobile: {
+          padding: '10px',
+          borderRadius: '8px'
+        }
+      }
     },
     textarea: {
       width: '100%',
@@ -14951,7 +15760,14 @@
       border: 'none',
       outline: 'none',
       resize: 'none',
-      overflow: 'auto'
+      overflow: 'auto',
+      media: {
+        mobile: {
+          padding: '6px 10px',
+          fontSize: '13px',
+          minHeight: '36px'
+        }
+      }
     },
     attachments: {
       display: 'flex',
@@ -14991,7 +15807,14 @@
       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',
@@ -14999,7 +15822,13 @@
       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',
@@ -15017,66 +15846,368 @@
       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
@@ -16635,13 +17766,15 @@
   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
@@ -17571,7 +18704,15 @@
       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 {
@@ -17596,7 +18737,13 @@
       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 => {
@@ -17611,7 +18758,14 @@
       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 => {
@@ -17629,7 +18783,14 @@
       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);
   };
 
@@ -17694,6 +18855,7 @@
     }
     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
@@ -17715,7 +18877,8 @@
       setActiveItemId,
       expandedItemIds,
       toggleExpandedItem,
-      isItemExpanded
+      isItemExpanded,
+      triggerRefs
     };
   };
 
@@ -17737,17 +18900,35 @@
     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'
+        }
+      }
     }
   };
   /**
@@ -17779,7 +18960,13 @@
   var NavigationMenuOrientations = {
     horizontal: {
       flexDirection: 'row',
-      gap: '8px'
+      gap: '8px',
+      media: {
+        mobile: {
+          flexDirection: 'column',
+          gap: '4px'
+        }
+      }
     },
     vertical: {
       flexDirection: 'column',
@@ -17818,7 +19005,10 @@
     isItemExpanded: () => false,
     orientation: 'vertical',
     size: 'md',
-    variant: 'default'
+    variant: 'default',
+    triggerRefs: {
+      current: {}
+    }
   });
   // Provider component for the NavigationMenu context
   var NavigationMenuProvider = _ref => {
@@ -17972,16 +19162,30 @@
       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,
@@ -18015,22 +19219,150 @@
     } = _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 => {
@@ -18129,7 +19461,8 @@
       setActiveItemId,
       expandedItemIds,
       toggleExpandedItem,
-      isItemExpanded
+      isItemExpanded,
+      triggerRefs
     } = useNavigationMenuState(defaultActiveItemId, defaultExpandedItemIds);
     return /*#__PURE__*/React__default.createElement(NavigationMenuProvider, {
       value: {
@@ -18141,7 +19474,8 @@
         orientation,
         size,
         variant,
-        onItemActivate
+        onItemActivate,
+        triggerRefs
       }
     }, items ? (/*#__PURE__*/React__default.createElement(NavigationMenuView, Object.assign({
       items: items,
@@ -18197,16 +19531,24 @@
    */
   /**
    * 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',
@@ -18218,18 +19560,35 @@
       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: {
@@ -18242,7 +19601,12 @@
       margin: '8px 0',
       color: 'color.gray.600',
       fontSize: '14px',
-      fontStyle: 'italic'
+      fontStyle: 'italic',
+      media: {
+        mobile: {
+          fontSize: '12px'
+        }
+      }
     }
   };
 
@@ -19037,6 +20401,13 @@
     };
     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,
@@ -19105,7 +20476,7 @@
         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,
@@ -19129,7 +20500,7 @@
         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,
@@ -23470,19 +24841,43 @@
       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 = {
@@ -23814,16 +25209,23 @@
   };
   /**
    * 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'
     }
   };
 
@@ -24128,27 +25530,17 @@
     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);
@@ -24511,7 +25903,7 @@
       expand,
       collapse,
       isMobile
-    } = useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint);
+    } = useSidebarState(defaultExpanded, expanded, onExpandedChange);
     return /*#__PURE__*/React__default.createElement(SidebarProvider, {
       value: {
         isExpanded,
@@ -25591,13 +26983,15 @@
       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
@@ -25606,6 +27000,7 @@
       ,
       cursor: "pointer",
       color: Theme[variant].content.color,
+      bgColor: Theme[variant].container.backgroundColor,
       onClick: e => {
         e.stopPropagation();
         action();
@@ -26410,19 +27805,28 @@
   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