@wishket/design-system 1.13.17 → 1.14.0

package/dist/Components/Base/Layouts/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
-interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
+export interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
     as?: ElementType;
 }
 /**

package/dist/Components/Base/Layouts/Column/Column.d.ts

@@ -3,6 +3,9 @@ type ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 export interface ColumnProps extends PropsWithChildren {
     container?: boolean;
     size?: ColumnSize;
+    leftColumnSize?: ColumnSize;
+    centerColumnSize?: ColumnSize;
+    rightColumnSize?: ColumnSize;
     className?: string;
 }
 /**

package/dist/Components/Base/Layouts/FullBleed/FullBleed.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-interface FullBleedProps extends ComponentPropsWithRef<'div'> {
+export interface FullBleedProps extends ComponentPropsWithRef<'div'> {
     className?: string;
     insideContainerClassName?: string;
     maxWidth?: string;

package/dist/Components/DataDisplays/Li/Li.d.ts

@@ -0,0 +1,34 @@
+interface LiProps {
+    text: string;
+    bulletClassName?: string;
+    gap?: number;
+    className?: string;
+}
+/**
+ * 리스트 아이템 컴포넌트입니다.
+ *
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {string} props.text - 리스트 아이템 텍스트
+ * @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명
+ * @param {number} [props.gap] - 리스트 아이템 간격
+ * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
+ *
+ * @example
+ * // 기본 사용법
+ * <Li text="Li" />
+ *
+ * * // 간격 조절
+ * <Li text="Li" gap={1} />
+ *
+ * // 불릿 색상 조절
+ * <Li text="Li" bulletClassName="text-w-red-800" />
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <Li text="Li" className="text-w-red-800" />
+ *
+ */
+declare const Li: ({ text, gap, bulletClassName, className, }: LiProps) => import("react/jsx-runtime").JSX.Element;
+export default Li;
+export declare const BulletIcon: ({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataDisplays/ServiceLogo/ServiceLogo.d.ts

@@ -1,5 +1,5 @@
 import { ServiceLogoNames } from './ServiceLogo.types';
-interface ServiceLogoProps {
+export interface ServiceLogoProps {
     name: ServiceLogoNames;
     className?: string;
     variant?: 'default' | 'disabled' | 'bluegray' | 'white';

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 n,useEffect as o,useCallback as c}from"react";import{CheckboxButton as a}from"./Checkbox.parts.js";function s(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]:{},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){s(e,r,t[r])}))}return e}function l(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[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 o,useEffect as n,useCallback as c}from"react";import"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{CheckboxButton as s}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}
 /**
  * @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(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const u=/*#__PURE__*/t(((t,s)=>{var{checked:u=!1,onChange:b,disabled:f=!1,isError:p=!1,type:d="box",className:y}=t,m=l(t,["checked","onChange","disabled","isError","type","className"]);const[h,g]=n(u),[O,k]=n(!1);o((()=>{g(u)}),[u]);const j=c((e=>{f||b&&(b(e),g(e.target.checked),e.target.checked||k(!1))}),[b,f]);/*#__PURE__*/
-return e("label",{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
-/*#__PURE__*/r("input",i({ref:s,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:h,onChange:j,onFocus:()=>{k(!0)},onBlur:()=>{k(!1)},disabled:f},m)),
-/*#__PURE__*/r(a,{checked:h,disabled:f,isError:p,isFocused:O,type:d,className:y})]})}));u.displayName="Checkbox";export{u 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 b=/*#__PURE__*/t(((t,i)=>{var{checked:b=!1,onChange:p,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(b),[j,k]=o(!1);n((()=>{O(b)}),[b]);const x=c((e=>{f||p&&(p(e),O(e.target.checked),e.target.checked||k(!1))}),[p,f]);/*#__PURE__*/
+return e(a,{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
+/*#__PURE__*/r("input",l({ref:i,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:g,onChange:x,onFocus:()=>{k(!0)},onBlur:()=>{k(!1)},disabled:f},h)),
+/*#__PURE__*/r(s,{checked:g,disabled:f,isError:d,isFocused:j,type:m,className:y})]})}));b.displayName="Checkbox";export{b as Checkbox};

package/dist/Components/Inputs/Radio/Radio.js

@@ -1,17 +1,17 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as i}from"react";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 n(e,r){if(null==e)return{};var t,i,o=function(e,r){if(null==e)return{};var t,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const l=({isDisabled:e,isSelected:i=!1,isError:o,className:a})=>/*#__PURE__*/r("div",{className:t("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as o}from"react";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.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 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){a(e,r,t[r])}))}return e}function n(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},a=Object.keys(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)t=a[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const s=({isDisabled:e,isSelected:o=!1,isError:i,className:a})=>/*#__PURE__*/r("div",{className:t("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
 // 체크되었고 비활성화 상태의 경우
-i&&e?"bg-w-white border-primary-100 cursor-not-allowed":
+o&&e?"bg-w-white border-primary-100 cursor-not-allowed":
 // 비활성화 상태의 경우
 e?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":
 // 활성화 상태에서 체크되었고 오류가 없는 경우
-i&&!o?"bg-w-white border-primary-500":
+o&&!i?"bg-w-white border-primary-500":
 // 활성화 상태에서 체크되었고 오류가 있는 경우
-i&&o?"bg-w-white border-w-red-500":
+o&&i?"bg-w-white border-w-red-500":
 // 활성화 상태에서 체크되지 않았고 오류가 있는 경우
-!i&&o?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",a),role:"radio-button",children:/*#__PURE__*/r("div",{className:t("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!i&&"h-0 w-0",o&&"bg-w-red-500",e&&"bg-w-gray-200",i&&e&&"bg-primary-100")})}),s=/*#__PURE__*/i(((t,i)=>{var{value:o="",isSelected:s=!1,isDisabled:c=!1,isError:d=!1,className:b}=t,u=n(t,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
-return e("label",{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
-/*#__PURE__*/r("input",a({ref:i,type:"radio",className:"hidden",value:o,checked:s,disabled:c},u)),
-/*#__PURE__*/r(l,{isSelected:s,isError:d,isDisabled:c,className:b})]})}));
+!o&&i?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",a),role:"radio-button",children:/*#__PURE__*/r("div",{className:t("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!o&&"h-0 w-0",i&&"bg-w-red-500",e&&"bg-w-gray-200",o&&e&&"bg-primary-100")})}),d=/*#__PURE__*/o(((t,o)=>{var{value:a="",isSelected:d=!1,isDisabled:c=!1,isError:u=!1,className:b}=t,m=n(t,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
+return e(i,{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
+/*#__PURE__*/r("input",l({ref:o,type:"radio",className:"hidden",value:a,checked:d,disabled:c},m)),
+/*#__PURE__*/r(s,{isSelected:d,isError:u,isDisabled:c,className:b})]})}));
 /**
  * 사용자가 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
  *
@@ -38,4 +38,4 @@ return e("label",{"data-testid":"design-system-radio",className:"group cursor-po
  *
  * // 커스텀 스타일
  * <Radio value="option5" className="custom-radio" />
- */s.displayName="Radio";export{s as Radio};
+ */d.displayName="Radio";export{d as Radio};

package/dist/Components/Inputs/SupportTextContainer/SupportTextContainer.js

@@ -1,3 +1,3 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"tailwind-merge";import"../../Base/Layouts/FullBleed/FullBleed.js";const s=({errorMessage:s,supportMessage:o,currentLength:i,maxLength:l,isMaxLengthVisible:n})=>{const p=o||n;/*#__PURE__*/
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"tailwind-merge";import"../../Base/Layouts/FullBleed/FullBleed.js";const s=({errorMessage:s,supportMessage:o,currentLength:l,maxLength:i,isMaxLengthVisible:n})=>{const p=o||n;/*#__PURE__*/
 return e(r,{className:"flex flex-col gap-2 px-[17px]","data-testid":"design-system--support-text-container",children:[s&&/*#__PURE__*/t(a,{variant:"body2",className:"text-w-red-500",children:s}),p&&/*#__PURE__*/e(r,{className:"flex gap-6",children:[
-/*#__PURE__*/t(a,{variant:"body2",className:"flex-1 text-w-gray-400",children:o}),n&&/*#__PURE__*/e(a,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[i,"/",l]})]})]})};export{s as SupportTextContainer};
+/*#__PURE__*/t(a,{variant:"body2",className:"flex-1 text-w-gray-400",children:o}),n&&/*#__PURE__*/e(a,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[null==l?void 0:l.toLocaleString(),"/",null==i?void 0:i.toLocaleString()]})]})]})};export{s as SupportTextContainer};

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

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
  */
 export interface TextareaProps extends ComponentProps<'textarea'> {
     isError?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'full';
     resize?: boolean;
     supportText?: string;
     errorText?: string;
@@ -15,7 +15,7 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
  *
  * @param {Object} props
  * @param {boolean} [props.isError] - 에러 상태를 표시합니다
- * @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
+ * @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
  * @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
  * @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
  * @param {string} [props.errorText] - 에러 메시지를 표시합니다
@@ -43,6 +43,14 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
  *   isLengthVisible={true}
  *   supportText="최대 1000자까지 입력 가능합니다"
  * />
+ *
+ * // 외부 컨테이너 높이에 맞게 최대로 확장
+ * <div className="h-96">
+ *   <Textarea
+ *     size="full"
+ *     placeholder="컨테이너 높이에 맞게 확장됩니다"
+ *   />
+ * </div>
  * ```
  */
 declare const Textarea: ({ isError, size, resize, isLengthVisible, supportText, errorText, maxLength, value, disabled, name, onChange, onBlur, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,10 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n}from"tailwind-merge";import{Box as o}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{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";function l(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){l(e,t,r[t])}))}return e}function u(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}
+"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{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}
 /**
  * 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
  *
  * @param {Object} props
  * @param {boolean} [props.isError] - 에러 상태를 표시합니다
- * @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
+ * @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
  * @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
  * @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
  * @param {string} [props.errorText] - 에러 메시지를 표시합니다
@@ -32,8 +32,16 @@
  *   isLengthVisible={true}
  *   supportText="최대 1000자까지 입력 가능합니다"
  * />
+ *
+ * // 외부 컨테이너 높이에 맞게 최대로 확장
+ * <div className="h-96">
+ *   <Textarea
+ *     size="full"
+ *     placeholder="컨테이너 높이에 맞게 확장됩니다"
+ *   />
+ * </div>
  * ```
- */(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 c=l=>{var{isError:c=!1,size:p="md",resize:f=!1,isLengthVisible:g=!1,supportText:x,errorText:d,maxLength:y,value:b,disabled:h,name:j,onChange:O,onBlur:v}=l,w=u(l,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[S,L]=r(!1),z=c||x||g;/*#__PURE__*/
-return e(o,{"data-testid":"design-system-textarea",className:"flex h-fit w-full flex-col gap-2",children:[
-/*#__PURE__*/e(i,{isDisabled:h,isError:c,isFocused:S,isTextarea:!0,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"===p?"min-h-[118px]":"md"===p?"min-h-[238px]":"lg"===p?"min-h-[358px]":void 0,f?"resize-y":"resize-none",h&&"resize-none"),name:j,value:b,disabled:h,onChange:O,maxLength:y,onFocus:e=>{L(!0)},onBlur:e=>{L(!1),v&&v(e)}},w)),f&&/*#__PURE__*/t(a,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),z&&/*#__PURE__*/t(s,{errorMessage:d,supportMessage:x,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:y,isMaxLengthVisible:g})]})};export{c as Textarea};
+ */(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:g=!1,isLengthVisible:x=!1,supportText:d,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||d||x;/*#__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,g?"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)),g&&/*#__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:d,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h,isMaxLengthVisible:x})]})};export{p as Textarea};

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

@@ -1,4 +1,4 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./Checkbox.parts.js");function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(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){c(e,t,r[t])}))}return e}function o(e,t){if(null==e)return{};var r,c,n=function(e,t){if(null==e)return{};var r,c,n={},o=Object.keys(e);for(c=0;c<o.length;c++)r=o[c],t.indexOf(r)>=0||(n[r]=e[r]);return n}
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react");require("tailwind-merge");var t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var c=require("./Checkbox.parts.js");function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},c=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(c=c.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),c.forEach((function(r){n(e,r,t[r])}))}return e}function s(e,r){if(null==e)return{};var t,c,n=function(e,r){if(null==e)return{};var t,c,n={},o=Object.keys(e);for(c=0;c<o.length;c++)t=o[c],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,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(c=0;c<o.length;c++)r=o[c],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}const s=/*#__PURE__*/t.forwardRef(((c,s)=>{var{checked:a=!1,onChange:l,disabled:i=!1,isError:u=!1,type:b="box",className:f}=c,d=o(c,["checked","onChange","disabled","isError","type","className"]);const[p,y]=t.useState(a),[h,g]=t.useState(!1);t.useEffect((()=>{y(a)}),[a]);const O=t.useCallback((e=>{i||l&&(l(e),y(e.target.checked),e.target.checked||g(!1))}),[l,i]);/*#__PURE__*/
-return e.jsxs("label",{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
-/*#__PURE__*/e.jsx("input",n({ref:s,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:p,onChange:O,onFocus:()=>{g(!0)},onBlur:()=>{g(!1)},disabled:i},d)),
-/*#__PURE__*/e.jsx(r.CheckboxButton,{checked:p,disabled:i,isError:u,isFocused:h,type:b,className:f})]})}));s.displayName="Checkbox",exports.Checkbox=s;
+ */(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(c=0;c<o.length;c++)t=o[c],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}const a=/*#__PURE__*/r.forwardRef(((n,a)=>{var{checked:u=!1,onChange:l,disabled:i=!1,isError:b=!1,type:d="box",className:f}=n,y=s(n,["checked","onChange","disabled","isError","type","className"]);const[p,h]=r.useState(u),[x,g]=r.useState(!1);r.useEffect((()=>{h(u)}),[u]);const j=r.useCallback((e=>{i||l&&(l(e),h(e.target.checked),e.target.checked||g(!1))}),[l,i]);/*#__PURE__*/
+return e.jsxs(t.Box,{"data-testid":"design-system-checkbox",className:"group flex size-fit",children:[
+/*#__PURE__*/e.jsx("input",o({ref:a,className:"absolute h-0 w-0 opacity-0",type:"checkbox",checked:p,onChange:j,onFocus:()=>{g(!0)},onBlur:()=>{g(!1)},disabled:i},y)),
+/*#__PURE__*/e.jsx(c.CheckboxButton,{checked:p,disabled:i,isError:b,isFocused:x,type:d,className:f})]})}));a.displayName="Checkbox",exports.Checkbox=a;

package/dist/cjs/Components/Inputs/Radio/Radio.js

@@ -1,17 +1,17 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("react");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 a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){i(e,r,t[r])}))}return e}function o(e,r){if(null==e)return{};var t,i,a=function(e,r){if(null==e)return{};var t,i,a={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const s=({isDisabled:t,isSelected:i=!1,isError:a,className:o})=>/*#__PURE__*/e.jsx("div",{className:r.twMerge("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=require("react"),i=require("../../Base/Layouts/Box/Box.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 s(e,r){if(null==e)return{};var t,i,o=function(e,r){if(null==e)return{};var t,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}require("../../Base/Layouts/FullBleed/FullBleed.js");const l=({isDisabled:t,isSelected:i=!1,isError:o,className:a})=>/*#__PURE__*/e.jsx("div",{className:r.twMerge("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",
 // 체크되었고 비활성화 상태의 경우
 i&&t?"bg-w-white border-primary-100 cursor-not-allowed":
 // 비활성화 상태의 경우
 t?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":
 // 활성화 상태에서 체크되었고 오류가 없는 경우
-i&&!a?"bg-w-white border-primary-500":
+i&&!o?"bg-w-white border-primary-500":
 // 활성화 상태에서 체크되었고 오류가 있는 경우
-i&&a?"bg-w-white border-w-red-500":
+i&&o?"bg-w-white border-w-red-500":
 // 활성화 상태에서 체크되지 않았고 오류가 있는 경우
-!i&&a?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",o),role:"radio-button",children:/*#__PURE__*/e.jsx("div",{className:r.twMerge("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!i&&"h-0 w-0",a&&"bg-w-red-500",t&&"bg-w-gray-200",i&&t&&"bg-primary-100")})}),n=/*#__PURE__*/t.forwardRef(((r,t)=>{var{value:i="",isSelected:n=!1,isDisabled:l=!1,isError:d=!1,className:c}=r,u=o(r,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
-return e.jsxs("label",{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
-/*#__PURE__*/e.jsx("input",a({ref:t,type:"radio",className:"hidden",value:i,checked:n,disabled:l},u)),
-/*#__PURE__*/e.jsx(s,{isSelected:n,isError:d,isDisabled:l,className:c})]})}));
+!i&&o?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer",a),role:"radio-button",children:/*#__PURE__*/e.jsx("div",{className:r.twMerge("size-2 rounded-full bg-primary transition-all duration-100 ease-in-out",!i&&"h-0 w-0",o&&"bg-w-red-500",t&&"bg-w-gray-200",i&&t&&"bg-primary-100")})}),n=/*#__PURE__*/t.forwardRef(((r,t)=>{var{value:o="",isSelected:n=!1,isDisabled:u=!1,isError:d=!1,className:c}=r,b=s(r,["value","isSelected","isDisabled","isError","className"]);/*#__PURE__*/
+return e.jsxs(i.Box,{"data-testid":"design-system-radio",className:"group cursor-pointer",children:[
+/*#__PURE__*/e.jsx("input",a({ref:t,type:"radio",className:"hidden",value:o,checked:n,disabled:u},b)),
+/*#__PURE__*/e.jsx(l,{isSelected:n,isError:d,isDisabled:u,className:c})]})}));
 /**
  * 사용자가 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
  *

package/dist/cjs/Components/Inputs/SupportTextContainer/SupportTextContainer.js

@@ -1,3 +1,3 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js");require("tailwind-merge"),require("../../Base/Layouts/FullBleed/FullBleed.js");exports.SupportTextContainer=({errorMessage:a,supportMessage:t,currentLength:x,maxLength:i,isMaxLengthVisible:l})=>{const o=t||l;/*#__PURE__*/
-return e.jsxs(s.Box,{className:"flex flex-col gap-2 px-[17px]","data-testid":"design-system--support-text-container",children:[a&&/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"text-w-red-500",children:a}),o&&/*#__PURE__*/e.jsxs(s.Box,{className:"flex gap-6",children:[
-/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"flex-1 text-w-gray-400",children:t}),l&&/*#__PURE__*/e.jsxs(r.Typography,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[x,"/",i]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js");require("tailwind-merge"),require("../../Base/Layouts/FullBleed/FullBleed.js");exports.SupportTextContainer=({errorMessage:s,supportMessage:t,currentLength:i,maxLength:l,isMaxLengthVisible:o})=>{const x=t||o;/*#__PURE__*/
+return e.jsxs(a.Box,{className:"flex flex-col gap-2 px-[17px]","data-testid":"design-system--support-text-container",children:[s&&/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"text-w-red-500",children:s}),x&&/*#__PURE__*/e.jsxs(a.Box,{className:"flex gap-6",children:[
+/*#__PURE__*/e.jsx(r.Typography,{variant:"body2",className:"flex-1 text-w-gray-400",children:t}),o&&/*#__PURE__*/e.jsxs(r.Typography,{variant:"body2",className:"w-[72px] text-right text-w-gray-400",children:[null==i?void 0:i.toLocaleString(),"/",null==l?void 0:l.toLocaleString()]})]})]})};

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

@@ -1,10 +1,10 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var a=require("../TextFieldContainer/TextFieldContainer.js"),i=require("../SupportTextContainer/SupportTextContainer.js");function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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){o(e,t,r[t])}))}return e}function u(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r,n,s={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(s[r]=e[r]);return s}
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),n=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js");var a=require("../TextFieldContainer/TextFieldContainer.js"),i=require("../SupportTextContainer/SupportTextContainer.js");function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(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){l(e,t,r[t])}))}return e}function u(e,t){if(null==e)return{};var r,n,s=function(e,t){if(null==e)return{};var r,n,s={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(s[r]=e[r]);return s}
 /**
  * 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
  *
  * @param {Object} props
  * @param {boolean} [props.isError] - 에러 상태를 표시합니다
- * @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
+ * @param {('sm'|'md'|'lg'|'full')} [props.size='md'] - textarea의 크기를 지정합니다
  * @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
  * @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
  * @param {string} [props.errorText] - 에러 메시지를 표시합니다
@@ -32,8 +32,16 @@
  *   isLengthVisible={true}
  *   supportText="최대 1000자까지 입력 가능합니다"
  * />
+ *
+ * // 외부 컨테이너 높이에 맞게 최대로 확장
+ * <div className="h-96">
+ *   <Textarea
+ *     size="full"
+ *     placeholder="컨테이너 높이에 맞게 확장됩니다"
+ *   />
+ * </div>
  * ```
- */(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)&&(s[r]=e[r])}return s}exports.Textarea=o=>{var{isError:c=!1,size:x="md",resize:p=!1,isLengthVisible:g=!1,supportText:m,errorText:d,maxLength:y,value:f,disabled:b,name:h,onChange:j,onBlur:v}=o,O=u(o,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[w,S]=t.useState(!1),T=c||m||g;/*#__PURE__*/
-return e.jsxs(n.Box,{"data-testid":"design-system-textarea",className:"flex h-fit w-full flex-col gap-2",children:[
-/*#__PURE__*/e.jsxs(a.TextFieldContainer,{isDisabled:b,isError:c,isFocused:w,isTextarea:!0,children:[
-/*#__PURE__*/e.jsx("textarea",l({"data-testid":"design-system-textarea--textarea",className:r.twMerge("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"===x?"min-h-[118px]":"md"===x?"min-h-[238px]":"lg"===x?"min-h-[358px]":void 0,p?"resize-y":"resize-none",b&&"resize-none"),name:h,value:f,disabled:b,onChange:j,maxLength:y,onFocus:e=>{S(!0)},onBlur:e=>{S(!1),v&&v(e)}},O)),p&&/*#__PURE__*/e.jsx(s.SystemIcon,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),T&&/*#__PURE__*/e.jsx(i.SupportTextContainer,{errorMessage:d,supportMessage:m,currentLength:(null==f?void 0:f.toString().length)||0,maxLength:y,isMaxLengthVisible:g})]})};
+ */(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)&&(s[r]=e[r])}return s}exports.Textarea=l=>{var{isError:c=!1,size:x="md",resize:m=!1,isLengthVisible:p=!1,supportText:g,errorText:f,maxLength:d,value:y,disabled:h,name:b,onChange:j,onBlur:v}=l,w=u(l,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[O,S]=t.useState(!1),T=c||g||p;/*#__PURE__*/
+return e.jsxs(n.Box,{"data-testid":"design-system-textarea",className:r.twMerge("flex w-full flex-col gap-2","full"===x?"h-full":"h-fit"),children:[
+/*#__PURE__*/e.jsxs(a.TextFieldContainer,{isDisabled:h,isError:c,isFocused:O,isTextarea:!0,className:r.twJoin("full"===x&&"h-full"),children:[
+/*#__PURE__*/e.jsx("textarea",o({"data-testid":"design-system-textarea--textarea",className:r.twMerge("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"===x?"min-h-[118px]":"md"===x?"min-h-[238px]":"lg"===x?"min-h-[358px]":"full"===x?"min-h-full":void 0,m?"resize-y":"resize-none",h&&"resize-none"),name:b,value:y,disabled:h,onChange:j,maxLength:d,onFocus:e=>{S(!0)},onBlur:e=>{S(!1),v&&v(e)}},w)),m&&/*#__PURE__*/e.jsx(s.SystemIcon,{name:"small_resizer",className:"absolute bottom-[5px] right-[5px] text-w-gray-400",testId:"design-system-textarea--resize-icon"})]}),T&&/*#__PURE__*/e.jsx(i.SupportTextContainer,{errorMessage:f,supportMessage:g,currentLength:(null==y?void 0:y.toString().length)||0,maxLength:d,isMaxLengthVisible:p})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.13.17",
+  "version": "1.14.0",
   "type": "module",
   "description": "Wishket Design System",
   "main": "dist/index.js",
@@ -53,20 +53,18 @@
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.27.1",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@chromatic-com/storybook": "^2.0.0",
+    "@chromatic-com/storybook": "^4.0.0",
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/nextjs": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-docs": "^9.0.9",
+    "@storybook/addon-links": "^9.0.9",
+    "@storybook/addon-onboarding": "^9.0.9",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/nextjs": "^9.0.9",
     "@swc/core": "^1.5.5",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.0",
@@ -95,7 +93,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-swc3": "^0.12.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.4.0",
+    "storybook": "^9.0.9",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",