@wishket/design-system 1.17.3 → 1.17.4

package/dist/Components/Inputs/AutoCompleteList/AutoCompleteList.js

@@ -1,4 +1,4 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";import{useRef as n,useState as o,useLayoutEffect as i}from"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Divider as l}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{IndexBar as c,Icon as a,TextSection as u,CountSection as m}from"./AutoCompleteList.parts.js";function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){p(e,t,r[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";import{useRef as n,useState as o,useLayoutEffect as i}from"react";import"../../DataDisplays/Avatar/Avatar.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Divider as l}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{IndexBar as a,Icon as c,TextSection as u,CountSection as m}from"./AutoCompleteList.parts.js";function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){p(e,t,r[t])}))}return e}function y(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
 /**
  * 자동완성 목록의 Root 컴포넌트입니다.
  * 자동완성 항목들을 감싸는 컨테이너 역할을 합니다.
@@ -21,9 +21,9 @@
  *   />
  * </AutoCompleteList.Root>
  * ```
- */(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const b={Root:s=>{var{children:l,className:a,hasIndexBar:u=!1,onIndexClick:m}=s,p=f(s,["children","className","hasIndexBar","onIndexClick"]);const b=n(null),[g,O]=o(!1);return i((()=>{const e=b.current;if(!e)return;const{scrollHeight:t,clientHeight:r}=e;O(t>r)}),[l]),/*#__PURE__*/t("div",y(d({className:r("flex max-h-[436px] w-full rounded-xl shadow-graymedium",a)},p),{children:[u&&/*#__PURE__*/e(c,{onIndexClick:m}),
-/*#__PURE__*/e("ul",{ref:b,"data-testid":"design-system-autoCompleteList",className:r("flex w-full flex-col bg-w-white py-2 pr-2","overflow-y-auto scrollbar-list",u?"rounded-r-xl":"rounded-xl",g&&"pr-0"),children:l})]}))},Item:n=>{var{text:o,count:i,leadingIcon:l,iconUrl:c,isInputItem:p=!1,isFocused:b=!1,inputValue:g,className:O}=n,j=f(n,["text","count","leadingIcon","iconUrl","isInputItem","isFocused","inputValue","className"]);/*#__PURE__*/
-return t("li",y(d({className:r("visible ml-2 flex cursor-pointer select-none items-center gap-2 rounded-xl bg-w-white px-4 py-3 hover:bg-primary-10",b&&"bg-primary-10",O)},j),{"data-testid":"design-system-list-item",children:[l&&/*#__PURE__*/e(s,{name:l,className:"text-w-gray-600",testId:"design-system-list-item-leading-icon"}),c&&/*#__PURE__*/e(a,{iconUrl:c}),
+ */(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const b={Root:s=>{var{children:l,className:c,hasIndexBar:u=!1,onIndexClick:m}=s,p=f(s,["children","className","hasIndexBar","onIndexClick"]);const b=n(null),[g,O]=o(!1);return i((()=>{const e=b.current;if(!e)return;const{scrollHeight:t,clientHeight:r}=e;O(t>r)}),[l]),/*#__PURE__*/t("div",y(d({className:r("flex max-h-[436px] w-full rounded-xl shadow-graymedium",c)},p),{children:[u&&/*#__PURE__*/e(a,{onIndexClick:m}),
+/*#__PURE__*/e("ul",{ref:b,"data-testid":"design-system-autoCompleteList",className:r("flex w-full flex-col bg-w-white py-2 pr-2","scrollbar-list overflow-y-auto",u?"rounded-r-xl":"rounded-xl",g&&"pr-0"),children:l})]}))},Item:n=>{var{text:o,count:i,leadingIcon:l,iconUrl:a,isInputItem:p=!1,isFocused:b=!1,inputValue:g,className:O}=n,j=f(n,["text","count","leadingIcon","iconUrl","isInputItem","isFocused","inputValue","className"]);/*#__PURE__*/
+return t("li",y(d({className:r("visible ml-2 flex cursor-pointer select-none items-center gap-2 rounded-xl bg-w-white px-4 py-3 hover:bg-primary-10",b&&"bg-primary-10",O)},j),{"data-testid":"design-system-list-item",children:[l&&/*#__PURE__*/e(s,{name:l,className:"text-w-gray-600",testId:"design-system-list-item-leading-icon"}),a&&/*#__PURE__*/e(c,{iconUrl:a}),
 /*#__PURE__*/e(u,{text:o,isInputItem:p,inputValue:g}),
 /*#__PURE__*/e(m,{count:i})]}))},Divider:()=>/*#__PURE__*/e(l,{className:"my-2"})};
 /**

package/dist/Components/Inputs/AutoCompleteList/AutoCompleteList.parts.js

@@ -1,7 +1,7 @@
 import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"tailwind-merge";import"../../Base/Layouts/FullBleed/FullBleed.js";
 // return A ~ Z
-const i=Array.from({length:26},((e,t)=>String.fromCharCode(65+t))),l=({onIndexClick:t})=>/*#__PURE__*/e("ul",{className:"flex flex-col gap-0.5 rounded-l-xl bg-w-gray-10 p-[3px] text-center",children:i.map((a=>/*#__PURE__*/e("li",{className:"size-3.5 cursor-pointer",onClick:()=>null==t?void 0:t(a),children:/*#__PURE__*/e(r,{variant:"caption2",className:"text-gray-400",children:a})},a)))}),n=({iconUrl:t})=>/*#__PURE__*/e("img",{src:t,alt:"icon",width:24,height:24,className:"rounded-full border"}),s=({text:i,isInputItem:l,inputValue:n})=>{const s=i.slice(0,null==n?void 0:n.length),o=i.slice(null==n?void 0:n.length);/*#__PURE__*/
+const i=Array.from({length:26},((e,t)=>String.fromCharCode(65+t))),l=({onIndexClick:t})=>/*#__PURE__*/e("ul",{className:"flex flex-col gap-0.5 rounded-l-xl bg-w-gray-10 p-[3px] text-center",children:i.map((a=>/*#__PURE__*/e("li",{className:"size-3.5 cursor-pointer",onClick:()=>null==t?void 0:t(a),children:/*#__PURE__*/e(r,{variant:"caption11",className:"text-gray-400",children:a})},a)))}),n=({iconUrl:t})=>/*#__PURE__*/e("img",{src:t,alt:"icon",width:24,height:24,className:"rounded-full border"}),s=({text:i,isInputItem:l,inputValue:n})=>{const s=i.slice(0,null==n?void 0:n.length),o=i.slice(null==n?void 0:n.length);/*#__PURE__*/
 return e(t,{children:l?/*#__PURE__*/a(t,{children:[
-/*#__PURE__*/a(r,{variant:"body1",className:"font-medium text-primary-500","data-testid":"design-system-list-item-text",children:["‘",i,"’"]}),
-/*#__PURE__*/e(r,{variant:"body1",className:"text-w-gray-600",children:"입력"})]}):/*#__PURE__*/e(r,{variant:"body1",className:"text-w-gray-600","data-testid":"design-system-list-item-text",children:n?/*#__PURE__*/a(t,{children:[
-/*#__PURE__*/e(r,{variant:"body1",className:"text-primary",children:s}),o]}):i})})},o=({count:t})=>/*#__PURE__*/e(r,{variant:"body1",className:"text-w-gray-400",children:t});export{o as CountSection,i as INDEXES,n as Icon,l as IndexBar,s as TextSection};
+/*#__PURE__*/a(r,{variant:"body16",className:"font-medium text-primary-500","data-testid":"design-system-list-item-text",children:["‘",i,"’"]}),
+/*#__PURE__*/e(r,{variant:"body16",className:"text-w-gray-600",children:"입력"})]}):/*#__PURE__*/e(r,{variant:"body16",className:"text-w-gray-600","data-testid":"design-system-list-item-text",children:n?/*#__PURE__*/a(t,{children:[
+/*#__PURE__*/e(r,{variant:"body16",className:"text-primary",children:s}),o]}):i})})},o=({count:t})=>/*#__PURE__*/e(r,{variant:"body16",className:"text-w-gray-400",children:t});export{o as CountSection,i as INDEXES,n as Icon,l as IndexBar,s as TextSection};

package/dist/Components/Inputs/Button/Button.d.ts

@@ -9,16 +9,11 @@ import { ButtonProps } from './Button.types';
  * @param {React.ReactNode} props.children - 버튼 내부 콘텐츠
  * @param {string} [props.className] - 추가 CSS 클래스
  * @param {function} [props.onClick] - 클릭 이벤트 핸들러
- * @param {'sm' | 'md' | 'lg'} [props.size='md'] - 버튼 크기
- * @param {'outlined' | 'solid' | 'outline_filled'} [props.variant='outlined'] - 버튼 스타일 변형
- * @param {'primary' | 'gray'} [props.color='primary'] - 버튼 색상, outlined 일 때에만 적용 가능
+ * @param {'36' | '42' | '50' | '60'} [props.size='50'] - 버튼 크기
+ * @param {'outlined' | 'solid' | 'outline_filled' | 'outline_gray'} [props.variant='outlined'] - 버튼 스타일 변형
  * @param {boolean} [props.rounded=false] - 둥근 모서리 적용 여부
- * @param {React.ReactNode} [props.leadingIcon] - 버튼 앞쪽 아이콘
- * @param {boolean} [props.isLeadingIconSolid=false] - 앞쪽 아이콘 solid 스타일 적용 여부
- * @param {React.ReactNode} [props.trailingIcon] - 버튼 뒤쪽 아이콘
- * @param {boolean} [props.isTrailingIconSolid=false] - 뒤쪽 아이콘 solid 스타일 적용 여부
- * @param {string | number} [props.badgeNumber=''] - 버튼에 표시될 뱃지 숫자
  * @param {boolean} [props.needThrottle=false] - 쓰로틀링 적용 여부
+ * @param {boolean} [props.isLoading=false] - 로딩 상태 적용 여부
  *
  * @example
  * // 기본 버튼
@@ -29,10 +24,10 @@ import { ButtonProps } from './Button.types';
  * // 아이콘이 있는 비활성화된 버튼
  * <Button
  *   disabled
- *   variant="contained"
- *   leadingIcon={<Icon name="search" />}
+ *   variant="solid"
  *   size="lg"
  * >
+ *   <SystemIcon name="large_search" />
  *   검색
  * </Button>
  *
@@ -40,12 +35,11 @@ import { ButtonProps } from './Button.types';
  * <Button
  *   rounded
  *   needThrottle
- *   variant="text"
- *   badgeNumber="5"
+ *   variant="outlined"
  *   onClick={handleClick}
  * >
  *   알림
  * </Button>
  */
-declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, color, rounded, leadingIcon, isLeadingIconSolid, trailingIcon, isTrailingIconSolid, badgeNumber, needThrottle, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/Components/Inputs/Button/Button.js

@@ -1,51 +1,2 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as t}from"react";import{ButtonContainer as n}from"./Button.parts.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function i(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function c(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}
-/**
- * 다양한 스타일과 기능을 제공하는 버튼 컴포넌트입니다.
- *
- * @param {Object} props
- * @param {'button' | 'submit' | 'reset'} [props.type='button'] - 버튼의 타입
- * @param {React.RefObject<HTMLButtonElement>} [props.ref] - 버튼 요소에 대한 ref
- * @param {boolean} [props.disabled=false] - 버튼 비활성화 여부
- * @param {React.ReactNode} props.children - 버튼 내부 콘텐츠
- * @param {string} [props.className] - 추가 CSS 클래스
- * @param {function} [props.onClick] - 클릭 이벤트 핸들러
- * @param {'sm' | 'md' | 'lg'} [props.size='md'] - 버튼 크기
- * @param {'outlined' | 'solid' | 'outline_filled'} [props.variant='outlined'] - 버튼 스타일 변형
- * @param {'primary' | 'gray'} [props.color='primary'] - 버튼 색상, outlined 일 때에만 적용 가능
- * @param {boolean} [props.rounded=false] - 둥근 모서리 적용 여부
- * @param {React.ReactNode} [props.leadingIcon] - 버튼 앞쪽 아이콘
- * @param {boolean} [props.isLeadingIconSolid=false] - 앞쪽 아이콘 solid 스타일 적용 여부
- * @param {React.ReactNode} [props.trailingIcon] - 버튼 뒤쪽 아이콘
- * @param {boolean} [props.isTrailingIconSolid=false] - 뒤쪽 아이콘 solid 스타일 적용 여부
- * @param {string | number} [props.badgeNumber=''] - 버튼에 표시될 뱃지 숫자
- * @param {boolean} [props.needThrottle=false] - 쓰로틀링 적용 여부
- *
- * @example
- * // 기본 버튼
- * <Button onClick={() => console.log('클릭됨')}>
- *   버튼
- * </Button>
- *
- * // 아이콘이 있는 비활성화된 버튼
- * <Button
- *   disabled
- *   variant="contained"
- *   leadingIcon={<Icon name="search" />}
- *   size="lg"
- * >
- *   검색
- * </Button>
- *
- * // 쓰로틀링이 적용된 둥근 버튼
- * <Button
- *   rounded
- *   needThrottle
- *   variant="text"
- *   badgeNumber="5"
- *   onClick={handleClick}
- * >
- *   알림
- * </Button>
- */(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const l=l=>{var{type:a="button",ref:u,disabled:s=!1,children:d,className:b,onClick:p,size:f="md",variant:O="outlined",color:g="primary",rounded:y=!1,leadingIcon:m,isLeadingIconSolid:j=!1,trailingIcon:v,isTrailingIconSolid:I=!1,badgeNumber:P="",needThrottle:S=!1}=l,h=c(l,["type","ref","disabled","children","className","onClick","size","variant","color","rounded","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","needThrottle"]);
-// eslint-disable-next-line no-undef
-const w=r(void 0);return t((()=>()=>{w&&clearTimeout(w.current)}),[w]),/*#__PURE__*/e(n,i(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){o(e,r,t[r])}))}return e}({ref:u,size:f,type:a,disabled:s,rounded:y,color:g,variant:O,className:b,onClick:S?e=>{e.preventDefault(),w.current||(null==p||p(e),w.current=setTimeout((()=>{w.current=void 0}),300))}:p,leadingIcon:m,isLeadingIconSolid:j,trailingIcon:v,isTrailingIconSolid:I,badgeNumber:P},h),{children:d}))};export{l as Button};
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useEffect as i}from"react";import{twMerge as n}from"tailwind-merge";import{LoadingIndicator as a}from"../../Feedbacks/LoadingIndicator/LoadingIndicator.js";function d(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function b(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p={36:"h-[36px] typo-body14 px-[11px] gap-1",42:"h-[42px] typo-body14 px-[11px] gap-1",50:"h-[50px] typo-body16 px-[15px] gap-1.5",60:"h-[60px] typo-subTitle20 px-[23px] gap-2"},s={solid:"bg-primary-500 border-primary-500 hover:border-primary-700 hover:bg-primary-700 text-w-white disabled:bg-primary-100 disabled:border-primary-100 disabled:hover:bg-primary-100 disabled:hover:border-primary-100",outline_filled:"bg-primary-10 border-primary-200 hover:border-primary-500 text-primary-500 disabled:border-primary-200 disabled:hover:border-primary-200 disabled:text-primary-100",outlined:"bg-w-white border-w-gray-200 hover:border-primary-500 text-primary-500 disabled:hover:border-w-gray-200 disabled:text-primary-100",outline_gray:"bg-w-white border-w-gray-200 hover:border-w-gray-400 text-w-gray-600 disabled:hover:border-w-gray-200 disabled:text-w-gray-300"},c=/*#__PURE__*/t(((t,c)=>{var{type:y="button",disabled:u=!1,children:m,className:f,onClick:g,size:h="50",variant:v="outlined",rounded:x=!1,needThrottle:O=!1,isLoading:w=!1}=t,j=b(t,["type","disabled","children","className","onClick","size","variant","rounded","needThrottle","isLoading"]);const P=o(void 0),k=e=>{e.preventDefault(),P.current||(null==g||g(e),P.current=setTimeout((()=>{P.current=void 0}),300))};return i((()=>()=>{P&&clearTimeout(P.current)}),[P]),/*#__PURE__*/e("button",l(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){d(e,r,t[r])}))}return e}({ref:c,type:y,className:n("relative box-border flex w-fit items-center justify-center border","cursor-pointer disabled:cursor-not-allowed","outlined"===v&&x?"rounded-full":"rounded-xl",s[v],w&&"pointer-events-none",f),onClick:(()=>{if(!w)return O?k:g})(),disabled:u,"aria-busy":w,"aria-live":w?"polite":void 0},j),{children:[w&&/*#__PURE__*/r("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:/*#__PURE__*/r(a,{size:"36"===h||"42"===h?"sm":"md",className:"text-current"})}),
+/*#__PURE__*/r("div",{className:n("flex items-center justify-center text-current",p[h],w&&"invisible"),"aria-hidden":w,"data-testid":"design-system-button--content",children:m})]}))}));c.displayName="Button";export{c as Button};

package/dist/Components/Inputs/Button/Button.types.d.ts

@@ -1,18 +1,11 @@
 import { ComponentPropsWithRef } from 'react';
-import { SystemIconName } from '../../DataDisplays/SystemIcon';
-type ButtonSizeType = 'sm' | 'md' | 'lg';
-type ButtonVariantType = 'outlined' | 'solid' | 'outline_filled';
-type ButtonColorType = 'primary' | 'gray';
+export type ButtonSizeType = '36' | '42' | '50' | '60';
+type ButtonVariantType = 'outlined' | 'solid' | 'outline_filled' | 'outline_gray';
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     size?: ButtonSizeType;
     variant?: ButtonVariantType;
-    color?: ButtonColorType;
     rounded?: boolean;
-    leadingIcon?: SystemIconName;
-    isLeadingIconSolid?: boolean;
-    trailingIcon?: SystemIconName;
-    isTrailingIconSolid?: boolean;
-    badgeNumber?: number | string;
     needThrottle?: boolean;
+    isLoading?: boolean;
 }
 export {};

package/dist/Components/Inputs/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as r}from"react";import{twMerge as s}from"tailwind-merge";import{SystemIcon as n}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as o}from"../../Base/Typography/Typography.js";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";import{SelectHeader as d,WeekHeader as c,DateBox as m}from"./Calendar.parts.js";import{generateDate as p,today as y,getKoreanTimeString as g,getMonthDate as h,isSameDate as x}from"./Calendar.utils.js";
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as r}from"react";import{twMerge as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as o}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";import{SelectHeader as d,WeekHeader as c,DateBox as m}from"./Calendar.parts.js";import{generateDate as p,today as y,getKoreanTimeString as g,getMonthDate as h,isSameDate as x}from"./Calendar.utils.js";
 /**
  * 날짜를 선택할 수 있는 캘린더 컴포넌트입니다.
  *
@@ -34,12 +34,12 @@
  *   selected="2024-03-21"
  * />
  * ```
- */const u=({defaultDate:u,selected:f,onChange:w,disabled:b,placeholder:j,isError:C})=>{const[D,$]=a(!1),B=()=>{b||$((e=>!e))},N=u?p(u):y,[F,I]=a(f?p(f):N),v=f?p(f):N,{year:S,month:T,date:A}=g(v),{dateList:L}=h(F.year,F.month),k=[...Array.from({length:L[0].day},(()=>null)),...L],z=e=>{if(f&&x(e,v))return;const t=`${e.year}-${e.month}-${e.date}`;null==w||w(t),$(!1)};return r((()=>{!D&&f&&I(p(f));
+ */const u=({defaultDate:u,selected:f,onChange:w,disabled:j,placeholder:D,isError:b})=>{const[C,$]=a(!1),B=()=>{j||$((e=>!e))},N=u?p(u):y,[v,A]=a(f?p(f):N),F=f?p(f):N,{year:I,month:S,date:T}=g(F),{dateList:L}=h(v.year,v.month),k=[...Array.from({length:L[0].day},(()=>null)),...L],z=e=>{if(f&&x(e,F))return;const t=`${e.year}-${e.month}-${e.date}`;null==w||w(t),$(!1)};return r((()=>{!C&&f&&A(p(f));
 // eslint-disable-next-line react-hooks/exhaustive-deps
-}),[D]),/*#__PURE__*/e(i,{className:"relative h-fit w-fit select-none","data-testid":"design-system-calendar--container",children:[
-/*#__PURE__*/t(i,{className:"cursor-pointer",children:/*#__PURE__*/e(l,{isFocused:D,isError:C,isDisabled:b,testId:"design-system-calendar--trigger",onClick:B,children:[
-/*#__PURE__*/t(n,{name:"medium_calendar",className:b||!f?"text-w-gray-300":"text-w-gray-400"}),
-/*#__PURE__*/t(o,{variant:"body1",className:s("min-w-[178px] text-w-gray-600",!f&&"text-w-gray-300",b&&"text-w-gray-300"),"data-testid":"design-system-calendar--selected-date",children:f?`${S} ${T} ${A}`:j})]})}),D&&/*#__PURE__*/t("div",{className:"fixed left-0 top-0 z-10 h-screen w-screen bg-transparent",onClick:B}),D&&/*#__PURE__*/e(i,{"data-testid":"design-system-calendar--content",className:"absolute top-[54px] z-30 flex w-[350px] flex-col gap-4 rounded-xl border border-w-gray-200 bg-w-white px-[15px] py-[23px] shadow-graymedium",children:[
-/*#__PURE__*/t(d,{visibleDate:F,onChange:e=>{I(e)}}),
+}),[C]),/*#__PURE__*/e(n,{className:"relative h-fit w-fit select-none","data-testid":"design-system-calendar--container",children:[
+/*#__PURE__*/t(n,{className:"cursor-pointer",children:/*#__PURE__*/e(l,{isFocused:C,isError:b,isDisabled:j,testId:"design-system-calendar--trigger",onClick:B,children:[
+/*#__PURE__*/t(i,{name:"medium_calendar",className:j||!f?"text-w-gray-300":"text-w-gray-400"}),
+/*#__PURE__*/t(o,{variant:"body16",className:s("min-w-[178px] text-w-gray-600",!f&&"text-w-gray-300",j&&"text-w-gray-300"),"data-testid":"design-system-calendar--selected-date",children:f?`${I} ${S} ${T}`:D})]})}),C&&/*#__PURE__*/t("div",{className:"fixed left-0 top-0 z-10 h-screen w-screen bg-transparent",onClick:B}),C&&/*#__PURE__*/e(n,{"data-testid":"design-system-calendar--content",className:"absolute top-[54px] z-30 flex w-[350px] flex-col gap-4 rounded-xl border border-w-gray-200 bg-w-white px-[15px] py-[23px] shadow-graymedium",children:[
+/*#__PURE__*/t(d,{visibleDate:v,onChange:e=>{A(e)}}),
 /*#__PURE__*/t(c,{}),
-/*#__PURE__*/t(i,{className:"grid w-full grid-cols-7 place-content-center place-items-center gap-1",children:k.map(((e,a)=>{const r=!(!e||!f)&&x(e,v);return e?/*#__PURE__*/t(m,{date:e,selected:r,onChange:z},`${e.year}-${e.month}-${e.date}`):/*#__PURE__*/t(m,{disabled:!0},a)}))})]})]})};export{u as Calendar};
+/*#__PURE__*/t(n,{className:"grid w-full grid-cols-7 place-content-center place-items-center gap-1",children:k.map(((e,a)=>{const r=!(!e||!f)&&x(e,F);return e?/*#__PURE__*/t(m,{date:e,selected:r,onChange:z},`${e.year}-${e.month}-${e.date}`):/*#__PURE__*/t(m,{disabled:!0},a)}))})]})]})};export{u as Calendar};

package/dist/Components/Inputs/Calendar/Calendar.parts.js

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as l}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";import{getKoreanTimeString as s}from"./Calendar.utils.js";import{dayMap as o}from"./Calendar.constants.js";const i=()=>{const e=Array.from(o.values());/*#__PURE__*/
-return t(n,{className:"grid w-full grid-cols-7 place-items-center gap-1",children:e.map((e=>/*#__PURE__*/t(n,{className:"flex h-5 items-center justify-center",children:/*#__PURE__*/t(l,{variant:"body3",className:"leading-normal text-w-gray-500",children:e})},e)))})},m=({visibleDate:a,onChange:o})=>{const i=1===(null==a?void 0:a.month),m=12===(null==a?void 0:a.month),{year:c,month:d}=a&&s(a);/*#__PURE__*/
-return e(n,{className:"flex h-[50px] w-full gap-4",children:[
-/*#__PURE__*/t(n,{"data-testid":"design-system-calendar--to-prev-month",className:"size-6 cursor-pointer text-gray-600",onClick:()=>{i?null==o||o({year:a.year-1,month:12,date:1}):null==o||o({year:a.year,month:a.month-1,date:1})},children:/*#__PURE__*/t(r,{name:"large_arrow_left",className:"text-gray-600"})}),
-/*#__PURE__*/e(l,{variant:"subTitle2",className:"h-fit w-full text-center leading-normal text-gray-900",children:[c," ",d]}),
-/*#__PURE__*/t(n,{"data-testid":"design-system-calendar--to-next-month",className:"size-6 cursor-pointer text-gray-600",onClick:()=>{m?null==o||o({year:a.year+1,month:1,date:1}):null==o||o({year:a.year,month:a.month+1,date:1})},children:/*#__PURE__*/t(r,{name:"large_arrow_right",className:"text-gray-600"})})]})},c=({selected:e,date:r,disabled:s=!1,onChange:o})=>{const i=1===String(null==r?void 0:r.date).length?`0${null==r?void 0:r.date}`:null==r?void 0:r.date;/*#__PURE__*/
-return t(n,{className:a("flex size-[42px] cursor-pointer items-center justify-center rounded-full bg-w-white p-2 text-center",!s&&!e&&"hover:bg-primary-10",e&&"bg-primary",s&&"cursor-default"),onClick:()=>{s||null==o||o(r)},children:/*#__PURE__*/t(l,{variant:"body1",className:a("text-w-gray-900",e&&"text-w-white",s&&"text-w-gray-300"),children:i})})};export{c as DateBox,m as SelectHeader,i as WeekHeader};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as r}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as n}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{getKoreanTimeString as s}from"./Calendar.utils.js";import{dayMap as o}from"./Calendar.constants.js";const i=()=>{const e=Array.from(o.values());/*#__PURE__*/
+return t(l,{className:"grid w-full grid-cols-7 place-items-center gap-1",children:e.map((e=>/*#__PURE__*/t(l,{className:"flex h-5 items-center justify-center",children:/*#__PURE__*/t(r,{variant:"body13",className:"leading-normal text-w-gray-500",children:e})},e)))})},m=({visibleDate:a,onChange:o})=>{const i=1===(null==a?void 0:a.month),m=12===(null==a?void 0:a.month),{year:c,month:d}=a&&s(a);/*#__PURE__*/
+return e(l,{className:"flex h-[50px] w-full gap-4",children:[
+/*#__PURE__*/t(l,{"data-testid":"design-system-calendar--to-prev-month",className:"size-6 cursor-pointer text-gray-600",onClick:()=>{i?null==o||o({year:a.year-1,month:12,date:1}):null==o||o({year:a.year,month:a.month-1,date:1})},children:/*#__PURE__*/t(n,{name:"large_arrow_left",className:"text-gray-600"})}),
+/*#__PURE__*/e(r,{variant:"subTitle18",className:"h-fit w-full text-center leading-normal text-gray-900",children:[c," ",d]}),
+/*#__PURE__*/t(l,{"data-testid":"design-system-calendar--to-next-month",className:"size-6 cursor-pointer text-gray-600",onClick:()=>{m?null==o||o({year:a.year+1,month:1,date:1}):null==o||o({year:a.year,month:a.month+1,date:1})},children:/*#__PURE__*/t(n,{name:"large_arrow_right",className:"text-gray-600"})})]})},c=({selected:e,date:n,disabled:s=!1,onChange:o})=>{const i=1===String(null==n?void 0:n.date).length?`0${null==n?void 0:n.date}`:null==n?void 0:n.date;/*#__PURE__*/
+return t(l,{className:a("flex size-[42px] cursor-pointer items-center justify-center rounded-full bg-w-white p-2 text-center",!s&&!e&&"hover:bg-primary-10",e&&"bg-primary",s&&"cursor-default"),onClick:()=>{s||null==o||o(n)},children:/*#__PURE__*/t(r,{variant:"body16",className:a("text-w-gray-900",e&&"text-w-white",s&&"text-w-gray-300"),children:i})})};export{c as DateBox,m as SelectHeader,i as WeekHeader};

package/dist/Components/Inputs/Checkbox/Checkbox.types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { CheckboxStatus } from '../../../types';
+import { CheckboxStatus } from '../../../types/checkbox.types';
 export type CheckboxType = 'box' | 'circle' | 'sub';
 export interface CheckboxButtonProps extends CheckboxStatus {
     type?: 'box' | 'circle' | 'sub';

package/dist/Components/Inputs/CheckboxCard/CheckboxCard.js

@@ -2,7 +2,7 @@
 return e("label",{"data-testid":k,role:"checkbox-card",className:a("group",p),children:/*#__PURE__*/t(s,{"data-testid":"design-system-checkboxCard--container",checked:l,isError:m,isWide:x,disabled:n,className:y,children:[
 /*#__PURE__*/e(i,{isWide:x,checked:l,onChange:h,isError:m,disabled:n,name:C,value:f}),B&&/*#__PURE__*/e(d,{isError:m,checked:l,iconName:B,disabled:n}),
 /*#__PURE__*/t(o,{isWide:x,"data-testid":"design-system-checkboxCard--titleBox",children:[
-/*#__PURE__*/e(r,{"data-testid":"design-system-checkboxCard--title",variant:"body1",className:a("font-medium",x?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-900"),children:b}),u&&/*#__PURE__*/e(r,{variant:"body2",className:a("font-normal",x?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:u})]})]})})};
+/*#__PURE__*/e(r,{"data-testid":"design-system-checkboxCard--title",variant:"body16",className:a("font-medium",x?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-900"),children:b}),u&&/*#__PURE__*/e(r,{variant:"body14",className:a("font-normal",x?"text-left":"text-center",n?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-checkboxCard--description",children:u})]})]})})};
 /**
  * 체크박스와 함께 아이콘, 제목, 설명을 포함하는 카드 형태의 선택 컴포넌트입니다.
  *

package/dist/Components/Inputs/CheckboxCard/CheckboxCard.parts.js

@@ -1,4 +1,4 @@
-import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Checkbox as n}from"../Checkbox/Checkbox.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){c(e,r,t[r])}))}return e}function a(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p=t=>{var{children:o,isWide:i,checked:n,isError:c,disabled:p,className:d}=t,b=l(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
+import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Checkbox as n}from"../Checkbox/Checkbox.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){c(e,r,t[r])}))}return e}function a(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p=t=>{var{children:o,isWide:i,checked:n,isError:c,disabled:p,className:d}=t,b=l(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
 return e("div",a(s({className:r("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 pb-6 pt-4",!p&&!c&&"group-focus-within:border-primary-500",p?r("cursor-not-allowed",n&&!c?"border-primary-100":"border-w-gray-200"):c?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",p?n&&!c?"bg-primary-10":"bg-w-gray-10":n?c?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},b),{children:o}))},d=({isWide:t,children:o})=>/*#__PURE__*/e("div",{className:r("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:o}),b=i=>{var{isWide:c,className:a}=i,p=l(i,["isWide","className"]);const d=!c;/*#__PURE__*/
-return e(o,{className:t(d&&"absolute left-[17px] top-[17px]"),children:/*#__PURE__*/e(n,s({className:r(d&&"group-hover:border-primary-500",a)},p))})},u=({iconName:t,disabled:o,checked:n,isError:c})=>{const s=c||!n;/*#__PURE__*/
-return e("div",{className:r("flex size-[60px] flex-shrink-0 items-center justify-center",o&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e(i,{name:t,disabled:s})})};export{p as CheckboxCardContainer,u as CheckboxCardIcon,b as StyledCheckbox,d as TitleContainer};
+return e(o,{className:t(d&&"absolute left-[17px] top-[17px]"),children:/*#__PURE__*/e(n,s({className:r(d&&"group-hover:border-primary-500",a)},p))})},m=({iconName:t,disabled:o,checked:n,isError:c})=>{const s=c||!n;/*#__PURE__*/
+return e("div",{className:r("flex size-[60px] shrink-0 items-center justify-center",o&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e(i,{name:t,disabled:s})})};export{p as CheckboxCardContainer,m as CheckboxCardIcon,b as StyledCheckbox,d as TitleContainer};

package/dist/Components/Inputs/CheckboxCard/CheckboxCard.types.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, PropsWithChildren, ReactNode } from 'react';
-import { CheckboxStatus } from '../../../types';
+import { CheckboxStatus } from '../../../types/checkbox.types';
 import { CheckboxProps } from '../../Inputs/Checkbox/Checkbox.types';
 import { ProductIconName } from '../../DataDisplays/ProductIcon/ProductIcon.types';
 interface CheckboxCardBaseProps {

package/dist/Components/Inputs/CheckboxListItem/CheckboxListItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { CheckboxStatus } from '../../../types';
+import { CheckboxStatus } from '../../../types/checkbox.types';
 import { CheckboxType } from '../../Inputs/Checkbox/Checkbox.types';
 export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWithRef<'input'> {
     label?: string;

package/dist/Components/Inputs/CheckboxListItem/CheckboxListItem.js

@@ -1,8 +1,8 @@
 "use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t,twJoin as i}from"tailwind-merge";import{Typography as s}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Checkbox as c}from"../Checkbox/Checkbox.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){o(e,r,t[r])}))}return e}function l(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function d(e,r){if(null==e)return{};var t,i,s=function(e,r){if(null==e)return{};var t,i,s={},n=Object.keys(e);for(i=0;i<n.length;i++)t=n[i],r.indexOf(t)>=0||(s[t]=e[t]);return s}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(i=0;i<n.length;i++)t=n[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}const b=e=>{var{children:i,disabled:s,hasDescription:n,className:c}=e,o=d(e,["children","disabled","hasDescription","className"]);/*#__PURE__*/
-return r("label",l(a({className:t("grid h-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container gap-x-3 grid-areas-checkbox-list-item-container",n?"gap-y-0.5":"gap-y-0",s?"cursor-not-allowed":"cursor-pointer",c)},o),{children:i}))},m=o=>{var{label:l,description:m,type:p="box",checked:y,disabled:h=!1,isError:g=!1,errorMessage:u,className:f,CheckboxClassName:O,onChange:x,children:j}=o,w=d(o,["label","description","type","checked","disabled","isError","errorMessage","className","CheckboxClassName","onChange","children"]);/*#__PURE__*/
+return r("label",l(a({className:t("grid-areas-checkbox-list-item-container grid h-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container gap-x-3",n?"gap-y-0.5":"gap-y-0",s?"cursor-not-allowed":"cursor-pointer",c)},o),{children:i}))},m=o=>{var{label:l,description:m,type:p="box",checked:y,disabled:h=!1,isError:g=!1,errorMessage:u,className:f,CheckboxClassName:O,onChange:x,children:j}=o,w=d(o,["label","description","type","checked","disabled","isError","errorMessage","className","CheckboxClassName","onChange","children"]);/*#__PURE__*/
 return e(b,{"data-testid":"design-system-checkboxList--item",disabled:h,hasDescription:!!m,className:t("group",f),children:[
-/*#__PURE__*/r(n,{className:"cursor-pointer pt-1 grid-in-checkbox",children:/*#__PURE__*/r(c,a({checked:y,isError:g,disabled:h,onChange:x,className:O,type:p},w))}),
-/*#__PURE__*/e(n,{className:"flex w-full items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:[l&&/*#__PURE__*/r(s,{variant:"body1",className:i("w-full whitespace-normal break-words",h?"text-w-gray-300":"text-w-gray-900"),"data-testid":"design-system-checkboxList--item-label",children:l}),j]}),g&&u&&/*#__PURE__*/r(n,{className:"flex items-center grid-in-error",children:/*#__PURE__*/r(s,{variant:"body2",className:"text-w-red-500","data-testid":"design-system-checkboxList--item-error",children:u})}),m&&/*#__PURE__*/r(n,{className:"flex items-center grid-in-description",children:/*#__PURE__*/r(s,{variant:"body2",className:h?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:m})})]})};
+/*#__PURE__*/r(n,{className:"grid-in-checkbox cursor-pointer pt-1",children:/*#__PURE__*/r(c,a({checked:y,isError:g,disabled:h,onChange:x,className:O,type:p},w))}),
+/*#__PURE__*/e(n,{className:"grid-in-label flex w-full items-center","data-testid":"design-system-checkboxList--item-label-root",children:[l&&/*#__PURE__*/r(s,{variant:"body16",className:i("w-full whitespace-normal break-words",h?"text-w-gray-300":"text-w-gray-900"),"data-testid":"design-system-checkboxList--item-label",children:l}),j]}),g&&u&&/*#__PURE__*/r(n,{className:"grid-in-error flex items-center",children:/*#__PURE__*/r(s,{variant:"body14",className:"text-w-red-500","data-testid":"design-system-checkboxList--item-error",children:u})}),m&&/*#__PURE__*/r(n,{className:"grid-in-description flex items-center",children:/*#__PURE__*/r(s,{variant:"body14",className:h?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:m})})]})};
 /**
  * 체크박스와 라벨, 설명을 포함하는 리스트 아이템 컴포넌트입니다.
  *

package/dist/Components/Inputs/ChoiceChip/ChoiceChip.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as r}from"tailwind-merge";import{forwardRef as n,useState as o,useEffect as c}from"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";import{generateLeadingIconColor as l,generateLabelStyle as p,generateTrailingIconStyle as m,generateBackgroundColor as y,generateBackgroundPadding as u}from"./ChoiceChip.styles.js";function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){f(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function h(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as r}from"tailwind-merge";import{forwardRef as n,useState as o,useEffect as c}from"react";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as i}from"../../Base/Typography/Typography.js";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{generateLeadingIconColor as l,generateLabelStyle as p,generateTrailingIconStyle as m,generateBackgroundColor as y,generateBackgroundPadding as u}from"./ChoiceChip.styles.js";function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){f(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function h(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
 /**
  * 선택 가능한 칩 컴포넌트입니다.
  *
@@ -36,9 +36,9 @@
  *   checked={true}
  *   onChange={(e) => console.log('선택 상태:', e.target.checked)}
  * />
- */(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const g=/*#__PURE__*/n(((n,f)=>{var{label:g,checked:O=!1,error:j=!1,leadingIcon:w,trailingIcon:P,onChange:v}=n,x=h(n,["label","checked","error","leadingIcon","trailingIcon","onChange"]);const[C,D]=o(O);c((()=>{D(O)}),[O]);/*#__PURE__*/
+ */(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const g=/*#__PURE__*/n(((n,f)=>{var{label:g,checked:O=!1,error:j=!1,leadingIcon:w,trailingIcon:v,onChange:P}=n,D=h(n,["label","checked","error","leadingIcon","trailingIcon","onChange"]);const[x,C]=o(O);c((()=>{C(O)}),[O]);/*#__PURE__*/
 return e("label",{children:[
-/*#__PURE__*/t("input",b(d({type:"checkbox",checked:C,className:"absolute h-0 w-0 opacity-0",onChange:e=>{v&&(v(e),D(e.target.checked))}},x),{ref:f})),
-/*#__PURE__*/e("div",{"data-testid":"design-system-choiceChip",className:r("flex w-fit cursor-pointer select-none items-center gap-2 rounded-full",y(C,j),u(!!w)),children:[w&&/*#__PURE__*/t(s,{className:"flex size-8 items-center justify-center rounded-full bg-w-white p-0.5","data-testid":"design-system-choiceChip--leading-icon-container",children:/*#__PURE__*/t(i,{name:w,className:l(C,j)})}),
-/*#__PURE__*/e(s,{className:"flex items-center gap-1.5",children:[
-/*#__PURE__*/t(a,{"data-testid":"design-system-choiceChip-label",variant:"body1",className:p(C,j),children:g}),P&&/*#__PURE__*/t(i,{name:P,className:m(C,j)})]})]})]})}));g.displayName="ChoiceChip";export{g as ChoiceChip};
+/*#__PURE__*/t("input",b(d({type:"checkbox",checked:x,className:"absolute h-0 w-0 opacity-0",onChange:e=>{P&&(P(e),C(e.target.checked))}},D),{ref:f})),
+/*#__PURE__*/e("div",{"data-testid":"design-system-choiceChip",className:r("flex w-fit cursor-pointer select-none items-center gap-2 rounded-full",y(x,j),u(!!w)),children:[w&&/*#__PURE__*/t(a,{className:"flex size-8 items-center justify-center rounded-full bg-w-white p-0.5","data-testid":"design-system-choiceChip--leading-icon-container",children:/*#__PURE__*/t(s,{name:w,className:l(x,j)})}),
+/*#__PURE__*/e(a,{className:"flex items-center gap-1.5",children:[
+/*#__PURE__*/t(i,{"data-testid":"design-system-choiceChip-label",variant:"body16",className:p(x,j),children:g}),v&&/*#__PURE__*/t(s,{name:v,className:m(x,j)})]})]})]})}));g.displayName="ChoiceChip";export{g as ChoiceChip};

package/dist/Components/Inputs/CommentArea/CommentArea.js

@@ -1,11 +1,11 @@
-"use client";import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as a}from"react";import{twMerge as l}from"tailwind-merge";import{Typography as s}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Avatar as i}from"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as o}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Divider as c}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{Button as m}from"../Button/Button.js";import{CheckboxListItem as d}from"../CheckboxListItem/CheckboxListItem.js";function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){u(e,t,r[t])}))}return e}function p(e,t){if(null==e)return{};var r,a,l=function(e,t){if(null==e)return{};var r,a,l={},s=Object.keys(e);for(a=0;a<s.length;a++)r=s[a],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a<s.length;a++)r=s[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}const y=({userId:r,imgUrl:a=""})=>/*#__PURE__*/e(n,{className:"flex items-center gap-2",children:[
+"use client";import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as a}from"react";import{twMerge as l}from"tailwind-merge";import{Typography as n}from"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Avatar as i}from"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as o}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Divider as c}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{Button as m}from"../Button/Button.js";import{CheckboxListItem as d}from"../CheckboxListItem/CheckboxListItem.js";function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){u(e,t,r[t])}))}return e}function p(e,t){if(null==e)return{};var r,a,l=function(e,t){if(null==e)return{};var r,a,l={},n=Object.keys(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}const y=({userId:r,imgUrl:a=""})=>/*#__PURE__*/e(s,{className:"flex items-center gap-2",children:[
 /*#__PURE__*/t(i,{imgUrl:a,size:"sm"}),
-/*#__PURE__*/t(s,{variant:"body1",className:"w-full font-medium text-w-gray-600",children:r})]}),b=({guideText:e})=>/*#__PURE__*/t(n,{className:"w-full bg-w-gray-10 text-w-gray-500",children:/*#__PURE__*/t("ul",{className:"flex flex-col gap-0.5 typo-body2",children:"string"==typeof e?/*#__PURE__*/t("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e}):/*#__PURE__*/t(r,{children:null==e?void 0:e.map((e=>/*#__PURE__*/t("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e},e)))})})}),g=/*#__PURE__*/a(((a,s)=>{var{imgUrl:i,userId:u,isReply:g,guideText:h,buttonName:x,isSelected:w,optionMessage:j,cancelButtonName:N="취소",onClose:v,onSubmit:O,onCheck:k}=a,C=p(a,["imgUrl","userId","isReply","guideText","buttonName","isSelected","optionMessage","cancelButtonName","onClose","onSubmit","onCheck"]);const{value:D,className:S,disabled:A,spellCheck:B=!1,children:I}=C,P=p(C,["value","className","disabled","spellCheck","children"]),T=""===D.trim(),U=!u||T||A,z=u&&j;/*#__PURE__*/
-return e(n,{"data-testid":"design-system-commentArea--full-container",className:l("flex w-full items-start gap-4",S),children:[g&&/*#__PURE__*/t(o,{name:"medium_reply",className:"shrink-0 text-w-gray-400"}),
-/*#__PURE__*/e(n,{"data-testid":"design-system-commentArea--container",className:"w-full rounded-xl border border-w-gray-200 bg-w-white",children:[
-/*#__PURE__*/t(n,{className:"flex w-full flex-col gap-2 px-4 py-3",children:I?/*#__PURE__*/t(n,{className:"h-[98px]",children:I}):/*#__PURE__*/e(r,{children:[u&&/*#__PURE__*/t(y,{imgUrl:i,userId:u}),
-/*#__PURE__*/t("textarea",f({"data-testid":"design-system-commentArea",ref:s,value:D,spellCheck:B,disabled:A||!u,className:"h-[63px] w-full resize-none border-none bg-transparent tracking-default text-w-gray-900 outline-none placeholder:font-normal placeholder:text-w-gray-300 placeholder:typo-body1"},P))]})}),h&&/*#__PURE__*/t(n,{"data-testid":"design-system-commentArea--guide-message",className:"w-full bg-w-gray-10 px-4 py-2 text-w-gray-500",children:/*#__PURE__*/t(b,{guideText:h})}),
+/*#__PURE__*/t(n,{variant:"body16",className:"w-full font-medium text-w-gray-600",children:r})]}),b=({guideText:e})=>/*#__PURE__*/t(s,{className:"w-full bg-w-gray-10 text-w-gray-500",children:/*#__PURE__*/t("ul",{className:"typo-body14 flex flex-col gap-0.5",children:"string"==typeof e?/*#__PURE__*/t("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e}):/*#__PURE__*/t(r,{children:null==e?void 0:e.map((e=>/*#__PURE__*/t("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e},e)))})})}),g=/*#__PURE__*/a(((a,n)=>{var{imgUrl:i,userId:u,isReply:g,guideText:h,buttonName:x,isSelected:w,optionMessage:j,cancelButtonName:N="취소",onClose:v,onSubmit:O,onCheck:k}=a,C=p(a,["imgUrl","userId","isReply","guideText","buttonName","isSelected","optionMessage","cancelButtonName","onClose","onSubmit","onCheck"]);const{value:D,className:S,disabled:A,spellCheck:B=!1,children:I}=C,P=p(C,["value","className","disabled","spellCheck","children"]),T=""===D.trim(),U=!u||T||A,z=u&&j;/*#__PURE__*/
+return e(s,{"data-testid":"design-system-commentArea--full-container",className:l("flex w-full items-start gap-4",S),children:[g&&/*#__PURE__*/t(o,{name:"medium_reply",className:"shrink-0 text-w-gray-400"}),
+/*#__PURE__*/e(s,{"data-testid":"design-system-commentArea--container",className:"w-full rounded-xl border border-w-gray-200 bg-w-white",children:[
+/*#__PURE__*/t(s,{className:"flex w-full flex-col gap-2 px-4 py-3",children:I?/*#__PURE__*/t(s,{className:"h-[98px]",children:I}):/*#__PURE__*/e(r,{children:[u&&/*#__PURE__*/t(y,{imgUrl:i,userId:u}),
+/*#__PURE__*/t("textarea",f({"data-testid":"design-system-commentArea",ref:n,value:D,spellCheck:B,disabled:A||!u,className:"outline-hidden placeholder:typo-body16 tracking-default h-[63px] w-full resize-none border-none bg-transparent text-w-gray-900 placeholder:font-normal placeholder:text-w-gray-300"},P))]})}),h&&/*#__PURE__*/t(s,{"data-testid":"design-system-commentArea--guide-message",className:"w-full bg-w-gray-10 px-4 py-2 text-w-gray-500",children:/*#__PURE__*/t(b,{guideText:h})}),
 /*#__PURE__*/t(c,{}),
-/*#__PURE__*/e(n,{"data-testid":"design-system-commentArea--buttons",className:l("flex w-full items-center justify-end px-4 py-3",z&&"justify-between"),children:[z&&/*#__PURE__*/t(d,{label:j,checked:w,onChange:k,disabled:A||!u}),
-/*#__PURE__*/e(n,{className:"flex w-fit shrink-0 items-center gap-3",children:[g&&/*#__PURE__*/t(m,{size:"sm",onClick:v,color:"gray",children:N}),
-/*#__PURE__*/t(m,{variant:"solid",size:"sm",disabled:U,onClick:O,children:x})]})]})]})]})}));g.displayName="CommentArea";export{g as CommentArea};
+/*#__PURE__*/e(s,{"data-testid":"design-system-commentArea--buttons",className:l("flex w-full items-center justify-end px-4 py-3",z&&"justify-between"),children:[z&&/*#__PURE__*/t(d,{label:j,checked:w,onChange:k,disabled:A||!u}),
+/*#__PURE__*/e(s,{className:"flex w-fit shrink-0 items-center gap-3",children:[g&&/*#__PURE__*/t(m,{size:"36",onClick:v,variant:"outline_gray",children:N}),
+/*#__PURE__*/t(m,{variant:"solid",size:"36",disabled:U,onClick:O,children:x})]})]})]})]})}));g.displayName="CommentArea";export{g as CommentArea};

package/dist/Components/Inputs/FileUploader/FileUploader.d.ts

@@ -0,0 +1,45 @@
+import type { FileUploaderProps } from './FileUploader.types';
+/**
+ * 파일 업로드를 위한 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {File[]} [props.files] - 현재 업로드된 파일 목록
+ * @param {(files: File[]) => void} [props.onChange] - 파일 변경 시 호출되는 콜백 함수
+ * @param {string} [props.accept] - 허용되는 파일 타입 (예: 'image/*', '.pdf,.doc')
+ * @param {boolean} [props.multiple=true] - 여러 파일 선택 가능 여부
+ * @param {number} [props.maxFileSize] - 최대 파일 크기 (bytes)
+ * @param {boolean} [props.disabled=false] - 컴포넌트 비활성화 여부
+ * @param {boolean} [props.isError=false] - 에러 상태 여부
+ * @param {string} [props.errorMessage] - 에러 메시지
+ * @param {string} [props.supportMessage] - 보조 메시지
+ * @param {string} [props.text] - 업로드 영역에 표시할 텍스트 (isSmall일 때 사용)
+ * @param {boolean} [props.isSmall=false] - 작은 크기 변형 여부
+ * @param {() => void} [props.onFileSizeExceeded] - 파일 크기 초과 시 호출되는 콜백 함수
+ *
+ * @example
+ * // 기본 파일 업로더
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   maxFileSize={10 * 1024 * 1024}
+ * />
+ *
+ * // 이미지만 업로드
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   accept="image/*"
+ *   supportMessage="이미지 파일만 업로드 가능합니다"
+ * />
+ *
+ * // 작은 크기 변형
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   isSmall={true}
+ *   text="파일 첨부하기"
+ * />
+ */
+declare const FileUploader: ({ files, onChange, accept, multiple, maxFileSize, disabled, isError, errorMessage, supportMessage, text, isSmall, onFileSizeExceeded, }: FileUploaderProps) => import("react/jsx-runtime").JSX.Element;
+export { FileUploader };

package/dist/Components/Inputs/FileUploader/FileUploader.hooks.d.ts

@@ -0,0 +1,20 @@
+import { type ChangeEvent, type DragEvent, RefObject } from 'react';
+interface UseFileUploaderParams {
+    files: File[];
+    onChange?: (files: File[]) => void;
+    maxFileSize?: number;
+    disabled: boolean;
+    onFileSizeExceeded?: () => void;
+}
+interface UseFileUploaderReturn {
+    inputRef: RefObject<HTMLInputElement | null>;
+    isDragOver: boolean;
+    handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleButtonClick: () => void;
+    handleRemoveFile: (index: number) => void;
+    handleDragOver: (event: DragEvent<HTMLButtonElement>) => void;
+    handleDragLeave: (event: DragEvent<HTMLButtonElement>) => void;
+    handleDrop: (event: DragEvent<HTMLButtonElement>) => void;
+}
+export declare const useFileUploader: ({ files, onChange, maxFileSize, disabled, onFileSizeExceeded, }: UseFileUploaderParams) => UseFileUploaderReturn;
+export {};

package/dist/Components/Inputs/FileUploader/FileUploader.hooks.js

@@ -0,0 +1 @@
+import{useRef as e,useState as l}from"react";const n=({files:n,onChange:r,maxFileSize:t,disabled:a,onFileSizeExceeded:i})=>{const u=e(null),[o,f]=l(!1),s=e=>{if(!e||0===e.length)return;let l=Array.from(e),a=!1;if(t&&(a=l.some((e=>e.size>t)),l=l.filter((e=>e.size<=t))),a&&i&&i(),l.length>0){const e=[...n,...l];null==r||r(e)}u.current&&(u.current.value="")};return{inputRef:u,isDragOver:o,handleInputChange:e=>{s(e.target.files)},handleButtonClick:()=>{var e;a||(null===(e=u.current)||void 0===e||e.click())},handleRemoveFile:e=>{const l=n.filter(((l,n)=>n!==e));null==r||r(l)},handleDragOver:e=>{e.preventDefault(),a||f(!0)},handleDragLeave:e=>{e.preventDefault(),f(!1)},handleDrop:e=>{e.preventDefault(),f(!1),a||s(e.dataTransfer.files)}}};export{n as useFileUploader};

package/dist/Components/Inputs/FileUploader/FileUploader.js

@@ -0,0 +1,48 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as l}from"tailwind-merge";import{useMemo as a}from"react";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SupportTextContainer as i}from"../SupportTextContainer/SupportTextContainer.js";import{FileItem as t,FileUploadArea as s}from"./FileUploader.parts.js";import{useFileUploader as d}from"./FileUploader.hooks.js";import{generateAcceptDescription as n}from"./FileUploader.utils.js";
+/**
+ * 파일 업로드를 위한 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {File[]} [props.files] - 현재 업로드된 파일 목록
+ * @param {(files: File[]) => void} [props.onChange] - 파일 변경 시 호출되는 콜백 함수
+ * @param {string} [props.accept] - 허용되는 파일 타입 (예: 'image/*', '.pdf,.doc')
+ * @param {boolean} [props.multiple=true] - 여러 파일 선택 가능 여부
+ * @param {number} [props.maxFileSize] - 최대 파일 크기 (bytes)
+ * @param {boolean} [props.disabled=false] - 컴포넌트 비활성화 여부
+ * @param {boolean} [props.isError=false] - 에러 상태 여부
+ * @param {string} [props.errorMessage] - 에러 메시지
+ * @param {string} [props.supportMessage] - 보조 메시지
+ * @param {string} [props.text] - 업로드 영역에 표시할 텍스트 (isSmall일 때 사용)
+ * @param {boolean} [props.isSmall=false] - 작은 크기 변형 여부
+ * @param {() => void} [props.onFileSizeExceeded] - 파일 크기 초과 시 호출되는 콜백 함수
+ *
+ * @example
+ * // 기본 파일 업로더
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   maxFileSize={10 * 1024 * 1024}
+ * />
+ *
+ * // 이미지만 업로드
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   accept="image/*"
+ *   supportMessage="이미지 파일만 업로드 가능합니다"
+ * />
+ *
+ * // 작은 크기 변형
+ * <FileUploader
+ *   files={files}
+ *   onChange={(newFiles) => setFiles(newFiles)}
+ *   isSmall={true}
+ *   text="파일 첨부하기"
+ * />
+ */const p=({files:p=[],onChange:m,accept:c,multiple:u=!0,maxFileSize:f,disabled:g=!1,isError:x=!1,errorMessage:h,supportMessage:b,text:F,isSmall:w=!1,onFileSizeExceeded:y})=>{const{inputRef:S,isDragOver:j,handleInputChange:v,handleButtonClick:C,handleRemoveFile:D,handleDragOver:z,handleDragLeave:B,handleDrop:N}=d({files:p,onChange:m,maxFileSize:f,disabled:g,onFileSizeExceeded:y}),L=a((()=>p.reduce(((e,r)=>e+r.size),0)),[p]),M=n(c);/*#__PURE__*/
+return e(o,{className:"flex w-full flex-col gap-6",children:[
+/*#__PURE__*/r("input",{ref:S,type:"file",className:"hidden",accept:c,multiple:u,onChange:v,disabled:g,"data-testid":"file-uploader-input"}),p.length>0&&/*#__PURE__*/r(o,{className:"flex flex-col gap-2",children:p.map(((e,l)=>/*#__PURE__*/r(t,{file:e,onRemove:()=>D(l),disabled:g},`${e.name}-${l}`)))}),
+/*#__PURE__*/e(o,{className:"flex flex-col gap-2",children:[
+/*#__PURE__*/r("button",{type:"button",className:l("flex w-full items-center justify-center gap-3 rounded-xl border border-dashed border-w-gray-200 bg-w-gray-10 px-6 py-8 text-w-gray-600",w?"flex-row":"flex-col",g&&"cursor-not-allowed",x&&"border-w-red-500",!g&&!x&&"hover:border-w-gray-400",j&&!g&&!x&&"border-w-gray-400"),disabled:g,onClick:C,onDragOver:z,onDragLeave:B,onDrop:N,children:/*#__PURE__*/r(s,{disabled:g,isSmall:w,text:F,acceptDescription:M})}),
+/*#__PURE__*/r(i,{errorMessage:h,supportMessage:b,currentFileSize:L,maxFileSize:f})]})]})};export{p as FileUploader};

package/dist/Components/Inputs/FileUploader/FileUploader.parts.d.ts

@@ -0,0 +1,10 @@
+import type { FileItemProps } from './FileUploader.types';
+export declare const FileItem: ({ file, onRemove, disabled, }: FileItemProps) => import("react/jsx-runtime").JSX.Element;
+interface FileUploadAreaProps {
+    disabled: boolean;
+    isSmall: boolean;
+    text?: string;
+    acceptDescription: string;
+}
+export declare const FileUploadArea: ({ disabled, isSmall, text, acceptDescription, }: FileUploadAreaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Inputs/FileUploader/FileUploader.parts.js

@@ -0,0 +1,11 @@
+import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";import{Typography as s}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{getFileNameWithoutExtension as m,getFileExtension as n,formatFileSize as o}from"./FileUploader.utils.js";const c=({file:t,onRemove:c,disabled:d=!1})=>{const y=m(t.name),p=n(t.name),x=o(t.size);/*#__PURE__*/
+return e(l,{className:"w-0 min-w-full rounded-xl border border-w-gray-200 px-3 py-2",children:/*#__PURE__*/a(l,{className:"flex items-center gap-2",children:[
+/*#__PURE__*/e(i,{name:"medium_clip",className:"shrink-0 text-primary-500"}),
+/*#__PURE__*/a(l,{className:"flex min-w-0 flex-1 items-center",children:[
+/*#__PURE__*/e(s,{variant:"body16",className:"min-w-0 truncate text-w-gray-600",children:y}),
+/*#__PURE__*/e(s,{variant:"body16",className:"shrink-0 text-w-gray-600",children:p})]}),
+/*#__PURE__*/e(s,{variant:"body14",className:"ml-4 shrink-0 text-w-gray-400",children:x}),
+/*#__PURE__*/e("button",{type:"button",onClick:c,disabled:d,"aria-label":"파일 삭제",className:d?"cursor-not-allowed":"",children:/*#__PURE__*/e(i,{name:"small_delete",className:r("ml-2 shrink-0",d?"text-w-gray-300":"text-w-gray-400")})})]})})},d=({disabled:r,isSmall:m,text:n,acceptDescription:o})=>{const c=r?"text-w-gray-300":"text-w-gray-600",d=r?"text-w-gray-300":"text-w-gray-400";/*#__PURE__*/
+return a(t,{children:[
+/*#__PURE__*/e(i,{name:"medium_upload",className:c}),m?/*#__PURE__*/e(s,{variant:"body16",className:c,children:n||"파일 업로드"}):/*#__PURE__*/a(l,{className:"flex flex-col items-center justify-center gap-0.5",children:[
+/*#__PURE__*/e(s,{variant:"body16",className:c,children:"여기를 클릭하거나 파일을 끌어오세요."}),o&&/*#__PURE__*/e(s,{variant:"body14",className:d,children:o})]})]})};export{c as FileItem,d as FileUploadArea};

package/dist/Components/Inputs/FileUploader/FileUploader.types.d.ts

@@ -0,0 +1,19 @@
+export interface FileItemProps {
+    file: File;
+    onRemove: () => void;
+    disabled?: boolean;
+}
+export interface FileUploaderProps {
+    files?: File[];
+    onChange?: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    disabled?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    supportMessage?: string;
+    text?: string;
+    isSmall?: boolean;
+    onFileSizeExceeded?: () => void;
+}

package/dist/Components/Inputs/FileUploader/FileUploader.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const formatFileSize: (bytes: number) => string;
+export declare const getFileExtension: (fileName: string) => string;
+export declare const getFileNameWithoutExtension: (fileName: string) => string;
+export declare const generateAcceptDescription: (accept?: string) => string;