@helpdice/ui 1.0.1 → 1.0.2

package/dist/search-bar/index.js

@@ -0,0 +1,1176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$2 = require('react');
+var Fuse = require('fuse.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default$1 = /*#__PURE__*/_interopDefaultLegacy(React$2);
+var Fuse__default = /*#__PURE__*/_interopDefaultLegacy(Fuse);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+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.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var index = {};
+
+var React$1 = React__default$1["default"];
+
+function _interopDefaultLegacy$1 (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy$1(React$1);
+
+/*
+Based on Glamor's sheet
+https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
+*/ 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;
+}
+var isProd = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production";
+var isString = function(o) {
+    return Object.prototype.toString.call(o) === "[object String]";
+};
+var StyleSheet = /*#__PURE__*/ function() {
+    function StyleSheet(param) {
+        var ref = param === void 0 ? {} : param, _name = ref.name, name = _name === void 0 ? "stylesheet" : _name, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? isProd : _optimizeForSpeed;
+        invariant$1(isString(name), "`name` must be a string");
+        this._name = name;
+        this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}";
+        invariant$1(typeof optimizeForSpeed === "boolean", "`optimizeForSpeed` must be a boolean");
+        this._optimizeForSpeed = optimizeForSpeed;
+        this._serverSheet = undefined;
+        this._tags = [];
+        this._injected = false;
+        this._rulesCount = 0;
+        var node = typeof window !== "undefined" && document.querySelector('meta[property="csp-nonce"]');
+        this._nonce = node ? node.getAttribute("content") : null;
+    }
+    var _proto = StyleSheet.prototype;
+    _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {
+        invariant$1(typeof bool === "boolean", "`setOptimizeForSpeed` accepts a boolean");
+        invariant$1(this._rulesCount === 0, "optimizeForSpeed cannot be when rules have already been inserted");
+        this.flush();
+        this._optimizeForSpeed = bool;
+        this.inject();
+    };
+    _proto.isOptimizeForSpeed = function isOptimizeForSpeed() {
+        return this._optimizeForSpeed;
+    };
+    _proto.inject = function inject() {
+        var _this = this;
+        invariant$1(!this._injected, "sheet already injected");
+        this._injected = true;
+        if (typeof window !== "undefined" && this._optimizeForSpeed) {
+            this._tags[0] = this.makeStyleTag(this._name);
+            this._optimizeForSpeed = "insertRule" in this.getSheet();
+            if (!this._optimizeForSpeed) {
+                if (!isProd) {
+                    console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.");
+                }
+                this.flush();
+                this._injected = true;
+            }
+            return;
+        }
+        this._serverSheet = {
+            cssRules: [],
+            insertRule: function(rule, index) {
+                if (typeof index === "number") {
+                    _this._serverSheet.cssRules[index] = {
+                        cssText: rule
+                    };
+                } else {
+                    _this._serverSheet.cssRules.push({
+                        cssText: rule
+                    });
+                }
+                return index;
+            },
+            deleteRule: function(index) {
+                _this._serverSheet.cssRules[index] = null;
+            }
+        };
+    };
+    _proto.getSheetForTag = function getSheetForTag(tag) {
+        if (tag.sheet) {
+            return tag.sheet;
+        }
+        // this weirdness brought to you by firefox
+        for(var i = 0; i < document.styleSheets.length; i++){
+            if (document.styleSheets[i].ownerNode === tag) {
+                return document.styleSheets[i];
+            }
+        }
+    };
+    _proto.getSheet = function getSheet() {
+        return this.getSheetForTag(this._tags[this._tags.length - 1]);
+    };
+    _proto.insertRule = function insertRule(rule, index) {
+        invariant$1(isString(rule), "`insertRule` accepts only strings");
+        if (typeof window === "undefined") {
+            if (typeof index !== "number") {
+                index = this._serverSheet.cssRules.length;
+            }
+            this._serverSheet.insertRule(rule, index);
+            return this._rulesCount++;
+        }
+        if (this._optimizeForSpeed) {
+            var sheet = this.getSheet();
+            if (typeof index !== "number") {
+                index = sheet.cssRules.length;
+            }
+            // this weirdness for perf, and chrome's weird bug
+            // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
+            try {
+                sheet.insertRule(rule, index);
+            } catch (error) {
+                if (!isProd) {
+                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+                }
+                return -1;
+            }
+        } else {
+            var insertionPoint = this._tags[index];
+            this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint));
+        }
+        return this._rulesCount++;
+    };
+    _proto.replaceRule = function replaceRule(index, rule) {
+        if (this._optimizeForSpeed || typeof window === "undefined") {
+            var sheet = typeof window !== "undefined" ? this.getSheet() : this._serverSheet;
+            if (!rule.trim()) {
+                rule = this._deletedRulePlaceholder;
+            }
+            if (!sheet.cssRules[index]) {
+                // @TBD Should we throw an error?
+                return index;
+            }
+            sheet.deleteRule(index);
+            try {
+                sheet.insertRule(rule, index);
+            } catch (error) {
+                if (!isProd) {
+                    console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info");
+                }
+                // In order to preserve the indices we insert a deleteRulePlaceholder
+                sheet.insertRule(this._deletedRulePlaceholder, index);
+            }
+        } else {
+            var tag = this._tags[index];
+            invariant$1(tag, "old rule at index `" + index + "` not found");
+            tag.textContent = rule;
+        }
+        return index;
+    };
+    _proto.deleteRule = function deleteRule(index) {
+        if (typeof window === "undefined") {
+            this._serverSheet.deleteRule(index);
+            return;
+        }
+        if (this._optimizeForSpeed) {
+            this.replaceRule(index, "");
+        } else {
+            var tag = this._tags[index];
+            invariant$1(tag, "rule at index `" + index + "` not found");
+            tag.parentNode.removeChild(tag);
+            this._tags[index] = null;
+        }
+    };
+    _proto.flush = function flush() {
+        this._injected = false;
+        this._rulesCount = 0;
+        if (typeof window !== "undefined") {
+            this._tags.forEach(function(tag) {
+                return tag && tag.parentNode.removeChild(tag);
+            });
+            this._tags = [];
+        } else {
+            // simpler on server
+            this._serverSheet.cssRules = [];
+        }
+    };
+    _proto.cssRules = function cssRules() {
+        var _this = this;
+        if (typeof window === "undefined") {
+            return this._serverSheet.cssRules;
+        }
+        return this._tags.reduce(function(rules, tag) {
+            if (tag) {
+                rules = rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules, function(rule) {
+                    return rule.cssText === _this._deletedRulePlaceholder ? null : rule;
+                }));
+            } else {
+                rules.push(null);
+            }
+            return rules;
+        }, []);
+    };
+    _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) {
+        if (cssString) {
+            invariant$1(isString(cssString), "makeStyleTag accepts only strings as second parameter");
+        }
+        var tag = document.createElement("style");
+        if (this._nonce) tag.setAttribute("nonce", this._nonce);
+        tag.type = "text/css";
+        tag.setAttribute("data-" + name, "");
+        if (cssString) {
+            tag.appendChild(document.createTextNode(cssString));
+        }
+        var head = document.head || document.getElementsByTagName("head")[0];
+        if (relativeToTag) {
+            head.insertBefore(tag, relativeToTag);
+        } else {
+            head.appendChild(tag);
+        }
+        return tag;
+    };
+    _createClass(StyleSheet, [
+        {
+            key: "length",
+            get: function get() {
+                return this._rulesCount;
+            }
+        }
+    ]);
+    return StyleSheet;
+}();
+function invariant$1(condition, message) {
+    if (!condition) {
+        throw new Error("StyleSheet: " + message + ".");
+    }
+}
+
+function hash(str) {
+    var _$hash = 5381, i = str.length;
+    while(i){
+        _$hash = _$hash * 33 ^ str.charCodeAt(--i);
+    }
+    /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+   * integers. Since we want the results to be always positive, convert the
+   * signed int to an unsigned by doing an unsigned bitshift. */ return _$hash >>> 0;
+}
+var stringHash = hash;
+
+var sanitize = function(rule) {
+    return rule.replace(/\/style/gi, "\\/style");
+};
+var cache = {};
+/**
+ * computeId
+ *
+ * Compute and memoize a jsx id from a basedId and optionally props.
+ */ function computeId(baseId, props) {
+    if (!props) {
+        return "jsx-" + baseId;
+    }
+    var propsToString = String(props);
+    var key = baseId + propsToString;
+    if (!cache[key]) {
+        cache[key] = "jsx-" + stringHash(baseId + "-" + propsToString);
+    }
+    return cache[key];
+}
+/**
+ * computeSelector
+ *
+ * Compute and memoize dynamic selectors.
+ */ function computeSelector(id, css) {
+    var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g;
+    // Sanitize SSR-ed CSS.
+    // Client side code doesn't need to be sanitized since we use
+    // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).
+    if (typeof window === "undefined") {
+        css = sanitize(css);
+    }
+    var idcss = id + css;
+    if (!cache[idcss]) {
+        cache[idcss] = css.replace(selectoPlaceholderRegexp, id);
+    }
+    return cache[idcss];
+}
+
+function mapRulesToStyle(cssRules, options) {
+    if (options === void 0) options = {};
+    return cssRules.map(function(args) {
+        var id = args[0];
+        var css = args[1];
+        return /*#__PURE__*/ React__default["default"].createElement("style", {
+            id: "__" + id,
+            // Avoid warnings upon render with a key
+            key: "__" + id,
+            nonce: options.nonce ? options.nonce : undefined,
+            dangerouslySetInnerHTML: {
+                __html: css
+            }
+        });
+    });
+}
+var StyleSheetRegistry = /*#__PURE__*/ function() {
+    function StyleSheetRegistry(param) {
+        var ref = param === void 0 ? {} : param, _styleSheet = ref.styleSheet, styleSheet = _styleSheet === void 0 ? null : _styleSheet, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? false : _optimizeForSpeed;
+        this._sheet = styleSheet || new StyleSheet({
+            name: "styled-jsx",
+            optimizeForSpeed: optimizeForSpeed
+        });
+        this._sheet.inject();
+        if (styleSheet && typeof optimizeForSpeed === "boolean") {
+            this._sheet.setOptimizeForSpeed(optimizeForSpeed);
+            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+        }
+        this._fromServer = undefined;
+        this._indices = {};
+        this._instancesCounts = {};
+    }
+    var _proto = StyleSheetRegistry.prototype;
+    _proto.add = function add(props) {
+        var _this = this;
+        if (undefined === this._optimizeForSpeed) {
+            this._optimizeForSpeed = Array.isArray(props.children);
+            this._sheet.setOptimizeForSpeed(this._optimizeForSpeed);
+            this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
+        }
+        if (typeof window !== "undefined" && !this._fromServer) {
+            this._fromServer = this.selectFromServer();
+            this._instancesCounts = Object.keys(this._fromServer).reduce(function(acc, tagName) {
+                acc[tagName] = 0;
+                return acc;
+            }, {});
+        }
+        var ref = this.getIdAndRules(props), styleId = ref.styleId, rules = ref.rules;
+        // Deduping: just increase the instances count.
+        if (styleId in this._instancesCounts) {
+            this._instancesCounts[styleId] += 1;
+            return;
+        }
+        var indices = rules.map(function(rule) {
+            return _this._sheet.insertRule(rule);
+        })// Filter out invalid rules
+        .filter(function(index) {
+            return index !== -1;
+        });
+        this._indices[styleId] = indices;
+        this._instancesCounts[styleId] = 1;
+    };
+    _proto.remove = function remove(props) {
+        var _this = this;
+        var styleId = this.getIdAndRules(props).styleId;
+        invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found");
+        this._instancesCounts[styleId] -= 1;
+        if (this._instancesCounts[styleId] < 1) {
+            var tagFromServer = this._fromServer && this._fromServer[styleId];
+            if (tagFromServer) {
+                tagFromServer.parentNode.removeChild(tagFromServer);
+                delete this._fromServer[styleId];
+            } else {
+                this._indices[styleId].forEach(function(index) {
+                    return _this._sheet.deleteRule(index);
+                });
+                delete this._indices[styleId];
+            }
+            delete this._instancesCounts[styleId];
+        }
+    };
+    _proto.update = function update(props, nextProps) {
+        this.add(nextProps);
+        this.remove(props);
+    };
+    _proto.flush = function flush() {
+        this._sheet.flush();
+        this._sheet.inject();
+        this._fromServer = undefined;
+        this._indices = {};
+        this._instancesCounts = {};
+    };
+    _proto.cssRules = function cssRules() {
+        var _this = this;
+        var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function(styleId) {
+            return [
+                styleId,
+                _this._fromServer[styleId]
+            ];
+        }) : [];
+        var cssRules = this._sheet.cssRules();
+        return fromServer.concat(Object.keys(this._indices).map(function(styleId) {
+            return [
+                styleId,
+                _this._indices[styleId].map(function(index) {
+                    return cssRules[index].cssText;
+                }).join(_this._optimizeForSpeed ? "" : "\n")
+            ];
+        })// filter out empty rules
+        .filter(function(rule) {
+            return Boolean(rule[1]);
+        }));
+    };
+    _proto.styles = function styles(options) {
+        return mapRulesToStyle(this.cssRules(), options);
+    };
+    _proto.getIdAndRules = function getIdAndRules(props) {
+        var css = props.children, dynamic = props.dynamic, id = props.id;
+        if (dynamic) {
+            var styleId = computeId(id, dynamic);
+            return {
+                styleId: styleId,
+                rules: Array.isArray(css) ? css.map(function(rule) {
+                    return computeSelector(styleId, rule);
+                }) : [
+                    computeSelector(styleId, css)
+                ]
+            };
+        }
+        return {
+            styleId: computeId(id),
+            rules: Array.isArray(css) ? css : [
+                css
+            ]
+        };
+    };
+    /**
+   * selectFromServer
+   *
+   * Collects style tags from the document with id __jsx-XXX
+   */ _proto.selectFromServer = function selectFromServer() {
+        var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));
+        return elements.reduce(function(acc, element) {
+            var id = element.id.slice(2);
+            acc[id] = element;
+            return acc;
+        }, {});
+    };
+    return StyleSheetRegistry;
+}();
+function invariant(condition, message) {
+    if (!condition) {
+        throw new Error("StyleSheetRegistry: " + message + ".");
+    }
+}
+var StyleSheetContext = /*#__PURE__*/ React$1.createContext(null);
+StyleSheetContext.displayName = "StyleSheetContext";
+function createStyleRegistry() {
+    return new StyleSheetRegistry();
+}
+function StyleRegistry(param) {
+    var configuredRegistry = param.registry, children = param.children;
+    var rootRegistry = React$1.useContext(StyleSheetContext);
+    var ref = React$1.useState(function() {
+        return rootRegistry || configuredRegistry || createStyleRegistry();
+    }), registry = ref[0];
+    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
+        value: registry
+    }, children);
+}
+function useStyleRegistry() {
+    return React$1.useContext(StyleSheetContext);
+}
+
+// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
+// https://github.com/reactwg/react-18/discussions/110
+var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
+var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
+function JSXStyle(props) {
+    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
+    // If `registry` does not exist, we do nothing here.
+    if (!registry) {
+        return null;
+    }
+    if (typeof window === "undefined") {
+        registry.add(props);
+        return null;
+    }
+    useInsertionEffect(function() {
+        registry.add(props);
+        return function() {
+            registry.remove(props);
+        };
+    // props.children can be string[], will be striped since id is identical
+    }, [
+        props.id,
+        String(props.dynamic)
+    ]);
+    return null;
+}
+JSXStyle.dynamic = function(info) {
+    return info.map(function(tagInfo) {
+        var baseId = tagInfo[0];
+        var props = tagInfo[1];
+        return computeId(baseId, props);
+    }).join(" ");
+};
+
+index.StyleRegistry = StyleRegistry;
+index.createStyleRegistry = createStyleRegistry;
+index.style = JSXStyle;
+index.useStyleRegistry = useStyleRegistry;
+
+var style = index.style;
+
+var _JSXStyle = style;
+
+var defaultTheme = {
+  height: '44px',
+  border: '1px solid #dfe1e5',
+  borderRadius: '24px',
+  backgroundColor: 'white',
+  boxShadow: 'rgba(32, 33, 36, 0.28) 0px 1px 6px 0px',
+  hoverBackgroundColor: '#eee',
+  color: '#212121',
+  fontSize: '16px',
+  fontFamily: 'Arial',
+  iconColor: 'grey',
+  lineColor: 'rgb(232, 234, 237)',
+  placeholderColor: 'grey',
+  zIndex: 0,
+  clearIconMargin: '3px 14px 0 0',
+  searchIconMargin: '0 0 0 16px'
+};
+var defaultFuseOptions = {
+  shouldSort: true,
+  threshold: 0.6,
+  location: 0,
+  distance: 100,
+  minMatchCharLength: 1,
+  keys: ['name']
+};
+
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = arguments;
+    var later = function later() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    if (immediate && !timeout) func.apply(context, args);
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+var _templateObject$3;
+var SearchIcon = function SearchIcon(_ref) {
+  var showIcon = _ref.showIcon;
+  if (!showIcon) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledSearchIcon, {
+    className: "search-icon",
+    width: 20,
+    height: 20,
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  }));
+};
+var StyledSearchIcon = styled__default["default"].svg(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  margin: ", ";\n  fill: ", ";\n"])), function (props) {
+  return props.theme.searchIconMargin;
+}, function (props) {
+  return props.theme.iconColor;
+});
+
+var _templateObject$2;
+function Results(_ref) {
+  var _ref$results = _ref.results,
+    results = _ref$results === void 0 ? [] : _ref$results,
+    onClick = _ref.onClick,
+    setSearchString = _ref.setSearchString,
+    showIcon = _ref.showIcon,
+    maxResults = _ref.maxResults,
+    _ref$resultStringKeyN = _ref.resultStringKeyName,
+    resultStringKeyName = _ref$resultStringKeyN === void 0 ? 'name' : _ref$resultStringKeyN,
+    highlightedItem = _ref.highlightedItem,
+    setHighlightedItem = _ref.setHighlightedItem,
+    formatResult = _ref.formatResult,
+    _ref$showNoResultsFla = _ref.showNoResultsFlag,
+    showNoResultsFlag = _ref$showNoResultsFla === void 0 ? true : _ref$showNoResultsFla,
+    _ref$showNoResultsTex = _ref.showNoResultsText,
+    showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex;
+  var formatResultWithKey = formatResult ? formatResult : function (item) {
+    return item[resultStringKeyName];
+  };
+  var handleClick = function handleClick(result) {
+    onClick(result);
+    setSearchString(result[resultStringKeyName]);
+  };
+  var handleMouseDown = function handleMouseDown(_ref2) {
+    var event = _ref2.event,
+      result = _ref2.result;
+    if (event.button === 0) {
+      event.preventDefault();
+      handleClick(result);
+    }
+  };
+  if (showNoResultsFlag) {
+    return /*#__PURE__*/React.createElement(ResultsWrapper, null, /*#__PURE__*/React.createElement("li", {
+      "data-test": "no-results-message"
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      showIcon: showIcon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ellipsis"
+    }, showNoResultsText)));
+  }
+  if ((results === null || results === void 0 ? void 0 : results.length) <= 0 && !showNoResultsFlag) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ResultsWrapper, null, results.slice(0, maxResults).map(function (result, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: highlightedItem === index ? 'selected' : '',
+      onMouseEnter: function onMouseEnter() {
+        return setHighlightedItem({
+          index: index
+        });
+      },
+      "data-test": "result",
+      key: "rsa-result-".concat(result.id),
+      onMouseDown: function onMouseDown(event) {
+        return handleMouseDown({
+          event: event,
+          result: result
+        });
+      },
+      onClick: function onClick() {
+        return handleClick(result);
+      }
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      showIcon: showIcon
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "ellipsis",
+      title: result[resultStringKeyName]
+    }, formatResultWithKey(result)));
+  }));
+}
+var ResultsWrapper = function ResultsWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement(StyledResults, null, /*#__PURE__*/React.createElement("div", {
+    className: "line"
+  }), /*#__PURE__*/React.createElement("ul", null, children));
+};
+var StyledResults = styled__default["default"].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  > div.line {\n    border-top-color: ", ";\n    border-top-style: solid;\n    border-top-width: 1px;\n\n    margin-bottom: 0px;\n    margin-left: 14px;\n    margin-right: 20px;\n    margin-top: 0px;\n\n    padding-bottom: 4px;\n  }\n\n  > ul {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px 0 16px 0;\n    max-height: ", ";\n\n    > li {\n      display: flex;\n      align-items: center;\n      padding: 4px 0 4px 0;\n\n      > div {\n        margin-left: 13px;\n      }\n    }\n  }\n\n  .ellipsis {\n    text-align: left;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .selected {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.theme.lineColor;
+}, function (props) {
+  return props.theme.maxHeight;
+}, function (props) {
+  return props.theme.hoverBackgroundColor;
+});
+
+var _templateObject$1;
+var ClearIcon = function ClearIcon(_ref) {
+  var showClear = _ref.showClear,
+    setSearchString = _ref.setSearchString,
+    searchString = _ref.searchString,
+    setFocus = _ref.setFocus,
+    onClear = _ref.onClear;
+  var handleClearSearchString = function handleClearSearchString() {
+    setSearchString({
+      target: {
+        value: ''
+      }
+    });
+    setFocus();
+    onClear();
+  };
+  if (!showClear) {
+    return null;
+  }
+  if (!searchString || (searchString === null || searchString === void 0 ? void 0 : searchString.length) <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledClearIcon, {
+    className: "clear-icon",
+    onClick: handleClearSearchString
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: 20,
+    height: 20,
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.58 12 5 17.58 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })));
+};
+var StyledClearIcon = styled__default["default"].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  margin: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (props) {
+  return props.theme.clearIconMargin;
+}, function (props) {
+  return props.theme.iconColor;
+});
+
+var _templateObject;
+function SearchInput(_ref) {
+  var searchString = _ref.searchString,
+    setSearchString = _ref.setSearchString,
+    setHighlightedItem = _ref.setHighlightedItem,
+    eraseResults = _ref.eraseResults,
+    autoFocus = _ref.autoFocus,
+    onFocus = _ref.onFocus,
+    onClear = _ref.onClear,
+    placeholder = _ref.placeholder,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    maxLength = _ref.maxLength;
+  var ref = React$2.useRef(null);
+  var manualFocus = true;
+  var setFocus = function setFocus() {
+    manualFocus = false;
+    (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.focus();
+    manualFocus = true;
+  };
+  var handleOnFocus = function handleOnFocus(event) {
+    manualFocus && onFocus(event);
+  };
+  var maxLengthProperty = maxLength ? {
+    maxLength: maxLength
+  } : {};
+  return /*#__PURE__*/React.createElement(StyledSearchInput, null, /*#__PURE__*/React.createElement(SearchIcon, {
+    showIcon: showIcon
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    type: "text",
+    ref: ref,
+    spellCheck: false,
+    value: searchString,
+    onChange: setSearchString,
+    onFocus: handleOnFocus,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    onBlur: function onBlur() {
+      return eraseResults();
+    },
+    onKeyDown: function onKeyDown(event) {
+      return setHighlightedItem({
+        event: event
+      });
+    },
+    "data-test": "search-input"
+  }, maxLengthProperty)), /*#__PURE__*/React.createElement(ClearIcon, {
+    showClear: showClear,
+    setSearchString: setSearchString,
+    searchString: searchString,
+    onClear: onClear,
+    setFocus: setFocus
+  }));
+}
+var StyledSearchInput = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      ::-ms-input-placeholder {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+  return props.theme.height;
+}, function (props) {
+  return props.theme.color;
+}, function (props) {
+  return props.theme.placeholderColor;
+}, function (props) {
+  return props.theme.placeholderColor;
+}, function (props) {
+  return props.theme.placeholderColor;
+});
+
+var DEFAULT_INPUT_DEBOUNCE = 200;
+var MAX_RESULTS = 10;
+function ReactSearchAutocomplete(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$fuseOptions = _ref.fuseOptions,
+    fuseOptions = _ref$fuseOptions === void 0 ? defaultFuseOptions : _ref$fuseOptions,
+    _ref$inputDebounce = _ref.inputDebounce,
+    inputDebounce = _ref$inputDebounce === void 0 ? DEFAULT_INPUT_DEBOUNCE : _ref$inputDebounce,
+    _ref$onSearch = _ref.onSearch,
+    onSearch = _ref$onSearch === void 0 ? function () {} : _ref$onSearch,
+    _ref$onHover = _ref.onHover,
+    onHover = _ref$onHover === void 0 ? function () {} : _ref$onHover,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    _ref$maxResults = _ref.maxResults,
+    maxResults = _ref$maxResults === void 0 ? MAX_RESULTS : _ref$maxResults,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$styling = _ref.styling,
+    styling = _ref$styling === void 0 ? {} : _ref$styling,
+    _ref$resultStringKeyN = _ref.resultStringKeyName,
+    resultStringKeyName = _ref$resultStringKeyN === void 0 ? 'name' : _ref$resultStringKeyN,
+    _ref$inputSearchStrin = _ref.inputSearchString,
+    inputSearchString = _ref$inputSearchStrin === void 0 ? '' : _ref$inputSearchStrin,
+    formatResult = _ref.formatResult,
+    _ref$showNoResults = _ref.showNoResults,
+    showNoResults = _ref$showNoResults === void 0 ? true : _ref$showNoResults,
+    _ref$showNoResultsTex = _ref.showNoResultsText,
+    showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex,
+    _ref$showItemsOnFocus = _ref.showItemsOnFocus,
+    showItemsOnFocus = _ref$showItemsOnFocus === void 0 ? false : _ref$showItemsOnFocus,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? 0 : _ref$maxLength;
+    _ref.className;
+  _objectSpread2(_objectSpread2({}, defaultTheme), styling);
+  var options = _objectSpread2(_objectSpread2({}, defaultFuseOptions), fuseOptions);
+  var fuse = new Fuse__default["default"](items, options);
+  fuse.setCollection(items);
+  var _useState = React$2.useState(inputSearchString),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchString = _useState2[0],
+    setSearchString = _useState2[1];
+  var _useState3 = React$2.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    results = _useState4[0],
+    setResults = _useState4[1];
+  var _useState5 = React$2.useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    highlightedItem = _useState6[0],
+    setHighlightedItem = _useState6[1];
+  var _useState7 = React$2.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSearchComplete = _useState8[0],
+    setIsSearchComplete = _useState8[1];
+  var _useState9 = React$2.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isTyping = _useState10[0],
+    setIsTyping = _useState10[1];
+  var _useState11 = React$2.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showNoResultsFlag = _useState12[0],
+    setShowNoResultsFlag = _useState12[1];
+  var _useState13 = React$2.useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    hasFocus = _useState14[0],
+    setHasFocus = _useState14[1];
+  React$2.useEffect(function () {
+    setSearchString(inputSearchString);
+    var timeoutId = setTimeout(function () {
+      return setResults(fuseResults(inputSearchString));
+    }, 0);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [inputSearchString]);
+  React$2.useEffect(function () {
+    (searchString === null || searchString === void 0 ? void 0 : searchString.length) > 0 && results && (results === null || results === void 0 ? void 0 : results.length) > 0 && setResults(fuseResults(searchString));
+  }, [items]);
+  React$2.useEffect(function () {
+    if (showNoResults && searchString.length > 0 && !isTyping && results.length === 0 && !isSearchComplete) {
+      setShowNoResultsFlag(true);
+    } else {
+      setShowNoResultsFlag(false);
+    }
+  }, [isTyping, showNoResults, isSearchComplete, searchString, results]);
+  React$2.useEffect(function () {
+    if (showItemsOnFocus && results.length === 0 && searchString.length === 0 && hasFocus) {
+      setResults(items.slice(0, maxResults));
+    }
+  }, [showItemsOnFocus, results, searchString, hasFocus]);
+  React$2.useEffect(function () {
+    var handleDocumentClick = function handleDocumentClick() {
+      eraseResults();
+      setHasFocus(false);
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return function () {
+      return document.removeEventListener('click', handleDocumentClick);
+    };
+  }, []);
+  var handleOnFocus = function handleOnFocus(event) {
+    onFocus(event);
+    setHasFocus(true);
+  };
+  var callOnSearch = function callOnSearch(keyword) {
+    var newResults = [];
+    (keyword === null || keyword === void 0 ? void 0 : keyword.length) > 0 && (newResults = fuseResults(keyword));
+    setResults(newResults);
+    onSearch(keyword, newResults);
+    setIsTyping(false);
+  };
+  var handleOnSearch = React__default$1["default"].useCallback(inputDebounce > 0 ? debounce(function (keyword) {
+    return callOnSearch(keyword);
+  }, inputDebounce) : function (keyword) {
+    return callOnSearch(keyword);
+  }, [items]);
+  var handleOnClick = function handleOnClick(result) {
+    eraseResults();
+    onSelect(result);
+    setSearchString(result[resultStringKeyName]);
+    setHighlightedItem(0);
+  };
+  var fuseResults = function fuseResults(keyword) {
+    return fuse.search(keyword, {
+      limit: maxResults
+    }).map(function (result) {
+      return _objectSpread2({}, result.item);
+    }).slice(0, maxResults);
+  };
+  var handleSetSearchString = function handleSetSearchString(_ref2) {
+    var target = _ref2.target;
+    var keyword = target.value;
+    setSearchString(keyword);
+    handleOnSearch(keyword);
+    setIsTyping(true);
+    if (isSearchComplete) {
+      setIsSearchComplete(false);
+    }
+  };
+  var eraseResults = function eraseResults() {
+    setResults([]);
+    setIsSearchComplete(true);
+  };
+  var handleSetHighlightedItem = function handleSetHighlightedItem(_ref3) {
+    var index = _ref3.index,
+      event = _ref3.event;
+    var itemIndex = -1;
+    var setValues = function setValues(index) {
+      setHighlightedItem(index);
+      (results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
+    };
+    if (index !== undefined) {
+      setHighlightedItem(index);
+      (results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
+    } else if (event) {
+      switch (event.key) {
+        case 'Enter':
+          if (results.length > 0 && results[highlightedItem]) {
+            event.preventDefault();
+            onSelect(results[highlightedItem]);
+            setSearchString(results[highlightedItem][resultStringKeyName]);
+            onSearch(results[highlightedItem][resultStringKeyName], results);
+          } else {
+            onSearch(searchString, results);
+          }
+          setHighlightedItem(-1);
+          eraseResults();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          itemIndex = highlightedItem > -1 ? highlightedItem - 1 : results.length - 1;
+          setValues(itemIndex);
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          itemIndex = highlightedItem < results.length - 1 ? highlightedItem + 1 : -1;
+          setValues(itemIndex);
+          break;
+      }
+    }
+  };
+  return /*#__PURE__*/React__default$1["default"].createElement("div", {
+    className: _JSXStyle.dynamic([["3512916558", [function (props) {
+      return parseInt(props.theme.height) + 2 + 'px';
+    }, function (props) {
+      return props.theme.border;
+    }, function (props) {
+      return props.theme.borderRadius;
+    }, function (props) {
+      return props.theme.backgroundColor;
+    }, function (props) {
+      return props.theme.color;
+    }, function (props) {
+      return props.theme.fontSize;
+    }, function (props) {
+      return props.theme.fontFamily;
+    }, function (props) {
+      return props.theme.zIndex;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }]]]) + " " + "search-bar-wrapper"
+  }, /*#__PURE__*/React__default$1["default"].createElement(SearchInput, {
+    searchString: searchString,
+    setSearchString: handleSetSearchString,
+    eraseResults: eraseResults,
+    autoFocus: autoFocus,
+    onFocus: handleOnFocus,
+    onClear: onClear,
+    placeholder: placeholder,
+    showIcon: showIcon,
+    showClear: showClear,
+    setHighlightedItem: handleSetHighlightedItem,
+    maxLength: maxLength
+  }), /*#__PURE__*/React__default$1["default"].createElement(Results, {
+    results: results,
+    onClick: handleOnClick,
+    setSearchString: setSearchString,
+    showIcon: showIcon,
+    maxResults: maxResults,
+    resultStringKeyName: resultStringKeyName,
+    formatResult: formatResult,
+    highlightedItem: highlightedItem,
+    setHighlightedItem: handleSetHighlightedItem,
+    showNoResultsFlag: showNoResultsFlag,
+    showNoResultsText: showNoResultsText
+  }), /*#__PURE__*/React__default$1["default"].createElement(_JSXStyle, {
+    id: "3512916558",
+    dynamic: [function (props) {
+      return parseInt(props.theme.height) + 2 + 'px';
+    }, function (props) {
+      return props.theme.border;
+    }, function (props) {
+      return props.theme.borderRadius;
+    }, function (props) {
+      return props.theme.backgroundColor;
+    }, function (props) {
+      return props.theme.color;
+    }, function (props) {
+      return props.theme.fontSize;
+    }, function (props) {
+      return props.theme.fontFamily;
+    }, function (props) {
+      return props.theme.zIndex;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }]
+  }, ".__jsx-style-dynamic-selector{position:relative;height:".concat(function (props) {
+    return parseInt(props.theme.height) + 2 + 'px';
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;border:").concat(function (props) {
+    return props.theme.border;
+  }, ";border-radius:").concat(function (props) {
+    return props.theme.borderRadius;
+  }, ";background-color:").concat(function (props) {
+    return props.theme.backgroundColor;
+  }, ";color:").concat(function (props) {
+    return props.theme.color;
+  }, ";font-size:").concat(function (props) {
+    return props.theme.fontSize;
+  }, ";font-family:").concat(function (props) {
+    return props.theme.fontFamily;
+  }, ";z-index:").concat(function (props) {
+    return props.theme.zIndex;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:active{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:focus-within{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}")));
+}
+
+exports["default"] = ReactSearchAutocomplete;