@teamturing/react-kit 2.19.13 → 2.19.15

package/dist/index.js

@@ -18869,6 +18869,7 @@ const Dialog = ({
   isOpen,
   onDismiss,
   size = 'm',
+  initialFocusRef,
   sx
 }, ref) => {
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
@@ -18891,7 +18892,7 @@ const Dialog = ({
   }, [handleDismiss]);
   useFocusTrap({
     containerRef: dialogRef,
-    initialFocusRef: closeButtonRef,
+    initialFocusRef: initialFocusRef || closeButtonRef,
     disabled: !isOpen
   });
   React.useEffect(() => {
@@ -20840,7 +20841,9 @@ const OverlayPopper = ({
   renderOverlay,
   placement = 'bottom-start',
   focusZoneSettings,
-  focusTrapSettings
+  focusTrapSettings,
+  onOpen,
+  onClose
 }) => {
   const {
     refs,
@@ -20861,11 +20864,23 @@ const OverlayPopper = ({
   } = useToggleHandler({
     initialState: false
   });
-  const handleDismiss = () => {
+  const handleOverlayToggle = () => {
+    if (!isOpen) onOpen?.();else onClose?.();
+    toggleOverlay();
+  };
+  const handleOverlayOpen = () => {
+    onOpen?.();
+    openOverlay();
+  };
+  const handleOverlayClose = () => {
+    onClose?.();
     closeOverlay();
   };
+  const handleDismiss = () => {
+    handleOverlayClose();
+  };
   const defaultPopperProps = {
-    onClick: toggleOverlay,
+    onClick: handleOverlayToggle,
     tabIndex: 0,
     ...{
       ref: refs.setReference
@@ -20875,7 +20890,7 @@ const OverlayPopper = ({
     ...defaultPopperProps
   }, {
     isOpen,
-    openOverlay
+    openOverlay: handleOverlayOpen
   }) : React.Children.map(propChildren, child => /*#__PURE__*/React.cloneElement(child, {
     ...defaultPopperProps
   }));
@@ -20901,93 +20916,125 @@ const OverlayPopper = ({
       onDismiss: handleDismiss
     }, {
       isOpen,
-      closeOverlay
+      closeOverlay: handleOverlayClose
     }, {
       elements
     })]
   });
 };
 
-const OverlaySelectInput = ({
+const TextInputTrailingAction = ({
+  icon: Icon,
+  disabled,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextInputTrailingAction, {
+  ref: ref,
+  ...props,
+  disabled: disabled,
+  "aria-disabled": disabled,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
+});
+const BaseTextInputTrailingAction = styled__default.default(UnstyledButton)`
+  display: inline-flex;
+  padding: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+
+  & svg {
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    color: ${({
+  theme
+}) => theme.colors['icon/neutral/bolder']};
+  }
+
+  &:hover {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    & svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+    }
+  }
+
+  ${sx}
+`;
+var TextInputTrailingAction$1 = /*#__PURE__*/React.forwardRef(TextInputTrailingAction);
+
+const TextInput = ({
+  type = 'text',
+  disabled,
   validationStatus,
   leadingVisual: LeadingVisual,
-  children,
+  trailingVisual: TrailingVisual,
+  trailingAction,
   ...props
 }, ref) => {
   const inputRef = useProvidedOrCreatedRef(ref);
   const focusInput = () => {
     inputRef.current?.focus();
   };
-  const {
-    disabled
-  } = props;
-  return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
-    renderOverlay: (overlayProps, _, {
-      elements
-    }) => /*#__PURE__*/jsxRuntimeExports.jsx(Overlay$1, {
-      ...overlayProps,
-      style: {
-        ...overlayProps.style,
-        width: elements?.reference?.getBoundingClientRect().width
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper$1, {
+    disabled: disabled,
+    onClick: focusInput,
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    hasTrailingVisual: !isNullable(TrailingVisual),
+    hasTrailingAction: !isNullable(trailingAction),
+    validationStatus: validationStatus,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+      sx: {
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color$1['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 16,
+          height: 16,
+          color: color$1['icon/neutral/bold']
+        }
       },
-      children: children
-    }),
-    children: (popperProps, {
-      openOverlay
-    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper$1, {
-      ...popperProps,
-      tabIndex: disabled ? -1 : 0,
+      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      type: type,
       disabled: disabled,
-      onClick: focusInput,
-      hasLeadingVisual: !isNullable(LeadingVisual),
-      validationStatus: validationStatus,
-      onKeyDown: e => {
-        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
-          e.preventDefault();
-          openOverlay();
+      ...props
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      sx: {
+        'display': 'flex',
+        'alignItems': 'center',
+        'columnGap': 2,
+        'flexShrink': 0,
+        'fontSize': 'xxs',
+        'fontWeight': 'medium',
+        'color': color$1['text/neutral'],
+        '& > svg': {
+          display: 'block',
+          width: 16,
+          height: 16,
+          color: color$1['icon/neutral/bold']
         }
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        sx: {
-          'flexShrink': 0,
-          'fontSize': 'xxs',
-          'fontWeight': 'medium',
-          'color': 'text/neutral',
-          '& > svg': {
-            display: 'block',
-            width: 16,
-            height: 16,
-            color: 'icon/neutral/bold'
-          }
-        },
-        children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
-        ref: e => {
-          isFunction(ref) ? ref(e) : null;
-          inputRef.current = e;
-        },
-        value: '',
-        onChange: noop$2,
-        ...props,
-        autoComplete: 'off',
-        tabIndex: -1,
-        onClick: e => {
-          popperProps.onClick?.(e);
-          props.onClick?.(e);
-        }
-      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
-        sx: {
-          position: 'absolute',
-          top: '50%',
-          transform: 'translateY(-50%)',
-          right: 4,
-          pointerEvents: 'none'
-        },
-        icon: SvgChevronDown,
-        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-        size: 16
-      })]
-    })
+      children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
+        disabled: disabled
+      }) : null]
+    })]
   });
 };
 const TextInputWrapper$1 = styled__default.default.div`
@@ -21004,10 +21051,7 @@ const TextInputWrapper$1 = styled__default.default.div`
   background-color: ${({
   theme
 }) => theme.colors['bg/input']};
-  cursor: default;
-  input {
-    cursor: default;
-  }
+  cursor: text;
   display: inline-flex;
   align-items: center;
 
@@ -21062,7 +21106,7 @@ const TextInputWrapper$1 = styled__default.default.div`
       }
     `}
 
-  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+  ${props => props.validationStatus !== 'error' && styled.css`
       &:focus-within {
         &:after {
           border-color: ${({
@@ -21093,6 +21137,21 @@ const TextInputWrapper$1 = styled__default.default.div`
       }
     `}
 
+  ${props => props.hasTrailingVisual && styled.css`
+      padding-right: ${forcePixelValue(props.theme.space[4])};
+    `}
+
+  ${props => props.hasTrailingAction && styled.css`
+      padding-right: ${forcePixelValue(props.theme.space[2])};
+    `}
+
+  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && styled.css`
+      input {
+        padding-right: ${forcePixelValue(props.theme.space[2])};
+      }
+    `}
+
+
   transition: color 100ms, background-color 100ms;
   &:after {
     transition: border-color 100ms;
@@ -21120,102 +21179,226 @@ const BaseInput$1 = styled__default.default(UnstyledInput$1)`
 }) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space[10])};
+}) => forcePixelValue(theme.space[4])};
   padding-bottom: ${({
   theme
 }) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
 }) => forcePixelValue(theme.space[4])};
-
-  white-space: pre;
-  text-overflow: ellipsis;
 `;
-var OverlaySelectInput$1 = /*#__PURE__*/React.forwardRef(OverlaySelectInput);
-
-const SelectOption = ({
-  children: propChildren,
-  ...props
-}) => {
-  const children = isNullable(propChildren) ? props.label : propChildren;
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSelectOption, {
-    ...props,
-    children: children
-  });
-};
-const BaseSelectOption = styled__default.default.option``;
+var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
+  TrailingAction: TextInputTrailingAction$1
+});
 
-const Select = ({
-  children,
-  disabled,
+const SearchSelectInput = ({
   validationStatus,
   leadingVisual: LeadingVisual,
-  placeholder = '옵션 선택',
+  children,
+  onChange,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen,
+  onClose,
+  searchInputProps,
+  value,
+  renderValue = value => value?.toString(),
   ...props
 }, ref) => {
-  const PLACEHOLDER_VALUE = '';
-  const selectRef = useProvidedOrCreatedRef(ref);
-  const [isValueEmpty, setIsValueEmpty] = React.useState(isNullable(props.value) || props.value === PLACEHOLDER_VALUE);
-  const focusSelect = () => {
-    selectRef.current?.focus();
+  const theme = styled.useTheme();
+  const hasLeadingVisual = !isNullable(LeadingVisual);
+  const valueInputRef = useProvidedOrCreatedRef(ref);
+  const labelInputRef = React.useRef(null);
+  const focusInput = () => {
+    labelInputRef.current?.focus();
   };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SelectWrapper, {
-    disabled: disabled,
-    onClick: focusSelect,
-    hasLeadingVisual: !isNullable(LeadingVisual),
-    validationStatus: validationStatus,
-    isValueEmpty: isValueEmpty,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-      sx: {
-        'flexShrink': 0,
-        'fontSize': 'xxs',
-        'fontWeight': 'medium',
-        'color': 'text/neutral',
-        '& > svg': {
-          display: 'block',
-          width: 16,
-          height: 16,
-          color: 'icon/neutral/bold'
+  const {
+    id,
+    disabled,
+    placeholder
+  } = props;
+  const handleSelect = item => {
+    if (labelInputRef.current && valueInputRef.current) {
+      /**
+       * ! valueInput의 native onChange를 trigger하려고 했으나 작동하지 않음.
+       * ! 일단 Custom onChange를 만들어서 해결.
+       */
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+      nativeInputValueSetter?.call(valueInputRef.current, item.value.toString());
+      onChange?.(item);
+    }
+  };
+  const listContainerRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const activeDescendantRef = React.useRef();
+  return /*#__PURE__*/jsxRuntimeExports.jsx(OverlayPopper, {
+    focusTrapSettings: {
+      initialFocusRef: searchInputRef,
+      restoreFocusOnCleanUp: true,
+      ...focusTrapSettings
+    },
+    focusZoneSettings: {
+      containerRef: listContainerRef,
+      activeDescendantFocus: searchInputRef,
+      focusOutBehavior: 'stop',
+      onActiveDescendantChanged: (current, previous) => {
+        activeDescendantRef.current = current;
+        if (current && listContainerRef.current) {
+          current.style.backgroundColor = theme.colors['bg/selected/subtle'];
+          scrollIntoView({
+            childrenRef: current,
+            scrollContainerRef: listContainerRef.current,
+            options: {
+              behavior: 'auto',
+              direction: 'vertical',
+              offset: 0
+            }
+          });
+        }
+        if (previous && current !== previous) {
+          previous.style.backgroundColor = '';
         }
       },
-      children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseSelect, {
-      ref: e => {
-        isFunction(ref) ? ref(e) : null;
-        selectRef.current = e;
+      focusableElementFilter: elem => {
+        return elem instanceof HTMLElement;
       },
-      placeholder: placeholder,
+      ...focusZoneSettings
+    },
+    onOpen: onOpen,
+    onClose: onClose,
+    renderOverlay: (overlayProps, overlayHandler, {
+      elements
+    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(Overlay$1, {
+      ...overlayProps,
+      maxHeight: 200,
+      sx: {
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      style: {
+        ...overlayProps.style,
+        width: elements?.reference?.getBoundingClientRect().width
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+        p: 2,
+        sx: {
+          flexGrow: 0,
+          flexShrink: 0,
+          flexBasis: 'auto'
+        },
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(TextInput$1, {
+          ref: searchInputRef,
+          leadingVisual: SvgSearch,
+          onKeyDown: e => {
+            if (e.code === 'Enter' && activeDescendantRef.current) {
+              const activeDescendantEvent = new KeyboardEvent(e.type, e.nativeEvent);
+              activeDescendantRef.current?.dispatchEvent(activeDescendantEvent);
+            }
+          },
+          ...searchInputProps
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(HorizontalDivider, {}), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        ref: listContainerRef,
+        sx: {
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: 'auto',
+          overflowY: 'auto'
+        },
+        children: children?.({
+          handleSelect
+        }, overlayHandler)
+      })]
+    }),
+    children: (popperProps, {
+      openOverlay
+    }) => /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+      ...popperProps,
+      tabIndex: disabled ? -1 : 0,
       disabled: disabled,
-      ...props,
-      onChange: e => {
-        props.onChange?.(e);
-        if (!e.defaultPrevented) {
-          if (e.target.value === PLACEHOLDER_VALUE) {
-            setIsValueEmpty(true);
-          } else {
-            setIsValueEmpty(false);
-          }
+      onClick: focusInput,
+      hasLeadingVisual: hasLeadingVisual,
+      validationStatus: validationStatus,
+      onKeyDown: e => {
+        if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+          e.preventDefault();
+          openOverlay();
         }
+        e.stopPropagation();
       },
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(SelectOption, {
-        label: placeholder,
-        value: PLACEHOLDER_VALUE
-      }), children]
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
-      sx: {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        right: 4,
-        pointerEvents: 'none'
-      },
-      icon: SvgChevronDown,
-      color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
-      size: 16
-    })]
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        sx: {
+          'flexShrink': 0,
+          'fontSize': 'xxs',
+          'fontWeight': 'medium',
+          'color': 'text/neutral',
+          '& > svg': {
+            display: 'block',
+            width: 16,
+            height: 16,
+            color: 'icon/neutral/bold'
+          }
+        },
+        children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          paddingTop: 3,
+          paddingRight: 10,
+          paddingBottom: 3,
+          paddingLeft: hasLeadingVisual ? 2 : 4,
+          whiteSpace: 'pre',
+          textOverflow: 'ellipsis',
+          width: '100%'
+        },
+        onClick: e => {
+          popperProps.onClick?.(e);
+        },
+        children: [!isNullable(renderValue(value)) ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+          sx: {
+            flex: '0 1 auto',
+            maxWidth: '100%',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            overflow: 'hidden'
+          },
+          children: renderValue(value)
+        }) : null, /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+          id: id,
+          ref: labelInputRef,
+          readOnly: true,
+          onChange: noop$2,
+          autoComplete: 'off',
+          tabIndex: -1,
+          onClick: e => {
+            props.onClick?.(e);
+          },
+          placeholder: !isNullable(renderValue(value)) ? '' : placeholder
+        })]
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+        sx: {
+          position: 'absolute',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          right: 4,
+          pointerEvents: 'none'
+        },
+        icon: SvgChevronDown,
+        color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+        size: 16
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+        ref: e => {
+          isFunction(ref) ? ref(e) : null;
+          valueInputRef.current = e;
+        },
+        type: 'hidden',
+        defaultValue: value
+      })]
+    })
   });
 };
-const SelectWrapper = styled__default.default.div`
+const TextInputWrapper = styled__default.default.div`
   position: relative;
   width: ${forcePixelValue('100%')};
   border-width: ${forcePixelValue(1)};
@@ -21229,6 +21412,12 @@ const SelectWrapper = styled__default.default.div`
   background-color: ${({
   theme
 }) => theme.colors['bg/input']};
+  cursor: default;
+  input {
+    cursor: default;
+
+    flex: 1;
+  }
   display: inline-flex;
   align-items: center;
 
@@ -21244,16 +21433,11 @@ const SelectWrapper = styled__default.default.div`
   color: ${({
   theme
 }) => theme.colors['text/neutral']};
-
-  /**
-   * placeholder style
-   */
-  ${({
-  theme,
-  isValueEmpty
-}) => isValueEmpty ? styled.css`
-          color: ${theme.colors['text/neutral/subtlest']};
-        ` : null}
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
 
   &:after {
     content: '';
@@ -21288,7 +21472,7 @@ const SelectWrapper = styled__default.default.div`
       }
     `}
 
-  ${props => props.validationStatus !== 'error' && styled.css`
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
       &:focus-within {
         &:after {
           border-color: ${({
@@ -21303,28 +21487,25 @@ const SelectWrapper = styled__default.default.div`
       background-color: ${props.theme.colors['bg/disabled']};
       color: ${props.theme.colors['text/disabled']};
 
-      select::placeholder {
+      input::placeholder {
         color: ${props.theme.colors['text/disabled']};
       }
 
-      select {
+      input {
         cursor: not-allowed;
       }
     `};
 
   ${props => props.hasLeadingVisual && styled.css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
-      select {
-        padding-left: ${forcePixelValue(props.theme.space[2])};
-      }
     `}
 
-  transition: background-color 100ms;
+  transition: color 100ms, background-color 100ms;
   &:after {
     transition: border-color 100ms;
   }
 `;
-const UnstyledSelect = styled__default.default.select`
+const UnstyledInput = styled__default.default.input`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -21332,154 +21513,104 @@ const UnstyledSelect = styled__default.default.select`
   border-radius: inherit;
   color: inherit;
   transition: inherit;
+  width: 100%;
 
   border: 0;
+  padding: 0;
   background-color: transparent;
-  width: 100%;
   &:focus {
     outline: 0;
   }
-
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
 `;
-const BaseSelect = styled__default.default(UnstyledSelect)`
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space[10])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space[3])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-
+const BaseInput = styled__default.default(UnstyledInput)`
   white-space: pre;
   text-overflow: ellipsis;
 `;
-var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
-  Option: SelectOption
-});
+var SearchSelectInput$1 = /*#__PURE__*/React.forwardRef(SearchSelectInput);
 
-const TextInputTrailingAction = ({
-  icon: Icon,
-  disabled,
+const SelectOption = ({
+  children: propChildren,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextInputTrailingAction, {
-  ref: ref,
-  ...props,
-  disabled: disabled,
-  "aria-disabled": disabled,
-  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
-});
-const BaseTextInputTrailingAction = styled__default.default(UnstyledButton)`
-  display: inline-flex;
-  padding: ${({
-  theme
-}) => forcePixelValue(theme.space[2])};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/subtler']};
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.full)};
-
-  & svg {
-    width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
-    color: ${({
-  theme
-}) => theme.colors['icon/neutral/bolder']};
-  }
-
-  &:hover {
-    background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/subtler/hovered']};
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    & svg {
-      color: ${({
-  theme
-}) => theme.colors['icon/disabled']};
-    }
-  }
-
-  ${sx}
-`;
-var TextInputTrailingAction$1 = /*#__PURE__*/React.forwardRef(TextInputTrailingAction);
+}) => {
+  const children = isNullable(propChildren) ? props.label : propChildren;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSelectOption, {
+    ...props,
+    children: children
+  });
+};
+const BaseSelectOption = styled__default.default.option``;
 
-const TextInput = ({
-  type = 'text',
+const Select = ({
+  children,
   disabled,
   validationStatus,
   leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
-  trailingAction,
+  placeholder = '옵션 선택',
   ...props
 }, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
-  const focusInput = () => {
-    inputRef.current?.focus();
+  const PLACEHOLDER_VALUE = '';
+  const selectRef = useProvidedOrCreatedRef(ref);
+  const [isValueEmpty, setIsValueEmpty] = React.useState(isNullable(props.value) || props.value === PLACEHOLDER_VALUE);
+  const focusSelect = () => {
+    selectRef.current?.focus();
   };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(SelectWrapper, {
     disabled: disabled,
-    onClick: focusInput,
+    onClick: focusSelect,
     hasLeadingVisual: !isNullable(LeadingVisual),
-    hasTrailingVisual: !isNullable(TrailingVisual),
-    hasTrailingAction: !isNullable(trailingAction),
     validationStatus: validationStatus,
+    isValueEmpty: isValueEmpty,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
       sx: {
         'flexShrink': 0,
         'fontSize': 'xxs',
         'fontWeight': 'medium',
-        'color': color$1['text/neutral'],
+        'color': 'text/neutral',
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: color$1['icon/neutral/bold']
+          color: 'icon/neutral/bold'
         }
       },
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseSelect, {
       ref: e => {
         isFunction(ref) ? ref(e) : null;
-        inputRef.current = e;
+        selectRef.current = e;
       },
-      type: type,
+      placeholder: placeholder,
       disabled: disabled,
-      ...props
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-      sx: {
-        'display': 'flex',
-        'alignItems': 'center',
-        'columnGap': 2,
-        'flexShrink': 0,
-        'fontSize': 'xxs',
-        'fontWeight': 'medium',
-        'color': color$1['text/neutral'],
-        '& > svg': {
-          display: 'block',
-          width: 16,
-          height: 16,
-          color: color$1['icon/neutral/bold']
+      ...props,
+      onChange: e => {
+        props.onChange?.(e);
+        if (!e.defaultPrevented) {
+          if (e.target.value === PLACEHOLDER_VALUE) {
+            setIsValueEmpty(true);
+          } else {
+            setIsValueEmpty(false);
+          }
         }
       },
-      children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
-        disabled: disabled
-      }) : null]
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(SelectOption, {
+        label: placeholder,
+        value: PLACEHOLDER_VALUE
+      }), children]
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      sx: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        right: 4,
+        pointerEvents: 'none'
+      },
+      icon: SvgChevronDown,
+      color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+      size: 16
     })]
   });
 };
-const TextInputWrapper = styled__default.default.div`
+const SelectWrapper = styled__default.default.div`
   position: relative;
   width: ${forcePixelValue('100%')};
   border-width: ${forcePixelValue(1)};
@@ -21493,7 +21624,6 @@ const TextInputWrapper = styled__default.default.div`
   background-color: ${({
   theme
 }) => theme.colors['bg/input']};
-  cursor: text;
   display: inline-flex;
   align-items: center;
 
@@ -21509,11 +21639,16 @@ const TextInputWrapper = styled__default.default.div`
   color: ${({
   theme
 }) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
-  theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
+
+  /**
+   * placeholder style
+   */
+  ${({
+  theme,
+  isValueEmpty
+}) => isValueEmpty ? styled.css`
+          color: ${theme.colors['text/neutral/subtlest']};
+        ` : null}
 
   &:after {
     content: '';
@@ -21563,43 +21698,28 @@ const TextInputWrapper = styled__default.default.div`
       background-color: ${props.theme.colors['bg/disabled']};
       color: ${props.theme.colors['text/disabled']};
 
-      input::placeholder {
+      select::placeholder {
         color: ${props.theme.colors['text/disabled']};
       }
 
-      input {
+      select {
         cursor: not-allowed;
       }
     `};
 
   ${props => props.hasLeadingVisual && styled.css`
       padding-left: ${forcePixelValue(props.theme.space[4])};
-      input {
+      select {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
-  ${props => props.hasTrailingVisual && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[4])};
-    `}
-
-  ${props => props.hasTrailingAction && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[2])};
-    `}
-
-  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && styled.css`
-      input {
-        padding-right: ${forcePixelValue(props.theme.space[2])};
-      }
-    `}
-
-
-  transition: color 100ms, background-color 100ms;
+  transition: background-color 100ms;
   &:after {
     transition: border-color 100ms;
   }
 `;
-const UnstyledInput = styled__default.default.input`
+const UnstyledSelect = styled__default.default.select`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -21614,23 +21734,30 @@ const UnstyledInput = styled__default.default.input`
   &:focus {
     outline: 0;
   }
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 `;
-const BaseInput = styled__default.default(UnstyledInput)`
+const BaseSelect = styled__default.default(UnstyledSelect)`
   padding-top: ${({
   theme
 }) => forcePixelValue(theme.space[3])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space[4])};
+}) => forcePixelValue(theme.space[10])};
   padding-bottom: ${({
   theme
 }) => forcePixelValue(theme.space[3])};
   padding-left: ${({
   theme
 }) => forcePixelValue(theme.space[4])};
+
+  white-space: pre;
+  text-overflow: ellipsis;
 `;
-var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
-  TrailingAction: TextInputTrailingAction$1
+var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
+  Option: SelectOption
 });
 
 const FormControlCaption = ({
@@ -21789,7 +21916,7 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput$1, Select$1, OverlaySelectInput$1, Checkbox$1, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput$1, Select$1, SearchSelectInput$1, Checkbox$1, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.type === Checkbox$1;
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
@@ -21964,6 +22091,7 @@ const Pagination = ({
   onPreviousClick = noop$2,
   onNextClick = noop$2,
   renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    type: 'button',
     onClick: () => onPageClick(page, i),
     selected: i === currentPageIndex,
     children: page.label
@@ -22005,6 +22133,7 @@ const Pagination = ({
     sx: sx,
     children: [renderPreviousPageDirection({
       previousPageDirectionProps: {
+        type: 'button',
         onClick: () => onPreviousClick(currentPageIndex),
         disabled: currentPageIndex === 0
       }
@@ -22042,6 +22171,7 @@ const Pagination = ({
       originalIndex
     }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
       nextPageDirectionProps: {
+        type: 'button',
         onClick: () => onNextClick(currentPageIndex),
         disabled: currentPageIndex === totalPageCount - 1
       }
@@ -22249,6 +22379,7 @@ const Pill = ({
     hasRemoveButton: !isNullable(propOnRemove),
     disabled: disabled,
     ...props,
+    type: 'button',
     children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       title: children?.toString(),
       children: children
@@ -24193,9 +24324,9 @@ exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
-exports.OverlaySelectInput = OverlaySelectInput$1;
 exports.Pagination = index$3;
 exports.Pill = index$2;
+exports.SearchSelectInput = SearchSelectInput$1;
 exports.Select = Select$1;
 exports.Space = Space;
 exports.Spinner = Spinner;