@nextlevel_korea/design-system 1.1.3 → 1.1.4

package/README.md

@@ -241,7 +241,7 @@ npm run storybook
 
 ### Header
 
-커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다.
+커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다. 모든 화면 크기에서 최적화된 반응형 디자인을 제공합니다.
 
 ```tsx
 import { Header } from '@nextlevel_korea/design-system';
@@ -262,17 +262,26 @@ import '@nextlevel_korea/design-system/styles'; // 필수!
 - `logo` (string, optional) - 로고 이미지 URL
 - `title` (string, optional) - 헤더 제목
 
-**스타일 클래스:**
+**반응형 스타일 클래스:**
 
-- `flex items-center justify-between` - 기본 레이아웃
-- `h-8` - 로고 높이
-- `text-xl text-success font-bold` - 제목 스타일
+- **레이아웃**: `flex items-center justify-between`
+- **패딩**: `px-4 py-3 sm:px-6 lg:px-8` (화면 크기에 따라 패딩 증가)
+- **로고**: `h-6 sm:h-8 md:h-10 lg:h-12` (화면 크기에 따라 높이 증가)
+- **제목**: `text-lg sm:text-xl md:text-2xl lg:text-3xl` (화면 크기에 따라 폰트 크기 증가)
+- **제목 색상**: `text-success font-bold`
+
+**반응형 동작:**
+
+- **모바일 (320px-639px)**: 컴팩트한 레이아웃, 작은 로고와 텍스트
+- **태블릿 (640px-1023px)**: 중간 크기 로고와 텍스트, 우측 텍스트 표시
+- **데스크톱 (1024px+)**: 큰 로고와 텍스트, 넓은 패딩
 
 **Storybook 예제:**
 
 - 플레이스홀더 로고가 있는 기본 헤더
 - 커스텀 브랜드 헤더
 - 작은 컴팩트 헤더
+- 반응형 테스트 (다양한 화면 크기)
 
 ## 🛠️ 개발
 
@@ -368,6 +377,133 @@ export const Primary: Story = {
 - **접근성** - WCAG 2.1 준수 컴포넌트
 - **커스터마이징 가능** - 쉬운 테마링과 커스터마이징
 
+## 📱 반응형 브레이크포인트
+
+이 디자인 시스템은 다음과 같은 반응형 브레이크포인트를 지원합니다:
+
+### 기본 브레이크포인트
+
+- `xs`: 475px (초소형 모바일)
+- `sm`: 640px (소형 모바일)
+- `md`: 768px (태블릿)
+- `lg`: 1024px (노트북)
+- `xl`: 1280px (데스크톱)
+- `2xl`: 1536px (대형 데스크톱)
+- `3xl`: 1920px (초대형 화면)
+- `4xl`: 2560px (울트라 와이드)
+- `5xl`: 3840px (4K 이상)
+
+### 의미적 브레이크포인트
+
+- `mobile`: 320px (모바일)
+- `tablet`: 768px (태블릿)
+- `laptop`: 1024px (노트북)
+- `desktop`: 1280px (데스크톱)
+- `wide`: 1536px (와이드 스크린)
+- `ultra-wide`: 1920px (울트라 와이드)
+
+### 사용 예제
+
+```tsx
+// 반응형 헤더 컴포넌트
+<header
+  className="
+  px-4 py-3           // 기본 패딩
+  sm:px-6             // 640px 이상에서 패딩 증가
+  lg:px-8             // 1024px 이상에서 패딩 더 증가
+"
+>
+  <img
+    className="
+      h-6              // 기본 높이
+      sm:h-8           // 640px 이상에서 높이 증가
+      md:h-10          // 768px 이상에서 높이 증가
+      lg:h-12          // 1024px 이상에서 높이 증가
+    "
+    src="/logo.png"
+    alt="Logo"
+  />
+  <h1
+    className="
+    text-lg            // 기본 폰트 크기
+    sm:text-xl         // 640px 이상에서 폰트 크기 증가
+    md:text-2xl        // 768px 이상에서 폰트 크기 증가
+    lg:text-3xl        // 1024px 이상에서 폰트 크기 증가
+  "
+  >
+    제목
+  </h1>
+</header>
+```
+
+### 반응형 유틸리티 클래스
+
+```tsx
+// 숨김/표시
+<div className="hidden sm:block">태블릿 이상에서만 표시</div>
+<div className="block sm:hidden">모바일에서만 표시</div>
+
+// 그리드 시스템
+<div className="
+  grid
+  grid-cols-1         // 모바일: 1열
+  sm:grid-cols-2      // 태블릿: 2열
+  md:grid-cols-3      // 노트북: 3열
+  lg:grid-cols-4      // 데스크톱: 4열
+  xl:grid-cols-5      // 대형 화면: 5열
+  gap-4
+">
+  {/* 그리드 아이템들 */}
+</div>
+
+// 텍스트 크기
+<p className="
+  text-sm             // 기본: 작은 텍스트
+  sm:text-base        // 태블릿: 기본 텍스트
+  md:text-lg          // 노트북: 큰 텍스트
+  lg:text-xl          // 데스크톱: 더 큰 텍스트
+">
+  반응형 텍스트
+</p>
+
+// 최대 너비 (Max Width)
+<div className="
+  w-full              // 전체 너비
+  max-w-xs            // 320px
+  max-w-sm            // 384px
+  max-w-md            // 448px
+  max-w-lg            // 512px
+  max-w-xl            // 576px
+  max-w-2xl           // 672px
+  max-w-3xl           // 768px
+  max-w-4xl           // 896px
+  max-w-5xl           // 1024px
+  max-w-6xl           // 1152px
+  max-w-7xl           // 1280px
+  max-w-full          // 100%
+  max-w-screen-sm     // 640px
+  max-w-screen-md     // 768px
+  max-w-screen-lg     // 1024px
+  max-w-screen-xl     // 1280px
+  max-w-screen-2xl    // 1536px
+">
+  컨테이너
+</div>
+
+// 반응형 최대 너비
+<div className="
+  w-full
+  max-w-xs            // 모바일: 320px
+  sm:max-w-md         // 태블릿: 448px
+  md:max-w-lg         // 노트북: 512px
+  lg:max-w-xl         // 데스크톱: 576px
+  xl:max-w-2xl        // 대형 화면: 672px
+  mx-auto             // 중앙 정렬
+">
+  반응형 컨테이너
+</div>
+```
+
 ## 📚 Storybook 애드온
 
 우리 Storybook은 다음으로 구성되어 있습니다:

package/dist/components/Header/Header.d.ts

@@ -1,7 +1,42 @@
 import React from 'react';
 export interface IProps {
     logo?: string;
-    title?: string;
+    navList?: {
+        idx: number;
+        name: string;
+        path: string;
+        sub?: {
+            idx: number;
+            name: string;
+            path: string;
+        }[];
+    }[];
+    sidebarPosition?: 'left' | 'right';
+    colors?: {
+        headerBg?: string;
+        sidebarBg?: string;
+        sidebarGradientFrom?: string;
+        sidebarGradientTo?: string;
+        dropdownBg?: string;
+        submenuBg?: string;
+        titleText?: string;
+        navText?: string;
+        navTextHover?: string;
+        sidebarTitleText?: string;
+        sidebarNavText?: string;
+        sidebarNavTextHover?: string;
+        submenuText?: string;
+        submenuTextHover?: string;
+        primary?: string;
+        primaryDark?: string;
+        accent?: string;
+        border?: string;
+        dropdownBorder?: string;
+        shadow?: string;
+        sidebarShadow?: string;
+        overlayBg?: string;
+        overlayOpacity?: string;
+    };
 }
 declare const Header: React.FC<IProps>;
 export default Header;

package/dist/components/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAQ5B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,MAAM;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;KACrD,EAAE,CAAC;IAEJ,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnC,MAAM,CAAC,EAAE;QAEP,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAE1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAEhB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,cAAc,CAAC,EAAE,MAAM,CAAC;QAExB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,aAAa,CAAC,EAAE,MAAM,CAAC;QAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA0X5B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Header/Header.stories.d.ts

@@ -4,4 +4,6 @@ declare const meta: Meta<typeof Header>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const CustomColors: Story;
+export declare const DarkTheme: Story;
 //# sourceMappingURL=Header.stories.d.ts.map

package/dist/components/Header/Header.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAiB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmCnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8B1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA8BvB,CAAC"}

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react");var P={exports:{}},R={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react");var W={exports:{}},R={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var F;function re(){if(F)return R;F=1;var s=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function d(m,o,c){var E=null;if(c!==void 0&&(E=""+c),o.key!==void 0&&(E=""+o.key),"key"in o){c={};for(var b in o)b!=="key"&&(c[b]=o[b])}else c=o;return o=c.ref,{$$typeof:s,type:m,key:E,ref:o!==void 0?o:null,props:c}}return R.Fragment=i,R.jsx=d,R.jsxs=d,R}var _={};/**
+ */var J;function re(){if(J)return R;J=1;var f=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function w(p,c,d){var u=null;if(d!==void 0&&(u=""+d),c.key!==void 0&&(u=""+c.key),"key"in c){d={};for(var b in c)b!=="key"&&(d[b]=c[b])}else d=c;return c=d.ref,{$$typeof:f,type:p,key:u,ref:c!==void 0?c:null,props:d}}return R.Fragment=s,R.jsx=w,R.jsxs=w,R}var $={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var D;function te(){return D||(D=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case q:return"Profiler";case U:return"StrictMode";case J:return"Suspense";case X:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case V:return(e.displayName||"Context")+".Provider";case z:return(e._context.displayName||"Context")+".Consumer";case G:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case h:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function i(e){return""+e}function d(e){try{i(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),i(e)}}function m(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===h)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=p.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function E(e){if(y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function t(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function L(){var e=s(this.type);return C[e]||(C[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function M(e,r,t,n,l,u,O,S){return t=u.ref,e={$$typeof:g,type:e,key:r,props:u,_owner:l},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:L}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,r,t,n,l,u,O,S){var a=r.children;if(a!==void 0)if(n)if(Q(a)){for(n=0;n<a.length;n++)w(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(a);if(y.call(r,"key")){a=s(e);var f=Object.keys(r).filter(function(K){return K!=="key"});n=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",$[a+n]||(f=0<f.length?"{"+f.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var X;function te(){return X||(X=1,process.env.NODE_ENV!=="production"&&function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case P:return"Profiler";case C:return"StrictMode";case m:return"Suspense";case N:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case t:return"Portal";case S:return(e.displayName||"Context")+".Provider";case _:return(e._context.displayName||"Context")+".Consumer";case a:var o=e.render;return e=e.displayName,e||(e=o.displayName||o.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case L:return o=e.displayName||null,o!==null?o:f(e.type)||"Memo";case H:o=e._payload,e=e._init;try{return f(e(o))}catch{}}return null}function s(e){return""+e}function w(e){try{s(e);var o=!1}catch{o=!0}if(o){o=console;var n=o.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),s(e)}}function p(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===H)return"<...>";try{var o=f(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function c(){var e=B.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function u(e){if(I.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function b(e,o){function n(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",o))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function k(){var e=f(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function O(e,o,n,l,g,x,M,Y){return n=x.ref,e={$$typeof:A,type:e,key:o,props:x,_owner:g},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,o,n,l,g,x,M,Y){var i=o.children;if(i!==void 0)if(l)if(K(i)){for(l=0;l<i.length;l++)y(i[l]);Object.freeze&&Object.freeze(i)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(i);if(I.call(o,"key")){i=f(e);var j=Object.keys(o).filter(function(ee){return ee!=="key"});l=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",V[i+l]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,n,a,f,a),$[a+n]=!0)}if(a=null,t!==void 0&&(d(t),a=""+t),E(r)&&(d(r.key),a=""+r.key),"key"in r){t={};for(var j in r)j!=="key"&&(t[j]=r[j])}else t=r;return a&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),M(e,a,u,l,o(),t,O,S)}function w(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var v=ee,g=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),V=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),J=Symbol.for("react.suspense"),X=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),h=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),p=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,y=Object.prototype.hasOwnProperty,Q=Array.isArray,k=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var N,C={},Y=v["react-stack-bottom-frame"].bind(v,c)(),I=k(m(c)),$={};_.Fragment=T,_.jsx=function(e,r,t,n,l){var u=1e4>p.recentlyCreatedOwnerStacks++;return x(e,r,t,!1,n,l,u?Error("react-stack-top-frame"):Y,u?k(m(e)):I)},_.jsxs=function(e,r,t,n,l){var u=1e4>p.recentlyCreatedOwnerStacks++;return x(e,r,t,!0,n,l,u?Error("react-stack-top-frame"):Y,u?k(m(e)):I)}}()),_}process.env.NODE_ENV==="production"?P.exports=re():P.exports=te();var A=P.exports;const ne=({logo:s,title:i})=>A.jsxs("header",{className:"flex items-center justify-between",children:[s&&A.jsx("img",{src:s,alt:"Logo",className:"h-8"}),i&&A.jsx("h1",{className:"text-xl text-success font-bold",children:i}),"배포테스트"]});exports.Header=ne;
+  <%s key={someKey} {...props} />`,l,i,j,i),V[i+l]=!0)}if(i=null,n!==void 0&&(w(n),i=""+n),u(o)&&(w(o.key),i=""+o.key),"key"in o){n={};for(var F in o)F!=="key"&&(n[F]=o[F])}else n=o;return i&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),O(e,i,x,g,c(),n,M,Y)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===A&&e._store&&(e._store.validated=1)}var h=v,A=Symbol.for("react.transitional.element"),t=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),S=Symbol.for("react.context"),a=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),H=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),B=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,K=Array.isArray,D=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var z,G={},U=h["react-stack-bottom-frame"].bind(h,d)(),q=D(p(d)),V={};$.Fragment=E,$.jsx=function(e,o,n,l,g){var x=1e4>B.recentlyCreatedOwnerStacks++;return T(e,o,n,!1,l,g,x?Error("react-stack-top-frame"):U,x?D(p(e)):q)},$.jsxs=function(e,o,n,l,g){var x=1e4>B.recentlyCreatedOwnerStacks++;return T(e,o,n,!0,l,g,x?Error("react-stack-top-frame"):U,x?D(p(e)):q)}}()),$}process.env.NODE_ENV==="production"?W.exports=re():W.exports=te();var r=W.exports;const oe=({logo:f,navList:s,colors:w,sidebarPosition:p="left"})=>{const[c,d]=v.useState(null),[u,b]=v.useState(!1),[k,O]=v.useState(null),[T,y]=v.useState(!1),h=v.useRef(null),t={...{headerBg:"bg-white",sidebarBg:"bg-white",sidebarGradientFrom:"from-white",sidebarGradientTo:"to-gray-50",dropdownBg:"bg-white",submenuBg:"bg-gray-50/50",titleText:"bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent",navText:"text-gray-600",navTextHover:"hover:text-primary",sidebarTitleText:"bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",sidebarNavText:"text-gray-700",sidebarNavTextHover:"hover:text-primary",submenuText:"text-gray-600",submenuTextHover:"hover:text-primary",primary:"bg-primary",primaryDark:"bg-primary-dark",accent:"bg-primary",border:"border-gray-100",dropdownBorder:"border-gray-200",shadow:"shadow-sm",sidebarShadow:"shadow-2xl",overlayBg:"bg-black",overlayOpacity:"bg-opacity-50"},...w||{}},E=a=>{d(c===a?null:a)},C=a=>{O(k===a?null:a)},P=()=>{y(!0),b(!u)},_=()=>{y(!0),b(!1)},S=()=>{y(!1),b(!1)};return v.useEffect(()=>{const a=m=>{h.current&&!h.current.contains(m.target)&&d(null)};return document.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a)}},[]),v.useEffect(()=>(u?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset"}),[u]),r.jsxs(r.Fragment,{children:[r.jsx("header",{className:`w-full ${t.headerBg} ${t.shadow} border-b ${t.border} sticky top-0 z-99`,children:r.jsxs("div",{className:"w-full max-w-[1240px] px-5 mx-auto flex items-center justify-between h-14 md:h-16",children:[r.jsx("div",{className:"flex items-center space-x-4",children:f&&r.jsx("a",{href:"/",children:r.jsx("img",{src:f,alt:"Logo",className:"h-7 w-auto object-contain md:h-8 cursor-pointer"})})}),r.jsxs("div",{className:"flex items-center space-x-6",ref:h,children:[r.jsx("nav",{className:"hidden md:flex items-center space-x-6",children:s==null?void 0:s.map(a=>{var m;return r.jsxs("div",{className:"relative",children:[r.jsx("button",{onClick:()=>a.sub?E(a.idx):void 0,className:`${t.navText} ${t.navTextHover} transition-colors duration-200 font-medium flex items-center`,children:a.sub?r.jsxs(r.Fragment,{children:[a.name,r.jsx("svg",{className:"w-4 h-4 ml-1",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}):r.jsx("a",{href:a.path,children:a.name})}),r.jsxs("div",{className:`absolute top-[44px] min-w-[100px] w-auto ${t.dropdownBg} border ${t.dropdownBorder} rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out transform ${a.idx===(s==null?void 0:s.length)?"right-0":"left-1/2 transform -translate-x-1/2"} ${c===a.idx?"opacity-100 translate-y-0 pointer-events-auto":"opacity-0 -translate-y-2 pointer-events-none"}`,children:[r.jsx("div",{className:`absolute -top-2 w-4 h-4 ${t.dropdownBg} border-l border-t ${t.dropdownBorder} transform rotate-45 ${a.idx===(s==null?void 0:s.length)?"right-4":"left-1/2 -translate-x-1/2"}`}),r.jsx("div",{className:"py-2",children:(m=a.sub)==null?void 0:m.map(N=>r.jsx("a",{href:N.path,className:`block px-4 py-2 text-sm whitespace-nowrap ${t.submenuText} hover:bg-gray-100 ${t.submenuTextHover} transition-colors duration-200`,onClick:()=>d(null),children:N.name},N.idx))})]})]},a.idx)})}),r.jsx("button",{className:`md:hidden p-2 rounded-lg ${t.navText} hover:bg-gray-100 transition-colors duration-200`,onClick:P,children:r.jsx("svg",{className:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})]})}),r.jsx("div",{className:`fixed inset-0 ${t.overlayBg} z-50 md:hidden ${u?`${t.overlayOpacity} backdrop-blur-sm`:"bg-opacity-0 backdrop-blur-none pointer-events-none"} ${T?"transition-all duration-300 ease-in-out":""}`,onClick:_}),r.jsx("div",{className:`fixed top-0 ${p==="left"?"left-0":"right-0"} h-full w-4/5 xsm:w-80 ${t.sidebarBg} ${t.sidebarShadow} transform z-50 md:hidden ${u?"translate-x-0":p==="left"?"-translate-x-full":"translate-x-full"} ${T?"transition-all duration-300 ease-in-out":""}`,children:r.jsxs("div",{className:`flex flex-col h-full bg-gradient-to-b ${t.sidebarGradientFrom} ${t.sidebarGradientTo}`,children:[r.jsxs("div",{className:`flex items-center justify-between p-4 border-b ${t.border} ${t.sidebarBg}/80 backdrop-blur-sm`,children:[r.jsxs("div",{className:"flex items-center space-x-3",children:[r.jsx("div",{className:`w-2 h-8 bg-gradient-to-b ${t.primary} ${t.primaryDark} rounded-full`}),r.jsx("h2",{className:`text-xl font-bold ${t.sidebarTitleText}`,children:"Menu"})]}),r.jsx("button",{onClick:_,className:"p-2 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200",children:r.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]}),r.jsx("nav",{className:"flex-1 overflow-y-auto ",children:r.jsx("ul",{className:"",children:s==null?void 0:s.map(a=>r.jsx("li",{children:a.sub?r.jsxs("div",{className:`${t.dropdownBg}  ${t.shadow} border-b ${t.border} overflow-hidden`,children:[r.jsxs("button",{onClick:()=>C(a.idx),className:`w-full flex items-center justify-between p-4 text-left ${t.sidebarNavText} hover:bg-gray-50 transition-all duration-200 group`,children:[r.jsxs("div",{className:"flex items-center space-x-3",children:[r.jsx("div",{className:`w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`}),r.jsx("span",{className:`font-semibold text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,children:a.name})]}),r.jsx("svg",{className:`shrink-0 w-4 h-4 text-gray-400 transition-all duration-200 ${k===a.idx?"rotate-180 text-primary":"group-hover:text-gray-600"}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),r.jsx("div",{className:`overflow-hidden transition-all duration-300 ease-in-out ${k===a.idx?"max-h-96 opacity-100":"max-h-0 opacity-0"}`,children:r.jsx("div",{className:`${t.submenuBg} border-t ${t.border}`,children:r.jsx("ul",{className:"py-2",children:a.sub.map(m=>r.jsx("li",{children:r.jsxs("a",{href:m.path,className:`px-6 py-3 text-sm ${t.submenuText} hover:bg-white ${t.submenuTextHover} transition-all duration-200 flex items-center space-x-2 group`,onClick:S,children:[r.jsx("div",{className:"w-1 h-1 bg-gray-300 rounded-full group-hover:bg-primary transition-colors duration-200"}),r.jsx("span",{children:m.name})]})},m.idx))})})})]}):r.jsx("a",{href:a.path,className:`block p-4 ${t.sidebarNavText} hover:bg-white ${t.sidebarNavTextHover} transition-all duration-200 font-semibold ${t.dropdownBg} ${t.shadow} border-b ${t.border} group`,onClick:S,children:r.jsxs("div",{className:"flex items-center space-x-3",children:[r.jsx("div",{className:`w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`}),r.jsx("span",{className:`text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,children:a.name})]})})},a.idx))})})]})})]})};exports.Header=oe;

package/dist/index.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Pretendard,ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Fira Mono,ui-monospace,SFMono-Regular,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.flex{display:flex}.h-8{height:2rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.text-\[36px\]{font-size:36px}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-success{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Pretendard,ui-sans-serif,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Fira Mono,ui-monospace,SFMono-Regular,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.-top-2{top:-.5rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-\[44px\]{top:44px}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[3000px\]{height:3000px}.h-full{height:100%}.max-h-0{max-height:0px}.max-h-96{max-height:24rem}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-2{width:.5rem}.w-4{width:1rem}.w-4\/5{width:80%}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-auto{width:auto}.w-full{width:100%}.min-w-\[100px\]{min-width:100px}.max-w-\[1240px\]{max-width:1240px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-2{--tw-translate-y: -.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-purple-200{--tw-border-opacity: 1;border-color:rgb(233 213 255 / var(--tw-border-opacity, 1))}.border-purple-300{--tw-border-opacity: 1;border-color:rgb(216 180 254 / var(--tw-border-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-300{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.bg-gray-50\/50{background-color:#f9fafb80}.bg-gray-700\/50{background-color:#37415180}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-primary-dark{--tw-bg-opacity: 1;background-color:rgb(30 64 175 / var(--tw-bg-opacity, 1))}.bg-purple-50{--tw-bg-opacity: 1;background-color:rgb(250 245 255 / var(--tw-bg-opacity, 1))}.bg-purple-50\/50{background-color:#faf5ff80}.bg-purple-600{--tw-bg-opacity: 1;background-color:rgb(147 51 234 / var(--tw-bg-opacity, 1))}.bg-purple-700{--tw-bg-opacity: 1;background-color:rgb(126 34 206 / var(--tw-bg-opacity, 1))}.bg-purple-900{--tw-bg-opacity: 1;background-color:rgb(88 28 135 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-opacity-0{--tw-bg-opacity: 0}.bg-opacity-40{--tw-bg-opacity: .4}.bg-opacity-50{--tw-bg-opacity: .5}.bg-opacity-70{--tw-bg-opacity: .7}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-gray-800{--tw-gradient-from: #1f2937 var(--tw-gradient-from-position);--tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-primary{--tw-gradient-from: #2563eb var(--tw-gradient-from-position);--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-50{--tw-gradient-from: #faf5ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-800{--tw-gradient-from: #6b21a8 var(--tw-gradient-from-position);--tw-gradient-to: rgb(107 33 168 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-white{--tw-gradient-from: #fff var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-gray-300{--tw-gradient-to: #d1d5db var(--tw-gradient-to-position)}.to-gray-50{--tw-gradient-to: #f9fafb var(--tw-gradient-to-position)}.to-gray-600{--tw-gradient-to: #4b5563 var(--tw-gradient-to-position)}.to-gray-900{--tw-gradient-to: #111827 var(--tw-gradient-to-position)}.to-primary-dark{--tw-gradient-to: #1e40af var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.to-white{--tw-gradient-to: #fff var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-left{text-align:left}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-purple-700{--tw-text-opacity: 1;color:rgb(126 34 206 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-60{opacity:.6}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur-none{--tw-backdrop-blur: ;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\:text-gray-600:hover{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.hover\:text-primary:hover{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:text-purple-800:hover{--tw-text-opacity: 1;color:rgb(107 33 168 / var(--tw-text-opacity, 1))}.hover\:text-purple-900:hover{--tw-text-opacity: 1;color:rgb(88 28 135 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:bg-primary{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 360px){.xsm\:w-80{width:20rem}}@media (min-width: 768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-16{height:4rem}.md\:h-8{height:2rem}}

package/dist/index.js

@@ -1,5 +1,5 @@
-import ee from "react";
-var S = { exports: {} }, R = {};
+import te, { useState as O, useRef as oe, useEffect as J } from "react";
+var W = { exports: {} }, E = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var S = { exports: {} }, R = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var F;
-function re() {
-  if (F) return R;
-  F = 1;
-  var s = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
-  function d(m, o, c) {
-    var E = null;
-    if (c !== void 0 && (E = "" + c), o.key !== void 0 && (E = "" + o.key), "key" in o) {
-      c = {};
-      for (var b in o)
-        b !== "key" && (c[b] = o[b]);
-    } else c = o;
-    return o = c.ref, {
-      $$typeof: s,
-      type: m,
-      key: E,
-      ref: o !== void 0 ? o : null,
-      props: c
+var X;
+function ae() {
+  if (X) return E;
+  X = 1;
+  var f = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  function v(p, c, d) {
+    var u = null;
+    if (d !== void 0 && (u = "" + d), c.key !== void 0 && (u = "" + c.key), "key" in c) {
+      d = {};
+      for (var b in c)
+        b !== "key" && (d[b] = c[b]);
+    } else d = c;
+    return c = d.ref, {
+      $$typeof: f,
+      type: p,
+      key: u,
+      ref: c !== void 0 ? c : null,
+      props: d
     };
   }
-  return R.Fragment = i, R.jsx = d, R.jsxs = d, R;
+  return E.Fragment = s, E.jsx = v, E.jsxs = v, E;
 }
-var _ = {};
+var R = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,125 +41,125 @@ var _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var D;
-function te() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && function() {
-    function s(e) {
+var L;
+function ne() {
+  return L || (L = 1, process.env.NODE_ENV !== "production" && function() {
+    function f(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
         case T:
           return "Fragment";
-        case z:
+        case P:
           return "Profiler";
-        case U:
+        case C:
           return "StrictMode";
-        case J:
+        case m:
           return "Suspense";
-        case X:
+        case N:
           return "SuspenseList";
-        case B:
+        case Q:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case t:
             return "Portal";
-          case q:
+          case _:
             return (e.displayName || "Context") + ".Provider";
-          case V:
+          case $:
             return (e._context.displayName || "Context") + ".Consumer";
-          case G:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case H:
-            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
-          case g:
-            r = e._payload, e = e._init;
+          case a:
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return o = e.displayName || null, o !== null ? o : f(e.type) || "Memo";
+          case I:
+            o = e._payload, e = e._init;
             try {
-              return s(e(r));
+              return f(e(o));
             } catch {
             }
         }
       return null;
     }
-    function i(e) {
+    function s(e) {
       return "" + e;
     }
-    function d(e) {
+    function v(e) {
       try {
-        i(e);
-        var r = !1;
+        s(e);
+        var o = !1;
       } catch {
-        r = !0;
+        o = !0;
       }
-      if (r) {
-        r = console;
-        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
-          r,
+      if (o) {
+        o = console;
+        var n = o.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          n
-        ), i(e);
+          l
+        ), s(e);
       }
     }
-    function m(e) {
+    function p(e) {
       if (e === T) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
+      if (typeof e == "object" && e !== null && e.$$typeof === I)
         return "<...>";
       try {
-        var r = s(e);
-        return r ? "<" + r + ">" : "<...>";
+        var o = f(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var e = p.A;
+    function c() {
+      var e = B.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function d() {
       return Error("react-stack-top-frame");
     }
-    function E(e) {
-      if (N.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function u(e) {
+      if (H.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function b(e, r) {
-      function t() {
-        y || (y = !0, console.error(
+    function b(e, o) {
+      function n() {
+        z || (z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          r
+          o
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
         configurable: !0
       });
     }
-    function L() {
-      var e = s(this.type);
-      return C[e] || (C[e] = !0, console.error(
+    function j() {
+      var e = f(this.type);
+      return G[e] || (G[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function M(e, r, t, n, l, u, O, A) {
-      return t = u.ref, e = {
-        $$typeof: h,
+    function S(e, o, n, l, g, x, Y, M) {
+      return n = x.ref, e = {
+        $$typeof: A,
         type: e,
-        key: r,
-        props: u,
-        _owner: l
-      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        key: o,
+        props: x,
+        _owner: g
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: L
+        get: j
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,113 +174,428 @@ function te() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: O
+        value: Y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: A
+        value: M
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function P(e, r, t, n, l, u, O, A) {
-      var a = r.children;
-      if (a !== void 0)
-        if (n)
-          if (Q(a)) {
-            for (n = 0; n < a.length; n++)
-              w(a[n]);
-            Object.freeze && Object.freeze(a);
+    function k(e, o, n, l, g, x, Y, M) {
+      var i = o.children;
+      if (i !== void 0)
+        if (l)
+          if (ee(i)) {
+            for (l = 0; l < i.length; l++)
+              w(i[l]);
+            Object.freeze && Object.freeze(i);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else w(a);
-      if (N.call(r, "key")) {
-        a = s(e);
-        var f = Object.keys(r).filter(function(K) {
-          return K !== "key";
+        else w(i);
+      if (H.call(o, "key")) {
+        i = f(e);
+        var y = Object.keys(o).filter(function(re) {
+          return re !== "key";
         });
-        n = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", $[a + n] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+        l = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", q[i + l] || (y = 0 < y.length ? "{" + y.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          n,
-          a,
-          f,
-          a
-        ), $[a + n] = !0);
+          l,
+          i,
+          y,
+          i
+        ), q[i + l] = !0);
       }
-      if (a = null, t !== void 0 && (d(t), a = "" + t), E(r) && (d(r.key), a = "" + r.key), "key" in r) {
-        t = {};
-        for (var j in r)
-          j !== "key" && (t[j] = r[j]);
-      } else t = r;
-      return a && b(
-        t,
+      if (i = null, n !== void 0 && (v(n), i = "" + n), u(o) && (v(o.key), i = "" + o.key), "key" in o) {
+        n = {};
+        for (var F in o)
+          F !== "key" && (n[F] = o[F]);
+      } else n = o;
+      return i && b(
+        n,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), M(
+      ), S(
         e,
-        a,
-        u,
-        l,
-        o(),
-        t,
-        O,
-        A
+        i,
+        x,
+        g,
+        c(),
+        n,
+        Y,
+        M
       );
     }
     function w(e) {
-      typeof e == "object" && e !== null && e.$$typeof === h && e._store && (e._store.validated = 1);
+      typeof e == "object" && e !== null && e.$$typeof === A && e._store && (e._store.validated = 1);
     }
-    var v = ee, h = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), q = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), J = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), p = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, Q = Array.isArray, k = console.createTask ? console.createTask : function() {
+    var h = te, A = Symbol.for("react.transitional.element"), t = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), C = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), $ = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), B = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, ee = Array.isArray, D = console.createTask ? console.createTask : function() {
       return null;
     };
-    v = {
+    h = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var y, C = {}, Y = v["react-stack-bottom-frame"].bind(
-      v,
-      c
-    )(), I = k(m(c)), $ = {};
-    _.Fragment = T, _.jsx = function(e, r, t, n, l) {
-      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
-      return P(
+    var z, G = {}, U = h["react-stack-bottom-frame"].bind(
+      h,
+      d
+    )(), V = D(p(d)), q = {};
+    R.Fragment = T, R.jsx = function(e, o, n, l, g) {
+      var x = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return k(
         e,
-        r,
-        t,
-        !1,
+        o,
         n,
+        !1,
         l,
-        u ? Error("react-stack-top-frame") : Y,
-        u ? k(m(e)) : I
+        g,
+        x ? Error("react-stack-top-frame") : U,
+        x ? D(p(e)) : V
       );
-    }, _.jsxs = function(e, r, t, n, l) {
-      var u = 1e4 > p.recentlyCreatedOwnerStacks++;
-      return P(
+    }, R.jsxs = function(e, o, n, l, g) {
+      var x = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return k(
         e,
-        r,
-        t,
-        !0,
+        o,
         n,
+        !0,
         l,
-        u ? Error("react-stack-top-frame") : Y,
-        u ? k(m(e)) : I
+        g,
+        x ? Error("react-stack-top-frame") : U,
+        x ? D(p(e)) : V
       );
     };
-  }()), _;
+  }()), R;
 }
-process.env.NODE_ENV === "production" ? S.exports = re() : S.exports = te();
-var x = S.exports;
-const ae = ({ logo: s, title: i }) => /* @__PURE__ */ x.jsxs("header", { className: "flex items-center justify-between", children: [
-  s && /* @__PURE__ */ x.jsx("img", { src: s, alt: "Logo", className: "h-8" }),
-  i && /* @__PURE__ */ x.jsx("h1", { className: "text-xl text-success font-bold", children: i }),
-  "배포테스트"
-] });
+process.env.NODE_ENV === "production" ? W.exports = ae() : W.exports = ne();
+var r = W.exports;
+const le = ({
+  logo: f,
+  navList: s,
+  colors: v,
+  sidebarPosition: p = "left"
+}) => {
+  const [c, d] = O(null), [u, b] = O(!1), [j, S] = O(
+    null
+  ), [k, w] = O(!1), h = oe(null), t = { ...{
+    headerBg: "bg-white",
+    sidebarBg: "bg-white",
+    sidebarGradientFrom: "from-white",
+    sidebarGradientTo: "to-gray-50",
+    dropdownBg: "bg-white",
+    submenuBg: "bg-gray-50/50",
+    titleText: "bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent",
+    navText: "text-gray-600",
+    navTextHover: "hover:text-primary",
+    sidebarTitleText: "bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",
+    sidebarNavText: "text-gray-700",
+    sidebarNavTextHover: "hover:text-primary",
+    submenuText: "text-gray-600",
+    submenuTextHover: "hover:text-primary",
+    primary: "bg-primary",
+    primaryDark: "bg-primary-dark",
+    accent: "bg-primary",
+    border: "border-gray-100",
+    dropdownBorder: "border-gray-200",
+    shadow: "shadow-sm",
+    sidebarShadow: "shadow-2xl",
+    overlayBg: "bg-black",
+    overlayOpacity: "bg-opacity-50"
+  }, ...v || {} }, T = (a) => {
+    d(c === a ? null : a);
+  }, C = (a) => {
+    S(j === a ? null : a);
+  }, P = () => {
+    w(!0), b(!u);
+  }, $ = () => {
+    w(!0), b(!1);
+  }, _ = () => {
+    w(!1), b(!1);
+  };
+  return J(() => {
+    const a = (m) => {
+      h.current && !h.current.contains(m.target) && d(null);
+    };
+    return document.addEventListener("mousedown", a), () => {
+      document.removeEventListener("mousedown", a);
+    };
+  }, []), J(() => (u ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+    document.body.style.overflow = "unset";
+  }), [u]), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx(
+      "header",
+      {
+        className: `w-full ${t.headerBg} ${t.shadow} border-b ${t.border} sticky top-0 z-99`,
+        children: /* @__PURE__ */ r.jsxs("div", { className: "w-full max-w-[1240px] px-5 mx-auto flex items-center justify-between h-14 md:h-16", children: [
+          /* @__PURE__ */ r.jsx("div", { className: "flex items-center space-x-4", children: f && /* @__PURE__ */ r.jsx("a", { href: "/", children: /* @__PURE__ */ r.jsx(
+            "img",
+            {
+              src: f,
+              alt: "Logo",
+              className: "h-7 w-auto object-contain md:h-8 cursor-pointer"
+            }
+          ) }) }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-6", ref: h, children: [
+            /* @__PURE__ */ r.jsx("nav", { className: "hidden md:flex items-center space-x-6", children: s == null ? void 0 : s.map((a) => {
+              var m;
+              return /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ r.jsx(
+                  "button",
+                  {
+                    onClick: () => a.sub ? T(a.idx) : void 0,
+                    className: `${t.navText} ${t.navTextHover} transition-colors duration-200 font-medium flex items-center`,
+                    children: a.sub ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                      a.name,
+                      /* @__PURE__ */ r.jsx(
+                        "svg",
+                        {
+                          className: "w-4 h-4 ml-1",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ r.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M19 9l-7 7-7-7"
+                            }
+                          )
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ r.jsx("a", { href: a.path, children: a.name })
+                  }
+                ),
+                /* @__PURE__ */ r.jsxs(
+                  "div",
+                  {
+                    className: `absolute top-[44px] min-w-[100px] w-auto ${t.dropdownBg} border ${t.dropdownBorder} rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out transform ${a.idx === (s == null ? void 0 : s.length) ? "right-0" : "left-1/2 transform -translate-x-1/2"} ${c === a.idx ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-2 pointer-events-none"}`,
+                    children: [
+                      /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          className: `absolute -top-2 w-4 h-4 ${t.dropdownBg} border-l border-t ${t.dropdownBorder} transform rotate-45 ${a.idx === (s == null ? void 0 : s.length) ? "right-4" : "left-1/2 -translate-x-1/2"}`
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsx("div", { className: "py-2", children: (m = a.sub) == null ? void 0 : m.map((N) => /* @__PURE__ */ r.jsx(
+                        "a",
+                        {
+                          href: N.path,
+                          className: `block px-4 py-2 text-sm whitespace-nowrap ${t.submenuText} hover:bg-gray-100 ${t.submenuTextHover} transition-colors duration-200`,
+                          onClick: () => d(null),
+                          children: N.name
+                        },
+                        N.idx
+                      )) })
+                    ]
+                  }
+                )
+              ] }, a.idx);
+            }) }),
+            /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                className: `md:hidden p-2 rounded-lg ${t.navText} hover:bg-gray-100 transition-colors duration-200`,
+                onClick: P,
+                children: /* @__PURE__ */ r.jsx(
+                  "svg",
+                  {
+                    className: "w-6 h-6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ r.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M4 6h16M4 12h16M4 18h16"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        className: `fixed inset-0 ${t.overlayBg} z-50 md:hidden ${u ? `${t.overlayOpacity} backdrop-blur-sm` : "bg-opacity-0 backdrop-blur-none pointer-events-none"} ${k ? "transition-all duration-300 ease-in-out" : ""}`,
+        onClick: $
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        className: `fixed top-0 ${p === "left" ? "left-0" : "right-0"} h-full w-4/5 xsm:w-80 ${t.sidebarBg} ${t.sidebarShadow} transform z-50 md:hidden ${u ? "translate-x-0" : p === "left" ? "-translate-x-full" : "translate-x-full"} ${k ? "transition-all duration-300 ease-in-out" : ""}`,
+        children: /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: `flex flex-col h-full bg-gradient-to-b ${t.sidebarGradientFrom} ${t.sidebarGradientTo}`,
+            children: [
+              /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: `flex items-center justify-between p-4 border-b ${t.border} ${t.sidebarBg}/80 backdrop-blur-sm`,
+                  children: [
+                    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                      /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          className: `w-2 h-8 bg-gradient-to-b ${t.primary} ${t.primaryDark} rounded-full`
+                        }
+                      ),
+                      /* @__PURE__ */ r.jsx(
+                        "h2",
+                        {
+                          className: `text-xl font-bold ${t.sidebarTitleText}`,
+                          children: "Menu"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ r.jsx(
+                      "button",
+                      {
+                        onClick: $,
+                        className: "p-2 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200",
+                        children: /* @__PURE__ */ r.jsx(
+                          "svg",
+                          {
+                            className: "w-5 h-5",
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            children: /* @__PURE__ */ r.jsx(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M6 18L18 6M6 6l12 12"
+                              }
+                            )
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r.jsx("nav", { className: "flex-1 overflow-y-auto ", children: /* @__PURE__ */ r.jsx("ul", { className: "", children: s == null ? void 0 : s.map((a) => /* @__PURE__ */ r.jsx("li", { children: a.sub ? /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: `${t.dropdownBg}  ${t.shadow} border-b ${t.border} overflow-hidden`,
+                  children: [
+                    /* @__PURE__ */ r.jsxs(
+                      "button",
+                      {
+                        onClick: () => C(a.idx),
+                        className: `w-full flex items-center justify-between p-4 text-left ${t.sidebarNavText} hover:bg-gray-50 transition-all duration-200 group`,
+                        children: [
+                          /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                            /* @__PURE__ */ r.jsx(
+                              "div",
+                              {
+                                className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
+                              }
+                            ),
+                            /* @__PURE__ */ r.jsx(
+                              "span",
+                              {
+                                className: `font-semibold text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
+                                children: a.name
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ r.jsx(
+                            "svg",
+                            {
+                              className: `shrink-0 w-4 h-4 text-gray-400 transition-all duration-200 ${j === a.idx ? "rotate-180 text-primary" : "group-hover:text-gray-600"}`,
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ r.jsx(
+                                "path",
+                                {
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2,
+                                  d: "M19 9l-7 7-7-7"
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: `overflow-hidden transition-all duration-300 ease-in-out ${j === a.idx ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`,
+                        children: /* @__PURE__ */ r.jsx(
+                          "div",
+                          {
+                            className: `${t.submenuBg} border-t ${t.border}`,
+                            children: /* @__PURE__ */ r.jsx("ul", { className: "py-2", children: a.sub.map((m) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsxs(
+                              "a",
+                              {
+                                href: m.path,
+                                className: `px-6 py-3 text-sm ${t.submenuText} hover:bg-white ${t.submenuTextHover} transition-all duration-200 flex items-center space-x-2 group`,
+                                onClick: _,
+                                children: [
+                                  /* @__PURE__ */ r.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full group-hover:bg-primary transition-colors duration-200" }),
+                                  /* @__PURE__ */ r.jsx("span", { children: m.name })
+                                ]
+                              }
+                            ) }, m.idx)) })
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ r.jsx(
+                "a",
+                {
+                  href: a.path,
+                  className: `block p-4 ${t.sidebarNavText} hover:bg-white ${t.sidebarNavTextHover} transition-all duration-200 font-semibold ${t.dropdownBg} ${t.shadow} border-b ${t.border} group`,
+                  onClick: _,
+                  children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
+                    /* @__PURE__ */ r.jsx(
+                      "div",
+                      {
+                        className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
+                      }
+                    ),
+                    /* @__PURE__ */ r.jsx(
+                      "span",
+                      {
+                        className: `text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
+                        children: a.name
+                      }
+                    )
+                  ] })
+                }
+              ) }, a.idx)) }) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 export {
-  ae as Header
+  le as Header
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextlevel_korea/design-system",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "description": "A modern React design system built with TypeScript and Tailwind CSS - The NextLevel Design System",
   "keywords": [