@app-studio/web 0.9.35 → 0.9.37

package/dist/web.umd.development.js

@@ -7569,7 +7569,12 @@
   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);
@@ -7646,11 +7651,16 @@
           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,
@@ -7709,6 +7719,62 @@
         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,
@@ -7718,7 +7784,11 @@
       onColumnDragOver: handleColumnDragOver,
       onCardDragOver: handleCardDragOver,
       onColumnDrop: handleColumnDrop,
-      onCardDrop: handleCardDrop
+      onCardDrop: handleCardDrop,
+      onCardCreate: handleCardCreate,
+      onCardDelete: handleCardDelete,
+      onCardTitleChange: handleCardTitleChange,
+      onCardDescriptionChange: handleCardDescriptionChange
     };
   };
 
@@ -7736,18 +7806,94 @@
       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",
@@ -7771,27 +7917,21 @@
     }, 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({
@@ -7811,7 +7951,35 @@
         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 => {
@@ -8238,11 +8406,111 @@
     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",
@@ -8267,7 +8535,7 @@
   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',
@@ -8279,11 +8547,14 @@
       onDateChange,
       onViewChange,
       onEventAdd,
+      onEventTitleChange,
+      onEventDescriptionChange,
+      onEventDelete,
       views = {},
       width = '100%',
       maxWidth = 1200,
       weekStartsOn = 0
-    } = _ref2;
+    } = _ref3;
     var {
       getColor
     } = appStudio.useTheme();
@@ -8310,6 +8581,31 @@
     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
@@ -8670,12 +8966,12 @@
           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, {
@@ -8736,12 +9032,12 @@
           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, {
@@ -8788,7 +9084,7 @@
         }, 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;
@@ -8801,7 +9097,12 @@
             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
+          }));
         })));
       }));
     };
@@ -19493,6 +19794,404 @@
   NavigationMenu.Content = NavigationMenuContent;
   NavigationMenu.Link = NavigationMenuLink;
 
+  var _excluded$X = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+  var ProgressBarView = _ref => {
+    var {
+        value = 0,
+        max = 100,
+        color = 'theme.primary',
+        backgroundColor = 'color.gray.200',
+        height = 8,
+        radius = 4,
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var currentMode = elementMode ? elementMode : themeMode;
+    var percentage = Math.min(100, Math.max(0, value / max * 100));
+    var trackColor = getColor(backgroundColor, {
+      themeMode: currentMode
+    });
+    var barColor = getColor(color, {
+      themeMode: currentMode
+    });
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      width: "100%",
+      height: height,
+      backgroundColor: trackColor,
+      borderRadius: radius,
+      overflow: "hidden"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      width: percentage + "%",
+      height: "100%",
+      backgroundColor: barColor,
+      borderRadius: radius
+    }, views == null ? void 0 : views.bar)));
+  };
+
+  /**
+   * ProgressBar component displays completion status of a task or process.
+   */
+  var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
+  var ProgressBar = ProgressBarComponent;
+
+  var getThemes$2 = themeMode => {
+    return {
+      default: {
+        indicator: {
+          backgroundColor: 'color.gray.400'
+        },
+        label: {
+          color: 'color.gray.700'
+        }
+      },
+      info: {
+        indicator: {
+          backgroundColor: 'color.blue.500'
+        },
+        label: {
+          color: 'color.blue.700'
+        }
+      },
+      success: {
+        indicator: {
+          backgroundColor: 'color.green.500'
+        },
+        label: {
+          color: 'color.green.700'
+        }
+      },
+      warning: {
+        indicator: {
+          backgroundColor: 'color.orange.500'
+        },
+        label: {
+          color: 'color.orange.700'
+        }
+      },
+      error: {
+        indicator: {
+          backgroundColor: 'color.red.500'
+        },
+        label: {
+          color: 'color.red.700'
+        }
+      }
+    };
+  };
+
+  var _excluded$Y = ["label", "status", "views", "themeMode"];
+  var StatusIndicatorView = _ref => {
+    var {
+        label,
+        status = 'default',
+        views,
+        themeMode: elementMode
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    var {
+      themeMode
+    } = appStudio.useTheme();
+    var themes = getThemes$2();
+    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      alignItems: "center",
+      gap: 8,
+      role: "status-indicator"
+    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      role: "status-dot",
+      width: "8px",
+      height: "8px",
+      borderRadius: "50%"
+    }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      role: "status-label",
+      fontSize: "14px",
+      lineHeight: "20px"
+    }, themes[status].label, views == null ? void 0 : views.label), label)));
+  };
+
+  var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
+
+  var getOKRTheme = mode => {
+    var isDark = mode === 'dark';
+    return {
+      container: {
+        width: '100%',
+        gap: 16
+      },
+      objectiveCard: {
+        backgroundColor: isDark ? 'rgba(15, 23, 42, 0.6)' : 'color.white',
+        borderColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderRadius: 16,
+        padding: 24,
+        gap: 20
+      },
+      tag: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '4px 10px',
+        borderRadius: 999,
+        backgroundColor: isDark ? 'rgba(148, 163, 184, 0.16)' : 'color.gray.100'
+      },
+      keyResultItem: {
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: isDark ? 'rgba(148, 163, 184, 0.18)' : 'color.gray.200',
+        backgroundColor: isDark ? 'rgba(15, 23, 42, 0.35)' : 'color.gray.50',
+        gap: 12
+      },
+      divider: {
+        height: 1,
+        backgroundColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+        width: '100%'
+      }
+    };
+  };
+  var STATUS_METADATA = {
+    notStarted: {
+      indicator: 'info',
+      label: 'Not started'
+    },
+    onTrack: {
+      indicator: 'success',
+      label: 'On track'
+    },
+    atRisk: {
+      indicator: 'warning',
+      label: 'At risk'
+    },
+    offTrack: {
+      indicator: 'error',
+      label: 'Off track'
+    },
+    achieved: {
+      indicator: 'success',
+      label: 'Achieved'
+    }
+  };
+  var deriveStatusFromProgress = progress => {
+    if (progress >= 100) {
+      return 'achieved';
+    }
+    if (progress >= 70) {
+      return 'onTrack';
+    }
+    if (progress >= 40) {
+      return 'atRisk';
+    }
+    if (progress > 0) {
+      return 'offTrack';
+    }
+    return 'notStarted';
+  };
+  var clampProgress = value => {
+    if (typeof value !== 'number' || Number.isNaN(value)) {
+      return 0;
+    }
+    return Math.max(0, Math.min(100, Math.round(value)));
+  };
+
+  var formatPercentage = value => value + "%";
+  var formatConfidence = confidence => {
+    if (!confidence) {
+      return undefined;
+    }
+    return confidence.charAt(0).toUpperCase() + confidence.slice(1);
+  };
+  var getObjectiveProgress = objective => {
+    if (typeof objective.progress === 'number') {
+      return clampProgress(objective.progress);
+    }
+    if (!objective.keyResults.length) {
+      return 0;
+    }
+    var total = objective.keyResults.reduce((acc, keyResult) => {
+      var _keyResult$progress;
+      return acc + ((_keyResult$progress = keyResult.progress) != null ? _keyResult$progress : 0);
+    }, 0);
+    return clampProgress(total / objective.keyResults.length);
+  };
+  var renderStatusIndicator = (status, themeMode, views) => {
+    var metadata = STATUS_METADATA[status];
+    return /*#__PURE__*/React__default.createElement(StatusIndicator, {
+      themeMode: themeMode,
+      status: metadata.indicator,
+      label: metadata.label,
+      views: views
+    });
+  };
+  var OKRView = _ref => {
+    var {
+      objectives,
+      themeMode: elementMode,
+      views,
+      onKeyResultClick,
+      renderObjectiveFooter,
+      renderKeyResultFooter
+    } = _ref;
+    var {
+      themeMode
+    } = appStudio.useTheme();
+    var currentMode = elementMode || themeMode || 'light';
+    var theme = getOKRTheme(currentMode);
+    var secondaryTextColor = currentMode === 'dark' ? 'color.gray.200' : 'color.gray.600';
+    var subtleTextColor = currentMode === 'dark' ? 'color.gray.300' : 'color.gray.500';
+    var tagTextColor = currentMode === 'dark' ? 'color.gray.100' : 'color.gray.700';
+    return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({}, theme.container, views == null ? void 0 : views.container), objectives.map(objective => {
+      var _objective$status, _objective$tags, _views$objectiveProgr, _views$objectiveProgr2, _views$objectiveProgr3, _views$objectiveProgr4;
+      var objectiveProgress = getObjectiveProgress(objective);
+      var objectiveStatus = (_objective$status = objective.status) != null ? _objective$status : deriveStatusFromProgress(objectiveProgress);
+      var objectiveFooter = renderObjectiveFooter == null ? void 0 : renderObjectiveFooter(objective);
+      return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        key: objective.id
+      }, theme.objectiveCard, views == null ? void 0 : views.objectiveCard), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flexWrap: "wrap",
+        gap: 16
+      }, views == null ? void 0 : views.objectiveHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        gap: 10,
+        minWidth: 240
+      }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "lg",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.objectiveTitle), objective.title), objective.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveDescription), objective.description)), (_objective$tags = objective.tags) != null && _objective$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        gap: 8,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.objectiveTags), objective.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: tag
+      }, theme.tag, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "medium",
+        color: tagTextColor
+      }, views == null ? void 0 : views.tagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 8,
+        alignItems: "flex-end",
+        minWidth: 160
+      }, views == null ? void 0 : views.objectiveMeta), objective.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveOwner), "Owner: ", objective.owner)), objective.timeframe && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: subtleTextColor
+      }, views == null ? void 0 : views.objectiveTimeframe), objective.timeframe)), renderStatusIndicator(objectiveStatus, currentMode, views == null ? void 0 : views.objectiveStatus))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 8
+      }, views == null ? void 0 : views.objectiveProgressSection), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+        justifyContent: "space-between",
+        alignItems: "center"
+      }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.objectiveProgressLabel), "Progress"), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.objectiveProgressValue), formatPercentage(objectiveProgress))), /*#__PURE__*/React__default.createElement(ProgressBar, {
+        value: objectiveProgress,
+        max: 100,
+        views: {
+          container: Object.assign({
+            width: '100%'
+          }, (_views$objectiveProgr = views == null || (_views$objectiveProgr2 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr2.container) != null ? _views$objectiveProgr : {}),
+          bar: Object.assign({}, (_views$objectiveProgr3 = views == null || (_views$objectiveProgr4 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr4.bar) != null ? _views$objectiveProgr3 : {})
+        }
+      })), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        gap: 16
+      }, views == null ? void 0 : views.keyResultList), objective.keyResults.map((keyResult, index) => {
+        var _keyResult$status, _keyResult$tags, _views$keyResultProgr, _views$keyResultProgr2, _views$keyResultProgr3, _views$keyResultProgr4;
+        var progress = clampProgress(keyResult.progress);
+        var keyResultStatus = (_keyResult$status = keyResult.status) != null ? _keyResult$status : deriveStatusFromProgress(progress);
+        var keyResultFooter = renderKeyResultFooter == null ? void 0 : renderKeyResultFooter(keyResult, objective);
+        var showDivider = index < objective.keyResults.length - 1;
+        return /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          key: keyResult.id,
+          gap: 12
+        }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+          role: onKeyResultClick ? 'button' : undefined,
+          cursor: onKeyResultClick ? 'pointer' : undefined,
+          onClick: onKeyResultClick ? () => onKeyResultClick(keyResult, objective) : undefined
+        }, theme.keyResultItem, views == null ? void 0 : views.keyResultItem), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          flexWrap: "wrap",
+          gap: 16
+        }, views == null ? void 0 : views.keyResultHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          gap: 8,
+          minWidth: 220
+        }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "md",
+          weight: "medium"
+        }, views == null ? void 0 : views.keyResultTitle), keyResult.title), keyResult.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "sm",
+          color: secondaryTextColor
+        }, views == null ? void 0 : views.keyResultDescription), keyResult.description)), (keyResult.metric || keyResult.target || keyResult.current || keyResult.confidence || keyResult.lastUpdated) && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          gap: 12,
+          flexWrap: "wrap"
+        }, views == null ? void 0 : views.keyResultMeta), keyResult.metric && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Metric: ", keyResult.metric)), keyResult.current && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Current: ", keyResult.current)), keyResult.target && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Target: ", keyResult.target)), keyResult.confidence && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: secondaryTextColor
+        }, "Confidence:", ' ', formatConfidence(keyResult.confidence))), keyResult.lastUpdated && (/*#__PURE__*/React__default.createElement(Text, {
+          size: "xs",
+          color: subtleTextColor
+        }, "Updated: ", keyResult.lastUpdated)))), (_keyResult$tags = keyResult.tags) != null && _keyResult$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          gap: 8,
+          flexWrap: "wrap"
+        }, views == null ? void 0 : views.keyResultTags), keyResult.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+          key: tag
+        }, theme.tag, views == null ? void 0 : views.keyResultTag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          weight: "medium",
+          color: tagTextColor
+        }, views == null ? void 0 : views.keyResultTagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+          gap: 8,
+          alignItems: "flex-end"
+        }, keyResult.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          color: secondaryTextColor
+        }, views == null ? void 0 : views.keyResultOwner), "Owner: ", keyResult.owner)), renderStatusIndicator(keyResultStatus, currentMode, views == null ? void 0 : views.keyResultStatus))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+          alignItems: "center",
+          gap: 12
+        }, views == null ? void 0 : views.keyResultProgressSection), /*#__PURE__*/React__default.createElement(ProgressBar, {
+          value: progress,
+          max: 100,
+          views: {
+            container: Object.assign({
+              width: '100%'
+            }, (_views$keyResultProgr = views == null || (_views$keyResultProgr2 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr2.container) != null ? _views$keyResultProgr : {}),
+            bar: Object.assign({}, (_views$keyResultProgr3 = views == null || (_views$keyResultProgr4 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr4.bar) != null ? _views$keyResultProgr3 : {})
+          }
+        }), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+          size: "xs",
+          weight: "semiBold"
+        }, views == null ? void 0 : views.keyResultProgressValue), formatPercentage(progress))), keyResultFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), keyResultFooter)) : null), showDivider ? /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, theme.divider)) : null);
+      })), objectiveFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), objectiveFooter)) : null);
+    }));
+  };
+
+  var OKR = props => /*#__PURE__*/React__default.createElement(OKRView, Object.assign({}, props));
+
   var defaultStyles = {};
   // Create a context that includes both styles and the onClick function
   var TableContext = /*#__PURE__*/React.createContext({
@@ -20275,7 +20974,7 @@
     })
   };
 
-  var _excluded$X = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+  var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
   /**
    * A component that creates a typewriter effect for text
    */
@@ -20289,7 +20988,7 @@
         cursorColor = 'currentColor',
         textStyle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
     // Convert text to array if it's a string
     var textArray = Array.isArray(text) ? text : [text];
     // State for the currently displayed text
@@ -20356,7 +21055,7 @@
     }))))));
   };
 
-  var _excluded$Y = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
+  var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
   function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
   }
@@ -20378,7 +21077,7 @@
         highlightTypewriter: propHighlightTypewriter = false,
         highlightTypewriterDuration = 3000
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
     var {
       ref,
       inView
@@ -20653,7 +21352,7 @@
     }
   });
 
-  var _excluded$Z = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+  var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
   var ToggleView = _ref => {
     var _ref2;
     var {
@@ -20673,7 +21372,7 @@
         // 2nd candidate for main color
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     /* theme helpers */
     var {
       getColor,
@@ -20717,7 +21416,7 @@
     }, props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$_ = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -20729,7 +21428,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -21064,7 +21763,7 @@
     }
   };
 
-  var _excluded$$ = ["children", "views"],
+  var _excluded$11 = ["children", "views"],
     _excluded2$f = ["items", "side", "align", "views"],
     _excluded3$9 = ["item", "views"],
     _excluded4$8 = ["views"],
@@ -21105,7 +21804,7 @@
         children,
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
     var {
       isOpen,
       setIsOpen,
@@ -21358,7 +22057,7 @@
     }));
   };
 
-  var _excluded$10 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+  var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
   /**
    * DropdownMenu component for displaying a menu when clicking on a trigger element.
    */
@@ -21373,7 +22072,7 @@
         defaultOpen = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
     var {
       isOpen,
       setIsOpen,
@@ -21787,7 +22486,7 @@
     category: 'neutral'
   }];
 
-  var _excluded$11 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+  var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
   var ColorPickerView = _ref => {
     var {
         // Basic props
@@ -21822,7 +22521,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
     var {
       getColor
     } = appStudio.useTheme();
@@ -24152,7 +24851,7 @@
     };
   };
 
-  var _excluded$12 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+  var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
   var EmojiPickerView = _ref => {
     var {
         // Basic props
@@ -24190,7 +24889,7 @@
         dropdownRef
         // Other props
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
     var {
       getColor
     } = appStudio.useTheme();
@@ -24379,7 +25078,7 @@
     }
   };
 
-  var _excluded$13 = ["children", "orientation", "size", "variant", "views"];
+  var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
   // Create context for the Menubar
   var MenubarContext = /*#__PURE__*/React.createContext({
     activeMenuId: null,
@@ -24416,7 +25115,7 @@
         variant = 'default',
         views
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
     var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
     return /*#__PURE__*/React__default.createElement(Container, Object.assign({
       role: "menubar",
@@ -24736,7 +25435,7 @@
     })))))));
   };
 
-  var _excluded$14 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+  var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
   /**
    * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
    */
@@ -24750,7 +25449,7 @@
         defaultOpenMenuId = null,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
     var {
       activeMenuId,
       setActiveMenuId,
@@ -24932,7 +25631,7 @@
     }
   };
 
-  var _excluded$15 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+  var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
   var PaginationView = _ref => {
     var {
         currentPage,
@@ -24963,7 +25662,7 @@
         visiblePageNumbers,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
     var handlePageChange = page => {
       if (page < 1 || page > totalPages || page === currentPage) {
         return;
@@ -25082,7 +25781,7 @@
     }, option.label))))));
   };
 
-  var _excluded$16 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+  var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
   /**
    * Pagination component for navigating through pages of content.
    */
@@ -25103,7 +25802,7 @@
         shape = 'rounded',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
     var {
       visiblePageNumbers
     } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -25127,55 +25826,6 @@
   };
   var Pagination = PaginationComponent;
 
-  var _excluded$17 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
-  var ProgressBarView = _ref => {
-    var {
-        value = 0,
-        max = 100,
-        color = 'theme.primary',
-        backgroundColor = 'color.gray.200',
-        height = 8,
-        radius = 4,
-        views,
-        themeMode: elementMode
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
-    var {
-      getColor,
-      themeMode
-    } = appStudio.useTheme();
-    var currentMode = elementMode ? elementMode : themeMode;
-    var percentage = Math.min(100, Math.max(0, value / max * 100));
-    var trackColor = getColor(backgroundColor, {
-      themeMode: currentMode
-    });
-    var barColor = getColor(color, {
-      themeMode: currentMode
-    });
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      width: "100%",
-      height: height,
-      backgroundColor: trackColor,
-      borderRadius: radius,
-      overflow: "hidden"
-    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      width: percentage + "%",
-      height: "100%",
-      backgroundColor: barColor,
-      borderRadius: radius
-    }, views == null ? void 0 : views.bar)));
-  };
-
-  /**
-   * ProgressBar component displays completion status of a task or process.
-   */
-  var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
-  var ProgressBar = ProgressBarComponent;
-
   /**
    * Separator Styles
    *
@@ -25229,7 +25879,7 @@
     }
   };
 
-  var _excluded$18 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+  var _excluded$19 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
   var SeparatorView = _ref => {
     var {
         orientation = 'horizontal',
@@ -25241,7 +25891,7 @@
         decorative = false,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
     // Access theme if needed for future enhancements
     var {
       themeMode
@@ -25309,7 +25959,7 @@
   var Separator = SeparatorComponent;
   var Divider = SeparatorComponent;
 
-  var _excluded$19 = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+  var _excluded$1a = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
   var ICON_SIZE_MAP = {
     xs: 12,
     sm: 14,
@@ -25332,7 +25982,7 @@
         iconPosition,
         disableWhenUnsupported = true
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
     var resolvedSize = size != null ? size : 'md';
     var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
       widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -25434,14 +26084,14 @@
     };
   };
 
-  var _excluded$1a = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+  var _excluded$1b = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
   var ShareButtonComponent = props => {
     var {
       isSupported,
       isSharing,
       handleShare
     } = useShareButton(props);
-    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1a);
+    var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1b);
     return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
       isSupported: isSupported,
       isSharing: isSharing,
@@ -25450,82 +26100,6 @@
   };
   var ShareButton = ShareButtonComponent;
 
-  var getThemes$2 = themeMode => {
-    return {
-      default: {
-        indicator: {
-          backgroundColor: 'color.gray.400'
-        },
-        label: {
-          color: 'color.gray.700'
-        }
-      },
-      info: {
-        indicator: {
-          backgroundColor: 'color.blue.500'
-        },
-        label: {
-          color: 'color.blue.700'
-        }
-      },
-      success: {
-        indicator: {
-          backgroundColor: 'color.green.500'
-        },
-        label: {
-          color: 'color.green.700'
-        }
-      },
-      warning: {
-        indicator: {
-          backgroundColor: 'color.orange.500'
-        },
-        label: {
-          color: 'color.orange.700'
-        }
-      },
-      error: {
-        indicator: {
-          backgroundColor: 'color.red.500'
-        },
-        label: {
-          color: 'color.red.700'
-        }
-      }
-    };
-  };
-
-  var _excluded$1b = ["label", "status", "views", "themeMode"];
-  var StatusIndicatorView = _ref => {
-    var {
-        label,
-        status = 'default',
-        views,
-        themeMode: elementMode
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
-    var {
-      themeMode
-    } = appStudio.useTheme();
-    var themes = getThemes$2();
-    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-      alignItems: "center",
-      gap: 8,
-      role: "status-indicator"
-    }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      role: "status-dot",
-      width: "8px",
-      height: "8px",
-      borderRadius: "50%"
-    }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-      role: "status-label",
-      fontSize: "14px",
-      lineHeight: "20px"
-    }, themes[status].label, views == null ? void 0 : views.label), label)));
-  };
-
-  var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
-
   var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
     if (defaultExpanded === void 0) {
       defaultExpanded = true;
@@ -37271,6 +37845,7 @@
   exports.MoonIcon = MoonIcon;
   exports.NavigationMenu = NavigationMenu;
   exports.NotificationIcon = NotificationIcon;
+  exports.OKR = OKR;
   exports.OTPInput = OTPInput;
   exports.OpenEyeIcon = OpenEyeIcon;
   exports.Pagination = Pagination;