@commonsku/styles 1.14.8 → 1.16.0

package/dist/index.es.js

@@ -1,21 +1,20 @@
 import _, { map, pick, keys, isUndefined, get, toNumber, partial, uniqueId, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
-import React__default, { Fragment, useState, useEffect, useRef, Component, createContext, memo, forwardRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import React__default, { Fragment, useState, useEffect, useRef, Component, useCallback, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import BaseSelect from 'react-select';
 export { components, createFilter, mergeStyles } from 'react-select';
 import BaseCreatableSelect from 'react-select/creatable';
-export { makeCreatableSelect } from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactDOM from 'react-dom';
 import { format, addDays, getWeek, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
 import BaseDatePicker from 'react-datepicker';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout, useExpanded } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList, VariableSizeList } from 'react-window';
-import { Draggable, Droppable, DragDropContext } from 'react-beautiful-dnd';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -157,6 +156,8 @@ var doc = typeof document !== 'undefined' ? document : {
     },
 };
 var win = typeof window !== 'undefined' ? window : {
+    innerWidth: 0,
+    innerHeight: 0,
     document: doc,
     navigator: {
         userAgent: '',
@@ -211,13 +212,28 @@ var ssr = {
 };
 
 var media = {
-    xs: function (styles) { return "\n        @media only screen and (min-width: 0px) {\n            ".concat(styles, "\n        }\n    "); },
-    sm: function (styles) { return "\n        @media only screen and (min-width: 640px) {\n            ".concat(styles, "\n        }\n    "); },
-    md: function (styles) { return "\n        @media only screen and (min-width: 768px) {\n            ".concat(styles, "\n        }\n    "); },
-    lg: function (styles) { return "\n        @media only screen and (min-width: 1024px) {\n            ".concat(styles, "\n        }\n    "); },
-    xl: function (styles) { return "\n        @media only screen and (min-width: 1280px) {\n            ".concat(styles, "\n        }\n    "); },
+    xs: function (styles) { return "\n        @media only screen and (min-width: 0px) {\n            ".concat(typeof styles === 'string' ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n        }\n    "); },
+    sm: function (styles) { return "\n        @media only screen and (min-width: 640px) {\n            ".concat(typeof styles === 'string' ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n        }\n    "); },
+    md: function (styles) { return "\n        @media only screen and (min-width: 768px) {\n            ".concat(typeof styles === 'string' ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n        }\n    "); },
+    lg: function (styles) { return "\n        @media only screen and (min-width: 1024px) {\n            ".concat(typeof styles === 'string' ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n        }\n    "); },
+    xl: function (styles) { return "\n        @media only screen and (min-width: 1280px) {\n            ".concat(typeof styles === 'string' ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ""], ["", ""])), styles) : css(styles), "\n        }\n    "); },
 };
-var sizes = Object.keys(media);
+var sizeMediaWidth = {
+    xs: '0px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+};
+var sizeMedia = {
+    xs: "@media only screen and (min-width: ".concat(sizeMediaWidth.xs, ")"),
+    sm: "@media only screen and (min-width: ".concat(sizeMediaWidth.sm, ")"),
+    md: "@media only screen and (min-width: ".concat(sizeMediaWidth.md, ")"),
+    lg: "@media only screen and (min-width: ".concat(sizeMediaWidth.lg, ")"),
+    xl: "@media only screen and (min-width: ".concat(sizeMediaWidth.xl, ")"),
+};
+var sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 function hex(c) {
     var s = "0123456789abcdef";
@@ -335,9 +351,21 @@ var onChangeNumber = function (value) {
         return null;
     }
     return val;
-};
+};
+// (+|-)100(px|em|rem|...) => px|em|rem|...
+var getUnit = function (measurement) {
+    if (typeof measurement !== "string") {
+        return "px";
+    }
+    var matchedMeasurement = measurement.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/);
+    return matchedMeasurement ? matchedMeasurement[2] : "px";
+};
+var stripUnit = function (measurement) {
+    return (typeof measurement === "number") ? measurement : parseFloat(measurement);
+};
+var parseMeasurement = function (measurement) { return stripUnit(measurement) + getUnit(measurement); };
 
-var SharedStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n"], ["\n  box-sizing: border-box;\n  ", "\n"])), function (p) { return map(pick(p, keys(SHARED_STYLE_MAPS)), function (v, k) {
+var SharedStyles = css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", "\n"], ["\n  box-sizing: border-box;\n  ", "\n"])), function (p) { return map(pick(p, keys(SHARED_STYLE_MAPS)), function (v, k) {
     return isUndefined(v) ? '' : SHARED_STYLE_MAPS[k](v);
 }).join(''); });
 var SHARED_STYLE_MAPS = {
@@ -379,8 +407,8 @@ var SHARED_STYLE_MAPS = {
     // Custom Styles
     custom: function (val) { return "".concat(val); },
 };
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), SharedStyles);
-var templateObject_1, templateObject_2;
+var Wrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["", ""], ["", ""])), SharedStyles);
+var templateObject_1$1, templateObject_2$1;
 
 var primary1 = {
     '10': '#F6FEFF',
@@ -787,7 +815,7 @@ var SVG = styled.svg.attrs(function (p) {
         viewBox: p.viewBox || defaultSize.viewBox,
     };
 })(function (p) {
-    return css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n            ", "\n        "], ["\n            ", "\n        "])), SharedStyles);
+    return css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n            ", "\n        "], ["\n            ", "\n        "])), SharedStyles);
 }, function (p) {
     var styles = {};
     var iconSizes = p.iconSizes || iconSize;
@@ -801,7 +829,7 @@ var SVG = styled.svg.attrs(function (p) {
     styles['cursor'] = p.pointer ? 'pointer' : undefined;
     return styles;
 });
-var templateObject_1$1;
+var templateObject_1$2;
 
 function TableIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Calculate" : _d, props = __rest(_a, ["color", "size", "altText"]);
@@ -1156,7 +1184,7 @@ function createFontStyles(p) {
         return "\n      --skufont-".concat(k, ": ").concat(fontFamilies[k], ";\n      --font-family-").concat(k, ": ").concat([fontFamilies[k]].concat(fontFamilies['fallbacks']).join(','), ";\n    ");
     }).join('');
 }
-var GlobalStyle = createGlobalStyle(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n:root {\n  ", "\n  ", "\n  ", "\n}\n&&& {\n  .commonsku-styles-select__input {\n    input {\n      height: auto;\n    }\n  }\n  ", "\n}\n"], ["\n:root {\n  ", "\n  ", "\n  ", "\n}\n&&& {\n  .commonsku-styles-select__input {\n    input {\n      height: auto;\n    }\n  }\n  ", "\n}\n"])), function (p) { return createFontStyles(p); }, function (p) { return parseColorVars(_.get(p, ['theme', 'colors'], {}), ''); }, function (p) {
+var GlobalStyle = createGlobalStyle(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n:root {\n  ", "\n  ", "\n  ", "\n}\n&&& {\n  .commonsku-styles-select__input {\n    input {\n      height: auto;\n    }\n  }\n  ", "\n}\n"], ["\n:root {\n  ", "\n  ", "\n  ", "\n}\n&&& {\n  .commonsku-styles-select__input {\n    input {\n      height: auto;\n    }\n  }\n  ", "\n}\n"])), function (p) { return createFontStyles(p); }, function (p) { return parseColorVars(_.get(p, ['theme', 'colors'], {}), ''); }, function (p) {
     if (!p.additionalStyles) {
         return null;
     }
@@ -1170,7 +1198,7 @@ var GlobalStyle = createGlobalStyle(templateObject_1$2 || (templateObject_1$2 =
             return null;
     }
 }, datepickerStyles);
-var templateObject_1$2;
+var templateObject_1$3;
 
 var fontFamilies = {
     skuFontRegular: "'skufont-regular'",
@@ -1285,6 +1313,10 @@ var themeOptions = {
         '9': '72px',
         '10': '80px',
     },
+    mediaQueries: {
+        sizeMediaWidth: sizeMediaWidth,
+        sizeMedia: sizeMedia,
+    },
 };
 function getColor(color, def) {
     if (!color) {
@@ -1398,8 +1430,8 @@ function CircleProgressIcon(_a) {
         React__default.createElement("text", { className: "circle-text", x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", style: __assign({ fontSize: size === "small" || size === "tiny" ? ".6em" : size === "medium" ? ".8em" : "1em", fontWeight: 'bold', fill: textColor }, textStyle) }, text || "".concat(percentage, "%")));
 }
 
-var SVG$1 = styled.svg(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
-var templateObject_1$3;
+var SVG$1 = styled.svg(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
+var templateObject_1$4;
 
 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"]);
@@ -2064,25 +2096,27 @@ function RadioIcon(_a) {
 }
 
 function CheckboxIcon(_a) {
-    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? teal.light : _c, _d = _a.disabledColor, disabledColor = _d === void 0 ? neutrals['60'] : _d, _e = _a.size, size = _e === void 0 ? "medium" : _e, _f = _a.hover, hover = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.altText, altText = _j === void 0 ? "Select" : _j, props = __rest(_a, ["color", "hoverColor", "disabledColor", "size", "hover", "selected", "disabled", "altText"]);
-    selected ? altText = "Unselect" : altText = "Select";
-    var renderPath = React__default.useMemo(function () {
-        if (selected === true) {
-            return React__default.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-8.29 13.29a.996.996 0 0 1-1.41 0L5.71 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z", fill: disabled ? disabledColor : color });
-        }
-        else if (hover === true && !disabled) {
-            return React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: color }),
-                React__default.createElement("rect", { x: 6, y: 6, width: 12, height: 12, rx: 1, fill: hoverColor }));
-        }
-        // default to unselected
-        return React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: disabled ? disabledColor : color });
-    }, [selected, hover, hoverColor, disabled, disabledColor, color]);
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? teal.light : _c, _d = _a.disabledColor, disabledColor = _d === void 0 ? neutrals['60'] : _d, _e = _a.size, size = _e === void 0 ? "medium" : _e, _f = _a.hover, hover = _f === void 0 ? false : _f, _g = _a.selected, selected = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.indeterminate, indeterminate = _j === void 0 ? false : _j, _k = _a.altText, altText = _k === void 0 ? "Select" : _k, props = __rest(_a, ["color", "hoverColor", "disabledColor", "size", "hover", "selected", "disabled", "indeterminate", "altText"]);
     return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CheckboxIcon" }, props),
-        React__default.createElement("title", { id: "CheckboxIcon" }, altText),
+        React__default.createElement("title", { id: "CheckboxIcon" }, selected && (altText === "Select" || !altText) ? "Unselect" : altText),
         React__default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
-        renderPath);
-}
+        React__default.createElement(IconPath, { indeterminate: indeterminate, selected: selected, hover: hover, disabled: disabled, color: color, hoverColor: hoverColor, disabledColor: disabledColor }));
+}
+var IconPath = React__default.memo(function (props) {
+    var indeterminate = props.indeterminate, selected = props.selected, hover = props.hover, disabled = props.disabled, color = props.color, hoverColor = props.hoverColor, disabledColor = props.disabledColor;
+    if (indeterminate) {
+        return React__default.createElement("path", { d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM16 13H8C7.45 13 7 12.55 7 12C7 11.45 7.45 11 8 11H16C16.55 11 17 11.45 17 12C17 12.55 16.55 13 16 13Z", fill: disabled ? disabledColor : color });
+    }
+    else if (selected) {
+        return React__default.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm-8.29 13.29a.996.996 0 0 1-1.41 0L5.71 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z", fill: disabled ? disabledColor : color });
+    }
+    else if (hover === true && !disabled) {
+        return React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: color }),
+            React__default.createElement("rect", { x: 6, y: 6, width: 12, height: 12, rx: 1, fill: hoverColor }));
+    }
+    return React__default.createElement("path", { d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1Zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Z", fill: disabled ? disabledColor : color });
+});
 
 function EditIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.filled, filled = _d === void 0 ? false : _d, _e = _a.altText, altText = _e === void 0 ? "Edit" : _e, props = __rest(_a, ["color", "size", "filled", "altText"]);
@@ -2213,8 +2247,8 @@ var getSizeStyle = function (style, defaults) {
         return defaults;
     };
 };
-var OuterContainer = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display:inline-flex;\n    flex-direction: row;\n    align-items: top;\n"], ["\n    display:inline-flex;\n    flex-direction: row;\n    align-items: top;\n"])));
-var CommentNumber = styled.p(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display:block;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n"], ["\n    display:block;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n"])), fontStyles.p.small.fontFamily, function (props) { return getSizeStyle('font-size', fontStyles.button.medium.fontSize)({ size: props.size }); }, function (props) { return props.color; });
+var OuterContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display:inline-flex;\n    flex-direction: row;\n    align-items: top;\n"], ["\n    display:inline-flex;\n    flex-direction: row;\n    align-items: top;\n"])));
+var CommentNumber = styled.p(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    display:block;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n"], ["\n    display:block;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n"])), fontStyles.p.small.fontFamily, function (props) { return getSizeStyle('font-size', fontStyles.button.medium.fontSize)({ size: props.size }); }, function (props) { return props.color; });
 function CommentIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Comments" : _d, number = _a.number, props = __rest(_a, ["color", "size", "altText", "number"]);
     var numberToShow = number !== undefined && number <= 99 ? number : '99+';
@@ -2226,7 +2260,7 @@ function CommentIcon(_a) {
                 React__default.createElement("path", { d: "M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18ZM20 4v13.17L18.83 16H4V4h16ZM6 12h12v2H6v-2Zm0-3h12v2H6V9Zm0-3h12v2H6V6Z", fill: color })),
             showNumber)));
 }
-var templateObject_1$4, templateObject_2$1;
+var templateObject_1$5, templateObject_2$2;
 
 function EllipsisIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "More" : _d, props = __rest(_a, ["color", "size", "altText"]);
@@ -2236,6 +2270,14 @@ function EllipsisIcon(_a) {
         React__default.createElement("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z", fill: color }));
 }
 
+function DragIcon(_a) {
+    var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Drag" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "DragIcon" }, props),
+        React__default.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        React__default.createElement("title", { id: "DragIcon" }, altText),
+        React__default.createElement("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z", fill: color }));
+}
+
 function CreditCardIcon(_a) {
     var _b = _a.color, color = _b === void 0 ? teal.main : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.altText, altText = _d === void 0 ? "Credit Card" : _d, props = __rest(_a, ["color", "size", "altText"]);
     return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CreditCardIcon" }, props),
@@ -2313,9 +2355,9 @@ var avatarColors = {
         textColor: secondary1['40']
     }
 };
-var AvatarWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  &&& {\n    display: inline-block;\n    vertical-align: top;\n    overflow: hidden;\n    margin: 0;\n    ", "\n\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    text-align: center;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: inline-block;\n    vertical-align: top;\n    overflow: hidden;\n    margin: 0;\n    ", "\n\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    text-align: center;\n    ", "\n    ", "\n  }\n"])), SharedStyles, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.shape; }, function (props) { var _a; return props.hasPic ? '' : "background: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'backgroundColor'], props.color), ";"); }, function (props) { var _a; return props.hasPic ? '' : "color: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'textColor'], props.color), ";"); });
-var AvatarPic = styled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  &&& {\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  &&& {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var AvatarInitials = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &&& {\n    margin: 0;\n    position: relative;\n    top: 50%;\n    transform: translate(0, -50%);\n    font-family: 'skufont-bold', sans-serif;\n    font-size: ", "\n"], ["\n  &&& {\n    margin: 0;\n    position: relative;\n    top: 50%;\n    transform: translate(0, -50%);\n    font-family: 'skufont-bold', sans-serif;\n    font-size: ", "\n"])), function (props) { var _a; return get(avatarSizes, [(_a = props.size) !== null && _a !== void 0 ? _a : 'small', 'fontSize'], props.size); });
+var AvatarWrapper = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  &&& {\n    display: inline-block;\n    vertical-align: top;\n    overflow: hidden;\n    margin: 0;\n    ", "\n\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    text-align: center;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: inline-block;\n    vertical-align: top;\n    overflow: hidden;\n    margin: 0;\n    ", "\n\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    text-align: center;\n    ", "\n    ", "\n  }\n"])), SharedStyles, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return props.shape; }, function (props) { var _a; return props.hasPic ? '' : "background: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'backgroundColor'], props.color), ";"); }, function (props) { var _a; return props.hasPic ? '' : "color: ".concat(get(avatarColors, [(_a = props.color) !== null && _a !== void 0 ? _a : 'teal', 'textColor'], props.color), ";"); });
+var AvatarPic = styled.img(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  &&& {\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  &&& {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var AvatarInitials = styled.p(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  &&& {\n    margin: 0;\n    position: relative;\n    top: 50%;\n    transform: translate(0, -50%);\n    font-family: 'skufont-bold', sans-serif;\n    font-size: ", "\n"], ["\n  &&& {\n    margin: 0;\n    position: relative;\n    top: 50%;\n    transform: translate(0, -50%);\n    font-family: 'skufont-bold', sans-serif;\n    font-size: ", "\n"])), function (props) { var _a; return get(avatarSizes, [(_a = props.size) !== null && _a !== void 0 ? _a : 'small', 'fontSize'], props.size); });
 var Avatar = function (_a) {
     var pic = _a.pic, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.shape, shape = _c === void 0 ? 'square' : _c, color = _a.color, initials = _a.initials, icon = _a.icon, children = _a.children, props = __rest(_a, ["pic", "size", "shape", "color", "initials", "icon", "children"]);
     if (pic) {
@@ -2331,10 +2373,10 @@ var Avatar = function (_a) {
             React__default.createElement(AvatarInitials, { size: size }, initials !== null && initials !== void 0 ? initials : children));
     }
 };
-var templateObject_1$5, templateObject_2$2, templateObject_3;
+var templateObject_1$6, templateObject_2$3, templateObject_3$1;
 
 var getTotalCols = function (p) { return p.totalCols || 12; };
-var SizerCss = css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", ";\n    ", "\n"], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", ";\n    ", "\n"])), function (props) { return props.start ? "\n        justify-content: flex-start;\n        text-align: left;\n    " : ''; }, function (props) { return props.center ? "\n        justify-content: center;\n        text-align: center;\n    " : ''; }, function (props) { return props.end ? "\n        justify-content: flex-end;\n        text-align: right;\n    " : ''; }, function (props) { return props.offset && "margin-left: ".concat(props.offset / getTotalCols(props) * 100, "%;"); }, function (props) { return props.collapse && typeof (props.collapse) === 'string' && media[props.collapse]("\n        display: none;\n    "); }, function (props) {
+var SizerCss = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", ";\n    ", "\n"], ["\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", ";\n    ", "\n"])), function (props) { return props.start ? "\n        justify-content: flex-start;\n        text-align: left;\n    " : ''; }, function (props) { return props.center ? "\n        justify-content: center;\n        text-align: center;\n    " : ''; }, function (props) { return props.end ? "\n        justify-content: flex-end;\n        text-align: right;\n    " : ''; }, function (props) { return props.offset && "margin-left: ".concat(props.offset / getTotalCols(props) * 100, "%;"); }, function (props) { return props.collapse && typeof (props.collapse) === 'string' && media[props.collapse]("\n        display: none;\n    "); }, function (props) {
     var styles = '';
     if (props.collapse) {
         if (typeof (props.collapse) === 'string') {
@@ -2376,24 +2418,23 @@ var SizerCss = css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObj
     });
     return styles;
 });
-var SizerWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), SizerCss);
-var templateObject_1$6, templateObject_2$3;
+var SizerWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), SizerCss);
+var templateObject_1$7, templateObject_2$4;
 
-var Grid = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), SharedStyles);
-var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    &&& {\n        display: flex;\n        box-sizing: border-box;\n        flex-direction: row;\n        flex: 0 1 auto;\n        justify-content: ", ";\n        flex-wrap: ", ";\n        align-items: ", ";\n        padding: ", ";\n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        display: flex;\n        box-sizing: border-box;\n        flex-direction: row;\n        flex: 0 1 auto;\n        justify-content: ", ";\n        flex-wrap: ", ";\n        align-items: ", ";\n        padding: ", ";\n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"])), function (props) { return props.justify || 'left'; }, function (props) { return props.wrap ? props.wrap : 'wrap'; }, function (props) { return props.align || 'stretch'; }, function (props) { return props.padded ? '0.5rem' : 'initial'; }, function (props) { return props.start ? 'place-content: flex-start;' : ''; }, function (props) { return props.end ? 'place-content: flex-end;' : ''; }, function (props) { return props.middle ? 'align-items: center;' : ''; }, SharedStyles);
-var Col = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    &&& {\n        padding: ", ";\n        flex: 12;\n        flex-grow: 1;\n        box-sizing: border-box;\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        padding: ", ";\n        flex: 12;\n        flex-grow: 1;\n        box-sizing: border-box;\n        ", "\n        ", "\n    }\n"])), function (props) { return props.padded ? '0.5rem' : 'initial'; }, SizerCss, SharedStyles);
-var templateObject_1$7, templateObject_2$4, templateObject_3$1;
+var Row = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n    &&& {\n        display: flex;\n        box-sizing: border-box;\n        flex-direction: row;\n        flex: 0 1 auto;\n        justify-content: ", ";\n        flex-wrap: ", ";\n        align-items: ", ";\n        padding: ", ";\n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        display: flex;\n        box-sizing: border-box;\n        flex-direction: row;\n        flex: 0 1 auto;\n        justify-content: ", ";\n        flex-wrap: ", ";\n        align-items: ", ";\n        padding: ", ";\n        ", "\n        ", "\n        ", "\n        ", "\n    }\n"])), function (props) { return props.justify || 'left'; }, function (props) { return props.wrap ? props.wrap : 'wrap'; }, function (props) { return props.align || 'stretch'; }, function (props) { return props.padded ? '0.5rem' : 'initial'; }, function (props) { return props.start ? 'place-content: flex-start;' : ''; }, function (props) { return props.end ? 'place-content: flex-end;' : ''; }, function (props) { return props.middle ? 'align-items: center;' : ''; }, SharedStyles);
+var Col = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    &&& {\n        padding: ", ";\n        flex: 12;\n        flex-grow: 1;\n        box-sizing: border-box;\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        padding: ", ";\n        flex: 12;\n        flex-grow: 1;\n        box-sizing: border-box;\n        ", "\n        ", "\n    }\n"])), function (props) { return props.padded ? '0.5rem' : 'initial'; }, SizerCss, SharedStyles);
+var templateObject_1$8, templateObject_2$5;
 
-var headingStyle = css(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  font-family: \"skufont-demibold\", sans-serif;\n  color: ", ";\n  font-weight: bold;\n"], ["\n  font-family: \"skufont-demibold\", sans-serif;\n  color: ", ";\n  font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors.texttitle); });
-var H1 = styled.h1(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  &&& {\n    font-size: 30px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 30px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
+var headingStyle = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  font-family: \"skufont-demibold\", sans-serif;\n  color: ", ";\n  font-weight: bold;\n"], ["\n  font-family: \"skufont-demibold\", sans-serif;\n  color: ", ";\n  font-weight: bold;\n"])), function (props) { return getThemeColor(props, 'texttitle', colors.texttitle); });
+var H1 = styled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  &&& {\n    font-size: 30px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 30px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
 var H2 = styled.h2(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
-var H3 = styled.h3(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
-var H4 = styled.h4(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &&& {\n    font-size: 23px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 23px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
+var H3 = styled.h3(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 25px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
+var H4 = styled.h4(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  &&& {\n    font-size: 23px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 23px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
 var H5 = styled.h5(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &&& {\n    font-size: 20px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 20px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
 var H6 = styled.h6(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &&& {\n    font-size: 18px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    font-size: 18px;\n    border-bottom: ", ";\n    ", "\n    ", "\n  }\n"])), function (props) { return props.underlined ? "1px solid #ccc" : "none"; }, headingStyle, SharedStyles);
-var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1$9, templateObject_2$6, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7;
 
-var StyledBox = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  background: white;\n  margin-top: 20px;\n  box-shadow: ", ";\n  border-radius: 5px;\n  padding: 20px ", "px;\n  ", "\n"], ["\n  background: white;\n  margin-top: 20px;\n  box-shadow: ", ";\n  border-radius: 5px;\n  padding: 20px ", "px;\n  ", "\n"])), function (props) { return props.borderless ? 0 : "0 2px 4px rgba(0, 0, 0, 0.07)"; }, function (props) { return props.padded ? 20 : 0; }, SharedStyles);
+var StyledBox = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  background: white;\n  margin-top: 20px;\n  box-shadow: ", ";\n  border-radius: 5px;\n  padding: 20px ", "px;\n  ", "\n"], ["\n  background: white;\n  margin-top: 20px;\n  box-shadow: ", ";\n  border-radius: 5px;\n  padding: 20px ", "px;\n  ", "\n"])), function (props) { return props.borderless ? 0 : "0 2px 4px rgba(0, 0, 0, 0.07)"; }, function (props) { return props.padded ? 20 : 0; }, SharedStyles);
 var Box = function (_a) {
     var title = _a.title, controls = _a.controls, children = _a.children, props = __rest(_a, ["title", "controls", "children"]);
     return (React__default.createElement(StyledBox, __assign({ padded: props.padded, borderless: props.borderless }, props),
@@ -2404,16 +2445,16 @@ var Box = function (_a) {
             : null,
         children));
 };
-var templateObject_1$9;
-
-var Background = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  &&& {\n    background: ", ";\n    padding: 20px ", "px;\n    min-height: ", ";\n    ", "\n  }\n"], ["\n  &&& {\n    background: ", ";\n    padding: 20px ", "px;\n    min-height: ", ";\n    ", "\n  }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
 var templateObject_1$a;
 
-var StyledDropArea = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  &&& {\n    padding: 20px;\n    border: 2px dashed ", "; \n    cursor: pointer;\n    border-radius: 5px;\n    &:hover {\n      background-color: ", ";\n    }\n    border-color: ", ";\n    outline: none;\n    transition: border .24s ease-in-out;\n    width: 100%;\n    ", "\n  }\n"], ["\n  &&& {\n    padding: 20px;\n    border: 2px dashed ", "; \n    cursor: pointer;\n    border-radius: 5px;\n    &:hover {\n      background-color: ", ";\n    }\n    border-color: ", ";\n    outline: none;\n    transition: border .24s ease-in-out;\n    width: 100%;\n    ", "\n  }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, function (props) { return getColor$1(props); }, SharedStyles);
-var PlaceHolder = styled.label(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  &&& {\n    color: ", ";\n    text-align: center;\n    width: 100%;\n    display: block;\n  }\n"], ["\n  &&& {\n    color: ", ";\n    text-align: center;\n    width: 100%;\n    display: block;\n  }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); });
+var Background = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  &&& {\n    background: ", ";\n    padding: 20px ", "px;\n    min-height: ", ";\n    ", "\n  }\n"], ["\n  &&& {\n    background: ", ";\n    padding: 20px ", "px;\n    min-height: ", ";\n    ", "\n  }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); }, function (props) { return props.padded ? 20 : 0; }, function (props) { return props.fillWindow ? "100vh" : 0; }, SharedStyles);
+var templateObject_1$b;
+
+var StyledDropArea = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  &&& {\n    padding: 20px;\n    border: 2px dashed ", "; \n    cursor: pointer;\n    border-radius: 5px;\n    &:hover {\n      background-color: ", ";\n    }\n    border-color: ", ";\n    outline: none;\n    transition: border .24s ease-in-out;\n    width: 100%;\n    ", "\n  }\n"], ["\n  &&& {\n    padding: 20px;\n    border: 2px dashed ", "; \n    cursor: pointer;\n    border-radius: 5px;\n    &:hover {\n      background-color: ", ";\n    }\n    border-color: ", ";\n    outline: none;\n    transition: border .24s ease-in-out;\n    width: 100%;\n    ", "\n  }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, function (props) { return getColor$1(props); }, SharedStyles);
+var PlaceHolder = styled.label(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  &&& {\n    color: ", ";\n    text-align: center;\n    width: 100%;\n    display: block;\n  }\n"], ["\n  &&& {\n    color: ", ";\n    text-align: center;\n    width: 100%;\n    display: block;\n  }\n"])), function (props) { return getThemeColor(props, 'primary', colors.primary); });
 var ThumbsContainer = styled.aside(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin-top: 16px;\n  }\n"], ["\n  &&& {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    margin-top: 16px;\n  }\n"])));
-var Thumb = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    border-radius: 2px;\n    border: 1px solid #eaeaea ", ";\n    margin-bottom: 8px;\n    margin-right: 8px;\n    width: 100px;\n    height: 100px;\n    padding: 4px;\n    box-sizing: border-box;\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    border-radius: 2px;\n    border: 1px solid #eaeaea ", ";\n    margin-bottom: 8px;\n    margin-right: 8px;\n    width: 100px;\n    height: 100px;\n    padding: 4px;\n    box-sizing: border-box;\n  }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); });
-var ThumbInner = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    min-width: 0px;\n    overflow: hidden;\n  }\n"], ["\n  &&& {\n    display: flex;\n    min-width: 0px;\n    overflow: hidden;\n  }\n"])));
+var Thumb = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    border-radius: 2px;\n    border: 1px solid #eaeaea ", ";\n    margin-bottom: 8px;\n    margin-right: 8px;\n    width: 100px;\n    height: 100px;\n    padding: 4px;\n    box-sizing: border-box;\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    border-radius: 2px;\n    border: 1px solid #eaeaea ", ";\n    margin-bottom: 8px;\n    margin-right: 8px;\n    width: 100px;\n    height: 100px;\n    padding: 4px;\n    box-sizing: border-box;\n  }\n"])), function (props) { return getThemeColor(props, 'bggray', colors.bggray); });
+var ThumbInner = styled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    min-width: 0px;\n    overflow: hidden;\n  }\n"], ["\n  &&& {\n    display: flex;\n    min-width: 0px;\n    overflow: hidden;\n  }\n"])));
 var ImgPreview = styled.img(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  &&& {\n    display: block;\n    width: auto;\n    height: 100%;\n  }\n"], ["\n  &&& {\n    display: block;\n    width: auto;\n    height: 100%;\n  }\n"])));
 var DropArea = function (_a) {
     var children = _a.children, placeholder = _a.placeholder, props = __rest(_a, ["children", "placeholder"]);
@@ -2471,7 +2512,7 @@ function DropzonedPreviews(_a) {
                 ? React__default.createElement(ThumbsContainer, null, thumbs)
                 : React__default.createElement(PlaceHolder, null, placeholder))));
 }
-var templateObject_1$b, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1;
+var templateObject_1$c, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1;
 
 /*
 
@@ -2681,11 +2722,29 @@ var getVariantStyles = function (props, variant) {
                     outlineColor: white,
                 },
             };
+        case 'text-error':
+            return {
+                borderWidth: 3,
+                borderStyle: 'solid',
+                borderColor: 'transparent',
+                background: 'transparent',
+                color: error,
+                ':hover': {
+                    borderWidth: 3,
+                    borderStyle: 'solid',
+                    borderColor: error,
+                    background: error,
+                    color: white,
+                },
+                ':focus-visible': {
+                    outlineColor: 'transparent',
+                },
+            };
         default:
             return {};
     }
 };
-var Button = styled.button(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  &&& {\n    border: 3px solid white;\n    border-radius: ", ";\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    padding: ", ";\n    font-family: ", ";\n    cursor: pointer;\n    vertical-align: top;\n    /*\n    &:focus {\n      outline: none;\n      opacity: .9;\n      box-shadow: 0 0 8px ", ";\n    }\n    */\n    &:disabled {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      opacity: 0.5;\n    }\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 3px solid white;\n    border-radius: ", ";\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    padding: ", ";\n    font-family: ", ";\n    cursor: pointer;\n    vertical-align: top;\n    /*\n    &:focus {\n      outline: none;\n      opacity: .9;\n      box-shadow: 0 0 8px ", ";\n    }\n    */\n    &:disabled {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      opacity: 0.5;\n    }\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.size && sizes$1[props.size] ? sizes$1[props.size].borderRadius : '4px'; }, function (_a) {
+var Button = styled.button(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  &&& {\n    border: 3px solid white;\n    border-radius: ", ";\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    padding: ", ";\n    font-family: ", ";\n    cursor: pointer;\n    vertical-align: top;\n    /*\n    &:focus {\n      outline: none;\n      opacity: .9;\n      box-shadow: 0 0 8px ", ";\n    }\n    */\n    &:disabled {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      opacity: 0.5;\n    }\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 3px solid white;\n    border-radius: ", ";\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    padding: ", ";\n    font-family: ", ";\n    cursor: pointer;\n    vertical-align: top;\n    /*\n    &:focus {\n      outline: none;\n      opacity: .9;\n      box-shadow: 0 0 8px ", ";\n    }\n    */\n    &:disabled {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      cursor: default;\n      opacity: 0.5;\n    }\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.size && sizes$1[props.size] ? sizes$1[props.size].borderRadius : '4px'; }, function (_a) {
     var secondary = _a.secondary, cta = _a.cta, props = __rest(_a, ["secondary", "cta"]);
     return secondary ? "transparent" :
         cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.teal.main);
@@ -2694,7 +2753,7 @@ var Button = styled.button(templateObject_1$c || (templateObject_1$c = __makeTem
     return secondary ? getThemeColor(props, 'primary', colors.primary) :
         cta ? getThemeColor(props, 'cta', colors.cta) : getThemeColor(props, 'primary', colors.primary);
 }, function (props) { return getThemeColor(props, 'disabledButton', colors.disabledButton); }, function (props) { return getThemeColor(props, 'disabledButtonBorder', colors.disabledButtonBorder); }, function (props) { return getThemeColor(props, 'primary', colors.primary); }, function (p) { return getVariantStyles(p, p.variant || 'primary'); }, SharedStyles, SizerCss);
-var ButtonsGroup = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  &&& {\n    display: inline-block;\n    max-width: 100%;\n    margin-bottom: 10px;\n    margin-right: 100px;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: inline-block;\n    max-width: 100%;\n    margin-bottom: 10px;\n    margin-right: 100px;\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
+var ButtonsGroup = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  &&& {\n    display: inline-block;\n    max-width: 100%;\n    margin-bottom: 10px;\n    margin-right: 100px;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: inline-block;\n    max-width: 100%;\n    margin-bottom: 10px;\n    margin-right: 100px;\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
 var presets = {
     edit: {
         size: "medium",
@@ -2716,52 +2775,64 @@ var presets = {
     close: {
         Icon: XIcon,
         variant: 'secondary'
+    },
+    drag: {
+        Icon: DragIcon,
+        variant: 'text',
+        style: {
+            cursor: 'grab',
+        }
     }
 };
 function getPropsByPresets(props, preset) {
     var presetProps = get(presets, [preset || ""]) || {};
     return __assign(__assign({}, presetProps), props);
 }
-function IconButton(props) {
+var IconButton = React__default.forwardRef(function (props, ref) {
     var _a = getPropsByPresets(props, props.preset), Icon = _a.Icon, children = _a.children, _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.iconProps, iconProps = _d === void 0 ? {} : _d, newProps = __rest(_a, ["Icon", "children", "iconPosition", "size", "iconProps"]);
-    var variantStyles = newProps.variant
-        ? getVariantStyles(props, newProps.variant)
-        : { color: '#fff' };
-    var RenderIcon = React__default.useMemo(function () {
-        if (!Icon) {
-            return null;
-        }
-        var btnSize = "small";
-        if (size !== "tiny" && size !== "small") {
-            btnSize = "medium";
-        }
-        var iconNewProps = __assign(__assign({}, iconProps), { size: btnSize, color: variantStyles.color || '#fff', style: __assign({ verticalAlign: 'top', paddingRight: children && iconPosition === "left" ? '5px' : '0px', paddingLeft: children && iconPosition === "right" ? '5px' : '0px', boxSizing: 'content-box' }, (iconProps.style || {})) });
-        if (typeof Icon !== 'function') {
-            return React__default.cloneElement(Icon, iconNewProps);
-        }
-        return (React__default.createElement(Icon, __assign({}, iconNewProps)));
-    }, [variantStyles.color, Icon, size, iconPosition, iconProps, children]);
+    var _e = useState(false), hovering = _e[0], setHovering = _e[1];
+    var variantStyles = React__default.useMemo(function () {
+        return newProps.variant
+            ? getVariantStyles(props, newProps.variant)
+            : { color: '#fff' };
+    }, [newProps, props]);
     var hasChildren = ((children && children !== null && children !== undefined)
         || (children && Array.isArray(children) && children.length > 0
             && children[0] !== null && children[0] !== undefined));
     var buttonPadding = !hasChildren
         ? getSizeStyle$1('iconOnlyPadding', '12px')
         : getSizeStyle$1('padding', '12px');
-    return (React__default.createElement(Button, __assign({ size: size }, newProps, { style: __assign(__assign(__assign({}, (newProps.style || {})), { padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }), (iconPosition === "top" || iconPosition === "bottom" ? {
+    return (React__default.createElement(Button, __assign({ ref: ref, size: size }, newProps, { style: __assign(__assign(__assign({}, (newProps.style || {})), { padding: buttonPadding(__assign(__assign({}, newProps), { size: size })) }), (iconPosition === "top" || iconPosition === "bottom" ? {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-        } : {})) }),
-        ['left', 'top'].includes(iconPosition) ? RenderIcon : null,
+        } : {})), onMouseOver: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }),
+        ['left', 'top'].includes(iconPosition) && React__default.createElement(ButtonIcon, { Icon: Icon, size: size, variantStyles: variantStyles, iconProps: iconProps, iconPosition: iconPosition, hasChildren: !!hasChildren, isHovering: hovering }),
         children,
-        ['right', 'bottom'].includes(iconPosition) ? RenderIcon : null));
-}
-var templateObject_1$c, templateObject_2$7;
+        ['right', 'bottom'].includes(iconPosition) && React__default.createElement(ButtonIcon, { Icon: Icon, size: size, variantStyles: variantStyles, iconProps: iconProps, iconPosition: iconPosition, hasChildren: !!hasChildren, isHovering: hovering })));
+});
+var ButtonIcon = React__default.forwardRef(function (props, ref) {
+    var Icon = props.Icon, size = props.size, variantStyles = props.variantStyles, _a = props.iconProps, iconProps = _a === void 0 ? {} : _a, iconPosition = props.iconPosition, hasChildren = props.hasChildren, isHovering = props.isHovering;
+    if (!Icon) {
+        return null;
+    }
+    var btnSize = "small";
+    if (size !== "tiny" && size !== "small") {
+        btnSize = "medium";
+    }
+    var hoverColor = get(variantStyles, [':hover', 'color']) || '';
+    var iconNewProps = __assign(__assign({}, iconProps), { size: btnSize, color: hoverColor && isHovering ? hoverColor : ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.color) || variantStyles.color || '#fff'), style: __assign({ verticalAlign: 'top', paddingRight: hasChildren && iconPosition === "left" ? '5px' : '0px', paddingLeft: hasChildren && iconPosition === "right" ? '5px' : '0px', boxSizing: 'content-box' }, ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.style) || {})) });
+    if (typeof Icon !== 'function') {
+        return React__default.cloneElement(Icon, iconNewProps);
+    }
+    return (React__default.createElement(Icon, __assign({}, iconNewProps, { ref: ref })));
+});
+var templateObject_1$d, templateObject_2$8;
 
-var Label = styled.label(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    color: ", ";\n    font-size: 1rem;\n    font-weight: 400;\n    width: 100%;\n    ", "\n  }\n"], ["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    color: ", ";\n    font-size: 1rem;\n    font-weight: 400;\n    width: 100%;\n    ", "\n  }\n"])), function (props) { return props.error ? getThemeColor(props, 'special3') : getThemeColor(props, 'textlabel'); }, SharedStyles);
-var templateObject_1$d;
+var Label = styled.label(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    color: ", ";\n    font-size: 1rem;\n    font-weight: 400;\n    width: 100%;\n    ", "\n  }\n"], ["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    color: ", ";\n    font-size: 1rem;\n    font-weight: 400;\n    width: 100%;\n    ", "\n  }\n"])), function (props) { return props.error ? getThemeColor(props, 'special3') : getThemeColor(props, 'textlabel'); }, SharedStyles);
+var templateObject_1$e;
 
-var InputIconLabel = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n&&& {\n  box-sizing: border-box;\n  width: 40px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin-bottom: 1rem;\n  color: white;\n  font-size: 18px;\n  text-align: center;\n  line-height: 1.5rem;\n  padding: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n}\n"], ["\n&&& {\n  box-sizing: border-box;\n  width: 40px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin-bottom: 1rem;\n  color: white;\n  font-size: 18px;\n  text-align: center;\n  line-height: 1.5rem;\n  padding: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n}\n"])), function (p) { return p.error ? 38 : 36; }, function (p) {
+var InputIconLabel = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n&&& {\n  box-sizing: border-box;\n  width: 40px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin-bottom: 1rem;\n  color: white;\n  font-size: 18px;\n  text-align: center;\n  line-height: 1.5rem;\n  padding: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n}\n"], ["\n&&& {\n  box-sizing: border-box;\n  width: 40px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", ";\n  margin-bottom: 1rem;\n  color: white;\n  font-size: 18px;\n  text-align: center;\n  line-height: 1.5rem;\n  padding: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n}\n"])), function (p) { return p.error ? 38 : 36; }, function (p) {
     return p.error
         ? getThemeColor(p, 'errors.main', colors.errors.main)
         : getThemeColor(p, 'input.iconWrapper.background', colors.input.iconWrapper.background);
@@ -2772,7 +2843,7 @@ var InputIconLabel = styled.div(templateObject_1$e || (templateObject_1$e = __ma
     : ''; }, function (p) { return p.isDisabled
     ? "background: ".concat(getThemeColor(p, 'input.iconWrapper.disabled.background'), ";")
     : ''; });
-var InputIconLabelContainer = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", "\n"])), function (p) {
+var InputIconLabelContainer = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n\n  ", "\n"])), function (p) {
     return {
         fontSize: '1rem',
         fontFamily: "'skufont-regular', sans-serif",
@@ -2846,8 +2917,8 @@ var Input = styled.input(templateObject_3$4 || (templateObject_3$4 = __makeTempl
     return styles;
 }, SharedStyles);
 var LabeledInput = React__default.forwardRef(function (_a, ref) {
-    var label = _a.label, name = _a.name, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, props = __rest(_a, ["label", "name", "required", "labelOnTop"]);
-    return (React__default.createElement("div", null,
+    var label = _a.label, name = _a.name, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, _c = _a.wrapperProps, wrapperProps = _c === void 0 ? {} : _c, props = __rest(_a, ["label", "name", "required", "labelOnTop", "wrapperProps"]);
+    return (React__default.createElement("div", __assign({}, wrapperProps),
         React__default.createElement(Label, { htmlFor: name, style: __assign(__assign({}, (!labelOnTop ? {} : { display: 'block' })), { fontFamily: "'skufont-medium', sans-serif", lineHeight: '24px', fontSize: '16px', color: getThemeColor(props, 'neutrals.100') }) },
             label,
             " ",
@@ -2930,8 +3001,8 @@ var LabeledIconInput = React__default.forwardRef(function (_a, ref) {
             React__default.createElement(Input, { hasIcon: true, ref: ref, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, required: required, style: { marginBottom: 0, }, noMargin: noMargin, error: error, disabled: disabled, onFocus: onFocus, onChange: onChange, onBlur: onBlur }),
             iconPosition === 'right' ? React__default.createElement(InputIconLabel, { style: { marginBottom: 0, padding: 6, }, isActive: isActive, isDisabled: disabled, isHover: isHovering, iconPosition: iconPosition }, NewIcon) : null)));
 });
-var CheckboxLabel = styled.label(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
-var RadioLabel = styled(CheckboxLabel)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  &&& {\n    padding-left: 32px;\n  }\n"], ["\n  &&& {\n    padding-left: 32px;\n  }\n"])));
+var CheckboxLabel = styled.label(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"], ["\n  &&& {\n    display: inline-flex;\n    position: relative;\n    margin-bottom: 12px;\n    margin-right: 24px;\n    cursor: ", ";\n    font-size: ", ";\n    color: ", ";\n    font-family: ", ";\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: normal;\n    line-height: ", ";\n    box-sizing: border-box;\n    opacity: ", ";\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (props) { return props.disabled ? 'default' : 'pointer'; }, fontStyles.label.fontSize, neutrals.darkest, fontStyles.label.fontFamily, fontStyles.label.lineHeight, function (props) { return props.disabled ? 0.7 : 1; });
+var RadioLabel = styled(CheckboxLabel)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  &&& {\n    padding-left: 32px;\n  }\n"], ["\n  &&& {\n    padding-left: 32px;\n  }\n"])));
 var Radio = styled.input(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  &&& {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    box-sizing: border-box;\n    &:focus {\n      outline: 0;\n    }\n    &:checked {\n      background-color: white;\n      display: block;\n    }\n    &:hover {\n      background-color: #02c0da;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    box-sizing: border-box;\n    &:focus {\n      outline: 0;\n    }\n    &:checked {\n      background-color: white;\n      display: block;\n    }\n    &:hover {\n      background-color: #02c0da;\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { return props.isHovering && "background-color: #02c0da;"; }, SharedStyles);
 var CheckMark = styled.span(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 23px;\n  width: 23px;\n  background-color: ", ";\n  opacity: ", ";\n  filter: ", ";\n  border: 2px solid #02c0da;\n  border-radius: 4px;\n  box-sizing: border-box;\n  &:focus {\n    outline: 0;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 9px;\n    top: 5px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n    box-sizing: border-box;\n    display: ", ";\n  }\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 23px;\n  width: 23px;\n  background-color: ", ";\n  opacity: ", ";\n  filter: ", ";\n  border: 2px solid #02c0da;\n  border-radius: 4px;\n  box-sizing: border-box;\n  &:focus {\n    outline: 0;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    left: 9px;\n    top: 5px;\n    width: 5px;\n    height: 10px;\n    border: solid white;\n    border-width: 0 3px 3px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n    box-sizing: border-box;\n    display: ", ";\n  }\n  ", "\n"])), function (props) { return ((props.isHovering || props.checked) && !props.disabled) ? '#02c0da' : 'white'; }, function (props) { return props.disabled ? 0.7 : 1; }, function (props) { return props.disabled ? "grayscale(100%)" : "none"; }, function (props) { return props.disabled ? "white" : "#02c0da"; }, function (props) { return props.checked ? 'block' : 'none'; }, SharedStyles);
 var Dot = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  &&& {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 23px;\n    width: 23px;\n    opacity: ", ";\n    filter: ", ";\n    background-color: ", ";\n    border: 2px solid #02c0da;\n    border-radius: 50%;\n    box-sizing: border-box;\n    &:focus {\n      outline: 0;\n    }\n    &:hover {\n      background-color: ", ";\n    }\n    &::after {\n      top: 5px;\n      left: 5px;\n      width: 9px;\n      height: 9px;\n      border-radius: 50%;\n      background: #02c0da;\n      content: \"\";\n      position: absolute;\n      display: none;\n      ", "\n    }\n    ", "\n"], ["\n  &&& {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 23px;\n    width: 23px;\n    opacity: ", ";\n    filter: ", ";\n    background-color: ", ";\n    border: 2px solid #02c0da;\n    border-radius: 50%;\n    box-sizing: border-box;\n    &:focus {\n      outline: 0;\n    }\n    &:hover {\n      background-color: ", ";\n    }\n    &::after {\n      top: 5px;\n      left: 5px;\n      width: 9px;\n      height: 9px;\n      border-radius: 50%;\n      background: #02c0da;\n      content: \"\";\n      position: absolute;\n      display: none;\n      ", "\n    }\n    ", "\n"])), function (props) { return props.disabled ? 0.7 : 1; }, function (props) { return props.disabled ? "grayscale(100%)" : "none"; }, function (props) { return (props.isHovering && !props.checked && !props.disabled) ? '#02c0da' : 'white'; }, function (props) { return !props.checked && !props.disabled ? '#02c0da' : 'white'; }, function (props) { return props.checked && "display: block;"; }, SharedStyles);
@@ -2942,14 +3013,14 @@ CheckMark.defaultProps = {
     checked: false,
 };
 var LabeledRadio = function (_a) {
-    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, labelStyle = _a.labelStyle, radioIconStyle = _a.radioIconStyle, radioColor = _a.radioColor, radioHoverColor = _a.radioHoverColor, onChange = _a.onChange, props = __rest(_a, ["label", "name", "checked", "disabled", "labelStyle", "radioIconStyle", "radioColor", "radioHoverColor", "onChange"]);
-    var _b = useState(false), isHovering = _b[0], updateHover = _b[1];
+    var label = _a.label, name = _a.name, checked = _a.checked, disabled = _a.disabled, labelStyle = _a.labelStyle, radioIconStyle = _a.radioIconStyle, radioColor = _a.radioColor, radioHoverColor = _a.radioHoverColor, onChange = _a.onChange, _b = _a.labelProps, labelProps = _b === void 0 ? {} : _b, _c = _a.radioIconProps, radioIconProps = _c === void 0 ? {} : _c, props = __rest(_a, ["label", "name", "checked", "disabled", "labelStyle", "radioIconStyle", "radioColor", "radioHoverColor", "onChange", "labelProps", "radioIconProps"]);
+    var _d = useState(false), isHovering = _d[0], updateHover = _d[1];
     var radio = useRef(null);
-    return (React__default.createElement(RadioLabel, { htmlFor: name, onMouseOver: function (e) { return updateHover(true); }, onMouseLeave: function (e) { return updateHover(false); }, disabled: disabled, style: __assign({}, labelStyle), onClick: function () {
+    return (React__default.createElement(RadioLabel, __assign({}, labelProps, { htmlFor: name, onMouseOver: function (e) { return updateHover(true); }, onMouseLeave: function (e) { return updateHover(false); }, disabled: disabled, style: __assign(__assign({}, labelStyle), (labelProps.style || {})), onClick: function () {
             var _a;
             (_a = radio.current) === null || _a === void 0 ? void 0 : _a.click();
-        } },
-        React__default.createElement(RadioIcon, { selected: checked, hover: isHovering, disabled: disabled, color: radioColor, hoverColor: radioHoverColor, mr: 8, style: radioIconStyle ? __assign({}, radioIconStyle) : { position: 'absolute', left: 0 } }),
+        } }),
+        React__default.createElement(RadioIcon, __assign({}, radioIconProps, { selected: checked, hover: isHovering, disabled: disabled, color: radioColor, hoverColor: radioHoverColor, mr: 8, style: __assign(__assign({}, (radioIconProps.style || {})), (radioIconStyle ? radioIconStyle : { position: 'absolute', left: 0 })) })),
         label,
         React__default.createElement(Radio, __assign({ ref: radio, name: name, type: "radio", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
 };
@@ -2978,37 +3049,37 @@ var LabeledRadioInButtonGroup = 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, checkboxColor = _a.checkboxColor, checkboxHoverColor = _a.checkboxHoverColor, _b = _a.labelStyle, labelStyle = _b === void 0 ? {} : _b, _c = _a.checkboxStyle, checkboxStyle = _c === void 0 ? {} : _c, _d = _a.hoverByLabel, hoverByLabel = _d === void 0 ? true : _d, _e = _a.stopPropagation, props = __rest(_a, ["label", "name", "checked", "disabled", "onChange", "checkboxColor", "checkboxHoverColor", "labelStyle", "checkboxStyle", "hoverByLabel", "stopPropagation"]);
-    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, checkboxColor = _a.checkboxColor, checkboxHoverColor = _a.checkboxHoverColor, _b = _a.hoverByLabel, hoverByLabel = _b === void 0 ? true : _b, _c = _a.stopPropagation, _d = _a.indeterminate, indeterminate = _d === void 0 ? false : _d, _e = _a.labelStyle, labelStyle = _e === void 0 ? {} : _e, _f = _a.checkboxStyle, checkboxStyle = _f === void 0 ? {} : _f, _g = _a.labelProps, labelProps = _g === void 0 ? {} : _g, _h = _a.checkboxIconProps, checkboxIconProps = _h === void 0 ? {} : _h, props = __rest(_a, ["label", "name", "checked", "disabled", "onChange", "checkboxColor", "checkboxHoverColor", "hoverByLabel", "stopPropagation", "indeterminate", "labelStyle", "checkboxStyle", "labelProps", "checkboxIconProps"]);
+    var _j = useState(false), isHovering = _j[0], updateHover = _j[1];
     var onMouseOver = function (e) { return updateHover(true); };
     var onMouseLeave = function (e) { return updateHover(false); };
-    return (React__default.createElement(CheckboxLabel, { htmlFor: name, onMouseOver: hoverByLabel ? onMouseOver : undefined, onMouseLeave: hoverByLabel ? onMouseLeave : undefined, disabled: disabled, style: labelStyle },
-        React__default.createElement(CheckboxIcon, { hover: isHovering, selected: checked, disabled: disabled, color: checkboxColor, hoverColor: checkboxHoverColor, mr: 8, style: __assign({}, checkboxStyle) }),
+    return (React__default.createElement(CheckboxLabel, __assign({ htmlFor: name, onMouseOver: hoverByLabel ? onMouseOver : undefined, onMouseLeave: hoverByLabel ? onMouseLeave : undefined, disabled: disabled }, labelProps, { style: labelStyle }),
+        React__default.createElement(CheckboxIcon, __assign({}, checkboxIconProps, { hover: isHovering, selected: checked, disabled: disabled, color: checkboxColor, hoverColor: checkboxHoverColor, indeterminate: indeterminate, mr: 8, style: __assign({}, checkboxStyle) })),
         label,
         React__default.createElement(Radio, __assign({ ref: ref, name: name, type: "checkbox", checked: checked, isHovering: isHovering, onChange: disabled ? undefined : onChange }, props))));
 });
-var templateObject_1$e, templateObject_2$8, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8;
+var templateObject_1$f, templateObject_2$9, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$2, templateObject_7$1, templateObject_8;
 
-var Padding = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  padding: 20px;\n  ", "\n"], ["\n  padding: 20px;\n  ", "\n"])), SharedStyles);
-var templateObject_1$f;
+var Padding = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  padding: 20px;\n  ", "\n"], ["\n  padding: 20px;\n  ", "\n"])), SharedStyles);
+var templateObject_1$g;
 
 /*
 
   Styles common for every commonsku page
 
 */
-var StyledPage = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  font-family: 'skufont-regular', sans-serif;\n  ", "\n"], ["\n  font-family: 'skufont-regular', sans-serif;\n  ", "\n"])), SharedStyles);
+var StyledPage = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  font-family: 'skufont-regular', sans-serif;\n  ", "\n"], ["\n  font-family: 'skufont-regular', sans-serif;\n  ", "\n"])), SharedStyles);
 function Page(props) {
     return React__default.createElement(StyledPage, __assign({}, props), props.children);
 }
-var templateObject_1$g;
+var templateObject_1$h;
 
-var Text = styled.span(templateObject_1$h || (templateObject_1$h = __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 (p) { return p.bold ? ({ fontWeight: 'bold' }) : ({}); }, function (props) { var _a; return getThemeColor(props, (_a = props.color) !== null && _a !== void 0 ? _a : 'textbody', 'textbody') || 'textbody'; }, function (props) { return props.bg ? getThemeColor(props, "".concat(props.color || 'transparent', "Bg"), 'transparent') : 'transparent'; }, function (props) { return props.bg ? '5px' : '0px'; }, function (props) { return props.bg ? '5px' : '0px'; }, SharedStyles);
+var Text = styled.span(templateObject_1$i || (templateObject_1$i = __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 (p) { return p.bold ? ({ fontWeight: 'bold' }) : ({}); }, function (props) { var _a; return getThemeColor(props, (_a = props.color) !== null && _a !== void 0 ? _a : 'textbody', 'textbody') || 'textbody'; }, function (props) { return props.bg ? getThemeColor(props, "".concat(props.color || 'transparent', "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));
 };
-var Link = styled(_Link)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n"])), SharedStyles);
+var Link = styled(_Link)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n"])), SharedStyles);
 function numberWithCommas(num) {
     return num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
 }
@@ -3017,10 +3088,10 @@ var Number$1 = function (_a) {
     var fixedNum = (toNumber(num) || 0).toFixed(decimalPoints);
     return React__default.createElement("span", __assign({}, props), commas ? numberWithCommas(fixedNum) : fixedNum);
 };
-var templateObject_1$h, templateObject_2$9;
+var templateObject_1$i, templateObject_2$a;
 
-var ProgressWrapper = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  max-width: 100%;\n  width: 100%;\n  height: 20px;\n  background: #ECF4F7;\n  ", "\n"], ["\n  max-width: 100%;\n  width: 100%;\n  height: 20px;\n  background: #ECF4F7;\n  ", "\n"])), SharedStyles);
-var ProgressBar = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  max-width: 100%;\n  width: ", "%;\n  height: 100%;\n  background: ", ";\n"], ["\n  max-width: 100%;\n  width: ", "%;\n  height: 100%;\n  background: ", ";\n"])), function (props) { return 100 * props.value / props.max; }, function (props) { return props.error ? "#B21154" : "#00d374"; });
+var ProgressWrapper = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  max-width: 100%;\n  width: 100%;\n  height: 20px;\n  background: #ECF4F7;\n  ", "\n"], ["\n  max-width: 100%;\n  width: 100%;\n  height: 20px;\n  background: #ECF4F7;\n  ", "\n"])), SharedStyles);
+var ProgressBar = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  max-width: 100%;\n  width: ", "%;\n  height: 100%;\n  background: ", ";\n"], ["\n  max-width: 100%;\n  width: ", "%;\n  height: 100%;\n  background: ", ";\n"])), function (props) { return 100 * props.value / props.max; }, function (props) { return props.error ? "#B21154" : "#00d374"; });
 var Progress = function (props) {
     var val = typeof props.value === 'number'
         ? props.value
@@ -3043,7 +3114,7 @@ var LabeledProgress = function (props) {
         React__default.createElement("br", null),
         React__default.createElement(Progress, { value: props.value, max: props.max, error: props.error }));
 };
-var templateObject_1$i, templateObject_2$a;
+var templateObject_1$j, templateObject_2$b;
 
 var popupStyles = {
     menuPlacement: 'auto',
@@ -3075,11 +3146,7 @@ function skuSelectStyles(props) {
         },
         indicatorSeparator: function (provided, state) { return (__assign(__assign({}, provided), { display: 'none' })); },
         option: function (provided, state) {
-            var optionStyle = {};
-            if (state.data && state.data.styles) {
-                optionStyle = state.data.styles;
-            }
-            return (__assign(__assign(__assign({}, provided), optionStyle), { borderBottom: 'none', padding: 10 }));
+            return (__assign(__assign(__assign({}, provided), (get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }));
         },
         input: function (provided, state) {
             return __assign(__assign({}, provided), { height: 'auto', borderColor: props.error
@@ -3177,11 +3244,13 @@ 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.select.border, neutral30: colors.select.border, neutral80: colors.textbody, neutral90: colors.textbody }) })); };
 // duplicate styles to overide .resku global styles
+// : React.ForwardRefExoticComponent<SKUSelectProps & React.RefAttributes<BaseSelect>>
+//   React.ForwardRefExoticComponent<AdditionalSKUSelectProps & Omit<Pick<Props<unknown, boolean, GroupBase<unknown>>, "aria-errormessage" | "aria-invalid" | "aria-label" | ... 27 more ... | "form"> & InexactPartial<...> & InexactPartial<...>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & React.RefAttributes<...>>
 var SKUSelect = 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"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return React__default.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
+    return React__default.createElement(BaseSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
 });
 var LabeledSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3196,7 +3265,7 @@ var SKUCreatableSelect = 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"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return (React__default.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+    return (React__default.createElement(BaseCreatableSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledCreatableSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3211,7 +3280,7 @@ var SKUAsyncSelect = 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"]);
     var classNamePrefix = "".concat(error ? 'select-error' : '', " commonsku-styles-select");
     var selectStyleProps = __assign(__assign({}, props), { noMargin: noMargin, menuRelative: menuRelative, inPopup: inPopup, error: error, classNamePrefix: classNamePrefix, theme: skuSelectTheme });
-    return (React__default.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, noMargin: noMargin, menuRelative: menuRelative, error: error, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
+    return (React__default.createElement(BaseAsyncSelect, __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledAsyncSelect = React__default.forwardRef(function (_a, ref) {
     var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
@@ -3223,8 +3292,8 @@ var LabeledAsyncSelect = React__default.forwardRef(function (_a, ref) {
         React__default.createElement(SKUAsyncSelect, __assign({}, props, { ref: ref }))));
 });
 
-var Backdrop = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"], ["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"])), function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); });
-var templateObject_1$j;
+var Backdrop = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"], ["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(67, 83, 91, .3);\n    z-index: 100;\n    transition: all ", "s ease-in-out;\n    -moz-transition: all ", "s ease-in-out;\n    -webkit-transition: all ", "s ease-in-out;\n    opacity: 0.8;\n"])), function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); }, function (p) { return ((p.animationDuration || 300) / 1000); });
+var templateObject_1$k;
 
 function getSlideStyles(from, visible, height) {
     if (from === void 0) { from = "right"; }
@@ -3244,7 +3313,7 @@ function getSlideStyles(from, visible, height) {
     }
     return '';
 }
-var StyledPanel = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  height: ", "vh;\n  background: white;\n  position: fixed;\n  width: ", ";\n  z-index: 300;\n  box-shadow: 0 0 10px rgba(61, 79, 90, 0.27);\n  padding: 1em;\n  overflow: scroll;\n  @media only screen and (max-width: 640px) {\n    width: 100% !important;\n  }\n  ", "\n  transition: transform ", "s ease-out;\n  ", "\n  ", "\n"], ["\n  height: ", "vh;\n  background: white;\n  position: fixed;\n  width: ", ";\n  z-index: 300;\n  box-shadow: 0 0 10px rgba(61, 79, 90, 0.27);\n  padding: 1em;\n  overflow: scroll;\n  @media only screen and (max-width: 640px) {\n    width: 100% !important;\n  }\n  ", "\n  transition: transform ", "s ease-out;\n  ", "\n  ", "\n"])), function (p) { return valIsValid(p.height) ? p.height : p.from === "bottom" || p.from === "top" ? 50 : 100; }, function (p) { return valIsValid(p.width) ? p.width : p.from === "bottom" || p.from === "top" ? '100%' : '560px'; }, function (p) { return getSlideStyles(p.from, p.visible, p.height); }, function (p) { return (
+var StyledPanel = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  height: ", "vh;\n  background: white;\n  position: fixed;\n  width: ", ";\n  z-index: 300;\n  box-shadow: 0 0 10px rgba(61, 79, 90, 0.27);\n  padding: 1em;\n  overflow: scroll;\n  @media only screen and (max-width: 640px) {\n    width: 100% !important;\n  }\n  ", "\n  transition: transform ", "s ease-out;\n  ", "\n  ", "\n"], ["\n  height: ", "vh;\n  background: white;\n  position: fixed;\n  width: ", ";\n  z-index: 300;\n  box-shadow: 0 0 10px rgba(61, 79, 90, 0.27);\n  padding: 1em;\n  overflow: scroll;\n  @media only screen and (max-width: 640px) {\n    width: 100% !important;\n  }\n  ", "\n  transition: transform ", "s ease-out;\n  ", "\n  ", "\n"])), function (p) { return valIsValid(p.height) ? p.height : p.from === "bottom" || p.from === "top" ? 50 : 100; }, function (p) { return valIsValid(p.width) ? p.width : p.from === "bottom" || p.from === "top" ? '100%' : '560px'; }, function (p) { return getSlideStyles(p.from, p.visible, p.height); }, function (p) { return (
 //@ts-ignore
 (valIsValid(p.animationDuration) ? p.animationDuration : 300) / 1000); }, SharedStyles, SizerCss);
 StyledPanel.defaultProps = {
@@ -3276,10 +3345,10 @@ var SidePanel = function (_a) {
             children),
         backdrop && visible ? React__default.createElement(Backdrop, null) : null);
 };
-var NameAndPosition = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: inline-block;\n  width: 90%;\n"], ["\n  display: inline-block;\n  width: 90%;\n"])));
+var NameAndPosition = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: inline-block;\n  width: 90%;\n"], ["\n  display: inline-block;\n  width: 90%;\n"])));
 var Name = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
-var Position = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: .8em;\n"], ["\n  font-size: .8em;\n"])));
-var Email = styled.a(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  font-size: .8em;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n"], ["\n  font-size: .8em;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n"])));
+var Position = styled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  font-size: .8em;\n"], ["\n  font-size: .8em;\n"])));
+var Email = styled.a(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  font-size: .8em;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n"], ["\n  font-size: .8em;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  -ms-word-break: break-all;\n  word-break: break-word;\n"])));
 var Contact = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n &&& {\n    display: flex;\n    flex-basis: 50%;\n    margin-bottom: 15px;\n    ", "\n  }\n"], ["\n &&& {\n    display: flex;\n    flex-basis: 50%;\n    margin-bottom: 15px;\n    ", "\n  }\n"])), SizerCss);
 var PanelContact = function (_a) {
     var avatar = _a.avatar, name = _a.name, position = _a.position, email = _a.email, props = __rest(_a, ["avatar", "name", "position", "email"]);
@@ -3315,13 +3384,13 @@ var PanelTileContact = function (_a) {
                     p.phone_extension && 'x' + p.phone_extension) : '';
             }) : null)));
 };
-var templateObject_1$k, templateObject_2$b, templateObject_3$5, templateObject_4$3, templateObject_5$3, templateObject_6$3;
+var templateObject_1$l, templateObject_2$c, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$3;
 
-var sharedStyle = css(templateObject_1$l || (templateObject_1$l = __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$c || (templateObject_2$c = __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 sharedStyle = css(templateObject_1$m || (templateObject_1$m = __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$d || (templateObject_2$d = __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$6 || (templateObject_3$6 = __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);
-var TH = styled.th(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  &&& {\n    background-color: #dae9ee;\n    border: none;\n    border-spacing: 0;\n    color: ", ";\n    font-size: 1rem;\n    padding: 0.5rem 0.625rem 0.625rem;\n    display: table-cell;\n    text-align: left;\n    font-family: \"skufont-demibold\", sans-serif;\n    ", "\n    &:hover {\n      background-color: ", ";\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    background-color: #dae9ee;\n    border: none;\n    border-spacing: 0;\n    color: ", ";\n    font-size: 1rem;\n    padding: 0.5rem 0.625rem 0.625rem;\n    display: table-cell;\n    text-align: left;\n    font-family: \"skufont-demibold\", sans-serif;\n    ", "\n    &:hover {\n      background-color: ", ";\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.clickable ? "#00889B" : "#123952"; }, function (props) { return props.sticky ? "position: sticky; top: ".concat(props.stickyTop ? props.stickyTop : 0, ";") : null; }, function (props) { return props.clickable ? "#d2e6ec" : "#dae9ee"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
-var TD = styled.td(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  &&& {\n    border: 0;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
+var TH = styled.th(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  &&& {\n    background-color: #dae9ee;\n    border: none;\n    border-spacing: 0;\n    color: ", ";\n    font-size: 1rem;\n    padding: 0.5rem 0.625rem 0.625rem;\n    display: table-cell;\n    text-align: left;\n    font-family: \"skufont-demibold\", sans-serif;\n    ", "\n    &:hover {\n      background-color: ", ";\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    background-color: #dae9ee;\n    border: none;\n    border-spacing: 0;\n    color: ", ";\n    font-size: 1rem;\n    padding: 0.5rem 0.625rem 0.625rem;\n    display: table-cell;\n    text-align: left;\n    font-family: \"skufont-demibold\", sans-serif;\n    ", "\n    &:hover {\n      background-color: ", ";\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.clickable ? "#00889B" : "#123952"; }, function (props) { return props.sticky ? "position: sticky; top: ".concat(props.stickyTop ? props.stickyTop : 0, ";") : null; }, function (props) { return props.clickable ? "#d2e6ec" : "#dae9ee"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
+var TD = styled.td(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  &&& {\n    border: 0;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), function (props) { return props.clickable ? "pointer" : "normal"; }, optionalPadding, sharedStyle, SizerCss, SharedStyles);
 var TR = styled.tr(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  &&& {\n    ", "\n    &:hover {\n      background: #EDF2F4;\n    }\n    ", "\n  }\n"], ["\n  &&& {\n    ", "\n    &:hover {\n      background: #EDF2F4;\n    }\n    ", "\n  }\n"])), SizerCss, function (p) { return p.selected && 'background: #EDF2F4;'; });
 var THead = styled.thead(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  &&& {\n    ", "\n  }\n"], ["\n  &&& {\n    ", "\n  }\n"])), SizerCss);
 var TBody = styled.tbody(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  &&& {\n    ", "\n  }\n"], ["\n  &&& {\n    ", "\n  }\n"])), SizerCss);
@@ -3342,14 +3411,266 @@ var THSorted = function (_a) {
         " ",
         children));
 };
-var templateObject_1$l, templateObject_2$c, templateObject_3$6, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9;
+var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$4, templateObject_7$2, templateObject_8$1, templateObject_9;
+
+var Overlay = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: ", ";\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])), function (p) { return p.zIndex || 999; });
+var PopupWindow = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: ", ";\n\n    padding: ", ";\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, function (p) { return p.zIndex || 1006; }, function (props) { var _a; return (_a = props.padding) !== null && _a !== void 0 ? _a : '1rem'; }, SharedStyles, SizerCss);
+var PopupHeader = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
+var PopupContainer = function (_a) {
+    var children = _a.children;
+    var ref = React__default.useRef(document$1.createElement('div'));
+    useEffect(function () {
+        var current = ref.current;
+        document$1.body.appendChild(current);
+        return function () {
+            document$1.body.removeChild(current);
+        };
+    }, []);
+    return ReactDOM.createPortal(children, ref.current);
+};
+var Popup = function (_a) {
+    var header = _a.header, _b = _a.noHeader, noHeader = _b === void 0 ? false : _b, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _c = _a.noCloseButton, noCloseButton = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? false : _e, overlayZIndex = _a.overlayZIndex, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex"]);
+    var ref = React__default.useRef(null);
+    /* there is a bug where this closes popup involuntarily
+    const handleClick = (e: Event) => {
+      // @ts-ignore
+      if (ref.current?.contains(e.target)) {
+        return;
+      }
+      onClose && onClose();
+    };
+    */
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            // @ts-ignore
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                onClose && onClose();
+            }
+        };
+        if (closeOnEsc) {
+            document$1.addEventListener("keyup", handleKeyDown);
+        }
+        return function () {
+            if (closeOnEsc) {
+                document$1.removeEventListener("keyup", handleKeyDown);
+            }
+        };
+    }, [closeOnClickOutside, closeOnEsc, onClose]);
+    return React__default.createElement(PopupContainer, null,
+        React__default.createElement(Overlay, { zIndex: overlayZIndex },
+            React__default.createElement(PopupWindow, __assign({ className: "popup" }, props, { ref: ref }),
+                noHeader ? null :
+                    header ? header : (React__default.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
+                        React__default.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
+                            React__default.createElement("span", { className: "title" }, title)),
+                        React__default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, noCloseButton ? null :
+                            controls || React__default.createElement(Button, { onClick: onClose }, "Close")))),
+                React__default.createElement("div", { className: "popup-content" }, children))));
+};
+var ShowPopup = function (_a) {
+    var _b = _a.autoOpen, autoOpen = _b === void 0 ? false : _b, PopupComponent = _a.popup, render = _a.render, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? false : _d, props = __rest(_a, ["autoOpen", "popup", "render", "closeOnEsc", "closeOnClickOutside"]);
+    var _e = useState(autoOpen), showPopup = _e[0], setShowPopup = _e[1];
+    return React__default.createElement(React__default.Fragment, null,
+        showPopup && React__default.createElement(PopupComponent, __assign({ onClose: function () { return setShowPopup(false); }, closeOnEsc: closeOnEsc, closeOnClickOutside: closeOnClickOutside }, props)),
+        render && render({ onClick: function () { return setShowPopup(!showPopup); } }));
+};
+var templateObject_1$n, templateObject_2$e, templateObject_3$7;
+
+var GridTableContainer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    display:grid;\n    grid-template-rows: ", ";\n    grid-gap: ", ";\n    width:", ";\n    margin-top: 24px;\n    margin-bottom: 24px;\n    background: white;\n    overflow: scroll;\n    .droppable {\n        display:grid;\n        grid-template-rows: ", ";\n        grid-gap: ", ";\n      }\n    ", "\n"], ["\n    display:grid;\n    grid-template-rows: ", ";\n    grid-gap: ", ";\n    width:", ";\n    margin-top: 24px;\n    margin-bottom: 24px;\n    background: white;\n    overflow: scroll;\n    .droppable {\n        display:grid;\n        grid-template-rows: ", ";\n        grid-gap: ", ";\n      }\n    ", "\n"])), function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, function (props) { return props.width ? props.width : '100%'; }, function (props) { return props.gridTemplateRows ? props.gridTemplateRows : 'auto'; }, function (props) { return props.gridRowGap ? props.gridRowGap : "16px"; }, SharedStyles);
+var GridRow = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n    display:grid;\n    grid-template-columns: ", ";\n    grid-gap: ", ";\n    width:100%;\n    background: white;\n    ", "\n"], ["\n    display:grid;\n    grid-template-columns: ", ";\n    grid-gap: ", ";\n    width:100%;\n    background: white;\n    ", "\n"])), function (props) { return props.gridTemplateColumns; }, function (props) { return props.gridColumnGap ? props.gridColumnGap : "16px"; }, SharedStyles);
+var GridCell = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject([" \n    background: white;\n    width: ", ";\n    font-family: ", ";\n    color: ", ";\n    text-align: ", ";\n"], [" \n    background: white;\n    width: ", ";\n    font-family: ", ";\n    color: ", ";\n    text-align: ", ";\n"])), function (props) { return props.width ? props.width : 'auto'; }, function (props) { return props.header ? themeOptions.fontFamilies.bold : fontStyles.p.medium; }, function (props) { return props.header ? errors.main : neutrals.bodyText; }, function (props) { return props.centerContent ? 'center' : 'left'; });
+var FieldError = styled.p(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin:0;\n"], ["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    margin:0;\n"])), fontStyles.p.small.fontFamily, fontStyles.p.small.fontSize, errors['40']);
+var defaultTransform = function (v) { return v.target ? v.target.value : v.currentTarget ? v.currentTarget.value : v.value; };
+var Column = function (_a) {
+    var name = _a.name, title = _a.title, children = _a.children, centerContent = _a.centerContent, _b = _a.transform;
+    return React__default.createElement(GridCell, { centerContent: centerContent }, title);
+};
+var Cell = function (_a) {
+    var defaultValue = _a.defaultValue, onUpdate = _a.onUpdate, children = _a.children, validate = _a.validate, centerContent = _a.centerContent, _b = _a.transform, transform = _b === void 0 ? function (v) { return v; } : _b;
+    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
+    var _d = useState(''), error = _d[0], setError = _d[1];
+    useEffect(function () {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    var handleOnChange = function (newValue) {
+        var errors = validate && validate(transform(newValue));
+        if (errors) {
+            setError(errors);
+        }
+        else {
+            setError('');
+        }
+        setValue(transform(newValue));
+    };
+    var handleOnBlur = function () {
+        if (!onUpdate) {
+            return;
+        }
+        if (error) {
+            setValue(defaultValue);
+            setError('');
+            return;
+        }
+        onUpdate(value);
+    };
+    var cell = React__default.cloneElement(React__default.Children.only(children), {
+        value: value,
+        onChange: handleOnChange,
+        onBlur: handleOnBlur,
+    });
+    return (React__default.createElement(GridCell, { centerContent: centerContent },
+        cell,
+        " ",
+        React__default.createElement(FieldError, null, error)));
+};
+function GridTable(_a) {
+    var data = _a.data, _b = _a.idField, idField = _b === void 0 ? "id" : _b, onUpdate = _a.onUpdate, onDelete = _a.onDelete, onAdd = _a.onAdd, onSort = _a.onSort, validate = _a.validate, children = _a.children, gridTemplateRows = _a.gridTemplateRows, gridTemplateColumns = _a.gridTemplateColumns, gridRowGap = _a.gridRowGap, gridColumnGap = _a.gridColumnGap, props = __rest(_a, ["data", "idField", "onUpdate", "onDelete", "onAdd", "onSort", "validate", "children", "gridTemplateRows", "gridTemplateColumns", "gridRowGap", "gridColumnGap"]);
+    var _c = useState({}), NewData = _c[0], setNewData = _c[1];
+    var _d = useState(false), Adding = _d[0], setAdding = _d[1];
+    var _e = useState({}), newRowError = _e[0], setNewRowError = _e[1];
+    var _f = useState(0), showPopupWithRowId = _f[0], setShowPopupWithRowId = _f[1];
+    var hasNewRowError = Object.keys(newRowError).length === 0 || Object.values(newRowError).filter(function (v) { return v; }).length > 0;
+    var handleColumnsDefault = function () {
+        if (gridTemplateColumns) {
+            if (onSort && onDelete) {
+                return "auto ".concat(gridTemplateColumns, " auto");
+            }
+            else if (onSort && !onDelete) {
+                return "auto ".concat(gridTemplateColumns);
+            }
+            else if (onSort && onDelete) {
+                return "".concat(gridTemplateColumns, " auto");
+            }
+            return gridTemplateColumns;
+        }
+        else {
+            var columnsDefault_1 = '';
+            React__default.Children.map(children, function (child, index) {
+                columnsDefault_1 += "minmax(136px, 1fr) ";
+            });
+            if (onSort) {
+                columnsDefault_1 = "auto " + columnsDefault_1;
+            }
+            if (onDelete) {
+                columnsDefault_1 += "auto";
+            }
+            return columnsDefault_1;
+        }
+    };
+    var gridColumns = handleColumnsDefault();
+    var handleAdd = function () {
+        var Errors = (validate && validate(NewData)) || {};
+        console.log(Errors);
+        if (Object.values(Errors).some(function (v) { return v; })) {
+            return;
+        }
+        onAdd && onAdd(NewData);
+        setNewData({});
+        setAdding(false);
+    };
+    function handleOnDragEnd(result, provided) {
+        if (!result.destination)
+            return;
+        if (!onSort)
+            return;
+        var item = data[result.source.index];
+        onSort(item[idField], result.destination.index);
+    }
+    var Header = React__default.createElement(GridRow, { gridTemplateColumns: gridColumns, gridColumnGap: gridColumnGap },
+        onSort && React__default.createElement(GridCell, null,
+            React__default.createElement("div", { style: { width: '24px' } })),
+        React__default.Children.map(children, function (child, child_index) {
+            return (React__default.createElement(GridCell, { key: child.props.name, centerContent: child.props.centerContent }, child.props.title));
+        }),
+        onDelete && React__default.createElement(GridCell, null,
+            React__default.createElement("div", { style: { width: '40px' } })));
+    var Rows = function () {
+        return (React__default.createElement(DragDropContext, { onDragEnd: handleOnDragEnd },
+            React__default.createElement(Droppable, { droppableId: "draggable-rows" }, function (provided) { return (React__default.createElement("div", __assign({ className: "droppable" }, provided.droppableProps, { ref: provided.innerRef }),
+                data.map(function (d, index) {
+                    return (React__default.createElement(Draggable, { key: d[idField], draggableId: d[idField].toString(), index: index, isDragDisabled: !onSort }, function (provided) { return (React__default.createElement(GridRow, __assign({}, provided.draggableProps, provided.dragHandleProps, { ref: provided.innerRef, gridTemplateColumns: gridColumns, gridColumnGap: gridColumnGap }),
+                        onSort && React__default.createElement(GridCell, { style: { display: "flex", flexDirection: 'column', justifyContent: 'center', height: '40px' } },
+                            React__default.createElement(DragIcon, { color: neutrals['60'], style: { cursor: 'grab', verticalAlign: 'middle' } })),
+                        React__default.Children.map(children, function (child) {
+                            if (!child) {
+                                return null;
+                            }
+                            var validateCell = function (value) {
+                                var _a;
+                                var _b;
+                                return (_b = (validate && validate((_a = {}, _a[child.props.name] = value, _a))[child.props.name])) !== null && _b !== void 0 ? _b : false;
+                            };
+                            return React__default.createElement(Cell, { key: child.props.name, defaultValue: d[child.props.name], onUpdate: function (value) { return setNewData(function (s) {
+                                    var _a;
+                                    return (__assign(__assign({}, s), (_a = {}, _a[child.props.name] = value, _a)));
+                                }); }, transform: child.props.transform || defaultTransform, validate: validate && validateCell, centerContent: child.props.centerContent }, child.props.children);
+                        }),
+                        onDelete && React__default.createElement(GridCell, null,
+                            React__default.createElement(IconButton, { preset: "delete", onClick: function () { return setShowPopupWithRowId(d[idField]); } })))); }));
+                }),
+                provided.placeholder)); })));
+    };
+    var NewRow = (React__default.createElement(GridRow, { gridTemplateColumns: gridColumns, gridColumnGap: gridColumnGap },
+        onSort &&
+            React__default.createElement(GridCell, null,
+                React__default.createElement("div", { style: { width: '24px' } })),
+        React__default.Children.map(children, function (child) {
+            if (!child) {
+                return null;
+            }
+            var validateCell = function (value) {
+                var _a;
+                var validation = validate && validate(__assign(__assign({}, NewData), (_a = {}, _a[child.props.name] = value, _a)));
+                if (!validation) {
+                    return false;
+                }
+                setNewRowError(validation);
+                return validation[child.props.name];
+            };
+            return React__default.createElement(Cell, { key: child.props.name, defaultValue: NewData[child.props.name], onUpdate: function (value) { return setNewData(function (s) {
+                    var _a;
+                    return (__assign(__assign({}, s), (_a = {}, _a[child.props.name] = value, _a)));
+                }); }, transform: child.props.transform || defaultTransform, validate: validateCell, centerContent: child.props.centerContent }, child.props.children);
+        }),
+        React__default.createElement(GridCell, null,
+            React__default.createElement(IconButton, { Icon: CheckmarkIcon, iconProps: { color: green.main }, variant: hasNewRowError ? "disabled" : "text", onClick: function () { return handleAdd(); }, disabled: hasNewRowError }))));
+    var AddNew = onAdd ?
+        React__default.createElement(GridRow, { gridTemplateColumns: "auto", gridColumnGap: gridColumnGap },
+            React__default.createElement(GridCell, { centerContent: true },
+                React__default.createElement(IconButton, { Icon: AddIcon, variant: "text", size: "small", onClick: function () { return setAdding(true); } }, "Add New")))
+        : null;
+    return (React__default.createElement(React__default.Fragment, null,
+        showPopupWithRowId !== 0 ?
+            React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: '36px', noHeader: true, noCloseButton: true },
+                React__default.createElement("p", { style: {
+                        fontFamily: fontStyles.p.medium.fontFamily,
+                        fontSize: fontStyles.p.medium.fontSize,
+                        lineHeight: fontStyles.p.medium.lineHeight,
+                        color: neutrals.bodyText
+                    } }, "Are you sure you want to delete?"),
+                React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
+                    React__default.createElement(Button, { size: "medium", variant: 'secondary', mr: 24, onClick: function () {
+                            setShowPopupWithRowId(0);
+                        } }, "Cancel"),
+                    React__default.createElement(Button, { size: "medium", variant: 'error', onClick: function () {
+                            onDelete && onDelete(showPopupWithRowId);
+                            setShowPopupWithRowId(0);
+                        } }, "Delete"))) : null,
+        React__default.createElement(GridTableContainer, __assign({ gridTemplateRows: gridTemplateRows, gridTemplateColumns: gridColumns, gridRowGap: gridRowGap, gridColumnGap: gridColumnGap }, props),
+            Header,
+            Rows(),
+            Adding && NewRow,
+            onAdd && !Adding && AddNew)));
+}
+var templateObject_1$o, templateObject_2$f, templateObject_3$8, templateObject_4$6;
 
 var tabSizes = {
-    small: css(templateObject_1$m || (templateObject_1$m = __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$d || (templateObject_2$d = __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  "]))),
+    small: css(templateObject_1$p || (templateObject_1$p = __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$g || (templateObject_2$g = __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$7 || (templateObject_3$7 = __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"
+var TabBar = styled.ul(templateObject_3$9 || (templateObject_3$9 = __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$7 || (templateObject_4$7 = __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"
     /*
     
     Here's how you use this:
@@ -3378,7 +3699,9 @@ var Tab = styled.li(templateObject_4$5 || (templateObject_4$5 = __makeTemplateOb
     //     {tabs[state.selectedTabIndex].content}
     //   </div>
     // }
-])), function (props) { return props.selected ? "5px solid #02c0da" : "none"; }, function (props) { return props.selected ? "1" : ".5"; }, SharedStyles, function (props) { var _a; return tabSizes[(_a = props.size) !== null && _a !== void 0 ? _a : 'medium']; });
+])), function (props) { return props.selected
+    ? "5px solid ".concat(props.variant === 'secondary' ? colors.secondary1.main : colors.primary1.main)
+    : "none"; }, function (props) { return props.selected ? "1" : ".5"; }, SharedStyles, function (props) { var _a; return tabSizes[(_a = props.size) !== null && _a !== void 0 ? _a : 'medium']; });
 var Tabs = /** @class */ (function (_super) {
     __extends(Tabs, _super);
     function Tabs(props) {
@@ -3435,7 +3758,7 @@ var Tabs = /** @class */ (function (_super) {
     };
     return Tabs;
 }(Component));
-var templateObject_1$m, templateObject_2$d, templateObject_3$7, templateObject_4$5;
+var templateObject_1$p, templateObject_2$g, templateObject_3$9, templateObject_4$7;
 
 var toggleSizes = {
     small: {
@@ -3472,9 +3795,9 @@ var getSizeStyle$2 = function (style, defaults) {
         return defaults;
     };
 };
-var Wrapper$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    max-width: 600px;\n    justify-content: flex-start;\n    width: 100%; \n  }"], ["\n  &&& {\n    display: inline-flex;\n    max-width: 600px;\n    justify-content: flex-start;\n    width: 100%; \n  }"])));
-var Container = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  &&& {\n    background: ", ";\n    border-radius: 50px;\n    display: flex;\n    justify-content: space-between;\n    width: ", ";\n    ", "\n  }"], ["\n  &&& {\n    background: ", ";\n    border-radius: 50px;\n    display: flex;\n    justify-content: space-between;\n    width: ", ";\n    ", "\n  }"])), function (props) { return getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
-var ToggleLink = styled.a(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    font-size: ", ";\n    border-radius: 30px;\n    display: flex;\n    align-content: center;\n    padding: ", ";\n    height: auto;\n    line-height: ", ";\n    width: ", ";\n    justify-content: center;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    ", "\n  }"], ["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    font-size: ", ";\n    border-radius: 30px;\n    display: flex;\n    align-content: center;\n    padding: ", ";\n    height: auto;\n    line-height: ", ";\n    width: ", ";\n    justify-content: center;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    ", "\n  }"])), function (props) { return getSizeStyle$2('font-size', '1rem')({ size: props.size }); }, function (props) { return getSizeStyle$2('padding', '8px 16px')({ size: props.size }); }, function (props) { return getSizeStyle$2('line-height', '24px')({ size: props.size }); }, function (props) { return props.stretch ? "50%" : "auto"; }, function (props) { return props.selected ? getThemeColor(props, 'teal.main', colors.teal.main) : getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.selected ? "white" : getThemeColor(props, 'teal.main', colors.teal.main); }, SharedStyles);
+var Wrapper$1 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  &&& {\n    display: inline-flex;\n    max-width: 600px;\n    justify-content: flex-start;\n    width: 100%; \n  }"], ["\n  &&& {\n    display: inline-flex;\n    max-width: 600px;\n    justify-content: flex-start;\n    width: 100%; \n  }"])));
+var Container = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  &&& {\n    background: ", ";\n    border-radius: 50px;\n    display: flex;\n    justify-content: space-between;\n    width: ", ";\n    ", "\n  }"], ["\n  &&& {\n    background: ", ";\n    border-radius: 50px;\n    display: flex;\n    justify-content: space-between;\n    width: ", ";\n    ", "\n  }"])), function (props) { return getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.stretch ? "100%" : "auto"; }, SharedStyles);
+var ToggleLink = styled.a(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    font-size: ", ";\n    border-radius: 30px;\n    display: flex;\n    align-content: center;\n    padding: ", ";\n    height: auto;\n    line-height: ", ";\n    width: ", ";\n    justify-content: center;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    ", "\n  }"], ["\n  &&& {\n    font-family: 'skufont-medium', sans-serif;\n    font-size: ", ";\n    border-radius: 30px;\n    display: flex;\n    align-content: center;\n    padding: ", ";\n    height: auto;\n    line-height: ", ";\n    width: ", ";\n    justify-content: center;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    ", "\n  }"])), function (props) { return getSizeStyle$2('font-size', '1rem')({ size: props.size }); }, function (props) { return getSizeStyle$2('padding', '8px 16px')({ size: props.size }); }, function (props) { return getSizeStyle$2('line-height', '24px')({ size: props.size }); }, function (props) { return props.stretch ? "50%" : "auto"; }, function (props) { return props.selected ? getThemeColor(props, 'teal.main', colors.teal.main) : getThemeColor(props, 'teal.20', colors.teal['20']); }, function (props) { return props.selected ? "white" : getThemeColor(props, 'teal.main', colors.teal.main); }, SharedStyles);
 var Toggle = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, props = __rest(_a, ["size"]);
     return React__default.createElement(Wrapper$1, __assign({ size: size }, props),
@@ -3482,9 +3805,9 @@ var Toggle = function (_a) {
             return React__default.cloneElement(child, { size: size });
         })));
 };
-var templateObject_1$n, templateObject_2$e, templateObject_3$8;
+var templateObject_1$q, templateObject_2$h, templateObject_3$a;
 
-var Textarea = styled.textarea(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), function (p) {
+var Textarea = styled.textarea(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), function (p) {
     var styles = {
         marginBottom: p.noMargin ? 0 : "1rem",
         fontSize: '1rem',
@@ -3546,34 +3869,34 @@ var LabeledTextarea = React__default.forwardRef(function (_a, ref) {
         React__default.createElement(Label, { htmlFor: name }, label),
         React__default.createElement(Textarea, __assign({ name: name }, props)));
 });
-var templateObject_1$o;
+var templateObject_1$r;
 
 var img$1 = "data:image/gif;base64,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";
 
 var img$2 = "data:image/gif;base64,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";
 
-var Wrapper$2 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", "\n"])), SharedStyles);
+var Wrapper$2 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", "\n"])), SharedStyles);
 var Spinner = function (props) {
     return React__default.createElement(Wrapper$2, __assign({}, props),
         React__default.createElement("img", { alt: "Loading...", src: props.small ? img$2 : img$1 }));
 };
-var templateObject_1$p;
+var templateObject_1$s;
 
 var img$3 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg width='100%25' height='100%25' viewBox='0 0 101 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3bclip-rule:evenodd%3bstroke-linejoin:round%3bstroke-miterlimit:2%3b'%3e %3cg transform='matrix(1%2c0%2c0%2c1%2c-126%2c0)'%3e %3cg id='dark' transform='matrix(0.357231%2c0%2c0%2c0.357231%2c124.961%2c0.10718)'%3e %3crect x='4.308' y='-0.3' width='279.931' height='279.931' style='fill:none%3b'/%3e %3cg transform='matrix(1.69264%2c0%2c0%2c1.69264%2c-1244.22%2c-2149.68)'%3e %3cpath d='M816.161%2c1280.05C816.87%2c1278.39 818.503%2c1277.31 820.31%2c1277.31C822.117%2c1277.31 823.75%2c1278.39 824.459%2c1280.05L844.406%2c1326.83L895.064%2c1331.35C896.864%2c1331.51 898.395%2c1332.73 898.954%2c1334.44C899.512%2c1336.16 898.991%2c1338.05 897.628%2c1339.24L859.299%2c1372.67L870.66%2c1422.24C871.064%2c1424 870.377%2c1425.83 868.914%2c1426.9C867.452%2c1427.96 865.497%2c1428.05 863.946%2c1427.12L820.31%2c1400.99L776.674%2c1427.12C775.123%2c1428.05 773.168%2c1427.96 771.706%2c1426.9C770.243%2c1425.83 769.556%2c1424 769.96%2c1422.24L781.321%2c1372.67L742.992%2c1339.24C741.629%2c1338.05 741.108%2c1336.16 741.666%2c1334.44C742.225%2c1332.73 743.756%2c1331.51 745.556%2c1331.35L796.214%2c1326.83L816.161%2c1280.05Z' style='fill:rgb(18%2c57%2c82)%3b'/%3e %3c/g%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
 
 var img$4 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg width='100%25' height='100%25' viewBox='0 0 100 101' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3bclip-rule:evenodd%3bstroke-linejoin:round%3bstroke-miterlimit:2%3b'%3e %3cg id='light' transform='matrix(0.357231%2c0%2c0%2c0.357231%2c-1.53898%2c1.04263)'%3e %3crect x='4.308' y='-0.3' width='279.931' height='279.931' style='fill:none%3b'/%3e %3cg transform='matrix(1.69264%2c0%2c0%2c1.69264%2c-1244.22%2c-2149.68)'%3e %3cpath d='M816.161%2c1280.05C816.87%2c1278.39 818.503%2c1277.31 820.31%2c1277.31C822.117%2c1277.31 823.75%2c1278.39 824.459%2c1280.05L844.406%2c1326.83L895.064%2c1331.35C896.864%2c1331.51 898.395%2c1332.73 898.954%2c1334.44C899.512%2c1336.16 898.991%2c1338.05 897.628%2c1339.24L859.299%2c1372.67L870.66%2c1422.24C871.064%2c1424 870.377%2c1425.83 868.914%2c1426.9C867.452%2c1427.96 865.497%2c1428.05 863.946%2c1427.12L820.31%2c1400.99L776.674%2c1427.12C775.123%2c1428.05 773.168%2c1427.96 771.706%2c1426.9C770.243%2c1425.83 769.556%2c1424 769.96%2c1422.24L781.321%2c1372.67L742.992%2c1339.24C741.629%2c1338.05 741.108%2c1336.16 741.666%2c1334.44C742.225%2c1332.73 743.756%2c1331.51 745.556%2c1331.35L796.214%2c1326.83L816.161%2c1280.05Z' style='fill:rgb(236%2c248%2c255)%3b'/%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
 
-var StyledStar = styled.img(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  width: 13px;\n  height: 13px;\n  vertical-align: top;\n"], ["\n  width: 13px;\n  height: 13px;\n  vertical-align: top;\n"])));
-var StyledRating = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
+var StyledStar = styled.img(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  width: 13px;\n  height: 13px;\n  vertical-align: top;\n"], ["\n  width: 13px;\n  height: 13px;\n  vertical-align: top;\n"])));
+var StyledRating = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), SharedStyles);
 var StarRating = function (props) {
     return React__default.createElement(StyledRating, __assign({}, props), [1, 2, 3, 4, 5].map(function (x, i) { return i < props.rating ? React__default.createElement(StyledStar, { key: "star".concat(i), src: img$4 }) : React__default.createElement(StyledStar, { key: "star".concat(i), src: img$3 }); }));
 };
-var templateObject_1$q, templateObject_2$f;
+var templateObject_1$t, templateObject_2$i;
 
-var ProductInfo = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  width: 100%;\n  background: rgba(0, 0, 0, 0.55) !important;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  opacity: 1;\n  color: #fff;\n  padding: 10px;\n  font-size: 14px;\n  box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  height: 110px;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"], ["\n  width: 100%;\n  background: rgba(0, 0, 0, 0.55) !important;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  opacity: 1;\n  color: #fff;\n  padding: 10px;\n  font-size: 14px;\n  box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  height: 110px;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"])));
-var ProductName = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: bold;\n  display: none;\n"], ["\n  font-size: 1.2rem;\n  font-weight: bold;\n  display: none;\n"])));
-var SupplierName = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  font-size: .9rem;\n  font-weight: bold;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font-size: .9rem;\n  font-weight: bold;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var ProductWrapper = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  width: 100%;\n  height: 17rem;\n  overflow: hidden;\n  background-image: url(\"", "\");\n  background-repeat: no-repeat;\n  background-position: center top;\n  background-size: cover;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  &:hover ", " {\n    height: 100%;\n  }\n  &:hover ", " {\n    display: block;\n  }\n  &:hover ", " {\n    overflow: visible;\n    white-space: normal;\n  }\n  ", "\n"], ["\n  width: 100%;\n  height: 17rem;\n  overflow: hidden;\n  background-image: url(\"", "\");\n  background-repeat: no-repeat;\n  background-position: center top;\n  background-size: cover;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  &:hover ", " {\n    height: 100%;\n  }\n  &:hover ", " {\n    display: block;\n  }\n  &:hover ", " {\n    overflow: visible;\n    white-space: normal;\n  }\n  ", "\n"])), function (props) { return props.picture; }, ProductInfo, ProductName, SupplierName, SharedStyles);
+var ProductInfo = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  width: 100%;\n  background: rgba(0, 0, 0, 0.55) !important;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  opacity: 1;\n  color: #fff;\n  padding: 10px;\n  font-size: 14px;\n  box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  height: 110px;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"], ["\n  width: 100%;\n  background: rgba(0, 0, 0, 0.55) !important;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  opacity: 1;\n  color: #fff;\n  padding: 10px;\n  font-size: 14px;\n  box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  height: 110px;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  -moz-text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);\n  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b0000000',GradientType=0 );\n"])));
+var ProductName = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: bold;\n  display: none;\n"], ["\n  font-size: 1.2rem;\n  font-weight: bold;\n  display: none;\n"])));
+var SupplierName = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  font-size: .9rem;\n  font-weight: bold;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font-size: .9rem;\n  font-weight: bold;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var ProductWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  width: 100%;\n  height: 17rem;\n  overflow: hidden;\n  background-image: url(\"", "\");\n  background-repeat: no-repeat;\n  background-position: center top;\n  background-size: cover;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  &:hover ", " {\n    height: 100%;\n  }\n  &:hover ", " {\n    display: block;\n  }\n  &:hover ", " {\n    overflow: visible;\n    white-space: normal;\n  }\n  ", "\n"], ["\n  width: 100%;\n  height: 17rem;\n  overflow: hidden;\n  background-image: url(\"", "\");\n  background-repeat: no-repeat;\n  background-position: center top;\n  background-size: cover;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  &:hover ", " {\n    height: 100%;\n  }\n  &:hover ", " {\n    display: block;\n  }\n  &:hover ", " {\n    overflow: visible;\n    white-space: normal;\n  }\n  ", "\n"])), function (props) { return props.picture; }, ProductInfo, ProductName, SupplierName, SharedStyles);
 var Product = function (props) {
     return React__default.createElement(ProductWrapper, __assign({}, props),
         React__default.createElement(ProductInfo, null,
@@ -3584,7 +3907,7 @@ var Product = function (props) {
             props.price && props.currency ? props.currency + "$" + props.price : null,
             props.rating ? React__default.createElement(StarRating, { rating: props.rating }) : null));
 };
-var templateObject_1$r, templateObject_2$g, templateObject_3$9, templateObject_4$6;
+var templateObject_1$u, templateObject_2$j, templateObject_3$b, templateObject_4$8;
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -3597,23 +3920,19 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
-
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
     enumerableOnly && (symbols = symbols.filter(function (sym) {
       return Object.getOwnPropertyDescriptor(object, sym).enumerable;
     })), keys.push.apply(keys, symbols);
   }
-
   return keys;
 }
-
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
@@ -3623,7 +3942,6 @@ function _objectSpread2(target) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
-
   return target;
 }
 
@@ -3642,7 +3960,6 @@ function _defineProperties(target, props) {
     Object.defineProperty(target, descriptor.key, descriptor);
   }
 }
-
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
@@ -3656,16 +3973,14 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
-
   return self;
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -3673,7 +3988,6 @@ function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
   }
-
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
@@ -3688,7 +4002,7 @@ function _inherits(subClass, superClass) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
@@ -3698,7 +4012,6 @@ function _isNativeReflectConstruct() {
   if (typeof Reflect === "undefined" || !Reflect.construct) return false;
   if (Reflect.construct.sham) return false;
   if (typeof Proxy === "function") return true;
-
   try {
     Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
@@ -3723,7 +4036,6 @@ function _possibleConstructorReturn(self, call) {
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
   }
-
   return _assertThisInitialized(self);
 }
 
@@ -3731,15 +4043,13 @@ function _createSuper(Derived) {
   var hasNativeReflectConstruct = _isNativeReflectConstruct();
   return function _createSuperInternal() {
     var Super = _getPrototypeOf(Derived),
-        result;
-
+      result;
     if (hasNativeReflectConstruct) {
       var NewTarget = _getPrototypeOf(this).constructor;
       result = Reflect.construct(Super, arguments, NewTarget);
     } else {
       result = Super.apply(this, arguments);
     }
-
     return _possibleConstructorReturn(this, result);
   };
 }
@@ -3748,17 +4058,12 @@ var LOADING_IMG_SRC = '/images/gears.gif';
 var NOT_FOUND_IMG_SRC = '/images/404.png';
 var DEFAULT_MAX_ATTEMPTS = 3;
 var DEFAULT_ATTEMPT_INTERVAL = 10000;
-
 var Img = /*#__PURE__*/function (_Component) {
   _inherits(Img, _Component);
-
   var _super = _createSuper(Img);
-
   function Img(props) {
     var _this;
-
     _classCallCheck(this, Img);
-
     _this = _super.call(this, props);
     _this.state = {
       src: _this.props.src,
@@ -3767,7 +4072,6 @@ var Img = /*#__PURE__*/function (_Component) {
     _this.onError = _this.onError.bind(_assertThisInitialized(_this));
     return _this;
   }
-
   _createClass(Img, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
@@ -3789,21 +4093,17 @@ var Img = /*#__PURE__*/function (_Component) {
     key: "onError",
     value: function onError() {
       var _this2 = this;
-
       if (NOT_FOUND_IMG_SRC === this.state.src) {
         return;
       }
-
       var max_attempts = this.props.max_attempts || DEFAULT_MAX_ATTEMPTS;
       var attempt_interval = this.props.attempt_interval || DEFAULT_ATTEMPT_INTERVAL;
-
       if (this.state.attempts >= max_attempts) {
         this.setState({
           src: NOT_FOUND_IMG_SRC
         });
         return;
       }
-
       this.setState({
         src: LOADING_IMG_SRC,
         attempts: this.state.attempts + 1
@@ -3817,25 +4117,24 @@ var Img = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var props = _objectSpread2(_objectSpread2({}, this.props), {}, {
-        src: this.state.src,
+      var props = _objectSpread2(_objectSpread2({
         onError: this.onError
+      }, this.props), {}, {
+        src: this.state.src
       });
-
       return /*#__PURE__*/React__default.createElement("img", Object.assign({
         alt: ""
       }, props));
     }
   }]);
-
   return Img;
 }(Component);
 
-var ArtworkName = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  font-size: .9rem;\n  font-weight: bold;\n"], ["\n  font-size: .9rem;\n  font-weight: bold;\n"])));
-var UpdateDate = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n"], ["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors.textbody); });
-var ArtworkControls = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  text-align: right;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  padding: 10px;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: .3s all;\n"], ["\n  text-align: right;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  padding: 10px;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: .3s all;\n"])));
-var ArtworkInfo = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  padding-left: ", ";\n  width: 100%;\n  position: absolute;\n  height: 3rem;\n  left: 0;\n  ", " : 0;\n  opacity: 1;\n  color: black;\n  font-size: 14px;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  -moz-box-sizing: border-box;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n"], ["\n  padding-left: ", ";\n  width: 100%;\n  position: absolute;\n  height: 3rem;\n  left: 0;\n  ", " : 0;\n  opacity: 1;\n  color: black;\n  font-size: 14px;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  -moz-box-sizing: border-box;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n"])), function (props) { return props.withPicture ? 0 : "4vw !important"; }, function (props) { return props.withPicture ? "bottom" : "top"; });
-var ArtworkWrapper = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  min-height: 4rem;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n\n  &:hover ", " {\n    opacity: 1;\n  }\n  ", "\n"], ["\n  width: 100%;\n  height: ", ";\n  min-height: 4rem;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n\n  &:hover ", " {\n    opacity: 1;\n  }\n  ", "\n"])), function (props) { return props.cssHeight > 0 ? props.cssHeight + "vw" : "auto"; }, ArtworkControls, SharedStyles);
+var ArtworkName = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  font-size: .9rem;\n  font-weight: bold;\n"], ["\n  font-size: .9rem;\n  font-weight: bold;\n"])));
+var UpdateDate = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n"], ["\n  font-size: ", ";\n  color: ", ";\n"])), function (props) { return getThemeFontSize(props, 'tiny'); }, function (props) { return getThemeColor(props, 'textbody', colors.textbody); });
+var ArtworkControls = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  text-align: right;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  padding: 10px;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: .3s all;\n"], ["\n  text-align: right;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  padding: 10px;\n  width: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  transition: .3s all;\n"])));
+var ArtworkInfo = styled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  padding-left: ", ";\n  width: 100%;\n  position: absolute;\n  height: 3rem;\n  left: 0;\n  ", " : 0;\n  opacity: 1;\n  color: black;\n  font-size: 14px;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  -moz-box-sizing: border-box;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n"], ["\n  padding-left: ", ";\n  width: 100%;\n  position: absolute;\n  height: 3rem;\n  left: 0;\n  ", " : 0;\n  opacity: 1;\n  color: black;\n  font-size: 14px;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  -moz-box-sizing: border-box;\n  -webkit-transition: height .2s ease;\n  -moz-transition: height .2s ease;\n  transition: height .2s ease;\n  z-index: 1;\n"])), function (props) { return props.withPicture ? 0 : "4vw !important"; }, function (props) { return props.withPicture ? "bottom" : "top"; });
+var ArtworkWrapper = styled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  min-height: 4rem;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n\n  &:hover ", " {\n    opacity: 1;\n  }\n  ", "\n"], ["\n  width: 100%;\n  height: ", ";\n  min-height: 4rem;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n\n  &:hover ", " {\n    opacity: 1;\n  }\n  ", "\n"])), function (props) { return props.cssHeight > 0 ? props.cssHeight + "vw" : "auto"; }, ArtworkControls, SharedStyles);
 var ArtworkPicture = styled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  width: 100%;\n  height: calc(", "vw - 3.5rem);\n  overflow: hidden;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"], ["\n  width: 100%;\n  height: calc(", "vw - 3.5rem);\n  overflow: hidden;\n  position: relative;\n  line-height: 1.5em;\n  cursor: pointer;\n  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), function (props) { return props.cssHeight; }, ArtworkControls);
 function truncate$1(filename, max) {
     var extension = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
@@ -3851,7 +4150,7 @@ var Artwork = function (_a) {
     return React__default.createElement(ArtworkWrapper, { cssHeight: props.cssHeight ? props.cssHeight : props.picture ? 17 : 0, onClick: !props.picture && props.onClick ? props.onClick : undefined },
         props.picture ?
             React__default.createElement(ArtworkPicture, { onClick: function (e) { return props.onClick ? props.onClick(e) : null; }, cssHeight: props.cssHeight ? props.cssHeight : 17 },
-                React__default.createElement(Img, { src: props.picture, style: { objectFit: "contain", width: "100%", height: "100%" } }))
+                React__default.createElement(Img, { src: props.picture, style: { objectFit: "contain", width: "100%", height: "100%" }, onError: props.onError }))
             :
                 React__default.createElement(IconDoc, { ext: extension(props.name), style: { width: "3vw" } }),
         !props.edit ?
@@ -3873,74 +4172,12 @@ var Artwork = function (_a) {
                     "Updated ",
                     props.date) : null));
 };
-var templateObject_1$s, templateObject_2$h, templateObject_3$a, templateObject_4$7, templateObject_5$5, templateObject_6$5;
-
-var Overlay = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: 999;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  &&& {\n    position: fixed;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    background: rgba(42, 56, 63, 0.45);\n    display: flex;\n    z-index: 999;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])));
-var PopupWindow = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: 1006;\n\n    padding: 1rem;\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    width: ", ";\n    height: ", "; \n    margin: 0 !important;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    position: fixed;\n    ", "\n    overflow-y: hidden;\n    display: block;\n    z-index: 1006;\n\n    padding: 1rem;\n    border: 1px solid #CCD5DA;\n    background-color: #fefefe;\n    border-radius: 3px;\n\n    &:last-child {\n        margin-bottom: 0;\n    }\n    .popup-content {\n        overflow-y: auto;\n        height: 90%;\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.width) !== null && _a !== void 0 ? _a : '90%'; }, function (props) { var _a; return (_a = props.height) !== null && _a !== void 0 ? _a : '75%'; }, function (props) { return props.height ? '' : 'max-height: 700px;'; }, SharedStyles, SizerCss);
-var PopupHeader = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    position: sticky;\n    top: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    background: white;\n    padding: 3px;\n    z-index: 99;\n    .title {\n        font-size: 1.8rem;\n        font-weight: 500;\n        text-align: left;\n        align-self: center;\n        padding-top: 3px;\n        padding-left: 3px;\n        border-bottom: none;\n        font-family: \"skufont-demibold\",sans-serif;\n        color: #123952;\n    }\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
-var PopupContainer = function (_a) {
-    var children = _a.children;
-    var ref = React__default.useRef(document$1.createElement('div'));
-    useEffect(function () {
-        var current = ref.current;
-        document$1.body.appendChild(current);
-        return function () {
-            document$1.body.removeChild(current);
-        };
-    }, []);
-    return ReactDOM.createPortal(children, ref.current);
-};
-var Popup = function (_a) {
-    var header = _a.header, title = _a.title, controls = _a.controls, children = _a.children, onClose = _a.onClose, _b = _a.closeOnEsc, closeOnEsc = _b === void 0 ? true : _b, _c = _a.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? false : _c, props = __rest(_a, ["header", "title", "controls", "children", "onClose", "closeOnEsc", "closeOnClickOutside"]);
-    var ref = React__default.useRef(null);
-    /* there is a bug where this closes popup involuntarily
-    const handleClick = (e: Event) => {
-      // @ts-ignore
-      if (ref.current?.contains(e.target)) {
-        return;
-      }
-      onClose && onClose();
-    };
-    */
-    useEffect(function () {
-        var handleKeyDown = function (e) {
-            // @ts-ignore
-            if (e.key === "Escape") {
-                e.stopPropagation();
-                onClose && onClose();
-            }
-        };
-        if (closeOnEsc) {
-            document$1.addEventListener("keyup", handleKeyDown);
-        }
-        return function () {
-            if (closeOnEsc) {
-                document$1.removeEventListener("keyup", handleKeyDown);
-            }
-        };
-    }, [closeOnClickOutside, closeOnEsc, onClose]);
-    return React__default.createElement(PopupContainer, null,
-        React__default.createElement(Overlay, null,
-            React__default.createElement(PopupWindow, __assign({ className: "popup" }, props, { ref: ref }),
-                header ? header : (React__default.createElement(PopupHeader, { className: "popup-header", xsStyle: "flex-wrap: wrap-reverse;", smStyle: "flex-wrap: wrap;" },
-                    React__default.createElement(Col, { style: { textAlign: 'left', alignSelf: 'center' } },
-                        React__default.createElement("span", { className: "title" }, title)),
-                    React__default.createElement(Col, { style: { textAlign: 'right', alignSelf: 'center' } }, controls || React__default.createElement(Button, { onClick: onClose }, "Close")))),
-                React__default.createElement("div", { className: "popup-content" }, children))));
-};
-var ShowPopup = function (_a) {
-    var _b = _a.autoOpen, autoOpen = _b === void 0 ? false : _b, PopupComponent = _a.popup, render = _a.render, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? false : _d, props = __rest(_a, ["autoOpen", "popup", "render", "closeOnEsc", "closeOnClickOutside"]);
-    var _e = useState(autoOpen), showPopup = _e[0], setShowPopup = _e[1];
-    return React__default.createElement(React__default.Fragment, null,
-        showPopup && React__default.createElement(PopupComponent, __assign({ onClose: function () { return setShowPopup(false); }, closeOnEsc: closeOnEsc, closeOnClickOutside: closeOnClickOutside }, props)),
-        render && render({ onClick: function () { return setShowPopup(!showPopup); } }));
-};
-var templateObject_1$t, templateObject_2$i, templateObject_3$b;
+var templateObject_1$v, templateObject_2$k, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
 
-var TaskLabel = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["display: flex; min-height: 25px; ", ""], ["display: flex; min-height: 25px; ", ""])), function (p) { return p.hasCheckbox ? "width: calc(100% - 24px);" : ''; });
-var TaskName = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["flex-grow: 1; font-size:13px;"], ["flex-grow: 1; font-size:13px;"])));
-var StyledTask = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
-var TaskBody = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
+var TaskLabel = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["display: flex; min-height: 25px; ", ""], ["display: flex; min-height: 25px; ", ""])), function (p) { return p.hasCheckbox ? "width: calc(100% - 24px);" : ''; });
+var TaskName = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["flex-grow: 1; font-size:13px;"], ["flex-grow: 1; font-size:13px;"])));
+var StyledTask = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["margin-bottom: 1.5em; ", ""], ["margin-bottom: 1.5em; ", ""])), SharedStyles);
+var TaskBody = styled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["margin-left:34px;"], ["margin-left:34px;"])));
 var Task = function (_a) {
     var taskName = _a.taskName, date = _a.date, done = _a.done, assignee = _a.assignee, taskBody = _a.taskBody, _b = _a.initialChecked, initialChecked = _b === void 0 ? false : _b, onClickCheckbox = _a.onClickCheckbox, props = __rest(_a, ["taskName", "date", "done", "assignee", "taskBody", "initialChecked", "onClickCheckbox"]);
     var _c = useState(initialChecked), checked = _c[0], setChecked = _c[1];
@@ -3958,7 +4195,7 @@ 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"], ["\n    font-size: 13px;\n    font-family: 'skufont-regular',sans-serif,Roboto;\n"])));
+var StyledCalendarTaskBody = styled.span(templateObject_5$7 || (templateObject_5$7 = __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: ".concat(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, _e = _a.hideCheckbox, hideCheckbox = _e === void 0 ? false : _e, _f = _a.Icon, Icon = _f === void 0 ? null : _f, props = __rest(_a, ["title", "description", "date", "completed", "assignee", "onClickCheckbox", "colorType", "isDescriptionHtml", "hideCheckbox", "Icon"]);
@@ -4014,17 +4251,17 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
             assignee ? "for " + assignee : null,
             assignee ? "on " : null)));
 });
-var templateObject_1$u, templateObject_2$j, templateObject_3$c, templateObject_4$8, templateObject_5$6, templateObject_6$6;
+var templateObject_1$w, templateObject_2$l, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
 
-var PublisherWrapper = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors.bgblue); });
+var PublisherWrapper = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"], ["background: ", "; border-radius:5px; padding: 1em; margin-bottom: 1em;"])), function (props) { return getThemeColor(props, "bgblue", colors.bgblue); });
 var Publisher = function (props) {
     return React__default.createElement(PublisherWrapper, null,
         React__default.createElement(Textarea, { placeholder: "Post a note about this project" }));
 };
-var PostWrapper = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""], ["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""])), SharedStyles);
-var WidePart = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
-var Date$1 = styled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
-var Action = styled.a(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["display: inline-block; margin-left: 10px;"], ["display: inline-block; margin-left: 10px;"])));
+var PostWrapper = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""], ["display:flex; margin-bottom: 1em; line-height: 1.5em; ", ""])), SharedStyles);
+var WidePart = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["flex-grow:1;"], ["flex-grow:1;"])));
+var Date$1 = styled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["color: ", "; display: inline-block;"], ["color: ", "; display: inline-block;"])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
+var Action = styled.a(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["display: inline-block; margin-left: 10px;"], ["display: inline-block; margin-left: 10px;"])));
 var Author = styled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "], ["flex-grow: 1; color: ", "; font-size: 18px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "texttitle", colors.texttitle); });
 var Subject = styled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "], ["color:", "; font-size: 14px; font-family: \"skufont-medium\", sans-serif; "])), function (props) { return getThemeColor(props, "textbody", colors.textbody); });
 var TopLine = styled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["display:flex;"], ["display:flex;"])));
@@ -4044,12 +4281,12 @@ var FeedPost = function (props) {
             props.comments && props.comments.length > 0 ?
                 React__default.createElement(Comments, null, props.comments) : null));
 };
-var templateObject_1$v, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$7, templateObject_6$7, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10;
+var templateObject_1$x, templateObject_2$m, templateObject_3$e, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10;
 
-var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n    background: ", ";\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", "\n"], ["\n    background: ", ";\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", "\n"])), function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, SharedStyles);
-var ErrorTextContainer = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    background: white;\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    margin-left: auto;\n    padding: 100px 50px;\n    margin-top: auto;\n    margin-bottom: auto;\n\n    @media only screen and (max-width: 700px) {\n    margin-right: auto;\n    }\n\n    @media only screen and (min-width: 701px) {\n    margin-right: 10px;\n    }\n"], ["\n    background: white;\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    margin-left: auto;\n    padding: 100px 50px;\n    margin-top: auto;\n    margin-bottom: auto;\n\n    @media only screen and (max-width: 700px) {\n    margin-right: auto;\n    }\n\n    @media only screen and (min-width: 701px) {\n    margin-right: 10px;\n    }\n"])));
-var BotContainer = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    padding: 40px;\n\n    margin-right: auto;\n    @media only screen and (max-width: 700px) {\n      margin-left: auto;\n      margin-top: 20px;\n    }\n\n    @media only screen and (min-width: 701px) {\n      margin-left: 5px;\n    }\n"], ["\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    padding: 40px;\n\n    margin-right: auto;\n    @media only screen and (max-width: 700px) {\n      margin-left: auto;\n      margin-top: 20px;\n    }\n\n    @media only screen and (min-width: 701px) {\n      margin-left: 5px;\n    }\n"])));
-var BotImg = styled.img(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n    margin-top: 20px;\n    padding: 0;\n    margin: 0;\n    max-width: 450px;\n"], ["\n    margin-top: 20px;\n    padding: 0;\n    margin: 0;\n    max-width: 450px;\n"])));
+var Wrapper$3 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n    background: ", ";\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", "\n"], ["\n    background: ", ";\n    text-align: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", "\n"])), function (props) { return getThemeColor(props, 'bgblue', colors.bgblue); }, SharedStyles);
+var ErrorTextContainer = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n    background: white;\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    margin-left: auto;\n    padding: 100px 50px;\n    margin-top: auto;\n    margin-bottom: auto;\n\n    @media only screen and (max-width: 700px) {\n    margin-right: auto;\n    }\n\n    @media only screen and (min-width: 701px) {\n    margin-right: 10px;\n    }\n"], ["\n    background: white;\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    margin-left: auto;\n    padding: 100px 50px;\n    margin-top: auto;\n    margin-bottom: auto;\n\n    @media only screen and (max-width: 700px) {\n    margin-right: auto;\n    }\n\n    @media only screen and (min-width: 701px) {\n    margin-right: 10px;\n    }\n"])));
+var BotContainer = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    padding: 40px;\n\n    margin-right: auto;\n    @media only screen and (max-width: 700px) {\n      margin-left: auto;\n      margin-top: 20px;\n    }\n\n    @media only screen and (min-width: 701px) {\n      margin-left: 5px;\n    }\n"], ["\n    max-width: 450px;\n    text-align: center;\n    border-radius: 10px;\n    font-size: 2em;\n    padding: 40px;\n\n    margin-right: auto;\n    @media only screen and (max-width: 700px) {\n      margin-left: auto;\n      margin-top: 20px;\n    }\n\n    @media only screen and (min-width: 701px) {\n      margin-left: 5px;\n    }\n"])));
+var BotImg = styled.img(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n    margin-top: 20px;\n    padding: 0;\n    margin: 0;\n    max-width: 450px;\n"], ["\n    margin-top: 20px;\n    padding: 0;\n    margin: 0;\n    max-width: 450px;\n"])));
 var ErrorBoundary = /** @class */ (function (_super) {
     __extends(ErrorBoundary, _super);
     function ErrorBoundary(props) {
@@ -4077,7 +4314,7 @@ var ErrorBoundary = /** @class */ (function (_super) {
     };
     return ErrorBoundary;
 }(Component));
-var templateObject_1$w, templateObject_2$l, templateObject_3$e, templateObject_4$a;
+var templateObject_1$y, templateObject_2$n, templateObject_3$f, templateObject_4$c;
 
 var CustomDateInput = React__default.forwardRef(function (_a, ref) {
     var error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable, props = __rest(_a, ["error", "noMargin", "onClick", "isClearable"]);
@@ -4090,27 +4327,49 @@ var Datepicker = React__default.forwardRef(function (_a, ref) {
     return (React__default.createElement(BaseDatePicker, __assign({ locale: locale, selected: value || props.selected, todayButton: todayButton, customInput: customInput || React__default.createElement(CustomDateInput, { noMargin: true, error: error, isClearable: isClearable }), dateFormat: dateFormat, placeholderText: placeholder || placeholderText, isClearable: isClearable, showMonthDropdown: showMonthDropdown, showYearDropdown: showYearDropdown, nextMonthButtonLabel: nextMonthButtonLabel, nextYearButtonLabel: nextYearButtonLabel, previousMonthButtonLabel: previousMonthButtonLabel, previousYearButtonLabel: previousYearButtonLabel, dropdownMode: dropdownMode, peekNextMonth: peekNextMonth, popperClassName: "commonsku-styles-datepicker ".concat(popperClassName || ''), wrapperClassName: "commonsku-styles-datepicker ".concat(wrapperClassName || ''), showPopperArrow: showPopperArrow }, props, { ref: ref })));
 });
 
-var StyledDropdown = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"], ["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"])));
-var DropdownItem = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"], ["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"])), function (p) { return getColor('primary'); }, function (p) { return p.underlined &&
+var StyledDropdown = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"], ["\n&&& {\n    position: relative;\n    display: inline-block;\n}\n"])));
+var DropdownItem = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"], ["\n&&& {\n    color: ", ";\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    ", "\n    :last-child {\n        border-bottom: none;\n    }\n\n    &:hover {\n        background-color: ", ";\n        border-radius: 5px;\n        cursor: pointer;\n    }\n}\n"])), function (p) { return getColor('primary'); }, function (p) { return p.underlined &&
     "border-bottom: 1px solid ".concat(getColor(p.primary ? 'primary' : 'white'), ";"); }, function (p) { return getColor('bgblue'); });
-var DropDownContent = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n&&& {\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    padding: 8px 8px;\n    border-radius: 5px;\n    text-align: left;\n    z-index: 105;\n/*\n    a {\n        color: ", ";\n        padding: 8px 8px;\n        text-decoration: none;\n        display: block;\n        ", "\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}\n"], ["\n&&& {\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    padding: 8px 8px;\n    border-radius: 5px;\n    text-align: left;\n    z-index: 105;\n/*\n    a {\n        color: ", ";\n        padding: 8px 8px;\n        text-decoration: none;\n        display: block;\n        ", "\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}\n"])), function (p) { return getColor(p.primary ? 'white' : 'white'); }, function (p) { return getColor(p.primary ? 'primary' : 'cta'); }, function (p) { return p.underlined &&
+var DropDownContent = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n&&& {\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    min-width: ", ";\n    ", "\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    padding: 8px 8px;\n    border-radius: 5px;\n    text-align: left;\n    z-index: 105;\n/*\n    a {\n        color: ", ";\n        padding: 8px 8px;\n        text-decoration: none;\n        display: block;\n        ", "\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}\n"], ["\n&&& {\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    min-width: ", ";\n    ", "\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n    padding: 8px 8px;\n    border-radius: 5px;\n    text-align: left;\n    z-index: 105;\n/*\n    a {\n        color: ", ";\n        padding: 8px 8px;\n        text-decoration: none;\n        display: block;\n        ", "\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}\n"])), function (p) { return getColor('white'); }, function (p) { return typeof p.width === 'number' ? p.width + 'px' : p.width || '160px'; }, function (p) { return p.bordered ? "border: 2px solid ".concat(getColor(!p.primary || p.primary ? 'teal.main' : 'pink.main'), ";") : ''; }, function (p) { return getColor(p.primary ? 'primary' : 'cta'); }, function (p) { return p.underlined &&
     "border-bottom: 1px solid ".concat(getColor(p.primary ? 'primary' : 'white'), ";"); }, function (p) { return getColor(p.primary ? 'primary0' : 'cta'); }, function (p) { return getColor(p.primary ? 'texttitle' : 'white'); });
+var getContentStyle = function (width, rootElem, buttonElem) {
+    if (!rootElem || !buttonElem) {
+        return {};
+    }
+    var rect = rootElem.getBoundingClientRect();
+    var buttonRect = buttonElem.getBoundingClientRect();
+    var offset = window$1.innerWidth - (rect.x + rect.width);
+    if (offset < stripUnit(width)) {
+        return {
+            marginLeft: '-' + Math.abs(stripUnit(width) - buttonRect.width) + 'px',
+        };
+    }
+    return {};
+};
 var Dropdown = function (_a) {
-    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, _d = _a.style, style = _d === void 0 ? {} : _d, buttonVariant = _a.buttonVariant, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "mouseLeaveCallback", "size", "style", "buttonVariant"]);
+    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, onToggleMenu = _a.onToggleMenu, mouseLeaveCallback = _a.mouseLeaveCallback, size = _a.size, _d = _a.style, style = _d === void 0 ? {} : _d, buttonVariant = _a.buttonVariant, _e = _a.width, width = _e === void 0 ? 160 : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.hideOnMouseLeave, hideOnMouseLeave = _g === void 0 ? true : _g, props = __rest(_a, ["items", "children", "underlined", "primary", "text", "icon", "openMenu", "onToggleMenu", "mouseLeaveCallback", "size", "style", "buttonVariant", "width", "bordered", "hideOnMouseLeave"]);
     var rootRef = useRef(null);
-    var _e = useState(openMenu), showMenu = _e[0], setShowMenu = _e[1];
+    var buttonRef = useRef(null);
+    var _h = useState(openMenu), showMenu = _h[0], setShowMenu = _h[1];
     var iconProps = {
-        // width: '10px',
         color: getColor(primary ? 'primary100' : 'white'),
         style: { verticalAlign: 'middle', transitionDuration: '.3s', transform: 'rotate(' + (showMenu ? 0 : 180) + 'deg)' },
     };
-    var handleClick = function (e) {
+    var handleToggleMenu = useCallback(function (value) {
+        if (value === void 0) { value = null; }
+        setShowMenu(function (s) {
+            var newValue = value !== null ? value : !s;
+            onToggleMenu && onToggleMenu(newValue);
+            return newValue;
+        });
+    }, [onToggleMenu]);
+    var handleClick = useCallback(function (e) {
         var _a;
         if ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
             return;
         }
-        setShowMenu(false);
-    };
+        handleToggleMenu(false);
+    }, [handleToggleMenu]);
     useEffect(function () {
         if (items) {
             document$1.addEventListener("mousedown", handleClick);
@@ -4118,22 +4377,26 @@ var Dropdown = function (_a) {
                 document$1.removeEventListener("mousedown", handleClick);
             };
         }
-    }, [items]);
+    }, [items, handleClick]);
+    var contentStyle = getContentStyle(width, rootRef.current, buttonRef.current);
     return (React__default.createElement("span", __assign({ ref: rootRef }, props, { style: style, onMouseLeave: function () {
-            setShowMenu(false);
+            if (!hideOnMouseLeave) {
+                return;
+            }
+            handleToggleMenu(false);
             if (mouseLeaveCallback) {
                 mouseLeaveCallback();
             }
         } }),
         React__default.createElement(StyledDropdown, null,
             icon ?
-                React__default.createElement("span", { onClick: function () { return setShowMenu(!showMenu); } }, icon)
+                React__default.createElement("span", { onClick: function () { return handleToggleMenu(!showMenu); } }, icon)
                 :
-                    React__default.createElement(Button, { size: size, cta: Boolean(!primary), variant: buttonVariant, onClick: function () { return setShowMenu(!showMenu); } },
+                    React__default.createElement(Button, { size: size, cta: Boolean(!primary), variant: buttonVariant, onClick: function () { return handleToggleMenu(!showMenu); }, ref: buttonRef },
                         text ? text : "Actions",
                         " ",
                         React__default.createElement(ChevronIcon, __assign({ direction: "up" }, iconProps))),
-            showMenu && React__default.createElement(DropDownContent, { underlined: underlined, primary: primary },
+            showMenu && React__default.createElement(DropDownContent, { style: contentStyle, underlined: underlined, primary: primary, width: width, bordered: bordered },
                 items && items.map(function (item, i) {
                     return item && React__default.createElement(DropdownItem, __assign({ key: 'dropdown-item-' + i }, item.props, { primary: primary, underlined: item.props && item.props.underlined ? item.props.underlined : underlined, onClick: function () {
                             setShowMenu(false);
@@ -4142,10 +4405,10 @@ var Dropdown = function (_a) {
                 }),
                 children ? children : null))));
 };
-var templateObject_1$x, templateObject_2$m, templateObject_3$f;
+var templateObject_1$z, templateObject_2$o, templateObject_3$g;
 
-var Badge = styled.span(templateObject_1$y || (templateObject_1$y = __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 templateObject_1$y;
+var Badge = styled.span(templateObject_1$A || (templateObject_1$A = __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 templateObject_1$A;
 
 var verticalScrollbarWidth = function verticalScrollbarWidth() {
   // thanks too https://davidwalsh.name/detect-scrollbar-width
@@ -4158,9 +4421,9 @@ var verticalScrollbarWidth = function verticalScrollbarWidth() {
 };
 
 var PADDING_SIZE = 60;
-var Styles = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  overflow-x: ", ";\n  min-height: ", "px;\n  /* -ms-overflow-style: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  .headless-table-list::-webkit-scrollbar {\n    display: none;\n  } */\n\n  .th,\n  .td {\n    padding: 5px;\n    background-color: #fff;\n    overflow: hidden;\n    border: none !important;\n    text-align: center;\n  }\n  .react-table {\n    .th,\n    .td {\n      background: '#fff'\n    }\n    &.react-table-sticky {\n      overflow: scroll;\n      .header,\n      .footer {\n        position: sticky;\n        z-index: 1;\n        width: fit-content;\n      }\n      .header {\n        top: 0;\n        //box-shadow: 0px 3px 3px #ccc;\n      }\n      .footer {\n        bottom: 0;\n        box-shadow: 0px -3px 3px #ccc;\n      }\n      .body {\n        position: relative;\n        z-index: 0;\n      }\n      [data-sticky-td] {\n        position: sticky;\n      }\n      [data-sticky-last-left-td] {\n        box-shadow: 2px 0px 0px #ccc;\n      }\n      [data-sticky-first-right-td] {\n        box-shadow: -2px 0px 0px #ccc;\n      }\n    }\n\n    .sticky {\n      position: sticky !important;\n      position: -webkit-sticky !important;\n      z-index: 100 !important;\n    }\n\n    .row,\n    .sticky {\n      display: flex;\n      align-items: center;\n      background-color: white;\n      border-bottom: 1px solid #eee;\n      box-sizing: border-box;\n    }\n  }\n  .react-table-wrapper {\n    margin-top: 15px;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n    left: 0;\n  }\n  .react-table-pagination {\n    padding: 0.5rem;\n    margin: auto;\n    button {\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      border-radius: 4px;\n      background: transparent; \n      text-align: center;\n      border: 2px solid #02c0da;\n      color: #02c0da;\n      cursor: pointer;\n    }\n    button:hover {\n      color: #02c0da;\n      background: #E6EFF2;\n    }\n    button:focus {\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    input {\n      border: 1px solid #ABC7D1;\n      border-radius: 5px;\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      color: #52585c;\n      background-color: white;\n      width: 40px;\n      text-align: center;\n      margin-right: 5px;\n    }\n    input:focus{\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    .page-select {\n      margin: 0 20px;\n    }\n  }\n"], ["\n  overflow-x: ", ";\n  min-height: ", "px;\n  /* -ms-overflow-style: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  .headless-table-list::-webkit-scrollbar {\n    display: none;\n  } */\n\n  .th,\n  .td {\n    padding: 5px;\n    background-color: #fff;\n    overflow: hidden;\n    border: none !important;\n    text-align: center;\n  }\n  .react-table {\n    .th,\n    .td {\n      background: '#fff'\n    }\n    &.react-table-sticky {\n      overflow: scroll;\n      .header,\n      .footer {\n        position: sticky;\n        z-index: 1;\n        width: fit-content;\n      }\n      .header {\n        top: 0;\n        //box-shadow: 0px 3px 3px #ccc;\n      }\n      .footer {\n        bottom: 0;\n        box-shadow: 0px -3px 3px #ccc;\n      }\n      .body {\n        position: relative;\n        z-index: 0;\n      }\n      [data-sticky-td] {\n        position: sticky;\n      }\n      [data-sticky-last-left-td] {\n        box-shadow: 2px 0px 0px #ccc;\n      }\n      [data-sticky-first-right-td] {\n        box-shadow: -2px 0px 0px #ccc;\n      }\n    }\n\n    .sticky {\n      position: sticky !important;\n      position: -webkit-sticky !important;\n      z-index: 100 !important;\n    }\n\n    .row,\n    .sticky {\n      display: flex;\n      align-items: center;\n      background-color: white;\n      border-bottom: 1px solid #eee;\n      box-sizing: border-box;\n    }\n  }\n  .react-table-wrapper {\n    margin-top: 15px;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n    left: 0;\n  }\n  .react-table-pagination {\n    padding: 0.5rem;\n    margin: auto;\n    button {\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      border-radius: 4px;\n      background: transparent; \n      text-align: center;\n      border: 2px solid #02c0da;\n      color: #02c0da;\n      cursor: pointer;\n    }\n    button:hover {\n      color: #02c0da;\n      background: #E6EFF2;\n    }\n    button:focus {\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    input {\n      border: 1px solid #ABC7D1;\n      border-radius: 5px;\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      color: #52585c;\n      background-color: white;\n      width: 40px;\n      text-align: center;\n      margin-right: 5px;\n    }\n    input:focus{\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    .page-select {\n      margin: 0 20px;\n    }\n  }\n"])), function (props) { return props.pagination ? 'scroll' : 'hidden'; }, function (props) { return props.minHeight ? props.minHeight : "600"; });
-var TD$1 = styled.td(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { return props.backgroundColor ? props.backgroundColor : "#fff"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, SizerCss, SharedStyles);
-var TABLEDIV = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { return props.backgroundColor ? props.backgroundColor : "#fff"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, SizerCss, SharedStyles);
+var Styles = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  overflow-x: ", ";\n  min-height: ", "px;\n  /* -ms-overflow-style: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  .headless-table-list::-webkit-scrollbar {\n    display: none;\n  } */\n\n  .th,\n  .td {\n    padding: 5px;\n    background-color: #fff;\n    overflow: hidden;\n    border: none !important;\n    text-align: center;\n  }\n  .react-table {\n    .th,\n    .td {\n      background: '#fff'\n    }\n    &.react-table-sticky {\n      overflow: scroll;\n      .header,\n      .footer {\n        position: sticky;\n        z-index: 1;\n        width: fit-content;\n      }\n      .header {\n        top: 0;\n        //box-shadow: 0px 3px 3px #ccc;\n      }\n      .footer {\n        bottom: 0;\n        box-shadow: 0px -3px 3px #ccc;\n      }\n      .body {\n        position: relative;\n        z-index: 0;\n      }\n      [data-sticky-td] {\n        position: sticky;\n      }\n      [data-sticky-last-left-td] {\n        box-shadow: 2px 0px 0px #ccc;\n      }\n      [data-sticky-first-right-td] {\n        box-shadow: -2px 0px 0px #ccc;\n      }\n    }\n\n    .sticky {\n      position: sticky !important;\n      position: -webkit-sticky !important;\n      z-index: 100 !important;\n    }\n\n    .row,\n    .sticky {\n      display: flex;\n      align-items: center;\n      background-color: white;\n      border-bottom: 1px solid #eee;\n      box-sizing: border-box;\n    }\n  }\n  .react-table-wrapper {\n    margin-top: 15px;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n    left: 0;\n  }\n  .react-table-pagination {\n    padding: 0.5rem;\n    margin: auto;\n    button {\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      border-radius: 4px;\n      background: transparent; \n      text-align: center;\n      border: 2px solid #02c0da;\n      color: #02c0da;\n      cursor: pointer;\n    }\n    button:hover {\n      color: #02c0da;\n      background: #E6EFF2;\n    }\n    button:focus {\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    input {\n      border: 1px solid #ABC7D1;\n      border-radius: 5px;\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      color: #52585c;\n      background-color: white;\n      width: 40px;\n      text-align: center;\n      margin-right: 5px;\n    }\n    input:focus{\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    .page-select {\n      margin: 0 20px;\n    }\n  }\n"], ["\n  overflow-x: ", ";\n  min-height: ", "px;\n  /* -ms-overflow-style: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  .headless-table-list::-webkit-scrollbar {\n    display: none;\n  } */\n\n  .th,\n  .td {\n    padding: 5px;\n    background-color: #fff;\n    overflow: hidden;\n    border: none !important;\n    text-align: center;\n  }\n  .react-table {\n    .th,\n    .td {\n      background: '#fff'\n    }\n    &.react-table-sticky {\n      overflow: scroll;\n      .header,\n      .footer {\n        position: sticky;\n        z-index: 1;\n        width: fit-content;\n      }\n      .header {\n        top: 0;\n        //box-shadow: 0px 3px 3px #ccc;\n      }\n      .footer {\n        bottom: 0;\n        box-shadow: 0px -3px 3px #ccc;\n      }\n      .body {\n        position: relative;\n        z-index: 0;\n      }\n      [data-sticky-td] {\n        position: sticky;\n      }\n      [data-sticky-last-left-td] {\n        box-shadow: 2px 0px 0px #ccc;\n      }\n      [data-sticky-first-right-td] {\n        box-shadow: -2px 0px 0px #ccc;\n      }\n    }\n\n    .sticky {\n      position: sticky !important;\n      position: -webkit-sticky !important;\n      z-index: 100 !important;\n    }\n\n    .row,\n    .sticky {\n      display: flex;\n      align-items: center;\n      background-color: white;\n      border-bottom: 1px solid #eee;\n      box-sizing: border-box;\n    }\n  }\n  .react-table-wrapper {\n    margin-top: 15px;\n    position: absolute;\n    text-align: center;\n    width: 100%;\n    left: 0;\n  }\n  .react-table-pagination {\n    padding: 0.5rem;\n    margin: auto;\n    button {\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      border-radius: 4px;\n      background: transparent; \n      text-align: center;\n      border: 2px solid #02c0da;\n      color: #02c0da;\n      cursor: pointer;\n    }\n    button:hover {\n      color: #02c0da;\n      background: #E6EFF2;\n    }\n    button:focus {\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    input {\n      border: 1px solid #ABC7D1;\n      border-radius: 5px;\n      font-family: 'skufont-regular', sans-serif;\n      font-size: 18px;\n      padding: 5px 15px;\n      color: #52585c;\n      background-color: white;\n      width: 40px;\n      text-align: center;\n      margin-right: 5px;\n    }\n    input:focus{\n      border: 2px solid #02c0da;\n      outline-color: #02c0da;\n    }\n    .page-select {\n      margin: 0 20px;\n    }\n  }\n"])), function (props) { return props.pagination ? 'scroll' : 'hidden'; }, function (props) { return props.minHeight ? props.minHeight : "600"; });
+var TD$1 = styled.td(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { return props.backgroundColor ? props.backgroundColor : "#fff"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, SizerCss, SharedStyles);
+var TABLEDIV = styled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    border: 0 !important;\n    color: #52585c;\n    font-size: .875rem;\n    line-height: 1.75rem;\n    display: table-cell;\n    padding: 0.5625rem 0.625rem;\n    overflow: visible !important;\n    background-color: ", ";\n    &:hover {\n      cursor: ", ";\n    }\n    ", "\n    ", "\n  }\n"])), function (props) { return props.backgroundColor ? props.backgroundColor : "#fff"; }, function (props) { return props.clickable ? "pointer" : "normal"; }, SizerCss, SharedStyles);
 var StickyListContext = createContext({});
 StickyListContext.displayName = "StickyListContext";
 var DivCell = function (_a) {
@@ -4519,7 +4782,7 @@ function HeadlessTable(_a) {
                         ' '))
                 : null)));
 }
-var templateObject_1$z, templateObject_2$n, templateObject_3$g;
+var templateObject_1$B, templateObject_2$p, templateObject_3$h;
 
 var QUERY = '(prefers-reduced-motion: no-preference)';
 var isRenderingOnServer = typeof window$1 === 'undefined';
@@ -4777,17 +5040,17 @@ var Sparkle = function (_a) {
         React__default.createElement(SparkleSvg, { width: size, height: size, viewBox: "0 0 68 68", fill: "none" },
             React__default.createElement("path", { d: path, fill: color }))));
 };
-var comeInOut = keyframes(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"], ["\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
-var spin = keyframes(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n"])));
-var Wrapper$4 = styled.span(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
-var SparkleWrapper = styled.span(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  position: absolute;\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 700ms forwards;\n  }\n"], ["\n  position: absolute;\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 700ms forwards;\n  }\n"])), comeInOut);
-var SparkleSvg = styled.svg(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 1000ms linear;\n  }\n"], ["\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 1000ms linear;\n  }\n"])), spin);
+var comeInOut = keyframes(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"], ["\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
+var spin = keyframes(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(180deg);\n  }\n"])));
+var Wrapper$4 = styled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
+var SparkleWrapper = styled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n  position: absolute;\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 700ms forwards;\n  }\n"], ["\n  position: absolute;\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 700ms forwards;\n  }\n"])), comeInOut);
+var SparkleSvg = styled.svg(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 1000ms linear;\n  }\n"], ["\n  display: block;\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ", " 1000ms linear;\n  }\n"])), spin);
 var ChildWrapper = styled.strong(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  font-weight: bold;\n"], ["\n  position: relative;\n  z-index: 1;\n  font-weight: bold;\n"])));
-var templateObject_1$A, templateObject_2$o, templateObject_3$h, templateObject_4$b, templateObject_5$8, templateObject_6$8;
+var templateObject_1$C, templateObject_2$q, templateObject_3$i, templateObject_4$d, templateObject_5$9, templateObject_6$8;
 
-var StyledDropdown$1 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    width: 100%;\n"], ["\n    position: relative;\n    display: block;\n    width: 100%;\n"])));
-var DropdownItem$1 = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n    color: white;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"], ["\n    color: white;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"])), function (p) { return p.color ? p.color : "#F4F7FF"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
-var DropDownContent$1 = styled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 4;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n"], ["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 4;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n"])), function (p) { return getColor('white'); });
+var StyledDropdown$1 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    width: 100%;\n"], ["\n    position: relative;\n    display: block;\n    width: 100%;\n"])));
+var DropdownItem$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n    color: white;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"], ["\n    color: white;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"])), function (p) { return p.color ? p.color : "#F4F7FF"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
+var DropDownContent$1 = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 4;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n"], ["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 4;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n"])), function (p) { return getColor('white'); });
 var StatusDropdown = function (_a) {
     var items = _a.items, text = _a.text, value = _a.value, row = _a.row, setMenuIsOpen = _a.setMenuIsOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["items", "text", "value", "row", "setMenuIsOpen", "disabled"]);
     var node = useRef();
@@ -4828,13 +5091,13 @@ var StatusDropdown = function (_a) {
                 } }), item.content);
         }))));
 };
-var templateObject_1$B, templateObject_2$p, templateObject_3$i;
+var templateObject_1$D, templateObject_2$r, templateObject_3$j;
 
-var StyledCircles = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  line-height: 0;\n  margin-bottom: 9px;\n"], ["\n  line-height: 0;\n  margin-bottom: 9px;\n"])));
-var Circle = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  background: #005B8C;\n  opacity: ", ";\n  width: 5px;\n  height: 5px;\n  border-radius: 10px;\n  margin-right: 2px;\n  display: inline-block;\n"], ["\n  background: #005B8C;\n  opacity: ", ";\n  width: 5px;\n  height: 5px;\n  border-radius: 10px;\n  margin-right: 2px;\n  display: inline-block;\n"])), function (p) { return p.disabled ? 0.1 : 1; });
-var StyledDropdown$2 = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    width: 100%;\n"], ["\n    position: relative;\n    display: block;\n    width: 100%;\n"])));
-var DropdownDisplay = styled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 28px;\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"], ["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 28px;\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.showCircles ? "inherit" : "flex"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
-var DropdownItem$2 = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 30px;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n    word-wrap: break-word;\n"], ["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 30px;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n    word-wrap: break-word;\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
+var StyledCircles = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  line-height: 0;\n  margin-bottom: 9px;\n"], ["\n  line-height: 0;\n  margin-bottom: 9px;\n"])));
+var Circle = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  background: #005B8C;\n  opacity: ", ";\n  width: 5px;\n  height: 5px;\n  border-radius: 10px;\n  margin-right: 2px;\n  display: inline-block;\n"], ["\n  background: #005B8C;\n  opacity: ", ";\n  width: 5px;\n  height: 5px;\n  border-radius: 10px;\n  margin-right: 2px;\n  display: inline-block;\n"])), function (p) { return p.disabled ? 0.1 : 1; });
+var StyledDropdown$2 = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n    position: relative;\n    display: block;\n    width: 100%;\n"], ["\n    position: relative;\n    display: block;\n    width: 100%;\n"])));
+var DropdownDisplay = styled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 28px;\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"], ["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 28px;\n    display: ", ";\n    justify-content: center;\n    align-items: center;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.showCircles ? "inherit" : "flex"; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
+var DropdownItem$2 = styled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 30px;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n    word-wrap: break-word;\n"], ["\n    color: black;\n    padding: 8px 8px;\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    background-color: ", ";\n    line-height: 1em;\n    min-height: 30px;\n    border-radius: ", ";\n    opacity: ", ";\n    &:hover {\n        opacity: .85;\n        cursor: pointer;\n    }\n    word-wrap: break-word;\n"])), function (p) { return p.background || '#F4F7FF'; }, function (p) { return p.rounded ? "100px" : 0; }, function (p) { return p.active ? 0.85 : 1; });
 var DropDownContent$2 = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 10;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n    ", "\n"], ["\n    display: block;\n    position: absolute;\n    background-color: ", ";\n    width: 100%;\n    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.5);\n    z-index: 10;\n    border-radius: 10px;\n    text-align: left;\n    overflow: hidden;\n    ", "\n"])), function (p) { return getColor('white'); }, function (p) { return p.scrollContentHeight ? "max-height: ".concat(p.scrollContentHeight, "; overflow-y: auto;") : ''; });
 var Circles = function (_a) {
     var val = _a.val, max = _a.max;
@@ -4885,20 +5148,18 @@ var StateDropdown = function (_a) {
                 " ");
         }))));
 };
-var templateObject_1$C, templateObject_2$q, templateObject_3$j, templateObject_4$c, templateObject_5$9, templateObject_6$9;
+var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$9;
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -4914,6 +5175,10 @@ var config = {
 
 var TransitionGroupContext = React__default.createContext(null);
 
+var forceReflow = function forceReflow(node) {
+  return node.scrollTop;
+};
+
 var UNMOUNTED = 'unmounted';
 var EXITED = 'exited';
 var ENTERING = 'entering';
@@ -5133,6 +5398,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+          // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+          // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+          if (node) forceReflow(node);
+        }
+
         this.performEnter(mounting);
       } else {
         this.performExit();
@@ -5336,9 +5609,9 @@ Transition.ENTERING = ENTERING;
 Transition.ENTERED = ENTERED;
 Transition.EXITING = EXITING;
 
-var CollapseStyled = styled.div(templateObject_1$D || (templateObject_1$D = __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$r || (templateObject_2$r = __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$k || (templateObject_3$k = __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 CollapseStyled = styled.div(templateObject_1$F || (templateObject_1$F = __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$t || (templateObject_2$t = __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$l || (templateObject_3$l = __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 transitionStatusToClass = {
     entering: 'collapsing',
     entered: 'collapsed show',
@@ -5431,10 +5704,10 @@ function CollapsiblePanels(_a) {
             React__default.createElement(Collapsible, __assign({}, panelProps, { duration: duration, isOpen: _titleProps.isOpen }), children)));
     })));
 }
-var templateObject_1$D, templateObject_2$r, templateObject_3$k;
+var templateObject_1$F, templateObject_2$t, templateObject_3$l;
 
-var ProgressWrapper$1 = styled.div(templateObject_1$E || (templateObject_1$E = __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$s || (templateObject_2$s = __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 (p) { return "calc(".concat(100 * (!p.max ? 1 : (p.value / p.max)), "% - (").concat(p.left || 0, "px + 17px))"); }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
+var ProgressWrapper$1 = styled.div(templateObject_1$G || (templateObject_1$G = __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$u || (templateObject_2$u = __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 (p) { return "calc(".concat(100 * (!p.max ? 1 : (p.value / p.max)), "% - (").concat(p.left || 0, "px + 17px))"); }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
 var LabeledBar = function (props) {
     var width = useWindowSize()[0];
     var _a = useState({ height: 0, width: 0, x: 0, y: 0, }), size = _a[0], setSize = _a[1];
@@ -5482,10 +5755,10 @@ var LabeledMultiProgress = function (_a) {
             React__default.createElement(Number$1, { commas: true, decimalPoints: 0, num: props.max })),
         React__default.createElement(MultiProgress, __assign({}, props, { labeled: true, style: __assign({ marginTop: 40 }, (props.style || {})) })));
 };
-var templateObject_1$E, templateObject_2$s;
+var templateObject_1$G, templateObject_2$u;
 
-var ProgressWrapper$2 = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n    max-width: 100%;\n    width: 100%;\n    height: 48px;\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    box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n    border-radius: 50px;\n\n    ", "\n"])), SharedStyles);
-var ProgressBar$2 = styled.div(templateObject_2$t || (templateObject_2$t = __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 (p) {
+var ProgressWrapper$2 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    max-width: 100%;\n    width: 100%;\n    height: 48px;\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    box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n    border-radius: 50px;\n\n    ", "\n"])), SharedStyles);
+var ProgressBar$2 = styled.div(templateObject_2$v || (templateObject_2$v = __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 (p) {
     if (p.offset) {
         return "".concat(p.offset, "px");
     }
@@ -5542,7 +5815,7 @@ function Thermometer(_a) {
             React__default.createElement(ProgressWrapper$2, { style: { marginTop: 10, background: isSecondary ? '#FFF9C5' : '#C9FDE5' } },
                 React__default.createElement(ProgressBar$2, { target: target, value: value1, color: barColor || colors.secondary3.main, offset: calcVal1Width(), elementWidth: value1Width })))));
 }
-var templateObject_1$F, templateObject_2$t;
+var templateObject_1$H, templateObject_2$v;
 
 function LightIndicatorLight(_a) {
     var _b = _a.width, _c = _a.height, _d = _a.lit, lit = _d === void 0 ? false : _d, _e = _a.large, large = _e === void 0 ? false : _e, props = __rest(_a, ["width", "height", "lit", "large"]);
@@ -5562,18 +5835,18 @@ function LightIndicatorLight(_a) {
         React__default.createElement("defs", null,
             React__default.createElement("radialGradient", { id: lightID, cx: 0, cy: 0, r: 1, gradientUnits: "userSpaceOnUse", gradientTransform: gradientTransform }, litOrNot)));
 }
-var LightIndicatorText = styled.p(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors.neutrals.bodyText : colors.neutrals[70]; });
-var LightIndicatorContainer = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    max-width: 100%;\n    margin-bottom: 8px;\n    margin-right: 16px;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    max-width: 100%;\n    margin-bottom: 8px;\n    margin-right: 16px;\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
+var LightIndicatorText = styled.p(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        margin-top:0;\n        margin-bottom:0;\n    };\n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        margin-top:0;\n        margin-bottom:0;\n    };\n"])), function (props) { return props.large ? themeOptions.fontStyles.p.medium.fontSize : themeOptions.fontStyles.p.small.fontSize; }, themeOptions.fontStyles.p.small.fontFamily, themeOptions.fontStyles.p.small.lineHeight, function (props) { return props.LightIndicatorTextColor ? colors.neutrals.bodyText : colors.neutrals[70]; });
+var LightIndicatorContainer = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    max-width: 100%;\n    margin-bottom: 8px;\n    margin-right: 16px;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    max-width: 100%;\n    margin-bottom: 8px;\n    margin-right: 16px;\n    ", "\n    ", "\n  }\n"])), SharedStyles, SizerCss);
 function LightIndicator(_a) {
-    var _b = _a.name, name = _b === void 0 ? "Name this Indicator" : _b, _c = _a.on, on = _c === void 0 ? false : _c, _d = _a.large, large = _d === void 0 ? false : _d, props = __rest(_a, ["name", "on", "large"]);
+    var _b = _a.name, name = _b === void 0 ? "Name this Indicator" : _b, _c = _a.on, on = _c === void 0 ? false : _c, _d = _a.large, large = _d === void 0 ? false : _d, _e = _a.textProps, textProps = _e === void 0 ? {} : _e, props = __rest(_a, ["name", "on", "large", "textProps"]);
     return (React__default.createElement(LightIndicatorContainer, __assign({}, props),
         React__default.createElement(LightIndicatorLight, { large: large, lit: on, mr: 8, mt: 8 }),
-        React__default.createElement(LightIndicatorText, { large: large, LightIndicatorTextColor: on }, name)));
+        React__default.createElement(LightIndicatorText, __assign({}, textProps, { large: large, LightIndicatorTextColor: on }), name)));
 }
-var templateObject_1$G, templateObject_2$u;
+var templateObject_1$I, templateObject_2$w;
 
-var DefaultStarText = styled.p(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n    &&& {\n        opacity: ", ";\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"], ["\n    &&& {\n        opacity: ", ";\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors.neutrals[60]; });
-var DefaultStarContainer = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    width: ", ";\n    margin-bottom: 16px;\n    margin-right: 16px;\n    cursor: pointer;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    width: ", ";\n    margin-bottom: 16px;\n    margin-right: 16px;\n    cursor: pointer;\n    ", "\n    ", "\n  }\n"])), function (props) { return props.width ? props.width : props.noText ? '24px' : '128px'; }, SharedStyles, SizerCss);
+var DefaultStarText = styled.p(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n    &&& {\n        opacity: ", ";\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"], ["\n    &&& {\n        opacity: ", ";\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        max-width: 180px;\n        margin-top:0;\n        margin-bottom:0;\n    };\n"])), function (props) { return props.clicked ? 1 : props.hover ? 0.8 : 0; }, themeOptions.fontStyles.p.medium.fontSize, themeOptions.fontStyles.p.medium.fontFamily, themeOptions.fontStyles.p.medium.lineHeight, function (props) { return props.clicked ? props.color : colors.neutrals[60]; });
+var DefaultStarContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    width: ", ";\n    margin-bottom: 16px;\n    margin-right: 16px;\n    cursor: pointer;\n    ", "\n    ", "\n  }\n"], ["\n  &&& {\n    display: flex;\n    vertical-align: middle;\n    align-items: top;\n    width: ", ";\n    margin-bottom: 16px;\n    margin-right: 16px;\n    cursor: pointer;\n    ", "\n    ", "\n  }\n"])), function (props) { return props.width ? props.width : props.noText ? '24px' : '128px'; }, SharedStyles, SizerCss);
 function DefaultStar(_a) {
     var _b = _a.initialSelected, initialSelected = _b === void 0 ? false : _b, _c = _a.forceSelected, forceSelected = _c === void 0 ? false : _c, hoverText = _a.hoverText, _d = _a.noText, noText = _d === void 0 ? false : _d, _e = _a.children, children = _e === void 0 ? "Default" : _e, width = _a.width, _f = _a.color, color = _f === void 0 ? teal.main : _f, props = __rest(_a, ["initialSelected", "forceSelected", "hoverText", "noText", "children", "width", "color"]);
     if (!hoverText) {
@@ -5586,7 +5859,7 @@ function DefaultStar(_a) {
         noText ? null :
             React__default.createElement(DefaultStarText, { hoverText: hoverText, hover: isHover, clicked: isClicked || forceSelected, color: color }, !isClicked && isHover ? hoverText : children)));
 }
-var templateObject_1$H, templateObject_2$v;
+var templateObject_1$J, templateObject_2$x;
 
 function CancelButton(_a) {
     var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.variant, variant = _c === void 0 ? "error" : _c, _d = _a.style, Props = __rest(_a, ["size", "variant", "style"]);
@@ -5598,7 +5871,7 @@ function DoneButton(_a) {
     return (React__default.createElement(Button, __assign({ variant: variant, size: size }, Props), "Done"));
 }
 
-var StyledLink = styled.a(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        text-decoration: none;\n        cursor: pointer;\n        display: flex;\n        ", ";\n        ", "\n        ", "\n        &:hover {\n            color: ", ";\n        }\n    }  \n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        text-decoration: none;\n        cursor: pointer;\n        display: flex;\n        ", ";\n        ", "\n        ", "\n        &:hover {\n            color: ", ";\n        }\n    }  \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors.teal.dark; });
+var StyledLink = styled.a(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        text-decoration: none;\n        cursor: pointer;\n        display: flex;\n        ", ";\n        ", "\n        ", "\n        &:hover {\n            color: ", ";\n        }\n    }  \n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        color: ", ";\n        text-decoration: none;\n        cursor: pointer;\n        display: flex;\n        ", ";\n        ", "\n        ", "\n        &:hover {\n            color: ", ";\n        }\n    }  \n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.color || colors.teal.main; }, function (props) { return props.flexShrink ? "flex-shrink: 0;" : null; }, SharedStyles, SizerCss, function (props) { return props.hoverColor ? props.hoverColor : colors.teal.dark; });
 function LinkWithIcon(_a) {
     var Icon = _a.Icon, href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? colors.teal.main : _b, _c = _a.hoverColor, hoverColor = _c === void 0 ? colors.teal.dark : _c, _d = _a.flexShrink, flexShrink = _d === void 0 ? false : _d, iconProps = _a.iconProps, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["Icon", "href", "children", "color", "hoverColor", "flexShrink", "iconProps", "style"]);
     var _f = useState(false), isHover = _f[0], setHover = _f[1];
@@ -5615,7 +5888,7 @@ function LinkWithIcon(_a) {
         RenderIcon,
         children));
 }
-var templateObject_1$I;
+var templateObject_1$K;
 
 var NotificationVariantStyles = function (alertType) {
     switch (alertType) {
@@ -5638,7 +5911,7 @@ var NotificationVariantStyles = function (alertType) {
             return {};
     }
 };
-var StyledNotification = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.alertType ? NotificationVariantStyles(props.alertType) : {}; }, SharedStyles, SizerCss);
+var StyledNotification = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"], ["\n    &&& {\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        width: fit-container;\n        border-radius: 5px;\n        padding: 24px 16px;\n        display:flex;\n        flex-direction: row;\n        ", ";\n        ", "\n        ", "\n    }\n"])), fontStyles.p.medium.fontSize, fontStyles.p.medium.fontFamily, fontStyles.p.medium.lineHeight, function (props) { return props.alertType ? NotificationVariantStyles(props.alertType) : {}; }, SharedStyles, SizerCss);
 function AlertNotification(_a) {
     var _b = _a.alertType, alertType = _b === void 0 ? "neutral" : _b, _c = _a.learnMore, learnMore = _c === void 0 ? false : _c, href = _a.href, linkText = _a.linkText, children = _a.children, _d = _a.style, props = __rest(_a, ["alertType", "learnMore", "href", "linkText", "children", "style"]);
     function notificationIcon() {
@@ -5663,7 +5936,7 @@ function AlertNotification(_a) {
                     React__default.createElement(LinkWithIcon, { href: href, style: { marginLeft: "auto" }, pl: 24, flexShrink: true }, linkText)
                     : null));
 }
-var templateObject_1$J;
+var templateObject_1$L;
 
 function useNumberInput(props) {
     var _a = props.defaultValue, defaultValue = _a === void 0 ? "" : _a, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, inputMode = props.inputMode, _b = props.localeOptions, localeOptions = _b === void 0 ? {} : _b;
@@ -5756,10 +6029,10 @@ function NumberInput(props) {
             : null));
 }
 
-var InputStepperOuterContainer = styled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n    &&&{\n        width: ", ";\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        width: ", ";\n        ", "\n        ", "\n    }\n"])), function (props) { return props.width ? props.width : "160px"; }, SharedStyles, SizerCss);
-var InputStepperInnerContainer = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n    &&&{\n        display: flex;\n        width: 100%;\n        flex-direction: row;\n        justify-content: space-between;\n        border-radius: 5px;\n        background-color: white;\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        display: flex;\n        width: 100%;\n        flex-direction: row;\n        justify-content: space-between;\n        border-radius: 5px;\n        background-color: white;\n        ", "\n        ", "\n    }\n"])), SharedStyles, SizerCss);
-var InputStepperLabel = styled.label(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n    &&&{\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        margin-bottom: 8px;\n        color: ", "\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        margin-bottom: 8px;\n        color: ", "\n        ", "\n        ", "\n    }\n"])), fontStyles.label.fontSize, fontStyles.label.fontFamily, fontStyles.label.lineHeight, neutrals.bodyText, SharedStyles, SizerCss);
-var CurrentNumber = styled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n    &&&{\n        display:flex;\n        justify-content: center;\n        align-items: center;\n        height:38px;\n        width:100%;\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        color: ", ";\n        text-align:center;\n        vertical-align:middle;\n    }\n"], ["\n    &&&{\n        display:flex;\n        justify-content: center;\n        align-items: center;\n        height:38px;\n        width:100%;\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        color: ", ";\n        text-align:center;\n        vertical-align:middle;\n    }\n"])), neutrals['60'], neutrals['60'], neutrals.bodyText);
+var InputStepperOuterContainer = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    &&&{\n        width: ", ";\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        width: ", ";\n        ", "\n        ", "\n    }\n"])), function (props) { return props.width ? props.width : "160px"; }, SharedStyles, SizerCss);
+var InputStepperInnerContainer = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n    &&&{\n        display: flex;\n        width: 100%;\n        flex-direction: row;\n        justify-content: space-between;\n        border-radius: 5px;\n        background-color: white;\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        display: flex;\n        width: 100%;\n        flex-direction: row;\n        justify-content: space-between;\n        border-radius: 5px;\n        background-color: white;\n        ", "\n        ", "\n    }\n"])), SharedStyles, SizerCss);
+var InputStepperLabel = styled.label(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n    &&&{\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        margin-bottom: 8px;\n        color: ", "\n        ", "\n        ", "\n    }\n"], ["\n    &&&{\n        font-size: ", ";\n        font-family: ", ";\n        line-height: ", ";\n        margin-bottom: 8px;\n        color: ", "\n        ", "\n        ", "\n    }\n"])), fontStyles.label.fontSize, fontStyles.label.fontFamily, fontStyles.label.lineHeight, neutrals.bodyText, SharedStyles, SizerCss);
+var CurrentNumber = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n    &&&{\n        display:flex;\n        justify-content: center;\n        align-items: center;\n        height:38px;\n        width:100%;\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        color: ", ";\n        text-align:center;\n        vertical-align:middle;\n    }\n"], ["\n    &&&{\n        display:flex;\n        justify-content: center;\n        align-items: center;\n        height:38px;\n        width:100%;\n        border-top: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        color: ", ";\n        text-align:center;\n        vertical-align:middle;\n    }\n"])), neutrals['60'], neutrals['60'], neutrals.bodyText);
 var canIncrement = function (value, max) {
     return (max !== undefined && value < max) || max === undefined;
 };
@@ -5818,11 +6091,21 @@ function InputStepper(props) {
     return (React__default.createElement(InputStepperOuterContainer, { width: width },
         React__default.createElement(InputStepperLabel, { style: labelStyle }, label),
         React__default.createElement(InputStepperInnerContainer, { style: style },
-            React__default.createElement(IconButton, { Icon: SubtractIcon, variant: decrementButtonVariant, onClick: handleDecrement, style: { borderRadius: "5px 0 0 5px" }, onMouseDown: onDecrementMouseDown, onMouseLeave: onDecrementMouseLeave, onMouseUp: onDecrementMouseUp, onTouchEnd: onDecrementTouchEnd, onTouchStart: onDecrementTouchStart }),
+            React__default.createElement(IconButton, { Icon: SubtractIcon, variant: decrementButtonVariant, onClick: handleDecrement, style: { borderRadius: "5px 0 0 5px" }, onMouseDown: function (e) {
+                    if (e.button !== 0) {
+                        return;
+                    }
+                    onDecrementMouseDown();
+                }, onMouseOut: onDecrementMouseLeave, onMouseUp: onDecrementMouseUp, onTouchEnd: onDecrementTouchEnd, onTouchStart: onDecrementTouchStart }),
             React__default.createElement(Input, __assign({}, rest, { style: { width: '100%', margin: 0, borderRadius: 0, textAlign: "center" }, value: value, inputMode: inputMode, onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: inputDisabled, ref: ref, onKeyUp: delayChange })),
-            React__default.createElement(IconButton, { Icon: AddIcon, variant: incrementButtonVariant, onClick: handleIncrement, style: { borderRadius: "0 5px 5px 0" }, onMouseDown: onIncrementMouseDown, onMouseLeave: onIncrementMouseLeave, onMouseUp: onIncrementMouseUp, onTouchEnd: onIncrementTouchEnd, onTouchStart: onIncrementTouchStart }))));
+            React__default.createElement(IconButton, { Icon: AddIcon, variant: incrementButtonVariant, onClick: handleIncrement, style: { borderRadius: "0 5px 5px 0" }, onMouseDown: function (e) {
+                    if (e.button !== 0) {
+                        return;
+                    }
+                    onIncrementMouseDown();
+                }, onMouseOut: onIncrementMouseLeave, onMouseUp: onIncrementMouseUp, onTouchEnd: onIncrementTouchEnd, onTouchStart: onIncrementTouchStart }))));
 }
-var templateObject_1$K, templateObject_2$w, templateObject_3$l, templateObject_4$d;
+var templateObject_1$M, templateObject_2$y, templateObject_3$m, templateObject_4$f;
 
 var VirtualTable = function (props) {
     var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent, onSort = props.onSort, onResize = props.onResize, rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter;
@@ -5882,7 +6165,7 @@ var VirtualTable = function (props) {
         return (React__default.createElement("div", __assign({ className: "tr-group" }, row.getRowProps(), { style: __assign(__assign(__assign({}, style), (rowGroupStyles ? rowGroupStyles({ row: row, style: style }) : {})), { minWidth: totalColumnsWidth, width: '100%' }) }),
             React__default.createElement("div", { className: "tr", style: rowStyles ? rowStyles({ row: row, style: style }) : {} }, row.cells.map(function (cell) {
                 var cellProps = cell.getCellProps();
-                return (React__default.createElement("div", __assign({}, __assign({}, cellProps), { onClick: function () { return (onClickRow ? onClickRow(cell.row.original, index) : null); }, className: "td" }), cell.render("Cell", { isScrolling: isScrolling, resetList: resetList, toggleAllRowsExpanded: toggleAllRowsExpanded })));
+                return (React__default.createElement("div", __assign({}, __assign({}, cellProps), { onClick: function () { return (onClickRow ? onClickRow(cell.row.original, index, { cell: cell, isScrolling: isScrolling, resetList: resetList, toggleAllRowsExpanded: toggleAllRowsExpanded }) : null); }, className: "td" }), cell.render("Cell", { isScrolling: isScrolling, resetList: resetList, toggleAllRowsExpanded: toggleAllRowsExpanded })));
             })),
             row.isExpanded && renderRowSubComponent
                 ? React__default.createElement("div", { className: 'tr-sub' }, renderRowSubComponent({ row: row, resetList: resetList, }))
@@ -5945,11 +6228,285 @@ function sortDirection(col) {
     return "updown";
 }
 
-var VirtualTableStyles = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\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 ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; });
-var templateObject_1$L;
+var VirtualTableStyles = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n    ", "\n  }\n}"], ["\npadding: 1rem;\n\n.table-list-rows {\n  ", "\n}\n\n.table {\n  display: inline-flex;\n  flex-direction: column;\n  ", "\n  width: 100% !important;\n  min-width: 100% !important;\n  ", "\n\n  .thead {\n    padding-right: 15px;\n    ", "\n\n    .tr {\n      overflow-x: hidden;\n      min-width: 100%;\n    }\n  }\n\n  .tbody {\n    flex: 1 1 auto;\n    height: 80vh;\n  }\n\n  .tr-group {\n    display: flex;\n    flex-direction: column;\n\n    .tr, .tr-sub {\n      width: 99%;\n    }\n  }\n\n  .tr {\n    display: flex;\n\n    ", "\n  }\n\n  .tr.header {\n    position: sticky;\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 ? "\n    border-spacing: 0;\n    border: 1px solid black;\n  " : ''; }, function (p) { return p.tableHeight ? "height: ".concat(p.tableHeight).concat(typeof p.tableHeight === 'number' ? 'px' : '', ";") : ''; }, function (p) { return p.bordered ? 'border-bottom: 1px solid #000;' : ''; }, function (p) { return p.bordered ? "\n      :last-child {\n        .td {\n          border-bottom: 0;\n        }\n      }\n    " : ''; }, function (p) { return p.bordered ? "\n      border-bottom: 1px solid black;\n      border-right: 1px solid black;\n      :last-child {\n        border-right: 0;\n      }\n    " : ''; });
+var templateObject_1$N;
 
-var StyledDayBody = styled(Col)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"], ["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (p) { return p.selected ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.today ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.row ? "\n        border-bottom: 1px solid #eee;\n    " : ''; }, function (p) { return p.disabled ? "\n        color: #ccc;\n        pointer-events: none;\n    " : ''; });
-var templateObject_1$M;
+var isSizeObj = function (val) { return typeof val === 'object' && (val['xs'] || val['sm'] || val['md'] || val['lg'] || val['xl']); };
+var parseResponsiveValue = function (value, transform) {
+    if (typeof value === 'number' || typeof value === 'string' || typeof value === 'boolean') {
+        return transform(value);
+    }
+    else if (Array.isArray(value)) {
+        return value.map(function (v, i) {
+            var _a;
+            if (i >= sizes.length) {
+                return {};
+            }
+            var size = sizes[i];
+            if (v === null || v === undefined) {
+                return {};
+            }
+            return _a = {}, _a[sizeMedia[size]] = transform(v), _a;
+        }).reduce(function (acc, v) { return (__assign(__assign({}, acc), v)); }, {});
+    }
+    else if (typeof value === 'object') {
+        if (!isSizeObj(value)) {
+            return value;
+        }
+        return Object.keys(value)
+            .filter(function (k) { return sizes.includes(k); })
+            .map(function (k) {
+            var _a;
+            return (_a = {}, _a[sizeMedia[k]] = transform(value[k]), _a);
+        })
+            .reduce(function (acc, v) { return (__assign(__assign({}, acc), v)); }, {});
+    }
+    return {};
+};
+
+var createMeasurementStyle = function (v, keys) {
+    var value = typeof v === 'string' && ['auto', 'none'].includes(v)
+        ? v
+        : parseMeasurement(v);
+    return keys.reduce(function (acc, k) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[k] = value, _a)));
+    }, {});
+};
+var styleKeys = [
+    'pr', 'pl', 'pt', 'pb', 'px', 'py',
+    'mr', 'ml', 'mt', 'mb', 'mx', 'my',
+    'width', 'height',
+    'color', 'bg', 'background', 'backgroundColor',
+    'colSpan',
+    'style', 'sx',
+];
+var stylesTransformMap = {
+    mr: function (v) { return createMeasurementStyle(v, ['marginRight']); },
+    ml: function (v) { return createMeasurementStyle(v, ['marginLeft']); },
+    mt: function (v) { return createMeasurementStyle(v, ['marginTop']); },
+    mb: function (v) { return createMeasurementStyle(v, ['marginBottom']); },
+    mx: function (v) { return createMeasurementStyle(v, ['marginLeft', 'marginRight']); },
+    my: function (v) { return createMeasurementStyle(v, ['marginTop', 'marginBottom']); },
+    pr: function (v) { return createMeasurementStyle(v, ['paddingRight']); },
+    pl: function (v) { return createMeasurementStyle(v, ['paddingLeft']); },
+    pt: function (v) { return createMeasurementStyle(v, ['paddingTop']); },
+    pb: function (v) { return createMeasurementStyle(v, ['paddingBottom']); },
+    px: function (v) { return createMeasurementStyle(v, ['paddingLeft', 'paddingRight']); },
+    py: function (v) { return createMeasurementStyle(v, ['paddingTop', 'paddingBottom']); },
+    width: function (v) { return createMeasurementStyle(v, ['width']); },
+    height: function (v) { return createMeasurementStyle(v, ['height']); },
+    color: function (v) { return ({ color: v }); },
+    bg: function (v) { return ({ background: v }); },
+    background: function (v) { return ({ background: v }); },
+    backgroundColor: function (v) { return ({ backgroundColor: v }); },
+    hidden: function (v) { return (v ? { display: 'none' } : {}); },
+    block: function (v) { return (v ? { display: 'block' } : {}); },
+    inline_block: function (v) { return (v ? { display: 'inline-block' } : {}); },
+    flex: function (v) { return (v ? { display: 'flex' } : {}); },
+    inline_flex: function (v) { return (v ? { display: 'inline-flex' } : {}); },
+    grid: function (v) { return (v ? { display: 'grid' } : {}); },
+    float: function (v) { return (v === 'clearfix'
+        ? { '&::after': {
+                content: '',
+                display: 'table',
+                clear: 'both',
+            } }
+        : { float: v }); },
+    colSpan: function (v) {
+        if (v === 'auto' || v === true) {
+            return { gridColumn: 'auto' };
+        }
+        else if (v === false) {
+            return { display: 'none' };
+        }
+        var colSpan = stripUnit(v);
+        return { gridColumn: "span ".concat(colSpan, " / span ").concat(colSpan) };
+    },
+    style: function (v) { return v; },
+    sx: function (v) { return v; },
+};
+var parseCskuStyles = function (p) {
+    var sizeStylesObj = {};
+    var stylesObj = {};
+    var stylesArr = [];
+    Object.keys(p)
+        .filter(function (k) { return styleKeys.includes(k); })
+        .forEach(function (k) {
+        var parsedStyles = parseResponsiveValue(p[k], stylesTransformMap[k]);
+        if (Array.isArray(parsedStyles)) {
+            parsedStyles.forEach(function (v) {
+                stylesArr.push(v);
+            });
+        }
+        else {
+            if (isSizeObj(p[k]) || Array.isArray(p[k])) {
+                Object.keys(parsedStyles).forEach(function (sk) {
+                    sizeStylesObj[sk] = __assign(__assign({}, (sizeStylesObj[sk] || {})), parsedStyles[sk]);
+                });
+            }
+            else {
+                stylesObj = __assign(__assign({}, stylesObj), parsedStyles);
+            }
+        }
+    });
+    return __spreadArray([stylesObj, sizeStylesObj], stylesArr, true);
+};
+var Csku = styled.div(parseCskuStyles);
+
+var Grid = styled.div(function (p) {
+    var params = {
+        display: 'grid',
+        gridTemplateColumns: "repeat(".concat(p.columns || 12, ", minmax(0px, 1fr))"),
+    };
+    if (p.gap) {
+        params['gap'] = parseMeasurement(p.gap);
+    }
+    return params;
+});
+var GridItem = styled.div(function (p) {
+    var params = { gridColumn: 'auto' };
+    var styles = [];
+    if (p.colSpan) {
+        var colStyles = parseResponsiveValue(p.colSpan, function (v) {
+            if (v === 'auto') {
+                return { gridColumn: 'auto' };
+            }
+            var colSpan = stripUnit(v);
+            return { gridColumn: "span ".concat(colSpan, " / span ").concat(colSpan) };
+        });
+        if (Array.isArray(colStyles)) {
+            colStyles.forEach(function (v) { styles.push(v); });
+        }
+        else {
+            params = __assign(__assign({}, params), colStyles);
+        }
+    }
+    return __spreadArray(__spreadArray([], styles, true), [params], false);
+});
+
+var BaseCollapsible = function (props) {
+    var children = props.children, style = props.style, label = props.label, controls = props.controls, _a = props.isOpen, isOpen = _a === void 0 ? false : _a, handleToggle = props.handleToggle;
+    var _b = useState(isOpen ? undefined : 0), height = _b[0], setHeight = _b[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        if (!height || !isOpen || !ref.current)
+            return undefined;
+        var resizeObserver = new ResizeObserver(function (el) {
+            setHeight(el[0].contentRect.height);
+        });
+        resizeObserver.observe(ref.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [height, isOpen]);
+    useEffect(function () {
+        var _a;
+        if (isOpen)
+            setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height);
+        else
+            setHeight(0);
+    }, [isOpen]);
+    return (React__default.createElement("div", { style: style },
+        React__default.createElement(Row, { style: __assign({ alignItems: 'center', padding: 10, paddingTop: 12, paddingBottom: 8, background: isOpen ? colors.white : colors.teal[20], borderRadius: isOpen ? 25 : 2000, flex: 'none', order: 1, flexGrow: 0 }, (isOpen
+                ? { border: "3px solid ".concat(colors.teal.main) }
+                : {})) },
+            React__default.createElement(Col, { xs: true, sm: 5.9, style: { cursor: 'pointer', }, onClick: handleToggle },
+                React__default.createElement(CollapsibleLabel, { isOpen: isOpen }, label)),
+            React__default.createElement(Col, { xs: true, sm: 5.9, style: { cursor: 'pointer', }, smStyle: "text-align: right;", xsStyle: "text-align: center;", onClick: handleToggle },
+                React__default.createElement(CollapsibleControls, { isOpen: isOpen }, controls)),
+            React__default.createElement(Col, { xs: true, style: {
+                    overflow: 'hidden',
+                    transition: 'height 0.2s ease-in-out',
+                    height: height,
+                } },
+                React__default.createElement("div", { ref: ref }, children)))));
+};
+var Collapsible$1 = function (props) {
+    var children = props.children, open = props.open, onToggleOpen = props.onToggleOpen, rest = __rest(props, ["children", "open", "onToggleOpen"]);
+    var _a = useState(open), isOpen = _a[0], setIsOpen = _a[1];
+    var handleToggle = function () {
+        setIsOpen(function (prev) {
+            var val = !prev;
+            onToggleOpen && onToggleOpen(val);
+            return val;
+        });
+    };
+    return (React__default.createElement(BaseCollapsible, __assign({ isOpen: isOpen, handleToggle: handleToggle }, rest), children));
+};
+var CollapsibleLabel = function (props) {
+    var children = props.children, isOpen = props.isOpen;
+    if (children === undefined || children === null) {
+        return null;
+    }
+    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
+        return React__default.createElement("span", { style: {
+                color: colors.teal.main,
+                fontFamily: fontFamilies.bold,
+                fontStyle: 'normal',
+                fontWeight: 500,
+                fontSize: 16,
+            } }, children);
+    }
+    return React__default.cloneElement(children, { isOpen: isOpen });
+};
+var CollapsibleArrowIcon = function (props) {
+    var isOpen = props.isOpen;
+    return React__default.createElement(ChevronIcon, { size: 'medium', direction: 'down', altText: isOpen ? 'Close' : 'Open', style: __assign({ transition: 'all 0.2s linear', MozTransition: 'all 0.2s linear', WebkitTransition: 'all 0.2s linear' }, (isOpen ? {
+            transform: 'rotate(180deg)',
+            MozTransform: 'rotate(180deg)',
+            WebkitTransform: 'rotate(180deg)',
+        } : {
+            transform: 'rotate(360deg)',
+            MozTransform: 'rotate(360deg)',
+            WebkitTransform: 'rotate(360deg)',
+        })) });
+};
+var CollapsibleControls = function (props) {
+    var children = props.children, _a = props.isOpen, isOpen = _a === void 0 ? false : _a;
+    if (children === undefined || children === null) {
+        return React__default.createElement(CollapsibleArrowIcon, { isOpen: isOpen });
+    }
+    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
+        return React__default.createElement("span", { style: {
+                color: colors.teal.main,
+                fontFamily: fontFamilies.bold,
+                fontStyle: 'normal',
+                fontWeight: 500,
+                fontSize: 16,
+            } }, children);
+    }
+    return React__default.cloneElement(children, { isOpen: isOpen });
+};
+function Collapsibles(props) {
+    var list = props.list, controls = props.controls;
+    var _a = useState(-1), open = _a[0], setOpen = _a[1];
+    var handleOpen = function (i) { return setOpen(function (s) { return s === i ? -1 : i; }); };
+    return (React__default.createElement("div", null, list.map(function (v, i) { return (React__default.createElement(BaseCollapsible, { key: "Collapsible-key-".concat(i), label: v.label, style: __assign({ paddingBottom: 10 }, v.style), controls: controls || v.controls, isOpen: open === i, handleToggle: function () {
+            handleOpen(i);
+        } }, v.children)); })));
+}
+
+var ConfirmPopup = function (props) {
+    var _a = props.confirmText, confirmText = _a === void 0 ? 'Are you sure you want to delete?' : _a, _b = props.disableDelete, disableDelete = _b === void 0 ? false : _b, onDelete = props.onDelete, onClose = props.onClose;
+    return (React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: '36px', noHeader: true, noCloseButton: true },
+        React__default.createElement("p", { style: {
+                fontFamily: fontStyles.p.medium.fontFamily,
+                fontSize: fontStyles.p.medium.fontSize,
+                lineHeight: fontStyles.p.medium.lineHeight,
+                color: colors.neutrals.bodyText
+            } }, confirmText),
+        React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
+            React__default.createElement(Button, { size: "medium", variant: 'secondary', mr: 24, onClick: function () {
+                    onClose && onClose();
+                } }, "Cancel"),
+            React__default.createElement(Button, { size: "medium", variant: disableDelete ? 'disabled' : 'error', onClick: function () {
+                    onDelete && onDelete();
+                }, disabled: disableDelete }, "Delete"))));
+};
+
+var StyledDayBody = styled(Col)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"], ["\n    position: relative;\n    height: auto;\n    border-right: 1px solid #eee;\n    overflow: hidden;\n    cursor: pointer;\n    background: #fff;\n    transition: 0.25s ease-out;\n    font-size: 1em;\n    overflow-y: auto;\n\n    &:last-child {\n        border-right: none;\n    }\n\n    &:hover {\n        background: #f9f9f9;\n        transition: 0.5s ease-out;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (p) { return p.selected ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.today ? "\n        background: #f9f9f9;\n    " : ''; }, function (p) { return p.row ? "\n        border-bottom: 1px solid #eee;\n    " : ''; }, function (p) { return p.disabled ? "\n        color: #ccc;\n        pointer-events: none;\n    " : ''; });
+var templateObject_1$O;
 
 var CalendarDayBody = function (_a) {
     var day = _a.day, selectedDate = _a.selectedDate, onClick = _a.onClick, children = _a.children, weekend = _a.weekend, props = __rest(_a, ["day", "selectedDate", "onClick", "children", "weekend"]);
@@ -5964,8 +6521,8 @@ var CalendarDayBody = function (_a) {
     return (React__default.createElement(StyledDayBody, __assign({ padded: true, totalCols: weekend ? 7 : 5, xs: 1, selected: isSelected, today: isToday, onClick: onClick, className: classNames }, props), children || React__default.createElement("span", { style: { padding: 10, } }, formattedDay)));
 };
 
-var DaysBodyWrapper = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"], ["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"])));
-var templateObject_1$N;
+var DaysBodyWrapper = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"], ["\n    font-size: 1em;\n    font-weight: 300;\n    line-height: 1;\n    color: #777;\n    background: #f9f9f9;\n    position: relative;\n    border-bottom: 1px solid #eee;\n"])));
+var templateObject_1$P;
 
 var CalendarDaysBody = function (_a) {
     var _b = _a.days, days = _b === void 0 ? [] : _b, currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, onClickDay = _a.onClickDay, components = _a.components, _c = _a.dayBodyProps, dayBodyProps = _c === void 0 ? {} : _c, _d = _a.weekend, weekend = _d === void 0 ? true : _d, props = __rest(_a, ["days", "currentMonth", "selectedDate", "onClickDay", "components", "dayBodyProps", "weekend"]);
@@ -5977,11 +6534,11 @@ var CalendarDaysBody = function (_a) {
         }))));
 };
 
-var DaysHeaderWrapper = styled(Row)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"], ["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"])));
-var templateObject_1$O;
+var DaysHeaderWrapper = styled(Row)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"], ["\n    text-transform: uppercase;\n    font-weight: 400;\n    color: #ccc;\n    font-size: 70%;\n    padding: 0.75em 0 !important;\n    border-bottom: 1px solid #eee;\n"])));
+var templateObject_1$Q;
 
-var StyledDayText = styled(Text)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: ".concat(colors.cta, ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    ") : ''; });
-var templateObject_1$P;
+var StyledDayText = styled(Text)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (props) { return props.selected ? "\n        border-radius: 15px;\n        background: ".concat(colors.cta, ";\n        color: white;\n        font-weight: bold;\n        padding: 0 5px;\n    ") : ''; });
+var templateObject_1$R;
 
 var CalendarDaysHeader = function (_a) {
     var currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, weekend = _a.weekend;
@@ -5996,11 +6553,11 @@ var CalendarDaysHeader = function (_a) {
     })));
 };
 
-var CalendarWrapper = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"])));
-var templateObject_1$Q;
+var CalendarWrapper = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"], ["\n    display: block;\n    position: relative;\n    width: 100%;\n    background: #fff;\n    .calendar-scroll {\n      overflow-x: scroll;\n     }\n    .days-body-wrapper, .days-header-wrapper {\n      min-width: 900px;\n    }\n"])));
+var templateObject_1$S;
 
-var HeaderWrapper = styled(Row)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"], ["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"])));
-var templateObject_1$R;
+var HeaderWrapper = styled(Row)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"], ["\n    width: 100%;\n    padding: 1.75em 0 !important;\n    border-bottom: 1px solid #eee;\n    background: #fff;\n    font-weight: 700;\n    font-size: 100%;\n"])));
+var templateObject_1$T;
 
 var DefaultCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek;
@@ -6033,7 +6590,7 @@ var TasksCalendarDayBody = function (_a) {
         React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
 };
 
-var WeekNav = styled(Text)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: inline-block;\n  padding: 0;\n"], ["\n  display: inline-block;\n  padding: 0;\n"])));
+var WeekNav = styled(Text)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  display: inline-block;\n  padding: 0;\n"], ["\n  display: inline-block;\n  padding: 0;\n"])));
 var CalendarIconDatePicker = React__default.forwardRef(function (_a, ref) {
     var value = _a.value, onClick = _a.onClick;
     return (React__default.createElement("span", { ref: ref, onClick: onClick },
@@ -6106,7 +6663,7 @@ var TasksCalendarHeader = function (_a) {
                 } }, "+ Add Task")
             : null)));
 };
-var templateObject_1$S;
+var templateObject_1$U;
 
 var TasksCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
@@ -6458,7 +7015,7 @@ var scrollbarWidth = function () {
     return scrollbarWidth;
 };
 
-var SimpleWindowedTableStyles = styled.div(templateObject_1$T || (templateObject_1$T = __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 ?
+var SimpleWindowedTableStyles = styled.div(templateObject_1$V || (templateObject_1$V = __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: ".concat(typeof p.bordered === 'string'
         ? p.bordered
         : "1px solid ".concat(getThemeColor(p, 'tableBorder', '#edf2f5')), ";")
@@ -6539,7 +7096,7 @@ function SimpleWindowedTable(_a) {
         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 ".concat(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$T;
+var templateObject_1$V;
 
-export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridIcon, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, sizes$1 as sizes, themeOptions, toggleSizes };
+export { AddIcon, AddNoteIcon, AddTaskIcon, AlertIcon, AlertNotification, ArrowIcon, Artwork, SKUAsyncSelect as AsyncSelect, Avatar, AwaitingProofIcon, Backdrop, Background, Badge, BotIcon, Box, BulletIcon, Button, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CompletedCheckmarkIcon, ConfirmPopup, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HistoryIcon, IconButton, IconDoc, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, IntegrationsIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledSelect, LabeledTextarea, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MailIcon, MarketingStatusIcon, MenuIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavResourcesIcon, NavSalesIcon, NoteIcon, Number$1 as Number, NumberInput, OpportunityCircleIcon, Overlay, Padding, Page, PanelContact, PanelTileContact, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PresentationCircleIcon, Product, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, ReceiptLongIcon, ResponsiveTable, Row, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SharedStyles, ShopIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableStyles, SizerCss, SizerWrapper, Sparkles, Spinner, StarIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDayBody, StyledDayText, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, TBody, TD, TH, THSorted, THead, TR, Tab, TabBar, Table, TableIcon, Tabs, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TasksCalendarHeader, TemplateIcon, Text, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, TrashIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes$1 as sizes, themeOptions, toggleSizes };
 //# sourceMappingURL=index.es.js.map