@app-studio/web 0.9.35 → 0.9.37

package/dist/web.cjs.development.js

@@ -7611,7 +7611,12 @@ var cloneColumns = inputColumns => inputColumns.map(column => Object.assign({},
 var useKanbanBoardState = _ref => {
   var {
     columns: initialColumns,
-    onChange
+    onChange,
+    onCardMove,
+    onCardCreate: onCardCreateProp,
+    onCardDelete: onCardDeleteProp,
+    onCardTitleChange: onCardTitleChangeProp,
+    onCardDescriptionChange: onCardDescriptionChangeProp
   } = _ref;
   var [columns, setColumns] = React.useState(initialColumns);
   var [draggedCardId, setDraggedCardId] = React.useState(null);
@@ -7688,11 +7693,16 @@ var useKanbanBoardState = _ref => {
         cardId
       };
       if (options != null && options.shouldCommit) {
+        var originalSourceColumn = prevColumns.find(c => c.id === sourceColumnId);
+        var originalTargetColumn = prevColumns.find(c => c.id === targetColumnId);
+        if (card && originalSourceColumn && originalTargetColumn) {
+          onCardMove == null || onCardMove(card, originalSourceColumn, originalTargetColumn);
+        }
         onChange == null || onChange(updatedColumns);
       }
       return updatedColumns;
     });
-  }, [onChange]);
+  }, [onChange, onCardMove]);
   var handleCardDragStart = React.useCallback((columnId, cardId, event) => {
     dragStateRef.current = {
       columnId,
@@ -7751,6 +7761,62 @@ var useKanbanBoardState = _ref => {
       shouldCommit: true
     });
   }, [applyMove, getRelativeDropPosition]);
+  var handleCardCreate = React.useCallback((card, column) => {
+    if (onCardCreateProp) {
+      onCardCreateProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: [...col.cards, card]
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardCreateProp]);
+  var handleCardDelete = React.useCallback((card, column) => {
+    if (onCardDeleteProp) {
+      onCardDeleteProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.filter(c => c.id !== card.id)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDeleteProp]);
+  var handleCardTitleChange = React.useCallback((card, column, newTitle) => {
+    if (onCardTitleChangeProp) {
+      onCardTitleChangeProp(card, column, newTitle);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          title: newTitle
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardTitleChangeProp]);
+  var handleCardDescriptionChange = React.useCallback((card, column, newDescription) => {
+    if (onCardDescriptionChangeProp) {
+      onCardDescriptionChangeProp(card, column, newDescription);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          description: newDescription
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDescriptionChangeProp]);
   return {
     columns,
     draggedCardId,
@@ -7760,7 +7826,11 @@ var useKanbanBoardState = _ref => {
     onColumnDragOver: handleColumnDragOver,
     onCardDragOver: handleCardDragOver,
     onColumnDrop: handleColumnDrop,
-    onCardDrop: handleCardDrop
+    onCardDrop: handleCardDrop,
+    onCardCreate: handleCardCreate,
+    onCardDelete: handleCardDelete,
+    onCardTitleChange: handleCardTitleChange,
+    onCardDescriptionChange: handleCardDescriptionChange
   };
 };
 
@@ -7778,18 +7848,94 @@ var KanbanBoardView = _ref => {
     onColumnDragOver,
     onCardDragOver,
     onColumnDrop,
-    onCardDrop
+    onCardDrop,
+    onCardCreate,
+    onCardDelete,
+    onCardTitleChange,
+    onCardDescriptionChange
   } = _ref;
-  var renderDefaultCard = React__default.useCallback(card => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+  var [editingCardId, setEditingCardId] = React__default.useState(null);
+  var [editingDescriptionCardId, setEditingDescriptionCardId] = React__default.useState(null);
+  var [editedTitle, setEditedTitle] = React__default.useState('');
+  var [editedDescription, setEditedDescription] = React__default.useState('');
+  var handleTitleClick = React__default.useCallback(card => {
+    setEditingCardId(card.id);
+    setEditedTitle(card.title);
+  }, []);
+  var handleDescriptionClick = React__default.useCallback(card => {
+    setEditingDescriptionCardId(card.id);
+    setEditedDescription(card.description || '');
+  }, []);
+  var handleTitleChange = React__default.useCallback(event => {
+    setEditedTitle(event.target.value);
+  }, []);
+  var handleDescriptionChange = React__default.useCallback(event => {
+    setEditedDescription(event.target.value);
+  }, []);
+  var handleTitleBlur = React__default.useCallback((card, column) => {
+    if (editingCardId === card.id) {
+      onCardTitleChange == null || onCardTitleChange(card, column, editedTitle);
+      setEditingCardId(null);
+    }
+  }, [editingCardId, editedTitle, onCardTitleChange]);
+  var handleDescriptionBlur = React__default.useCallback((card, column) => {
+    if (editingDescriptionCardId === card.id) {
+      onCardDescriptionChange == null || onCardDescriptionChange(card, column, editedDescription);
+      setEditingDescriptionCardId(null);
+    }
+  }, [editingDescriptionCardId, editedDescription, onCardDescriptionChange]);
+  var handleTitleKeyDown = React__default.useCallback((event, card, column) => {
+    if (event.key === 'Enter') {
+      handleTitleBlur(card, column);
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = React__default.useCallback((event, card, column) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleDescriptionBlur(card, column);
+    }
+  }, [handleDescriptionBlur]);
+  var renderDefaultCard = React__default.useCallback((card, column) => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     gap: 4,
     alignItems: "flex-start"
-  }, views == null ? void 0 : views.cardContent), /*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.cardContent), editingCardId === card.id ? (/*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: () => handleTitleBlur(card, column),
+    onKeyDown: event => handleTitleKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      fontWeight: '600',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(Text, {
     weight: "semiBold",
-    size: "sm"
-  }, card.title), card.description && (/*#__PURE__*/React__default.createElement(Text, {
     size: "sm",
-    color: "#475467"
-  }, card.description)))), [views == null ? void 0 : views.cardContent]);
+    onClick: () => handleTitleClick(card)
+  }, card.title)), card.description && (editingDescriptionCardId === card.id ? (/*#__PURE__*/React__default.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: () => handleDescriptionBlur(card, column),
+    onKeyDown: event => handleDescriptionKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      width: '100%',
+      minHeight: '60px'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(Text, {
+    size: "sm",
+    color: "#475467",
+    onClick: () => handleDescriptionClick(card)
+  }, card.description))))), [views == null ? void 0 : views.cardContent, editingCardId, editedTitle, editingDescriptionCardId, editedDescription, handleTitleBlur, handleTitleChange, handleTitleClick, handleTitleKeyDown, handleDescriptionBlur, handleDescriptionChange, handleDescriptionClick, handleDescriptionKeyDown]);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     alignItems: "flex-start",
@@ -7813,27 +7959,21 @@ var KanbanBoardView = _ref => {
   }, views == null ? void 0 : views.columnHeader), renderColumnHeader ? renderColumnHeader(column) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     weight: "semiBold",
     size: "md"
-  }, views == null ? void 0 : views.columnTitle), column.title))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+  }, views == null ? void 0 : views.columnTitle), column.title)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }, /*#__PURE__*/React__default.createElement(PlusIcon, {
+    widthHeight: 16
+  }))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     gap: 12,
     minHeight: 40,
     onDragOver: event => onColumnDragOver(column.id, event),
     onDrop: event => onColumnDrop(column.id, event),
     opacity: draggedCardId && hoveredColumnId === column.id ? 0.9 : undefined,
     transition: "all 0.15s ease-in-out"
-  }, views == null ? void 0 : views.columnBody), column.cards.length === 0 && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    padding: 12,
-    borderWidth: "1px",
-    borderStyle: "dashed",
-    borderColor: "#d0d5dd",
-    borderRadius: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.6)",
-    textAlign: "center",
-    color: "#667085",
-    fontSize: "14px"
-  }, views == null ? void 0 : views.emptyState), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React__default.createElement(Text, {
-    size: "sm",
-    color: "#667085"
-  }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+  }, views == null ? void 0 : views.columnBody), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
     key: card.id,
     position: "relative"
   }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -7853,7 +7993,35 @@ var KanbanBoardView = _ref => {
       event.stopPropagation();
       onCardDrop(column.id, card.id, event);
     }
-  }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card)))))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
+  }, views == null ? void 0 : views.card), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+    flexGrow: 1
+  }, renderCard ? renderCard(card, column) : renderDefaultCard(card, column)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    onClick: () => onCardDelete == null ? void 0 : onCardDelete(card, column)
+  }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+    widthHeight: 16
+  }))))))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    padding: 12,
+    borderWidth: "1px",
+    borderStyle: "dashed",
+    borderColor: "#d0d5dd",
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.6)",
+    textAlign: "center",
+    color: "#667085",
+    fontSize: "14px"
+  }, views == null ? void 0 : views.emptyState, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React__default.createElement(Text, {
+    size: "sm",
+    color: "#667085"
+  }, "Create a new card")))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
 };
 
 var KanbanBoardComponent = props => {
@@ -8280,11 +8448,111 @@ var iconButtonStyles = {
   border: 'none'
 };
 
-var ResizeHandle = _ref => {
+var EventContent = _ref => {
+  var {
+    event,
+    onTitleChange,
+    onDescriptionChange,
+    onEventDelete
+  } = _ref;
+  var [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  var [editedTitle, setEditedTitle] = React.useState(event.title);
+  var [isEditingDescription, setIsEditingDescription] = React.useState(false);
+  var [editedDescription, setEditedDescription] = React.useState(event.description || '');
+  var handleTitleClick = React.useCallback(() => {
+    setIsEditingTitle(true);
+    setEditedTitle(event.title);
+  }, [event.title]);
+  var handleDescriptionClick = React.useCallback(() => {
+    setIsEditingDescription(true);
+    setEditedDescription(event.description || '');
+  }, [event.description]);
+  var handleTitleChange = React.useCallback(e => {
+    setEditedTitle(e.target.value);
+  }, []);
+  var handleDescriptionChange = React.useCallback(e => {
+    setEditedDescription(e.target.value);
+  }, []);
+  var handleTitleBlur = React.useCallback(() => {
+    if (isEditingTitle) {
+      onTitleChange(event, editedTitle);
+      setIsEditingTitle(false);
+    }
+  }, [isEditingTitle, onTitleChange, event, editedTitle]);
+  var handleDescriptionBlur = React.useCallback(() => {
+    if (isEditingDescription) {
+      onDescriptionChange(event, editedDescription);
+      setIsEditingDescription(false);
+    }
+  }, [isEditingDescription, onDescriptionChange, event, editedDescription]);
+  var handleTitleKeyDown = React.useCallback(e => {
+    if (e.key === 'Enter') {
+      handleTitleBlur();
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = React.useCallback(e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleDescriptionBlur();
+    }
+  }, [handleDescriptionBlur]);
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%",
+    justifyContent: "space-between"
+  }, isEditingTitle ? (/*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: handleTitleBlur,
+    onKeyDown: handleTitleKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      fontWeight: '500',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: 11,
+    fontWeight: 500,
+    onClick: handleTitleClick
+  }, event.title)), event.description && (isEditingDescription ? (/*#__PURE__*/React__default.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: handleDescriptionBlur,
+    onKeyDown: handleDescriptionKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      width: '100%',
+      minHeight: '40px',
+      marginTop: '4px'
+    }
+  })) : (/*#__PURE__*/React__default.createElement(appStudio.Text, {
+    fontSize: 11,
+    color: "color.gray.600",
+    onClick: handleDescriptionClick
+  }, event.description))), /*#__PURE__*/React__default.createElement(appStudio.Center, {
+    onClick: () => onEventDelete(event),
+    cursor: "pointer",
+    marginLeft: 4
+  }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+    widthHeight: 12
+  })));
+};
+var ResizeHandle = _ref2 => {
   var {
     direction,
     onMouseDown
-  } = _ref;
+  } = _ref2;
   var [isHovered, setIsHovered] = React.useState(false);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "absolute",
@@ -8309,7 +8577,7 @@ var ResizeHandle = _ref => {
 var MONTH_EVENT_ROW_HEIGHT = 22;
 var MONTH_EVENT_ROW_GAP = 4;
 var MONTH_EVENT_TOP_OFFSET = 32;
-var Calendar = _ref2 => {
+var Calendar = _ref3 => {
   var {
     initialDate = new Date(),
     initialView = 'month',
@@ -8321,11 +8589,14 @@ var Calendar = _ref2 => {
     onDateChange,
     onViewChange,
     onEventAdd,
+    onEventTitleChange,
+    onEventDescriptionChange,
+    onEventDelete,
     views = {},
     width = '100%',
     maxWidth = 1200,
     weekStartsOn = 0
-  } = _ref2;
+  } = _ref3;
   var {
     getColor
   } = appStudio.useTheme();
@@ -8352,6 +8623,31 @@ var Calendar = _ref2 => {
   React__default.useEffect(() => {
     setLocalEvents(events);
   }, [events]);
+  var handleEventTitleChange = React.useCallback((event, newTitle) => {
+    if (onEventTitleChange) {
+      onEventTitleChange(event, newTitle);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      title: newTitle
+    }) : ev));
+  }, [onEventTitleChange]);
+  var handleEventDescriptionChange = React.useCallback((event, newDescription) => {
+    if (onEventDescriptionChange) {
+      onEventDescriptionChange(event, newDescription);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      description: newDescription
+    }) : ev));
+  }, [onEventDescriptionChange]);
+  var handleEventDelete = React.useCallback(event => {
+    if (onEventDelete) {
+      onEventDelete(event);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.filter(ev => ev.id !== event.id));
+  }, [onEventDelete]);
   // Get the month start for current date
   var currentMonth = React.useMemo(() => getFirstDayOfMonth(currentDate), [currentDate]);
   // Generate calendar dates based on view
@@ -8712,12 +9008,12 @@ var Calendar = _ref2 => {
         top: event.segmentRow * (MONTH_EVENT_ROW_HEIGHT + MONTH_EVENT_ROW_GAP) + "px",
         onMouseDown: e => handleEventMouseDown(e, event),
         title: event.title
-      }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       })), showRightHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8778,12 +9074,12 @@ var Calendar = _ref2 => {
         userSelect: "none",
         onMouseDown: e => handleEventMouseDown(e, event),
         title: event.title
-      }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8830,7 +9126,7 @@ var Calendar = _ref2 => {
       }, views.timeSlot), dayEvents.filter(event => {
         // Simple check if event starts in this hour
         if (event.start.includes('T')) {
-          var eventHour = parseInt(event.start.split('T')[1].split(':')[0]);
+          var eventHour = parseInt(event.start.split('T').split(':'));
           return eventHour === hour;
         }
         return false;
@@ -8843,7 +9139,12 @@ var Calendar = _ref2 => {
           borderLeftColor: colorConfig.border,
           color: colorConfig.text,
           marginBottom: 4
-        }, views.event), event.title);
+        }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+          event: event,
+          onTitleChange: handleEventTitleChange,
+          onDescriptionChange: handleEventDescriptionChange,
+          onEventDelete: handleEventDelete
+        }));
       })));
     }));
   };
@@ -19535,6 +19836,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
+  } = 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({
@@ -20317,7 +21016,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
  */
@@ -20331,7 +21030,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
@@ -20398,7 +21097,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, '\\$&');
 }
@@ -20420,7 +21119,7 @@ var TitleView = _ref => {
       highlightTypewriter: propHighlightTypewriter = false,
       highlightTypewriterDuration = 3000
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     ref,
     inView
@@ -20695,7 +21394,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 {
@@ -20715,7 +21414,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,
@@ -20759,7 +21458,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 {
@@ -20771,7 +21470,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,
@@ -21106,7 +21805,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"],
@@ -21147,7 +21846,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     isOpen,
     setIsOpen,
@@ -21400,7 +22099,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.
  */
@@ -21415,7 +22114,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -21829,7 +22528,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
@@ -21864,7 +22563,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     getColor
   } = appStudio.useTheme();
@@ -24194,7 +24893,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
@@ -24232,7 +24931,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = appStudio.useTheme();
@@ -24421,7 +25120,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__*/React.createContext({
   activeMenuId: null,
@@ -24458,7 +25157,7 @@ var MenubarRoot = _ref2 => {
       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",
@@ -24778,7 +25477,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.
  */
@@ -24792,7 +25491,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -24974,7 +25673,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,
@@ -25005,7 +25704,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;
@@ -25124,7 +25823,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.
  */
@@ -25145,7 +25844,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -25169,55 +25868,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
-  } = 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
  *
@@ -25271,7 +25921,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',
@@ -25283,7 +25933,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
@@ -25351,7 +26001,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,
@@ -25374,7 +26024,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__default.createElement(ShareIcon, {
     widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -25476,14 +26126,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__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
     isSupported: isSupported,
     isSharing: isSharing,
@@ -25492,82 +26142,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
-  } = 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;
@@ -37313,6 +37887,7 @@ exports.Modal = Modal;
 exports.MoonIcon = MoonIcon;
 exports.NavigationMenu = NavigationMenu;
 exports.NotificationIcon = NotificationIcon;
+exports.OKR = OKR;
 exports.OTPInput = OTPInput;
 exports.OpenEyeIcon = OpenEyeIcon;
 exports.Pagination = Pagination;