@app-studio/web 0.9.35 → 0.9.36

package/dist/web.umd.development.js

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