@wishket/design-system 1.17.3 → 1.17.4

package/dist/Components/DataDisplays/SystemIcon/Icons/Social/WishketNaverBlog.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SystemIconPartProps } from '../../SystemIcon.types';
+import { SystemIconPartProps } from '../../SystemIcon.part.types';
 declare const WishketNaverBlog: React.FC<SystemIconPartProps>;
 export { WishketNaverBlog };

package/dist/Components/DataDisplays/SystemIcon/SystemIcon.constants.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
-import { SystemIconPartProps } from './SystemIcon.types';
+import { SystemIconPartProps } from './SystemIcon.part.types';
 export declare const SmallSystemIconNames: readonly ["small_check", "small_plus", "small_delete", "small_arrow_left", "small_arrow_right", "small_arrow_down", "small_arrow_up", "small_indeterminate", "small_radio_dot", "small_resizer", "small_information", "small_wait", "small_camera", "small_edit", "small_scrap", "small_private", "small_public", "small_heart", "small_star", "small_more_options", "small_eye", "small_trash", "small_share", "small_link", "small_list", "small_collection", "small_like", "small_bell", "small_play", "small_stop", "small_slash", "small_cat"];
+export type SmallSystemIconName = (typeof SmallSystemIconNames)[number];
 export declare const MediumSystemIconNames: readonly ["medium_check", "medium_plus", "medium_delete", "medium_arrow_left", "medium_arrow_right", "medium_arrow_down", "medium_arrow_up", "medium_information", "medium_success", "medium_wait", "medium_caution", "medium_error", "medium_minus", "medium_eye", "medium_eye_slash", "medium_person_add", "medium_edit", "medium_caution_triangle", "medium_bubble", "medium_calendar", "medium_filter", "medium_reset", "medium_menu_down", "medium_menu_up", "medium_heart", "medium_star", "medium_highlight", "medium_more_options", "medium_rename", "medium_pin", "medium_trash", "medium_hashtag", "medium_magic", "medium_share", "medium_ai", "medium_glasses_minus", "medium_glasses_plus", "medium_upload", "medium_send", "medium_popular", "medium_scrap", "medium_link", "medium_search", "medium_question", "medium_answer", "medium_question_new", "medium_list", "medium_collection", "medium_fire", "medium_compass", "medium_public", "medium_private", "medium_bell", "medium_reply", "medium_clip"];
+export type MediumSystemIconName = (typeof MediumSystemIconNames)[number];
 export declare const LargeSystemIconNames: readonly ["large_user_image_avatar", "large_arrow_left", "large_arrow_right", "large_arrow_down", "large_arrow_up", "large_service", "large_account_setting", "large_bell", "large_search", "large_drawer", "large_delete", "large_plus", "large_filter", "large_heart", "large_star", "large_share", "large_send", "large_reset", "large_collection", "large_collection_add", "large_question", "large_answer", "large_scrap", "large_like", "large_bubble", "large_link", "large_home", "large_top"];
+export type LargeSystemIconName = (typeof LargeSystemIconNames)[number];
 export declare const SocialSystemIconNames: readonly ["social_google", "social_facebook", "social_x", "social_naver", "social_linked_in", "wishket_facebook", "wishket_blog", "wishket_naver_blog"];
+export type SocialSystemIconName = (typeof SocialSystemIconNames)[number];
+export type SystemIconName = SmallSystemIconName | MediumSystemIconName | LargeSystemIconName | SocialSystemIconName;
 export declare const SystemIconNames: readonly ["small_check", "small_plus", "small_delete", "small_arrow_left", "small_arrow_right", "small_arrow_down", "small_arrow_up", "small_indeterminate", "small_radio_dot", "small_resizer", "small_information", "small_wait", "small_camera", "small_edit", "small_scrap", "small_private", "small_public", "small_heart", "small_star", "small_more_options", "small_eye", "small_trash", "small_share", "small_link", "small_list", "small_collection", "small_like", "small_bell", "small_play", "small_stop", "small_slash", "small_cat", "medium_check", "medium_plus", "medium_delete", "medium_arrow_left", "medium_arrow_right", "medium_arrow_down", "medium_arrow_up", "medium_information", "medium_success", "medium_wait", "medium_caution", "medium_error", "medium_minus", "medium_eye", "medium_eye_slash", "medium_person_add", "medium_edit", "medium_caution_triangle", "medium_bubble", "medium_calendar", "medium_filter", "medium_reset", "medium_menu_down", "medium_menu_up", "medium_heart", "medium_star", "medium_highlight", "medium_more_options", "medium_rename", "medium_pin", "medium_trash", "medium_hashtag", "medium_magic", "medium_share", "medium_ai", "medium_glasses_minus", "medium_glasses_plus", "medium_upload", "medium_send", "medium_popular", "medium_scrap", "medium_link", "medium_search", "medium_question", "medium_answer", "medium_question_new", "medium_list", "medium_collection", "medium_fire", "medium_compass", "medium_public", "medium_private", "medium_bell", "medium_reply", "medium_clip", "large_user_image_avatar", "large_arrow_left", "large_arrow_right", "large_arrow_down", "large_arrow_up", "large_service", "large_account_setting", "large_bell", "large_search", "large_drawer", "large_delete", "large_plus", "large_filter", "large_heart", "large_star", "large_share", "large_send", "large_reset", "large_collection", "large_collection_add", "large_question", "large_answer", "large_scrap", "large_like", "large_bubble", "large_link", "large_home", "large_top", "social_google", "social_facebook", "social_x", "social_naver", "social_linked_in", "wishket_facebook", "wishket_blog", "wishket_naver_blog"];
 export declare const smallIcons: Map<"small_check" | "small_plus" | "small_delete" | "small_arrow_left" | "small_arrow_right" | "small_arrow_down" | "small_arrow_up" | "small_indeterminate" | "small_radio_dot" | "small_resizer" | "small_information" | "small_wait" | "small_camera" | "small_edit" | "small_scrap" | "small_private" | "small_public" | "small_heart" | "small_star" | "small_more_options" | "small_eye" | "small_trash" | "small_share" | "small_link" | "small_list" | "small_collection" | "small_like" | "small_bell" | "small_play" | "small_stop" | "small_slash" | "small_cat", (props: SystemIconPartProps) => React.JSX.Element>;
 export declare const mediumIcons: Map<"medium_trash" | "medium_check" | "medium_plus" | "medium_delete" | "medium_arrow_left" | "medium_arrow_right" | "medium_arrow_down" | "medium_arrow_up" | "medium_information" | "medium_success" | "medium_wait" | "medium_caution" | "medium_error" | "medium_minus" | "medium_eye" | "medium_eye_slash" | "medium_person_add" | "medium_edit" | "medium_caution_triangle" | "medium_bubble" | "medium_calendar" | "medium_filter" | "medium_reset" | "medium_menu_down" | "medium_menu_up" | "medium_heart" | "medium_star" | "medium_highlight" | "medium_more_options" | "medium_rename" | "medium_pin" | "medium_hashtag" | "medium_magic" | "medium_share" | "medium_ai" | "medium_glasses_minus" | "medium_glasses_plus" | "medium_upload" | "medium_send" | "medium_popular" | "medium_scrap" | "medium_link" | "medium_search" | "medium_question" | "medium_answer" | "medium_question_new" | "medium_list" | "medium_collection" | "medium_fire" | "medium_compass" | "medium_public" | "medium_private" | "medium_bell" | "medium_reply" | "medium_clip", (props: SystemIconPartProps) => React.JSX.Element>;

package/dist/Components/DataDisplays/SystemIcon/SystemIcon.part.types.d.ts

@@ -0,0 +1,6 @@
+export interface SystemIconPartProps {
+    testId?: string;
+    className?: string;
+    solid?: boolean;
+    onClick?: () => void;
+}

package/dist/Components/DataDisplays/SystemIcon/SystemIcon.types.d.ts

@@ -1,15 +1,7 @@
-import { LargeSystemIconNames, MediumSystemIconNames, SmallSystemIconNames, SocialSystemIconNames } from './SystemIcon.constants';
-export type SmallSystemIconName = (typeof SmallSystemIconNames)[number];
-export type MediumSystemIconName = (typeof MediumSystemIconNames)[number];
-export type LargeSystemIconName = (typeof LargeSystemIconNames)[number];
-export type SocialSystemIconName = (typeof SocialSystemIconNames)[number];
-export type SystemIconName = SmallSystemIconName | MediumSystemIconName | LargeSystemIconName | SocialSystemIconName;
+import { SystemIconPartProps } from './SystemIcon.part.types';
+import type { SystemIconName } from './SystemIcon.constants';
+export type { LargeSystemIconName, MediumSystemIconName, SmallSystemIconName, SocialSystemIconName, SystemIconName, } from './SystemIcon.constants';
 export interface SystemIconProps extends SystemIconPartProps {
     name: SystemIconName;
 }
-export interface SystemIconPartProps {
-    testId?: string;
-    className?: string;
-    solid?: boolean;
-    onClick?: () => void;
-}
+export type { SystemIconPartProps } from './SystemIcon.part.types';

package/dist/Components/Feedbacks/DialogBox/DialogBox.js

@@ -1,6 +1,6 @@
 "use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Button as l}from"../../Inputs/Button/Button.js";const i=({title:i,description:s,variant:n="primary",onClose:c,onConfirm:m,confirm:d,close:g="닫기",testId:p})=>{const u="caution"===n;/*#__PURE__*/
 return e(t,{className:"flex h-fit flex-col items-center gap-8 rounded-3xl bg-w-white p-8 font-normal not-italic shadow-modal tablet:w-[400px]","data-testid":p||"design-system--dialog-box",children:[
 /*#__PURE__*/e(t,{className:"flex w-full flex-col gap-6",children:[
-/*#__PURE__*/r(a,{variant:"subTitle2",className:"font-medium text-w-gray-900",children:i}),
-/*#__PURE__*/r(a,{variant:"body1",className:"whitespace-break-spaces text-w-gray-800",children:s})]}),
+/*#__PURE__*/r(a,{variant:"subTitle18",className:"font-medium text-w-gray-900",children:i}),
+/*#__PURE__*/r(a,{variant:"body16",className:"whitespace-break-spaces text-w-gray-800",children:s})]}),
 /*#__PURE__*/e(t,{className:"flex w-full items-center justify-end gap-4",children:[g&&/*#__PURE__*/r(l,{role:"close",onClick:c,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:g}),d&&/*#__PURE__*/r(l,{role:"confirm",onClick:m,variant:"solid",className:o(u&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-600 hover:bg-w-orange-600"),children:d})]})]})};export{i as DialogBox};

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

@@ -1,6 +1,5 @@
-import { LoadingIndicatorProps } from '../LoadingIndicator/LoadingIndicator.types';
-export interface GlobalLoadingIndicatorProps extends LoadingIndicatorProps {
-}
+import type { LoadingIndicatorProps } from '../LoadingIndicator/LoadingIndicator.types';
+export type GlobalLoadingIndicatorProps = LoadingIndicatorProps;
 export declare class LoadingManager {
     private static instance;
     loaderIds: string[];
@@ -17,10 +16,11 @@ export declare class LoadingManager {
  *
  * @component
  * @param {GlobalLoadingIndicatorProps} props
- * @param {string} [props.size='md'] - 로딩 인디케이터의 크기. 'sm' | 'md' | 'lg' 중 선택
- * @param {string} [props.color='primary'] - 로딩 인디케이터의 색상. 'primary' | 'secondary' | 'white' 등 theme에 정의된 색상
+ * @param {('primary'|'white'|'gray')} [props.variant='primary'] - 로딩 인디케이터의 색상 변형
+ * @param {('sm'|'md'|'lg')} [props.size='md'] - 로딩 인디케이터의 크기
+ * @param {string} [props.ariaLabel='로딩 중'] - 스크린 리더를 위한 로딩 상태 설명
  * @param {string} [props.className] - 추가적인 CSS 클래스명
- * @param {string} [props.testId] - 테스트를 위한 ID
+ * @param {boolean} [props.isFixed] - ⚠️ GlobalLoadingIndicator는 항상 fixed position이므로 이 prop은 무시됩니다
  *
  * @example
  * // 기본 사용법
@@ -29,11 +29,19 @@ export declare class LoadingManager {
  * // 크기 지정
  * <GlobalLoadingIndicator size="lg" />
  *
- * // 색상 지정
- * <GlobalLoadingIndicator color="blue" />
+ * // 색상 변형
+ * <GlobalLoadingIndicator variant="white" />
+ *
+ * // 커스텀 라벨
+ * <GlobalLoadingIndicator ariaLabel="페이지 로딩 중" />
  *
- * // 클래스명 추가
- * <GlobalLoadingIndicator className="custom-class" />
+ * @accessibility
+ * LoadingIndicator 컴포넌트의 접근성 기능을 상속받습니다:
+ * - role="status": 로딩 상태를 나타내는 상태 영역
+ * - aria-live="polite": 로딩 상태 변경을 스크린 리더에 알림
+ * - aria-label: 스크린 리더 사용자에게 로딩 상태 설명
+ * - aria-busy="true": 콘텐츠가 로딩 중임을 명시
+ * - SVG는 aria-hidden으로 장식용 요소로 표시
  */
 declare const GlobalLoadingIndicator: (props: GlobalLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
 export { GlobalLoadingIndicator };

package/dist/Components/Feedbacks/GlobalLoadingIndicator/GlobalLoadingIndicator.js

@@ -6,10 +6,11 @@
  *
  * @component
  * @param {GlobalLoadingIndicatorProps} props
- * @param {string} [props.size='md'] - 로딩 인디케이터의 크기. 'sm' | 'md' | 'lg' 중 선택
- * @param {string} [props.color='primary'] - 로딩 인디케이터의 색상. 'primary' | 'secondary' | 'white' 등 theme에 정의된 색상
+ * @param {('primary'|'white'|'gray')} [props.variant='primary'] - 로딩 인디케이터의 색상 변형
+ * @param {('sm'|'md'|'lg')} [props.size='md'] - 로딩 인디케이터의 크기
+ * @param {string} [props.ariaLabel='로딩 중'] - 스크린 리더를 위한 로딩 상태 설명
  * @param {string} [props.className] - 추가적인 CSS 클래스명
- * @param {string} [props.testId] - 테스트를 위한 ID
+ * @param {boolean} [props.isFixed] - ⚠️ GlobalLoadingIndicator는 항상 fixed position이므로 이 prop은 무시됩니다
  *
  * @example
  * // 기본 사용법
@@ -18,10 +19,18 @@
  * // 크기 지정
  * <GlobalLoadingIndicator size="lg" />
  *
- * // 색상 지정
- * <GlobalLoadingIndicator color="blue" />
+ * // 색상 변형
+ * <GlobalLoadingIndicator variant="white" />
  *
- * // 클래스명 추가
- * <GlobalLoadingIndicator className="custom-class" />
+ * // 커스텀 라벨
+ * <GlobalLoadingIndicator ariaLabel="페이지 로딩 중" />
+ *
+ * @accessibility
+ * LoadingIndicator 컴포넌트의 접근성 기능을 상속받습니다:
+ * - role="status": 로딩 상태를 나타내는 상태 영역
+ * - aria-live="polite": 로딩 상태 변경을 스크린 리더에 알림
+ * - aria-label: 스크린 리더 사용자에게 로딩 상태 설명
+ * - aria-busy="true": 콘텐츠가 로딩 중임을 명시
+ * - SVG는 aria-hidden으로 장식용 요소로 표시
  */
 const d=i=>{const d=l.getInstance(),c=t(),[u,g]=r([]);n((()=>(d.register(c),g(d.loaderIds),()=>{d.unregister(c),g(d.loaderIds)})),[c]);return u.indexOf(c)===u.length-1?/*#__PURE__*/e(s,{children:/*#__PURE__*/e("div",{"data-testid":"design-system-globalLoadingIndicator",className:"fixed left-1/2 top-1/2 z-30 aspect-square -translate-x-1/2 -translate-y-1/2",children:/*#__PURE__*/e(o,a({},i))})}):null};export{d as GlobalLoadingIndicator,l as LoadingManager};

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

@@ -1,23 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { LoadingIndicatorProps } from './LoadingIndicator.types';
-/**
- * 로딩 상태를 표시하는 애니메이션 인디케이터 컴포넌트입니다.
- * 세 개의 점이 순차적으로 페이드 인/아웃되는 애니메이션을 보여줍니다.
- *
- * @param {Object} props - 컴포넌트 프로퍼티
- * @param {boolean} [props.isFixed=false] - true일 경우 position: fixed, false일 경우 position: absolute로 설정됩니다.
- * @param {('sm'|'md'|'lg')} [props.size='md'] - 로딩 인디케이터의 크기를 설정합니다.
- * @param {string} [props.className] - 추가적인 CSS 클래스를 적용할 수 있습니다.
- *
- * @example
- * // 기본 사용
- * <LoadingIndicator />
- *
- * // 고정 위치에 큰 크기로 표시
- * <LoadingIndicator isFixed size="lg" />
- *
- * // 커스텀 클래스 적용
- * <LoadingIndicator className="text-blue-500" />
- */
-declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+declare const LoadingIndicator: FC<LoadingIndicatorProps>;
 export { LoadingIndicator };

package/dist/Components/Feedbacks/LoadingIndicator/LoadingIndicator.js

@@ -1,11 +1,13 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as i}from"tailwind-merge";import{Box as r}from"../../Base/Layouts/Box/Box.js";import{SIZES as a,generateBoxSize as o}from"./LoadingIndicator.parts.js";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{twMerge as i}from"tailwind-merge";import{Box as r}from"../../Base/Layouts/Box/Box.js";import{SIZES as a,generateBoxSize as l}from"./LoadingIndicator.parts.js";
 /**
  * 로딩 상태를 표시하는 애니메이션 인디케이터 컴포넌트입니다.
  * 세 개의 점이 순차적으로 페이드 인/아웃되는 애니메이션을 보여줍니다.
  *
  * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {('primary'|'white'|'gray')} [props.variant='primary'] - 로딩 인디케이터의 색상 변형
  * @param {boolean} [props.isFixed=false] - true일 경우 position: fixed, false일 경우 position: absolute로 설정됩니다.
  * @param {('sm'|'md'|'lg')} [props.size='md'] - 로딩 인디케이터의 크기를 설정합니다.
+ * @param {string} [props.ariaLabel='로딩 중'] - 스크린 리더를 위한 로딩 상태 설명
  * @param {string} [props.className] - 추가적인 CSS 클래스를 적용할 수 있습니다.
  *
  * @example
@@ -17,8 +19,9 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge a
  *
  * // 커스텀 클래스 적용
  * <LoadingIndicator className="text-blue-500" />
- */const n=({isFixed:n=!1,size:c="md",className:l})=>{const{width:s,height:d,viewBox:m,circle:u,r:p}=a[c];/*#__PURE__*/
-return e(r,{role:"loading-indicator",className:i("left-1/2 top-1/2 aspect-square -translate-x-1/2 -translate-y-1/2",n?"fixed":"absolute",o(c)),children:/*#__PURE__*/t("svg",{xmlns:"http://www.w3.org/2000/svg",role:"loading-indicator--dots",width:s,height:d,viewBox:m,fill:"none",className:i("text-primary",l),children:[
-/*#__PURE__*/e("circle",{cx:u[0],cy:u[1],r:p,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0s"})}),
-/*#__PURE__*/e("circle",{cx:u[1],cy:u[1],r:p,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0.3s"})}),
-/*#__PURE__*/e("circle",{cx:u[2],cy:u[1],r:p,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0.6s"})})]})})};export{n as LoadingIndicator};
+ *
+ */const n={primary:"text-primary",white:"text-w-white",gray:"text-w-gray-400"},o=({variant:o="primary",isFixed:s=!1,size:c="md",ariaLabel:d="로딩 중",className:m})=>{const{width:u,height:p,viewBox:x,circle:h,r:g}=a[c],y=n[o];/*#__PURE__*/
+return e(r,{role:"status","aria-live":"polite","aria-label":d,"aria-busy":"true",className:i("left-1/2 top-1/2 aspect-square -translate-x-1/2 -translate-y-1/2",s?"fixed":"absolute",l(c)),children:/*#__PURE__*/t("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true","data-testid":"loading-indicator-svg",width:u,height:p,viewBox:x,fill:"none",className:i(y,m),children:[
+/*#__PURE__*/e("circle",{cx:h[0],cy:h[1],r:g,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0s"})}),
+/*#__PURE__*/e("circle",{cx:h[1],cy:h[1],r:g,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0.3s"})}),
+/*#__PURE__*/e("circle",{cx:h[2],cy:h[1],r:g,fill:"currentColor",children:/*#__PURE__*/e("animate",{attributeName:"opacity",values:"1; 1; 0.5; 0.25; 0.25;",dur:"0.9s",repeatCount:"indefinite",begin:"0.6s"})})]})})};export{o as LoadingIndicator};

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

@@ -1,7 +1,9 @@
 export type LoadingIndicatorSize = 'sm' | 'md' | 'lg';
 export interface LoadingIndicatorProps {
+    variant?: 'primary' | 'white' | 'gray';
     isFixed?: boolean;
     size?: LoadingIndicatorSize;
+    ariaLabel?: string;
     className?: string;
 }
 export type LoadingIndicatorSizeVariantType = {

package/dist/Components/Feedbacks/MessageBar/MessageBar.js

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twMerge as s}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}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{Button as o}from"../../Inputs/Button/Button.js";
+import{jsxs as t,jsx as a}from"react/jsx-runtime";import{twMerge as e}from"tailwind-merge";import{Typography as s}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Button as o}from"../../Inputs/Button/Button.js";
 /**
  * 사용자에게 정보를 표시하는 메시지 바 컴포넌트입니다.
  *
@@ -40,7 +40,7 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twMerge as s}from"tailw
  *   buttonName="비밀번호 변경"
  *   onClick={() => handlePasswordChange()}
  * />
- */const m=({variant:m="primary",icon:n,title:d,text:l,buttonName:c,onClick:p})=>/*#__PURE__*/t(r,{"data-testid":"design-system-message-bar",className:s("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===m&&"border-primary-100 bg-primary-10","white"===m&&"border-w-gray-200 bg-white"),children:[
-/*#__PURE__*/e(r,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:/*#__PURE__*/e(i,{name:n,size:"medium"})}),
-/*#__PURE__*/t(r,{className:"flex w-full flex-col gap-1",children:[d&&/*#__PURE__*/e(a,{variant:"subTitle2",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:d}),
-/*#__PURE__*/e(a,{variant:"body1",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:l})]}),c&&p&&/*#__PURE__*/e(o,{variant:"outlined",size:"sm",className:"shrink-0",onClick:p,"data-testid":"design-system-message-bar--button",children:c})]});export{m as MessageBar};
+ */const m=({variant:m="primary",icon:n,title:l,text:d,buttonName:c,onClick:p})=>/*#__PURE__*/t(r,{"data-testid":"design-system-message-bar",className:e("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===m&&"border-primary-100 bg-primary-10","white"===m&&"border-w-gray-200 bg-white"),children:[
+/*#__PURE__*/a(r,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:/*#__PURE__*/a(i,{name:n,size:"medium"})}),
+/*#__PURE__*/t(r,{className:"flex w-full flex-col gap-1",children:[l&&/*#__PURE__*/a(s,{variant:"subTitle18",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:l}),
+/*#__PURE__*/a(s,{variant:"body16",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:d})]}),c&&p&&/*#__PURE__*/a(o,{variant:"outlined",size:"36",className:"shrink-0",onClick:p,"data-testid":"design-system-message-bar--button",children:c})]});export{m as MessageBar};

package/dist/Components/Feedbacks/MessageBox/MessageBox.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as s,Fragment as t}from"react/jsx-runtime";import"tailwind-merge";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";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{ProductIcon as o}from"../../DataDisplays/ProductIcon/ProductIcon.js";import{Divider as r}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{ExternalLinks as l}from"./MessageBox.parts.js";
+import{jsxs as e,jsx as s,Fragment as a}from"react/jsx-runtime";import"../../DataDisplays/Avatar/Avatar.js";import"tailwind-merge";import{Typography as t}from"../../Base/Typography/Typography.js";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as r}from"../../DataDisplays/ProductIcon/ProductIcon.js";import{Divider as o}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";import{ExternalLinks as l}from"./MessageBox.parts.js";
 /**
  * 아이콘, 제목, 설명, 외부 링크 등을 포함할 수 있는 메시지 박스 컴포넌트입니다.
  *
@@ -33,9 +33,9 @@ import{jsxs as e,jsx as s,Fragment as t}from"react/jsx-runtime";import"tailwind-
  * >
  *   <CustomContent />
  * </MessageBox>
- */const n=({icon:n,title:m,description:c,children:d,links:p})=>/*#__PURE__*/e(i,{className:"box-border flex h-auto flex-col rounded-3xl border border-w-gray-200","data-testid":"design-system-message-box--container",children:[
-/*#__PURE__*/e(i,{className:"flex h-auto flex-col gap-4 p-6",children:[n&&/*#__PURE__*/s(i,{className:"size-10 flex-shrink-0",children:/*#__PURE__*/s(o,{name:n,size:"medium"})}),
+ */const m=({icon:m,title:n,description:c,children:d,links:p})=>/*#__PURE__*/e(i,{className:"box-border flex h-auto flex-col rounded-3xl border border-w-gray-200","data-testid":"design-system-message-box--container",children:[
+/*#__PURE__*/e(i,{className:"flex h-auto flex-col gap-4 p-6",children:[m&&/*#__PURE__*/s(i,{className:"size-10 shrink-0",children:/*#__PURE__*/s(r,{name:m,size:"medium"})}),
 /*#__PURE__*/e(i,{className:"flex h-auto flex-col gap-1.5",children:[
-/*#__PURE__*/s(a,{variant:"subTitle2",className:"whitespace-pre-line font-medium text-w-gray-900","data-testid":"design-system-message-box--title",children:m}),c&&/*#__PURE__*/s(a,{variant:"body1",className:"whitespace-pre-line font-normal text-w-gray-600","data-testid":"design-system-message-box--description",children:c}),d]})]}),p&&p.length>0&&/*#__PURE__*/e(t,{children:[
-/*#__PURE__*/s(r,{}),
-/*#__PURE__*/s(l,{links:p})]})]});export{n as MessageBox};
+/*#__PURE__*/s(t,{variant:"subTitle18",className:"whitespace-pre-line font-medium text-w-gray-900","data-testid":"design-system-message-box--title",children:n}),c&&/*#__PURE__*/s(t,{variant:"body16",className:"whitespace-pre-line font-normal text-w-gray-600","data-testid":"design-system-message-box--description",children:c}),d]})]}),p&&p.length>0&&/*#__PURE__*/e(a,{children:[
+/*#__PURE__*/s(o,{}),
+/*#__PURE__*/s(l,{links:p})]})]});export{m as MessageBox};

package/dist/Components/Feedbacks/MessageBox/MessageBox.parts.js

@@ -1,3 +1,3 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"tailwind-merge";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";const o=({links:o})=>/*#__PURE__*/e(r,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-message-box--external-links-container",children:null==o?void 0:o.map(((r,o)=>/*#__PURE__*/t("a",{target:r.target||"_blank",href:r.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":`design-system-message-box--external-links-item-${o}`,children:[
-/*#__PURE__*/e(a,{variant:"body1",className:"hover:underline hover:underline-offset-2",children:r.title}),
-/*#__PURE__*/e(s,{name:"small_arrow_right"})]},`${r.title}-${r.url}`)))});export{o as ExternalLinks};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import"../../DataDisplays/Avatar/Avatar.js";import"tailwind-merge";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"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";const o=({links:o})=>/*#__PURE__*/e(s,{className:"flex h-auto w-full flex-col gap-3 p-6","data-testid":"design-system-message-box--external-links-container",children:null==o?void 0:o.map(((s,o)=>/*#__PURE__*/t("a",{target:s.target||"_blank",href:s.url,className:"flex items-center justify-between text-w-gray-600 no-underline","data-testid":`design-system-message-box--external-links-item-${o}`,children:[
+/*#__PURE__*/e(a,{variant:"body16",className:"hover:underline hover:underline-offset-2",children:s.title}),
+/*#__PURE__*/e(r,{name:"small_arrow_right"})]},`${s.title}-${s.url}`)))});export{o as ExternalLinks};

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

@@ -1,3 +1,3 @@
 import { SnackBarProps } from './SnackBar.types';
-declare const SnackBar: ({ message, type, onClose }: SnackBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const SnackBar: ({ message, type, onClose, className }: SnackBarProps) => import("react/jsx-runtime").JSX.Element;
 export { SnackBar };

package/dist/Components/Feedbacks/SnackBar/SnackBar.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import"react";import{SystemIcon as r}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Accordion/Accordion.js";import{messageType as o}from"./SnackBar.types.js";
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as r}from"../../Base/Typography/Typography.js";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as o}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";
 /**
  * 사용자에게 상태 메시지를 표시하는 스낵바 컴포넌트
  *
@@ -21,13 +21,7 @@ import{jsxs as e,jsx as s}from"react/jsx-runtime";import{twMerge as t}from"tailw
  *   type="caution"
  *   onClose={() => console.log('스낵바 닫힘')}
  * />
- */const i=({type:e})=>{switch(e){case o.Information:/*#__PURE__*/
-return s(r,{name:"medium_information",className:"text-success",testId:"design-system-message-bar--information-icon"});case o.Success:/*#__PURE__*/
-return s(r,{name:"medium_success",className:"text-success",testId:"design-system-message-bar--success-icon"});case o.Progress:/*#__PURE__*/
-return s(r,{name:"medium_success",className:"text-progress",testId:"design-system-message-bar--progress-icon"});case o.Waiting:/*#__PURE__*/
-return s(r,{name:"medium_wait",className:"text-waiting",testId:"design-system-message-bar--waiting-icon"});case o.Caution:/*#__PURE__*/
-return s(r,{name:"medium_caution",className:"text-caution",testId:"design-system-message-bar--caution-icon"});case o.Error:/*#__PURE__*/
-return s(r,{name:"medium_error",className:"text-error",testId:"design-system-message-bar--error-icon"});default:return null}},m=({message:m,type:c,onClose:d})=>{const u=!!d;/*#__PURE__*/
-return e(n,{"data-testid":"design-system-message-bar",className:t((e=>{switch(e){case o.Information:case o.Success:return"bg-success-10 border-success-100";case o.Progress:return"bg-progress-10 border-progress-100";case o.Waiting:return"bg-waiting-10 border-waiting-100";case o.Caution:return"bg-caution-10 border-caution-100";case o.Error:return"bg-error-10 border-error-100";default:return""}})(c),"box-border flex w-full items-start justify-between gap-x-4 rounded-xl border px-6 py-4"),children:[
-/*#__PURE__*/s(n,{"data-testid":"design-system-message-bar--icon",className:"pt-[5px]",children:/*#__PURE__*/s(i,{type:c})}),
-/*#__PURE__*/s(n,{className:"w-full",children:/*#__PURE__*/s(a,{variant:"body1",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:m})}),u&&/*#__PURE__*/s(n,{onClick:d,"data-testid":"design-system-message-bar--close-button",className:"pt-[5px]",children:/*#__PURE__*/s(r,{name:"medium_delete",className:"text-w-gray-400"})})]})};export{m as SnackBar};
+ */const i={information:{name:"medium_information",color:"text-success"},success:{name:"medium_success",color:"text-success"},progress:{name:"medium_success",color:"text-progress"},waiting:{name:"medium_wait",color:"text-waiting"},caution:{name:"medium_caution",color:"text-caution"},error:{name:"medium_error",color:"text-error"}},m={information:"bg-success-10 border-success-100",success:"bg-success-10 border-success-100",progress:"bg-progress-10 border-progress-100",waiting:"bg-waiting-10 border-waiting-100",caution:"bg-caution-10 border-caution-100",error:"bg-error-10 border-error-100"},c=({type:e})=>{const t=i[e];return t?/*#__PURE__*/s(o,{name:t.name,className:t.color,testId:`design-system-message-bar--${e}-icon`}):null},n=({message:i,type:n,onClose:l,className:d})=>{const u=!!l;/*#__PURE__*/
+return e(a,{"data-testid":"design-system-message-bar",role:"alert",className:t(m[n],"box-border flex w-full items-start justify-between gap-x-4 rounded-xl border px-6 py-4",d),children:[
+/*#__PURE__*/s(a,{"data-testid":"design-system-message-bar--icon",className:"pt-[5px]",children:/*#__PURE__*/s(c,{type:n})}),
+/*#__PURE__*/s(a,{className:"w-full",children:/*#__PURE__*/s(r,{variant:"body16",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:i})}),u&&/*#__PURE__*/s("button",{type:"button","aria-label":"닫기",onClick:l,"data-testid":"design-system-message-bar--close-button",className:"pt-[5px]",children:/*#__PURE__*/s(o,{name:"medium_delete",className:"text-w-gray-400"})})]})};export{n as SnackBar};

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

@@ -13,4 +13,5 @@ export interface SnackBarIconProps {
 export interface SnackBarProps extends SnackBarIconProps {
     message: string;
     onClose?(): void;
+    className?: string;
 }

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

@@ -0,0 +1,30 @@
+import { type TooltipPlainProps } from '../Tooltip.types';
+/**
+ * 간단한 텍스트 툴팁을 표시하는 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.text - 툴팁에 표시될 텍스트
+ * @param {'up' | 'down' | 'left' | 'right'} [props.variant='up'] - 툴팁 표시 방향
+ * @param {string} [props.className] - 툴팁 컨테이너에 적용할 추가 클래스
+ *
+ * @example
+ * // 기본 사용법
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <button>마우스를 올려보세요</button>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="up" text="도움말 내용" />
+ * </Tooltip>
+ *
+ * @example
+ * // 방향 지정
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <span>도움말</span>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="right" text="오른쪽에 표시되는 툴팁" />
+ * </Tooltip>
+ */
+declare const PlainTooltip: ({ id, text, variant, className, }: TooltipPlainProps) => import("react/jsx-runtime").JSX.Element;
+export { PlainTooltip };

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

@@ -0,0 +1,31 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twMerge as o}from"tailwind-merge";import{Typography as a}from"../../../Base/Typography/Typography.js";import{Box as r}from"../../../Base/Layouts/Box/Box.js";import"../../../Base/Layouts/FullBleed/FullBleed.js";import{Arrow as i}from"./PlainTooltip.parts.js";const s={up:{position:"bottom-full left-1/2 -translate-x-1/2 -translate-y-1",hover:"group-hover:-translate-y-3",focus:"max-tablet:group-focus-within:-translate-y-3"},down:{position:"left-1/2 top-full -translate-x-1/2 translate-y-1",hover:"group-hover:translate-y-3",focus:"max-tablet:group-focus-within:translate-y-3"},left:{position:"right-full top-1/2 -translate-y-1/2 -translate-x-1",hover:"group-hover:-translate-x-3",focus:"max-tablet:group-focus-within:-translate-x-3"},right:{position:"left-full top-1/2 -translate-y-1/2 translate-x-1",hover:"group-hover:translate-x-3",focus:"max-tablet:group-focus-within:translate-x-3"}},l=({id:l,text:n,variant:p="up",className:u})=>{const c=s[p];/*#__PURE__*/
+return t(r,{className:o("pointer-events-none absolute z-10 w-max select-none","invisible scale-95 opacity-0","transition-all duration-200 ease-in-out","group-hover:visible group-hover:scale-100 group-hover:opacity-100","max-tablet:group-focus-within:visible max-tablet:group-focus-within:scale-100 max-tablet:group-focus-within:opacity-100",c.position,c.hover,c.focus,u),role:"tooltip",id:l,"data-testid":"design-system-plain-toolTip--container",children:[
+/*#__PURE__*/e(i,{testId:"design-system-plain-toolTip--arrow",variant:p}),
+/*#__PURE__*/e(r,{className:"z-0 flex h-auto min-h-[28px] w-full items-center justify-center rounded-lg bg-w-black px-3 py-1 text-center",children:/*#__PURE__*/e(a,{variant:"body13",className:"whitespace-pre text-wrap break-all font-medium text-w-white opacity-100",children:n})})]})};
+/**
+ * 간단한 텍스트 툴팁을 표시하는 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.text - 툴팁에 표시될 텍스트
+ * @param {'up' | 'down' | 'left' | 'right'} [props.variant='up'] - 툴팁 표시 방향
+ * @param {string} [props.className] - 툴팁 컨테이너에 적용할 추가 클래스
+ *
+ * @example
+ * // 기본 사용법
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <button>마우스를 올려보세요</button>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="up" text="도움말 내용" />
+ * </Tooltip>
+ *
+ * @example
+ * // 방향 지정
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <span>도움말</span>
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Plain variant="right" text="오른쪽에 표시되는 툴팁" />
+ * </Tooltip>
+ */export{l as PlainTooltip};

package/dist/Components/Feedbacks/{PlainTooltip → Tooltip/PlainTooltip}/PlainTooltip.parts.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ArrowProps {
-    className?: string;
+    variant?: 'up' | 'down' | 'left' | 'right';
     testId?: string;
 }
 export declare const Arrow: React.FC<ArrowProps>;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"react";import{twJoin as e}from"tailwind-merge";const a=({testId:a,variant:l})=>/*#__PURE__*/t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"5",height:"10",viewBox:"0 0 5 10",fill:"none","data-testid":a,className:e("absolute z-10","up"===l&&"-bottom-[7px] left-1/2 -translate-x-1/2 -rotate-90","down"===l&&"-top-[7px] left-1/2 -translate-x-1/2 rotate-90","left"===l&&"-right-[5px] top-1/2 -translate-y-1/2 rotate-180","right"===l&&"-left-[5px] top-1/2 -translate-y-1/2 rotate-0"),children:/*#__PURE__*/t("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.96244e-08 5L5 -1.10263e-07L5 10L5.96244e-08 5Z",fill:"black"})});export{a as Arrow};

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

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

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

@@ -0,0 +1,33 @@
+import { type TooltipRichProps } from '../Tooltip.types';
+/**
+ * 제목과 설명을 포함할 수 있는 리치 툴팁 컴포넌트입니다.
+ *
+ * @component
+ * @param {object} props - 컴포넌트 프로퍼티
+ * @param {string} [props.title] - 툴팁의 제목
+ * @param {string} [props.description] - 툴팁의 상세 설명
+ * @param {'right' | 'down'} [props.variant='right'] - 툴팁 표시 방향
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {React.ReactNode} [props.children] - 자식 컴포넌트
+ *
+ * @example
+ * // 기본 사용법
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <SystemIcon name="medium_information" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Rich variant="right" title="알림" description="새로운 메시지가 도착했습니다.">
+ *     <button>확인</button>
+ *   </Tooltip.Rich>
+ * </Tooltip>
+ *
+ * // 아래로 표시
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <SystemIcon name="medium_information" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Rich variant="down" title="경고" description="저장되지 않은 변경사항이 있습니다." />
+ * </Tooltip>
+ */
+declare const RichTooltip: ({ id, title, description, variant, className, children, }: TooltipRichProps) => import("react/jsx-runtime").JSX.Element;
+export { RichTooltip };

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

@@ -0,0 +1,32 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{twMerge as o}from"tailwind-merge";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";const s={right:{position:"top-0 left-[calc(100%_+_4px)]",hover:"group-hover:left-[calc(100%_+_12px)]",focus:"max-tablet:group-focus-within:left-[calc(100%_+_12px)]"},down:{position:"left-0 top-[calc(100%_+_4px)]",hover:"group-hover:top-[calc(100%_+_12px)]",focus:"max-tablet:group-focus-within:top-[calc(100%_+_12px)]"}},r=({id:r,title:l,description:c,variant:p="right",className:n,children:d})=>{const m=s[p];/*#__PURE__*/
+return t(a,{className:o("absolute z-10","invisible scale-95 opacity-0","transition-all duration-200 ease-in-out","group-hover:visible group-hover:scale-100 group-hover:opacity-100","max-tablet:group-focus-within:visible max-tablet:group-focus-within:scale-100 max-tablet:group-focus-within:opacity-100",m.position,m.hover,m.focus),role:"tooltip",id:r,"data-testid":"design-system-rich-tooltip--container",children:/*#__PURE__*/e(a,{className:o("flex min-w-80 flex-col gap-1 rounded-xl bg-white px-6 py-5 shadow-graymedium",n),"data-testid":"design-system-rich-tooltip",children:[l&&/*#__PURE__*/t(a,{className:"flex w-full items-start justify-between gap-4","data-testid":"design-system-rich-tooltip--title",children:/*#__PURE__*/t(i,{variant:"body14",className:"font-medium text-w-gray-900",children:l})}),c&&/*#__PURE__*/t(i,{variant:"body13",className:"text-w-gray-400","data-testid":"design-system-rich-tooltip--description",children:c}),d]})})};
+/**
+ * 제목과 설명을 포함할 수 있는 리치 툴팁 컴포넌트입니다.
+ *
+ * @component
+ * @param {object} props - 컴포넌트 프로퍼티
+ * @param {string} [props.title] - 툴팁의 제목
+ * @param {string} [props.description] - 툴팁의 상세 설명
+ * @param {'right' | 'down'} [props.variant='right'] - 툴팁 표시 방향
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {React.ReactNode} [props.children] - 자식 컴포넌트
+ *
+ * @example
+ * // 기본 사용법
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <SystemIcon name="medium_information" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Rich variant="right" title="알림" description="새로운 메시지가 도착했습니다.">
+ *     <button>확인</button>
+ *   </Tooltip.Rich>
+ * </Tooltip>
+ *
+ * // 아래로 표시
+ * <Tooltip>
+ *   <Tooltip.Trigger>
+ *     <SystemIcon name="medium_information" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Rich variant="down" title="경고" description="저장되지 않은 변경사항이 있습니다." />
+ * </Tooltip>
+ */export{r as RichTooltip};

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

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

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';