@bonlineza/luxity-lib 2.34.1 → 2.34.2

package/StyleSelector.js

@@ -9,225 +9,143 @@
   EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
 
-  function _classCallCheck(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
+  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 _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 _arrayWithoutHoles(r) {
+    if (Array.isArray(r)) return _arrayLikeToArray(r);
   }
-
-  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(e) {
+    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return 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;
+  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 _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);
     }
-
-    return obj;
   }
-
+  function _createClass(e, r, t) {
+    return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+      writable: !1
+    }), e;
+  }
+  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 _extends() {
-    _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 _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]);
       }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
+      return n;
+    }, _extends.apply(null, arguments);
   }
-
-  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, {
+  function _getPrototypeOf(t) {
+    return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+      return t.__proto__ || Object.getPrototypeOf(t);
+    }, _getPrototypeOf(t);
+  }
+  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, {
       constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
+        value: t,
+        writable: !0,
+        configurable: !0
       }
-    });
-    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);
+    }), Object.defineProperty(t, "prototype", {
+      writable: !1
+    }), e && _setPrototypeOf(t, e);
   }
-
   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;
-    }
+      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (t) {}
+    return (_isNativeReflectConstruct = function () {
+      return !!t;
+    })();
   }
-
-  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 _iterableToArray(r) {
+    if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
   }
-
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-
-    var key, i;
-
+  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 _objectWithoutProperties(e, t) {
+    if (null == e) return {};
+    var o,
+      r,
+      i = _objectWithoutPropertiesLoose(e, t);
     if (Object.getOwnPropertySymbols) {
-      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];
-      }
+      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]);
     }
-
-    return target;
+    return i;
   }
-
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  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];
     }
-
-    return self;
+    return 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 _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 _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 _setPrototypeOf(t, e) {
+    return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+      return t.__proto__ = e, t;
+    }, _setPrototypeOf(t, e);
   }
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
-    }
-
-    return Object.freeze(Object.defineProperties(strings, {
+  function _taggedTemplateLiteral(e, t) {
+    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
       raw: {
-        value: Object.freeze(raw)
+        value: Object.freeze(t)
       }
     }));
   }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  function _toConsumableArray(r) {
+    return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
   }
-
-  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 _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 _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 _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
   }
-
-  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 _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;
+    }
   }
 
   var interpretErrorMessage = function interpretErrorMessage(error) {
@@ -239,50 +157,39 @@
   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 = _super.call.apply(_super, [this].concat(args));
-
-      _defineProperty(_assertThisInitialized(_this), "state", {
+      _this = _callSuper(this, LuxityPageReady, [].concat(args));
+      _defineProperty(_this, "state", {
         data: null
       });
-
-      _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
+      _defineProperty(_this, "refreshPage", function () {
         return _this.pageReadyInstance.initRequest();
       });
-
       return _this;
     }
-
-    _createClass(LuxityPageReady, [{
+    _inherits(LuxityPageReady, _React$Component);
+    return _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) {
@@ -292,19 +199,15 @@
             _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;
             });
           },
@@ -321,10 +224,7 @@
         }, children));
       }
     }]);
-
-    return LuxityPageReady;
   }(React__default.Component);
-
   LuxityPageReady.defaultProps = {
     onIsLoading: function onIsLoading() {
       return null;
@@ -407,7 +307,6 @@
   });
 
   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;
@@ -416,21 +315,17 @@
   }, 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;
@@ -445,14 +340,11 @@
   }, 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 = {
@@ -501,65 +393,49 @@
   }, 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 = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+      _this = _callSuper(this, GraphQLMultiSelector, [props]);
+      _defineProperty(_this, "componentDidUpdate", function (prevProps) {
         if (prevProps.graphQuery !== _this.props.graphQuery) {
           _this.makeRequest();
         }
       });
-
-      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+      _defineProperty(_this, "makeRequest", function () {
         _this.pageReady.refreshPage();
       });
-
-      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+      _defineProperty(_this, "emptySelected", function () {
         return _this.setState({
           selected: [ALL_ITEM]
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
+      _defineProperty(_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(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
+      _defineProperty(_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
@@ -579,7 +455,6 @@
               return item.id !== addSelectedItem.id;
             })));
           }
-
           return {
             selected: newSelectedList,
             list: newList
@@ -590,24 +465,20 @@
           }));
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
+      _defineProperty(_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]
@@ -618,25 +489,23 @@
           }));
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+      _defineProperty(_this, "onIsLoading", function (flag) {
         _this.setState({
           isLoading: flag
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
+      _defineProperty(_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)
@@ -675,7 +544,6 @@
           type: "button"
         }, "SHOW MORE"))));
       });
-
       _this.state = {
         selected: [ALL_ITEM],
         list: [],
@@ -684,10 +552,9 @@
       };
       return _this;
     }
-
+    _inherits(GraphQLMultiSelector, _React$Component);
     return _createClass(GraphQLMultiSelector);
   }(React__default.Component);
-
   GraphQLMultiSelector.defaultProps = {
     baseClass: 'multiselector'
   };
@@ -720,24 +587,22 @@
   }, 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
@@ -750,7 +615,6 @@
       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) {
@@ -773,37 +637,26 @@
   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 = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
+      _this = _callSuper(this, LuxityGraphQLMultiselector, [props]);
+      _defineProperty(_this, "multiSelectorRef", /*#__PURE__*/React__default.createRef());
+      _defineProperty(_this, "increaseLimit", function () {
         _this.setState(function (prevState) {
           return {
             limit: prevState.limit + _this.props.queryLimitIncrement
           };
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
+      _defineProperty(_this, "onChange", function (selection) {
         _this.props.onChange(selection);
       });
-
-      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
+      _defineProperty(_this, "onSearchChanged", function (event) {
         event.preventDefault();
         var searchText = event.target.value;
         debounceBuilder(function () {
@@ -812,22 +665,21 @@
           });
         });
       });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
+      _defineProperty(_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, {
@@ -850,7 +702,6 @@
           itemRenderer: itemRenderer
         })));
       });
-
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
@@ -858,12 +709,11 @@
       };
       return _this;
     }
-
-    _createClass(LuxityGraphQLMultiselector, [{
+    _inherits(LuxityGraphQLMultiselector, _React$Component);
+    return _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();
         }
@@ -876,14 +726,10 @@
             category: props.category
           };
         }
-
         return null;
       }
     }]);
-
-    return LuxityGraphQLMultiselector;
   }(React__default.Component);
-
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
@@ -892,21 +738,17 @@
   };
 
   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;
@@ -922,11 +764,10 @@
     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();
@@ -938,12 +779,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",
@@ -960,7 +801,6 @@
       requestInstance: requestInstance
     });
   };
-
   StyleSelector.defaultProps = {
     itemRenderer: ItemRenderer,
     resultProcessor: function resultProcessor(result) {