@bonlineza/luxity-lib 2.39.6 → 2.39.7

package/BrandSelector.js

@@ -1,966 +1,973 @@
-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 (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.BrandSelector = 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");
+    }
   }
-}
-
-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
-  });
-  return Constructor;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
     });
-  } else {
-    obj[key] = value;
+    return Constructor;
   }
 
-  return obj;
-}
+  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 _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+    return obj;
+  }
+
+  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");
+      return target;
+    };
+    return _extends.apply(this, arguments);
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
     }
-  });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    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];
+    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);
   }
 
-  return target;
-}
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
 
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
 
-  var key, i;
+    try {
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
 
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
 
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
       if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
       target[key] = source[key];
     }
+
+    return target;
   }
 
-  return target;
-}
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    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];
+      }
+    }
+
+    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 _assertThisInitialized(self);
+  }
 
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
 
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
 
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
 
-    return _possibleConstructorReturn(this, result);
-  };
-}
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
 
-function _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
+      return _possibleConstructorReturn(this, result);
+    };
   }
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
     }
-  }));
-}
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
 
-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 _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
 
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 
-  return arr2;
-}
+    return arr2;
+  }
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
 
-var interpretErrorMessage = function interpretErrorMessage(error) {
-  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');
-};
+  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');
+  };
+
+  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 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
- */
+  var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityPageReady, _React$Component);
 
-var LuxityPageReady = /*#__PURE__*/function (_React$Component) {
-  _inherits(LuxityPageReady, _React$Component);
+    var _super = _createSuper(LuxityPageReady);
 
-  var _super = _createSuper(LuxityPageReady);
+    function LuxityPageReady() {
+      var _this;
 
-  function LuxityPageReady() {
-    var _this;
+      _classCallCheck(this, LuxityPageReady);
 
-    _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", {
+        data: null
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
+        return _this.pageReadyInstance.initRequest();
+      });
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+      return _this;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _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));
+      }
+    }]);
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      data: null
-    });
+    return LuxityPageReady;
+  }(React__default.Component);
+
+  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'
+    }
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "refreshPage", function () {
-      return _this.pageReadyInstance.initRequest();
+  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
+      })));
     });
+  });
 
-    return _this;
-  }
+  var _excluded = ["children"];
 
-  _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
-          });
+  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;
+  });
 
-          _onData(res);
-        },
-        getRequestInstance: function getRequestInstance() {
-          _this2.props.onIsLoading(true);
+  var TextButton = function TextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded);
 
-          return getRequestPromise().then(function (out) {
-            _this2.props.onIsLoading(false);
+    return /*#__PURE__*/React__default.createElement(Button, restProps, children);
+  };
 
-            return out;
-          }).catch(function (oops) {
-            _this2.props.onIsLoading(false);
+  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 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
-    })));
+  var InvertedTextButton = function InvertedTextButton(_ref) {
+    var children = _ref.children,
+        restProps = _objectWithoutProperties(_ref, _excluded$1);
+
+    return /*#__PURE__*/React__default.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 = 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;
   });
-});
-
-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();
-      }
-    });
+  /**
+   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
+   */
 
-    _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
-      _this.pageReady.refreshPage();
-    });
+  var GraphQLMultiSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(GraphQLMultiSelector, _React$Component);
 
-    _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
-      return _this.setState({
-        selected: [ALL_ITEM]
-      });
-    });
+    var _super = _createSuper(GraphQLMultiSelector);
 
-    _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
-      var selectedIds = _this.state.selected.map(function (sel) {
-        return sel.id;
+    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();
+        }
       });
 
-      var pagination = _this.props.resultProcessor(res);
+      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+        _this.pageReady.refreshPage();
+      });
 
-      var allSelected = _this.state.selected.some(function (item) {
-        return item.id === ALL_ITEM.id;
+      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+        return _this.setState({
+          selected: [ALL_ITEM]
+        });
       });
 
-      var newList = pagination.data.filter(function (newItem) {
-        return !selectedIds.includes(newItem.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));
+
+        _this.setState({
+          list: newList,
+          pagination: pagination
+        });
       });
-      newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
 
-      _this.setState({
-        list: newList,
-        pagination: pagination
+      _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;
+          }));
+        });
       });
-    });
 
-    _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
-      _this.setState(function (prevState) {
-        var newSelectedList;
-        var 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 {};
+          }
 
-        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) {
+          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;
-          }).concat(prevState.selected).sort(function (a, b) {
+          }).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 {
+            list: newList,
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+          };
+        }, function () {
+          _this.props.onChange(_this.state.selected.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;
-        }));
+      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+        _this.setState({
+          isLoading: flag
+        });
       });
-    });
 
-    _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 {};
-        }
+      _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"))));
+      });
 
-        var newSelectedList = prevState.selected.filter(function (item) {
-          return item.id !== removeSelectedItem.id;
-        });
+      _this.state = {
+        selected: [ALL_ITEM],
+        list: [],
+        pagination: {},
+        isLoading: false
+      };
+      return _this;
+    }
 
-        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 _createClass(GraphQLMultiSelector);
+  }(React__default.Component);
 
-        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;
-        }));
-      });
-    });
+  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"
+    }));
+  });
 
-    _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
-      _this.setState({
-        isLoading: flag
-      });
-    });
+  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];
+  });
 
-    _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"))));
-    });
+  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));
+  };
 
-    _this.state = {
-      selected: [ALL_ITEM],
-      list: [],
-      pagination: {},
-      isLoading: false
-    };
-    return _this;
-  }
+  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
+    })));
+  };
 
-  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
-        };
-      });
-    });
+  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);
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-      _this.props.onChange(selection);
-    });
+  var debounceBuilder = functions.debounced(200);
 
-    _defineProperty(_assertThisInitialized(_this), "onSearchChanged", function (event) {
-      event.preventDefault();
-      var searchText = event.target.value;
-      debounceBuilder(function () {
-        _this.setState({
-          nameFilter: searchText
+  /**
+   * 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.setState(function (prevState) {
+          return {
+            limit: prevState.limit + _this.props.queryLimitIncrement
+          };
         });
       });
-    });
 
-    _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)
+      _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
           });
-        },
-        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;
-  }
+      _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
+        })));
+      });
+
+      _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
-        };
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, prevState) {
+        if (prevState.category !== props.category) {
+          return {
+            category: props.category
+          };
+        }
+
+        return null;
       }
+    }]);
 
-      return null;
-    }
-  }]);
-
-  return LuxityGraphQLMultiselector;
-}(React.Component);
-
-LuxityGraphQLMultiselector.defaultProps = {
-  baseClass: '',
-  searchPlaceHolder: '',
-  queryLimitIncrement: 12,
-  baseQueryLimit: 12
-};
-
-var _excluded$2 = ["children"];
-
-var _templateObject$6;
-var Button$2 = styled.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);
-
-  return /*#__PURE__*/React.createElement(Button$2, restProps, children);
-};
-
-var PrimaryButton$1 = themed(PrimaryButton);
-
-var _templateObject$7;
-var BaseButton = styled.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.theme.colors.base;
-}, function (props) {
-  return props.theme.colors.borderColor;
-}, function (props) {
-  return props.theme.colors.ntrlMin;
-}, function (props) {
-  return props.theme.colors.primary;
-}, function (props) {
-  return props.theme.colors.ntrlMin;
-});
-var UnselectedButton = themed(BaseButton);
-
-var ItemRenderer = function ItemRenderer(_ref) {
-  var item = _ref.item,
-      onSelect = _ref.onSelect,
-      selected = _ref.selected;
-  var props = {
-    onClick: function onClick(e) {
-      e.preventDefault();
-      onSelect(item);
-    }
+    return LuxityGraphQLMultiselector;
+  }(React__default.Component);
+
+  LuxityGraphQLMultiselector.defaultProps = {
+    baseClass: '',
+    searchPlaceHolder: '',
+    queryLimitIncrement: 12,
+    baseQueryLimit: 12
   };
-  return selected ? /*#__PURE__*/React.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React.createElement(UnselectedButton, props, item.name);
-};
-
-var BrandSelector = function BrandSelector(_ref) {
-  var onChange = _ref.onChange,
-      category = _ref.category,
-      graphApi = _ref.graphApi,
-      itemRenderer = _ref.itemRenderer,
-      getGraphQuery = _ref.getGraphQuery,
-      resultProcessor = _ref.resultProcessor,
-      requestInstance = _ref.requestInstance;
-  return /*#__PURE__*/React.createElement(LuxityGraphQLMultiselector, {
-    baseQueryLimit: 16,
-    title: "Brands",
-    queryId: "getBrands",
-    baseClass: "brand-selector",
-    identifier: "brand-selector",
-    searchPlaceHolder: "Search brands",
-    category: category,
-    onChange: onChange,
-    graphApi: graphApi,
-    itemRenderer: itemRenderer,
-    getGraphQuery: getGraphQuery,
-    resultProcessor: resultProcessor,
-    requestInstance: requestInstance
+
+  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);
+
+    return /*#__PURE__*/React__default.createElement(Button$2, restProps, children);
+  };
+
+  var PrimaryButton$1 = themed(PrimaryButton);
+
+  var _templateObject$7;
+  var BaseButton = styled__default.button(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.theme.colors.base;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
   });
-};
+  var UnselectedButton = themed(BaseButton);
+
+  var ItemRenderer = function ItemRenderer(_ref) {
+    var item = _ref.item,
+        onSelect = _ref.onSelect,
+        selected = _ref.selected;
+    var props = {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        onSelect(item);
+      }
+    };
+    return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
+  };
 
-BrandSelector.defaultProps = {
-  itemRenderer: ItemRenderer,
-  resultProcessor: function resultProcessor(result) {
-    return result.data.data.luxity_brands;
-  }
-};
+  var BrandSelector = function BrandSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      baseQueryLimit: 16,
+      title: "Brands",
+      queryId: "getBrands",
+      baseClass: "brand-selector",
+      identifier: "brand-selector",
+      searchPlaceHolder: "Search brands",
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  BrandSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_brands;
+    }
+  };
+
+  return BrandSelector;
 
-export default BrandSelector;
+})));