@spothero/ui 25.5.1 → 25.6.0

package/dist/index.cjs.js

@@ -10,8 +10,8 @@ var template = require('lodash/template');
 var cn = require('classnames');
 var AsyncSelect = require('react-select/async');
 var framerMotion = require('framer-motion');
+var Select$2 = require('react-select');
 var Creatable = require('react-select/creatable');
-var reactSelect = require('react-select');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -39,6 +39,7 @@ var merge__default = /*#__PURE__*/_interopDefault(merge);
 var template__default = /*#__PURE__*/_interopDefault(template);
 var cn__default = /*#__PURE__*/_interopDefault(cn);
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
+var Select__default = /*#__PURE__*/_interopDefault(Select$2);
 var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 
 function _defineProperty(e, r, t) {
@@ -1036,7 +1037,7 @@ const props = {
   variant: PropTypes__default.default.oneOf(Object.keys(variants$d))
 };
 
-const _excluded$q = ["asAnchor", "isExternal", "height"];
+const _excluded$r = ["asAnchor", "isExternal", "height"];
 const anchorProps = function () {
   let isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return _objectSpread2({
@@ -1053,7 +1054,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isExternal,
       height = 'md'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__namespace.default.createElement(react.Button, _extends$6({
     iconSpacing: 2
   }, props, heightProps(height), (asAnchor || props.as === 'a') && anchorProps(isExternal), {
@@ -1066,7 +1067,7 @@ Button$1.defaultProps = {
   type: 'button'
 };
 
-const _excluded$p = ["header", "drawerCloseButton", "children", "headerProps"];
+const _excluded$q = ["header", "drawerCloseButton", "children", "headerProps"];
 const Drawer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       header,
@@ -1074,7 +1075,7 @@ const Drawer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children,
       headerProps
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__namespace.default.createElement(react.Drawer, _extends$6({
     placement: "right"
   }, props, {
@@ -1206,7 +1207,7 @@ var SvgCheckmarkCircleFilled = function SvgCheckmarkCircleFilled(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgCheckmarkCircleFilled);
 
-const _excluded$o = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description", "icon"];
+const _excluded$p = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description", "icon"];
 const statusIconMapping = {
   [NOTIFICATION_STATUSES.WARNING]: ForwardRef$3,
   [NOTIFICATION_STATUSES.SUCCESS]: ForwardRef$2,
@@ -1226,7 +1227,7 @@ const Alert = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       description,
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   const IconVariant = icon || statusIconMapping[status];
   // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
   const style = merge__default.default(_objectSpread2({}, react.theme.components.Alert.baseStyle), notificationBaseStyle, notificationStatusStyles(status), notificationSizeStyles(props.size));
@@ -1385,7 +1386,7 @@ const combineSizeWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$n = ["size"];
+const _excluded$o = ["size"];
 const sizeMapping = {
   [SIZE_SMALL]: 'sm',
   [SIZE_BODY]: 'md',
@@ -1395,7 +1396,7 @@ const Tabs = react.forwardRef((_ref, ref) => {
   let {
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__namespace.default.createElement(react.Tabs, _extends$6({
     size: sizeMapping[size]
   }, props, combineSizeWithVariant({
@@ -2637,7 +2638,7 @@ var jsxRuntimeExports = requireJsxRuntime();
 const FormControl$1 = React.forwardRef(({ children, label, inputId, helperText, errorMessage, isFieldset, isOptional, customRequiredText, ...props }, ref) => (jsxRuntimeExports.jsxs(react.FormControl, { ...props, ref: ref, as: isFieldset ? 'fieldset' : 'div', borderWidth: "0", children: [label && (jsxRuntimeExports.jsx(react.FormLabel, { color: "gray.600", fontWeight: "semibold", marginBottom: helperText ? 0 : 1, fontSize: "sm", htmlFor: inputId, as: isFieldset ? 'legend' : 'label', requiredIndicator: props?.isRequired && customRequiredText ? (jsxRuntimeExports.jsx(react.Text, { marginLeft: 1, as: "span", variant: "caption", color: "text.secondary.light", children: customRequiredText })) : null, optionalIndicator: isOptional && !props?.isRequired ? (jsxRuntimeExports.jsx(react.Text, { marginLeft: 1, as: "span", variant: "caption", color: "text.secondary.light", children: "Optional" })) : null, children: label })), helperText && (jsxRuntimeExports.jsx(react.FormHelperText, { color: "gray.600", marginBottom: 1, fontSize: "xs", children: helperText })), children, jsxRuntimeExports.jsx(react.FormErrorMessage, { color: "error", mt: 1, fontSize: "xs", children: errorMessage })] })));
 FormControl$1.displayName = 'FormControl';
 
-const _excluded$m = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional"];
+const _excluded$n = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional"];
 const Select$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       label,
@@ -2648,7 +2649,7 @@ const Select$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isRequired,
       isOptional
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -2683,7 +2684,7 @@ Select$1.propTypes = {
   isOptional: PropTypes__default.default.bool
 };
 
-const _excluded$l = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired"];
+const _excluded$m = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired"];
 const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       label,
@@ -2693,7 +2694,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isDisabled,
       isRequired
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -2841,13 +2842,13 @@ const combineAsWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$k = ["as", "variant"];
+const _excluded$l = ["as", "variant"];
 const Text = react.forwardRef((_ref, ref) => {
   let {
       as,
       variant
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React__namespace.default.createElement(react.Text, _extends$6({
     variant: variant,
     as: as
@@ -2883,12 +2884,12 @@ const compactStyles = {
   gap: 4
 };
 
-const _excluded$j = ["isCompact"];
+const _excluded$k = ["isCompact"];
 const Grid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isCompact
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__namespace.default.createElement(react.Grid, _extends$6({}, baseStyles, isCompact && compactStyles, props, {
     ref: ref
   }));
@@ -2912,7 +2913,7 @@ const GridItem = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Reac
   ref: ref
 })));
 
-const _excluded$i = ["type"];
+const _excluded$j = ["type"];
 const unorderedProps = {
   as: 'ul',
   styleType: 'disc'
@@ -2948,7 +2949,7 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       type
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__namespace.default.createElement(react.List, _extends$6({}, getListProps(type), props, {
     ref: ref
   }));
@@ -3992,12 +3993,12 @@ var index$1 = merge__default.default(react.theme.components.Badge, {
   defaultProps: defaultProps$2
 });
 
-const _excluded$h = ["hasFooter"];
+const _excluded$i = ["hasFooter"];
 const body = _ref => {
   let {
       hasFooter
     } = _ref;
-    _objectWithoutProperties(_ref, _excluded$h);
+    _objectWithoutProperties(_ref, _excluded$i);
   return {
     overflowY: 'auto',
     padding: 6,
@@ -4411,7 +4412,7 @@ const baseConfig = {
 };
 var THEME = react.extendTheme(extendedTheme, baseConfig);
 
-const _excluded$g = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
+const _excluded$h = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
 const ThemeProvider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       theme,
@@ -4419,7 +4420,7 @@ const ThemeProvider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableExternalFonts = false,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React__namespace.default.createElement(react.ChakraProvider, _extends$6({}, props, {
     ref: ref,
     theme: merge__default.default({}, THEME, theme)
@@ -4441,7 +4442,7 @@ ThemeProvider.propTypes = {
 const Card = React.forwardRef((props, ref) => (jsxRuntimeExports.jsx(react.Box, { position: "relative", padding: 4, bgColor: "background.white", borderRadius: "lg", boxShadow: "md", ...props, ref: ref })));
 Card.displayName = 'Card';
 
-const _excluded$f = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
+const _excluded$g = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
 
 // This code is copied from fe-utils https://github.com/spothero/fe-monorepo/blob/a0e06482e74dcb5502b21c5fbf0a679752a1f8ce/packages/fe-utils/src/environment/environment.js#L391
 function isHighDensityDisplay() {
@@ -4480,7 +4481,7 @@ const Image = _ref2 => {
       quality,
       lazyLoad
     } = _ref2,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$f);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$g);
   const hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
   let cloudinarySrc;
   if (hasValidCloudinarySrc) {
@@ -4530,7 +4531,7 @@ Image.defaultProps = {
   cloudinaryCloudName: 'spothero'
 };
 
-const _excluded$e = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
+const _excluded$f = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
 const Loader = _ref => {
   let {
       color = 'success',
@@ -4541,7 +4542,7 @@ const Loader = _ref => {
       trackColor = 'gray.medium',
       value = 0
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   /* -------------------------------------------------------------------- *\
       Note: Since most of the props for this component control multiple
       styles at a time, it was decided that it made the most sense to set
@@ -4596,12 +4597,12 @@ Loader.propTypes = {
   value: PropTypes__default.default.number
 };
 
-const _excluded$d = ["isRounded"];
+const _excluded$e = ["isRounded"];
 const Progress = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isRounded
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   // Passing `isRounded` in as a prop throws a 'React does not recognize the X prop on a DOM element' error. Passing `isRounded` through `sx` instead, allows for the prop to be utilized by the theme without being set on the DOM element, avoiding the error.
   return /*#__PURE__*/React__namespace.default.createElement(react.Progress, _extends$6({
     ref: ref,
@@ -4645,7 +4646,7 @@ Progress.defaultProps = {
   variant: 'solid'
 };
 
-const _excluded$c = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
+const _excluded$d = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       defaultChecked,
@@ -4656,7 +4657,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children,
       size = 'md'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   return /*#__PURE__*/React__namespace.default.createElement(react.Checkbox, _extends$6({
     ref: ref,
@@ -4682,7 +4683,7 @@ Checkbox.propTypes = {
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg'])
 };
 
-const _excluded$b = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
+const _excluded$c = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
 const Input$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       label,
@@ -4694,7 +4695,7 @@ const Input$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isOptional,
       customRequiredText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -4725,7 +4726,7 @@ Input$1.propTypes = {
   customRequiredText: PropTypes__default.default.string
 };
 
-const _excluded$a = ["label", "helperText", "errorMessage", "id", "children", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles"];
+const _excluded$b = ["label", "helperText", "errorMessage", "id", "children", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles"];
 
 // No clue how to move these into the style file so just co-located to keep from slowing down
 // Chakra V2 will heavily impact this component
@@ -4849,7 +4850,7 @@ const FormControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/React__namespace.default.createElement(react.FormControl, _extends$6({}, props, {
     ref: ref
   }, controlStyles), /*#__PURE__*/React__namespace.default.createElement(react.InputGroup, null, leftElement && /*#__PURE__*/React__namespace.default.createElement(react.InputLeftElement, _extends$6({
@@ -4891,7 +4892,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes__default.default.bool
 };
 
-const _excluded$9 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
+const _excluded$a = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "placeholder"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -4912,7 +4913,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4955,7 +4956,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$8 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
+const _excluded$9 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "formControlStyles"];
 
 //For select left is static arrow,
 /**
@@ -4979,7 +4980,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -5020,7 +5021,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$7 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
+const _excluded$8 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isHighlighted", "rightElement", "leftElement", "rightElementStyles", "leftElementStyles", "buttonValue"];
 
 /**
  * A component used in the homepage/midfunnel refresh of 2024
@@ -5044,7 +5045,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -5288,7 +5289,7 @@ AutoSuggestSelect$1.propTypes = {
   leftElementStyles: PropTypes__default.default.object
 };
 
-const _excluded$6 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
+const _excluded$7 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
 const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       defaultChecked,
@@ -5299,7 +5300,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children,
       size = 'md'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   return /*#__PURE__*/React__namespace.default.createElement(react.Radio, _extends$6({
     ref: ref,
@@ -5324,7 +5325,7 @@ Radio.propTypes = {
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg'])
 };
 
-const _excluded$5 = ["label", "errorMessage", "defaultValue", "isDisabled", "isInvalid", "isRequired", "name", "onChange", "value", "children", "direction"];
+const _excluded$6 = ["label", "errorMessage", "defaultValue", "isDisabled", "isInvalid", "isRequired", "name", "onChange", "value", "children", "direction"];
 const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       label,
@@ -5339,7 +5340,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children,
       direction
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/React__namespace.default.createElement(FormControl$1, {
     isInvalid: isInvalid,
     isDisabled: isDisabled,
@@ -5374,7 +5375,7 @@ RadioGroup.propTypes = {
   direction: PropTypes__default.default.oneOf(['row', 'column'])
 };
 
-const _excluded$4 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
+const _excluded$5 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
 const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -5391,7 +5392,7 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       topChild,
       expandableContentKey = 'selection-card-content'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const Component = isRadio ? Radio : Checkbox;
   const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   const hasExpandableContent = isExpandable && isChecked && expandableChildren;
@@ -5478,7 +5479,7 @@ const Divider = React.forwardRef(({ variant = 'solid', colorScheme: borderColor
 });
 Divider.displayName = 'Divider';
 
-const _excluded$3 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
+const _excluded$4 = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional", "customRequiredText"];
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       label,
@@ -5490,7 +5491,7 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isOptional,
       customRequiredText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn__default.default({
     'FormElement-contains-error': isInvalid
   });
@@ -5521,12 +5522,12 @@ Textarea.propTypes = {
   customRequiredText: PropTypes__default.default.string
 };
 
-const _excluded$2 = ["children"];
+const _excluded$3 = ["children"];
 const Popover = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       children
     } = props,
-    rest = _objectWithoutProperties(props, _excluded$2);
+    rest = _objectWithoutProperties(props, _excluded$3);
   return /*#__PURE__*/React__namespace.default.createElement(react.Popover, _extends$6({}, rest, {
     ref: ref
   }), React.Children.toArray(children).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
@@ -5585,7 +5586,7 @@ const PopoverCloseButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, props, closeButtonStyles(props)));
 });
 
-const _excluded$1 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
+const _excluded$2 = ["header", "variant", "children", "hideCloseButton", "hideArrow", "popoverBodyProps"];
 const PopoverContent = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       header,
@@ -5595,7 +5596,7 @@ const PopoverContent = /*#__PURE__*/React.forwardRef((props, ref) => {
       hideArrow,
       popoverBodyProps
     } = props,
-    rest = _objectWithoutProperties(props, _excluded$1);
+    rest = _objectWithoutProperties(props, _excluded$2);
   return /*#__PURE__*/React__namespace.default.createElement(react.PopoverContent, _extends$6({}, rest, {
     ref: ref
   }), hideArrow ? null : /*#__PURE__*/React__namespace.default.createElement(PopoverArrow, {
@@ -5779,6 +5780,192 @@ AutoSuggestSelect.propTypes = {
   innerProps: PropTypes__default.default.object
 };
 
+const _excluded$1 = ["id", "label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "options", "onChange", "iconSrc", "placeholder", "defaultValue", "innerRef", "noOptionsMessage"];
+const DropdownIndicator$1 = props => {
+  const {
+    sizes
+  } = react.useTheme();
+  return /*#__PURE__*/React__namespace.default.createElement(Select$2.components.DropdownIndicator, props, /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
+    className: "FilterSelect-dropdown-icon",
+    as: ForwardRef$1,
+    boxSize: sizes['2.5']
+  }));
+};
+const FilterSelectNode = _ref => {
+  let {
+      id,
+      label,
+      helperText,
+      errorMessage,
+      isInvalid,
+      isDisabled,
+      isRequired,
+      options = [],
+      onChange,
+      iconSrc,
+      placeholder,
+      defaultValue = null,
+      innerRef,
+      noOptionsMessage = 'No Options'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  const {
+    colors,
+    fontSizes,
+    sizes
+  } = react.useTheme();
+  const handleChange = selectedOption => {
+    onChange(selectedOption);
+  };
+  const icon = function () {
+    let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transparent';
+    return {
+      alignItems: 'center',
+      display: 'flex',
+      ':before': {
+        backgroundColor: color,
+        content: '" "',
+        display: 'block',
+        marginRight: sizes['3'],
+        height: sizes['4'],
+        width: sizes['5'],
+        mask: "url(".concat(iconSrc, ") no-repeat 50% 50%"),
+        maskSize: 'contain'
+      }
+    };
+  };
+  const baseText = {
+    fontSize: fontSizes.base,
+    color: colors.black
+  };
+  const customStyles = {
+    menu: provided => _objectSpread2(_objectSpread2({}, provided), baseText),
+    control: (provided, state) => _objectSpread2(_objectSpread2({}, provided), {}, {
+      borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200'],
+      borderWidth: '1px',
+      boxShadow: 'none',
+      '&:hover': {
+        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200']
+      }
+    }),
+    input: (provided, state) => _objectSpread2(_objectSpread2(_objectSpread2({}, provided), baseText), {}, {
+      padding: sizes['2'],
+      backgroundColor: state.isDisabled ? colors.gray['200'] : 'transparent'
+    }, iconSrc && icon(colors.gray['600'])),
+    placeholder: provided => _objectSpread2(_objectSpread2({}, provided), {}, {
+      padding: sizes['2'],
+      fontSize: fontSizes.base,
+      color: colors.gray['600']
+    }, iconSrc && icon()),
+    singleValue: provided => _objectSpread2(_objectSpread2(_objectSpread2({}, provided), baseText), {}, {
+      padding: sizes['2']
+    }, iconSrc && icon()),
+    option: (provided, state) => _objectSpread2(_objectSpread2({}, provided), {}, {
+      backgroundColor: state.isSelected ? colors.gray['200'] : state.isFocused ? colors.gray['50'] : 'transparent',
+      color: colors.black
+    }),
+    clearIndicator: provided => _objectSpread2(_objectSpread2({}, provided), {}, {
+      color: colors.gray['400'],
+      '&:hover': {
+        color: colors.gray['600']
+      }
+    }),
+    dropdownIndicator: provided => _objectSpread2(_objectSpread2({}, provided), {}, {
+      color: colors.brandBlue,
+      '&:hover': {
+        color: colors.brandBlue
+      }
+    }),
+    indicatorSeparator: provided => _objectSpread2(_objectSpread2({}, provided), {}, {
+      display: 'none'
+    })
+  };
+  return /*#__PURE__*/React__namespace.default.createElement(FormControl$1, {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    helperText: helperText,
+    label: label,
+    inputId: id,
+    isInvalid: isInvalid
+  }, /*#__PURE__*/React__namespace.default.createElement(Select__default.default, _extends$6({
+    ref: innerRef,
+    classNamePrefix: "fe-ui-filter-select",
+    closeMenuOnSelect: true,
+    isClearable: true,
+    components: {
+      DropdownIndicator: DropdownIndicator$1
+    },
+    openMenuOnClick: true,
+    options: options,
+    onChange: handleChange,
+    isDisabled: isDisabled,
+    inputId: id,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    styles: customStyles,
+    noOptionsMessage: () => noOptionsMessage
+  }, props)));
+};
+const FilterSelect = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__namespace.default.createElement(FilterSelectNode, _extends$6({
+  innerRef: ref
+}, props)));
+FilterSelect.propTypes = {
+  /** ID applied to the select and label */
+  id: PropTypes__default.default.string.isRequired,
+  /** Label that describes the select */
+  label: PropTypes__default.default.string,
+  /** Text to use as placeholder in the input */
+  placeholder: PropTypes__default.default.string,
+  /** Optional helper text displayed below the select */
+  helperText: PropTypes__default.default.string,
+  /** Error message that would display under the select */
+  errorMessage: PropTypes__default.default.string,
+  /** Boolean that sets whether the select is valid */
+  isInvalid: PropTypes__default.default.bool,
+  /** Boolean that sets whether the select is disabled */
+  isDisabled: PropTypes__default.default.bool,
+  /** Boolean that sets whether the select is required */
+  isRequired: PropTypes__default.default.bool,
+  /** List of available options */
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    label: PropTypes__default.default.string.isRequired,
+    value: PropTypes__default.default.any.isRequired
+  })).isRequired,
+  /** Function that is called when an option is selected, it returns the selected option */
+  onChange: PropTypes__default.default.func.isRequired,
+  /** Optional src to SVG to use as search icon */
+  iconSrc: PropTypes__default.default.string,
+  /** Optional default option for uncontrolled usage */
+  defaultValue: PropTypes__default.default.shape({
+    label: PropTypes__default.default.string,
+    value: PropTypes__default.default.any
+  }),
+  /** Optional message to display when there are no options */
+  noOptionsMessage: PropTypes__default.default.string
+};
+FilterSelectNode.propTypes = {
+  id: PropTypes__default.default.string.isRequired,
+  label: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  helperText: PropTypes__default.default.string,
+  errorMessage: PropTypes__default.default.string,
+  isInvalid: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
+  isRequired: PropTypes__default.default.bool,
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    label: PropTypes__default.default.string.isRequired,
+    value: PropTypes__default.default.any.isRequired
+  })).isRequired,
+  onChange: PropTypes__default.default.func.isRequired,
+  iconSrc: PropTypes__default.default.string,
+  defaultValue: PropTypes__default.default.shape({
+    label: PropTypes__default.default.string,
+    value: PropTypes__default.default.any
+  }),
+  innerRef: PropTypes__default.default.object,
+  noOptionsMessage: PropTypes__default.default.string
+};
+
 const defaultStyles = {
   border: 0,
   borderRadius: '4px',
@@ -5872,7 +6059,7 @@ const DropdownIndicator = props => {
   const {
     sizes
   } = react.useTheme();
-  return /*#__PURE__*/React__namespace.default.createElement(reactSelect.components.DropdownIndicator, props, /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
+  return /*#__PURE__*/React__namespace.default.createElement(Select$2.components.DropdownIndicator, props, /*#__PURE__*/React__namespace.default.createElement(react.Icon, {
     className: "CreatableSelect-dropdown-icon",
     as: ForwardRef$1,
     boxSize: sizes['2.5']
@@ -6382,6 +6569,7 @@ exports.Container = Container;
 exports.CreatableSelect = CreatableSelect$1;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
+exports.FilterSelect = FilterSelect;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
 exports.Heading = Heading;