@commonsku/styles 1.16.5 → 1.16.6

package/dist/index.js

@@ -372,7 +372,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 = styled.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);
@@ -2841,6 +2853,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 = React.useState(true), loading = _g[0], setLoading = _g[1];
+    var _h = React.useState(null), error = _h[0], setError = _h[1];
+    var effectRef = React.useRef({});
+    _.assign(effectRef.current, { onRetry: onRetry, onFailed: onFailed });
+    React.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(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__default.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;
 
@@ -2938,10 +3019,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 = React.useRef(null);
-    var _e = React.useState(false), isActive = _e[0], setIsActive = _e[1];
-    var _f = React.useState(false), isHovering = _f[0], setIsHovering = _f[1];
+    var _g = React.useState(false), isActive = _g[0], setIsActive = _g[1];
+    var _h = React.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);
@@ -2966,8 +3047,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;
@@ -2986,7 +3067,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);
@@ -2998,7 +3079,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,
             " ",
@@ -3427,7 +3508,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 = React.useRef({});
+    _.assign(effectRef.current, { eventType: eventType, onCleanup: onCleanup, ref: ref, onClick: onClick });
     React.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);
@@ -3689,7 +3773,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,
@@ -3717,14 +3801,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"]);
@@ -4002,10 +4086,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) {
@@ -4167,227 +4251,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;
-}(React.Component);
-
 var ArtworkName = styled__default.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__default.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__default.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"])));
@@ -4403,12 +4266,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 ?
@@ -5211,6 +5074,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;
@@ -6081,6 +5952,15 @@ var InputStepperOuterContainer = styled__default.div(templateObject_1$M || (temp
 var InputStepperInnerContainer = styled__default.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__default.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__default.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;
 };
@@ -6088,21 +5968,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";
@@ -6135,23 +6015,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;
 
@@ -6279,6 +6159,19 @@ function sortDirection(col) {
 var VirtualTableStyles = styled__default.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') {
@@ -6299,7 +6192,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); })
@@ -6321,47 +6214,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' };
         }
@@ -6370,10 +6245,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 = {};
@@ -6434,7 +6306,7 @@ var GridItem = styled__default.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 = React.useState(isOpen ? undefined : 0), height = _b[0], setHeight = _b[1];
     var ref = React.useRef(null);
     React.useEffect(function () {
@@ -6459,10 +6331,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',
@@ -6482,6 +6351,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) {
@@ -7271,11 +7154,13 @@ exports.HeadlessTable = HeadlessTable;
 exports.HistoryIcon = HistoryIcon;
 exports.IconButton = IconButton;
 exports.IconDoc = IconDoc;
+exports.Img = Img;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
 exports.InputIconLabel = InputIconLabel;
 exports.InputIconLabelContainer = InputIconLabelContainer;
 exports.InputStepper = InputStepper;
+exports.InputStepperStyled = InputStepperStyled;
 exports.IntegrationsIcon = IntegrationsIcon;
 exports.Label = Label;
 exports.LabeledAsyncSelect = LabeledAsyncSelect;