@wishket/design-system 1.12.1 → 1.12.2

package/dist/Components/Base/Layouts/Box/Box.js

@@ -1,28 +1,104 @@
-'use strict';
-
-var _tslib = require('../../../../_virtual/_tslib.js');
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
-var react = require('react');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
+import { forwardRef } from 'react';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 /**
  * @param {Object} props
  * @param {ReactNode} props.children - 박스 내부에 렌더링할 컨텐츠
  * @param {ElementType} [props.as='div'] - 렌더링할 HTML 요소
  * @param {string} [props.className] - 추가적인 CSS 클래스
- */ const Box = react.forwardRef((_a, ref)=>{
-    var { className, children, as: Component = 'div' } = _a, rest = _tslib.__rest(_a, [
+ */ const Box = /*#__PURE__*/ forwardRef((_param, ref)=>{
+    var { className, children, as: Component = 'div' } = _param, rest = _object_without_properties(_param, [
         "className",
         "children",
         "as"
     ]);
-    return jsxRuntime.jsx(Component, Object.assign({
+    return /*#__PURE__*/ jsx(Component, _object_spread_props(_object_spread({
         ref: ref,
-        className: tailwindMerge.twMerge('box-border', className)
-    }, rest, {
+        className: twMerge('box-border', className)
+    }, rest), {
         children: children
     }));
 });
 Box.displayName = 'Box';
 
-module.exports = Box;
+export { Box as default };

package/dist/Components/Base/Layouts/Column/Column.js

@@ -1,7 +1,5 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 
 const COLUMN_SIZES = [
     'col-span-1',
@@ -26,17 +24,17 @@ const COLUMN_SIZES = [
  * @param {number} [props.rightColumnSize] - 오른쪽 컬럼 크기
  * @param {string} [props.className] - 추가적인 CSS 클래스
  */ const Column = ({ container = false, size = 1, className, children })=>{
-    if (container) return jsxRuntime.jsx("div", {
+    if (container) return /*#__PURE__*/ jsx("div", {
         "data-testid": "design-system-column--container",
-        className: tailwindMerge.twMerge('grid auto-cols-1fr grid-flow-col', className),
+        className: twMerge('grid auto-cols-1fr grid-flow-col', className),
         children: children
     });
     const generateColumnSize = (size)=>COLUMN_SIZES[size - 1];
-    return jsxRuntime.jsx("div", {
+    return /*#__PURE__*/ jsx("div", {
         "data-testid": "design-system-column",
-        className: tailwindMerge.twMerge(generateColumnSize(size), className),
+        className: twMerge(generateColumnSize(size), className),
         children: children
     });
 };
 
-module.exports = Column;
+export { Column as default };

package/dist/Components/Base/Layouts/FullBleed/FullBleed.js

@@ -1,12 +1,88 @@
 'use client';
-'use strict';
-
-var _tslib = require('../../../../_virtual/_tslib.js');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var tailwindMerge = require('tailwind-merge');
-var FullBleed_utils = require('./FullBleed.utils.js');
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { calculateScrollbarWidth, getPaddingFromClassName } from './FullBleed.utils.js';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 /**
  * 화면 전체 너비를 활용하는 레이아웃 컴포넌트
  * @param {Object} props
@@ -15,8 +91,8 @@ var FullBleed_utils = require('./FullBleed.utils.js');
  * @param {string} [props.className] - 외부 컨테이너 클래스
  * @param {string} [props.insideContainerClassName] - 내부 컨테이너 클래스
  * @param {string | number} [props.paddingAdjustment] - 패딩 보정값(단위 : px)
- */ const FullBleed = react.forwardRef((_a, ref)=>{
-    var { className, insideContainerClassName, maxWidth = '1200px', paddingAdjustment = 8.5, children } = _a, rest = _tslib.__rest(_a, [
+ */ const FullBleed = /*#__PURE__*/ forwardRef((_param, ref)=>{
+    var { className, insideContainerClassName, maxWidth = '1200px', paddingAdjustment = 8.5, children } = _param, rest = _object_without_properties(_param, [
         "className",
         "insideContainerClassName",
         "maxWidth",
@@ -24,15 +100,15 @@ var FullBleed_utils = require('./FullBleed.utils.js');
         "children"
     ]);
     // TODO: 스크롤바 너비를 제외한 viewport width 계산을 더 나은 방식으로 할 수 있도록 개선(layout shift 방지)
-    const [scrollBarWidth, setScrollBarWidth] = react.useState(()=>{
-        const calculatedScrollbarWidth = FullBleed_utils.calculateScrollbarWidth();
+    const [scrollBarWidth, setScrollBarWidth] = useState(()=>{
+        const calculatedScrollbarWidth = calculateScrollbarWidth();
         return calculatedScrollbarWidth;
     });
-    const mobilePadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'mobile');
-    const tabletPadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'tablet');
-    const desktopPadding = FullBleed_utils.getPaddingFromClassName(insideContainerClassName, 'desktop');
-    react.useEffect(()=>{
-        setScrollBarWidth(FullBleed_utils.calculateScrollbarWidth());
+    const mobilePadding = getPaddingFromClassName(insideContainerClassName, 'mobile');
+    const tabletPadding = getPaddingFromClassName(insideContainerClassName, 'tablet');
+    const desktopPadding = getPaddingFromClassName(insideContainerClassName, 'desktop');
+    useEffect(()=>{
+        setScrollBarWidth(calculateScrollbarWidth());
     }, []);
     const dynamicStyle = {
         '--dynamic-padding-left-tablet': `max(${tabletPadding.left || tabletPadding.x}px, ${mobilePadding.left || mobilePadding.x}px)`,
@@ -43,18 +119,18 @@ var FullBleed_utils = require('./FullBleed.utils.js');
     const dynamicViewportWidth = {
         '--dynamic-bleed-width': `calc(100dvw - ${scrollBarWidth}px)`
     };
-    return jsxRuntime.jsx("div", {
+    return /*#__PURE__*/ jsx("div", {
         "data-testid": "design-system-full-bleed",
-        children: jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/ jsx("div", {
             "data-testid": "design-system-full-bleed--container",
-            className: tailwindMerge.twMerge(`relative left-1/2 top-0 h-full w-[var(--dynamic-bleed-width)] -translate-x-1/2`, className),
+            className: twMerge(`relative left-1/2 top-0 h-full w-[var(--dynamic-bleed-width)] -translate-x-1/2`, className),
             style: dynamicViewportWidth,
-            children: jsxRuntime.jsx("div", Object.assign({
+            children: /*#__PURE__*/ jsx("div", _object_spread_props(_object_spread({
                 "data-testid": "design-system-full-bleed--container-inside",
-                className: tailwindMerge.twMerge('flex w-full overflow-x-auto px-5 scrollbar-hide', 'tablet:pl-[var(--dynamic-padding-left-tablet)] tablet:pr-[var(--dynamic-padding-right-tablet)]', 'desktop:pl-[var(--dynamic-padding-left-desktop)] desktop:pr-[var(--dynamic-padding-right-desktop)]', insideContainerClassName),
+                className: twMerge('flex w-full overflow-x-auto px-5 scrollbar-hide', 'tablet:pl-[var(--dynamic-padding-left-tablet)] tablet:pr-[var(--dynamic-padding-right-tablet)]', 'desktop:pl-[var(--dynamic-padding-left-desktop)] desktop:pr-[var(--dynamic-padding-right-desktop)]', insideContainerClassName),
                 style: dynamicStyle,
                 ref: ref
-            }, rest, {
+            }, rest), {
                 children: children
             }))
         })
@@ -62,4 +138,4 @@ var FullBleed_utils = require('./FullBleed.utils.js');
 });
 FullBleed.displayName = 'FullBleed';
 
-module.exports = FullBleed;
+export { FullBleed as default };

package/dist/Components/Base/Layouts/FullBleed/FullBleed.utils.js

@@ -1,5 +1,31 @@
-'use strict';
-
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 const getPaddingFromClassName = (className, type = 'mobile')=>{
     const BASE_PADDING = {
         mobile: {
@@ -36,7 +62,7 @@ const getPaddingFromClassName = (className, type = 'mobile')=>{
     if (!hasCurrentTypeClass) {
         if (type === 'tablet') return getPaddingFromClassName(className, 'mobile');
     }
-    const result = Object.assign({}, BASE_PADDING[type]);
+    const result = _object_spread({}, BASE_PADDING[type]);
     // px 처리
     const pxClass = classes.find((cls)=>cls === `${prefix}px-${result.x / 4}` || cls.startsWith(`${prefix}px-`));
     if (pxClass) {
@@ -73,5 +99,4 @@ const calculateScrollbarWidth = ()=>{
     return scrollbarWidth;
 };
 
-exports.calculateScrollbarWidth = calculateScrollbarWidth;
-exports.getPaddingFromClassName = getPaddingFromClassName;
+export { calculateScrollbarWidth, getPaddingFromClassName };

package/dist/Components/Base/Layouts/GridLayout/GridLayout.js

@@ -1,8 +1,7 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 
+//reference : https://github.com/wishket/frontend-rules/wiki/Grid-System
 /**
  * GridLayout 컴포넌트는 그리드 시스템을 구현하는 레이아웃 컴포넌트입니다.
  * 반응형 디자인을 지원하며 모바일, 태블릿, 데스크톱 환경에 따라 다른 그리드 영역을 적용할 수 있습니다.
@@ -20,11 +19,11 @@ var tailwindMerge = require('tailwind-merge');
  * </GridLayout>
  */ const GridLayout = ({ children, gridTemplateAreaClass, testId })=>{
     const gridTemplateAreas = gridTemplateAreaClass || 'grid-areas-default-mobile tablet:grid-areas-default-tablet desktop:grid-areas-default-desktop';
-    return jsxRuntime.jsx("div", {
-        className: tailwindMerge.twMerge('mx-auto grid w-full max-w-container auto-cols-1fr gap-x-5 px-5 desktop:gap-x-6 desktop:px-9', gridTemplateAreas),
+    return /*#__PURE__*/ jsx("div", {
+        className: twMerge('mx-auto grid w-full max-w-container auto-cols-1fr gap-x-5 px-5 desktop:gap-x-6 desktop:px-9', gridTemplateAreas),
         "data-testid": testId,
         children: children
     });
 };
 
-module.exports = GridLayout;
+export { GridLayout as default };

package/dist/Components/Base/Typography/Typography.js

@@ -1,9 +1,85 @@
-'use strict';
-
-var _tslib = require('../../../_virtual/_tslib.js');
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 const VARIANTS = [
     {
         name: 'title1',
@@ -61,21 +137,21 @@ const VARIANTS = [
  * @param {string} props.variant - 텍스트 스타일 variant ('title1' | 'title2' | 'title3' | 'subTitle1' | 'subTitle2' | 'contents1' | 'contents2' | 'body1' | 'body2' | 'body3' | 'caption1' | 'caption2')
  * @param {string} [props.className] - 추가적인 CSS 클래스
  * @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
- */ const Typography = (_a)=>{
-    var _b;
-    var { children, variant, className, as = 'span' } = _a, rest = _tslib.__rest(_a, [
+ */ const Typography = (_param)=>{
+    var { children, variant, className, as = 'span' } = _param, rest = _object_without_properties(_param, [
         "children",
         "variant",
         "className",
         "as"
     ]);
+    var _VARIANTS_find;
     const Component = as || 'span';
-    const matchedVariantClass = ((_b = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _b === void 0 ? void 0 : _b.class) || '';
-    return jsxRuntime.jsx(Component, Object.assign({
-        className: tailwindMerge.twMerge('tracking-default', matchedVariantClass, className)
-    }, rest, {
+    const matchedVariantClass = ((_VARIANTS_find = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _VARIANTS_find === void 0 ? void 0 : _VARIANTS_find.class) || '';
+    return /*#__PURE__*/ jsx(Component, _object_spread_props(_object_spread({
+        className: twMerge('tracking-default', matchedVariantClass, className)
+    }, rest), {
         children: children
     }));
 };
 
-module.exports = Typography;
+export { Typography as default };

package/dist/Components/DataDisplays/Avatar/Avatar.js

@@ -1,20 +1,18 @@
 'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
-var react = require('react');
-var SystemIcon = require('../SystemIcon/SystemIcon.js');
-var Typography = require('../../Base/Typography/Typography.js');
-var Box = require('../../Base/Layouts/Box/Box.js');
-require('../../Base/Layouts/FullBleed/FullBleed.js');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { twMerge, twJoin } from 'tailwind-merge';
+import { memo, useState } from 'react';
+import SystemIcon from '../SystemIcon/SystemIcon.js';
+import Typography from '../../Base/Typography/Typography.js';
+import Box from '../../Base/Layouts/Box/Box.js';
+import '../../Base/Layouts/FullBleed/FullBleed.js';
 
 const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>{
-    const [imageLoadError, setImageLoadError] = react.useState(false);
+    const [imageLoadError, setImageLoadError] = useState(false);
     const firstChar = name === null || name === void 0 ? void 0 : name.slice(0, 1);
     const handleImageError = ()=>setImageLoadError(true);
     if (imgUrl && !imageLoadError) {
-        return jsxRuntime.jsx("img", {
+        return /*#__PURE__*/ jsx("img", {
             src: imgUrl,
             alt: "",
             width: 80,
@@ -25,13 +23,13 @@ const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>
         });
     }
     if (isMonogram) {
-        return jsxRuntime.jsx(Typography, {
+        return /*#__PURE__*/ jsx(Typography, {
             variant: avatarStyle[size].char,
             className: "cursor-default select-none text-w-white",
             children: firstChar
         });
     }
-    return jsxRuntime.jsx(SystemIcon, {
+    return /*#__PURE__*/ jsx(SystemIcon, {
         name: "large_user_image_avatar",
         className: "h-full w-full",
         testId: "design-system-avatar--default-image"
@@ -80,14 +78,14 @@ const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>
             editButton: 'size-6'
         }
     };
-    return jsxRuntime.jsxs(Box, {
-        className: tailwindMerge.twMerge('relative z-0 h-fit w-fit', isEditable && 'cursor-pointer'),
+    return /*#__PURE__*/ jsxs(Box, {
+        className: twMerge('relative z-0 h-fit w-fit', isEditable && 'cursor-pointer'),
         onClick: onClick,
         children: [
-            jsxRuntime.jsx(Box, {
+            /*#__PURE__*/ jsx(Box, {
                 "data-testid": "design-system-avatar--container",
-                className: tailwindMerge.twMerge(avatarStyle[size].container, 'flex items-center justify-center overflow-hidden rounded-full border border-w-gray-200', isMonogram && 'bg-primary'),
-                children: jsxRuntime.jsx(AvatarContent, {
+                className: twMerge(avatarStyle[size].container, 'flex items-center justify-center overflow-hidden rounded-full border border-w-gray-200', isMonogram && 'bg-primary'),
+                children: /*#__PURE__*/ jsx(AvatarContent, {
                     size: size,
                     name: name,
                     imgUrl: imgUrl,
@@ -95,19 +93,19 @@ const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>
                     avatarStyle: avatarStyle
                 })
             }),
-            !isMonogram && isEditable && jsxRuntime.jsx(Box, {
-                className: tailwindMerge.twMerge('absolute -right-0.5 bottom-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall', avatarStyle[size].editButton),
+            !isMonogram && isEditable && /*#__PURE__*/ jsx(Box, {
+                className: twMerge('absolute -right-0.5 bottom-0 z-10 flex items-center justify-center rounded-full bg-w-white shadow-graysmall', avatarStyle[size].editButton),
                 "data-testid": "design-system-avatar--edit-button",
-                children: jsxRuntime.jsx(SystemIcon, {
+                children: /*#__PURE__*/ jsx(SystemIcon, {
                     name: "small_camera",
                     solid: true,
-                    className: tailwindMerge.twJoin(size === 'md' && 'size-3'),
+                    className: twJoin(size === 'md' && 'size-3'),
                     testId: "design-system-avatar--edit-button-icon"
                 })
             })
         ]
     });
 };
-var Avatar$1 = react.memo(Avatar);
+var Avatar$1 = /*#__PURE__*/ memo(Avatar);
 
-module.exports = Avatar$1;
+export { Avatar$1 as default };

package/dist/Components/DataDisplays/CountBadge/CountBadge.js

@@ -1,7 +1,5 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 
 /**
  * 숫자를 표시하는 뱃지 컴포넌트
@@ -23,7 +21,7 @@ var tailwindMerge = require('tailwind-merge');
  * // 다른 스타일 변형 사용
  * <CountBadge text="10" variant="white_primary" />
  */ const CountBadge = ({ text, className, variant = 'primary', showZero = false })=>{
-    var _a;
+    var _VARIANTS_find;
     const isHiddenBadgeText = !showZero && text == 0 || text === '';
     const badgeNumber = Number(text) > 99 ? '99+' : text;
     const VARIANTS = [
@@ -46,14 +44,14 @@ var tailwindMerge = require('tailwind-merge');
     ];
     const badgeClasses = {
         baseClass: 'absolute box-border flex min-h-4 w-fit min-w-4 select-none items-center justify-center rounded-full px-1 py-px text-[11px] font-normal tracking-normal leading-none',
-        matchedVariantClass: (_a = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _a === void 0 ? void 0 : _a.className,
+        matchedVariantClass: (_VARIANTS_find = VARIANTS.find((eachVariant)=>eachVariant.name === variant)) === null || _VARIANTS_find === void 0 ? void 0 : _VARIANTS_find.className,
         hiddenClass: isHiddenBadgeText && 'hidden'
     };
-    return jsxRuntime.jsx("span", {
+    return /*#__PURE__*/ jsx("span", {
         "data-testid": "design-system-count-badge",
-        className: tailwindMerge.twMerge(badgeClasses.baseClass, badgeClasses.matchedVariantClass, badgeClasses.hiddenClass, className),
+        className: twMerge(badgeClasses.baseClass, badgeClasses.matchedVariantClass, badgeClasses.hiddenClass, className),
         children: badgeNumber
     });
 };
 
-module.exports = CountBadge;
+export { CountBadge as default };

package/dist/Components/DataDisplays/Divider/Divider.js

@@ -1,7 +1,5 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
+import { jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 
 /**
  * 콘텐츠 사이에 시각적 구분선을 생성하는 컴포넌트
@@ -21,10 +19,10 @@ var tailwindMerge = require('tailwind-merge');
  * <Divider isSub />
  *
  */ const Divider = ({ isVertical = false, isSub = false, className })=>{
-    return jsxRuntime.jsx("div", {
+    return /*#__PURE__*/ jsx("div", {
         "data-testid": "design-system-divider",
-        className: tailwindMerge.twMerge('flex-shrink-0', isVertical ? 'h-full w-px' : 'h-px w-full', isSub ? 'bg-w-gray-100' : 'bg-w-gray-200', className)
+        className: twMerge('flex-shrink-0', isVertical ? 'h-full w-px' : 'h-px w-full', isSub ? 'bg-w-gray-100' : 'bg-w-gray-200', className)
     });
 };
 
-module.exports = Divider;
+export { Divider as default };