@pareto-engineering/design-system 4.0.0-alpha.59 → 4.0.0-alpha.61

package/dist/es/f/common/Debugger/Debugger.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect, useContext } from 'react';
+import { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from "../../../b";
 import { FormikContext } from 'formik';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,9 +20,6 @@ const Debugger = ({
   initialIsOpen
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [isOpen, setIsOpen] = useState(initialIsOpen);
   const toggleDebugger = () => setIsOpen(!isOpen);
   const formikContext = useContext(FormikContext);

package/dist/es/f/common/Description/Description.js

@@ -1,9 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,9 +22,6 @@ const Description = ({
   color
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [, meta] = useField(name);
   const hasError = meta.touched && meta.error;
   if (hasError || description) {

package/dist/es/f/common/InputWrapper/InputWrapper.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -20,20 +20,15 @@ const InputWrapper = ({
   columnSpan,
   desktopColumnSpan
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--column-span': columnSpan || 'var(--columns)',
-      '--column-span-md': desktopColumnSpan || 'var(--columns)'
-    }
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--column-span': columnSpan || 'var(--columns)',
+    '--column-span-md': desktopColumnSpan || 'var(--columns)'
+  }
+}, children);
 InputWrapper.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/common/Label/Label.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -24,22 +24,17 @@ const Label = ({
   columnSpan,
   desktopColumnSpan
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    htmlFor: Wrapper === 'label' ? name : undefined,
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--column-span': columnSpan || 'var(--columns)',
-      '--column-span-md': desktopColumnSpan || 'var(--columns)'
-    }
-    // {...otherProps}
-  }, children, optional && ' (Optional)');
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, {
+  htmlFor: Wrapper === 'label' ? name : undefined,
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--column-span': columnSpan || 'var(--columns)',
+    '--column-span-md': desktopColumnSpan || 'var(--columns)'
+  }
+  // {...otherProps}
+}, children, optional && ' (Optional)');
 Label.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/common/index.js

@@ -1,4 +1,5 @@
 export { Label as FormLabel } from "./Label";
 export { Description as FormDescription } from "./Description";
 export { Debugger as FormDebugger } from "./Debugger";
-export { InputWrapper } from "./InputWrapper";
+export { InputWrapper } from "./InputWrapper";
+export * from "./utils";

package/dist/es/f/common/utils/index.js

@@ -0,0 +1 @@
+export { lookUpInputValueFromFetchedOptions } from "./lookUpInputValueFromFetchedOptions";

package/dist/es/f/common/utils/lookUpInputValueFromFetchedOptions.js

@@ -0,0 +1,20 @@
+import Fuse from 'fuse.js';
+const fuseOptions = {
+  findAllMatches: true,
+  keys: ['label']
+};
+export const lookUpInputValueFromFetchedOptions = ({
+  items,
+  inputValue,
+  setOptions,
+  minLength
+}) => {
+  const fuseSearch = new Fuse(items, fuseOptions);
+  const result = fuseSearch.search(inputValue);
+  if (result.length === 0 && inputValue.length > minLength) {
+    setOptions(prevItems => [...prevItems, {
+      label: `${inputValue} (Create new)`,
+      value: inputValue
+    }]);
+  }
+};

package/dist/es/f/fields/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -31,9 +31,6 @@ const Checkbox = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     type: 'checkbox'

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -9,6 +9,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Choice } from "./common";
 import { FormDescription, FormLabel, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
@@ -35,39 +36,34 @@ const ChoicesInput = ({
   inputSpan,
   desktopInputSpan,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
-  }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
-    className: `x-${color}`,
-    key: choice.value,
-    name: name,
-    id: `${name}-${choice.value}`,
-    multiple: multiple,
-    validate: validate,
-    disabled: disabled
-  }, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  })));
-};
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(FormLabel, {
+  name: name,
+  color: labelColor,
+  optional: optional,
+  columnSpan: labelSpan,
+  desktopColumnSpan: desktopLabelSpan
+  // {...otherProps}
+}, label), /*#__PURE__*/React.createElement(InputWrapper, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style,
+  columnSpan: inputSpan,
+  desktopColumnSpan: desktopInputSpan
+}, /*#__PURE__*/React.createElement("div", {
+  className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
+}, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+  className: `x-${color}`,
+  key: choice.value,
+  name: name,
+  id: `${name}-${choice.value}`,
+  multiple: multiple,
+  validate: validate,
+  disabled: disabled
+}, otherProps, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+  className: "s-1",
+  description: description,
+  name: name
+})));
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/f/fields/EditorInput/EditorInput.js

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import { useFormikContext } from 'formik';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -15,6 +15,7 @@ import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -47,9 +48,6 @@ const EditorInput = ({
   showDebugger
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const formik = useFormikContext();
   const setInitialValue = () => {
     const value = formik.values[name];

package/dist/es/f/fields/LinkInput/LinkInput.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -35,9 +36,6 @@ const LinkInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -1,9 +1,10 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect } from 'react';
+import { useState } from 'react';
 import { useField } from 'formik';
 import { useRelayEnvironment, fetchQuery } from 'react-relay';
 import PropTypes from 'prop-types';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -35,12 +36,11 @@ const QueryCombobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  desktopInputSpan,
+  placeholder,
+  promptCreateNewOption
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [, meta, helpers] = useField({
     name,
     validate
@@ -96,6 +96,7 @@ const QueryCombobox = ({
     style,
     options,
     getOptions,
+    setOptions,
     debounceMs,
     disabled,
     name,
@@ -113,7 +114,9 @@ const QueryCombobox = ({
     labelSpan,
     desktopLabelSpan,
     inputSpan,
-    desktopInputSpan
+    desktopInputSpan,
+    placeholder,
+    promptCreateNewOption
   };
   const Input = multiple ? MultipleCombobox : Combobox;
   return /*#__PURE__*/React.createElement(Input, comboboxProps);
@@ -217,7 +220,12 @@ QueryCombobox.propTypes = {
   /**
    * The number of columns the input should span on desktop
    */
-  desktopInputSpan: PropTypes.number
+  desktopInputSpan: PropTypes.number,
+  /**
+   * Whether to prompt the user to create a new option if the search input
+   * does not match any of the options
+   */
+  promptCreateNewOption: PropTypes.bool
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {
@@ -229,6 +237,7 @@ QueryCombobox.defaultProps = {
   searchVariable: 'search',
   transformSearch: search => search,
   minLength: 2,
-  disabled: false
+  disabled: false,
+  promptCreateNewOption: false
 };
 export default QueryCombobox;

package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js

@@ -8,7 +8,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 import { FormLabel, FormDescription } from "../../../..";
 import { Popover, LoadingCircle } from "../../../../../a";
 import { Button } from "../../../../../b";
-import { InputWrapper } from "../../../../common";
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from "../../../../common";
 
 // Local Definitions
 
@@ -28,6 +28,7 @@ const Combobox = ({
   name,
   options: items,
   getOptions,
+  setOptions,
   setValue,
   description,
   value,
@@ -40,7 +41,9 @@ const Combobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  desktopInputSpan,
+  placeholder,
+  promptCreateNewOption
   // ...otherProps
 }) => {
   const {
@@ -68,6 +71,16 @@ const Combobox = ({
       }
     }
   });
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items,
+        inputValue,
+        setOptions,
+        minLength
+      });
+    }
+  }, [inputValue, items, promptCreateNewOption]);
 
   // If the user has selected an item, we'll set the value of the field
   // or if the combobox state has a selected item, we'll set the value to the formik state
@@ -101,7 +114,8 @@ const Combobox = ({
     desktopColumnSpan: desktopInputSpan
   }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
     className: "input",
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
     className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
@@ -212,7 +226,11 @@ Combobox.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: PropTypes.string
 };
 Combobox.defaultProps = {
   // someProp: false

package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js

@@ -8,7 +8,7 @@ import { useCombobox, useMultipleSelection } from 'downshift';
 import { Button } from "../../../../../b";
 import { Popover, LoadingCircle } from "../../../../../a";
 import { FormDescription, FormLabel } from "../../../..";
-import { InputWrapper } from "../../../../common";
+import { InputWrapper, lookUpInputValueFromFetchedOptions } from "../../../../common";
 
 // Local Definitions
 
@@ -48,7 +48,10 @@ const MultipleCombobox = ({
   labelSpan,
   desktopLabelSpan,
   inputSpan,
-  desktopInputSpan
+  placeholder,
+  desktopInputSpan,
+  setOptions,
+  promptCreateNewOption
   // ...otherProps
 }) => {
   const [searchInputValue, setSearchInputValue] = useState('');
@@ -136,6 +139,16 @@ const MultipleCombobox = ({
       setValue(selectedItems);
     }
   }, [selectedItems]);
+  useEffect(() => {
+    if (promptCreateNewOption) {
+      lookUpInputValueFromFetchedOptions({
+        items,
+        inputValue,
+        setOptions,
+        minLength
+      });
+    }
+  }, [inputValue, items, promptCreateNewOption]);
   useEffect(() => {
     if (value?.length > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
       setSelectedItems(value);
@@ -180,7 +193,8 @@ const MultipleCombobox = ({
     preventKeyAction: isOpen
   })), {
     className: "input",
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   })), isFetching && /*#__PURE__*/React.createElement(LoadingCircle, {
     className: "x-main"
   }), inputValue.length > minLength && !isFetching && /*#__PURE__*/React.createElement(Button, {
@@ -275,7 +289,11 @@ MultipleCombobox.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: PropTypes.string
 };
 MultipleCombobox.defaultProps = {
   // someProp: false

package/dist/es/f/fields/RatingsInput/RatingsInput.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useState, useInsertionEffect, memo } from 'react';
+import { useState, memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -8,6 +8,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 
 import { Rating } from "./common";
 import { FormLabel, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'ratings-input';
 
@@ -34,9 +35,6 @@ const RatingsInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [hover, setHover] = useState(null);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
     name: name,

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -1,12 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { LoadingCircle } from "../../../a";
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -37,9 +38,6 @@ const SelectInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextInput/TextInput.js

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -37,9 +38,6 @@ const TextInput = ({
   symbol,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect, memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { useField } from 'formik';
@@ -9,6 +9,7 @@ import { useField } from 'formik';
 // Local Definitions
 
 import { FormLabel, FormDescription, InputWrapper } from "../../common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'text-area-input';
 
@@ -37,9 +38,6 @@ const TextareaInput = ({
   desktopInputSpan
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const [field] = useField({
     name,
     validate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.59",
+  "version": "4.0.0-alpha.61",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,13 +51,14 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.59",
+    "@pareto-engineering/assets": "^4.0.0-alpha.61",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
+    "fuse.js": "^7.0.0",
     "hamburgers": "^1.2.1",
     "lexical": "^0.11.3",
     "lodash": "^4.17.21",
@@ -70,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2d7315603950316a4dc7b8c4a0ccfbc0584e405f"
+  "gitHead": "b369858a6dea3f90d666846140b2b2a666850c30"
 }