orcs-design-system 3.2.4 → 3.2.6

package/es/components/Select/index.js

@@ -1,8 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 _objectSpread(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; }
 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider, useTheme } from "styled-components";
@@ -15,53 +10,52 @@ import shouldForwardProp from "@styled-system/should-forward-prop";
 import { themeGet } from "@styled-system/theme-get";
 import { Small } from "../Typography";
 import useInputFocus from "../../hooks/useInputFocus";
-var SelectStyles = compose(space, layout);
-var Wrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SelectStyles = compose(space, layout);
+const Wrapper = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Select__Wrapper",
   componentId: "sc-bfi43f-0"
-}).attrs(function (props) {
-  return {
-    "data-testid": props["data-testid"] ? props["data-testid"] : null
-  };
-})(css({
+}).attrs(props => ({
+  "data-testid": props["data-testid"] ? props["data-testid"] : null
+}))(css({
   display: "inline-block",
   width: "100%"
 }), SelectStyles);
-var Label = styled("label").withConfig({
-  shouldForwardProp: shouldForwardProp,
+const Label = styled("label").withConfig({
+  shouldForwardProp,
   displayName: "Select__Label",
   componentId: "sc-bfi43f-1"
-}).attrs(function (props) {
-  return {
-    "for": props.id
-  };
-})(function (props) {
-  return css({
-    display: "block",
-    color: props.inverted ? themeGet("colors.white")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props),
-    mb: "xs"
-  });
-});
-var MultiValueRemove = function MultiValueRemove(props) {
-  var innerProps = props.innerProps,
-    data = props.data;
-  return /*#__PURE__*/React.createElement(components.MultiValueRemove, _objectSpread(_objectSpread({}, props), {}, {
-    innerProps: _objectSpread(_objectSpread({}, innerProps), {}, {
+}).attrs(props => ({
+  for: props.id
+}))(props => css({
+  display: "block",
+  color: props.inverted ? themeGet("colors.white")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props),
+  fontSize: themeGet("fontSizes.1")(props),
+  fontWeight: props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props),
+  mb: "xs"
+}));
+const MultiValueRemove = props => {
+  const {
+    innerProps,
+    data
+  } = props;
+  return /*#__PURE__*/_jsx(components.MultiValueRemove, {
+    ...props,
+    innerProps: {
+      ...innerProps,
       "aria-label": "Remove ".concat(data.label)
-    })
-  }));
+    }
+  });
 };
 MultiValueRemove.propTypes = {
   data: PropTypes.object,
   innerProps: PropTypes.object
 };
-var SELECT_TYPES = {
+const SELECT_TYPES = {
   creatable: CreatableSelect,
   async: AsyncSelect,
-  "default": ReactSelect
+  default: ReactSelect
 };
 
 /**
@@ -80,326 +74,320 @@ var SELECT_TYPES = {
  * For a full list of the changes, see <https://react-select.com/upgrade-guide>.
  *
  */
-var Select = /*#__PURE__*/forwardRef(function (props, ref) {
+const Select = /*#__PURE__*/forwardRef((props, ref) => {
   var _SELECT_TYPES$props$s;
-  var theme = useTheme();
-  var inputRef = useInputFocus(ref, props.focus);
-  var _props$updateStyles = props.updateStyles,
-    updateStyles = _props$updateStyles === void 0 ? function (s) {
-      return s;
-    } : _props$updateStyles;
-  var customStyles = updateStyles({
-    menu: function menu(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        backgroundColor: props.inverted ? themeGet("colors.greyDarker")({
-          theme: theme
-        }) : themeGet("colors.white")({
-          theme: theme
-        }),
-        color: props.inverted ? themeGet("colors.greyLighter") : themeGet("colors.greyDarkest")({
-          theme: theme
-        }),
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
-        }),
-        border: props.inverted ? themeGet("borderWidths.1")({
-          theme: theme
-        }) + " solid " + themeGet("colors.primaryLight")({
-          theme: theme
-        }) : themeGet("borderWidths.1")({
-          theme: theme
-        }) + " solid " + themeGet("colors.primary")({
-          theme: theme
-        }),
-        borderRadius: themeGet("radii.2")({
-          theme: theme
-        }),
-        marginBottom: "0",
-        marginTop: themeGet("space.xs")({
-          theme: theme
-        }),
-        overflow: "hidden",
-        zIndex: 12
-      });
-    },
-    menuList: function menuList(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        paddingTop: "0",
-        overflow: "auto",
-        color: props.inverted ? themeGet("colors.greyLightest")({
-          theme: theme
-        }) : themeGet("colors.greyDarkest")({
-          theme: theme
+  const theme = useTheme();
+  const inputRef = useInputFocus(ref, props.focus);
+  const {
+    updateStyles = s => s
+  } = props;
+  const customStyles = updateStyles({
+    menu: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      backgroundColor: props.inverted ? themeGet("colors.greyDarker")({
+        theme
+      }) : themeGet("colors.white")({
+        theme
+      }),
+      color: props.inverted ? themeGet("colors.greyLighter") : themeGet("colors.greyDarkest")({
+        theme
+      }),
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      }),
+      border: props.inverted ? themeGet("borderWidths.1")({
+        theme
+      }) + " solid " + themeGet("colors.primaryLight")({
+        theme
+      }) : themeGet("borderWidths.1")({
+        theme
+      }) + " solid " + themeGet("colors.primary")({
+        theme
+      }),
+      borderRadius: themeGet("radii.2")({
+        theme
+      }),
+      marginBottom: "0",
+      marginTop: themeGet("space.xs")({
+        theme
+      }),
+      overflow: "hidden",
+      zIndex: 12
+    }),
+    menuList: provided => ({
+      ...provided,
+      paddingTop: "0",
+      overflow: "auto",
+      color: props.inverted ? themeGet("colors.greyLightest")({
+        theme
+      }) : themeGet("colors.greyDarkest")({
+        theme
+      })
+    }),
+    control: (provided, state) => ({
+      ...provided,
+      minHeight: props.height ? props.height : themeGet("appScale.inputHeightDefault")({
+        theme
+      }),
+      boxShadow: "none",
+      opacity: state.isDisabled ? 0.7 : 1,
+      "&:hover": {
+        borderColor: props.invalid ? themeGet("colors.danger")({
+          theme
+        }) : themeGet("colors.primary")({
+          theme
         })
-      });
-    },
-    control: function control(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        minHeight: props.height ? props.height : themeGet("appScale.inputHeightDefault")({
-          theme: theme
-        }),
-        boxShadow: "none",
-        opacity: state.isDisabled ? 0.7 : 1,
-        "&:hover": {
-          borderColor: props.invalid ? themeGet("colors.danger")({
-            theme: theme
-          }) : themeGet("colors.primary")({
-            theme: theme
-          })
-        },
-        "&:focus-within": {
-          outline: "0",
-          borderColor: props.invalid ? themeGet("colors.danger")({
-            theme: theme
-          }) : themeGet("colors.primary")({
-            theme: theme
-          }),
-          boxShadow: props.invalid ? themeGet("shadows.thickOutline")({
-            theme: theme
-          }) + " " + themeGet("colors.danger30")({
-            theme: theme
-          }) : themeGet("shadows.thickOutline")({
-            theme: theme
-          }) + " " + themeGet("colors.primary30")({
-            theme: theme
-          })
-        },
-        borderColor: state.isFocused ? themeGet("colors.primary")({
-          theme: theme
-        }) : props.inverted ? themeGet("colors.white30")({
-          theme: theme
-        }) : themeGet("colors.black30")({
-          theme: theme
-        }),
-        backgroundColor: props.inverted ? themeGet("colors.greyDarker")({
-          theme: theme
-        }) : themeGet("colors.white")({
-          theme: theme
-        }),
-        color: props.inverted ? themeGet("colors.greyLighter")({
-          theme: theme
-        }) : themeGet("colors.greyDarkest")({
-          theme: theme
-        }),
-        borderRadius: themeGet("radii.2")({
-          theme: theme
-        }),
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
-        }),
-        overflow: "hidden",
-        border: "1px solid ".concat(props.invalid ? themeGet("colors.danger")({
-          theme: theme
-        }) : themeGet("colors.black30")({
-          theme: theme
-        }))
-      });
-    },
-    container: function container(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        color: props.inverted ? themeGet("colors.greyLighter")({
-          theme: theme
-        }) : themeGet("colors.grey")({
-          theme: theme
+      },
+      "&:focus-within": {
+        outline: "0",
+        borderColor: props.invalid ? themeGet("colors.danger")({
+          theme
+        }) : themeGet("colors.primary")({
+          theme
         }),
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
+        boxShadow: props.invalid ? themeGet("shadows.thickOutline")({
+          theme
+        }) + " " + themeGet("colors.danger30")({
+          theme
+        }) : themeGet("shadows.thickOutline")({
+          theme
+        }) + " " + themeGet("colors.primary30")({
+          theme
         })
-      });
-    },
-    valueContainer: function valueContainer(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        padding: props.padding ? props.padding : "2px 4px",
-        overflow: "visible"
-      });
-    },
-    clearIndicator: function clearIndicator(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        padding: themeGet("space.xxs")({
-          theme: theme
-        }),
-        color: !state.isFocused && !props.inverted ? themeGet("colors.greyDark")({
-          theme: theme
-        }) : state.isFocused && !props.inverted ? themeGet("colors.primary")({
-          theme: theme
-        }) : !state.isFocused && props.inverted ? themeGet("colors.white")({
-          theme: theme
-        }) : themeGet("colors.primaryLight")({
-          theme: theme
-        }),
-        "&:hover": {
-          color: themeGet("colors.danger")({
-            theme: theme
-          })
-        }
-      });
-    },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        padding: themeGet("space.xxs")({
-          theme: theme
-        }),
-        color: !state.isFocused && !props.inverted ? themeGet("colors.greyDark")({
-          theme: theme
-        }) : state.isFocused && !props.inverted ? themeGet("colors.primary")({
-          theme: theme
-        }) : !state.isFocused && props.inverted ? themeGet("colors.white")({
-          theme: theme
-        }) : themeGet("colors.primaryLight")({
-          theme: theme
-        }),
-        "&:hover": {
-          color: !state.isFocused && !props.inverted ? themeGet("colors.primary")({
-            theme: theme
-          }) : state.isFocused && !props.inverted ? themeGet("colors.primaryDarkest")({
-            theme: theme
-          }) : !state.isFocused && props.inverted ? themeGet("colors.primary")({
-            theme: theme
-          }) : themeGet("colors.white")({
-            theme: theme
-          })
-        }
-      });
-    },
-    groupHeading: function groupHeading(provided) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        textTransform: "none",
-        fontSize: themeGet("fontSizes.0")({
-          theme: theme
-        }),
-        color: themeGet("colors.greyDark")({
-          theme: theme
+      },
+      borderColor: state.isFocused ? themeGet("colors.primary")({
+        theme
+      }) : props.inverted ? themeGet("colors.white30")({
+        theme
+      }) : themeGet("colors.black30")({
+        theme
+      }),
+      backgroundColor: props.inverted ? themeGet("colors.greyDarker")({
+        theme
+      }) : themeGet("colors.white")({
+        theme
+      }),
+      color: props.inverted ? themeGet("colors.greyLighter")({
+        theme
+      }) : themeGet("colors.greyDarkest")({
+        theme
+      }),
+      borderRadius: themeGet("radii.2")({
+        theme
+      }),
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      }),
+      overflow: "hidden",
+      border: "1px solid ".concat(props.invalid ? themeGet("colors.danger")({
+        theme
+      }) : themeGet("colors.black30")({
+        theme
+      }))
+    }),
+    container: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      color: props.inverted ? themeGet("colors.greyLighter")({
+        theme
+      }) : themeGet("colors.grey")({
+        theme
+      }),
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      })
+    }),
+    valueContainer: provided => ({
+      ...provided,
+      padding: props.padding ? props.padding : "2px 4px",
+      overflow: "visible"
+    }),
+    clearIndicator: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      padding: themeGet("space.xxs")({
+        theme
+      }),
+      color: !state.isFocused && !props.inverted ? themeGet("colors.greyDark")({
+        theme
+      }) : state.isFocused && !props.inverted ? themeGet("colors.primary")({
+        theme
+      }) : !state.isFocused && props.inverted ? themeGet("colors.white")({
+        theme
+      }) : themeGet("colors.primaryLight")({
+        theme
+      }),
+      "&:hover": {
+        color: themeGet("colors.danger")({
+          theme
         })
-      });
-    },
-    multiValue: function multiValue(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        backgroundColor: "transparent",
-        color: themeGet("colors.white")({
-          theme: theme
-        }),
-        alignItems: "center",
-        padding: "0 !important",
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
-        }),
-        wordWrap: "break-word"
-      });
-    },
-    multiValueLabel: function multiValueLabel(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: themeGet("colors.primary")({
-          theme: theme
-        }),
-        color: themeGet("colors.white")({
-          theme: theme
-        }),
-        padding: state.data.isFixed ? "4px 10px 5px 10px !important" : "4px 8px 5px 10px !important",
-        fontSize: "1.3rem",
-        fontWeight: themeGet("fontWeights.2")({
-          theme: theme
-        }),
-        wordWrap: "break-word",
-        whiteSpace: "break-spaces",
-        borderRadius: state.data.isFixed ? "15px" : "15px 0 0 15px"
-      });
-    },
-    multiValueRemove: function multiValueRemove(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
+      }
+    }),
+    dropdownIndicator: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      padding: themeGet("space.xxs")({
+        theme
+      }),
+      color: !state.isFocused && !props.inverted ? themeGet("colors.greyDark")({
+        theme
+      }) : state.isFocused && !props.inverted ? themeGet("colors.primary")({
+        theme
+      }) : !state.isFocused && props.inverted ? themeGet("colors.white")({
+        theme
+      }) : themeGet("colors.primaryLight")({
+        theme
+      }),
+      "&:hover": {
+        color: !state.isFocused && !props.inverted ? themeGet("colors.primary")({
+          theme
+        }) : state.isFocused && !props.inverted ? themeGet("colors.primaryDarkest")({
+          theme
+        }) : !state.isFocused && props.inverted ? themeGet("colors.primary")({
+          theme
+        }) : themeGet("colors.white")({
+          theme
+        })
+      }
+    }),
+    groupHeading: provided => ({
+      ...provided,
+      textTransform: "none",
+      fontSize: themeGet("fontSizes.0")({
+        theme
+      }),
+      color: themeGet("colors.greyDark")({
+        theme
+      })
+    }),
+    multiValue: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      backgroundColor: "transparent",
+      color: themeGet("colors.white")({
+        theme
+      }),
+      alignItems: "center",
+      padding: "0 !important",
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      }),
+      wordWrap: "break-word"
+    }),
+    multiValueLabel: (provided, state) => ({
+      ...provided,
+      backgroundColor: themeGet("colors.primary")({
+        theme
+      }),
+      color: themeGet("colors.white")({
+        theme
+      }),
+      padding: state.data.isFixed ? "4px 10px 5px 10px !important" : "4px 8px 5px 10px !important",
+      fontSize: "1.3rem",
+      fontWeight: themeGet("fontWeights.2")({
+        theme
+      }),
+      wordWrap: "break-word",
+      whiteSpace: "break-spaces",
+      borderRadius: state.data.isFixed ? "15px" : "15px 0 0 15px"
+    }),
+    multiValueRemove: (provided, state) => {
+      return {
+        ...provided,
         backgroundColor: themeGet("colors.primary")({
-          theme: theme
+          theme
         }),
         color: themeGet("colors.white")({
-          theme: theme
+          theme
         }),
         borderLeft: "solid 1px ".concat(themeGet("colors.primaryDark")({
-          theme: theme
+          theme
         })),
         padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
         cursor: "pointer",
         borderRadius: "0 15px 15px 0",
         transition: themeGet("transition.transitionDefault")({
-          theme: theme
+          theme
         }),
         "&:hover": {
           backgroundColor: themeGet("colors.primaryDark")({
-            theme: theme
+            theme
           }),
           color: themeGet("colors.white")({
-            theme: theme
+            theme
           })
         }
-      });
-    },
-    option: function option(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        backgroundColor: !state.isFocused && !props.inverted ? themeGet("colors.white")({
-          theme: theme
-        }) : state.isFocused && !props.inverted ? themeGet("colors.primaryLightest")({
-          theme: theme
-        }) : !state.isFocused && props.inverted ? themeGet("colors.greyDarker")({
-          theme: theme
-        }) : themeGet("colors.primaryDark")({
-          theme: theme
-        }),
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
-        }),
-        whiteSpace: "break-spaces"
-      });
-    },
-    placeholder: function placeholder(provided, state) {
-      return _objectSpread(_objectSpread({}, provided), {}, {
-        opacity: state.isDisabled ? 0.7 : 1,
-        color: props.inverted ? themeGet("colors.greyLightest")({
-          theme: theme
-        }) : themeGet("colors.greyDarkest")({
-          theme: theme
-        }),
-        fontSize: themeGet("fontSizes.1")({
-          theme: theme
-        })
-      });
-    }
+      };
+    },
+    option: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      backgroundColor: !state.isFocused && !props.inverted ? themeGet("colors.white")({
+        theme
+      }) : state.isFocused && !props.inverted ? themeGet("colors.primaryLightest")({
+        theme
+      }) : !state.isFocused && props.inverted ? themeGet("colors.greyDarker")({
+        theme
+      }) : themeGet("colors.primaryDark")({
+        theme
+      }),
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      }),
+      whiteSpace: "break-spaces"
+    }),
+    placeholder: (provided, state) => ({
+      ...provided,
+      opacity: state.isDisabled ? 0.7 : 1,
+      color: props.inverted ? themeGet("colors.greyLightest")({
+        theme
+      }) : themeGet("colors.greyDarkest")({
+        theme
+      }),
+      fontSize: themeGet("fontSizes.1")({
+        theme
+      })
+    })
   });
-  var components = _objectSpread({
-    MultiValueRemove: MultiValueRemove
-  }, (props === null || props === void 0 ? void 0 : props.components) || {});
-  var SelectComponent = (_SELECT_TYPES$props$s = SELECT_TYPES[props === null || props === void 0 ? void 0 : props.selectType]) !== null && _SELECT_TYPES$props$s !== void 0 ? _SELECT_TYPES$props$s : SELECT_TYPES["default"];
-  var component = /*#__PURE__*/React.createElement(Wrapper, _extends({
-    inverted: props.inverted,
-    "data-testid": props["data-testid"]
-  }, SelectStyles), props.label && /*#__PURE__*/React.createElement(Label, {
-    inverted: props.inverted,
-    bold: props.bold,
-    htmlFor: props.inputId,
-    invalid: props.invalid
-  }, props.label, props.mandatory && /*#__PURE__*/React.createElement(Small, {
-    color: "danger",
-    ml: "xs"
-  }, "*")), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-    ref: inputRef,
-    styles: customStyles,
-    theme: theme,
-    inputId: props.inputId,
+  const components = {
+    MultiValueRemove,
+    ...((props === null || props === void 0 ? void 0 : props.components) || {})
+  };
+  const SelectComponent = (_SELECT_TYPES$props$s = SELECT_TYPES[props === null || props === void 0 ? void 0 : props.selectType]) !== null && _SELECT_TYPES$props$s !== void 0 ? _SELECT_TYPES$props$s : SELECT_TYPES.default;
+  const component = /*#__PURE__*/_jsxs(Wrapper, {
     inverted: props.inverted,
-    isMulti: props.isMulti,
-    classNamePrefix: props.classNamePrefix,
-    onChange: props.onChange,
-    "aria-label": props.ariaLabel
-  }, props, {
-    components: components
-  })));
-  return props.theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: props.theme
-  }, component) : component;
+    "data-testid": props["data-testid"],
+    ...SelectStyles,
+    children: [props.label && /*#__PURE__*/_jsxs(Label, {
+      inverted: props.inverted,
+      bold: props.bold,
+      htmlFor: props.inputId,
+      invalid: props.invalid,
+      children: [props.label, props.mandatory && /*#__PURE__*/_jsx(Small, {
+        color: "danger",
+        ml: "xs",
+        children: "*"
+      })]
+    }), /*#__PURE__*/_jsx(SelectComponent, {
+      ref: inputRef,
+      styles: customStyles,
+      theme: theme,
+      inputId: props.inputId,
+      inverted: props.inverted,
+      isMulti: props.isMulti,
+      classNamePrefix: props.classNamePrefix,
+      onChange: props.onChange,
+      "aria-label": props.ariaLabel,
+      ...props,
+      components: components
+    })]
+  });
+  return props.theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: props.theme,
+    children: component
+  }) : component;
 });
 Select.propTypes = {
   /** Points to options object, see example code above */
@@ -407,12 +395,12 @@ Select.propTypes = {
   /** Specifies the label for the `Select` */
   label: PropTypes.string,
   // ariaLabel prop must be specified if label is not provided
-  ariaLabel: function ariaLabel(props, propName) {
+  ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
       return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is not provided, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },
@@ -421,12 +409,12 @@ Select.propTypes = {
   /** Makes select disabled */
   isDisabled: PropTypes.bool,
   /** Specifies the ID for the rendered Select box. If you use the label prop label will automatically point to this ID, so this is required. */
-  inputId: function inputId(props, propName) {
+  inputId: (props, propName) => {
     if (props.label && (props[propName] == null || props[propName] === "")) {
       return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is provided, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },