@app-studio/web 0.9.35 → 0.9.36

package/dist/web.cjs.development.js

@@ -19535,6 +19535,404 @@ NavigationMenu.Trigger = NavigationMenuTrigger;
 NavigationMenu.Content = NavigationMenuContent;
 NavigationMenu.Link = NavigationMenuLink;
 
+var _excluded$X = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
+var ProgressBarView = _ref => {
+  var {
+      value = 0,
+      max = 100,
+      color = 'theme.primary',
+      backgroundColor = 'color.gray.200',
+      height = 8,
+      radius = 4,
+      views,
+      themeMode: elementMode
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  var currentMode = elementMode ? elementMode : themeMode;
+  var percentage = Math.min(100, Math.max(0, value / max * 100));
+  var trackColor = getColor(backgroundColor, {
+    themeMode: currentMode
+  });
+  var barColor = getColor(color, {
+    themeMode: currentMode
+  });
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    width: "100%",
+    height: height,
+    backgroundColor: trackColor,
+    borderRadius: radius,
+    overflow: "hidden"
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    width: percentage + "%",
+    height: "100%",
+    backgroundColor: barColor,
+    borderRadius: radius
+  }, views == null ? void 0 : views.bar)));
+};
+
+/**
+ * ProgressBar component displays completion status of a task or process.
+ */
+var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
+var ProgressBar = ProgressBarComponent;
+
+var getThemes$2 = themeMode => {
+  return {
+    default: {
+      indicator: {
+        backgroundColor: 'color.gray.400'
+      },
+      label: {
+        color: 'color.gray.700'
+      }
+    },
+    info: {
+      indicator: {
+        backgroundColor: 'color.blue.500'
+      },
+      label: {
+        color: 'color.blue.700'
+      }
+    },
+    success: {
+      indicator: {
+        backgroundColor: 'color.green.500'
+      },
+      label: {
+        color: 'color.green.700'
+      }
+    },
+    warning: {
+      indicator: {
+        backgroundColor: 'color.orange.500'
+      },
+      label: {
+        color: 'color.orange.700'
+      }
+    },
+    error: {
+      indicator: {
+        backgroundColor: 'color.red.500'
+      },
+      label: {
+        color: 'color.red.700'
+      }
+    }
+  };
+};
+
+var _excluded$Y = ["label", "status", "views", "themeMode"];
+var StatusIndicatorView = _ref => {
+  var {
+      label,
+      status = 'default',
+      views,
+      themeMode: elementMode
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+  var {
+    themeMode
+  } = appStudio.useTheme();
+  var themes = getThemes$2();
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    alignItems: "center",
+    gap: 8,
+    role: "status-indicator"
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    role: "status-dot",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%"
+  }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+    role: "status-label",
+    fontSize: "14px",
+    lineHeight: "20px"
+  }, themes[status].label, views == null ? void 0 : views.label), label)));
+};
+
+var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
+
+var getOKRTheme = mode => {
+  var isDark = mode === 'dark';
+  return {
+    container: {
+      width: '100%',
+      gap: 16
+    },
+    objectiveCard: {
+      backgroundColor: isDark ? 'rgba(15, 23, 42, 0.6)' : 'color.white',
+      borderColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderRadius: 16,
+      padding: 24,
+      gap: 20
+    },
+    tag: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '4px 10px',
+      borderRadius: 999,
+      backgroundColor: isDark ? 'rgba(148, 163, 184, 0.16)' : 'color.gray.100'
+    },
+    keyResultItem: {
+      padding: 16,
+      borderRadius: 12,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: isDark ? 'rgba(148, 163, 184, 0.18)' : 'color.gray.200',
+      backgroundColor: isDark ? 'rgba(15, 23, 42, 0.35)' : 'color.gray.50',
+      gap: 12
+    },
+    divider: {
+      height: 1,
+      backgroundColor: isDark ? 'rgba(148, 163, 184, 0.24)' : 'color.gray.200',
+      width: '100%'
+    }
+  };
+};
+var STATUS_METADATA = {
+  notStarted: {
+    indicator: 'info',
+    label: 'Not started'
+  },
+  onTrack: {
+    indicator: 'success',
+    label: 'On track'
+  },
+  atRisk: {
+    indicator: 'warning',
+    label: 'At risk'
+  },
+  offTrack: {
+    indicator: 'error',
+    label: 'Off track'
+  },
+  achieved: {
+    indicator: 'success',
+    label: 'Achieved'
+  }
+};
+var deriveStatusFromProgress = progress => {
+  if (progress >= 100) {
+    return 'achieved';
+  }
+  if (progress >= 70) {
+    return 'onTrack';
+  }
+  if (progress >= 40) {
+    return 'atRisk';
+  }
+  if (progress > 0) {
+    return 'offTrack';
+  }
+  return 'notStarted';
+};
+var clampProgress = value => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(100, Math.round(value)));
+};
+
+var formatPercentage = value => value + "%";
+var formatConfidence = confidence => {
+  if (!confidence) {
+    return undefined;
+  }
+  return confidence.charAt(0).toUpperCase() + confidence.slice(1);
+};
+var getObjectiveProgress = objective => {
+  if (typeof objective.progress === 'number') {
+    return clampProgress(objective.progress);
+  }
+  if (!objective.keyResults.length) {
+    return 0;
+  }
+  var total = objective.keyResults.reduce((acc, keyResult) => {
+    var _keyResult$progress;
+    return acc + ((_keyResult$progress = keyResult.progress) != null ? _keyResult$progress : 0);
+  }, 0);
+  return clampProgress(total / objective.keyResults.length);
+};
+var renderStatusIndicator = (status, themeMode, views) => {
+  var metadata = STATUS_METADATA[status];
+  return /*#__PURE__*/React__default.createElement(StatusIndicator, {
+    themeMode: themeMode,
+    status: metadata.indicator,
+    label: metadata.label,
+    views: views
+  });
+};
+var OKRView = _ref => {
+  var {
+    objectives,
+    themeMode: elementMode,
+    views,
+    onKeyResultClick,
+    renderObjectiveFooter,
+    renderKeyResultFooter
+  } = _ref;
+  var {
+    themeMode
+  } = appStudio.useTheme();
+  var currentMode = elementMode || themeMode || 'light';
+  var theme = getOKRTheme(currentMode);
+  var secondaryTextColor = currentMode === 'dark' ? 'color.gray.200' : 'color.gray.600';
+  var subtleTextColor = currentMode === 'dark' ? 'color.gray.300' : 'color.gray.500';
+  var tagTextColor = currentMode === 'dark' ? 'color.gray.100' : 'color.gray.700';
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({}, theme.container, views == null ? void 0 : views.container), objectives.map(objective => {
+    var _objective$status, _objective$tags, _views$objectiveProgr, _views$objectiveProgr2, _views$objectiveProgr3, _views$objectiveProgr4;
+    var objectiveProgress = getObjectiveProgress(objective);
+    var objectiveStatus = (_objective$status = objective.status) != null ? _objective$status : deriveStatusFromProgress(objectiveProgress);
+    var objectiveFooter = renderObjectiveFooter == null ? void 0 : renderObjectiveFooter(objective);
+    return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+      key: objective.id
+    }, theme.objectiveCard, views == null ? void 0 : views.objectiveCard), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      flexWrap: "wrap",
+      gap: 16
+    }, views == null ? void 0 : views.objectiveHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+      gap: 10,
+      minWidth: 240
+    }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "lg",
+      weight: "semiBold"
+    }, views == null ? void 0 : views.objectiveTitle), objective.title), objective.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "sm",
+      color: secondaryTextColor
+    }, views == null ? void 0 : views.objectiveDescription), objective.description)), (_objective$tags = objective.tags) != null && _objective$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+      gap: 8,
+      flexWrap: "wrap"
+    }, views == null ? void 0 : views.objectiveTags), objective.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      key: tag
+    }, theme.tag, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "xs",
+      weight: "medium",
+      color: tagTextColor
+    }, views == null ? void 0 : views.tagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+      gap: 8,
+      alignItems: "flex-end",
+      minWidth: 160
+    }, views == null ? void 0 : views.objectiveMeta), objective.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "sm",
+      color: secondaryTextColor
+    }, views == null ? void 0 : views.objectiveOwner), "Owner: ", objective.owner)), objective.timeframe && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "sm",
+      color: subtleTextColor
+    }, views == null ? void 0 : views.objectiveTimeframe), objective.timeframe)), renderStatusIndicator(objectiveStatus, currentMode, views == null ? void 0 : views.objectiveStatus))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+      gap: 8
+    }, views == null ? void 0 : views.objectiveProgressSection), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "sm",
+      color: secondaryTextColor
+    }, views == null ? void 0 : views.objectiveProgressLabel), "Progress"), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      size: "sm",
+      weight: "semiBold"
+    }, views == null ? void 0 : views.objectiveProgressValue), formatPercentage(objectiveProgress))), /*#__PURE__*/React__default.createElement(ProgressBar, {
+      value: objectiveProgress,
+      max: 100,
+      views: {
+        container: Object.assign({
+          width: '100%'
+        }, (_views$objectiveProgr = views == null || (_views$objectiveProgr2 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr2.container) != null ? _views$objectiveProgr : {}),
+        bar: Object.assign({}, (_views$objectiveProgr3 = views == null || (_views$objectiveProgr4 = views.objectiveProgressBar) == null ? void 0 : _views$objectiveProgr4.bar) != null ? _views$objectiveProgr3 : {})
+      }
+    })), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+      gap: 16
+    }, views == null ? void 0 : views.keyResultList), objective.keyResults.map((keyResult, index) => {
+      var _keyResult$status, _keyResult$tags, _views$keyResultProgr, _views$keyResultProgr2, _views$keyResultProgr3, _views$keyResultProgr4;
+      var progress = clampProgress(keyResult.progress);
+      var keyResultStatus = (_keyResult$status = keyResult.status) != null ? _keyResult$status : deriveStatusFromProgress(progress);
+      var keyResultFooter = renderKeyResultFooter == null ? void 0 : renderKeyResultFooter(keyResult, objective);
+      var showDivider = index < objective.keyResults.length - 1;
+      return /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        key: keyResult.id,
+        gap: 12
+      }, /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+        role: onKeyResultClick ? 'button' : undefined,
+        cursor: onKeyResultClick ? 'pointer' : undefined,
+        onClick: onKeyResultClick ? () => onKeyResultClick(keyResult, objective) : undefined
+      }, theme.keyResultItem, views == null ? void 0 : views.keyResultItem), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        flexWrap: "wrap",
+        gap: 16
+      }, views == null ? void 0 : views.keyResultHeader), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        gap: 8,
+        minWidth: 220
+      }, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "md",
+        weight: "medium"
+      }, views == null ? void 0 : views.keyResultTitle), keyResult.title), keyResult.description && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "sm",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.keyResultDescription), keyResult.description)), (keyResult.metric || keyResult.target || keyResult.current || keyResult.confidence || keyResult.lastUpdated) && (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        gap: 12,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.keyResultMeta), keyResult.metric && (/*#__PURE__*/React__default.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Metric: ", keyResult.metric)), keyResult.current && (/*#__PURE__*/React__default.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Current: ", keyResult.current)), keyResult.target && (/*#__PURE__*/React__default.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Target: ", keyResult.target)), keyResult.confidence && (/*#__PURE__*/React__default.createElement(Text, {
+        size: "xs",
+        color: secondaryTextColor
+      }, "Confidence:", ' ', formatConfidence(keyResult.confidence))), keyResult.lastUpdated && (/*#__PURE__*/React__default.createElement(Text, {
+        size: "xs",
+        color: subtleTextColor
+      }, "Updated: ", keyResult.lastUpdated)))), (_keyResult$tags = keyResult.tags) != null && _keyResult$tags.length ? (/*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        gap: 8,
+        flexWrap: "wrap"
+      }, views == null ? void 0 : views.keyResultTags), keyResult.tags.map(tag => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: tag
+      }, theme.tag, views == null ? void 0 : views.keyResultTag), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "medium",
+        color: tagTextColor
+      }, views == null ? void 0 : views.keyResultTagText), tag)))))) : null), /*#__PURE__*/React__default.createElement(appStudio.Vertical, {
+        gap: 8,
+        alignItems: "flex-end"
+      }, keyResult.owner && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "xs",
+        color: secondaryTextColor
+      }, views == null ? void 0 : views.keyResultOwner), "Owner: ", keyResult.owner)), renderStatusIndicator(keyResultStatus, currentMode, views == null ? void 0 : views.keyResultStatus))), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        alignItems: "center",
+        gap: 12
+      }, views == null ? void 0 : views.keyResultProgressSection), /*#__PURE__*/React__default.createElement(ProgressBar, {
+        value: progress,
+        max: 100,
+        views: {
+          container: Object.assign({
+            width: '100%'
+          }, (_views$keyResultProgr = views == null || (_views$keyResultProgr2 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr2.container) != null ? _views$keyResultProgr : {}),
+          bar: Object.assign({}, (_views$keyResultProgr3 = views == null || (_views$keyResultProgr4 = views.keyResultProgressBar) == null ? void 0 : _views$keyResultProgr4.bar) != null ? _views$keyResultProgr3 : {})
+        }
+      }), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+        size: "xs",
+        weight: "semiBold"
+      }, views == null ? void 0 : views.keyResultProgressValue), formatPercentage(progress))), keyResultFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), keyResultFooter)) : null), showDivider ? /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, theme.divider)) : null);
+    })), objectiveFooter ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.footer), objectiveFooter)) : null);
+  }));
+};
+
+var OKR = props => /*#__PURE__*/React__default.createElement(OKRView, Object.assign({}, props));
+
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
 var TableContext = /*#__PURE__*/React.createContext({
@@ -20317,7 +20715,7 @@ var HighlightStyles = {
   })
 };
 
-var _excluded$X = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
+var _excluded$Z = ["text", "typingSpeed", "pauseTime", "onComplete", "showCursor", "cursorColor", "textStyle", "as"];
 /**
  * A component that creates a typewriter effect for text
  */
@@ -20331,7 +20729,7 @@ var TypewriterEffect = _ref => {
       cursorColor = 'currentColor',
       textStyle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$X);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
   // Convert text to array if it's a string
   var textArray = Array.isArray(text) ? text : [text];
   // State for the currently displayed text
@@ -20398,7 +20796,7 @@ var TypewriterEffect = _ref => {
   }))))));
 };
 
-var _excluded$Y = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
+var _excluded$_ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "responsive", "centered", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration"];
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\\]\\/g, '\\$&');
 }
@@ -20420,7 +20818,7 @@ var TitleView = _ref => {
       highlightTypewriter: propHighlightTypewriter = false,
       highlightTypewriterDuration = 3000
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
   var {
     ref,
     inView
@@ -20695,7 +21093,7 @@ var getToggleVariants = (color, isLight) => ({
   }
 });
 
-var _excluded$Z = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
+var _excluded$$ = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views", "backgroundColor", "color", "themeMode"];
 var ToggleView = _ref => {
   var _ref2;
   var {
@@ -20715,7 +21113,7 @@ var ToggleView = _ref => {
       // 2nd candidate for main color
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$Z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   /* theme helpers */
   var {
     getColor,
@@ -20759,7 +21157,7 @@ var ToggleView = _ref => {
   }, props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$_ = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$10 = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -20771,7 +21169,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$_);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -21106,7 +21504,7 @@ var DropdownMenuItemStates = {
   }
 };
 
-var _excluded$$ = ["children", "views"],
+var _excluded$11 = ["children", "views"],
   _excluded2$f = ["items", "side", "align", "views"],
   _excluded3$9 = ["item", "views"],
   _excluded4$8 = ["views"],
@@ -21147,7 +21545,7 @@ var DropdownMenuTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$$);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$11);
   var {
     isOpen,
     setIsOpen,
@@ -21400,7 +21798,7 @@ var DropdownMenuView = _ref6 => {
   }));
 };
 
-var _excluded$10 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+var _excluded$12 = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
 /**
  * DropdownMenu component for displaying a menu when clicking on a trigger element.
  */
@@ -21415,7 +21813,7 @@ var DropdownMenuComponent = _ref => {
       defaultOpen = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$10);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
   var {
     isOpen,
     setIsOpen,
@@ -21829,7 +22227,7 @@ var DefaultColorPalette$1 = [
   category: 'neutral'
 }];
 
-var _excluded$11 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
+var _excluded$13 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "predefinedColors", "showCustomInput", "showRecentColors", "isOpen", "selectedColor", "recentColors", "customColor", "handleToggle", "handleColorSelect", "handleCustomColorChange", "handleCustomColorSubmit", "triggerRef", "dropdownRef"];
 var ColorPickerView = _ref => {
   var {
       // Basic props
@@ -21864,7 +22262,7 @@ var ColorPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$11);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$13);
   var {
     getColor
   } = appStudio.useTheme();
@@ -24194,7 +24592,7 @@ var useEmojiPickerState = props => {
   };
 };
 
-var _excluded$12 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
+var _excluded$14 = ["id", "name", "label", "placeholder", "helperText", "views", "size", "shape", "variant", "error", "isDisabled", "isReadOnly", "showSearch", "showCategories", "showRecentEmojis", "enabledCategories", "isOpen", "selectedEmoji", "recentEmojis", "searchQuery", "activeCategory", "filteredEmojis", "handleToggle", "handleEmojiSelect", "handleSearchChange", "handleCategoryChange", "triggerRef", "dropdownRef"];
 var EmojiPickerView = _ref => {
   var {
       // Basic props
@@ -24232,7 +24630,7 @@ var EmojiPickerView = _ref => {
       dropdownRef
       // Other props
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$12);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
   var {
     getColor
   } = appStudio.useTheme();
@@ -24421,7 +24819,7 @@ var MenubarItemStates = {
   }
 };
 
-var _excluded$13 = ["children", "orientation", "size", "variant", "views"];
+var _excluded$15 = ["children", "orientation", "size", "variant", "views"];
 // Create context for the Menubar
 var MenubarContext = /*#__PURE__*/React.createContext({
   activeMenuId: null,
@@ -24458,7 +24856,7 @@ var MenubarRoot = _ref2 => {
       variant = 'default',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$13);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$15);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     role: "menubar",
@@ -24778,7 +25176,7 @@ var MenubarView = _ref8 => {
   })))))));
 };
 
-var _excluded$14 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
+var _excluded$16 = ["items", "orientation", "size", "variant", "defaultActiveMenuId", "defaultOpenMenuId", "views"];
 /**
  * Menubar component for creating horizontal or vertical menu bars with dropdown menus.
  */
@@ -24792,7 +25190,7 @@ var MenubarComponent = _ref => {
       defaultOpenMenuId = null,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$14);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
   var {
     activeMenuId,
     setActiveMenuId,
@@ -24974,7 +25372,7 @@ var DisabledButtonStyles = {
   }
 };
 
-var _excluded$15 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
+var _excluded$17 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "visiblePageNumbers", "views"];
 var PaginationView = _ref => {
   var {
       currentPage,
@@ -25005,7 +25403,7 @@ var PaginationView = _ref => {
       visiblePageNumbers,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$15);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
   var handlePageChange = page => {
     if (page < 1 || page > totalPages || page === currentPage) {
       return;
@@ -25124,7 +25522,7 @@ var PaginationView = _ref => {
   }, option.label))))));
 };
 
-var _excluded$16 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
+var _excluded$18 = ["currentPage", "totalPages", "onPageChange", "pageSize", "pageSizeOptions", "onPageSizeChange", "showPageSizeSelector", "showPageInfo", "maxPageButtons", "showFirstLastButtons", "size", "variant", "shape", "views"];
 /**
  * Pagination component for navigating through pages of content.
  */
@@ -25145,7 +25543,7 @@ var PaginationComponent = _ref => {
       shape = 'rounded',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$16);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
   var {
     visiblePageNumbers
   } = usePaginationState(currentPage, totalPages, maxPageButtons);
@@ -25169,55 +25567,6 @@ var PaginationComponent = _ref => {
 };
 var Pagination = PaginationComponent;
 
-var _excluded$17 = ["value", "max", "color", "backgroundColor", "height", "radius", "views", "themeMode"];
-var ProgressBarView = _ref => {
-  var {
-      value = 0,
-      max = 100,
-      color = 'theme.primary',
-      backgroundColor = 'color.gray.200',
-      height = 8,
-      radius = 4,
-      views,
-      themeMode: elementMode
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$17);
-  var {
-    getColor,
-    themeMode
-  } = appStudio.useTheme();
-  var currentMode = elementMode ? elementMode : themeMode;
-  var percentage = Math.min(100, Math.max(0, value / max * 100));
-  var trackColor = getColor(backgroundColor, {
-    themeMode: currentMode
-  });
-  var barColor = getColor(color, {
-    themeMode: currentMode
-  });
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    role: "progressbar",
-    "aria-valuenow": value,
-    "aria-valuemin": 0,
-    "aria-valuemax": max,
-    width: "100%",
-    height: height,
-    backgroundColor: trackColor,
-    borderRadius: radius,
-    overflow: "hidden"
-  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    width: percentage + "%",
-    height: "100%",
-    backgroundColor: barColor,
-    borderRadius: radius
-  }, views == null ? void 0 : views.bar)));
-};
-
-/**
- * ProgressBar component displays completion status of a task or process.
- */
-var ProgressBarComponent = props => (/*#__PURE__*/React__default.createElement(ProgressBarView, Object.assign({}, props)));
-var ProgressBar = ProgressBarComponent;
-
 /**
  * Separator Styles
  *
@@ -25271,7 +25620,7 @@ var DefaultSeparatorStyles = {
   }
 };
 
-var _excluded$18 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
+var _excluded$19 = ["orientation", "variant", "thickness", "color", "spacing", "label", "decorative", "views", "themeMode"];
 var SeparatorView = _ref => {
   var {
       orientation = 'horizontal',
@@ -25283,7 +25632,7 @@ var SeparatorView = _ref => {
       decorative = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$18);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$19);
   // Access theme if needed for future enhancements
   var {
     themeMode
@@ -25351,7 +25700,7 @@ var SeparatorComponent = props => {
 var Separator = SeparatorComponent;
 var Divider = SeparatorComponent;
 
-var _excluded$19 = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
+var _excluded$1a = ["isSupported", "isSharing", "onShare", "label", "children", "icon", "size", "isDisabled", "isLoading", "iconPosition", "disableWhenUnsupported"];
 var ICON_SIZE_MAP = {
   xs: 12,
   sm: 14,
@@ -25374,7 +25723,7 @@ var ShareButtonView = _ref => {
       iconPosition,
       disableWhenUnsupported = true
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$19);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1a);
   var resolvedSize = size != null ? size : 'md';
   var resolvedIcon = icon != null ? icon : (/*#__PURE__*/React__default.createElement(ShareIcon, {
     widthHeight: ICON_SIZE_MAP[resolvedSize],
@@ -25476,14 +25825,14 @@ var useShareButton = props => {
   };
 };
 
-var _excluded$1a = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
+var _excluded$1b = ["shareData", "onShareStart", "onShareSuccess", "onShareCancel", "onShareError", "onUnsupported", "onClick"];
 var ShareButtonComponent = props => {
   var {
     isSupported,
     isSharing,
     handleShare
   } = useShareButton(props);
-  var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1a);
+  var viewProps = _objectWithoutPropertiesLoose(props, _excluded$1b);
   return /*#__PURE__*/React__default.createElement(ShareButtonView, Object.assign({}, viewProps, {
     isSupported: isSupported,
     isSharing: isSharing,
@@ -25492,82 +25841,6 @@ var ShareButtonComponent = props => {
 };
 var ShareButton = ShareButtonComponent;
 
-var getThemes$2 = themeMode => {
-  return {
-    default: {
-      indicator: {
-        backgroundColor: 'color.gray.400'
-      },
-      label: {
-        color: 'color.gray.700'
-      }
-    },
-    info: {
-      indicator: {
-        backgroundColor: 'color.blue.500'
-      },
-      label: {
-        color: 'color.blue.700'
-      }
-    },
-    success: {
-      indicator: {
-        backgroundColor: 'color.green.500'
-      },
-      label: {
-        color: 'color.green.700'
-      }
-    },
-    warning: {
-      indicator: {
-        backgroundColor: 'color.orange.500'
-      },
-      label: {
-        color: 'color.orange.700'
-      }
-    },
-    error: {
-      indicator: {
-        backgroundColor: 'color.red.500'
-      },
-      label: {
-        color: 'color.red.700'
-      }
-    }
-  };
-};
-
-var _excluded$1b = ["label", "status", "views", "themeMode"];
-var StatusIndicatorView = _ref => {
-  var {
-      label,
-      status = 'default',
-      views,
-      themeMode: elementMode
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1b);
-  var {
-    themeMode
-  } = appStudio.useTheme();
-  var themes = getThemes$2();
-  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
-    alignItems: "center",
-    gap: 8,
-    role: "status-indicator"
-  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    role: "status-dot",
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%"
-  }, themes[status].indicator, views == null ? void 0 : views.indicator)), label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
-    role: "status-label",
-    fontSize: "14px",
-    lineHeight: "20px"
-  }, themes[status].label, views == null ? void 0 : views.label), label)));
-};
-
-var StatusIndicator = props => (/*#__PURE__*/React__default.createElement(StatusIndicatorView, Object.assign({}, props)));
-
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
     defaultExpanded = true;
@@ -37313,6 +37586,7 @@ exports.Modal = Modal;
 exports.MoonIcon = MoonIcon;
 exports.NavigationMenu = NavigationMenu;
 exports.NotificationIcon = NotificationIcon;
+exports.OKR = OKR;
 exports.OTPInput = OTPInput;
 exports.OpenEyeIcon = OpenEyeIcon;
 exports.Pagination = Pagination;