@bonlineza/luxity-lib 2.39.5 → 2.39.6

package/LuxityGraphQLMultiselector.js

@@ -1,896 +1,889 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady')) :
-  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady'], factory) :
-  (global = global || self, global.LuxityGraphQLMultiselector = factory(global.React, global.function, global.styled, global.EllipsisLoader, global.PageReady));
-}(this, (function (React, functions, styled, EllipsisLoader, PageReady) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-  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");
-    }
+import React, { forwardRef, Fragment } from 'react';
+import { debounced } from '@bonlineza/b-lib/functions';
+import styled, { css, ThemeProvider, keyframes } from 'styled-components';
+import EllipsisLoader from '@bonlineza/b-lib/EllipsisLoader';
+import PageReady from '@bonlineza/b-lib/PageReady';
+
+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 _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
+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(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
     });
-    return Constructor;
+  } else {
+    obj[key] = value;
   }
 
-  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;
-  }
+  return obj;
+}
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+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];
-          }
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
         }
       }
-
-      return target;
-    };
-    return _extends.apply(this, 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, {
-      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);
-  }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 
-  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");
   }
 
-  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;
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
     }
-  }
-
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
 
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
 
-    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 _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 _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];
   }
 
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
+  return target;
+}
 
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
 
-    var key, i;
+  var target = _objectWithoutPropertiesLoose(source, excluded);
 
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+  var key, i;
 
-      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];
-      }
-    }
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
 
-    return target;
+    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];
+    }
   }
 
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
+  return target;
+}
 
-    return self;
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  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 self;
+}
 
-    return _assertThisInitialized(self);
+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");
   }
 
-  function _createSuper(Derived) {
-    var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-    return function _createSuperInternal() {
-      var Super = _getPrototypeOf(Derived),
-          result;
+  return _assertThisInitialized(self);
+}
 
-      if (hasNativeReflectConstruct) {
-        var NewTarget = _getPrototypeOf(this).constructor;
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
 
-        result = Reflect.construct(Super, arguments, NewTarget);
-      } else {
-        result = Super.apply(this, arguments);
-      }
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
 
-      return _possibleConstructorReturn(this, result);
-    };
-  }
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
     }
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
+    return _possibleConstructorReturn(this, result);
+  };
+}
 
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(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);
-  }
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
 
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-    return arr2;
-  }
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 
-  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(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);
+}
 
-  var interpretErrorMessage = function interpretErrorMessage(error) {
-    var customMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Failed: :error_code';
-    var message = customMessage || 'Network Error';
-    return message.replace(':error_code', error.status || 'Network Down');
-  };
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
 
-  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
-   */
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 
-  var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityPageReady, _React$Component);
+  return arr2;
+}
 
-    var _super = _createSuper(LuxityPageReady);
+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 LuxityPageReady() {
-      var _this;
+var interpretErrorMessage = function interpretErrorMessage(error) {
+  var customMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Failed: :error_code';
+  var message = customMessage || 'Network Error';
+  return message.replace(':error_code', error.status || 'Network Down');
+};
 
-      _classCallCheck(this, LuxityPageReady);
+var LuxityPageReadyContext = /*#__PURE__*/React.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
+ */
 
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
+  _inherits(LuxityPageReady, _React$Component);
 
-      _this = _super.call.apply(_super, [this].concat(args));
+  var _super = _createSuper(LuxityPageReady);
 
-      _defineProperty(_assertThisInitialized(_this), "state", {
-        data: null
-      });
+  function LuxityPageReady() {
+    var _this;
 
-      _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
-        return _this.pageReadyInstance.initRequest();
-      });
+    _classCallCheck(this, LuxityPageReady);
 
-      return _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    _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;
-        var data = this.state.data;
-        return /*#__PURE__*/React__default.createElement(PageReady, {
-          ref: function ref(inst) {
-            _this2.pageReadyInstance = inst;
-          },
-          onData: function onData(res) {
-            _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;
-            });
-          },
-          customErrorMessage: customErrorMessage,
-          customErrorHandler: customErrorHandler,
-          renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
-          },
-          errorMessageInterpreter: interpretErrorMessage
-        }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
-          value: {
-            data: data
-          }
-        }, children));
-      }
-    }]);
-
-    return LuxityPageReady;
-  }(React__default.Component);
+    _this = _super.call.apply(_super, [this].concat(args));
 
-  LuxityPageReady.defaultProps = {
-    onIsLoading: function onIsLoading() {
-      return null;
-    },
-    customErrorMessage: '',
-    customErrorHandler: function customErrorHandler() {
-      return null;
-    },
-    onData: function onData() {
-      return null;
-    }
-  };
-
-  var _templateObject, _templateObject2;
-  var disabledButtonStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
-  var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 2rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n"])));
-
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6',
-      gray: '#efefef',
-      darkerGray: '#454141'
-    },
-    rareStepColors: {
-      primary: '#202b58',
-      secondary: '#ef5c2d',
-      ntrlMin: '#ffffff',
-      ntrl40: '#f4f4f4',
-      ntrl50: '#808080',
-      ntrl60: '#e8e8e8',
-      ntrl70: '#252525',
-      ntrlMax: '#000000'
-    },
-    rareStepFontWeights: {
-      normal: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
-    },
-    rareStepFontSize: {
-      h1: '36px',
-      h2: '30px',
-      h3: '24px',
-      h4: '20px',
-      h5: '16px',
-      h6: '14px',
-      footerTitle: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
-
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      data: null
     });
-  });
 
-  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;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, disabledButtonStyle, function (props) {
-    return props.theme.colors.base;
-  });
-
-  var TextButton = function TextButton(_ref) {
-    var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded);
-
-    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
-  };
+    _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
+      return _this.pageReadyInstance.initRequest();
+    });
 
-  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;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.base;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  });
+    return _this;
+  }
 
-  var InvertedTextButton = function InvertedTextButton(_ref) {
-    var children = _ref.children,
-        restProps = _objectWithoutProperties(_ref, _excluded$1);
+  _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;
+      var data = this.state.data;
+      return /*#__PURE__*/React.createElement(PageReady, {
+        ref: function ref(inst) {
+          _this2.pageReadyInstance = inst;
+        },
+        onData: function onData(res) {
+          _this2.setState({
+            data: res.data
+          });
 
-    return /*#__PURE__*/React__default.createElement(Button$1, restProps, children);
-  };
+          _onData(res);
+        },
+        getRequestInstance: function getRequestInstance() {
+          _this2.props.onIsLoading(true);
 
-  var InvertedTextButton$1 = themed(InvertedTextButton);
+          return getRequestPromise().then(function (out) {
+            _this2.props.onIsLoading(false);
 
-  var media = {
-    xs: '576px',
-    sm: '768px',
-    md: '992px',
-    lg: '1200px'
-  };
+            return out;
+          }).catch(function (oops) {
+            _this2.props.onIsLoading(false);
 
-  var _templateObject$3, _templateObject2$1;
-  var ALL_ITEM = {
-    id: 'ALL',
-    name: 'ALL'
-  };
-  var multiSelectorItemMaxHeight = '3rem';
-  var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
-  var StyledMultiselector = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  }, media.sm, function (props) {
-    return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.colors.ntrlMin;
+            return oops;
+          });
+        },
+        customErrorMessage: customErrorMessage,
+        customErrorHandler: customErrorHandler,
+        renderCustomLoader: function renderCustomLoader() {
+          return /*#__PURE__*/React.createElement(EllipsisLoader, null);
+        },
+        errorMessageInterpreter: interpretErrorMessage
+      }, /*#__PURE__*/React.createElement(LuxityPageReadyContext.Provider, {
+        value: {
+          data: data
+        }
+      }, children));
+    }
+  }]);
+
+  return LuxityPageReady;
+}(React.Component);
+
+LuxityPageReady.defaultProps = {
+  onIsLoading: function onIsLoading() {
+    return null;
+  },
+  customErrorMessage: '',
+  customErrorHandler: function customErrorHandler() {
+    return null;
+  },
+  onData: function onData() {
+    return null;
+  }
+};
+
+var _templateObject, _templateObject2;
+var disabledButtonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+var baseButtonStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 2rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n"])));
+
+var theme = {
+  breakpoints: ['40em', '52em', '64em'],
+  space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+  marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+  letterSpacings: ['-0.5px', '0px', '+0.5px'],
+  radii: ['0px', '2px', '4px', '8px'],
+  borderRadius: '6px',
+  colors: {
+    primary: '#000',
+    base: '#4e4949',
+    baseLt: '#817c7c',
+    borderColor: '#d8d8d8',
+    ntrlMin: '#fff',
+    ntrlMinTen: '#e6e6e6',
+    gray: '#efefef',
+    darkerGray: '#454141'
+  },
+  rareStepColors: {
+    primary: '#202b58',
+    secondary: '#ef5c2d',
+    ntrlMin: '#ffffff',
+    ntrl40: '#f4f4f4',
+    ntrl50: '#808080',
+    ntrl60: '#e8e8e8',
+    ntrl70: '#252525',
+    ntrlMax: '#000000'
+  },
+  rareStepFontWeights: {
+    normal: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700
+  },
+  rareStepFontSize: {
+    h1: '36px',
+    h2: '30px',
+    h3: '24px',
+    h4: '20px',
+    h5: '16px',
+    h6: '14px',
+    footerTitle: '16px'
+  },
+  rareStepPageSizes: {
+    mobile: '500px',
+    tablet: '768px',
+    desktop: '992px',
+    screenl: '1280px',
+    screenxl: '1680px',
+    screenxxl: '1920px',
+    container: '1600px'
+  }
+};
+
+var themed = (function (Component) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      ref: ref
+    })));
   });
-  /**
-   * 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);
+});
+
+var _excluded = ["children"];
+
+var _templateObject$1;
+var Button = styled.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;
+}, function (props) {
+  return props.theme.colors.primary;
+}, disabledButtonStyle, function (props) {
+  return props.theme.colors.base;
+});
+
+var TextButton = function TextButton(_ref) {
+  var children = _ref.children,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button, restProps, children);
+};
+
+TextButton.defaultProps = {
+  type: 'button'
+};
+var TextButton$1 = themed(TextButton);
+
+var _excluded$1 = ["children"];
+
+var _templateObject$2;
+var Button$1 = styled(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;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.base;
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, function (props) {
+  return props.theme.colors.primary;
+});
+
+var InvertedTextButton = function InvertedTextButton(_ref) {
+  var children = _ref.children,
+      restProps = _objectWithoutProperties(_ref, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(Button$1, restProps, children);
+};
+
+var InvertedTextButton$1 = themed(InvertedTextButton);
+
+var media = {
+  xs: '576px',
+  sm: '768px',
+  md: '992px',
+  lg: '1200px'
+};
+
+var _templateObject$3, _templateObject2$1;
+var ALL_ITEM = {
+  id: 'ALL',
+  name: 'ALL'
+};
+var multiSelectorItemMaxHeight = '3rem';
+var multiSelectorItemAnimationDuration = '300ms';
+var multiselectorItemFadeIn = keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
+var StyledMultiselector = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.marginPaddings[0];
+}, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.marginPaddings[2];
+}, media.sm, function (props) {
+  return props.theme.marginPaddings[2];
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.colors.ntrlMin;
+}, function (props) {
+  return props.theme.colors.primary;
+}, 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) {
+      if (prevProps.graphQuery !== _this.props.graphQuery) {
+        _this.makeRequest();
+      }
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-        if (prevProps.graphQuery !== _this.props.graphQuery) {
-          _this.makeRequest();
-        }
-      });
+    _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+      _this.pageReady.refreshPage();
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
-        _this.pageReady.refreshPage();
+    _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+      return _this.setState({
+        selected: [ALL_ITEM]
       });
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
-        return _this.setState({
-          selected: [ALL_ITEM]
-        });
+    _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
+      var selectedIds = _this.state.selected.map(function (sel) {
+        return sel.id;
       });
 
-      _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));
+      var pagination = _this.props.resultProcessor(res);
 
-        _this.setState({
-          list: newList,
-          pagination: pagination
-        });
+      var allSelected = _this.state.selected.some(function (item) {
+        return item.id === ALL_ITEM.id;
       });
 
-      _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
-            newSelectedList = [ALL_ITEM];
-            newList = prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
-            }).concat(prevState.selected).sort(function (a, b) {
-              return a.id - b.id;
-            });
-          } else {
-            newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
-            })).concat(addSelectedItem);
-            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
-            }).filter(function (item) {
-              return item.id !== addSelectedItem.id;
-            })));
-          }
-
-          return {
-            selected: newSelectedList,
-            list: newList
-          };
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(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));
 
-      _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 {};
-          }
+      _this.setState({
+        list: newList,
+        pagination: pagination
+      });
+    });
 
-          var newSelectedList = prevState.selected.filter(function (item) {
-            return item.id !== removeSelectedItem.id;
-          });
+    _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
+      _this.setState(function (prevState) {
+        var newSelectedList;
+        var newList;
 
-          var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
+        if (addSelectedItem.id === ALL_ITEM.id) {
+          // Clear Selected List
+          // and move previous Selected items to list
+          newSelectedList = [ALL_ITEM];
+          newList = prevState.list.filter(function (item) {
             return item.id !== ALL_ITEM.id;
-          }).sort(function (a, b) {
+          }).concat(prevState.selected).sort(function (a, b) {
             return a.id - b.id;
           });
-
-          return {
-            list: newList,
-            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
-          };
-        }, function () {
-          _this.props.onChange(_this.state.selected.filter(function (item) {
+        } else {
+          newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
             return item.id !== ALL_ITEM.id;
-          }));
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
-        _this.setState({
-          isLoading: flag
-        });
-      });
+          })).concat(addSelectedItem);
+          newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
+            return item.id !== ALL_ITEM.id;
+          }).filter(function (item) {
+            return item.id !== addSelectedItem.id;
+          })));
+        }
 
-      _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;
-        var _this$state = _this.state,
-            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)
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selected-items")
-        }, selected.map(function (item) {
-          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
-            key: item.id,
-            item: item,
-            onSelect: _this.onRemoveItem,
-            selected: true
-          });
-        })), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
-          ref: function ref(inst) {
-            _this.pageReady = inst;
-          },
-          onData: _this.setNewResults,
-          onIsLoading: _this.onIsLoading,
-          getRequestPromise: function getRequestPromise() {
-            return triggerRequest();
-          }
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__selectable-items")
-        }, list.map(function (item) {
-          return /*#__PURE__*/React__default.createElement(ItemRenderer, {
-            key: item.id,
-            item: item,
-            onSelect: _this.onAddItem,
-            selected: false
-          });
-        })), /*#__PURE__*/React__default.createElement("div", {
-          className: "".concat(baseClass, "__footer")
-        }, /*#__PURE__*/React__default.createElement(InvertedTextButton$1, {
-          disabled: isLoading || !pagination.has_more_pages,
-          onClick: _this.props.increaseLimit,
-          type: "button"
-        }, "SHOW MORE"))));
+        return {
+          selected: newSelectedList,
+          list: newList
+        };
+      }, function () {
+        _this.props.onChange(_this.state.selected.filter(function (item) {
+          return item.id !== ALL_ITEM.id;
+        }));
       });
+    });
 
-      _this.state = {
-        selected: [ALL_ITEM],
-        list: [],
-        pagination: {},
-        isLoading: false
-      };
-      return _this;
-    }
-
-    return _createClass(GraphQLMultiSelector);
-  }(React__default.Component);
-
-  GraphQLMultiSelector.defaultProps = {
-    baseClass: 'multiselector'
-  };
-  var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
-
-  var Search = (function (props) {
-    return /*#__PURE__*/React__default.createElement("svg", _extends({
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      overflow: "visible",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/React__default.createElement("path", {
-      d: "M14.82 13.93L11.21 10.32C12.1 9.23 12.64 7.83 12.64 6.31C12.64 2.83 9.81 0 6.32 0C2.83 0 0 2.83 0 6.32C0 9.81 2.83 12.64 6.32 12.64C7.84 12.64 9.23 12.1 10.32 11.21L13.93 14.81C14.17 15.06 14.57 15.06 14.81 14.81C15.06 14.57 15.06 14.18 14.82 13.93ZM6.32 11.38C3.53 11.38 1.25 9.11 1.25 6.32C1.25 3.53 3.52 1.25 6.32 1.25C9.11 1.25 11.39 3.52 11.39 6.32C11.39 9.12 9.11 11.38 6.32 11.38Z",
-      fill: "currentColor"
-    }));
-  });
-
-  var _templateObject$4, _templateObject2$2;
-  var Title = styled__default.h1(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
-    return props.theme.fontSizes[2];
-  });
-  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
-    return props.theme.marginPaddings[1];
-  }, function (props) {
-    return props.theme.colors.primary;
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  });
-
-  var InterestsSubheading = function InterestsSubheading(_ref) {
-    var title = _ref.title,
-        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;
-    return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-      className: "".concat(className, " ").concat(baseClass, "__title"),
-      title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "title__search"
-    }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
-      placeholder: searchPlaceHolder,
-      type: "text",
-      name: "search",
-      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) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[3];
-  }, function (props) {
-    return props.theme.colors.primary || '';
-  }, function (props) {
-    return props.theme.colors.primary || '';
-  }, function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.colors.primary;
-  });
-  var Title$2 = themed(StyledTitle);
-
-  var debounceBuilder = functions.debounced(200);
+    _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 {};
+        }
 
-  /**
-   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
-   */
-  var LuxityGraphQLMultiselector = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityGraphQLMultiselector, _React$Component);
+        var newSelectedList = prevState.selected.filter(function (item) {
+          return item.id !== removeSelectedItem.id;
+        });
 
-    var _super = _createSuper(LuxityGraphQLMultiselector);
+        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;
+        });
 
-    function LuxityGraphQLMultiselector(props) {
-      var _this;
+        return {
+          list: newList,
+          selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+        };
+      }, function () {
+        _this.props.onChange(_this.state.selected.filter(function (item) {
+          return item.id !== ALL_ITEM.id;
+        }));
+      });
+    });
 
-      _classCallCheck(this, LuxityGraphQLMultiselector);
+    _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+      _this.setState({
+        isLoading: flag
+      });
+    });
 
-      _this = _super.call(this, props);
+    _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;
+      var _this$state = _this.state,
+          list = _this$state.list,
+          selected = _this$state.selected,
+          pagination = _this$state.pagination,
+          isLoading = _this$state.isLoading;
+      return /*#__PURE__*/React.createElement(StyledMultiselector, null, /*#__PURE__*/React.createElement("div", {
+        "data-qe-id": identifier,
+        className: "".concat(className, " ").concat(baseClass)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(baseClass, "__selected-items")
+      }, selected.map(function (item) {
+        return /*#__PURE__*/React.createElement(ItemRenderer, {
+          key: item.id,
+          item: item,
+          onSelect: _this.onRemoveItem,
+          selected: true
+        });
+      })), /*#__PURE__*/React.createElement(LuxityPageReady, {
+        ref: function ref(inst) {
+          _this.pageReady = inst;
+        },
+        onData: _this.setNewResults,
+        onIsLoading: _this.onIsLoading,
+        getRequestPromise: function getRequestPromise() {
+          return triggerRequest();
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(baseClass, "__selectable-items")
+      }, list.map(function (item) {
+        return /*#__PURE__*/React.createElement(ItemRenderer, {
+          key: item.id,
+          item: item,
+          onSelect: _this.onAddItem,
+          selected: false
+        });
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(baseClass, "__footer")
+      }, /*#__PURE__*/React.createElement(InvertedTextButton$1, {
+        disabled: isLoading || !pagination.has_more_pages,
+        onClick: _this.props.increaseLimit,
+        type: "button"
+      }, "SHOW MORE"))));
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
+    _this.state = {
+      selected: [ALL_ITEM],
+      list: [],
+      pagination: {},
+      isLoading: false
+    };
+    return _this;
+  }
 
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
-        _this.setState(function (prevState) {
-          return {
-            limit: prevState.limit + _this.props.queryLimitIncrement
-          };
-        });
+  return _createClass(GraphQLMultiSelector);
+}(React.Component);
+
+GraphQLMultiSelector.defaultProps = {
+  baseClass: 'multiselector'
+};
+var GraphQLMultiSelector$1 = themed(GraphQLMultiSelector);
+
+var Search = (function (props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    overflow: "visible",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M14.82 13.93L11.21 10.32C12.1 9.23 12.64 7.83 12.64 6.31C12.64 2.83 9.81 0 6.32 0C2.83 0 0 2.83 0 6.32C0 9.81 2.83 12.64 6.32 12.64C7.84 12.64 9.23 12.1 10.32 11.21L13.93 14.81C14.17 15.06 14.57 15.06 14.81 14.81C15.06 14.57 15.06 14.18 14.82 13.93ZM6.32 11.38C3.53 11.38 1.25 9.11 1.25 6.32C1.25 3.53 3.52 1.25 6.32 1.25C9.11 1.25 11.39 3.52 11.39 6.32C11.39 9.12 9.11 11.38 6.32 11.38Z",
+    fill: "currentColor"
+  }));
+});
+
+var _templateObject$4, _templateObject2$2;
+var Title = styled.h1(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
+  return props.theme.fontSizes[2];
+});
+var InterestsSubheadingContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
+  return props.theme.marginPaddings[1];
+}, function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
+  return props.theme.marginPaddings[3];
+}, function (props) {
+  return props.theme.marginPaddings[3];
+});
+
+var InterestsSubheading = function InterestsSubheading(_ref) {
+  var title = _ref.title,
+      children = _ref.children,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement(InterestsSubheadingContainer, {
+    className: className
+  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.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;
+  return /*#__PURE__*/React.createElement(InterestsSubheading, {
+    className: "".concat(className, " ").concat(baseClass, "__title"),
+    title: title
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title__search"
+  }, /*#__PURE__*/React.createElement(Search, null), /*#__PURE__*/React.createElement("input", {
+    placeholder: searchPlaceHolder,
+    type: "text",
+    name: "search",
+    onChange: onSearchChanged
+  })));
+};
+
+var StyledTitle = styled(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) {
+  return props.theme.fontSizes[2];
+}, function (props) {
+  return props.theme.marginPaddings[0];
+}, function (props) {
+  return props.theme.marginPaddings[3];
+}, function (props) {
+  return props.theme.colors.primary || '';
+}, function (props) {
+  return props.theme.colors.primary || '';
+}, function (props) {
+  return props.theme.fontSizes[2];
+}, function (props) {
+  return props.theme.marginPaddings[0];
+}, function (props) {
+  return props.theme.colors.primary;
+});
+var Title$2 = themed(StyledTitle);
+
+var debounceBuilder = 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.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
+      _this.setState(function (prevState) {
+        return {
+          limit: prevState.limit + _this.props.queryLimitIncrement
+        };
       });
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-        _this.props.onChange(selection);
-      });
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
+      _this.props.onChange(selection);
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
-        event.preventDefault();
-        var searchText = event.target.value;
-        debounceBuilder(function () {
-          _this.setState({
-            nameFilter: searchText
-          });
+    _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
+      event.preventDefault();
+      var searchText = event.target.value;
+      debounceBuilder(function () {
+        _this.setState({
+          nameFilter: searchText
         });
       });
+    });
 
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$state = _this.state,
-            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;
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: baseClass
-        }, /*#__PURE__*/React__default.createElement(Title$2, {
-          title: title,
-          baseClass: baseClass,
-          searchPlaceHolder: searchPlaceHolder,
-          onSearchChanged: _this.onSearchChanged
-        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
-          triggerRequest: function triggerRequest() {
-            return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
-            });
-          },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
-          identifier: identifier,
-          ref: _this.multiSelectorRef,
-          onChange: _this.onChange,
-          resultProcessor: resultProcessor,
-          increaseLimit: _this.increaseLimit,
-          itemRenderer: itemRenderer
-        })));
-      });
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      var _this$state = _this.state,
+          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;
+      return /*#__PURE__*/React.createElement("div", {
+        className: baseClass
+      }, /*#__PURE__*/React.createElement(Title$2, {
+        title: title,
+        baseClass: baseClass,
+        searchPlaceHolder: searchPlaceHolder,
+        onSearchChanged: _this.onSearchChanged
+      }), /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GraphQLMultiSelector$1, {
+        triggerRequest: function triggerRequest() {
+          return requestInstance.post(graphApi, {
+            query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
+          });
+        },
+        graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
+        identifier: identifier,
+        ref: _this.multiSelectorRef,
+        onChange: _this.onChange,
+        resultProcessor: resultProcessor,
+        increaseLimit: _this.increaseLimit,
+        itemRenderer: itemRenderer
+      })));
+    });
 
-      _this.state = {
-        limit: props.baseQueryLimit,
-        category: props.category,
-        nameFilter: ''
-      };
-      return _this;
-    }
+    _this.state = {
+      limit: props.baseQueryLimit,
+      category: props.category,
+      nameFilter: ''
+    };
+    return _this;
+  }
 
-    _createClass(LuxityGraphQLMultiselector, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
+  _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();
-        }
+      if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
+        this.multiSelectorRef.current.emptySelected();
       }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, prevState) {
-        if (prevState.category !== props.category) {
-          return {
-            category: props.category
-          };
-        }
-
-        return null;
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, prevState) {
+      if (prevState.category !== props.category) {
+        return {
+          category: props.category
+        };
       }
-    }]);
 
-    return LuxityGraphQLMultiselector;
-  }(React__default.Component);
-
-  LuxityGraphQLMultiselector.defaultProps = {
-    baseClass: '',
-    searchPlaceHolder: '',
-    queryLimitIncrement: 12,
-    baseQueryLimit: 12
-  };
+      return null;
+    }
+  }]);
 
   return LuxityGraphQLMultiselector;
+}(React.Component);
+
+LuxityGraphQLMultiselector.defaultProps = {
+  baseClass: '',
+  searchPlaceHolder: '',
+  queryLimitIncrement: 12,
+  baseQueryLimit: 12
+};
 
-})));
+export default LuxityGraphQLMultiselector;