@nextlevel_korea/design-system 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Footer/Footer.js +45 -0
  2. package/dist/components/Header/Header.js +106 -0
  3. package/dist/index.css +3 -1
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +4 -735
  6. package/package.json +10 -7
package/dist/components/Footer/Footer.js ADDED
@@ -0,0 +1,45 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Image from 'next/image';
3
+ import Link from 'next/link';
4
+ const Footer = ({ logo, companyInfo, colors }) => {
5
+ // 기본 색상값
6
+ const defaultColors = {
7
+ footerBg: 'bg-gray-900',
8
+ footerGradientFrom: 'from-gray-900',
9
+ footerGradientTo: 'to-gray-800',
10
+ titleText: 'text-white',
11
+ linkText: 'text-gray-300',
12
+ linkTextHover: 'hover:text-white',
13
+ copyrightText: 'text-gray-400',
14
+ primary: 'bg-primary',
15
+ primaryDark: 'bg-primary-dark',
16
+ accent: 'bg-primary',
17
+ border: 'border-gray-700',
18
+ shadow: 'shadow-lg',
19
+ };
20
+ // 사용자 정의 색상과 기본 색상 병합
21
+ const finalColors = { ...defaultColors, ...(colors || {}) };
22
+ // 상단으로 스크롤하는 함수
23
+ const scrollToTop = () => {
24
+ window.scrollTo({
25
+ top: 0,
26
+ behavior: 'smooth',
27
+ });
28
+ };
29
+ return (_jsxs("footer", { className: `w-full ${finalColors.footerBg} ${finalColors.shadow} relative`, children: [_jsx("div", { className: "max-w-[1240px] mx-auto px-5 relative", children: _jsx("div", { className: "absolute -top-6 right-5 z-20", children: _jsx("button", { onClick: scrollToTop, className: `p-3 rounded-full ${finalColors.linkText} ${finalColors.linkTextHover} transition-all duration-300 hover:scale-110 bg-gray-800/80 backdrop-blur-md border border-gray-600/50 shadow-lg`, "aria-label": "\uB9E8 \uC704\uB85C \uC774\uB3D9", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 10l7-7m0 0l7 7m-7-7v18" }) }) }) }) }), _jsxs("div", { className: `bg-gradient-to-b ${finalColors.footerGradientFrom} ${finalColors.footerGradientTo} relative overflow-hidden`, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
30
+ background: 'radial-gradient(ellipse 600px 300px at center top, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.01) 70%, transparent 85%)',
31
+ } }), _jsxs("div", { className: "max-w-[1240px] mx-auto px-5 pt-12 pb-4 relative z-10", children: [_jsxs("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-8 mb-8", children: [_jsxs("div", { className: "flex-1 max-w-md", children: [logo && (_jsx("div", { className: "mb-4", children: _jsx(Image, { src: logo, alt: "Logo", width: 160, height: 40, className: "h-10 w-auto object-contain" }) })), companyInfo && (_jsxs("div", { className: "mb-4 break-all", children: [_jsx("p", { className: `text-sm ${finalColors.linkText} `, children: [
32
+ companyInfo.name && `회사명: ${companyInfo.name}`,
33
+ companyInfo.ceo && `대표자: ${companyInfo.ceo}`,
34
+ companyInfo.businessNumber &&
35
+ `사업자등록번호: ${companyInfo.businessNumber}`,
36
+ ]
37
+ .filter(Boolean)
38
+ .join(' | ') }), _jsx("p", { className: `text-sm ${finalColors.linkText} `, children: [
39
+ companyInfo.phone && `연락처: ${companyInfo.phone}`,
40
+ companyInfo.email && `이메일: ${companyInfo.email}`,
41
+ ]
42
+ .filter(Boolean)
43
+ .join(' | ') }), companyInfo.address && (_jsxs("p", { className: `text-sm ${finalColors.linkText} `, children: ["\uC8FC\uC18C: ", companyInfo.address] }))] }))] }), _jsx("div", { className: "flex-1" })] }), _jsx("div", { className: `border-t ${finalColors.border} pt-4`, children: _jsx("div", { className: "text-center", children: _jsxs("p", { className: `text-sm ${finalColors.copyrightText} flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-1`, children: [_jsx("span", { children: "\u00A9 2025 NextLevel, all rights reserved \u2014" }), _jsxs("span", { className: "flex items-center space-x-1", children: [_jsx("span", { children: "A product by team" }), _jsx(Link, { href: "https://prosite.ai.kr/", target: "_blank", rel: "noopener noreferrer", className: "pl-1 cursor-pointer hover:scale-105 transition-transform duration-300", children: _jsx(Image, { src: "/images/prosite-logo.png", alt: "ProSite", width: 80, height: 16, className: "h-4 w-auto object-contain" }) })] })] }) }) })] })] })] }));
44
+ };
45
+ export default Footer;
package/dist/components/Header/Header.js ADDED
@@ -0,0 +1,106 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useState, useEffect, useRef } from 'react';
3
+ import Image from 'next/image';
4
+ import Link from 'next/link';
5
+ const Header = ({ logo, navList, eventButton, colors, sidebarPosition = 'left', }) => {
6
+ const [openDropdown, setOpenDropdown] = useState(null);
7
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
8
+ const [openSidebarDropdown, setOpenSidebarDropdown] = useState(null);
9
+ const [isAnimating, setIsAnimating] = useState(false);
10
+ const dropdownRef = useRef(null);
11
+ // 기본 색상값
12
+ const defaultColors = {
13
+ headerBg: 'bg-white',
14
+ sidebarBg: 'bg-white',
15
+ sidebarGradientFrom: 'from-white',
16
+ sidebarGradientTo: 'to-gray-50',
17
+ dropdownBg: 'bg-white',
18
+ submenuBg: 'bg-gray-50/50',
19
+ titleText: 'bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent',
20
+ navText: 'text-gray-600',
21
+ navTextHover: 'hover:text-primary',
22
+ sidebarTitleText: 'bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent',
23
+ sidebarNavText: 'text-gray-700',
24
+ sidebarNavTextHover: 'hover:text-primary',
25
+ submenuText: 'text-gray-600',
26
+ submenuTextHover: 'hover:text-primary',
27
+ primary: 'bg-primary',
28
+ primaryDark: 'bg-primary-dark',
29
+ accent: 'bg-primary',
30
+ border: 'border-gray-100',
31
+ dropdownBorder: 'border-gray-200',
32
+ shadow: 'shadow-sm',
33
+ sidebarShadow: 'shadow-2xl',
34
+ overlayBg: 'bg-black',
35
+ overlayOpacity: 'bg-opacity-50',
36
+ };
37
+ // 사용자 정의 색상과 기본 색상 병합
38
+ const finalColors = { ...defaultColors, ...(colors || {}) };
39
+ const handleDropdownClick = (idx) => {
40
+ setOpenDropdown(openDropdown === idx ? null : idx);
41
+ };
42
+ const handleSidebarDropdownClick = (idx) => {
43
+ setOpenSidebarDropdown(openSidebarDropdown === idx ? null : idx);
44
+ };
45
+ const toggleSidebar = () => {
46
+ setIsAnimating(true);
47
+ setIsSidebarOpen(!isSidebarOpen);
48
+ };
49
+ const closeSidebarWithAnimation = () => {
50
+ setIsAnimating(true);
51
+ setIsSidebarOpen(false);
52
+ };
53
+ // 페이지 이동 시 사이드바 즉시 닫기
54
+ const handlePageNavigation = () => {
55
+ // 이벤트 전파를 막지 않음 (링크가 정상 작동하도록)
56
+ setIsAnimating(false);
57
+ setIsSidebarOpen(false);
58
+ };
59
+ useEffect(() => {
60
+ const handleClickOutside = (event) => {
61
+ if (dropdownRef.current &&
62
+ !dropdownRef.current.contains(event.target)) {
63
+ setOpenDropdown(null);
64
+ }
65
+ };
66
+ document.addEventListener('mousedown', handleClickOutside);
67
+ return () => {
68
+ document.removeEventListener('mousedown', handleClickOutside);
69
+ };
70
+ }, []);
71
+ // 사이드바 열려있을 때 body 스크롤 방지
72
+ useEffect(() => {
73
+ if (isSidebarOpen) {
74
+ document.body.style.overflow = 'hidden';
75
+ }
76
+ else {
77
+ document.body.style.overflow = 'unset';
78
+ }
79
+ return () => {
80
+ document.body.style.overflow = 'unset';
81
+ };
82
+ }, [isSidebarOpen]);
83
+ return (_jsxs(_Fragment, { children: [_jsx("header", { className: `w-full ${finalColors.headerBg} ${finalColors.shadow} border-b ${finalColors.border} sticky top-0 z-99`, children: _jsxs("div", { className: "w-full max-w-[1240px] px-5 mx-auto flex items-center justify-between h-14 md:h-16", children: [_jsx("div", { className: "flex items-center space-x-4", children: logo && (_jsx(Link, { href: "/", children: _jsx(Image, { src: logo, alt: "Logo", width: 300, height: 300, className: "h-7 w-auto object-contain md:h-8 cursor-pointer" }) })) }), _jsxs("div", { className: "flex items-center space-x-6", ref: dropdownRef, children: [_jsx("nav", { className: "hidden md:flex items-center space-x-6", children: navList?.map((nav) => (_jsxs("div", { className: "relative", children: [_jsx("button", { onClick: () => nav.sub ? handleDropdownClick(nav.idx) : undefined, className: `${finalColors.navText} ${finalColors.navTextHover} transition-colors duration-200 font-medium flex items-center`, children: nav.sub ? (_jsx(_Fragment, { children: nav.name })) : (_jsx(Link, { href: nav.path, children: nav.name })) }), _jsxs("div", { className: `absolute top-[44px] min-w-[100px] w-auto ${finalColors.dropdownBg} border ${finalColors.dropdownBorder} rounded-lg shadow-lg z-50 transition-all duration-300 ease-in-out transform ${nav.idx === navList?.length
84
+ ? 'right-0'
85
+ : 'left-1/2 transform -translate-x-1/2'} ${openDropdown === nav.idx
86
+ ? 'opacity-100 translate-y-0 pointer-events-auto'
87
+ : 'opacity-0 -translate-y-2 pointer-events-none'}`, children: [_jsx("svg", { className: `absolute -top-2 w-4 h-4 ${nav.idx === navList?.length
88
+ ? 'right-4'
89
+ : 'left-1/2 -translate-x-1/2'}`, viewBox: "0 0 24 24", style: {
90
+ fill: 'white',
91
+ filter: 'drop-shadow(0 -1px 0 #e5e7eb)',
92
+ }, children: _jsx("path", { d: "M12 2L2 12h20L12 2z" }) }), _jsx("div", { className: "py-2", children: nav.sub?.map((subItem) => (_jsx(Link, { href: subItem.path, className: `block px-4 py-2 text-sm whitespace-nowrap ${finalColors.submenuText} hover:bg-gray-100 ${finalColors.submenuTextHover} transition-colors duration-200`, onClick: () => setOpenDropdown(null), children: subItem.name }, subItem.idx))) })] })] }, nav.idx))) }), eventButton && (_jsx("button", { onClick: eventButton.onClick, className: `hidden md:block px-4 py-2 rounded font-medium transition-all duration-200 ${eventButton.className ||
93
+ 'bg-primary text-white hover:bg-primary-dark'}`, children: eventButton.text })), _jsx("button", { className: `md:hidden p-2 rounded-lg ${finalColors.navText} hover:bg-gray-100 transition-colors duration-200`, onClick: toggleSidebar, children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })] })] }) }), _jsx("div", { className: `fixed inset-0 ${finalColors.overlayBg} z-50 md:hidden ${isSidebarOpen
94
+ ? `${finalColors.overlayOpacity} backdrop-blur-sm`
95
+ : 'bg-opacity-0 backdrop-blur-none pointer-events-none'} ${isAnimating ? 'transition-all duration-300 ease-in-out' : ''}`, onClick: closeSidebarWithAnimation }), _jsx("div", { className: `fixed top-0 ${sidebarPosition === 'left' ? 'left-0' : 'right-0'} h-full w-4/5 xsm:w-80 ${finalColors.sidebarBg} ${finalColors.sidebarShadow} transform z-50 md:hidden ${isSidebarOpen
96
+ ? 'translate-x-0'
97
+ : sidebarPosition === 'left'
98
+ ? '-translate-x-full'
99
+ : 'translate-x-full'} ${isAnimating ? 'transition-all duration-300 ease-in-out' : ''}`, children: _jsxs("div", { className: `flex flex-col h-full bg-gradient-to-b ${finalColors.sidebarGradientFrom} ${finalColors.sidebarGradientTo}`, children: [_jsxs("div", { className: `flex items-center justify-between p-4 border-b ${finalColors.border} ${finalColors.sidebarBg}/80 backdrop-blur-sm`, children: [_jsx("div", { className: "flex items-center space-x-3", children: logo ? (_jsx(Image, { src: logo, alt: "Logo", width: 120, height: 30, className: "h-6 w-auto object-contain" })) : (_jsx("h2", { className: `text-xl font-bold ${finalColors.sidebarTitleText}`, children: "Menu" })) }), _jsx("button", { onClick: closeSidebarWithAnimation, className: "p-2 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("nav", { className: "flex-1 overflow-y-auto", children: _jsx("ul", { className: "", children: navList?.map((nav) => (_jsx("li", { children: nav.sub ? (_jsxs("div", { className: `${finalColors.dropdownBg} ${finalColors.shadow} border-b ${finalColors.border} overflow-hidden`, children: [_jsxs("button", { onClick: () => handleSidebarDropdownClick(nav.idx), className: `w-full flex items-center justify-between p-4 text-left ${finalColors.sidebarNavText} hover:bg-gray-50 transition-all duration-200 group`, children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: `w-1.5 h-1.5 ${finalColors.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200` }), _jsx("span", { className: `font-semibold text-gray-800 ${finalColors.sidebarNavTextHover} transition-colors duration-200`, children: nav.name })] }), _jsx("svg", { className: `shrink-0 w-4 h-4 text-gray-400 transition-all duration-200 ${openSidebarDropdown === nav.idx
100
+ ? 'rotate-180 text-primary'
101
+ : 'group-hover:text-gray-600'}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-in-out ${openSidebarDropdown === nav.idx
102
+ ? 'max-h-96 opacity-100'
103
+ : 'max-h-0 opacity-0'}`, children: _jsx("div", { className: `${finalColors.submenuBg} border-t ${finalColors.border}`, children: _jsx("ul", { className: "py-2", children: nav.sub.map((subItem) => (_jsx("li", { children: _jsxs(Link, { href: subItem.path, className: `px-6 py-3 text-sm ${finalColors.submenuText} hover:bg-white ${finalColors.submenuTextHover} transition-all duration-200 flex items-center space-x-2 group`, onClick: handlePageNavigation, children: [_jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full group-hover:bg-primary transition-colors duration-200" }), _jsx("span", { children: subItem.name })] }) }, subItem.idx))) }) }) })] })) : (_jsx(Link, { href: nav.path, className: `block p-4 ${finalColors.sidebarNavText} hover:bg-white ${finalColors.sidebarNavTextHover} transition-all duration-200 font-semibold ${finalColors.dropdownBg} ${finalColors.shadow} border-b ${finalColors.border} group`, onClick: handlePageNavigation, children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: `w-1.5 h-1.5 ${finalColors.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200` }), _jsx("span", { className: `text-gray-800 ${finalColors.sidebarNavTextHover} transition-colors duration-200`, children: nav.name })] }) })) }, nav.idx))) }) }), eventButton && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-white/95 backdrop-blur-sm", children: _jsx("button", { onClick: eventButton.onClick, className: `w-full px-4 py-3 rounded font-medium transition-all duration-200 ${eventButton.className ||
104
+ 'bg-primary text-white hover:bg-primary-dark'}`, children: eventButton.text }) }))] }) })] }));
105
+ };
106
+ export default Header;
package/dist/index.css CHANGED
@@ -1 +1,3 @@
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}.-top-6{top:-1.5rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-4{right:1rem}.right-5{right:1.25rem}.top-0{top:0}.top-\[44px\]{top:44px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mt-16{margin-top:4rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-12{height:3rem}.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-full{height:100%}.max-h-0{max-height:0px}.max-h-96{max-height:24rem}.min-h-screen{min-height:100vh}.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-1240,.max-w-\[1240px\]{max-width:1240px}.max-w-md{max-width:28rem}.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))}.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}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.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)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-blue-700{--tw-border-opacity: 1;border-color:rgb(29 78 216 / var(--tw-border-opacity, 1))}.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-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / 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-600\/50{border-color:#4b556380}.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-blue-900{--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / 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{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / 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-800\/80{background-color:#1f2937cc}.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-white\/95{background-color:#fffffff2}.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-blue-900{--tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);--tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-gray-100{--tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.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-gray-900{--tw-gradient-from: #111827 var(--tw-gradient-from-position);--tw-gradient-to: rgb(17 24 39 / 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-blue-800{--tw-gradient-to: #1e40af var(--tw-gradient-to-position)}.to-gray-200{--tw-gradient-to: #e5e7eb var(--tw-gradient-to-position)}.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-800{--tw-gradient-to: #1f2937 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-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.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-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-1{padding-left:.25rem}.pt-12{padding-top:3rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.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-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.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-500{--tw-text-opacity: 1;color:rgb(107 114 128 / 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-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / 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}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.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)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-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-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}.transition-transform{transition-property:transform;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\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;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))}.hover\:scale-110:hover{--tw-scale-x: 1.1;--tw-scale-y: 1.1;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))}.hover\:bg-blue-600:hover{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 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-primary-dark:hover{--tw-bg-opacity: 1;background-color:rgb(30 64 175 / 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-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / 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: 640px){.sm\:flex-row{flex-direction:row}.sm\:space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}}@media (min-width: 768px){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-16{height:4rem}.md\:h-8{height:2rem}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:flex-row{flex-direction:row}}
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,aAAa,CAAC"}
package/dist/index.js CHANGED
@@ -1,735 +1,4 @@
1
- import te, { useState as C, useRef as ae, useEffect as X } from "react";
2
- var W = { exports: {} }, $ = {};
3
- /**
4
- * @license React
5
- * react-jsx-runtime.production.js
6
- *
7
- * Copyright (c) Meta Platforms, Inc. and affiliates.
8
- *
9
- * This source code is licensed under the MIT license found in the
10
- * LICENSE file in the root directory of this source tree.
11
- */
12
- var Z;
13
- function oe() {
14
- if (Z) return $;
15
- Z = 1;
16
- var m = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
17
- function i(p, n, u) {
18
- var h = null;
19
- if (u !== void 0 && (h = "" + u), n.key !== void 0 && (h = "" + n.key), "key" in n) {
20
- u = {};
21
- for (var x in n)
22
- x !== "key" && (u[x] = n[x]);
23
- } else u = n;
24
- return n = u.ref, {
25
- $$typeof: m,
26
- type: p,
27
- key: h,
28
- ref: n !== void 0 ? n : null,
29
- props: u
30
- };
31
- }
32
- return $.Fragment = s, $.jsx = i, $.jsxs = i, $;
33
- }
34
- var E = {};
35
- /**
36
- * @license React
37
- * react-jsx-runtime.development.js
38
- *
39
- * Copyright (c) Meta Platforms, Inc. and affiliates.
40
- *
41
- * This source code is licensed under the MIT license found in the
42
- * LICENSE file in the root directory of this source tree.
43
- */
44
- var I;
45
- function se() {
46
- return I || (I = 1, process.env.NODE_ENV !== "production" && function() {
47
- function m(e) {
48
- if (e == null) return null;
49
- if (typeof e == "function")
50
- return e.$$typeof === K ? null : e.displayName || e.name || null;
51
- if (typeof e == "string") return e;
52
- switch (e) {
53
- case t:
54
- return "Fragment";
55
- case A:
56
- return "Profiler";
57
- case O:
58
- return "StrictMode";
59
- case o:
60
- return "Suspense";
61
- case f:
62
- return "SuspenseList";
63
- case Q:
64
- return "Activity";
65
- }
66
- if (typeof e == "object")
67
- switch (typeof e.tag == "number" && console.error(
68
- "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
69
- ), e.$$typeof) {
70
- case z:
71
- return "Portal";
72
- case _:
73
- return (e.displayName || "Context") + ".Provider";
74
- case P:
75
- return (e._context.displayName || "Context") + ".Consumer";
76
- case S:
77
- var a = e.render;
78
- return e = e.displayName, e || (e = a.displayName || a.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
79
- case T:
80
- return a = e.displayName || null, a !== null ? a : m(e.type) || "Memo";
81
- case G:
82
- a = e._payload, e = e._init;
83
- try {
84
- return m(e(a));
85
- } catch {
86
- }
87
- }
88
- return null;
89
- }
90
- function s(e) {
91
- return "" + e;
92
- }
93
- function i(e) {
94
- try {
95
- s(e);
96
- var a = !1;
97
- } catch {
98
- a = !0;
99
- }
100
- if (a) {
101
- a = console;
102
- var l = a.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
103
- return l.call(
104
- a,
105
- "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
106
- c
107
- ), s(e);
108
- }
109
- }
110
- function p(e) {
111
- if (e === t) return "<>";
112
- if (typeof e == "object" && e !== null && e.$$typeof === G)
113
- return "<...>";
114
- try {
115
- var a = m(e);
116
- return a ? "<" + a + ">" : "<...>";
117
- } catch {
118
- return "<...>";
119
- }
120
- }
121
- function n() {
122
- var e = D.A;
123
- return e === null ? null : e.getOwner();
124
- }
125
- function u() {
126
- return Error("react-stack-top-frame");
127
- }
128
- function h(e) {
129
- if (H.call(e, "key")) {
130
- var a = Object.getOwnPropertyDescriptor(e, "key").get;
131
- if (a && a.isReactWarning) return !1;
132
- }
133
- return e.key !== void 0;
134
- }
135
- function x(e, a) {
136
- function l() {
137
- U || (U = !0, console.error(
138
- "%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)",
139
- a
140
- ));
141
- }
142
- l.isReactWarning = !0, Object.defineProperty(e, "key", {
143
- get: l,
144
- configurable: !0
145
- });
146
- }
147
- function y() {
148
- var e = m(this.type);
149
- return L[e] || (L[e] = !0, console.error(
150
- "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."
151
- )), e = this.props.ref, e !== void 0 ? e : null;
152
- }
153
- function k(e, a, l, c, v, b, M, Y) {
154
- return l = b.ref, e = {
155
- $$typeof: j,
156
- type: e,
157
- key: a,
158
- props: b,
159
- _owner: v
160
- }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
161
- enumerable: !1,
162
- get: y
163
- }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
164
- configurable: !1,
165
- enumerable: !1,
166
- writable: !0,
167
- value: 0
168
- }), Object.defineProperty(e, "_debugInfo", {
169
- configurable: !1,
170
- enumerable: !1,
171
- writable: !0,
172
- value: null
173
- }), Object.defineProperty(e, "_debugStack", {
174
- configurable: !1,
175
- enumerable: !1,
176
- writable: !0,
177
- value: M
178
- }), Object.defineProperty(e, "_debugTask", {
179
- configurable: !1,
180
- enumerable: !1,
181
- writable: !0,
182
- value: Y
183
- }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
184
- }
185
- function R(e, a, l, c, v, b, M, Y) {
186
- var d = a.children;
187
- if (d !== void 0)
188
- if (c)
189
- if (ee(d)) {
190
- for (c = 0; c < d.length; c++)
191
- N(d[c]);
192
- Object.freeze && Object.freeze(d);
193
- } else
194
- console.error(
195
- "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
196
- );
197
- else N(d);
198
- if (H.call(a, "key")) {
199
- d = m(e);
200
- var w = Object.keys(a).filter(function(re) {
201
- return re !== "key";
202
- });
203
- c = 0 < w.length ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}", J[d + c] || (w = 0 < w.length ? "{" + w.join(": ..., ") + ": ...}" : "{}", console.error(
204
- `A props object containing a "key" prop is being spread into JSX:
205
- let props = %s;
206
- <%s {...props} />
207
- React keys must be passed directly to JSX without using spread:
208
- let props = %s;
209
- <%s key={someKey} {...props} />`,
210
- c,
211
- d,
212
- w,
213
- d
214
- ), J[d + c] = !0);
215
- }
216
- if (d = null, l !== void 0 && (i(l), d = "" + l), h(a) && (i(a.key), d = "" + a.key), "key" in a) {
217
- l = {};
218
- for (var B in a)
219
- B !== "key" && (l[B] = a[B]);
220
- } else l = a;
221
- return d && x(
222
- l,
223
- typeof e == "function" ? e.displayName || e.name || "Unknown" : e
224
- ), k(
225
- e,
226
- d,
227
- b,
228
- v,
229
- n(),
230
- l,
231
- M,
232
- Y
233
- );
234
- }
235
- function N(e) {
236
- typeof e == "object" && e !== null && e.$$typeof === j && e._store && (e._store.validated = 1);
237
- }
238
- var g = te, j = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), t = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), P = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), S = Symbol.for("react.forward_ref"), o = Symbol.for("react.suspense"), f = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), G = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), D = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, H = Object.prototype.hasOwnProperty, ee = Array.isArray, F = console.createTask ? console.createTask : function() {
239
- return null;
240
- };
241
- g = {
242
- "react-stack-bottom-frame": function(e) {
243
- return e();
244
- }
245
- };
246
- var U, L = {}, V = g["react-stack-bottom-frame"].bind(
247
- g,
248
- u
249
- )(), q = F(p(u)), J = {};
250
- E.Fragment = t, E.jsx = function(e, a, l, c, v) {
251
- var b = 1e4 > D.recentlyCreatedOwnerStacks++;
252
- return R(
253
- e,
254
- a,
255
- l,
256
- !1,
257
- c,
258
- v,
259
- b ? Error("react-stack-top-frame") : V,
260
- b ? F(p(e)) : q
261
- );
262
- }, E.jsxs = function(e, a, l, c, v) {
263
- var b = 1e4 > D.recentlyCreatedOwnerStacks++;
264
- return R(
265
- e,
266
- a,
267
- l,
268
- !0,
269
- c,
270
- v,
271
- b ? Error("react-stack-top-frame") : V,
272
- b ? F(p(e)) : q
273
- );
274
- };
275
- }()), E;
276
- }
277
- process.env.NODE_ENV === "production" ? W.exports = oe() : W.exports = se();
278
- var r = W.exports;
279
- const le = ({
280
- logo: m,
281
- navList: s,
282
- eventButton: i,
283
- colors: p,
284
- sidebarPosition: n = "left"
285
- }) => {
286
- const [u, h] = C(null), [x, y] = C(!1), [k, R] = C(
287
- null
288
- ), [N, g] = C(!1), j = ae(null), t = { ...{
289
- headerBg: "bg-white",
290
- sidebarBg: "bg-white",
291
- sidebarGradientFrom: "from-white",
292
- sidebarGradientTo: "to-gray-50",
293
- dropdownBg: "bg-white",
294
- submenuBg: "bg-gray-50/50",
295
- titleText: "bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent",
296
- navText: "text-gray-600",
297
- navTextHover: "hover:text-primary",
298
- sidebarTitleText: "bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",
299
- sidebarNavText: "text-gray-700",
300
- sidebarNavTextHover: "hover:text-primary",
301
- submenuText: "text-gray-600",
302
- submenuTextHover: "hover:text-primary",
303
- primary: "bg-primary",
304
- primaryDark: "bg-primary-dark",
305
- accent: "bg-primary",
306
- border: "border-gray-100",
307
- dropdownBorder: "border-gray-200",
308
- shadow: "shadow-sm",
309
- sidebarShadow: "shadow-2xl",
310
- overlayBg: "bg-black",
311
- overlayOpacity: "bg-opacity-50"
312
- }, ...p || {} }, O = (o) => {
313
- h(u === o ? null : o);
314
- }, A = (o) => {
315
- R(k === o ? null : o);
316
- }, P = () => {
317
- g(!0), y(!x);
318
- }, _ = () => {
319
- g(!0), y(!1);
320
- }, S = () => {
321
- g(!1), y(!1);
322
- };
323
- return X(() => {
324
- const o = (f) => {
325
- j.current && !j.current.contains(f.target) && h(null);
326
- };
327
- return document.addEventListener("mousedown", o), () => {
328
- document.removeEventListener("mousedown", o);
329
- };
330
- }, []), X(() => (x ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
331
- document.body.style.overflow = "unset";
332
- }), [x]), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
333
- /* @__PURE__ */ r.jsx(
334
- "header",
335
- {
336
- className: `w-full ${t.headerBg} ${t.shadow} border-b ${t.border} sticky top-0 z-99`,
337
- 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: [
338
- /* @__PURE__ */ r.jsx("div", { className: "flex items-center space-x-4", children: m && /* @__PURE__ */ r.jsx("a", { href: "/", children: /* @__PURE__ */ r.jsx(
339
- "img",
340
- {
341
- src: m,
342
- alt: "Logo",
343
- className: "h-7 w-auto object-contain md:h-8 cursor-pointer"
344
- }
345
- ) }) }),
346
- /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-6", ref: j, children: [
347
- /* @__PURE__ */ r.jsx("nav", { className: "hidden md:flex items-center space-x-6", children: s == null ? void 0 : s.map((o) => {
348
- var f;
349
- return /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
350
- /* @__PURE__ */ r.jsx(
351
- "button",
352
- {
353
- onClick: () => o.sub ? O(o.idx) : void 0,
354
- className: `${t.navText} ${t.navTextHover} transition-colors duration-200 font-medium flex items-center`,
355
- children: o.sub ? /* @__PURE__ */ r.jsx(r.Fragment, { children: o.name }) : /* @__PURE__ */ r.jsx("a", { href: o.path, children: o.name })
356
- }
357
- ),
358
- /* @__PURE__ */ r.jsxs(
359
- "div",
360
- {
361
- 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 ${o.idx === (s == null ? void 0 : s.length) ? "right-0" : "left-1/2 transform -translate-x-1/2"} ${u === o.idx ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-2 pointer-events-none"}`,
362
- children: [
363
- /* @__PURE__ */ r.jsx(
364
- "svg",
365
- {
366
- className: `absolute -top-2 w-4 h-4 ${o.idx === (s == null ? void 0 : s.length) ? "right-4" : "left-1/2 -translate-x-1/2"}`,
367
- viewBox: "0 0 24 24",
368
- style: {
369
- fill: "white",
370
- filter: "drop-shadow(0 -1px 0 #e5e7eb)"
371
- },
372
- children: /* @__PURE__ */ r.jsx("path", { d: "M12 2L2 12h20L12 2z" })
373
- }
374
- ),
375
- /* @__PURE__ */ r.jsx("div", { className: "py-2", children: (f = o.sub) == null ? void 0 : f.map((T) => /* @__PURE__ */ r.jsx(
376
- "a",
377
- {
378
- href: T.path,
379
- className: `block px-4 py-2 text-sm whitespace-nowrap ${t.submenuText} hover:bg-gray-100 ${t.submenuTextHover} transition-colors duration-200`,
380
- onClick: () => h(null),
381
- children: T.name
382
- },
383
- T.idx
384
- )) })
385
- ]
386
- }
387
- )
388
- ] }, o.idx);
389
- }) }),
390
- i && /* @__PURE__ */ r.jsx(
391
- "button",
392
- {
393
- onClick: i.onClick,
394
- className: `hidden md:block px-4 py-2 rounded font-medium transition-all duration-200 ${i.className || "bg-primary text-white hover:bg-primary-dark"}`,
395
- children: i.text
396
- }
397
- ),
398
- /* @__PURE__ */ r.jsx(
399
- "button",
400
- {
401
- className: `md:hidden p-2 rounded-lg ${t.navText} hover:bg-gray-100 transition-colors duration-200`,
402
- onClick: P,
403
- children: /* @__PURE__ */ r.jsx(
404
- "svg",
405
- {
406
- className: "w-6 h-6",
407
- fill: "none",
408
- stroke: "currentColor",
409
- viewBox: "0 0 24 24",
410
- children: /* @__PURE__ */ r.jsx(
411
- "path",
412
- {
413
- strokeLinecap: "round",
414
- strokeLinejoin: "round",
415
- strokeWidth: 2,
416
- d: "M4 6h16M4 12h16M4 18h16"
417
- }
418
- )
419
- }
420
- )
421
- }
422
- )
423
- ] })
424
- ] })
425
- }
426
- ),
427
- /* @__PURE__ */ r.jsx(
428
- "div",
429
- {
430
- className: `fixed inset-0 ${t.overlayBg} z-50 md:hidden ${x ? `${t.overlayOpacity} backdrop-blur-sm` : "bg-opacity-0 backdrop-blur-none pointer-events-none"} ${N ? "transition-all duration-300 ease-in-out" : ""}`,
431
- onClick: _
432
- }
433
- ),
434
- /* @__PURE__ */ r.jsx(
435
- "div",
436
- {
437
- className: `fixed top-0 ${n === "left" ? "left-0" : "right-0"} h-full w-4/5 xsm:w-80 ${t.sidebarBg} ${t.sidebarShadow} transform z-50 md:hidden ${x ? "translate-x-0" : n === "left" ? "-translate-x-full" : "translate-x-full"} ${N ? "transition-all duration-300 ease-in-out" : ""}`,
438
- children: /* @__PURE__ */ r.jsxs(
439
- "div",
440
- {
441
- className: `flex flex-col h-full bg-gradient-to-b ${t.sidebarGradientFrom} ${t.sidebarGradientTo}`,
442
- children: [
443
- /* @__PURE__ */ r.jsxs(
444
- "div",
445
- {
446
- className: `flex items-center justify-between p-4 border-b ${t.border} ${t.sidebarBg}/80 backdrop-blur-sm`,
447
- children: [
448
- /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
449
- /* @__PURE__ */ r.jsx(
450
- "div",
451
- {
452
- className: `w-2 h-8 bg-gradient-to-b ${t.primary} ${t.primaryDark} rounded-full`
453
- }
454
- ),
455
- /* @__PURE__ */ r.jsx(
456
- "h2",
457
- {
458
- className: `text-xl font-bold ${t.sidebarTitleText}`,
459
- children: "Menu"
460
- }
461
- )
462
- ] }),
463
- /* @__PURE__ */ r.jsx(
464
- "button",
465
- {
466
- onClick: _,
467
- className: "p-2 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200",
468
- children: /* @__PURE__ */ r.jsx(
469
- "svg",
470
- {
471
- className: "w-5 h-5",
472
- fill: "none",
473
- stroke: "currentColor",
474
- viewBox: "0 0 24 24",
475
- children: /* @__PURE__ */ r.jsx(
476
- "path",
477
- {
478
- strokeLinecap: "round",
479
- strokeLinejoin: "round",
480
- strokeWidth: 2,
481
- d: "M6 18L18 6M6 6l12 12"
482
- }
483
- )
484
- }
485
- )
486
- }
487
- )
488
- ]
489
- }
490
- ),
491
- /* @__PURE__ */ r.jsx("nav", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ r.jsx("ul", { className: "", children: s == null ? void 0 : s.map((o) => /* @__PURE__ */ r.jsx("li", { children: o.sub ? /* @__PURE__ */ r.jsxs(
492
- "div",
493
- {
494
- className: `${t.dropdownBg} ${t.shadow} border-b ${t.border} overflow-hidden`,
495
- children: [
496
- /* @__PURE__ */ r.jsxs(
497
- "button",
498
- {
499
- onClick: () => A(o.idx),
500
- className: `w-full flex items-center justify-between p-4 text-left ${t.sidebarNavText} hover:bg-gray-50 transition-all duration-200 group`,
501
- children: [
502
- /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
503
- /* @__PURE__ */ r.jsx(
504
- "div",
505
- {
506
- className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
507
- }
508
- ),
509
- /* @__PURE__ */ r.jsx(
510
- "span",
511
- {
512
- className: `font-semibold text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
513
- children: o.name
514
- }
515
- )
516
- ] }),
517
- /* @__PURE__ */ r.jsx(
518
- "svg",
519
- {
520
- className: `shrink-0 w-4 h-4 text-gray-400 transition-all duration-200 ${k === o.idx ? "rotate-180 text-primary" : "group-hover:text-gray-600"}`,
521
- fill: "none",
522
- stroke: "currentColor",
523
- viewBox: "0 0 24 24",
524
- children: /* @__PURE__ */ r.jsx(
525
- "path",
526
- {
527
- strokeLinecap: "round",
528
- strokeLinejoin: "round",
529
- strokeWidth: 2,
530
- d: "M19 9l-7 7-7-7"
531
- }
532
- )
533
- }
534
- )
535
- ]
536
- }
537
- ),
538
- /* @__PURE__ */ r.jsx(
539
- "div",
540
- {
541
- className: `overflow-hidden transition-all duration-300 ease-in-out ${k === o.idx ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`,
542
- children: /* @__PURE__ */ r.jsx(
543
- "div",
544
- {
545
- className: `${t.submenuBg} border-t ${t.border}`,
546
- children: /* @__PURE__ */ r.jsx("ul", { className: "py-2", children: o.sub.map((f) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsxs(
547
- "a",
548
- {
549
- href: f.path,
550
- 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`,
551
- onClick: S,
552
- children: [
553
- /* @__PURE__ */ r.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full group-hover:bg-primary transition-colors duration-200" }),
554
- /* @__PURE__ */ r.jsx("span", { children: f.name })
555
- ]
556
- }
557
- ) }, f.idx)) })
558
- }
559
- )
560
- }
561
- )
562
- ]
563
- }
564
- ) : /* @__PURE__ */ r.jsx(
565
- "a",
566
- {
567
- href: o.path,
568
- 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`,
569
- onClick: S,
570
- children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-3", children: [
571
- /* @__PURE__ */ r.jsx(
572
- "div",
573
- {
574
- className: `w-1.5 h-1.5 ${t.accent} rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-200`
575
- }
576
- ),
577
- /* @__PURE__ */ r.jsx(
578
- "span",
579
- {
580
- className: `text-gray-800 ${t.sidebarNavTextHover} transition-colors duration-200`,
581
- children: o.name
582
- }
583
- )
584
- ] })
585
- }
586
- ) }, o.idx)) }) }),
587
- i && /* @__PURE__ */ r.jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 bg-white/95 backdrop-blur-sm", children: /* @__PURE__ */ r.jsx(
588
- "button",
589
- {
590
- onClick: i.onClick,
591
- className: `w-full px-4 py-3 rounded font-medium transition-all duration-200 ${i.className || "bg-primary text-white hover:bg-primary-dark"}`,
592
- children: i.text
593
- }
594
- ) })
595
- ]
596
- }
597
- )
598
- }
599
- )
600
- ] });
601
- }, ie = ({ logo: m, companyInfo: s, colors: i }) => {
602
- const n = { ...{
603
- footerBg: "bg-gray-900",
604
- footerGradientFrom: "from-gray-900",
605
- footerGradientTo: "to-gray-800",
606
- titleText: "text-white",
607
- linkText: "text-gray-300",
608
- linkTextHover: "hover:text-white",
609
- copyrightText: "text-gray-400",
610
- primary: "bg-primary",
611
- primaryDark: "bg-primary-dark",
612
- accent: "bg-primary",
613
- border: "border-gray-700",
614
- shadow: "shadow-lg"
615
- }, ...i || {} }, u = () => {
616
- window.scrollTo({
617
- top: 0,
618
- behavior: "smooth"
619
- });
620
- };
621
- return /* @__PURE__ */ r.jsxs(
622
- "footer",
623
- {
624
- className: `w-full ${n.footerBg} ${n.shadow} relative`,
625
- children: [
626
- /* @__PURE__ */ r.jsx("div", { className: "max-w-[1240px] mx-auto px-5 relative", children: /* @__PURE__ */ r.jsx("div", { className: "absolute -top-6 right-5 z-20", children: /* @__PURE__ */ r.jsx(
627
- "button",
628
- {
629
- onClick: u,
630
- className: `p-3 rounded-full ${n.linkText} ${n.linkTextHover} transition-all duration-300 hover:scale-110 bg-gray-800/80 backdrop-blur-md border border-gray-600/50 shadow-lg`,
631
- "aria-label": "맨 위로 이동",
632
- children: /* @__PURE__ */ r.jsx(
633
- "svg",
634
- {
635
- className: "w-5 h-5",
636
- fill: "none",
637
- stroke: "currentColor",
638
- viewBox: "0 0 24 24",
639
- children: /* @__PURE__ */ r.jsx(
640
- "path",
641
- {
642
- strokeLinecap: "round",
643
- strokeLinejoin: "round",
644
- strokeWidth: 2,
645
- d: "M5 10l7-7m0 0l7 7m-7-7v18"
646
- }
647
- )
648
- }
649
- )
650
- }
651
- ) }) }),
652
- /* @__PURE__ */ r.jsxs(
653
- "div",
654
- {
655
- className: `bg-gradient-to-b ${n.footerGradientFrom} ${n.footerGradientTo} relative overflow-hidden`,
656
- children: [
657
- /* @__PURE__ */ r.jsx(
658
- "div",
659
- {
660
- className: "absolute inset-0 pointer-events-none",
661
- style: {
662
- background: "radial-gradient(ellipse 600px 300px at center top, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.01) 70%, transparent 85%)"
663
- }
664
- }
665
- ),
666
- /* @__PURE__ */ r.jsxs("div", { className: "max-w-[1240px] mx-auto px-5 pt-12 pb-4 relative z-10", children: [
667
- /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-8 mb-8", children: [
668
- /* @__PURE__ */ r.jsxs("div", { className: "flex-1 max-w-md", children: [
669
- m && /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: /* @__PURE__ */ r.jsx(
670
- "img",
671
- {
672
- src: m,
673
- alt: "Logo",
674
- className: "h-12 w-auto object-contain"
675
- }
676
- ) }),
677
- s && /* @__PURE__ */ r.jsxs("div", { className: "mb-4 break-all", children: [
678
- /* @__PURE__ */ r.jsx("p", { className: `text-sm ${n.linkText} mb-2`, children: [
679
- s.name && `회사명: ${s.name}`,
680
- s.ceo && `대표자: ${s.ceo}`,
681
- s.businessNumber && `사업자등록번호: ${s.businessNumber}`
682
- ].filter(Boolean).join(" | ") }),
683
- /* @__PURE__ */ r.jsx("p", { className: `text-sm ${n.linkText} mb-2`, children: [
684
- s.phone && `연락처: ${s.phone}`,
685
- s.email && `이메일: ${s.email}`
686
- ].filter(Boolean).join(" | ") }),
687
- s.address && /* @__PURE__ */ r.jsxs("p", { className: `text-sm ${n.linkText} mb-2`, children: [
688
- "주소: ",
689
- s.address
690
- ] })
691
- ] })
692
- ] }),
693
- /* @__PURE__ */ r.jsx("div", { className: "flex-1" })
694
- ] }),
695
- /* @__PURE__ */ r.jsx("div", { className: `border-t ${n.border} pt-4`, children: /* @__PURE__ */ r.jsx("div", { className: "text-center", children: /* @__PURE__ */ r.jsxs(
696
- "p",
697
- {
698
- className: `text-sm ${n.copyrightText} flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-1`,
699
- children: [
700
- /* @__PURE__ */ r.jsx("span", { children: "© 2025 NextLevel, all rights reserved —" }),
701
- /* @__PURE__ */ r.jsxs("span", { className: "flex items-center space-x-1", children: [
702
- /* @__PURE__ */ r.jsx("span", { children: "A product by team" }),
703
- /* @__PURE__ */ r.jsx(
704
- "a",
705
- {
706
- href: "https://prosite.ai.kr/",
707
- target: "_blank",
708
- rel: "noopener noreferrer",
709
- className: "pl-1 cursor-pointer hover:scale-105 transition-transform duration-300",
710
- children: /* @__PURE__ */ r.jsx(
711
- "img",
712
- {
713
- src: "/images/prosite-logo.png",
714
- alt: "ProSite",
715
- className: "h-4 w-auto object-contain"
716
- }
717
- )
718
- }
719
- )
720
- ] })
721
- ]
722
- }
723
- ) }) })
724
- ] })
725
- ]
726
- }
727
- )
728
- ]
729
- }
730
- );
731
- };
732
- export {
733
- ie as Footer,
734
- le as Header
735
- };
1
+ export { default as Header } from './components/Header/Header';
2
+ export { default as Footer } from './components/Footer/Footer';
3
+ // Import CSS to ensure styles are included
4
+ import './index.css';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nextlevel_korea/design-system",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "A modern React design system built with TypeScript and Tailwind CSS - The NextLevel Design System",
5
5
  "keywords": [
6
6
  "nextlevel"
@@ -20,7 +20,8 @@
20
20
  "import": "./dist/index.js",
21
21
  "require": "./dist/index.cjs"
22
22
  },
23
- "./styles": "./dist/index.css"
23
+ "./styles": "./dist/index.css",
24
+ "./index.css": "./dist/index.css"
24
25
  },
25
26
  "files": [
26
27
  "dist",
@@ -29,7 +30,8 @@
29
30
  "scripts": {
30
31
  "dev": "next dev",
31
32
  "build": "next build",
32
- "build:lib": "tsc -p tsconfig.lib.json --emitDeclarationOnly && next build",
33
+ "build:lib": "tsc -p tsconfig.lib.json && npm run copy-css",
34
+ "copy-css": "cp src/index.css dist/",
33
35
  "start": "next start",
34
36
  "lint": "next lint",
35
37
  "export": "next build && next export",
@@ -40,13 +42,11 @@
40
42
  },
41
43
  "peerDependencies": {
42
44
  "react": "^18.0.0 || ^19.0.0",
43
- "react-dom": "^18.0.0 || ^19.0.0"
45
+ "react-dom": "^18.0.0 || ^19.0.0",
46
+ "next": "^15.0.0"
44
47
  },
45
48
  "dependencies": {
46
49
  "clsx": "^2.1.1",
47
- "next": "^15.4.2",
48
- "react": "^18.0.0 || ^19.0.0",
49
- "react-dom": "^18.0.0 || ^19.0.0",
50
50
  "tailwind-merge": "^3.3.1"
51
51
  },
52
52
  "devDependencies": {
@@ -66,7 +66,10 @@
66
66
  "eslint-plugin-react-refresh": "^0.4.20",
67
67
  "eslint-plugin-storybook": "^9.0.18",
68
68
  "globals": "^16.3.0",
69
+ "next": "^15.4.2",
69
70
  "postcss": "^8.4.38",
71
+ "react": "^18.0.0 || ^19.0.0",
72
+ "react-dom": "^18.0.0 || ^19.0.0",
70
73
  "storybook": "^9.0.18",
71
74
  "tailwindcss": "^3.4.3",
72
75
  "ts-node": "^10.9.2",