@activecollab/components 2.0.272 → 2.0.274

package/dist/index.js

@@ -189,7 +189,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$4T = ["children", "active", "variant", "size", "className"];
+  var _excluded$4U = ["children", "active", "variant", "size", "className"];
   /**
    * @component Button
    * @description
@@ -219,7 +219,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$4T);
+      args = _objectWithoutProperties(_ref, _excluded$4U);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
@@ -284,7 +284,7 @@
     })));
   };
 
-  var _excluded$4S = ["gradient"];
+  var _excluded$4T = ["gradient"];
 
   /**
    * @component AddCrossTinyIcon
@@ -314,7 +314,7 @@
    */
   var AddCrossTinyIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4S);
+      props = _objectWithoutProperties(_ref, _excluded$4T);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -334,12 +334,12 @@
   AddCrossTinyIcon.displayName = "AddCrossTinyIcon";
   var AddCrossTinyIcon$1 = AddCrossTinyIcon;
 
-  var _excluded$4R = ["className", "disabled"];
+  var _excluded$4S = ["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$4R);
+      rest = _objectWithoutProperties(_ref, _excluded$4S);
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
@@ -377,12 +377,12 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$4Q = ["children", "className", "invalid"];
+  var _excluded$4R = ["children", "className", "invalid"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
       invalid = _ref.invalid,
-      rest = _objectWithoutProperties(_ref, _excluded$4Q);
+      rest = _objectWithoutProperties(_ref, _excluded$4R);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
       className: classNames__default["default"]("c-btn-group", className),
@@ -407,11 +407,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator$1.displayName = "StyledListSeparator";
 
-  var _excluded$4P = ["children", "className"];
+  var _excluded$4Q = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$4P);
+      props = _objectWithoutProperties(_ref, _excluded$4Q);
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem$1, _extends({
       className: classNames__default["default"]("c-list-item", className),
       ref: ref,
@@ -420,21 +420,21 @@
   });
   ListItem.displayName = "ListItem";
 
-  var _excluded$4O = ["className"];
+  var _excluded$4P = ["className"];
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$4O);
+      props = _objectWithoutProperties(_ref, _excluded$4P);
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator$1, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
   ListSeparator.displayName = "ListSeparator";
 
-  var _excluded$4N = ["children", "className"];
+  var _excluded$4O = ["children", "className"];
   var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$4N);
+      props = _objectWithoutProperties(_ref, _excluded$4O);
     return /*#__PURE__*/React__default["default"].createElement(StyledList$1, _extends({
       className: className,
       ref: ref,
@@ -947,7 +947,7 @@
     return size === "big" && styled.css(["width:40px;"]);
   });
 
-  var _excluded$4M = ["children", "className", "variant", "size", "active"];
+  var _excluded$4N = ["children", "className", "variant", "size", "active"];
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -977,7 +977,7 @@
       variant = _ref.variant,
       size = _ref.size,
       active = _ref.active,
-      args = _objectWithoutProperties(_ref, _excluded$4M);
+      args = _objectWithoutProperties(_ref, _excluded$4N);
     return /*#__PURE__*/React__default["default"].createElement(StyledIconButton$1, _extends({
       className: className,
       variant: variant,
@@ -988,7 +988,7 @@
   });
   IconButton.displayName = "IconButton";
 
-  var _excluded$4L = ["gradient"];
+  var _excluded$4M = ["gradient"];
 
   /**
    * @component RecurringIcon
@@ -1018,7 +1018,7 @@
    */
   var RecurringIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4L);
+      props = _objectWithoutProperties(_ref, _excluded$4M);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 18,
       height: 18,
@@ -1039,7 +1039,7 @@
   RecurringIcon.displayName = "RecurringIcon";
   var RecurringIcon$1 = RecurringIcon;
 
-  var _excluded$4K = ["gradient"];
+  var _excluded$4L = ["gradient"];
 
   /**
    * @component AccessLogIcon
@@ -1069,7 +1069,7 @@
    */
   var AccessLogIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4K);
+      props = _objectWithoutProperties(_ref, _excluded$4L);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1097,7 +1097,7 @@
   AccessLogIcon.displayName = "AccessLogIcon";
   var AccessLogIcon$1 = AccessLogIcon;
 
-  var _excluded$4J = ["gradient"];
+  var _excluded$4K = ["gradient"];
 
   /**
    * @component ActivityIcon
@@ -1127,7 +1127,7 @@
    */
   var ActivityIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4J);
+      props = _objectWithoutProperties(_ref, _excluded$4K);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1151,7 +1151,7 @@
   ActivityIcon.displayName = "ActivityIcon";
   var ActivityIcon$1 = ActivityIcon;
 
-  var _excluded$4I = ["gradient"];
+  var _excluded$4J = ["gradient"];
 
   /**
    * @component AddCrossIcon
@@ -1181,7 +1181,7 @@
    */
   var AddCrossIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4I);
+      props = _objectWithoutProperties(_ref, _excluded$4J);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 10,
       height: 10,
@@ -1201,7 +1201,7 @@
   AddCrossIcon.displayName = "AddCrossIcon";
   var AddCrossIcon$1 = AddCrossIcon;
 
-  var _excluded$4H = ["gradient"];
+  var _excluded$4I = ["gradient"];
 
   /**
    * @component ArchiveIcon
@@ -1231,7 +1231,7 @@
    */
   var ArchiveIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4H);
+      props = _objectWithoutProperties(_ref, _excluded$4I);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1252,7 +1252,7 @@
   ArchiveIcon.displayName = "ArchiveIcon";
   var ArchiveIcon$1 = ArchiveIcon;
 
-  var _excluded$4G = ["gradient"];
+  var _excluded$4H = ["gradient"];
 
   /**
    * @component ArrowBackMobileIcon
@@ -1282,7 +1282,7 @@
    */
   var ArrowBackMobileIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4G);
+      props = _objectWithoutProperties(_ref, _excluded$4H);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1303,7 +1303,7 @@
   ArrowBackMobileIcon.displayName = "ArrowBackMobileIcon";
   var ArrowBackMobileIcon$1 = ArrowBackMobileIcon;
 
-  var _excluded$4F = ["gradient"];
+  var _excluded$4G = ["gradient"];
 
   /**
    * @component ArrowCollapseMultipleIcon
@@ -1333,7 +1333,7 @@
    */
   var ArrowCollapseMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4F);
+      props = _objectWithoutProperties(_ref, _excluded$4G);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1353,7 +1353,7 @@
   ArrowCollapseMultipleIcon.displayName = "ArrowCollapseMultipleIcon";
   var ArrowCollapseMultipleIcon$1 = ArrowCollapseMultipleIcon;
 
-  var _excluded$4E = ["gradient"];
+  var _excluded$4F = ["gradient"];
 
   /**
    * @component ArrowDownLongIcon
@@ -1383,7 +1383,7 @@
    */
   var ArrowDownLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4E);
+      props = _objectWithoutProperties(_ref, _excluded$4F);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1403,7 +1403,7 @@
   ArrowDownLongIcon.displayName = "ArrowDownLongIcon";
   var ArrowDownLongIcon$1 = ArrowDownLongIcon;
 
-  var _excluded$4D = ["gradient"];
+  var _excluded$4E = ["gradient"];
 
   /**
    * @component ArrowDownSmallIcon
@@ -1433,7 +1433,7 @@
    */
   var ArrowDownSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4D);
+      props = _objectWithoutProperties(_ref, _excluded$4E);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 16,
       height: 16,
@@ -1453,7 +1453,7 @@
   ArrowDownSmallIcon.displayName = "ArrowDownSmallIcon";
   var ArrowDownSmallIcon$1 = ArrowDownSmallIcon;
 
-  var _excluded$4C = ["gradient"];
+  var _excluded$4D = ["gradient"];
 
   /**
    * @component ArrowDownIcon
@@ -1483,7 +1483,7 @@
    */
   var ArrowDownIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4C);
+      props = _objectWithoutProperties(_ref, _excluded$4D);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       xmlns: "http://www.w3.org/2000/svg",
       width: 24,
@@ -1502,7 +1502,7 @@
   ArrowDownIcon.displayName = "ArrowDownIcon";
   var ArrowDownIcon$1 = ArrowDownIcon;
 
-  var _excluded$4B = ["gradient"];
+  var _excluded$4C = ["gradient"];
 
   /**
    * @component ArrowExpandeMultipleIcon
@@ -1532,7 +1532,7 @@
    */
   var ArrowExpandeMultipleIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4B);
+      props = _objectWithoutProperties(_ref, _excluded$4C);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1552,7 +1552,7 @@
   ArrowExpandeMultipleIcon.displayName = "ArrowExpandeMultipleIcon";
   var ArrowExpandeMultipleIcon$1 = ArrowExpandeMultipleIcon;
 
-  var _excluded$4A = ["gradient"];
+  var _excluded$4B = ["gradient"];
 
   /**
    * @component ArrowLeftBoxIcon
@@ -1582,7 +1582,7 @@
    */
   var ArrowLeftBoxIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4A);
+      props = _objectWithoutProperties(_ref, _excluded$4B);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1602,7 +1602,7 @@
   ArrowLeftBoxIcon.displayName = "ArrowLeftBoxIcon";
   var ArrowLeftBoxIcon$1 = ArrowLeftBoxIcon;
 
-  var _excluded$4z = ["gradient"];
+  var _excluded$4A = ["gradient"];
 
   /**
    * @component ArrowLeftIcon
@@ -1632,7 +1632,7 @@
    */
   var ArrowLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4z);
+      props = _objectWithoutProperties(_ref, _excluded$4A);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1652,7 +1652,7 @@
   ArrowLeftIcon.displayName = "ArrowLeftIcon";
   var ArrowLeftIcon$1 = ArrowLeftIcon;
 
-  var _excluded$4y = ["gradient"];
+  var _excluded$4z = ["gradient"];
 
   /**
    * @component ArrowRefreshIcon
@@ -1682,7 +1682,7 @@
    */
   var ArrowRefreshIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4y);
+      props = _objectWithoutProperties(_ref, _excluded$4z);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1703,7 +1703,7 @@
   ArrowRefreshIcon.displayName = "ArrowRefreshIcon";
   var ArrowRefreshIcon$1 = ArrowRefreshIcon;
 
-  var _excluded$4x = ["gradient"];
+  var _excluded$4y = ["gradient"];
 
   /**
    * @component ArrowRestoreIcon
@@ -1733,7 +1733,7 @@
    */
   var ArrowRestoreIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4x);
+      props = _objectWithoutProperties(_ref, _excluded$4y);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       xmlns: "http://www.w3.org/2000/svg",
       width: 24,
@@ -1753,7 +1753,7 @@
   ArrowRestoreIcon.displayName = "ArrowRestoreIcon";
   var ArrowRestoreIcon$1 = ArrowRestoreIcon;
 
-  var _excluded$4w = ["gradient"];
+  var _excluded$4x = ["gradient"];
 
   /**
    * @component ArrowRightIcon
@@ -1783,7 +1783,7 @@
    */
   var ArrowRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4w);
+      props = _objectWithoutProperties(_ref, _excluded$4x);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1803,7 +1803,7 @@
   ArrowRightIcon.displayName = "ArrowRightIcon";
   var ArrowRightIcon$1 = ArrowRightIcon;
 
-  var _excluded$4v = ["gradient"];
+  var _excluded$4w = ["gradient"];
 
   /**
    * @component ArrowUpLongIcon
@@ -1833,7 +1833,7 @@
    */
   var ArrowUpLongIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4v);
+      props = _objectWithoutProperties(_ref, _excluded$4w);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1853,7 +1853,7 @@
   ArrowUpLongIcon.displayName = "ArrowUpLongIcon";
   var ArrowUpLongIcon$1 = ArrowUpLongIcon;
 
-  var _excluded$4u = ["gradient"];
+  var _excluded$4v = ["gradient"];
 
   /**
    * @component ArrowUpIcon
@@ -1883,7 +1883,7 @@
    */
   var ArrowUpIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4u);
+      props = _objectWithoutProperties(_ref, _excluded$4v);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       xmlns: "http://www.w3.org/2000/svg",
       width: 24,
@@ -1902,7 +1902,7 @@
   ArrowUpIcon.displayName = "ArrowUpIcon";
   var ArrowUpIcon$1 = ArrowUpIcon;
 
-  var _excluded$4t = ["gradient"];
+  var _excluded$4u = ["gradient"];
 
   /**
    * @component AssignIcon
@@ -1932,7 +1932,7 @@
    */
   var AssignIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4t);
+      props = _objectWithoutProperties(_ref, _excluded$4u);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -1952,7 +1952,7 @@
   AssignIcon.displayName = "AssignIcon";
   var AssignIcon$1 = AssignIcon;
 
-  var _excluded$4s = ["gradient"];
+  var _excluded$4t = ["gradient"];
 
   /**
    * @component AttachmentIcon
@@ -1982,7 +1982,7 @@
    */
   var AttachmentIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4s);
+      props = _objectWithoutProperties(_ref, _excluded$4t);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2002,7 +2002,7 @@
   AttachmentIcon.displayName = "AttachmentIcon";
   var AttachmentIcon$1 = AttachmentIcon;
 
-  var _excluded$4r = ["gradient"];
+  var _excluded$4s = ["gradient"];
 
   /**
    * @component BellOffSmallIcon
@@ -2032,7 +2032,7 @@
    */
   var BellOffSmallIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4r);
+      props = _objectWithoutProperties(_ref, _excluded$4s);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 12,
       height: 12,
@@ -2052,7 +2052,7 @@
   BellOffSmallIcon.displayName = "BellOffSmallIcon";
   var BellOffSmallIcon$1 = BellOffSmallIcon;
 
-  var _excluded$4q = ["gradient"];
+  var _excluded$4r = ["gradient"];
 
   /**
    * @component BellOffIcon
@@ -2082,7 +2082,7 @@
    */
   var BellOffIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4q);
+      props = _objectWithoutProperties(_ref, _excluded$4r);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2102,7 +2102,7 @@
   BellOffIcon.displayName = "BellOffIcon";
   var BellOffIcon$1 = BellOffIcon;
 
-  var _excluded$4p = ["gradient"];
+  var _excluded$4q = ["gradient"];
 
   /**
    * @component BillingIcon
@@ -2132,7 +2132,7 @@
    */
   var BillingIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4p);
+      props = _objectWithoutProperties(_ref, _excluded$4q);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2155,7 +2155,7 @@
   BillingIcon.displayName = "BillingIcon";
   var BillingIcon$1 = BillingIcon;
 
-  var _excluded$4o = ["gradient"];
+  var _excluded$4p = ["gradient"];
 
   /**
    * @component BudgetAlertIcon
@@ -2185,7 +2185,7 @@
    */
   var BudgetAlertIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4o);
+      props = _objectWithoutProperties(_ref, _excluded$4p);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2205,7 +2205,7 @@
   BudgetAlertIcon.displayName = "BudgetAlertIcon";
   var BudgetAlertIcon$1 = BudgetAlertIcon;
 
-  var _excluded$4n = ["gradient"];
+  var _excluded$4o = ["gradient"];
 
   /**
    * @component CalendarAddXIcon
@@ -2235,7 +2235,7 @@
    */
   var CalendarAddXIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4n);
+      props = _objectWithoutProperties(_ref, _excluded$4o);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2255,7 +2255,7 @@
   CalendarAddXIcon.displayName = "CalendarAddXIcon";
   var CalendarAddXIcon$1 = CalendarAddXIcon;
 
-  var _excluded$4m = ["gradient"];
+  var _excluded$4n = ["gradient"];
 
   /**
    * @component CalendarImportIcon
@@ -2285,7 +2285,7 @@
    */
   var CalendarImportIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4m);
+      props = _objectWithoutProperties(_ref, _excluded$4n);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 18,
       height: 18,
@@ -2308,7 +2308,7 @@
   CalendarImportIcon.displayName = "CalendarImportIcon";
   var CalendarImportIcon$1 = CalendarImportIcon;
 
-  var _excluded$4l = ["gradient"];
+  var _excluded$4m = ["gradient"];
 
   /**
    * @component CalendarIcon
@@ -2338,7 +2338,7 @@
    */
   var CalendarIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4l);
+      props = _objectWithoutProperties(_ref, _excluded$4m);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2358,7 +2358,7 @@
   CalendarIcon.displayName = "CalendarIcon";
   var CalendarIcon$1 = CalendarIcon;
 
-  var _excluded$4k = ["gradient"];
+  var _excluded$4l = ["gradient"];
 
   /**
    * @component CancelCrossIcon
@@ -2388,7 +2388,7 @@
    */
   var CancelCrossIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4k);
+      props = _objectWithoutProperties(_ref, _excluded$4l);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2408,7 +2408,7 @@
   CancelCrossIcon.displayName = "CancelCrossIcon";
   var CancelCrossIcon$1 = CancelCrossIcon;
 
-  var _excluded$4j = ["gradient"];
+  var _excluded$4k = ["gradient"];
 
   /**
    * @component CaretLeftIcon
@@ -2438,7 +2438,7 @@
    */
   var CaretLeftIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4j);
+      props = _objectWithoutProperties(_ref, _excluded$4k);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 18,
       height: 18,
@@ -2458,7 +2458,7 @@
   CaretLeftIcon.displayName = "CaretLeftIcon";
   var CaretLeftIcon$1 = CaretLeftIcon;
 
-  var _excluded$4i = ["gradient"];
+  var _excluded$4j = ["gradient"];
 
   /**
    * @component CaretRightIcon
@@ -2488,7 +2488,7 @@
    */
   var CaretRightIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4i);
+      props = _objectWithoutProperties(_ref, _excluded$4j);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 18,
       height: 18,
@@ -2508,7 +2508,7 @@
   CaretRightIcon.displayName = "CaretRightIcon";
   var CaretRightIcon$1 = CaretRightIcon;
 
-  var _excluded$4h = ["gradient"];
+  var _excluded$4i = ["gradient"];
 
   /**
    * @component ChatIcon
@@ -2538,7 +2538,7 @@
    */
   var ChatIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4h);
+      props = _objectWithoutProperties(_ref, _excluded$4i);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2558,7 +2558,7 @@
   ChatIcon.displayName = "ChatIcon";
   var ChatIcon$1 = ChatIcon;
 
-  var _excluded$4g = ["gradient"];
+  var _excluded$4h = ["gradient"];
 
   /**
    * @component CheckIcon
@@ -2588,7 +2588,7 @@
    */
   var CheckIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4g);
+      props = _objectWithoutProperties(_ref, _excluded$4h);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2608,7 +2608,7 @@
   CheckIcon.displayName = "CheckIcon";
   var CheckIcon$1 = CheckIcon;
 
-  var _excluded$4f = ["gradient"];
+  var _excluded$4g = ["gradient"];
 
   /**
    * @component CheckboxBlankTogglerIcon
@@ -2638,7 +2638,7 @@
    */
   var CheckboxBlankTogglerIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4f);
+      props = _objectWithoutProperties(_ref, _excluded$4g);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2658,7 +2658,7 @@
   CheckboxBlankTogglerIcon.displayName = "CheckboxBlankTogglerIcon";
   var CheckboxBlankTogglerIcon$1 = CheckboxBlankTogglerIcon;
 
-  var _excluded$4e = ["gradient"];
+  var _excluded$4f = ["gradient"];
 
   /**
    * @component CheckboxCircleArrowIcon
@@ -2688,7 +2688,7 @@
    */
   var CheckboxCircleArrowIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
     var gradient = _ref.gradient,
-      props = _objectWithoutProperties(_ref, _excluded$4e);
+      props = _objectWithoutProperties(_ref, _excluded$4f);
     return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
       width: 24,
       height: 24,
@@ -2708,6 +2708,57 @@
   CheckboxCircleArrowIcon.displayName = "CheckboxCircleArrowIcon";
   var CheckboxCircleArrowIcon$1 = CheckboxCircleArrowIcon;
 
+  var _excluded$4e = ["gradient"];
+
+  /**
+   * @component CheckboxCircleBlankIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+   * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+   *
+   * @example
+   * return (
+   * <CheckboxCircleBlankIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+   * )
+   *
+   * @example
+   * return (
+   *   <CheckboxCircleBlankIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var CheckboxCircleBlankIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, svgRef) {
+    var gradient = _ref.gradient,
+      props = _objectWithoutProperties(_ref, _excluded$4e);
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 15,
+      height: 15,
+      viewBox: "0 0 15 15",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "CheckboxCircleBlankIcon",
+      fill: gradient ? "url(#icon-gradient)" : props !== null && props !== void 0 && props.fill ? props.fill : "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement(GradientDefs, {
+      gradient: gradient
+    }), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.5 0a7.5 7.5 0 110 15 7.5 7.5 0 010-15zm0 1.5a6 6 0 100 12 6 6 0 000-12zm2.705 4.28a.75.75 0 010 1.061L7.462 9.584a.75.75 0 01-1.06 0L5.03 8.212a.75.75 0 011.061-1.06l.84.84L9.144 5.78a.75.75 0 011.061 0z"
+    }));
+  });
+  CheckboxCircleBlankIcon.displayName = "CheckboxCircleBlankIcon";
+  var CheckboxCircleBlankIcon$1 = CheckboxCircleBlankIcon;
+
   var _excluded$4d = ["gradient"];
 
   /**
@@ -14262,7 +14313,7 @@
       _useState2 = _slicedToArray(_useState, 2),
       fromDate = _useState2[0],
       setFromDate = _useState2[1];
-    var _useState3 = React.useState(moment__default["default"].utc(to)),
+    var _useState3 = React.useState(to ? moment__default["default"].utc(to) : null),
       _useState4 = _slicedToArray(_useState3, 2),
       toDate = _useState4[0],
       setToDate = _useState4[1];
@@ -14285,9 +14336,8 @@
         return [date.clone().startOf("year"), date.clone().endOf("year")];
       } else if (step === "range") {
         // For range step, calculate N days based on current selection
-        // Handle case where toDate is invalid or at epoch (1970)
-        var isToDateInvalid = !toDate.isValid() || toDate.year() === 1970;
-        var effectiveToDate = isToDateInvalid ? fromDate : toDate;
+        // Handle case where toDate is undefined
+        var effectiveToDate = !toDate ? fromDate : toDate;
         var daysDiff = effectiveToDate.diff(fromDate, "days");
 
         // If same day selected (daysDiff = 0), move by 1 day
@@ -14300,14 +14350,15 @@
     }, [fromDate, toDate, period, step]);
     var getDateFormatted = React.useMemo(function () {
       if (formatCallback) {
-        return formatCallback(fromDate, toDate);
+        return formatCallback(fromDate, toDate ? toDate : fromDate);
       }
       var actualYear = moment__default["default"]().year();
       var showWeekOrCustomDateFormat = function showWeekOrCustomDateFormat(start, end) {
+        var endDate = end ? end : start;
         if (start.year() === actualYear && end.year() === actualYear) {
-          return start.utc().format("MMM DD") + " - " + end.utc().format("MMM DD");
+          return start.utc().format("MMM DD") + " - " + endDate.utc().format("MMM DD");
         } else {
-          return start.utc().format("MMM DD YYYY") + " - " + end.utc().format("MMM DD YYYY");
+          return start.utc().format("MMM DD YYYY") + " - " + endDate.utc().format("MMM DD YYYY");
         }
       };
       if (step === "daily") {
@@ -14326,8 +14377,7 @@
       } else if (step === "yearly") {
         return fromDate.utc().format("YYYY");
       } else if (step === "range") {
-        // For range step, if toDate is invalid or at epoch (1970), only show fromDate
-        if (!toDate.isValid() || toDate.year() === 1970) {
+        if (!toDate) {
           if (fromDate.year() === actualYear) {
             return fromDate.utc().format("MMM DD");
           }
@@ -14350,19 +14400,27 @@
       return step;
     }, [step]);
     var onDatePickerChange = React.useCallback(function (dates) {
+      console.log("dates: ", dates);
       var fromDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.from) * 1000);
-      var toDateTemp = moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000);
+      var toDateTemp = dates !== null && dates !== void 0 && dates.to ? moment__default["default"].utc(Number(dates === null || dates === void 0 ? void 0 : dates.to) * 1000) : null;
       setFromDate(fromDateTemp);
       setToDate(toDateTemp);
-      if (onChange && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
+      if (onChange && step !== "range" && moment__default["default"].isMoment(fromDateTemp) && moment__default["default"].isMoment(toDateTemp)) {
         onChange(fromDateTemp.toDate(), toDateTemp.toDate());
       }
-    }, [onChange, setFromDate, setToDate]);
+    }, [onChange, step]);
+    var onToggleDatePicker = React.useCallback(function (open) {
+      if (step === "range" && !open) {
+        var toDateTemp = toDate ? toDate : fromDate;
+        setToDate(toDateTemp);
+        onChange === null || onChange === void 0 || onChange(fromDate.toDate(), toDateTemp.toDate());
+      }
+    }, [fromDate, onChange, step, toDate]);
     var isAfterMaxDate = React.useMemo(function () {
-      return moment__default["default"].isMoment(maxValue) && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.utc().format("YYYY-MM-DD"));
+      return moment__default["default"].isMoment(maxValue) && toDate && moment__default["default"](moment__default["default"].utc(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.utc().format("YYYY-MM-DD"));
     }, [maxValue, toDate]);
     var isBeforeMinDate = React.useMemo(function () {
-      return moment__default["default"].isMoment(minValue) && moment__default["default"].utc(moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.utc().format("YYYY-MM-DD"));
+      return moment__default["default"].isMoment(minValue) && toDate && moment__default["default"].utc(moment__default["default"].utc(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.utc().format("YYYY-MM-DD"));
     }, [minValue, toDate]);
     React.useEffect(function () {
       if (isBeforeMinDate) {
@@ -14414,9 +14472,14 @@
     }, [isBeforeMinDate, getDatesByPeriod, onChange, onBack]);
     React.useEffect(function () {
       setFromDate(moment__default["default"].utc(from));
-      setToDate(moment__default["default"].utc(to));
+      setToDate(to ? moment__default["default"].utc(to) : null);
     }, [from, to]);
     var dateStepperWidth = function dateStepperWidth(fromDay, toDay, range) {
+      if (range === "range") {
+        return {
+          minWidth: "102px"
+        };
+      }
       if (fromDay.utc().year() !== moment__default["default"].utc().year() || toDay.utc().year() !== moment__default["default"].utc().year()) {
         switch (range) {
           case "daily":
@@ -14483,6 +14546,7 @@
       style: dateStepperWidth(fromDate, toDate, step)
     }, withDatePicker && step !== "yearly" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: defaultMonth,
+      onCalendarToggle: onToggleDatePicker,
       target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
         $step: step,
         type: "button"
@@ -14490,7 +14554,7 @@
       mode: datePickerMode,
       selected: {
         from: moment__default["default"].utc(fromDate).unix(),
-        to: moment__default["default"].utc(toDate).unix()
+        to: toDate ? moment__default["default"].utc(toDate).unix() : null
       },
       onChange: onDatePickerChange,
       firstDayOfWeek: period === "week" ? 0 : 1,
@@ -24913,6 +24977,7 @@
   exports.Checkbox = Checkbox;
   exports.CheckboxBlankTogglerIcon = CheckboxBlankTogglerIcon$1;
   exports.CheckboxCircleArrowIcon = CheckboxCircleArrowIcon$1;
+  exports.CheckboxCircleBlankIcon = CheckboxCircleBlankIcon$1;
   exports.CheckboxDocumentsIcon = CheckboxDocumentsIcon$1;
   exports.CheckboxIcon = CheckboxIcon$3;
   exports.ChecklistIcon = ChecklistIcon$1;