@nextlevel_korea/design-system 1.1.2 → 1.1.4

package/README.md

@@ -25,6 +25,185 @@ function App() {
 }
 ```
 
+## ⚠️ 중요: 스타일 적용 방법
+
+이 라이브러리를 사용할 때 **반드시 스타일을 import**해야 합니다:
+
+### 방법 1: CSS 파일 직접 import (권장)
+
+```tsx
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 이 줄이 필수입니다!
+
+function App() {
+  return <Header logo="https://example.com/logo.png" />;
+}
+```
+
+### 방법 2: 전역 CSS 파일에서 import
+
+```css
+/* styles.css */
+@import '@nextlevel_korea/design-system/styles';
+```
+
+### 방법 3: Next.js에서 사용
+
+```tsx
+// pages/_app.tsx 또는 app/layout.tsx
+import '@nextlevel_korea/design-system/styles';
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+```
+
+### 방법 4: Vite에서 사용
+
+```tsx
+// main.tsx
+import '@nextlevel_korea/design-system/styles';
+import { Header } from '@nextlevel_korea/design-system';
+```
+
+## 🔧 문제 해결
+
+### 스타일이 적용되지 않는 경우
+
+#### 1. 스타일 import 확인
+
+가장 일반적인 문제는 스타일을 import하지 않는 것입니다:
+
+```tsx
+// ❌ 잘못된 사용법
+import { Header } from '@nextlevel_korea/design-system';
+// 스타일 import가 없음!
+
+// ✅ 올바른 사용법
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 필수!
+```
+
+#### 2. Tailwind CSS 충돌 해결
+
+프로젝트에 Tailwind CSS가 이미 설치되어 있는 경우:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextlevel_korea/design-system/dist/**/*.js', // 이 줄 추가
+  ],
+  // 라이브러리의 커스텀 색상을 추가
+  theme: {
+    extend: {
+      colors: {
+        success: '#22c55e',
+        warning: '#eab308',
+        danger: '#ef4444',
+        info: '#0ea5e9',
+        muted: '#6b7280',
+      },
+    },
+  },
+};
+```
+
+#### 3. CSS 우선순위 문제
+
+다른 CSS가 라이브러리 스타일을 덮어쓰는 경우:
+
+```css
+/* styles.css */
+/* 라이브러리 스타일을 먼저 import */
+@import '@nextlevel_korea/design-system/styles';
+
+/* 그 다음에 프로젝트 스타일 */
+@import './your-styles.css';
+```
+
+#### 4. 번들러 설정 확인
+
+**Vite에서 사용 시:**
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  optimizeDeps: {
+    include: ['@nextlevel_korea/design-system'],
+  },
+});
+```
+
+**Webpack에서 사용 시:**
+
+```js
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: {
+      '@nextlevel_korea/design-system': require.resolve(
+        '@nextlevel_korea/design-system'
+      ),
+    },
+  },
+};
+```
+
+#### 5. TypeScript 설정 확인
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  }
+}
+```
+
+### 일반적인 오류와 해결책
+
+#### 오류: "Cannot resolve module '@nextlevel_korea/design-system/styles'"
+
+```bash
+# 패키지 재설치
+npm uninstall @nextlevel_korea/design-system
+npm install @nextlevel_korea/design-system
+```
+
+#### 오류: "Module not found"
+
+```bash
+# node_modules 삭제 후 재설치
+rm -rf node_modules package-lock.json
+npm install
+```
+
+#### 스타일이 일부만 적용되는 경우
+
+Tailwind CSS의 purge 설정을 확인하세요:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@nextlevel_korea/design-system/dist/**/*.js',
+  ],
+  // safelist 추가 (필요한 경우)
+  safelist: [
+    'text-success',
+    'text-warning',
+    'text-danger',
+    'text-info',
+    'text-muted',
+  ],
+};
+```
+
 ## 📖 Storybook 문서
 
 우리 디자인 시스템을 탐색하고 이해하는 가장 좋은 방법은 인터랙티브 Storybook 문서를 통하는 것입니다.
@@ -62,24 +241,47 @@ npm run storybook
 
 ### Header
 
-커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다.
+커스터마이징 가능한 로고가 있는 유연한 헤더 컴포넌트입니다. 모든 화면 크기에서 최적화된 반응형 디자인을 제공합니다.
 
 ```tsx
-import { Header } from '@nextlevel/design-system';
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles'; // 필수!
 
 // 기본 사용법
-<Header logo="https://example.com/logo.png" />;
+<Header logo="https://example.com/logo.png" title="My App" />
+
+// 로고만 있는 헤더
+<Header logo="https://example.com/logo.png" />
+
+// 제목만 있는 헤더
+<Header title="My Application" />
 ```
 
 **Props:**
 
-- `logo` (string) - 로고 이미지 URL
+- `logo` (string, optional) - 로고 이미지 URL
+- `title` (string, optional) - 헤더 제목
+
+**반응형 스타일 클래스:**
+
+- **레이아웃**: `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 예제:**
 
 - 플레이스홀더 로고가 있는 기본 헤더
 - 커스텀 브랜드 헤더
 - 작은 컴팩트 헤더
+- 반응형 테스트 (다양한 화면 크기)
 
 ## 🛠️ 개발
 
@@ -175,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은 다음으로 구성되어 있습니다:
@@ -214,3 +543,85 @@ MIT 라이선스 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세
 ---
 
 NextLevel 팀이 ❤️로 만들었습니다
+
+## 📝 완전한 사용 예제
+
+### React + Vite 프로젝트
+
+```tsx
+// src/App.tsx
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header
+        logo="https://via.placeholder.com/150x50/2563eb/ffffff?text=LOGO"
+        title="My Awesome App"
+      />
+      <main className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold text-gray-900">Welcome to My App</h1>
+      </main>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Next.js 프로젝트
+
+```tsx
+// app/layout.tsx
+import '@nextlevel_korea/design-system/styles';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```tsx
+// app/page.tsx
+import { Header } from '@nextlevel_korea/design-system';
+
+export default function Home() {
+  return (
+    <div>
+      <Header logo="/logo.png" title="Next.js App" />
+      <main>
+        <h1>Welcome to Next.js!</h1>
+      </main>
+    </div>
+  );
+}
+```
+
+### Create React App
+
+```tsx
+// src/App.js
+import { Header } from '@nextlevel_korea/design-system';
+import '@nextlevel_korea/design-system/styles';
+
+function App() {
+  return (
+    <div className="App">
+      <Header logo="https://example.com/logo.png" title="React App" />
+      <header className="App-header">
+        <p>Edit src/App.js and save to reload.</p>
+      </header>
+    </div>
+  );
+}
+
+export default App;
+```

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

@@ -0,0 +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}.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}}