@commonsku/styles 1.13.5 → 1.13.6

package/dist/index.es.js

@@ -401,34 +401,235 @@ var templateObject_1$3, templateObject_2$3, templateObject_3;
 var GlobalStyle = createGlobalStyle(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n  }\n"], ["\n  body {\n    font-family: ", ";\n  }\n"])), function (props) { return _.get(props, ['theme', 'fontFamily'], '"museo-sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif'); });
 var templateObject_1$4;
 
-var colors = {
-    white: '#fff',
-    black: '#000',
-    primary: '#02c0da',
-    cta: '#fa237c',
-    primary0: '#DAE9EE',
-    primary10: '#C9E8F2',
-    primary100: '#00889B',
-    disabledButton: '#DAE9EE',
-    disabledButtonBorder: '#C9E8F2',
-    texttitle: '#123952',
-    textlabel: '#123952',
-    textbody: '#52585C',
-    textplaceholder: '#A4ABAE',
-    bggray: '#EDF2F4',
-    bgblue: '#ECF4F7',
-    inputBorder: '#ABC7D1',
-    special1: '#ffd302',
-    special2: '#00d374',
-    special3: '#ff297c',
-    primaryBg: '#EAF2F6',
-    special2Bg: '#E7FFE9',
-    transparent: 'transparent',
-    error: '#B21154',
-    primary2: '#00A0B6',
-    primary20: '#00788A',
-    primary200: '#004D59',
+var primary1 = {
+    '10': '#F6FEFF',
+    '20': '#E1F7FA',
+    '30': '#A6F4FF',
+    '40': '#5FE6FA',
+    '50': '#28D5EE',
+    '60': '#02C0DA',
+    '65': '#00B1C8',
+    '70': '#00A0B6',
+    '75': '#008EA0',
+    '80': '#00788A',
+    '85': '#006672',
+    '90': '#004D59',
+    'main': '',
+    'main-hover': '',
+    'light': '',
+    'lightest': '',
+    'dark': '',
+    'dark-hover': '',
+    'darkest': '',
+};
+primary1['main'] = primary1['70'];
+primary1['main-hover'] = primary1['75'];
+primary1['lightest'] = primary1['10'];
+primary1['light'] = primary1['30'];
+primary1['dark'] = primary1['80'];
+primary1['dark-hover'] = primary1['85'];
+primary1['darkest'] = primary1['90'];
+var primary2 = {
+    main: '#FFFFFF',
+    border: {
+        main: '#0C5A88',
+    },
+};
+var secondary1 = {
+    '10': '#FFEDF4',
+    '20': '#FDC5DB',
+    '30': '#FC9DC2',
+    '40': '#F55393',
+    '50': '#EB1D6E',
+    '60': '#DB0057',
+    '70': '#C4004E',
+    '80': '#A70043',
+    '90': '#870036',
+    'main': '',
+    'lightest': '',
+    'light': '',
+    'dark': '',
+    'darkest': '',
+};
+secondary1['main'] = secondary1['60'];
+primary1['lightest'] = primary1['10'];
+primary1['light'] = primary1['30'];
+primary1['dark'] = primary1['80'];
+primary1['darkest'] = primary1['90'];
+var secondary2 = {
+    '10': '#FFFDF5',
+    '20': '#FFF9C5',
+    '30': '#FFF597',
+    '40': '#FFE544',
+    '50': '#FFD302',
+    '60': '#E6BA00',
+    '70': '#C69B00',
+    '80': '#9E7800',
+    '90': '#735400',
+    'main': '',
+    'lightest': '',
+    'light': '',
+    'dark': '',
+    'darkest': '',
+};
+secondary2['main'] = secondary2['50'];
+primary1['lightest'] = primary1['10'];
+primary1['light'] = primary1['30'];
+primary1['dark'] = primary1['70'];
+primary1['darkest'] = primary1['90'];
+var secondary3 = {
+    '10': '#F2FFF9',
+    '20': '#C9FDE5',
+    '30': '#A1FBD2',
+    '40': '#59F3AE',
+    '50': '#23E68E',
+    '60': '#00D374',
+    '70': '#00B966',
+    '80': '#009853',
+    '90': '#00733F',
+    'main': '',
+    'lightest': '',
+    'light': '',
+    'dark': '',
+    'darkest': '',
+};
+secondary3['main'] = secondary3['60'];
+primary1['lightest'] = primary1['10'];
+primary1['light'] = primary1['30'];
+primary1['dark'] = primary1['80'];
+primary1['darkest'] = primary1['90'];
+var secondary4 = {
+    '10': '#EDF4F7',
+    '20': '#C6E8F7',
+    '30': '#A1DAF4',
+    '40': '#5BBDEC',
+    '50': '#249AD4',
+    '60': '#0F6EA6',
+    '70': '#0C5A88',
+    '80': '#05476E',
+    '90': '#003C5E',
+    'main': '',
+    'lightest': '',
+    'light': '',
+    'dark': '',
+    'darkest': '',
 };
+secondary4['main'] = secondary4['70'];
+primary1['lightest'] = primary1['10'];
+primary1['light'] = primary1['30'];
+primary1['dark'] = primary1['80'];
+primary1['darkest'] = primary1['90'];
+var neutrals = {
+    '10': '#FFFFFF',
+    '20': '#EDF4F7',
+    '30': '#E6EFF2',
+    '40': '#DAE9EE',
+    '50': '#D0D7DC',
+    '60': '#B8C4CB',
+    '70': '#899CA9',
+    '80': '#597486',
+    '90': '#2A4D63',
+    '100': '#123952',
+    'main': '',
+    'darkest': '',
+    'bodyText': '',
+    'bg1': '',
+    'white': '',
+};
+neutrals['main'] = neutrals['100'];
+neutrals['white'] = neutrals['10'];
+neutrals['bg1'] = neutrals['20'];
+neutrals['bodyText'] = neutrals['90'];
+neutrals['darkest'] = neutrals['100'];
+var errors = {
+    '10': '#FFF2F3',
+    '20': '#FDCACD',
+    '30': '#FBA3A9',
+    '40': '#F35C66',
+    '50': '#E52633',
+    '60': '#D10411',
+    '70': '#B4000C',
+    '80': '#8F000A',
+    '90': '#660007',
+    'main': '',
+    'lightest': '',
+    'light': '',
+    'dark': '',
+    'darkest': '',
+};
+errors['main'] = errors['60'];
+errors['lightest'] = errors['10'];
+errors['light'] = errors['30'];
+errors['dark'] = errors['80'];
+errors['darkest'] = errors['90'];
+var colors = {
+    primary1: primary1,
+    secondary1: secondary1,
+    secondary2: secondary2,
+    secondary3: secondary3,
+    secondary4: secondary4,
+    pink: secondary1,
+    yellow: secondary2,
+    green: secondary3,
+    navy: secondary4,
+    neutrals: neutrals,
+    errors: errors,
+    orders: {
+        'OPPORTUNITY': {
+            main: primary1['80'],
+        },
+        'PRESENTATION': {
+            main: primary1['70'],
+        },
+        'ESTIMATE': {
+            main: primary1['50'],
+        },
+        'PRE-SALES': {
+            main: primary1['60'],
+        },
+        'SALES ORDER': {
+            main: secondary2['50'],
+        },
+        'INVOICE': {
+            main: secondary3['60'],
+        },
+        'TARGET': {
+            main: secondary1['50'],
+        },
+    },
+    notes: {
+        main: secondary1['50'],
+    },
+    calls: {
+        main: secondary4['40'],
+    },
+    meetings: {
+        main: secondary4['80'],
+    },
+    left_nav: {
+        main: primary1['70'],
+        sub_menu: {
+            bg: primary1['80'],
+            link: {
+                bg: primary1['90'],
+                text: primary2.main,
+            },
+        },
+        link: {
+            text: primary2.main,
+        },
+    },
+    text: {
+        main: neutrals['90'],
+        bold: neutrals['100'],
+        body: neutrals['90'],
+        title: neutrals['100'],
+        label: neutrals['100'],
+        placeholder: '#A4ABAE',
+    },
+};
+
+var colors$1 = __assign({ white: '#fff', black: '#000', primary: '#02c0da', cta: '#fa237c', primary0: '#DAE9EE', primary10: '#C9E8F2', primary100: '#00889B', disabledButton: '#DAE9EE', disabledButtonBorder: '#C9E8F2', texttitle: '#123952', textlabel: '#123952', textbody: '#52585C', textplaceholder: '#A4ABAE', bggray: '#EDF2F4', bgblue: '#ECF4F7', inputBorder: '#ABC7D1', special1: '#ffd302', special2: '#00d374', special3: '#ff297c', primaryBg: '#EAF2F6', special2Bg: '#E7FFE9', transparent: 'transparent', error: '#B21154', primary2: '#00A0B6', primary20: '#00788A', primary200: '#004D59', tableHeaderBg: '#F6FEFF', tableBorder: '#edf2f5' }, colors);
 var fonts = ["'skufont-demibold'", 'sans-serif', 'Roboto'];
 var fontSizes = {
     tiny: '.8em',
@@ -437,7 +638,7 @@ var fontSizes = {
     large: '3em'
 };
 var themeOptions = {
-    colors: colors,
+    colors: colors$1,
     fonts: fonts,
     fontFamily: "" + fonts.join(","),
     fontSizes: fontSizes,
@@ -457,7 +658,7 @@ var themeOptions = {
 };
 function getColor(color, def) {
     // @ts-ignore
-    return color && colors[color] ? colors[color] : colors[def];
+    return color && colors$1[color] ? colors$1[color] : colors$1[def];
 }
 function getFontSize(value, def) {
     // @ts-ignore
@@ -719,7 +920,7 @@ function Page(props) {
 }
 var templateObject_1$d;
 
-var Text = styled.span(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  font-family: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n"], ["\n  font-family: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n"])), fonts.join(', '), function (props) { var _a; return colors[(_a = props.color) !== null && _a !== void 0 ? _a : 'textbody']; }, function (props) { return props.bg ? get(colors, props.color + "Bg", 'transparent') : 'transparent'; }, function (props) { return props.bg ? '5px' : '0px'; }, function (props) { return props.bg ? '5px' : '0px'; }, SharedStyles);
+var Text = styled.span(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  font-family: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n"], ["\n  font-family: ", ";\n\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  ", "\n"])), fonts.join(', '), function (props) { var _a; return colors$1[(_a = props.color) !== null && _a !== void 0 ? _a : 'textbody']; }, function (props) { return props.bg ? get(colors$1, props.color + "Bg", 'transparent') : 'transparent'; }, function (props) { return props.bg ? '5px' : '0px'; }, function (props) { return props.bg ? '5px' : '0px'; }, SharedStyles);
 var _Link = function (_a) {
     var highlight = _a.highlight, props = __rest(_a, ["highlight"]);
     return React__default.createElement(Text, __assign({ color: highlight ? 'special2' : 'primary' }, props));
@@ -783,7 +984,7 @@ function skuSelectStyles(props) {
         }
     };
 }
-var skuSelectTheme = function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: colors.primary0, primary75: colors.primary0, primary50: colors.primary10, primary: colors.primary, neutral20: colors.inputBorder, neutral30: colors.inputBorder, neutral80: colors.textbody, neutral90: colors.textbody }) })); };
+var skuSelectTheme = function (theme) { return (__assign(__assign({}, theme), { borderRadius: 5, colors: __assign(__assign({}, theme.colors), { primary25: colors$1.primary0, primary75: colors$1.primary0, primary50: colors$1.primary10, primary: colors$1.primary, neutral20: colors$1.inputBorder, neutral30: colors$1.inputBorder, neutral80: colors$1.textbody, neutral90: colors$1.textbody }) })); };
 // duplicate styles to overide .resku global styles
 var SKUSelect = styled(React__default.forwardRef(function (_a, ref) {
     var noMargin = _a.noMargin, menuRelative = _a.menuRelative, inPopup = _a.inPopup, error = _a.error, props = __rest(_a, ["noMargin", "menuRelative", "inPopup", "error"]);
@@ -1221,13 +1422,13 @@ function WarningIcon(_a) {
 }
 
 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 _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$1.primary : _e, _f = _a.textColor, textColor = _f === void 0 ? colors$1.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-background", cx: sqSize / 2, cy: sqSize / 2, r: radius, strokeWidth: strokeWidth + "px", style: { fill: 'none', stroke: colors$1.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,
@@ -1245,8 +1446,8 @@ var templateObject_1$j;
 function Loading(_a) {
     var _b = _a.height, height = _b === void 0 ? 50 : _b, width = _a.width, _c = _a.animationDuration, animationDuration = _c === void 0 ? 1000 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 14 : _d, _e = _a.barRadius, barRadius = _e === void 0 ? 2 : _e, _f = _a.colorful, colorful = _f === void 0 ? false : _f, _g = _a.bars, bars = _g === void 0 ? 4 : _g, _h = _a.viewBox, viewBox = _h === void 0 ? "10 0 51 50" : _h, _j = _a.rotate, startColor = _a.startColor, endColor = _a.endColor, props = __rest(_a, ["height", "width", "animationDuration", "barWidth", "barRadius", "colorful", "bars", "viewBox", "rotate", "startColor", "endColor"]);
     var colorGradient = colorful
-        ? generateColor(startColor || colors.special1, endColor || colors.primary, bars)
-        : generateColor(startColor || colors.primary, endColor || colors.primary0, bars);
+        ? generateColor(startColor || colors$1.special1, endColor || colors$1.primary, bars)
+        : generateColor(startColor || colors$1.primary, endColor || colors$1.primary0, bars);
     var generateBar = function (v) {
         return (React__default.createElement("rect", { key: "bar_" + v, x: 19 * v, y: "0", width: barWidth || 14, height: height, fill: "#" + colorGradient[v], rx: barRadius },
             React__default.createElement("animate", { attributeName: "height", values: "50;10;50", begin: v * 0.2 + "s", dur: animationDuration / 1000 + "s", repeatCount: "indefinite" })));
@@ -1261,6 +1462,49 @@ function Loading(_a) {
     return (React__default.createElement(SVG, __assign({ width: width ? width + "px" : "100%", height: height ? height + "px" : "100%", viewBox: viewBox, transform: "scale(1, -1) translate(0, -1)" }, props), generateBars()));
 }
 
+function Icon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 19 : _b, _c = _a.height, height = _c === void 0 ? 16 : _c, _d = _a.fill, fill = _d === void 0 ? themeOptions.colors.secondary3['60'] : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("path", { d: "m9.5.5 8.66 15H.84L9.5.5Z", fill: fill })));
+}
+
+function Icon$1(_a) {
+    var _b = _a.width, width = _b === void 0 ? 19 : _b, _c = _a.height, height = _c === void 0 ? 16 : _c, _d = _a.fill, fill = _d === void 0 ? themeOptions.colors.errors.main : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("path", { d: "M9 15.5.34.5h17.32L9 15.5Z", fill: fill })));
+}
+
+function Icon$2(_a) {
+    var _b = _a.fill, fill = _b === void 0 ? "#E52633" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, props = __rest(_a, ["fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: 25, height: 24, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("rect", { x: 0.979, y: 0.791, width: 23.042, height: 22.419, rx: 3, fill: fill }),
+        React__default.createElement("path", { d: "M11.137 13.03h2.72l.56-7.44h-3.84l.56 7.44Zm-.4 2.32c0 .88.72 1.6 1.76 1.6s1.76-.72 1.76-1.6c0-.88-.72-1.6-1.76-1.6s-1.76.72-1.76 1.6Z", fill: "#fff" })));
+}
+
+function Icon$3(_a) {
+    var _b = _a.width, width = _b === void 0 ? 35 : _b, _c = _a.height, height = _c === void 0 ? 34 : _c, _d = _a.fill, fill = _d === void 0 ? '#01D374' : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("path", { d: "M17.5.333C8.3.333.833 7.8.833 17c0 9.2 7.467 16.667 16.667 16.667 9.2 0 16.667-7.467 16.667-16.667C34.167 7.8 26.7.333 17.5.333Zm0 30C10.15 30.333 4.167 24.35 4.167 17c0-7.35 5.983-13.333 13.333-13.333 7.35 0 13.333 5.983 13.333 13.333 0 7.35-5.983 13.333-13.333 13.333Zm7.65-20.7L14.167 20.617l-4.317-4.3-2.35 2.35 6.667 6.666L27.5 12l-2.35-2.367Z", fill: fill })));
+}
+
+function Icon$4(_a) {
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.height, height = _c === void 0 ? 24 : _c, _d = _a.fill, fill = _d === void 0 ? themeOptions.colors.primary1.main : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("path", { d: "m17.835 3.87-1.78-1.77-9.89 9.9 9.9 9.9 1.77-1.77L9.705 12l8.13-8.13Z", fill: fill })));
+}
+
+function Icon$5(_a) {
+    var _b = _a.width, width = _b === void 0 ? 24 : _b, _c = _a.height, height = _c === void 0 ? 24 : _c, _d = _a.fill, fill = _d === void 0 ? themeOptions.colors.primary1.main : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("path", { d: "M6.115 20.23 7.885 22l10-10-10-10-1.77 1.77 8.23 8.23-8.23 8.23Z", fill: fill })));
+}
+
+function Icon$6(_a) {
+    var _b = _a.width, width = _b === void 0 ? 13 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.fill, fill = _d === void 0 ? themeOptions.colors.primary1.main : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["width", "height", "fill", "style"]);
+    return (React__default.createElement("svg", __assign({ width: width, height: height, fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style }, props),
+        React__default.createElement("circle", { cx: 6.5, cy: 7, r: 6.5, fill: fill })));
+}
+
 var sharedStyle = css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  line-height: 1.125rem;\n  box-sizing: border-box;\n"], ["\n  line-height: 1.125rem;\n  box-sizing: border-box;\n"])));
 var optionalPadding = css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    padding-right: ", ";\n  }\n"], ["\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    padding-right: ", ";\n  }\n"])), function (props) { return props.padded ? "20px" : "inherit"; }, function (props) { return props.padded ? "20px" : "inherit"; });
 var Table = styled.table.attrs(function () { return ({ cellPadding: 0, cellSpacing: 0 }); })(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  &&& {\n    background-color: white;\n    border: none;\n    border-spacing: 0;\n    width: 100%;\n    table-layout: auto;\n    display: table;\n    font-family: 'skufont-regular', sans-serif;\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    background-color: white;\n    border: none;\n    border-spacing: 0;\n    width: 100%;\n    table-layout: auto;\n    display: table;\n    font-family: 'skufont-regular', sans-serif;\n    ", "\n    ", "\n    ", "\n  }\n"])), sharedStyle, SizerCss, SharedStyles);
@@ -1289,10 +1533,10 @@ var THSorted = function (_a) {
 var templateObject_1$k, templateObject_2$b, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$2, templateObject_8, templateObject_9;
 
 var tabSizes = {
-    small: css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    font-size: 0.9rem;\n    padding: 0.5rem 5px;\n    maring: 0;\n  "], ["\n    font-size: 0.9rem;\n    padding: 0.5rem 5px;\n    maring: 0;\n  "]))),
-    medium: css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    font-size: inherit;\n    padding: 1rem 12px;\n    maring: 0 15px 0 0;\n  "], ["\n    font-size: inherit;\n    padding: 1rem 12px;\n    maring: 0 15px 0 0;\n  "]))),
+    small: css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n    font-size: 0.9rem;\n    padding: 0.5rem 5px;\n    margin: 0;\n  "], ["\n    font-size: 0.9rem;\n    padding: 0.5rem 5px;\n    margin: 0;\n  "]))),
+    medium: css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n    font-size: inherit;\n    padding: 1rem 12px;\n    margin: 0 15px 0 0;\n  "], ["\n    font-size: inherit;\n    padding: 1rem 12px;\n    margin: 0 15px 0 0;\n  "]))),
 };
-var TabBar = styled.ul(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  &&& {\n    display: block;\n    font-size: 1.125rem;\n    font-family: 'skufont-demibold', sans-serif;\n    margin: 0;\n    margin-bottom: ", ";\n    padding: 0;\n    ", "\n  }\n"], ["\n  &&& {\n    display: block;\n    font-size: 1.125rem;\n    font-family: 'skufont-demibold', sans-serif;\n    margin: 0;\n    margin-bottom: ", ";\n    padding: 0;\n    ", "\n  }\n"])), function (props) { return props.padded ? "20px" : 0; }, SharedStyles);
+var TabBar = styled.ul(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  &&& {\n    display: block;\n    font-size: 16px;\n    font-family: 'skufont-demibold', sans-serif;\n    margin: 0;\n    margin-bottom: ", ";\n    padding: 0;\n    ", "\n  }\n"], ["\n  &&& {\n    display: block;\n    font-size: 16px;\n    font-family: 'skufont-demibold', sans-serif;\n    margin: 0;\n    margin-bottom: ", ";\n    padding: 0;\n    ", "\n  }\n"])), function (props) { return props.padded ? "20px" : 0; }, SharedStyles);
 var Tab = styled.li(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  &&& {\n    cursor: pointer;\n    display: inline-block;\n    border-bottom: ", ";\n    color: #222222;\n    opacity: ", ";\n    list-style: none;\n    margin-bottom: 0 !important;\n    position: relative;\n    padding: 1rem 12px;\n    margin-right: 15px;\n    ", "\n\n    ", "\n  }\n"], ["\n  &&& {\n    cursor: pointer;\n    display: inline-block;\n    border-bottom: ", ";\n    color: #222222;\n    opacity: ", ";\n    list-style: none;\n    margin-bottom: 0 !important;\n    position: relative;\n    padding: 1rem 12px;\n    margin-right: 15px;\n    ", "\n\n    ", "\n  }\n"
     /*
     
@@ -4757,13 +5001,13 @@ var Task = function (_a) {
 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.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];
+    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, _e = _a.hideCheckbox, hideCheckbox = _e === void 0 ? false : _e, props = __rest(_a, ["title", "description", "date", "completed", "assignee", "onClickCheckbox", "colorType", "isDescriptionHtml", "hideCheckbox"]);
+    var _f = useState(completed), checked = _f[0], setChecked = _f[1];
     useEffect(function () {
         setChecked(completed);
     }, [completed, title, date]);
     return (React__default.createElement(StyledCalendarTaskWrapper, __assign({ backgroundColor: colorType === 'light-red' ? '#ffebf2' : '#01d37417' }, props),
-        React__default.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: {
+        !hideCheckbox ? 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' } },
@@ -4778,7 +5022,10 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
                     onClickCheckbox && onClickCheckbox(!s);
                     return !s;
                 });
-            } }),
+            } }) : React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(TaskLabel, { onClick: function (e) { e.preventDefault(); }, style: { fontWeight: 'bold' } },
+                React__default.createElement(TaskName, null, title),
+                date ? React__default.createElement("div", null, _.isDate(date) ? format(date, 'yyyy-mm-dd') : date) : null)),
         React__default.createElement(StyledCalendarTaskBody, __assign({}, (isDescriptionHtml && typeof description === 'string'
             ? { dangerouslySetInnerHTML: { __html: description } }
             : { children: description }))),
@@ -4872,9 +5119,9 @@ var DropDownContent = styled.div(templateObject_3$e || (templateObject_3$e = __m
     "\n        font-weight: bold;\n        :last-child {\n            border-bottom: none;\n        }\n\n        &:hover {\n            background-color: ", ";\n            color: ", ";\n            border-radius: 5px;\n            cursor: pointer;\n        }\n    }\n*/\n"])), function (p) { return getColor(p.primary ? 'white' : 'white'); }, function (p) { return getColor(p.primary ? 'primary' : 'cta'); }, function (p) { return p.underlined &&
     "border-bottom: 1px solid " + getColor(p.primary ? 'primary' : 'white') + ";"; }, function (p) { return getColor(p.primary ? 'primary0' : 'cta'); }, function (p) { return getColor(p.primary ? 'texttitle' : 'white'); });
 var Dropdown = function (_a) {
-    var items = _a.items, children = _a.children, underlined = _a.underlined, primary = _a.primary, text = _a.text, icon = _a.icon, _b = _a.openMenu, openMenu = _b === void 0 ? false : _b, mouseLeaveCallback = _a.mouseLeaveCallback, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "mouseLeaveCallback"]);
+    var items = _a.items, _b = _a.children, children = _b === void 0 ? undefined : _b, underlined = _a.underlined, primary = _a.primary, text = _a.text, icon = _a.icon, _c = _a.openMenu, openMenu = _c === void 0 ? false : _c, mouseLeaveCallback = _a.mouseLeaveCallback, size = _a.size, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "mouseLeaveCallback", "size"]);
     var node = useRef();
-    var _c = useState(openMenu), showMenu = _c[0], setShowMenu = _c[1];
+    var _d = useState(openMenu), showMenu = _d[0], setShowMenu = _d[1];
     var iconProps = {
         width: '10px',
         fill: getColor(primary ? 'primary100' : 'white'),
@@ -4908,7 +5155,7 @@ var Dropdown = function (_a) {
             icon ?
                 React__default.createElement("span", { onClick: function () { return setShowMenu(!showMenu); } }, icon)
                 :
-                    React__default.createElement(Button, { cta: Boolean(!primary), onClick: function () { return setShowMenu(!showMenu); } },
+                    React__default.createElement(Button, { size: size, cta: Boolean(!primary), onClick: function () { return setShowMenu(!showMenu); } },
                         text ? text : "Actions",
                         " ",
                         React__default.createElement(UpArrowIcon, __assign({}, iconProps))),
@@ -4923,7 +5170,7 @@ var Dropdown = function (_a) {
 };
 var templateObject_1$w, templateObject_2$l, templateObject_3$e;
 
-var Badge = styled.span(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"], ["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"])), function (p) { return p.color === 'cta' ? colors.cta : p.color === 'grey' ? colors.primary0 : colors.primary; }, function (p) { return p.color === 'grey' ? colors.primary100 : colors.white; }, SharedStyles);
+var Badge = styled.span(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"], ["\n  display: inline-block;\n  min-width: 10px;\n  padding: 3px 7px;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  color: #fff;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 10px;\n  ", "\n"])), function (p) { return p.color === 'cta' ? colors$1.cta : p.color === 'grey' ? colors$1.primary0 : colors$1.primary; }, function (p) { return p.color === 'grey' ? colors$1.primary100 : colors$1.white; }, SharedStyles);
 var templateObject_1$x;
 
 var verticalScrollbarWidth = function verticalScrollbarWidth() {
@@ -6315,8 +6562,8 @@ Transition.ENTERED = 3;
 Transition.EXITING = 4;
 
 var CollapseStyled = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n&&& {\n    .collapsed:not(.show) {\n        display: none;\n    }\n\n    .collapsing {\n        position: relative;\n        height: 0;\n        overflow: hidden;\n        transition: height ", "s ease;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .collapsing {\n            transition: none;\n        }\n    }\n}\n"], ["\n&&& {\n    .collapsed:not(.show) {\n        display: none;\n    }\n\n    .collapsing {\n        position: relative;\n        height: 0;\n        overflow: hidden;\n        transition: height ", "s ease;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .collapsing {\n            transition: none;\n        }\n    }\n}\n"])), function (p) { return p.duration ? p.duration / 1000 : '0.35'; });
-var CollapseWrapper = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n&&& {\n    border: 1px solid ", ";\n    border-radius: 5px;\n}\n"], ["\n&&& {\n    border: 1px solid ", ";\n    border-radius: 5px;\n}\n"])), colors.primary0);
-var CollapsiblePanelTitle = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n&&& {\n    background: #f3f6f7;\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    padding: 20px;\n    cursor: pointer;\n}\n"], ["\n&&& {\n    background: #f3f6f7;\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    padding: 20px;\n    cursor: pointer;\n}\n"])), colors.primary0, colors.primary);
+var CollapseWrapper = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n&&& {\n    border: 1px solid ", ";\n    border-radius: 5px;\n}\n"], ["\n&&& {\n    border: 1px solid ", ";\n    border-radius: 5px;\n}\n"])), colors$1.primary0);
+var CollapsiblePanelTitle = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n&&& {\n    background: #f3f6f7;\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    padding: 20px;\n    cursor: pointer;\n}\n"], ["\n&&& {\n    background: #f3f6f7;\n    border-bottom: 1px solid ", ";\n    color: ", ";\n    padding: 20px;\n    cursor: pointer;\n}\n"])), colors$1.primary0, colors$1.primary);
 var transitionStatusToClass = {
     entering: 'collapsing',
     entered: 'collapsed show',
@@ -6496,7 +6743,7 @@ var DaysHeaderWrapper = styled(Row)(templateObject_1$G || (templateObject_1$G =
 var templateObject_1$G;
 
 var StyledDayText = styled(Text)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
-    "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: " + colors.cta + ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    " : ''; });
+    "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: " + colors$1.cta + ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    " : ''; });
 var templateObject_1$H;
 
 var CalendarDaysHeader = function (_a) {
@@ -6534,11 +6781,11 @@ var DefaultCalendarHeader = function (_a) {
                 React__default.createElement(Row, null,
                     React__default.createElement(LabeledCheckbox, { label: "Weekends", checked: true })))),
         React__default.createElement(Col, { padded: true },
-            React__default.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onPrevWeek }, "< Prev Week")),
+            React__default.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onPrevWeek }, "< Prev Week")),
         React__default.createElement(Col, { center: true, padded: true },
-            React__default.createElement("span", { style: { color: colors.disabledButton } }, format(currentMonth, "MMM yyyy"))),
+            React__default.createElement("span", { style: { color: colors$1.disabledButton } }, format(currentMonth, "MMM yyyy"))),
         React__default.createElement(Col, { end: true, padded: true },
-            React__default.createElement("div", { style: { cursor: 'pointer', color: colors.primary, }, onClick: onNextWeek }, "Next Week >"))));
+            React__default.createElement("div", { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onNextWeek }, "Next Week >"))));
 };
 
 var TasksCalendarDayBody = function (_a) {
@@ -6555,14 +6802,14 @@ var TasksCalendarHeader = function (_a) {
     var isCurrentWeek = currentWeek === getWeek(selectedDate);
     return (React__default.createElement(HeaderWrapper, { style: { padding: "0.5rem" } },
         React__default.createElement(Col, { start: true, xs: true, md: 7, padded: true },
-            React__default.createElement(Tabs, { size: "small", tabs: tabs })),
+            React__default.createElement(Tabs, { size: "medium", tabs: tabs })),
         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(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onPrevWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem" })),
-            React__default.createElement(WeekNav, { style: { color: colors.disabledButton, verticalAlign: "middle" } },
+            React__default.createElement(WeekNav, { style: { color: colors$1.disabledButton, verticalAlign: "middle" } },
                 currentMonth ? format(currentMonth, "MMM yyyy") : '',
                 !isCurrentWeek ? React__default.createElement("span", { style: {
                         display: 'block',
@@ -6573,7 +6820,7 @@ var TasksCalendarHeader = function (_a) {
                         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(WeekNav, { style: { cursor: 'pointer', color: colors$1.primary, }, onClick: onNextWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem", next: true })))));
 };
 var templateObject_1$K;
@@ -6697,7 +6944,9 @@ var DraggableCalendarFooterTasks = function (_a) {
 
 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 } })),
+    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: { minHeight: 0, maxHeight: 300, overflow: 'auto' }
+    })),
         provided.placeholder,
         React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
 };
@@ -6745,7 +6994,10 @@ var DraggableTasksCalendar = function (_a) {
             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; }),
+        footerTasks: footerTasks.filter(function (t) { return t.date
+            ? (getWeek(t.date) < currentWeek && getYear(t.date) === getYear(currentMonth))
+                || getYear(t.date) < getYear(currentMonth)
+            : false; }),
     }), state = _k[0], setState = _k[1];
     var _l = useState(weekend), showWeekend = _l[0], setShowWeekend = _l[1];
     useEffect(function () {
@@ -6759,8 +7011,11 @@ var DraggableTasksCalendar = function (_a) {
             }, {}) })); });
     }, [currentMonth, currentWeek, tasks]);
     useEffect(function () {
-        setState(function (s) { return (__assign(__assign({}, s), { footerTasks: footerTasks.filter(function (t) { return t.date ? getWeek(t.date) < currentWeek : false; }) })); });
-    }, [footerTasks, currentWeek]);
+        setState(function (s) { return (__assign(__assign({}, s), { footerTasks: footerTasks.filter(function (t) { return t.date
+                ? (getWeek(t.date) < currentWeek && getYear(t.date) === getYear(currentMonth))
+                    || getYear(t.date) < getYear(currentMonth)
+                : false; }) })); });
+    }, [footerTasks, currentWeek, currentMonth]);
     var headerProps = {
         onNextWeek: onNextWeek,
         onPrevWeek: onPrevWeek,
@@ -6896,25 +7151,43 @@ var scrollbarWidth = function () {
     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);
+var SimpleWindowedTableStyles = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\npadding: 1rem;\n\n.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  ", "\n\n  .header.tr, .table-footer.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  /* set hover styles */\n  ", "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\n    ", "\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.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  ",
+    "\n\n  .header.tr, .table-footer.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  /* set hover styles */\n  ",
+    "\n\n    /* row selected => if selectedRowStyle === true then set background color else set given styles */\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  " : ''; }, function (p) { return p.bordered ?
+    "border: " + (typeof p.bordered === 'string'
+        ? p.bordered
+        : "1px solid " + getThemeColor(p, 'tableBorder', '#edf2f5')) + ";"
+    : ''; }, colors$1.disabledButtonBorder, colors$1.disabledButtonBorder, function (p) { return p.hoverRowBg ?
+    ".tr:not(.header.tr, .table-footer.tr):hover {\n        background: " + (typeof p.hoverRowBg === 'string'
+        ? p.hoverRowBg
+        : getThemeColor(p, 'tableHeaderBg', '#F6FEFF')) + ";\n    }" : ''; }, function (p) { return p.selectedRowIndex && p.selectedRowStyle ?
+    ".tr:nth-child(" + p.selectedRowIndex + ") {\n            " + (typeof p.selectedRowStyle === 'boolean'
+        ? "background: " + getThemeColor(p, 'tableHeaderBg', '#F6FEFF') + ";"
+        : css(p.selectedRowStyle)) + "\n        }" : ''; });
 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 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, _g = _a.tableHeaderProps, tableHeaderProps = _g === void 0 ? {} : _g, _h = _a.tableFooterProps, tableFooterProps = _h === void 0 ? {} : _h, _j = _a.hideFooter, hideFooter = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? '' : _k, NoRowsFound = _a.NoRowsFound;
     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,
+    var _l = 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;
+        defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _l.getTableProps, getTableBodyProps = _l.getTableBodyProps, headerGroups = _l.headerGroups, footerGroups = _l.footerGroups, rows = _l.rows, totalColumnsWidth = _l.totalColumnsWidth, prepareRow = _l.prepareRow;
     var headerRef = useRef(null);
+    var footerRef = useRef(null);
     var rowsRef = useRef();
     var onListScroll = function (e) {
         if (headerRef.current && e && e.target) {
             var target = e.target;
             headerRef.current.scrollLeft = target.scrollLeft;
         }
+        if (footerRef.current && e && e.target) {
+            var target = e.target;
+            footerRef.current.scrollLeft = target.scrollLeft;
+        }
     };
     useLayoutEffect(function () {
         rowsRef.current && rowsRef.current.addEventListener('scroll', onListScroll);
@@ -6923,23 +7196,48 @@ function SimpleWindowedTable(_a) {
         };
     }, [rowsRef]);
     var RenderRow = React__default.useCallback(function (_a) {
-        var index = _a.index, style = _a.style;
+        var index = _a.index, isScrolling = _a.isScrolling, 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")));
+            var cellProps = cell.getCellProps();
+            return (React__default.createElement("div", __assign({}, cellProps, { onClick: function () { return onClickRow ? onClickRow(cell.row.original, index) : null; }, className: "td " + (cellProps.className || '') }), cell.render("Cell", { isScrolling: isScrolling })));
         })));
     }, [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" }),
+    var getHeaderProps = function (column, isFooter) {
+        if (isFooter === void 0) { isFooter = false; }
+        var headerProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), (column.containerProps || {})));
+        if (isFooter) {
+            headerProps = column.getFooterProps(__assign(__assign({}, column.getSortByToggleProps()), (column.containerProps || {})));
+        }
+        var headerStyles = __assign(__assign({}, (headerProps.style || {})), (column.style || {}));
+        var headerClassNames = __spreadArrays([
+            'th'
+        ], (headerProps.className || "").split(' '), (column.className || "").split(' ')).filter(function (v) { return v; }).join(' ');
+        return __assign(__assign({}, headerProps), { style: headerStyles, className: headerClassNames });
+    };
+    var getHeaderGroupProps = function (headerGroup, isFooter) {
+        if (isFooter === void 0) { isFooter = false; }
+        var headerGroupProps = headerGroup.getHeaderGroupProps(__assign({}, (headerGroup.containerProps || {})));
+        if (isFooter) {
+            headerGroupProps = headerGroup.getFooterGroupProps(__assign({}, (headerGroup.containerProps || {})));
+        }
+        var headerStyles = __assign(__assign({}, (headerGroupProps.style || {})), (headerGroup.style || {}));
+        var headerClassNames = __spreadArrays([
+            isFooter ? 'footer tr' : 'header tr'
+        ], (headerGroupProps.className || "").split(' '), (headerGroup.className || "").split(' ')).filter(function (v) { return v; }).join(' ');
+        return __assign(__assign({}, headerGroupProps), { style: headerStyles, className: headerClassNames });
+    };
+    return (React__default.createElement("div", __assign({}, getTableProps(), { className: "table " + (className || '') }),
+        React__default.createElement("div", __assign({}, tableHeaderProps, { className: "header-wrapper " + (tableHeaderProps.className || '') }), headerGroups.map(function (headerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { className: "header tr", ref: headerRef }), headerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, false)),
             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))));
+            column.canSort ? 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" })) : null)); }))); })),
+        React__default.createElement("div", __assign({}, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React__default.createElement(NoRowsFound, null) : React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "table-list-rows", outerRef: rowsRef, onScroll: onScroll, useIsScrolling: true }, RenderRow)),
+        !hideFooter ? React__default.createElement("div", __assign({}, tableFooterProps, { className: "table-footer-wrapper " + (tableFooterProps.className || '') }), footerGroups.map(function (footerGroup) { return (React__default.createElement("div", __assign({}, getHeaderGroupProps(footerGroup, true), { className: "table-footer tr", ref: footerRef }), footerGroup.headers.map(function (column) { return (React__default.createElement("div", __assign({}, getHeaderProps(column, true)), column.render("Footer"))); }))); })) : null));
 }
 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 };
+export { Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, Box, Icon$6 as BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, ChangeRequestedIcon, ChatIcon, CheckMark, Icon$3 as CheckmarkIcon, 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, Icon$2 as ErrorIcon, 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, Icon$4 as LeftArrowIcon, 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, Icon$5 as RightArrowIcon, Row, SHARED_STYLE_MAPS, Icon$1 as SalesDownArrowIcon, Icon as SalesUpArrowIcon, 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$1 as colors, fontSizes, fonts, getColor, getFontSize, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeProperty, sizes$1 as sizes, themeOptions };
 //# sourceMappingURL=index.es.js.map