@wishket/design-system 1.17.3 → 1.17.4

package/dist/Components/Inputs/TextButtonDropdown/TextButtonDropdown.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{List as i}from"../List/List.js";import{useDropdown as n}from"../../../hooks/useDropdown.js";import{TextButton as s}from"./TextButtonDropdown.parts.js";
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{List as i}from"../List/List.js";import{useDropdown as s}from"../../../hooks/useDropdown.js";import{TextButton as n}from"./TextButtonDropdown.parts.js";
 /**
  * 텍스트 버튼 형태의 드롭다운 컴포넌트입니다.
  *
@@ -27,6 +27,6 @@
  *     disabled={item.length === 0}
  *   />
  * );
- */const l=({items:l,selectedItem:d,onItemClick:a,alignRight:r=!1,disabled:m=!1})=>{const{isListOpen:c,ref:u,focusedIndex:p,handleItemClick:f,toggleListOpen:x,handleKeyDown:g}=n({items:l,onItemClick:a});/*#__PURE__*/
-return t("div",{"data-testid":"design-system-text-button-dropdown",className:"relative flex w-fit flex-col gap-1 outline-none",ref:u,onKeyDown:g,tabIndex:0,children:[
-/*#__PURE__*/e(s,{disabled:m,value:d.value,"data-testid":"design-system-text-button-dropdown--textButton",isListOpen:c,onClick:x}),c&&/*#__PURE__*/e("div",{className:o("absolute -bottom-2 z-40 translate-y-full transform transition-all",r?"right-0":"left-0 "),"data-testid":"design-system-text-button-dropdown--list",children:/*#__PURE__*/e(i.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:l.map(((t,o)=>/*#__PURE__*/e(i.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>f(t),selected:t.key===(null==d?void 0:d.key),isFocused:o===p},t.key)))})})]})};export{l as TextButtonDropdown};
+ */const l=({items:l,selectedItem:d,onItemClick:a,alignRight:r=!1,disabled:m=!1})=>{const{isListOpen:c,ref:u,focusedIndex:p,handleItemClick:f,toggleListOpen:x,handleKeyDown:g}=s({items:l,onItemClick:a});/*#__PURE__*/
+return t("div",{"data-testid":"design-system-text-button-dropdown",className:"outline-hidden relative flex w-fit flex-col gap-1",ref:u,onKeyDown:g,tabIndex:0,children:[
+/*#__PURE__*/e(n,{disabled:m,value:d.value,"data-testid":"design-system-text-button-dropdown--textButton",isListOpen:c,onClick:x}),c&&/*#__PURE__*/e("div",{className:o("absolute -bottom-2 z-40 translate-y-full transform transition-all",r?"right-0":"left-0 "),"data-testid":"design-system-text-button-dropdown--list",children:/*#__PURE__*/e(i.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:l.map(((t,o)=>/*#__PURE__*/e(i.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>f(t),selected:t.key===(null==d?void 0:d.key),isFocused:o===p},t.key)))})})]})};export{l as TextButtonDropdown};

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as r,twJoin as n}from"tailwind-merge";import"react";import{SystemIcon as o}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(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 c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const l=l=>{var{value:p,isListOpen:u,disabled:y,className:m}=l,b=c(l,["value","isListOpen","disabled","className"]);/*#__PURE__*/
-return e("button",i(function(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){s(e,t,r[t])}))}return e}({type:"button",className:r("flex items-center gap-2 outline-none",y?"cursor-not-allowed":"cursor-pointer",m),disabled:y},b),{children:[
-/*#__PURE__*/t(a,{variant:"body1",className:r("text-w-gray-600",y&&"text-w-gray-300"),children:p}),
-/*#__PURE__*/t("span",{className:n("transition-transform duration-300",u&&"rotate-180"),children:/*#__PURE__*/t(o,{name:"medium_arrow_down",className:r("text-w-gray-600",y&&"text-w-gray-300")})})]}))};export{l as TextButton};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as r,twJoin as o}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as n}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as a}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(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 c(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}const l=l=>{var{value:p,isListOpen:y,disabled:u,className:m}=l,b=c(l,["value","isListOpen","disabled","className"]);/*#__PURE__*/
+return e("button",i(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){s(e,t,r[t])}))}return e}({type:"button",className:r("outline-hidden flex items-center gap-2",u?"cursor-not-allowed":"cursor-pointer",m),disabled:u},b),{children:[
+/*#__PURE__*/t(n,{variant:"body16",className:r("text-w-gray-600",u&&"text-w-gray-300"),children:p}),
+/*#__PURE__*/t("span",{className:o("transition-transform duration-300",y&&"rotate-180"),children:/*#__PURE__*/t(a,{name:"medium_arrow_down",className:r("text-w-gray-600",u&&"text-w-gray-300")})})]}))};export{l as TextButton};

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

@@ -5,13 +5,12 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
     variant?: variant;
     label?: string;
     isError?: boolean;
-    startIcon?: MediumSystemIconName;
-    endIcon?: MediumSystemIconName;
+    leadingIcon?: MediumSystemIconName;
+    trailingIcon?: MediumSystemIconName;
     supportMessage?: string;
     measure?: string;
     errorMessage?: string;
     testId?: string;
-    isMaxLengthVisible?: boolean;
 }
 /**
  * 사용자 입력을 받을 수 있는 텍스트 필드 컴포넌트입니다.
@@ -21,13 +20,12 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
  * @param {'default' | 'label'} [props.variant='default'] - 텍스트 필드의 변형 타입
  * @param {string} [props.label] - 입력 필드의 라벨
  * @param {boolean} [props.isError] - 오류 상태 표시 여부
- * @param {MediumSystemIconName} [props.startIcon] - 시작 부분에 표시될 아이콘
- * @param {MediumSystemIconName} [props.endIcon] - 끝 부분에 표시될 아이콘
+ * @param {MediumSystemIconName} [props.leadingIcon] - 시작 부분에 표시될 아이콘
+ * @param {MediumSystemIconName} [props.trailingIcon] - 끝 부분에 표시될 아이콘
  * @param {string} [props.supportMessage] - 도움말 메시지
  * @param {string} [props.measure] - 측정 단위
  * @param {string} [props.errorMessage] - 오류 메시지
  * @param {string} [props.testId] - 테스트용 ID
- * @param {boolean} [props.isMaxLengthVisible=false] - 최대 길이 표시 여부
  *
  * @example
  * // 기본 텍스트 필드
@@ -41,7 +39,7 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
  *   variant="label"
  *   label="이름"
  *   placeholder="홍길동"
- *   startIcon="user"
+ *   leadingIcon="user"
  *   supportMessage="실명을 입력해주세요"
  * />
  *
@@ -51,7 +49,6 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
  *   isError={true}
  *   errorMessage="필수 입력 항목입니다"
  *   maxLength={50}
- *   isMaxLengthVisible={true}
  * />
  */
 declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Components/Inputs/TextField/TextField.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as n,useEffect as o}from"react";import{twMerge as a}from"tailwind-merge";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";import"../Input/Input.js";import"../Input/PasswordInput.js";import{LabelInput as l}from"../Input/LabelInput.js";import{InputTypeSelector as c}from"../Input/InputTypeSelector.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(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){p(e,r,t[r])}))}return e}function b(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 f(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as n,useEffect as o}from"react";import{twMerge as a}from"tailwind-merge";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as i}from"../SupportTextContainer/SupportTextContainer.js";import"../Input/Input.js";import"../Input/PasswordInput.js";import{LabelInput as s}from"../Input/LabelInput.js";import{InputTypeSelector as c}from"../Input/InputTypeSelector.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(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){u(e,r,t[r])}))}return e}function f(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 m(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}
 /**
  * 사용자 입력을 받을 수 있는 텍스트 필드 컴포넌트입니다.
  *
@@ -7,13 +7,12 @@
  * @param {'default' | 'label'} [props.variant='default'] - 텍스트 필드의 변형 타입
  * @param {string} [props.label] - 입력 필드의 라벨
  * @param {boolean} [props.isError] - 오류 상태 표시 여부
- * @param {MediumSystemIconName} [props.startIcon] - 시작 부분에 표시될 아이콘
- * @param {MediumSystemIconName} [props.endIcon] - 끝 부분에 표시될 아이콘
+ * @param {MediumSystemIconName} [props.leadingIcon] - 시작 부분에 표시될 아이콘
+ * @param {MediumSystemIconName} [props.trailingIcon] - 끝 부분에 표시될 아이콘
  * @param {string} [props.supportMessage] - 도움말 메시지
  * @param {string} [props.measure] - 측정 단위
  * @param {string} [props.errorMessage] - 오류 메시지
  * @param {string} [props.testId] - 테스트용 ID
- * @param {boolean} [props.isMaxLengthVisible=false] - 최대 길이 표시 여부
  *
  * @example
  * // 기본 텍스트 필드
@@ -27,7 +26,7 @@
  *   variant="label"
  *   label="이름"
  *   placeholder="홍길동"
- *   startIcon="user"
+ *   leadingIcon="user"
  *   supportMessage="실명을 입력해주세요"
  * />
  *
@@ -37,7 +36,6 @@
  *   isError={true}
  *   errorMessage="필수 입력 항목입니다"
  *   maxLength={50}
- *   isMaxLengthVisible={true}
  * />
- */(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const m=/*#__PURE__*/t(((t,p)=>{var{type:m,name:d,value:g,onChange:y,maxLength:O,disabled:j=!1,placeholder:h,label:x,testId:I,measure:v,isError:w,endIcon:P,startIcon:L,errorMessage:M,supportMessage:S,variant:C="default",isMaxLengthVisible:E=!1,className:F,onBlur:T}=t,D=f(t,["type","name","value","onChange","maxLength","disabled","placeholder","label","testId","measure","isError","endIcon","startIcon","errorMessage","supportMessage","variant","isMaxLengthVisible","className","onBlur"]);const[N,k]=n(!1),[B,V]=n(0),q=u({variant:C,type:m,name:d,value:g,placeholder:h,label:x,maxLength:O,onChange:y,isFocused:N,isError:w,onFocus:()=>{k(!0)},disabled:j,onBlur:e=>{k(!1),T&&T(e)}},D),z=w||S||E;return o((()=>{"string"==typeof g&&O&&V(g.length)}),[g,O]),/*#__PURE__*/e("div",{className:a("flex min-w-fit select-none flex-col gap-2 tracking-default",F),"data-testid":I,children:[
-/*#__PURE__*/r("label",{role:"input-box",className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(i,{leadingIcon:L,trailingIcon:P,measure:v,isFocused:N,isError:w,isDisabled:j,children:["label"===C&&/*#__PURE__*/r(l,b(u({isFixed:!!h},q),{ref:p})),"default"===C&&/*#__PURE__*/r(c,b(u({},q),{ref:p}))]})}),z&&/*#__PURE__*/r(s,{errorMessage:M,supportMessage:S,currentLength:B,maxLength:O,isMaxLengthVisible:E})]})}));m.displayName="TextField";export{m as TextField};
+ */(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const b=/*#__PURE__*/t(((t,u)=>{var{type:b,name:d,value:g,onChange:y,maxLength:O,disabled:j=!1,placeholder:h,label:x,testId:I,measure:v,isError:w,trailingIcon:P,leadingIcon:S,errorMessage:C,supportMessage:E,variant:F="default",className:L,onBlur:M}=t,T=m(t,["type","name","value","onChange","maxLength","disabled","placeholder","label","testId","measure","isError","trailingIcon","leadingIcon","errorMessage","supportMessage","variant","className","onBlur"]);const[D,N]=n(!1),[k,B]=n(0),q=p({variant:F,type:b,name:d,value:g,placeholder:h,label:x,maxLength:O,onChange:y,isFocused:D,isError:w,onFocus:()=>{N(!0)},disabled:j,onBlur:e=>{N(!1),M&&M(e)}},T),z=w||E||O;return o((()=>{"string"==typeof g&&O&&B(g.length)}),[g,O]),/*#__PURE__*/e("div",{className:a("tracking-default flex w-full select-none flex-col gap-2",L),"data-testid":I,children:[
+/*#__PURE__*/r("label",{role:"input-box",className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(l,{leadingIcon:S,trailingIcon:P,measure:v,isFocused:D,isError:w,isDisabled:j,children:["label"===F&&/*#__PURE__*/r(s,f(p({isFixed:!!h},q),{ref:u})),"default"===F&&/*#__PURE__*/r(c,f(p({},q),{ref:u}))]})}),z&&/*#__PURE__*/r(i,{errorMessage:C,supportMessage:E,currentLength:k,maxLength:O})]})}));b.displayName="TextField";export{b as TextField};

package/dist/Components/Inputs/TextFieldContainer/TextFieldContainer.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{Typography as i}from"../../Base/Typography/Typography.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";const a=({children:a,className:n,leadingIcon:l,trailingIcon:d,isLeadingIconSolid:m,isTrailingIconSolid:c,measure:y,isFocused:p,isDisabled:g,isError:x,onClick:w,isTextarea:f,isAutoComplete:u,testId:h})=>/*#__PURE__*/e(o,{className:t("group flex w-full items-center gap-3 overflow-hidden rounded-xl border px-4 py-[11px]",g?"border-w-gray-200":x?"border-w-red-500":p?"border-primary":"border-w-gray-200 hover:border-primary",g?"bg-w-gray-10":"bg-w-white",g&&"cursor-not-allowed",f&&"relative p-0",u&&"flex-wrap",n),"data-testid":h||"design-system--text-field-container",onClick:w,children:[l&&/*#__PURE__*/r(s,{name:l,solid:m,className:t("shrink-0 text-w-gray-600",g&&"text-w-gray-300"),testId:"design-system--text-field-container-leading-icon"}),a,y&&/*#__PURE__*/r(i,{variant:"body1",className:t("w-fit shrink-0 text-w-gray-400",g&&"text-w-gray-300"),children:y}),d&&/*#__PURE__*/r(s,{name:d,solid:c,className:t("shrink-0 text-w-gray-600",g&&"text-w-gray-300"),testId:"design-system--text-field-container-trailing-icon"})]});export{a as TextFieldContainer};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";const o=({children:o,className:n,leadingIcon:l,trailingIcon:d,isLeadingIconSolid:m,isTrailingIconSolid:c,measure:y,isFocused:p,isDisabled:g,isError:x,onClick:w,isTextarea:f,isAutoComplete:u,testId:h})=>/*#__PURE__*/e(i,{className:t("group flex w-full items-center gap-3 overflow-hidden rounded-xl border px-4 py-[11px]",g?"border-w-gray-200":x?"border-w-red-500":p?"border-primary":"border-w-gray-200 hover:border-primary",g?"bg-w-gray-10":"bg-w-white",g&&"cursor-not-allowed",f&&"relative p-0",u&&"flex-wrap",n),"data-testid":h||"design-system--text-field-container",onClick:w,children:[l&&/*#__PURE__*/r(s,{name:l,solid:m,className:t("shrink-0 text-w-gray-600",g&&"text-w-gray-300"),testId:"design-system--text-field-container-leading-icon"}),o,y&&/*#__PURE__*/r(a,{variant:"body16",className:t("w-fit shrink-0 text-w-gray-400",g&&"text-w-gray-300"),children:y}),d&&/*#__PURE__*/r(s,{name:d,solid:c,className:t("shrink-0 text-w-gray-600",g&&"text-w-gray-300"),testId:"design-system--text-field-container-trailing-icon"})]});export{o as TextFieldContainer};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js

@@ -30,6 +30,6 @@
  *   supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
  * />
  * ```
- */const n=({selectedItem:n,items:a,onItemClick:d,placeholder:p,disabled:m,isError:c,errorMessage:u,supportMessage:x,className:f})=>{const{isListOpen:g,focusedIndex:I,ref:k,handleItemClick:h,toggleListOpen:v,handleKeyDown:w}=i({items:a,onItemClick:d,disabled:m}),y=!!x||!!u;/*#__PURE__*/
-return e("div",{"data-testid":"design-system--textFieldDropdown",ref:k,className:"relative flex w-full flex-col gap-2 outline-none",onKeyDown:w,tabIndex:0,children:[
-/*#__PURE__*/o(r,{placeholder:p,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:m,isListOpen:g,onClick:v,error:c,className:f}),y&&/*#__PURE__*/o(t,{errorMessage:u,supportMessage:x}),g&&/*#__PURE__*/o(s,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/o(l.Root,{children:a.map(((e,s)=>/*#__PURE__*/o(l.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>h(e),selected:e.key===(null==n?void 0:n.key),isFocused:s===I},e.key)))})})]})};export{n as TextFieldDropdown};
+ */const n=({selectedItem:n,items:a,onItemClick:d,placeholder:p,disabled:m,isError:c,errorMessage:u,supportMessage:x,className:f})=>{const{isListOpen:g,focusedIndex:I,ref:h,handleItemClick:k,toggleListOpen:v,handleKeyDown:w}=i({items:a,onItemClick:d,disabled:m}),y=!!x||!!u;/*#__PURE__*/
+return e("div",{"data-testid":"design-system--textFieldDropdown",ref:h,className:"outline-hidden relative flex w-full flex-col gap-2",onKeyDown:w,tabIndex:0,children:[
+/*#__PURE__*/o(r,{placeholder:p,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:m,isListOpen:g,onClick:v,error:c,className:f}),y&&/*#__PURE__*/o(t,{errorMessage:u,supportMessage:x}),g&&/*#__PURE__*/o(s,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/o(l.Root,{children:a.map(((e,s)=>/*#__PURE__*/o(l.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>k(e),selected:e.key===(null==n?void 0:n.key),isFocused:s===I},e.key)))})})]})};export{n as TextFieldDropdown};

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

@@ -1,3 +1,3 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"react";import{SystemIcon as a}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as o}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as r}from"../TextFieldContainer/TextFieldContainer.js";const i=({placeholder:i,value:m="",isListOpen:l,disabled:n=!1,error:c,onClick:d,className:y})=>/*#__PURE__*/t(r,{isDisabled:n,isFocused:l,isError:c,testId:"design-system--selectBox",onClick:d,className:y,children:[
-/*#__PURE__*/e(o,{"data-testid":"design-system--selectBox-text",variant:"body1",className:s(n&&m?"text-w-gray-300":n&&!m?"text-w-gray-200":m?"text-w-gray-600":"text-w-gray-300","w-full"),children:m||i}),
-/*#__PURE__*/e("div",{className:s("transition-transform duration-300",l&&"rotate-180"),children:/*#__PURE__*/e(a,{name:"medium_arrow_down",className:n?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});export{i as SelectBox};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as s}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as o}from"../TextFieldContainer/TextFieldContainer.js";const i=({placeholder:i,value:m="",isListOpen:l,disabled:n=!1,error:c,onClick:d,className:y})=>/*#__PURE__*/t(o,{isDisabled:n,isFocused:l,isError:c,testId:"design-system--selectBox",onClick:d,className:y,children:[
+/*#__PURE__*/e(a,{"data-testid":"design-system--selectBox-text",variant:"body16",className:s(n&&m?"text-w-gray-300":n&&!m?"text-w-gray-200":m?"text-w-gray-600":"text-w-gray-300","w-full"),children:m||i}),
+/*#__PURE__*/e("div",{className:s("transition-transform duration-300",l&&"rotate-180"),children:/*#__PURE__*/e(r,{name:"medium_arrow_down",className:n?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]});export{i as SelectBox};

package/dist/Components/Inputs/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n,twJoin as o}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as a}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.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 m(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){u(e,t,r[t])}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[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{useState as r}from"react";import{twMerge as n,twJoin as o}from"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as l}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(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){m(e,t,r[t])}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
 /**
  * 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
  *
@@ -41,7 +41,7 @@
  *   />
  * </div>
  * ```
- */(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const p=u=>{var{isError:p=!1,size:f="md",resize:d=!1,isLengthVisible:g=!1,supportText:x,errorText:y,maxLength:h,value:b,disabled:j,name:O,onChange:v,onBlur:w}=u,S=c(u,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[L,z]=r(!1),B=p||x||g;/*#__PURE__*/
-return e(l,{"data-testid":"design-system-textarea",className:n("flex w-full flex-col gap-2","full"===f?"h-full":"h-fit"),children:[
-/*#__PURE__*/e(i,{isDisabled:j,isError:p,isFocused:L,isTextarea:!0,className:o("full"===f&&"h-full"),children:[
-/*#__PURE__*/t("textarea",m({"data-testid":"design-system-textarea--textarea",className:n("w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal tracking-default text-w-gray-600 outline-none scrollbar-list placeholder:font-[inherit] placeholder:tracking-default placeholder:text-w-gray-300","sm"===f?"min-h-[118px]":"md"===f?"min-h-[238px]":"lg"===f?"min-h-[358px]":"full"===f?"min-h-full":void 0,d?"resize-y":"resize-none",j&&"resize-none"),name:O,value:b,disabled:j,onChange:v,maxLength:h,onFocus:e=>{z(!0)},onBlur:e=>{z(!1),w&&w(e)}},S)),d&&/*#__PURE__*/t(a,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),B&&/*#__PURE__*/t(s,{errorMessage:y,supportMessage:x,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h,isMaxLengthVisible:g})]})};export{p as Textarea};
+ */(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const p=m=>{var{isError:p=!1,size:f="md",resize:d=!1,isLengthVisible:g=!1,supportText:x,errorText:y,maxLength:h,value:b,disabled:j,name:O,onChange:v,onBlur:w}=m,S=c(m,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[D,z]=r(!1),B=p||x||g;/*#__PURE__*/
+return e(a,{"data-testid":"design-system-textarea",className:n("flex w-full flex-col gap-2","full"===f?"h-full":"h-fit"),children:[
+/*#__PURE__*/e(i,{isDisabled:j,isError:p,isFocused:D,isTextarea:!0,className:o("full"===f&&"h-full"),children:[
+/*#__PURE__*/t("textarea",u({"data-testid":"design-system-textarea--textarea",className:n("outline-hidden scrollbar-list tracking-default placeholder:tracking-default w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal text-w-gray-600 placeholder:font-[inherit] placeholder:text-w-gray-300","sm"===f?"min-h-[118px]":"md"===f?"min-h-[238px]":"lg"===f?"min-h-[358px]":"full"===f?"min-h-full":void 0,d?"resize-y":"resize-none",j&&"resize-none"),name:O,value:b,disabled:j,onChange:v,maxLength:h,onFocus:e=>{z(!0)},onBlur:e=>{z(!1),w&&w(e)}},S)),d&&/*#__PURE__*/t(l,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),B&&/*#__PURE__*/t(s,{errorMessage:y,supportMessage:x,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h})]})};export{p as Textarea};

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

@@ -13,6 +13,7 @@ export * from './Radio';
 export * from './RadioCard';
 export * from './RadioList';
 export * from './RadioGroup';
+export * from './RadioListItem';
 export * from './SearchField';
 export * from './SegmentedControl';
 export * from './Switch';
@@ -31,3 +32,4 @@ export * from './FilterList';
 export * from './Input';
 export * from './SupportTextContainer';
 export * from './TextFieldContainer';
+export * from './FileUploader';

package/dist/Components/Layouts/Card/Card.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { BoxProps } from '../../Base/Layouts/Box/Box';
+/**
+ * 카드 레이아웃 컴포넌트입니다.
+ *
+ * @component
+ *
+ * @description
+ * 그림자와 둥근 모서리를 가진 카드 컨테이너입니다.
+ * Header, Content, Footer 서브 컴포넌트를 조합하여 사용할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * <Card>
+ *   <Card.Header>
+ *     <Typography variant="title48">제목</Typography>
+ *   </Card.Header>
+ *   <Card.Content>
+ *     <Typography>내용</Typography>
+ *   </Card.Content>
+ *   <Card.Footer>
+ *     <Button>확인</Button>
+ *   </Card.Footer>
+ * </Card>
+
+ *
+ * // Content만 사용
+ * <Card>
+ *   <Card.Content>
+ *     <Typography>내용만</Typography>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ */
+declare const Card: {
+    ({ children, ...rest }: PropsWithChildren<ComponentPropsWithoutRef<"section">>): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, ...rest }: PropsWithChildren<ComponentPropsWithoutRef<"header">>) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, children, ...rest }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, ...rest }: PropsWithChildren<ComponentPropsWithoutRef<"footer">>) => import("react/jsx-runtime").JSX.Element;
+};
+export { Card };

package/dist/Components/Layouts/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/dist/Components/Layouts/Fieldset/Fieldset.d.ts

@@ -0,0 +1,38 @@
+import { ComponentProps } from 'react';
+interface FieldsetProps extends ComponentProps<'fieldset'> {
+    legend: string;
+    description?: string;
+    isRequired?: boolean;
+}
+/**
+ * Form 요소들을 그룹화하는 Fieldset 컴포넌트입니다.
+ * HTML `<fieldset>` 요소를 기반으로 접근성을 고려하여 구현되었습니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.legend - Fieldset의 제목 (필수)
+ * @param {string} [props.description] - Fieldset에 대한 부가 설명
+ * @param {boolean} [props.isRequired=false] - 필수 입력 여부 표시 (legend 옆에 * 표시)
+ * @param {React.ReactNode} props.children - Fieldset 내부에 들어갈 form 요소들
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ *
+ * @example
+ * // 기본 사용
+ * <Fieldset legend="개인정보">
+ *   <TextField label="이름" />
+ *   <TextField label="이메일" />
+ * </Fieldset>
+ *
+ * @example
+ * // 필수 표시 및 설명 추가
+ * <Fieldset
+ *   legend="필수 정보"
+ *   isRequired
+ *   description="아래 항목은 필수로 입력해야 합니다."
+ * >
+ *   <CheckboxListItem label="이용약관 동의" />
+ *   <CheckboxListItem label="개인정보 처리방침 동의" />
+ * </Fieldset>
+ */
+declare const Fieldset: ({ legend, description, isRequired, children, className, ...props }: FieldsetProps) => import("react/jsx-runtime").JSX.Element;
+export { Fieldset };

package/dist/Components/Layouts/Fieldset/index.d.ts

@@ -0,0 +1 @@
+export { Fieldset } from './Fieldset';

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

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './Fieldset';

package/dist/Components/Navigations/BoxTab/BoxTab.parts.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }),[t]),/*#__PURE__*/e(y.Provider,{value:{activeTab:i,currentActiveTab:t,handleTabClick:e=>{e!==i&&(null==n||n(e),a(e))}},children:r})},h=({children:r,className:t})=>{const c=n.toArray(r);/*#__PURE__*/
 return e(d,{className:s("relative block w-full",t),"data-testid":"design-system-boxTab--container",children:/*#__PURE__*/e(d,{children:/*#__PURE__*/e(d,{className:l("inline-flex w-full"),children:c.map(((r,t)=>{const n=/*#__PURE__*/i(r,{isFirst:0===t,isLast:t===c.length-1});/*#__PURE__*/
-return e(a,{children:n},t)}))})})})},g=({children:t,index:n,className:i,isFirst:a,isLast:c,disabled:o=!1,href:s})=>{const{handleTabClick:u,activeTab:f}=r(y),h=n===f,g={tabIndex:0,"data-testid":`design-system-boxTab--item-${n}`,className:l("group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10","relative","-ml-px",h&&"z-[1] border-primary bg-primary-10 hover:bg-primary-10",a&&"ml-0 rounded-l-xl",c&&"rounded-r-xl",i),onClick:()=>{!o&&u(n)}},O=/*#__PURE__*/e(d,{className:l("relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600",h&&"font-medium text-primary"),children:/*#__PURE__*/e(b,{variant:"body1",className:"relative",children:t})});return s?/*#__PURE__*/e("a",p(m({href:s},g),{children:O})):/*#__PURE__*/e(d,p(m({},g),{children:O}))},O=({children:t,index:n})=>{const{activeTab:i}=r(y);return i===n&&/*#__PURE__*/e(d,{"data-testid":"design-system-boxTab--content",children:t})};
+return e(a,{children:n},t)}))})})})},g=({children:t,index:n,className:i,isFirst:a,isLast:c,disabled:o=!1,href:s})=>{const{handleTabClick:u,activeTab:f}=r(y),h=n===f,g={tabIndex:0,"data-testid":`design-system-boxTab--item-${n}`,className:l("group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10","relative","-ml-px",h&&"z-[1] border-primary bg-primary-10 hover:bg-primary-10",a&&"ml-0 rounded-l-xl",c&&"rounded-r-xl",i),onClick:()=>{!o&&u(n)}},O=/*#__PURE__*/e(d,{className:l("relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600",h&&"font-medium text-primary"),children:/*#__PURE__*/e(b,{variant:"body16",className:"relative",children:t})});return s?/*#__PURE__*/e("a",p(m({href:s},g),{children:O})):/*#__PURE__*/e(d,p(m({},g),{children:O}))},O=({children:t,index:n})=>{const{activeTab:i}=r(y);return i===n&&/*#__PURE__*/e(d,{"data-testid":"design-system-boxTab--content",children:t})};
 /**
  * BoxTab의 최상위 컴포넌트입니다.
  * 탭의 상태를 관리하고 하위 컴포넌트에 Context를 제공합니다.

package/dist/Components/Navigations/Drawer/Drawer.d.ts

@@ -1,11 +1,5 @@
 import { PropsWithChildren } from 'react';
-export interface DrawerProps {
-    isOpen: boolean;
-    onClose: () => void;
-    direction?: 'left' | 'right' | 'top' | 'bottom';
-    size?: 'full' | 'half' | 'third' | 'quarter';
-    className?: string;
-}
+import { DrawerProps } from './Drawer.types';
 /**
  * 화면의 가장자리에서 슬라이딩되어 나타나는 서랍형 컴포넌트입니다.
  *
@@ -35,3 +29,4 @@ export interface DrawerProps {
  */
 declare const Drawer: ({ isOpen, onClose, direction, size, className, children, }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
 export { Drawer };
+export type { DrawerProps } from './Drawer.types';

package/dist/Components/Navigations/Drawer/Drawer.styles.d.ts

@@ -1,4 +1,4 @@
-import { DrawerProps } from './Drawer';
+import { DrawerProps } from './Drawer.types';
 export declare const sizeStyle: (size: DrawerProps["size"], direction: DrawerProps["direction"]) => string;
 export declare const directionStyle: {
     left: string;

package/dist/Components/Navigations/Drawer/Drawer.types.d.ts

@@ -0,0 +1,7 @@
+export interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'full' | 'half' | 'third' | 'quarter';
+    className?: string;
+}

package/dist/Components/Navigations/GNBList/GNBList.d.ts

@@ -1,56 +1,56 @@
 /**
  * GNB(Global Navigation Bar) 리스트 컴포넌트
+ *
+ * @description
+ * 드롭다운 형태의 GNB 메뉴 리스트를 제공합니다.
+ * - 사용자 정보 포함/미포함 두 가지 형태
+ *
  * @module GNBList
- * @property {Component} Root - GNB 리스트 컨테이너
- * @property {Component} UserInfo - 사용자 정보 컴포넌트
- * @property {Component} List - 메뉴 리스트 컴포넌트
- * @property {Component} SubList - 서브 메뉴 리스트 컴포넌트
- * @property {Component} Item - 메뉴 아이템 컴포넌트
+ * @property {Component} Root - 메뉴 컨테이너
+ * @property {Component} UserInfo - 사용자 정보 영역
+ * @property {Component} List - 메인 메뉴 그룹
+ * @property {Component} SubList - 서브 메뉴 그룹
+ * @property {Component} Item - 메뉴 아이템
  *
  * @example
  * // 기본 메뉴 리스트
- * <GNBList.Root type="main">
+ * <GNBList.Root>
  *   <GNBList.List>
- *     <GNBList.Item>메뉴 1</GNBList.Item>
- *     <GNBList.Item>메뉴 2</GNBList.Item>
+ *     <GNBList.Item href="/projects">프로젝트</GNBList.Item>
+ *     <GNBList.Item href="/request">의뢰하기</GNBList.Item>
+ *     <GNBList.Item href="/support" hasNew>고객센터</GNBList.Item>
  *   </GNBList.List>
+ *   <GNBList.SubList>
+ *     <GNBList.Item href="/settings">설정</GNBList.Item>
+ *   </GNBList.SubList>
  * </GNBList.Root>
  *
  * @example
- * // 사용자 정보가 포함된 메뉴 리스트
- * <GNBList.Root type="user">
+ * // 사용자 정보 포함 메뉴
+ * <GNBList.Root withUserInfo>
  *   <GNBList.UserInfo
- *     userId="사용자명"
- *     email="user@example.com"
+ *     username="홍길동"
+ *     email="hong@example.com"
  *     imgUrl="/profile.jpg"
+ *     onClick={() => handleProfileEdit()}
  *   >
- *     <Button>프로필 수정</Button>
+ *     <Button size="sm">프로필 수정</Button>
+ *     <Button size="sm" variant="outlined">내 프로젝트</Button>
  *   </GNBList.UserInfo>
  *   <GNBList.List>
- *     <GNBList.Item>계정 설정</GNBList.Item>
- *     <GNBList.Item>알림 설정</GNBList.Item>
+ *     <GNBList.Item href="/account">계정 설정</GNBList.Item>
+ *     <GNBList.Item href="/notifications" hasNew>알림</GNBList.Item>
  *   </GNBList.List>
  *   <GNBList.SubList>
- *     <GNBList.Item>로그아웃</GNBList.Item>
+ *     <GNBList.Item href="/logout">로그아웃</GNBList.Item>
  *   </GNBList.SubList>
  * </GNBList.Root>
- *
- * @example
- * // 선택 상태가 있는 메뉴 리스트
- * <GNBList.Root type="main">
- *   <GNBList.List>
- *     <GNBList.Item isSelected>현재 메뉴</GNBList.Item>
- *     <GNBList.Item onClick={() => handleNavigation('/other')}>
- *       다른 메뉴
- *     </GNBList.Item>
- *   </GNBList.List>
- * </GNBList.Root>
  */
 declare const GNBList: {
-    Root: ({ type, children, className }: import("./GNBList.types").GNBListRootProps) => import("react/jsx-runtime").JSX.Element;
-    UserInfo: ({ imgUrl, userId, email, children, onClick, }: import("./GNBList.types").UserInfoProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ withUserInfo, children, className, }: import("./GNBList.types").GNBListRootProps) => import("react/jsx-runtime").JSX.Element;
+    UserInfo: ({ imgUrl, username, email, children, onClick, }: import("./GNBList.types").UserInfoProps) => import("react/jsx-runtime").JSX.Element;
     List: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
     SubList: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ hasNew, children, className, textClassName, ...rest }: import("./GNBList.types").GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ hasNew, children, className, textClassName, href, ...rest }: import("./GNBList.types").GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { GNBList };

package/dist/Components/Navigations/GNBList/GNBList.js

@@ -1,49 +1,49 @@
 "use client";import{Item as t,SubList as s,List as o,UserInfo as e,Root as i}from"./GNBList.parts.js";
 /**
  * GNB(Global Navigation Bar) 리스트 컴포넌트
+ *
+ * @description
+ * 드롭다운 형태의 GNB 메뉴 리스트를 제공합니다.
+ * - 사용자 정보 포함/미포함 두 가지 형태
+ *
  * @module GNBList
- * @property {Component} Root - GNB 리스트 컨테이너
- * @property {Component} UserInfo - 사용자 정보 컴포넌트
- * @property {Component} List - 메뉴 리스트 컴포넌트
- * @property {Component} SubList - 서브 메뉴 리스트 컴포넌트
- * @property {Component} Item - 메뉴 아이템 컴포넌트
+ * @property {Component} Root - 메뉴 컨테이너
+ * @property {Component} UserInfo - 사용자 정보 영역
+ * @property {Component} List - 메인 메뉴 그룹
+ * @property {Component} SubList - 서브 메뉴 그룹
+ * @property {Component} Item - 메뉴 아이템
  *
  * @example
  * // 기본 메뉴 리스트
- * <GNBList.Root type="main">
+ * <GNBList.Root>
  *   <GNBList.List>
- *     <GNBList.Item>메뉴 1</GNBList.Item>
- *     <GNBList.Item>메뉴 2</GNBList.Item>
+ *     <GNBList.Item href="/projects">프로젝트</GNBList.Item>
+ *     <GNBList.Item href="/request">의뢰하기</GNBList.Item>
+ *     <GNBList.Item href="/support" hasNew>고객센터</GNBList.Item>
  *   </GNBList.List>
+ *   <GNBList.SubList>
+ *     <GNBList.Item href="/settings">설정</GNBList.Item>
+ *   </GNBList.SubList>
  * </GNBList.Root>
  *
  * @example
- * // 사용자 정보가 포함된 메뉴 리스트
- * <GNBList.Root type="user">
+ * // 사용자 정보 포함 메뉴
+ * <GNBList.Root withUserInfo>
  *   <GNBList.UserInfo
- *     userId="사용자명"
- *     email="user@example.com"
+ *     username="홍길동"
+ *     email="hong@example.com"
  *     imgUrl="/profile.jpg"
+ *     onClick={() => handleProfileEdit()}
  *   >
- *     <Button>프로필 수정</Button>
+ *     <Button size="sm">프로필 수정</Button>
+ *     <Button size="sm" variant="outlined">내 프로젝트</Button>
  *   </GNBList.UserInfo>
  *   <GNBList.List>
- *     <GNBList.Item>계정 설정</GNBList.Item>
- *     <GNBList.Item>알림 설정</GNBList.Item>
+ *     <GNBList.Item href="/account">계정 설정</GNBList.Item>
+ *     <GNBList.Item href="/notifications" hasNew>알림</GNBList.Item>
  *   </GNBList.List>
  *   <GNBList.SubList>
- *     <GNBList.Item>로그아웃</GNBList.Item>
+ *     <GNBList.Item href="/logout">로그아웃</GNBList.Item>
  *   </GNBList.SubList>
  * </GNBList.Root>
- *
- * @example
- * // 선택 상태가 있는 메뉴 리스트
- * <GNBList.Root type="main">
- *   <GNBList.List>
- *     <GNBList.Item isSelected>현재 메뉴</GNBList.Item>
- *     <GNBList.Item onClick={() => handleNavigation('/other')}>
- *       다른 메뉴
- *     </GNBList.Item>
- *   </GNBList.List>
- * </GNBList.Root>
  */const r={Root:i,UserInfo:e,List:o,SubList:s,Item:t};export{r as GNBList};