@liner-fe/prism 1.1.6 → 1.1.8

package/lib/components/Button/index.d.ts

@@ -1,18 +1,43 @@
 import { ButtonHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
-declare const buttonVariants: (props?: ({
+declare const defaultButtonVariants: (props?: ({
     level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | "inverse" | null | undefined;
     align?: "center" | "spaceBetween" | null | undefined;
     size?: "cta" | "l" | "m" | "s" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+declare const textButtonVariants: (props?: ({
+    level?: "inversePrimary" | "neutralPrimary" | "inverseStaticPrimary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const iconButtonVariants: (props?: ({
+    level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | null | undefined;
+    weight?: null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: 'default' | 'text' | 'icon';
+    asChild?: boolean;
+}
+export interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {
+    as?: 'default';
     asChild?: boolean;
-    align?: 'center' | 'spaceBetween';
     level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';
     size?: 'cta' | 'l' | 'm' | 's';
+    align?: 'center' | 'spaceBetween';
+}
+export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
+    as?: 'text';
+    asChild?: boolean;
+    level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';
+}
+export interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {
+    as?: 'icon';
+    asChild?: boolean;
 }
+export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;
 /**
  * 버튼 컴포넌트
  */
+export declare const DefaultButton: import("react").ForwardRefExoticComponent<DefaultButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TextButton: import("react").ForwardRefExoticComponent<TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/components/Button/index.stories.d.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '.';
-declare const meta: Meta<typeof Button>;
+import { DefaultButton } from '.';
+declare const meta: Meta<typeof DefaultButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**
@@ -8,18 +8,26 @@ type Story = StoryObj<typeof meta>;
  */
 export declare const Default: Story;
 /**
- * level별 버튼
+ *  종류별 버튼
  */
-export declare const Level: Story;
+export declare const AS: Story;
 /**
- * align별 버튼
+ * Default 버튼 타입 - level 종류
  */
-export declare const Align: Story;
+export declare const DefaultLevel: Story;
 /**
- * size별 버튼
+ * Default 버튼 - align 종류
  */
-export declare const Size: Story;
+export declare const DefaultAlign: Story;
 /**
- * 버튼의 비활성화 상태
+ * Default 버튼 - size 종류
+ */
+export declare const DefaultSize: Story;
+/**
+ * Text 버튼 - level 종류
+ */
+export declare const TextLevel: Story;
+/**
+ * Default 버튼 - 비활성화 상태
  */
 export declare const Disabled: Story;

package/lib/index.cjs

@@ -32,6 +32,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
+  DefaultButton: () => DefaultButton,
+  IconButton: () => IconButton,
+  TextButton: () => TextButton,
   objectToArray: () => objectToArray
 });
 module.exports = __toCommonJS(src_exports);
@@ -51,7 +54,7 @@ var style_module_default = {};
 var import_class_variance_authority = require("class-variance-authority");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_clsx = __toESM(require("clsx"));
-var buttonVariants = (0, import_class_variance_authority.cva)(style_module_default.button, {
+var defaultButtonVariants = (0, import_class_variance_authority.cva)([style_module_default.button, style_module_default.default], {
   variants: {
     level: {
       primary: style_module_default.primary,
@@ -74,10 +77,59 @@ var buttonVariants = (0, import_class_variance_authority.cva)(style_module_defau
     }
   }
 });
-var Button = (0, import_react.forwardRef)(
-  ({ asChild, level = "primary", align = "center", size = "cta", ...props }, ref) => {
+var textButtonVariants = (0, import_class_variance_authority.cva)([style_module_default.button, style_module_default.text], {
+  variants: {
+    level: {
+      inversePrimary: style_module_default["inverse-primary"],
+      neutralPrimary: style_module_default["neutral-primary"],
+      inverseStaticPrimary: style_module_default["inverse-static-primary"]
+    }
+  }
+});
+var iconButtonVariants = (0, import_class_variance_authority.cva)([style_module_default.button, style_module_default.icon], {
+  variants: {
+    level: {
+      primary: style_module_default.primary,
+      secondary: style_module_default.secondary,
+      tertiary: style_module_default.tertiary,
+      quaternary: style_module_default.quaternary,
+      quinary: style_module_default.quinary,
+      negative: style_module_default.negative
+    },
+    weight: {
+      // 
+    }
+  }
+});
+var DefaultButton = (0, import_react.forwardRef)(
+  ({ as = "default", asChild = false, level = "primary", align = "center", size = "cta", ...rest }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return <Comp {...rest} className={(0, import_clsx.default)(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+  }
+);
+var TextButton = (0, import_react.forwardRef)(
+  ({ as = "text", asChild = false, level = "inversePrimary", ...rest }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return <Comp className={(0, import_clsx.default)(buttonVariants({ level, align, size }))} ref={ref} {...props} />;
+    return <Comp {...rest} className={(0, import_clsx.default)(textButtonVariants({ level }))} ref={ref} />;
+  }
+);
+var IconButton = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const Comp = props.asChild ? import_react_slot.Slot : "button";
+    return <Comp {...props} className={(0, import_clsx.default)(iconButtonVariants({ level: props.level }))} ref={ref} />;
+  }
+);
+var Button = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const Comp = props.asChild ? import_react_slot.Slot : "button";
+    switch (props.as) {
+      case "default":
+        const { level = "primary", align = "center", size = "cta" } = props;
+        return <Comp {...props} className={(0, import_clsx.default)(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+      case "text":
+        const { level: textLevel = "inversePrimary" } = props;
+        return <Comp {...props} className={(0, import_clsx.default)(textButtonVariants({ level: textLevel }))} ref={ref} />;
+    }
   }
 );
 /*! For license information please see index.cjs.LEGAL.txt */

package/lib/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts", "../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
-  "sourcesContent": ["export * from './utils/object';\nexport * from './components/Button';\n", "export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst buttonVariants = cva(style.button, {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n      inverse: style.inverse,\n    },\n    align: {\n      center: style['align-center'],\n      spaceBetween: style['align-space-between'],\n    },\n    size: {\n      cta: style.cta,\n      l: style.l,\n      m: style.m,\n      s: style.s,\n    },\n  },\n});\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  align?: 'center' | 'spaceBetween';\n  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n  size?: 'cta' | 'l' | 'm' | 's';\n  // isLoading?: boolean;\n  // leftIcon?: ReactNode;\n  // rightIcon?: ReactNode;\n}\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ asChild, level = 'primary', align = 'center', size = 'cta', ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp className={clsx(buttonVariants({ level, align, size }))} ref={ref} {...props} />;\n  }\n);\n", ".button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-size: normal;\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%;\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white);\n  overflow: hidden;\n  cursor: pointer;\n}\n.button:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  cursor: not-allowed;\n}\n\n.primary {\n  background: #4058FF;\n}\n.primary:not(:disabled):hover {\n  background: #3346cc;\n}\n\n.secondary {\n  background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n  background: #121212;\n}\n\n.tertiary {\n  background: rgba(109, 109, 112, 0.0784313725);\n  color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n  background: #ebebeb;\n}\n\n.quaternary {\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quaternary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.quinary {\n  color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quinary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.negative {\n  background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n  background: #af1b1c;\n}\n\n.inverse {\n  color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n  background: #f5f5f5;\n}\n\n.cta {\n  border-radius: 8px;\n  padding: 13.5px 12px;\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n\n.l {\n  border-radius: 6px;\n  padding: 10.5px 8px;\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n\n.m {\n  border-radius: 6px;\n  padding: 7px 6px;\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n\n.s {\n  border-radius: 6px;\n  padding: 3.5px 6px;\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n.align-center {\n  justify-content: center;\n}\n\n.align-space-between {\n  justify-content: space-between;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTs7QUFHQTtFQUNFO0VBQ0E7RUFDQTs7O0FBS0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFOztBQUVBO0VBQ0U7OztBQUdKO0VBQ0U7RUFDQTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFO0VBQ0E7O0FBRUE7RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOztBQUVGO0VBQ0U7RUFDQTtFQUNBOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7O0FBS0o7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUVGO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBSUY7RUFDRTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEBpbXBvcnQgXCIuLi8uLi8uLi8uLi9kZXNpZ24tdG9rZW4vZ2xvYmFsLmNzc1wiO1xuLy8gQHVzZSBcIi4uLy4uLy4uLy4uL2Rlc2lnbi10b2tlbi9nbG9iYWwuY3NzXCIgYXMgKjtcblxuLmJ1dHRvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlcjogbm9uZTtcblxuICBmb250LXNpemU6IG5vcm1hbDtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWxwLXByaS1mb250LXdlaWdodC03MDApO1xuICBsaW5lLWhlaWdodDogMTMwJTsgLy8gVE9ETzog7Yag7YGwXG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICBjdXJzb3I6IHBvaW50ZXI7XG4gIC8vIGNvbG9yOiB2YXIoLS1icmFuZC1jb250YWluZXItbWlkKTtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGxldmVsXG4ucHJpbWFyeSB7XG4gIGJhY2tncm91bmQ6ICM0MDU4RkY7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjMzM0NmNjO1xuICB9XG59XG4uc2Vjb25kYXJ5IHtcbiAgYmFja2dyb3VuZDogdmFyKC0taW52ZXJzZS1jb250YWluZXItaGlnaCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjMTIxMjEyO1xuICB9XG59XG4udGVydGlhcnkge1xuICBiYWNrZ3JvdW5kOiAjNkQ2RDcwMTQ7XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2ViZWJlYjtcbiAgfVxufVxuLnF1YXRlcm5hcnkge1xuICAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4IG5ldXRyYWwvYm9yZGVyL292ZXJsYXkvbm9ybWFsXG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1uZXV0cmFsLWJvcmRlci1vdmVybGF5LW5vcm1hbCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmV1dHJhbC1jb250YWluZXItbWlkKTtcbiAgICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC10ZXJ0aWFyeSk7XG4gICAgb3BhY2l0eTogMC40O1xuICB9XG59XG4ucXVpbmFyeSB7XG4gIC8vIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXNlY29uZGFyeSk7XG4gIGNvbG9yOiAjNkQ2RDcwQ0M7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirhcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNmNWY1ZjU7XG4gIH1cbiAgJjpkaXNhYmxlZCB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmV1dHJhbC1jb250YWluZXItbWlkKTtcbiAgICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC10ZXJ0aWFyeSk7XG4gICAgb3BhY2l0eTogMC40O1xuICB9XG59XG4ubmVnYXRpdmUge1xuICAvLyBUT0RPOiBmdW50aW9uL2NvbnRhaW5lci9uZWdhdGl2ZVxuICBiYWNrZ3JvdW5kOiB2YXIoLS1mdW5jdGlvbi1uZWdhdGl2ZSk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjYWYxYjFjO1xuICB9XG59XG4uaW52ZXJzZSB7XG4gIC8vIFRPRE86IG5ldXRyYWwvbGFiZWwvc3RhdGljL3ByaW1hcnlcbiAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtcHJpbWFyeSk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG59XG5cbi8vIHNpemVcbi5jdGEge1xuICBib3JkZXItcmFkaXVzOiA4cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMy41cHggMTJweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIG1pbi13aWR0aDogMTI5cHg7XG4gIG1heC1oZWlnaHQ6IDQ4cHg7XG59XG4ubCB7XG4gIGJvcmRlci1yYWRpdXM6IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIHBhZGRpbmc6IDEwLjVweCA4cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTUpO1xuICBtaW4td2lkdGg6IDEwN3B4O1xuICBtYXgtaGVpZ2h0OiA0MHB4O1xufVxuLm0ge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiA3cHggNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE0KTtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWxwLXByaS1mb250LXdlaWdodC01MDApO1xuICBtaW4td2lkdGg6IDkxcHg7XG4gIG1heC1oZWlnaHQ6IDMycHg7XG59XG4ucyB7XG4gIGJvcmRlci1yYWRpdXM6IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIHBhZGRpbmc6IDMuNXB4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA4OXB4O1xuICBtYXgtaGVpZ2h0OiAyNHB4O1xufVxuXG4vLyBhbGlnblxuLmFsaWduLWNlbnRlciB7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuLmFsaWduLXNwYWNlLWJldHdlZW4ge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG59XG4iXX0= */"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;;;ACA7B,mBAAiD;;;ACAjD;;;ADEA,sCAAkC;AAClC,wBAAqB;AACrB,kBAAiB;AAEjB,IAAM,qBAAiB,qCAAI,qBAAM,QAAQ;AAAA,EACvC,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,qBAAM;AAAA,MACf,WAAW,qBAAM;AAAA,MACjB,UAAU,qBAAM;AAAA,MAChB,YAAY,qBAAM;AAAA,MAClB,SAAS,qBAAM;AAAA,MACf,UAAU,qBAAM;AAAA,MAChB,SAAS,qBAAM;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,qBAAM,cAAc;AAAA,MAC5B,cAAc,qBAAM,qBAAqB;AAAA,IAC3C;AAAA,IACA,MAAM;AAAA,MACJ,KAAK,qBAAM;AAAA,MACX,GAAG,qBAAM;AAAA,MACT,GAAG,qBAAM;AAAA,MACT,GAAG,qBAAM;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAeM,IAAM,aAAS;AAAA,EACpB,CAAC,EAAE,SAAS,QAAQ,WAAW,QAAQ,UAAU,OAAO,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,OAAO,UAAU,yBAAO;AAE9B,WAAO,CAAC,KAAK,eAAW,YAAAA,SAAK,eAAe,EAAE,OAAO,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,SAAS,OAAO;AAAA,EAC7F;AACF;",
+  "sourcesContent": ["export * from './utils/object';\nexport * from './components/Button';\n", "export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button,style.default], {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n      inverse: style.inverse,\n    },\n    align: {\n      center: style['align-center'],\n      spaceBetween: style['align-space-between'],\n    },\n    size: {\n      cta: style.cta,\n      l: style.l,\n      m: style.m,\n      s: style.s,\n    },\n  },\n});\nconst textButtonVariants = cva([style.button,style.text], {\n  variants: {\n    level: {\n      inversePrimary: style['inverse-primary'],\n      neutralPrimary: style['neutral-primary'],\n      inverseStaticPrimary: style['inverse-static-primary'],\n    },\n  },\n});\nconst iconButtonVariants = cva([style.button,style.icon], {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n    },\n    weight: {\n      // \n    },\n  },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n  switch (props.as) {\n    case 'default':\n      const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n      return defaultButtonVariants({ level, align, size });\n    case 'text':\n      return textButtonVariants({ level: props.level });\n    case 'icon':\n      return iconButtonVariants({ level: props.level });\n  }\n}\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: 'default' | 'text' | 'icon';\n  asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n  as?: 'default';\n  asChild?: boolean;\n  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n  size?: 'cta' | 'l' | 'm' | 's';\n  align?: 'center' | 'spaceBetween';\n  // isLoading?: boolean;\n  // leftIcon?: ReactNode;\n  // rightIcon?: ReactNode; \n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n  as?: 'text';\n  asChild?: boolean;\n  level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary' \n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n  as?: 'icon';\n  asChild?: boolean;\n  // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\n\nexport const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n  ({as = 'default',asChild = false, level = 'primary', align = 'center', size= 'cta', ...rest}, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n  }\n);\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n  ({as = 'text',asChild = false, level = 'inversePrimary', ...rest}, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n  }\n);\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props, ref) => {\n    const Comp = props.asChild ? Slot : 'button';\n\n    return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const Comp = props.asChild ? Slot : 'button';\n\n    switch (props.as){\n      case 'default':\n        const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n        return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n      case 'text':\n        const {level:textLevel = 'inversePrimary'} = props;\n        return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n      // case 'icon':\n      //   return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n    }\n  }\n);\n", ".button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-style: normal;\n  font-size: var(--lp-pri-font-size-16);\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%;\n  overflow: hidden;\n  cursor: pointer;\n}\n.button:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  cursor: not-allowed;\n}\n\n.default {\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n  background: none;\n  color: var(--inverse-label-static-primary);\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n  text-decoration: underline;\n  text-underline-offset: 0.2rem;\n}\n\n.icon {\n  background: none;\n}\n\n.primary {\n  background: #4058FF;\n}\n.primary:not(:disabled):hover {\n  background: #3346cc;\n}\n\n.secondary {\n  background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n  background: #121212;\n}\n\n.tertiary {\n  background: rgba(109, 109, 112, 0.0784313725);\n  color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n  background: #ebebeb;\n}\n\n.quaternary {\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quaternary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.quinary {\n  color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quinary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.negative {\n  background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n  background: #af1b1c;\n}\n\n.inverse {\n  color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n  background: #f5f5f5;\n}\n\n.cta {\n  border-radius: 8px;\n  padding: 13.5px 12px;\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n\n.l {\n  border-radius: 6px;\n  padding: 10.5px 8px;\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n\n.m {\n  border-radius: 6px;\n  padding: 7px 6px;\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n\n.s {\n  border-radius: 6px;\n  padding: 3.5px 6px;\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n.align-center {\n  justify-content: center;\n}\n\n.align-space-between {\n  justify-content: space-between;\n}\n\n.inverse-primary {\n  color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n  color: rgba(109, 109, 112, 0.8);\n  opacity: 0.8;\n}\n\n.inverse-static-primary {\n  color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */"],
+  "mappings": "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",
   "names": ["clsx"]
 }

package/lib/index.css

@@ -5,11 +5,10 @@
   align-items: center;
   justify-content: center;
   border: none;
-  font-size: normal;
+  font-style: normal;
+  font-size: var(--lp-pri-font-size-16);
   font-weight: var(--lp-pri-font-weight-700);
   line-height: 130%;
-  color: var(--inverse-label-static-primary);
-  background: var(--lp-pri-achromatic-white);
   overflow: hidden;
   cursor: pointer;
 }
@@ -18,6 +17,23 @@
   color: var(--neutral-label-tertiary);
   cursor: not-allowed;
 }
+.default {
+  color: var(--inverse-label-static-primary);
+  background: var(--lp-pri-achromatic-white);
+}
+.text {
+  background: none;
+  color: var(--inverse-label-static-primary);
+  font-size: var(--lp-pri-font-size-13);
+  font-weight: var(--lp-pri-font-weight-500);
+}
+.text:not(:disabled):hover {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+.icon {
+  background: none;
+}
 .primary {
   background: #4058FF;
 }
@@ -108,5 +124,15 @@
 .align-space-between {
   justify-content: space-between;
 }
+.inverse-primary {
+  color: var(--inverse-label-static-primary);
+}
+.neutral-primary {
+  color: rgba(109, 109, 112, 0.8);
+  opacity: 0.8;
+}
+.inverse-static-primary {
+  color: var(--inverse-label-static-primary);
+}
 /*! For license information please see index.css.LEGAL.txt */
 /*# sourceMappingURL=index.css.map */

package/lib/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/Button/style.module.scss"],
-  "sourcesContent": ["// @import \"../../../../design-token/global.css\";\n// @use \"../../../../design-token/global.css\" as *;\n\n.button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n\n  font-size: normal;\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%; // TODO: 토큰\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white); // TODO: 토큰\n  overflow: hidden;\n\n  cursor: pointer;\n  // color: var(--brand-container-mid);\n\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    cursor: not-allowed;\n  }\n}\n\n// level\n.primary {\n  background: #4058FF; // TODO: 토큰 업데이트 (색상 다름)\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #3346cc;\n  }\n}\n.secondary {\n  background: var(--inverse-container-high);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #121212;\n  }\n}\n.tertiary {\n  background: #6D6D7014;\n  color: var(--neutral-label-primary);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #ebebeb;\n  }\n}\n.quaternary {\n  // TODO: 토큰 업데이트 neutral/border/overlay/normal\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    opacity: 0.4;\n  }\n}\n.quinary {\n  // color: var(--neutral-label-secondary);\n  color: #6D6D70CC; // TODO: 토큰 업데이트\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    opacity: 0.4;\n  }\n}\n.negative {\n  // TODO: funtion/container/negative\n  background: var(--function-negative);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #af1b1c;\n  }\n}\n.inverse {\n  // TODO: neutral/label/static/primary\n  color: var(--neutral-label-primary);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n}\n\n// size\n.cta {\n  border-radius: 8px; // TODO: 토큰\n  padding: 13.5px 12px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n.l {\n  border-radius: 6px; // TODO: 토큰\n  padding: 10.5px 8px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n.m {\n  border-radius: 6px; // TODO: 토큰\n  padding: 7px 6px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n.s {\n  border-radius: 6px; // TODO: 토큰\n  padding: 3.5px 6px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n// align\n.align-center {\n  justify-content: center;\n}\n.align-space-between {\n  justify-content: space-between;\n}\n"],
-  "mappings": ";AAGA,CAAA;AACE,YAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;AACA,UAAA;AAEA,aAAA;AACA,eAAA,IAAA;AACA,eAAA;AACA,SAAA,IAAA;AACA,cAAA,IAAA;AACA,YAAA;AAEA,UAAA;;AAGA,CAjBF,MAiBE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,UAAA;;AAKJ,CAAA;AACE,cAAA;;AAEA,CAHF,OAGE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AACE,cAAA,IAAA;;AAEA,CAHF,SAGE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AACE,cAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AACA,SAAA,IAAA;;AAEA,CAJF,QAIE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AAEE,SAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAEA,CALF,UAKE,KAAA,UAAA;AACE,cAAA;;AAGF,CATF,UASE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,WAAA;;AAGJ,CAAA;AAEE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AAEA,CAJF,OAIE,KAAA,UAAA;AACE,cAAA;;AAEF,CAPF,OAOE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,WAAA;;AAGJ,CAAA;AAEE,cAAA,IAAA;;AAEA,CAJF,QAIE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AAEE,SAAA,IAAA;;AAEA,CAJF,OAIE,KAAA,UAAA;AACE,cAAA;;AAKJ,CAAA;AACE,iBAAA;AACA,WAAA,OAAA;AACA,aAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,OAAA;AACA,aAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,IAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,MAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAIF,CAAA;AACE,mBAAA;;AAEF,CAAA;AACE,mBAAA;;",
+  "sourcesContent": [".button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n\n  font-style:normal;\n  font-size: var(--lp-pri-font-size-16);\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%; // TODO: 토큰\n  overflow: hidden;\n\n  cursor: pointer;\n\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    cursor: not-allowed;\n  }\n}\n\n// as\n.default {\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white); // TODO: 토큰\n  // color: var(--brand-container-mid);\n}\n.text {\n  background: none;\n  color: var(--inverse-label-static-primary);\n  font-size: var(--lp-pri-font-size-13); \n  font-weight: var(--lp-pri-font-weight-500);\n\n  &:not(:disabled):hover {\n    text-decoration: underline;\n    text-underline-offset: 0.2rem;\n  }\n}\n.icon {\n  background: none;\n  \n}\n\n// DefaultButton - level\n.primary {\n  background: #4058FF; // TODO: 토큰 업데이트 (색상 다름)\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #3346cc;\n  }\n}\n.secondary {\n  background: var(--inverse-container-high);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #121212;\n  }\n}\n.tertiary {\n  background: #6D6D7014;\n  color: var(--neutral-label-primary);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #ebebeb;\n  }\n}\n.quaternary {\n  // TODO: 토큰 업데이트 neutral/border/overlay/normal\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    opacity: 0.4;\n  }\n}\n.quinary {\n  // color: var(--neutral-label-secondary);\n  color: #6D6D70CC; // TODO: 토큰 업데이트\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n  &:disabled {\n    background: var(--neutral-container-mid);\n    color: var(--neutral-label-tertiary);\n    opacity: 0.4;\n  }\n}\n.negative {\n  // TODO: funtion/container/negative\n  background: var(--function-negative);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #af1b1c;\n  }\n}\n.inverse {\n  // TODO: neutral/label/static/primary\n  color: var(--neutral-label-primary);\n\n  &:not(:disabled):hover { // TODO: 토큰으로 변환\n    background: #f5f5f5;\n  }\n}\n\n// size\n.cta {\n  border-radius: 8px; // TODO: 토큰\n  padding: 13.5px 12px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n.l {\n  border-radius: 6px; // TODO: 토큰\n  padding: 10.5px 8px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n.m {\n  border-radius: 6px; // TODO: 토큰\n  padding: 7px 6px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n.s {\n  border-radius: 6px; // TODO: 토큰\n  padding: 3.5px 6px; // TODO: 토큰\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n// align\n.align-center {\n  justify-content: center;\n}\n.align-space-between {\n  justify-content: space-between;\n}\n\n// TextButton - level\n.inverse-primary {\n  color: var(--inverse-label-static-primary); // TODO: 토큰 업데이트 (색상 다름)\n}\n.neutral-primary {\n  // color: var(--neutral-label-secondary); // TODO: 토큰 업데이트 (색상 다름)\n  color: #6D6D70CC;\n  opacity: 0.8;\n}\n.inverse-static-primary {\n  color: var(--inverse-label-static-primary);\n}"],
+  "mappings": ";AAAA,CAAA;AACE,YAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;AACA,UAAA;AAEA,cAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;AACA,eAAA;AACA,YAAA;AAEA,UAAA;;AAEA,CAfF,MAeE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,UAAA;;AAKJ,CAAA;AACE,SAAA,IAAA;AACA,cAAA,IAAA;;AAGF,CAAA;AACE,cAAA;AACA,SAAA,IAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;;AAEA,CANF,IAME,KAAA,UAAA;AACE,mBAAA;AACA,yBAAA;;AAGJ,CAAA;AACE,cAAA;;AAKF,CAAA;AACE,cAAA;;AAEA,CAHF,OAGE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AACE,cAAA,IAAA;;AAEA,CAHF,SAGE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AACE,cAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AACA,SAAA,IAAA;;AAEA,CAJF,QAIE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AAEE,SAAA,IAAA;AACA,UAAA,IAAA,MAAA,IAAA;;AAEA,CALF,UAKE,KAAA,UAAA;AACE,cAAA;;AAGF,CATF,UASE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,WAAA;;AAGJ,CAAA;AAEE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;AAEA,CAJF,OAIE,KAAA,UAAA;AACE,cAAA;;AAEF,CAPF,OAOE;AACE,cAAA,IAAA;AACA,SAAA,IAAA;AACA,WAAA;;AAGJ,CAAA;AAEE,cAAA,IAAA;;AAEA,CAJF,QAIE,KAAA,UAAA;AACE,cAAA;;AAGJ,CAAA;AAEE,SAAA,IAAA;;AAEA,CAJF,OAIE,KAAA,UAAA;AACE,cAAA;;AAKJ,CAAA;AACE,iBAAA;AACA,WAAA,OAAA;AACA,aAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,OAAA;AACA,aAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,IAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAEF,CAAA;AACE,iBAAA;AACA,WAAA,MAAA;AACA,aAAA,IAAA;AACA,eAAA,IAAA;AACA,aAAA;AACA,cAAA;;AAIF,CAAA;AACE,mBAAA;;AAEF,CAAA;AACE,mBAAA;;AAIF,CAAA;AACE,SAAA,IAAA;;AAEF,CAAA;AAEE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AACA,WAAA;;AAEF,CAAA;AACE,SAAA,IAAA;;",
   "names": []
 }

package/lib/index.mjs

@@ -16,7 +16,7 @@ var style_module_default = {};
 import { cva } from "class-variance-authority";
 import { Slot } from "@radix-ui/react-slot";
 import clsx from "clsx";
-var buttonVariants = cva(style_module_default.button, {
+var defaultButtonVariants = cva([style_module_default.button, style_module_default.default], {
   variants: {
     level: {
       primary: style_module_default.primary,
@@ -39,14 +39,66 @@ var buttonVariants = cva(style_module_default.button, {
     }
   }
 });
-var Button = forwardRef(
-  ({ asChild, level = "primary", align = "center", size = "cta", ...props }, ref) => {
+var textButtonVariants = cva([style_module_default.button, style_module_default.text], {
+  variants: {
+    level: {
+      inversePrimary: style_module_default["inverse-primary"],
+      neutralPrimary: style_module_default["neutral-primary"],
+      inverseStaticPrimary: style_module_default["inverse-static-primary"]
+    }
+  }
+});
+var iconButtonVariants = cva([style_module_default.button, style_module_default.icon], {
+  variants: {
+    level: {
+      primary: style_module_default.primary,
+      secondary: style_module_default.secondary,
+      tertiary: style_module_default.tertiary,
+      quaternary: style_module_default.quaternary,
+      quinary: style_module_default.quinary,
+      negative: style_module_default.negative
+    },
+    weight: {
+      // 
+    }
+  }
+});
+var DefaultButton = forwardRef(
+  ({ as = "default", asChild = false, level = "primary", align = "center", size = "cta", ...rest }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+  }
+);
+var TextButton = forwardRef(
+  ({ as = "text", asChild = false, level = "inversePrimary", ...rest }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={clsx(buttonVariants({ level, align, size }))} ref={ref} {...props} />;
+    return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;
+  }
+);
+var IconButton = forwardRef(
+  (props, ref) => {
+    const Comp = props.asChild ? Slot : "button";
+    return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
+  }
+);
+var Button = forwardRef(
+  (props, ref) => {
+    const Comp = props.asChild ? Slot : "button";
+    switch (props.as) {
+      case "default":
+        const { level = "primary", align = "center", size = "cta" } = props;
+        return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+      case "text":
+        const { level: textLevel = "inversePrimary" } = props;
+        return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
+    }
   }
 );
 export {
   Button,
+  DefaultButton,
+  IconButton,
+  TextButton,
   objectToArray
 };
 /*! For license information please see index.mjs.LEGAL.txt */

package/lib/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
-  "sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst buttonVariants = cva(style.button, {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n      inverse: style.inverse,\n    },\n    align: {\n      center: style['align-center'],\n      spaceBetween: style['align-space-between'],\n    },\n    size: {\n      cta: style.cta,\n      l: style.l,\n      m: style.m,\n      s: style.s,\n    },\n  },\n});\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  align?: 'center' | 'spaceBetween';\n  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n  size?: 'cta' | 'l' | 'm' | 's';\n  // isLoading?: boolean;\n  // leftIcon?: ReactNode;\n  // rightIcon?: ReactNode;\n}\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ asChild, level = 'primary', align = 'center', size = 'cta', ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp className={clsx(buttonVariants({ level, align, size }))} ref={ref} {...props} />;\n  }\n);\n", ".button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-size: normal;\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%;\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white);\n  overflow: hidden;\n  cursor: pointer;\n}\n.button:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  cursor: not-allowed;\n}\n\n.primary {\n  background: #4058FF;\n}\n.primary:not(:disabled):hover {\n  background: #3346cc;\n}\n\n.secondary {\n  background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n  background: #121212;\n}\n\n.tertiary {\n  background: rgba(109, 109, 112, 0.0784313725);\n  color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n  background: #ebebeb;\n}\n\n.quaternary {\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quaternary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.quinary {\n  color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quinary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.negative {\n  background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n  background: #af1b1c;\n}\n\n.inverse {\n  color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n  background: #f5f5f5;\n}\n\n.cta {\n  border-radius: 8px;\n  padding: 13.5px 12px;\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n\n.l {\n  border-radius: 6px;\n  padding: 10.5px 8px;\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n\n.m {\n  border-radius: 6px;\n  padding: 7px 6px;\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n\n.s {\n  border-radius: 6px;\n  padding: 3.5px 6px;\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n.align-center {\n  justify-content: center;\n}\n\n.align-space-between {\n  justify-content: space-between;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTs7QUFHQTtFQUNFO0VBQ0E7RUFDQTs7O0FBS0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFOztBQUVBO0VBQ0U7OztBQUdKO0VBQ0U7RUFDQTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFO0VBQ0E7O0FBRUE7RUFDRTs7QUFHRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOztBQUVGO0VBQ0U7RUFDQTtFQUNBOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7O0FBS0o7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUVGO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBSUY7RUFDRTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEBpbXBvcnQgXCIuLi8uLi8uLi8uLi9kZXNpZ24tdG9rZW4vZ2xvYmFsLmNzc1wiO1xuLy8gQHVzZSBcIi4uLy4uLy4uLy4uL2Rlc2lnbi10b2tlbi9nbG9iYWwuY3NzXCIgYXMgKjtcblxuLmJ1dHRvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlcjogbm9uZTtcblxuICBmb250LXNpemU6IG5vcm1hbDtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWxwLXByaS1mb250LXdlaWdodC03MDApO1xuICBsaW5lLWhlaWdodDogMTMwJTsgLy8gVE9ETzog7Yag7YGwXG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICBjdXJzb3I6IHBvaW50ZXI7XG4gIC8vIGNvbG9yOiB2YXIoLS1icmFuZC1jb250YWluZXItbWlkKTtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGxldmVsXG4ucHJpbWFyeSB7XG4gIGJhY2tncm91bmQ6ICM0MDU4RkY7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjMzM0NmNjO1xuICB9XG59XG4uc2Vjb25kYXJ5IHtcbiAgYmFja2dyb3VuZDogdmFyKC0taW52ZXJzZS1jb250YWluZXItaGlnaCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjMTIxMjEyO1xuICB9XG59XG4udGVydGlhcnkge1xuICBiYWNrZ3JvdW5kOiAjNkQ2RDcwMTQ7XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2ViZWJlYjtcbiAgfVxufVxuLnF1YXRlcm5hcnkge1xuICAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4IG5ldXRyYWwvYm9yZGVyL292ZXJsYXkvbm9ybWFsXG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1uZXV0cmFsLWJvcmRlci1vdmVybGF5LW5vcm1hbCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmV1dHJhbC1jb250YWluZXItbWlkKTtcbiAgICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC10ZXJ0aWFyeSk7XG4gICAgb3BhY2l0eTogMC40O1xuICB9XG59XG4ucXVpbmFyeSB7XG4gIC8vIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXNlY29uZGFyeSk7XG4gIGNvbG9yOiAjNkQ2RDcwQ0M7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirhcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNmNWY1ZjU7XG4gIH1cbiAgJjpkaXNhYmxlZCB7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tbmV1dHJhbC1jb250YWluZXItbWlkKTtcbiAgICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC10ZXJ0aWFyeSk7XG4gICAgb3BhY2l0eTogMC40O1xuICB9XG59XG4ubmVnYXRpdmUge1xuICAvLyBUT0RPOiBmdW50aW9uL2NvbnRhaW5lci9uZWdhdGl2ZVxuICBiYWNrZ3JvdW5kOiB2YXIoLS1mdW5jdGlvbi1uZWdhdGl2ZSk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjYWYxYjFjO1xuICB9XG59XG4uaW52ZXJzZSB7XG4gIC8vIFRPRE86IG5ldXRyYWwvbGFiZWwvc3RhdGljL3ByaW1hcnlcbiAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtcHJpbWFyeSk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG59XG5cbi8vIHNpemVcbi5jdGEge1xuICBib3JkZXItcmFkaXVzOiA4cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMy41cHggMTJweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIG1pbi13aWR0aDogMTI5cHg7XG4gIG1heC1oZWlnaHQ6IDQ4cHg7XG59XG4ubCB7XG4gIGJvcmRlci1yYWRpdXM6IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIHBhZGRpbmc6IDEwLjVweCA4cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTUpO1xuICBtaW4td2lkdGg6IDEwN3B4O1xuICBtYXgtaGVpZ2h0OiA0MHB4O1xufVxuLm0ge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiA3cHggNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE0KTtcbiAgZm9udC13ZWlnaHQ6IHZhcigtLWxwLXByaS1mb250LXdlaWdodC01MDApO1xuICBtaW4td2lkdGg6IDkxcHg7XG4gIG1heC1oZWlnaHQ6IDMycHg7XG59XG4ucyB7XG4gIGJvcmRlci1yYWRpdXM6IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIHBhZGRpbmc6IDMuNXB4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA4OXB4O1xuICBtYXgtaGVpZ2h0OiAyNHB4O1xufVxuXG4vLyBhbGlnblxuLmFsaWduLWNlbnRlciB7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xufVxuLmFsaWduLXNwYWNlLWJldHdlZW4ge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG59XG4iXX0= */"],
-  "mappings": ";;;;AAAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;;;ACA7B,SAA+B,kBAAkB;;;ACAjD;;;ADEA,SAAuB,WAAW;AAClC,SAAS,YAAY;AACrB,OAAO,UAAU;AAEjB,IAAM,iBAAiB,IAAI,qBAAM,QAAQ;AAAA,EACvC,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS,qBAAM;AAAA,MACf,WAAW,qBAAM;AAAA,MACjB,UAAU,qBAAM;AAAA,MAChB,YAAY,qBAAM;AAAA,MAClB,SAAS,qBAAM;AAAA,MACf,UAAU,qBAAM;AAAA,MAChB,SAAS,qBAAM;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,MACL,QAAQ,qBAAM,cAAc;AAAA,MAC5B,cAAc,qBAAM,qBAAqB;AAAA,IAC3C;AAAA,IACA,MAAM;AAAA,MACJ,KAAK,qBAAM;AAAA,MACX,GAAG,qBAAM;AAAA,MACT,GAAG,qBAAM;AAAA,MACT,GAAG,qBAAM;AAAA,IACX;AAAA,EACF;AACF,CAAC;AAeM,IAAM,SAAS;AAAA,EACpB,CAAC,EAAE,SAAS,QAAQ,WAAW,QAAQ,UAAU,OAAO,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjF,UAAM,OAAO,UAAU,OAAO;AAE9B,WAAO,CAAC,KAAK,WAAW,KAAK,eAAe,EAAE,OAAO,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,SAAS,OAAO;AAAA,EAC7F;AACF;",
+  "sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n  return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button,style.default], {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n      inverse: style.inverse,\n    },\n    align: {\n      center: style['align-center'],\n      spaceBetween: style['align-space-between'],\n    },\n    size: {\n      cta: style.cta,\n      l: style.l,\n      m: style.m,\n      s: style.s,\n    },\n  },\n});\nconst textButtonVariants = cva([style.button,style.text], {\n  variants: {\n    level: {\n      inversePrimary: style['inverse-primary'],\n      neutralPrimary: style['neutral-primary'],\n      inverseStaticPrimary: style['inverse-static-primary'],\n    },\n  },\n});\nconst iconButtonVariants = cva([style.button,style.icon], {\n  variants: {\n    level: {\n      primary: style.primary,\n      secondary: style.secondary,\n      tertiary: style.tertiary,\n      quaternary: style.quaternary,\n      quinary: style.quinary,\n      negative: style.negative,\n    },\n    weight: {\n      // \n    },\n  },\n});\n\nconst getButtonVariant = (props: ButtonProps) => {\n  switch (props.as) {\n    case 'default':\n      const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n      return defaultButtonVariants({ level, align, size });\n    case 'text':\n      return textButtonVariants({ level: props.level });\n    case 'icon':\n      return iconButtonVariants({ level: props.level });\n  }\n}\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: 'default' | 'text' | 'icon';\n  asChild?: boolean;\n}\nexport interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {\n  as?: 'default';\n  asChild?: boolean;\n  level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';\n  size?: 'cta' | 'l' | 'm' | 's';\n  align?: 'center' | 'spaceBetween';\n  // isLoading?: boolean;\n  // leftIcon?: ReactNode;\n  // rightIcon?: ReactNode; \n}\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n  as?: 'text';\n  asChild?: boolean;\n  level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary' \n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n  as?: 'icon';\n  asChild?: boolean;\n  // weight\n}\nexport type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\n\nexport const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(\n  ({as = 'default',asChild = false, level = 'primary', align = 'center', size= 'cta', ...rest}, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n  }\n);\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n  ({as = 'text',asChild = false, level = 'inversePrimary', ...rest}, ref) => {\n    const Comp = asChild ? Slot : 'button';\n\n    return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n  }\n);\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (props, ref) => {\n    const Comp = props.asChild ? Slot : 'button';\n\n    return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const Comp = props.asChild ? Slot : 'button';\n\n    switch (props.as){\n      case 'default':\n        const {level=\"primary\", align=\"center\", size=\"cta\"} = props;\n        return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n      case 'text':\n        const {level:textLevel = 'inversePrimary'} = props;\n        return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;\n      // case 'icon':\n      //   return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n    }\n  }\n);\n", ".button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-style: normal;\n  font-size: var(--lp-pri-font-size-16);\n  font-weight: var(--lp-pri-font-weight-700);\n  line-height: 130%;\n  overflow: hidden;\n  cursor: pointer;\n}\n.button:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  cursor: not-allowed;\n}\n\n.default {\n  color: var(--inverse-label-static-primary);\n  background: var(--lp-pri-achromatic-white);\n}\n\n.text {\n  background: none;\n  color: var(--inverse-label-static-primary);\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n}\n.text:not(:disabled):hover {\n  text-decoration: underline;\n  text-underline-offset: 0.2rem;\n}\n\n.icon {\n  background: none;\n}\n\n.primary {\n  background: #4058FF;\n}\n.primary:not(:disabled):hover {\n  background: #3346cc;\n}\n\n.secondary {\n  background: var(--inverse-container-high);\n}\n.secondary:not(:disabled):hover {\n  background: #121212;\n}\n\n.tertiary {\n  background: rgba(109, 109, 112, 0.0784313725);\n  color: var(--neutral-label-primary);\n}\n.tertiary:not(:disabled):hover {\n  background: #ebebeb;\n}\n\n.quaternary {\n  color: var(--neutral-label-primary);\n  border: 1px solid var(--neutral-border-overlay-normal);\n}\n.quaternary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quaternary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.quinary {\n  color: rgba(109, 109, 112, 0.8);\n}\n.quinary:not(:disabled):hover {\n  background: #f5f5f5;\n}\n.quinary:disabled {\n  background: var(--neutral-container-mid);\n  color: var(--neutral-label-tertiary);\n  opacity: 0.4;\n}\n\n.negative {\n  background: var(--function-negative);\n}\n.negative:not(:disabled):hover {\n  background: #af1b1c;\n}\n\n.inverse {\n  color: var(--neutral-label-primary);\n}\n.inverse:not(:disabled):hover {\n  background: #f5f5f5;\n}\n\n.cta {\n  border-radius: 8px;\n  padding: 13.5px 12px;\n  font-size: var(--lp-pri-font-size-16);\n  min-width: 129px;\n  max-height: 48px;\n}\n\n.l {\n  border-radius: 6px;\n  padding: 10.5px 8px;\n  font-size: var(--lp-pri-font-size-15);\n  min-width: 107px;\n  max-height: 40px;\n}\n\n.m {\n  border-radius: 6px;\n  padding: 7px 6px;\n  font-size: var(--lp-pri-font-size-14);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 91px;\n  max-height: 32px;\n}\n\n.s {\n  border-radius: 6px;\n  padding: 3.5px 6px;\n  font-size: var(--lp-pri-font-size-13);\n  font-weight: var(--lp-pri-font-weight-500);\n  min-width: 89px;\n  max-height: 24px;\n}\n\n.align-center {\n  justify-content: center;\n}\n\n.align-space-between {\n  justify-content: space-between;\n}\n\n.inverse-primary {\n  color: var(--inverse-label-static-primary);\n}\n\n.neutral-primary {\n  color: rgba(109, 109, 112, 0.8);\n  opacity: 0.8;\n}\n\n.inverse-static-primary {\n  color: var(--inverse-label-static-primary);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZnJvbnRlbmQtcGFja2FnZXMvZnJvbnRlbmQtcGFja2FnZXMvcGFja2FnZXMvbGluZXItcHJpc20vc3JjL2NvbXBvbmVudHMvQnV0dG9uIiwic291cmNlcyI6WyJzdHlsZS5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBRUE7O0FBRUE7RUFDRTtFQUNBO0VBQ0E7OztBQUtKO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFO0VBQ0E7OztBQUdKO0VBQ0U7OztBQUtGO0VBQ0U7O0FBRUE7RUFDRTs7O0FBR0o7RUFDRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUNFO0VBQ0E7O0FBRUE7RUFDRTs7O0FBR0o7RUFFRTtFQUNBOztBQUVBO0VBQ0U7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7OztBQUdKO0VBRUU7O0FBRUE7RUFDRTs7QUFFRjtFQUNFO0VBQ0E7RUFDQTs7O0FBR0o7RUFFRTs7QUFFQTtFQUNFOzs7QUFHSjtFQUVFOztBQUVBO0VBQ0U7OztBQUtKO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFFRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7O0FBRUY7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7OztBQUVGO0VBQ0U7OztBQUlGO0VBQ0U7OztBQUVGO0VBRUU7RUFDQTs7O0FBRUY7RUFDRSIsInNvdXJjZXNDb250ZW50IjpbIi5idXR0b24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBib3JkZXI6IG5vbmU7XG5cbiAgZm9udC1zdHlsZTpub3JtYWw7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNik7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNzAwKTtcbiAgbGluZS1oZWlnaHQ6IDEzMCU7IC8vIFRPRE86IO2GoO2BsFxuICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmRpc2FibGVkIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1uZXV0cmFsLWNvbnRhaW5lci1taWQpO1xuICAgIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXRlcnRpYXJ5KTtcbiAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICB9XG59XG5cbi8vIGFzXG4uZGVmYXVsdCB7XG4gIGNvbG9yOiB2YXIoLS1pbnZlcnNlLWxhYmVsLXN0YXRpYy1wcmltYXJ5KTtcbiAgYmFja2dyb3VuZDogdmFyKC0tbHAtcHJpLWFjaHJvbWF0aWMtd2hpdGUpOyAvLyBUT0RPOiDthqDtgbBcbiAgLy8gY29sb3I6IHZhcigtLWJyYW5kLWNvbnRhaW5lci1taWQpO1xufVxuLnRleHQge1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xMyk7IFxuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gICAgdGV4dC11bmRlcmxpbmUtb2Zmc2V0OiAwLjJyZW07XG4gIH1cbn1cbi5pY29uIHtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgXG59XG5cbi8vIERlZmF1bHRCdXR0b24gLSBsZXZlbFxuLnByaW1hcnkge1xuICBiYWNrZ3JvdW5kOiAjNDA1OEZGOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4ICjsg4nsg4Eg64uk66aEKVxuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzMzNDZjYztcbiAgfVxufVxuLnNlY29uZGFyeSB7XG4gIGJhY2tncm91bmQ6IHZhcigtLWludmVyc2UtY29udGFpbmVyLWhpZ2gpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogIzEyMTIxMjtcbiAgfVxufVxuLnRlcnRpYXJ5IHtcbiAgYmFja2dyb3VuZDogIzZENkQ3MDE0O1xuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcblxuICAmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHsgLy8gVE9ETzog7Yag7YGw7Jy866GcIOuzgO2ZmFxuICAgIGJhY2tncm91bmQ6ICNlYmViZWI7XG4gIH1cbn1cbi5xdWF0ZXJuYXJ5IHtcbiAgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCBuZXV0cmFsL2JvcmRlci9vdmVybGF5L25vcm1hbFxuICBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1wcmltYXJ5KTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tbmV1dHJhbC1ib3JkZXItb3ZlcmxheS1ub3JtYWwpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLnF1aW5hcnkge1xuICAvLyBjb2xvcjogdmFyKC0tbmV1dHJhbC1sYWJlbC1zZWNvbmRhcnkpO1xuICBjb2xvcjogIzZENkQ3MENDOyAvLyBUT0RPOiDthqDtgbAg7JeF642w7J207Yq4XG5cbiAgJjpub3QoOmRpc2FibGVkKTpob3ZlciB7IC8vIFRPRE86IO2GoO2BsOycvOuhnCDrs4DtmZhcbiAgICBiYWNrZ3JvdW5kOiAjZjVmNWY1O1xuICB9XG4gICY6ZGlzYWJsZWQge1xuICAgIGJhY2tncm91bmQ6IHZhcigtLW5ldXRyYWwtY29udGFpbmVyLW1pZCk7XG4gICAgY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtdGVydGlhcnkpO1xuICAgIG9wYWNpdHk6IDAuNDtcbiAgfVxufVxuLm5lZ2F0aXZlIHtcbiAgLy8gVE9ETzogZnVudGlvbi9jb250YWluZXIvbmVnYXRpdmVcbiAgYmFja2dyb3VuZDogdmFyKC0tZnVuY3Rpb24tbmVnYXRpdmUpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2FmMWIxYztcbiAgfVxufVxuLmludmVyc2Uge1xuICAvLyBUT0RPOiBuZXV0cmFsL2xhYmVsL3N0YXRpYy9wcmltYXJ5XG4gIGNvbG9yOiB2YXIoLS1uZXV0cmFsLWxhYmVsLXByaW1hcnkpO1xuXG4gICY6bm90KDpkaXNhYmxlZCk6aG92ZXIgeyAvLyBUT0RPOiDthqDtgbDsnLzroZwg67OA7ZmYXG4gICAgYmFja2dyb3VuZDogI2Y1ZjVmNTtcbiAgfVxufVxuXG4vLyBzaXplXG4uY3RhIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogMTMuNXB4IDEycHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTYpO1xuICBtaW4td2lkdGg6IDEyOXB4O1xuICBtYXgtaGVpZ2h0OiA0OHB4O1xufVxuLmwge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAxMC41cHggOHB4OyAvLyBUT0RPOiDthqDtgbBcbiAgZm9udC1zaXplOiB2YXIoLS1scC1wcmktZm9udC1zaXplLTE1KTtcbiAgbWluLXdpZHRoOiAxMDdweDtcbiAgbWF4LWhlaWdodDogNDBweDtcbn1cbi5tIHtcbiAgYm9yZGVyLXJhZGl1czogNnB4OyAvLyBUT0RPOiDthqDtgbBcbiAgcGFkZGluZzogN3B4IDZweDsgLy8gVE9ETzog7Yag7YGwXG4gIGZvbnQtc2l6ZTogdmFyKC0tbHAtcHJpLWZvbnQtc2l6ZS0xNCk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS1scC1wcmktZm9udC13ZWlnaHQtNTAwKTtcbiAgbWluLXdpZHRoOiA5MXB4O1xuICBtYXgtaGVpZ2h0OiAzMnB4O1xufVxuLnMge1xuICBib3JkZXItcmFkaXVzOiA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBwYWRkaW5nOiAzLjVweCA2cHg7IC8vIFRPRE86IO2GoO2BsFxuICBmb250LXNpemU6IHZhcigtLWxwLXByaS1mb250LXNpemUtMTMpO1xuICBmb250LXdlaWdodDogdmFyKC0tbHAtcHJpLWZvbnQtd2VpZ2h0LTUwMCk7XG4gIG1pbi13aWR0aDogODlweDtcbiAgbWF4LWhlaWdodDogMjRweDtcbn1cblxuLy8gYWxpZ25cbi5hbGlnbi1jZW50ZXIge1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbn1cbi5hbGlnbi1zcGFjZS1iZXR3ZWVuIHtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xufVxuXG4vLyBUZXh0QnV0dG9uIC0gbGV2ZWxcbi5pbnZlcnNlLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7IC8vIFRPRE86IO2GoO2BsCDsl4XrjbDsnbTtirggKOyDieyDgSDri6TrpoQpXG59XG4ubmV1dHJhbC1wcmltYXJ5IHtcbiAgLy8gY29sb3I6IHZhcigtLW5ldXRyYWwtbGFiZWwtc2Vjb25kYXJ5KTsgLy8gVE9ETzog7Yag7YGwIOyXheuNsOydtO2KuCAo7IOJ7IOBIOuLpOumhClcbiAgY29sb3I6ICM2RDZENzBDQztcbiAgb3BhY2l0eTogMC44O1xufVxuLmludmVyc2Utc3RhdGljLXByaW1hcnkge1xuICBjb2xvcjogdmFyKC0taW52ZXJzZS1sYWJlbC1zdGF0aWMtcHJpbWFyeSk7XG59Il19 */"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "packageManager": "yarn@3.6.0",
   "scripts": {
     "dev": "next dev",

package/src/components/Button/index.stories.tsx

@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button, ButtonProps } from '.';
+import { Button, ButtonProps, DefaultButton, DefaultButtonProps, IconButton, TextButton, TextButtonProps } from '.';
 
-const meta: Meta<typeof Button> = {
+const meta: Meta<typeof DefaultButton> = {
   title: 'Components/Button',
-  component: Button,
+  component: DefaultButton,
   args: {
     children: 'Button',
+    as: 'default',
+    asChild: false,
     level: 'primary',
     align: 'center',
     size: 'cta',
@@ -18,12 +20,26 @@ const meta: Meta<typeof Button> = {
       },
       description: '버튼 안에 표시할 컨텐츠',
     },
+    as: {
+      options: ['default', 'text', 'icon'],
+      control: {
+        type: 'inline-radio',
+      },
+      description: '버튼의 종류를 설정합니다. 스토리북에서는 동작하지 않습니다',
+    },
+    asChild: {
+      control: {
+        type: 'boolean',
+        default: false,
+      },
+      description: '버튼을 부모 태그의 자식 요소로 사용할 때 사용합니다.',
+    },
     level: {
       options: ['primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'negative', 'inverse'],
       control: {
         type: 'select',
       },
-      description: '버튼의 레벨 타입을 설정합니다.',
+      description: '버튼의 레벨을 설정합니다.',
     },
     align: {
       options: ['center', 'spaceBetween'],
@@ -72,16 +88,32 @@ type Story = StoryObj<typeof meta>;
  */
 export const Default: Story = {
   args: {
+    as: 'default',
     level: 'primary',
     align: 'center',
     size: 'cta',
     disabled: false,
   },
 
-  render: args => <Button {...args}>{args.children}</Button>,
+  render: args => <DefaultButton {...args}>{args.children}</DefaultButton>,
+};
+
+/**
+ *  종류별 버튼
+ */
+export const AS: Story = {
+  render: args => (
+    <>
+      <Button as="default">Default</Button>
+      <Button as="text" level="neutralPrimary">
+        Text
+      </Button>
+      {/* <Button as="icon">Icon</Button> */}
+    </>
+  ),
 };
 
-const LEVELS: ButtonProps['level'][] = [
+const DEFAULT_LEVEL_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['level'][] = [
   'primary',
   'secondary',
   'tertiary',
@@ -92,12 +124,12 @@ const LEVELS: ButtonProps['level'][] = [
 ];
 
 /**
- * level별 버튼
+ * Default 버튼 타입 - level 종류
  */
-export const Level: Story = {
+export const DefaultLevel: Story = {
   render: args => (
     <>
-      {LEVELS.map(level => (
+      {DEFAULT_LEVEL_OPTIONS.map(level => (
         <Button {...args} level={level} key={level}>
           {level}
         </Button>
@@ -106,15 +138,15 @@ export const Level: Story = {
   ),
 };
 
-const ALIGN_OPTIONS: ButtonProps['align'][] = ['center', 'spaceBetween'];
+const DEFAULT_ALIGN_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['align'][] = ['center', 'spaceBetween'];
 
 /**
- * align별 버튼
+ * Default 버튼 - align 종류
  */
-export const Align: Story = {
+export const DefaultAlign: Story = {
   render: args => (
     <>
-      {ALIGN_OPTIONS.map(align => (
+      {DEFAULT_ALIGN_OPTIONS.map(align => (
         <Button {...args} align={align} key={align}>
           {align}
         </Button>
@@ -123,15 +155,15 @@ export const Align: Story = {
   ),
 };
 
-const SIZE_OPTIONS: ButtonProps['size'][] = ['cta', 'l', 'm', 's'];
+const DEFAULT_SIZE_OPTIONS: Extract<ButtonProps, DefaultButtonProps>['size'][] = ['cta', 'l', 'm', 's'];
 
 /**
- * size별 버튼
+ * Default 버튼 - size 종류
  */
-export const Size: Story = {
+export const DefaultSize: Story = {
   render: args => (
     <>
-      {SIZE_OPTIONS.map(size => (
+      {DEFAULT_SIZE_OPTIONS.map(size => (
         <Button {...args} size={size} key={size}>
           {size}
         </Button>
@@ -140,8 +172,37 @@ export const Size: Story = {
   ),
 };
 
+const TEXT_LEVEL_OPTIONS: Extract<ButtonProps, TextButtonProps>['level'][] = [
+  'inversePrimary',
+  'neutralPrimary',
+  'inverseStaticPrimary',
+];
+
+/**
+ * Text 버튼 - level 종류
+ */
+export const TextLevel: Story = {
+  render: args => (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '50px',
+        gap: '2rem',
+        background: '#444444',
+      }}
+    >
+      {TEXT_LEVEL_OPTIONS.map(level => (
+        <Button as="text" level={level} key={level}>
+          {level}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
 /**
- * 버튼의 비활성화 상태
+ * Default 버튼 - 비활성화 상태
  */
 export const Disabled: Story = {
   render: args => (

package/src/components/Button/index.tsx

@@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 
-const buttonVariants = cva(style.button, {
+const defaultButtonVariants = cva([style.button,style.default], {
   variants: {
     level: {
       primary: style.primary,
@@ -27,24 +27,110 @@ const buttonVariants = cva(style.button, {
     },
   },
 });
+const textButtonVariants = cva([style.button,style.text], {
+  variants: {
+    level: {
+      inversePrimary: style['inverse-primary'],
+      neutralPrimary: style['neutral-primary'],
+      inverseStaticPrimary: style['inverse-static-primary'],
+    },
+  },
+});
+const iconButtonVariants = cva([style.button,style.icon], {
+  variants: {
+    level: {
+      primary: style.primary,
+      secondary: style.secondary,
+      tertiary: style.tertiary,
+      quaternary: style.quaternary,
+      quinary: style.quinary,
+      negative: style.negative,
+    },
+    weight: {
+      // 
+    },
+  },
+});
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+const getButtonVariant = (props: ButtonProps) => {
+  switch (props.as) {
+    case 'default':
+      const {level="primary", align="center", size="cta"} = props;
+      return defaultButtonVariants({ level, align, size });
+    case 'text':
+      return textButtonVariants({ level: props.level });
+    case 'icon':
+      return iconButtonVariants({ level: props.level });
+  }
+}
+
+interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: 'default' | 'text' | 'icon';
+  asChild?: boolean;
+}
+export interface DefaultButtonProps extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {
+  as?: 'default';
   asChild?: boolean;
-  align?: 'center' | 'spaceBetween';
   level?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative' | 'inverse';
   size?: 'cta' | 'l' | 'm' | 's';
+  align?: 'center' | 'spaceBetween';
   // isLoading?: boolean;
   // leftIcon?: ReactNode;
-  // rightIcon?: ReactNode;
+  // rightIcon?: ReactNode; 
+}
+export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
+  as?: 'text';
+  asChild?: boolean;
+  level?: 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary' 
+}
+export interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {
+  as?: 'icon';
+  asChild?: boolean;
+  // weight
 }
+export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;
 
 /**
  * 버튼 컴포넌트
  */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild, level = 'primary', align = 'center', size = 'cta', ...props }, ref) => {
+
+export const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps>(
+  ({as = 'default',asChild = false, level = 'primary', align = 'center', size= 'cta', ...rest}, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+  }
+);
+
+export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
+  ({as = 'text',asChild = false, level = 'inversePrimary', ...rest}, ref) => {
     const Comp = asChild ? Slot : 'button';
 
-    return <Comp className={clsx(buttonVariants({ level, align, size }))} ref={ref} {...props} />;
+    return <Comp {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;
+  }
+);
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const Comp = props.asChild ? Slot : 'button';
+
+    return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
+  }
+);
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const Comp = props.asChild ? Slot : 'button';
+
+    switch (props.as){
+      case 'default':
+        const {level="primary", align="center", size="cta"} = props;
+        return <Comp {...props} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
+      case 'text':
+        const {level:textLevel = 'inversePrimary'} = props;
+        return <Comp {...props} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
+      // case 'icon':
+      //   return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
+    }
   }
 );

package/src/components/Button/style.module.scss

@@ -1,6 +1,3 @@
-// @import "../../../../design-token/global.css";
-// @use "../../../../design-token/global.css" as *;
-
 .button {
   position: relative;
   display: flex;
@@ -8,15 +5,13 @@
   justify-content: center;
   border: none;
 
-  font-size: normal;
+  font-style:normal;
+  font-size: var(--lp-pri-font-size-16);
   font-weight: var(--lp-pri-font-weight-700);
   line-height: 130%; // TODO: 토큰
-  color: var(--inverse-label-static-primary);
-  background: var(--lp-pri-achromatic-white); // TODO: 토큰
   overflow: hidden;
 
   cursor: pointer;
-  // color: var(--brand-container-mid);
 
   &:disabled {
     background: var(--neutral-container-mid);
@@ -25,7 +20,29 @@
   }
 }
 
-// level
+// as
+.default {
+  color: var(--inverse-label-static-primary);
+  background: var(--lp-pri-achromatic-white); // TODO: 토큰
+  // color: var(--brand-container-mid);
+}
+.text {
+  background: none;
+  color: var(--inverse-label-static-primary);
+  font-size: var(--lp-pri-font-size-13); 
+  font-weight: var(--lp-pri-font-weight-500);
+
+  &:not(:disabled):hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2rem;
+  }
+}
+.icon {
+  background: none;
+  
+}
+
+// DefaultButton - level
 .primary {
   background: #4058FF; // TODO: 토큰 업데이트 (색상 다름)
 
@@ -132,3 +149,16 @@
 .align-space-between {
   justify-content: space-between;
 }
+
+// TextButton - level
+.inverse-primary {
+  color: var(--inverse-label-static-primary); // TODO: 토큰 업데이트 (색상 다름)
+}
+.neutral-primary {
+  // color: var(--neutral-label-secondary); // TODO: 토큰 업데이트 (색상 다름)
+  color: #6D6D70CC;
+  opacity: 0.8;
+}
+.inverse-static-primary {
+  color: var(--inverse-label-static-primary);
+}