@teamturing/react-kit 1.1.6 → 1.2.0

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

@@ -0,0 +1,71 @@
+import { ComponentType, SVGProps } from 'react';
+import { ResponsiveValue } from 'styled-system';
+import { UnstyledButtonProps } from '../_UnstyledButton';
+type Props = {
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<'l' | 'm' | 's'>;
+    /**
+     * 색을 정의합니다.
+     * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'plain' | 'danger';
+    /**
+     * 감싸고 있는 컨테이너의 너비를 채웁니다.
+     */
+    fillWidth?: boolean;
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean;
+    /**
+     * 텍스트 앞에 보여질 아이콘을 정의합니다.
+     */
+    leadingIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * 텍스트 뒤에 보여질 아이콘을 정의합니다.
+     */
+    trailingIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+} & UnstyledButtonProps;
+declare const Button: import("react").ForwardRefExoticComponent<{
+    /**
+     * 크기를 정의합니다.
+     * 반응형 디자인이 적용됩니다.
+     */
+    size?: ResponsiveValue<"s" | "m" | "l"> | undefined;
+    /**
+     * 색을 정의합니다.
+     * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | "outlined" | "plain" | "danger" | undefined;
+    /**
+     * 감싸고 있는 컨테이너의 너비를 채웁니다.
+     */
+    fillWidth?: boolean | undefined;
+    /**
+     * 비활성화 상태를 정의합니다.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * 로딩 상태를 정의합니다.
+     */
+    loading?: boolean | undefined;
+    /**
+     * 텍스트 앞에 보여질 아이콘을 정의합니다.
+     */
+    leadingIcon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
+    /**
+     * 텍스트 뒤에 보여질 아이콘을 정의합니다.
+     */
+    trailingIcon?: ComponentType<SVGProps<SVGSVGElement>> | undefined;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("../../utils/styled-system").SxProp & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;
+export type { Props as ButtonProps };

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

@@ -3,10 +3,10 @@
 declare const GradientText: import("styled-components").IStyledComponent<"web", {
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    backgroundColor?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "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" | "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/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
-    color?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "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" | "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/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    backgroundColor?: import("styled-system").ResponsiveValue<"link" | "icon/neutral" | "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" | "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/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/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/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    color?: import("styled-system").ResponsiveValue<"link" | "icon/neutral" | "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" | "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/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/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/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     content?: string | undefined;
-    fontSize?: import("styled-system").ResponsiveValue<"s" | "m" | "l" | "xs" | "xxs" | "display1" | "display2" | "display3" | "display4" | "xxl" | "xl", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    fontSize?: import("styled-system").ResponsiveValue<"s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     fontWeight?: import("styled-system").ResponsiveValue<"bold" | "medium" | "regular", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     lineHeight?: import("styled-system").ResponsiveValue<2 | 1, 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;
@@ -279,9 +279,9 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-    bg?: import("styled-system").ResponsiveValue<"link" | "dim" | "bg/primary" | "text/inverse" | "icon/inverse" | "bg/secondary" | "text/primary" | "icon/primary" | "bg/neutral/subtler" | "border/primary" | "text/neutral/subtle" | "icon/neutral/bolder" | "border/neutral/bolder" | "bg/neutral" | "bg/accent/red/subtlest" | "text/accent/red" | "icon/accent/red" | "bg/accent/red" | "bg/accent/yellow/subtlest" | "text/accent/yellow" | "icon/accent/yellow" | "bg/accent/green/subtlest" | "text/accent/green" | "icon/accent/green" | "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" | "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/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/input" | "border/inverse" | "border/disabled" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/red/subtle" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/accent/blue" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
+    bg?: import("styled-system").ResponsiveValue<"link" | "icon/neutral" | "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" | "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/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/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" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/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/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/neutral", import("styled-system").Theme<import("styled-system").TLengthStyledSystem>> | undefined;
     sx?: import("../../utils/styled-system").BetterSystemStyleObject | undefined;
-    typography?: import("styled-system").ResponsiveValue<"s" | "m" | "l" | "xs" | "xxs" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl" | "xxl/bold" | "xl/regular" | "xl" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
+    typography?: import("styled-system").ResponsiveValue<"s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }>;
 export default GradientText;

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

@@ -39,7 +39,7 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
      * 색을 정의합니다.
      * hover, active, focused, disabled, loading 등의 모든 상황에 관여합니다.
      */
-    variant?: "primary" | "secondary" | "tertiary" | "outlined" | "plain-bold" | "plain" | "plain-subtle" | "danger" | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "outlined" | "plain" | "danger" | "plain-bold" | "plain-subtle" | undefined;
     /**
      * 비활성화 상태를 정의합니다.
      */

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Button } from './core/Button';
 export { default as Chip } from './core/Chip';
 export { default as GradientText } from './core/GradientText';
 export { default as Grid } from './core/Grid';

package/dist/index.js

@@ -21,6 +21,21 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
 
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$2.apply(this, arguments);
+}
+
 const gray = {
   gray50: '#F9FAFB',
   gray100: '#F3F4F6',
@@ -2884,8 +2899,8 @@ var shadow = system({
   }
 });
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2896,7 +2911,7 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 // based on https://github.com/developit/dlv
@@ -3022,7 +3037,7 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 };
 var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
   var _extends2;
-  return _extends$2({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+  return _extends$1({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
 }, {});
 var responsive = function responsive(styles) {
   return function (theme) {
@@ -3057,7 +3072,7 @@ var css = function css(args) {
     if (props === void 0) {
       props = {};
     }
-    var theme = _extends$2({}, defaultTheme, {}, props.theme || props);
+    var theme = _extends$1({}, defaultTheme, {}, props.theme || props);
     var result = {};
     var obj = typeof args === 'function' ? args(theme) : args;
     var styles = responsive(obj)(theme);
@@ -3066,7 +3081,7 @@ var css = function css(args) {
       var val = typeof x === 'function' ? x(theme) : x;
       if (key === 'variant') {
         var variant = css(get(theme, val))(theme);
-        result = _extends$2({}, result, {}, variant);
+        result = _extends$1({}, result, {}, variant);
         continue;
       }
       if (val && typeof val === 'object') {
@@ -3191,6 +3206,75 @@ position.zIndex;
   position.bottom;
   position.left;
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
+  clipRule: "evenodd"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
+  clipRule: "evenodd",
+  opacity: 0.16
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.32
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
+  clipRule: "evenodd",
+  opacity: 0.56
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
+  clipRule: "evenodd",
+  opacity: 0.72
+}));
+
+const spin = nt`
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Spinner = Qe(SvgProgressGradient)`
+  animation: ${spin} 1000ms infinite steps(8, end);
+`;
+Spinner.defaultProps = {
+  width: 32,
+  height: 32,
+  color: color$1['icon/neutral']
+};
+
 // Support CSS custom properties in the `sx` prop
 
 const sx = props => css$1(props.sx);
@@ -3213,6 +3297,355 @@ const wordBreak = system({
   }
 });
 
+const View = Qe.div`
+  ${compose(layout, color, flexbox, background, border, position, shadow)}
+  ${sx}
+`;
+
+const UnstyledButton = Qe.button`
+  background: none;
+  border: 0;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+  ${sx}
+`;
+
+const Button = /*#__PURE__*/React$1.forwardRef(({
+  size = 'm',
+  variant = 'primary',
+  fillWidth = false,
+  disabled = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseButton, _extends$2({
+    ref: ref,
+    size: size,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading,
+    variant: variant,
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    fillWidth: fillWidth
+  }, props), /*#__PURE__*/React.createElement(View, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: 1,
+      visibility: !loading ? 'initial' : 'hidden'
+    }
+  }, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null), loading ? /*#__PURE__*/React.createElement(View, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(BaseSpinner, {
+    size: size,
+    variant: variant
+  })) : null);
+});
+const BaseButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled,
+  fillWidth
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'backgroundColor': 'black',
+  'transition': 'background-color 100ms, color 100ms',
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  'width': fillWidth ? '100%' : 'initial',
+  '& svg': {
+    transition: 'color 100ms'
+  }
+}), ({
+  leadingIcon,
+  trailingIcon
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 3,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography$1['s'].fontSize,
+      'fontWeight': typography$1['s'].fontWeight,
+      'lineHeight': typography$1['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    m: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 2,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography$1['xs'].fontSize,
+      'fontWeight': typography$1['xs'].fontWeight,
+      'lineHeight': typography$1['xs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    s: {
+      'pl': leadingIcon && !trailingIcon ? 2 : 3,
+      'pr': !leadingIcon && trailingIcon ? 2 : 3,
+      'py': 0,
+      'height': 32,
+      'maxHeight': 32,
+      'fontSize': typography$1['xxs'].fontSize,
+      'fontWeight': typography$1['xxs'].fontWeight,
+      'lineHeight': typography$1['xxs'].lineHeight,
+      '& svg': {
+        width: 12,
+        height: 12
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      'backgroundColor': color$1['bg/primary'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/primary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    secondary: {
+      'backgroundColor': color$1['bg/secondary'],
+      'color': color$1['text/primary'],
+      '& svg': {
+        color: color$1['icon/primary']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/secondary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    tertiary: {
+      'backgroundColor': color$1['bg/neutral'],
+      'color': color$1['text/neutral'],
+      '& svg': {
+        color: color$1['icon/accent/gray']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    outlined: {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color$1['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/neutral/subtler/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        },
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    plain: {
+      'backgroundColor': color$1['bg/neutral/subtler'],
+      'color': color$1['text/neutral/subtle'],
+      '& svg': {
+        color: color$1['icon/neutral/bolder']
+      },
+      ':hover:not(:disabled)': {
+        'color': color$1['text/neutral'],
+        '& svg': {
+          color: color$1['icon/accent/gray']
+        }
+      },
+      ':active:not(:disabled)': {
+        'color': color$1['text/neutral'],
+        '& svg': {
+          color: color$1['icon/accent/gray']
+        }
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    },
+    danger: {
+      'backgroundColor': color$1['bg/danger/bold'],
+      'color': color$1['text/inverse'],
+      '& svg': {
+        color: color$1['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color$1['bg/danger/bold/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color$1['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color$1['bg/disabled'],
+        'color': color$1['text/disabled'],
+        '& svg': {
+          color: color$1['icon/disabled']
+        }
+      } : {})
+    }
+  }
+}));
+const BaseSpinner = Qe(Spinner)(variant({
+  prop: 'size',
+  variants: {
+    l: {
+      width: 20,
+      height: 20
+    },
+    m: {
+      width: 16,
+      height: 16
+    },
+    s: {
+      width: 16,
+      height: 16
+    }
+  }
+}), variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      color: color$1['icon/inverse']
+    },
+    secondary: {
+      color: color$1['icon/primary']
+    },
+    tertiary: {
+      color: color$1['icon/accent/gray']
+    },
+    outlined: {
+      color: color$1['icon/neutral/bolder']
+    },
+    plain: {
+      color: color$1['icon/neutral/bolder']
+    },
+    danger: {
+      color: color$1['icon/inverse']
+    }
+  }
+}));
+
 const Chip = ({
   children,
   size = 'm',
@@ -3432,21 +3865,6 @@ const GradientText = Qe(Text)`
   -webkit-text-fill-color: transparent;
 `;
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
 /**
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
  */
@@ -3458,11 +3876,6 @@ const isArray = value => Array.isArray(value);
 
 const isNullable = value => value === null || value === undefined;
 
-const View = Qe.div`
-  ${compose(layout, color, flexbox, background, border, position, shadow)}
-  ${sx}
-`;
-
 const Grid = /*#__PURE__*/React$1.forwardRef(({
   children,
   wrap: propWrap = true,
@@ -3472,7 +3885,7 @@ const Grid = /*#__PURE__*/React$1.forwardRef(({
   ...props
 }, ref) => {
   const wrap = Array.isArray(propWrap) ? propWrap.map(value => value === true ? 'true' : 'false') : propWrap === true ? 'true' : 'false';
-  return /*#__PURE__*/React.createElement(BaseGrid, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseGrid, _extends$2({
     ref: ref,
     gapX: gapX,
     gapY: gapY,
@@ -3542,7 +3955,7 @@ const Unit = ({
     const percentage = Math.round(size * 100 * 10000) / 10000;
     return size === 'max' ? '100%' : size === 'min' ? 'none' : `${percentage}%`;
   };
-  return /*#__PURE__*/React.createElement(View, _extends$1({}, mapValueToResponsiveValueProps(size, value => ({
+  return /*#__PURE__*/React.createElement(View, _extends$2({}, mapValueToResponsiveValueProps(size, value => ({
     display: value === 0 ? 'none' : 'initial',
     flowGrow: getFlexGrowBySize(value),
     flex: getFlexBySize(value),
@@ -3557,85 +3970,6 @@ var index$1 = Object.assign(Grid, {
   Unit
 });
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "1em",
-  height: "1em",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, props), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
-  clipRule: "evenodd",
-  opacity: 0.16
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
-  clipRule: "evenodd",
-  opacity: 0.32
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
-  clipRule: "evenodd",
-  opacity: 0.56
-}), /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  fillRule: "evenodd",
-  d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
-  clipRule: "evenodd",
-  opacity: 0.72
-}));
-
-const spin = nt`
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-const Spinner = Qe(SvgProgressGradient)`
-  animation: ${spin} 1000ms infinite steps(8, end);
-`;
-Spinner.defaultProps = {
-  width: 32,
-  height: 32,
-  color: color$1['icon/neutral']
-};
-
-const UnstyledButton = Qe.button`
-  background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  cursor: pointer;
-
-  ${sx}
-`;
-
 const IconButton = /*#__PURE__*/React$1.forwardRef(({
   icon: Icon,
   size = 'm',
@@ -3645,7 +3979,7 @@ const IconButton = /*#__PURE__*/React$1.forwardRef(({
   type = 'button',
   ...props
 }, ref) => {
-  return /*#__PURE__*/React.createElement(BaseIconButton, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseIconButton, _extends$2({
     ref: ref,
     type: type,
     icon: Icon,
@@ -3846,7 +4180,7 @@ const IconToggleButton = ({
   sx,
   ...props
 }) => {
-  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends$1({
+  return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends$2({
     icon: Icon,
     size: size,
     variant: variant,
@@ -3954,7 +4288,7 @@ const Stack = /*#__PURE__*/React$1.forwardRef(({
   children,
   alignItems = 'center',
   ...props
-}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends$1({
+}, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends$2({
   ref: ref,
   alignItems: alignItems,
   gapX: gapX,
@@ -3999,7 +4333,7 @@ const StyledIcon = ({
   icon: Icon,
   sx,
   ...props
-}) => /*#__PURE__*/React.createElement(View, _extends$1({}, props, {
+}) => /*#__PURE__*/React.createElement(View, _extends$2({}, props, {
   color: props.color,
   sx: {
     '& svg': {
@@ -4011,6 +4345,7 @@ const StyledIcon = ({
   }
 }), /*#__PURE__*/React.createElement(Icon, null));
 
+exports.Button = Button;
 exports.Chip = Chip;
 exports.GradientText = GradientText;
 exports.Grid = index$1;

package/esm/packages/react-kit/src/core/Button/index.js

@@ -0,0 +1,347 @@
+import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import color from '../../../../token-studio/esm/token/color/index.js';
+import radii from '../../../../token-studio/esm/token/radii/index.js';
+import typography from '../../../../token-studio/esm/token/typography/index.js';
+import { forwardRef } from 'react';
+import Qe from '../../../../../node_modules/styled-components/dist/styled-components.esm.js';
+import '../../../../../node_modules/styled-system/dist/index.esm.js';
+import Spinner from '../Spinner/index.js';
+import View from '../View/index.js';
+import UnstyledButton from '../_UnstyledButton.js';
+import { variant } from '../../../../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Button = /*#__PURE__*/forwardRef(({
+  size = 'm',
+  variant = 'primary',
+  fillWidth = false,
+  disabled = false,
+  loading = false,
+  leadingIcon: LeadingIcon,
+  trailingIcon: TrailingIcon,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(BaseButton, _extends({
+    ref: ref,
+    size: size,
+    disabled: disabled || loading,
+    $disabled: disabled,
+    $loading: loading,
+    variant: variant,
+    leadingIcon: LeadingIcon,
+    trailingIcon: TrailingIcon,
+    fillWidth: fillWidth
+  }, props), /*#__PURE__*/React.createElement(View, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      columnGap: 1,
+      visibility: !loading ? 'initial' : 'hidden'
+    }
+  }, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null), loading ? /*#__PURE__*/React.createElement(View, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(BaseSpinner, {
+    size: size,
+    variant: variant
+  })) : null);
+});
+const BaseButton = Qe(UnstyledButton)(({
+  $loading,
+  $disabled,
+  fillWidth
+}) => ({
+  'position': 'relative',
+  'borderRadius': radii.full,
+  'backgroundColor': 'black',
+  'transition': 'background-color 100ms, color 100ms',
+  'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
+  'width': fillWidth ? '100%' : 'initial',
+  '& svg': {
+    transition: 'color 100ms'
+  }
+}), ({
+  leadingIcon,
+  trailingIcon
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 3,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography['s'].fontSize,
+      'fontWeight': typography['s'].fontWeight,
+      'lineHeight': typography['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
+      }
+    },
+    m: {
+      'pl': leadingIcon && !trailingIcon ? 3 : 4,
+      'pr': !leadingIcon && trailingIcon ? 3 : 4,
+      'py': 2,
+      'height': 'initial',
+      'maxHeight': 'initial',
+      'fontSize': typography['xs'].fontSize,
+      'fontWeight': typography['xs'].fontWeight,
+      'lineHeight': typography['xs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
+      }
+    },
+    s: {
+      'pl': leadingIcon && !trailingIcon ? 2 : 3,
+      'pr': !leadingIcon && trailingIcon ? 2 : 3,
+      'py': 0,
+      'height': 32,
+      'maxHeight': 32,
+      'fontSize': typography['xxs'].fontSize,
+      'fontWeight': typography['xxs'].fontWeight,
+      'lineHeight': typography['xxs'].lineHeight,
+      '& svg': {
+        width: 12,
+        height: 12
+      }
+    }
+  }
+}), ({
+  $disabled
+}) => variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      'backgroundColor': color['bg/primary'],
+      'color': color['text/inverse'],
+      '& svg': {
+        color: color['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/primary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/primary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    secondary: {
+      'backgroundColor': color['bg/secondary'],
+      'color': color['text/primary'],
+      '& svg': {
+        color: color['icon/primary']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/secondary/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/secondary/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    tertiary: {
+      'backgroundColor': color['bg/neutral'],
+      'color': color['text/neutral'],
+      '& svg': {
+        color: color['icon/accent/gray']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    outlined: {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['text/neutral/subtle'],
+      '& svg': {
+        color: color['icon/neutral/bolder']
+      },
+      ':after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color['border/neutral/bolder'],
+        borderRadius: radii.full,
+        boxSizing: 'border-box'
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/neutral/subtler/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        },
+        ':after': {
+          display: 'none'
+        }
+      } : {})
+    },
+    plain: {
+      'backgroundColor': color['bg/neutral/subtler'],
+      'color': color['text/neutral/subtle'],
+      '& svg': {
+        color: color['icon/neutral/bolder']
+      },
+      ':hover:not(:disabled)': {
+        'color': color['text/neutral'],
+        '& svg': {
+          color: color['icon/accent/gray']
+        }
+      },
+      ':active:not(:disabled)': {
+        'color': color['text/neutral'],
+        '& svg': {
+          color: color['icon/accent/gray']
+        }
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    },
+    danger: {
+      'backgroundColor': color['bg/danger/bold'],
+      'color': color['text/inverse'],
+      '& svg': {
+        color: color['icon/inverse']
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/hovered']
+      },
+      ':active:not(:disabled)': {
+        backgroundColor: color['bg/danger/bold/pressed']
+      },
+      ':focus-visible': {
+        outlineColor: color['border/focused'],
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+      },
+      ...($disabled ? {
+        'backgroundColor': color['bg/disabled'],
+        'color': color['text/disabled'],
+        '& svg': {
+          color: color['icon/disabled']
+        }
+      } : {})
+    }
+  }
+}));
+const BaseSpinner = Qe(Spinner)(variant({
+  prop: 'size',
+  variants: {
+    l: {
+      width: 20,
+      height: 20
+    },
+    m: {
+      width: 16,
+      height: 16
+    },
+    s: {
+      width: 16,
+      height: 16
+    }
+  }
+}), variant({
+  prop: 'variant',
+  variants: {
+    primary: {
+      color: color['icon/inverse']
+    },
+    secondary: {
+      color: color['icon/primary']
+    },
+    tertiary: {
+      color: color['icon/accent/gray']
+    },
+    outlined: {
+      color: color['icon/neutral/bolder']
+    },
+    plain: {
+      color: color['icon/neutral/bolder']
+    },
+    danger: {
+      color: color['icon/inverse']
+    }
+  }
+}));
+
+export { Button as default };

package/esm/packages/react-kit/src/index.js

@@ -1,3 +1,4 @@
+export { default as Button } from './core/Button/index.js';
 export { default as Chip } from './core/Chip/index.js';
 export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -48,5 +48,5 @@
     "@teamturing/icons": "^1.17.6",
     "@teamturing/token-studio": "^1.1.6"
   },
-  "gitHead": "4ea806dbd2292b60bade45b006c20df693b47e7a"
+  "gitHead": "9a886f294a5301d5733ea151fca77233a541ff96"
 }