@teamturing/react-kit 2.70.1 → 2.71.1

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/core/ClickArea/index.d.ts

@@ -5,7 +5,7 @@ type Props = {
 } & ViewProps & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
-} & import("../..").SxProp & import("styled-system").LayoutProps<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("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderColorProps<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("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "none" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "full"> & import("../../utils/styled-system").GapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").ColumnGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").RowGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & {
+} & import("../..").SxProp & import("styled-system").LayoutProps<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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest"> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderColorProps<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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "none" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "full"> & import("../../utils/styled-system").GapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").ColumnGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & import("../../utils/styled-system").RowGapProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> & Pick<HTMLAttributes<HTMLDivElement>, "onClick"> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

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

@@ -281,9 +281,9 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     fontWeight?: import("styled-system").ResponsiveValue<"medium" | "bold" | "regular", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<1 | 2, import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     textAlign?: import("styled-system").ResponsiveValue<import("csstype").Property.TextAlign, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    color?: import("styled-system").ResponsiveValue<"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("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
-    bg?: import("styled-system").ResponsiveValue<"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("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
-    backgroundColor?: import("styled-system").ResponsiveValue<"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("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    color?: import("styled-system").ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    bg?: import("styled-system").ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    backgroundColor?: import("styled-system").ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;
 export default GradientText;

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

@@ -281,9 +281,9 @@ declare const Text: import("styled-components").IStyledComponent<"web", {
     fontWeight?: ResponsiveValue<"medium" | "bold" | "regular", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     lineHeight?: ResponsiveValue<1 | 2, Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     textAlign?: ResponsiveValue<import("csstype").Property.TextAlign, Required<Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    color?: ResponsiveValue<"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", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
-    bg?: ResponsiveValue<"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", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
-    backgroundColor?: ResponsiveValue<"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", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    color?: ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    bg?: ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    backgroundColor?: ResponsiveValue<"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" | "bg/loading/subtlest" | "bg/loading/subtler" | "bg/loading/subtle" | "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" | "text/loading/subtle" | "text/loading/subtlest", Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     opacity?: ResponsiveValue<import("csstype").Property.Opacity, Required<Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
 }>;
 export default Text;

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/dist/theme/index.d.ts

@@ -260,6 +260,9 @@ declare const theme: {
         readonly 'bg/danger/bold': "#F5525D";
         readonly 'bg/danger/bold/hovered': "#DC2330";
         readonly 'bg/danger/bold/pressed': "#DC2330";
+        readonly 'bg/loading/subtlest': "#F3F4F6";
+        readonly 'bg/loading/subtler': "#E5E7EB";
+        readonly 'bg/loading/subtle': "#D1D5DB";
         readonly 'text/primary': "#835EEB";
         readonly 'text/accent/blue': "#4880ee";
         readonly 'text/accent/green': "#1FCCA1";
@@ -278,6 +281,8 @@ declare const theme: {
         readonly 'text/warning': "#FFC107";
         readonly 'text/danger': "#F22735";
         readonly 'text/selected': "#33373B";
+        readonly 'text/loading/subtle': "#7A828D";
+        readonly 'text/loading/subtlest': "#E5E7EB";
     };
     gradients: {
         readonly 'overlay/subtlest/toright': string;
@@ -504,6 +509,9 @@ declare const gpaiLightTheme: {
         readonly 'bg/danger/bold': "#F5525D";
         readonly 'bg/danger/bold/hovered': "#DC2330";
         readonly 'bg/danger/bold/pressed': "#DC2330";
+        readonly 'bg/loading/subtlest': "#F3F4F6";
+        readonly 'bg/loading/subtler': "#E5E7EB";
+        readonly 'bg/loading/subtle': "#D1D5DB";
         readonly 'text/primary': "#FF6F0F";
         readonly 'text/accent/blue': "#4880ee";
         readonly 'text/accent/green': "#58CC02";
@@ -522,6 +530,8 @@ declare const gpaiLightTheme: {
         readonly 'text/warning': "#FFC107";
         readonly 'text/danger': "#F22735";
         readonly 'text/selected': "#33373B";
+        readonly 'text/loading/subtle': "#7A828D";
+        readonly 'text/loading/subtlest': "#E5E7EB";
     };
     components: {
         spinner: {
@@ -833,6 +843,9 @@ declare const gpaiDarkTheme: {
         readonly 'bg/danger/bold': "#F22735";
         readonly 'bg/danger/bold/hovered': "#F66E78";
         readonly 'bg/danger/bold/pressed': "#F66E78";
+        readonly 'bg/loading/subtlest': "#43484E";
+        readonly 'bg/loading/subtler': "#575C64";
+        readonly 'bg/loading/subtle': "#6F7680";
         readonly 'text/primary': "#FF8C3F";
         readonly 'text/accent/blue': "#6d99f1";
         readonly 'text/accent/green': "#79D635";
@@ -851,6 +864,8 @@ declare const gpaiDarkTheme: {
         readonly 'text/warning': "#FFCD39";
         readonly 'text/danger': "#F5525D";
         readonly 'text/selected': "#F9FAFB";
+        readonly 'text/loading/subtle': "#8D94A0";
+        readonly 'text/loading/subtlest': "#575C64";
     };
     components: {
         spinner: {

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.1",
   "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",
@@ -56,7 +56,7 @@
     "@floating-ui/react": "^0.27.16",
     "@primer/behaviors": "^1.3.6",
     "@teamturing/icons": "^1.75.0",
-    "@teamturing/token-studio": "^1.16.4",
+    "@teamturing/token-studio": "^1.17.0",
     "@teamturing/utils": "^1.6.1",
     "framer-motion": "^10.16.4",
     "lodash.debounce": "^4.0.8",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "83d4929390e6b37022f432b181916aafc411008d"
+  "gitHead": "4b2816ef526bcbd79c7fc513ebd1a5698c417302"
 }