@app-studio/web 0.9.34 → 0.9.36

package/dist/web.esm.js

@@ -31,9 +31,8 @@ import contrast from 'contrast';
 import 'core-js/modules/es.promise.js';
 import 'core-js/modules/es.array.reduce.js';
 import 'core-js/modules/es.number.to-fixed.js';
-import 'core-js/modules/es.string.pad-start.js';
 import 'core-js/modules/es.array.sort.js';
-import { dayDateStyles as dayDateStyles$1 } from 'src/components/CalendarWeek/CalendarWeek/CalendarWeek.style';
+import 'core-js/modules/es.string.pad-start.js';
 import format from 'date-fns/format';
 import 'core-js/modules/es.regexp.constructor.js';
 import { useFormikContext, getIn } from 'formik';
@@ -7837,7 +7836,6 @@ var KanbanBoardView = _ref => {
     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 => {
@@ -8110,8 +8108,8 @@ var monthTitleStyles = {
  * Month grid styles (7 columns for days)
  */
 var monthGridStyles = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(7, 1fr)',
+  display: 'flex',
+  flexDirection: 'column',
   backgroundColor: 'color.white'
 };
 /**
@@ -8141,15 +8139,32 @@ var weekdayLabelStyles = {
  */
 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
  */
@@ -8284,6 +8299,9 @@ var ResizeHandle = _ref => {
     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(),
@@ -8347,10 +8365,64 @@ var Calendar = _ref2 => {
       return [currentDate];
     }
   }, [currentDate, currentView, currentMonth, weekStartsOn]);
+  var monthWeeks = 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
   } = useMemo(() => layoutEvents(localEvents, calendarDates), [localEvents, calendarDates]);
+  var monthWeeksWithEvents = 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 = useMemo(() => getDayNames(weekStartsOn), [weekStartsOn]);
   // Handle navigation
@@ -8410,10 +8482,9 @@ var Calendar = _ref2 => {
       onEventAdd(start, end);
     }
   }, [onEventAdd]);
-  // Handle event drag start
-  var handleEventDragStart = useCallback((e, event) => {
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('eventId', event.id);
+  // Handle mouse down on event (start dragging)
+  var handleEventMouseDown = useCallback((e, event) => {
+    e.preventDefault();
     dragStateRef.current = {
       isDragging: true,
       isResizing: false,
@@ -8426,52 +8497,7 @@ var Calendar = _ref2 => {
       originalEnd: event.end
     };
   }, []);
-  // Handle drag over day cell
-  var handleDragOver = useCallback((e, dayIndex) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    setDropTargetDays([dayIndex]);
-  }, []);
-  // Handle drag leave
-  var handleDragLeave = useCallback(() => {
-    setDropTargetDays([]);
-  }, []);
-  // Handle drop on day cell
-  var handleDrop = 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 = useCallback((e, event, direction) => {
     e.preventDefault();
     e.stopPropagation();
@@ -8487,7 +8513,7 @@ var Calendar = _ref2 => {
       originalEnd: event.end
     };
   }, []);
-  // Handle mouse move during resize (FIXED - using pixel-based calculation)
+  // Handle mouse move during resize or drag
   var handleMouseMove = useCallback(e => {
     var dragState = dragStateRef.current;
     if (!dragState.event || !dragState.isDragging && !dragState.isResizing) return;
@@ -8609,54 +8635,89 @@ var Calendar = _ref2 => {
     key: index
   }, weekdayLabelStyles, views.weekdayLabel), dayName)))), /*#__PURE__*/React.createElement(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.createElement(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.createElement(View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
-      style: {
-        cursor: 'pointer'
-      }
-    }, views.dayNumber), dateNum), /*#__PURE__*/React.createElement(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.createElement(View, {
+      key: "week-" + week.weekIndex,
+      position: "relative"
+    }, /*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
+        key: dateISO,
+        "data-date": dateISO
+      }, dayCellStyles, !isCurrentMonth && otherMonthDayCellStyles, isDropTarget && dropTargetStyles, {
+        onClick: () => handleDateClick(dateISO),
+        onDoubleClick: () => handleDateDoubleClick(dateISO)
+      }, views.dayCell), /*#__PURE__*/React.createElement(View, Object.assign({}, dayNumberStyles, isToday && todayDayNumberStyles, isSelected && !isToday && selectedDayNumberStyles, {
+        style: {
+          cursor: 'pointer'
+        }
+      }, views.dayNumber), dateNum));
+    })), week.segments.length > 0 && (/*#__PURE__*/React.createElement(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.createElement(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.createElement(View, {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         width: "100%"
-      }, event.title, isMultiDay && " (" + event.duration + "d)"), /*#__PURE__*/React.createElement(ResizeHandle, {
+      }, event.title), showLeftHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
-      }), /*#__PURE__*/React.createElement(ResizeHandle, {
+      })), showRightHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "right",
         onMouseDown: e => handleResizeStart(e, event, 'right')
-      }));
-    })));
+      })));
+    }))));
   }))));
   // Render week view
   var renderWeekView = () => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayHeaderStyles, views.weekdayHeader), calendarDates.map((dateISO, index) => {
@@ -8670,7 +8731,7 @@ var Calendar = _ref2 => {
       alignItems: "center",
       padding: 8,
       gap: 4
-    }, views.weekdayLabel), /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles$1, isToday && todayDayNumberStyles, {
+    }, views.weekdayLabel), /*#__PURE__*/React.createElement(View, Object.assign({}, weekdayLabelStyles), DAY_NAMES[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles, isToday && todayDayNumberStyles, {
       fontSize: 16,
       fontWeight: isToday ? 500 : 400
     }), dateNum));
@@ -8688,14 +8749,14 @@ var Calendar = _ref2 => {
     }, 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.createElement(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.createElement(View, Object.assign({
         key: event.id,
         position: "relative"
@@ -8703,8 +8764,12 @@ var Calendar = _ref2 => {
         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.createElement(View, {
         overflow: "hidden",
@@ -8823,509 +8888,6 @@ var Calendar = _ref2 => {
   }, 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] = useState(false);
-  return /*#__PURE__*/React.createElement(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
-  } = useTheme();
-  var weekGridRef = useRef(null);
-  var [selectedDate, setSelectedDate] = useState(null);
-  var [localEvents, setLocalEvents] = useState(events);
-  var [dropTargetDays, setDropTargetDays] = useState([]);
-  var dragStateRef = 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.useEffect(() => {
-    setLocalEvents(events);
-  }, [events]);
-  // Layout events
-  var {
-    items: positionedEvents
-  } = useMemo(() => layoutEvents$1(localEvents, startDate), [localEvents, startDate]);
-  // Get day index from mouse X position
-  var getDayFromMouseX = 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 = useCallback(dateISO => {
-    setSelectedDate(dateISO);
-    onDateClick == null || onDateClick(dateISO);
-  }, [onDateClick]);
-  // Handle mouse down on event (start dragging)
-  var handleEventMouseDown = 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 = 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 = 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 = 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.useEffect(() => {
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [handleMouseMove, handleMouseUp]);
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, containerStyles$1, {
-    width: width,
-    maxWidth: maxWidth
-  }, views.container), /*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
-      key: dayIdx
-    }, dayColumnStyles, isDropTarget && dropTargetStyles$1, {
-      borderRight: dayIdx === 6 ? 'none' : '1px solid'
-    }, views.dayColumn), /*#__PURE__*/React.createElement(View, Object.assign({}, dayHeaderStyles, views.dayHeader), /*#__PURE__*/React.createElement(View, Object.assign({}, dayNameStyles, views.dayName), DAY_NAMES$1[dayOfWeek]), /*#__PURE__*/React.createElement(View, Object.assign({}, dayDateStyles, isToday && todayDateStyles, isSelected && !isToday && selectedDateStyles, {
-      onClick: () => handleDateClick(dateISO)
-    }, views.dayDate), dateNum)), /*#__PURE__*/React.createElement(View, Object.assign({}, eventsAreaStyles$1, views.eventsArea)));
-  }), /*#__PURE__*/React.createElement(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.createElement(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.createElement(View, {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      width: "100%"
-    }, event.title), /*#__PURE__*/React.createElement(ResizeHandle$1, {
-      direction: "left",
-      onMouseDown: e => handleResizeMouseDown(e, event, 'left')
-    }), /*#__PURE__*/React.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
@@ -19966,6 +19528,404 @@ NavigationMenu.Trigger = NavigationMenuTrigger;
 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
+  } = 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.createElement(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.createElement(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.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
+  } = useTheme();
+  var themes = getThemes$2();
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    alignItems: "center",
+    gap: 8,
+    role: "status-indicator"
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(View, Object.assign({
+    role: "status-dot",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%"
+  }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React.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.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.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
+  } = 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.createElement(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.createElement(Vertical, Object.assign({
+      key: objective.id
+    }, theme.objectiveCard, views == null ? void 0 : views.objectiveCard), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      flexWrap: "wrap",
+      gap: 16
+    }, views == null ? void 0 : views.objectiveHeader), /*#__PURE__*/React.createElement(Vertical, {
+      gap: 10,
+      minWidth: 240
+    }, /*#__PURE__*/React.createElement(Text, Object.assign({
+      size: "lg",
+      weight: "semiBold"
+    }, views == null ? void 0 : views.objectiveTitle), objective.title), objective.description && (/*#__PURE__*/React.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.createElement(Horizontal, Object.assign({
+      gap: 8,
+      flexWrap: "wrap"
+    }, views == null ? void 0 : views.objectiveTags), objective.tags.map(tag => (/*#__PURE__*/React.createElement(View, Object.assign({
+      key: tag
+    }, theme.tag, views == null ? void 0 : views.tag), /*#__PURE__*/React.createElement(Text, Object.assign({
+      size: "xs",
+      weight: "medium",
+      color: tagTextColor
+    }, views == null ? void 0 : views.tagText), tag)))))) : null), /*#__PURE__*/React.createElement(Vertical, Object.assign({
+      gap: 8,
+      alignItems: "flex-end",
+      minWidth: 160
+    }, views == null ? void 0 : views.objectiveMeta), objective.owner && (/*#__PURE__*/React.createElement(Text, Object.assign({
+      size: "sm",
+      color: secondaryTextColor
+    }, views == null ? void 0 : views.objectiveOwner), "Owner: ", objective.owner)), objective.timeframe && (/*#__PURE__*/React.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.createElement(Vertical, Object.assign({
+      gap: 8
+    }, views == null ? void 0 : views.objectiveProgressSection), /*#__PURE__*/React.createElement(Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Text, Object.assign({
+      size: "sm",
+      color: secondaryTextColor
+    }, views == null ? void 0 : views.objectiveProgressLabel), "Progress"), /*#__PURE__*/React.createElement(Text, Object.assign({
+      size: "sm",
+      weight: "semiBold"
+    }, views == null ? void 0 : views.objectiveProgressValue), formatPercentage(objectiveProgress))), /*#__PURE__*/React.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.createElement(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.createElement(Vertical, {
+        key: keyResult.id,
+        gap: 12
+      }, /*#__PURE__*/React.createElement(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.createElement(Horizontal, Object.assign({
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flexWrap: "wrap",
+        gap: 16
+      }, views == null ? void 0 : views.keyResultHeader), /*#__PURE__*/React.createElement(Vertical, {
+        gap: 8,
+        minWidth: 220
+      }, /*#__PURE__*/React.createElement(Text, Object.assign({
+        size: "md",
+        weight: "medium"
+      }, views == null ? void 0 : views.keyResultTitle), keyResult.title), keyResult.description && (/*#__PURE__*/React.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.createElement(Horizontal, Object.assign({
+        gap: 12,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.keyResultMeta), keyResult.metric && (/*#__PURE__*/React.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Metric: ", keyResult.metric)), keyResult.current && (/*#__PURE__*/React.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Current: ", keyResult.current)), keyResult.target && (/*#__PURE__*/React.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Target: ", keyResult.target)), keyResult.confidence && (/*#__PURE__*/React.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Confidence:", ' ', formatConfidence(keyResult.confidence))), keyResult.lastUpdated && (/*#__PURE__*/React.createElement(Text, {
+        size: "xs",
+        color: subtleTextColor
+      }, "Updated: ", keyResult.lastUpdated)))), (_keyResult$tags = keyResult.tags) != null && _keyResult$tags.length ? (/*#__PURE__*/React.createElement(Horizontal, Object.assign({
+        gap: 8,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.keyResultTags), keyResult.tags.map(tag => (/*#__PURE__*/React.createElement(View, Object.assign({
+        key: tag
+      }, theme.tag, views == null ? void 0 : views.keyResultTag), /*#__PURE__*/React.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "medium",
+        color: tagTextColor
+      }, views == null ? void 0 : views.keyResultTagText), tag)))))) : null), /*#__PURE__*/React.createElement(Vertical, {
+        gap: 8,
+        alignItems: "flex-end"
+      }, keyResult.owner && (/*#__PURE__*/React.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.createElement(Horizontal, Object.assign({
+        alignItems: "center",
+        gap: 12
+      }, views == null ? void 0 : views.keyResultProgressSection), /*#__PURE__*/React.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.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.keyResultProgressValue), formatPercentage(progress))), keyResultFooter ? (/*#__PURE__*/React.createElement(View, Object.assign({}, views == null ? void 0 : views.footer), keyResultFooter)) : null), showDivider ? /*#__PURE__*/React.createElement(View, Object.assign({}, theme.divider)) : null);
+    })), objectiveFooter ? (/*#__PURE__*/React.createElement(View, Object.assign({}, views == null ? void 0 : views.footer), objectiveFooter)) : null);
+  }));
+};
+
+var OKR = props => /*#__PURE__*/React.createElement(OKRView, Object.assign({}, props));
+
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
 var TableContext = /*#__PURE__*/createContext({
@@ -20748,7 +20708,7 @@ var HighlightStyles = {
   })
 };
 
-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
  */
@@ -20762,7 +20722,7 @@ var TypewriterEffect = _ref => {
       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
@@ -20829,7 +20789,7 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-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, '\\$&');
 }
@@ -20851,7 +20811,7 @@ var TitleView = _ref => {
       highlightTypewriter: propHighlightTypewriter = false,
       highlightTypewriterDuration = 3000
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     ref,
     inView
@@ -21126,7 +21086,7 @@ var getToggleVariants = (color, isLight) => ({
   }
 });
 
-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 {
@@ -21146,7 +21106,7 @@ var ToggleView = _ref => {
       // 2nd candidate for main color
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   /* theme helpers */
   var {
     getColor,
@@ -21190,7 +21150,7 @@ var ToggleView = _ref => {
   }, 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 {
@@ -21202,7 +21162,7 @@ var ToggleComponent = _ref => {
       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,
@@ -21537,7 +21497,7 @@ var DropdownMenuItemStates = {
   }
 };
 
-var _excluded$$ = ["children", "views"],
+var _excluded$11 = ["children", "views"],
   _excluded2$f = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
@@ -21578,7 +21538,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     isOpen,
     setIsOpen,
@@ -21831,7 +21791,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-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.
  */
@@ -21846,7 +21806,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -22260,7 +22220,7 @@ var DefaultColorPalette$1 = [
   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
@@ -22295,7 +22255,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     getColor
   } = useTheme();
@@ -24625,7 +24585,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-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
@@ -24663,7 +24623,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = useTheme();
@@ -24852,7 +24812,7 @@ var MenubarItemStates = {
   }
 };
 
-var _excluded$13 = ["children", "orientation", "size", "variant", "views"];
+var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/createContext({
   activeMenuId: null,
@@ -24889,7 +24849,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
   var Container = orientation === 'horizontal' ? Horizontal : Vertical;
   return /*#__PURE__*/React.createElement(Container, Object.assign({
     role: "menubar",
@@ -25209,7 +25169,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-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.
  */
@@ -25223,7 +25183,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -25405,7 +25365,7 @@ var DisabledButtonStyles = {
   }
 };
 
-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,
@@ -25436,7 +25396,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -25555,7 +25515,7 @@ var PaginationView = _ref => {
   }, 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.
  */
@@ -25576,7 +25536,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -25600,55 +25560,6 @@ var PaginationComponent = _ref => {
 };
 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
-  } = 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.createElement(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.createElement(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.createElement(ProgressBarView, Object.assign({}, props)));
-var ProgressBar = ProgressBarComponent;
-
 /**
  * Separator Styles
  *
@@ -25702,7 +25613,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-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',
@@ -25714,7 +25625,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -25782,7 +25693,7 @@ var SeparatorComponent = props => {
 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,
@@ -25805,7 +25716,7 @@ var ShareButtonView = _ref => {
       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.createElement(ShareIcon, {
     widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -25907,14 +25818,14 @@ var useShareButton = props => {
   };
 };
 
-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.createElement(ShareButtonView, Object.assign({}, viewProps, {
     isSupported: isSupported,
     isSharing: isSharing,
@@ -25923,82 +25834,6 @@ var ShareButtonComponent = props => {
 };
 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
-  } = useTheme();
-  var themes = getThemes$2();
-  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    alignItems: "center",
-    gap: 8,
-    role: "status-indicator"
-  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React.createElement(View, Object.assign({
-    role: "status-dot",
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%"
-  }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React.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.createElement(StatusIndicatorView, Object.assign({}, props)));
-
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
     defaultExpanded = true;
@@ -37631,5 +37466,5 @@ var AgentEval = props => {
   return /*#__PURE__*/React.createElement(AgentEvalView, Object.assign({}, props, evalState));
 };
 
-export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CalendarWeek, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, AgentChat, AgentEval, AgentSession, AgentTrace, Alert, ArrowIcon, AspectRatio, AttachmentIcon, AttachmentPreview, AudioIcon, AudioInput, AudioWaveform, Avatar, Background, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, Calendar, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, ChatInput, CheckIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ColorInput, ColorPicker, ComboBox, Command, ContextMenu, CookieConsent, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DragHandleLinesIcon, DropdownMenu, DustBinIcon, EditIcon, EmojiPicker, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, Flow, FolderIcon, FormikChatInput, FormikCheckbox, FormikColorInput, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTagInput, FormikTextArea, FormikTextField, FormikUploader, GiftIcon, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, KanbanBoard, LikeIcon, Link, LinkedinIcon, Loader, LoadingSpinnerIcon, LocationIcon, LockIcon, LogoutIcon, MagicWandIcon, MediaPreview, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OKR, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PowerOffIcon, PrintIcon, ProfileIcon, ProgressBar, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, SendIcon, Separator, SettingsIcon, ShapeIcon, ShareButton, ShareIcon, ShieldIcon, Sidebar, Slider, SliderIcon, SpinnerIcon, StarIcon, StatusIndicator, StopIcon, SuccessIcon, Switch, Table, Tabs, TagInput, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Title, Toast, Toggle, ToggleGroup, Tooltip, TrashIcon, Tree, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, showToast, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map