@activecollab/components 2.0.130 → 2.0.131

package/dist/index.js

@@ -14625,7 +14625,7 @@
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
-  })(["", " ", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
+  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -14635,8 +14635,6 @@
     "letterSpacing": "0.02em"
   }, {
     "fontWeight": "400"
-  }, {
-    "resize": "none"
   }, {
     "borderColor": "var(--color-theme-500)"
   }, FontStyle, BoxSizingStyle, function (props) {
@@ -14659,158 +14657,10 @@
   }, function (props) {
     return !props.disabled && props.$invalid && props.$mode === "flat" && styled.css(["color:var(--red-alert);"]);
   });
-  var StyledTextAreaWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledTextAreaWrapper",
-    componentId: "sc-m6jqw8-1"
-  })(["", ""], {
-    "position": "relative",
-    "display": "flex",
-    "width": "fit-content"
-  });
-  var StyledProgressRingWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledProgressRingWrapper",
-    componentId: "sc-m6jqw8-2"
-  })(["", ""], {
-    "position": "absolute",
-    "bottom": "0.5rem",
-    "right": "0.5rem",
-    "display": "flex"
-  });
   StyledTextarea.displayName = "StyledTextarea";
-  StyledTextAreaWrapper.displayName = "StyledTextAreaWrapper";
-  StyledProgressRingWrapper.displayName = "StyledProgressRingWrapper";
 
-  var StyledWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledWrapper",
-    componentId: "sc-o6dcyu-0"
-  })(["position:relative;display:inline-flex;"]);
-  StyledWrapper.displayName = "StyledWrapper";
-  var StyledChildrenWrapper = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledChildrenWrapper",
-    componentId: "sc-o6dcyu-1"
-  })(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;"]);
-  StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
-  var StyledSvg = styled__default["default"].svg.withConfig({
-    displayName: "Styles__StyledSvg",
-    componentId: "sc-o6dcyu-2"
-  })(["transform:rotate(-90deg);"]);
-  StyledSvg.displayName = "StyledSvg";
-  var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
-    displayName: "Styles__StyledBackgroundCircle",
-    componentId: "sc-o6dcyu-3"
-  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", ""], function (props) {
-    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-transparent-300);"]);
-  }, function (props) {
-    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
-  });
-  StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
-  var StyledForegroundCircle = styled__default["default"].circle.withConfig({
-    displayName: "Styles__StyledForegroundCircle",
-    componentId: "sc-o6dcyu-4"
-  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", " ", ""], function (props) {
-    return props.$roundStroke && styled.css(["stroke-linecap:round;"]);
-  }, function (props) {
-    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-secondary);"]);
-  }, function (props) {
-    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
-  });
-  StyledForegroundCircle.displayName = "StyledForegroundCircle";
-  var StyledProgressRingPercentage = styled__default["default"].text.withConfig({
-    displayName: "Styles__StyledProgressRingPercentage",
-    componentId: "sc-o6dcyu-5"
-  })(["transform:rotate(90deg);", " ", ""], function (props) {
-    return props.$color ? styled.css(["fill:", ";"], props.$color) : styled.css(["fill:var(--color-secondary);"]);
-  }, function (props) {
-    return props.$fontSize ? styled.css(["font-size:", "px;"], props.$fontSize) : styled.css(["font-size:10px;"]);
-  });
-  StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
-
-  var _excluded$H = ["className", "children"];
-  var ProgressCircle = function ProgressCircle(_ref) {
-    var backgroundColor = _ref.backgroundColor,
-      progressColor = _ref.progressColor,
-      _ref$progress = _ref.progress,
-      progress = _ref$progress === void 0 ? 0 : _ref$progress,
-      _ref$radius = _ref.radius,
-      radius = _ref$radius === void 0 ? 20 : _ref$radius,
-      _ref$stroke = _ref.stroke,
-      stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
-      _ref$roundStroke = _ref.roundStroke,
-      roundStroke = _ref$roundStroke === void 0 ? false : _ref$roundStroke,
-      className = _ref.className,
-      _ref$showPercentage = _ref.showPercentage,
-      showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
-      fontSize = _ref.fontSize;
-    if (stroke > radius) {
-      console.warn("Stroke can not have value greater than the radius.");
-      stroke = radius;
-    }
-    var progressNumber = React.useMemo(function () {
-      var width = progress;
-      if (progress > 100) {
-        width = 100;
-      }
-      if (progress < 0) {
-        width = 0;
-      }
-      return width;
-    }, [progress]);
-    var normalizedRadius = React.useMemo(function () {
-      return radius - stroke / 2;
-    }, [radius, stroke]);
-    var circumference = React.useMemo(function () {
-      return normalizedRadius * 2 * Math.PI;
-    }, [normalizedRadius]);
-    var strokeDashoffsetOuter = React.useMemo(function () {
-      return circumference - (100 - progressNumber) / 100 * circumference;
-    }, [circumference, progressNumber]);
-    var strokeDashoffsetInner = React.useMemo(function () {
-      return circumference - progressNumber / 100 * circumference;
-    }, [circumference, progressNumber]);
-    return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
-      height: radius * 2,
-      width: radius * 2,
-      className: className
-    }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
-      $color: backgroundColor,
-      $strokeDashOffset: -strokeDashoffsetOuter,
-      strokeWidth: stroke,
-      strokeDasharray: "".concat(circumference, " ").concat(circumference),
-      r: normalizedRadius,
-      cx: radius,
-      cy: radius
-    }), /*#__PURE__*/React__default["default"].createElement(StyledForegroundCircle, {
-      $color: progressColor,
-      $strokeDashOffset: strokeDashoffsetInner,
-      strokeWidth: stroke,
-      strokeDasharray: "".concat(circumference, " ").concat(circumference),
-      $roundStroke: roundStroke,
-      r: normalizedRadius,
-      cx: radius,
-      cy: radius
-    }), showPercentage ? /*#__PURE__*/React__default["default"].createElement(StyledProgressRingPercentage, {
-      $color: progressColor,
-      $fontSize: fontSize,
-      x: "50%",
-      y: "-50%",
-      dominantBaseline: "central",
-      textAnchor: "middle"
-    }, progressNumber, "%") : null);
-  };
-  var ProgressRing = function ProgressRing(_ref2) {
-    var className = _ref2.className,
-      children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded$H);
-    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
-      className: classNames__default["default"](className),
-      "data-testid": "progress-ring"
-    }, /*#__PURE__*/React__default["default"].createElement(ProgressCircle, rest), children ? /*#__PURE__*/React__default["default"].createElement(StyledChildrenWrapper, null, children) : null);
-  };
-  ProgressRing.displayName = "ProgressRing";
-
-  var _excluded$G = ["className", "disabled", "invalid", "mode", "maxLength", "value", "hideProgress", "onChange"];
+  var _excluded$H = ["className", "disabled", "invalid", "mode"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _value$length;
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -14818,56 +14668,19 @@
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
-      maxLength = _ref.maxLength,
-      value = _ref.value,
-      _ref$hideProgress = _ref.hideProgress,
-      hideProgress = _ref$hideProgress === void 0 ? false : _ref$hideProgress,
-      onChange = _ref.onChange,
-      rest = _objectWithoutProperties(_ref, _excluded$G);
-    var innerRef = React.useRef(null);
-    var handleRef = useForkRef(ref, innerRef);
-    var _React$useState = React__default["default"].useState((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      currentLength = _React$useState2[0],
-      setCurrentLength = _React$useState2[1];
-    var warningGauge = React.useMemo(function () {
-      return 75 * Number(maxLength) / 100;
-    }, [maxLength]);
-    var progressColor = React.useMemo(function () {
-      if (currentLength >= Number(maxLength)) {
-        return "var(--red-alert)";
-      }
-      if (currentLength > warningGauge && currentLength < Number(maxLength)) {
-        return "var(--warning)";
-      }
-      return "var(--color-sucess-green)";
-    }, [currentLength, maxLength, warningGauge]);
-    var max = Number(maxLength !== null && maxLength !== void 0 ? maxLength : 1);
-    var progress = Math.min(currentLength / max * 100, 100);
-    var handleChange = function handleChange(e) {
-      setCurrentLength(e.target.value.length);
-      if (onChange) {
-        onChange(e);
-      }
-    };
-    return /*#__PURE__*/React__default["default"].createElement(StyledTextAreaWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
-      value: value,
+      rest = _objectWithoutProperties(_ref, _excluded$H);
+    return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
-      ref: handleRef,
+      ref: ref,
       $mode: mode,
       disabled: disabled,
       "aria-invalid": invalid,
       className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
-      }, className),
-      onChange: handleChange
-    })), maxLength && !hideProgress && /*#__PURE__*/React__default["default"].createElement(StyledProgressRingWrapper, null, /*#__PURE__*/React__default["default"].createElement(ProgressRing, {
-      progress: progress,
-      radius: 10,
-      stroke: 1.5,
-      progressColor: progressColor
-    })));
+      }, className)
+    }));
   });
+  Textarea.displayName = "Textarea";
 
   function createChainedFunction() {
     for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -14889,7 +14702,7 @@
     function () {});
   }
 
-  var _excluded$F = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
+  var _excluded$G = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
   var getHasTransition = function getHasTransition(children) {
     return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
   };
@@ -14909,7 +14722,7 @@
       defaultOpen = _ref$open === void 0 ? false : _ref$open,
       onClose = _ref.onClose,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$F);
+      rest = _objectWithoutProperties(_ref, _excluded$G);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -15050,7 +14863,7 @@
   });
   StyledCssTransition.displayName = "StyledCssTransition";
 
-  var _excluded$E = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
+  var _excluded$F = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       onClose = _ref.onClose,
@@ -15074,7 +14887,7 @@
       bodyClassName = _ref.bodyClassName,
       _ref$disableBackgroun2 = _ref.disableBackgroundClick,
       disableBackgroundClick = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-      rest = _objectWithoutProperties(_ref, _excluded$E);
+      rest = _objectWithoutProperties(_ref, _excluded$F);
     var _useState = React.useState(defaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -15167,13 +14980,13 @@
   });
   StyledHeader.displayName = "StyledHeader";
 
-  var _excluded$D = ["className", "size", "children"];
+  var _excluded$E = ["className", "size", "children"];
   var Header = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$D);
+      rest = _objectWithoutProperties(_ref, _excluded$E);
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
       className: classNames__default["default"]("c-header", className),
@@ -15189,7 +15002,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$C = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value", "mode"];
+  var _excluded$D = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value", "mode"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
       minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -15207,7 +15020,7 @@
       value = _ref.value,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
-      rest = _objectWithoutProperties(_ref, _excluded$C);
+      rest = _objectWithoutProperties(_ref, _excluded$D);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
       _useState2 = _slicedToArray(_useState, 2),
@@ -15484,7 +15297,7 @@
   });
   StyledChoose.displayName = "StyledChoose";
 
-  var _excluded$B = ["children", "disabled", "active", "className"];
+  var _excluded$C = ["children", "disabled", "active", "className"];
   /**
    * Choose component
    */
@@ -15495,7 +15308,7 @@
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$B);
+      args = _objectWithoutProperties(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
       className: classNames__default["default"]("c-choose", className),
@@ -15591,21 +15404,21 @@
   StyledLinkElements.displayName = "StyledLinkElements";
   StyledLink.displayName = "StyledLink";
 
-  var _excluded$A = ["children", "className"];
+  var _excluded$B = ["children", "className"];
   /**
    * Back link component
    */
   var BackLink = function BackLink(_ref) {
     var children = _ref.children,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$A);
+      args = _objectWithoutProperties(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
       className: classNames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
 
-  var _excluded$z = ["as", "children", "variant", "size", "disabled", "className"];
+  var _excluded$A = ["as", "children", "variant", "size", "disabled", "className"];
   /**
    * Link component
    */
@@ -15618,7 +15431,7 @@
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$z);
+      args = _objectWithoutProperties(_ref, _excluded$A);
     var Component = as || "a";
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       ref: ref,
@@ -15676,13 +15489,13 @@
   })(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
   StyledDialogActions.displayName = "StyledDialogActions";
 
-  var _excluded$y = ["className", "children"];
+  var _excluded$z = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogActions = function DialogActions(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
@@ -15691,13 +15504,13 @@
   };
   DialogActions.displayName = "DialogActions";
 
-  var _excluded$x = ["className", "children"];
+  var _excluded$y = ["className", "children"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogContent = function DialogContent(_ref) {
     var className = _ref.className,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$x);
+      rest = _objectWithoutProperties(_ref, _excluded$y);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
@@ -15718,7 +15531,7 @@
   };
   DialogContentDivider.displayName = "DialogContentDivider";
 
-  var _excluded$w = ["children", "className", "disableDefaultHeading"];
+  var _excluded$x = ["children", "className", "disableDefaultHeading"];
   // import { useDialogContext } from "./DialogContext";
 
   var DialogTitle = function DialogTitle(_ref) {
@@ -15726,7 +15539,7 @@
       className = _ref.className,
       _ref$disableDefaultHe = _ref.disableDefaultHeading,
       disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
-      rest = _objectWithoutProperties(_ref, _excluded$w);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
     // useDialogContext();
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
@@ -15735,7 +15548,7 @@
   };
   DialogTitle.displayName = "DialogTitle";
 
-  var _excluded$v = ["in", "children", "style", "timeout"];
+  var _excluded$w = ["in", "children", "style", "timeout"];
   var defaultStyle$2 = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in-out"),
@@ -15763,7 +15576,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -15778,7 +15591,7 @@
   };
   Fade.displayName = "Fade";
 
-  var _excluded$u = ["in", "children", "style", "timeout", "initialDirection"];
+  var _excluded$v = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
       inProp = _ref$in === void 0 ? false : _ref$in,
@@ -15788,7 +15601,7 @@
       timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       _ref$initialDirection = _ref.initialDirection,
       initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
     var directionSign;
     switch (initialDirection) {
       case "right":
@@ -15894,12 +15707,12 @@
     return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
   });
 
-  var _excluded$t = ["children", "direction"];
+  var _excluded$u = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
     var children = _ref.children,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
       classNames: "c-slide",
@@ -15942,7 +15755,7 @@
   };
   ResizeTransition.displayName = "ResizeTransition";
 
-  var _excluded$s = ["in", "children", "style", "timeout"];
+  var _excluded$t = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
       transition: "all ".concat(duration, "ms ease-in"),
@@ -15976,7 +15789,7 @@
       style = _ref.style,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       appear: true,
       in: inProp,
@@ -16026,7 +15839,7 @@
   };
   Scale.displayName = "Scale";
 
-  var _excluded$r = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
+  var _excluded$s = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
   var _Dialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$open = _ref.open,
@@ -16040,7 +15853,7 @@
       _ref$animate = _ref.animate,
       animate = _ref$animate === void 0 ? "slide" : _ref$animate,
       onClickOutside = _ref.onClickOutside,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
     var animateDialog = function animateDialog() {
       switch (animate) {
         case "fade":
@@ -16791,7 +16604,7 @@
   StyledToastMessage.displayName = "StyledToastMessage";
   StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
 
-  var _excluded$q = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
+  var _excluded$r = ["text", "type", "onClose", "dismissible", "dropShadow", "timeout"];
   var ToastMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       type = _ref.type,
@@ -16802,7 +16615,7 @@
       dropShadow = _ref$dropShadow === void 0 ? false : _ref$dropShadow,
       _ref$timeout = _ref.timeout,
       timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$r);
     var handleOnClose = React.useCallback(function () {
       if (typeof onClose === "function") {
         onClose();
@@ -16850,7 +16663,7 @@
   });
   StyledValueButton.displayName = "StyledValueButton";
 
-  var _excluded$p = ["active", "alwaysShowIcon", "icon", "label", "value"];
+  var _excluded$q = ["active", "alwaysShowIcon", "icon", "label", "value"];
   var ValueButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
@@ -16859,7 +16672,7 @@
       icon = _ref.icon,
       label = _ref.label,
       value = _ref.value,
-      args = _objectWithoutProperties(_ref, _excluded$p);
+      args = _objectWithoutProperties(_ref, _excluded$q);
     return /*#__PURE__*/React__default["default"].createElement(StyledValueButton, _extends({
       className: "c-value-button"
     }, args, {
@@ -16882,12 +16695,12 @@
   });
   ValueButton.displayName = "ValueButton";
 
-  var _excluded$o = ["children", "type"];
+  var _excluded$p = ["children", "type"];
   var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "button" : _ref$type,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      rest = _objectWithoutProperties(_ref, _excluded$p);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
       ref: ref,
       role: "button",
@@ -16941,7 +16754,7 @@
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
 
-  var _excluded$n = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
+  var _excluded$o = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
   var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       _ref$type = _ref.type,
@@ -16956,7 +16769,7 @@
       typographyProps = _ref.typographyProps,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
-      rest = _objectWithoutProperties(_ref, _excluded$n);
+      rest = _objectWithoutProperties(_ref, _excluded$o);
     var variant = React.useMemo(function () {
       if (size === "big") {
         return "Body 1";
@@ -16987,7 +16800,7 @@
   });
   SelectTrigger.displayName = "SelectTrigger";
 
-  var _excluded$m = ["mode", "selected", "min", "max", "onChange", "target", "triggerMode"];
+  var _excluded$n = ["mode", "selected", "min", "max", "onChange", "target", "triggerMode"];
   var SelectTime = function SelectTime(_ref) {
     var _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "24" : _ref$mode,
@@ -16998,7 +16811,7 @@
       onChange = _ref.onChange,
       target = _ref.target,
       triggerMode = _ref.triggerMode,
-      rest = _objectWithoutProperties(_ref, _excluded$m);
+      rest = _objectWithoutProperties(_ref, _excluded$n);
     var generateTimeOptions = function generateTimeOptions() {
       var minTime = moment__default["default"](isValidTime(min) ? min : "00:00", "HH:mm");
       var maxTime = moment__default["default"](isValidTime(max) ? max : "23:45", "HH:mm");
@@ -17063,11 +16876,11 @@
   });
   StyledToggle.displayName = "StyledToggle";
 
-  var _excluded$l = ["hovered", "className"];
+  var _excluded$m = ["hovered", "className"];
   var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var hovered = _ref.hovered,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$l);
+      args = _objectWithoutProperties(_ref, _excluded$m);
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
       className: classNames__default["default"]("c-toggle", className),
       $isHovered: hovered,
@@ -17219,7 +17032,7 @@
   })(["color:var(--color-theme-700);"]);
   ChipCloseIcon.displayName = "ChipCloseIcon";
 
-  var _excluded$k = ["startAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "typographyProps"];
+  var _excluded$l = ["startAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "typographyProps"];
   var Chip = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var startAdornment = _ref.startAdornment,
       label = _ref.label,
@@ -17230,7 +17043,7 @@
       backgroundColor = _ref.backgroundColor,
       closeClassName = _ref.closeClassName,
       typographyProps = _ref.typographyProps,
-      rest = _objectWithoutProperties(_ref, _excluded$k);
+      rest = _objectWithoutProperties(_ref, _excluded$l);
     var showClose = typeof onClose === "function";
     var variant = React.useMemo(function () {
       switch (size) {
@@ -17263,7 +17076,7 @@
   });
   Chip.displayName = "Chip";
 
-  var _excluded$j = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
+  var _excluded$k = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue"];
   var ComboBox = function ComboBox(_ref) {
     var _comboBoxRef$current2, _comboBoxRef$current3;
     var _ref$options = _ref.options,
@@ -17298,7 +17111,7 @@
       onClear = _ref.onClear,
       onDeselect = _ref.onDeselect,
       defaultValue = _ref.defaultValue,
-      prop = _objectWithoutProperties(_ref, _excluded$j);
+      prop = _objectWithoutProperties(_ref, _excluded$k);
     var selectedName = React.useMemo(function () {
       var value = "";
       if (!selected) {
@@ -17708,11 +17521,11 @@
   })(["display:flex;justify-content:center;gap:12px;align-items:center;height:32px;padding:4px 16px 4px 4px;position:relative;background:none;border:none;cursor:pointer;&:before{content:\"\";display:block;height:2px;width:0%;position:absolute;left:16px;background:var(--color-primary);transition:ease 0.3s all;border-radius:30px;opacity:0;}&:hover{", "{color:var(--page-paper-main);}&:before{height:32px;width:100%;left:0;opacity:1;}", "{fill:var(--page-paper-main);transform:rotate(90deg);transition:ease 0.3s;}}"], StyledText, StyledAddCrossIcon);
   StyledAddToListButton.displayName = "StyledAddToListButton";
 
-  var _excluded$i = ["text", "className"];
+  var _excluded$j = ["text", "className"];
   var AddToListButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var text = _ref.text,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$i);
+      rest = _objectWithoutProperties(_ref, _excluded$j);
     return /*#__PURE__*/React__default["default"].createElement(StyledAddToListButton, _extends({
       ref: ref,
       className: classNames__default["default"]("c--add-to-list-btn", className)
@@ -17792,6 +17605,134 @@
   };
   ProgressBar.displayName = "ProgressBar";
 
+  var StyledWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledWrapper",
+    componentId: "sc-o6dcyu-0"
+  })(["position:relative;display:inline-flex;"]);
+  StyledWrapper.displayName = "StyledWrapper";
+  var StyledChildrenWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledChildrenWrapper",
+    componentId: "sc-o6dcyu-1"
+  })(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;"]);
+  StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
+  var StyledSvg = styled__default["default"].svg.withConfig({
+    displayName: "Styles__StyledSvg",
+    componentId: "sc-o6dcyu-2"
+  })(["transform:rotate(-90deg);"]);
+  StyledSvg.displayName = "StyledSvg";
+  var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
+    displayName: "Styles__StyledBackgroundCircle",
+    componentId: "sc-o6dcyu-3"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", ""], function (props) {
+    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-transparent-300);"]);
+  }, function (props) {
+    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
+  });
+  StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
+  var StyledForegroundCircle = styled__default["default"].circle.withConfig({
+    displayName: "Styles__StyledForegroundCircle",
+    componentId: "sc-o6dcyu-4"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", " ", ""], function (props) {
+    return props.$roundStroke && styled.css(["stroke-linecap:round;"]);
+  }, function (props) {
+    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-secondary);"]);
+  }, function (props) {
+    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
+  });
+  StyledForegroundCircle.displayName = "StyledForegroundCircle";
+  var StyledProgressRingPercentage = styled__default["default"].text.withConfig({
+    displayName: "Styles__StyledProgressRingPercentage",
+    componentId: "sc-o6dcyu-5"
+  })(["transform:rotate(90deg);", " ", ""], function (props) {
+    return props.$color ? styled.css(["fill:", ";"], props.$color) : styled.css(["fill:var(--color-secondary);"]);
+  }, function (props) {
+    return props.$fontSize ? styled.css(["font-size:", "px;"], props.$fontSize) : styled.css(["font-size:10px;"]);
+  });
+  StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
+
+  var _excluded$i = ["className", "children"];
+  var ProgressCircle = function ProgressCircle(_ref) {
+    var backgroundColor = _ref.backgroundColor,
+      progressColor = _ref.progressColor,
+      _ref$progress = _ref.progress,
+      progress = _ref$progress === void 0 ? 0 : _ref$progress,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 20 : _ref$radius,
+      _ref$stroke = _ref.stroke,
+      stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
+      _ref$roundStroke = _ref.roundStroke,
+      roundStroke = _ref$roundStroke === void 0 ? false : _ref$roundStroke,
+      className = _ref.className,
+      _ref$showPercentage = _ref.showPercentage,
+      showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
+      fontSize = _ref.fontSize;
+    if (stroke > radius) {
+      console.warn("Stroke can not have value greater than the radius.");
+      stroke = radius;
+    }
+    var progressNumber = React.useMemo(function () {
+      var width = progress;
+      if (progress > 100) {
+        width = 100;
+      }
+      if (progress < 0) {
+        width = 0;
+      }
+      return width;
+    }, [progress]);
+    var normalizedRadius = React.useMemo(function () {
+      return radius - stroke / 2;
+    }, [radius, stroke]);
+    var circumference = React.useMemo(function () {
+      return normalizedRadius * 2 * Math.PI;
+    }, [normalizedRadius]);
+    var strokeDashoffsetOuter = React.useMemo(function () {
+      return circumference - (100 - progressNumber) / 100 * circumference;
+    }, [circumference, progressNumber]);
+    var strokeDashoffsetInner = React.useMemo(function () {
+      return circumference - progressNumber / 100 * circumference;
+    }, [circumference, progressNumber]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
+      height: radius * 2,
+      width: radius * 2,
+      className: className
+    }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
+      $color: backgroundColor,
+      $strokeDashOffset: -strokeDashoffsetOuter,
+      strokeWidth: stroke,
+      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      r: normalizedRadius,
+      cx: radius,
+      cy: radius
+    }), /*#__PURE__*/React__default["default"].createElement(StyledForegroundCircle, {
+      $color: progressColor,
+      $strokeDashOffset: strokeDashoffsetInner,
+      strokeWidth: stroke,
+      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      $roundStroke: roundStroke,
+      r: normalizedRadius,
+      cx: radius,
+      cy: radius
+    }), showPercentage ? /*#__PURE__*/React__default["default"].createElement(StyledProgressRingPercentage, {
+      $color: progressColor,
+      $fontSize: fontSize,
+      x: "50%",
+      y: "-50%",
+      dominantBaseline: "central",
+      textAnchor: "middle"
+    }, progressNumber, "%") : null);
+  };
+  var ProgressRing = function ProgressRing(_ref2) {
+    var className = _ref2.className,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded$i);
+    return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+      className: classNames__default["default"](className),
+      "data-testid": "progress-ring"
+    }, /*#__PURE__*/React__default["default"].createElement(ProgressCircle, rest), children ? /*#__PURE__*/React__default["default"].createElement(StyledChildrenWrapper, null, children) : null);
+  };
+  ProgressRing.displayName = "ProgressRing";
+
   var _excluded$h = ["radius"];
   var ProgressPie = function ProgressPie(_ref) {
     var _ref$radius = _ref.radius,