@bonlineza/luxity-lib 2.6.2 → 2.7.3

package/InterestItem.js

@@ -1,14 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('prop-types'), require('numeral'), require('react-animate-height')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'prop-types', 'numeral', 'react-animate-height'], factory) :
-  (global = global || self, global.InterestItem = factory(global.React, global.styled, global.PropTypes, global.numeral, global.AnimateHeight));
-}(this, (function (React, styled, PropTypes, numeral, AnimateHeight) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('numeral')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', 'numeral'], factory) :
+  (global = global || self, global.InterestItem = factory(global.React, global.styled, global.numeral));
+}(this, (function (React, styled, numeral) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   numeral = numeral && Object.prototype.hasOwnProperty.call(numeral, 'default') ? numeral['default'] : numeral;
-  AnimateHeight = AnimateHeight && Object.prototype.hasOwnProperty.call(AnimateHeight, 'default') ? AnimateHeight['default'] : AnimateHeight;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -174,1585 +172,6 @@
     }));
   }
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
-
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _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 _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  /*!
-   * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
-   * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-   */
-
-  function _classCallCheck$1(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-      throw new TypeError("Cannot call a class as a function");
-    }
-  }
-
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-  }
-
-  function _defineProperty$1(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  function _objectSpread(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
-
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
-      }
-
-      ownKeys.forEach(function (key) {
-        _defineProperty$1(target, key, source[key]);
-      });
-    }
-
-    return target;
-  }
-
-  function _slicedToArray$1(arr, i) {
-    return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1();
-  }
-
-  function _arrayWithHoles$1(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArrayLimit$1(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  function _nonIterableRest$1() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
-  }
-
-  var noop = function noop() {};
-
-  var _WINDOW = {};
-  var _DOCUMENT = {};
-  var _MUTATION_OBSERVER = null;
-  var _PERFORMANCE = {
-    mark: noop,
-    measure: noop
-  };
-
-  try {
-    if (typeof window !== 'undefined') _WINDOW = window;
-    if (typeof document !== 'undefined') _DOCUMENT = document;
-    if (typeof MutationObserver !== 'undefined') _MUTATION_OBSERVER = MutationObserver;
-    if (typeof performance !== 'undefined') _PERFORMANCE = performance;
-  } catch (e) {}
-
-  var _ref = _WINDOW.navigator || {},
-      _ref$userAgent = _ref.userAgent,
-      userAgent = _ref$userAgent === void 0 ? '' : _ref$userAgent;
-
-  var WINDOW = _WINDOW;
-  var DOCUMENT = _DOCUMENT;
-  var PERFORMANCE = _PERFORMANCE;
-  var IS_BROWSER = !!WINDOW.document;
-  var IS_DOM = !!DOCUMENT.documentElement && !!DOCUMENT.head && typeof DOCUMENT.addEventListener === 'function' && typeof DOCUMENT.createElement === 'function';
-  var IS_IE = ~userAgent.indexOf('MSIE') || ~userAgent.indexOf('Trident/');
-
-  var NAMESPACE_IDENTIFIER = '___FONT_AWESOME___';
-  var DEFAULT_FAMILY_PREFIX = 'fa';
-  var DEFAULT_REPLACEMENT_CLASS = 'svg-inline--fa';
-  var DATA_FA_I2SVG = 'data-fa-i2svg';
-  var PRODUCTION = function () {
-    try {
-      return process.env.NODE_ENV === 'production';
-    } catch (e) {
-      return false;
-    }
-  }();
-  var DUOTONE_CLASSES = {
-    GROUP: 'group',
-    SWAP_OPACITY: 'swap-opacity',
-    PRIMARY: 'primary',
-    SECONDARY: 'secondary'
-  };
-
-  var initial = WINDOW.FontAwesomeConfig || {};
-
-  function getAttrConfig(attr) {
-    var element = DOCUMENT.querySelector('script[' + attr + ']');
-
-    if (element) {
-      return element.getAttribute(attr);
-    }
-  }
-
-  function coerce(val) {
-    // Getting an empty string will occur if the attribute is set on the HTML tag but without a value
-    // We'll assume that this is an indication that it should be toggled to true
-    // For example <script data-search-pseudo-elements src="..."></script>
-    if (val === '') return true;
-    if (val === 'false') return false;
-    if (val === 'true') return true;
-    return val;
-  }
-
-  if (DOCUMENT && typeof DOCUMENT.querySelector === 'function') {
-    var attrs = [['data-family-prefix', 'familyPrefix'], ['data-replacement-class', 'replacementClass'], ['data-auto-replace-svg', 'autoReplaceSvg'], ['data-auto-add-css', 'autoAddCss'], ['data-auto-a11y', 'autoA11y'], ['data-search-pseudo-elements', 'searchPseudoElements'], ['data-observe-mutations', 'observeMutations'], ['data-mutate-approach', 'mutateApproach'], ['data-keep-original-source', 'keepOriginalSource'], ['data-measure-performance', 'measurePerformance'], ['data-show-missing-icons', 'showMissingIcons']];
-    attrs.forEach(function (_ref) {
-      var _ref2 = _slicedToArray$1(_ref, 2),
-          attr = _ref2[0],
-          key = _ref2[1];
-
-      var val = coerce(getAttrConfig(attr));
-
-      if (val !== undefined && val !== null) {
-        initial[key] = val;
-      }
-    });
-  }
-
-  var _default = {
-    familyPrefix: DEFAULT_FAMILY_PREFIX,
-    replacementClass: DEFAULT_REPLACEMENT_CLASS,
-    autoReplaceSvg: true,
-    autoAddCss: true,
-    autoA11y: true,
-    searchPseudoElements: false,
-    observeMutations: true,
-    mutateApproach: 'async',
-    keepOriginalSource: true,
-    measurePerformance: false,
-    showMissingIcons: true
-  };
-
-  var _config = _objectSpread({}, _default, initial);
-
-  if (!_config.autoReplaceSvg) _config.observeMutations = false;
-
-  var config = _objectSpread({}, _config);
-
-  WINDOW.FontAwesomeConfig = config;
-
-  var w = WINDOW || {};
-  if (!w[NAMESPACE_IDENTIFIER]) w[NAMESPACE_IDENTIFIER] = {};
-  if (!w[NAMESPACE_IDENTIFIER].styles) w[NAMESPACE_IDENTIFIER].styles = {};
-  if (!w[NAMESPACE_IDENTIFIER].hooks) w[NAMESPACE_IDENTIFIER].hooks = {};
-  if (!w[NAMESPACE_IDENTIFIER].shims) w[NAMESPACE_IDENTIFIER].shims = [];
-  var namespace = w[NAMESPACE_IDENTIFIER];
-
-  var functions = [];
-
-  var listener = function listener() {
-    DOCUMENT.removeEventListener('DOMContentLoaded', listener);
-    loaded = 1;
-    functions.map(function (fn) {
-      return fn();
-    });
-  };
-
-  var loaded = false;
-
-  if (IS_DOM) {
-    loaded = (DOCUMENT.documentElement.doScroll ? /^loaded|^c/ : /^loaded|^i|^c/).test(DOCUMENT.readyState);
-    if (!loaded) DOCUMENT.addEventListener('DOMContentLoaded', listener);
-  }
-
-  var isNode = typeof global !== 'undefined' && typeof global.process !== 'undefined' && typeof global.process.emit === 'function';
-  var asyncSetTimer = typeof setImmediate === 'undefined' ? setTimeout : setImmediate;
-  var meaninglessTransform = {
-    size: 16,
-    x: 0,
-    y: 0,
-    rotate: 0,
-    flipX: false,
-    flipY: false
-  };
-  function insertCss(css) {
-    if (!css || !IS_DOM) {
-      return;
-    }
-
-    var style = DOCUMENT.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    var headChildren = DOCUMENT.head.childNodes;
-    var beforeChild = null;
-
-    for (var i = headChildren.length - 1; i > -1; i--) {
-      var child = headChildren[i];
-      var tagName = (child.tagName || '').toUpperCase();
-
-      if (['STYLE', 'LINK'].indexOf(tagName) > -1) {
-        beforeChild = child;
-      }
-    }
-
-    DOCUMENT.head.insertBefore(style, beforeChild);
-    return css;
-  }
-  var idPool = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
-  function nextUniqueId() {
-    var size = 12;
-    var id = '';
-
-    while (size-- > 0) {
-      id += idPool[Math.random() * 62 | 0];
-    }
-
-    return id;
-  }
-  function htmlEscape(str) {
-    return "".concat(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  }
-  function joinAttributes(attributes) {
-    return Object.keys(attributes || {}).reduce(function (acc, attributeName) {
-      return acc + "".concat(attributeName, "=\"").concat(htmlEscape(attributes[attributeName]), "\" ");
-    }, '').trim();
-  }
-  function joinStyles(styles) {
-    return Object.keys(styles || {}).reduce(function (acc, styleName) {
-      return acc + "".concat(styleName, ": ").concat(styles[styleName], ";");
-    }, '');
-  }
-  function transformIsMeaningful(transform) {
-    return transform.size !== meaninglessTransform.size || transform.x !== meaninglessTransform.x || transform.y !== meaninglessTransform.y || transform.rotate !== meaninglessTransform.rotate || transform.flipX || transform.flipY;
-  }
-  function transformForSvg(_ref) {
-    var transform = _ref.transform,
-        containerWidth = _ref.containerWidth,
-        iconWidth = _ref.iconWidth;
-    var outer = {
-      transform: "translate(".concat(containerWidth / 2, " 256)")
-    };
-    var innerTranslate = "translate(".concat(transform.x * 32, ", ").concat(transform.y * 32, ") ");
-    var innerScale = "scale(".concat(transform.size / 16 * (transform.flipX ? -1 : 1), ", ").concat(transform.size / 16 * (transform.flipY ? -1 : 1), ") ");
-    var innerRotate = "rotate(".concat(transform.rotate, " 0 0)");
-    var inner = {
-      transform: "".concat(innerTranslate, " ").concat(innerScale, " ").concat(innerRotate)
-    };
-    var path = {
-      transform: "translate(".concat(iconWidth / 2 * -1, " -256)")
-    };
-    return {
-      outer: outer,
-      inner: inner,
-      path: path
-    };
-  }
-
-  var ALL_SPACE = {
-    x: 0,
-    y: 0,
-    width: '100%',
-    height: '100%'
-  };
-
-  function fillBlack(abstract) {
-    var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-    if (abstract.attributes && (abstract.attributes.fill || force)) {
-      abstract.attributes.fill = 'black';
-    }
-
-    return abstract;
-  }
-
-  function deGroup(abstract) {
-    if (abstract.tag === 'g') {
-      return abstract.children;
-    } else {
-      return [abstract];
-    }
-  }
-
-  function makeIconMasking (_ref) {
-    var children = _ref.children,
-        attributes = _ref.attributes,
-        main = _ref.main,
-        mask = _ref.mask,
-        explicitMaskId = _ref.maskId,
-        transform = _ref.transform;
-    var mainWidth = main.width,
-        mainPath = main.icon;
-    var maskWidth = mask.width,
-        maskPath = mask.icon;
-    var trans = transformForSvg({
-      transform: transform,
-      containerWidth: maskWidth,
-      iconWidth: mainWidth
-    });
-    var maskRect = {
-      tag: 'rect',
-      attributes: _objectSpread({}, ALL_SPACE, {
-        fill: 'white'
-      })
-    };
-    var maskInnerGroupChildrenMixin = mainPath.children ? {
-      children: mainPath.children.map(fillBlack)
-    } : {};
-    var maskInnerGroup = {
-      tag: 'g',
-      attributes: _objectSpread({}, trans.inner),
-      children: [fillBlack(_objectSpread({
-        tag: mainPath.tag,
-        attributes: _objectSpread({}, mainPath.attributes, trans.path)
-      }, maskInnerGroupChildrenMixin))]
-    };
-    var maskOuterGroup = {
-      tag: 'g',
-      attributes: _objectSpread({}, trans.outer),
-      children: [maskInnerGroup]
-    };
-    var maskId = "mask-".concat(explicitMaskId || nextUniqueId());
-    var clipId = "clip-".concat(explicitMaskId || nextUniqueId());
-    var maskTag = {
-      tag: 'mask',
-      attributes: _objectSpread({}, ALL_SPACE, {
-        id: maskId,
-        maskUnits: 'userSpaceOnUse',
-        maskContentUnits: 'userSpaceOnUse'
-      }),
-      children: [maskRect, maskOuterGroup]
-    };
-    var defs = {
-      tag: 'defs',
-      children: [{
-        tag: 'clipPath',
-        attributes: {
-          id: clipId
-        },
-        children: deGroup(maskPath)
-      }, maskTag]
-    };
-    children.push(defs, {
-      tag: 'rect',
-      attributes: _objectSpread({
-        fill: 'currentColor',
-        'clip-path': "url(#".concat(clipId, ")"),
-        mask: "url(#".concat(maskId, ")")
-      }, ALL_SPACE)
-    });
-    return {
-      children: children,
-      attributes: attributes
-    };
-  }
-
-  function makeIconStandard (_ref) {
-    var children = _ref.children,
-        attributes = _ref.attributes,
-        main = _ref.main,
-        transform = _ref.transform,
-        styles = _ref.styles;
-    var styleString = joinStyles(styles);
-
-    if (styleString.length > 0) {
-      attributes['style'] = styleString;
-    }
-
-    if (transformIsMeaningful(transform)) {
-      var trans = transformForSvg({
-        transform: transform,
-        containerWidth: main.width,
-        iconWidth: main.width
-      });
-      children.push({
-        tag: 'g',
-        attributes: _objectSpread({}, trans.outer),
-        children: [{
-          tag: 'g',
-          attributes: _objectSpread({}, trans.inner),
-          children: [{
-            tag: main.icon.tag,
-            children: main.icon.children,
-            attributes: _objectSpread({}, main.icon.attributes, trans.path)
-          }]
-        }]
-      });
-    } else {
-      children.push(main.icon);
-    }
-
-    return {
-      children: children,
-      attributes: attributes
-    };
-  }
-
-  function asIcon (_ref) {
-    var children = _ref.children,
-        main = _ref.main,
-        mask = _ref.mask,
-        attributes = _ref.attributes,
-        styles = _ref.styles,
-        transform = _ref.transform;
-
-    if (transformIsMeaningful(transform) && main.found && !mask.found) {
-      var width = main.width,
-          height = main.height;
-      var offset = {
-        x: width / height / 2,
-        y: 0.5
-      };
-      attributes['style'] = joinStyles(_objectSpread({}, styles, {
-        'transform-origin': "".concat(offset.x + transform.x / 16, "em ").concat(offset.y + transform.y / 16, "em")
-      }));
-    }
-
-    return [{
-      tag: 'svg',
-      attributes: attributes,
-      children: children
-    }];
-  }
-
-  function asSymbol (_ref) {
-    var prefix = _ref.prefix,
-        iconName = _ref.iconName,
-        children = _ref.children,
-        attributes = _ref.attributes,
-        symbol = _ref.symbol;
-    var id = symbol === true ? "".concat(prefix, "-").concat(config.familyPrefix, "-").concat(iconName) : symbol;
-    return [{
-      tag: 'svg',
-      attributes: {
-        style: 'display: none;'
-      },
-      children: [{
-        tag: 'symbol',
-        attributes: _objectSpread({}, attributes, {
-          id: id
-        }),
-        children: children
-      }]
-    }];
-  }
-
-  function makeInlineSvgAbstract(params) {
-    var _params$icons = params.icons,
-        main = _params$icons.main,
-        mask = _params$icons.mask,
-        prefix = params.prefix,
-        iconName = params.iconName,
-        transform = params.transform,
-        symbol = params.symbol,
-        title = params.title,
-        maskId = params.maskId,
-        titleId = params.titleId,
-        extra = params.extra,
-        _params$watchable = params.watchable,
-        watchable = _params$watchable === void 0 ? false : _params$watchable;
-
-    var _ref = mask.found ? mask : main,
-        width = _ref.width,
-        height = _ref.height;
-
-    var isUploadedIcon = prefix === 'fak';
-    var widthClass = isUploadedIcon ? '' : "fa-w-".concat(Math.ceil(width / height * 16));
-    var attrClass = [config.replacementClass, iconName ? "".concat(config.familyPrefix, "-").concat(iconName) : '', widthClass].filter(function (c) {
-      return extra.classes.indexOf(c) === -1;
-    }).filter(function (c) {
-      return c !== '' || !!c;
-    }).concat(extra.classes).join(' ');
-    var content = {
-      children: [],
-      attributes: _objectSpread({}, extra.attributes, {
-        'data-prefix': prefix,
-        'data-icon': iconName,
-        'class': attrClass,
-        'role': extra.attributes.role || 'img',
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'viewBox': "0 0 ".concat(width, " ").concat(height)
-      })
-    };
-    var uploadedIconWidthStyle = isUploadedIcon && !~extra.classes.indexOf('fa-fw') ? {
-      width: "".concat(width / height * 16 * 0.0625, "em")
-    } : {};
-
-    if (watchable) {
-      content.attributes[DATA_FA_I2SVG] = '';
-    }
-
-    if (title) content.children.push({
-      tag: 'title',
-      attributes: {
-        id: content.attributes['aria-labelledby'] || "title-".concat(titleId || nextUniqueId())
-      },
-      children: [title]
-    });
-
-    var args = _objectSpread({}, content, {
-      prefix: prefix,
-      iconName: iconName,
-      main: main,
-      mask: mask,
-      maskId: maskId,
-      transform: transform,
-      symbol: symbol,
-      styles: _objectSpread({}, uploadedIconWidthStyle, extra.styles)
-    });
-
-    var _ref2 = mask.found && main.found ? makeIconMasking(args) : makeIconStandard(args),
-        children = _ref2.children,
-        attributes = _ref2.attributes;
-
-    args.children = children;
-    args.attributes = attributes;
-
-    if (symbol) {
-      return asSymbol(args);
-    } else {
-      return asIcon(args);
-    }
-  }
-
-  var noop$1 = function noop() {};
-
-  var p = config.measurePerformance && PERFORMANCE && PERFORMANCE.mark && PERFORMANCE.measure ? PERFORMANCE : {
-    mark: noop$1,
-    measure: noop$1
-  };
-
-  /**
-   * Internal helper to bind a function known to have 4 arguments
-   * to a given context.
-   */
-
-  var bindInternal4 = function bindInternal4(func, thisContext) {
-    return function (a, b, c, d) {
-      return func.call(thisContext, a, b, c, d);
-    };
-  };
-
-  /**
-   * # Reduce
-   *
-   * A fast object `.reduce()` implementation.
-   *
-   * @param  {Object}   subject      The object to reduce over.
-   * @param  {Function} fn           The reducer function.
-   * @param  {mixed}    initialValue The initial value for the reducer, defaults to subject[0].
-   * @param  {Object}   thisContext  The context for the reducer.
-   * @return {mixed}                 The final result.
-   */
-
-
-  var reduce = function fastReduceObject(subject, fn, initialValue, thisContext) {
-    var keys = Object.keys(subject),
-        length = keys.length,
-        iterator = thisContext !== undefined ? bindInternal4(fn, thisContext) : fn,
-        i,
-        key,
-        result;
-
-    if (initialValue === undefined) {
-      i = 1;
-      result = subject[keys[0]];
-    } else {
-      i = 0;
-      result = initialValue;
-    }
-
-    for (; i < length; i++) {
-      key = keys[i];
-      result = iterator(result, subject[key], key, subject);
-    }
-
-    return result;
-  };
-
-  function defineIcons(prefix, icons) {
-    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var _params$skipHooks = params.skipHooks,
-        skipHooks = _params$skipHooks === void 0 ? false : _params$skipHooks;
-    var normalized = Object.keys(icons).reduce(function (acc, iconName) {
-      var icon = icons[iconName];
-      var expanded = !!icon.icon;
-
-      if (expanded) {
-        acc[icon.iconName] = icon.icon;
-      } else {
-        acc[iconName] = icon;
-      }
-
-      return acc;
-    }, {});
-
-    if (typeof namespace.hooks.addPack === 'function' && !skipHooks) {
-      namespace.hooks.addPack(prefix, normalized);
-    } else {
-      namespace.styles[prefix] = _objectSpread({}, namespace.styles[prefix] || {}, normalized);
-    }
-    /**
-     * Font Awesome 4 used the prefix of `fa` for all icons. With the introduction
-     * of new styles we needed to differentiate between them. Prefix `fa` is now an alias
-     * for `fas` so we'll easy the upgrade process for our users by automatically defining
-     * this as well.
-     */
-
-
-    if (prefix === 'fas') {
-      defineIcons('fa', icons);
-    }
-  }
-
-  var styles = namespace.styles,
-      shims = namespace.shims;
-  var _byUnicode = {};
-  var _byLigature = {};
-  var _byOldName = {};
-  var build = function build() {
-    var lookup = function lookup(reducer) {
-      return reduce(styles, function (o, style, prefix) {
-        o[prefix] = reduce(style, reducer, {});
-        return o;
-      }, {});
-    };
-
-    _byUnicode = lookup(function (acc, icon, iconName) {
-      if (icon[3]) {
-        acc[icon[3]] = iconName;
-      }
-
-      return acc;
-    });
-    _byLigature = lookup(function (acc, icon, iconName) {
-      var ligatures = icon[2];
-      acc[iconName] = iconName;
-      ligatures.forEach(function (ligature) {
-        acc[ligature] = iconName;
-      });
-      return acc;
-    });
-    var hasRegular = 'far' in styles;
-    _byOldName = reduce(shims, function (acc, shim) {
-      var oldName = shim[0];
-      var prefix = shim[1];
-      var iconName = shim[2];
-
-      if (prefix === 'far' && !hasRegular) {
-        prefix = 'fas';
-      }
-
-      acc[oldName] = {
-        prefix: prefix,
-        iconName: iconName
-      };
-      return acc;
-    }, {});
-  };
-  build();
-
-  var styles$1 = namespace.styles;
-  function iconFromMapping(mapping, prefix, iconName) {
-    if (mapping && mapping[prefix] && mapping[prefix][iconName]) {
-      return {
-        prefix: prefix,
-        iconName: iconName,
-        icon: mapping[prefix][iconName]
-      };
-    }
-  }
-
-  function toHtml(abstractNodes) {
-    var tag = abstractNodes.tag,
-        _abstractNodes$attrib = abstractNodes.attributes,
-        attributes = _abstractNodes$attrib === void 0 ? {} : _abstractNodes$attrib,
-        _abstractNodes$childr = abstractNodes.children,
-        children = _abstractNodes$childr === void 0 ? [] : _abstractNodes$childr;
-
-    if (typeof abstractNodes === 'string') {
-      return htmlEscape(abstractNodes);
-    } else {
-      return "<".concat(tag, " ").concat(joinAttributes(attributes), ">").concat(children.map(toHtml).join(''), "</").concat(tag, ">");
-    }
-  }
-
-  var parseTransformString = function parseTransformString(transformString) {
-    var transform = {
-      size: 16,
-      x: 0,
-      y: 0,
-      flipX: false,
-      flipY: false,
-      rotate: 0
-    };
-
-    if (!transformString) {
-      return transform;
-    } else {
-      return transformString.toLowerCase().split(' ').reduce(function (acc, n) {
-        var parts = n.toLowerCase().split('-');
-        var first = parts[0];
-        var rest = parts.slice(1).join('-');
-
-        if (first && rest === 'h') {
-          acc.flipX = true;
-          return acc;
-        }
-
-        if (first && rest === 'v') {
-          acc.flipY = true;
-          return acc;
-        }
-
-        rest = parseFloat(rest);
-
-        if (isNaN(rest)) {
-          return acc;
-        }
-
-        switch (first) {
-          case 'grow':
-            acc.size = acc.size + rest;
-            break;
-
-          case 'shrink':
-            acc.size = acc.size - rest;
-            break;
-
-          case 'left':
-            acc.x = acc.x - rest;
-            break;
-
-          case 'right':
-            acc.x = acc.x + rest;
-            break;
-
-          case 'up':
-            acc.y = acc.y - rest;
-            break;
-
-          case 'down':
-            acc.y = acc.y + rest;
-            break;
-
-          case 'rotate':
-            acc.rotate = acc.rotate + rest;
-            break;
-        }
-
-        return acc;
-      }, transform);
-    }
-  };
-
-  function MissingIcon(error) {
-    this.name = 'MissingIcon';
-    this.message = error || 'Icon unavailable';
-    this.stack = new Error().stack;
-  }
-  MissingIcon.prototype = Object.create(Error.prototype);
-  MissingIcon.prototype.constructor = MissingIcon;
-
-  var FILL = {
-    fill: 'currentColor'
-  };
-  var ANIMATION_BASE = {
-    attributeType: 'XML',
-    repeatCount: 'indefinite',
-    dur: '2s'
-  };
-  var RING = {
-    tag: 'path',
-    attributes: _objectSpread({}, FILL, {
-      d: 'M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z'
-    })
-  };
-
-  var OPACITY_ANIMATE = _objectSpread({}, ANIMATION_BASE, {
-    attributeName: 'opacity'
-  });
-
-  var DOT = {
-    tag: 'circle',
-    attributes: _objectSpread({}, FILL, {
-      cx: '256',
-      cy: '364',
-      r: '28'
-    }),
-    children: [{
-      tag: 'animate',
-      attributes: _objectSpread({}, ANIMATION_BASE, {
-        attributeName: 'r',
-        values: '28;14;28;28;14;28;'
-      })
-    }, {
-      tag: 'animate',
-      attributes: _objectSpread({}, OPACITY_ANIMATE, {
-        values: '1;0;1;1;0;1;'
-      })
-    }]
-  };
-  var QUESTION = {
-    tag: 'path',
-    attributes: _objectSpread({}, FILL, {
-      opacity: '1',
-      d: 'M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z'
-    }),
-    children: [{
-      tag: 'animate',
-      attributes: _objectSpread({}, OPACITY_ANIMATE, {
-        values: '1;0;0;0;0;1;'
-      })
-    }]
-  };
-  var EXCLAMATION = {
-    tag: 'path',
-    attributes: _objectSpread({}, FILL, {
-      opacity: '0',
-      d: 'M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z'
-    }),
-    children: [{
-      tag: 'animate',
-      attributes: _objectSpread({}, OPACITY_ANIMATE, {
-        values: '0;0;1;1;0;0;'
-      })
-    }]
-  };
-
-  var styles$2 = namespace.styles;
-  function asFoundIcon(icon) {
-    var width = icon[0];
-    var height = icon[1];
-
-    var _icon$slice = icon.slice(4),
-        _icon$slice2 = _slicedToArray$1(_icon$slice, 1),
-        vectorData = _icon$slice2[0];
-
-    var element = null;
-
-    if (Array.isArray(vectorData)) {
-      element = {
-        tag: 'g',
-        attributes: {
-          class: "".concat(config.familyPrefix, "-").concat(DUOTONE_CLASSES.GROUP)
-        },
-        children: [{
-          tag: 'path',
-          attributes: {
-            class: "".concat(config.familyPrefix, "-").concat(DUOTONE_CLASSES.SECONDARY),
-            fill: 'currentColor',
-            d: vectorData[0]
-          }
-        }, {
-          tag: 'path',
-          attributes: {
-            class: "".concat(config.familyPrefix, "-").concat(DUOTONE_CLASSES.PRIMARY),
-            fill: 'currentColor',
-            d: vectorData[1]
-          }
-        }]
-      };
-    } else {
-      element = {
-        tag: 'path',
-        attributes: {
-          fill: 'currentColor',
-          d: vectorData
-        }
-      };
-    }
-
-    return {
-      found: true,
-      width: width,
-      height: height,
-      icon: element
-    };
-  }
-
-  var styles$3 = namespace.styles;
-
-  var baseStyles = "svg:not(:root).svg-inline--fa {\n  overflow: visible;\n}\n\n.svg-inline--fa {\n  display: inline-block;\n  font-size: inherit;\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n}\n.svg-inline--fa.fa-lg {\n  vertical-align: -0.225em;\n}\n.svg-inline--fa.fa-w-1 {\n  width: 0.0625em;\n}\n.svg-inline--fa.fa-w-2 {\n  width: 0.125em;\n}\n.svg-inline--fa.fa-w-3 {\n  width: 0.1875em;\n}\n.svg-inline--fa.fa-w-4 {\n  width: 0.25em;\n}\n.svg-inline--fa.fa-w-5 {\n  width: 0.3125em;\n}\n.svg-inline--fa.fa-w-6 {\n  width: 0.375em;\n}\n.svg-inline--fa.fa-w-7 {\n  width: 0.4375em;\n}\n.svg-inline--fa.fa-w-8 {\n  width: 0.5em;\n}\n.svg-inline--fa.fa-w-9 {\n  width: 0.5625em;\n}\n.svg-inline--fa.fa-w-10 {\n  width: 0.625em;\n}\n.svg-inline--fa.fa-w-11 {\n  width: 0.6875em;\n}\n.svg-inline--fa.fa-w-12 {\n  width: 0.75em;\n}\n.svg-inline--fa.fa-w-13 {\n  width: 0.8125em;\n}\n.svg-inline--fa.fa-w-14 {\n  width: 0.875em;\n}\n.svg-inline--fa.fa-w-15 {\n  width: 0.9375em;\n}\n.svg-inline--fa.fa-w-16 {\n  width: 1em;\n}\n.svg-inline--fa.fa-w-17 {\n  width: 1.0625em;\n}\n.svg-inline--fa.fa-w-18 {\n  width: 1.125em;\n}\n.svg-inline--fa.fa-w-19 {\n  width: 1.1875em;\n}\n.svg-inline--fa.fa-w-20 {\n  width: 1.25em;\n}\n.svg-inline--fa.fa-pull-left {\n  margin-right: 0.3em;\n  width: auto;\n}\n.svg-inline--fa.fa-pull-right {\n  margin-left: 0.3em;\n  width: auto;\n}\n.svg-inline--fa.fa-border {\n  height: 1.5em;\n}\n.svg-inline--fa.fa-li {\n  width: 2em;\n}\n.svg-inline--fa.fa-fw {\n  width: 1.25em;\n}\n\n.fa-layers svg.svg-inline--fa {\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.fa-layers {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  text-align: center;\n  vertical-align: -0.125em;\n  width: 1em;\n}\n.fa-layers svg.svg-inline--fa {\n  -webkit-transform-origin: center center;\n          transform-origin: center center;\n}\n\n.fa-layers-counter, .fa-layers-text {\n  display: inline-block;\n  position: absolute;\n  text-align: center;\n}\n\n.fa-layers-text {\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-transform-origin: center center;\n          transform-origin: center center;\n}\n\n.fa-layers-counter {\n  background-color: #ff253a;\n  border-radius: 1em;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  color: #fff;\n  height: 1.5em;\n  line-height: 1;\n  max-width: 5em;\n  min-width: 1.5em;\n  overflow: hidden;\n  padding: 0.25em;\n  right: 0;\n  text-overflow: ellipsis;\n  top: 0;\n  -webkit-transform: scale(0.25);\n          transform: scale(0.25);\n  -webkit-transform-origin: top right;\n          transform-origin: top right;\n}\n\n.fa-layers-bottom-right {\n  bottom: 0;\n  right: 0;\n  top: auto;\n  -webkit-transform: scale(0.25);\n          transform: scale(0.25);\n  -webkit-transform-origin: bottom right;\n          transform-origin: bottom right;\n}\n\n.fa-layers-bottom-left {\n  bottom: 0;\n  left: 0;\n  right: auto;\n  top: auto;\n  -webkit-transform: scale(0.25);\n          transform: scale(0.25);\n  -webkit-transform-origin: bottom left;\n          transform-origin: bottom left;\n}\n\n.fa-layers-top-right {\n  right: 0;\n  top: 0;\n  -webkit-transform: scale(0.25);\n          transform: scale(0.25);\n  -webkit-transform-origin: top right;\n          transform-origin: top right;\n}\n\n.fa-layers-top-left {\n  left: 0;\n  right: auto;\n  top: 0;\n  -webkit-transform: scale(0.25);\n          transform: scale(0.25);\n  -webkit-transform-origin: top left;\n          transform-origin: top left;\n}\n\n.fa-lg {\n  font-size: 1.3333333333em;\n  line-height: 0.75em;\n  vertical-align: -0.0667em;\n}\n\n.fa-xs {\n  font-size: 0.75em;\n}\n\n.fa-sm {\n  font-size: 0.875em;\n}\n\n.fa-1x {\n  font-size: 1em;\n}\n\n.fa-2x {\n  font-size: 2em;\n}\n\n.fa-3x {\n  font-size: 3em;\n}\n\n.fa-4x {\n  font-size: 4em;\n}\n\n.fa-5x {\n  font-size: 5em;\n}\n\n.fa-6x {\n  font-size: 6em;\n}\n\n.fa-7x {\n  font-size: 7em;\n}\n\n.fa-8x {\n  font-size: 8em;\n}\n\n.fa-9x {\n  font-size: 9em;\n}\n\n.fa-10x {\n  font-size: 10em;\n}\n\n.fa-fw {\n  text-align: center;\n  width: 1.25em;\n}\n\n.fa-ul {\n  list-style-type: none;\n  margin-left: 2.5em;\n  padding-left: 0;\n}\n.fa-ul > li {\n  position: relative;\n}\n\n.fa-li {\n  left: -2em;\n  position: absolute;\n  text-align: center;\n  width: 2em;\n  line-height: inherit;\n}\n\n.fa-border {\n  border: solid 0.08em #eee;\n  border-radius: 0.1em;\n  padding: 0.2em 0.25em 0.15em;\n}\n\n.fa-pull-left {\n  float: left;\n}\n\n.fa-pull-right {\n  float: right;\n}\n\n.fa.fa-pull-left,\n.fas.fa-pull-left,\n.far.fa-pull-left,\n.fal.fa-pull-left,\n.fab.fa-pull-left {\n  margin-right: 0.3em;\n}\n.fa.fa-pull-right,\n.fas.fa-pull-right,\n.far.fa-pull-right,\n.fal.fa-pull-right,\n.fab.fa-pull-right {\n  margin-left: 0.3em;\n}\n\n.fa-spin {\n  -webkit-animation: fa-spin 2s infinite linear;\n          animation: fa-spin 2s infinite linear;\n}\n\n.fa-pulse {\n  -webkit-animation: fa-spin 1s infinite steps(8);\n          animation: fa-spin 1s infinite steps(8);\n}\n\n@-webkit-keyframes fa-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n\n@keyframes fa-spin {\n  0% {\n    -webkit-transform: rotate(0deg);\n            transform: rotate(0deg);\n  }\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.fa-rotate-90 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\";\n  -webkit-transform: rotate(90deg);\n          transform: rotate(90deg);\n}\n\n.fa-rotate-180 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)\";\n  -webkit-transform: rotate(180deg);\n          transform: rotate(180deg);\n}\n\n.fa-rotate-270 {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)\";\n  -webkit-transform: rotate(270deg);\n          transform: rotate(270deg);\n}\n\n.fa-flip-horizontal {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)\";\n  -webkit-transform: scale(-1, 1);\n          transform: scale(-1, 1);\n}\n\n.fa-flip-vertical {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\";\n  -webkit-transform: scale(1, -1);\n          transform: scale(1, -1);\n}\n\n.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {\n  -ms-filter: \"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)\";\n  -webkit-transform: scale(-1, -1);\n          transform: scale(-1, -1);\n}\n\n:root .fa-rotate-90,\n:root .fa-rotate-180,\n:root .fa-rotate-270,\n:root .fa-flip-horizontal,\n:root .fa-flip-vertical,\n:root .fa-flip-both {\n  -webkit-filter: none;\n          filter: none;\n}\n\n.fa-stack {\n  display: inline-block;\n  height: 2em;\n  position: relative;\n  width: 2.5em;\n}\n\n.fa-stack-1x,\n.fa-stack-2x {\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.svg-inline--fa.fa-stack-1x {\n  height: 1em;\n  width: 1.25em;\n}\n.svg-inline--fa.fa-stack-2x {\n  height: 2em;\n  width: 2.5em;\n}\n\n.fa-inverse {\n  color: #fff;\n}\n\n.sr-only {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.sr-only-focusable:active, .sr-only-focusable:focus {\n  clip: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  position: static;\n  width: auto;\n}\n\n.svg-inline--fa .fa-primary {\n  fill: var(--fa-primary-color, currentColor);\n  opacity: 1;\n  opacity: var(--fa-primary-opacity, 1);\n}\n\n.svg-inline--fa .fa-secondary {\n  fill: var(--fa-secondary-color, currentColor);\n  opacity: 0.4;\n  opacity: var(--fa-secondary-opacity, 0.4);\n}\n\n.svg-inline--fa.fa-swap-opacity .fa-primary {\n  opacity: 0.4;\n  opacity: var(--fa-secondary-opacity, 0.4);\n}\n\n.svg-inline--fa.fa-swap-opacity .fa-secondary {\n  opacity: 1;\n  opacity: var(--fa-primary-opacity, 1);\n}\n\n.svg-inline--fa mask .fa-primary,\n.svg-inline--fa mask .fa-secondary {\n  fill: black;\n}\n\n.fad.fa-inverse {\n  color: #fff;\n}";
-
-  function css () {
-    var dfp = DEFAULT_FAMILY_PREFIX;
-    var drc = DEFAULT_REPLACEMENT_CLASS;
-    var fp = config.familyPrefix;
-    var rc = config.replacementClass;
-    var s = baseStyles;
-
-    if (fp !== dfp || rc !== drc) {
-      var dPatt = new RegExp("\\.".concat(dfp, "\\-"), 'g');
-      var customPropPatt = new RegExp("\\--".concat(dfp, "\\-"), 'g');
-      var rPatt = new RegExp("\\.".concat(drc), 'g');
-      s = s.replace(dPatt, ".".concat(fp, "-")).replace(customPropPatt, "--".concat(fp, "-")).replace(rPatt, ".".concat(rc));
-    }
-
-    return s;
-  }
-
-  var Library =
-  /*#__PURE__*/
-  function () {
-    function Library() {
-      _classCallCheck$1(this, Library);
-
-      this.definitions = {};
-    }
-
-    _createClass(Library, [{
-      key: "add",
-      value: function add() {
-        var _this = this;
-
-        for (var _len = arguments.length, definitions = new Array(_len), _key = 0; _key < _len; _key++) {
-          definitions[_key] = arguments[_key];
-        }
-
-        var additions = definitions.reduce(this._pullDefinitions, {});
-        Object.keys(additions).forEach(function (key) {
-          _this.definitions[key] = _objectSpread({}, _this.definitions[key] || {}, additions[key]);
-          defineIcons(key, additions[key]);
-          build();
-        });
-      }
-    }, {
-      key: "reset",
-      value: function reset() {
-        this.definitions = {};
-      }
-    }, {
-      key: "_pullDefinitions",
-      value: function _pullDefinitions(additions, definition) {
-        var normalized = definition.prefix && definition.iconName && definition.icon ? {
-          0: definition
-        } : definition;
-        Object.keys(normalized).map(function (key) {
-          var _normalized$key = normalized[key],
-              prefix = _normalized$key.prefix,
-              iconName = _normalized$key.iconName,
-              icon = _normalized$key.icon;
-          if (!additions[prefix]) additions[prefix] = {};
-          additions[prefix][iconName] = icon;
-        });
-        return additions;
-      }
-    }]);
-
-    return Library;
-  }();
-
-  function ensureCss() {
-    if (config.autoAddCss && !_cssInserted) {
-      insertCss(css());
-
-      _cssInserted = true;
-    }
-  }
-
-  function apiObject(val, abstractCreator) {
-    Object.defineProperty(val, 'abstract', {
-      get: abstractCreator
-    });
-    Object.defineProperty(val, 'html', {
-      get: function get() {
-        return val.abstract.map(function (a) {
-          return toHtml(a);
-        });
-      }
-    });
-    Object.defineProperty(val, 'node', {
-      get: function get() {
-        if (!IS_DOM) return;
-        var container = DOCUMENT.createElement('div');
-        container.innerHTML = val.html;
-        return container.children;
-      }
-    });
-    return val;
-  }
-
-  function findIconDefinition(iconLookup) {
-    var _iconLookup$prefix = iconLookup.prefix,
-        prefix = _iconLookup$prefix === void 0 ? 'fa' : _iconLookup$prefix,
-        iconName = iconLookup.iconName;
-    if (!iconName) return;
-    return iconFromMapping(library.definitions, prefix, iconName) || iconFromMapping(namespace.styles, prefix, iconName);
-  }
-
-  function resolveIcons(next) {
-    return function (maybeIconDefinition) {
-      var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var iconDefinition = (maybeIconDefinition || {}).icon ? maybeIconDefinition : findIconDefinition(maybeIconDefinition || {});
-      var mask = params.mask;
-
-      if (mask) {
-        mask = (mask || {}).icon ? mask : findIconDefinition(mask || {});
-      }
-
-      return next(iconDefinition, _objectSpread({}, params, {
-        mask: mask
-      }));
-    };
-  }
-
-  var library = new Library();
-  var _cssInserted = false;
-  var parse = {
-    transform: function transform(transformString) {
-      return parseTransformString(transformString);
-    }
-  };
-  var icon = resolveIcons(function (iconDefinition) {
-    var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var _params$transform = params.transform,
-        transform = _params$transform === void 0 ? meaninglessTransform : _params$transform,
-        _params$symbol = params.symbol,
-        symbol = _params$symbol === void 0 ? false : _params$symbol,
-        _params$mask = params.mask,
-        mask = _params$mask === void 0 ? null : _params$mask,
-        _params$maskId = params.maskId,
-        maskId = _params$maskId === void 0 ? null : _params$maskId,
-        _params$title = params.title,
-        title = _params$title === void 0 ? null : _params$title,
-        _params$titleId = params.titleId,
-        titleId = _params$titleId === void 0 ? null : _params$titleId,
-        _params$classes = params.classes,
-        classes = _params$classes === void 0 ? [] : _params$classes,
-        _params$attributes = params.attributes,
-        attributes = _params$attributes === void 0 ? {} : _params$attributes,
-        _params$styles = params.styles,
-        styles = _params$styles === void 0 ? {} : _params$styles;
-    if (!iconDefinition) return;
-    var prefix = iconDefinition.prefix,
-        iconName = iconDefinition.iconName,
-        icon = iconDefinition.icon;
-    return apiObject(_objectSpread({
-      type: 'icon'
-    }, iconDefinition), function () {
-      ensureCss();
-
-      if (config.autoA11y) {
-        if (title) {
-          attributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(titleId || nextUniqueId());
-        } else {
-          attributes['aria-hidden'] = 'true';
-          attributes['focusable'] = 'false';
-        }
-      }
-
-      return makeInlineSvgAbstract({
-        icons: {
-          main: asFoundIcon(icon),
-          mask: mask ? asFoundIcon(mask.icon) : {
-            found: false,
-            width: null,
-            height: null,
-            icon: {}
-          }
-        },
-        prefix: prefix,
-        iconName: iconName,
-        transform: _objectSpread({}, meaninglessTransform, transform),
-        symbol: symbol,
-        title: title,
-        maskId: maskId,
-        titleId: titleId,
-        extra: {
-          attributes: attributes,
-          styles: styles,
-          classes: classes
-        }
-      });
-    });
-  });
-
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
-  }
-
-  function _defineProperty$2(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  function ownKeys$1(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2$1(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys$1(Object(source), true).forEach(function (key) {
-          _defineProperty$2(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys$1(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-
-    return target;
-  }
-
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-
-    var key, i;
-
-    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;
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
-  }
-
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-      return arr2;
-    }
-  }
-
-  function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
-  }
-
-  // Get CSS class list from a props object
-  function classList(props) {
-    var _classes;
-
-    var spin = props.spin,
-        pulse = props.pulse,
-        fixedWidth = props.fixedWidth,
-        inverse = props.inverse,
-        border = props.border,
-        listItem = props.listItem,
-        flip = props.flip,
-        size = props.size,
-        rotation = props.rotation,
-        pull = props.pull; // map of CSS class names to properties
-
-    var classes = (_classes = {
-      'fa-spin': spin,
-      'fa-pulse': pulse,
-      'fa-fw': fixedWidth,
-      'fa-inverse': inverse,
-      'fa-border': border,
-      'fa-li': listItem,
-      'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
-      'fa-flip-vertical': flip === 'vertical' || flip === 'both'
-    }, _defineProperty$2(_classes, "fa-".concat(size), typeof size !== 'undefined' && size !== null), _defineProperty$2(_classes, "fa-rotate-".concat(rotation), typeof rotation !== 'undefined' && rotation !== null && rotation !== 0), _defineProperty$2(_classes, "fa-pull-".concat(pull), typeof pull !== 'undefined' && pull !== null), _defineProperty$2(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object
-    // return an array of the keys where the value for the key is not null
-
-    return Object.keys(classes).map(function (key) {
-      return classes[key] ? key : null;
-    }).filter(function (key) {
-      return key;
-    });
-  }
-
-  // Camelize taken from humps
-  // humps is copyright © 2012+ Dom Christie
-  // Released under the MIT license.
-  // Performant way to determine if object coerces to a number
-  function _isNumerical(obj) {
-    obj = obj - 0; // eslint-disable-next-line no-self-compare
-
-    return obj === obj;
-  }
-
-  function camelize(string) {
-    if (_isNumerical(string)) {
-      return string;
-    } // eslint-disable-next-line no-useless-escape
-
-
-    string = string.replace(/[\-_\s]+(.)?/g, function (match, chr) {
-      return chr ? chr.toUpperCase() : '';
-    }); // Ensure 1st char is always lowercase
-
-    return string.substr(0, 1).toLowerCase() + string.substr(1);
-  }
-
-  function capitalize(val) {
-    return val.charAt(0).toUpperCase() + val.slice(1);
-  }
-
-  function styleToObject(style) {
-    return style.split(';').map(function (s) {
-      return s.trim();
-    }).filter(function (s) {
-      return s;
-    }).reduce(function (acc, pair) {
-      var i = pair.indexOf(':');
-      var prop = camelize(pair.slice(0, i));
-      var value = pair.slice(i + 1).trim();
-      prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;
-      return acc;
-    }, {});
-  }
-
-  function convert(createElement, element) {
-    var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-    if (typeof element === 'string') {
-      return element;
-    }
-
-    var children = (element.children || []).map(function (child) {
-      return convert(createElement, child);
-    });
-    /* eslint-disable dot-notation */
-
-    var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
-      var val = element.attributes[key];
-
-      switch (key) {
-        case 'class':
-          acc.attrs['className'] = val;
-          delete element.attributes['class'];
-          break;
-
-        case 'style':
-          acc.attrs['style'] = styleToObject(val);
-          break;
-
-        default:
-          if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
-            acc.attrs[key.toLowerCase()] = val;
-          } else {
-            acc.attrs[camelize(key)] = val;
-          }
-
-      }
-
-      return acc;
-    }, {
-      attrs: {}
-    });
-
-    var _extraProps$style = extraProps.style,
-        existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
-        remaining = _objectWithoutProperties(extraProps, ["style"]);
-
-    mixins.attrs['style'] = _objectSpread2$1({}, mixins.attrs['style'], {}, existingStyle);
-    /* eslint-enable */
-
-    return createElement.apply(void 0, [element.tag, _objectSpread2$1({}, mixins.attrs, {}, remaining)].concat(_toConsumableArray(children)));
-  }
-
-  var PRODUCTION$1 = false;
-
-  try {
-    PRODUCTION$1 = process.env.NODE_ENV === 'production';
-  } catch (e) {}
-
-  function log () {
-    if (!PRODUCTION$1 && console && typeof console.error === 'function') {
-      var _console;
-
-      (_console = console).error.apply(_console, arguments);
-    }
-  }
-
-  function normalizeIconArgs(icon) {
-    // this has everything that it needs to be rendered which means it was probably imported
-    // directly from an icon svg package
-    if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
-      return icon;
-    }
-
-    if (parse.icon) {
-      return parse.icon(icon);
-    } // if the icon is null, there's nothing to do
-
-
-    if (icon === null) {
-      return null;
-    } // if the icon is an object and has a prefix and an icon name, return it
-
-
-    if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {
-      return icon;
-    } // if it's an array with length of two
-
-
-    if (Array.isArray(icon) && icon.length === 2) {
-      // use the first item as prefix, second as icon name
-      return {
-        prefix: icon[0],
-        iconName: icon[1]
-      };
-    } // if it's a string, use it as the icon name
-
-
-    if (typeof icon === 'string') {
-      return {
-        prefix: 'fas',
-        iconName: icon
-      };
-    }
-  }
-
-  // creates an object with a key of key
-  // and a value of value
-  // if certain conditions are met
-  function objectWithKey(key, value) {
-    // if the value is a non-empty array
-    // or it's not an array but it is truthy
-    // then create the object with the key and the value
-    // if not, return an empty array
-    return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty$2({}, key, value) : {};
-  }
-
-  function FontAwesomeIcon(_ref) {
-    var forwardedRef = _ref.forwardedRef,
-        props = _objectWithoutProperties(_ref, ["forwardedRef"]);
-
-    var iconArgs = props.icon,
-        maskArgs = props.mask,
-        symbol = props.symbol,
-        className = props.className,
-        title = props.title,
-        titleId = props.titleId;
-    var iconLookup = normalizeIconArgs(iconArgs);
-    var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));
-    var transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
-    var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-    var renderedIcon = icon(iconLookup, _objectSpread2$1({}, classes, {}, transform, {}, mask, {
-      symbol: symbol,
-      title: title,
-      titleId: titleId
-    }));
-
-    if (!renderedIcon) {
-      log('Could not find icon', iconLookup);
-      return null;
-    }
-
-    var abstract = renderedIcon.abstract;
-    var extraProps = {
-      ref: forwardedRef
-    };
-    Object.keys(props).forEach(function (key) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
-        extraProps[key] = props[key];
-      }
-    });
-    return convertCurry(abstract[0], extraProps);
-  }
-  FontAwesomeIcon.displayName = 'FontAwesomeIcon';
-  FontAwesomeIcon.propTypes = {
-    border: PropTypes.bool,
-    className: PropTypes.string,
-    mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    fixedWidth: PropTypes.bool,
-    inverse: PropTypes.bool,
-    flip: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-    icon: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
-    listItem: PropTypes.bool,
-    pull: PropTypes.oneOf(['right', 'left']),
-    pulse: PropTypes.bool,
-    rotation: PropTypes.oneOf([0, 90, 180, 270]),
-    size: PropTypes.oneOf(['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
-    spin: PropTypes.bool,
-    symbol: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    title: PropTypes.string,
-    transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    swapOpacity: PropTypes.bool
-  };
-  FontAwesomeIcon.defaultProps = {
-    border: false,
-    className: '',
-    mask: null,
-    fixedWidth: false,
-    inverse: false,
-    flip: null,
-    icon: null,
-    listItem: false,
-    pull: null,
-    pulse: false,
-    rotation: null,
-    size: null,
-    spin: false,
-    symbol: false,
-    title: '',
-    transform: null,
-    swapOpacity: false
-  };
-  var convertCurry = convert.bind(null, React__default.createElement);
-
-  /*!
-   * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
-   * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-   */
-  var faTrashAlt = {
-    prefix: 'fas',
-    iconName: 'trash-alt',
-    icon: [448, 512, [], "f2ed", "M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"]
-  };
-
   /** @format */
 
   numeral.register('locale', 'en-ZA', {
@@ -1822,90 +241,45 @@
   var interestCategories = {
     SHOES: 'SHOES',
     BAGS: 'BAGS',
-    ACCESSORIES: 'ACCESSORIES'
+    ACCESSORIES: 'ACCESSORIES',
+    WATCHES: 'WATCHES'
   };
 
-  function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"]);
-
-    _templateObject = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var OuterContainer = styled__default.div(_templateObject(), function (props) {
-    return props.theme.colors.borderColor;
-  });
-
-  function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  padding-left: 3rem;\n  padding-right: 3rem;\n  display: flex;\n  align-items: center;\n  min-height: 70px;\n  height: 70px;\n  cursor: pointer;\n  outline: none;\n"]);
-
-    _templateObject$1 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var ToggleButton = styled__default.div(_templateObject$1());
-
-  function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  flex-grow: 1;\n  color: ", ";\n"]);
-
-    _templateObject$2 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var Title = styled__default.div(_templateObject$2(), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.colors.primary || '';
-  });
-
-  function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"]);
-
-    _templateObject$3 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
-  var BodyContent = styled__default.div(_templateObject$3(), function (props) {
-    return props.theme.marginPaddings[5];
-  });
-
-  function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-top: 0;\n  border-style: none;\n  border-bottom: 1px solid ", ";\n"]);
-
-    _templateObject$4 = function _templateObject() {
-      return data;
-    };
+  var genders = {
+    FEMALE: 0,
+    MALE: 1,
+    UNISEX: 2
+  };
 
-    return data;
-  }
-  var BodyDivider = styled__default.hr(_templateObject$4(), function (props) {
-    return props.theme.marginPaddings[4];
-  }, function (props) {
-    return props.theme.colors.borderColor;
+  var Trash = (function (props) {
+    return React__default.createElement("svg", _extends({
+      version: "1.1",
+      id: "svg-trash",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 15.1 17.5",
+      xmlSpace: "preserve"
+    }, props), React__default.createElement("g", null, React__default.createElement("path", {
+      d: "M2.4,17.5c-0.4-0.1-0.5-0.4-0.5-0.8c0-4,0-7.9,0-11.9c0-0.1,0-0.1,0-0.2c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7,0-1,0 C0.3,4.6,0,4.3,0,4C0,3.3,0,2.7,0,2c0.1-0.8,0.8-1.5,1.7-1.6c1.3,0,2.6,0,3.9,0c0.1,0,0.2,0,0.3-0.1C6,0.1,6.2,0,6.5,0 c0.7,0,1.4,0,2.1,0c0.3,0,0.5,0.1,0.6,0.3c0.1,0.1,0.1,0.1,0.2,0.1c1.3,0,2.5,0,3.8,0c0.8,0,1.4,0.4,1.7,1.1C15,1.7,15,2,15,2.3 c0,0.5,0,1,0,1.6c0,0.5-0.3,0.7-0.7,0.7c-0.4,0-0.7,0-1.1,0c0,0,0,0-0.1,0c0,0.1,0,0.1,0,0.2c0,4,0,7.9,0,11.9 c0,0.4-0.1,0.7-0.5,0.8C9.2,17.5,5.8,17.5,2.4,17.5z M11.8,16.2c0-3.9,0-7.7,0-11.6c-2.9,0-5.7,0-8.6,0c0,3.9,0,7.7,0,11.6 C6.1,16.2,9,16.2,11.8,16.2z M1.3,3.2c4.1,0,8.3,0,12.4,0c0-0.3,0-0.6,0-0.9c0-0.5-0.2-0.6-0.6-0.6c-3.7,0-7.4,0-11.1,0 c-0.1,0-0.2,0-0.3,0C1.5,1.8,1.3,2,1.3,2.2C1.3,2.5,1.3,2.9,1.3,3.2z"
+    }), React__default.createElement("path", {
+      d: "M5.1,9.8c0-1.1,0-2.3,0-3.4c0-0.4,0.2-0.7,0.5-0.7C6,5.6,6.3,5.8,6.4,6.1c0,0.1,0,0.2,0,0.3c0,2.2,0,4.5,0,6.7 c0,0.1,0,0.3-0.1,0.4C6.2,13.8,6,14,5.7,13.9c-0.3,0-0.5-0.2-0.6-0.5c0-0.1,0-0.2,0-0.3C5.1,12,5.1,10.9,5.1,9.8z"
+    }), React__default.createElement("path", {
+      d: "M9.9,9.8c0,1.1,0,2.3,0,3.4c0,0.3-0.2,0.6-0.5,0.7c-0.4,0.1-0.8-0.1-0.9-0.5c0-0.1,0-0.2,0-0.2c0-2.3,0-4.5,0-6.8 c0-0.4,0.2-0.7,0.5-0.7c0.3-0.1,0.7,0.1,0.7,0.5c0,0.1,0,0.2,0,0.3C9.9,7.6,9.9,8.7,9.9,9.8z"
+    })));
   });
 
-  function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n"]);
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
 
-    _templateObject$5 = function _templateObject() {
+    _templateObject = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Body = styled__default.div(_templateObject$5(), function (props) {
-    return props.theme.marginPaddings[6];
-  }, function (props) {
-    return props.theme.marginPaddings[6];
-  });
+  var SvgWrapper = styled__default.span(_templateObject());
 
   var theme = {
     breakpoints: ['40em', '52em', '64em'],
@@ -1921,7 +295,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -1935,280 +311,62 @@
     });
   });
 
-  var SimpleAccordion = function SimpleAccordion(_ref) {
-    var identifier = _ref.identifier,
-        wrapperClass = _ref.wrapperClass,
-        containerClass = _ref.containerClass,
-        title = _ref.title,
-        _onClick = _ref.onClick,
-        openIndicator = _ref.openIndicator;
-    var OpenIndicator = openIndicator;
-    return React__default.createElement("div", {
-      className: wrapperClass
-    }, React__default.createElement(OuterContainer, {
-      "data-qe-id": identifier,
-      className: containerClass
-    }, React__default.createElement(ToggleButton, {
-      className: "".concat(containerClass, "__toggle-button"),
-      "data-qe-id": "".concat(identifier, "-toggle-button"),
-      onClick: function onClick(e) {
-        e.preventDefault();
-
-        _onClick();
-      },
-      role: "button"
-    }, React__default.createElement(Title, {
-      className: "".concat(containerClass, "__toggle-button__title")
-    }, title), React__default.createElement("div", {
-      className: "".concat(containerClass, "__toggle-button__indicator")
-    }, React__default.createElement(OpenIndicator, null)))));
-  };
-
-  SimpleAccordion.defaultProps = {
-    identifier: '',
-    wrapperClass: '',
-    containerClass: 'luxity-accordion',
-    title: '',
-    onClick: function onClick() {
-      return null;
-    },
-    openIndicator: function openIndicator() {
-      return React__default.createElement(React__default.Fragment, null, "Open");
-    }
-  };
-  themed(SimpleAccordion);
-
-  var runAfter = function runAfter(fn, duration) {
-    setTimeout(fn, duration);
-  };
-
-  var getInitHeight = function getInitHeight(defaultHeight) {
-    if (defaultHeight === 'auto') return 'auto';
-    return 0;
-  };
-  /**
-   * An Expand and Collapsible container which show a Title by default
-   * and then expands to show the content/children when it is triggered
-   */
-
-
-  var Accordion = function Accordion(_ref) {
-    var wrapperClass = _ref.wrapperClass,
-        containerClass = _ref.containerClass,
-        title = _ref.title,
-        closeIndicator = _ref.closeIndicator,
-        openIndicator = _ref.openIndicator,
-        itemKey = _ref.itemKey,
-        childRenderer = _ref.children,
-        duration = _ref.duration,
-        onAnimationStart = _ref.onAnimationStart,
-        onAnimationEnd = _ref.onAnimationEnd,
-        onClose = _ref.onClose,
-        onOpen = _ref.onOpen,
-        onToggle = _ref.onToggle,
-        identifier = _ref.identifier,
-        defaultHeight = _ref.defaultHeight;
-
-    var _useState = React.useState(getInitHeight(defaultHeight)),
-        _useState2 = _slicedToArray(_useState, 2),
-        height = _useState2[0],
-        setHeight = _useState2[1];
-
-    var isClosed = height === 0 || false;
-
-    var toggle = function toggle() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight(isClosed ? 'auto' : 0); // triggers animation with duration
-
-      runAfter(callback, duration);
-
-      if (isClosed) {
-        runAfter(onOpen, duration);
-      } else {
-        runAfter(onClose, duration);
-      }
-
-      runAfter(onToggle, duration);
-    };
-
-    var close = function close() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight(0); // triggers animation with duration
-
-      runAfter(callback, duration);
-      runAfter(onClose, duration);
-    };
-
-    var open = function open() {
-      var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return null;
-      };
-      setHeight('auto'); // triggers animation with duration
-
-      runAfter(callback, duration);
-      runAfter(onOpen, duration);
-    };
-
-    var CloseIndicator = closeIndicator;
-    var OpenIndicator = openIndicator;
-    return React__default.createElement("div", {
-      className: wrapperClass
-    }, React__default.createElement(OuterContainer, {
-      "data-qe-id": identifier,
-      className: containerClass
-    }, React__default.createElement(ToggleButton, {
-      className: "".concat(containerClass, "__toggle-button"),
-      "data-qe-id": "".concat(identifier, "-toggle-button"),
-      onKeyPress: function onKeyPress() {
-        return null;
-      },
-      onClick: function onClick(e) {
-        e.preventDefault();
-        toggle();
-      },
-      role: "button",
-      tabIndex: itemKey + 1
-    }, React__default.createElement(Title, {
-      className: "".concat(containerClass, "__toggle-button__title")
-    }, title), React__default.createElement("div", {
-      className: "".concat(containerClass, "__toggle-button__indicator")
-    }, isClosed ? React__default.createElement(OpenIndicator, null) : React__default.createElement(CloseIndicator, null))), React__default.createElement(AnimateHeight, {
-      height: height,
-      duration: duration,
-      onAnimationStart: onAnimationStart,
-      onAnimationEnd: onAnimationEnd
-    }, React__default.createElement(Body, {
-      className: "".concat(containerClass, "__body")
-    }, title ? React__default.createElement(BodyDivider, null) : React__default.createElement(React__default.Fragment, null), React__default.createElement(BodyContent, {
-      className: "".concat(containerClass, "__body__content")
-    }, typeof childRenderer === 'function' ? childRenderer(close, open, toggle) : childRenderer)))));
-  };
-
-  Accordion.defaultProps = {
-    identifier: '',
-    wrapperClass: '',
-    containerClass: 'luxity-accordion',
-    title: '',
-    itemKey: 0,
-    children: null,
-    duration: 500,
-    defaultHeight: '0',
-    onAnimationStart: function onAnimationStart() {
-      return null;
-    },
-    onAnimationEnd: function onAnimationEnd() {
-      return null;
-    },
-    onClose: function onClose() {
-      return null;
-    },
-    onOpen: function onOpen() {
-      return null;
-    },
-    onToggle: function onToggle() {
-      return null;
-    },
-    closeIndicator: function closeIndicator() {
-      return React__default.createElement(React__default.Fragment, null, "Close");
-    },
-    openIndicator: function openIndicator() {
-      return React__default.createElement(React__default.Fragment, null, "Open");
-    }
-  };
-  var LuxityAccordion = themed(Accordion);
-
-  var genders = {
-    FEMALE: 0,
-    MALE: 1,
-    UNISEX: 2
-  };
-
-  var SVG = function SVG(props) {
-    return React__default.createElement("svg", _extends({
-      id: "svg-eye",
-      width: "19",
-      height: "12",
-      viewBox: "0 0 19 12",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), React__default.createElement("g", null, React__default.createElement("path", {
-      fill: "currentColor",
-      d: "M9.42598 12C4.30213 12 0.287344 6.5878 0.132076 6.36599C-0.023192 6.14418 -0.023192 5.85582 0.132076 5.63401C0.287344 5.4122 4.30213 0 9.42598 0C14.5498 0 18.5646 5.4122 18.7199 5.63401C18.8751 5.85582 18.8751 6.14418 18.7199 6.36599C18.5424 6.5878 14.5276 12 9.42598 12ZM1.41858 6.01109C2.39455 7.18669 5.65518 10.78 9.42598 10.78C13.1968 10.78 16.4574 7.18669 17.4334 6.01109C16.4574 4.83549 13.1968 1.24214 9.42598 1.24214C5.633 1.24214 2.37237 4.83549 1.41858 6.01109Z"
-    }), React__default.createElement("path", {
-      fill: "currentColor",
-      d: "M9.4276 9.73753C7.36476 9.73753 5.70117 8.07395 5.70117 6.0111C5.70117 3.94825 7.36476 2.28467 9.4276 2.28467C11.4905 2.28467 13.154 3.94825 13.154 6.0111C13.154 8.07395 11.4683 9.73753 9.4276 9.73753ZM9.4276 3.52681C8.05237 3.52681 6.94332 4.63587 6.94332 6.0111C6.94332 7.38633 8.05237 8.49539 9.4276 8.49539C10.8028 8.49539 11.9119 7.38633 11.9119 6.0111C11.9119 4.63587 10.7807 3.52681 9.4276 3.52681Z"
-    })));
-  };
-
-  function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"]);
+  function _templateObject$1() {
+    var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n  }\n"]);
 
-    _templateObject$6 = function _templateObject() {
+    _templateObject$1 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SvgWrapper = styled__default.span(_templateObject$6());
+  var IconWrapper = styled__default.div(_templateObject$1(), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  });
 
-  function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n0% {\n  max-height: ", ";\n  max-width: ", ";\n}\n30% {\n  margin-bottom: 3rem;\n  max-height: ", ";\n  max-width: ", ";\n  opacity: 1;\n}\n100% {\n  margin-bottom: 0;\n  max-height: ", ";\n  max-width: ", ";\n  opacity: 0;\n}"]);
+  var media = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px'
+  };
 
-    _templateObject2 = function _templateObject2() {
+  function _templateObject4() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"]);
+
+    _templateObject4 = function _templateObject4() {
       return data;
     };
 
     return data;
   }
 
-  function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  from {\n    margin-bottom: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    margin-bottom: 3rem;\n    max-height: ", ";\n    opacity: 1;\n  }\n"]);
+  function _templateObject3() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n"]);
 
-    _templateObject$7 = function _templateObject() {
+    _templateObject3 = function _templateObject3() {
       return data;
     };
 
     return data;
   }
-  var AnimationMaxHeight = '1000px';
-  var AnimationMinHeight = '0px';
-  var AnimationMaxWidth = '1000px';
-  var AnimationTweenHeight = '100px'; // help smooth out the animation by adding in-between keyframes
-
-  var AnimationMinWidth = '2px';
-  var fadeOutAnimationDuration = 1000; // time used for the Interest Item FadeOut animation
-
-  var fadeInAnimationDurationMs = '500ms'; // on item mount - we just have a quick fadeIn animation
-
-  var fadeOutAnimationDelayMs = '500ms'; // time it takes for the accordion component to collapse
 
-  var fadeOutAnimationDurationMs = "".concat(fadeOutAnimationDuration, "ms"); // time used for the Interest Item FadeOut animation
-
-  var InterestItemFadeIn = styled.keyframes(_templateObject$7(), AnimationMaxHeight);
-  var InterestItemFadeOut = styled.keyframes(_templateObject2(), AnimationMaxHeight, AnimationMaxWidth, AnimationTweenHeight, AnimationMinWidth, AnimationMinHeight, AnimationMinWidth);
-
-  function _templateObject$8() {
-    var data = _taggedTemplateLiteral(["\n      font-size: ", ";\n      font-weight: bold;\n      letter-spacing: -0.5px;\n    "]);
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"]);
 
-    _templateObject$8 = function _templateObject() {
+    _templateObject2 = function _templateObject2() {
       return data;
     };
 
     return data;
   }
-  var styles$4 = {
-    text: {
-      prominent: styled.css(_templateObject$8(), theme.fontSizes[2])
-    }
-  };
 
-  function _templateObject$9() {
-    var data = _taggedTemplateLiteral(["\n  .interests__item {\n    &.interests__item--hiding {\n      .luxity-accordion {\n        animation: ", " ease-in-out\n          ", " ", " forwards;\n      }\n    }\n\n    .luxity-accordion {\n      animation: ", " ease-in-out ", "\n        forwards;\n      overflow: hidden;\n\n      .luxity-accordion__toggle-button__title {\n        color: ", ";\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 50%;\n      }\n      .luxity-accordion__body__content {\n      }\n    }\n\n    .item__header {\n      ", ";\n      margin-bottom: 0;\n      padding-bottom: ", ";\n\n      .item__header__svg {\n        display: flex;\n        flex-grow: 1;\n        justify-content: flex-end;\n\n        .svg--brand {\n          padding: 0;\n        }\n      }\n    }\n\n    .interests__item__summary {\n      border-style: none;\n\n      .item__summary__item {\n        .item__summary__item__left {\n          font-weight: bold;\n        }\n        .item__summary__item__right {\n          font-weight: normal;\n          text-align: left;\n        }\n      }\n      :last-child {\n        margin-bottom: 0;\n      }\n    }\n\n    .title-component {\n      display: flex;\n      justify-content: space-between;\n\n      .title-component__title {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n        width: 70%;\n      }\n\n      .trash-icon {\n        margin-right: 15px;\n      }\n    }\n  }\n"]);
+  function _templateObject$2() {
+    var data = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"]);
 
-    _templateObject$9 = function _templateObject() {
+    _templateObject$2 = function _templateObject() {
       return data;
     };
 
@@ -2218,8 +376,13 @@
       FEMALE = genders.FEMALE,
       UNISEX = genders.UNISEX;
 
-  var EyeIcon = function EyeIcon() {
-    return React__default.createElement(SvgWrapper, null, React__default.createElement(SVG, null));
+  var TrashIcon = function TrashIcon(_ref) {
+    var onClick = _ref.onClick,
+        id = _ref.id;
+    return React__default.createElement(IconWrapper, {
+      onClick: onClick,
+      id: id
+    }, React__default.createElement(SvgWrapper, null, React__default.createElement(Trash, null)));
   };
 
   var InterestItem = /*#__PURE__*/function (_React$Component) {
@@ -2235,9 +398,6 @@
       _this = _super.call(this, props);
 
       _defineProperty(_assertThisInitialized(_this), "deleteInterestItem", function () {
-        var accordionClose = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-          return null;
-        };
         var id = _this.props.data.id;
 
         _this.setState({
@@ -2255,7 +415,7 @@
             })
           });
 
-          accordionClose();
+          _this.props.onDeleted(_this.props.data);
         }, function () {
           return _this.setState({
             delete: _objectSpread2({}, request)
@@ -2263,14 +423,6 @@
         });
       });
 
-      _defineProperty(_assertThisInitialized(_this), "checkDeleted", function () {
-        if (_this.state.delete.success === true) {
-          setTimeout(function () {
-            _this.props.onDeleted(_this.props.data);
-          }, fadeOutAnimationDuration);
-        }
-      });
-
       _defineProperty(_assertThisInitialized(_this), "getGender", function (gender) {
         switch (gender) {
           case MALE:
@@ -2285,84 +437,57 @@
         }
       });
 
-      _defineProperty(_assertThisInitialized(_this), "titleComponent", function (title) {
-        return React__default.createElement("div", {
-          className: "title-component"
-        }, React__default.createElement("div", {
-          className: "title-component__title"
-        }, title), React__default.createElement("div", {
-          className: "trash-icon"
-        }, React__default.createElement(FontAwesomeIcon, {
-          "data-qe-id": "interest-".concat(_this.props.data.id, "-delete-button"),
-          icon: faTrashAlt,
-          size: "1x",
-          onClick: function onClick(event) {
-            event.stopPropagation();
-
-            if (!_this.state.delete.fetching) {
-              _this.deleteInterestItem();
-            }
-          }
-        })));
-      });
-
       _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _data$min_shoe_size, _data$max_shoe_size, _data$max_shoe_size2, _data$max_shoe_size2$;
+        var _data$min_shoe_size, _data$max_shoe_size;
 
         var data = _this.props.data;
         var success = _this.state.delete.success;
-        return React__default.createElement("div", {
-          className: _this.props.className
-        }, React__default.createElement(LuxityAccordion, {
-          identifier: "interest-".concat(data.id),
-          wrapperClass: "interests__item ".concat(success && 'interests__item--hiding' || ''),
-          closeIndicator: EyeIcon,
-          openIndicator: EyeIcon,
-          onAnimationEnd: _this.checkDeleted,
-          title: _this.titleComponent(data.title)
-        }, React__default.createElement("div", {
-          className: "interests__item__summary item__summary"
+        return React__default.createElement(InterestItemContainer, {
+          id: "interests__item--".concat(data.id),
+          className: "".concat(success && 'interests__item--hiding')
+        }, React__default.createElement(InterestItemContent, {
+          className: "interest-item__container ".concat(_this.props.className)
         }, React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Category"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, data.category_type))), React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Brands"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, data.luxity_brands.length > 0 ? data.luxity_brands.map(function (brand) {
-          return brand.name;
-        }).join(', ') : 'All'))), React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Gender"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, _this.getGender(data.gender)))), data.category_type === interestCategories.SHOES && React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Shoe Size Range"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, "".concat((data === null || data === void 0 ? void 0 : (_data$min_shoe_size = data.min_shoe_size) === null || _data$min_shoe_size === void 0 ? void 0 : _data$min_shoe_size.size) || 'No Min Size Set', " - "), "".concat((data === null || data === void 0 ? void 0 : (_data$max_shoe_size = data.max_shoe_size) === null || _data$max_shoe_size === void 0 ? void 0 : _data$max_shoe_size.size) || 'No Max Size Set', " "), "(".concat((data === null || data === void 0 ? void 0 : (_data$max_shoe_size2 = data.max_shoe_size) === null || _data$max_shoe_size2 === void 0 ? void 0 : (_data$max_shoe_size2$ = _data$max_shoe_size2.type) === null || _data$max_shoe_size2$ === void 0 ? void 0 : _data$max_shoe_size2$.toUpperCase()) || 'Shoe Size Type Set', ")")))), React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Price Range"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, fC(data.min_price), "\xA0-\xA0", fC(data.max_price)))), React__default.createElement("div", {
-          className: "item__summary__item"
-        }, React__default.createElement("div", {
-          className: "item__summary__item__left"
-        }, "Style"), React__default.createElement("div", {
-          className: "item__summary__item__right"
-        }, React__default.createElement("div", null, data.luxity_styles.length > 0 ? data.luxity_styles.map(function (style) {
-          return style.name;
-        }).join(', ') : 'All'))))));
+          className: "interest-item__container_heading"
+        }, React__default.createElement(InterestItemTitle, null, "Category:"), React__default.createElement("div", {
+          id: "interest-item-".concat(data.id, "__category"),
+          className: "list-items"
+        }, data.category_type)), React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, React__default.createElement(InterestItemTitle, null, "Brands:"), React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_brands.length > 0 ? data.luxity_brands.map(function (brand) {
+          return React__default.createElement("span", {
+            key: data.id
+          }, brand.name);
+        }) : 'All')), React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, React__default.createElement(InterestItemTitle, null, "Department:"), React__default.createElement("div", {
+          className: "list-items"
+        }, _this.getGender(data.gender))), React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, React__default.createElement(InterestItemTitle, null, "Price:"), React__default.createElement("div", {
+          className: "list-items"
+        }, fC(data.min_price), "\xA0-\xA0", fC(data.max_price))), React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, React__default.createElement(InterestItemTitle, null, "Style:"), React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_styles.length > 0 ? data.luxity_styles.map(function (style) {
+          return React__default.createElement("span", {
+            key: data.id
+          }, style.name);
+        }) : 'All')), React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, data.category_type === interestCategories.SHOES ? React__default.createElement("div", null, React__default.createElement(InterestItemTitle, null, "Shoe Size:"), React__default.createElement("div", {
+          className: "list-items"
+        }, "".concat((data === null || data === void 0 ? void 0 : (_data$min_shoe_size = data.min_shoe_size) === null || _data$min_shoe_size === void 0 ? void 0 : _data$min_shoe_size.size) || '', " - "), "".concat((data === null || data === void 0 ? void 0 : (_data$max_shoe_size = data.max_shoe_size) === null || _data$max_shoe_size === void 0 ? void 0 : _data$max_shoe_size.size) || '', " "))) : React__default.createElement(SheoSizeContentDiv, null, "-"))), React__default.createElement(TrashIcon, {
+          id: "interest-".concat(data.id, "-delete-button"),
+          onClick: function onClick() {
+            if (!_this.state.delete.fetching) {
+              _this.deleteInterestItem();
+            }
+          }
+        }));
       });
 
       _this.state = {
@@ -2374,12 +499,21 @@
     return InterestItem;
   }(React__default.Component);
 
-  var StyledInterestItem = styled__default(InterestItem)(_templateObject$9(), fadeOutAnimationDurationMs, fadeOutAnimationDelayMs, InterestItemFadeOut, fadeInAnimationDurationMs, InterestItemFadeIn, function (props) {
-    return props.theme.colors.base;
-  }, styles$4.text.prominent, function (props) {
-    return props.theme.marginPaddings[6];
-  });
-  var ThemedInterestItem = themed(StyledInterestItem);
+  var SheoSizeContentDiv = styled__default.div(_templateObject$2(), media.xs);
+  var InterestItemTitle = styled__default.div(_templateObject2(), media.xs);
+  var InterestItemContainer = styled__default.div(_templateObject3());
+  var InterestItemContent = styled__default.div(_templateObject4(), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.darkerGray;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, media.xs, media.xs, function (props) {
+    return props.theme.marginPaddings[0];
+  }, media.xs);
+  var ThemedInterestItem = themed(InterestItem);
   /**
    * The Interest Item view shows the selected interest configuration,
    * and gives user control to delete it.