@teamturing/react-kit 2.61.1 → 2.62.0

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

@@ -11,11 +11,17 @@ type Props = {
      * `multiple`: 모든 아이템에 Checkbox를 표시합니다.
      */
     selectionVariant?: 'single' | 'multiple';
+    /**
+     * 선택 표시(CheckIcon, Checkbox)의 위치를 결정합니다.
+     * `leading`: LeadingVisual 앞에 표시합니다. (기본값)
+     * `trailing`: TrailingVisual 뒤에 표시합니다.
+     */
+    selectionPosition?: 'leading' | 'trailing';
     onSelect?: (event: ReactMouseEvent<HTMLLIElement> | ReactKeyboardEvent<HTMLLIElement>) => void;
 } & SxProp;
-type ActionListContextValue = {} & Pick<Props, 'selectionVariant' | 'onSelect'>;
-declare const ActionListContext: import("react").Context<Pick<Props, "onSelect" | "selectionVariant">>;
-declare const _default: (({ selectionVariant, onSelect, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+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) & {
     Item: ({ variant, leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, description, descriptionLayout, disabled, selected, onSelect: propOnSelect, children, onFocus, onBlur, sx, }: PropsWithChildren<ActionListItemProps>) => import("react/jsx-runtime").JSX.Element;
     SectionDivider: ({ color, variant, width, sx }: ActionListSectionDividerProps) => import("react/jsx-runtime").JSX.Element;
     SectionHeader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,14 @@
 /// <reference types="react" />
 import type { TextProps } from '../Text';
-type GradientTextProps = {
+type Props = {
     variant?: 'violet' | 'pinkBlue';
 } & TextProps;
-declare const GradientText: import("react").ForwardRefExoticComponent<Omit<GradientTextProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const GradientText: import("react").ForwardRefExoticComponent<{
+    variant?: "violet" | "pinkBlue" | undefined;
+} & {
+    typography?: import("styled-system").ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
+} & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "surface" | "surface/overlay" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/primary" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/weak" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected"> & import("../../utils/styled-system").AsProp & Omit<import("react").HTMLAttributes<HTMLElement>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLSpanElement>>;
 export default GradientText;
-export type { GradientTextProps };
+export type { Props as GradientTextProps };

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

@@ -1,12 +1,15 @@
 import { ColorKey, FontSizeKey, FontWeightKey, LineHeightKey, TypographyKey } from '@teamturing/token-studio';
-import { ComponentPropsWithRef } from 'react';
+import { type HTMLAttributes } from 'react';
 import { FontSizeProps, FontWeightProps, ColorProps, TextAlignProps, Theme, LineHeightProps, ResponsiveValue } from 'styled-system';
 import { AsProp, SxProp, TextDecorationProps, WhiteSpaceProps, WordBreakProps } from '../../utils/styled-system';
-type BaseProps = {
+type StyleProps = {
     typography?: ResponsiveValue<TypographyKey>;
 } & SxProp & WordBreakProps & WhiteSpaceProps & TextDecorationProps & FontSizeProps<Theme, FontSizeKey> & FontWeightProps<Theme, FontWeightKey> & LineHeightProps<Theme, LineHeightKey> & TextAlignProps & ColorProps<Theme, ColorKey>;
-declare const BaseText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BaseProps>>;
-type TextProps = ComponentPropsWithRef<typeof BaseText> & AsProp;
-declare const Text: import("react").ForwardRefExoticComponent<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type Props = StyleProps & AsProp & Omit<HTMLAttributes<HTMLElement>, 'color'>;
+declare const Text: import("react").ForwardRefExoticComponent<{
+    typography?: ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
+} & SxProp & WordBreakProps & WhiteSpaceProps & TextDecorationProps & FontSizeProps<Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & FontWeightProps<Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & LineHeightProps<Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & TextAlignProps<Required<Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "surface" | "surface/overlay" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "border/accent/blue" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/primary" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/weak" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected"> & AsProp & Omit<HTMLAttributes<HTMLElement>, "color"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLSpanElement>>;
 export default Text;
-export type { TextProps };
+export type { Props as TextProps };

package/dist/index.js

@@ -1439,6 +1439,7 @@ const ActionListItem = ({
 }) => {
   const {
     selectionVariant,
+    selectionPosition = 'leading',
     onSelect: defaultOnSelect
   } = React.useContext(ActionListContext);
   if (!selectionVariant && selected) {
@@ -1458,6 +1459,33 @@ const ActionListItem = ({
       handleSelect(event);
     }
   }, [handleSelect, disabled]);
+  const selectionContent = !utils.isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntime.jsx(View, {
+    className: 'action_list_item__selection_wrapper',
+    display: 'inline-flex',
+    minWidth: 20,
+    sx: {
+      ...(selectionPosition === 'trailing' ? {
+        ml: 2
+      } : {
+        mr: 2
+      }),
+      '& svg': {
+        color: 'icon/selected/primary'
+      }
+    },
+    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
+      className: 'action_list_item__selection_wrapper_single',
+      icon: icons.CheckIcon,
+      size: 20
+    }) : 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
+    }) : null
+  }) : null;
   return /*#__PURE__*/jsxRuntime.jsxs(BaseActionListItem, {
     variant: variant,
     ...(disabled ? {
@@ -1470,29 +1498,7 @@ const ActionListItem = ({
     onKeyDown: handleKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: [!utils.isNullable(selectionVariant) ? /*#__PURE__*/jsxRuntime.jsx(View, {
-      className: 'action_list_item__selection_wrapper',
-      display: 'inline-flex',
-      minWidth: 20,
-      sx: {
-        'mr': 2,
-        '& svg': {
-          color: 'icon/selected/primary'
-        }
-      },
-      children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
-        className: 'action_list_item__selection_wrapper_single',
-        icon: icons.CheckIcon,
-        size: 20
-      }) : 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
-      }) : null
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(VisualWrapper, {
+    children: [selectionPosition === 'leading' && selectionContent, /*#__PURE__*/jsxRuntime.jsx(VisualWrapper, {
       className: 'action_list_item__leading_visual',
       display: 'inline-flex',
       flexShrink: 0,
@@ -1535,7 +1541,7 @@ const ActionListItem = ({
       },
       variant: variant,
       children: typeof TrailingVisual !== 'string' && reactIs.isValidElementType(TrailingVisual) ? /*#__PURE__*/jsxRuntime.jsx(TrailingVisual, {}) : TrailingVisual
-    })]
+    }), selectionPosition === 'trailing' && selectionContent]
   });
 };
 const VisualWrapper = /*#__PURE__*/styled__default.default(View).withConfig({
@@ -1693,12 +1699,14 @@ const BaseActionListSectionHeader = /*#__PURE__*/styled__default.default.div.wit
 const ActionListContext = /*#__PURE__*/React.createContext({});
 const ActionList = ({
   selectionVariant,
+  selectionPosition,
   onSelect,
   ...props
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx(ActionListContext.Provider, {
     value: {
       selectionVariant,
+      selectionPosition,
       onSelect
     },
     children: /*#__PURE__*/jsxRuntime.jsx(BaseActionList, {

package/esm/core/ActionList/ActionListItem.js

@@ -10,7 +10,7 @@ import StyledIcon from '../StyledIcon/index.js';
 import Text from '../Text/index.js';
 import View from '../View/index.js';
 import { ActionListContext } from './index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
 const ActionListItem = ({
@@ -29,6 +29,7 @@ const ActionListItem = ({
 }) => {
   const {
     selectionVariant,
+    selectionPosition = 'leading',
     onSelect: defaultOnSelect
   } = useContext(ActionListContext);
   if (!selectionVariant && selected) {
@@ -48,6 +49,33 @@ const ActionListItem = ({
       handleSelect(event);
     }
   }, [handleSelect, disabled]);
+  const selectionContent = !isNullable(selectionVariant) ? /*#__PURE__*/jsx(View, {
+    className: 'action_list_item__selection_wrapper',
+    display: 'inline-flex',
+    minWidth: 20,
+    sx: {
+      ...(selectionPosition === 'trailing' ? {
+        ml: 2
+      } : {
+        mr: 2
+      }),
+      '& svg': {
+        color: 'icon/selected/primary'
+      }
+    },
+    children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsx(StyledIcon, {
+      className: 'action_list_item__selection_wrapper_single',
+      icon: CheckIcon,
+      size: 20
+    }) : 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
+    }) : null
+  }) : null;
   return /*#__PURE__*/jsxs(BaseActionListItem, {
     variant: variant,
     ...(disabled ? {
@@ -60,29 +88,7 @@ const ActionListItem = ({
     onKeyDown: handleKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: [!isNullable(selectionVariant) ? /*#__PURE__*/jsx(View, {
-      className: 'action_list_item__selection_wrapper',
-      display: 'inline-flex',
-      minWidth: 20,
-      sx: {
-        'mr': 2,
-        '& svg': {
-          color: 'icon/selected/primary'
-        }
-      },
-      children: selectionVariant === 'single' ? selected ? /*#__PURE__*/jsx(StyledIcon, {
-        className: 'action_list_item__selection_wrapper_single',
-        icon: CheckIcon,
-        size: 20
-      }) : 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
-      }) : null
-    }) : null, /*#__PURE__*/jsx(VisualWrapper, {
+    children: [selectionPosition === 'leading' && selectionContent, /*#__PURE__*/jsx(VisualWrapper, {
       className: 'action_list_item__leading_visual',
       display: 'inline-flex',
       flexShrink: 0,
@@ -125,7 +131,7 @@ const ActionListItem = ({
       },
       variant: variant,
       children: typeof TrailingVisual !== 'string' && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
-    })]
+    }), selectionPosition === 'trailing' && selectionContent]
   });
 };
 const VisualWrapper = /*#__PURE__*/styled(View).withConfig({

package/esm/core/ActionList/index.js

@@ -9,12 +9,14 @@ import { jsx } from 'react/jsx-runtime';
 const ActionListContext = /*#__PURE__*/createContext({});
 const ActionList = ({
   selectionVariant,
+  selectionPosition,
   onSelect,
   ...props
 }) => {
   return /*#__PURE__*/jsx(ActionListContext.Provider, {
     value: {
       selectionVariant,
+      selectionPosition,
       onSelect
     },
     children: /*#__PURE__*/jsx(BaseActionList, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.61.1",
+  "version": "2.62.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": "6ec3a2fbe8c64af81d4f2e27ab88ebccc7792073"
+  "gitHead": "ea0334a4f5e5ced2558f90291d70e7d8180b6420"
 }