@teamturing/react-kit 2.16.3 → 2.17.0

package/dist/core/Datagrid/DatagridSubheader.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp;
+declare const DatagridSubheader: ({ ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+export default DatagridSubheader;
+export type { Props as DatagridSubheaderProps };

package/dist/core/Datagrid/index.d.ts

@@ -7,6 +7,7 @@ import { DatagridRowProps } from './DatagridRow';
 type Props = {} & HTMLAttributes<HTMLDivElement> & SxProp;
 declare const _default: (({ children, sx, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
     Header: ({ leadingVisual: LeadingVisual, trailingAction, ...props }: DatagridHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Subheader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
     Body: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
     Row: ({ gapX, alignItems, justifyContent, sx, children, ...props }: PropsWithChildren<DatagridRowProps>) => import("react/jsx-runtime").JSX.Element;
     Cell: ({ children, ...props }: PropsWithChildren<Pick<import("../Grid").GridUnitProps, "size" | "sx">>) => import("react/jsx-runtime").JSX.Element;

package/dist/core/Overlay/index.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, RefObject } from 'react';
 import { MaxHeightProps, ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
-type OverlaySizeType = 's' | 'm' | 'l';
+type OverlaySizeType = 's' | 'm' | 'l' | 'auto';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;

package/dist/core/Pill/index.d.ts

@@ -1,55 +1,71 @@
-import { ComponentType, ElementType, ReactNode, SVGProps } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, ReactNode, SVGProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
-    text?: string;
     /**
      * 크기를 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
-    size?: ResponsiveValue<'l' | 'm' | 's'>;
+    size?: ResponsiveValue<'m'>;
     /**
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
      */
-    variant?: ResponsiveValue<'secondary'>;
+    variant?: ResponsiveValue<'outlined'>;
+    /**
+     *
+     */
+    disabled?: boolean;
     /**
      * text 앞에 보여질 시각적 요소를 정의합니다. Icon, Image 등이 될 수 있습니다.
      */
     leadingVisual?: ElementType | ReactNode;
     /**
-     * 없앨 수 있을 때 onRemove를 넘기면 삭제 버튼이 trailingVisual 자리에 생깁니다.
+     * text 뒤에 보여질 시각적 요소를 정의합니다. Icon, Image 등이 될 수 있습니다.
+     */
+    trailingVisual?: ElementType | ReactNode;
+    /**
+     * 없앨 수 있을 때 onRemove를 넘기면 삭제 버튼이 생깁니다.
      */
-    onRemove?: () => void;
+    onRemove?: (event: ReactMouseEvent<HTMLDivElement> | ReactKeyboardEvent<HTMLDivElement>) => void;
     /**
      * onRemove가 undefined가 아닐 때 나오는 삭제 버튼의 아이콘을 정의합니다.
      */
     removeIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-} & SxProp;
+} & SxProp & Pick<HTMLAttributes<HTMLSpanElement>, 'onClick'>;
 declare const _default: import("react").ForwardRefExoticComponent<{
-    text?: string | undefined;
     /**
      * 크기를 정의합니다.
      * 반응형 디자인이 적용됩니다.
      */
-    size?: ResponsiveValue<"m" | "s" | "l"> | undefined;
+    size?: ResponsiveValue<"m"> | undefined;
     /**
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
      */
-    variant?: ResponsiveValue<"secondary"> | undefined;
+    variant?: ResponsiveValue<"outlined"> | undefined;
+    /**
+     *
+     */
+    disabled?: boolean | undefined;
     /**
      * text 앞에 보여질 시각적 요소를 정의합니다. Icon, Image 등이 될 수 있습니다.
      */
     leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     /**
-     * 없앨 수 있을 때 onRemove를 넘기면 삭제 버튼이 trailingVisual 자리에 생깁니다.
+     * text 뒤에 보여질 시각적 요소를 정의합니다. Icon, Image 등이 될 수 있습니다.
+     */
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
+    /**
+     * 없앨 수 있을 때 onRemove를 넘기면 삭제 버튼이 생깁니다.
      */
-    onRemove?: (() => void) | undefined;
+    onRemove?: ((event: ReactKeyboardEvent<HTMLDivElement> | ReactMouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
     /**
      * onRemove가 undefined가 아닐 때 나오는 삭제 버튼의 아이콘을 정의합니다.
      */
     removeIcon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
-} & SxProp & import("react").RefAttributes<HTMLSpanElement>>;
+} & SxProp & Pick<HTMLAttributes<HTMLSpanElement>, "onClick"> & {
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;
 export type { Props as PillProps };

package/dist/core/TextInput/TextInputTrailingAction.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, SVGProps } from 'react';
+import { SxProp } from '../../utils/styled-system';
+import { UnstyledButtonProps } from '../_UnstyledButton';
+type Props = {
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+} & UnstyledButtonProps;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SxProp & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;
+export type { Props as TextInputTrailingActionProps };

package/dist/core/TextInput/index.d.ts

@@ -17,23 +17,27 @@ type Props = {
      */
     trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
 } & InputHTMLAttributes<HTMLInputElement>;
-declare const TextInput: import("react").ForwardRefExoticComponent<{
+declare const _default: import("react").ForwardRefExoticComponent<{
     /**
      * TODO asdf
      */
-    validationStatus?: 'error' | 'success' | undefined;
+    validationStatus?: "error" | "success" | undefined;
     /**
      * 입력 창 앞에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
-    leadingVisual?: ElementType | ReactNode;
+    leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     /**
      * 입력 창 뒤에 보여질 시각적 요소를 정의합니다. Icon, Text, Image 등이 될 수 있습니다.
      */
-    trailingVisual?: ElementType | ReactNode;
+    trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined;
     /**
      * 입력 창 뒤에 사용작용할 요소를 정의합니다.
      */
     trailingAction?: import("react").ReactElement<HTMLProps<HTMLButtonElement>, string | import("react").JSXElementConstructor<any>> | undefined;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
-export default TextInput;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
+    TrailingAction: import("react").ForwardRefExoticComponent<{
+        icon: import("react").ComponentType<import("react").SVGProps<SVGSVGElement>>;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../..").SxProp & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default _default;
 export type { Props as TextInputProps };

package/dist/index.js

@@ -7094,7 +7094,7 @@ const BaseActionList = styled__default.default.ul`
 
   ${sx}
 `;
-var index$b = Object.assign(ActionList, {
+var index$c = Object.assign(ActionList, {
   Item: ActionListItem,
   SectionDivider: ActionListSectionDivider,
   SectionHeader: ActionListSectionHeader
@@ -16365,7 +16365,7 @@ const BaseAvatar = styled__default.default(Image)`
 })}
   ${sx}
 `;
-var index$a = /*#__PURE__*/React.forwardRef(Avatar);
+var index$b = /*#__PURE__*/React.forwardRef(Avatar);
 
 const Tooltip = ({
   children,
@@ -16753,7 +16753,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$9 = Object.assign(Breadcrumbs, {
+var index$a = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -17290,7 +17290,7 @@ const BaseCheckbox = styled__default.default(UnstyledCheckbox)`
 
   ${sx}
 `;
-var index$8 = /*#__PURE__*/React.forwardRef(Checkbox);
+var index$9 = /*#__PURE__*/React.forwardRef(Checkbox);
 
 const Chip = ({
   children,
@@ -17502,6 +17502,14 @@ const DatagridBody = ({
 const BaseDatagridBody = styled__default.default.div`
   width: inherit;
 
+  & > div:not(:last-child) {
+    border-bottom-width: ${forcePixelValue(1)};
+    border-bottom-style: solid;
+    border-bottom-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  }
+
   ${sx}
 `;
 
@@ -17574,6 +17582,28 @@ const DatagridRow = ({
 const BaseDatagridRow = Grid$1;
 const DatagridRowWrapper = Space;
 
+const DatagridSubheader = ({
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(DataGridSubheaderWrapper, {
+  ...props
+});
+const DataGridSubheaderWrapper = styled__default.default.div`
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[4])}`};
+  background-color: ${({
+  theme
+}) => theme.colors.surface};
+
+  border-bottom-width: ${forcePixelValue(1)};
+  border-bottom-style: solid;
+  border-bottom-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+
+  ${sx};
+`;
+
 const Datagrid = ({
   children,
   sx,
@@ -17582,12 +17612,13 @@ const Datagrid = ({
   const [relocatableComponentsObject, restConmponents] = useRelocation({
     children,
     config: {
-      header: DatagridHeader
+      header: DatagridHeader,
+      subHeader: DatagridSubheader
     }
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs(DatagridWrapper, {
     sx: sx,
-    children: [relocatableComponentsObject.header, /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagrid, {
+    children: [relocatableComponentsObject.header, relocatableComponentsObject.subHeader, /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagrid, {
       ...props,
       children: restConmponents
     })]
@@ -17612,8 +17643,9 @@ const DatagridWrapper = styled__default.default.div`
 const BaseDatagrid = styled__default.default.div`
   width: inherit;
 `;
-var index$7 = Object.assign(Datagrid, {
+var index$8 = Object.assign(Datagrid, {
   Header: DatagridHeader,
+  Subheader: DatagridSubheader,
   Body: DatagridBody,
   Row: DatagridRow,
   Cell: DatagridCell
@@ -18718,7 +18750,7 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$6 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$7 = /*#__PURE__*/React.forwardRef(Dialog);
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18949,13 +18981,16 @@ const BaseOverlay = styled__default.default.div`
   prop: 'size',
   variants: {
     s: {
-      width: forcePixelValue(256)
+      width: forcePixelValue(180)
     },
     m: {
-      width: forcePixelValue(320)
+      width: forcePixelValue(256)
     },
     l: {
-      width: forcePixelValue(480)
+      width: forcePixelValue(320)
+    },
+    auto: {
+      width: 'auto'
     }
   }
 })}
@@ -20277,7 +20312,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-var index$5 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index$6 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -20342,7 +20377,7 @@ function roundByDPR(element, value) {
 
 function useLatestRef(value) {
   const ref = React__namespace.useRef(value);
-  index$5(() => {
+  index$6(() => {
     ref.current = value;
   });
   return ref;
@@ -20427,7 +20462,7 @@ function useFloating(options) {
       }
     });
   }, [latestMiddleware, placement, strategy, platformRef]);
-  index$5(() => {
+  index$6(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData(data => ({
@@ -20437,13 +20472,13 @@ function useFloating(options) {
     }
   }, [open]);
   const isMountedRef = React__namespace.useRef(false);
-  index$5(() => {
+  index$6(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  index$5(() => {
+  index$6(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
     if (referenceEl && floatingEl) {
@@ -20866,43 +20901,80 @@ const PaginationTruncationIndicator = styled__default.default.div`
 
   ${sx}
 `;
-var index$4 = Object.assign(Pagination, {
+var index$5 = Object.assign(Pagination, {
   Page: PaginationPage,
   PageDirection: PaginationPageDirection,
   TruncationIndicator: PaginationTruncationIndicator
 });
 
 const Pill = ({
-  text,
+  children,
   size = 'm',
-  variant = 'secondary',
+  variant = 'outlined',
+  disabled = false,
   leadingVisual: LeadingVisual,
-  onRemove,
+  trailingVisual: TrailingVisual,
+  onRemove: propOnRemove,
   removeIcon: RemoveIcon = SvgClose,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
-  ref: ref,
-  size: size,
-  variant: variant,
-  hasLeadingVisual: !isNullable(LeadingVisual),
-  hasRemoveButton: !isNullable(onRemove),
-  ...props,
-  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    title: text,
-    children: text
-  }), onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
-    type: 'button',
-    onClick: onRemove,
-    "aria-label": 'Remove Pill',
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
-  }) : null]
-});
-const BasePill = styled__default.default.span`
+}, 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.xxs)};
+}) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  transition: background-color 100ms;
 
   & span {
     max-width: 240px;
@@ -20911,93 +20983,95 @@ const BasePill = styled__default.default.span`
     white-space: pre;
     word-break: break-all;
   }
-  & > button {
+
+  &: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;
-    transition: background-color 100ms;
     border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.full)};
+}) => 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,
-  hasLeadingVisual,
   hasRemoveButton
 }) => variant({
   prop: 'size',
   variants: {
-    l: {
-      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
-      'pr': hasRemoveButton ? 0.5 : hasLeadingVisual ? 2 : 3,
-      'py': 1,
-      'fontSize': theme.fontSizes.s,
-      'fontWeight': theme.fontWeights.medium,
-      'lineHeight': theme.lineHeights[2],
-      'columnGap': 1,
-      '& svg': {
-        minWidth: 16,
-        height: 16,
-        color: theme.colors['icon/primary']
-      },
-      '& button': {
-        p: 1
-      }
-    },
     m: {
-      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
-      'pr': hasRemoveButton ? 1 : hasLeadingVisual ? 2 : 3,
-      'py': 1,
-      'fontSize': theme.fontSizes.xs,
-      'fontWeight': theme.fontWeights.medium,
-      'lineHeight': theme.lineHeights[2],
-      'columnGap': 0.5,
-      '& svg': {
-        minWidth: 16,
-        height: 16,
-        color: theme.colors['icon/primary']
-      },
-      '& button': {
-        p: 0.5
-      }
-    },
-    s: {
-      'pl': 2,
-      'pr': hasRemoveButton ? 1 : 2,
-      'py': 0.5,
+      'pl': 3,
+      'pr': !hasRemoveButton ? 3 : 1,
+      'height': forcePixelValue(32),
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],
-      'columnGap': 0.5,
+      'columnGap': 1,
       '& svg': {
         minWidth: 12,
-        height: 12,
-        color: theme.colors['icon/primary']
+        height: 12
       },
-      '& button': {
-        p: 0.5
+      '& > div': {
+        p: 1
       }
     }
   }
 })}
   ${({
-  theme
+  theme,
+  disabled
 }) => variant({
   prop: 'variant',
   variants: {
-    secondary: {
-      'color': theme.colors['text/primary'],
-      'backgroundColor': theme.colors['bg/secondary'],
-      '& button': {
-        '&:hover': {
-          backgroundColor: theme.colors['bg/secondary/hovered']
+    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$3 = /*#__PURE__*/React.forwardRef(Pill);
+var index$4 = /*#__PURE__*/React.forwardRef(Pill);
 
 const Select = ({
   children,
@@ -21027,8 +21101,8 @@ const Select = ({
         'color': 'text/neutral',
         '& > svg': {
           display: 'block',
-          width: 20,
-          height: 20,
+          width: 16,
+          height: 16,
           color: 'icon/neutral/bold'
         }
       },
@@ -21169,7 +21243,7 @@ const SelectWrapper = styled__default.default.div`
   ${props => props.hasLeadingVisual && styled.css`
       padding-left: ${forcePixelValue(props.theme.space[5])};
       select {
-        padding-left: ${forcePixelValue(props.theme.space[3])};
+        padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
@@ -21216,7 +21290,7 @@ const BaseSelect = styled__default.default(UnstyledSelect)`
   text-overflow: ellipsis;
 `;
 const SelectOption = styled__default.default.option``;
-var index$2 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
+var index$3 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
   Option: SelectOption
 });
 
@@ -22443,7 +22517,7 @@ const Tab = ({
     })
   });
 };
-var index$1 = Object.assign(Tab, {
+var index$2 = Object.assign(Tab, {
   Item: TabItem
 });
 
@@ -22597,7 +22671,57 @@ const BaseTextarea = styled__default.default(UnstyledTextarea)`
   resize: none;
 `;
 
-const TextInput = /*#__PURE__*/React.forwardRef(({
+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,
@@ -22625,8 +22749,8 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
         'color': color$1['text/neutral'],
         '& > svg': {
           display: 'block',
-          width: 20,
-          height: 20,
+          width: 16,
+          height: 16,
           color: color$1['icon/neutral/bold']
         }
       },
@@ -22650,8 +22774,8 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
         'color': color$1['text/neutral'],
         '& > svg': {
           display: 'block',
-          width: 24,
-          height: 24,
+          width: 16,
+          height: 16,
           color: color$1['icon/neutral/bold']
         }
       },
@@ -22660,7 +22784,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
       }) : null]
     })]
   });
-});
+};
 const TextInputWrapper = styled__default.default.div`
   position: relative;
   width: ${forcePixelValue('100%')};
@@ -22757,17 +22881,25 @@ const TextInputWrapper = styled__default.default.div`
   ${props => props.hasLeadingVisual && styled.css`
       padding-left: ${forcePixelValue(props.theme.space[5])};
       input {
-        padding-left: ${forcePixelValue(props.theme.space[3])};
+        padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
-  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && styled.css`
+  ${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[3])};
+        padding-right: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
+
   transition: color 100ms, background-color 100ms;
   &:after {
     transition: border-color 100ms;
@@ -22795,7 +22927,7 @@ const BaseInput = styled__default.default(UnstyledInput)`
 }) => forcePixelValue(theme.space['4'])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['5'])};
   padding-bottom: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
@@ -22803,6 +22935,9 @@ const BaseInput = styled__default.default(UnstyledInput)`
   theme
 }) => forcePixelValue(theme.space['5'])};
 `;
+var index$1 = Object.assign( /*#__PURE__*/React.forwardRef(TextInput), {
+  TrailingAction: TextInputTrailingAction$1
+});
 
 const theme = {
   breakpoints,
@@ -23233,16 +23368,16 @@ const useOutsideClick = ({
   });
 };
 
-exports.ActionList = index$b;
+exports.ActionList = index$c;
 exports.AnimatePresence = AnimatePresence;
-exports.Avatar = index$a;
-exports.Breadcrumbs = index$9;
+exports.Avatar = index$b;
+exports.Breadcrumbs = index$a;
 exports.Button = Button;
-exports.Checkbox = index$8;
+exports.Checkbox = index$9;
 exports.Chip = Chip;
-exports.Datagrid = index$7;
+exports.Datagrid = index$8;
 exports.DescriptionList = DescriptionList;
-exports.Dialog = index$6;
+exports.Dialog = index$7;
 exports.DialogHandler = DialogHandler;
 exports.EnigmaUI = index;
 exports.GradientText = GradientText;
@@ -23255,16 +23390,16 @@ exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
-exports.Pagination = index$4;
-exports.Pill = index$3;
-exports.Select = index$2;
+exports.Pagination = index$5;
+exports.Pill = index$4;
+exports.Select = index$3;
 exports.Space = Space;
 exports.Spinner = Spinner;
 exports.Stack = Stack$1;
 exports.StyledIcon = StyledIcon;
-exports.Tab = index$1;
+exports.Tab = index$2;
 exports.Text = Text;
-exports.TextInput = TextInput;
+exports.TextInput = index$1;
 exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;

package/esm/core/Datagrid/DatagridBody.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { sx } from '../../utils/styled-system/index.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
@@ -10,6 +11,14 @@ const DatagridBody = ({
 const BaseDatagridBody = styled.div`
   width: inherit;
 
+  & > div:not(:last-child) {
+    border-bottom-width: ${forcePixelValue(1)};
+    border-bottom-style: solid;
+    border-bottom-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  }
+
   ${sx}
 `;
 

package/esm/core/Datagrid/DatagridSubheader.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DatagridSubheader = ({
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(DataGridSubheaderWrapper, {
+  ...props
+});
+const DataGridSubheaderWrapper = styled.div`
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[4])}`};
+  background-color: ${({
+  theme
+}) => theme.colors.surface};
+
+  border-bottom-width: ${forcePixelValue(1)};
+  border-bottom-style: solid;
+  border-bottom-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+
+  ${sx};
+`;
+
+export { DatagridSubheader as default };

package/esm/core/Datagrid/index.js

@@ -6,6 +6,7 @@ import DatagridBody from './DatagridBody.js';
 import DatagridCell from './DatagridCell.js';
 import DatagridHeader from './DatagridHeader.js';
 import DatagridRow from './DatagridRow.js';
+import DatagridSubheader from './DatagridSubheader.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
 const Datagrid = ({
@@ -16,12 +17,13 @@ const Datagrid = ({
   const [relocatableComponentsObject, restConmponents] = useRelocation({
     children,
     config: {
-      header: DatagridHeader
+      header: DatagridHeader,
+      subHeader: DatagridSubheader
     }
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs(DatagridWrapper, {
     sx: sx,
-    children: [relocatableComponentsObject.header, /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagrid, {
+    children: [relocatableComponentsObject.header, relocatableComponentsObject.subHeader, /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagrid, {
       ...props,
       children: restConmponents
     })]
@@ -48,6 +50,7 @@ const BaseDatagrid = styled.div`
 `;
 var index = Object.assign(Datagrid, {
   Header: DatagridHeader,
+  Subheader: DatagridSubheader,
   Body: DatagridBody,
   Row: DatagridRow,
   Cell: DatagridCell

package/esm/core/Overlay/index.js

@@ -92,13 +92,16 @@ const BaseOverlay = styled.div`
   prop: 'size',
   variants: {
     s: {
-      width: forcePixelValue(256)
+      width: forcePixelValue(180)
     },
     m: {
-      width: forcePixelValue(320)
+      width: forcePixelValue(256)
     },
     l: {
-      width: forcePixelValue(480)
+      width: forcePixelValue(320)
+    },
+    auto: {
+      width: 'auto'
     }
   }
 })}

package/esm/core/Pill/index.js

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
 import { r as reactIsExports } from '../../node_modules/react-is/index.js';
 import styled from 'styled-components';
@@ -11,36 +11,73 @@ import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js'
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
 const Pill = ({
-  text,
+  children,
   size = 'm',
-  variant = 'secondary',
+  variant = 'outlined',
+  disabled = false,
   leadingVisual: LeadingVisual,
-  onRemove,
+  trailingVisual: TrailingVisual,
+  onRemove: propOnRemove,
   removeIcon: RemoveIcon = SvgClose,
   ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
-  ref: ref,
-  size: size,
-  variant: variant,
-  hasLeadingVisual: !isNullable(LeadingVisual),
-  hasRemoveButton: !isNullable(onRemove),
-  ...props,
-  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    title: text,
-    children: text
-  }), onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
-    type: 'button',
-    onClick: onRemove,
-    "aria-label": 'Remove Pill',
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
-  }) : null]
-});
-const BasePill = styled.span`
+}, ref) => {
+  const handleRemove = useCallback(event => {
+    propOnRemove?.(event);
+  }, [propOnRemove]);
+  const handleRemoveClick = useCallback(event => {
+    if (disabled) return;
+    handleRemove(event);
+  }, [handleRemove, disabled]);
+  const handleRemoveKeydown = 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(UnstyledButton)`
   display: inline-flex;
   align-items: center;
   border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.xxs)};
+}) => forcePixelValue(theme.radii.xs)};
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[2])};
+
+  transition: background-color 100ms;
 
   & span {
     max-width: 240px;
@@ -49,90 +86,92 @@ const BasePill = styled.span`
     white-space: pre;
     word-break: break-all;
   }
-  & > button {
+
+  &: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;
-    transition: background-color 100ms;
     border-radius: ${({
   theme
-}) => forcePixelValue(theme.radii.full)};
+}) => 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,
-  hasLeadingVisual,
   hasRemoveButton
 }) => variant({
   prop: 'size',
   variants: {
-    l: {
-      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
-      'pr': hasRemoveButton ? 0.5 : hasLeadingVisual ? 2 : 3,
-      'py': 1,
-      'fontSize': theme.fontSizes.s,
-      'fontWeight': theme.fontWeights.medium,
-      'lineHeight': theme.lineHeights[2],
-      'columnGap': 1,
-      '& svg': {
-        minWidth: 16,
-        height: 16,
-        color: theme.colors['icon/primary']
-      },
-      '& button': {
-        p: 1
-      }
-    },
     m: {
-      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
-      'pr': hasRemoveButton ? 1 : hasLeadingVisual ? 2 : 3,
-      'py': 1,
-      'fontSize': theme.fontSizes.xs,
-      'fontWeight': theme.fontWeights.medium,
-      'lineHeight': theme.lineHeights[2],
-      'columnGap': 0.5,
-      '& svg': {
-        minWidth: 16,
-        height: 16,
-        color: theme.colors['icon/primary']
-      },
-      '& button': {
-        p: 0.5
-      }
-    },
-    s: {
-      'pl': 2,
-      'pr': hasRemoveButton ? 1 : 2,
-      'py': 0.5,
+      'pl': 3,
+      'pr': !hasRemoveButton ? 3 : 1,
+      'height': forcePixelValue(32),
       'fontSize': theme.fontSizes.xxs,
       'fontWeight': theme.fontWeights.medium,
       'lineHeight': theme.lineHeights[2],
-      'columnGap': 0.5,
+      'columnGap': 1,
       '& svg': {
         minWidth: 12,
-        height: 12,
-        color: theme.colors['icon/primary']
+        height: 12
       },
-      '& button': {
-        p: 0.5
+      '& > div': {
+        p: 1
       }
     }
   }
 })}
   ${({
-  theme
+  theme,
+  disabled
 }) => variant({
   prop: 'variant',
   variants: {
-    secondary: {
-      'color': theme.colors['text/primary'],
-      'backgroundColor': theme.colors['bg/secondary'],
-      '& button': {
-        '&:hover': {
-          backgroundColor: theme.colors['bg/secondary/hovered']
+    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 = /*#__PURE__*/forwardRef(Pill);

package/esm/core/Select/index.js

@@ -38,8 +38,8 @@ const Select = ({
         'color': 'text/neutral',
         '& > svg': {
           display: 'block',
-          width: 20,
-          height: 20,
+          width: 16,
+          height: 16,
           color: 'icon/neutral/bold'
         }
       },
@@ -180,7 +180,7 @@ const SelectWrapper = styled.div`
   ${props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[5])};
       select {
-        padding-left: ${forcePixelValue(props.theme.space[3])};
+        padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 

package/esm/core/TextInput/TextInputTrailingAction.js

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+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(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__*/forwardRef(TextInputTrailingAction);
+
+export { TextInputTrailingAction$1 as default };

package/esm/core/TextInput/index.js

@@ -8,9 +8,10 @@ import { forcePixelValue } from '../../utils/forcePixelValue.js';
 import { isFunction } from '../../utils/isFunction.js';
 import { isNullable } from '../../utils/isNullable.js';
 import View from '../View/index.js';
+import TextInputTrailingAction from './TextInputTrailingAction.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 
-const TextInput = /*#__PURE__*/forwardRef(({
+const TextInput = ({
   type = 'text',
   disabled,
   validationStatus,
@@ -38,8 +39,8 @@ const TextInput = /*#__PURE__*/forwardRef(({
         'color': color['text/neutral'],
         '& > svg': {
           display: 'block',
-          width: 20,
-          height: 20,
+          width: 16,
+          height: 16,
           color: color['icon/neutral/bold']
         }
       },
@@ -63,8 +64,8 @@ const TextInput = /*#__PURE__*/forwardRef(({
         'color': color['text/neutral'],
         '& > svg': {
           display: 'block',
-          width: 24,
-          height: 24,
+          width: 16,
+          height: 16,
           color: color['icon/neutral/bold']
         }
       },
@@ -73,7 +74,7 @@ const TextInput = /*#__PURE__*/forwardRef(({
       }) : null]
     })]
   });
-});
+};
 const TextInputWrapper = styled.div`
   position: relative;
   width: ${forcePixelValue('100%')};
@@ -170,17 +171,25 @@ const TextInputWrapper = styled.div`
   ${props => props.hasLeadingVisual && css`
       padding-left: ${forcePixelValue(props.theme.space[5])};
       input {
-        padding-left: ${forcePixelValue(props.theme.space[3])};
+        padding-left: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
-  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
+  ${props => props.hasTrailingVisual && css`
+      padding-right: ${forcePixelValue(props.theme.space[5])};
+    `}
+
+  ${props => props.hasTrailingAction && css`
       padding-right: ${forcePixelValue(props.theme.space[3])};
+    `}
+
+  ${props => (props.hasTrailingVisual || props.hasTrailingAction) && css`
       input {
-        padding-right: ${forcePixelValue(props.theme.space[3])};
+        padding-right: ${forcePixelValue(props.theme.space[2])};
       }
     `}
 
+
   transition: color 100ms, background-color 100ms;
   &:after {
     transition: border-color 100ms;
@@ -208,7 +217,7 @@ const BaseInput = styled(UnstyledInput)`
 }) => forcePixelValue(theme.space['4'])};
   padding-right: ${({
   theme
-}) => forcePixelValue(theme.space['4'])};
+}) => forcePixelValue(theme.space['5'])};
   padding-bottom: ${({
   theme
 }) => forcePixelValue(theme.space['4'])};
@@ -216,5 +225,8 @@ const BaseInput = styled(UnstyledInput)`
   theme
 }) => forcePixelValue(theme.space['5'])};
 `;
+var index = Object.assign( /*#__PURE__*/forwardRef(TextInput), {
+  TrailingAction: TextInputTrailingAction
+});
 
-export { TextInput as default };
+export { index as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.16.3",
+  "version": "2.17.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -62,5 +62,5 @@
     "react-is": "^18.2.0",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "5d22785a97a7991ab894c44c6ea913202821cd01"
+  "gitHead": "ca31c7add2913812b086f4862e431a3656c3f4f9"
 }