@commonsku/styles 1.16.4 → 1.16.6

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';
@@ -8,7 +8,7 @@ import BaseCreatableSelect from 'react-select/creatable';
 import BaseAsyncSelect from 'react-select/async';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactDOM from 'react-dom';
-import { addDays, getWeek, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, format, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
+import { getWeek, addDays, subWeeks, addWeeks, getMonth, getYear, isSameDay, subMonths, addMonths, format, startOfWeek, isDate, lastDayOfWeek } from 'date-fns';
 import BaseDatePicker from 'react-datepicker';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout, useExpanded } from 'react-table';
 import { useSticky } from 'react-table-sticky';
@@ -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);
@@ -2832,6 +2844,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 +3010,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 +3038,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 +3058,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 +3070,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,11 +3499,12 @@ 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) {
-            console.log('handleClickOutside');
             if (ref.current && !ref.current.contains(e.target)) {
-                console.log('click outside');
                 onClick && onClick(e);
             }
         }
@@ -3434,6 +3516,21 @@ var useClickOutside = function (props) {
     }, []);
 };
 
+function useDelayUnmount(isMounted, delayTime) {
+    var _a = React__default.useState(false), shouldRender = _a[0], setShouldRender = _a[1];
+    React__default.useEffect(function () {
+        var timeoutId;
+        if (isMounted && !shouldRender) {
+            setShouldRender(true);
+        }
+        else if (!isMounted && shouldRender) {
+            timeoutId = setTimeout(function () { return setShouldRender(false); }, delayTime);
+        }
+        return function () { return clearTimeout(timeoutId); };
+    }, [isMounted, delayTime, shouldRender]);
+    return shouldRender;
+}
+
 var QUERY = '(prefers-reduced-motion: no-preference)';
 var isRenderingOnServer = typeof window$1 === 'undefined';
 var getInitialState = function () {
@@ -3667,7 +3764,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,
@@ -3695,14 +3792,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"]);
@@ -3980,10 +4077,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) {
@@ -4145,227 +4242,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"])));
@@ -4381,12 +4257,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 ?
@@ -5189,6 +5065,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;
@@ -6059,6 +5943,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;
 };
@@ -6066,21 +5959,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";
@@ -6113,23 +6006,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;
 
@@ -6257,6 +6150,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') {
@@ -6277,7 +6183,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); })
@@ -6299,47 +6205,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' };
         }
@@ -6348,10 +6236,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 = {};
@@ -6412,7 +6297,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 () {
@@ -6437,10 +6322,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',
@@ -6460,6 +6342,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) {
@@ -7124,5 +7020,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 };
+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, Img, InfoIcon, Input, InputIconLabel, InputIconLabelContainer, InputStepper, InputStepperStyled, 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 };
 //# sourceMappingURL=index.es.js.map