@activecollab/components 1.0.225 → 1.0.227

package/dist/index.js

@@ -267,7 +267,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$1b = ["children", "variant", "size", "className"];
+  var _excluded$1c = ["children", "variant", "size", "className"];
   /**
    * Button component
    */
@@ -278,7 +278,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$1b);
+      args = _objectWithoutProperties(_ref, _excluded$1c);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
@@ -330,12 +330,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$1a = ["className", "disabled"];
+  var _excluded$1b = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$1a);
+      rest = _objectWithoutProperties(_ref, _excluded$1b);
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
@@ -367,11 +367,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$19 = ["children", "className"];
+  var _excluded$1a = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$19);
+      rest = _objectWithoutProperties(_ref, _excluded$1a);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
       className: classNames__default["default"]("c-btn-group", className)
@@ -431,7 +431,7 @@
     return React.useContext(MenuContext);
   };
 
-  var _excluded$18 = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$19 = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       anchorEl = _ref.anchorEl,
@@ -444,7 +444,7 @@
       initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-      rest = _objectWithoutProperties(_ref, _excluded$18);
+      rest = _objectWithoutProperties(_ref, _excluded$19);
     var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       exited = _useState2[0],
@@ -533,12 +533,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$17 = ["className", "disableBackgroundColor"];
+  var _excluded$18 = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
       _ref$disableBackgroun = _ref.disableBackgroundColor,
       disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-      rest = _objectWithoutProperties(_ref, _excluded$17);
+      rest = _objectWithoutProperties(_ref, _excluded$18);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
@@ -578,7 +578,7 @@
   })(["", " ", " position:fixed;top:0;right:0;bottom:0;left:0;"], FontStyle, BoxSizingStyle);
   StyledWindow.displayName = "StyledWindow";
 
-  var _excluded$16 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
+  var _excluded$17 = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -595,7 +595,7 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$16);
+      rest = _objectWithoutProperties(_ref, _excluded$17);
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
     var _useLayerContext = useLayerContext(),
@@ -662,7 +662,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$15 = ["children", "className", "innerRef", "style"];
+  var _excluded$16 = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -670,7 +670,7 @@
       innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$15);
+      rest = _objectWithoutProperties(_ref, _excluded$16);
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
       className: classNames__default["default"]("c-bubble", className),
@@ -985,7 +985,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$14 = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$15 = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -1016,7 +1016,7 @@
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$14);
+      props = _objectWithoutProperties(_ref, _excluded$15);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
@@ -1039,13 +1039,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$13 = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$14 = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       className = _ref.className,
       leftElement = _ref.leftElement,
       rightElement = _ref.rightElement,
-      props = _objectWithoutProperties(_ref, _excluded$13);
+      props = _objectWithoutProperties(_ref, _excluded$14);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
       ref: ref
@@ -1070,11 +1070,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$12 = ["children", "className"];
+  var _excluded$13 = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$12);
+      props = _objectWithoutProperties(_ref, _excluded$13);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
@@ -1098,11 +1098,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$11 = ["children", "className"];
+  var _excluded$12 = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$11);
+      props = _objectWithoutProperties(_ref, _excluded$12);
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({
       className: classNames__default["default"]("c-list-item", className),
       ref: ref,
@@ -1111,21 +1111,21 @@
   });
   ListItem.displayName = "ListItem";
 
-  var _excluded$10 = ["className"];
+  var _excluded$11 = ["className"];
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$10);
+      props = _objectWithoutProperties(_ref, _excluded$11);
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
   ListSeparator.displayName = "ListSeparator";
 
-  var _excluded$$ = ["children", "className"];
+  var _excluded$10 = ["children", "className"];
   var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$$);
+      props = _objectWithoutProperties(_ref, _excluded$10);
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({
       className: className,
       ref: ref,
@@ -1140,6 +1140,36 @@
     Separator: ListSeparator
   });
 
+  var StyledIconButton = styled__default["default"](Button).withConfig({
+    displayName: "Styles__StyledIconButton",
+    componentId: "sc-1teza2f-0"
+  })(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
+    var size = _ref.size;
+    return size === "small" && styled.css(["width:24px;"]);
+  }, function (_ref2) {
+    var size = _ref2.size;
+    return size === "big" && styled.css(["width:40px;"]);
+  });
+
+  var _excluded$$ = ["children", "className", "variant", "size"];
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+  var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var children = _ref.children,
+      className = _ref.className,
+      variant = _ref.variant,
+      size = _ref.size,
+      args = _objectWithoutProperties(_ref, _excluded$$);
+    return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
+      className: classNames__default["default"]("c-btn--icon-only", className),
+      variant: variant,
+      size: size,
+      ref: ref
+    }, args), children);
+  });
+  IconButton.displayName = "IconButton";
+
   var ActivityIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
@@ -3997,7 +4027,7 @@
     }, menuCollection.length > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, {
       "data-role": "menu"
     }, /*#__PURE__*/React__default["default"].createElement(Menu, {
-      target: /*#__PURE__*/React__default["default"].createElement(Button, {
+      target: /*#__PURE__*/React__default["default"].createElement(IconButton, {
         variant: "text gray"
       }, /*#__PURE__*/React__default["default"].createElement(TreeDotsIcon$1, null))
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenuList, null, menuCollection.map(function (child, index) {
@@ -9471,7 +9501,7 @@
       popperTooltipStyle: {
         zIndex: 1301
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
       size: "small",
       variant: "text gray",
       onClick: onCancel
@@ -10942,7 +10972,7 @@
       startAdornment: startAdornment,
       endAdornment: !disabled ? /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
         disablePointerEvents: disabled
-      }, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(Button, {
+      }, loading ? /*#__PURE__*/React__default["default"].createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
         onMouseDown: handleMouseDown,
         onClick: handleDeselect,
         variant: "text gray",
@@ -11108,6 +11138,121 @@
   };
   ProgressBar.displayName = "ProgressBar";
 
+  var StyledSvg = styled__default["default"].svg.withConfig({
+    displayName: "Styles__StyledSvg",
+    componentId: "sc-o6dcyu-0"
+  })(["transform:rotate(-90deg);"]);
+  StyledSvg.displayName = "StyledSvg";
+  var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
+    displayName: "Styles__StyledBackgroundCircle",
+    componentId: "sc-o6dcyu-1"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], 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-2"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], 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-3"
+  })(["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 ProgressRing = function ProgressRing(_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,
+      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: classNames__default["default"](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),
+      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);
+  };
+  ProgressRing.displayName = "ProgressRing";
+
+  var _excluded$7 = ["radius"];
+  var ProgressPie = function ProgressPie(_ref) {
+    var _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 20 : _ref$radius,
+      rest = _objectWithoutProperties(_ref, _excluded$7);
+    return /*#__PURE__*/React__default["default"].createElement(ProgressRing, _extends({}, rest, {
+      stroke: radius,
+      radius: radius
+    }));
+  };
+  ProgressPie.displayName = "ProgressPie";
+
   var ApplauseIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: "14",
@@ -11424,7 +11569,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var _excluded$7 = ["invalid", "required", "size", "children", "className", "weight"];
+  var _excluded$6 = ["invalid", "required", "size", "children", "className", "weight"];
   var Label = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
@@ -11436,7 +11581,7 @@
       className = _ref.className,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? "bold" : _ref$weight,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$6);
     var color = invalid ? "alert" : "primary";
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
@@ -11452,105 +11597,6 @@
 
   var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
 
-  var StyledSvg = styled__default["default"].svg.withConfig({
-    displayName: "Styles__StyledSvg",
-    componentId: "sc-o6dcyu-0"
-  })(["transform:rotate(-90deg);"]);
-  StyledSvg.displayName = "StyledSvg";
-  var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
-    displayName: "Styles__StyledBackgroundCircle",
-    componentId: "sc-o6dcyu-1"
-  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], 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-2"
-  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], 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-3"
-  })(["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 ProgressRing = function ProgressRing(_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,
-      className = _ref.className,
-      _ref$showPercentage = _ref.showPercentage,
-      showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
-      fontSize = _ref.fontSize;
-    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: classNames__default["default"](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),
-      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);
-  };
-  ProgressRing.displayName = "ProgressRing";
-
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1wapx2a-0"
@@ -11594,7 +11640,7 @@
   });
   StyledInput.displayName = "StyledInput";
 
-  var _excluded$6 = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
+  var _excluded$5 = ["className", "variant", "weight", "disabled", "inputProps", "wrapRef"];
   var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$variant = _ref.variant,
@@ -11604,7 +11650,7 @@
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       inputProps = _ref.inputProps,
       wrapRef = _ref.wrapRef,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$5);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
     var handleBlur = React.useCallback(function (evt) {
@@ -11633,13 +11679,13 @@
   });
   EditableContent.displayName = "EditableContent";
 
-  var _excluded$5 = ["onSave", "onCancel", "value", "inputProps"];
+  var _excluded$4 = ["onSave", "onCancel", "value", "inputProps"];
   var EditableText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var onSave = _ref.onSave,
       onCancel = _ref.onCancel,
       value = _ref.value,
       inputProps = _ref.inputProps,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$4);
     var _useState = React.useState(value),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
@@ -11697,11 +11743,11 @@
   });
   EditableText.displayName = "EditableText";
 
-  var _excluded$4 = ["withDocuments"];
+  var _excluded$3 = ["withDocuments"];
   var FolderIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var _ref$withDocuments = _ref.withDocuments,
       withDocuments = _ref$withDocuments === void 0 ? false : _ref$withDocuments,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$3);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 100,
       height: 100,
@@ -11844,7 +11890,7 @@
     return $renderAs === "list" && styled.css(["justify-self:flex-end;"]);
   });
 
-  var _excluded$3 = ["children", "gap", "renderAs"];
+  var _excluded$2 = ["children", "gap", "renderAs"];
   var EntityGroupContext = /*#__PURE__*/React__default["default"].createContext({
     renderAs: "grid"
   });
@@ -11853,7 +11899,7 @@
       gap = _ref.gap,
       _ref$renderAs = _ref.renderAs,
       renderAs = _ref$renderAs === void 0 ? "grid" : _ref$renderAs,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
+      rest = _objectWithoutProperties(_ref, _excluded$2);
     return /*#__PURE__*/React__default["default"].createElement(EntityGroupContext.Provider, {
       value: {
         renderAs: renderAs
@@ -11865,14 +11911,14 @@
   };
   EntityGroup.displayName = "EntityGroup";
 
-  var _excluded$2 = ["children", "isCollection", "background", "className", "as"];
+  var _excluded$1 = ["children", "isCollection", "background", "className", "as"];
   var EntityCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       isCollection = _ref.isCollection,
       background = _ref.background,
       className = _ref.className,
       as = _ref.as,
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      rest = _objectWithoutProperties(_ref, _excluded$1);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
     var classSuffix = "c-entity-card-".concat(renderAs);
@@ -11891,13 +11937,13 @@
   });
   EntityCard.displayName = "EntityCard";
 
-  var _excluded$1 = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
+  var _excluded = ["listOrder", "listWidth", "visibleFromBreakpoint", "className"];
   var EntityProperty = function EntityProperty(_ref) {
     var listOrder = _ref.listOrder,
       listWidth = _ref.listWidth,
       visibleFromBreakpoint = _ref.visibleFromBreakpoint,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
     var classSuffix = "c-entity-property-".concat(renderAs);
@@ -11937,7 +11983,7 @@
       ref: ref
     }, /*#__PURE__*/React__default["default"].createElement(MenuHeader, {
       title: title,
-      leftElement: /*#__PURE__*/React__default["default"].createElement(Button, {
+      leftElement: /*#__PURE__*/React__default["default"].createElement(IconButton, {
         onClick: onBack,
         variant: "text gray",
         size: "small"
@@ -12293,12 +12339,12 @@
       }
       return onNextButtonClick && onNextButtonClick();
     }, [isLast, onClose, onNextButtonClick]);
-    return !skip ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeaderLeft, null, index && index > 0 ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    return !skip ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledStepHeaderLeft, null, index && index > 0 ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
       onClick: onPreviousButtonClick,
       variant: "text gray",
       className: "tw--ml-3 tw-mr-2",
       disabled: changingStepInProgress
-    }, /*#__PURE__*/React__default["default"].createElement(ArrowBackMobileIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledStepTitle, null, /*#__PURE__*/React__default["default"].createElement(Caption2, null, title), /*#__PURE__*/React__default["default"].createElement(Header3, null, subtitle))), /*#__PURE__*/React__default["default"].createElement(Button, {
+    }, /*#__PURE__*/React__default["default"].createElement(ArrowBackMobileIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledStepTitle, null, /*#__PURE__*/React__default["default"].createElement(Caption2, null, title), /*#__PURE__*/React__default["default"].createElement(Header3, null, subtitle))), /*#__PURE__*/React__default["default"].createElement(IconButton, {
       onClick: onClose,
       variant: "text gray",
       disabled: changingStepInProgress
@@ -12386,36 +12432,6 @@
   });
   Wizard.displayName = "Wizard";
 
-  var StyledIconButton = styled__default["default"](Button).withConfig({
-    displayName: "Styles__StyledIconButton",
-    componentId: "sc-1teza2f-0"
-  })(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", " ", ""], function (_ref) {
-    var size = _ref.size;
-    return size === "small" && styled.css(["width:24px;"]);
-  }, function (_ref2) {
-    var size = _ref2.size;
-    return size === "big" && styled.css(["width:40px;"]);
-  });
-
-  var _excluded = ["children", "className", "variant", "size"];
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-
-  var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var children = _ref.children,
-      className = _ref.className,
-      variant = _ref.variant,
-      size = _ref.size,
-      args = _objectWithoutProperties(_ref, _excluded);
-    return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
-      className: classNames__default["default"]("c-btn--icon-only", className),
-      variant: variant,
-      size: size,
-      ref: ref
-    }, args), children);
-  });
-  IconButton.displayName = "IconButton";
-
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -12607,6 +12623,7 @@
   exports.Portal = Portal;
   exports.Pressed = Pressed;
   exports.ProgressBar = ProgressBar;
+  exports.ProgressPie = ProgressPie;
   exports.ProgressRing = ProgressRing;
   exports.ProjectAddIcon = ProjectAddIcon$1;
   exports.ProjectTemplateAddIcon = ProjectTemplateAddIcon$1;