@commonsku/styles 1.16.10 → 1.16.12

package/dist/index.es.js

@@ -360,10 +360,14 @@ var getUnit = function (measurement) {
     var matchedMeasurement = measurement.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/);
     return matchedMeasurement ? matchedMeasurement[2] : "px";
 };
+var isCalOrPercent = function (measurement) { return (measurement.endsWith('%') || measurement.includes('calc')); };
 var stripUnit = function (measurement) {
     return (typeof measurement === "number") ? measurement : parseFloat(measurement);
 };
-var parseMeasurement = function (measurement) { return stripUnit(measurement) + getUnit(measurement); };
+var parseMeasurement = function (measurement) {
+    return typeof measurement === 'string' && isCalOrPercent(measurement)
+        ? measurement : stripUnit(measurement) + getUnit(measurement);
+};
 var wait = function (time) {
     var timeoutId;
     var promise = new Promise(function (resolve) {
@@ -2595,6 +2599,49 @@ function DoubleArrowIcon(_a) {
         React__default.createElement("path", { d: directionPaths[1], fill: color })));
 }
 
+var iconSizes$5 = {
+    tiny: {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 32 32",
+    },
+    small: {
+        width: 24,
+        height: 24,
+        viewBox: "0 0 32 32",
+    },
+    medium: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+    large: {
+        width: 40,
+        height: 40,
+        viewBox: "0 0 32 32",
+    },
+    huge: {
+        width: 48,
+        height: 48,
+        viewBox: "0 0 32 32",
+    },
+    default: {
+        width: 32,
+        height: 32,
+        viewBox: "0 0 32 32",
+    },
+};
+function ImageIcon(props) {
+    var _a = props.color, color = _a === void 0 ? teal.main : _a, _b = props.size, size = _b === void 0 ? "medium" : _b, _c = props.altText, altText = _c === void 0 ? "ImageIcon" : _c, rest = __rest(props, ["color", "size", "altText"]);
+    var id = uniqueId('clip0_1244_70960');
+    return (React__default.createElement(SVG, __assign({ size: size, iconSizes: iconSizes$5, "aria-labelledby": altText, fill: "none" }, rest),
+        React__default.createElement("g", { clipPath: "url(#".concat(id, ")") },
+            React__default.createElement("path", { d: "M25.3333 6.66667V25.3333H6.66667V6.66667H25.3333ZM25.3333 4H6.66667C5.2 4 4 5.2 4 6.66667V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V6.66667C28 5.2 26.8 4 25.3333 4ZM18.8533 15.8133L14.8533 20.9733L12 17.52L8 22.6667H24L18.8533 15.8133Z", fill: color })),
+        React__default.createElement("defs", null,
+            React__default.createElement("clipPath", { id: id },
+                React__default.createElement("rect", { width: "32", height: "32", fill: "white" })))));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2800,6 +2847,20 @@ function DropzonedPreviews(_a) {
                 ? React__default.createElement(ThumbsContainer, null, thumbs)
                 : React__default.createElement(PlaceHolder, null, placeholder))));
 }
+function DropzonedSimple(_a) {
+    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
+    var _b = useDropzone(__assign({ accept: accept }, props)), acceptedFiles = _b.acceptedFiles, getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
+    var Child = React__default.Children.only(children);
+    if (!Child) {
+        return null;
+    }
+    var ChildElem = React__default.cloneElement(Child, {
+        acceptedFiles: acceptedFiles,
+        inputProps: getInputProps(),
+        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
+    });
+    return ChildElem;
+}
 var templateObject_1$c, templateObject_2$7, templateObject_3$3, templateObject_4$2, templateObject_5$2, templateObject_6$1;
 
 /*
@@ -4091,6 +4152,7 @@ var useFallbackRef = function (forwardedRef) {
 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 ChevronButton = styled(ChevronIcon)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  && {\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    ", "\n    top: calc(50% - 120px/2 + 22.5px);\n  }\n"], ["\n  && {\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    ", "\n    top: calc(50% - 120px/2 + 22.5px);\n  }\n"])), function (props) { return props.left ? 'left: 0px;' : 'right: 0px;'; });
 var PopupContainer = function (_a) {
     var children = _a.children;
     var ref = React__default.useRef(document$1.createElement('div'));
@@ -4104,7 +4166,7 @@ var PopupContainer = function (_a) {
     return ReactDOM.createPortal(children, ref.current);
 };
 var Popup = React__default.forwardRef(function (_a, forwardedRef) {
-    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, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName"]);
+    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, popupClassName = _a.popupClassName, contentClassName = _a.contentClassName, _f = _a.PopupWindowComponent, PopupWindowComponent = _f === void 0 ? PopupWindow : _f, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex", "popupClassName", "contentClassName", "PopupWindowComponent"]);
     var ref = useFallbackRef(forwardedRef);
     useClickOutside({
         ref: ref,
@@ -4132,14 +4194,16 @@ var Popup = React__default.forwardRef(function (_a, forwardedRef) {
     }, [closeOnClickOutside, closeOnEsc, onClose]);
     return React__default.createElement(PopupContainer, null,
         React__default.createElement(Overlay, { zIndex: overlayZIndex },
-            React__default.createElement(PopupWindow, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, props, { ref: ref }),
+            React__default.createElement(PopupWindowComponent, __assign({ className: "popup" + (popupClassName ? " ".concat(popupClassName) : '') }, 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" + (contentClassName ? " ".concat(contentClassName) : '') }, children))));
+                React__default.createElement("div", { className: "popup-content" + (contentClassName ? " ".concat(contentClassName) : '') },
+                    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"]);
@@ -4148,12 +4212,22 @@ var ShowPopup = function (_a) {
         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 ChevronPopupWindow = function (props) {
+    var onPreviousButtonClick = props.onPreviousButtonClick, onNextButtonClick = props.onNextButtonClick, hidePreviousButton = props.hidePreviousButton, hideNextButton = props.hideNextButton, rest = __rest(props, ["onPreviousButtonClick", "onNextButtonClick", "hidePreviousButton", "hideNextButton"]);
+    return React__default.createElement(React__default.Fragment, null,
+        !hidePreviousButton && React__default.createElement(ChevronButton, { direction: 'left', left: true, onClick: onPreviousButtonClick }),
+        React__default.createElement(PopupWindow, __assign({}, rest)),
+        !hideNextButton && React__default.createElement(ChevronButton, { direction: 'right', onClick: onNextButtonClick }));
+};
+var ChevronPopup = function (props) {
+    return React__default.createElement(Popup, __assign({ PopupWindowComponent: ChevronPopupWindow }, props));
+};
+var templateObject_1$n, templateObject_2$e, templateObject_3$7, templateObject_4$6;
 
 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 FieldError = styled.p(templateObject_4$7 || (templateObject_4$7 = __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;
@@ -4336,14 +4410,14 @@ function GridTable(_a) {
             Adding && NewRow,
             onAdd && !Adding && AddNew)));
 }
-var templateObject_1$o, templateObject_2$f, templateObject_3$8, templateObject_4$6;
+var templateObject_1$o, templateObject_2$f, templateObject_3$8, templateObject_4$7;
 
 var tabSizes = {
     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$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"
+var Tab = styled.li(templateObject_4$8 || (templateObject_4$8 = __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:
@@ -4431,7 +4505,7 @@ var Tabs = /** @class */ (function (_super) {
     };
     return Tabs;
 }(Component));
-var templateObject_1$p, templateObject_2$g, templateObject_3$9, templateObject_4$7;
+var templateObject_1$p, templateObject_2$g, templateObject_3$9, templateObject_4$8;
 
 var toggleSizes = {
     small: {
@@ -4569,7 +4643,7 @@ var templateObject_1$t, templateObject_2$i;
 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 ProductWrapper = styled.div(templateObject_4$9 || (templateObject_4$9 = __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,
@@ -4580,12 +4654,12 @@ 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$u, templateObject_2$j, templateObject_3$b, templateObject_4$8;
+var templateObject_1$u, templateObject_2$j, templateObject_3$b, templateObject_4$9;
 
 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 ArtworkInfo = styled.div(templateObject_4$a || (templateObject_4$a = __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) {
@@ -4624,12 +4698,12 @@ var Artwork = function (_a) {
                     "Updated ",
                     props.date) : null));
 };
-var templateObject_1$v, templateObject_2$k, templateObject_3$c, templateObject_4$9, templateObject_5$6, templateObject_6$5;
+var templateObject_1$v, templateObject_2$k, templateObject_3$c, templateObject_4$a, templateObject_5$6, templateObject_6$5;
 
 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 TaskBody = styled.div(templateObject_4$b || (templateObject_4$b = __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];
@@ -4703,7 +4777,7 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
             assignee ? "for " + assignee : null,
             assignee ? "on " : null)));
 });
-var templateObject_1$w, templateObject_2$l, templateObject_3$d, templateObject_4$a, templateObject_5$7, templateObject_6$6;
+var templateObject_1$w, templateObject_2$l, templateObject_3$d, templateObject_4$b, templateObject_5$7, templateObject_6$6;
 
 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) {
@@ -4712,7 +4786,7 @@ var Publisher = function (props) {
 };
 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 Date$1 = styled.span(templateObject_4$c || (templateObject_4$c = __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); });
@@ -4733,12 +4807,12 @@ var FeedPost = function (props) {
             props.comments && props.comments.length > 0 ?
                 React__default.createElement(Comments, null, props.comments) : null));
 };
-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 templateObject_1$x, templateObject_2$m, templateObject_3$e, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10;
 
 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 BotImg = styled.img(templateObject_4$d || (templateObject_4$d = __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) {
@@ -4766,7 +4840,7 @@ var ErrorBoundary = /** @class */ (function (_super) {
     };
     return ErrorBoundary;
 }(Component));
-var templateObject_1$y, templateObject_2$n, templateObject_3$f, templateObject_4$c;
+var templateObject_1$y, templateObject_2$n, templateObject_3$f, templateObject_4$d;
 
 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"]);
@@ -5285,10 +5359,10 @@ var Sparkle = function (_a) {
 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 SparkleWrapper = styled.span(templateObject_4$e || (templateObject_4$e = __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$C, templateObject_2$q, templateObject_3$i, templateObject_4$d, templateObject_5$9, templateObject_6$8;
+var templateObject_1$C, templateObject_2$q, templateObject_3$i, templateObject_4$e, templateObject_5$9, templateObject_6$8;
 
 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; });
@@ -5338,7 +5412,7 @@ var templateObject_1$D, templateObject_2$r, templateObject_3$j;
 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 DropdownDisplay = styled.div(templateObject_4$f || (templateObject_4$f = __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) {
@@ -5390,7 +5464,7 @@ var StateDropdown = function (_a) {
                 " ");
         }))));
 };
-var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$9;
+var templateObject_1$E, templateObject_2$s, templateObject_3$k, templateObject_4$f, templateObject_5$a, templateObject_6$9;
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -6285,7 +6359,7 @@ function NumberInput(props) {
 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 CurrentNumber = styled.div(templateObject_4$g || (templateObject_4$g = __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);
 function InputStepperStyled(props) {
     var containerWidth = props.containerWidth, inputDisabled = props.inputDisabled, label = props.label, labelStyle = props.labelStyle, containerStyle = props.containerStyle, style = props.style, onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.decrementButtonProps, decrementButtonProps = _a === void 0 ? {} : _a, _b = props.incrementButtonProps, incrementButtonProps = _b === void 0 ? {} : _b, rest = __rest(props, ["containerWidth", "inputDisabled", "label", "labelStyle", "containerStyle", "style", "onIncrement", "onDecrement", "decrementButtonProps", "incrementButtonProps"]);
     return (React__default.createElement(InputStepperOuterContainer, { width: containerWidth, style: containerStyle },
@@ -6367,7 +6441,7 @@ function InputStepper(props) {
                     onIncrementMouseDown();
                 }, onMouseOut: holdIncrement ? onIncrementMouseLeave : undefined, onMouseUp: holdIncrement ? onIncrementMouseUp : undefined, onTouchEnd: holdIncrement ? onIncrementTouchEnd : undefined, onTouchStart: holdIncrement ? onIncrementTouchStart : undefined }))));
 }
-var templateObject_1$M, templateObject_2$y, templateObject_3$m, templateObject_4$f;
+var templateObject_1$M, templateObject_2$y, templateObject_3$m, templateObject_4$g;
 
 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;
@@ -6606,7 +6680,8 @@ var parseCskuStyles = function (p) {
     });
     return __spreadArray([stylesObj, sizeStylesObj], stylesArr, true);
 };
-var Csku = styled.div(parseCskuStyles);
+var Csku = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n", "\n  ", "\n", "\n"], ["\n", "\n  ", "\n", "\n"])), function (p) { return p.forceStyles ? '&&& {' : ''; }, parseCskuStyles, function (p) { return p.forceStyles ? '}' : ''; });
+var templateObject_1$O;
 
 var Grid = styled.div(function (p) {
     var params = {
@@ -6770,8 +6845,56 @@ var ConfirmPopup = function (props) {
                 }, 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 ConfirmAlertPopup = function (props) {
+    var _a = props.padding, padding = _a === void 0 ? '16px' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? 555 : _b, _c = props.title, title = _c === void 0 ? '' : _c, _d = props.children, children = _d === void 0 ? 'Are you sure you want to perform this action?' : _d, _e = props.cancelButtonContent, cancelButtonContent = _e === void 0 ? 'Cancel' : _e, _f = props.actionButtonContent, actionButtonContent = _f === void 0 ? 'Delete' : _f, _g = props.disableActionButton, disableActionButton = _g === void 0 ? false : _g, onAction = props.onAction, onClose = props.onClose;
+    return (React__default.createElement(Popup, { width: 'auto', height: 'auto', padding: padding, style: { borderRadius: 10, maxWidth: maxWidth, }, noHeader: true, noCloseButton: true },
+        title ? React__default.createElement(PopupTitle, null, title) : null,
+        React__default.createElement(PopupContent, null, children),
+        React__default.createElement(Row, { style: { justifyContent: 'center', marginTop: 16, } },
+            React__default.createElement(Col, { xs: true, md: 5.75, mdStyle: { marginRight: 16 } },
+                React__default.createElement(Button, { size: "medium", variant: 'secondary', onClick: function () {
+                        onClose && onClose();
+                    }, style: { width: '100%' } }, cancelButtonContent)),
+            React__default.createElement(Col, { xs: true, md: 5.75, xsStyle: { marginTop: 16 }, mdStyle: { marginTop: 0 } },
+                React__default.createElement(Button, { size: "medium", variant: disableActionButton ? 'disabled' : 'error', onClick: function () {
+                        onAction && onAction();
+                    }, disabled: disableActionButton, style: { width: '100%' } }, actionButtonContent)))));
+};
+var PopupTitle = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("h2", { style: {
+            fontFamily: 'var(--font-family-bold)',
+            fontSize: fontStyles.h2.fontSize,
+            lineHeight: fontStyles.h2.lineHeight,
+            color: 'var(--color-neutrals-90)',
+            paddingBottom: 16,
+            margin: 0,
+        } }, children));
+};
+var PopupContent = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { style: {
+            background: colors.errors[10],
+            color: colors.errors.main,
+            padding: 16,
+        } },
+        React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } },
+            React__default.createElement("div", { style: {
+                    paddingRight: 16,
+                    verticalAlign: 'middle',
+                    alignSelf: 'center',
+                } },
+                React__default.createElement(AlertIcon, { size: 'medium', color: colors.errors[70] })),
+            React__default.createElement("div", { style: {
+                    fontFamily: 'var(--font-family-regular)',
+                    fontSize: fontStyles.p.large.fontSize,
+                    lineHeight: fontStyles.p.medium.lineHeight,
+                    color: colors.errors.main,
+                } }, children))));
+};
+
+var StyledDayBody = styled(Col)(templateObject_1$P || (templateObject_1$P = __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$P;
 
 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"]);
@@ -6786,8 +6909,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$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 DaysBodyWrapper = styled.div(templateObject_1$Q || (templateObject_1$Q = __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$Q;
 
 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"]);
@@ -6799,12 +6922,12 @@ var CalendarDaysBody = function (_a) {
         }))));
 };
 
-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$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 DaysHeaderWrapper = styled(Row)(templateObject_1$R || (templateObject_1$R = __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$R;
 
+var StyledDayText = styled(Text)(templateObject_1$S || (templateObject_1$S = __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$S;
+
 var CalendarDaysHeader = function (_a) {
     var currentMonth = _a.currentMonth, selectedDate = _a.selectedDate, weekend = _a.weekend;
     var startDate = startOfWeek(currentMonth, { weekStartsOn: 1 });
@@ -6818,12 +6941,12 @@ var CalendarDaysHeader = function (_a) {
     })));
 };
 
-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$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 CalendarWrapper = styled.div(templateObject_1$T || (templateObject_1$T = __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$T;
 
+var HeaderWrapper = styled(Row)(templateObject_1$U || (templateObject_1$U = __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$U;
+
 var DefaultCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek;
     return (React__default.createElement(HeaderWrapper, { middle: true },
@@ -6855,7 +6978,7 @@ var TasksCalendarDayBody = function (_a) {
         React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })));
 };
 
-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 WeekNav = styled(Text)(templateObject_1$V || (templateObject_1$V = __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 },
@@ -6928,7 +7051,7 @@ var TasksCalendarHeader = function (_a) {
                 } }, "+ Add Task")
             : null)));
 };
-var templateObject_1$U;
+var templateObject_1$V;
 
 var TasksCalendarFooter = function (_a) {
     var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
@@ -7280,7 +7403,7 @@ var scrollbarWidth = function () {
     return scrollbarWidth;
 };
 
-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 ?
+var SimpleWindowedTableStyles = styled.div(templateObject_1$W || (templateObject_1$W = __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')), ";")
@@ -7370,7 +7493,64 @@ 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$V;
+var templateObject_1$W;
+
+var toggleSizes$1 = {
+    small: {
+        'font-family': fontStyles.button.small.fontFamily,
+        'font-size': fontStyles.button.small.fontSize,
+        'line-height': fontStyles.button.small.lineHeight,
+        padding: '8px 12px',
+        borderRadius: '4px',
+        height: '15px',
+    },
+    medium: {
+        'font-family': fontStyles.button.medium.fontFamily,
+        'font-size': fontStyles.button.medium.fontSize,
+        'line-height': fontStyles.button.medium.lineHeight,
+        padding: '8px 16px',
+        borderRadius: '4px',
+        height: '20px',
+    },
+    large: {
+        'font-family': fontStyles.button.large.fontFamily,
+        'font-size': fontStyles.button.large.fontSize,
+        'line-height': fontStyles.button.large.lineHeight,
+        padding: '12px 24px',
+        borderRadius: '4px',
+        height: '35px',
+    }
+};
+var createAnimationLeftStyle = function (p) {
+    if (p.stretch) {
+        return "calc(100% * 1.5px)";
+    }
+    return "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 1.5, "px");
+};
+var ContainerStyled = styled(Csku)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  &&& {\n    position: relative;\n    background: ", ";\n    width: ", ";\n    padding: 0.35rem;\n    border-radius: 1.8rem;\n    cursor: pointer;\n    transition: background .3s;\n\n    @keyframes switch-slide-to-right {\n      from { left: 0; }\n      to {\n        left: ", ";\n      }\n    }\n  \n    @keyframes switch-slide-to-left {\n      from {\n        left: ", ";\n      }\n      to { left: 0; }\n    }\n  }"], ["\n  &&& {\n    position: relative;\n    background: ", ";\n    width: ", ";\n    padding: 0.35rem;\n    border-radius: 1.8rem;\n    cursor: pointer;\n    transition: background .3s;\n\n    @keyframes switch-slide-to-right {\n      from { left: 0; }\n      to {\n        left: ", ";\n      }\n    }\n  \n    @keyframes switch-slide-to-left {\n      from {\n        left: ", ";\n      }\n      to { left: 0; }\n    }\n  }"])), function (p) { return p.selected
+    ? getThemeColor(p, 'teal.main', 'var(--color-primary1-main)')
+    : getThemeColor(p, 'teal.20', colors.teal['20']); }, function (p) { return p.stretch
+    ? '100%'
+    : "".concat(stripUnit(toggleSizes$1[p.size || 'medium'].height) * 2.5, "px"); }, createAnimationLeftStyle, createAnimationLeftStyle);
+var ToggleSwitchDotStyled = styled(Csku)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n &&& {\n  position: relative;\n  background: #FFFFFF;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n\n  animation: ", ";\n }\n"], ["\n &&& {\n  position: relative;\n  background: #FFFFFF;\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n\n  animation: ", ";\n }\n"])), function (p) { return toggleSizes$1[p.size || 'medium'].height; }, function (p) { return toggleSizes$1[p.size || 'medium'].height; }, function (p) { return p.selected
+    ? 'switch-slide-to-right .3s forwards 1'
+    : 'switch-slide-to-left .3s forwards 1'; });
+var ToggleSwitchStyled = function (_a) {
+    var onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["onClick", "size", "selected", "stretch", "style"]);
+    return (React__default.createElement(ContainerStyled, __assign({ selected: selected, stretch: stretch, size: size, onClick: onClick, style: style }, props),
+        React__default.createElement(ToggleSwitchDotStyled, { selected: selected, stretch: stretch, size: size })));
+};
+var ToggleSwitch = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.initialSelected, initialSelected = _c === void 0 ? false : _c, _d = _a.stretch, stretch = _d === void 0 ? false : _d, onClick = _a.onClick, props = __rest(_a, ["size", "initialSelected", "stretch", "onClick"]);
+    var _e = useState(initialSelected), state = _e[0], setState = _e[1];
+    var handleToggle = function () {
+        var value = !state;
+        setState(value);
+        onClick && onClick(value);
+    };
+    return (React__default.createElement(ToggleSwitchStyled, __assign({}, props, { selected: state, stretch: stretch, size: size, onClick: handleToggle })));
+};
+var templateObject_1$X, templateObject_2$z;
 
-export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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, UploadIcon, 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, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+export { AddIcon, AddNoteIcon, AddShoppingCartIcon, 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, ChevronPopup, CircleProgressIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, CollaborateIcon, CollapseStyled, CollapseWrapper, Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelTitle, CollapsiblePanels, Collapsible$1 as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentIcon, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CustomDateInput, Datepicker, DaysBodyWrapper, DaysHeaderWrapper, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, DropzonedSimple, EPOIcon, EditIcon, EllipsisIcon, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridRow, GridTable, GridTableContainer, H1, H2, H3, H4, H5, H6, HandleIcon, HeaderWrapper, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconDoc, ImageIcon, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, 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, OrderStatusIcon, 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, ShoppingCartIcon, 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, ToggleSwitch, ToggleSwitchStyled, TrashIcon, UploadIcon, 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, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map