@liner-fe/prism 1.1.14 → 1.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/components/Button/index.d.ts +5 -6
  2. package/lib/index.cjs +23 -4
  3. package/lib/index.cjs.map +2 -2
  4. package/lib/index.css +33 -33
  5. package/lib/index.css.map +3 -3
  6. package/lib/index.d.ts +1 -1
  7. package/lib/index.mjs +23 -4
  8. package/lib/index.mjs.map +2 -2
  9. package/package.json +1 -1
  10. package/src/components/Button/index.tsx +4 -6
  11. package/src/components/Button/style.module.scss +21 -15
  12. package/src/index.ts +1 -1
package/lib/components/Button/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ButtonHTMLAttributes } from 'react';
1
+ import { ButtonHTMLAttributes } from 'react';
2
2
  import { VariantProps } from 'class-variance-authority';
3
3
  declare const defaultButtonVariants: (props?: ({
4
4
  level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | "inverse" | null | undefined;
@@ -36,9 +36,8 @@ export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps
36
36
  /**
37
37
  * 버튼 컴포넌트
38
38
  */
39
- export declare const DefaultButton: React.ForwardRefExoticComponent<DefaultButtonProps & React.RefAttributes<HTMLButtonElement>>;
40
- export declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
41
- export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
42
- export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
43
- export declare const Component: () => import("react/jsx-runtime").JSX.Element;
39
+ export declare const DefaultButton: import("react").ForwardRefExoticComponent<DefaultButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
40
+ export declare const TextButton: import("react").ForwardRefExoticComponent<TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
41
+ export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
42
+ export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
44
43
  export {};
package/lib/index.cjs CHANGED
@@ -32,7 +32,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
32
32
  var src_exports = {};
33
33
  __export(src_exports, {
34
34
  Button: () => Button,
35
- Component: () => Component,
36
35
  DefaultButton: () => DefaultButton,
37
36
  IconButton: () => IconButton,
38
37
  TextButton: () => TextButton,
@@ -50,7 +49,28 @@ var objectToArray = /* @__PURE__ */ __name((obj) => {
50
49
  var import_react = require("react");
51
50
 
52
51
  // src/components/Button/style.module.scss
53
- var style_module_default = {};
52
+ var style_module_default = {
53
+ "button": "_button_vqhwa_1",
54
+ "default": "_default_vqhwa_20",
55
+ "text": "_text_vqhwa_25",
56
+ "icon": "_icon_vqhwa_36",
57
+ "primary": "_primary_vqhwa_40",
58
+ "secondary": "_secondary_vqhwa_47",
59
+ "tertiary": "_tertiary_vqhwa_54",
60
+ "quaternary": "_quaternary_vqhwa_62",
61
+ "quinary": "_quinary_vqhwa_75",
62
+ "negative": "_negative_vqhwa_87",
63
+ "inverse": "_inverse_vqhwa_94",
64
+ "cta": "_cta_vqhwa_101",
65
+ "l": "_l_vqhwa_109",
66
+ "m": "_m_vqhwa_117",
67
+ "s": "_s_vqhwa_47",
68
+ "align-center": "_align-center_vqhwa_135",
69
+ "align-space-between": "_align-space-between_vqhwa_139",
70
+ "inverse-primary": "_inverse-primary_vqhwa_143",
71
+ "neutral-primary": "_neutral-primary_vqhwa_147",
72
+ "inverse-static-primary": "_inverse-static-primary_vqhwa_152"
73
+ };
54
74
 
55
75
  // src/components/Button/index.tsx
56
76
  var import_class_variance_authority = require("class-variance-authority");
@@ -75,7 +95,7 @@ var defaultButtonVariants = (0, import_class_variance_authority.cva)([style_modu
75
95
  size: {
76
96
  cta: style_module_default.cta,
77
97
  l: style_module_default.l,
78
- m: style_module_default.m,
98
+ m: style_module_default.button,
79
99
  s: style_module_default.s
80
100
  }
81
101
  }
@@ -132,6 +152,5 @@ var Button = (0, import_react.forwardRef)((props, ref) => {
132
152
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...textRest, className: (0, import_clsx.default)(textButtonVariants({ level: textLevel })), ref });
133
153
  }
134
154
  });
135
- var Component = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "TEST" }), "Component");
136
155
  /*! For license information please see index.cjs.LEGAL.txt */
137
156
  //# sourceMappingURL=index.cjs.map
package/lib/index.cjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
4
- "sourcesContent": ["import \"@liner-fe/design-token/global.css\";\n\nexport * 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 React, { ButtonHTMLAttributes, forwardRef } from 'react';\n\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\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 */\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>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n case undefined:\n const { as, asChild, level = 'primary', align = 'center', size = 'cta',...rest } = props;\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { as:textAs, asChild:textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;\n return <Comp {...textRest} 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\nexport const Component = () => <div>TEST</div>;\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 */"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAO;;;ACAA,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;;;ACA7B,mBAAwD;;;ACAxD;;;ADGA,sCAAkC;AAClC,wBAAqB;AACrB,kBAAiB;AAmFN;AAjFX,IAAM,4BAAwB,qCAAI,CAAC,qBAAM,QAAQ,qBAAM,OAAO,GAAG;AAAA,EAC/D,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;AACD,IAAM,yBAAqB,qCAAI,CAAC,qBAAM,QAAQ,qBAAM,IAAI,GAAG;AAAA,EACzD,UAAU;AAAA,IACR,OAAO;AAAA,MACL,gBAAgB,qBAAM,iBAAiB;AAAA,MACvC,gBAAgB,qBAAM,iBAAiB;AAAA,MACvC,sBAAsB,qBAAM,wBAAwB;AAAA,IACtD;AAAA,EACF;AACF,CAAC;AACD,IAAM,yBAAqB,qCAAI,CAAC,qBAAM,QAAQ,qBAAM,IAAI,GAAG;AAAA,EACzD,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,IAClB;AAAA,IACA,QAAQ;AAAA;AAAA,IAER;AAAA,EACF;AACF,CAAC;AA+BM,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,KAAK,WAAW,UAAU,OAAO,QAAQ,WAAW,QAAQ,UAAU,OAAO,OAAO,GAAG,KAAK,GAAG,QAAQ;AACxG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WAAO,4CAAC,QAAM,GAAG,MAAM,eAAW,YAAAA,SAAK,sBAAsB,EAAE,OAAO,OAAO,KAAK,CAAC,CAAC,GAAG,KAAU;AAAA,EACnG;AACF;AAEO,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,KAAK,QAAQ,UAAU,OAAO,QAAQ,kBAAkB,GAAG,KAAK,GAAG,QAAQ;AAC5E,UAAM,OAAO,UAAU,yBAAO;AAE9B,WAAO,4CAAC,QAAM,GAAG,MAAM,eAAW,YAAAA,SAAK,mBAAmB,EAAE,MAAM,CAAC,CAAC,GAAG,KAAU;AAAA,EACnF;AACF;AAEO,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACvF,QAAM,OAAO,MAAM,UAAU,yBAAO;AAEpC,SAAO,4CAAC,QAAM,GAAG,OAAO,eAAW,YAAAA,SAAK,mBAAmB,EAAE,OAAO,MAAM,MAAM,CAAC,CAAC,GAAG,KAAU;AACjG,CAAC;AAEM,IAAM,aAAS,yBAA2C,CAAC,OAAO,QAAQ;AAC/E,QAAM,OAAO,MAAM,UAAU,yBAAO;AAEpC,UAAQ,MAAM,IAAI;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AACH,YAAM,EAAE,IAAI,SAAS,QAAQ,WAAW,QAAQ,UAAU,OAAO,OAAM,GAAG,KAAK,IAAI;AACnF,aAAO,4CAAC,QAAM,GAAG,MAAM,eAAW,YAAAA,SAAK,sBAAsB,EAAE,OAAO,OAAO,KAAK,CAAC,CAAC,GAAG,KAAU;AAAA,IACnG,KAAK;AACH,YAAM,EAAE,IAAG,QAAQ,SAAQ,aAAa,OAAO,YAAY,kBAAkB,GAAG,SAAS,IAAI;AAC7F,aAAO,4CAAC,QAAM,GAAG,UAAU,eAAW,YAAAA,SAAK,mBAAmB,EAAE,OAAO,UAAU,CAAC,CAAC,GAAG,KAAU;AAAA,EAGpG;AACF,CAAC;AAEM,IAAM,YAAY,6BAAM,4CAAC,SAAI,kBAAI,GAAf;",
4
+ "sourcesContent": ["import '@liner-fe/design-token/global.css';\n\nexport * 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';\n\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.button,\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\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 */\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>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n case undefined:\n const { as, asChild, level = 'primary', align = 'center', size = 'cta', ...rest } = props;\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { as: textAs, asChild: textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;\n return <Comp {...textRest} 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", "import 'css-chunk:src/components/Button/style.module.scss';export default {\n \"button\": \"_button_vqhwa_1\",\n \"default\": \"_default_vqhwa_20\",\n \"text\": \"_text_vqhwa_25\",\n \"icon\": \"_icon_vqhwa_36\",\n \"primary\": \"_primary_vqhwa_40\",\n \"secondary\": \"_secondary_vqhwa_47\",\n \"tertiary\": \"_tertiary_vqhwa_54\",\n \"quaternary\": \"_quaternary_vqhwa_62\",\n \"quinary\": \"_quinary_vqhwa_75\",\n \"negative\": \"_negative_vqhwa_87\",\n \"inverse\": \"_inverse_vqhwa_94\",\n \"cta\": \"_cta_vqhwa_101\",\n \"l\": \"_l_vqhwa_109\",\n \"m\": \"_m_vqhwa_117\",\n \"s\": \"_s_vqhwa_47\",\n \"align-center\": \"_align-center_vqhwa_135\",\n \"align-space-between\": \"_align-space-between_vqhwa_139\",\n \"inverse-primary\": \"_inverse-primary_vqhwa_143\",\n \"neutral-primary\": \"_neutral-primary_vqhwa_147\",\n \"inverse-static-primary\": \"_inverse-static-primary_vqhwa_152\"\n};"],
5
+ "mappings": "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",
6
6
  "names": ["clsx"]
7
7
  }
package/lib/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* src/components/Button/style.module.scss */
2
- .button {
1
+ /* esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss */
2
+ ._button_vqhwa_1 {
3
3
  position: relative;
4
4
  display: flex;
5
5
  align-items: center;
@@ -12,97 +12,97 @@
12
12
  overflow: hidden;
13
13
  cursor: pointer;
14
14
  }
15
- .button:disabled {
15
+ ._button_vqhwa_1:disabled {
16
16
  background: var(--neutral-container-mid);
17
17
  color: var(--neutral-label-tertiary);
18
18
  cursor: not-allowed;
19
19
  }
20
- .default {
20
+ ._default_vqhwa_20 {
21
21
  color: var(--inverse-label-static-primary);
22
22
  background: var(--lp-pri-achromatic-white);
23
23
  }
24
- .text {
24
+ ._text_vqhwa_25 {
25
25
  background: none;
26
26
  color: var(--inverse-label-static-primary);
27
27
  font-size: var(--lp-pri-font-size-13);
28
28
  font-weight: var(--lp-pri-font-weight-500);
29
29
  }
30
- .text:not(:disabled):hover {
30
+ ._text_vqhwa_25:not(:disabled):hover {
31
31
  text-decoration: underline;
32
32
  text-underline-offset: 0.2rem;
33
33
  }
34
- .icon {
34
+ ._icon_vqhwa_36 {
35
35
  background: none;
36
36
  }
37
- .primary {
38
- background: #4058FF;
37
+ ._primary_vqhwa_40 {
38
+ background: #4058ff;
39
39
  }
40
- .primary:not(:disabled):hover {
40
+ ._primary_vqhwa_40:not(:disabled):hover {
41
41
  background: #3346cc;
42
42
  }
43
- .secondary {
43
+ ._secondary_vqhwa_47 {
44
44
  background: var(--inverse-container-high);
45
45
  }
46
- .secondary:not(:disabled):hover {
46
+ ._secondary_vqhwa_47:not(:disabled):hover {
47
47
  background: #121212;
48
48
  }
49
- .tertiary {
49
+ ._tertiary_vqhwa_54 {
50
50
  background: rgba(109, 109, 112, 0.0784313725);
51
51
  color: var(--neutral-label-primary);
52
52
  }
53
- .tertiary:not(:disabled):hover {
53
+ ._tertiary_vqhwa_54:not(:disabled):hover {
54
54
  background: #ebebeb;
55
55
  }
56
- .quaternary {
56
+ ._quaternary_vqhwa_62 {
57
57
  color: var(--neutral-label-primary);
58
58
  border: 1px solid var(--neutral-border-overlay-normal);
59
59
  }
60
- .quaternary:not(:disabled):hover {
60
+ ._quaternary_vqhwa_62:not(:disabled):hover {
61
61
  background: #f5f5f5;
62
62
  }
63
- .quaternary:disabled {
63
+ ._quaternary_vqhwa_62:disabled {
64
64
  background: var(--neutral-container-mid);
65
65
  color: var(--neutral-label-tertiary);
66
66
  opacity: 0.4;
67
67
  }
68
- .quinary {
68
+ ._quinary_vqhwa_75 {
69
69
  color: rgba(109, 109, 112, 0.8);
70
70
  }
71
- .quinary:not(:disabled):hover {
71
+ ._quinary_vqhwa_75:not(:disabled):hover {
72
72
  background: #f5f5f5;
73
73
  }
74
- .quinary:disabled {
74
+ ._quinary_vqhwa_75:disabled {
75
75
  background: var(--neutral-container-mid);
76
76
  color: var(--neutral-label-tertiary);
77
77
  opacity: 0.4;
78
78
  }
79
- .negative {
79
+ ._negative_vqhwa_87 {
80
80
  background: var(--function-negative);
81
81
  }
82
- .negative:not(:disabled):hover {
82
+ ._negative_vqhwa_87:not(:disabled):hover {
83
83
  background: #af1b1c;
84
84
  }
85
- .inverse {
85
+ ._inverse_vqhwa_94 {
86
86
  color: var(--neutral-label-primary);
87
87
  }
88
- .inverse:not(:disabled):hover {
88
+ ._inverse_vqhwa_94:not(:disabled):hover {
89
89
  background: #f5f5f5;
90
90
  }
91
- .cta {
91
+ ._cta_vqhwa_101 {
92
92
  border-radius: 8px;
93
93
  padding: 13.5px 12px;
94
94
  font-size: var(--lp-pri-font-size-16);
95
95
  min-width: 129px;
96
96
  max-height: 48px;
97
97
  }
98
- .l {
98
+ ._l_vqhwa_109 {
99
99
  border-radius: 6px;
100
100
  padding: 10.5px 8px;
101
101
  font-size: var(--lp-pri-font-size-15);
102
102
  min-width: 107px;
103
103
  max-height: 40px;
104
104
  }
105
- .m {
105
+ ._m_vqhwa_117 {
106
106
  border-radius: 6px;
107
107
  padding: 7px 6px;
108
108
  font-size: var(--lp-pri-font-size-14);
@@ -110,7 +110,7 @@
110
110
  min-width: 91px;
111
111
  max-height: 32px;
112
112
  }
113
- .s {
113
+ ._s_vqhwa_47 {
114
114
  border-radius: 6px;
115
115
  padding: 3.5px 6px;
116
116
  font-size: var(--lp-pri-font-size-13);
@@ -118,20 +118,20 @@
118
118
  min-width: 89px;
119
119
  max-height: 24px;
120
120
  }
121
- .align-center {
121
+ ._align-center_vqhwa_135 {
122
122
  justify-content: center;
123
123
  }
124
- .align-space-between {
124
+ ._align-space-between_vqhwa_139 {
125
125
  justify-content: space-between;
126
126
  }
127
- .inverse-primary {
127
+ ._inverse-primary_vqhwa_143 {
128
128
  color: var(--inverse-label-static-primary);
129
129
  }
130
- .neutral-primary {
130
+ ._neutral-primary_vqhwa_147 {
131
131
  color: rgba(109, 109, 112, 0.8);
132
132
  opacity: 0.8;
133
133
  }
134
- .inverse-static-primary {
134
+ ._inverse-static-primary_vqhwa_152 {
135
135
  color: var(--inverse-label-static-primary);
136
136
  }
137
137
  /*! For license information please see index.css.LEGAL.txt */
package/lib/index.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/components/Button/style.module.scss"],
4
- "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}"],
5
- "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;;",
3
+ "sources": ["esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss"],
4
+ "sourcesContent": ["._button_vqhwa_1 {\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_vqhwa_1:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n._default_vqhwa_20 {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n._text_vqhwa_25 {\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_vqhwa_25:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n._icon_vqhwa_36 {\n background: none;\n}\n\n._primary_vqhwa_40 {\n background: #4058ff;\n}\n._primary_vqhwa_40:not(:disabled):hover {\n background: #3346cc;\n}\n\n._secondary_vqhwa_47 {\n background: var(--inverse-container-high);\n}\n._secondary_vqhwa_47:not(:disabled):hover {\n background: #121212;\n}\n\n._tertiary_vqhwa_54 {\n background: rgba(109, 109, 112, 0.0784313725);\n color: var(--neutral-label-primary);\n}\n._tertiary_vqhwa_54:not(:disabled):hover {\n background: #ebebeb;\n}\n\n._quaternary_vqhwa_62 {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n._quaternary_vqhwa_62:not(:disabled):hover {\n background: #f5f5f5;\n}\n._quaternary_vqhwa_62:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n._quinary_vqhwa_75 {\n color: rgba(109, 109, 112, 0.8);\n}\n._quinary_vqhwa_75:not(:disabled):hover {\n background: #f5f5f5;\n}\n._quinary_vqhwa_75:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n._negative_vqhwa_87 {\n background: var(--function-negative);\n}\n._negative_vqhwa_87:not(:disabled):hover {\n background: #af1b1c;\n}\n\n._inverse_vqhwa_94 {\n color: var(--neutral-label-primary);\n}\n._inverse_vqhwa_94:not(:disabled):hover {\n background: #f5f5f5;\n}\n\n._cta_vqhwa_101 {\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_vqhwa_109 {\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_vqhwa_117 {\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_vqhwa_47 {\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_vqhwa_135 {\n justify-content: center;\n}\n\n._align-space-between_vqhwa_139 {\n justify-content: space-between;\n}\n\n._inverse-primary_vqhwa_143 {\n color: var(--inverse-label-static-primary);\n}\n\n._neutral-primary_vqhwa_147 {\n color: rgba(109, 109, 112, 0.8);\n opacity: 0.8;\n}\n\n._inverse-static-primary_vqhwa_152 {\n color: var(--inverse-label-static-primary);\n}"],
5
+ "mappings": ";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,cAAY;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa;AACb,YAAU;AACV,UAAQ;AACV;AACA,CAbC,eAae;AACd,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CAAC;AACC,SAAO,IAAI;AACX,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY;AACZ,SAAO,IAAI;AACX,aAAW,IAAI;AACf,eAAa,IAAI;AACnB;AACA,CANC,cAMc,KAAK,UAAU;AAC5B,mBAAiB;AACjB,yBAAuB;AACzB;AAEA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACC,cAAY;AACd;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY;AACd;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,mBAGmB,KAAK,UAAU;AACjC,cAAY;AACd;AAEA,CAAC;AACC,cAAY,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAChC,SAAO,IAAI;AACb;AACA,CAJC,kBAIkB,KAAK,UAAU;AAChC,cAAY;AACd;AAEA,CAAC;AACC,SAAO,IAAI;AACX,UAAQ,IAAI,MAAM,IAAI;AACxB;AACA,CAJC,oBAIoB,KAAK,UAAU;AAClC,cAAY;AACd;AACA,CAPC,oBAOoB;AACnB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC7B;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY;AACd;AACA,CANC,iBAMiB;AAChB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,kBAGkB,KAAK,UAAU;AAChC,cAAY;AACd;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,OAAO;AAChB,aAAW,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,OAAO;AAChB,aAAW,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,IAAI;AACb,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,MAAM;AACf,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,mBAAiB;AACnB;AAEA,CAAC;AACC,mBAAiB;AACnB;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3B,WAAS;AACX;AAEA,CAAC;AACC,SAAO,IAAI;AACb;",
6
6
  "names": []
7
7
  }
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import "@liner-fe/design-token/global.css";
1
+ import '@liner-fe/design-token/global.css';
2
2
  export * from './utils/object';
3
3
  export * from './components/Button';
package/lib/index.mjs CHANGED
@@ -13,7 +13,28 @@ var objectToArray = /* @__PURE__ */ __name((obj) => {
13
13
  import { forwardRef } from "react";
14
14
 
15
15
  // src/components/Button/style.module.scss
16
- var style_module_default = {};
16
+ var style_module_default = {
17
+ "button": "_button_vqhwa_1",
18
+ "default": "_default_vqhwa_20",
19
+ "text": "_text_vqhwa_25",
20
+ "icon": "_icon_vqhwa_36",
21
+ "primary": "_primary_vqhwa_40",
22
+ "secondary": "_secondary_vqhwa_47",
23
+ "tertiary": "_tertiary_vqhwa_54",
24
+ "quaternary": "_quaternary_vqhwa_62",
25
+ "quinary": "_quinary_vqhwa_75",
26
+ "negative": "_negative_vqhwa_87",
27
+ "inverse": "_inverse_vqhwa_94",
28
+ "cta": "_cta_vqhwa_101",
29
+ "l": "_l_vqhwa_109",
30
+ "m": "_m_vqhwa_117",
31
+ "s": "_s_vqhwa_47",
32
+ "align-center": "_align-center_vqhwa_135",
33
+ "align-space-between": "_align-space-between_vqhwa_139",
34
+ "inverse-primary": "_inverse-primary_vqhwa_143",
35
+ "neutral-primary": "_neutral-primary_vqhwa_147",
36
+ "inverse-static-primary": "_inverse-static-primary_vqhwa_152"
37
+ };
17
38
 
18
39
  // src/components/Button/index.tsx
19
40
  import { cva } from "class-variance-authority";
@@ -38,7 +59,7 @@ var defaultButtonVariants = cva([style_module_default.button, style_module_defau
38
59
  size: {
39
60
  cta: style_module_default.cta,
40
61
  l: style_module_default.l,
41
- m: style_module_default.m,
62
+ m: style_module_default.button,
42
63
  s: style_module_default.s
43
64
  }
44
65
  }
@@ -95,10 +116,8 @@ var Button = forwardRef((props, ref) => {
95
116
  return /* @__PURE__ */ jsx(Comp, { ...textRest, className: clsx(textButtonVariants({ level: textLevel })), ref });
96
117
  }
97
118
  });
98
- var Component = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { children: "TEST" }), "Component");
99
119
  export {
100
120
  Button,
101
- Component,
102
121
  DefaultButton,
103
122
  IconButton,
104
123
  TextButton,
package/lib/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
4
- "sourcesContent": ["import \"@liner-fe/design-token/global.css\";\n\nexport * 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 React, { ButtonHTMLAttributes, forwardRef } from 'react';\n\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\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 */\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>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n case undefined:\n const { as, asChild, level = 'primary', align = 'center', size = 'cta',...rest } = props;\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { as:textAs, asChild:textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;\n return <Comp {...textRest} 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\nexport const Component = () => <div>TEST</div>;\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 */"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import '@liner-fe/design-token/global.css';\n\nexport * 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';\n\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.button,\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\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 */\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>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n const Comp = props.asChild ? Slot : 'button';\n\n switch (props.as) {\n case 'default':\n case undefined:\n const { as, asChild, level = 'primary', align = 'center', size = 'cta', ...rest } = props;\n return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;\n case 'text':\n const { as: textAs, asChild: textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;\n return <Comp {...textRest} 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", "import 'css-chunk:src/components/Button/style.module.scss';export default {\n \"button\": \"_button_vqhwa_1\",\n \"default\": \"_default_vqhwa_20\",\n \"text\": \"_text_vqhwa_25\",\n \"icon\": \"_icon_vqhwa_36\",\n \"primary\": \"_primary_vqhwa_40\",\n \"secondary\": \"_secondary_vqhwa_47\",\n \"tertiary\": \"_tertiary_vqhwa_54\",\n \"quaternary\": \"_quaternary_vqhwa_62\",\n \"quinary\": \"_quinary_vqhwa_75\",\n \"negative\": \"_negative_vqhwa_87\",\n \"inverse\": \"_inverse_vqhwa_94\",\n \"cta\": \"_cta_vqhwa_101\",\n \"l\": \"_l_vqhwa_109\",\n \"m\": \"_m_vqhwa_117\",\n \"s\": \"_s_vqhwa_47\",\n \"align-center\": \"_align-center_vqhwa_135\",\n \"align-space-between\": \"_align-space-between_vqhwa_139\",\n \"inverse-primary\": \"_inverse-primary_vqhwa_143\",\n \"neutral-primary\": \"_neutral-primary_vqhwa_147\",\n \"inverse-static-primary\": \"_inverse-static-primary_vqhwa_152\"\n};"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liner-fe/prism",
3
- "version": "1.1.14",
3
+ "version": "1.1.16",
4
4
  "packageManager": "yarn@3.6.0",
5
5
  "scripts": {
6
6
  "dev": "next dev",
package/src/components/Button/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ButtonHTMLAttributes, forwardRef } from 'react';
1
+ import { ButtonHTMLAttributes, forwardRef } from 'react';
2
2
 
3
3
  import style from './style.module.scss';
4
4
  import { VariantProps, cva } from 'class-variance-authority';
@@ -23,7 +23,7 @@ const defaultButtonVariants = cva([style.button, style.default], {
23
23
  size: {
24
24
  cta: style.cta,
25
25
  l: style.l,
26
- m: style.m,
26
+ m: style.button,
27
27
  s: style.s,
28
28
  },
29
29
  },
@@ -110,14 +110,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
110
110
  switch (props.as) {
111
111
  case 'default':
112
112
  case undefined:
113
- const { as, asChild, level = 'primary', align = 'center', size = 'cta',...rest } = props;
113
+ const { as, asChild, level = 'primary', align = 'center', size = 'cta', ...rest } = props;
114
114
  return <Comp {...rest} className={clsx(defaultButtonVariants({ level, align, size }))} ref={ref} />;
115
115
  case 'text':
116
- const { as:textAs, asChild:textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;
116
+ const { as: textAs, asChild: textAsChild, level: textLevel = 'inversePrimary', ...textRest } = props;
117
117
  return <Comp {...textRest} className={clsx(textButtonVariants({ level: textLevel }))} ref={ref} />;
118
118
  // case 'icon':
119
119
  // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;
120
120
  }
121
121
  });
122
-
123
- export const Component = () => <div>TEST</div>;
package/src/components/Button/style.module.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  justify-content: center;
6
6
  border: none;
7
7
 
8
- font-style:normal;
8
+ font-style: normal;
9
9
  font-size: var(--lp-pri-font-size-16);
10
10
  font-weight: var(--lp-pri-font-weight-700);
11
11
  line-height: 130%; // TODO: 토큰
@@ -29,7 +29,7 @@
29
29
  .text {
30
30
  background: none;
31
31
  color: var(--inverse-label-static-primary);
32
- font-size: var(--lp-pri-font-size-13);
32
+ font-size: var(--lp-pri-font-size-13);
33
33
  font-weight: var(--lp-pri-font-weight-500);
34
34
 
35
35
  &:not(:disabled):hover {
@@ -39,29 +39,31 @@
39
39
  }
40
40
  .icon {
41
41
  background: none;
42
-
43
42
  }
44
43
 
45
44
  // DefaultButton - level
46
45
  .primary {
47
- background: #4058FF; // TODO: 토큰 업데이트 (색상 다름)
46
+ background: #4058ff; // TODO: 토큰 업데이트 (색상 다름)
48
47
 
49
- &:not(:disabled):hover { // TODO: 토큰으로 변환
48
+ &:not(:disabled):hover {
49
+ // TODO: 토큰으로 변환
50
50
  background: #3346cc;
51
51
  }
52
52
  }
53
53
  .secondary {
54
54
  background: var(--inverse-container-high);
55
55
 
56
- &:not(:disabled):hover { // TODO: 토큰으로 변환
56
+ &:not(:disabled):hover {
57
+ // TODO: 토큰으로 변환
57
58
  background: #121212;
58
59
  }
59
60
  }
60
61
  .tertiary {
61
- background: #6D6D7014;
62
+ background: #6d6d7014;
62
63
  color: var(--neutral-label-primary);
63
64
 
64
- &:not(:disabled):hover { // TODO: 토큰으로 변환
65
+ &:not(:disabled):hover {
66
+ // TODO: 토큰으로 변환
65
67
  background: #ebebeb;
66
68
  }
67
69
  }
@@ -70,7 +72,8 @@
70
72
  color: var(--neutral-label-primary);
71
73
  border: 1px solid var(--neutral-border-overlay-normal);
72
74
 
73
- &:not(:disabled):hover { // TODO: 토큰으로 변환
75
+ &:not(:disabled):hover {
76
+ // TODO: 토큰으로 변환
74
77
  background: #f5f5f5;
75
78
  }
76
79
 
@@ -82,9 +85,10 @@
82
85
  }
83
86
  .quinary {
84
87
  // color: var(--neutral-label-secondary);
85
- color: #6D6D70CC; // TODO: 토큰 업데이트
88
+ color: #6d6d70cc; // TODO: 토큰 업데이트
86
89
 
87
- &:not(:disabled):hover { // TODO: 토큰으로 변환
90
+ &:not(:disabled):hover {
91
+ // TODO: 토큰으로 변환
88
92
  background: #f5f5f5;
89
93
  }
90
94
  &:disabled {
@@ -97,7 +101,8 @@
97
101
  // TODO: funtion/container/negative
98
102
  background: var(--function-negative);
99
103
 
100
- &:not(:disabled):hover { // TODO: 토큰으로 변환
104
+ &:not(:disabled):hover {
105
+ // TODO: 토큰으로 변환
101
106
  background: #af1b1c;
102
107
  }
103
108
  }
@@ -105,7 +110,8 @@
105
110
  // TODO: neutral/label/static/primary
106
111
  color: var(--neutral-label-primary);
107
112
 
108
- &:not(:disabled):hover { // TODO: 토큰으로 변환
113
+ &:not(:disabled):hover {
114
+ // TODO: 토큰으로 변환
109
115
  background: #f5f5f5;
110
116
  }
111
117
  }
@@ -156,9 +162,9 @@
156
162
  }
157
163
  .neutral-primary {
158
164
  // color: var(--neutral-label-secondary); // TODO: 토큰 업데이트 (색상 다름)
159
- color: #6D6D70CC;
165
+ color: #6d6d70cc;
160
166
  opacity: 0.8;
161
167
  }
162
168
  .inverse-static-primary {
163
169
  color: var(--inverse-label-static-primary);
164
- }
170
+ }
package/src/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "@liner-fe/design-token/global.css";
1
+ import '@liner-fe/design-token/global.css';
2
2
 
3
3
  export * from './utils/object';
4
4
  export * from './components/Button';