@app-studio/web 0.9.34 → 0.9.36

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.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.string.pad-start.js'), require('core-js/modules/es.array.sort.js'), require('src/components/CalendarWeek/CalendarWeek/CalendarWeek.style'), 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.string.pad-start.js', 'core-js/modules/es.array.sort.js', 'src/components/CalendarWeek/CalendarWeek/CalendarWeek.style', '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.CalendarWeek_style, 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_string_padStart_js, es_array_sort_js, CalendarWeek_style, format, 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;
@@ -7801,7 +7801,6 @@
       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 => {
@@ -8074,8 +8073,8 @@
    * Month grid styles (7 columns for days)
    */
   var monthGridStyles = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
+    display: 'flex',
+    flexDirection: 'column',
     backgroundColor: 'color.white'
   };
   /**
@@ -8105,15 +8104,32 @@
    */
   var dayCellStyles = {
     border: '1px solid',
-    borderColor: 'color.gray.200',
-    minHeight: 100,
-    padding: 8,
-    paddingTop: 4,
+    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
    */
@@ -8248,6 +8264,9 @@
       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(),
@@ -8311,10 +8330,64 @@
         return [currentDate];
       }
     }, [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
+          });
+        });
+        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
+        };
+      });
+    }, [monthWeeks, positionedEvents]);
     // Get day names
     var dayNames = React.useMemo(() => getDayNames(weekStartsOn), [weekStartsOn]);
     // Handle navigation
@@ -8374,10 +8447,9 @@
         onEventAdd(start, end);
       }
     }, [onEventAdd]);
-    // Handle event drag start
-    var handleEventDragStart = React.useCallback((e, event) => {
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('eventId', event.id);
+    // Handle mouse down on event (start dragging)
+    var handleEventMouseDown = React.useCallback((e, event) => {
+      e.preventDefault();
       dragStateRef.current = {
         isDragging: true,
         isResizing: false,
@@ -8390,52 +8462,7 @@
         originalEnd: event.end
       };
     }, []);
-    // Handle drag over day cell
-    var handleDragOver = React.useCallback((e, dayIndex) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-      setDropTargetDays([dayIndex]);
-    }, []);
-    // Handle drag leave
-    var handleDragLeave = React.useCallback(() => {
-      setDropTargetDays([]);
-    }, []);
-    // Handle drop on day cell
-    var handleDrop = React.useCallback((e, dayIndex) => {
-      e.preventDefault();
-      setDropTargetDays([]);
-      var dragState = dragStateRef.current;
-      if (!dragState.event || !dragState.originalStart || !dragState.originalEnd) return;
-      // Calculate date difference
-      var targetDate = calendarDates[dayIndex];
-      if (!targetDate) return;
-      var daysDiff = daysBetweenUTC(targetDate, dragState.originalStart.slice(0, 10));
-      // Update event dates
-      var newStart = addDateDays(dragState.originalStart.slice(0, 10), daysDiff);
-      var newEnd = addDateDays(dragState.originalEnd.slice(0, 10), daysDiff);
-      var updatedEvent = Object.assign({}, dragState.event, {
-        start: newStart,
-        end: newEnd
-      });
-      // Update local events
-      var updatedEvents = localEvents.map(ev => ev.id === dragState.event.id ? updatedEvent : ev);
-      setLocalEvents(updatedEvents);
-      // Call callback
-      onEventDrop == null || onEventDrop(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, calendarDates, onEventDrop]);
-    // Handle resize start (FIXED - using pixel-based approach like CalendarWeek)
+    // Handle resize start
     var handleResizeStart = React.useCallback((e, event, direction) => {
       e.preventDefault();
       e.stopPropagation();
@@ -8451,7 +8478,7 @@
         originalEnd: event.end
       };
     }, []);
-    // Handle mouse move during resize (FIXED - using pixel-based calculation)
+    // Handle mouse move during resize or drag
     var handleMouseMove = React.useCallback(e => {
       var dragState = dragStateRef.current;
       if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
@@ -8573,54 +8600,89 @@
       key: index
     }, weekdayLabelStyles, views.weekdayLabel), dayName)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       ref: gridRef
-    }, monthGridStyles, views.monthGrid), calendarDates.map((dateISO, index) => {
-      var dateNum = getDateNumber(dateISO);
-      var isToday = dateISO === today;
-      var isSelected = dateISO === selectedDate;
-      var isCurrentMonth = isInMonth(dateISO, currentMonth);
-      var isDropTarget = dropTargetDays.includes(index);
-      var dayEvents = eventsByDate[dateISO] || [];
-      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),
-        onDragOver: e => handleDragOver(e, index),
-        onDragLeave: handleDragLeave,
-        onDrop: e => handleDrop(e, index)
-      }, views.dayCell), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
-        style: {
-          cursor: 'pointer'
-        }
-      }, views.dayNumber), dateNum), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, eventsAreaStyles, views.eventsArea), dayEvents.map(event => {
+    }, 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 isMultiDay = event.duration > 1;
-        var isFirstDay = event.isFirstDay !== false;
-        if (!isFirstDay) return null;
+        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,
-          position: "relative"
-        }, eventStyles, {
+          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,
-          draggable: true,
-          onDragStart: e => handleEventDragStart(e, event),
-          title: isMultiDay ? event.title + " (" + event.duration + " days)" : event.title
+          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, isMultiDay && " (" + event.duration + "d)"), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        }, event.title), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
           direction: "left",
           onMouseDown: e => handleResizeStart(e, event, 'left')
-        }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        })), 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) => {
@@ -8634,7 +8696,7 @@
         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({}, CalendarWeek_style.dayDateStyles, isToday && todayDayNumberStyles, {
+      }, 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));
@@ -8652,14 +8714,14 @@
       }, dayCellStyles, isDropTarget && dropTargetStyles, {
         minHeight: 400,
         onClick: () => handleDateClick(dateISO),
-        onDoubleClick: () => handleDateDoubleClick(dateISO),
-        onDragOver: e => handleDragOver(e, index),
-        onDragLeave: handleDragLeave,
-        onDrop: e => handleDrop(e, index)
+        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"
@@ -8667,8 +8729,12 @@
           backgroundColor: colorConfig.background,
           borderLeftColor: colorConfig.border,
           color: colorConfig.text,
-          draggable: true,
-          onDragStart: e => handleEventDragStart(e, event),
+          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",
@@ -8787,509 +8853,6 @@
     }, views.navButton), "\u203A")))), currentView === 'month' && renderMonthView(), currentView === 'week' && renderWeekView(), currentView === 'day' && renderDayView());
   };
 
-  /**
-   * Convert an ISO date string to a UTC Date object
-   */
-  var dateUTC$1 = iso => {
-    return new Date(iso + (iso.includes('T') ? '' : 'T00:00:00Z'));
-  };
-  /**
-   * Calculate the number of days between two ISO date strings
-   */
-  var daysBetweenUTC$1 = (a, b) => {
-    return Math.floor((dateUTC$1(a).getTime() - dateUTC$1(b).getTime()) / 86400000);
-  };
-  /**
-   * Add a number of days to an ISO date string
-   */
-  var addDateDays$1 = (dateISO, days) => {
-    var d = new Date(dateISO + 'T00:00:00Z');
-    d.setUTCDate(d.getUTCDate() + days);
-    return d.toISOString().slice(0, 10);
-  };
-  /**
-   * Get the day of the week (0-6) from an ISO date string
-   */
-  var getDayOfWeek$1 = dateISO => {
-    return dateUTC$1(dateISO).getUTCDay();
-  };
-  /**
-   * Get the date number (1-31) from an ISO date string
-   */
-  var getDateNumber$1 = dateISO => {
-    return dateUTC$1(dateISO).getUTCDate();
-  };
-  /**
-   * Layout events with proper positioning to avoid overlaps
-   * Returns positioned events and the total number of rows needed
-   */
-  var layoutEvents$1 = (events, weekStart) => {
-    // Convert events to positioned items with day indices
-    var items = events.map(ev => {
-      var startIdx = daysBetweenUTC$1(ev.start, weekStart);
-      var endIdx = daysBetweenUTC$1(ev.end, weekStart);
-      // Clamp to week boundaries
-      var clampedStart = Math.max(0, Math.min(6, startIdx));
-      var clampedEnd = Math.max(0, Math.min(6, endIdx));
-      // Skip if completely outside week
-      if (endIdx < 0 || startIdx > 6) return null;
-      var duration = clampedEnd - clampedStart + 1;
-      return Object.assign({}, ev, {
-        startDay: clampedStart,
-        endDay: clampedEnd,
-        duration: duration,
-        row: 0
-      });
-    }).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 using greedy algorithm to prevent overlaps
-    var rows = [];
-    items.forEach(item => {
-      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;
-        }
-      }
-      if (!placed) {
-        item.row = rows.length;
-        rows.push([item]);
-      }
-    });
-    return {
-      items,
-      rowCount: rows.length
-    };
-  };
-  /**
-   * Day names array (Sunday to Saturday)
-   */
-  var DAY_NAMES$1 = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-  /**
-   * Get the date ISO string for a specific day in the week
-   */
-  var getDateForDay = (weekStart, dayIndex) => {
-    return addDateDays$1(weekStart, dayIndex);
-  };
-
-  /**
-   * Event color configurations
-   */
-  var EVENT_COLORS$1 = {
-    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'
-    }
-  };
-  /**
-   * Base styles for the calendar container
-   */
-  var containerStyles$1 = {
-    width: '100%',
-    maxWidth: 1200,
-    border: '1px solid',
-    borderColor: 'color.gray.200',
-    borderRadius: 8,
-    overflow: 'hidden',
-    backgroundColor: 'color.white'
-  };
-  /**
-   * Individual day column styles
-   */
-  var dayColumnStyles = {
-    borderRight: '1px solid',
-    borderColor: 'color.gray.200',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: 160,
-    backgroundColor: 'color.white',
-    position: 'relative'
-  };
-  /**
-   * Day header styles
-   */
-  var dayHeaderStyles = {
-    padding: 8,
-    borderBottom: '1px solid',
-    borderColor: 'color.gray.200',
-    backgroundColor: 'color.gray.50',
-    minHeight: 60,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4
-  };
-  /**
-   * Day name styles (e.g., "Mon", "Tue")
-   */
-  var dayNameStyles = {
-    fontSize: 11,
-    fontWeight: 500,
-    color: 'color.gray.700',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5
-  };
-  /**
-   * 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'
-  };
-  /**
-   * Today date styles
-   */
-  var todayDateStyles = {
-    backgroundColor: 'color.blue.500',
-    color: 'color.white',
-    fontWeight: 500
-  };
-  /**
-   * Selected date styles
-   */
-  var selectedDateStyles = {
-    borderColor: 'color.blue.500'
-  };
-  /**
-   * Events area styles
-   */
-  var eventsAreaStyles$1 = {
-    padding: 8,
-    paddingLeft: 6,
-    paddingRight: 6,
-    flex: 1,
-    position: 'relative'
-  };
-  /**
-   * Drop target indicator styles
-   */
-  var dropTargetStyles$1 = {
-    backgroundColor: 'rgba(26, 115, 232, 0.05)'
-  };
-  /**
-   * Calculate event position styles
-   */
-  var getEventPositionStyles = (startDay, duration, row) => {
-    var dayWidth = 100 / 7;
-    var left = startDay * dayWidth;
-    var width = duration * dayWidth;
-    return {
-      left: "calc(" + left + "% + 6px)",
-      width: "calc(" + width + "% - 12px)",
-      top: 8 + row * 26 + "px"
-    };
-  };
-
-  var ResizeHandle$1 = _ref => {
-    var {
-      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 CalendarWeek = _ref2 => {
-    var {
-      startDate,
-      events = [],
-      today = new Date().toISOString().slice(0, 10),
-      onEventDrop,
-      onEventResize,
-      onDateClick,
-      views = {},
-      width = '100%',
-      maxWidth = 1200
-    } = _ref2;
-    var {
-      getColor
-    } = appStudio.useTheme();
-    var weekGridRef = React.useRef(null);
-    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]);
-    // Layout events
-    var {
-      items: positionedEvents
-    } = React.useMemo(() => layoutEvents$1(localEvents, startDate), [localEvents, startDate]);
-    // Get day index from mouse X position
-    var getDayFromMouseX = React.useCallback(clientX => {
-      if (!weekGridRef.current) return 0;
-      var rect = weekGridRef.current.getBoundingClientRect();
-      var relativeX = clientX - rect.left;
-      var dayWidth = rect.width / 7;
-      return Math.max(0, Math.min(6, Math.floor(relativeX / dayWidth)));
-    }, []);
-    // Handle date click
-    var handleDateClick = React.useCallback(dateISO => {
-      setSelectedDate(dateISO);
-      onDateClick == null || onDateClick(dateISO);
-    }, [onDateClick]);
-    // 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 mouse down on resize handle
-    var handleResizeMouseDown = 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 (dragging or resizing)
-    var handleMouseMove = React.useCallback(e => {
-      var dragState = dragStateRef.current;
-      if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
-      if (!weekGridRef.current) return;
-      var rect = weekGridRef.current.getBoundingClientRect();
-      var dayWidth = rect.width / 7;
-      var deltaX = e.clientX - dragState.startX;
-      var daysDelta = Math.round(deltaX / dayWidth);
-      if (dragState.isDragging) {
-        // Calculate new position
-        var newStartDay = Math.max(0, Math.min(6, dragState.startDay + daysDelta));
-        var duration = dragState.event.duration;
-        var newEndDay = Math.min(6, 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$1(dragState.originalStart, newStartDay - dragState.startDay),
-          end: addDateDays$1(dragState.originalEnd, newStartDay - dragState.startDay)
-        }) : ev);
-        setLocalEvents(updatedEvents);
-      } else if (dragState.isResizing) {
-        // Handle resizing
-        if (dragState.resizeDirection === 'right') {
-          var newDuration = Math.max(1, dragState.startDuration + daysDelta);
-          var _newEndDay = Math.min(6, 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$1(dragState.originalStart, actualDuration - 1)
-          }) : ev);
-          setLocalEvents(_updatedEvents);
-        } else if (dragState.resizeDirection === '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$1(dragState.originalStart, _newStartDay - dragState.startDay)
-          }) : ev);
-          setLocalEvents(_updatedEvents2);
-        }
-      }
-    }, [localEvents]);
-    // Handle mouse up (finish dragging or resizing)
-    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]);
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, containerStyles$1, {
-      width: width,
-      maxWidth: maxWidth
-    }, views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      ref: weekGridRef,
-      display: "grid",
-      gridTemplateColumns: "repeat(7, 1fr)",
-      position: "relative",
-      width: "100%"
-    }, views.weekGrid), Array.from({
-      length: 7
-    }).map((_, dayIdx) => {
-      var dateISO = getDateForDay(startDate, dayIdx);
-      var dayOfWeek = getDayOfWeek$1(dateISO);
-      var dateNum = getDateNumber$1(dateISO);
-      var isToday = dateISO === today;
-      var isSelected = dateISO === selectedDate;
-      var isDropTarget = dropTargetDays.includes(dayIdx);
-      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-        key: dayIdx
-      }, dayColumnStyles, isDropTarget && dropTargetStyles$1, {
-        borderRight: dayIdx === 6 ? 'none' : '1px solid'
-      }, views.dayColumn), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayHeaderStyles, views.dayHeader), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayNameStyles, views.dayName), DAY_NAMES$1[dayOfWeek]), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, dayDateStyles, isToday && todayDateStyles, isSelected && !isToday && selectedDateStyles, {
-        onClick: () => handleDateClick(dateISO)
-      }, views.dayDate), dateNum)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, eventsAreaStyles$1, views.eventsArea)));
-    }), /*#__PURE__*/React__default.createElement(appStudio.View, {
-      position: "absolute",
-      top: 60,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      pointerEvents: "none"
-    }, positionedEvents.map(event => {
-      var _dragStateRef$current, _dragStateRef$current2;
-      var colorConfig = EVENT_COLORS$1[event.color || 'blue'];
-      var positionStyles = getEventPositionStyles(event.startDay, event.duration, event.row);
-      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;
-      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-        key: event.id,
-        position: "absolute",
-        height: 22,
-        display: "flex",
-        alignItems: "center",
-        padding: 8,
-        paddingLeft: 8,
-        paddingRight: 8,
-        borderRadius: 4,
-        backgroundColor: colorConfig.background,
-        borderLeft: "3px solid",
-        borderLeftColor: colorConfig.border,
-        color: colorConfig.text,
-        fontSize: 12,
-        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: positionStyles.left,
-        width: positionStyles.width,
-        top: positionStyles.top,
-        onMouseDown: e => handleEventMouseDown(e, event)
-      }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), /*#__PURE__*/React__default.createElement(ResizeHandle$1, {
-        direction: "left",
-        onMouseDown: e => handleResizeMouseDown(e, event, 'left')
-      }), /*#__PURE__*/React__default.createElement(ResizeHandle$1, {
-        direction: "right",
-        onMouseDown: e => handleResizeMouseDown(e, event, 'right')
-      }));
-    }))));
-  };
-
   /**
    * Custom hook to manage cookie consent state
    * @param cookieExpiration Number of days until the cookie expires
@@ -19930,6 +19493,404 @@
   NavigationMenu.Content = NavigationMenuContent;
   NavigationMenu.Link = NavigationMenuLink;
 
+  var _excluded$X = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+  var ProgressBarView = _ref => {
+    var {
+        value = 0,
+        max = 100,
+        color = 'theme.primary',
+        backgroundColor = 'color.gray.200',
+        height = 8,
+        radius = 4,
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var currentMode = elementMode ? elementMode : themeMode;
+    var percentage = Math.min(100, Math.max(0, value / max * 100));
+    var trackColor = getColor(backgroundColor, {
+      themeMode: currentMode
+    });
+    var barColor = getColor(color, {
+      themeMode: currentMode
+    });
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      width: "100%",
+      height: height,
+      backgroundColor: trackColor,
+      borderRadius: radius,
+      overflow: "hidden"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: percentage + "%",
+      height: "100%",
+      backgroundColor: barColor,
+      borderRadius: radius
+    }, views == null ? void 0 : views.bar)));
+  };
+
+  /**
+   * ProgressBar component displays completion status of a task or process.
+   */
+  var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
+  var ProgressBar = ProgressBarComponent;
+
+  var getThemes$2 = themeMode => {
+    return {
+      default: {
+        indicator: {
+          backgroundColor: 'color.gray.400'
+        },
+        label: {
+          color: 'color.gray.700'
+        }
+      },
+      info: {
+        indicator: {
+          backgroundColor: 'color.blue.500'
+        },
+        label: {
+          color: 'color.blue.700'
+        }
+      },
+      success: {
+        indicator: {
+          backgroundColor: 'color.green.500'
+        },
+        label: {
+          color: 'color.green.700'
+        }
+      },
+      warning: {
+        indicator: {
+          backgroundColor: 'color.orange.500'
+        },
+        label: {
+          color: 'color.orange.700'
+        }
+      },
+      error: {
+        indicator: {
+          backgroundColor: 'color.red.500'
+        },
+        label: {
+          color: 'color.red.700'
+        }
+      }
+    };
+  };
+
+  var _excluded$Y = ["label", "status", "views", "themeMode"];
+  var StatusIndicatorView = _ref => {
+    var {
+        label,
+        status = 'default',
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    var {
+      themeMode
+    } = appStudio.useTheme();
+    var themes = getThemes$2();
+    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      alignItems: "center",
+      gap: 8,
+      role: "status-indicator"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "status-dot",
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%"
+    }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      role: "status-label",
+      fontSize: "14px",
+      lineHeight: "20px"
+    }, themes[status].label, views == null ? void 0 : views.label), label)));
+  };
+
+  var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
+
+  var getOKRTheme = mode => {
+    var isDark = mode === 'dark';
+    return {
+      container: {
+        width: '100%',
+        gap: 16
+      },
+      objectiveCard: {
+        backgroundColor: isDark ? 'rgba(15, 23, 42, 0.6)' : 'color.white',
+        borderColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: 16,
+        padding: 24,
+        gap: 20
+      },
+      tag: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '4px 10px',
+        borderRadius: 999,
+        backgroundColor: isDark ? 'rgba(148, 163, 184, 0.16)' : 'color.gray.100'
+      },
+      keyResultItem: {
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: isDark ? 'rgba(148, 163, 184, 0.18)' : 'color.gray.200',
+        backgroundColor: isDark ? 'rgba(15, 23, 42, 0.35)' : 'color.gray.50',
+        gap: 12
+      },
+      divider: {
+        height: 1,
+        backgroundColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+        width: '100%'
+      }
+    };
+  };
+  var STATUS_METADATA = {
+    notStarted: {
+      indicator: 'info',
+      label: 'Not started'
+    },
+    onTrack: {
+      indicator: 'success',
+      label: 'On track'
+    },
+    atRisk: {
+      indicator: 'warning',
+      label: 'At risk'
+    },
+    offTrack: {
+      indicator: 'error',
+      label: 'Off track'
+    },
+    achieved: {
+      indicator: 'success',
+      label: 'Achieved'
+    }
+  };
+  var deriveStatusFromProgress = progress => {
+    if (progress >= 100) {
+      return 'achieved';
+    }
+    if (progress >= 70) {
+      return 'onTrack';
+    }
+    if (progress >= 40) {
+      return 'atRisk';
+    }
+    if (progress > 0) {
+      return 'offTrack';
+    }
+    return 'notStarted';
+  };
+  var clampProgress = value => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+      return 0;
+    }
+    return Math.max(0, Math.min(100, Math.round(value)));
+  };
+
+  var formatPercentage = value => value + "%";
+  var formatConfidence = confidence => {
+    if (!confidence) {
+      return undefined;
+    }
+    return confidence.charAt(0).toUpperCase() + confidence.slice(1);
+  };
+  var getObjectiveProgress = objective => {
+    if (typeof objective.progress === 'number') {
+      return clampProgress(objective.progress);
+    }
+    if (!objective.keyResults.length) {
+      return 0;
+    }
+    var total = objective.keyResults.reduce((acc, keyResult) => {
+      var _keyResult$progress;
+      return acc + ((_keyResult$progress = keyResult.progress) != null ? _keyResult$progress : 0);
+    }, 0);
+    return clampProgress(total / objective.keyResults.length);
+  };
+  var renderStatusIndicator = (status, themeMode, views) => {
+    var metadata = STATUS_METADATA[status];
+    return /*#__PURE__*/React__default.createElement(StatusIndicator, {
+      themeMode: themeMode,
+      status: metadata.indicator,
+      label: metadata.label,
+      views: views
+    });
+  };
+  var OKRView = _ref => {
+    var {
+      objectives,
+      themeMode: elementMode,
+      views,
+      onKeyResultClick,
+      renderObjectiveFooter,
+      renderKeyResultFooter
+    } = _ref;
+    var {
+      themeMode
+    } = appStudio.useTheme();
+    var currentMode = elementMode || themeMode || 'light';
+    var theme = getOKRTheme(currentMode);
+    var secondaryTextColor = currentMode === 'dark' ? 'color.gray.200' : 'color.gray.600';
+    var subtleTextColor = currentMode === 'dark' ? 'color.gray.300' : 'color.gray.500';
+    var tagTextColor = currentMode === 'dark' ? 'color.gray.100' : 'color.gray.700';
+    return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({}, theme.container, views == null ? void 0 : views.container), objectives.map(objective => {
+      var _objective$status, _objective$tags, _views$objectiveProgr, _views$objectiveProgr2, _views$objectiveProgr3, _views$objectiveProgr4;
+      var objectiveProgress = getObjectiveProgress(objective);
+      var objectiveStatus = (_objective$status = objective.status) != null ? _objective$status : deriveStatusFromProgress(objectiveProgress);
+      var objectiveFooter = renderObjectiveFooter == null ? void 0 : renderObjectiveFooter(objective);
+      return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        key: objective.id
+      }, theme.objectiveCard, views == null ? void 0 : views.objectiveCard), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flexWrap: "wrap",
+        gap: 16
+      }, views == null ? void 0 : views.objectiveHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        gap: 10,
+        minWidth: 240
+      }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "lg",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.objectiveTitle), objective.title), objective.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveDescription), objective.description)), (_objective$tags = objective.tags) != null && _objective$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        gap: 8,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.objectiveTags), objective.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: tag
+      }, theme.tag, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "medium",
+        color: tagTextColor
+      }, views == null ? void 0 : views.tagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 8,
+        alignItems: "flex-end",
+        minWidth: 160
+      }, views == null ? void 0 : views.objectiveMeta), objective.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveOwner), "Owner: ", objective.owner)), objective.timeframe && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: subtleTextColor
+      }, views == null ? void 0 : views.objectiveTimeframe), objective.timeframe)), renderStatusIndicator(objectiveStatus, currentMode, views == null ? void 0 : views.objectiveStatus))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 8
+      }, views == null ? void 0 : views.objectiveProgressSection), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveProgressLabel), "Progress"), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.objectiveProgressValue), formatPercentage(objectiveProgress))), /*#__PURE__*/React__default.createElement(ProgressBar, {
+        value: objectiveProgress,
+        max: 100,
+        views: {
+          container: Object.assign({
+            width: '100%'
+          }, (_views$objectiveProgr = views == null || (_views$objectiveProgr2 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr2.container) != null ? _views$objectiveProgr : {}),
+          bar: Object.assign({}, (_views$objectiveProgr3 = views == null || (_views$objectiveProgr4 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr4.bar) != null ? _views$objectiveProgr3 : {})
+        }
+      })), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 16
+      }, views == null ? void 0 : views.keyResultList), objective.keyResults.map((keyResult, index) => {
+        var _keyResult$status, _keyResult$tags, _views$keyResultProgr, _views$keyResultProgr2, _views$keyResultProgr3, _views$keyResultProgr4;
+        var progress = clampProgress(keyResult.progress);
+        var keyResultStatus = (_keyResult$status = keyResult.status) != null ? _keyResult$status : deriveStatusFromProgress(progress);
+        var keyResultFooter = renderKeyResultFooter == null ? void 0 : renderKeyResultFooter(keyResult, objective);
+        var showDivider = index < objective.keyResults.length - 1;
+        return /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          key: keyResult.id,
+          gap: 12
+        }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+          role: onKeyResultClick ? 'button' : undefined,
+          cursor: onKeyResultClick ? 'pointer' : undefined,
+          onClick: onKeyResultClick ? () => onKeyResultClick(keyResult, objective) : undefined
+        }, theme.keyResultItem, views == null ? void 0 : views.keyResultItem), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          flexWrap: "wrap",
+          gap: 16
+        }, views == null ? void 0 : views.keyResultHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          gap: 8,
+          minWidth: 220
+        }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "md",
+          weight: "medium"
+        }, views == null ? void 0 : views.keyResultTitle), keyResult.title), keyResult.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "sm",
+          color: secondaryTextColor
+        }, views == null ? void 0 : views.keyResultDescription), keyResult.description)), (keyResult.metric || keyResult.target || keyResult.current || keyResult.confidence || keyResult.lastUpdated) && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          gap: 12,
+          flexWrap: "wrap"
+        }, views == null ? void 0 : views.keyResultMeta), keyResult.metric && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Metric: ", keyResult.metric)), keyResult.current && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Current: ", keyResult.current)), keyResult.target && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Target: ", keyResult.target)), keyResult.confidence && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Confidence:", ' ', formatConfidence(keyResult.confidence))), keyResult.lastUpdated && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: subtleTextColor
+        }, "Updated: ", keyResult.lastUpdated)))), (_keyResult$tags = keyResult.tags) != null && _keyResult$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          gap: 8,
+          flexWrap: "wrap"
+        }, views == null ? void 0 : views.keyResultTags), keyResult.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+          key: tag
+        }, theme.tag, views == null ? void 0 : views.keyResultTag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          weight: "medium",
+          color: tagTextColor
+        }, views == null ? void 0 : views.keyResultTagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          gap: 8,
+          alignItems: "flex-end"
+        }, keyResult.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          color: secondaryTextColor
+        }, views == null ? void 0 : views.keyResultOwner), "Owner: ", keyResult.owner)), renderStatusIndicator(keyResultStatus, currentMode, views == null ? void 0 : views.keyResultStatus))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          alignItems: "center",
+          gap: 12
+        }, views == null ? void 0 : views.keyResultProgressSection), /*#__PURE__*/React__default.createElement(ProgressBar, {
+          value: progress,
+          max: 100,
+          views: {
+            container: Object.assign({
+              width: '100%'
+            }, (_views$keyResultProgr = views == null || (_views$keyResultProgr2 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr2.container) != null ? _views$keyResultProgr : {}),
+            bar: Object.assign({}, (_views$keyResultProgr3 = views == null || (_views$keyResultProgr4 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr4.bar) != null ? _views$keyResultProgr3 : {})
+          }
+        }), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          weight: "semiBold"
+        }, views == null ? void 0 : views.keyResultProgressValue), formatPercentage(progress))), keyResultFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), keyResultFooter)) : null), showDivider ? /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, theme.divider)) : null);
+      })), objectiveFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), objectiveFooter)) : null);
+    }));
+  };
+
+  var OKR = props => /*#__PURE__*/React__default.createElement(OKRView, Object.assign({}, props));
+
   var defaultStyles = {};
   // Create a context that includes both styles and the onClick function
   var TableContext = /*#__PURE__*/React.createContext({
@@ -20712,7 +20673,7 @@
     })
   };
 
-  var _excluded$X = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
   /**
    * A component that creates a typewriter effect for text
    */
@@ -20726,7 +20687,7 @@
         cursorColor = 'currentColor',
         textStyle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     // Convert text to array if it's a string
     var textArray = Array.isArray(text) ? text : [text];
     // State for the currently displayed text
@@ -20793,7 +20754,7 @@
     }))))));
   };
 
-  var _excluded$Y = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
+  var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
   function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
   }
@@ -20815,7 +20776,7 @@
         highlightTypewriter: propHighlightTypewriter = false,
         highlightTypewriterDuration = 3000
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var {
       ref,
       inView
@@ -21090,7 +21051,7 @@
     }
   });
 
-  var _excluded$Z = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+  var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
     var _ref2;
     var {
@@ -21110,7 +21071,7 @@
         // 2nd candidate for main color
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     /* theme helpers */
     var {
       getColor,
@@ -21154,7 +21115,7 @@
     }, props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$_ = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -21166,7 +21127,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -21501,7 +21462,7 @@
     }
   };
 
-  var _excluded$$ = ["children", "views"],
+  var _excluded$11 = ["children", "views"],
     _excluded2$f = ["items", "side", "align", "views"],
     _excluded3$9 = ["item", "views"],
     _excluded4$8 = ["views"],
@@ -21542,7 +21503,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
     var {
       isOpen,
       setIsOpen,
@@ -21795,7 +21756,7 @@
     }));
   };
 
-  var _excluded$10 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -21810,7 +21771,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
     var {
       isOpen,
       setIsOpen,
@@ -22224,7 +22185,7 @@
     category: 'neutral'
   }];
 
-  var _excluded$11 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+  var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
   var ColorPickerView = _ref => {
     var {
         // Basic props
@@ -22259,7 +22220,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var {
       getColor
     } = appStudio.useTheme();
@@ -24589,7 +24550,7 @@
     };
   };
 
-  var _excluded$12 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
   var EmojiPickerView = _ref => {
     var {
         // Basic props
@@ -24627,7 +24588,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       getColor
     } = appStudio.useTheme();
@@ -24816,7 +24777,7 @@
     }
   };
 
-  var _excluded$13 = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -24853,7 +24814,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -25173,7 +25134,7 @@
     })))))));
   };
 
-  var _excluded$14 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -25187,7 +25148,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -25369,7 +25330,7 @@
     }
   };
 
-  var _excluded$15 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -25400,7 +25361,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -25519,7 +25480,7 @@
     }, option.label))))));
   };
 
-  var _excluded$16 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -25540,7 +25501,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -25564,55 +25525,6 @@
   };
   var Pagination = PaginationComponent;
 
-  var _excluded$17 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
-  var ProgressBarView = _ref => {
-    var {
-        value = 0,
-        max = 100,
-        color = 'theme.primary',
-        backgroundColor = 'color.gray.200',
-        height = 8,
-        radius = 4,
-        views,
-        themeMode: elementMode
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
-    var {
-      getColor,
-      themeMode
-    } = appStudio.useTheme();
-    var currentMode = elementMode ? elementMode : themeMode;
-    var percentage = Math.min(100, Math.max(0, value / max * 100));
-    var trackColor = getColor(backgroundColor, {
-      themeMode: currentMode
-    });
-    var barColor = getColor(color, {
-      themeMode: currentMode
-    });
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      width: "100%",
-      height: height,
-      backgroundColor: trackColor,
-      borderRadius: radius,
-      overflow: "hidden"
-    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      width: percentage + "%",
-      height: "100%",
-      backgroundColor: barColor,
-      borderRadius: radius
-    }, views == null ? void 0 : views.bar)));
-  };
-
-  /**
-   * ProgressBar component displays completion status of a task or process.
-   */
-  var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
-  var ProgressBar = ProgressBarComponent;
-
   /**
    * Separator Styles
    *
@@ -25666,7 +25578,7 @@
     }
   };
 
-  var _excluded$18 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$19 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -25678,7 +25590,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -25746,7 +25658,7 @@
   var Separator = SeparatorComponent;
   var Divider = SeparatorComponent;
 
-  var _excluded$19 = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+  var _excluded$1a = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
   var ICON_SIZE_MAP = {
     xs: 12,
     sm: 14,
@@ -25769,7 +25681,7 @@
         iconPosition,
         disableWhenUnsupported = true
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     var resolvedSize = size != null ? size : 'md';
     var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
       widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -25871,14 +25783,14 @@
     };
   };
 
-  var _excluded$1a = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+  var _excluded$1b = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
   var ShareButtonComponent = props => {
     var {
       isSupported,
       isSharing,
       handleShare
     } = useShareButton(props);
-    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1a);
+    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1b);
     return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
       isSupported: isSupported,
       isSharing: isSharing,
@@ -25887,82 +25799,6 @@
   };
   var ShareButton = ShareButtonComponent;
 
-  var getThemes$2 = themeMode => {
-    return {
-      default: {
-        indicator: {
-          backgroundColor: 'color.gray.400'
-        },
-        label: {
-          color: 'color.gray.700'
-        }
-      },
-      info: {
-        indicator: {
-          backgroundColor: 'color.blue.500'
-        },
-        label: {
-          color: 'color.blue.700'
-        }
-      },
-      success: {
-        indicator: {
-          backgroundColor: 'color.green.500'
-        },
-        label: {
-          color: 'color.green.700'
-        }
-      },
-      warning: {
-        indicator: {
-          backgroundColor: 'color.orange.500'
-        },
-        label: {
-          color: 'color.orange.700'
-        }
-      },
-      error: {
-        indicator: {
-          backgroundColor: 'color.red.500'
-        },
-        label: {
-          color: 'color.red.700'
-        }
-      }
-    };
-  };
-
-  var _excluded$1b = ["label", "status", "views", "themeMode"];
-  var StatusIndicatorView = _ref => {
-    var {
-        label,
-        status = 'default',
-        views,
-        themeMode: elementMode
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
-    var {
-      themeMode
-    } = appStudio.useTheme();
-    var themes = getThemes$2();
-    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      alignItems: "center",
-      gap: 8,
-      role: "status-indicator"
-    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      role: "status-dot",
-      width: "8px",
-      height: "8px",
-      borderRadius: "50%"
-    }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-      role: "status-label",
-      fontSize: "14px",
-      lineHeight: "20px"
-    }, themes[status].label, views == null ? void 0 : views.label), label)));
-  };
-
-  var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
-
   var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
     if (defaultExpanded === void 0) {
       defaultExpanded = true;
@@ -37618,7 +37454,6 @@
   exports.Button = Button;
   exports.Calendar = Calendar;
   exports.CalendarIcon = CalendarIcon;
-  exports.CalendarWeek = CalendarWeek;
   exports.CameraIcon = CameraIcon;
   exports.Card = Card;
   exports.Carousel = Carousel;
@@ -37709,6 +37544,7 @@
   exports.MoonIcon = MoonIcon;
   exports.NavigationMenu = NavigationMenu;
   exports.NotificationIcon = NotificationIcon;
+  exports.OKR = OKR;
   exports.OTPInput = OTPInput;
   exports.OpenEyeIcon = OpenEyeIcon;
   exports.Pagination = Pagination;