@wishket/design-system 1.17.2 → 1.17.4

package/dist/Components/Feedbacks/Tooltip/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+import { type TooltipProps } from './Tooltip.types';
+/**
+ * 툴팁의 루트 컴포넌트입니다.
+ * CSS 기반 hover와 focus로 동작합니다.
+ *
+ * @param {TooltipProps} props - 툴팁 컴포넌트의 프로퍼티
+ * @param {string} props.className - 툴팁 컴포넌트의 클래스 이름
+ *
+ * @example
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <button>버튼</button>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="up" text="간단한 툴팁" />
+ * </Tooltip>
+ */
+declare const Tooltip: {
+    ({ children, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+    Plain: ({ id, text, variant, className, }: import("./Tooltip.types").TooltipPlainProps) => import("react/jsx-runtime").JSX.Element;
+    Rich: ({ id, title, description, variant, className, children, }: import("./Tooltip.types").TooltipRichProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Tooltip };

package/dist/Components/Feedbacks/Tooltip/Tooltip.js

@@ -0,0 +1,25 @@
+"use client";import{jsx as i}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{Box as e}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{PlainTooltip as o}from"./PlainTooltip/PlainTooltip.js";import{RichTooltip as l}from"./RichTooltip/RichTooltip.js";
+/**
+ * 툴팁의 루트 컴포넌트입니다.
+ * CSS 기반 hover와 focus로 동작합니다.
+ *
+ * @param {TooltipProps} props - 툴팁 컴포넌트의 프로퍼티
+ * @param {string} props.className - 툴팁 컴포넌트의 클래스 이름
+ *
+ * @example
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <button>버튼</button>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="up" text="간단한 툴팁" />
+ * </Tooltip>
+ */const s=({children:o,className:l})=>/*#__PURE__*/i(e,{className:t("group relative inline-block h-fit w-fit",l),"data-testid":"design-system-tooltip",children:o});
+/**
+ * 툴팁 트리거 컴포넌트입니다.
+ * 데스크톱에서는 CSS hover로, 모바일에서는 터치(focus)로 툴팁을 표시합니다.
+ *
+ * @example
+ * <Tooltip.Trigger>
+ *   <SystemIcon name="medium_information" />
+ * </Tooltip.Trigger>
+ */s.Trigger=({children:t})=>/*#__PURE__*/i(e,{"data-testid":"design-system-tooltip--trigger",className:"focus:outline-hidden h-fit w-fit",tabIndex:0,children:t}),s.Plain=o,s.Rich=l;export{s as Tooltip};

package/dist/Components/Feedbacks/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export interface TooltipProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface TooltipPlainProps {
+    id?: string;
+    text: string;
+    variant?: 'up' | 'down' | 'left' | 'right';
+    className?: string;
+}
+export interface TooltipRichProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    variant?: 'right' | 'down';
+    className?: string;
+    children?: ReactNode;
+}

package/dist/Components/Feedbacks/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPlainProps, TooltipRichProps, } from './Tooltip.types';
+export { RichTooltip } from './RichTooltip';
+export { PlainTooltip } from './PlainTooltip';

package/dist/Components/Feedbacks/index.d.ts

@@ -4,6 +4,5 @@ export * from './MessageBar';
 export * from './Dialog';
 export * from './DialogBox';
 export * from './LoadingIndicator';
-export * from './PlainTooltip';
-export * from './RichTooltip';
+export * from './Tooltip';
 export * from './GlobalLoadingIndicator';

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{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,x=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)},x),{"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/Autocomplete/Autocomplete.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as n}from"react";import{useClickOutside as i}from"@wishket/yogokit";import{AutoCompleteList as s}from"../AutoCompleteList/AutoCompleteList.js";import{TextFieldContainer as a}from"../TextFieldContainer/TextFieldContainer.js";import"tailwind-merge";import{Box as c}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Input as u}from"../Input/Input.js";import"../Input/PasswordInput.js";import"../Input/LableInput.js";import"../Input/InputTypeSelector.js";import{InputChip as p}from"../InputChip/InputChip.js";import{SupportTextContainer as m}from"../SupportTextContainer/SupportTextContainer.js";import{WithDivider as d}from"./Autocomplete.parts.js";import{getSortedSkillItems as f}from"./Autocomplete.utils.js";
+"use client";import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as n}from"react";import{useClickOutside as i}from"@wishket/yogokit";import{AutoCompleteList as s}from"../AutoCompleteList/AutoCompleteList.js";import{TextFieldContainer as a}from"../TextFieldContainer/TextFieldContainer.js";import"tailwind-merge";import{Box as c}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Input as u}from"../Input/Input.js";import"../Input/PasswordInput.js";import"../Input/LabelInput.js";import"../Input/InputTypeSelector.js";import{InputChip as p}from"../InputChip/InputChip.js";import{SupportTextContainer as m}from"../SupportTextContainer/SupportTextContainer.js";import{WithDivider as d}from"./Autocomplete.parts.js";import{getSortedSkillItems as f}from"./Autocomplete.utils.js";
 /**
  * 자동완성 입력 컴포넌트
  *

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{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[$,B]=a(!1),D=()=>{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:L}=g(v),{dateList:k}=h(F.year,F.month),z=[...Array.from({length:k[0].day},(()=>null)),...k],E=e=>{if(f&&x(e,v))return;const t=`${e.year}-${e.month}-${e.date}`;null==w||w(t),B(!1)};return r((()=>{!$&&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
-}),[$]),/*#__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:$,isError:C,isDisabled:b,testId:"design-system-calendar--trigger",onClick:D,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} ${L}`:j})]})}),$&&/*#__PURE__*/t("div",{className:"fixed left-0 top-0 z-10 h-screen w-screen bg-transparent",onClick: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:z.map(((e,a)=>{const r=!(!e||!f)&&x(e,v);return e?/*#__PURE__*/t(m,{date:e,selected:r,onChange:E},`${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{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.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as o,useEffect as n,useCallback as c}from"react";import"tailwind-merge";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxButton as a}from"./Checkbox.parts.js";function i(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){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){i(e,r,t[r])}))}return e}function u(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useCallback as o}from"react";import"tailwind-merge";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxButton as c}from"./Checkbox.parts.js";function a(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){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){a(e,r,t[r])}))}return e}function l(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}
 /**
  * @component
  * @param {Object} props - 체크박스 컴포넌트 프로퍼티
@@ -27,7 +27,7 @@
  *   console.log('체크박스 상태:', e.target.checked);
  * };
  * <Checkbox onChange={handleChange} />
- */(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}const p=/*#__PURE__*/t(((t,i)=>{var{checked:p=!1,onChange:b,disabled:f=!1,isError:d=!1,type:m="box",className:y}=t,h=u(t,["checked","onChange","disabled","isError","type","className"]);const[g,O]=o(p),[j,k]=o(!1);n((()=>{O(p)}),[p]);const x=c((e=>{f||b&&(b(e),O(e.target.checked),e.target.checked||k(!1))}),[b,f]);/*#__PURE__*/
-return e(s,{"data-testid":"design-system-checkbox",className:"group relative flex size-fit",children:[
-/*#__PURE__*/r("input",l({ref:i,className:"absolute inset-0 z-10 cursor-pointer opacity-0",type:"checkbox",checked:g,onChange:x,onFocus:()=>{k(!0)},onBlur:()=>{k(!1)},disabled:f},h)),
-/*#__PURE__*/r(a,{checked:g,disabled:f,isError:d,isFocused:j,type:m,className:y})]})}));p.displayName="Checkbox";export{p as Checkbox};
+ */(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}const s=/*#__PURE__*/t(((t,a)=>{var{checked:s=!1,onChange:u,disabled:p=!1,isError:b=!1,type:f="box",className:m}=t,y=l(t,["checked","onChange","disabled","isError","type","className"]);const d=o((e=>{p||null==u||u(e)}),[u,p]);/*#__PURE__*/
+return e(n,{"data-testid":"design-system-checkbox",className:"group relative flex size-fit",children:[
+/*#__PURE__*/r("input",i({ref:a,className:"absolute inset-0 z-10 cursor-pointer opacity-0",type:"checkbox",checked:s,onChange:d,disabled:p},y)),
+/*#__PURE__*/r(c,{checked:s,disabled:p,isError:b,type:f,className:m})]})}));s.displayName="Checkbox";export{s as Checkbox};

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

@@ -1,2 +1,2 @@
 import { CheckboxButtonProps } from './Checkbox.types';
-export declare const CheckboxButton: ({ type, disabled, checked, isError, isFocused, className, }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxButton: ({ type, disabled, checked, isError, className, }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,8 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";const o="text-w-white group-hover:text-w-white",s="text-w-gray-200 group-hover:text-w-gray-200",a="stroke-dasharray-[16] stroke-dashoffset-[16] animate-checkbox-check",i=({type:o="box",disabled:s,checked:a=!1,isError:i,isFocused:n,className:h})=>{const w="circle"===o?"rounded-full":"rounded";return"sub"===o?/*#__PURE__*/r(c,{role:"checkbox-button",className:h,checked:a,disabled:s,isError:i}):/*#__PURE__*/e("div",{className:t("group relative box-border cursor-pointer border",{box:"size-4 m-px",circle:"size-[18px]"}[o],w,
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";const o="text-w-white group-hover:text-w-white",s="text-w-gray-200 group-hover:text-w-gray-200",a="stroke-dasharray-[16] stroke-dashoffset-[16] animate-checkbox-check",i=({type:o="box",disabled:s,checked:a=!1,isError:i,className:n})=>{const h="circle"===o?"rounded-full":"rounded";return"sub"===o?/*#__PURE__*/r(l,{role:"checkbox-button",className:n,checked:a,disabled:s,isError:i}):/*#__PURE__*/e("div",{className:t("group relative box-border cursor-pointer border",!s&&!i&&"group-focus-within:border-primary-500",!s&&!i&&!a&&"group-focus-within:bg-w-white",{box:"size-4 m-px",circle:"size-[18px]"}[o],h,
 // 비활성화 상태
 s?a?i?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":"bg-primary-100 border-primary-100 cursor-not-allowed":"border-w-gray-200 bg-w-gray-50 cursor-not-allowed":
-// 포커스 상태 (에러가 없을 때)
-n&&!i?a?"bg-primary-500 border-primary-500":"border-primary-500 bg-w-white":
 // 에러 상태
 i?a?"border-w-red-500 bg-w-red-500":"border-w-red-500 bg-w-white":
 // 정상 상태
-a?"bg-primary-500 border-primary-500":"group-hover:border-primary-500 border-w-gray-200 bg-white",h),role:"checkbox-button",children:["box"===o&&/*#__PURE__*/r(d,{checked:a,isError:i,disabled:s}),"circle"===o&&/*#__PURE__*/r(l,{checked:a,isError:i,disabled:s})]})},d=({checked:e,isError:i,disabled:d})=>/*#__PURE__*/r("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",e&&o,i&&d&&s,!e&&"text-transparent",d&&(!i&&e?o:"text-transparent")),style:{strokeDasharray:e?"16":"0",strokeDashoffset:e?"16":"0"},children:/*#__PURE__*/r("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:e?a:""})}),l=({checked:e,isError:i,disabled:d})=>/*#__PURE__*/r("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",e&&o,i&&d&&s,!e&&"text-w-gray-200 group-hover:text-w-primary",i&&!e&&"text-w-red-500 group-hover:text-w-red-500",d&&(!i&&e?o:s)),style:{strokeDasharray:e?"16":"0",strokeDashoffset:e?"16":"0"},children:/*#__PURE__*/r("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:e?a:""})}),c=({role:e,className:o,checked:s,disabled:a,isError:i})=>{const d="text-w-gray-100";/*#__PURE__*/
+a?"bg-primary-500 border-primary-500":"group-hover:border-primary-500 border-w-gray-200 bg-white",n),role:"checkbox-button",children:["box"===o&&/*#__PURE__*/r(d,{checked:a,isError:i,disabled:s}),"circle"===o&&/*#__PURE__*/r(c,{checked:a,isError:i,disabled:s})]})},d=({checked:e,isError:i,disabled:d})=>/*#__PURE__*/r("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",e&&o,i&&d&&s,!e&&"text-transparent",d&&(!i&&e?o:"text-transparent")),style:{strokeDasharray:e?"16":"0",strokeDashoffset:e?"16":"0"},children:/*#__PURE__*/r("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:e?a:""})}),c=({checked:e,isError:i,disabled:d})=>/*#__PURE__*/r("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",e&&o,i&&d&&s,!e&&"text-w-gray-200 group-hover:text-w-primary",i&&!e&&"text-w-red-500 group-hover:text-w-red-500",d&&(!i&&e?o:s)),style:{strokeDasharray:e?"16":"0",strokeDashoffset:e?"16":"0"},children:/*#__PURE__*/r("path",{d:"M1 3.8L4 7L9 1",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",className:e?a:""})}),l=({role:e,className:o,checked:s,disabled:a,isError:i})=>{const d="text-w-gray-100";/*#__PURE__*/
 return r("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",role:e,className:t("cursor-pointer",a&&"cursor-not-allowed",i?a?d:"text-w-red-500":a?s?"text-primary-100":d:s?"text-primary":"text-w-gray-200",o),"data-testid":"design-system--sub-checkbox",children:/*#__PURE__*/r("path",{d:"M4 8.76667L7.75004 12.5L14.0001 5.5",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})})};export{i as CheckboxButton};

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.d.ts

@@ -7,10 +7,10 @@ import { CheckboxCardProps } from './CheckboxCard.types';
  * @param {boolean} [props.disabled=false] - 컴포넌트의 비활성화 여부
  * @param {boolean} [props.checked=false] - 체크박스의 선택 상태
  * @param {boolean} [props.isError=false] - 오류 상태 표시 여부
- * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
  * @param {boolean} [props.isWide=false] - 넓은 형태로 표시할지 여부
  * @param {string} [props.className] - 추가적인 CSS 클래스
- * @param {string} props.iconName - 표시할 아이콘의 이름
+ * @param {ProductIconName} [props.iconName] - 표시할 아이콘의 이름
  * @param {string} props.title - 카드의 제목
  * @param {string} [props.description] - 카드의 설명 텍스트
  * @param {string} [props.testId] - 테스트를 위한 ID

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

@@ -1,8 +1,8 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxCardContainer as s,StyledCheckbox as i,CheckboxCardIcon as d,TitleContainer as o}from"./CheckboxCard.parts.js";const c=c=>{const{disabled:l=!1,checked:n=!1,isError:m=!1,onChange:h,isWide:x=!1,containerClassName:p,className:y,iconName:g,title:b,description:u,testId:k,name:C,value:f}=c,B=null!=g?g:x?null:"receipt";/*#__PURE__*/
-return e("label",{"data-testid":k,role:"checkbox-card",className:a("group",p),children:/*#__PURE__*/t(s,{"data-testid":"design-system-checkboxCard--container",checked:n,isError:m,isWide:x,disabled:l,className:y,children:[
-/*#__PURE__*/e(i,{isWide:x,checked:n,onChange:h,isError:m,disabled:l,name:C,value:f}),B&&/*#__PURE__*/e(d,{isError:m,checked:n,iconName:B,disabled:l}),
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxCardContainer as s,StyledCheckbox as i,CheckboxCardIcon as d,TitleContainer as o}from"./CheckboxCard.parts.js";const c=c=>{const{disabled:n=!1,checked:l=!1,isError:m=!1,onChange:h,isWide:x=!1,containerClassName:p,className:y,iconName:g,title:b,description:u,testId:k,name:C,value:f}=c,B=null!=g?g:x?void 0:"receipt";/*#__PURE__*/
+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",l?"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",l?"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})]})]})})};
 /**
  * 체크박스와 함께 아이콘, 제목, 설명을 포함하는 카드 형태의 선택 컴포넌트입니다.
  *
@@ -11,10 +11,10 @@ return e("label",{"data-testid":k,role:"checkbox-card",className:a("group",p),ch
  * @param {boolean} [props.disabled=false] - 컴포넌트의 비활성화 여부
  * @param {boolean} [props.checked=false] - 체크박스의 선택 상태
  * @param {boolean} [props.isError=false] - 오류 상태 표시 여부
- * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
  * @param {boolean} [props.isWide=false] - 넓은 형태로 표시할지 여부
  * @param {string} [props.className] - 추가적인 CSS 클래스
- * @param {string} props.iconName - 표시할 아이콘의 이름
+ * @param {ProductIconName} [props.iconName] - 표시할 아이콘의 이름
  * @param {string} props.title - 카드의 제목
  * @param {string} [props.description] - 카드의 설명 텍스트
  * @param {string} [props.testId] - 테스트를 위한 ID

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{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?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};
+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))})},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{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 b(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 d(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,S]=o(O);c((()=>{S(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",d(b({type:"checkbox",checked:C,className:"absolute h-0 w-0 opacity-0",onChange:e=>{v&&(v(e),S(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};