@bonlineza/luxity-lib 2.34.2 → 2.34.4

package/StyleSelector.js

@@ -9,143 +9,225 @@
   EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
 
-  function _arrayLikeToArray(r, a) {
-    (null == a || a > r.length) && (a = r.length);
-    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-    return n;
-  }
-  function _arrayWithoutHoles(r) {
-    if (Array.isArray(r)) return _arrayLikeToArray(r);
-  }
-  function _assertThisInitialized(e) {
-    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return e;
-  }
-  function _callSuper(t, o, e) {
-    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-  }
-  function _classCallCheck(a, n) {
-    if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
   }
-  function _defineProperties(e, r) {
-    for (var t = 0; t < r.length; t++) {
-      var o = r[t];
-      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+
+  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(e, r, t) {
-    return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
-      writable: !1
-    }), e;
+
+  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 _defineProperty(e, r, t) {
-    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-      value: t,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }) : e[r] = t, e;
+
+  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 _extends() {
-    return _extends = Object.assign ? Object.assign.bind() : function (n) {
-      for (var e = 1; e < arguments.length; e++) {
-        var t = arguments[e];
-        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
       }
-      return n;
-    }, _extends.apply(null, arguments);
-  }
-  function _getPrototypeOf(t) {
-    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
-      return t.__proto__ || Object.getPrototypeOf(t);
-    }, _getPrototypeOf(t);
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
   }
-  function _inherits(t, e) {
-    if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
-    t.prototype = Object.create(e && e.prototype, {
+
+  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: t,
-        writable: !0,
-        configurable: !0
+        value: subClass,
+        writable: true,
+        configurable: true
       }
-    }), Object.defineProperty(t, "prototype", {
-      writable: !1
-    }), e && _setPrototypeOf(t, e);
+    });
+    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 _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
   }
+
   function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
     try {
-      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (t) {}
-    return (_isNativeReflectConstruct = function () {
-      return !!t;
-    })();
-  }
-  function _iterableToArray(r) {
-    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
   }
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
   }
-  function _objectWithoutProperties(e, t) {
-    if (null == e) return {};
-    var o,
-      r,
-      i = _objectWithoutPropertiesLoose(e, t);
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
     if (Object.getOwnPropertySymbols) {
-      var s = Object.getOwnPropertySymbols(e);
-      for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
     }
-    return i;
+
+    return target;
   }
-  function _objectWithoutPropertiesLoose(r, e) {
-    if (null == r) return {};
-    var t = {};
-    for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-      if (e.includes(n)) continue;
-      t[n] = r[n];
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
-    return t;
+
+    return self;
   }
-  function _possibleConstructorReturn(t, e) {
-    if (e && ("object" == typeof e || "function" == typeof e)) return e;
-    if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
-    return _assertThisInitialized(t);
+
+  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 _setPrototypeOf(t, e) {
-    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-      return t.__proto__ = e, t;
-    }, _setPrototypeOf(t, e);
+
+  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);
+    };
   }
-  function _taggedTemplateLiteral(e, t) {
-    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
       raw: {
-        value: Object.freeze(t)
+        value: Object.freeze(raw)
       }
     }));
   }
-  function _toConsumableArray(r) {
-    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
-  function _toPrimitive(t, r) {
-    if ("object" != typeof t || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-      var i = e.call(t, r || "default");
-      if ("object" != typeof i) return i;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return ("string" === r ? String : Number)(t);
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
   }
-  function _toPropertyKey(t) {
-    var i = _toPrimitive(t, "string");
-    return "symbol" == typeof i ? i : i + "";
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
-  function _unsupportedIterableToArray(r, a) {
-    if (r) {
-      if ("string" == typeof r) return _arrayLikeToArray(r, a);
-      var t = {}.toString.call(r).slice(8, -1);
-      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-    }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
   var interpretErrorMessage = function interpretErrorMessage(error) {
@@ -157,39 +239,50 @@
   var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
     data: null
   });
-
   /**
    * A flavour of PageReady with Luxity customisations
    * 1. the onIsLoading callback is useful to parent components that have more complex data interactions
    * 2. an error message interpreter is supplied from the local helper library
    */
+
   var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityPageReady, _React$Component);
+
+    var _super = _createSuper(LuxityPageReady);
+
     function LuxityPageReady() {
       var _this;
+
       _classCallCheck(this, LuxityPageReady);
+
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      _this = _callSuper(this, LuxityPageReady, [].concat(args));
-      _defineProperty(_this, "state", {
+
+      _this = _super.call.apply(_super, [this].concat(args));
+
+      _defineProperty(_assertThisInitialized(_this), "state", {
         data: null
       });
-      _defineProperty(_this, "refreshPage", function () {
+
+      _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
         return _this.pageReadyInstance.initRequest();
       });
+
       return _this;
     }
-    _inherits(LuxityPageReady, _React$Component);
-    return _createClass(LuxityPageReady, [{
+
+    _createClass(LuxityPageReady, [{
       key: "render",
       value: function render() {
         var _this2 = this;
+
         var _this$props = this.props,
-          customErrorMessage = _this$props.customErrorMessage,
-          customErrorHandler = _this$props.customErrorHandler,
-          getRequestPromise = _this$props.getRequestPromise,
-          _onData = _this$props.onData,
-          children = _this$props.children;
+            customErrorMessage = _this$props.customErrorMessage,
+            customErrorHandler = _this$props.customErrorHandler,
+            getRequestPromise = _this$props.getRequestPromise,
+            _onData = _this$props.onData,
+            children = _this$props.children;
         var data = this.state.data;
         return /*#__PURE__*/React__default.createElement(PageReady, {
           ref: function ref(inst) {
@@ -199,15 +292,19 @@
             _this2.setState({
               data: res.data
             });
+
             _onData(res);
           },
           getRequestInstance: function getRequestInstance() {
             _this2.props.onIsLoading(true);
+
             return getRequestPromise().then(function (out) {
               _this2.props.onIsLoading(false);
+
               return out;
             }).catch(function (oops) {
               _this2.props.onIsLoading(false);
+
               return oops;
             });
           },
@@ -224,7 +321,10 @@
         }, children));
       }
     }]);
+
+    return LuxityPageReady;
   }(React__default.Component);
+
   LuxityPageReady.defaultProps = {
     onIsLoading: function onIsLoading() {
       return null;
@@ -307,6 +407,7 @@
   });
 
   var _excluded = ["children"];
+
   var _templateObject$1;
   var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.base;
@@ -315,17 +416,21 @@
   }, disabledButtonStyle, function (props) {
     return props.theme.colors.base;
   });
+
   var TextButton = function TextButton(_ref) {
     var children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+        restProps = _objectWithoutProperties(_ref, _excluded);
+
     return /*#__PURE__*/React__default.createElement(Button, restProps, children);
   };
+
   TextButton.defaultProps = {
     type: 'button'
   };
   var TextButton$1 = themed(TextButton);
 
   var _excluded$1 = ["children"];
+
   var _templateObject$2;
   var Button$1 = styled__default(TextButton$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
@@ -340,11 +445,14 @@
   }, function (props) {
     return props.theme.colors.primary;
   });
+
   var InvertedTextButton = function InvertedTextButton(_ref) {
     var children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded$1);
+        restProps = _objectWithoutProperties(_ref, _excluded$1);
+
     return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
   };
+
   var InvertedTextButton$1 = themed(InvertedTextButton);
 
   var media = {
@@ -393,49 +501,65 @@
   }, function (props) {
     return props.theme.colors.ntrlMin;
   });
-
   /**
    * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
    */
+
   var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(GraphQLMultiSelector, _React$Component);
+
+    var _super = _createSuper(GraphQLMultiSelector);
+
     function GraphQLMultiSelector(props) {
       var _this;
+
       _classCallCheck(this, GraphQLMultiSelector);
-      _this = _callSuper(this, GraphQLMultiSelector, [props]);
-      _defineProperty(_this, "componentDidUpdate", function (prevProps) {
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
         if (prevProps.graphQuery !== _this.props.graphQuery) {
           _this.makeRequest();
         }
       });
-      _defineProperty(_this, "makeRequest", function () {
+
+      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
         _this.pageReady.refreshPage();
       });
-      _defineProperty(_this, "emptySelected", function () {
+
+      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
         return _this.setState({
           selected: [ALL_ITEM]
         });
       });
-      _defineProperty(_this, "setNewResults", function (res) {
+
+      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
         var selectedIds = _this.state.selected.map(function (sel) {
           return sel.id;
         });
+
         var pagination = _this.props.resultProcessor(res);
+
         var allSelected = _this.state.selected.some(function (item) {
           return item.id === ALL_ITEM.id;
         });
+
         var newList = pagination.data.filter(function (newItem) {
           return !selectedIds.includes(newItem.id);
         });
         newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
+
         _this.setState({
           list: newList,
           pagination: pagination
         });
       });
-      _defineProperty(_this, "onAddItem", function (addSelectedItem) {
+
+      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
         _this.setState(function (prevState) {
           var newSelectedList;
           var newList;
+
           if (addSelectedItem.id === ALL_ITEM.id) {
             // Clear Selected List
             // and move previous Selected items to list
@@ -455,6 +579,7 @@
               return item.id !== addSelectedItem.id;
             })));
           }
+
           return {
             selected: newSelectedList,
             list: newList
@@ -465,20 +590,24 @@
           }));
         });
       });
-      _defineProperty(_this, "onRemoveItem", function (removeSelectedItem) {
+
+      _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
         _this.setState(function (prevState) {
           // Cannot remove ALL from selection by unselecting it
           if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
             return {};
           }
+
           var newSelectedList = prevState.selected.filter(function (item) {
             return item.id !== removeSelectedItem.id;
           });
+
           var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
             return item.id !== ALL_ITEM.id;
           }).sort(function (a, b) {
             return a.id - b.id;
           });
+
           return {
             list: newList,
             selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
@@ -489,23 +618,25 @@
           }));
         });
       });
-      _defineProperty(_this, "onIsLoading", function (flag) {
+
+      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
         _this.setState({
           isLoading: flag
         });
       });
-      _defineProperty(_this, "render", function () {
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _this$props = _this.props,
-          baseClass = _this$props.baseClass,
-          ItemRenderer = _this$props.itemRenderer,
-          identifier = _this$props.identifier,
-          triggerRequest = _this$props.triggerRequest,
-          className = _this$props.className;
+            baseClass = _this$props.baseClass,
+            ItemRenderer = _this$props.itemRenderer,
+            identifier = _this$props.identifier,
+            triggerRequest = _this$props.triggerRequest,
+            className = _this$props.className;
         var _this$state = _this.state,
-          list = _this$state.list,
-          selected = _this$state.selected,
-          pagination = _this$state.pagination,
-          isLoading = _this$state.isLoading;
+            list = _this$state.list,
+            selected = _this$state.selected,
+            pagination = _this$state.pagination,
+            isLoading = _this$state.isLoading;
         return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
           "data-qe-id": identifier,
           className: "".concat(className, " ").concat(baseClass)
@@ -544,6 +675,7 @@
           type: "button"
         }, "SHOW MORE"))));
       });
+
       _this.state = {
         selected: [ALL_ITEM],
         list: [],
@@ -552,9 +684,10 @@
       };
       return _this;
     }
-    _inherits(GraphQLMultiSelector, _React$Component);
+
     return _createClass(GraphQLMultiSelector);
   }(React__default.Component);
+
   GraphQLMultiSelector.defaultProps = {
     baseClass: 'multiselector'
   };
@@ -587,22 +720,24 @@
   }, function (props) {
     return props.theme.marginPaddings[3];
   });
+
   var InterestsSubheading = function InterestsSubheading(_ref) {
     var title = _ref.title,
-      children = _ref.children,
-      className = _ref.className;
+        children = _ref.children,
+        className = _ref.className;
     return /*#__PURE__*/React__default.createElement(InterestsSubheadingContainer, {
       className: className
     }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
   };
 
   var _templateObject$5;
+
   var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
-      className = _ref.className,
-      title = _ref.title,
-      searchPlaceHolder = _ref.searchPlaceHolder,
-      onSearchChanged = _ref.onSearchChanged;
+        className = _ref.className,
+        title = _ref.title,
+        searchPlaceHolder = _ref.searchPlaceHolder,
+        onSearchChanged = _ref.onSearchChanged;
     return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
@@ -615,6 +750,7 @@
       onChange: onSearchChanged
     })));
   };
+
   var StyledTitle = styled__default(Title$1)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
@@ -637,26 +773,37 @@
   var Title$2 = themed(StyledTitle);
 
   var debounceBuilder = functions.debounced(200);
+
   /**
    * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
    */
   var LuxityGraphQLMultiselector = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityGraphQLMultiselector, _React$Component);
+
+    var _super = _createSuper(LuxityGraphQLMultiselector);
+
     function LuxityGraphQLMultiselector(props) {
       var _this;
+
       _classCallCheck(this, LuxityGraphQLMultiselector);
-      _this = _callSuper(this, LuxityGraphQLMultiselector, [props]);
-      _defineProperty(_this, "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-      _defineProperty(_this, "increaseLimit", function () {
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
+
+      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
         _this.setState(function (prevState) {
           return {
             limit: prevState.limit + _this.props.queryLimitIncrement
           };
         });
       });
-      _defineProperty(_this, "onChange", function (selection) {
+
+      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
         _this.props.onChange(selection);
       });
-      _defineProperty(_this, "onSearchChanged", function (event) {
+
+      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
         event.preventDefault();
         var searchText = event.target.value;
         debounceBuilder(function () {
@@ -665,21 +812,22 @@
           });
         });
       });
-      _defineProperty(_this, "render", function () {
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _this$state = _this.state,
-          limit = _this$state.limit,
-          category = _this$state.category,
-          nameFilter = _this$state.nameFilter;
+            limit = _this$state.limit,
+            category = _this$state.category,
+            nameFilter = _this$state.nameFilter;
         var _this$props = _this.props,
-          title = _this$props.title,
-          baseClass = _this$props.baseClass,
-          getGraphQuery = _this$props.getGraphQuery,
-          resultProcessor = _this$props.resultProcessor,
-          itemRenderer = _this$props.itemRenderer,
-          searchPlaceHolder = _this$props.searchPlaceHolder,
-          graphApi = _this$props.graphApi,
-          identifier = _this$props.identifier,
-          requestInstance = _this$props.requestInstance;
+            title = _this$props.title,
+            baseClass = _this$props.baseClass,
+            getGraphQuery = _this$props.getGraphQuery,
+            resultProcessor = _this$props.resultProcessor,
+            itemRenderer = _this$props.itemRenderer,
+            searchPlaceHolder = _this$props.searchPlaceHolder,
+            graphApi = _this$props.graphApi,
+            identifier = _this$props.identifier,
+            requestInstance = _this$props.requestInstance;
         return /*#__PURE__*/React__default.createElement("div", {
           className: baseClass
         }, /*#__PURE__*/React__default.createElement(Title$2, {
@@ -702,6 +850,7 @@
           itemRenderer: itemRenderer
         })));
       });
+
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
@@ -709,11 +858,12 @@
       };
       return _this;
     }
-    _inherits(LuxityGraphQLMultiselector, _React$Component);
-    return _createClass(LuxityGraphQLMultiselector, [{
+
+    _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
         var _this$multiSelectorRe;
+
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
@@ -726,10 +876,14 @@
             category: props.category
           };
         }
+
         return null;
       }
     }]);
+
+    return LuxityGraphQLMultiselector;
   }(React__default.Component);
+
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
@@ -738,17 +892,21 @@
   };
 
   var _excluded$2 = ["children"];
+
   var _templateObject$6;
   var Button$2 = styled__default.button(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: #fff;\n  color: ", ";\n  border: 1px solid ", ";\n\n  &:disabled {\n    ", "\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.primary;
   }, disabledButtonStyle);
+
   var PrimaryButton = function PrimaryButton(_ref) {
     var children = _ref.children,
-      restProps = _objectWithoutProperties(_ref, _excluded$2);
+        restProps = _objectWithoutProperties(_ref, _excluded$2);
+
     return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
   };
+
   var PrimaryButton$1 = themed(PrimaryButton);
 
   var _templateObject$7;
@@ -764,10 +922,11 @@
     return props.theme.colors.ntrlMin;
   });
   var UnselectedButton = themed(BaseButton);
+
   var ItemRenderer = function ItemRenderer(_ref) {
     var item = _ref.item,
-      onSelect = _ref.onSelect,
-      selected = _ref.selected;
+        onSelect = _ref.onSelect,
+        selected = _ref.selected;
     var props = {
       onClick: function onClick(e) {
         e.preventDefault();
@@ -779,12 +938,12 @@
 
   var StyleSelector = function StyleSelector(_ref) {
     var onChange = _ref.onChange,
-      category = _ref.category,
-      graphApi = _ref.graphApi,
-      itemRenderer = _ref.itemRenderer,
-      getGraphQuery = _ref.getGraphQuery,
-      resultProcessor = _ref.resultProcessor,
-      requestInstance = _ref.requestInstance;
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -801,6 +960,7 @@
       requestInstance: requestInstance
     });
   };
+
   StyleSelector.defaultProps = {
     itemRenderer: ItemRenderer,
     resultProcessor: function resultProcessor(result) {