@ultraviolet/ui 1.28.0 → 1.29.0

package/dist/src/components/SelectInput/index.js

@@ -14,37 +14,31 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 
 const StyledSeparator = /*#__PURE__*/_styled(Separator, {
   target: "e11gt5pw5"
-})("background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.border;
-}, ";height:100%;");
-const getControlColor = _ref2 => {
-  let {
-    state,
-    error,
-    theme
-  } = _ref2;
+})("background-color:", ({
+  theme
+}) => theme.colors.neutral.border, ";height:100%;");
+const getControlColor = ({
+  state,
+  error,
+  theme
+}) => {
   if (state.isDisabled) return theme.colors.neutral.textDisabled;
   if (error) return theme.colors.danger.text;
   return theme.colors.neutral.text;
 };
-const getPlaceholderColor = _ref3 => {
-  let {
-    state,
-    error,
-    theme
-  } = _ref3;
+const getPlaceholderColor = ({
+  state,
+  error,
+  theme
+}) => {
   if (state.isDisabled) return theme.colors.neutral.textDisabled;
   if (error) return theme.colors.danger.text;
   return theme.colors.neutral.textWeak;
 };
-const getOptionColor = _ref4 => {
-  let {
-    state,
-    theme
-  } = _ref4;
+const getOptionColor = ({
+  state,
+  theme
+}) => {
   let color = theme.colors.neutral.text;
   let backgroundColor = theme.colors.neutral.backgroundWeakElevated;
   if (state.isDisabled) {
@@ -61,197 +55,182 @@ const getOptionColor = _ref4 => {
     color
   };
 };
-const getSelectStyles = _ref5 => {
-  let {
-    error,
-    customStyle,
-    animation,
-    animationDuration,
-    noTopLabel,
-    theme
-  } = _ref5;
-  return {
-    control: (provided, state) => ({
-      ...provided,
-      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.background,
-      borderColor: error ? theme.colors.danger.border : theme.colors.neutral.border,
-      borderRadius: '4px',
-      borderStyle: 'solid',
-      borderWidth: '1px',
-      boxShadow: 'none',
-      color: getControlColor({
-        error,
-        state,
-        theme
-      }),
-      fontSize: '16px',
-      fontWeight: 500,
-      lineHeight: '24px',
-      minHeight: '48px',
-      transition: 'border-color 200ms ease, box-shadow 200ms ease',
-      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-      ...(!state.isDisabled && {
-        ':focus-within': {
-          borderColor: error ? theme.colors.danger.border : theme.colors.primary.border,
-          boxShadow: error ? theme.shadows.focusDanger : theme.shadows.focusPrimary,
-          svg: {
-            fill: error ? theme.colors.danger.text : theme.colors.primary.text
-          }
-        },
-        ':hover': {
-          borderColor: error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover,
-          svg: {
-            fill: error ? theme.colors.danger.text : theme.colors.primary.text
-          }
-        }
-      }),
-      ...(customStyle(state)?.['control'] || {}),
-      animation: animation ? `${animationDuration}ms ${animations[animation]}` : 'none'
-    }),
-    indicatorsContainer: provided => ({
-      ...provided,
-      maxHeight: '48px'
-    }),
-    indicatorSeparator: (provided, state) => ({
-      ...provided,
-      backgroundColor: theme.colors.neutral.border,
-      display: 'none',
-      ...(customStyle(state)?.['indicatorSeparator'] || {})
-    }),
-    input: provided => ({
-      ...provided,
-      flexGrow: 1,
-      marginLeft: 0,
-      paddingTop: noTopLabel ? 0 : 11
-    }),
-    menu: (provided, state) => ({
-      ...provided,
-      ...(customStyle(state)?.['menu'] || {}),
-      boxShadow: theme.shadows.menu
-    }),
-    menuList: (provided, state) => ({
-      ...provided,
-      backgroundColor: theme.colors.neutral.backgroundWeak,
-      maxHeight: '225px',
-      ...(customStyle(state)?.['menuList'] || {})
-    }),
-    menuPortal: (provided, state) => ({
-      ...provided,
-      zIndex: 10000,
-      ...(customStyle(state)?.['menuPortal'] || {})
-    }),
-    multiValue: (provided, state) => ({
-      ...provided,
-      alignItems: 'center',
-      backgroundColor: theme.colors.neutral.backgroundDisabled,
-      borderRadius: '4px',
-      color: theme.colors.neutral.text,
-      fontSize: '14px',
-      fontWeight: 500,
-      height: '24px',
-      justifyContent: 'center',
-      marginTop: theme.space[noTopLabel ? '0.5' : '2'],
-      textOverflow: 'ellipsis',
-      ...(customStyle(state)?.['multiValue'] || {})
-    }),
-    multiValueLabel: (provided, state) => ({
-      ...provided,
-      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
-      fontSize: '14px',
-      fontWeight: 'normal',
-      lineHeight: '20px',
-      ...(customStyle(state)?.['multiValueLabel'] || {})
-    }),
-    multiValueRemove: (provided, state) => ({
-      ...provided,
-      ...(state.isDisabled ? {
-        color: theme.colors.neutral.textDisabled,
-        cursor: 'none',
-        pointerEvents: 'none'
-      } : {
-        color: theme.colors.primary.text
-      }),
-      ':hover': {
-        color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text,
-        cursor: state.isDisabled ? 'none' : 'pointer',
-        pointerEvents: state.isDisabled ? 'none' : 'fill'
-      },
-      ...(customStyle(state)?.['multiValueRemove'] || {})
+const getSelectStyles = ({
+  error,
+  customStyle,
+  animation,
+  animationDuration,
+  noTopLabel,
+  theme
+}) => ({
+  control: (provided, state) => ({
+    ...provided,
+    backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.neutral.background,
+    borderColor: error ? theme.colors.danger.border : theme.colors.neutral.border,
+    borderRadius: '4px',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    boxShadow: 'none',
+    color: getControlColor({
+      error,
+      state,
+      theme
     }),
-    option: (provided, state) => ({
-      ...provided,
-      ...getOptionColor({
-        state,
-        theme
-      }),
-      cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-      ':active': {
-        backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
-        color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text
+    fontSize: '16px',
+    fontWeight: 500,
+    lineHeight: '24px',
+    minHeight: '48px',
+    transition: 'border-color 200ms ease, box-shadow 200ms ease',
+    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+    ...(!state.isDisabled && {
+      ':focus-within': {
+        borderColor: error ? theme.colors.danger.border : theme.colors.primary.border,
+        boxShadow: error ? theme.shadows.focusDanger : theme.shadows.focusPrimary,
+        svg: {
+          fill: error ? theme.colors.danger.text : theme.colors.primary.text
+        }
       },
       ':hover': {
-        backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
-        color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text
-      },
-      ...(customStyle(state)?.['option'] || {})
+        borderColor: error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover,
+        svg: {
+          fill: error ? theme.colors.danger.text : theme.colors.primary.text
+        }
+      }
     }),
-    placeholder: (provided, state) => ({
-      ...provided,
-      color: getPlaceholderColor({
-        error,
-        state,
-        theme
-      }),
-      ...(customStyle(state)?.['placeholder'] || {})
+    ...(customStyle(state)?.['control'] || {}),
+    animation: animation ? `${animationDuration}ms ${animations[animation]}` : 'none'
+  }),
+  indicatorsContainer: provided => ({
+    ...provided,
+    maxHeight: '48px'
+  }),
+  indicatorSeparator: (provided, state) => ({
+    ...provided,
+    backgroundColor: theme.colors.neutral.border,
+    display: 'none',
+    ...(customStyle(state)?.['indicatorSeparator'] || {})
+  }),
+  input: provided => ({
+    ...provided,
+    flexGrow: 1,
+    marginLeft: 0,
+    paddingTop: noTopLabel ? 0 : 11
+  }),
+  menu: (provided, state) => ({
+    ...provided,
+    ...(customStyle(state)?.['menu'] || {}),
+    boxShadow: theme.shadows.menu
+  }),
+  menuList: (provided, state) => ({
+    ...provided,
+    backgroundColor: theme.colors.neutral.backgroundWeak,
+    maxHeight: '225px',
+    ...(customStyle(state)?.['menuList'] || {})
+  }),
+  menuPortal: (provided, state) => ({
+    ...provided,
+    zIndex: 10000,
+    ...(customStyle(state)?.['menuPortal'] || {})
+  }),
+  multiValue: (provided, state) => ({
+    ...provided,
+    alignItems: 'center',
+    backgroundColor: theme.colors.neutral.backgroundDisabled,
+    borderRadius: '4px',
+    color: theme.colors.neutral.text,
+    fontSize: '14px',
+    fontWeight: 500,
+    height: '24px',
+    justifyContent: 'center',
+    marginTop: theme.space[noTopLabel ? '0.5' : '2'],
+    textOverflow: 'ellipsis',
+    ...(customStyle(state)?.['multiValue'] || {})
+  }),
+  multiValueLabel: (provided, state) => ({
+    ...provided,
+    color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: '20px',
+    ...(customStyle(state)?.['multiValueLabel'] || {})
+  }),
+  multiValueRemove: (provided, state) => ({
+    ...provided,
+    ...(state.isDisabled ? {
+      color: theme.colors.neutral.textDisabled,
+      cursor: 'none',
+      pointerEvents: 'none'
+    } : {
+      color: theme.colors.primary.text
     }),
-    singleValue: (provided, state) => ({
-      ...provided,
-      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
-      marginLeft: state.hasValue ? 0 : undefined,
-      marginRight: state.hasValue ? 0 : undefined,
-      marginTop: !state.hasValue || noTopLabel ? 0 : '5px',
-      paddingLeft: state.hasValue ? 0 : undefined,
-      ...(customStyle(state)?.['singleValue'] || {})
+    ':hover': {
+      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text,
+      cursor: state.isDisabled ? 'none' : 'pointer',
+      pointerEvents: state.isDisabled ? 'none' : 'fill'
+    },
+    ...(customStyle(state)?.['multiValueRemove'] || {})
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    ...getOptionColor({
+      state,
+      theme
     }),
-    valueContainer: (provided, state) => ({
-      ...provided,
-      ...(customStyle(state)?.['valueContainer'] || {}),
-      cursor: state.isDisabled ? 'not-allowed' : undefined,
-      height: '100%',
-      label: {
-        display: noTopLabel ? 'none' : 'initial'
-      },
-      paddingTop: 0
-    })
-  };
-};
+    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+    ':active': {
+      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
+      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.primary.text
+    },
+    ':hover': {
+      backgroundColor: state.isDisabled ? theme.colors.neutral.backgroundDisabled : theme.colors.primary.background,
+      color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text
+    },
+    ...(customStyle(state)?.['option'] || {})
+  }),
+  placeholder: (provided, state) => ({
+    ...provided,
+    color: getPlaceholderColor({
+      error,
+      state,
+      theme
+    }),
+    ...(customStyle(state)?.['placeholder'] || {})
+  }),
+  singleValue: (provided, state) => ({
+    ...provided,
+    color: state.isDisabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.text,
+    marginLeft: state.hasValue ? 0 : undefined,
+    marginRight: state.hasValue ? 0 : undefined,
+    marginTop: !state.hasValue || noTopLabel ? 0 : '5px',
+    paddingLeft: state.hasValue ? 0 : undefined,
+    ...(customStyle(state)?.['singleValue'] || {})
+  }),
+  valueContainer: (provided, state) => ({
+    ...provided,
+    ...(customStyle(state)?.['valueContainer'] || {}),
+    cursor: state.isDisabled ? 'not-allowed' : undefined,
+    height: '100%',
+    label: {
+      display: noTopLabel ? 'none' : 'initial'
+    },
+    paddingTop: 0
+  })
+});
 const StyledContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['isDisabled', 'additionalStyles'].includes(prop),
   target: "e11gt5pw4"
-})("width:100%;", _ref6 => {
-  let {
-    isDisabled
-  } = _ref6;
-  return isDisabled && `pointer-events: initial;`;
-}, ";", _ref7 => {
-  let {
-    additionalStyles
-  } = _ref7;
-  return /*#__PURE__*/css(additionalStyles);
-}, ";");
+})("width:100%;", ({
+  isDisabled
+}) => isDisabled && `pointer-events: initial;`, ";", ({
+  additionalStyles
+}) => /*#__PURE__*/css(additionalStyles), ";");
 const StyledError = /*#__PURE__*/_styled("div", {
   target: "e11gt5pw3"
-})("font-size:12px;color:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.danger.text;
-}, ";padding-top:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space['0.25'];
-}, ";");
+})("font-size:12px;color:", ({
+  theme
+}) => theme.colors.danger.text, ";padding-top:", ({
+  theme
+}) => theme.space['0.25'], ";");
 const SelectContainer = props => {
   const {
     children,
@@ -284,179 +263,151 @@ const SelectContainer = props => {
 const StyledPlaceholder = /*#__PURE__*/_styled('label', {
   shouldForwardProp: prop => !['error', 'hasValue', 'isDisabled', 'isMulti'].includes(prop),
   target: "e11gt5pw2"
-})("position:absolute;left:0;font-weight:400;pointer-events:none;color:", _ref10 => {
-  let {
-    theme,
-    error
-  } = _ref10;
-  return error ? theme.colors.danger.text : theme.colors.neutral.text;
-}, ";white-space:nowrap;width:100%;height:100%;font-size:16px;transition:transform 250ms ease;opacity:0;", _ref11 => {
-  let {
-    hasValue
-  } = _ref11;
-  return hasValue && `
+})("position:absolute;left:0;font-weight:400;pointer-events:none;color:", ({
+  theme,
+  error
+}) => error ? theme.colors.danger.text : theme.colors.neutral.text, ";white-space:nowrap;width:100%;height:100%;font-size:16px;transition:transform 250ms ease;opacity:0;", ({
+  hasValue
+}) => hasValue && `
     transform: translate(0, -8px) scale(0.8);
     transform-origin: left;
     padding-left: 8px;
     left: 0;
     top: 2px;
     opacity: 1;
-  `;
-}, " ", _ref12 => {
-  let {
-    isDisabled,
-    hasValue
-  } = _ref12;
-  return hasValue && isDisabled && 'opacity: 0.5';
-}, ";");
+  `, " ", ({
+  isDisabled,
+  hasValue
+}) => hasValue && isDisabled && 'opacity: 0.5', ";");
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e11gt5pw1"
-})("margin-left:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.space['1'];
-}, ";color:", _ref14 => {
-  let {
-    isSelectedAndNotFocused,
-    theme
-  } = _ref14;
-  return isSelectedAndNotFocused ? theme.colors.primary.textStrong : undefined;
-}, ";");
+})("margin-left:", ({
+  theme
+}) => theme.space['1'], ";color:", ({
+  isSelectedAndNotFocused,
+  theme
+}) => isSelectedAndNotFocused ? theme.colors.primary.textStrong : undefined, ";");
 const MaxLineStyledText = /*#__PURE__*/_styled(StyledText, {
   target: "e11gt5pw0"
-})("-webkit-line-clamp:3;margin-top:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space['2'];
-}, ";");
-const ValueContainer = _ref16 => {
-  let {
-    isDisabled,
-    children,
-    selectProps: {
-      error,
-      labelId,
-      inputId,
-      ...selectProps
-    },
-    isMulti,
-    hasValue,
-    clearValue,
-    getStyles,
-    getValue,
-    getClassNames,
-    isRtl,
-    cx,
-    options,
-    selectOption,
-    setValue,
-    theme,
-    className,
-    innerProps
-  } = _ref16;
-  return jsx(components.ValueContainer, {
-    clearValue: clearValue,
-    getStyles: getStyles,
-    getValue: getValue,
-    isRtl: isRtl,
-    cx: cx,
-    options: options,
-    selectOption: selectOption,
-    setValue: setValue,
-    theme: theme,
-    className: className,
-    innerProps: innerProps,
-    selectProps: selectProps,
-    isMulti: isMulti,
-    hasValue: hasValue,
-    isDisabled: isDisabled,
-    getClassNames: getClassNames,
-    children: jsxs(Fragment, {
-      children: [selectProps.placeholder ? jsx(StyledPlaceholder, {
-        as: "label",
-        id: labelId,
-        htmlFor: inputId,
-        "aria-live": "assertive",
-        error: error,
-        isMulti: isMulti,
-        isDisabled: isDisabled,
-        hasValue: hasValue,
-        children: selectProps.placeholder
-      }) : null, children]
-    })
-  });
-};
-const inputStyles = _ref17 => {
-  let {
+})("-webkit-line-clamp:3;margin-top:", ({
+  theme
+}) => theme.space['2'], ";");
+const ValueContainer = ({
+  isDisabled,
+  children,
+  selectProps: {
+    error,
+    labelId,
+    inputId,
+    ...selectProps
+  },
+  isMulti,
+  hasValue,
+  clearValue,
+  getStyles,
+  getValue,
+  getClassNames,
+  isRtl,
+  cx,
+  options,
+  selectOption,
+  setValue,
+  theme,
+  className,
+  innerProps
+}) => jsx(components.ValueContainer, {
+  clearValue: clearValue,
+  getStyles: getStyles,
+  getValue: getValue,
+  isRtl: isRtl,
+  cx: cx,
+  options: options,
+  selectOption: selectOption,
+  setValue: setValue,
+  theme: theme,
+  className: className,
+  innerProps: innerProps,
+  selectProps: selectProps,
+  isMulti: isMulti,
+  hasValue: hasValue,
+  isDisabled: isDisabled,
+  getClassNames: getClassNames,
+  children: jsxs(Fragment, {
+    children: [selectProps.placeholder ? jsx(StyledPlaceholder, {
+      as: "label",
+      id: labelId,
+      htmlFor: inputId,
+      "aria-live": "assertive",
+      error: error,
+      isMulti: isMulti,
+      isDisabled: isDisabled,
+      hasValue: hasValue,
+      children: selectProps.placeholder
+    }) : null, children]
+  })
+});
+const inputStyles = ({
+  isMulti
+}) => /*#__PURE__*/css("margin-left:0px;", !isMulti && 'caret-color: transparent', ";");
+const Input = ({
+  isMulti,
+  hasValue,
+  selectProps: {
+    inputId,
+    labelId,
+    placeholder,
+    ...selectProps
+  },
+  clearValue,
+  getStyles,
+  getValue,
+  isRtl,
+  cx,
+  options,
+  selectOption,
+  setValue,
+  theme,
+  className,
+  isHidden,
+  ...props
+}) => jsx(components.Input, {
+  ...props,
+  css: inputStyles({
     isMulti
-  } = _ref17;
-  return /*#__PURE__*/css("margin-left:0px;", !isMulti && 'caret-color: transparent', ";");
-};
-const Input = _ref18 => {
-  let {
-    isMulti,
-    hasValue,
-    selectProps: {
-      inputId,
-      labelId,
-      placeholder,
-      ...selectProps
-    },
-    clearValue,
-    getStyles,
-    getValue,
-    isRtl,
-    cx,
-    options,
-    selectOption,
-    setValue,
-    theme,
-    className,
-    isHidden,
-    ...props
-  } = _ref18;
-  return jsx(components.Input, {
-    ...props,
-    css: inputStyles({
-      isMulti
-    }),
-    id: inputId,
-    "aria-controls": labelId,
-    hasValue: hasValue,
-    isMulti: isMulti,
-    clearValue: clearValue,
-    getStyles: getStyles,
-    getValue: getValue,
-    isRtl: isRtl,
-    cx: cx,
-    options: options,
-    selectOption: selectOption,
-    setValue: setValue,
-    theme: theme,
-    className: className,
-    isHidden: isHidden,
-    selectProps: {
-      ...selectProps,
-      placeholder
-    }
-  });
-};
-const Option = _ref19 => {
-  let {
-    selectProps,
-    value,
-    label,
-    children,
-    data: {
-      inlineDescription,
-      description
-    },
-    isSelected,
-    data,
-    ...props
-  } = _ref19;
+  }),
+  id: inputId,
+  "aria-controls": labelId,
+  hasValue: hasValue,
+  isMulti: isMulti,
+  clearValue: clearValue,
+  getStyles: getStyles,
+  getValue: getValue,
+  isRtl: isRtl,
+  cx: cx,
+  options: options,
+  selectOption: selectOption,
+  setValue: setValue,
+  theme: theme,
+  className: className,
+  isHidden: isHidden,
+  selectProps: {
+    ...selectProps,
+    placeholder
+  }
+});
+const Option = ({
+  selectProps,
+  value,
+  label,
+  children,
+  data: {
+    inlineDescription,
+    description
+  },
+  isSelected,
+  data,
+  ...props
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   return jsx("div", {
     "data-testid": `option-${selectProps.name || ''}-${isJSONString(value) ? label : value}`,
@@ -547,39 +498,38 @@ const MultiValueRemove = props => jsx(components.MultiValueRemove, {
   })
 });
 const defaultCustomStyle = () => ({});
-const FwdSelectInput = _ref20 => {
-  let {
-    animation = 'pulse',
-    animationDuration = 1000,
-    animationOnChange = false,
-    children,
-    className,
-    customComponents,
-    customStyle = defaultCustomStyle,
-    disabled = false,
-    error,
-    innerRef,
-    inputId: inputIdProp,
-    isClearable = false,
-    isMulti = false,
-    isSearchable = true,
-    menuPortalTarget,
-    noTopLabel = false,
-    onBlur,
-    onChange,
-    onFocus,
-    options,
-    placeholder,
-    readOnly = false,
-    value,
-    name,
-    id: idProp,
-    time,
-    isLoading,
-    required,
-    emptyState,
-    'data-testid': dataTestId
-  } = _ref20;
+const FwdSelectInput = ({
+  animation = 'pulse',
+  animationDuration = 1000,
+  animationOnChange = false,
+  children,
+  className,
+  customComponents,
+  customStyle = defaultCustomStyle,
+  disabled = false,
+  error,
+  innerRef,
+  inputId: inputIdProp,
+  isClearable = false,
+  isMulti = false,
+  isSearchable = true,
+  menuPortalTarget,
+  noTopLabel = false,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readOnly = false,
+  value,
+  name,
+  id: idProp,
+  time,
+  isLoading,
+  required,
+  emptyState,
+  'data-testid': dataTestId
+}) => {
   const id = useId();
   const inputId = inputIdProp ?? id;
   const theme = useTheme();
@@ -587,18 +537,15 @@ const FwdSelectInput = _ref20 => {
   const currentValue = value?.value;
 
   // Options need to keep the same reference otherwise react-select doesn't focus the selected option
-  const selectOptions = useMemo(() => options || flattenChildren(children).map(_ref21 => {
-    let {
-      props: {
-        children: label,
-        ...subProps
-      }
-    } = _ref21;
-    return {
-      ...subProps,
-      label
-    };
-  }), [options, children]);
+  const selectOptions = useMemo(() => options || flattenChildren(children).map(({
+    props: {
+      children: label,
+      ...subProps
+    }
+  }) => ({
+    ...subProps,
+    label
+  })), [options, children]);
   useEffect(() => {
     if (animationOnChange) {
       setIsAnimated(true);