@teamturing/react-kit 2.70.1 → 2.71.0

package/dist/core/ActionList/ActionListItem.d.ts

@@ -1,7 +1,12 @@
 import { ElementType, ReactNode, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, LiHTMLAttributes } from 'react';
+import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     variant?: 'neutral' | 'danger';
+    /**
+     * 아이템 사이즈. 미지정 시 ActionList의 size를 따릅니다 (기본값 `m`).
+     */
+    size?: ResponsiveValue<'m' | 's'>;
     leadingVisual?: ElementType | ReactNode;
     trailingVisual?: ElementType | ReactNode;
     description?: ReactNode;
@@ -12,6 +17,10 @@ type Props = {
 } & Pick<LiHTMLAttributes<HTMLLIElement>, 'onFocus' | 'onBlur' | 'onClick' | 'onKeyDown' | 'tabIndex' | 'onMouseEnter' | 'onMouseLeave'> & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     variant?: "neutral" | "danger" | undefined;
+    /**
+     * 아이템 사이즈. 미지정 시 ActionList의 size를 따릅니다 (기본값 `m`).
+     */
+    size?: ResponsiveValue<"m" | "s"> | undefined;
     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;
     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;
     description?: ReactNode;

package/dist/core/ActionList/ActionListSectionDivider.d.ts

@@ -1,5 +1,13 @@
-import { HorizontalDividerProps } from '../HorizontalDivider';
-type Props = {} & HorizontalDividerProps;
-declare const ActionListSectionDivider: ({ color, variant, width, sx }: Props) => import("react/jsx-runtime").JSX.Element;
+import { ColorKey } from '@teamturing/token-studio';
+import { HTMLAttributes } from 'react';
+import { BorderColorProps, BorderProps, ResponsiveValue, Theme } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type Props = {
+    width?: BorderProps['borderBottomWidth'];
+    color?: BorderColorProps<Theme, ColorKey>['borderBottomColor'];
+    variant?: BorderProps['borderBottomStyle'];
+    size?: ResponsiveValue<'m' | 's'>;
+} & SxProp & Pick<HTMLAttributes<HTMLHRElement>, 'className'>;
+declare const ActionListSectionDivider: ({ color, variant, width, size: propsSize, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ActionListSectionDivider;
 export type { Props as ActionListSectionDividerProps };

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

@@ -1,9 +1,16 @@
 import { PropsWithChildren, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { ResponsiveValue } from 'styled-system';
 import { SxProp } from '../../utils/styled-system';
 import { ActionListItemProps } from './ActionListItem';
 import { ActionListSectionDividerProps } from './ActionListSectionDivider';
 import { ActionListSectionHeaderProps } from './ActionListSectionHeader';
 type Props = {
+    /**
+     * ActionList 아이템들의 사이즈를 지정합니다.
+     * `m` (기본값): 표준 사이즈
+     * `s`: 작은 사이즈
+     */
+    size?: ResponsiveValue<'m' | 's'>;
     /**
      * ActionList의 아이템에 선택이 되어있다는 것을 표시할 때 사용하는 속성입니다.
      * `undefined`: 선택에 대한 표시를 하지 않습니다.
@@ -19,11 +26,12 @@ type Props = {
     selectionPosition?: 'leading' | 'trailing';
     onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
 } & SxProp;
-type ActionListContextValue = {} & Pick<Props, 'selectionVariant' | 'selectionPosition' | 'onSelect'>;
-declare const ActionListContext: import("react").Context<Pick<Props, "onSelect" | "selectionVariant" | "selectionPosition">>;
-declare const _default: (({ selectionVariant, selectionPosition, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+type ActionListContextValue = {} & Pick<Props, 'size' | 'selectionVariant' | 'selectionPosition' | 'onSelect'>;
+declare const ActionListContext: import("react").Context<Pick<Props, "size" | "onSelect" | "selectionVariant" | "selectionPosition">>;
+declare const _default: (({ size, selectionVariant, selectionPosition, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
     Item: import("react").ForwardRefExoticComponent<{
         variant?: "neutral" | "danger" | undefined;
+        size?: ResponsiveValue<"m" | "s"> | undefined;
         leadingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
         trailingVisual?: string | number | boolean | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
         description?: import("react").ReactNode;
@@ -34,7 +42,7 @@ declare const _default: (({ selectionVariant, selectionPosition, onSelect, ...pr
     } & Pick<import("react").LiHTMLAttributes<HTMLLIElement>, "tabIndex" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseEnter" | "onMouseLeave"> & SxProp & {
         children?: import("react").ReactNode;
     } & import("react").RefAttributes<HTMLLIElement>>;
-    SectionDivider: ({ color, variant, width, sx }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
+    SectionDivider: ({ color, variant, width, size: propsSize, ...props }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
     SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/dist/index.js

@@ -1258,27 +1258,6 @@ var Grid$1 = Object.assign(Grid, {
   Unit
 });
 
-const StyledIcon = /*#__PURE__*/React.forwardRef(({
-  icon: Icon,
-  sx,
-  className,
-  ...props
-}, ref) => /*#__PURE__*/jsxRuntime.jsx(View, {
-  ref: ref,
-  ...props,
-  className: `trk-styled_icon__wrapper ${className}`,
-  color: props.color,
-  sx: {
-    '& svg': {
-      display: 'inline-flex',
-      width: '100%',
-      height: '100%'
-    },
-    ...sx
-  },
-  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
-}));
-
 const Text = /*#__PURE__*/styled__default.default.span.attrs(props => ({
   color: props.color ?? 'text/neutral'
 })).withConfig({
@@ -1425,6 +1404,7 @@ const Text = /*#__PURE__*/styled__default.default.span.attrs(props => ({
 
 const ActionListItem = ({
   variant = 'neutral',
+  size: propSize,
   leadingVisual: LeadingVisual,
   trailingVisual: TrailingVisual,
   description,
@@ -1444,10 +1424,12 @@ const ActionListItem = ({
 }, ref) => {
   const itemRef = useProvidedOrCreatedRef(ref);
   const {
+    size: contextSize,
     selectionVariant,
     selectionPosition = 'leading',
     onSelect: defaultOnSelect
   } = React.useContext(ActionListContext);
+  const size = propSize ?? contextSize ?? 'm';
   if (!selectionVariant && selected) {
     throw new Error('To use selected props in ActionList.Item, ActionList selectionVariant props should be defined.');
   }
@@ -1465,10 +1447,10 @@ const ActionListItem = ({
     }
     externalOnKeyDown?.(event);
   }, [handleSelect, disabled, externalOnKeyDown]);
-  const selectionContent = !utils.isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntime.jsx(View, {
+  const selectionContent = !utils.isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntime.jsx(SelectionWrapper, {
     className: 'action_list_item__selection_wrapper',
     display: 'inline-flex',
-    minWidth: 20,
+    size: size,
     sx: {
       ...(selectionPosition === 'trailing' ? {
         ml: 2
@@ -1479,27 +1461,29 @@ const ActionListItem = ({
         color: 'icon/selected/primary'
       }
     },
-    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
-      className: 'action_list_item__selection_wrapper_single',
-      icon: icons.CheckIcon,
-      size: 20
+    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckIcon, {
+      className: 'action_list_item__selection_wrapper_single'
     }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsxRuntime.jsx(FakeCheckbox, {
       className: 'action_list_item__selection_wrapper_multiple',
       "aria-checked": selected,
       checked: selected,
       onChange: utils.noop,
       "aria-disabled": disabled,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     }) : null
   }) : null;
   return /*#__PURE__*/jsxRuntime.jsxs(BaseActionListItem, {
     ref: itemRef,
     variant: variant,
+    size: size,
     ...(disabled ? {
       disabled
     } : {
       tabIndex: externalTabIndex ?? 0
     }),
+    hasLeadingVisual: !utils.isNullable(LeadingVisual),
+    hasTrailingVisual: !utils.isNullable(TrailingVisual),
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -1531,7 +1515,7 @@ const ActionListItem = ({
             fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
           },
           children: children
-        }), /*#__PURE__*/jsxRuntime.jsx(Grid$1.Unit, {
+        }), description ? /*#__PURE__*/jsxRuntime.jsx(Grid$1.Unit, {
           className: 'action_list_item__content__description',
           size: descriptionLayout === 'inline' ? 'max' : 1,
           children: /*#__PURE__*/jsxRuntime.jsx(Text, {
@@ -1539,7 +1523,7 @@ const ActionListItem = ({
             color: disabled ? 'text/disabled' : 'text/neutral/subtler',
             children: description
           })
-        })]
+        }) : null]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(VisualWrapper, {
       className: 'action_list_item__content__trailing_visual',
@@ -1553,9 +1537,23 @@ const ActionListItem = ({
     }), selectionPosition === 'trailing' && selectionContent]
   });
 };
+const SelectionWrapper = /*#__PURE__*/styled__default.default(View).withConfig({
+  displayName: "ActionListItem__SelectionWrapper",
+  componentId: "sc-cpn5js-0"
+})(["", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      minWidth: utils.forcePixelValue(20)
+    },
+    s: {
+      minWidth: utils.forcePixelValue(20)
+    }
+  }
+}));
 const VisualWrapper = /*#__PURE__*/styled__default.default(View).withConfig({
   displayName: "ActionListItem__VisualWrapper",
-  componentId: "sc-cpn5js-0"
+  componentId: "sc-cpn5js-1"
 })(["", ""], variant({
   prop: 'variant',
   variants: {
@@ -1575,20 +1573,59 @@ const VisualWrapper = /*#__PURE__*/styled__default.default(View).withConfig({
 }));
 const BaseActionListItem = /*#__PURE__*/styled__default.default.li.withConfig({
   displayName: "ActionListItem__BaseActionListItem",
-  componentId: "sc-cpn5js-1"
-})(["display:flex;align-items:flex-start;font-size:", ";font-weight:", ";line-height:", ";& svg{width:", ";height:", ";}padding:", ";background-color:", ";border-radius:", ";cursor:pointer;transition:background-color 100ms;", " ", " ", ";"], ({
-  theme
-}) => utils.forcePixelValue(theme.fontSizes.xs), ({
+  componentId: "sc-cpn5js-2"
+})(["display:flex;align-items:flex-start;font-weight:", ";line-height:", ";background-color:", ";border-radius:", ";cursor:pointer;transition:background-color 100ms;", " ", " ", " ", ";"], ({
   theme
 }) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2], utils.forcePixelValue(20), utils.forcePixelValue(20), ({
-  theme
-}) => utils.forcePixelValue(theme.space[3]), ({
+}) => theme.lineHeights[2], ({
   theme
 }) => theme.colors['bg/neutral/subtler'], ({
   theme
 }) => utils.forcePixelValue(theme.radii.xs), ({
+  theme,
+  hasLeadingVisual,
+  hasTrailingVisual
+}) => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      'fontSize': utils.forcePixelValue(theme.fontSizes.xs),
+      'padding': utils.forcePixelValue(theme.space[3]),
+      '& svg': {
+        width: utils.forcePixelValue(20),
+        height: utils.forcePixelValue(20)
+      }
+    },
+    s: {
+      'fontSize': utils.forcePixelValue(theme.fontSizes.xs),
+      'paddingX': utils.forcePixelValue(theme.space[3]),
+      'paddingY': utils.forcePixelValue(theme.space[2]),
+      ...(hasLeadingVisual ? {
+        '& .action_list_item__leading_visual': {
+          width: utils.forcePixelValue(16),
+          height: utils.forcePixelValue(20),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      } : {}),
+      ...(hasTrailingVisual ? {
+        '& .action_list_item__content__trailing_visual': {
+          width: utils.forcePixelValue(16),
+          height: utils.forcePixelValue(20),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      } : {}),
+      '& svg': {
+        width: utils.forcePixelValue(20),
+        height: utils.forcePixelValue(20)
+      }
+    }
+  }
+}), ({
   theme,
   disabled
 }) => disabled ? styled.css`
@@ -1623,8 +1660,21 @@ const BaseActionListItem = /*#__PURE__*/styled__default.default.li.withConfig({
         ` : null, sx);
 const FakeCheckbox = /*#__PURE__*/styled__default.default.div.withConfig({
   displayName: "ActionListItem__FakeCheckbox",
-  componentId: "sc-cpn5js-2"
-})(["position:relative;width:", ";height:", ";border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&[aria-disabled='true']{background-color:", ";border-color:", ";}&[aria-checked='true']{background-color:", ";border-width:0;&::before{visibility:visible;}&[aria-disabled='true']{background-color:", ";border-color:", ";&::before{background-color:", ";}}}", ""], utils.forcePixelValue(20), utils.forcePixelValue(20), utils.forcePixelValue(2), ({
+  componentId: "sc-cpn5js-3"
+})(["position:relative;", " border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&[aria-disabled='true']{background-color:", ";border-color:", ";}&[aria-checked='true']{background-color:", ";border-width:0;&::before{visibility:visible;}&[aria-disabled='true']{background-color:", ";border-color:", ";&::before{background-color:", ";}}}", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      width: utils.forcePixelValue(20),
+      height: utils.forcePixelValue(20)
+    },
+    // TODO: replace with the actual 's' dimensions once the size spec is finalized.
+    s: {
+      width: utils.forcePixelValue(20),
+      height: utils.forcePixelValue(20)
+    }
+  }
+}), utils.forcePixelValue(2), ({
   theme
 }) => theme.colors['border/neutral'], ({
   theme
@@ -1647,40 +1697,40 @@ const FakeCheckbox = /*#__PURE__*/styled__default.default.div.withConfig({
 }) => theme.colors['icon/disabled'], sx);
 var ActionListItem$1 = /*#__PURE__*/React.forwardRef(ActionListItem);
 
-const HorizontalDivider = ({
-  className,
-  width = 1,
-  color = 'border/neutral',
-  variant = 'solid',
-  ...props
-}) => /*#__PURE__*/jsxRuntime.jsx(BaseHorizontalDivider, {
-  className: className,
-  borderBottomWidth: width,
-  borderBottomStyle: variant,
-  borderBottomColor: color,
-  ...props
-});
-const BaseHorizontalDivider = /*#__PURE__*/styled__default.default.hr.withConfig({
-  displayName: "HorizontalDivider__BaseHorizontalDivider",
-  componentId: "sc-1nsxooh-0"
-})(["display:block;margin:0;padding:0;border:none;width:100%;", " ", ""], border, sx);
-
 const ActionListSectionDivider = ({
   color = 'border/neutral',
   variant = 'solid',
   width = 1,
-  sx
-}) => /*#__PURE__*/jsxRuntime.jsx(BaseActionListSectionDivider, {
-  className: 'action_list_section_divider',
-  color: color,
-  variant: variant,
-  width: width,
-  sx: {
-    ...sx,
-    my: 3
+  size: propsSize,
+  ...props
+}) => {
+  const {
+    size: contextSize
+  } = React.useContext(ActionListContext);
+  const size = propsSize ?? contextSize ?? 'm';
+  return /*#__PURE__*/jsxRuntime.jsx(BaseActionListSectionDivider, {
+    className: 'action_list_section_divider',
+    size: size,
+    borderBottomWidth: width,
+    borderBottomStyle: variant,
+    borderBottomColor: color,
+    ...props
+  });
+};
+const BaseActionListSectionDivider = /*#__PURE__*/styled__default.default.hr.withConfig({
+  displayName: "ActionListSectionDivider__BaseActionListSectionDivider",
+  componentId: "sc-b8z51g-0"
+})(["display:block;margin:0;padding:0;border:none;width:100%;", " ", " ", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      my: 3
+    },
+    s: {
+      my: 2
+    }
   }
-});
-const BaseActionListSectionDivider = HorizontalDivider;
+}), border, sx);
 
 const ActionListSectionHeader = ({
   ...props
@@ -1708,6 +1758,7 @@ const BaseActionListSectionHeader = /*#__PURE__*/styled__default.default.div.wit
 
 const ActionListContext = /*#__PURE__*/React.createContext({});
 const ActionList = ({
+  size = 'm',
   selectionVariant,
   selectionPosition,
   onSelect,
@@ -1715,6 +1766,7 @@ const ActionList = ({
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx(ActionListContext.Provider, {
     value: {
+      size,
       selectionVariant,
       selectionPosition,
       onSelect
@@ -3200,6 +3252,45 @@ const useDevice = () => {
   return deviceState || {};
 };
 
+const HorizontalDivider = ({
+  className,
+  width = 1,
+  color = 'border/neutral',
+  variant = 'solid',
+  ...props
+}) => /*#__PURE__*/jsxRuntime.jsx(BaseHorizontalDivider, {
+  className: className,
+  borderBottomWidth: width,
+  borderBottomStyle: variant,
+  borderBottomColor: color,
+  ...props
+});
+const BaseHorizontalDivider = /*#__PURE__*/styled__default.default.hr.withConfig({
+  displayName: "HorizontalDivider__BaseHorizontalDivider",
+  componentId: "sc-1nsxooh-0"
+})(["display:block;margin:0;padding:0;border:none;width:100%;", " ", ""], border, sx);
+
+const StyledIcon = /*#__PURE__*/React.forwardRef(({
+  icon: Icon,
+  sx,
+  className,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntime.jsx(View, {
+  ref: ref,
+  ...props,
+  className: `trk-styled_icon__wrapper ${className}`,
+  color: props.color,
+  sx: {
+    '& svg': {
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%'
+    },
+    ...sx
+  },
+  children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+}));
+
 const TextInputTrailingAction = ({
   icon: Icon,
   disabled,

package/esm/core/ActionList/ActionListItem.js

@@ -7,7 +7,6 @@ import '../../node_modules/styled-system/dist/index.esm.js';
 import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
 import { sx } from '../../utils/styled-system/index.js';
 import Grid from '../Grid/index.js';
-import StyledIcon from '../StyledIcon/index.js';
 import Text from '../Text/index.js';
 import View from '../View/index.js';
 import { ActionListContext } from './index.js';
@@ -16,6 +15,7 @@ import { variant } from '../../node_modules/@styled-system/variant/dist/index.es
 
 const ActionListItem = ({
   variant = 'neutral',
+  size: propSize,
   leadingVisual: LeadingVisual,
   trailingVisual: TrailingVisual,
   description,
@@ -35,10 +35,12 @@ const ActionListItem = ({
 }, ref) => {
   const itemRef = useProvidedOrCreatedRef(ref);
   const {
+    size: contextSize,
     selectionVariant,
     selectionPosition = 'leading',
     onSelect: defaultOnSelect
   } = useContext(ActionListContext);
+  const size = propSize ?? contextSize ?? 'm';
   if (!selectionVariant && selected) {
     throw new Error('To use selected props in ActionList.Item, ActionList selectionVariant props should be defined.');
   }
@@ -56,10 +58,10 @@ const ActionListItem = ({
     }
     externalOnKeyDown?.(event);
   }, [handleSelect, disabled, externalOnKeyDown]);
-  const selectionContent = !isNullable(selectionVariant) ? /*#__PURE__*/jsx(View, {
+  const selectionContent = !isNullable(selectionVariant) ? /*#__PURE__*/jsx(SelectionWrapper, {
     className: 'action_list_item__selection_wrapper',
     display: 'inline-flex',
-    minWidth: 20,
+    size: size,
     sx: {
       ...(selectionPosition === 'trailing' ? {
         ml: 2
@@ -70,27 +72,29 @@ const ActionListItem = ({
         color: 'icon/selected/primary'
       }
     },
-    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsx(StyledIcon, {
-      className: 'action_list_item__selection_wrapper_single',
-      icon: CheckIcon,
-      size: 20
+    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsx(CheckIcon, {
+      className: 'action_list_item__selection_wrapper_single'
     }) : null : selectionVariant === 'multiple' ? /*#__PURE__*/jsx(FakeCheckbox, {
       className: 'action_list_item__selection_wrapper_multiple',
       "aria-checked": selected,
       checked: selected,
       onChange: noop,
       "aria-disabled": disabled,
-      disabled: disabled
+      disabled: disabled,
+      size: size
     }) : null
   }) : null;
   return /*#__PURE__*/jsxs(BaseActionListItem, {
     ref: itemRef,
     variant: variant,
+    size: size,
     ...(disabled ? {
       disabled
     } : {
       tabIndex: externalTabIndex ?? 0
     }),
+    hasLeadingVisual: !isNullable(LeadingVisual),
+    hasTrailingVisual: !isNullable(TrailingVisual),
     sx: sx,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -122,7 +126,7 @@ const ActionListItem = ({
             fontWeight: description && descriptionLayout === 'block' ? 'bold' : 'medium'
           },
           children: children
-        }), /*#__PURE__*/jsx(Grid.Unit, {
+        }), description ? /*#__PURE__*/jsx(Grid.Unit, {
           className: 'action_list_item__content__description',
           size: descriptionLayout === 'inline' ? 'max' : 1,
           children: /*#__PURE__*/jsx(Text, {
@@ -130,7 +134,7 @@ const ActionListItem = ({
             color: disabled ? 'text/disabled' : 'text/neutral/subtler',
             children: description
           })
-        })]
+        }) : null]
       })
     }), /*#__PURE__*/jsx(VisualWrapper, {
       className: 'action_list_item__content__trailing_visual',
@@ -144,9 +148,23 @@ const ActionListItem = ({
     }), selectionPosition === 'trailing' && selectionContent]
   });
 };
+const SelectionWrapper = /*#__PURE__*/styled(View).withConfig({
+  displayName: "ActionListItem__SelectionWrapper",
+  componentId: "sc-cpn5js-0"
+})(["", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      minWidth: forcePixelValue(20)
+    },
+    s: {
+      minWidth: forcePixelValue(20)
+    }
+  }
+}));
 const VisualWrapper = /*#__PURE__*/styled(View).withConfig({
   displayName: "ActionListItem__VisualWrapper",
-  componentId: "sc-cpn5js-0"
+  componentId: "sc-cpn5js-1"
 })(["", ""], variant({
   prop: 'variant',
   variants: {
@@ -166,20 +184,59 @@ const VisualWrapper = /*#__PURE__*/styled(View).withConfig({
 }));
 const BaseActionListItem = /*#__PURE__*/styled.li.withConfig({
   displayName: "ActionListItem__BaseActionListItem",
-  componentId: "sc-cpn5js-1"
-})(["display:flex;align-items:flex-start;font-size:", ";font-weight:", ";line-height:", ";& svg{width:", ";height:", ";}padding:", ";background-color:", ";border-radius:", ";cursor:pointer;transition:background-color 100ms;", " ", " ", ";"], ({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs), ({
+  componentId: "sc-cpn5js-2"
+})(["display:flex;align-items:flex-start;font-weight:", ";line-height:", ";background-color:", ";border-radius:", ";cursor:pointer;transition:background-color 100ms;", " ", " ", " ", ";"], ({
   theme
 }) => theme.fontWeights.medium, ({
   theme
-}) => theme.lineHeights[2], forcePixelValue(20), forcePixelValue(20), ({
-  theme
-}) => forcePixelValue(theme.space[3]), ({
+}) => theme.lineHeights[2], ({
   theme
 }) => theme.colors['bg/neutral/subtler'], ({
   theme
 }) => forcePixelValue(theme.radii.xs), ({
+  theme,
+  hasLeadingVisual,
+  hasTrailingVisual
+}) => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      'fontSize': forcePixelValue(theme.fontSizes.xs),
+      'padding': forcePixelValue(theme.space[3]),
+      '& svg': {
+        width: forcePixelValue(20),
+        height: forcePixelValue(20)
+      }
+    },
+    s: {
+      'fontSize': forcePixelValue(theme.fontSizes.xs),
+      'paddingX': forcePixelValue(theme.space[3]),
+      'paddingY': forcePixelValue(theme.space[2]),
+      ...(hasLeadingVisual ? {
+        '& .action_list_item__leading_visual': {
+          width: forcePixelValue(16),
+          height: forcePixelValue(20),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      } : {}),
+      ...(hasTrailingVisual ? {
+        '& .action_list_item__content__trailing_visual': {
+          width: forcePixelValue(16),
+          height: forcePixelValue(20),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      } : {}),
+      '& svg': {
+        width: forcePixelValue(20),
+        height: forcePixelValue(20)
+      }
+    }
+  }
+}), ({
   theme,
   disabled
 }) => disabled ? css`
@@ -214,8 +271,21 @@ const BaseActionListItem = /*#__PURE__*/styled.li.withConfig({
         ` : null, sx);
 const FakeCheckbox = /*#__PURE__*/styled.div.withConfig({
   displayName: "ActionListItem__FakeCheckbox",
-  componentId: "sc-cpn5js-2"
-})(["position:relative;width:", ";height:", ";border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&[aria-disabled='true']{background-color:", ";border-color:", ";}&[aria-checked='true']{background-color:", ";border-width:0;&::before{visibility:visible;}&[aria-disabled='true']{background-color:", ";border-color:", ";&::before{background-color:", ";}}}", ""], forcePixelValue(20), forcePixelValue(20), forcePixelValue(2), ({
+  componentId: "sc-cpn5js-3"
+})(["position:relative;", " border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&[aria-disabled='true']{background-color:", ";border-color:", ";}&[aria-checked='true']{background-color:", ";border-width:0;&::before{visibility:visible;}&[aria-disabled='true']{background-color:", ";border-color:", ";&::before{background-color:", ";}}}", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      width: forcePixelValue(20),
+      height: forcePixelValue(20)
+    },
+    // TODO: replace with the actual 's' dimensions once the size spec is finalized.
+    s: {
+      width: forcePixelValue(20),
+      height: forcePixelValue(20)
+    }
+  }
+}), forcePixelValue(2), ({
   theme
 }) => theme.colors['border/neutral'], ({
   theme

package/esm/core/ActionList/ActionListSectionDivider.js

@@ -1,21 +1,45 @@
-import HorizontalDivider from '../HorizontalDivider/index.js';
+import { useContext } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { ActionListContext } from './index.js';
 import { jsx } from 'react/jsx-runtime';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+import { border } from '../../node_modules/@styled-system/border/dist/index.esm.js';
 
 const ActionListSectionDivider = ({
   color = 'border/neutral',
   variant = 'solid',
   width = 1,
-  sx
-}) => /*#__PURE__*/jsx(BaseActionListSectionDivider, {
-  className: 'action_list_section_divider',
-  color: color,
-  variant: variant,
-  width: width,
-  sx: {
-    ...sx,
-    my: 3
+  size: propsSize,
+  ...props
+}) => {
+  const {
+    size: contextSize
+  } = useContext(ActionListContext);
+  const size = propsSize ?? contextSize ?? 'm';
+  return /*#__PURE__*/jsx(BaseActionListSectionDivider, {
+    className: 'action_list_section_divider',
+    size: size,
+    borderBottomWidth: width,
+    borderBottomStyle: variant,
+    borderBottomColor: color,
+    ...props
+  });
+};
+const BaseActionListSectionDivider = /*#__PURE__*/styled.hr.withConfig({
+  displayName: "ActionListSectionDivider__BaseActionListSectionDivider",
+  componentId: "sc-b8z51g-0"
+})(["display:block;margin:0;padding:0;border:none;width:100%;", " ", " ", ""], () => variant({
+  prop: 'size',
+  variants: {
+    m: {
+      my: 3
+    },
+    s: {
+      my: 2
+    }
   }
-});
-const BaseActionListSectionDivider = HorizontalDivider;
+}), border, sx);
 
 export { ActionListSectionDivider as default };

package/esm/core/ActionList/index.js

@@ -8,6 +8,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const ActionListContext = /*#__PURE__*/createContext({});
 const ActionList = ({
+  size = 'm',
   selectionVariant,
   selectionPosition,
   onSelect,
@@ -15,6 +16,7 @@ const ActionList = ({
 }) => {
   return /*#__PURE__*/jsx(ActionListContext.Provider, {
     value: {
+      size,
       selectionVariant,
       selectionPosition,
       onSelect

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.70.1",
+  "version": "2.71.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",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "83d4929390e6b37022f432b181916aafc411008d"
+  "gitHead": "b0310d74360eb37f02d3f6df12f64cb7538e2383"
 }