@commonsku/styles 1.16.5 → 1.16.7

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import _, { map, pick, keys, isUndefined, get, toNumber, isString, filter, partial, uniqueId, debounce } from 'lodash';
+import _, { map, pick, keys, isUndefined, get, assign, range as range$1, isEmpty, tail, toNumber, isString, filter, partial, uniqueId, debounce } from 'lodash';
 import styled, { css, createGlobalStyle, ThemeProvider, keyframes } from 'styled-components';
 import React__default, { Fragment, useState, useEffect, useRef, useCallback, useImperativeHandle, Component, createContext, memo, forwardRef, useLayoutEffect, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -363,7 +363,19 @@ var getUnit = function (measurement) {
 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 stripUnit(measurement) + getUnit(measurement); };
+var wait = function (time) {
+    var timeoutId;
+    var promise = new Promise(function (resolve) {
+        timeoutId = setTimeout(resolve, time);
+    });
+    return {
+        promise: promise,
+        cancel: function () {
+            clearTimeout(timeoutId);
+        },
+    };
+};
 
 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);
@@ -2310,6 +2322,70 @@ function HandleIcon(_a) {
         React__default.createElement("path", { d: "M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z", fill: color }));
 }
 
+function CommunityIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Community" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CommunityIcon" }, props),
+        React__default.createElement("title", { id: "CommunityIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M13.6999 18.6333V17.9C13.6999 16.9333 12.9333 16.1666 11.9999 16.1666H11.9666C11.0333 16.1666 10.2999 16.9333 10.2999 17.8666V18.6333H6.49994C6.23328 18.6333 6.03328 18.4333 6.03328 18.1666V14.0333H5.26661C4.13328 14.0333 3.23328 13.1333 3.23328 12C3.23328 10.8666 4.16661 9.96664 5.26661 9.96664H6.03328V5.8333C6.03328 5.56664 6.23328 5.36664 6.49994 5.36664H10.2999V6.1333C10.2999 7.06664 11.0666 7.8333 11.9999 7.8333C12.9333 7.8333 13.6999 7.06664 13.6999 6.1333V5.36664H17.4999C17.7666 5.36664 17.9666 5.56664 17.9666 5.8333V9.96664H18.7333C19.8666 9.96664 20.7666 10.8666 20.7666 12C20.7666 13.1333 19.8666 14.0333 18.7333 14.0333H17.9666V18.1666C17.9666 18.4333 17.7666 18.6333 17.4999 18.6333H13.6999Z", fill: "white" }),
+        React__default.createElement("path", { d: "M6.49998 5.53335H10.1333V6.13335C10.1333 7.16668 10.9667 8.00001 12 8.00001C13.0333 8.00001 13.8666 7.16668 13.8666 6.13335V5.53335H17.5C17.6667 5.53335 17.8 5.66668 17.8 5.83335V10.1333H18.7333C19.7667 10.1333 20.6 10.9667 20.6 12C20.6 13.0333 19.7667 13.8667 18.7333 13.8667H17.8V18.1667C17.8 18.3333 17.6667 18.4667 17.5 18.4667H13.8666V17.9C13.8666 16.8667 13.0333 16 12 16H11.9667C10.9333 16 10.1333 16.8333 10.1333 17.8667V18.4667H6.49998C6.33332 18.4667 6.19998 18.3333 6.19998 18.1667V13.8667H5.26665C4.23332 13.8667 3.39998 13.0333 3.39998 12C3.39998 10.9667 4.23332 10.1333 5.26665 10.1333H6.19998V5.83335C6.19998 5.66668 6.33332 5.53335 6.49998 5.53335ZM6.49998 5.20001C6.16665 5.20001 5.86665 5.46668 5.86665 5.83335V9.80001H5.26665C4.03332 9.80001 3.06665 10.8 3.06665 12C3.06665 13.2333 4.06665 14.2 5.26665 14.2H5.86665V18.1667C5.86665 18.5 6.13332 18.8 6.49998 18.8H10.1333H10.4667V18.4667V17.8667C10.4667 17.0333 11.1333 16.3333 11.9667 16.3333H12C12.8333 16.3333 13.5333 17.0667 13.5333 17.9V18.4667V18.8H13.8666H17.5C17.8333 18.8 18.1333 18.5333 18.1333 18.1667V14.2H18.7333C19.9667 14.2 20.9333 13.2 20.9333 12C20.9333 10.7667 19.9333 9.80001 18.7333 9.80001H18.1333V5.83335C18.1333 5.50001 17.8667 5.20001 17.5 5.20001H13.8666H13.5333V5.53335V6.13335C13.5333 6.96668 12.8333 7.66668 12 7.66668C11.1667 7.66668 10.4667 6.96668 10.4667 6.13335V5.53335V5.20001H10.1333H6.49998Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M12 12.2C12.7916 12.2 13.4333 11.5583 13.4333 10.7666C13.4333 9.97504 12.7916 9.33331 12 9.33331C11.2084 9.33331 10.5667 9.97504 10.5667 10.7666C10.5667 11.5583 11.2084 12.2 12 12.2Z", fill: "#5BBDEC" }),
+        React__default.createElement("path", { d: "M14.5333 14.6667H9.46667C9.46667 13.2667 10.6 12.1334 12 12.1334C13.4 12.1334 14.5333 13.2667 14.5333 14.6667Z", fill: "#5BBDEC" }));
+}
+
+function ConnectedIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "Connected" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ConnectedIcon" }, props),
+        React__default.createElement("title", { id: "ConnectedIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#0F6EA6" }),
+        React__default.createElement("path", { d: "M9.06661 16.1334V15.7C9.06661 14.9667 8.46661 14.3334 7.73328 14.3334C6.96661 14.3334 6.33328 14.9667 6.33328 15.7334V16.1334H3.73328V8.30002C3.73328 8.26669 3.76661 8.20002 3.83328 8.20002H6.66661V7.43336C6.66661 6.86669 7.13328 6.40002 7.66661 6.40002C8.23328 6.40002 8.73328 6.90002 8.73328 7.46669V8.20002H11.5999C11.6333 8.20002 11.6666 8.23336 11.6666 8.26669V10.8H11.2666C10.8999 10.8 10.5333 10.9667 10.2666 11.2334C9.99994 11.5 9.86661 11.8334 9.86661 12.2C9.86661 12.9334 10.4999 13.5334 11.2333 13.5334H11.6666V16.0667C11.6666 16.1 11.6333 16.1334 11.5999 16.1334H9.06661Z", fill: "white" }),
+        React__default.createElement("path", { d: "M7.69998 6.23334V6.56667C8.16665 6.56667 8.56665 6.96667 8.56665 7.46667V8.03334V8.36667H8.89998H11.5V10.6333H11.2667C10.8333 10.6333 10.4333 10.8 10.1333 11.1C9.83332 11.4 9.69998 11.7667 9.69998 12.2C9.69998 13.0333 10.4 13.7 11.2333 13.7H11.5V15.9667H9.23332V15.7C9.23332 14.8667 8.56665 14.2 7.73332 14.1667H7.69998C6.86665 14.1667 6.16665 14.8667 6.16665 15.7333V15.9667H3.89998V8.36667H6.49998H6.83332V8.03334V7.43334C6.83332 6.96667 7.19998 6.56667 7.66665 6.56667V6.23334M7.69998 6.23334C7.69998 6.23334 7.66665 6.23334 7.69998 6.23334C7.03332 6.23334 6.49998 6.76667 6.49998 7.43334V8.03334H3.83332C3.69998 8.03334 3.56665 8.13334 3.56665 8.3V16.3H6.49998V15.7333C6.49998 15.0667 7.03332 14.5 7.69998 14.5C7.69998 14.5 7.69998 14.5 7.73332 14.5C8.39998 14.5 8.89998 15.0333 8.89998 15.7V16.3H11.6C11.7333 16.3 11.8333 16.2 11.8333 16.0667V13.3667H11.2333C10.5667 13.3667 10.0333 12.8333 10.0333 12.2C10.0333 11.5333 10.6 10.9667 11.2667 10.9667H11.8333V8.26667C11.8333 8.13334 11.7333 8.03334 11.6 8.03334H8.89998V7.46667C8.89998 6.8 8.36665 6.23334 7.69998 6.23334Z", fill: "#0F6EA6" }),
+        React__default.createElement("path", { d: "M17.3333 16.1333V15.7C17.3333 14.9333 16.7333 14.3333 15.9666 14.3333C15.2 14.3333 14.6 14.9333 14.6 15.7V16.1333H12V13.3667V13.2H11.2333C10.6666 13.2 10.2 12.7333 10.2 12.1667C10.2 11.6 10.6666 11.1333 11.2333 11.1333H12V8.23335L14.6 8.20001V8.60001C14.6 9.36668 15.2 10 15.9666 10C16.7333 10 17.3333 9.36668 17.3333 8.63335V8.20001H19.9L19.9333 10.9667V11.1333H20.7C21.2666 11.1333 21.7333 11.6 21.7333 12.1667C21.7333 12.7333 21.2666 13.2 20.7 13.2H19.9333V16.1L19.9 16.1333H17.3333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M19.7667 8.36666V10.9667V11.3H20.1H20.7C21.1667 11.3 21.5667 11.7 21.5667 12.1667C21.5667 12.6333 21.1667 13.0333 20.7 13.0333H20.1H19.7667V13.3667V15.9667H17.5V15.7C17.5 14.8667 16.8 14.1667 15.9667 14.1667C15.1333 14.1667 14.4333 14.8667 14.4333 15.7V15.9667H12.1667V13.3667V13.0333H11.8333H11.2333C10.7667 13.0333 10.3667 12.6333 10.3667 12.1667C10.3667 11.7 10.7667 11.3 11.2333 11.3H11.8333H12.1667V10.9667V8.36666H14.4333V8.59999C14.4333 9.46666 15.1333 10.1667 15.9667 10.1667H16C16.8333 10.1667 17.5 9.46666 17.5 8.63332V8.36666H19.7667ZM19.9 8.03333H17.1667V8.63332C17.1667 9.29999 16.6333 9.83333 16 9.83333H15.9667C15.3 9.83333 14.7667 9.26666 14.7667 8.59999V8.03333H12C11.9 8.03333 11.8 8.09999 11.8 8.23333V10.9667H11.2C10.5333 10.9667 10 11.5 10 12.1667C10 12.8333 10.5333 13.3667 11.2 13.3667H11.8V16.1C11.8 16.2 11.8667 16.3 12 16.3H14.7333V15.7C14.7333 15.0333 15.2667 14.5 15.9333 14.5C16.6 14.5 17.1333 15.0333 17.1333 15.7V16.3H19.8667C19.9667 16.3 20.0667 16.2333 20.0667 16.1V13.3667H20.6667C21.3333 13.3667 21.8667 12.8333 21.8667 12.1667C21.8667 11.5 21.3333 10.9667 20.6667 10.9667H20.0667V8.23333C20.1 8.13333 20 8.03333 19.9 8.03333Z", fill: "#0F6EA6" }));
+}
+
+function ConnectedPlusIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.altText, altText = _c === void 0 ? "ConnectedPlus" : _c, props = __rest(_a, ["size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "ConnectedPlusIcon" }, props),
+        React__default.createElement("title", { id: "ConnectedPlusIcon" }, altText),
+        React__default.createElement("path", { d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M9.70007 12.2334V11.9C9.70007 11.2667 9.20007 10.7334 8.53341 10.7334C7.86674 10.7334 7.33341 11.2667 7.33341 11.9334V12.2334H5.20007V5.70002C5.20007 5.66669 5.23341 5.66669 5.23341 5.66669H7.63341V5.00002C7.63341 4.53335 8.00007 4.16669 8.46674 4.16669C8.93341 4.16669 9.33341 4.56669 9.33341 5.03335V5.66669H11.7667C11.8001 5.66669 11.8001 5.66669 11.8001 5.70002V7.80002H11.5001C11.1667 7.80002 10.8667 7.93335 10.6334 8.16669C10.4001 8.40002 10.3001 8.70002 10.3001 9.00002C10.3001 9.63335 10.8334 10.1667 11.4667 10.1667H11.8001V12.2667C11.8001 12.3 11.8001 12.3 11.7667 12.3H9.70007V12.2334Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.53331 4.30001C8.89998 4.30001 9.19998 4.63334 9.19998 5.00001V5.46667V5.80001H9.53331H11.6666V7.60001H11.5333C11.1666 7.60001 10.8 7.76667 10.5666 8.00001C10.3 8.26667 10.1666 8.60001 10.2 8.96667C10.2 9.70001 10.8 10.2667 11.5333 10.2667H11.6666V12.0667H9.86664V11.9C9.86664 11.1667 9.26664 10.5667 8.56664 10.5667H8.53331C7.79998 10.5667 7.19998 11.1667 7.19998 11.9333V12.0667H5.39998V5.80001H7.53331H7.86664V5.46667V4.96667C7.86664 4.60001 8.16664 4.30001 8.53331 4.30001ZM8.53331 3.96667C7.96664 3.96667 7.53331 4.43334 7.53331 4.96667V5.46667H5.29998C5.16664 5.46667 5.09998 5.56667 5.09998 5.66667V12.4H7.56664V11.9333C7.56664 11.3667 8.03331 10.9 8.56664 10.9C8.56664 10.9 8.56664 10.9 8.59998 10.9C9.13331 10.9 9.59998 11.3667 9.59998 11.9V12.4H11.8666C11.9666 12.4 12.0666 12.3 12.0666 12.2V9.93334H11.5666C11.0333 9.93334 10.5666 9.50001 10.5666 8.93334C10.5666 8.36667 11.0333 7.90001 11.6 7.90001H12V5.66667C12 5.56667 11.9 5.46667 11.8 5.46667H9.53331V5.00001C9.53331 4.43334 9.09998 3.96667 8.53331 3.96667Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M16.6333 12.2333V11.9C16.6333 11.2666 16.1 10.7333 15.4666 10.7333C14.8333 10.7333 14.3 11.2666 14.3 11.9V12.2333H12.1666V9.76663H11.5C11.0333 9.76663 10.6666 9.39997 10.6666 8.9333C10.6666 8.46663 11.0333 8.09997 11.5 8.09997H12.1666V5.6333H14.3V5.96663C14.3 6.6333 14.8333 7.16663 15.4666 7.16663C16.1333 7.16663 16.6333 6.6333 16.6333 5.99997V5.66663H18.7666V8.1333H19.4333C19.9 8.1333 20.2666 8.49997 20.2666 8.96663C20.2666 9.4333 19.9 9.79997 19.4333 9.79997H18.7666V12.2666H16.6333V12.2333Z", fill: "white" }),
+        React__default.createElement("path", { d: "M18.6 5.80002V7.93335V8.26668H18.9333H19.4333C19.8 8.26668 20.1 8.56668 20.1 8.93335C20.1 9.30002 19.8 9.60002 19.4333 9.60002H18.9333H18.6V9.93335V12.0667H16.8V11.9C16.8 11.1667 16.2 10.5667 15.4667 10.5667C14.7333 10.5667 14.1333 11.1667 14.1333 11.9V12.0667H12.3333V9.93335V9.60002H12H11.5C11.1333 9.60002 10.8333 9.30002 10.8333 8.93335C10.8333 8.56668 11.1333 8.26668 11.5 8.26668H12H12.3333V7.93335V5.80002H14.1333V5.96668C14.1333 6.73335 14.7333 7.33335 15.4667 7.33335H15.5C16.2333 7.33335 16.8 6.73335 16.8 6.00002V5.83335H18.6M18.8 5.46668H16.5V5.96668C16.5 6.53335 16.0667 6.96668 15.5 6.96668C15.5 6.96668 15.5 6.96668 15.4667 6.96668C14.9 6.96668 14.4667 6.50002 14.4667 5.93335V5.43335H12.1667C12.0667 5.43335 12 5.50002 12 5.60002V7.90002H11.5C10.9333 7.90002 10.5 8.36668 10.5 8.90002C10.5 9.46668 10.9667 9.90002 11.5 9.90002H12V12.2C12 12.3 12.0667 12.3667 12.1667 12.3667H14.4667V11.8667C14.4667 11.3 14.9333 10.8667 15.4667 10.8667C16.0333 10.8667 16.4667 11.3333 16.4667 11.8667V12.3667H18.7667C18.8667 12.3667 18.9333 12.3 18.9333 12.2V9.90002H19.4333C20 9.90002 20.4333 9.43335 20.4333 8.90002C20.4333 8.33335 19.9667 7.90002 19.4333 7.90002H18.9333V5.60002C18.9333 5.53335 18.8667 5.46668 18.8 5.46668Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M5.23328 19.2V16.7333H4.56661C4.09994 16.7333 3.73328 16.3666 3.73328 15.9C3.73328 15.4333 4.09994 15.0666 4.56661 15.0666H5.23328V12.6H7.69994V11.9333C7.69994 11.4666 8.06661 11.1 8.53328 11.1C8.73328 11.1 8.89994 11.1666 9.06661 11.2666C9.23328 11.3666 9.36661 11.6333 9.36661 11.8V12.6H11.8333V14.7333H11.4999C10.8666 14.7333 10.3333 15.2666 10.3333 15.9C10.3333 16.5333 10.8666 17.0666 11.4999 17.0666H11.8333V19.2H5.23328Z", fill: "white" }),
+        React__default.createElement("path", { d: "M8.53332 11.2334C8.69998 11.2334 8.83332 11.2667 8.99998 11.3667C9.09998 11.4334 9.23332 11.6334 9.23332 11.7667V12.4V12.7334H9.56665H11.6667V14.5334H11.5C10.7667 14.5334 10.1667 15.1334 10.1667 15.8667C10.1667 16.6 10.7667 17.2 11.5 17.2H11.6667V19H5.39998V16.8667V16.5334H5.06665H4.56665C4.19998 16.5334 3.89998 16.2334 3.89998 15.8667C3.89998 15.5 4.19998 15.2 4.56665 15.2H5.06665H5.39998V14.8667V12.7334H7.53332H7.86665V12.4V11.9C7.86665 11.7334 7.93332 11.5667 8.06665 11.4334C8.16665 11.3 8.36665 11.2334 8.53332 11.2334ZM8.53332 10.9C7.96665 10.9 7.53332 11.3667 7.53332 11.9V12.4H5.06665V14.8667H4.56665C3.99998 14.8667 3.56665 15.3334 3.56665 15.8667C3.56665 16.4334 4.03332 16.8667 4.56665 16.8667H5.06665V19.3334H12V16.8667H11.5C10.9333 16.8667 10.5 16.4 10.5 15.8667C10.5 15.3 10.9667 14.8667 11.5 14.8667H12V12.4H9.53332V11.7667C9.53332 11.5334 9.36665 11.2 9.16665 11.0667C8.96665 10.9667 8.73332 10.9 8.53332 10.9Z", fill: "#003C5E" }),
+        React__default.createElement("path", { d: "M16.9666 15.5H15.8V14.3333C15.8 14.1333 15.6666 14 15.4666 14C15.2666 14 15.1333 14.1333 15.1333 14.3333V15.5H13.9666C13.7666 15.5 13.6333 15.6333 13.6333 15.8333C13.6333 16.0333 13.7666 16.1667 13.9666 16.1667H15.1333V17.3333C15.1333 17.5333 15.2666 17.6667 15.4666 17.6667C15.6666 17.6667 15.8 17.5333 15.8 17.3333V16.1667H16.9666C17.1666 16.1667 17.3 16.0333 17.3 15.8333C17.3 15.6333 17.1666 15.5 16.9666 15.5Z", fill: "white" }));
+}
+
+function CollaborateIcon(_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 ? "Collaborate" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "CollaborateIcon" }, props),
+        React__default.createElement("title", { id: "CollaborateIcon" }, altText),
+        React__default.createElement("path", { d: "M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z", fill: color }));
+}
+
+function InventoryIcon(_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 ? "Inventory" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "InventoryIcon" }, props),
+        React__default.createElement("title", { id: "InventoryIcon" }, altText),
+        React__default.createElement("path", { d: "M20.54 5.23L19.15 3.55C18.88 3.21 18.47 3 18 3H6C5.53 3 5.12 3.21 4.84 3.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V6.5C21 6.02 20.83 5.57 20.54 5.23ZM6.24 5H17.76L18.57 5.97H5.44L6.24 5ZM5 19V8H19V19H5ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z", fill: color }));
+}
+
+function OrderStatusIcon(_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 ? "OrderStatus" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "OrderStatusIcon" }, props),
+        React__default.createElement("title", { id: "OrderStatusIcon" }, altText),
+        React__default.createElement("path", { d: "M20 8H17V4H3C1.9 4 1 4.9 1 6V17H3C3 18.66 4.34 20 6 20C7.66 20 9 18.66 9 17H15C15 18.66 16.34 20 18 20C19.66 20 21 18.66 21 17H23V12L20 8ZM19.5 9.5L21.46 12H17V9.5H19.5ZM6 18C5.45 18 5 17.55 5 17C5 16.45 5.45 16 6 16C6.55 16 7 16.45 7 17C7 17.55 6.55 18 6 18ZM8.22 15C7.67 14.39 6.89 14 6 14C5.11 14 4.33 14.39 3.78 15H3V6H15V15H8.22ZM18 18C17.45 18 17 17.55 17 17C17 16.45 17.45 16 18 16C18.55 16 19 16.45 19 17C19 17.55 18.55 18 18 18Z", fill: color }));
+}
+
+function EPOIcon(_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 ? "EPO" : _d, props = __rest(_a, ["color", "size", "altText"]);
+    return React__default.createElement(SVG, __assign({ size: size, "aria-labelledby": "EPOIcon" }, props),
+        React__default.createElement("title", { id: "EPOIcon" }, altText),
+        React__default.createElement("path", { d: "M7 16H14V18H7V16ZM7 12H17V14H7V12ZM7 8H17V10H7V8ZM19 4H14.82C14.4 2.84 13.3 2 12 2C10.7 2 9.6 2.84 9.18 4H5C4.86 4 4.73 4.01 4.6 4.04C4.21 4.12 3.86 4.32 3.59 4.59C3.41 4.77 3.26 4.99 3.16 5.23C3.06 5.46 3 5.72 3 6V20C3 20.27 3.06 20.54 3.16 20.78C3.26 21.02 3.41 21.23 3.59 21.42C3.86 21.69 4.21 21.89 4.6 21.97C4.73 21.99 4.86 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM12 3.75C12.41 3.75 12.75 4.09 12.75 4.5C12.75 4.91 12.41 5.25 12 5.25C11.59 5.25 11.25 4.91 11.25 4.5C11.25 4.09 11.59 3.75 12 3.75ZM19 20H5V6H19V20Z", fill: color }));
+}
+
 var avatarSizes = {
     tiny: {
         size: '24px',
@@ -2832,6 +2908,75 @@ var ButtonIcon = React__default.forwardRef(function (props, ref) {
 });
 var templateObject_1$d, templateObject_2$8;
 
+var LOADING_IMG_SRC = '/images/gears.gif';
+var NOT_FOUND_IMG_SRC = '/images/404.png';
+var DEFAULT_MAX_ATTEMPTS = 3;
+var DEFAULT_ATTEMPT_INTERVAL = 1000;
+// fetch image src, and return intervals.length times on error. wait intervals[n] ms on nth retry
+var fetchImage = function (src, intervals, onRetry) {
+    var image = new Image();
+    var cancel = function () {
+        image.src = '';
+    };
+    var promise = new Promise(function (resolve, reject) {
+        image.src = src;
+        image.onload = resolve;
+        image.onerror = reject;
+    }).catch(function (error) {
+        if (isEmpty(intervals)) {
+            throw error;
+        }
+        else if (image.src === '') {
+            return error;
+        }
+        else {
+            onRetry && onRetry(error);
+            var w = wait(intervals[0]);
+            cancel = w.cancel;
+            return w.promise.then(function () {
+                var result = fetchImage(src, tail(intervals), onRetry);
+                cancel = result.cancel;
+                return result.promise;
+            });
+        }
+    });
+    return {
+        promise: promise,
+        cancel: function () {
+            // use this to cancel next fetch
+            cancel();
+        }
+    };
+};
+var Img = React__default.forwardRef(function (_a, ref) {
+    var src = _a.src, _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.max_attempts, max_attempts = _c === void 0 ? DEFAULT_MAX_ATTEMPTS : _c, _d = _a.attempt_interval, attempt_interval = _d === void 0 ? DEFAULT_ATTEMPT_INTERVAL : _d, _e = _a.onRetry, onRetry = _e === void 0 ? null : _e, _f = _a.onFailed, onFailed = _f === void 0 ? null : _f, props = __rest(_a, ["src", "alt", "max_attempts", "attempt_interval", "onRetry", "onFailed"]);
+    var _g = useState(true), loading = _g[0], setLoading = _g[1];
+    var _h = useState(null), error = _h[0], setError = _h[1];
+    var effectRef = useRef({});
+    assign(effectRef.current, { onRetry: onRetry, onFailed: onFailed });
+    useEffect(function () {
+        var _a = effectRef.current, onRetry = _a.onRetry, onFailed = _a.onFailed, cancel = _a.cancel;
+        // cancel previous fetch before start new fetch
+        cancel && cancel();
+        var result = fetchImage(src !== null && src !== void 0 ? src : "", map(range$1(max_attempts), function (i) {
+            return attempt_interval * (i + 1) * (i + 1);
+        }), onRetry);
+        effectRef.current.cancel = result.cancel;
+        result.promise
+            .then(function () {
+            setError(null);
+        })
+            .catch(function (e) {
+            onFailed && onFailed(e);
+            setError(e);
+        })
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [src, attempt_interval, max_attempts]);
+    return React__default.createElement("img", __assign({ ref: ref, alt: alt, src: loading ? LOADING_IMG_SRC : (error ? NOT_FOUND_IMG_SRC : src) }, props));
+});
+
 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;
 
@@ -2929,10 +3074,10 @@ var LabeledInput = React__default.forwardRef(function (_a, ref) {
         React__default.createElement(Input, __assign({ ref: ref, name: name, required: required }, props))));
 });
 var LabeledIconInput = React__default.forwardRef(function (_a, ref) {
-    var label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, Icon = _a.Icon, noMargin = _a.noMargin, error = _a.error, disabled = _a.disabled, onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'left' : _c, _d = _a.iconLabelStyles, iconLabelStyles = _d === void 0 ? {} : _d, props = __rest(_a, ["label", "name", "value", "defaultValue", "placeholder", "required", "labelOnTop", "Icon", "noMargin", "error", "disabled", "onFocus", "onChange", "onBlur", "iconPosition", "iconLabelStyles"]);
+    var label = _a.label, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, required = _a.required, _b = _a.labelOnTop, labelOnTop = _b === void 0 ? false : _b, Icon = _a.Icon, noMargin = _a.noMargin, error = _a.error, disabled = _a.disabled, onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'left' : _c, _d = _a.iconColor, iconColor = _d === void 0 ? '#fff' : _d, _e = _a.iconLabelStyles, iconLabelStyles = _e === void 0 ? {} : _e, _f = _a.containerStyle, containerStyle = _f === void 0 ? {} : _f, props = __rest(_a, ["label", "name", "value", "defaultValue", "placeholder", "required", "labelOnTop", "Icon", "noMargin", "error", "disabled", "onFocus", "onChange", "onBlur", "iconPosition", "iconColor", "iconLabelStyles", "containerStyle"]);
     var containerRef = useRef(null);
-    var _e = useState(false), isActive = _e[0], setIsActive = _e[1];
-    var _f = useState(false), isHovering = _f[0], setIsHovering = _f[1];
+    var _g = useState(false), isActive = _g[0], setIsActive = _g[1];
+    var _h = useState(false), isHovering = _h[0], setIsHovering = _h[1];
     var activeBorderColor = getThemeColor(props, 'input.active.border', colors.input.active.border);
     var activeTextColor = colors.input.active.text;
     var errorBorderColor = getThemeColor(props, 'input.error.border', colors.input.error.border);
@@ -2957,8 +3102,8 @@ var LabeledIconInput = React__default.forwardRef(function (_a, ref) {
     };
     var NewIcon = React__default.useMemo(function () {
         var iconProps = {
-            fill: '#fff',
-            color: '#fff',
+            fill: iconColor,
+            color: iconColor,
         };
         if (error) {
             iconProps['fill'] = errorBorderColor;
@@ -2977,7 +3122,7 @@ var LabeledIconInput = React__default.forwardRef(function (_a, ref) {
             iconProps['color'] = colors.input.icon.active.fill;
         }
         return React__default.cloneElement(Icon, iconProps);
-    }, [Icon, error, disabled, errorBorderColor, isActive, isHovering]);
+    }, [Icon, error, disabled, errorBorderColor, isActive, isHovering, iconColor]);
     var onClickOutside = function (e) {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
             setIsActive(false);
@@ -2989,7 +3134,7 @@ var LabeledIconInput = React__default.forwardRef(function (_a, ref) {
             document$1.removeEventListener('click', onClickOutside);
         };
     }, []);
-    return (React__default.createElement("div", null,
+    return (React__default.createElement("div", { style: containerStyle },
         label ? 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,
             " ",
@@ -3418,7 +3563,10 @@ var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4
 
 var useClickOutside = function (props) {
     var ref = props.ref, _a = props.eventType, eventType = _a === void 0 ? 'mousedown' : _a, onClick = props.onClick, onCleanup = props.onCleanup;
+    var effectRef = useRef({});
+    assign(effectRef.current, { eventType: eventType, onCleanup: onCleanup, ref: ref, onClick: onClick });
     useEffect(function () {
+        var _a = effectRef.current, eventType = _a.eventType, onCleanup = _a.onCleanup, ref = _a.ref, onClick = _a.onClick;
         function handleClickOutside(e) {
             if (ref.current && !ref.current.contains(e.target)) {
                 onClick && onClick(e);
@@ -3680,7 +3828,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, props = __rest(_a, ["header", "noHeader", "title", "controls", "children", "onClose", "noCloseButton", "closeOnEsc", "closeOnClickOutside", "overlayZIndex"]);
+    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 ref = useFallbackRef(forwardedRef);
     useClickOutside({
         ref: ref,
@@ -3708,14 +3856,14 @@ 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" }, props, { ref: ref }),
+            React__default.createElement(PopupWindow, __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" }, 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"]);
@@ -3993,10 +4141,10 @@ var Tabs = /** @class */ (function (_super) {
     };
     Tabs.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tabs = _a.tabs, size = _a.size, padded = _a.padded, props = __rest(_a, ["tabs", "size", "padded"]);
+        var _a = this.props, tabs = _a.tabs, size = _a.size, padded = _a.padded, variant = _a.variant, props = __rest(_a, ["tabs", "size", "padded", "variant"]);
         var selectedTab = this.getTab(tabs, this.state.selectedTabIndex);
         return React__default.createElement("div", __assign({}, props),
-            React__default.createElement(TabBar, { padded: padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: size, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
+            React__default.createElement(TabBar, { padded: padded === true }, tabs.map(function (tab, index) { return React__default.createElement(Tab, { key: index, size: tab.size || size, variant: tab.variant || variant, className: index === _this.state.selectedTabIndex ? 'selected' : '', selected: index === _this.state.selectedTabIndex, onClick: function (e) {
                     _this.setState({ selectedTabIndex: index });
                     var callback = tabs[index].onClick;
                     if (callback) {
@@ -4158,227 +4306,6 @@ var Product = function (props) {
 };
 var templateObject_1$u, templateObject_2$j, templateObject_3$b, templateObject_4$8;
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } 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] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-
-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 ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-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,
-      writable: true,
-      configurable: true
-    }
-  });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-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;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof(call) === "object" || typeof call === "function")) {
-    return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
-  }
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-      result;
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
-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,
-      attempts: 0
-    };
-    _this.onError = _this.onError.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(Img, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.src !== this.props.src) {
-        this.setState({
-          src: nextProps.src,
-          attempts: 0
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.retryId) {
-        clearTimeout(this.retryId);
-      }
-    }
-  }, {
-    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
-      });
-      this.retryId = setTimeout(function () {
-        _this2.setState({
-          src: _this2.props.src
-        });
-      }, attempt_interval * (this.state.attempts + 1) * (this.state.attempts + 1));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      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$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"])));
@@ -4394,12 +4321,12 @@ function extension(filename) {
     return filename.substring(filename.lastIndexOf('.') + 1, filename.length);
 }
 var Artwork = function (_a) {
-    var _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, props = __rest(_a, ["inputProps"]);
+    var _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, onError = _a.onError, props = __rest(_a, ["inputProps", "onError"]);
     /* TODO: 20 is arbitrary; ideally a component should know its width, and that should be used to compute the max length */
     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%" }, onError: props.onError }))
+                React__default.createElement(Img, { src: props.picture, style: { objectFit: "contain", width: "100%", height: "100%" }, onError: onError }))
             :
                 React__default.createElement(IconDoc, { ext: extension(props.name), style: { width: "3vw" } }),
         !props.edit ?
@@ -5202,6 +5129,14 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -6072,6 +6007,15 @@ var InputStepperOuterContainer = styled.div(templateObject_1$M || (templateObjec
 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);
+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 },
+        label && React__default.createElement(InputStepperLabel, { style: labelStyle }, label),
+        React__default.createElement(InputStepperInnerContainer, { style: style },
+            React__default.createElement(IconButton, __assign({ Icon: SubtractIcon, style: { borderRadius: "5px 0 0 5px" }, onClick: onDecrement }, decrementButtonProps)),
+            React__default.createElement(Input, __assign({}, rest, { style: { width: '100%', margin: 0, borderRadius: 0, textAlign: "center" } })),
+            React__default.createElement(IconButton, __assign({ Icon: AddIcon, style: { borderRadius: "0 5px 5px 0" }, onClick: onIncrement }, incrementButtonProps)))));
+}
 var canIncrement = function (value, max) {
     return (max !== undefined && value < max) || max === undefined;
 };
@@ -6079,21 +6023,21 @@ var canDecrement = function (value, min) {
     return (min !== undefined && value > min) || min === undefined;
 };
 function InputStepper(props) {
-    var _a = props.min, min = _a === void 0 ? 0 : _a, max = props.max, width = props.width, label = props.label, _b = props.labelStyle, labelStyle = _b === void 0 ? {} : _b, _c = props.style, style = _c === void 0 ? {} : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.inputDisabled, inputDisabled = _e === void 0 ? false : _e, localeOptions = props.localeOptions, initialValue = props.initialValue, rest = __rest(props, ["min", "max", "width", "label", "labelStyle", "style", "disabled", "inputDisabled", "localeOptions", "initialValue"]);
-    var _f = useNumberInput({
+    var _a = props.min, min = _a === void 0 ? 0 : _a, max = props.max, width = props.width, label = props.label, _b = props.labelStyle, labelStyle = _b === void 0 ? {} : _b, _c = props.style, style = _c === void 0 ? {} : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.inputDisabled, inputDisabled = _e === void 0 ? false : _e, localeOptions = props.localeOptions, initialValue = props.initialValue, _f = props.delayChangeTimeout, delayChangeTimeout = _f === void 0 ? 1000 : _f, _g = props.holdIncrement, holdIncrement = _g === void 0 ? true : _g, _h = props.holdDecrement, holdDecrement = _h === void 0 ? true : _h, rest = __rest(props, ["min", "max", "width", "label", "labelStyle", "style", "disabled", "inputDisabled", "localeOptions", "initialValue", "delayChangeTimeout", "holdIncrement", "holdDecrement"]);
+    var _j = useNumberInput({
         defaultValue: initialValue,
         onChange: rest.onChange,
         onFocus: rest.onFocus,
         onBlur: rest.onBlur,
         inputMode: rest.inputMode,
         localeOptions: localeOptions,
-    }), ref = _f.ref, value = _f.value, inputMode = _f.inputMode, onChange = _f.onChange, onBlur = _f.onBlur, onFocus = _f.onFocus, updateValue = _f.updateValue;
-    var _g = useLongPress(function () {
+    }), ref = _j.ref, value = _j.value, inputMode = _j.inputMode, onChange = _j.onChange, onBlur = _j.onBlur, onFocus = _j.onFocus, updateValue = _j.updateValue;
+    var _k = useLongPress(function () {
         handleIncrement();
-    }), onIncrementMouseDown = _g.onMouseDown, onIncrementMouseLeave = _g.onMouseLeave, onIncrementMouseUp = _g.onMouseUp, onIncrementTouchEnd = _g.onTouchEnd, onIncrementTouchStart = _g.onTouchStart;
-    var _h = useLongPress(function () {
+    }), onIncrementMouseDown = _k.onMouseDown, onIncrementMouseLeave = _k.onMouseLeave, onIncrementMouseUp = _k.onMouseUp, onIncrementTouchEnd = _k.onTouchEnd, onIncrementTouchStart = _k.onTouchStart;
+    var _l = useLongPress(function () {
         handleDecrement();
-    }), onDecrementMouseDown = _h.onMouseDown, onDecrementMouseLeave = _h.onMouseLeave, onDecrementMouseUp = _h.onMouseUp, onDecrementTouchEnd = _h.onTouchEnd, onDecrementTouchStart = _h.onTouchStart;
+    }), onDecrementMouseDown = _l.onMouseDown, onDecrementMouseLeave = _l.onMouseLeave, onDecrementMouseUp = _l.onMouseUp, onDecrementTouchEnd = _l.onTouchEnd, onDecrementTouchStart = _l.onTouchStart;
     var valueNumber = typeof value === 'string' ? parseFloat(value) : value;
     var decrementButtonVariant = disabled || !canDecrement(valueNumber, min)
         ? "disabled" : "primary";
@@ -6126,23 +6070,23 @@ function InputStepper(props) {
         else if (!canDecrement(parseInt(val), min) && min !== undefined) {
             updateValue(min);
         }
-    }, [ref, min, max, updateValue]), 1000);
+    }, [ref, min, max, updateValue]), delayChangeTimeout);
     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: function (e) {
-                    if (e.button !== 0) {
+                    if (e.button !== 0 || !holdDecrement) {
                         return;
                     }
                     onDecrementMouseDown();
-                }, onMouseOut: onDecrementMouseLeave, onMouseUp: onDecrementMouseUp, onTouchEnd: onDecrementTouchEnd, onTouchStart: onDecrementTouchStart }),
+                }, onMouseOut: holdDecrement ? onDecrementMouseLeave : undefined, onMouseUp: holdDecrement ? onDecrementMouseUp : undefined, onTouchEnd: holdDecrement ? onDecrementTouchEnd : undefined, onTouchStart: holdDecrement ? onDecrementTouchStart : undefined }),
             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: function (e) {
-                    if (e.button !== 0) {
+                    if (e.button !== 0 || !holdIncrement) {
                         return;
                     }
                     onIncrementMouseDown();
-                }, onMouseOut: onIncrementMouseLeave, onMouseUp: onIncrementMouseUp, onTouchEnd: onIncrementTouchEnd, onTouchStart: onIncrementTouchStart }))));
+                }, 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;
 
@@ -6270,6 +6214,19 @@ function sortDirection(col) {
 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 psuedoSelectors = {
+    __after: '&:after',
+    __before: '&:before',
+    __firstLetter: '&:first-letter',
+    __firstLine: '&:first-line',
+    __active: '&:active',
+    __firstChild: '&:first-child',
+    __focus: '&:focus',
+    __hover: '&:hover',
+    __lang: '&:lang',
+    __link: '&:link',
+    __visited: '&:visited',
+};
 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') {
@@ -6290,7 +6247,7 @@ var parseResponsiveValue = function (value, transform) {
     }
     else if (typeof value === 'object') {
         if (!isSizeObj(value)) {
-            return value;
+            return transform(value) || value;
         }
         return Object.keys(value)
             .filter(function (k) { return sizes.includes(k); })
@@ -6312,47 +6269,29 @@ var createMeasurementStyle = function (v, keys) {
         return (__assign(__assign({}, acc), (_a = {}, _a[k] = value, _a)));
     }, {});
 };
-var styleKeys = [
+var styleKeys = __spreadArray([
     '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'
+    'style', 'sx'
+], Object.keys(psuedoSelectors), true);
+var psuedoStylesTransformMap = Object.keys(psuedoSelectors)
+    .reduce(function (acc, k) {
+    var _a;
+    return (__assign(__assign({}, acc), (_a = {}, _a[k] = function (v) {
+        var _a;
+        return (_a = {}, _a[psuedoSelectors[k]] = v, _a);
+    }, _a)));
+}, {});
+var stylesTransformMap = __assign({ 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) {
+        : { float: v }); }, colSpan: function (v) {
         if (v === 'auto' || v === true) {
             return { gridColumn: 'auto' };
         }
@@ -6361,10 +6300,7 @@ var stylesTransformMap = {
         }
         var colSpan = stripUnit(v);
         return { gridColumn: "span ".concat(colSpan, " / span ").concat(colSpan) };
-    },
-    style: function (v) { return v; },
-    sx: function (v) { return v; },
-};
+    }, style: function (v) { return v; }, sx: function (v) { return v; } }, psuedoStylesTransformMap);
 var parseCskuStyles = function (p) {
     var sizeStylesObj = {};
     var stylesObj = {};
@@ -6425,7 +6361,7 @@ var GridItem = styled.div(function (p) {
 });
 
 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 children = props.children, style = props.style, label = props.label, controls = props.controls, header = props.header, _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 () {
@@ -6450,10 +6386,7 @@ var BaseCollapsible = function (props) {
         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(CollapsibleHeader, { isOpen: isOpen, handleToggle: handleToggle, controls: controls }, header || label),
             React__default.createElement(Col, { xs: true, style: {
                     overflow: 'hidden',
                     transition: 'height 0.2s ease-in-out',
@@ -6473,6 +6406,20 @@ var Collapsible$1 = function (props) {
     };
     return (React__default.createElement(BaseCollapsible, __assign({ isOpen: isOpen, handleToggle: handleToggle }, rest), children));
 };
+var CollapsibleHeader = function (props) {
+    var children = props.children, controls = props.controls, isOpen = props.isOpen, handleToggle = props.handleToggle;
+    if (children === undefined || children === null) {
+        return null;
+    }
+    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
+        return React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Col, { xs: true, sm: 5.9, style: { cursor: 'pointer', }, onClick: handleToggle },
+                React__default.createElement(CollapsibleLabel, { isOpen: isOpen }, children)),
+            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)));
+    }
+    return React__default.cloneElement(children, { isOpen: isOpen, handleToggle: handleToggle });
+};
 var CollapsibleLabel = function (props) {
     var children = props.children, isOpen = props.isOpen;
     if (children === undefined || children === null) {
@@ -7137,5 +7084,5 @@ function SimpleWindowedTable(_a) {
 }
 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, 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, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
+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, 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, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropDownContent, Dropdown, DropdownItem, Dropzoned, DropzonedPreviews, EPOIcon, 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, 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, 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, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useWindowSize };
 //# sourceMappingURL=index.es.js.map