@commonsku/styles 1.12.0 → 1.13.3

package/dist/index.es.js

@@ -10,10 +10,10 @@ import BaseAsyncSelect from 'react-select/async';
 import ReactDOM from 'react-dom';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout } from 'react-table';
+import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList } from 'react-window';
-import { Draggable, DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable, DragDropContext } from 'react-beautiful-dnd';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -692,14 +692,16 @@ var LabeledRadioGroup = function (_a) {
     }));
 };
 var LabeledCheckbox = React__default.forwardRef(function (_a, ref) {
-    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, onChange = _a.onChange, _b = _a.checkboxPosition, checkboxPosition = _b === void 0 ? 'top-left' : _b, _c = _a.checkboxStyle, checkboxStyle = _c === void 0 ? {} : _c, _d = _a.labelStyle, labelStyle = _d === void 0 ? {} : _d, _e = _a.hoverByLabel, hoverByLabel = _e === void 0 ? true : _e, props = __rest(_a, ["label", "name", "checked", "disabled", "onChange", "checkboxPosition", "checkboxStyle", "labelStyle", "hoverByLabel"]);
-    var _f = useState(false), isHovering = _f[0], updateHover = _f[1];
+    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, onChange = _a.onChange, _b = _a.checkboxPosition, checkboxPosition = _b === void 0 ? 'top-left' : _b, _c = _a.checkboxStyle, checkboxStyle = _c === void 0 ? {} : _c, _d = _a.labelStyle, labelStyle = _d === void 0 ? {} : _d, _e = _a.hoverByLabel, hoverByLabel = _e === void 0 ? true : _e, _f = _a.stopPropagation, stopPropagation = _f === void 0 ? false : _f, props = __rest(_a, ["label", "name", "checked", "disabled", "onChange", "checkboxPosition", "checkboxStyle", "labelStyle", "hoverByLabel", "stopPropagation"]);
+    var _g = useState(false), isHovering = _g[0], updateHover = _g[1];
     var onMouseOver = function (e) { return updateHover(true); };
     var onMouseLeave = function (e) { return updateHover(false); };
     return (React__default.createElement(RadioLabel, { htmlFor: name, onMouseOver: hoverByLabel ? onMouseOver : undefined, onMouseLeave: hoverByLabel ? onMouseLeave : undefined, disabled: disabled, style: labelStyle },
         label,
         React__default.createElement(Radio, __assign({ ref: ref, name: name, type: "checkbox", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props)),
-        React__default.createElement(CheckMark, { onMouseOver: !hoverByLabel ? onMouseOver : undefined, onMouseLeave: !hoverByLabel ? onMouseLeave : undefined, checked: checked, isHovering: isHovering, disabled: disabled, style: __assign(__assign({}, (checkboxPosition === 'top-right' ? { right: 0, left: 'auto', } : {})), checkboxStyle) })));
+        React__default.createElement(CheckMark, { onMouseOver: !hoverByLabel ? onMouseOver : undefined, onMouseLeave: !hoverByLabel ? onMouseLeave : undefined, checked: checked, isHovering: isHovering, disabled: disabled, style: __assign(__assign({}, (checkboxPosition === 'top-right' ? { right: 0, left: 'auto', } : {})), checkboxStyle), onClick: function (e) {
+                stopPropagation && e && e.stopPropagation();
+            } })));
 });
 var templateObject_1$b, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
 
@@ -1141,38 +1143,50 @@ function TrashIcon(_a) {
 }
 
 function NavConnectIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? "#000000" : _b, width = _a.width, mr = _a.mr, mt = _a.mt, style = _a.style, props = __rest(_a, ["color", "width", "mr", "mt", "style"]);
-    return (React__default.createElement("svg", __assign({ viewBox: "0 0 180 180", fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: 2, width: width, style: __assign({ display: "inline-block", verticalAlign: "top", marginRight: mr, marginTop: mt }, style) }, props),
-        React__default.createElement("path", { fill: "none", d: "M0 0h180v180H0z" }),
-        React__default.createElement("path", { d: "M99.53 103.144H30.762c-10.782 0-19.605 8.822-19.605 19.605 0 9.944 7.505 18.213 17.129 19.442.706 1.155 5.036 8.91-2.248 14.87 0 0 11.194-4.702 16.353-14.707H99.53c10.782 0 19.605-8.823 19.605-19.605 0-10.783-8.823-19.605-19.605-19.605zm42.487-80.21H38.463c-19.973 0-36.316 16.343-36.316 36.316 0 19.974 16.343 36.316 36.316 36.316h91.308c10.926 14.742 31.977 16.093 31.977 16.093-10.79-3.966-10.476-13.812-9.958-17.449 15.265-4.296 26.543-18.37 26.543-34.96 0-19.973-16.341-36.316-36.316-36.316z", fill: color })));
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement("path", { d: "M16.67 13.13C18.04 14.06 19 15.32 19 17v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2c0-2.18-3.57-3.47-6.33-3.87ZM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24ZM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2ZM9 13c-2.67 0-8 1.34-8 4v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2c0-2.66-5.33-4-8-4Zm6 5H3v-.99C3.2 16.29 6.3 15 9 15s5.8 1.29 6 2v1Z", fill: color }) : React__default.createElement("path", { d: "M16.67 13.13C18.04 14.06 19 15.32 19 17v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2c0-2.18-3.57-3.47-6.33-3.87ZM15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4c-.47 0-.91.1-1.33.24a5.98 5.98 0 0 1 0 7.52c.42.14.86.24 1.33.24ZM9 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4ZM9 13c-2.67 0-8 1.34-8 4v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2c0-2.66-5.33-4-8-4Z", fill: color })));
 }
 
 function NavSalesIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? "#000000" : _b, width = _a.width, mr = _a.mr, mt = _a.mt, style = _a.style, props = __rest(_a, ["color", "width", "mr", "mt", "style"]);
-    return (React__default.createElement("svg", __assign({ viewBox: "0 0 180 180", fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: 2, width: width, style: __assign({ display: "inline-block", verticalAlign: "top", marginRight: mr, marginTop: mt }, style) }, props),
-        React__default.createElement("path", { fill: "none", d: "M0 0h180v180H0z" }),
-        React__default.createElement("path", { d: "M162.381 43.007c-14.21 6.232-33.594 12.154-48.42 12.914l18.373 8.997-38.41 37.12-20.643-22.363-53.962 48.38a5.124 5.124 0 006.84 7.629l46.443-41.637 20.903 22.645 45.951-44.406 8.367 18.675C149.09 76.169 155.67 57 162.381 43.007", fill: color })));
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("mask", { id: "nav-sales-icon-a", fill: color },
+            React__default.createElement("rect", { x: 1, y: 12, width: 6, height: 9, rx: 1 })),
+        React__default.createElement("rect", { x: 1, y: 12, width: 6, height: 9, rx: 1, stroke: color, strokeWidth: 4, mask: "url(#nav-sales-icon-a)" }),
+        React__default.createElement("mask", { id: "nav-sales-icon-b", fill: color },
+            React__default.createElement("rect", { x: 9, y: 3, width: 6, height: 18, rx: 1 })),
+        React__default.createElement("rect", { x: 9, y: 3, width: 6, height: 18, rx: 1, stroke: color, strokeWidth: 4, mask: "url(#nav-sales-icon-b)" }),
+        React__default.createElement("mask", { id: "nav-sales-icon-c", fill: color },
+            React__default.createElement("rect", { x: 17, y: 9, width: 6, height: 12, rx: 1 })),
+        React__default.createElement("rect", { x: 17, y: 9, width: 6, height: 12, rx: 1, stroke: color, strokeWidth: 4, mask: "url(#nav-sales-icon-c)" })) : React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("rect", { x: 1, y: 12, width: 6, height: 9, rx: 1, fill: color }),
+        React__default.createElement("rect", { x: 9, y: 3, width: 6, height: 18, rx: 1, fill: color }),
+        React__default.createElement("rect", { x: 17, y: 9, width: 6, height: 12, rx: 1, fill: color }))));
 }
 
 function NavProdIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? "#000000" : _b, width = _a.width, mr = _a.mr, mt = _a.mt, style = _a.style, props = __rest(_a, ["color", "width", "mr", "mt", "style"]);
-    return (React__default.createElement("svg", __assign({ viewBox: "0 0 180 180", fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: 2, width: width, style: __assign({ display: "inline-block", verticalAlign: "top", marginRight: mr, marginTop: mt }, style) }, props),
-        React__default.createElement("path", { fill: "none", d: "M0 0h180v180H0z" }),
-        React__default.createElement("path", { d: "M124.649 78.96h-46.03V65.335h46.03c3.747 0 6.812 3.066 6.812 6.813s-3.065 6.812-6.812 6.812m6.812 25.625c0 3.746-3.065 6.812-6.812 6.812h-46.03V97.772h46.03c3.747 0 6.812 3.065 6.812 6.813m0 32.364c0 3.747-3.065 6.812-6.812 6.812h-46.03v-13.624h46.03c3.747 0 6.812 3.065 6.812 6.812M61.275 79.81a7.662 7.662 0 11.002-15.322 7.662 7.662 0 01-.002 15.322m0 32.437a7.662 7.662 0 11.001-15.323 7.662 7.662 0 01-.001 15.323m0 31.913a7.661 7.661 0 110-15.322 7.661 7.661 0 010 15.322M90 26.862a7.662 7.662 0 11-.002 15.322A7.662 7.662 0 0190 26.862m38.802 15.514h-7.661v-6.409c0-.75-.613-1.363-1.363-1.363-7.62 0-14.375-3.704-18.563-9.411-2.613-3.561-6.798-5.625-11.215-5.625s-8.604 2.064-11.216 5.625C74.596 30.9 67.84 34.604 60.22 34.604c-.75 0-1.363.613-1.363 1.363v6.41h-7.66c-5.47 0-9.904 4.433-9.904 9.902v98.248c0 5.47 4.434 9.904 9.904 9.904h77.605c5.47 0 9.904-4.434 9.904-9.904V52.28c0-5.469-4.434-9.903-9.904-9.903", fill: color })));
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H4V5h16v14Z", fill: color }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.701 11.127a1.003 1.003 0 0 0-1.418-1.42L14.82 12.17l-.705-.71a.997.997 0 0 0-1.415 1.405L14.82 15l3.881-3.873Z", fill: color }),
+        React__default.createElement("path", { d: "M10 8a1 1 0 0 0-1-1H6a1 1 0 0 0 0 2h3a1 1 0 0 0 1-1ZM10 12a1 1 0 0 0-1-1H6a1 1 0 1 0 0 2h3a1 1 0 0 0 1-1ZM10 16a1 1 0 0 0-1-1H6a1 1 0 1 0 0 2h3a1 1 0 0 0 1-1Z", fill: color })) : React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2ZM9 17H6c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1s-.45 1-1 1Zm0-4H6c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1s-.45 1-1 1Zm0-4H6c-.55 0-1-.45-1-1s.45-1 1-1h3c.55 0 1 .45 1 1s-.45 1-1 1Zm9.7 2.12-3.17 3.17c-.39.39-1.03.39-1.42 0l-1.41-1.42a.996.996 0 1 1 1.41-1.41l.71.71 2.47-2.47a.996.996 0 0 1 1.41 0l.01.01c.38.39.38 1.03-.01 1.41Z", fill: color })));
 }
 
 function NavFinanceIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? "#000000" : _b, width = _a.width, mr = _a.mr, mt = _a.mt, style = _a.style, props = __rest(_a, ["color", "width", "mr", "mt", "style"]);
-    return (React__default.createElement("svg", __assign({ viewBox: "0 0 180 180", fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: 2, width: width, style: __assign({ display: "inline-block", verticalAlign: "top", marginRight: mr, marginTop: mt }, style) }, props),
-        React__default.createElement("path", { fill: "none", d: "M0 0h180v180H0z" }),
-        React__default.createElement("path", { d: "M62.118 118.457s12.666 12.336 29.115 12.336c8.882 0 16.944-4.605 16.944-14.146 0-19.738-55.599-17.765-55.599-53.13 0-16.943 12.665-30.102 30.924-33.063V14.992h14.146v15.133c19.082 1.645 28.95 12.008 28.95 12.008l-9.21 17.272s-11.186-10.2-25.827-10.2c-9.869 0-17.6 5.758-17.6 13.983 0 19.574 55.434 16.12 55.434 52.966 0 16.778-11.678 31.09-31.747 33.72v15.134H83.502v-15.134c-21.22-2.467-32.899-15.461-32.899-15.461l11.515-15.956z", fill: color })));
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43.96 0 1.504.32 1.76.844.2.413.543.796 1.002.796.485 0 .885-.41.739-.873-.307-.975-1.083-1.786-2.341-2.097v-.545a1.165 1.165 0 0 0-2.33 0v.525c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.126 0-1.772-.357-2.087-.889-.229-.387-.576-.751-1.026-.751-.503 0-.917.433-.745.906.416 1.142 1.469 1.814 2.678 2.064v.53a1.17 1.17 0 1 0 2.34 0v-.5c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42Z", fill: color }) : React__default.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1.41 16.09v.58c0 .73-.6 1.33-1.33 1.33h-.01c-.73 0-1.33-.6-1.33-1.33v-.6c-1.33-.28-2.51-1.01-3.01-2.24-.23-.55.2-1.16.8-1.16h.24c.37 0 .67.25.81.6.29.75 1.05 1.27 2.51 1.27 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21v-.6c0-.73.6-1.33 1.33-1.33h.01c.73 0 1.33.6 1.33 1.33v.62c1.38.34 2.25 1.2 2.63 2.26.2.55-.22 1.13-.81 1.13h-.26c-.37 0-.67-.26-.77-.62-.23-.76-.86-1.25-2.12-1.25-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.02 1.83-1.39 2.83-3.13 3.16Z", fill: color })));
 }
 
 function NavManagementIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? "#000000" : _b, width = _a.width, mr = _a.mr, mt = _a.mt, style = _a.style, props = __rest(_a, ["color", "width", "mr", "mt", "style"]);
-    return (React__default.createElement("svg", __assign({ viewBox: "0 0 180 180", fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: 2, width: width, style: __assign({ display: "inline-block", verticalAlign: "top", marginRight: mr, marginTop: mt }, style) }, props),
-        React__default.createElement("path", { fill: "none", d: "M0 0h180v180H0z" }),
-        React__default.createElement("path", { d: "M89.082 90.27l-13.038 24.108-24.311-25.294-.541-.541c-11.77 14.567-19.975 35.614-22.293 59.597-.01.095-.02.19-.028.286-.683 7.222 3.015 13.676 7.783 13.676h106.608c4.82 0 8.566-6.526 7.868-13.825l-.014-.137c-2.313-23.925-10.483-44.93-22.208-59.492l-24.73 25.73-13.042-24.115c10.605-.327 20.062-5.216 26.473-12.772a36.043 36.043 0 008.585-23.401c0-19.99-16.204-36.192-36.193-36.192-19.988 0-36.192 16.203-36.192 36.192a36.05 36.05 0 008.31 23.076c.092.11.186.22.28.329C68.853 85.1 78.391 90.004 89.082 90.27z", fill: color })));
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h8ZM10 20H8v-2H6v2H4V6h2v2h2V6h2v14Zm2-4v-2h2v-2h-2v-2h8v10h-8v-2h2v-2h-2Zm-4-2v2H6v-2h2Zm0-4v2H6v-2h2Zm8 2v2h2v-2h-2Zm2 4v2h-2v-2h2Z", fill: color }) : React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("path", { d: "M16 12h2v2h-2v-2ZM16 16h2v2h-2v-2Z", fill: color }),
+        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h-8Zm0 2h8v10h-8v-2h2v-2h-2v-2h2v-2h-2v-2ZM8 6H6v2h2V6Zm-2 8h2v2H6v-2Zm2 4H6v2h2v-2Zm-2-8h2v2H6v-2Z", fill: color }))));
 }
 
 function GearIcon(_a) {
@@ -1189,6 +1203,42 @@ function NextPrevIcon(_a) {
         React__default.createElement("path", { d: next ? "M6.43 1.653l9.776 14.796c.318.495.33 1.137.012 1.637l-9.776 15.24c-.452.698-1.381.901-2.078.454a1.497 1.497 0 01-.452-2.073l9.251-14.419-9.239-13.98a1.49 1.49 0 01.428-2.079 1.502 1.502 0 012.078.424z" : "M12.128 1.653L2.352 16.45a1.526 1.526 0 00-.012 1.637l9.776 15.24c.452.698 1.381.901 2.078.454a1.497 1.497 0 00.452-2.073L5.395 17.288l9.239-13.98a1.49 1.49 0 00-.428-2.079 1.502 1.502 0 00-2.078.424z", fill: color })));
 }
 
+function NavResourcesIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.fill, fill = _d === void 0 ? "none" : _d, _e = _a.color, color = _e === void 0 ? "#fff" : _e, _f = _a.outline, outline = _f === void 0 ? true : _f, // outline/completely filled in
+    props = __rest(_a, ["width", "style", "fill", "color", "outline"]);
+    return (React__default.createElement("svg", __assign({ fill: fill, width: width, height: width, style: style }, props), outline ? React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23 6.696c0-.827-.49-1.552-1.22-1.89C20.498 4.226 18.957 4 17.506 4c-1.95 0-4.051.409-5.502 1.532C10.555 4.409 8.453 4 6.502 4c-1.45 0-2.99.225-4.281.807A2.083 2.083 0 0 0 1 6.697v11.52c0 1.328 1.22 2.308 2.481 1.981.98-.255 2.021-.367 3.022-.367 1.56 0 3.221.265 4.562.94.6.306 1.28.306 1.87 0 1.341-.685 3.002-.94 4.562-.94 1.001 0 2.041.112 3.022.367 1.26.337 2.481-.643 2.481-1.981V6.697Zm-11.995.625-.21-.162c-.945-.732-2.528-1.116-4.292-1.116-1.275 0-2.51.2-3.462.627a.106.106 0 0 0-.04.031v11.514a14.08 14.08 0 0 1 3.502-.427c1.43 0 3.03.196 4.502.74V7.322Zm2 11.2c1.477-.548 3.075-.733 4.492-.733 1.136 0 2.34.126 3.502.427V6.701a.107.107 0 0 0-.041-.032c-.939-.424-2.173-.626-3.45-.626-1.765 0-3.348.384-4.294 1.116l-.209.162v11.2Z", fill: color }) : React__default.createElement("path", { d: "M17.508 4c-1.951 0-4.052.409-5.503 1.532C10.555 4.409 8.453 4 6.502 4c-1.45 0-2.99.225-4.281.807A2.083 2.083 0 0 0 1 6.697v11.52c0 1.328 1.22 2.308 2.481 1.981.98-.255 2.021-.367 3.022-.367 1.56 0 3.221.265 4.562.94.6.306 1.28.306 1.87 0 1.341-.685 3.002-.94 4.562-.94 1.001 0 2.041.112 3.022.367 1.26.337 2.481-.643 2.481-1.981V6.697c0-.828-.49-1.553-1.22-1.89C20.498 4.225 18.957 4 17.506 4Zm3.501 13.002c0 .643-.58 1.113-1.2 1-.75-.143-1.531-.204-2.302-.204-1.7 0-4.151.664-5.502 1.532V7.575c1.35-.868 3.802-1.532 5.502-1.532.92 0 1.831.092 2.702.286.46.102.8.52.8 1v9.672Z", fill: color })));
+}
+
+function WarningIcon(_a) {
+    var _b = _a.width, _c = _a.height, props = __rest(_a, ["width", "height"]);
+    return (React__default.createElement("svg", __assign({ width: 31, height: 30, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default.createElement("path", { d: "M.167 0H26a5 5 0 015 5v25H5.167a5 5 0 01-5-5V0z", fill: "url(#prefix__paint0_linear_1503_2433)" }),
+        React__default.createElement("path", { d: "M14.482 17.9h2.22l.2-10.1h-2.64l.22 10.1zm-.12 4.1h2.46v-2.36h-2.46V22z", fill: "#fff" }),
+        React__default.createElement("defs", null,
+            React__default.createElement("linearGradient", { id: "prefix__paint0_linear_1503_2433", x1: 6.5, y1: 35, x2: 27.5, y2: -7.5, gradientUnits: "userSpaceOnUse" },
+                React__default.createElement("stop", { stopColor: "#FA2272" }),
+                React__default.createElement("stop", { offset: 1, stopColor: "#FA224E", stopOpacity: 0 })))));
+}
+
+var CircleProgressIcon = function (_a) {
+    var _b = _a.sqSize, sqSize = _b === void 0 ? 50 : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 5 : _c, _d = _a.percentage, percentage = _d === void 0 ? 0 : _d, _e = _a.strokeColor, strokeColor = _e === void 0 ? colors.primary : _e, _f = _a.textColor, textColor = _f === void 0 ? colors.primary : _f, _g = _a.text, text = _g === void 0 ? '' : _g, _h = _a.textStyle, textStyle = _h === void 0 ? {} : _h, props = __rest(_a, ["sqSize", "strokeWidth", "percentage", "strokeColor", "textColor", "text", "textStyle"]);
+    var radius = (sqSize - strokeWidth) / 2;
+    var viewBox = "0 0 " + sqSize + " " + sqSize;
+    var dashArray = radius * Math.PI * 2;
+    var dashOffset = dashArray - dashArray * percentage / 100;
+    return (React__default.createElement("svg", __assign({ width: sqSize, height: sqSize, viewBox: viewBox }, props),
+        React__default.createElement("circle", { className: "circle-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: strokeWidth + "px", style: { fill: 'none', stroke: colors.disabledButtonBorder, } }),
+        React__default.createElement("circle", { className: "circle-progress", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: strokeWidth + "px", transform: "rotate(-90 " + sqSize / 2 + " " + sqSize / 2 + ")", style: {
+                strokeDasharray: dashArray,
+                strokeDashoffset: dashOffset,
+                fill: 'none',
+                stroke: strokeColor,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+            } }),
+        React__default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: '1em', fontWeight: 'bold', fill: textColor }, textStyle) }, text || percentage + "%")));
+};
+
 var SVG = styled.svg(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
 var templateObject_1$j;
 
@@ -4704,16 +4754,16 @@ var Task = function (_a) {
             typeof assignee !== "undefined" ? "for " + assignee : null,
             typeof assignee !== "undefined" ? "on " : null)));
 };
-var StyledCalendarTaskBody = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n    font-size: 13px;\n    font-family: 'skufont-regular',sans-serif,Roboto;\n    font-weight: normal;\n    white-space: pre-wrap;\n"], ["\n    font-size: 13px;\n    font-family: 'skufont-regular',sans-serif,Roboto;\n    font-weight: normal;\n    white-space: pre-wrap;\n"])));
+var StyledCalendarTaskBody = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n    font-size: 13px;\n    font-family: 'skufont-regular',sans-serif,Roboto;\n"], ["\n    font-size: 13px;\n    font-family: 'skufont-regular',sans-serif,Roboto;\n"])));
 var StyledCalendarTaskWrapper = styled(StyledTask)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\nborder-radius: 5px;\n", "\npadding: 5px;\nmargin: 0;\nheight: 100%;\nmargin-bottom: 7px;\n"], ["\nborder-radius: 5px;\n", "\npadding: 5px;\nmargin: 0;\nheight: 100%;\nmargin-bottom: 7px;\n"])), function (p) { return p.backgroundColor ? "background-color: " + p.backgroundColor + ";" : ''; });
 var CalendarTask = React__default.forwardRef(function (_a, ref) {
-    var title = _a.title, description = _a.description, date = _a.date, _b = _a.completed, completed = _b === void 0 ? false : _b, assignee = _a.assignee, onClickCheckbox = _a.onClickCheckbox, _c = _a.descriptionLength, descriptionLength = _c === void 0 ? null : _c, _d = _a.colorType, colorType = _d === void 0 ? 'light-green' : _d, props = __rest(_a, ["title", "description", "date", "completed", "assignee", "onClickCheckbox", "descriptionLength", "colorType"]);
+    var title = _a.title, description = _a.description, date = _a.date, _b = _a.completed, completed = _b === void 0 ? false : _b, assignee = _a.assignee, onClickCheckbox = _a.onClickCheckbox, _c = _a.colorType, colorType = _c === void 0 ? 'light-green' : _c, _d = _a.isDescriptionHtml, isDescriptionHtml = _d === void 0 ? false : _d, props = __rest(_a, ["title", "description", "date", "completed", "assignee", "onClickCheckbox", "colorType", "isDescriptionHtml"]);
     var _e = useState(completed), checked = _e[0], setChecked = _e[1];
     useEffect(function () {
         setChecked(completed);
-    }, [completed]);
+    }, [completed, title, date]);
     return (React__default.createElement(StyledCalendarTaskWrapper, __assign({ backgroundColor: colorType === 'light-red' ? '#ffebf2' : '#01d37417' }, props),
-        React__default.createElement(LabeledCheckbox, { ref: ref, checked: checked, checkboxPosition: "top-right", checkboxStyle: {
+        React__default.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: {
                 borderColor: checked
                     ? undefined : (colorType === 'light-red' ? 'rgba(209, 69, 121, 0.24)' : '#BEF1DA'),
             }, hoverByLabel: false, labelStyle: { width: '100%', paddingLeft: 0, paddingRight: 0, marginRight: 0, marginLeft: 0, margin: 0, }, label: React__default.createElement(TaskLabel, { onClick: function (e) { e.preventDefault(); }, style: { fontWeight: 'bold' } },
@@ -4729,9 +4779,9 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
                     return !s;
                 });
             } }),
-        React__default.createElement(StyledCalendarTaskBody, { preWrap: typeof description === 'string' }, typeof description === 'string' && descriptionLength ?
-            description.slice(0, descriptionLength)
-            : description),
+        React__default.createElement(StyledCalendarTaskBody, __assign({}, (isDescriptionHtml && typeof description === 'string'
+            ? { dangerouslySetInnerHTML: { __html: description } }
+            : { children: description }))),
         React__default.createElement("div", { className: "task-metadata" },
             typeof assignee !== "undefined" ? "for " + assignee : null,
             typeof assignee !== "undefined" ? "on " : null)));
@@ -5320,6 +5370,9 @@ var useCalendar = function (_a) {
         else if (action === "next") {
             dt = addMonths(currentMonth, 1);
         }
+        else if (action === "reset") {
+            dt = today;
+        }
         setCurrentMonth(dt);
         onChangeMonth && onChangeMonth({
             action: action,
@@ -5336,6 +5389,9 @@ var useCalendar = function (_a) {
         else if (action === "next") {
             dt = addWeeks(currentMonth, 1);
         }
+        else if (action === "reset") {
+            dt = today;
+        }
         setCurrentMonth(dt);
         var week = getWeek(dt);
         setCurrentWeek(week);
@@ -5355,6 +5411,11 @@ var useCalendar = function (_a) {
             setSelectedDate(day);
         }
     };
+    // reset to today's date
+    var resetToToday = function () {
+        setSelectedDate(today);
+        changeWeek('reset');
+    };
     var onNextWeek = function () { return changeWeek("next"); };
     var onPrevWeek = function () { return changeWeek("prev"); };
     var onNextMonth = function () { return changeMonth("next"); };
@@ -5372,6 +5433,7 @@ var useCalendar = function (_a) {
         onNextMonth: onNextMonth,
         onPrevMonth: onPrevMonth,
         getDatesBetween: getDatesBetween,
+        onReset: resetToToday,
     };
 };
 
@@ -6350,14 +6412,15 @@ function CollapsiblePanels(_a) {
 var templateObject_1$C, templateObject_2$q, templateObject_3$j;
 
 var ProgressWrapper$1 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  max-width: 100%;\n  width: 100%;\n  height: 48px;\n  background: linear-gradient(180deg, rgba(1, 211, 116, 0.051) 0%, rgba(1, 211, 116, 0.1) 100%);\n  box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n  border-radius: 50px;\n  \n  ", "\n"], ["\n  max-width: 100%;\n  width: 100%;\n  height: 48px;\n  background: linear-gradient(180deg, rgba(1, 211, 116, 0.051) 0%, rgba(1, 211, 116, 0.1) 100%);\n  box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n  border-radius: 50px;\n  \n  ", "\n"])), SharedStyles);
-var ProgressBar$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  max-width: 100%;\n  width: ", "%;\n  height: 48px;\n  background: ", ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"], ["\n  max-width: 100%;\n  width: ", "%;\n  height: 48px;\n  background: ",
-    ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"])), function (props) { return 100 * props.value / props.max; }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
+var ProgressBar$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  max-width: 100%;\n  width: calc(", "% - ", "px);\n  height: 48px;\n  background: ", ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"], ["\n  max-width: 100%;\n  width: calc(", "% - ", "px);\n  height: 48px;\n  background: ",
+    ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"])), function (props) { return 100 * props.value / props.max; }, function (p) { return p.left || 0; }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
 var StyledProgressTitle = styled(Text)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: inline-block;\n  position: absolute;\n  z-index: 9;\n  vertical-align: middle;\n  padding: 12px;\n  color: #FFFFFF;\n  font-size: 18px;\n  text-shadow: 0px 1px 2px #40B07E;\n"], ["\n  display: inline-block;\n  position: absolute;\n  z-index: 9;\n  vertical-align: middle;\n  padding: 12px;\n  color: #FFFFFF;\n  font-size: 18px;\n  text-shadow: 0px 1px 2px #40B07E;\n"])));
 var LabeledBar = function (props) {
     var width = useWindowSize()[0];
-    var _a = useState({ left: 0, width: 0 }), size = _a[0], setSize = _a[1];
+    var _a = useState({ height: 0, width: 0, x: 0, y: 0, }), size = _a[0], setSize = _a[1];
     var measureRef = useCallback(function (node) {
-        setSize(node === null || node === void 0 ? void 0 : node.getBoundingClientRect());
+        var rect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+        setSize(function (s) { return (rect ? __assign(__assign({}, s), { height: rect.height, x: rect.x, y: rect.y, width: (rect.width > width ? width : rect.width) - rect.x }) : __assign(__assign({}, s), { height: 0, width: 0, x: 0, y: 0 })); });
     }, [width, props.text, props.value]);
     var text = (props.text || '') + '';
     return (React__default.createElement(React__default.Fragment, null,
@@ -6368,33 +6431,33 @@ var LabeledBar = function (props) {
                 zIndex: 9,
                 marginTop: -25,
                 color: '#00d374',
-                width: size.width - 10,
+                width: "calc(" + 100 * props.value / props.max + "% - (" + (size.x || 0) + "px + 30px))",
             } }, text),
-        React__default.createElement(ProgressBar$1, __assign({ ref: measureRef }, props))));
+        React__default.createElement(ProgressBar$1, __assign({ ref: measureRef }, props, { left: size.x }))));
 };
-var MultiProgress = function (props) {
-    var max = typeof props.max === 'number'
-        ? props.max
-        : !isNaN(props.max) ? parseInt(props.max) : 0;
+var MultiProgress = function (_a) {
+    var labeled = _a.labeled, error = _a.error, title = _a.title, values = _a.values, maxVal = _a.max, props = __rest(_a, ["labeled", "error", "title", "values", "max"]);
+    var max = typeof maxVal === 'number'
+        ? maxVal
+        : !isNaN(maxVal) ? parseInt(maxVal) : 0;
     return React__default.createElement(ProgressWrapper$1, __assign({}, props),
-        props.title ? React__default.createElement(StyledProgressTitle, null, props.title) : null,
-        props.values.map(function (v, i) {
-            var color = i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374';
+        title ? React__default.createElement(StyledProgressTitle, null, title) : null,
+        values.map(function (v, i) {
+            var color = v.color || (i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374');
             var val = typeof v.value === 'number' ? v.value : !isNaN(v.value) ? parseInt(v.value) : 0;
-            return (props.labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: props.error, color: color, text: v.text ? v.text(val) : val }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: props.error, color: color }));
+            return (labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: error, color: color, text: v.text ? v.text(val) : val, key: "multiprogress-bar-" + val + "-" + i, textColor: v.textColor }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: error, color: color, key: "multiprogress-bar-" + val + "-" + i }));
         }),
-        props.error ? React__default.createElement(Text, { color: "error", bold: true }, props.error) : null);
+        error ? React__default.createElement(Text, { color: "error", bold: true }, error) : null);
 };
 var LabeledMultiProgress = function (props) {
     return React__default.createElement("div", null,
+        React__default.createElement(MultiProgress, __assign({}, props, { labeled: true })),
         React__default.createElement("span", { style: {
                 float: 'right',
                 paddingRight: 8,
             } },
             "Target $",
-            React__default.createElement(Number$1, { commas: true, decimalPoints: 0, num: props.max })),
-        React__default.createElement("br", null),
-        React__default.createElement(MultiProgress, { values: props.values, max: props.max, error: props.error, title: props.title, labeled: true }));
+            React__default.createElement(Number$1, { commas: true, decimalPoints: 0, num: props.max })));
 };
 var templateObject_1$D, templateObject_2$r, templateObject_3$k;
 
@@ -6489,16 +6552,28 @@ var TasksCalendarDayBody = function (_a) {
 
 var WeekNav = styled(Text)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: inline-block;\n  padding: .9rem .5rem;\n"], ["\n  display: inline-block;\n  padding: .9rem .5rem;\n"])));
 var TasksCalendarHeader = function (_a) {
-    var onPrevWeek = _a.onPrevWeek, onNextWeek = _a.onNextWeek, currentMonth = _a.currentMonth, tabs = _a.tabs, weekendsCheckbox = _a.weekendsCheckbox;
+    var onPrevWeek = _a.onPrevWeek, onNextWeek = _a.onNextWeek, currentMonth = _a.currentMonth, currentWeek = _a.currentWeek, onResetDate = _a.onResetDate, selectedDate = _a.selectedDate, _b = _a.tabs, tabs = _b === void 0 ? [] : _b, weekendsCheckbox = _a.weekendsCheckbox, _c = _a.showAddTaskBtn, showAddTaskBtn = _c === void 0 ? true : _c, onClickAddTask = _a.onClickAddTask;
+    var isCurrentWeek = currentWeek === getWeek(selectedDate);
     return (React__default.createElement(HeaderWrapper, { style: { padding: "0.5rem" } },
-        React__default.createElement(Col, { start: true, xs: true, md: 9, padded: true },
+        React__default.createElement(Col, { start: true, xs: true, md: 7, padded: true },
             React__default.createElement(Tabs, { size: "small", tabs: tabs })),
-        React__default.createElement(Col, { end: true, xs: true, md: 3, style: { fontSize: '0.8em' } },
+        React__default.createElement(Col, { end: true, xs: true, md: 5, style: { fontSize: '0.8em' } },
+            showAddTaskBtn ? React__default.createElement(Button, { onClick: onClickAddTask, style: { marginRight: 10, verticalAlign: 'bottom', } }, "+ Add Task") : null,
             React__default.createElement(Dropdown, { icon: React__default.createElement(GearIcon, { width: "25", color: "#02C0DA" }) },
                 React__default.createElement(Row, null, weekendsCheckbox)),
             React__default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, }, onClick: onPrevWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem" })),
-            React__default.createElement(WeekNav, { style: { color: colors.disabledButton, verticalAlign: "middle" } }, currentMonth ? format(currentMonth, "MMM yyyy") : ''),
+            React__default.createElement(WeekNav, { style: { color: colors.disabledButton, verticalAlign: "middle" } },
+                currentMonth ? format(currentMonth, "MMM yyyy") : '',
+                !isCurrentWeek ? React__default.createElement("span", { style: {
+                        display: 'block',
+                        textAlign: 'center',
+                        borderRadius: 5,
+                        background: '#02c0da',
+                        color: '#fff',
+                        padding: 4,
+                        cursor: 'pointer',
+                    }, onClick: function () { return onResetDate(); } }, "Today") : null),
             React__default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, }, onClick: onNextWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem", next: true })))));
 };
@@ -6566,7 +6641,7 @@ function convertTasksToDays(_a) {
 }
 var TasksCalendar = function (_a) {
     var tasks = _a.tasks, _b = _a.headerTabs, headerTabs = _b === void 0 ? [] : _b, _c = _a.footerTasks, footerTasks = _c === void 0 ? [] : _c, _d = _a.components, props = __rest(_a, ["tasks", "headerTabs", "footerTasks", "components"]);
-    var _e = useCalendar({}), currentMonth = _e.currentMonth, currentWeek = _e.currentWeek, selectedDate = _e.selectedDate, onNextWeek = _e.onNextWeek, onPrevWeek = _e.onPrevWeek, onNextMonth = _e.onNextMonth, onPrevMonth = _e.onPrevMonth, onClickDay = _e.onClickDay;
+    var _e = useCalendar({}), currentMonth = _e.currentMonth, currentWeek = _e.currentWeek, selectedDate = _e.selectedDate, onNextWeek = _e.onNextWeek, onPrevWeek = _e.onPrevWeek, onNextMonth = _e.onNextMonth, onPrevMonth = _e.onPrevMonth, onClickDay = _e.onClickDay, onReset = _e.onReset;
     var _f = useState(convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, })), days = _f[0], setDays = _f[1];
     var headerProps = {
         onNextWeek: onNextWeek,
@@ -6578,7 +6653,7 @@ var TasksCalendar = function (_a) {
         selectedDate: selectedDate,
     };
     return (React__default.createElement(CalendarWrapper, null,
-        React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { tabs: headerTabs, weekendsCheckbox: React__default.createElement("div", null) })),
+        React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { onResetDate: onReset, tabs: headerTabs, weekendsCheckbox: React__default.createElement("div", null) })),
         React__default.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: React__default.createElement("div", null), weekend: true }),
         React__default.createElement(CalendarDaysBody, { currentMonth: currentMonth, selectedDate: selectedDate, onClickDay: onClickDay, dayBodyProps: { tasks: tasks }, components: { DayBody: TasksCalendarDayBody, }, days: days }),
         React__default.createElement(TasksCalendarFooter, __assign({}, headerProps, { tasks: footerTasks }))));
@@ -6600,13 +6675,32 @@ var droppableChildWrapperProps = function (provided, snapshot, props) {
 };
 
 var DraggableCalendarFooterTasks = function (_a) {
-    var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
+    var onClickTask = _a.onClickTask, onUpdateTask = _a.onUpdateTask, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
     return (React__default.createElement(HeaderWrapper, null,
         React__default.createElement(Col, { start: true, xs: true }, "Overdue: "),
         React__default.createElement(Col, { xs: true },
             React__default.createElement(Row, null, tasks
-                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot)),
-                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })); })))));
+                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot), { onClick: function (e) { onClickTask && onClickTask(t); } }),
+                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined, onClickCheckbox: function (completed) {
+                        if (onUpdateTask) {
+                            onUpdateTask(__assign(__assign({}, t), { completed: completed }), {
+                                index: j,
+                                action: 'TOGGLE_CHECKBOX',
+                                oldTask: t,
+                                updatedFields: ['completed'],
+                            });
+                        }
+                        else if (t.onClickCheckbox) {
+                            t.onClickCheckbox(completed);
+                        }
+                    } })))); })); })))));
+};
+
+var DroppableFooter = function (_a) {
+    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
+    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
+        provided.placeholder,
+        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
 };
 
 var DraggableTaskBody = function (_a) {
@@ -6626,7 +6720,8 @@ var DraggableTaskBody = function (_a) {
                         task.onClickCheckbox(completed);
                     }
                 } }))))); }));
-};
+};
+
 var DroppableDays = function (_a) {
     var days = _a.days, selectedDate = _a.selectedDate, onUpdateTask = _a.onUpdateTask, onClickDay = _a.onClickDay, onClickTask = _a.onClickTask, weekend = _a.weekend, props = __rest(_a, ["days", "selectedDate", "onUpdateTask", "onClickDay", "onClickTask", "weekend"]);
     return (React__default.createElement(DaysBodyWrapper, __assign({ className: "days-body-wrapper" }, props),
@@ -6641,24 +6736,19 @@ var DroppableDays = function (_a) {
                                     onUpdateTask(newData, __assign(__assign({}, otherData), { day__id: __id__, task__id: t.__id__ }));
                                 } : undefined })); }))); }))) : ""));
         }))));
-};
-var DroppableFooter = function (_a) {
-    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
-    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
-        provided.placeholder,
-        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
-};
+};
+
 var DraggableTasksCalendar = function (_a) {
-    var _b = _a.tasks, tasks = _b === void 0 ? [] : _b, onUpdateTask = _a.onUpdateTask, onClickTask = _a.onClickTask, _c = _a.headerTabs, headerTabs = _c === void 0 ? [] : _c, _d = _a.footerTasks, footerTasks = _d === void 0 ? [] : _d, _e = _a.components, _f = _a.weekend, weekend = _f === void 0 ? false : _f, onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth, onToggleWeekend = _a.onToggleWeekend, props = __rest(_a, ["tasks", "onUpdateTask", "onClickTask", "headerTabs", "footerTasks", "components", "weekend", "onChangeWeek", "onChangeMonth", "onToggleWeekend"]);
-    var _g = useCalendar({ onChangeWeek: onChangeWeek, onChangeMonth: onChangeMonth }), currentMonth = _g.currentMonth, currentWeek = _g.currentWeek, selectedDate = _g.selectedDate, onNextWeek = _g.onNextWeek, onPrevWeek = _g.onPrevWeek, onNextMonth = _g.onNextMonth, onPrevMonth = _g.onPrevMonth, onClickDay = _g.onClickDay;
-    var _h = useState({
+    var _b = _a.tasks, tasks = _b === void 0 ? [] : _b, onUpdateTask = _a.onUpdateTask, onClickTask = _a.onClickTask, _c = _a.headerTabs, headerTabs = _c === void 0 ? [] : _c, _d = _a.footerTasks, footerTasks = _d === void 0 ? [] : _d, _e = _a.components, _f = _a.weekend, weekend = _f === void 0 ? false : _f, onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth, onToggleWeekend = _a.onToggleWeekend, _g = _a.showAddTaskBtn, showAddTaskBtn = _g === void 0 ? true : _g, onClickAddTask = _a.onClickAddTask, _h = _a.loading, loading = _h === void 0 ? false : _h, props = __rest(_a, ["tasks", "onUpdateTask", "onClickTask", "headerTabs", "footerTasks", "components", "weekend", "onChangeWeek", "onChangeMonth", "onToggleWeekend", "showAddTaskBtn", "onClickAddTask", "loading"]);
+    var _j = useCalendar({ onChangeWeek: onChangeWeek, onChangeMonth: onChangeMonth }), currentMonth = _j.currentMonth, currentWeek = _j.currentWeek, selectedDate = _j.selectedDate, onNextWeek = _j.onNextWeek, onPrevWeek = _j.onPrevWeek, onNextMonth = _j.onNextMonth, onPrevMonth = _j.onPrevMonth, onClickDay = _j.onClickDay, onReset = _j.onReset;
+    var _k = useState({
         days: convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, }).reduce(function (acc, v) {
             var _a;
             return (__assign(__assign({}, acc), (_a = {}, _a[v.__id__] = v, _a)));
         }, {}),
         footerTasks: footerTasks.filter(function (t) { return t.date ? getWeek(t.date) < currentWeek : false; }),
-    }), state = _h[0], setState = _h[1];
-    var _j = useState(weekend), showWeekend = _j[0], setShowWeekend = _j[1];
+    }), state = _k[0], setState = _k[1];
+    var _l = useState(weekend), showWeekend = _l[0], setShowWeekend = _l[1];
     useEffect(function () {
         setShowWeekend(weekend);
     }, [weekend]);
@@ -6680,6 +6770,8 @@ var DraggableTasksCalendar = function (_a) {
         currentMonth: currentMonth,
         currentWeek: currentWeek,
         selectedDate: selectedDate,
+        showAddTaskBtn: showAddTaskBtn,
+        onClickAddTask: onClickAddTask,
     };
     var onDragEnd = function (result) {
         if (!result.destination)
@@ -6757,10 +6849,11 @@ var DraggableTasksCalendar = function (_a) {
         }); } });
     return (React__default.createElement(DragDropContext, { onDragEnd: function (result) { return onDragEnd(result); } },
         React__default.createElement(CalendarWrapper, null,
-            React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { tabs: headerTabs, weekendsCheckbox: weekendsCheckbox })),
+            React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { onResetDate: onReset, tabs: headerTabs, weekendsCheckbox: weekendsCheckbox })),
             React__default.createElement("div", { className: "calendar-scroll" },
                 React__default.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: weekendsCheckbox, weekend: showWeekend }),
-                React__default.createElement(DroppableDays, { days: state.days, selectedDate: selectedDate, onClickDay: onClickDay, onClickTask: onClickTask, weekend: showWeekend, onUpdateTask: function (newData, _a) {
+                loading ? React__default.createElement("div", { style: { height: 400, paddingTop: 30, } },
+                    React__default.createElement(Loading, null)) : React__default.createElement(DroppableDays, { days: state.days, selectedDate: selectedDate, onClickDay: onClickDay, onClickTask: onClickTask, weekend: showWeekend, onUpdateTask: function (newData, _a) {
                         var day__id = _a.day__id, task__id = _a.task__id, otherData = __rest(_a, ["day__id", "task__id"]);
                         if (!day__id) {
                             return;
@@ -6776,8 +6869,78 @@ var DraggableTasksCalendar = function (_a) {
                             });
                         })();
                     } })),
-            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks }, headerProps)))));
+            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks, onClickTask: onClickTask, onUpdateTask: function (newData, _a) {
+                    var day__id = _a.day__id, task__id = _a.task__id, otherData = __rest(_a, ["day__id", "task__id"]);
+                    _.flowRight(function () {
+                        onUpdateTask(newData, otherData);
+                    }, function () {
+                        if (!day__id) {
+                            return;
+                        }
+                        setState(function (s) {
+                            var _a;
+                            return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArrays(s.days[day__id].tasks.slice(0, otherData.index), [
+                                        __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
+                                    ], s.days[day__id].tasks.slice(otherData.index + 1)) }), _a)) });
+                        });
+                    })();
+                } }, headerProps)))));
 };
 
-export { Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, Box, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, ChangeRequestedIcon, ChatIcon, CheckMark, ClientApprovedIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, ColumnSelectIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, Dot, DownArrowIcon, DownloadIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, ErrorBoundary, FeedPost, GearIcon, GlobalStyle, Grid, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, Link, Loading, LockIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavSalesIcon, NextPrevIcon, NoMarketingIcon, NoteIcon, Number$1 as Number, Overlay, Padding, Page, PanelContact, PanelIcon, PanelTileContact, PendingApprovalIcon, PinIcon, Popup, PopupHeader, Product, Progress, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioLabel, ResponsiveTable, Row, SHARED_STYLE_MAPS, SKUSelect as Select, SharedStyles, ShowPopup, SidePanel, SizerCss, SizerWrapper, Sparkles, Spinner, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, Text, Textarea, Theme, Toggle, ToggleLink, TrashIcon, UpArrowIcon, UpDownArrowsIcon, Wrapper, YesMarketingIcon, colors, fontSizes, fonts, getColor, getFontSize, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeProperty, themeOptions };
+var scrollbarWidth = function () {
+    // thanks to https://davidwalsh.name/detect-scrollbar-width
+    var scrollDiv = document.createElement('div');
+    scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+    document.body.appendChild(scrollDiv);
+    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    document.body.removeChild(scrollDiv);
+    return scrollbarWidth;
+};
+
+var SimpleWindowedTableStyles = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ",
+    "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, colors.disabledButtonBorder, colors.disabledButtonBorder);
+function SimpleWindowedTable(_a) {
+    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f;
+    var defaultColumn = React__default.useMemo(function () { return ({
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+    }); }, [minWidth, maxWidth]);
+    var scrollBarSize = React__default.useMemo(function () { return scrollbarWidth(); }, []);
+    var _g = useTable(__assign({ columns: columns,
+        data: data,
+        defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _g.getTableProps, getTableBodyProps = _g.getTableBodyProps, headerGroups = _g.headerGroups, rows = _g.rows, totalColumnsWidth = _g.totalColumnsWidth, prepareRow = _g.prepareRow;
+    var headerRef = useRef(null);
+    var rowsRef = useRef();
+    var onListScroll = function (e) {
+        if (headerRef.current && e && e.target) {
+            var target = e.target;
+            headerRef.current.scrollLeft = target.scrollLeft;
+        }
+    };
+    useLayoutEffect(function () {
+        rowsRef.current && rowsRef.current.addEventListener('scroll', onListScroll);
+        return function () {
+            rowsRef.current && rowsRef.current.removeEventListener('scroll', onListScroll);
+        };
+    }, [rowsRef]);
+    var RenderRow = React__default.useCallback(function (_a) {
+        var index = _a.index, style = _a.style;
+        var row = rows[index];
+        prepareRow(row);
+        return (React__default.createElement("div", __assign({}, row.getRowProps({
+            style: style
+        }), { className: "tr" }), row.cells.map(function (cell) {
+            return (React__default.createElement("div", __assign({ onClick: function () { return onClickRow ? onClickRow(cell.row.original) : null; } }, cell.getCellProps(), { className: "td" }), cell.render("Cell")));
+        })));
+    }, [prepareRow, rows, onClickRow]);
+    return (React__default.createElement("div", __assign({}, getTableProps(), { className: "table" }),
+        React__default.createElement("div", { className: "header-wrapper" }, headerGroups.map(function (headerGroup) { return (React__default.createElement("div", __assign({}, headerGroup.getHeaderGroupProps(), { className: "header tr", ref: headerRef }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, column.getHeaderProps(column.getSortByToggleProps()), { className: "th" }),
+            column.render("Header"),
+            React__default.createElement("span", { style: { display: 'inline-block', paddingLeft: 5, verticalAlign: 'text-top' } }, column.isSorted ? (column.isSortedDesc ? React__default.createElement(DownArrowIcon, { width: "15px" }) : React__default.createElement(UpArrowIcon, { width: "15px" })) : React__default.createElement(UpDownArrowsIcon, { width: "15px" })))); }))); })),
+        React__default.createElement("div", __assign({}, getTableBodyProps()),
+            React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "project-table-list-rows", outerRef: rowsRef, onScroll: onScroll }, RenderRow))));
+}
+var templateObject_1$L;
+
+export { Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, Box, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, ChangeRequestedIcon, ChatIcon, CheckMark, CircleProgressIcon, ClientApprovedIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, ColumnSelectIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, Dot, DownArrowIcon, DownloadIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, ErrorBoundary, FeedPost, GearIcon, GlobalStyle, Grid, H1, H2, H3, H4, H5, H6, HeaderWrapper, HeadlessTable, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledSelect, LabeledTextarea, Link, Loading, LockIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NextPrevIcon, NoMarketingIcon, NoteIcon, Number$1 as Number, Overlay, Padding, Page, PanelContact, PanelIcon, PanelTileContact, PendingApprovalIcon, PinIcon, Popup, PopupHeader, Product, Progress, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioLabel, ResponsiveTable, Row, SHARED_STYLE_MAPS, SKUSelect as Select, SharedStyles, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, Text, Textarea, Theme, Toggle, ToggleLink, TrashIcon, UpArrowIcon, UpDownArrowsIcon, WarningIcon, Wrapper, YesMarketingIcon, colors, fontSizes, fonts, getColor, getFontSize, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeProperty, themeOptions };
 //# sourceMappingURL=index.es.js.map