@teamturing/react-kit 2.18.1 → 2.19.1

package/dist/index.js

@@ -7094,7 +7094,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$d = Object.assign(ActionList, {
+var index$a = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16365,7 +16365,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$c = /*#__PURE__*/React.forwardRef(Avatar);
+var index$9 = /*#__PURE__*/React.forwardRef(Avatar);
 
 const Tooltip = ({
   children,
@@ -16753,7 +16753,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$b = Object.assign(Breadcrumbs, {
+var index$8 = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17290,7 +17290,7 @@ const BaseCheckbox = styled__default.default(UnstyledCheckbox)`
 
   ${sx}
 `;
-var index$a = /*#__PURE__*/React.forwardRef(Checkbox);
+var Checkbox$1 = /*#__PURE__*/React.forwardRef(Checkbox);
 
 const Chip = ({
   children,
@@ -17643,7 +17643,7 @@ const DatagridWrapper = styled__default.default.div`
 const BaseDatagrid = styled__default.default.div`
   width: inherit;
 `;
-var index$9 = Object.assign(Datagrid, {
+var index$7 = Object.assign(Datagrid, {
   Header: DatagridHeader,
   Subheader: DatagridSubheader,
   Body: DatagridBody,
@@ -18750,7 +18750,7 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$8 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$6 = /*#__PURE__*/React.forwardRef(Dialog);
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18895,112 +18895,6 @@ const BaseEmptyState = styled__default.default.div`
   ${sx}
 `;
 
-const GradientText = styled__default.default(Text)`
-  background: ${({
-  theme
-}) => `linear-gradient(${theme.gradients['text/accent']})`};
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-`;
-
-const IconToggleButton = ({
-  icon: Icon,
-  size = 'm',
-  variant = 'primary',
-  selected = false,
-  disabled = false,
-  sx,
-  ...props
-}) => {
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
-    icon: Icon,
-    size: size,
-    variant: variant,
-    selected: selected,
-    type: 'button',
-    disabled: disabled,
-    $disabled: disabled,
-    sx: sx,
-    ...props,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
-  });
-};
-const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
-  $disabled
-}) => ({
-  'position': 'relative',
-  'borderRadius': radii.full,
-  'transition': 'background-color 100ms, color 100ms',
-  '& svg': {
-    display: 'block'
-  },
-  'cursor': $disabled ? 'not-allowed' : 'pointer',
-  '&:focus-visible': {
-    outlineColor: color$1['border/focused'],
-    outlineStyle: 'solid',
-    outlineWidth: 2,
-    outlineOffset: 2
-  }
-}), variant({
-  prop: 'size',
-  variants: {
-    l: {
-      'p': 3,
-      '& svg': {
-        width: 24,
-        height: 24
-      }
-    },
-    m: {
-      'p': 2,
-      '& svg': {
-        width: 24,
-        height: 24
-      }
-    },
-    s: {
-      'p': 2,
-      '& svg': {
-        width: 16,
-        height: 16
-      }
-    }
-  }
-}), ({
-  selected,
-  $disabled
-}) => variant({
-  prop: 'variant',
-  variants: {
-    primary: {
-      ...(selected ? {
-        backgroundColor: color$1['bg/selected/violet'],
-        color: color$1['icon/inverse']
-      } : {
-        backgroundColor: color$1['bg/neutral'],
-        color: color$1['icon/accent/gray']
-      }),
-      ...($disabled ? {
-        backgroundColor: color$1['bg/disabled'],
-        color: color$1['icon/disabled']
-      } : {})
-    },
-    plain: {
-      backgroundColor: color$1['bg/neutral/subtler'],
-      ...(selected ? {
-        color: color$1['icon/selected/violet']
-      } : {
-        color: color$1['icon/neutral']
-      }),
-      ...($disabled ? {
-        backgroundColor: color$1['bg/disabled/subtlest'],
-        color: color$1['icon/disabled/subtler']
-      } : {})
-    }
-  }
-}), sx);
-
 const Overlay = ({
   children,
   isOpen,
@@ -20415,7 +20309,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-var index$7 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index$5 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -20480,7 +20374,7 @@ function roundByDPR(element, value) {
 
 function useLatestRef(value) {
   const ref = React__namespace.useRef(value);
-  index$7(() => {
+  index$5(() => {
     ref.current = value;
   });
   return ref;
@@ -20565,7 +20459,7 @@ function useFloating(options) {
       }
     });
   }, [latestMiddleware, placement, strategy, platformRef]);
-  index$7(() => {
+  index$5(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData(data => ({
@@ -20575,13 +20469,13 @@ function useFloating(options) {
     }
   }, [open]);
   const isMountedRef = React__namespace.useRef(false);
-  index$7(() => {
+  index$5(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  index$7(() => {
+  index$5(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
     if (referenceEl && floatingEl) {
@@ -20979,517 +20873,355 @@ const BaseInput$1 = styled__default.default(UnstyledInput$1)`
   theme
 }) => forcePixelValue(theme.space['5'])};
 `;
-var index$6 = /*#__PURE__*/React.forwardRef(OverlaySelectInput);
+var OverlaySelectInput$1 = /*#__PURE__*/React.forwardRef(OverlaySelectInput);
 
-const Pagination = ({
-  pages: propPages,
-  currentPageIndex,
-  aroundPageCount = 1,
-  edgePageCount = 1,
-  type = 'default',
-  sx,
-  onPageClick = noop$2,
-  onPreviousClick = noop$2,
-  onNextClick = noop$2,
-  renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
-    onClick: () => onPageClick(page, i),
-    selected: i === currentPageIndex,
-    children: page.label
-  }),
-  renderPageWrapper = (children, {
-    label
-  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
-    children: children
-  }, [label, i].join('-')),
-  renderPreviousPageDirection = ({
-    previousPageDirectionProps
-  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
-    ...previousPageDirectionProps,
-    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronLeft, {}), "\uC774\uC804"]
-  }),
-  renderNextPageDirection = ({
-    nextPageDirectionProps
-  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
-    ...nextPageDirectionProps,
-    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronRight, {})]
-  }),
-  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationTruncationIndicator, {
-    children: "\u2026"
-  })
+const SelectOption = ({
+  children: propChildren,
+  ...props
 }) => {
-  const CURRENT_PAGE_COUNT = 1;
-  const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
-  const pages = propPages.map((page, i) => ({
-    page,
-    originalIndex: i
-  }));
-  const totalPageCount = propPages.length;
-  const isCurrentPageCloseToBeginEdge = currentPageIndex < edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT;
-  const isCurrentPageCloseToEndEdge = totalPageCount - (edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT) < currentPageIndex + 1;
-  const isTruncationNeeded = totalVisiblePageCount < totalPageCount;
-  const renderPaginationPage = React.useCallback((page, i) => renderPageWrapper(renderPage(page, i), page, i), [currentPageIndex]);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePagination, {
-    type: type,
-    sx: sx,
-    children: [renderPreviousPageDirection({
-      previousPageDirectionProps: {
-        onClick: () => onPreviousClick(currentPageIndex),
-        disabled: currentPageIndex === 0
-      }
-    }), !isTruncationNeeded ? pages.map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex)) : isTruncationNeeded && isCurrentPageCloseToBeginEdge ? [pages.slice(0, edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
-      children: renderTruncationIndicator()
-    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex))] : isTruncationNeeded && isCurrentPageCloseToEndEdge ? [pages.slice(0, edgePageCount).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
-      children: renderTruncationIndicator()
-    }, 'begin_truncation_indicator'), pages.slice(totalPageCount - (edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT)).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex))] : [pages.slice(0, edgePageCount).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
-      children: renderTruncationIndicator()
-    }, 'begin_truncation_indicator'), pages.slice(currentPageIndex - aroundPageCount, currentPageIndex + aroundPageCount + CURRENT_PAGE_COUNT).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
-      children: renderTruncationIndicator()
-    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
-      page,
-      originalIndex
-    }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
-      nextPageDirectionProps: {
-        onClick: () => onNextClick(currentPageIndex),
-        disabled: currentPageIndex === totalPageCount - 1
-      }
-    })]
+  const children = isNullable(propChildren) ? props.label : propChildren;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSelectOption, {
+    ...props,
+    children: children
   });
 };
-const BasePagination = styled__default.default.nav`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  column-gap: ${({
-  theme
-}) => forcePixelValue(theme.space[1])};
-
-  ${variant({
-  prop: 'type',
-  variants: {
-    default: {},
-    simple: {
-      '& > *:not(:first-child):not(:last-child)': {
-        display: 'none !important'
-      }
-    }
-  }
-})}
-  ${sx}
-`;
-const PaginationPage = styled__default.default(UnstyledButton)`
-  transition: background-color 100ms;
-
-  height: ${forcePixelValue(32)};
-  min-width: ${forcePixelValue(32)};
-
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
-  theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/subtler']};
-
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.regular};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-  color: ${({
-  theme
-}) => theme.colors['text/neutral']};
+const BaseSelectOption = styled__default.default.option``;
 
-  ${({
-  selected
-}) => selected ? styled.css`
-          background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-          color: ${({
-  theme
-}) => theme.colors['text/inverse']};
-        ` : styled.css`
-          &:hover {
-            background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/subtler/hovered']};
+const Select = ({
+  children,
+  disabled,
+  validationStatus,
+  leadingVisual: LeadingVisual,
+  placeholder = '옵션 선택',
+  ...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();
+  };
+  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'
+        }
+      },
+      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;
+      },
+      placeholder: placeholder,
+      disabled: disabled,
+      ...props,
+      onChange: e => {
+        props.onChange?.(e);
+        if (!e.defaultPrevented) {
+          if (e.target.value === PLACEHOLDER_VALUE) {
+            setIsValueEmpty(true);
+          } else {
+            setIsValueEmpty(false);
           }
-        `}
-`;
-const PaginationPageDirection = styled__default.default(UnstyledButton)`
-  transition: background-color 100ms;
-
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  column-gap: ${({
-  theme
-}) => forcePixelValue(theme.space[1])};
-
-  height: ${forcePixelValue(32)};
-  min-width: ${forcePixelValue(32)};
-
+        }
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(SelectOption, {
+        label: placeholder,
+        value: PLACEHOLDER_VALUE
+      }), children]
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+      sx: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        right: 5,
+        pointerEvents: 'none'
+      },
+      icon: SvgChevronDown,
+      color: disabled ? 'icon/disabled' : 'icon/neutral/bolder',
+      size: 16
+    })]
+  });
+};
+const SelectWrapper = styled__default.default.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
   border-radius: ${({
   theme
 }) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
+  border-color: ${({
   theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+}) => theme.colors['border/input']};
   background-color: ${({
   theme
-}) => theme.colors['bg/neutral/subtler']};
+}) => theme.colors['bg/input']};
+  display: inline-flex;
+  align-items: center;
 
   font-size: ${({
   theme
 }) => forcePixelValue(theme.fontSizes.xs)};
   font-weight: ${({
   theme
-}) => theme.fontWeights.regular};
+}) => theme.fontWeights.medium};
   line-height: ${({
   theme
 }) => theme.lineHeights[2]};
   color: ${({
   theme
-}) => theme.colors['text/neutral']};
+}) => theme.colors['text/neutral/subtle']};
 
-  & svg {
-    color: ${({
+  /**
+   * placeholder style
+   */
+  ${({
+  theme,
+  isValueEmpty
+}) => isValueEmpty ? styled.css`
+          color: ${theme.colors['text/neutral/subtlest']};
+        ` : null}
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
   theme
-}) => theme.colors['icon/accent/gray']};
-    width: ${forcePixelValue(16)};
-    height: ${forcePixelValue(16)};
+}) => forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
   }
 
-  &:hover:not(:disabled) {
-    background-color: ${({
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
   theme
-}) => theme.colors['bg/neutral/subtler/hovered']};
-  }
-  &:disabled {
-    cursor: not-allowed;
-    color: ${({
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && styled.css`
+      &:after {
+        border-color: ${({
   theme
-}) => theme.colors['text/disabled']};
-    & > svg {
-      color: ${({
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && styled.css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
   theme
-}) => theme.colors['icon/disabled']};
-    }
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && styled.css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      select::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      select {
+        cursor: not-allowed;
+      }
+    `};
+
+  ${props => props.hasLeadingVisual && styled.css`
+      padding-left: ${forcePixelValue(props.theme.space[5])};
+      select {
+        padding-left: ${forcePixelValue(props.theme.space[2])};
+      }
+    `}
+
+  transition: background-color 100ms;
+  &:after {
+    transition: border-color 100ms;
   }
 `;
-const PaginationTruncationIndicator = styled__default.default.div`
-  min-width: ${forcePixelValue(32)};
+const UnstyledSelect = styled__default.default.select`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
 
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  padding: ${({
-  theme
-}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/neutral/subtler']};
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
 
-  font-size: ${({
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+`;
+const BaseSelect = styled__default.default(UnstyledSelect)`
+  padding-top: ${({
   theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
   theme
-}) => theme.fontWeights.regular};
-  line-height: ${({
+}) => forcePixelValue(theme.space['12'])};
+  padding-bottom: ${({
   theme
-}) => theme.lineHeights[2]};
-  color: ${({
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
   theme
-}) => theme.colors['text/neutral']};
-
-  pointer-events: none;
+}) => forcePixelValue(theme.space['5'])};
 
-  ${sx}
+  white-space: pre;
+  text-overflow: ellipsis;
 `;
-var index$5 = Object.assign(Pagination, {
-  Page: PaginationPage,
-  PageDirection: PaginationPageDirection,
-  TruncationIndicator: PaginationTruncationIndicator
+var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
+  Option: SelectOption
 });
 
-const Pill = ({
-  children,
-  size = 'm',
-  variant = 'outlined',
-  disabled = false,
-  leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
-  onRemove: propOnRemove,
-  removeIcon: RemoveIcon = SvgClose,
+const TextInputTrailingAction = ({
+  icon: Icon,
+  disabled,
   ...props
-}, ref) => {
-  const handleRemove = React.useCallback(event => {
-    propOnRemove?.(event);
-  }, [propOnRemove]);
-  const handleRemoveClick = React.useCallback(event => {
-    if (disabled) return;
-    handleRemove(event);
-  }, [handleRemove, disabled]);
-  const handleRemoveKeydown = React.useCallback(event => {
-    if (disabled) return;
-    if ([' ', 'Enter'].includes(event.key)) {
-      handleRemove(event);
-    }
-  }, [handleRemove, disabled]);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
-    ref: ref,
-    size: size,
-    variant: variant,
-    hasLeadingVisual: !isNullable(LeadingVisual),
-    hasRemoveButton: !isNullable(propOnRemove),
-    disabled: disabled,
-    ...props,
-    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-      title: children?.toString(),
-      children: children
-    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      onClick: e => {
-        e.preventDefault();
-        handleRemoveClick(e);
-        e.stopPropagation();
-      },
-      onKeyDown: e => {
-        if ([' ', 'Enter'].includes(e.key)) {
-          e.preventDefault();
-          e.stopPropagation();
-          handleRemoveKeydown(e);
-          return;
-        }
-      },
-      "aria-label": 'Remove Pill',
-      role: 'button',
-      "aria-disabled": disabled,
-      tabIndex: disabled ? -1 : 0,
-      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
-    }) : null]
-  });
-};
-const BasePill = styled__default.default(UnstyledButton)`
+}, 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;
-  align-items: center;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  column-gap: ${({
+  padding: ${({
   theme
 }) => forcePixelValue(theme.space[2])};
-
-  transition: background-color 100ms;
-
-  & span {
-    max-width: 240px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre;
-    word-break: break-all;
-  }
-
-  &:focus-visible {
-    outline-color: ${({
+  background-color: ${({
   theme
-}) => theme.colors['border/focused']};
-    outline-style: solid;
-    outline-width: ${forcePixelValue(2)};
-    outline-offset: ${({
+}) => theme.colors['bg/neutral/subtler']};
+  border-radius: ${({
   theme
-}) => forcePixelValue(theme.space[0.5])};
-  }
+}) => forcePixelValue(theme.radii.full)};
 
-  & > div {
-    display: flex;
-    border-radius: ${({
+  & svg {
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+    color: ${({
   theme
-}) => forcePixelValue(theme.radii.xxs)};
+}) => theme.colors['icon/neutral/bolder']};
   }
-  & > div:focus-visible {
-    outline-color: ${({
-  theme
-}) => theme.colors['border/focused']};
-    outline-style: solid;
-    outline-width: ${forcePixelValue(2)};
-    outline-offset: ${({
+
+  &:hover {
+    background-color: ${({
   theme
-}) => forcePixelValue(theme.space[-0.5])};
+}) => theme.colors['bg/neutral/subtler/hovered']};
   }
 
-  ${({
-  theme,
-  hasRemoveButton
-}) => variant({
-  prop: 'size',
-  variants: {
-    m: {
-      'pl': 3,
-      'pr': !hasRemoveButton ? 3 : 1,
-      'height': forcePixelValue(32),
-      'fontSize': theme.fontSizes.xxs,
-      'fontWeight': theme.fontWeights.medium,
-      'lineHeight': theme.lineHeights[2],
-      'columnGap': 1,
-      '& svg': {
-        minWidth: 12,
-        height: 12
-      },
-      '& > div': {
-        p: 1
-      }
-    }
-  }
-})}
-  ${({
-  theme,
-  disabled
-}) => variant({
-  prop: 'variant',
-  variants: {
-    outlined: {
-      'backgroundColor': theme.colors['bg/neutral/subtler'],
-      'borderWidth': 1,
-      'borderStyle': 'solid',
-      'borderColor': theme.colors['border/neutral'],
-      'color': 'text/neutral/subtle',
-      '& svg': {
-        color: theme.colors['icon/neutral/bolder']
-      },
-      '&:hover': {
-        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
-      },
-      '&:active': {
-        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
-      },
-      ...(disabled ? {
-        'cursor': 'not-allowed',
-        'backgroundColor': theme.colors['bg/disabled'],
-        'color': theme.colors['text/disabled'],
-        '& svg': {
-          color: theme.colors['icon/disabled']
-        }
-      } : {})
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    & svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
     }
   }
-})}
-    
+
   ${sx}
 `;
-var index$4 = /*#__PURE__*/React.forwardRef(Pill);
-
-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 TextInputTrailingAction$1 = /*#__PURE__*/React.forwardRef(TextInputTrailingAction);
 
-const Select = ({
-  children,
+const TextInput = ({
+  type = 'text',
   disabled,
   validationStatus,
   leadingVisual: LeadingVisual,
-  placeholder = '옵션 선택',
+  trailingVisual: TrailingVisual,
+  trailingAction,
   ...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 inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
   };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(SelectWrapper, {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
     disabled: disabled,
-    onClick: focusSelect,
+    onClick: focusInput,
     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': 'text/neutral',
+        'color': color$1['text/neutral'],
         '& > svg': {
           display: 'block',
           width: 16,
           height: 16,
-          color: 'icon/neutral/bold'
+          color: color$1['icon/neutral/bold']
         }
       },
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-    }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseSelect, {
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
       ref: e => {
         isFunction(ref) ? ref(e) : null;
-        selectRef.current = e;
+        inputRef.current = e;
       },
-      placeholder: placeholder,
+      type: type,
       disabled: disabled,
-      ...props,
-      onChange: e => {
-        props.onChange?.(e);
-        if (!e.defaultPrevented) {
-          if (e.target.value === PLACEHOLDER_VALUE) {
-            setIsValueEmpty(true);
-          } else {
-            setIsValueEmpty(false);
-          }
+      ...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(SelectOption, {
-        label: placeholder,
-        value: PLACEHOLDER_VALUE
-      }), children]
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
-      sx: {
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        right: 5,
-        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 SelectWrapper = styled__default.default.div`
+const TextInputWrapper = styled__default.default.div`
   position: relative;
   width: ${forcePixelValue('100%')};
   border-width: ${forcePixelValue(1)};
@@ -21503,6 +21235,7 @@ const SelectWrapper = styled__default.default.div`
   background-color: ${({
   theme
 }) => theme.colors['bg/input']};
+  cursor: text;
   display: inline-flex;
   align-items: center;
 
@@ -21517,17 +21250,12 @@ const SelectWrapper = styled__default.default.div`
 }) => theme.lineHeights[2]};
   color: ${({
   theme
-}) => theme.colors['text/neutral/subtle']};
-
-  /**
-   * placeholder style
-   */
-  ${({
-  theme,
-  isValueEmpty
-}) => isValueEmpty ? styled.css`
-          color: ${theme.colors['text/neutral/subtlest']};
-        ` : null}
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
 
   &:after {
     content: '';
@@ -21577,28 +21305,43 @@ 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[5])};
-      select {
+      input {
         padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
-  transition: background-color 100ms;
+  ${props => props.hasTrailingVisual && styled.css`
+      padding-right: ${forcePixelValue(props.theme.space[5])};
+    `}
+
+  ${props => props.hasTrailingAction && styled.css`
+      padding-right: ${forcePixelValue(props.theme.space[3])};
+    `}
+
+  ${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;
   }
 `;
-const UnstyledSelect = styled__default.default.select`
+const UnstyledInput = styled__default.default.input`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -21613,131 +21356,868 @@ const UnstyledSelect = styled__default.default.select`
   &:focus {
     outline: 0;
   }
-
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
 `;
-const BaseSelect = styled__default.default(UnstyledSelect)`
+const BaseInput = styled__default.default(UnstyledInput)`
   padding-top: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['12'])};
+}) => forcePixelValue(theme.space['5'])};
   padding-bottom: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
   padding-left: ${({
   theme
 }) => forcePixelValue(theme.space['5'])};
-
-  white-space: pre;
-  text-overflow: ellipsis;
 `;
-var index$3 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
-  Option: SelectOption
-});
-
-const Stack = /*#__PURE__*/React.forwardRef(({
-  gapX = 0,
-  gapY = 0,
-  children,
-  alignItems = 'center',
-  ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
-  ref: ref,
-  alignItems: alignItems,
-  gapX: gapX,
-  gapY: gapY,
-  ...props,
-  children: children
-}));
-const BaseStack = styled__default.default(View)({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap'
-}, variant({
-  prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        px: forcePixelValue(value / 2)
-      },
-      'mx': forcePixelValue(-value / 2)
-    };
-    return [key, styleValue];
-  }))
-}), variant({
-  prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        mt: forcePixelValue(value)
-      },
-      'mt': forcePixelValue(-value)
-    };
-    return [key, styleValue];
-  }))
-}));
-const Item = ({
-  children,
-  ...props
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-  ...props,
-  children: children
-});
-var Stack$1 = Object.assign(Stack, {
-  Item
+var TextInput$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
+  TrailingAction: TextInputTrailingAction$1
 });
 
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the `TypeError` message for "Functions" methods. */
-var FUNC_ERROR_TEXT$1 = 'Expected a function';
-
-/** Used as references for various `Number` constants. */
-var NAN$1 = 0 / 0;
-
-/** `Object#toString` result references. */
-var symbolTag$1 = '[object Symbol]';
+const FormControlCaption = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    as: 'span',
+    id: id,
+    typography: 'xs',
+    color: 'text/neutral/subtlest',
+    children: children
+  });
+};
 
-/** Used to match leading and trailing whitespace. */
-var reTrim$1 = /^\s+|\s+$/g;
+const FormControlErrorMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText$1, {
+    id: id,
+    typography: 'xs',
+    color: 'text/danger',
+    children: children
+  });
+};
+const errorMessageKeyframe = styled.keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText$1 = styled__default.default(Text)`
+  animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
 
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
+const FormControlLabel = ({
+  children,
+  visuallyHidden,
+  ...props
+}) => {
+  const {
+    id,
+    disabled,
+    required
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(VisuallyHidden, {
+    as: 'label',
+    htmlFor: id,
+    isVisible: !visuallyHidden,
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(LabelWrapper, {
+      ...props,
+      disabled: disabled,
+      children: [children, required ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        as: 'span',
+        "aria-hidden": "true",
+        children: ' *'
+      }) : null]
+    })
+  });
+};
+const VisuallyHidden = styled__default.default.span`
+  ${({
+  isVisible = false
+}) => {
+  if (isVisible) {
+    return sx;
+  }
+  return `
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    `;
+}}
+`;
+const LabelWrapper = styled__default.default(View)`
+  display: block;
+  align-self: flex-start;
 
-/** Used to detect binary string values. */
-var reIsBinary$1 = /^0b[01]+$/i;
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
 
-/** Used to detect octal string values. */
-var reIsOctal$1 = /^0o[0-7]+$/i;
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtle']};
 
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt$1 = parseInt;
+  cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+  ${sx};
+`;
 
-/** Detect free variable `self`. */
-var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+const FormControlSuccessMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText, {
+    id: id,
+    typography: 'xs',
+    color: 'text/success',
+    children: children
+  });
+};
+const successMessageKeyframe = styled.keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText = styled__default.default(Text)`
+  animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
 
-/** Used as a reference to the global object. */
-var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+const FormControlContext = /*#__PURE__*/React.createContext({});
+const FormControl = ({
+  children: propChildren,
+  id,
+  disabled,
+  required,
+  additionalInputComponentCandidates = []
+}, ref) => {
+  const [relocatableComponentsObject, restComponents] = useRelocation({
+    children: propChildren,
+    config: {
+      label: FormControlLabel,
+      caption: FormControlCaption,
+      errorMessage: FormControlErrorMessage,
+      successMessage: FormControlSuccessMessage
+    }
+  });
+  const inputComponentCandidates = [TextInput$1, Select$1, OverlaySelectInput$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, {
+    value: {
+      id,
+      disabled,
+      required
+    },
+    children: isHorizontalLayoutNeeded ? /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      ref: ref,
+      display: 'flex',
+      sx: {
+        columnGap: 2
+      },
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: /*#__PURE__*/React.cloneElement(InputComponent, {
+          id,
+          disabled,
+          required
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        sx: {
+          '& > span': {
+            mt: 0
+          }
+        },
+        children: [relocatableComponentsObject.label, relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+      })]
+    }) : /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      ref: ref,
+      display: 'flex',
+      flexDirection: 'column',
+      sx: {
+        '& > label': {
+          mb: 1
+        },
+        '& > span': {
+          mt: 1
+        }
+      },
+      children: [relocatableComponentsObject.label, /*#__PURE__*/React.cloneElement(InputComponent, {
+        id,
+        disabled,
+        required
+      }), relocatableComponentsObject.caption, relocatableComponentsObject.errorMessage, relocatableComponentsObject.successMessage]
+    })
+  });
+};
+var index$4 = Object.assign( /*#__PURE__*/React.forwardRef(FormControl), {
+  Label: FormControlLabel,
+  Caption: FormControlCaption,
+  ErrorMessage: FormControlErrorMessage,
+  SuccessMessage: FormControlSuccessMessage
+});
 
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
+const GradientText = styled__default.default(Text)`
+  background: ${({
+  theme
+}) => `linear-gradient(${theme.gradients['text/accent']})`};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;
 
-/**
- * Used to resolve the
+const IconToggleButton = ({
+  icon: Icon,
+  size = 'm',
+  variant = 'primary',
+  selected = false,
+  disabled = false,
+  sx,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseIconToggleButton, {
+    icon: Icon,
+    size: size,
+    variant: variant,
+    selected: selected,
+    type: 'button',
+    disabled: disabled,
+    $disabled: disabled,
+    sx: sx,
+    ...props,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
+  });
+};
+const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
+  $disabled
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'transition': 'background-color 100ms, color 100ms',
+  '& svg': {
+    display: 'block'
+  },
+  'cursor': $disabled ? 'not-allowed' : 'pointer',
+  '&:focus-visible': {
+    outlineColor: color$1['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'p': 3,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    m: {
+      'p': 2,
+      '& svg': {
+        width: 24,
+        height: 24
+      }
+    },
+    s: {
+      'p': 2,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    }
+  }
+}), ({
+  selected,
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      ...(selected ? {
+        backgroundColor: color$1['bg/selected/violet'],
+        color: color$1['icon/inverse']
+      } : {
+        backgroundColor: color$1['bg/neutral'],
+        color: color$1['icon/accent/gray']
+      }),
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled'],
+        color: color$1['icon/disabled']
+      } : {})
+    },
+    plain: {
+      backgroundColor: color$1['bg/neutral/subtler'],
+      ...(selected ? {
+        color: color$1['icon/selected/violet']
+      } : {
+        color: color$1['icon/neutral']
+      }),
+      ...($disabled ? {
+        backgroundColor: color$1['bg/disabled/subtlest'],
+        color: color$1['icon/disabled/subtler']
+      } : {})
+    }
+  }
+}), sx);
+
+const Pagination = ({
+  pages: propPages,
+  currentPageIndex,
+  aroundPageCount = 1,
+  edgePageCount = 1,
+  type = 'default',
+  sx,
+  onPageClick = noop$2,
+  onPreviousClick = noop$2,
+  onNextClick = noop$2,
+  renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    onClick: () => onPageClick(page, i),
+    selected: i === currentPageIndex,
+    children: page.label
+  }),
+  renderPageWrapper = (children, {
+    label
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+    children: children
+  }, [label, i].join('-')),
+  renderPreviousPageDirection = ({
+    previousPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...previousPageDirectionProps,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronLeft, {}), "\uC774\uC804"]
+  }),
+  renderNextPageDirection = ({
+    nextPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...nextPageDirectionProps,
+    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronRight, {})]
+  }),
+  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const CURRENT_PAGE_COUNT = 1;
+  const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
+  const pages = propPages.map((page, i) => ({
+    page,
+    originalIndex: i
+  }));
+  const totalPageCount = propPages.length;
+  const isCurrentPageCloseToBeginEdge = currentPageIndex < edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT;
+  const isCurrentPageCloseToEndEdge = totalPageCount - (edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT) < currentPageIndex + 1;
+  const isTruncationNeeded = totalVisiblePageCount < totalPageCount;
+  const renderPaginationPage = React.useCallback((page, i) => renderPageWrapper(renderPage(page, i), page, i), [currentPageIndex]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePagination, {
+    type: type,
+    sx: sx,
+    children: [renderPreviousPageDirection({
+      previousPageDirectionProps: {
+        onClick: () => onPreviousClick(currentPageIndex),
+        disabled: currentPageIndex === 0
+      }
+    }), !isTruncationNeeded ? pages.map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)) : isTruncationNeeded && isCurrentPageCloseToBeginEdge ? [pages.slice(0, edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : isTruncationNeeded && isCurrentPageCloseToEndEdge ? [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(totalPageCount - (edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT)).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(currentPageIndex - aroundPageCount, currentPageIndex + aroundPageCount + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
+      nextPageDirectionProps: {
+        onClick: () => onNextClick(currentPageIndex),
+        disabled: currentPageIndex === totalPageCount - 1
+      }
+    })]
+  });
+};
+const BasePagination = styled__default.default.nav`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  ${variant({
+  prop: 'type',
+  variants: {
+    default: {},
+    simple: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'none !important'
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+const PaginationPage = styled__default.default(UnstyledButton)`
+  transition: background-color 100ms;
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  ${({
+  selected
+}) => selected ? styled.css`
+          background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+          color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+        ` : styled.css`
+          &:hover {
+            background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+          }
+        `}
+`;
+const PaginationPageDirection = styled__default.default(UnstyledButton)`
+  transition: background-color 100ms;
+
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  & svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/accent/gray']};
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
+
+  &:hover:not(:disabled) {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({
+  theme
+}) => theme.colors['text/disabled']};
+    & > svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+    }
+  }
+`;
+const PaginationTruncationIndicator = styled__default.default.div`
+  min-width: ${forcePixelValue(32)};
+
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+
+  pointer-events: none;
+
+  ${sx}
+`;
+var index$3 = Object.assign(Pagination, {
+  Page: PaginationPage,
+  PageDirection: PaginationPageDirection,
+  TruncationIndicator: PaginationTruncationIndicator
+});
+
+const Pill = ({
+  children,
+  size = 'm',
+  variant = 'outlined',
+  disabled = false,
+  leadingVisual: LeadingVisual,
+  trailingVisual: TrailingVisual,
+  onRemove: propOnRemove,
+  removeIcon: RemoveIcon = SvgClose,
+  ...props
+}, ref) => {
+  const handleRemove = React.useCallback(event => {
+    propOnRemove?.(event);
+  }, [propOnRemove]);
+  const handleRemoveClick = React.useCallback(event => {
+    if (disabled) return;
+    handleRemove(event);
+  }, [handleRemove, disabled]);
+  const handleRemoveKeydown = React.useCallback(event => {
+    if (disabled) return;
+    if ([' ', 'Enter'].includes(event.key)) {
+      handleRemove(event);
+    }
+  }, [handleRemove, disabled]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
+    ref: ref,
+    size: size,
+    variant: variant,
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    hasRemoveButton: !isNullable(propOnRemove),
+    disabled: disabled,
+    ...props,
+    children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      title: children?.toString(),
+      children: children
+    }), typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, propOnRemove ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+      onClick: e => {
+        e.preventDefault();
+        handleRemoveClick(e);
+        e.stopPropagation();
+      },
+      onKeyDown: e => {
+        if ([' ', 'Enter'].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          handleRemoveKeydown(e);
+          return;
+        }
+      },
+      "aria-label": 'Remove Pill',
+      role: 'button',
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
+    }) : null]
+  });
+};
+const BasePill = styled__default.default(UnstyledButton)`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  transition: background-color 100ms;
+
+  & span {
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre;
+    word-break: break-all;
+  }
+
+  &:focus-visible {
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+    outline-style: solid;
+    outline-width: ${forcePixelValue(2)};
+    outline-offset: ${({
+  theme
+}) => forcePixelValue(theme.space[0.5])};
+  }
+
+  & > div {
+    display: flex;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xxs)};
+  }
+  & > div:focus-visible {
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+    outline-style: solid;
+    outline-width: ${forcePixelValue(2)};
+    outline-offset: ${({
+  theme
+}) => forcePixelValue(theme.space[-0.5])};
+  }
+
+  ${({
+  theme,
+  hasRemoveButton
+}) => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      'pl': 3,
+      'pr': !hasRemoveButton ? 3 : 1,
+      'height': forcePixelValue(32),
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 1,
+      '& svg': {
+        minWidth: 12,
+        height: 12
+      },
+      '& > div': {
+        p: 1
+      }
+    }
+  }
+})}
+  ${({
+  theme,
+  disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    outlined: {
+      'backgroundColor': theme.colors['bg/neutral/subtler'],
+      'borderWidth': 1,
+      'borderStyle': 'solid',
+      'borderColor': theme.colors['border/neutral'],
+      'color': 'text/neutral/subtle',
+      '& svg': {
+        color: theme.colors['icon/neutral/bolder']
+      },
+      '&:hover': {
+        backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+      },
+      '&:active': {
+        backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+      },
+      ...(disabled ? {
+        'cursor': 'not-allowed',
+        'backgroundColor': theme.colors['bg/disabled'],
+        'color': theme.colors['text/disabled'],
+        '& svg': {
+          color: theme.colors['icon/disabled']
+        }
+      } : {})
+    }
+  }
+})}
+    
+  ${sx}
+`;
+var index$2 = /*#__PURE__*/React.forwardRef(Pill);
+
+const Stack = /*#__PURE__*/React.forwardRef(({
+  gapX = 0,
+  gapY = 0,
+  children,
+  alignItems = 'center',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
+  ref: ref,
+  alignItems: alignItems,
+  gapX: gapX,
+  gapY: gapY,
+  ...props,
+  children: children
+}));
+const BaseStack = styled__default.default(View)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}));
+const Item = ({
+  children,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+  ...props,
+  children: children
+});
+var Stack$1 = Object.assign(Stack, {
+  Item
+});
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as the `TypeError` message for "Functions" methods. */
+var FUNC_ERROR_TEXT$1 = 'Expected a function';
+
+/** Used as references for various `Number` constants. */
+var NAN$1 = 0 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag$1 = '[object Symbol]';
+
+/** Used to match leading and trailing whitespace. */
+var reTrim$1 = /^\s+|\s+$/g;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary$1 = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal$1 = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt$1 = parseInt;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/**
+ * Used to resolve the
  * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
  * of values.
  */
@@ -22517,620 +22997,377 @@ const scrollIntoView = ({
       });
     } else if (isChildrenBottomBelowScrollContainer) {
       const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
-      scrollContainerRef.scrollTo({
-        behavior: options.behavior,
-        [startSide]: scrollDistance
-      });
-    }
-  } else {
-    childrenRef.scrollIntoView({
-      behavior: options.behavior
-    });
-  }
-};
-
-const TabItem = ({
-  children,
-  leadingIcon: LeadingIcon,
-  selected = false,
-  onClick,
-  size: propSize,
-  variant: propVariant
-}) => {
-  const ref = React.useRef(null);
-  const {
-    size: contextSize,
-    variant: contextVariant,
-    containerRef
-  } = React.useContext(TabContext);
-  const size = propSize ?? contextSize;
-  const variant = propVariant ?? contextVariant;
-  const handleClick = e => {
-    if (containerRef && containerRef.current && ref.current) {
-      scrollIntoView({
-        scrollContainerRef: containerRef.current,
-        childrenRef: ref.current,
-        options: {
-          behavior: 'smooth',
-          offset: 72
-        }
-      });
-    }
-    onClick?.(e);
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
-    role: 'tab',
-    ref: ref,
-    variant: variant,
-    size: size,
-    leadingIcon: LeadingIcon,
-    selected: selected,
-    onClick: handleClick,
-    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-      sx: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        columnGap: 1
-      },
-      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        children: children
-      })]
-    })
-  });
-};
-const BaseTabItem = styled__default.default(UnstyledButton)(({
-  theme
-}) => ({
-  'width': 'initial',
-  'position': 'relative',
-  'transition': 'background-color 100ms, color 100ms',
-  'whiteSpace': 'nowrap',
-  '& svg': {
-    transition: 'color 100ms'
-  },
-  '&:focus-visible': {
-    outlineColor: theme.colors['border/focused'],
-    outlineStyle: 'solid',
-    outlineWidth: 2,
-    outlineOffset: 2
-  }
-}), () => variant({
-  prop: 'size',
-  variants: {
-    l: {
-      'px': 4,
-      'py': 2,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    },
-    m: {
-      'px': 4,
-      'py': 2,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    },
-    s: {
-      'px': 3,
-      'py': 2,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
-      '& svg': {
-        width: 16,
-        height: 16
-      }
-    }
-  }
-}), ({
-  theme,
-  selected
-}) => variant({
-  prop: 'variant',
-  variants: {
-    plain: {
-      borderRadius: theme.radii.full,
-      ...(selected ? {
-        'color': theme.colors['text/neutral'],
-        'backgroundColor': theme.colors['bg/selected/subtle'],
-        '& svg': {
-          color: theme.colors['icon/selected']
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        '&:hover, &:active': {
-          'color': theme.colors['text/neutral/subtle'],
-          '& svg': {
-            color: theme.colors['icon/neutral/bolder']
-          }
-        }
-      })
-    },
-    outlined: {
-      borderRadius: theme.radii.full,
-      ...(selected ? {
-        'color': theme.colors['text/inverse'],
-        'backgroundColor': theme.colors['bg/selected'],
-        '& svg': {
-          color: theme.colors['icon/inverse']
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        '&:after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: theme.colors['border/neutral/bolder'],
-          borderRadius: theme.radii.full,
-          boxSizing: 'border-box'
-        },
-        '&:hover': {
-          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
-        },
-        '&:active': {
-          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
-        }
-      })
-    },
-    underline: {
-      borderRadius: theme.radii.xxs,
-      ...(selected ? {
-        'color': theme.colors['text/selected'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/selected']
-        },
-        ':after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          borderBottomWidth: 2,
-          borderBottomStyle: 'solid',
-          borderBottomColor: theme.colors['border/selected'],
-          borderRadius: theme.radii.none,
-          boxSizing: 'border-box'
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        ':hover, :active': {
-          'color': theme.colors['text/neutral/subtle'],
-          '& svg': {
-            color: theme.colors['icon/neutral/bolder']
-          }
-        }
-      })
+      scrollContainerRef.scrollTo({
+        behavior: options.behavior,
+        [startSide]: scrollDistance
+      });
     }
+  } else {
+    childrenRef.scrollIntoView({
+      behavior: options.behavior
+    });
   }
-}));
+};
 
-const TabContext = /*#__PURE__*/React.createContext({});
-const Tab = ({
-  variant = 'plain',
-  size = 'm',
-  gap = 2,
-  children
+const TabItem = ({
+  children,
+  leadingIcon: LeadingIcon,
+  selected = false,
+  onClick,
+  size: propSize,
+  variant: propVariant
 }) => {
-  const rootRef = React.useRef(null);
-  const [isLeftButtonVisible, setIsLeftButtonVisible] = React.useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
-  const [isRightButtonVisible, setIsRightButtonVisible] = React.useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
-  const handleScrollButtonVisibility = () => {
-    if (rootRef.current) {
-      setIsLeftButtonVisible(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
-      setIsRightButtonVisible(rootRef.current ? rootRef.current.clientWidth + Math.ceil(rootRef.current.scrollLeft) < rootRef.current.scrollWidth : false);
-    }
-  };
-  const buttonWidth = 32;
-  const gradientWidth = 40;
-  const handleLeftButtonClick = () => {
-    if (rootRef.current) {
-      rootRef.current.scrollTo({
-        left: rootRef.current.scrollLeft - rootRef.current.clientWidth + buttonWidth + gradientWidth,
-        behavior: 'smooth'
-      });
-    }
-  };
-  const handleRightButtonClick = () => {
-    if (rootRef.current) {
-      rootRef.current.scrollTo({
-        left: rootRef.current.scrollLeft + rootRef.current.clientWidth - (buttonWidth + gradientWidth),
-        behavior: 'smooth'
+  const ref = React.useRef(null);
+  const {
+    size: contextSize,
+    variant: contextVariant,
+    containerRef
+  } = React.useContext(TabContext);
+  const size = propSize ?? contextSize;
+  const variant = propVariant ?? contextVariant;
+  const handleClick = e => {
+    if (containerRef && containerRef.current && ref.current) {
+      scrollIntoView({
+        scrollContainerRef: containerRef.current,
+        childrenRef: ref.current,
+        options: {
+          behavior: 'smooth',
+          offset: 72
+        }
       });
     }
+    onClick?.(e);
   };
-  React.useEffect(() => {
-    handleScrollButtonVisibility();
-  }, []);
-  useResize(handleScrollButtonVisibility);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TabContext.Provider, {
-    value: {
-      variant,
-      size,
-      containerRef: rootRef
-    },
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
+    role: 'tab',
+    ref: ref,
+    variant: variant,
+    size: size,
+    leadingIcon: LeadingIcon,
+    selected: selected,
+    onClick: handleClick,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-      position: 'relative',
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        ref: rootRef,
-        role: 'tablist',
-        sx: {
-          'width': 'auto',
-          'display': 'flex',
-          'flexDirection': 'row',
-          'alignItems': 'center',
-          'columnGap': gap,
-          'overflowX': 'auto',
-          'msOverflowStyle': 'none',
-          '::-webkit-scrollbar': {
-            display: 'none'
-          }
-        },
-        onScroll: throttle$1(handleScrollButtonVisibility, 150),
-        children: children
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-        display: ['none', 'initial', 'initial'],
-        children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              top: 0,
-              left: forcePixelValue(buttonWidth),
-              bottom: 0,
-              width: forcePixelValue(gradientWidth),
-              height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
-              pointerEvents: 'none'
-            }
-          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              display: 'flex',
-              alignItems: 'center',
-              top: 0,
-              left: 0,
-              bottom: 0,
-              backgroundColor: elevation.surface
-            },
-            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-              size: 's',
-              variant: 'plain-bold',
-              icon: SvgChevronLeft,
-              onClick: handleLeftButtonClick
-            })
-          })]
-        }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              top: 0,
-              right: forcePixelValue(buttonWidth),
-              bottom: 0,
-              width: forcePixelValue(gradientWidth),
-              height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
-              pointerEvents: 'none'
-            }
-          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              display: 'flex',
-              alignItems: 'center',
-              top: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: elevation.surface
-            },
-            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-              size: 's',
-              variant: 'plain-bold',
-              icon: SvgChevronRight,
-              onClick: handleRightButtonClick
-            })
-          })]
-        }) : null]
-      })]
-    })
-  });
-};
-var index$2 = Object.assign(Tab, {
-  Item: TabItem
-});
-
-const Textarea = /*#__PURE__*/React.forwardRef(({
-  disabled,
-  ...props
-}, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
-  const focusInput = () => {
-    inputRef.current?.focus();
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
-    disabled: disabled,
-    onClick: focusInput,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
-      ref: e => {
-        isFunction(ref) ? ref(e) : null;
-        inputRef.current = e;
-      },
-      disabled: disabled,
-      ...props
-    })
-  });
-});
-const TextareaWrapper = styled__default.default.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  border-color: ${({
-  theme
-}) => theme.colors['border/input']};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/input']};
-  cursor: text;
-  display: inline-flex;
-  align-items: center;
-
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space['5'])};
-
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-  color: ${({
-  theme
-}) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
-  theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
-
-  height: 74px;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
-
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        columnGap: 1
+      },
+      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: children
+      })]
+    })
+  });
+};
+const BaseTabItem = styled__default.default(UnstyledButton)(({
   theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
+}) => ({
+  'width': 'initial',
+  'position': 'relative',
+  'transition': 'background-color 100ms, color 100ms',
+  'whiteSpace': 'nowrap',
+  '& svg': {
+    transition: 'color 100ms'
+  },
+  '&:focus-visible': {
+    outlineColor: theme.colors['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
   }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
-      &:hover:not(:focus-within) {
-        &:after {
-          border-color: ${({
-  theme
-}) => theme.colors['border/hovered']};
-        }
-      }
-    `}
-
-  ${props => props.validationStatus === 'error' && styled.css`
-      &:after {
-        border-color: ${({
-  theme
-}) => theme.colors['border/danger']};
-      }
-    `}
-
-  ${props => props.validationStatus !== 'error' && styled.css`
-      &:focus-within {
-        &:after {
-          border-color: ${({
-  theme
-}) => theme.colors['border/focused']};
-        }
+}), () => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['s'].fontSize,
+      'fontWeight': typography['s'].fontWeight,
+      'lineHeight': typography['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
       }
-    `}
-
-  ${props => props.disabled && styled.css`
-      border-color: ${props.theme.colors['border/input']};
-      background-color: ${props.theme.colors['bg/disabled']};
-      color: ${props.theme.colors['text/disabled']};
-
-      textarea::placeholder {
-        color: ${props.theme.colors['text/disabled']};
+    },
+    m: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['xs'].fontSize,
+      'fontWeight': typography['xs'].fontWeight,
+      'lineHeight': typography['xs'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
       }
-
-      &,
-      textarea {
-        cursor: not-allowed;
+    },
+    s: {
+      'px': 3,
+      'py': 2,
+      'fontSize': typography['xxs'].fontSize,
+      'fontWeight': typography['xxs'].fontWeight,
+      'lineHeight': typography['xxs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
       }
-    `};
-`;
-const UnstyledTextarea = styled__default.default.textarea`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-
-  border: 0;
-  background-color: transparent;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-`;
-const BaseTextarea = styled__default.default(UnstyledTextarea)`
-  resize: none;
-`;
-
-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']};
+}), ({
+  theme,
+  selected
+}) => variant({
+  prop: 'variant',
+  variants: {
+    plain: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/neutral'],
+        'backgroundColor': theme.colors['bg/selected/subtle'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:hover, &:active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
+          }
+        }
+      })
+    },
+    outlined: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/inverse'],
+        'backgroundColor': theme.colors['bg/selected'],
+        '& svg': {
+          color: theme.colors['icon/inverse']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.colors['border/neutral/bolder'],
+          borderRadius: theme.radii.full,
+          boxSizing: 'border-box'
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+        }
+      })
+    },
+    underline: {
+      borderRadius: theme.radii.xxs,
+      ...(selected ? {
+        'color': theme.colors['text/selected'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        },
+        ':after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderBottomWidth: 2,
+          borderBottomStyle: 'solid',
+          borderBottomColor: theme.colors['border/selected'],
+          borderRadius: theme.radii.none,
+          boxSizing: 'border-box'
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        ':hover, :active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
+          }
+        }
+      })
     }
   }
+}));
 
-  ${sx}
-`;
-var TextInputTrailingAction$1 = /*#__PURE__*/React.forwardRef(TextInputTrailingAction);
+const TabContext = /*#__PURE__*/React.createContext({});
+const Tab = ({
+  variant = 'plain',
+  size = 'm',
+  gap = 2,
+  children
+}) => {
+  const rootRef = React.useRef(null);
+  const [isLeftButtonVisible, setIsLeftButtonVisible] = React.useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+  const [isRightButtonVisible, setIsRightButtonVisible] = React.useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
+  const handleScrollButtonVisibility = () => {
+    if (rootRef.current) {
+      setIsLeftButtonVisible(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+      setIsRightButtonVisible(rootRef.current ? rootRef.current.clientWidth + Math.ceil(rootRef.current.scrollLeft) < rootRef.current.scrollWidth : false);
+    }
+  };
+  const buttonWidth = 32;
+  const gradientWidth = 40;
+  const handleLeftButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft - rootRef.current.clientWidth + buttonWidth + gradientWidth,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleRightButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft + rootRef.current.clientWidth - (buttonWidth + gradientWidth),
+        behavior: 'smooth'
+      });
+    }
+  };
+  React.useEffect(() => {
+    handleScrollButtonVisibility();
+  }, []);
+  useResize(handleScrollButtonVisibility);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TabContext.Provider, {
+    value: {
+      variant,
+      size,
+      containerRef: rootRef
+    },
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      position: 'relative',
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        ref: rootRef,
+        role: 'tablist',
+        sx: {
+          'width': 'auto',
+          'display': 'flex',
+          'flexDirection': 'row',
+          'alignItems': 'center',
+          'columnGap': gap,
+          'overflowX': 'auto',
+          'msOverflowStyle': 'none',
+          '::-webkit-scrollbar': {
+            display: 'none'
+          }
+        },
+        onScroll: throttle$1(handleScrollButtonVisibility, 150),
+        children: children
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        display: ['none', 'initial', 'initial'],
+        children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              left: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              left: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronLeft,
+              onClick: handleLeftButtonClick
+            })
+          })]
+        }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              right: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronRight,
+              onClick: handleRightButtonClick
+            })
+          })]
+        }) : null]
+      })]
+    })
+  });
+};
+var index$1 = Object.assign(Tab, {
+  Item: TabItem
+});
 
-const TextInput = ({
-  type = 'text',
+const Textarea = /*#__PURE__*/React.forwardRef(({
   disabled,
-  validationStatus,
-  leadingVisual: LeadingVisual,
-  trailingVisual: TrailingVisual,
-  trailingAction,
   ...props
 }, ref) => {
   const inputRef = useProvidedOrCreatedRef(ref);
   const focusInput = () => {
     inputRef.current?.focus();
   };
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextInputWrapper, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
     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: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
-    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
       ref: e => {
         isFunction(ref) ? ref(e) : null;
         inputRef.current = e;
       },
-      type: type,
       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']
-        }
-      },
-      children: [typeof TrailingVisual !== 'string' && reactIsExports.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(TrailingVisual, {}) : TrailingVisual, trailingAction ? /*#__PURE__*/React.cloneElement(trailingAction, {
-        disabled: disabled
-      }) : null]
-    })]
+    })
   });
-};
-const TextInputWrapper = styled__default.default.div`
+});
+const TextareaWrapper = styled__default.default.div`
   position: relative;
   width: ${forcePixelValue('100%')};
   border-width: ${forcePixelValue(1)};
@@ -23148,6 +23385,19 @@ const TextInputWrapper = styled__default.default.div`
   display: inline-flex;
   align-items: center;
 
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
+
   font-size: ${({
   theme
 }) => forcePixelValue(theme.fontSizes.xs)};
@@ -23166,6 +23416,8 @@ const TextInputWrapper = styled__default.default.div`
 }) => theme.colors['text/neutral/subtlest']};
   }
 
+  height: 74px;
+
   &:after {
     content: '';
     position: absolute;
@@ -23214,43 +23466,17 @@ const TextInputWrapper = styled__default.default.div`
       background-color: ${props.theme.colors['bg/disabled']};
       color: ${props.theme.colors['text/disabled']};
 
-      input::placeholder {
+      textarea::placeholder {
         color: ${props.theme.colors['text/disabled']};
       }
 
-      input {
+      &,
+      textarea {
         cursor: not-allowed;
       }
     `};
-
-  ${props => props.hasLeadingVisual && styled.css`
-      padding-left: ${forcePixelValue(props.theme.space[5])};
-      input {
-        padding-left: ${forcePixelValue(props.theme.space[2])};
-      }
-    `}
-
-  ${props => props.hasTrailingVisual && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[5])};
-    `}
-
-  ${props => props.hasTrailingAction && styled.css`
-      padding-right: ${forcePixelValue(props.theme.space[3])};
-    `}
-
-  ${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;
-  }
 `;
-const UnstyledInput = styled__default.default.input`
+const UnstyledTextarea = styled__default.default.textarea`
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -23266,23 +23492,9 @@ const UnstyledInput = styled__default.default.input`
     outline: 0;
   }
 `;
-const BaseInput = styled__default.default(UnstyledInput)`
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space['5'])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space['5'])};
+const BaseTextarea = styled__default.default(UnstyledTextarea)`
+  resize: none;
 `;
-var index$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
-  TrailingAction: TextInputTrailingAction$1
-});
 
 const theme = {
   breakpoints,
@@ -23713,19 +23925,20 @@ const useOutsideClick = ({
   });
 };
 
-exports.ActionList = index$d;
+exports.ActionList = index$a;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$c;
-exports.Breadcrumbs = index$b;
+exports.Avatar = index$9;
+exports.Breadcrumbs = index$8;
 exports.Button = Button;
-exports.Checkbox = index$a;
+exports.Checkbox = Checkbox$1;
 exports.Chip = Chip;
-exports.Datagrid = index$9;
+exports.Datagrid = index$7;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$8;
+exports.Dialog = index$6;
 exports.DialogHandler = DialogHandler;
 exports.EmptyState = EmptyState;
 exports.EnigmaUI = index;
+exports.FormControl = index$4;
 exports.GradientText = GradientText;
 exports.Grid = Grid$1;
 exports.HorizontalDivider = HorizontalDivider;
@@ -23736,17 +23949,17 @@ exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
-exports.OverlaySelectInput = index$6;
-exports.Pagination = index$5;
-exports.Pill = index$4;
-exports.Select = index$3;
+exports.OverlaySelectInput = OverlaySelectInput$1;
+exports.Pagination = index$3;
+exports.Pill = index$2;
+exports.Select = Select$1;
 exports.Space = Space;
 exports.Spinner = Spinner;
 exports.Stack = Stack$1;
 exports.StyledIcon = StyledIcon;
-exports.Tab = index$2;
+exports.Tab = index$1;
 exports.Text = Text;
-exports.TextInput = index$1;
+exports.TextInput = TextInput$1;
 exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;