@spothero/ui 25.5.1 → 25.6.0

package/dist/index.d.ts

@@ -178,6 +178,9 @@ export const RadioGroup: React.ComponentType<any>;
 // AutoSuggestSelect (Phase 4d - not yet converted)
 export const AutoSuggestSelect: React.ComponentType<any>;
 
+// FilterSelect (Phase 4d - not yet converted)
+export const FilterSelect: React.ComponentType<any>;
+
 // Badge (Phase 2b - not yet converted)
 export const Badge: React.ComponentType<any>;
 

package/dist/index.esm.js

@@ -10,8 +10,8 @@ import template from 'lodash/template';
 import cn from 'classnames';
 import AsyncSelect from 'react-select/async';
 import { motion, AnimatePresence } from 'framer-motion';
+import Select$3, { components as components$1 } from 'react-select';
 import Creatable from 'react-select/creatable';
-import { components as components$1 } from 'react-select';
 
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
@@ -1008,7 +1008,7 @@ const props = {
   variant: PropTypes.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({
@@ -1025,7 +1025,7 @@ const Button$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
       isExternal,
       height = 'md'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(Button$2, _extends$6({
     iconSpacing: 2
   }, props, heightProps(height), (asAnchor || props.as === 'a') && anchorProps(isExternal), {
@@ -1038,7 +1038,7 @@ Button$1.defaultProps = {
   type: 'button'
 };
 
-const _excluded$p = ["header", "drawerCloseButton", "children", "headerProps"];
+const _excluded$q = ["header", "drawerCloseButton", "children", "headerProps"];
 const Drawer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       header,
@@ -1046,7 +1046,7 @@ const Drawer = /*#__PURE__*/forwardRef((_ref, ref) => {
       children,
       headerProps
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(Drawer$1, _extends$6({
     placement: "right"
   }, props, {
@@ -1178,7 +1178,7 @@ var SvgCheckmarkCircleFilled = function SvgCheckmarkCircleFilled(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/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,
@@ -1198,7 +1198,7 @@ const Alert = /*#__PURE__*/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(_objectSpread2({}, theme$2.components.Alert.baseStyle), notificationBaseStyle, notificationStatusStyles(status), notificationSizeStyles(props.size));
@@ -1357,7 +1357,7 @@ const combineSizeWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$n = ["size"];
+const _excluded$o = ["size"];
 const sizeMapping = {
   [SIZE_SMALL]: 'sm',
   [SIZE_BODY]: 'md',
@@ -1367,7 +1367,7 @@ const Tabs = forwardRef$1((_ref, ref) => {
   let {
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(Tabs$1, _extends$6({
     size: sizeMapping[size]
   }, props, combineSizeWithVariant({
@@ -2609,7 +2609,7 @@ var jsxRuntimeExports = requireJsxRuntime();
 const FormControl$1 = forwardRef(({ children, label, inputId, helperText, errorMessage, isFieldset, isOptional, customRequiredText, ...props }, ref) => (jsxRuntimeExports.jsxs(FormControl$2, { ...props, ref: ref, as: isFieldset ? 'fieldset' : 'div', borderWidth: "0", children: [label && (jsxRuntimeExports.jsx(FormLabel, { color: "gray.600", fontWeight: "semibold", marginBottom: helperText ? 0 : 1, fontSize: "sm", htmlFor: inputId, as: isFieldset ? 'legend' : 'label', requiredIndicator: props?.isRequired && customRequiredText ? (jsxRuntimeExports.jsx(Text$1, { marginLeft: 1, as: "span", variant: "caption", color: "text.secondary.light", children: customRequiredText })) : null, optionalIndicator: isOptional && !props?.isRequired ? (jsxRuntimeExports.jsx(Text$1, { marginLeft: 1, as: "span", variant: "caption", color: "text.secondary.light", children: "Optional" })) : null, children: label })), helperText && (jsxRuntimeExports.jsx(FormHelperText, { color: "gray.600", marginBottom: 1, fontSize: "xs", children: helperText })), children, jsxRuntimeExports.jsx(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__*/forwardRef((_ref, ref) => {
   let {
       label,
@@ -2620,7 +2620,7 @@ const Select$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
       isRequired,
       isOptional
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -2655,7 +2655,7 @@ Select$1.propTypes = {
   isOptional: PropTypes.bool
 };
 
-const _excluded$l = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired"];
+const _excluded$m = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired"];
 const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       label,
@@ -2665,7 +2665,7 @@ const Switch = /*#__PURE__*/forwardRef((_ref, ref) => {
       isDisabled,
       isRequired
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -2813,13 +2813,13 @@ const combineAsWithVariant = _ref => {
   return styleProps;
 };
 
-const _excluded$k = ["as", "variant"];
+const _excluded$l = ["as", "variant"];
 const Text = forwardRef$1((_ref, ref) => {
   let {
       as,
       variant
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React__default.createElement(Text$1, _extends$6({
     variant: variant,
     as: as
@@ -2855,12 +2855,12 @@ const compactStyles = {
   gap: 4
 };
 
-const _excluded$j = ["isCompact"];
+const _excluded$k = ["isCompact"];
 const Grid = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       isCompact
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement(Grid$1, _extends$6({}, baseStyles, isCompact && compactStyles, props, {
     ref: ref
   }));
@@ -2884,7 +2884,7 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__def
   ref: ref
 })));
 
-const _excluded$i = ["type"];
+const _excluded$j = ["type"];
 const unorderedProps = {
   as: 'ul',
   styleType: 'disc'
@@ -2920,7 +2920,7 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       type
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement(List$1, _extends$6({}, getListProps(type), props, {
     ref: ref
   }));
@@ -3964,12 +3964,12 @@ var index$1 = merge(theme$2.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,
@@ -4383,7 +4383,7 @@ const baseConfig = {
 };
 var THEME = extendTheme(extendedTheme, baseConfig);
 
-const _excluded$g = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
+const _excluded$h = ["theme", "useLegacyOverrides", "disableExternalFonts", "children"];
 const ThemeProvider = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       theme,
@@ -4391,7 +4391,7 @@ const ThemeProvider = /*#__PURE__*/forwardRef((_ref, ref) => {
       disableExternalFonts = false,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(ChakraProvider, _extends$6({}, props, {
     ref: ref,
     theme: merge({}, THEME, theme)
@@ -4413,7 +4413,7 @@ ThemeProvider.propTypes = {
 const Card = forwardRef((props, ref) => (jsxRuntimeExports.jsx(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() {
@@ -4452,7 +4452,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) {
@@ -4502,7 +4502,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',
@@ -4513,7 +4513,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
@@ -4568,12 +4568,12 @@ Loader.propTypes = {
   value: PropTypes.number
 };
 
-const _excluded$d = ["isRounded"];
+const _excluded$e = ["isRounded"];
 const Progress = /*#__PURE__*/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__default.createElement(Progress$1, _extends$6({
     ref: ref,
@@ -4617,7 +4617,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__*/forwardRef((_ref, ref) => {
   let {
       defaultChecked,
@@ -4628,7 +4628,7 @@ const Checkbox = /*#__PURE__*/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__default.createElement(Checkbox$1, _extends$6({
     ref: ref,
@@ -4654,7 +4654,7 @@ Checkbox.propTypes = {
   size: PropTypes.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__*/forwardRef((_ref, ref) => {
   let {
       label,
@@ -4666,7 +4666,7 @@ const Input$1 = /*#__PURE__*/forwardRef((_ref, ref) => {
       isOptional,
       customRequiredText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -4697,7 +4697,7 @@ Input$1.propTypes = {
   customRequiredText: PropTypes.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
@@ -4821,7 +4821,7 @@ const FormControl = /*#__PURE__*/forwardRef((_ref, ref) => {
       rightElementStyles,
       leftElementStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(FormControl$2, _extends$6({}, props, {
     ref: ref
   }, controlStyles), /*#__PURE__*/React__default.createElement(InputGroup, null, leftElement && /*#__PURE__*/React__default.createElement(InputLeftElement, _extends$6({
@@ -4863,7 +4863,7 @@ FormControl.propTypes = {
   isInvalid: PropTypes.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
@@ -4884,7 +4884,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       placeholder = ' '
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -4927,7 +4927,7 @@ Input.propTypes = {
   leftElementStyles: PropTypes.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,
 /**
@@ -4951,7 +4951,7 @@ const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       formControlStyles
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -4992,7 +4992,7 @@ Select.propTypes = {
   rightElementStyles: PropTypes.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
@@ -5016,7 +5016,7 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftElementStyles,
       buttonValue
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   }); //Historic carry over
@@ -5260,7 +5260,7 @@ AutoSuggestSelect$1.propTypes = {
   leftElementStyles: PropTypes.object
 };
 
-const _excluded$6 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
+const _excluded$7 = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children", "size"];
 const Radio = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       defaultChecked,
@@ -5271,7 +5271,7 @@ const Radio = /*#__PURE__*/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__default.createElement(Radio$1, _extends$6({
     ref: ref,
@@ -5296,7 +5296,7 @@ Radio.propTypes = {
   size: PropTypes.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__*/forwardRef((_ref, ref) => {
   let {
       label,
@@ -5311,7 +5311,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       children,
       direction
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/React__default.createElement(FormControl$1, {
     isInvalid: isInvalid,
     isDisabled: isDisabled,
@@ -5346,7 +5346,7 @@ RadioGroup.propTypes = {
   direction: PropTypes.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__*/forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -5363,7 +5363,7 @@ const SelectionCard = /*#__PURE__*/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;
@@ -5450,7 +5450,7 @@ const Divider = forwardRef(({ variant = 'solid', colorScheme: borderColor = 'med
 });
 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__*/forwardRef((_ref, ref) => {
   let {
       label,
@@ -5462,7 +5462,7 @@ const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
       isOptional,
       customRequiredText
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const classes = cn({
     'FormElement-contains-error': isInvalid
   });
@@ -5493,12 +5493,12 @@ Textarea.propTypes = {
   customRequiredText: PropTypes.string
 };
 
-const _excluded$2 = ["children"];
+const _excluded$3 = ["children"];
 const Popover = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children
     } = props,
-    rest = _objectWithoutProperties(props, _excluded$2);
+    rest = _objectWithoutProperties(props, _excluded$3);
   return /*#__PURE__*/React__default.createElement(Popover$1, _extends$6({}, rest, {
     ref: ref
   }), Children.toArray(children).map((child, index) => /*#__PURE__*/cloneElement(child, {
@@ -5557,7 +5557,7 @@ const PopoverCloseButton = /*#__PURE__*/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__*/forwardRef((props, ref) => {
   const {
       header,
@@ -5567,7 +5567,7 @@ const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => {
       hideArrow,
       popoverBodyProps
     } = props,
-    rest = _objectWithoutProperties(props, _excluded$1);
+    rest = _objectWithoutProperties(props, _excluded$2);
   return /*#__PURE__*/React__default.createElement(PopoverContent$1, _extends$6({}, rest, {
     ref: ref
   }), hideArrow ? null : /*#__PURE__*/React__default.createElement(PopoverArrow, {
@@ -5751,6 +5751,192 @@ AutoSuggestSelect.propTypes = {
   innerProps: PropTypes.object
 };
 
+const _excluded$1 = ["id", "label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "options", "onChange", "iconSrc", "placeholder", "defaultValue", "innerRef", "noOptionsMessage"];
+const DropdownIndicator$1 = props => {
+  const {
+    sizes
+  } = useTheme();
+  return /*#__PURE__*/React__default.createElement(components$1.DropdownIndicator, props, /*#__PURE__*/React__default.createElement(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
+  } = 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__default.createElement(FormControl$1, {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    helperText: helperText,
+    label: label,
+    inputId: id,
+    isInvalid: isInvalid
+  }, /*#__PURE__*/React__default.createElement(Select$3, _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__*/forwardRef((props, ref) => /*#__PURE__*/React__default.createElement(FilterSelectNode, _extends$6({
+  innerRef: ref
+}, props)));
+FilterSelect.propTypes = {
+  /** ID applied to the select and label */
+  id: PropTypes.string.isRequired,
+  /** Label that describes the select */
+  label: PropTypes.string,
+  /** Text to use as placeholder in the input */
+  placeholder: PropTypes.string,
+  /** Optional helper text displayed below the select */
+  helperText: PropTypes.string,
+  /** Error message that would display under the select */
+  errorMessage: PropTypes.string,
+  /** Boolean that sets whether the select is valid */
+  isInvalid: PropTypes.bool,
+  /** Boolean that sets whether the select is disabled */
+  isDisabled: PropTypes.bool,
+  /** Boolean that sets whether the select is required */
+  isRequired: PropTypes.bool,
+  /** List of available options */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired
+  })).isRequired,
+  /** Function that is called when an option is selected, it returns the selected option */
+  onChange: PropTypes.func.isRequired,
+  /** Optional src to SVG to use as search icon */
+  iconSrc: PropTypes.string,
+  /** Optional default option for uncontrolled usage */
+  defaultValue: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.any
+  }),
+  /** Optional message to display when there are no options */
+  noOptionsMessage: PropTypes.string
+};
+FilterSelectNode.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  helperText: PropTypes.string,
+  errorMessage: PropTypes.string,
+  isInvalid: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any.isRequired
+  })).isRequired,
+  onChange: PropTypes.func.isRequired,
+  iconSrc: PropTypes.string,
+  defaultValue: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.any
+  }),
+  innerRef: PropTypes.object,
+  noOptionsMessage: PropTypes.string
+};
+
 const defaultStyles = {
   border: 0,
   borderRadius: '4px',
@@ -5979,5 +6165,5 @@ Menu.propTypes = {
   children: PropTypes.node
 };
 
-export { AccordionActionButton, Alert, AlwaysMountedModal, AutoSuggestSelect, Button$1 as Button, Card, Checkbox, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, Grid, GridItem, Heading, Image, Input$1 as Input, List, Loader, Menu, Modal, Popover, PopoverArrow, PopoverContent, Progress, Radio, RadioGroup, AutoSuggestSelect$1 as RefreshedAutoSuggestSelect, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input as RefreshedInput, Select as RefreshedSelectInput, Select$1 as Select, SelectionCard, Spinner, Switch, Tabs, Text, Textarea, ThemeProvider, ToggleButtonGroup };
+export { AccordionActionButton, Alert, AlwaysMountedModal, AutoSuggestSelect, Button$1 as Button, Card, Checkbox, Container, CreatableSelect$1 as CreatableSelect, Divider, Drawer, FilterSelect, Grid, GridItem, Heading, Image, Input$1 as Input, List, Loader, Menu, Modal, Popover, PopoverArrow, PopoverContent, Progress, Radio, RadioGroup, AutoSuggestSelect$1 as RefreshedAutoSuggestSelect, Button as RefreshedButtonInput, FormControl as RefreshedFormControl, Input as RefreshedInput, Select as RefreshedSelectInput, Select$1 as Select, SelectionCard, Spinner, Switch, Tabs, Text, Textarea, ThemeProvider, ToggleButtonGroup };
 //# sourceMappingURL=index.esm.js.map