@liner-fe/prism 1.1.3 → 1.1.5

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

@@ -4,7 +4,7 @@ declare const buttonVariants: (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/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
     align?: 'center' | 'spaceBetween';

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '.';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * 기본 버튼
+ */
+export declare const Default: Story;
+/**
+ * level별 버튼
+ */
+export declare const Level: Story;
+/**
+ * align별 버튼
+ */
+export declare const Align: Story;
+/**
+ * size별 버튼
+ */
+export declare const Size: Story;
+/**
+ * 버튼의 비활성화 상태
+ */
+export declare const Disabled: Story;

package/lib/design-token/border-radius/index.d.ts

@@ -0,0 +1 @@
+export declare const Color: () => import("react/jsx-runtime").JSX.Element;

package/lib/design-token/color/index.d.ts

@@ -0,0 +1,5 @@
+interface IProps {
+    type: 'primitive' | 'system';
+}
+export declare const Color: ({ type }: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/design-token/opacity/index.d.ts

@@ -0,0 +1 @@
+export declare const Opacity: () => import("react/jsx-runtime").JSX.Element;

package/lib/design-token/size/index.d.ts

@@ -0,0 +1 @@
+export declare const Size: () => import("react/jsx-runtime").JSX.Element;

package/lib/design-token/typography/index.d.ts

@@ -0,0 +1 @@
+export declare const Typography: () => import("react/jsx-runtime").JSX.Element;

package/lib/index.cjs

@@ -0,0 +1,90 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  objectToArray: () => objectToArray
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/utils/object.ts
+var objectToArray = /* @__PURE__ */ __name((obj) => {
+  return Object.entries(obj);
+}, "objectToArray");
+
+// src/components/Button/index.tsx
+var import_react = require("react");
+
+// src/components/Button/style.module.scss
+var style_module_default = {};
+
+// src/components/Button/index.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+var buttonVariants = (0, import_class_variance_authority.cva)(style_module_default.button, {
+  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,
+      inverse: style_module_default.inverse
+    },
+    align: {
+      center: style_module_default["align-center"],
+      spaceBetween: style_module_default["align-space-between"]
+    },
+    size: {
+      cta: style_module_default.cta,
+      l: style_module_default.l,
+      m: style_module_default.m,
+      s: style_module_default.s
+    }
+  }
+});
+var Button = (0, import_react.forwardRef)(
+  ({ asChild, level = "primary", align = "center", size = "cta", ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return <><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1060_5432)"><path
+      d="M10.8333 7H6.66667C6.29848 7 6 7.29848 6 7.66667V16.3333C6 16.7015 6.29848 17 6.66667 17H12.3368C12.1891 16.6891 12.0859 16.3531 12.0354 16H7V8H10.3333L11.3333 9.33333H17V12.3368C17.3748 12.5149 17.7129 12.7576 18 13.0505V9C18 8.63181 17.7015 8.33333 17.3333 8.33333H11.8333L10.8333 7Z"
+      fill="#1E1E1F"
+    /><path
+      d="M15.0829 18.1665V16.0833H13V15.0833H15.0829V13H16.0829V15.0833H18.1665V16.0833H16.0829V18.1665H15.0829Z"
+      fill="#1E1E1F"
+    /></g><defs><clipPath id="clip0_1060_5432"><path
+      d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+      fill="white"
+    /></clipPath></defs></svg><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1060_5433)"><path d="M11.1667 10.1667L11.1667 16.1667H10.1667L10.1667 10.1667H11.1667Z" fill="#1E1E1F" /><path d="M13.8333 16.1667V10.1667H12.8333V16.1667H13.8333Z" fill="#1E1E1F" /><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.3333 7.66667V6C14.3333 5.63181 14.0348 5.33333 13.6667 5.33333H10.3333C9.96513 5.33333 9.66666 5.63181 9.66666 6V7.66667H6.16666V8.66667H7.0909L7.94487 18.0604C7.97609 18.4037 8.264 18.6667 8.6088 18.6667H15.3912C15.736 18.6667 16.0239 18.4037 16.0551 18.0604L16.9091 8.66667H17.8333V7.66667H14.3333ZM10.6667 6.33333V7.66667H13.3333V6.33333H10.6667ZM15.905 8.66667H8.09503L8.91321 17.6667H15.0868L15.905 8.66667Z"
+      fill="#1E1E1F"
+    /></g><defs><clipPath id="clip0_1060_5433"><path
+      d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+      fill="white"
+    /></clipPath></defs></svg></>;
+  }
+);
+/*! For license information please see index.cjs.LEGAL.txt */
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -0,0 +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    return (\n      <>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g clip-path=\"url(#clip0_1060_5432)\">\n            <path\n              d=\"M10.8333 7H6.66667C6.29848 7 6 7.29848 6 7.66667V16.3333C6 16.7015 6.29848 17 6.66667 17H12.3368C12.1891 16.6891 12.0859 16.3531 12.0354 16H7V8H10.3333L11.3333 9.33333H17V12.3368C17.3748 12.5149 17.7129 12.7576 18 13.0505V9C18 8.63181 17.7015 8.33333 17.3333 8.33333H11.8333L10.8333 7Z\"\n              fill=\"#1E1E1F\"\n            />\n            <path\n              d=\"M15.0829 18.1665V16.0833H13V15.0833H15.0829V13H16.0829V15.0833H18.1665V16.0833H16.0829V18.1665H15.0829Z\"\n              fill=\"#1E1E1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_1060_5432\">\n              <path\n                d=\"M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z\"\n                fill=\"white\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g clip-path=\"url(#clip0_1060_5433)\">\n            <path d=\"M11.1667 10.1667L11.1667 16.1667H10.1667L10.1667 10.1667H11.1667Z\" fill=\"#1E1E1F\" />\n            <path d=\"M13.8333 16.1667V10.1667H12.8333V16.1667H13.8333Z\" fill=\"#1E1E1F\" />\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M14.3333 7.66667V6C14.3333 5.63181 14.0348 5.33333 13.6667 5.33333H10.3333C9.96513 5.33333 9.66666 5.63181 9.66666 6V7.66667H6.16666V8.66667H7.0909L7.94487 18.0604C7.97609 18.4037 8.264 18.6667 8.6088 18.6667H15.3912C15.736 18.6667 16.0239 18.4037 16.0551 18.0604L16.9091 8.66667H17.8333V7.66667H14.3333ZM10.6667 6.33333V7.66667H13.3333V6.33333H10.6667ZM15.905 8.66667H8.09503L8.91321 17.6667H15.0868L15.905 8.66667Z\"\n              fill=\"#1E1E1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_1060_5433\">\n              <path\n                d=\"M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z\"\n                fill=\"white\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </>\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;AAGrB,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;AAC9B,WACE,EACE,CAAC,IAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,CAAC,EAAE,UAAU,wBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACA,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EATC,EAUD,CAAC,KACC,CAAC,SAAS,GAAG,kBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EALC,SAMH,EAPC,KAQH,EAnBC,IAoBD,CAAC,IAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,CAAC,EAAE,UAAU,wBACX,CAAC,KAAK,EAAE,oEAAoE,KAAK,UAAU,EAC3F,CAAC,KAAK,EAAE,oDAAoD,KAAK,UAAU,EAC3E,CAAC;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EATC,EAUD,CAAC,KACC,CAAC,SAAS,GAAG,kBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EALC,SAMH,EAPC,KAQH,EAnBC,IAoBH;AAAA,EAGJ;AACF;",
+  "names": []
+}

package/lib/index.css

@@ -1 +1,112 @@
-.button{position:relative;display:flex;align-items:center;justify-content:center;border:none;font-size:normal;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}.button:disabled{background:var(--neutral-container-mid);color:var(--neutral-label-tertiary);cursor:not-allowed}.primary{background:#4058ff}.primary:not(:disabled):hover{background:#3346cc}.secondary{background:var(--inverse-container-high)}.secondary:not(:disabled):hover{background:#121212}.tertiary{background:#6d6d7014;color:var(--neutral-label-primary)}.tertiary:not(:disabled):hover{background:#ebebeb}.quaternary{color:var(--neutral-label-primary);border:1px solid var(--neutral-border-overlay-normal)}.quaternary:not(:disabled):hover{background:#f5f5f5}.quaternary:disabled{background:var(--neutral-container-mid);color:var(--neutral-label-tertiary);opacity:.4}.quinary{color:#6d6d70cc}.quinary:not(:disabled):hover{background:#f5f5f5}.quinary:disabled{background:var(--neutral-container-mid);color:var(--neutral-label-tertiary);opacity:.4}.negative{background:var(--function-negative)}.negative:not(:disabled):hover{background:#af1b1c}.inverse{color:var(--neutral-label-primary)}.inverse:not(:disabled):hover{background:#f5f5f5}.cta{border-radius:8px;padding:13.5px 12px;font-size:var(--lp-pri-font-size-16);min-width:129px;max-height:48px}.l{border-radius:6px;padding:10.5px 8px;font-size:var(--lp-pri-font-size-15);min-width:107px;max-height:40px}.m{border-radius:6px;padding:7px 6px;font-size:var(--lp-pri-font-size-14);font-weight:var(--lp-pri-font-weight-500);min-width:91px;max-height:32px}.s{border-radius:6px;padding:3.5px 6px;font-size:var(--lp-pri-font-size-13);font-weight:var(--lp-pri-font-weight-500);min-width:89px;max-height:24px}.align-center{justify-content:center}.align-space-between{justify-content:space-between}
+/* src/components/Button/style.module.scss */
+.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  font-size: normal;
+  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;
+}
+.button:disabled {
+  background: var(--neutral-container-mid);
+  color: var(--neutral-label-tertiary);
+  cursor: not-allowed;
+}
+.primary {
+  background: #4058FF;
+}
+.primary:not(:disabled):hover {
+  background: #3346cc;
+}
+.secondary {
+  background: var(--inverse-container-high);
+}
+.secondary:not(:disabled):hover {
+  background: #121212;
+}
+.tertiary {
+  background: rgba(109, 109, 112, 0.0784313725);
+  color: var(--neutral-label-primary);
+}
+.tertiary:not(:disabled):hover {
+  background: #ebebeb;
+}
+.quaternary {
+  color: var(--neutral-label-primary);
+  border: 1px solid var(--neutral-border-overlay-normal);
+}
+.quaternary:not(:disabled):hover {
+  background: #f5f5f5;
+}
+.quaternary:disabled {
+  background: var(--neutral-container-mid);
+  color: var(--neutral-label-tertiary);
+  opacity: 0.4;
+}
+.quinary {
+  color: rgba(109, 109, 112, 0.8);
+}
+.quinary:not(:disabled):hover {
+  background: #f5f5f5;
+}
+.quinary:disabled {
+  background: var(--neutral-container-mid);
+  color: var(--neutral-label-tertiary);
+  opacity: 0.4;
+}
+.negative {
+  background: var(--function-negative);
+}
+.negative:not(:disabled):hover {
+  background: #af1b1c;
+}
+.inverse {
+  color: var(--neutral-label-primary);
+}
+.inverse:not(:disabled):hover {
+  background: #f5f5f5;
+}
+.cta {
+  border-radius: 8px;
+  padding: 13.5px 12px;
+  font-size: var(--lp-pri-font-size-16);
+  min-width: 129px;
+  max-height: 48px;
+}
+.l {
+  border-radius: 6px;
+  padding: 10.5px 8px;
+  font-size: var(--lp-pri-font-size-15);
+  min-width: 107px;
+  max-height: 40px;
+}
+.m {
+  border-radius: 6px;
+  padding: 7px 6px;
+  font-size: var(--lp-pri-font-size-14);
+  font-weight: var(--lp-pri-font-weight-500);
+  min-width: 91px;
+  max-height: 32px;
+}
+.s {
+  border-radius: 6px;
+  padding: 3.5px 6px;
+  font-size: var(--lp-pri-font-size-13);
+  font-weight: var(--lp-pri-font-weight-500);
+  min-width: 89px;
+  max-height: 24px;
+}
+.align-center {
+  justify-content: center;
+}
+.align-space-between {
+  justify-content: space-between;
+}
+/*! For license information please see index.css.LEGAL.txt */
+/*# sourceMappingURL=index.css.map */

package/lib/index.css.map

@@ -0,0 +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;;",
+  "names": []
+}

package/lib/index.mjs

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/utils/object.ts
+var objectToArray = /* @__PURE__ */ __name((obj) => {
+  return Object.entries(obj);
+}, "objectToArray");
+
+// src/components/Button/index.tsx
+import { forwardRef } from "react";
+
+// src/components/Button/style.module.scss
+var style_module_default = {};
+
+// src/components/Button/index.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+var buttonVariants = cva(style_module_default.button, {
+  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,
+      inverse: style_module_default.inverse
+    },
+    align: {
+      center: style_module_default["align-center"],
+      spaceBetween: style_module_default["align-space-between"]
+    },
+    size: {
+      cta: style_module_default.cta,
+      l: style_module_default.l,
+      m: style_module_default.m,
+      s: style_module_default.s
+    }
+  }
+});
+var Button = forwardRef(
+  ({ asChild, level = "primary", align = "center", size = "cta", ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1060_5432)"><path
+      d="M10.8333 7H6.66667C6.29848 7 6 7.29848 6 7.66667V16.3333C6 16.7015 6.29848 17 6.66667 17H12.3368C12.1891 16.6891 12.0859 16.3531 12.0354 16H7V8H10.3333L11.3333 9.33333H17V12.3368C17.3748 12.5149 17.7129 12.7576 18 13.0505V9C18 8.63181 17.7015 8.33333 17.3333 8.33333H11.8333L10.8333 7Z"
+      fill="#1E1E1F"
+    /><path
+      d="M15.0829 18.1665V16.0833H13V15.0833H15.0829V13H16.0829V15.0833H18.1665V16.0833H16.0829V18.1665H15.0829Z"
+      fill="#1E1E1F"
+    /></g><defs><clipPath id="clip0_1060_5432"><path
+      d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+      fill="white"
+    /></clipPath></defs></svg><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1060_5433)"><path d="M11.1667 10.1667L11.1667 16.1667H10.1667L10.1667 10.1667H11.1667Z" fill="#1E1E1F" /><path d="M13.8333 16.1667V10.1667H12.8333V16.1667H13.8333Z" fill="#1E1E1F" /><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.3333 7.66667V6C14.3333 5.63181 14.0348 5.33333 13.6667 5.33333H10.3333C9.96513 5.33333 9.66666 5.63181 9.66666 6V7.66667H6.16666V8.66667H7.0909L7.94487 18.0604C7.97609 18.4037 8.264 18.6667 8.6088 18.6667H15.3912C15.736 18.6667 16.0239 18.4037 16.0551 18.0604L16.9091 8.66667H17.8333V7.66667H14.3333ZM10.6667 6.33333V7.66667H13.3333V6.33333H10.6667ZM15.905 8.66667H8.09503L8.91321 17.6667H15.0868L15.905 8.66667Z"
+      fill="#1E1E1F"
+    /></g><defs><clipPath id="clip0_1060_5433"><path
+      d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+      fill="white"
+    /></clipPath></defs></svg></>;
+  }
+);
+export {
+  Button,
+  objectToArray
+};
+/*! For license information please see index.mjs.LEGAL.txt */
+//# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -0,0 +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    return (\n      <>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g clip-path=\"url(#clip0_1060_5432)\">\n            <path\n              d=\"M10.8333 7H6.66667C6.29848 7 6 7.29848 6 7.66667V16.3333C6 16.7015 6.29848 17 6.66667 17H12.3368C12.1891 16.6891 12.0859 16.3531 12.0354 16H7V8H10.3333L11.3333 9.33333H17V12.3368C17.3748 12.5149 17.7129 12.7576 18 13.0505V9C18 8.63181 17.7015 8.33333 17.3333 8.33333H11.8333L10.8333 7Z\"\n              fill=\"#1E1E1F\"\n            />\n            <path\n              d=\"M15.0829 18.1665V16.0833H13V15.0833H15.0829V13H16.0829V15.0833H18.1665V16.0833H16.0829V18.1665H15.0829Z\"\n              fill=\"#1E1E1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_1060_5432\">\n              <path\n                d=\"M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z\"\n                fill=\"white\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g clip-path=\"url(#clip0_1060_5433)\">\n            <path d=\"M11.1667 10.1667L11.1667 16.1667H10.1667L10.1667 10.1667H11.1667Z\" fill=\"#1E1E1F\" />\n            <path d=\"M13.8333 16.1667V10.1667H12.8333V16.1667H13.8333Z\" fill=\"#1E1E1F\" />\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M14.3333 7.66667V6C14.3333 5.63181 14.0348 5.33333 13.6667 5.33333H10.3333C9.96513 5.33333 9.66666 5.63181 9.66666 6V7.66667H6.16666V8.66667H7.0909L7.94487 18.0604C7.97609 18.4037 8.264 18.6667 8.6088 18.6667H15.3912C15.736 18.6667 16.0239 18.4037 16.0551 18.0604L16.9091 8.66667H17.8333V7.66667H14.3333ZM10.6667 6.33333V7.66667H13.3333V6.33333H10.6667ZM15.905 8.66667H8.09503L8.91321 17.6667H15.0868L15.905 8.66667Z\"\n              fill=\"#1E1E1F\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_1060_5433\">\n              <path\n                d=\"M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z\"\n                fill=\"white\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </>\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;AAGrB,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;AAC9B,WACE,EACE,CAAC,IAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,CAAC,EAAE,UAAU,wBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACA,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EATC,EAUD,CAAC,KACC,CAAC,SAAS,GAAG,kBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EALC,SAMH,EAPC,KAQH,EAnBC,IAoBD,CAAC,IAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,CAAC,EAAE,UAAU,wBACX,CAAC,KAAK,EAAE,oEAAoE,KAAK,UAAU,EAC3F,CAAC,KAAK,EAAE,oDAAoD,KAAK,UAAU,EAC3E,CAAC;AAAA,MACC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EATC,EAUD,CAAC,KACC,CAAC,SAAS,GAAG,kBACX,CAAC;AAAA,MACC,EAAE;AAAA,MACF,KAAK;AAAA,IACP,EACF,EALC,SAMH,EAPC,KAQH,EAnBC,IAoBH;AAAA,EAGJ;AACF;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "packageManager": "yarn@3.6.0",
   "scripts": {
     "dev": "next dev",
@@ -8,7 +8,7 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsc --project tsconfig.production.json && node ./build.mjs",
+    "build": "node ./bin.min.mjs build && tsc --project tsconfig.build.json",
     "build:package": "yarn build",
     "prepack": "yarn build"
   },
@@ -41,9 +41,6 @@
     "@types/react-dom": "^18.2.5",
     "autoprefixer": "^10.4.14",
     "chromatic": "^11.5.3",
-    "esbuild": "^0.23.0",
-    "esbuild-sass-plugin": "^3.3.1",
-    "nanobundle": "^1.6.0",
     "postcss": "^8.4.24",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
@@ -53,19 +50,28 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.1.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "main": "./lib/index.mjs"
+  },
+  "main": "./lib/index.cjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
-  "module": "lib/index",
-  "main": "lib/index",
   "maintainers": [
     {
       "name": "jake-liner",
       "email": "jake@linercorp.com"
     }
-  ],
-  "publishConfig": {
-    "access": "public",
-    "main": "./lib/index.mjs"
-  }
+  ]
 }

package/src/Configure.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/blocks';
+import Image from 'next/image';
+
+import Styling from './assets/design-token-cover.png';
+
+<Meta title="Liner 디자인 시스템 온보딩 문서" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Liner Design System에 오신 것을 환영합니다.
+
+    Liner Design System은 지속가능한 방식으로 디자인의 구성요소를 만듭니다.
+
+  </div>
+  <div>
+    <div>
+      <Image
+        src={Styling}
+        alt="A wall of logos representing different styling technologies"
+        width={200}
+        height={0}
+        style={{ width: '100%', height: 'auto', borderRadius: "10px" }}
+      />
+    </div>
+  </div>
+
+<h2 style={{ marginTop: '40px' }}>developer Guide</h2>
+
+    `npm i @liner-fe/design-token`
+
+  <p>마지막 수정자: 엘리엇 (2024. 06. 13)</p>
+</div>