@granularjs/ui 0.1.0

package/dist/granular-ui.min.js

@@ -0,0 +1,3605 @@
+var zt="granular-ui-styles",Ir=new URL("./fonts/Poppins-400.ttf",import.meta.url).href,Br=new URL("./fonts/Poppins-500.ttf",import.meta.url).href,Ar=new URL("./fonts/Poppins-600.ttf",import.meta.url).href,Fr=new URL("./fonts/Poppins-700.ttf",import.meta.url).href,jr=new URL("./fonts/Arimo-400.ttf",import.meta.url).href,Er=new URL("./fonts/Arimo-500.ttf",import.meta.url).href,Rr=new URL("./fonts/Arimo-600.ttf",import.meta.url).href,Hr=new URL("./fonts/Arimo-700.ttf",import.meta.url).href,Or=new URL("./fonts/Inter-400.woff2",import.meta.url).href,qr=new URL("./fonts/Inter-500.woff2",import.meta.url).href,Yr=new URL("./fonts/Inter-600.woff2",import.meta.url).href,Wr=new URL("./fonts/Inter-700.woff2",import.meta.url).href,Gr=`
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('${Ir}') format('truetype');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('${Br}') format('truetype');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('${Ar}') format('truetype');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('${Fr}') format('truetype');
+}
+
+@font-face {
+  font-family: 'Arimo';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('${jr}') format('truetype');
+}
+@font-face {
+  font-family: 'Arimo';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('${Er}') format('truetype');
+}
+@font-face {
+  font-family: 'Arimo';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('${Rr}') format('truetype');
+}
+@font-face {
+  font-family: 'Arimo';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('${Hr}') format('truetype');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('${Or}') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('${qr}') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('${Yr}') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('${Wr}') format('woff2');
+}
+
+:root {
+  /* Color scales - base colors */
+  --g-ui-white: #ffffff;
+  --g-ui-black: #000000;
+  
+  --g-ui-gray-50: #f9fafb;
+  --g-ui-gray-100: #f2f4f7;
+  --g-ui-gray-200: #e4e7ec;
+  --g-ui-gray-300: #cdd1d9;
+  --g-ui-gray-400: #98a2b3;
+  --g-ui-gray-500: #667085;
+  --g-ui-gray-600: #475467;
+  --g-ui-gray-700: #344054;
+  --g-ui-gray-800: #1d2939;
+  --g-ui-gray-900: #101828;
+  --g-ui-gray-950: #0c111d;
+  
+  --g-ui-red-50: #fef3f2;
+  --g-ui-red-100: #fee4e2;
+  --g-ui-red-200: #fecdca;
+  --g-ui-red-300: #fda29b;
+  --g-ui-red-400: #f97066;
+  --g-ui-red-500: #f04438;
+  --g-ui-red-600: #d92d20;
+  --g-ui-red-700: #b42318;
+  --g-ui-red-800: #912018;
+  --g-ui-red-900: #7a271a;
+  --g-ui-red-950: #55160c;
+  
+  --g-ui-orange-50: #fff6ed;
+  --g-ui-orange-100: #ffead5;
+  --g-ui-orange-200: #fddcab;
+  --g-ui-orange-300: #feb273;
+  --g-ui-orange-400: #fd853a;
+  --g-ui-orange-500: #ef6820;
+  --g-ui-orange-600: #e04f16;
+  --g-ui-orange-700: #b93815;
+  --g-ui-orange-800: #932f19;
+  --g-ui-orange-900: #7a2e0e;
+  --g-ui-orange-950: #511c10;
+  
+  --g-ui-green-50: #ecfdf3;
+  --g-ui-green-100: #dcfae6;
+  --g-ui-green-200: #abefc6;
+  --g-ui-green-300: #75e0a7;
+  --g-ui-green-400: #47cd89;
+  --g-ui-green-500: #17b26a;
+  --g-ui-green-600: #079455;
+  --g-ui-green-700: #067647;
+  --g-ui-green-800: #085d3a;
+  --g-ui-green-900: #074d31;
+  --g-ui-green-950: #053321;
+  
+  --g-ui-blue-50: #eff8ff;
+  --g-ui-blue-100: #d1e9ff;
+  --g-ui-blue-200: #b2ddff;
+  --g-ui-blue-300: #84caff;
+  --g-ui-blue-400: #53b1fd;
+  --g-ui-blue-500: #2e90fa;
+  --g-ui-blue-600: #1570ef;
+  --g-ui-blue-700: #175cd3;
+  --g-ui-blue-800: #1849a9;
+  --g-ui-blue-900: #194185;
+  --g-ui-blue-950: #102a56;
+  
+  --g-ui-yellow-50: #fefbe8;
+  --g-ui-yellow-100: #fef7c3;
+  --g-ui-yellow-200: #feee95;
+  --g-ui-yellow-300: #fde272;
+  --g-ui-yellow-400: #fac515;
+  --g-ui-yellow-500: #eaaa08;
+  --g-ui-yellow-600: #ca8504;
+  --g-ui-yellow-700: #a15c07;
+  --g-ui-yellow-800: #854a0e;
+  --g-ui-yellow-900: #713b12;
+  --g-ui-yellow-950: #422006;
+  
+  --g-ui-teal-50: #f0fdf9;
+  --g-ui-teal-100: #ccfbef;
+  --g-ui-teal-200: #99f6e0;
+  --g-ui-teal-300: #5fe9d0;
+  --g-ui-teal-400: #2ed3b7;
+  --g-ui-teal-500: #15b79e;
+  --g-ui-teal-600: #0e9384;
+  --g-ui-teal-700: #107569;
+  --g-ui-teal-800: #125d56;
+  --g-ui-teal-900: #134e48;
+  --g-ui-teal-950: #0a2926;
+  
+  --g-ui-purple-50: #f4f3ff;
+  --g-ui-purple-100: #ebe9fe;
+  --g-ui-purple-200: #d9d6fe;
+  --g-ui-purple-300: #bdb4fe;
+  --g-ui-purple-400: #9b8afb;
+  --g-ui-purple-500: #7a5af8;
+  --g-ui-purple-600: #6938ef;
+  --g-ui-purple-700: #5925dc;
+  --g-ui-purple-800: #4a1fb8;
+  --g-ui-purple-900: #3e1c96;
+  --g-ui-purple-950: #27115a;
+  
+  --g-ui-pink-50: #fdf2fa;
+  --g-ui-pink-100: #fce7f6;
+  --g-ui-pink-200: #fcceee;
+  --g-ui-pink-300: #faa7e0;
+  --g-ui-pink-400: #f670c7;
+  --g-ui-pink-500: #ee46bc;
+  --g-ui-pink-600: #dd2590;
+  --g-ui-pink-700: #c11574;
+  --g-ui-pink-800: #9e165f;
+  --g-ui-pink-900: #851651;
+  --g-ui-pink-950: #4e0d30;
+  
+  --g-ui-cyan-50: #ecfdff;
+  --g-ui-cyan-100: #cff9fe;
+  --g-ui-cyan-200: #a5f0fc;
+  --g-ui-cyan-300: #67e3f9;
+  --g-ui-cyan-400: #22ccee;
+  --g-ui-cyan-500: #06aed4;
+  --g-ui-cyan-600: #088ab2;
+  --g-ui-cyan-700: #0e7090;
+  --g-ui-cyan-800: #155b75;
+  --g-ui-cyan-900: #164c63;
+  --g-ui-cyan-950: #0d2d3a;
+  
+  /* Semantic colors - Dark theme (default) */
+  --g-ui-bg: var(--g-ui-gray-950);
+  --g-ui-bg-subtle: var(--g-ui-gray-900);
+  --g-ui-bg-muted: var(--g-ui-gray-800);
+  --g-ui-bg-emphasized: var(--g-ui-gray-700);
+  --g-ui-bg-inverted: var(--g-ui-gray-50);
+  --g-ui-bg-panel: var(--g-ui-gray-900);
+  --g-ui-bg-error: var(--g-ui-red-950);
+  --g-ui-bg-warning: var(--g-ui-orange-950);
+  --g-ui-bg-success: var(--g-ui-green-950);
+  --g-ui-bg-info: var(--g-ui-blue-950);
+  
+  --g-ui-fg: var(--g-ui-gray-50);
+  --g-ui-fg-muted: var(--g-ui-gray-400);
+  --g-ui-fg-subtle: var(--g-ui-gray-500);
+  --g-ui-fg-inverted: var(--g-ui-gray-950);
+  --g-ui-fg-error: var(--g-ui-red-400);
+  --g-ui-fg-warning: var(--g-ui-orange-300);
+  --g-ui-fg-success: var(--g-ui-green-400);
+  --g-ui-fg-info: var(--g-ui-blue-400);
+  
+  --g-ui-border: var(--g-ui-gray-700);
+  --g-ui-border-subtle: var(--g-ui-gray-900);
+  --g-ui-border-muted: var(--g-ui-gray-800);
+  --g-ui-border-emphasized: var(--g-ui-gray-600);
+  --g-ui-border-inverted: var(--g-ui-gray-200);
+  --g-ui-border-error: var(--g-ui-red-400);
+  --g-ui-border-warning: var(--g-ui-orange-400);
+  --g-ui-border-success: var(--g-ui-green-400);
+  --g-ui-border-info: var(--g-ui-blue-400);
+  
+  /* Gray semantic */
+  --g-ui-gray-contrast: var(--g-ui-gray-950);
+  --g-ui-gray-fg: var(--g-ui-gray-200);
+  --g-ui-gray-subtle: var(--g-ui-gray-800);
+  --g-ui-gray-muted: var(--g-ui-gray-700);
+  --g-ui-gray-emphasized: var(--g-ui-gray-600);
+  --g-ui-gray-solid: var(--g-ui-gray-50);
+  --g-ui-gray-focus-ring: var(--g-ui-gray-400);
+  --g-ui-gray-border: var(--g-ui-gray-700);
+  
+  /* Red semantic */
+  --g-ui-red-contrast: white;
+  --g-ui-red-fg: var(--g-ui-red-300);
+  --g-ui-red-subtle: var(--g-ui-red-900);
+  --g-ui-red-muted: var(--g-ui-red-800);
+  --g-ui-red-emphasized: var(--g-ui-red-700);
+  --g-ui-red-solid: var(--g-ui-red-600);
+  --g-ui-red-focus-ring: var(--g-ui-red-500);
+  --g-ui-red-border: var(--g-ui-red-400);
+  
+  /* Orange semantic */
+  --g-ui-orange-contrast: black;
+  --g-ui-orange-fg: var(--g-ui-orange-300);
+  --g-ui-orange-subtle: var(--g-ui-orange-900);
+  --g-ui-orange-muted: var(--g-ui-orange-800);
+  --g-ui-orange-emphasized: var(--g-ui-orange-700);
+  --g-ui-orange-solid: var(--g-ui-orange-500);
+  --g-ui-orange-focus-ring: var(--g-ui-orange-500);
+  --g-ui-orange-border: var(--g-ui-orange-400);
+  
+  /* Green semantic */
+  --g-ui-green-contrast: white;
+  --g-ui-green-fg: var(--g-ui-green-300);
+  --g-ui-green-subtle: var(--g-ui-green-900);
+  --g-ui-green-muted: var(--g-ui-green-800);
+  --g-ui-green-emphasized: var(--g-ui-green-700);
+  --g-ui-green-solid: var(--g-ui-green-600);
+  --g-ui-green-focus-ring: var(--g-ui-green-500);
+  --g-ui-green-border: var(--g-ui-green-400);
+  
+  /* Blue semantic */
+  --g-ui-blue-contrast: white;
+  --g-ui-blue-fg: var(--g-ui-blue-300);
+  --g-ui-blue-subtle: var(--g-ui-blue-900);
+  --g-ui-blue-muted: var(--g-ui-blue-800);
+  --g-ui-blue-emphasized: var(--g-ui-blue-700);
+  --g-ui-blue-solid: var(--g-ui-blue-600);
+  --g-ui-blue-focus-ring: var(--g-ui-blue-500);
+  --g-ui-blue-border: var(--g-ui-blue-400);
+  
+  /* Yellow semantic */
+  --g-ui-yellow-contrast: black;
+  --g-ui-yellow-fg: var(--g-ui-yellow-300);
+  --g-ui-yellow-subtle: var(--g-ui-yellow-900);
+  --g-ui-yellow-muted: var(--g-ui-yellow-800);
+  --g-ui-yellow-emphasized: var(--g-ui-yellow-700);
+  --g-ui-yellow-solid: var(--g-ui-yellow-300);
+  --g-ui-yellow-focus-ring: var(--g-ui-yellow-500);
+  --g-ui-yellow-border: var(--g-ui-yellow-500);
+  
+  /* Teal semantic */
+  --g-ui-teal-contrast: white;
+  --g-ui-teal-fg: var(--g-ui-teal-300);
+  --g-ui-teal-subtle: var(--g-ui-teal-900);
+  --g-ui-teal-muted: var(--g-ui-teal-800);
+  --g-ui-teal-emphasized: var(--g-ui-teal-700);
+  --g-ui-teal-solid: var(--g-ui-teal-600);
+  --g-ui-teal-focus-ring: var(--g-ui-teal-500);
+  --g-ui-teal-border: var(--g-ui-teal-400);
+  
+  /* Purple semantic */
+  --g-ui-purple-contrast: white;
+  --g-ui-purple-fg: var(--g-ui-purple-300);
+  --g-ui-purple-subtle: var(--g-ui-purple-900);
+  --g-ui-purple-muted: var(--g-ui-purple-800);
+  --g-ui-purple-emphasized: var(--g-ui-purple-700);
+  --g-ui-purple-solid: var(--g-ui-purple-600);
+  --g-ui-purple-focus-ring: var(--g-ui-purple-500);
+  --g-ui-purple-border: var(--g-ui-purple-400);
+  
+  /* Pink semantic */
+  --g-ui-pink-contrast: white;
+  --g-ui-pink-fg: var(--g-ui-pink-300);
+  --g-ui-pink-subtle: var(--g-ui-pink-900);
+  --g-ui-pink-muted: var(--g-ui-pink-800);
+  --g-ui-pink-emphasized: var(--g-ui-pink-700);
+  --g-ui-pink-solid: var(--g-ui-pink-600);
+  --g-ui-pink-focus-ring: var(--g-ui-pink-500);
+  --g-ui-pink-border: var(--g-ui-pink-400);
+  
+  /* Cyan semantic */
+  --g-ui-cyan-contrast: white;
+  --g-ui-cyan-fg: var(--g-ui-cyan-300);
+  --g-ui-cyan-subtle: var(--g-ui-cyan-900);
+  --g-ui-cyan-muted: var(--g-ui-cyan-800);
+  --g-ui-cyan-emphasized: var(--g-ui-cyan-700);
+  --g-ui-cyan-solid: var(--g-ui-cyan-600);
+  --g-ui-cyan-focus-ring: var(--g-ui-cyan-500);
+  --g-ui-cyan-border: var(--g-ui-cyan-400);
+  
+  /* Primary (indigo #6366f1 - Linear inspired) */
+  --g-ui-primary: #6366f1;
+  --g-ui-primary-hover: #818cf8;
+  --g-ui-primary-active: #4f46e5;
+  --g-ui-primary-subtle: rgba(99, 102, 241, 0.1);
+  --g-ui-primary-muted: rgba(99, 102, 241, 0.2);
+  --g-ui-primary-emphasized: rgba(99, 102, 241, 0.3);
+  --g-ui-primary-fg: var(--g-ui-white);
+  
+  /* Aliases for common usage */
+  --g-ui-success: var(--g-ui-green-500);
+  --g-ui-danger: var(--g-ui-red-500);
+  --g-ui-warning: var(--g-ui-yellow-500);
+  --g-ui-info: var(--g-ui-cyan-500);
+  
+  /* Shadows - Dark theme (dual-layer, Linear/Vercel inspired) */
+  --g-ui-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.48);
+  --g-ui-shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.48), 0px 1px 2px rgba(0, 0, 0, 0.32);
+  --g-ui-shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.48), 0px 2px 4px -2px rgba(0, 0, 0, 0.32);
+  --g-ui-shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.48), 0px 4px 6px -2px rgba(0, 0, 0, 0.24);
+  --g-ui-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.48), 0px 8px 8px -4px rgba(0, 0, 0, 0.24);
+  --g-ui-shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.64);
+  
+  /* Legacy (compatibility) */
+  --g-ui-text: var(--g-ui-fg);
+  --g-ui-muted: var(--g-ui-fg-muted);
+  --g-ui-surface: var(--g-ui-bg-panel);
+  --g-ui-primary-strong: var(--g-ui-primary-active);
+  --g-ui-shadow: var(--g-ui-shadow-md);
+  
+  /* Misc */
+  --g-ui-radius: 4px;
+  --g-ui-font: 'Inter', 'Arimo', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --g-ui-space-2: 2px;
+  --g-ui-space-3: 3px;
+  --g-ui-space-4: 4px;
+  --g-ui-space-5: 5px;
+  --g-ui-space-6: 6px;
+  --g-ui-space-7: 7px;
+  --g-ui-space-8: 8px;
+  --g-ui-space-9: 9px;
+  --g-ui-space-10: 10px;
+  --g-ui-space-12: 12px;
+  --g-ui-space-13: 13px;
+  --g-ui-space-14: 14px;
+  --g-ui-space-15: 15px;
+  --g-ui-space-16: 16px;
+  --g-ui-space-18: 18px;
+  --g-ui-space-20: 20px;
+  --g-ui-space-22: 22px;
+  --g-ui-space-24: 24px;
+  --g-ui-space-26: 26px;
+  --g-ui-space-28: 28px;
+  --g-ui-space-30: 30px;
+  --g-ui-space-32: 32px;
+  --g-ui-space-36: 36px;
+  --g-ui-space-38: 38px;
+  --g-ui-space-40: 40px;
+  --g-ui-container-padding: var(--g-ui-space-16);
+}
+
+.g-ui-theme-dark {
+  --g-ui-bg: var(--g-ui-gray-950);
+  --g-ui-bg-subtle: var(--g-ui-gray-800);
+  --g-ui-bg-muted: var(--g-ui-gray-700);
+  --g-ui-bg-emphasized: var(--g-ui-gray-600);
+  --g-ui-bg-inverted: var(--g-ui-gray-50);
+  --g-ui-bg-panel: var(--g-ui-gray-900);
+  
+  --g-ui-fg: var(--g-ui-gray-50);
+  --g-ui-fg-muted: var(--g-ui-gray-400);
+  --g-ui-fg-subtle: var(--g-ui-gray-500);
+  --g-ui-fg-inverted: var(--g-ui-gray-950);
+  
+  --g-ui-border: var(--g-ui-gray-700);
+  --g-ui-border-subtle: var(--g-ui-gray-900);
+  --g-ui-border-muted: var(--g-ui-gray-800);
+  --g-ui-border-emphasized: var(--g-ui-gray-600);
+  
+  /* Gray semantic */
+  --g-ui-gray-contrast: var(--g-ui-gray-950);
+  --g-ui-gray-subtle: var(--g-ui-gray-800);
+  --g-ui-gray-muted: var(--g-ui-gray-700);
+  --g-ui-gray-emphasized: var(--g-ui-gray-600);
+  --g-ui-gray-solid: var(--g-ui-gray-50);
+  --g-ui-gray-border: var(--g-ui-gray-700);
+  
+  /* Primary (dark mode) */
+  --g-ui-primary-hover: #818cf8;
+  --g-ui-primary-active: #4f46e5;
+  
+  --g-ui-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.48);
+  --g-ui-shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.48), 0px 1px 2px rgba(0, 0, 0, 0.32);
+  --g-ui-shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.48), 0px 2px 4px -2px rgba(0, 0, 0, 0.32);
+  --g-ui-shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.48), 0px 4px 6px -2px rgba(0, 0, 0, 0.24);
+  --g-ui-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.48), 0px 8px 8px -4px rgba(0, 0, 0, 0.24);
+  --g-ui-shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.64);
+}
+
+.g-ui-theme-light {
+  /* Semantic colors - Light theme */
+  --g-ui-bg: var(--g-ui-white);
+  --g-ui-bg-subtle: var(--g-ui-gray-50);
+  --g-ui-bg-muted: var(--g-ui-gray-100);
+  --g-ui-bg-emphasized: var(--g-ui-gray-200);
+  --g-ui-bg-inverted: var(--g-ui-gray-950);
+  --g-ui-bg-panel: var(--g-ui-white);
+  --g-ui-bg-error: var(--g-ui-red-50);
+  --g-ui-bg-warning: var(--g-ui-orange-50);
+  --g-ui-bg-success: var(--g-ui-green-50);
+  --g-ui-bg-info: var(--g-ui-blue-50);
+  
+  --g-ui-fg: var(--g-ui-gray-900);
+  --g-ui-fg-muted: var(--g-ui-gray-600);
+  --g-ui-fg-subtle: var(--g-ui-gray-400);
+  --g-ui-fg-inverted: var(--g-ui-gray-50);
+  --g-ui-fg-error: var(--g-ui-red-600);
+  --g-ui-fg-warning: var(--g-ui-orange-600);
+  --g-ui-fg-success: var(--g-ui-green-600);
+  --g-ui-fg-info: var(--g-ui-blue-600);
+  
+  /* Legacy override for light theme */
+  --g-ui-text: var(--g-ui-fg);
+  --g-ui-muted: var(--g-ui-fg-muted);
+  
+  --g-ui-border: var(--g-ui-gray-200);
+  --g-ui-border-subtle: var(--g-ui-gray-100);
+  --g-ui-border-muted: var(--g-ui-gray-200);
+  --g-ui-border-emphasized: var(--g-ui-gray-300);
+  --g-ui-border-inverted: var(--g-ui-gray-800);
+  --g-ui-border-error: var(--g-ui-red-300);
+  --g-ui-border-warning: var(--g-ui-orange-300);
+  --g-ui-border-success: var(--g-ui-green-300);
+  --g-ui-border-info: var(--g-ui-blue-300);
+  
+  /* Gray semantic */
+  --g-ui-gray-contrast: var(--g-ui-gray-50);
+  --g-ui-gray-fg: var(--g-ui-gray-700);
+  --g-ui-gray-subtle: var(--g-ui-gray-50);
+  --g-ui-gray-muted: var(--g-ui-gray-100);
+  --g-ui-gray-emphasized: var(--g-ui-gray-200);
+  --g-ui-gray-solid: var(--g-ui-gray-900);
+  --g-ui-gray-focus-ring: var(--g-ui-gray-400);
+  --g-ui-gray-border: var(--g-ui-gray-200);
+  
+  /* Red semantic */
+  --g-ui-red-contrast: white;
+  --g-ui-red-fg: var(--g-ui-red-600);
+  --g-ui-red-subtle: var(--g-ui-red-50);
+  --g-ui-red-muted: var(--g-ui-red-100);
+  --g-ui-red-emphasized: var(--g-ui-red-200);
+  --g-ui-red-solid: var(--g-ui-red-600);
+  --g-ui-red-focus-ring: var(--g-ui-red-500);
+  --g-ui-red-border: var(--g-ui-red-300);
+  
+  /* Orange semantic */
+  --g-ui-orange-contrast: white;
+  --g-ui-orange-fg: var(--g-ui-orange-600);
+  --g-ui-orange-subtle: var(--g-ui-orange-50);
+  --g-ui-orange-muted: var(--g-ui-orange-100);
+  --g-ui-orange-emphasized: var(--g-ui-orange-200);
+  --g-ui-orange-solid: var(--g-ui-orange-600);
+  --g-ui-orange-focus-ring: var(--g-ui-orange-500);
+  --g-ui-orange-border: var(--g-ui-orange-300);
+  
+  /* Green semantic */
+  --g-ui-green-contrast: white;
+  --g-ui-green-fg: var(--g-ui-green-600);
+  --g-ui-green-subtle: var(--g-ui-green-50);
+  --g-ui-green-muted: var(--g-ui-green-100);
+  --g-ui-green-emphasized: var(--g-ui-green-200);
+  --g-ui-green-solid: var(--g-ui-green-600);
+  --g-ui-green-focus-ring: var(--g-ui-green-500);
+  --g-ui-green-border: var(--g-ui-green-300);
+  
+  /* Blue semantic */
+  --g-ui-blue-contrast: white;
+  --g-ui-blue-fg: var(--g-ui-blue-600);
+  --g-ui-blue-subtle: var(--g-ui-blue-50);
+  --g-ui-blue-muted: var(--g-ui-blue-100);
+  --g-ui-blue-emphasized: var(--g-ui-blue-200);
+  --g-ui-blue-solid: var(--g-ui-blue-600);
+  --g-ui-blue-focus-ring: var(--g-ui-blue-500);
+  --g-ui-blue-border: var(--g-ui-blue-300);
+  
+  /* Yellow semantic */
+  --g-ui-yellow-contrast: black;
+  --g-ui-yellow-fg: var(--g-ui-yellow-700);
+  --g-ui-yellow-subtle: var(--g-ui-yellow-50);
+  --g-ui-yellow-muted: var(--g-ui-yellow-100);
+  --g-ui-yellow-emphasized: var(--g-ui-yellow-200);
+  --g-ui-yellow-solid: var(--g-ui-yellow-400);
+  --g-ui-yellow-focus-ring: var(--g-ui-yellow-500);
+  --g-ui-yellow-border: var(--g-ui-yellow-300);
+  
+  /* Teal semantic */
+  --g-ui-teal-contrast: white;
+  --g-ui-teal-fg: var(--g-ui-teal-600);
+  --g-ui-teal-subtle: var(--g-ui-teal-50);
+  --g-ui-teal-muted: var(--g-ui-teal-100);
+  --g-ui-teal-emphasized: var(--g-ui-teal-200);
+  --g-ui-teal-solid: var(--g-ui-teal-600);
+  --g-ui-teal-focus-ring: var(--g-ui-teal-500);
+  --g-ui-teal-border: var(--g-ui-teal-300);
+  
+  /* Purple semantic */
+  --g-ui-purple-contrast: white;
+  --g-ui-purple-fg: var(--g-ui-purple-600);
+  --g-ui-purple-subtle: var(--g-ui-purple-50);
+  --g-ui-purple-muted: var(--g-ui-purple-100);
+  --g-ui-purple-emphasized: var(--g-ui-purple-200);
+  --g-ui-purple-solid: var(--g-ui-purple-600);
+  --g-ui-purple-focus-ring: var(--g-ui-purple-500);
+  --g-ui-purple-border: var(--g-ui-purple-300);
+  
+  /* Pink semantic */
+  --g-ui-pink-contrast: white;
+  --g-ui-pink-fg: var(--g-ui-pink-600);
+  --g-ui-pink-subtle: var(--g-ui-pink-50);
+  --g-ui-pink-muted: var(--g-ui-pink-100);
+  --g-ui-pink-emphasized: var(--g-ui-pink-200);
+  --g-ui-pink-solid: var(--g-ui-pink-600);
+  --g-ui-pink-focus-ring: var(--g-ui-pink-500);
+  --g-ui-pink-border: var(--g-ui-pink-300);
+  
+  /* Cyan semantic */
+  --g-ui-cyan-contrast: white;
+  --g-ui-cyan-fg: var(--g-ui-cyan-600);
+  --g-ui-cyan-subtle: var(--g-ui-cyan-50);
+  --g-ui-cyan-muted: var(--g-ui-cyan-100);
+  --g-ui-cyan-emphasized: var(--g-ui-cyan-200);
+  --g-ui-cyan-solid: var(--g-ui-cyan-600);
+  --g-ui-cyan-focus-ring: var(--g-ui-cyan-500);
+  --g-ui-cyan-border: var(--g-ui-cyan-300);
+  
+  /* Primary overrides for light theme */
+  --g-ui-primary-hover: #4f46e5;
+  --g-ui-primary-active: #4338ca;
+  --g-ui-primary-subtle: rgba(99, 102, 241, 0.06);
+  --g-ui-primary-muted: rgba(99, 102, 241, 0.12);
+  --g-ui-primary-emphasized: rgba(99, 102, 241, 0.2);
+  
+  /* Shadows - Light theme (dual-layer, Untitled UI inspired) */
+  --g-ui-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --g-ui-shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+  --g-ui-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --g-ui-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --g-ui-shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+  --g-ui-shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+}
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  font-family: var(--g-ui-font);
+  font-size: 14px;
+}
+
+.g-ui-reset {
+  font-family: var(--g-ui-font);
+  color: var(--g-ui-text);
+}
+
+.g-ui-text {
+  font-family: var(--g-ui-font);
+  font-weight: 400;
+  color: var(--g-ui-text);
+}
+.g-ui-text-size-xs { font-size: 12px; line-height: 1.4; }
+.g-ui-text-size-sm { font-size: 14px; line-height: 1.45; }
+.g-ui-text-size-md { font-size: 16px; line-height: 1.5; }
+.g-ui-text-size-lg { font-size: 18px; line-height: 1.55; }
+.g-ui-text-size-xl { font-size: 20px; line-height: 1.6; }
+.g-ui-text-weight-400 { font-weight: 400; }
+.g-ui-text-weight-500 { font-weight: 500; }
+.g-ui-text-weight-600 { font-weight: 600; }
+.g-ui-text-weight-700 { font-weight: 700; }
+.g-ui-text-dimmed { color: var(--g-ui-muted); }
+.g-ui-text-muted { color: var(--g-ui-muted); }
+.g-ui-text-primary { color: var(--g-ui-primary); }
+.g-ui-text-success { color: var(--g-ui-success); }
+.g-ui-text-danger { color: var(--g-ui-danger); }
+.g-ui-text-align-left { text-align: left; }
+.g-ui-text-align-center { text-align: center; }
+.g-ui-text-align-right { text-align: right; }
+
+.g-ui-title {
+  font-family: var(--g-ui-font);
+  color: var(--g-ui-text);
+  margin: 0;
+  font-weight: 700;
+}
+.g-ui-title-order-1 { font-size: 38px; }
+.g-ui-title-order-2 { font-size: 32px; }
+.g-ui-title-order-3 { font-size: 28px; }
+.g-ui-title-order-4 { font-size: 22px; }
+.g-ui-title-order-5 { font-size: 18px; }
+.g-ui-title-order-6 { font-size: 16px; }
+
+.g-ui-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-stack-gap, 0);
+}
+.g-ui-gap-none { gap: 0; }
+.g-ui-gap-xs { gap: var(--g-ui-space-4); }
+.g-ui-gap-sm { gap: var(--g-ui-space-8); }
+.g-ui-gap-md { gap: var(--g-ui-space-12); }
+.g-ui-gap-lg { gap: var(--g-ui-space-16); }
+.g-ui-gap-xl { gap: var(--g-ui-space-20); }
+.g-ui-align-start { align-items: flex-start; }
+.g-ui-align-center { align-items: center; }
+.g-ui-align-end { align-items: flex-end; }
+.g-ui-justify-start { justify-content: flex-start; }
+.g-ui-justify-center { justify-content: center; }
+.g-ui-justify-end { justify-content: flex-end; }
+.g-ui-justify-between { justify-content: space-between; }
+
+.g-ui-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.g-ui-no-wrap { flex-wrap: nowrap; }
+
+.g-ui-container {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0 var(--g-ui-container-padding, var(--g-ui-space-16));
+  box-sizing: border-box;
+}
+.g-ui-container-size-xs { max-width: 540px; }
+.g-ui-container-size-sm { max-width: 720px; }
+.g-ui-container-size-md { max-width: 960px; }
+.g-ui-container-size-lg { max-width: 1140px; }
+.g-ui-container-size-xl { max-width: 1320px; }
+.g-ui-container-fluid { max-width: 100%; }
+
+.g-ui-card {
+  background: var(--g-ui-surface);
+  border-radius: var(--g-ui-radius);
+  box-shadow: none;
+  border: 1px solid var(--g-ui-border);
+}
+.g-ui-card-border-default { border: 1px solid var(--g-ui-border); }
+.g-ui-card-border-none { border: none; }
+.g-ui-card-border-light { border: 1px solid var(--g-ui-border-light); }
+.g-ui-card-border-dark { border: 1px solid var(--g-ui-border-dark); }
+.g-ui-card-border-primary { border: 1px solid var(--g-ui-primary); }
+.g-ui-card-border-success { border: 1px solid var(--g-ui-success); }
+.g-ui-card-border-danger { border: 1px solid var(--g-ui-danger); }
+.g-ui-card-border-warning { border: 1px solid var(--g-ui-warning); }
+.g-ui-card-border-info { border: 1px solid var(--g-ui-info); }
+.g-ui-card-border-subtle { border: 1px solid var(--g-ui-border-subtle); }
+.g-ui-card-border-emphasized { border: 1px solid var(--g-ui-border-emphasized); }
+.g-ui-card-border-inverted { border: 1px solid var(--g-ui-border-inverted); }
+.g-ui-card-border-error { border: 1px solid var(--g-ui-border-error); }
+.g-ui-card-border-warning { border: 1px solid var(--g-ui-border-warning); }
+.g-ui-card-border-success { border: 1px solid var(--g-ui-border-success); }
+.g-ui-card-border-info { border: 1px solid var(--g-ui-border-info); }
+
+.g-ui-card-padding-xs { padding: var(--g-ui-space-10); }
+.g-ui-card-padding-sm { padding: var(--g-ui-space-14); }
+.g-ui-card-padding-md { padding: var(--g-ui-space-18); }
+.g-ui-card-padding-lg { padding: var(--g-ui-space-24); }
+.g-ui-card-radius-sm { border-radius: 8px; }
+.g-ui-card-radius-md { border-radius: 10px; }
+.g-ui-card-radius-lg { border-radius: 14px; }
+.g-ui-card-shadow-none { box-shadow: none; }
+.g-ui-card-shadow-sm { box-shadow: var(--g-ui-shadow-sm); }
+.g-ui-card-shadow-md { box-shadow: var(--g-ui-shadow-md); }
+.g-ui-card-shadow-lg { box-shadow: var(--g-ui-shadow-lg); }
+.g-ui-card-title {
+  margin-bottom: var(--g-ui-space-8);
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--g-ui-text);
+}
+.g-ui-card-content {
+  color: var(--g-ui-muted);
+  margin-bottom: var(--g-ui-space-10);
+}
+.g-ui-card-actions {
+  position:relative;
+  margin-top: var(--g-ui-space-10);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--g-ui-space-8);
+  border-top: 1px solid var(--g-ui-border);
+  box-sizing: border-box;
+}
+
+.g-ui-card-padding-xs .g-ui-card-title, .g-ui-card-padding-xs .g-ui-card-content { margin-bottom: var(--g-ui-space-10); }
+.g-ui-card-padding-sm .g-ui-card-title, .g-ui-card-padding-sm .g-ui-card-content { margin-bottom: var(--g-ui-space-14); }
+.g-ui-card-padding-md .g-ui-card-title, .g-ui-card-padding-md .g-ui-card-content { margin-bottom: var(--g-ui-space-18); }
+.g-ui-card-padding-lg .g-ui-card-title, .g-ui-card-padding-lg .g-ui-card-content { margin-bottom: var(--g-ui-space-24); }
+
+.g-ui-card-padding-xs .g-ui-card-actions { left: calc(0px - var(--g-ui-space-10)); width: calc(100% + var(--g-ui-space-10) + var(--g-ui-space-10)); padding: var(--g-ui-space-10) var(--g-ui-space-10) 0 var(--g-ui-space-10); }
+.g-ui-card-padding-sm .g-ui-card-actions { left: calc(0px - var(--g-ui-space-14)); width: calc(100% + var(--g-ui-space-14) + var(--g-ui-space-14)); padding: var(--g-ui-space-14) var(--g-ui-space-14) 0 var(--g-ui-space-14); }
+.g-ui-card-padding-md .g-ui-card-actions { left: calc(0px - var(--g-ui-space-18)); width: calc(100% + var(--g-ui-space-18) + var(--g-ui-space-18)); padding: var(--g-ui-space-18) var(--g-ui-space-18) 0 var(--g-ui-space-18); }
+.g-ui-card-padding-lg .g-ui-card-actions { left: calc(0px - var(--g-ui-space-24)); width: calc(100% + var(--g-ui-space-24) + var(--g-ui-space-24)); padding: var(--g-ui-space-24) var(--g-ui-space-24) 0 var(--g-ui-space-24); }
+
+.g-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+  border-radius: 999px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.25px;
+  white-space: nowrap;
+}
+.g-ui-badge-size-xs { font-size: 9px; height: 16px; padding: 0 var(--g-ui-space-6); }
+.g-ui-badge-size-sm { font-size: 10px; height: 18px; padding: 0 var(--g-ui-space-8); }
+.g-ui-badge-size-md { font-size: 11px; height: 20px; padding: 0 var(--g-ui-space-10); }
+.g-ui-badge-size-lg { font-size: 13px; height: 26px; padding: 0 var(--g-ui-space-12); }
+.g-ui-badge-size-xl { font-size: 16px; height: 32px; padding: 0 var(--g-ui-space-16); }
+.g-ui-badge-variant-filled {
+  background: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+  border: 1px solid transparent;
+}
+.g-ui-badge-variant-light {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+  border: 1px solid var(--g-ui-primary-muted);
+}
+.g-ui-badge-variant-outline {
+  background: transparent;
+  color: var(--g-ui-primary);
+  border: 1px solid var(--g-ui-primary);
+}
+.g-ui-badge-variant-dot {
+  background: transparent;
+  color: var(--g-ui-text);
+  border: 1px solid var(--g-ui-border);
+}
+.g-ui-badge-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-badge-dot::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--g-ui-success);
+}
+
+.g-ui-button {
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: transform .08s ease, background .12s ease, border .12s ease, color .12s ease;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-button:active { transform: translateY(1px); }
+.g-ui-button:disabled { opacity: 0.6; cursor: not-allowed; }
+.g-ui-button-full { width: 100%; }
+.g-ui-button-loading { opacity: 0.8; }
+.g-ui-button-section-left { margin-right: var(--g-ui-space-8); display: inline-flex; }
+.g-ui-button-section-right { margin-left: var(--g-ui-space-8); display: inline-flex; }
+.g-ui-button-variant-filled { background: var(--g-ui-primary); color: var(--g-ui-primary-fg); border: 1px solid transparent; }
+.g-ui-button-variant-light { background: var(--g-ui-primary-subtle); color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary-muted); }
+.g-ui-button-variant-outline { background: transparent; color: var(--g-ui-primary); border: 1px solid var(--g-ui-primary); }
+.g-ui-button-variant-subtle { background: transparent; color: var(--g-ui-text); border: 1px solid var(--g-ui-border); }
+.g-ui-button-variant-transparent { background: transparent; color: var(--g-ui-text); border: 1px solid transparent; }
+.g-ui-button-variant-filled:hover { background: var(--g-ui-primary-hover); }
+.g-ui-button-variant-light:hover { background: var(--g-ui-primary-muted); }
+.g-ui-button-variant-outline:hover { background: var(--g-ui-primary-subtle); }
+.g-ui-button-variant-subtle:hover { background: var(--g-ui-bg-muted); }
+.g-ui-button-variant-transparent:hover { background: var(--g-ui-bg-muted); }
+.g-ui-button-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-8); }
+.g-ui-button-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-10); }
+.g-ui-button-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-10); }
+.g-ui-button-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-11); }
+.g-ui-button-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-12); }
+
+.g-ui-input-wrapper {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--g-ui-border);
+  background: var(--g-ui-surface);
+  color: var(--g-ui-text);
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+  padding: 0 var(--g-ui-space-12);
+  box-sizing: border-box;
+}
+.g-ui-input-wrapper:focus-within {
+  border-color: var(--g-ui-primary);
+}
+.g-ui-input {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  height: 100%;
+  font-size: inherit;
+}
+.g-ui-input:focus,
+.g-ui-input:focus-within {
+  outline: none;
+}
+.g-ui-input::placeholder {
+  color: var(--g-ui-muted);
+  transition: opacity .12s ease;
+}
+.g-ui-input:focus::placeholder {
+  opacity: 0.5;
+}
+.g-ui-input-section {
+  display: inline-flex;
+  align-items: center;
+  color: var(--g-ui-muted);
+}
+.g-ui-input-error {
+  border-color: var(--g-ui-danger);
+}
+.g-ui-input-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-10); }
+.g-ui-input-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-12); }
+.g-ui-input-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-14); }
+.g-ui-input-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-16); }
+.g-ui-input-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-20); }
+.g-ui-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-text-input-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--g-ui-text);
+}
+.g-ui-text-input-description {
+  font-size: 12px;
+  color: var(--g-ui-muted);
+}
+.g-ui-text-input-error-text {
+  font-size: 12px;
+  color: var(--g-ui-danger);
+}
+.g-ui-date-input-popover .g-ui-popover-dropdown {
+  padding: 0;
+  border-width:0;
+}
+
+.g-ui-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+.g-ui-modal-overlay-light { background: rgba(0,0,0,0.4); }
+.g-ui-modal-overlay-normal { background: rgba(0,0,0,0.6); }
+.g-ui-modal-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-modal-centered { align-items: center; justify-content: center; }
+.g-ui-modal-top { align-items: flex-start; justify-content: center; padding-top: var(--g-ui-space-40); }
+.g-ui-modal-position-top-left { align-items: flex-start; justify-content: flex-start; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
+.g-ui-modal-position-top-center { align-items: flex-start; justify-content: center; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
+.g-ui-modal-position-top-right { align-items: flex-start; justify-content: flex-end; padding: var(--g-ui-space-40) var(--g-ui-space-20); }
+.g-ui-modal-position-center-left { align-items: center; justify-content: flex-start; padding: var(--g-ui-space-20); }
+.g-ui-modal-position-center { align-items: center; justify-content: center; padding: var(--g-ui-space-20); }
+.g-ui-modal-position-center-right { align-items: center; justify-content: flex-end; padding: var(--g-ui-space-20); }
+.g-ui-modal-position-bottom-left { align-items: flex-end; justify-content: flex-start; padding: var(--g-ui-space-20); padding-bottom: var(--g-ui-space-40); }
+.g-ui-modal-position-bottom-center { align-items: flex-end; justify-content: center; padding: var(--g-ui-space-20); padding-bottom: var(--g-ui-space-40); }
+.g-ui-modal-position-bottom-right { align-items: flex-end; justify-content: flex-end; padding: var(--g-ui-space-20); padding-bottom: var(--g-ui-space-40); }
+.g-ui-modal {
+  background: var(--g-ui-bg);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: 8px;
+  padding: var(--g-ui-space-16);
+  min-width: 320px;
+  max-width: 780px;
+  box-shadow: var(--g-ui-shadow-lg);
+}
+.g-ui-modal-size-sm { width: 380px; }
+.g-ui-modal-size-md { width: 440px; }
+.g-ui-modal-size-lg { width: 620px; }
+.g-ui-modal-size-xl { width: 780px; }
+.g-ui-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-ui-space-12);
+}
+.g-ui-modal-title { font-weight: 700; }
+.g-ui-modal-close {
+  padding: 0;
+  width: 28px;
+  height: 28px;
+}
+.g-ui-modal-close svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.g-ui-checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+  box-sizing: border-box;
+}
+.g-ui-checkbox-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  cursor: pointer;
+}
+.g-ui-checkbox-indeterminate,
+.g-ui-checkbox-checked {
+  position:absolute;
+  color: var(--g-ui-primary-fg);
+  fill: var(--g-ui-primary-fg);
+}
+.g-ui-checkbox-indeterminate svg,
+.g-ui-checkbox-checked svg {
+  fill: var(--g-ui-primary-fg);
+}
+.g-ui-checkbox-input {
+  appearance: none;
+  width: var(--g-ui-control-size, 16px);
+  height: var(--g-ui-control-size, 16px);
+  border: 1px solid var(--g-ui-border);
+  border-radius: 4px;
+  background: var(--g-ui-bg);
+  position: relative;
+  transition: background-color .12s ease, border-color .12s ease;
+}
+.g-ui-checkbox-input:focus-visible {
+  outline: 2px solid var(--g-ui-primary);
+  outline-offset: 2px;
+}
+.g-ui-checkbox-input:checked {
+  background: var(--g-ui-primary);
+  border-color: var(--g-ui-primary);
+}
+.g-ui-checkbox-input:indeterminate {
+  background: var(--g-ui-primary);
+  border-color: var(--g-ui-primary);
+}
+
+.g-ui-checkbox-label { font-size: 14px; }
+.g-ui-checkbox-description { font-size: 12px; color: var(--g-ui-muted); }
+.g-ui-checkbox-size-xs { --g-ui-control-size: 16px; --g-ui-control-inner-offset: 4px; }
+.g-ui-checkbox-size-sm { --g-ui-control-size: 20px; --g-ui-control-inner-offset: 5px; }
+.g-ui-checkbox-size-md { --g-ui-control-size: 24px; --g-ui-control-inner-offset: 6px; }
+.g-ui-checkbox-size-lg { --g-ui-control-size: 30px; --g-ui-control-inner-offset: 7px; }
+.g-ui-checkbox-size-xl { --g-ui-control-size: 36px; --g-ui-control-inner-offset: 8px; }
+
+.g-ui-checkbox-size-xs .g-ui-checkbox-indeterminate { top: 2px;left:4px; }
+.g-ui-checkbox-size-xs .g-ui-checkbox-indeterminate svg { width: 16px; height: 16px; }
+.g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate { top:3px; left:4px;  }
+.g-ui-checkbox-size-sm .g-ui-checkbox-indeterminate svg { width: 20px; height:20px;  }
+.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate { top:3px; left:4px; }
+.g-ui-checkbox-size-md .g-ui-checkbox-indeterminate svg { width: 24px; height: 24px; }
+.g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate { top:4px; left:5px; }
+.g-ui-checkbox-size-lg .g-ui-checkbox-indeterminate svg { width: 28px; height: 28px; }
+.g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate { top:5px; left:6px; }
+.g-ui-checkbox-size-xl .g-ui-checkbox-indeterminate svg { width: 32px; height: 32px; }
+
+.g-ui-checkbox-size-xs .g-ui-checkbox-checked { top: 2px;left:4px; }
+.g-ui-checkbox-size-xs .g-ui-checkbox-checked svg { width: 16px; height: 16px; }
+.g-ui-checkbox-size-sm .g-ui-checkbox-checked { top:3px; left:4px;  }
+.g-ui-checkbox-size-sm .g-ui-checkbox-checked svg { width: 20px; height:20px;  }
+.g-ui-checkbox-size-md .g-ui-checkbox-checked { top:3px; left:4px; }
+.g-ui-checkbox-size-md .g-ui-checkbox-checked svg { width: 24px; height: 24px; }
+.g-ui-checkbox-size-lg .g-ui-checkbox-checked { top:4px; left:5px; }
+.g-ui-checkbox-size-lg .g-ui-checkbox-checked svg { width: 28px; height: 28px; }
+.g-ui-checkbox-size-xl .g-ui-checkbox-checked { top:5px; left:6px; }
+.g-ui-checkbox-size-xl .g-ui-checkbox-checked svg { width: 32px; height: 32px; }
+
+.g-ui-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  cursor: pointer;
+}
+.g-ui-switch-input {
+  appearance: none;
+  width: var(--g-ui-switch-width, 36px);
+  height: var(--g-ui-switch-height, 20px);
+  border-radius: 999px;
+  background: var(--g-ui-bg-muted);
+  border: 1px solid var(--g-ui-border);
+  position: relative;
+  transition: background .15s ease, border .15s ease;
+}
+.g-ui-switch-input:focus-visible {
+  outline: 2px solid var(--g-ui-primary);
+  outline-offset: 2px;
+}
+.g-ui-switch-input::after {
+  content: '';
+  position: absolute;
+  width: var(--g-ui-switch-thumb, 14px);
+  height: var(--g-ui-switch-thumb, 14px);
+  border-radius: 50%;
+  background: #fff;
+  top: var(--g-ui-switch-offset, 2px);
+  left: var(--g-ui-switch-offset, 2px);
+  transition: transform .15s ease;
+}
+.g-ui-switch-input:checked {
+  background: var(--g-ui-primary);
+  border-color: var(--g-ui-primary);
+}
+.g-ui-switch-input:checked::after {
+  transform: translateX(calc(var(--g-ui-switch-width, 36px) - var(--g-ui-switch-thumb, 14px) - (var(--g-ui-switch-offset, 2px) * 2)));
+}
+.g-ui-switch-label { font-size: 14px; }
+.g-ui-switch-size-xs { --g-ui-switch-width: 32px; --g-ui-switch-height: 16px; --g-ui-switch-thumb: 12px; --g-ui-switch-offset: 2px; }
+.g-ui-switch-size-sm { --g-ui-switch-width: 38px; --g-ui-switch-height: 20px; --g-ui-switch-thumb: 14px; --g-ui-switch-offset: 3px; }
+.g-ui-switch-size-md { --g-ui-switch-width: 46px; --g-ui-switch-height: 24px; --g-ui-switch-thumb: 18px; --g-ui-switch-offset: 3px; }
+.g-ui-switch-size-lg { --g-ui-switch-width: 56px; --g-ui-switch-height: 30px; --g-ui-switch-thumb: 22px; --g-ui-switch-offset: 4px; }
+.g-ui-switch-size-xl { --g-ui-switch-width: 72px; --g-ui-switch-height: 36px; --g-ui-switch-thumb: 28px; --g-ui-switch-offset: 4px; }
+
+.g-ui-select-root {
+  position: relative;
+  width: 100%;
+}
+.g-ui-select {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 100%;
+  cursor: pointer;
+  color: var(--g-ui-text);
+  font-size: inherit;
+}
+.g-ui-select-value {
+  flex: 1;
+}
+.g-ui-select-placeholder {
+  color: var(--g-ui-muted);
+}
+.g-ui-select-caret {
+  color: var(--g-ui-muted);
+  font-size: 12px;
+}
+.g-ui-select-dropdown {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-6));
+  left: 0;
+  right: 0;
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  background: var(--g-ui-bg);
+  box-shadow: var(--g-ui-shadow-sm);
+  padding: var(--g-ui-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-4);
+  z-index: 60;
+  max-height: 240px;
+  overflow: auto;
+}
+.g-ui-select-item {
+  padding: var(--g-ui-space-6) var(--g-ui-space-8);
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+}
+.g-ui-select-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-select-item-active {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+}
+.g-ui-select-item-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.g-ui-select-item-disabled:hover {
+  background: transparent;
+}
+.g-ui-select-size-xs { font-size: 12px; height: 30px; padding: 0 var(--g-ui-space-10); }
+.g-ui-select-size-sm { font-size: 13px; height: 36px; padding: 0 var(--g-ui-space-12); }
+.g-ui-select-size-md { font-size: 14px; height: 42px; padding: 0 var(--g-ui-space-14); }
+.g-ui-select-size-lg { font-size: 15px; height: 50px; padding: 0 var(--g-ui-space-16); }
+.g-ui-select-size-xl { font-size: 16px; height: 60px; padding: 0 var(--g-ui-space-20); }
+
+.g-ui-tabs { display: flex; flex-direction: column; }
+.g-ui-tabs-list { display: flex; flex-wrap: wrap; gap: 0; }
+.g-ui-tabs-tab {
+  position: relative;
+  padding: var(--g-ui-space-8) var(--g-ui-space-16);
+  font-size: 13px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  color: var(--g-ui-text);
+  margin-bottom: calc(0px - var(--g-ui-space-2));
+}
+.g-ui-tabs-panel { padding-top: var(--g-ui-space-12); }
+.g-ui-tabs-variant-default .g-ui-tabs-list {
+  border-bottom: 2px solid var(--g-ui-border-muted);
+}
+.g-ui-tabs-variant-default .g-ui-tabs-tab {
+  border-bottom: 2px solid var(--g-ui-border-muted);
+  border-radius: 4px 4px 0 0;
+}
+.g-ui-tabs-variant-default .g-ui-tabs-tab:hover {
+  background: var(--g-ui-bg-muted);
+}
+.g-ui-tabs-variant-default .g-ui-tabs-tab-active {
+  border-color: var(--g-ui-primary);
+  color: var(--g-ui-primary);
+}
+.g-ui-tabs-variant-outline .g-ui-tabs-list {
+  border-bottom: 1px solid var(--g-ui-border-muted);
+}
+.g-ui-tabs-variant-outline .g-ui-tabs-tab {
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 8px 8px 0 0;
+}
+.g-ui-tabs-variant-outline .g-ui-tabs-tab-active {
+  border-color: var(--g-ui-border);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-primary);
+}
+.g-ui-tabs-variant-pills .g-ui-tabs-list {
+  gap: var(--g-ui-space-8);
+}
+.g-ui-tabs-variant-pills .g-ui-tabs-tab {
+  border-radius: 8px;
+  background: transparent;
+}
+.g-ui-tabs-variant-pills .g-ui-tabs-tab:hover {
+  background: var(--g-ui-bg-muted);
+}
+.g-ui-tabs-variant-pills .g-ui-tabs-tab-active {
+  background: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+}
+
+.g-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--g-ui-text);
+  font-size: 13px;
+}
+.g-ui-table-with-border {
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  overflow: hidden;
+}
+.g-ui-table th,
+.g-ui-table td {
+  border-bottom: 1px solid var(--g-ui-border-muted);
+  padding: var(--g-ui-space-10) var(--g-ui-space-12);
+  text-align: left;
+}
+.g-ui-table th {
+  font-weight: 500;
+  color: var(--g-ui-muted);
+}
+.g-ui-table-column-borders th,
+.g-ui-table-column-borders td {
+  border-right: 1px solid var(--g-ui-border);
+}
+.g-ui-table-column-borders th:last-child,
+.g-ui-table-column-borders td:last-child {
+  border-right: 0;
+}
+.g-ui-table-striped tbody tr:nth-child(odd) { background: var(--g-ui-bg-subtle); }
+.g-ui-table-hover tbody tr:hover { background: var(--g-ui-bg-muted); }
+
+.g-ui-accordion {
+  width: calc(100%);
+  display: flex; 
+  flex-direction: column; 
+  border-bottom: 1px solid var(--g-ui-border);
+}
+.g-ui-accordion-header {
+  box-sizing: border-box;
+  padding: var(--g-ui-space-12) var(--g-ui-space-15);
+  font-size: 14px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.g-ui-accordion-content {
+  padding: var(--g-ui-space-12);
+}
+
+.g-ui-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-tooltip-content {
+  position: absolute;
+  bottom: calc(100% + var(--g-ui-space-8));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--g-ui-gray-900);
+  color: var(--g-ui-gray-50);
+  border: 0;
+  padding: var(--g-ui-space-6) var(--g-ui-space-10);
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease, transform .12s ease;
+}
+.g-ui-tooltip:hover .g-ui-tooltip-content {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-2px);
+}
+
+.g-ui-menu {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-menu-dropdown {
+  position: fixed;
+  right: 0;
+  width:10px;
+  min-width: 180px;
+  background: var(--g-ui-surface);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  box-shadow: var(--g-ui-shadow-sm);
+  padding: var(--g-ui-space-4);
+  z-index: 10000;
+}
+.g-ui-menu-left { left: 0; right: auto; }
+.g-ui-menu-center { left: 50%; right: auto; transform: translateX(-50%); }
+.g-ui-menu-right { right: 0; left: auto; }
+.g-ui-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+  padding: var(--g-ui-space-6) var(--g-ui-space-12);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--g-ui-text);
+  font-size: 13px;
+}
+.g-ui-menu-item:hover { background: var(--g-ui-bg-subtle); }
+
+.g-ui-menu-overlay {
+  position: fixed;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  inset: 0;
+  z-index: 9999;
+}
+
+.g-ui-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+}
+.g-ui-drawer-overlay-normal { background: rgba(0,0,0,0.6); }
+.g-ui-drawer-overlay-light { background: rgba(0,0,0,0.4); }
+.g-ui-drawer-overlay-dark { background: rgba(0,0,0,0.8); }
+.g-ui-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  background: var(--g-ui-bg);
+  border-left: 1px solid var(--g-ui-border-muted);
+  box-shadow: var(--g-ui-shadow-lg);
+  z-index: 999;
+  padding: var(--g-ui-space-16);
+}
+.g-ui-drawer-right { right: 0; }
+.g-ui-drawer-left { left: 0; border-left: 0; border-right: 1px solid var(--g-ui-border-muted); }
+.g-ui-drawer-size-sm { width: 380px; }
+.g-ui-drawer-size-md { width: 440px; }
+.g-ui-drawer-size-lg { width: 620px; }
+.g-ui-drawer-size-xl { width: 780px; }
+
+.g-ui-notification {
+  border-radius: var(--g-ui-radius);
+  padding: var(--g-ui-space-10) var(--g-ui-space-12) var(--g-ui-space-10) var(--g-ui-space-22);
+  background: var(--g-ui-surface);
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+  box-shadow: var(--g-ui-shadow-lg);
+  position: relative;
+  overflow: hidden;
+}
+.g-ui-notification-bordered {
+  border: 1px solid var(--g-ui-border);
+}
+.g-ui-notification::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  bottom: 4px;
+  width: 6px;
+  border-radius: 999px;
+  background: var(--g-ui-primary);
+}
+.g-ui-notification-with-icon::before {
+  display: none;
+}
+.g-ui-notification-body {
+  flex: 1;
+  overflow: hidden;
+}
+.g-ui-notification-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-notification-loader { margin-right: var(--g-ui-space-8); }
+.g-ui-notification-close {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: var(--g-ui-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.g-ui-notification-close span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.g-ui-notification-close svg{
+  width: 24px;
+  height: 24px;
+}
+
+.g-ui-notification-title { font-weight: 500; font-size: 13px; line-height: 1.35; }
+.g-ui-notification-primary::before { background: var(--g-ui-primary); }
+.g-ui-notification-blue::before { background: var(--g-ui-blue-500); }
+.g-ui-notification-success::before { background: var(--g-ui-success); }
+.g-ui-notification-danger::before { background: var(--g-ui-danger); }
+.g-ui-notification-primary .g-ui-notification-icon { background: var(--g-ui-primary); }
+.g-ui-notification-blue .g-ui-notification-icon { background: var(--g-ui-blue-500); }
+.g-ui-notification-success .g-ui-notification-icon { background: var(--g-ui-success); }
+.g-ui-notification-danger .g-ui-notification-icon { background: var(--g-ui-danger); }
+
+.g-ui-divider {
+  width: 100%;
+  border: 0;
+  height: 1px;
+  background: var(--g-ui-border);
+  margin-top: var(--g-ui-space-9);
+  margin-bottom: var(--g-ui-space-9);
+}
+.g-ui-divider-size-xs { height: 1px; }
+.g-ui-divider-size-sm { height: 2px; }
+.g-ui-divider-size-md { height: 3px; }
+.g-ui-divider-size-lg { height: 4px; }
+.g-ui-divider-size-xl { height: 5px; }
+.g-ui-divider.label {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  color: var(--g-ui-muted);
+  font-size: 12px;
+  background: transparent;
+}
+.g-ui-divider.label::before,
+.g-ui-divider.label::after {
+  content: '';
+  height: 1px;
+  flex: 1;
+  background: var(--g-ui-border);
+}
+.g-ui-divider-label-left.label::before { flex: 0 0 12px; }
+.g-ui-divider-label-right.label::after { flex: 0 0 12px; }
+.g-ui-divider-label-text {
+  color: var(--g-ui-muted);
+  font-size: 12px;
+  padding: 0 var(--g-ui-space-10);
+  position: relative;
+  z-index: 1;
+}
+.g-ui-divider-vertical {
+  width: 1px;
+  height: 100%;
+  background: var(--g-ui-border);
+  margin: 0 var(--g-ui-space-10);
+}
+
+.g-ui-paper {
+  background: var(--g-ui-surface);
+  border: 0;
+  border-radius: 10px;
+}
+
+.g-ui-textarea {
+  min-height: 120px;
+  resize: vertical;
+  padding: var(--g-ui-space-8) 0;
+  height: auto;
+}
+.g-ui-input-multiline {
+  align-items: stretch;
+  padding: 0 var(--g-ui-space-12);
+  height: auto;
+}
+.g-ui-input-multiline .g-ui-input {
+  padding: var(--g-ui-space-8) 0;
+  height: auto;
+}
+.g-ui-number-field {
+  width: 100%;
+}
+.g-ui-number-field-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-2);
+  margin-left: auto;
+}
+.g-ui-number-field-control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--g-ui-border);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  line-height: 1;
+}
+.g-ui-number-field-control:hover {
+  background: var(--g-ui-bg-subtle);
+}
+
+.g-ui-alert {
+  border-radius: var(--g-ui-radius);
+  border: 1px solid transparent;
+  padding: var(--g-ui-space-16);
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-alert-header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+}
+.g-ui-alert-icon {
+  display: inline-flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  margin-right: var(--g-ui-space-8);
+}
+.g-ui-alert-close {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: var(--g-ui-muted);
+  cursor: pointer;
+}
+.g-ui-alert-title { font-weight: 700; }
+.g-ui-alert-primary { background: var(--g-ui-primary-subtle); color: var(--g-ui-primary); border-color: transparent; }
+.g-ui-alert-blue { background: var(--g-ui-blue-subtle); color: var(--g-ui-blue-fg); border-color: transparent; }
+.g-ui-alert-success { background: var(--g-ui-green-subtle); color: var(--g-ui-green-fg); border-color: transparent; }
+.g-ui-alert-danger { background: var(--g-ui-red-subtle); color: var(--g-ui-red-fg); border-color: transparent; }
+.g-ui-alert-warning { background: var(--g-ui-orange-subtle); color: var(--g-ui-orange-fg); border-color: transparent; }
+
+.g-ui-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--g-ui-bg-muted);
+  color: var(--g-ui-text);
+  overflow: hidden;
+  border: 1px solid var(--g-ui-border);
+  font-weight: 600;
+}
+.g-ui-avatar-size-xs { width: 16px; height: 16px; font-size: 8px; }
+.g-ui-avatar-size-sm { width: 26px; height: 26px; font-size: 10px; }
+.g-ui-avatar-size-md { width: 38px; height: 38px; font-size: 13px; }
+.g-ui-avatar-size-lg { width: 56px; height: 56px; font-size: 18px; }
+.g-ui-avatar-size-xl { width: 84px; height: 84px; font-size: 24px; }
+
+.g-ui-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.g-ui-icon-size-xs { font-size: 14px; }
+.g-ui-icon-size-sm { font-size: 18px; }
+.g-ui-icon-size-md { font-size: 22px; }
+.g-ui-icon-size-lg { font-size: 28px; }
+.g-ui-icon-size-xl { font-size: 36px; }
+.g-ui-icon-color-primary { color: var(--g-ui-primary); }
+.g-ui-icon-color-success { color: var(--g-ui-green-500); }
+.g-ui-icon-color-warning { color: var(--g-ui-yellow-500); }
+.g-ui-icon-color-error { color: var(--g-ui-red-500); }
+.g-ui-icon-color-muted { color: var(--g-ui-fg-muted); }
+.g-ui-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+.g-ui-kbd {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--g-ui-space-2) var(--g-ui-space-6);
+  border-radius: 6px;
+  border: 1px solid var(--g-ui-border-muted);
+  border-bottom-width: 3px;
+  background: var(--g-ui-bg-muted);
+  font-size: 12px;
+  color: var(--g-ui-text);
+}
+
+.g-ui-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--g-ui-bg-muted);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  padding: var(--g-ui-space-2) var(--g-ui-space-6);
+  font-size: 11px;
+  color: var(--g-ui-text);
+}
+
+.g-ui-blockquote {
+  border-left: 5px solid var(--g-ui-primary);
+  padding: var(--g-ui-space-24) var(--g-ui-space-38);
+  background: var(--g-ui-bg-muted);
+  color: var(--g-ui-text);
+  border-radius: 4px;
+}
+
+.g-ui-grid {
+  display: grid;
+}
+.g-ui-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.g-ui-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.g-ui-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.g-ui-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.g-ui-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.g-ui-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+
+.g-ui-list {
+  margin: 0;
+  color: var(--g-ui-text);
+  list-style: none;
+  padding-left: 0;
+}
+.g-ui-list-item {
+  list-style: none;
+  padding: var(--g-ui-space-6) 0;
+}
+.g-ui-list-item-border {
+  border-bottom: 1px solid var(--g-ui-border-muted);
+}
+.g-ui-list-item-section {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.g-ui-list-item-shell {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  grid-column: 2;
+  flex-wrap: wrap;
+}
+.g-ui-list-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-2);
+  flex: 1;
+}
+.g-ui-list-item-title {
+  font-weight: 600;
+}
+.g-ui-list-item-body {
+  color: var(--g-ui-muted);
+}
+.g-ui-list-unordered { padding-left: 0; }
+.g-ui-list-ordered { padding-left: 0; counter-reset: g-ui-list; }
+.g-ui-list-none { padding-left: 0; }
+.g-ui-list-unordered > li,
+.g-ui-list-ordered > li {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: var(--g-ui-space-8);
+  align-items: center;
+}
+.g-ui-list-ordered > li:not(.g-ui-list-nested-item) { counter-increment: g-ui-list; }
+.g-ui-list-unordered > li:not(.g-ui-list-nested-item)::before,
+.g-ui-list-ordered > li:not(.g-ui-list-nested-item)::before {
+  grid-column: 1;
+  align-self: flex-start;
+  justify-self: end;
+  color: currentColor;
+}
+.g-ui-list-unordered > li:not(.g-ui-list-nested-item)::before {
+  content: '\u2022';
+}
+.g-ui-list-ordered > li:not(.g-ui-list-nested-item)::before {
+  content: counters(g-ui-list, '.') '.';
+}
+.g-ui-list-nested-item {
+  list-style: none;
+  padding-left: 0;
+  grid-template-columns: 1fr;
+  column-gap: 0;
+}
+.g-ui-list-nested-item::before {
+  content: none;
+}
+.g-ui-list-unordered > li > :not(.g-ui-list-item-shell),
+.g-ui-list-ordered > li > :not(.g-ui-list-item-shell) {
+  grid-column: 2;
+}
+.g-ui-list > li > .g-ui-list {
+  grid-column: 2;
+  margin-top: var(--g-ui-space-6);
+}
+.g-ui-list-item-shell > .g-ui-list {
+  flex-basis: 100%;
+  margin-left: 0;
+}
+.g-ui-list .g-ui-list {
+  margin-left: var(--g-ui-space-12);
+}
+.g-ui-list .g-ui-list-unordered,
+.g-ui-list .g-ui-list-ordered {
+  padding-left: 0;
+}
+.g-ui-list-with-padding { padding-left: var(--g-ui-space-36); }
+.g-ui-list-size-xs { font-size: 12px; line-height: 1.4; }
+.g-ui-list-size-sm { font-size: 13px; line-height: 1.45; }
+.g-ui-list-size-md { font-size: 14px; line-height: 1.5; }
+.g-ui-list-size-lg { font-size: 16px; line-height: 1.6; }
+.g-ui-list-size-xl { font-size: 18px; line-height: 1.65; }
+
+.g-ui-anchor {
+  color: var(--g-ui-primary);
+  text-decoration: none;
+}
+.g-ui-anchor:hover { text-decoration: underline; }
+
+.g-ui-image {
+  max-width: 100%;
+  border-radius: var(--g-ui-radius);
+}
+
+.g-ui-progress {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--g-ui-bg-muted);
+  border: 0;
+  overflow: hidden;
+}
+.g-ui-progress-bar {
+  height: 100%;
+  background: var(--g-ui-primary);
+}
+.g-ui-progress-size-xs { height: 3px; }
+.g-ui-progress-size-sm { height: 5px; }
+.g-ui-progress-size-md { height: 8px; }
+.g-ui-progress-size-lg { height: 12px; }
+.g-ui-progress-size-xl { height: 16px; }
+.g-ui-progress-0 .g-ui-progress-bar { width: 0%; }
+.g-ui-progress-5 .g-ui-progress-bar { width: 5%; }
+.g-ui-progress-10 .g-ui-progress-bar { width: 10%; }
+.g-ui-progress-15 .g-ui-progress-bar { width: 15%; }
+.g-ui-progress-20 .g-ui-progress-bar { width: 20%; }
+.g-ui-progress-25 .g-ui-progress-bar { width: 25%; }
+.g-ui-progress-30 .g-ui-progress-bar { width: 30%; }
+.g-ui-progress-35 .g-ui-progress-bar { width: 35%; }
+.g-ui-progress-40 .g-ui-progress-bar { width: 40%; }
+.g-ui-progress-45 .g-ui-progress-bar { width: 45%; }
+.g-ui-progress-50 .g-ui-progress-bar { width: 50%; }
+.g-ui-progress-55 .g-ui-progress-bar { width: 55%; }
+.g-ui-progress-60 .g-ui-progress-bar { width: 60%; }
+.g-ui-progress-65 .g-ui-progress-bar { width: 65%; }
+.g-ui-progress-70 .g-ui-progress-bar { width: 70%; }
+.g-ui-progress-75 .g-ui-progress-bar { width: 75%; }
+.g-ui-progress-80 .g-ui-progress-bar { width: 80%; }
+.g-ui-progress-85 .g-ui-progress-bar { width: 85%; }
+.g-ui-progress-90 .g-ui-progress-bar { width: 90%; }
+.g-ui-progress-95 .g-ui-progress-bar { width: 95%; }
+.g-ui-progress-100 .g-ui-progress-bar { width: 100%; }
+.g-ui-progress-success .g-ui-progress-bar { background: var(--g-ui-success); }
+.g-ui-progress-danger .g-ui-progress-bar { background: var(--g-ui-danger); }
+
+.g-ui-slider {
+  width: 100%;
+  --g-ui-slider-size: 8px;
+  height: calc(var(--g-ui-slider-size) * 2);
+  padding: 0 var(--g-ui-slider-size);
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.g-ui-range-slider {
+  width: 100%;
+  --g-ui-slider-size: 8px;
+  height: calc(var(--g-ui-slider-size) * 2);
+  padding: 0 var(--g-ui-slider-size);
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.g-ui-slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--g-ui-slider-size);
+  border-radius: 999px;
+  background: var(--g-ui-bg-emphasized);
+}
+.g-ui-slider-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--g-ui-primary);
+  border-radius: 999px;
+}
+.g-ui-slider-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--g-ui-slider-size) * 2);
+  height: calc(var(--g-ui-slider-size) * 2);
+  border-radius: 50%;
+  background: var(--g-ui-surface);
+  border: 4px solid var(--g-ui-primary);
+  cursor: pointer;
+}
+.g-ui-slider-marks {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-10));
+  left:10px;
+  right:15px;
+  height: 18px;
+  box-sizing: border-box;
+  padding: 0 var(--g-ui-slider-size);
+}
+.g-ui-slider-mark {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.g-ui-slider-mark-label {
+  font-size: 11px;
+  color: var(--g-ui-muted);
+}
+
+.g-ui-slider-disabled .g-ui-slider-track { background: var(--g-ui-border); }
+.g-ui-slider-disabled .g-ui-slider-bar { background: var(--g-ui-border-emphasized); }
+.g-ui-slider-disabled .g-ui-slider-thumb { cursor: not-allowed; opacity: 0.6; }
+.g-ui-slider-size-xs { --g-ui-slider-size: 4px; }
+.g-ui-slider-size-sm { --g-ui-slider-size: 6px; }
+.g-ui-slider-size-md { --g-ui-slider-size: 8px; }
+.g-ui-slider-size-lg { --g-ui-slider-size: 10px; }
+.g-ui-slider-size-xl { --g-ui-slider-size: 12px; }
+
+.g-ui-skeleton {
+  background: var(--g-ui-border-muted);
+  animation: g-ui-skeleton-fade 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+@keyframes g-ui-skeleton-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
+
+.g-ui-chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  cursor: pointer;
+  background: transparent;
+  color: var(--g-ui-text);
+}
+.g-ui-chip-active {
+  background: var(--g-ui-primary);
+  border-color: transparent;
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-chip-size-xs { font-size: 12px; height: 20px; padding: 0 var(--g-ui-space-6); }
+.g-ui-chip-size-sm { font-size: 13px; height: 21px; padding: 0 var(--g-ui-space-5); }
+.g-ui-chip-size-md { font-size: 14px; height: 22px; padding: 0 var(--g-ui-space-6); }
+.g-ui-chip-size-lg { font-size: 15px; height: 23px; padding: 0 var(--g-ui-space-7); }
+.g-ui-chip-size-xl { font-size: 16px; height: 24px; padding: 0 var(--g-ui-space-8); }
+.g-ui-chip-variant-filled { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
+.g-ui-chip-variant-light { background: var(--g-ui-bg-muted); color: var(--g-ui-text); border-color: transparent; }
+.g-ui-chip-variant-outline { background: var(--g-ui-surface); color: var(--g-ui-text); border-color: var(--g-ui-border); }
+.g-ui-chip-variant-filled.g-ui-chip-active,
+.g-ui-chip-variant-light.g-ui-chip-active,
+.g-ui-chip-variant-outline.g-ui-chip-active {
+  background: var(--g-ui-primary);
+  border-color: transparent;
+  color: var(--g-ui-primary-fg);
+}
+
+.g-ui-segmented {
+  display: inline-flex;
+  border-radius: 10px;
+  overflow: hidden;
+  padding: var(--g-ui-space-4);
+  background: var(--g-ui-bg-muted);
+}
+.g-ui-segmented-item {
+  padding: var(--g-ui-space-4) var(--g-ui-space-14);
+  cursor: pointer;
+  background: transparent;
+  color: var(--g-ui-text);
+  border-radius: 8px;
+}
+.g-ui-segmented-active {
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+}
+.g-ui-segmented-size-xs .g-ui-segmented-item { padding: var(--g-ui-space-2) var(--g-ui-space-6); font-size: 12px; }
+.g-ui-segmented-size-sm .g-ui-segmented-item { padding: var(--g-ui-space-3) var(--g-ui-space-10); font-size: 13px; }
+.g-ui-segmented-size-md .g-ui-segmented-item { padding: var(--g-ui-space-4) var(--g-ui-space-14); font-size: 14px; }
+.g-ui-segmented-size-lg .g-ui-segmented-item { padding: var(--g-ui-space-7) var(--g-ui-space-16); font-size: 15px; }
+.g-ui-segmented-size-xl .g-ui-segmented-item { padding: var(--g-ui-space-10) var(--g-ui-space-20); font-size: 16px; }
+
+.g-ui-pagination {
+  display: inline-flex;
+  gap: var(--g-ui-space-6);
+  align-items: center;
+}
+.g-ui-pagination-item {
+  min-width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid var(--g-ui-border-muted);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  cursor: pointer;
+  font-size: 14px;
+}
+.g-ui-pagination-item-active {
+  background: var(--g-ui-primary);
+  border-color: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-pagination-item.g-ui-pagination-item-active:hover{
+  background: var(--g-ui-primary-hover);
+  border-color: var(--g-ui-primary-hover);
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-pagination-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-pagination-size-xs .g-ui-pagination-item { min-width: 22px; height: 22px; font-size: 12px; }
+.g-ui-pagination-size-sm .g-ui-pagination-item { min-width: 26px; height: 26px; font-size: 12px; }
+.g-ui-pagination-size-md .g-ui-pagination-item { min-width: 32px; height: 32px; font-size: 14px; }
+.g-ui-pagination-size-lg .g-ui-pagination-item { min-width: 38px; height: 38px; font-size: 15px; }
+.g-ui-pagination-size-xl .g-ui-pagination-item { min-width: 44px; height: 44px; font-size: 16px; }
+
+.g-ui-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.g-ui-timeline-item {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: var(--g-ui-space-16);
+  align-items: start;
+  position: relative;
+  padding-bottom: var(--g-ui-space-24);
+}
+.g-ui-timeline-item:last-child {
+  padding-bottom: 0;
+}
+.g-ui-timeline-item::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  top: 20px;
+  bottom: 0;
+  width: 4px;
+  background: var(--g-ui-border-muted);
+}
+.g-ui-timeline-item:last-child::before {
+  display: none;
+}
+.g-ui-timeline-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--g-ui-bg);
+  border: 4px solid var(--g-ui-primary);
+  margin-top: 0;
+  position: relative;
+  z-index: 1;
+}
+.g-ui-timeline-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-4);
+}
+.g-ui-timeline-title { font-weight: 600; }
+.g-ui-timeline-desc { color: var(--g-ui-muted); font-size: 13px; }
+
+.g-ui-stepper {
+  display: flex;
+  gap: var(--g-ui-space-12);
+  align-items: center;
+}
+.g-ui-stepper-item {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+}
+.g-ui-stepper-index {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 1px solid var(--g-ui-border-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  background: var(--g-ui-bg);
+}
+.g-ui-stepper-active .g-ui-stepper-index {
+  background: var(--g-ui-primary-subtle);
+  border-color: var(--g-ui-primary);
+  color: var(--g-ui-primary);
+}
+.g-ui-stepper-label { font-size: 14px; font-weight: 500; }
+
+.g-ui-rating {
+  display: inline-flex;
+  gap: var(--g-ui-space-2);
+}
+.g-ui-rating-item {
+  cursor: pointer;
+  color: var(--g-ui-border);
+}
+.g-ui-rating-item-active {
+  color: var(--g-ui-primary);
+}
+.g-ui-rating-size-xs { font-size: 14px; }
+.g-ui-rating-size-sm { font-size: 18px; }
+.g-ui-rating-size-md { font-size: 20px; }
+.g-ui-rating-size-lg { font-size: 28px; }
+.g-ui-rating-size-xl { font-size: 32px; }
+
+.g-ui-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: 999px;
+  padding: var(--g-ui-space-4) var(--g-ui-space-10);
+  font-size: 12px;
+  color: var(--g-ui-text);
+  background: var(--g-ui-bg);
+}
+
+
+.g-ui-calendar {
+  width: 100%;
+  border: 1px solid var(--g-ui-border);
+  border-radius: var(--g-ui-radius);
+  background: var(--g-ui-bg);
+  padding: var(--g-ui-space-12);
+}
+.g-ui-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--g-ui-space-10);
+}
+.g-ui-calendar-title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-calendar-title-button {
+  border: 0;
+  background: transparent;
+  padding: var(--g-ui-space-2) var(--g-ui-space-6);
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--g-ui-text);
+  cursor: pointer;
+}
+.g-ui-calendar-title-button:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-calendar-title {
+  font-weight: 500;
+  font-size: 14px;
+}
+.g-ui-calendar-nav-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+
+.g-ui-calendar-size-xs { width: 220px; }
+.g-ui-calendar-size-sm { width: 260px; }
+.g-ui-calendar-size-md { width: 300px; }
+.g-ui-calendar-size-lg { width: 370px; }
+.g-ui-calendar-size-xl { width: 420px; }
+
+.g-ui-calendar-size-xs .g-ui-calendar-grid { gap: var(--g-ui-space-2); }
+.g-ui-calendar-size-sm .g-ui-calendar-grid { gap: var(--g-ui-space-4); }
+.g-ui-calendar-size-md .g-ui-calendar-grid { gap: var(--g-ui-space-6); }
+.g-ui-calendar-size-lg .g-ui-calendar-grid { gap: var(--g-ui-space-8); }
+.g-ui-calendar-size-xl .g-ui-calendar-grid { gap: var(--g-ui-space-10); }
+
+.g-ui-calendar-size-xs .g-ui-calendar-cell { width: 26px; height: 26px; font-size: 12px; }
+.g-ui-calendar-size-sm .g-ui-calendar-cell { width: 30px; height: 30px; font-size: 13px; }
+.g-ui-calendar-size-md .g-ui-calendar-cell { width: 34px; height: 34px; font-size: 14px; }
+.g-ui-calendar-size-lg .g-ui-calendar-cell { width: 42px; height: 34px; font-size: 16px; }
+.g-ui-calendar-size-xl .g-ui-calendar-cell { width: 48px; height: 38px; font-size: 18px; }
+
+
+.g-ui-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--g-ui-space-6);
+}
+.g-ui-calendar-cell {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--g-ui-text);
+}
+.g-ui-calendar-cell:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-calendar-cell-muted {
+  color: var(--g-ui-muted);
+}
+.g-ui-calendar-cell-active,
+.g-ui-calendar-cell-active:hover {
+  background: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+}
+
+/* EventCalendar */
+.g-ui-event-calendar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 480px;
+  background: var(--g-ui-bg);
+  border: 1px solid var(--g-ui-border);
+  border-radius: var(--g-ui-radius);
+  overflow: hidden;
+}
+.g-ui-event-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-10);
+  padding: var(--g-ui-space-12) var(--g-ui-space-16);
+  border-bottom: 1px solid var(--g-ui-border);
+  background: var(--g-ui-bg);
+}
+.g-ui-event-calendar-nav-group {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-nav {
+  border-radius: 8px;
+}
+.g-ui-event-calendar-today {
+  margin-left: var(--g-ui-space-8);
+}
+.g-ui-event-calendar-today-icon {
+  margin-right: var(--g-ui-space-6);
+}
+.g-ui-event-calendar-title {
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--g-ui-text);
+  min-width: 200px;
+  text-align: center;
+}
+.g-ui-event-calendar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+}
+.g-ui-event-calendar-view-option {
+  padding: var(--g-ui-space-6) var(--g-ui-space-12);
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--g-ui-text);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid transparent;
+}
+.g-ui-event-calendar-view-option:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-view-option-active {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+}
+.g-ui-event-calendar-create-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-event-calendar-month {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.g-ui-event-calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: var(--g-ui-space-8) var(--g-ui-space-16);
+  border-bottom: 1px solid var(--g-ui-border);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: var(--g-ui-muted);
+}
+.g-ui-event-calendar-weekday {
+  text-align: center;
+}
+.g-ui-event-calendar-month-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: minmax(100px, 1fr);
+  gap: 1px;
+  padding: var(--g-ui-space-8);
+  background: var(--g-ui-border);
+  overflow: auto;
+}
+.g-ui-event-calendar-month-cell {
+  background: var(--g-ui-bg);
+  min-height: 100px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-month-cell-outside {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-month-cell-today {
+  background: var(--g-ui-primary-subtle);
+}
+.g-ui-event-calendar-month-cell-header {
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--g-ui-text);
+  cursor: pointer;
+  padding: var(--g-ui-space-2) 0;
+  border-radius: 4px;
+  margin: -2px 0;
+}
+.g-ui-event-calendar-month-cell-header:hover {
+  background: var(--g-ui-bg-muted);
+}
+.g-ui-event-calendar-month-cell-events {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 0;
+  overflow: hidden;
+}
+.g-ui-event-calendar-month-event {
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border-left: 3px solid var(--g-ui-primary);
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-text);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.g-ui-event-calendar-month-event:hover {
+  opacity: 0.9;
+}
+.g-ui-event-calendar-month-more {
+  font-size: 11px;
+  color: var(--g-ui-primary);
+  cursor: pointer;
+  padding: 2px 4px;
+  margin-top: 2px;
+}
+.g-ui-event-calendar-month-more:hover {
+  text-decoration: underline;
+}
+.g-ui-event-calendar-week {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+}
+.g-ui-event-calendar-week-days {
+  display: grid;
+  grid-template-columns: 60px repeat(7, 1fr);
+  border-bottom: 1px solid var(--g-ui-border);
+  background: var(--g-ui-bg);
+}
+.g-ui-event-calendar-week-day-col {
+  padding: var(--g-ui-space-8);
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--g-ui-text);
+}
+.g-ui-event-calendar-week-time-col {
+  width: 60px;
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--g-ui-muted);
+  padding: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-week-body {
+  display: flex;
+  flex: 1;
+  min-height: 400px;
+}
+.g-ui-event-calendar-week-body .g-ui-event-calendar-week-time-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.g-ui-event-calendar-week-slot-label {
+  height: 48px;
+  font-size: 10px;
+  color: var(--g-ui-muted);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
+}
+.g-ui-event-calendar-week-grid-cols {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  flex: 1;
+  position: relative;
+  border-left: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-week-day-col-body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-week-slot {
+  height: 48px;
+  border-bottom: 1px solid var(--g-ui-border-muted);
+  cursor: pointer;
+}
+.g-ui-event-calendar-week-slot:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-left: 3px solid var(--g-ui-primary);
+  background: var(--g-ui-primary-subtle);
+  border-radius: 4px;
+  padding: 4px 6px;
+  overflow: hidden;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--g-ui-text);
+  pointer-events: auto;
+}
+.g-ui-event-calendar-week-event:hover {
+  opacity: 0.95;
+}
+.g-ui-event-calendar-week-event-title {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.g-ui-event-calendar-week-event-time {
+  font-size: 10px;
+  color: var(--g-ui-muted);
+  display: block;
+}
+.g-ui-event-calendar-day {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+}
+.g-ui-event-calendar-day-body {
+  display: flex;
+  flex: 1;
+  min-height: 400px;
+}
+.g-ui-event-calendar-day-time-col {
+  width: 60px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  font-size: 11px;
+  color: var(--g-ui-muted);
+  padding: var(--g-ui-space-4);
+  border-right: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-day-slot-label {
+  height: 48px;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
+}
+.g-ui-event-calendar-day-slots {
+  flex: 1;
+  position: relative;
+  border-left: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-day-slot {
+  height: 48px;
+  border-bottom: 1px solid var(--g-ui-border-muted);
+  cursor: pointer;
+}
+.g-ui-event-calendar-day-slot:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-day-event {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  border-left: 3px solid var(--g-ui-primary);
+  background: var(--g-ui-primary-subtle);
+  border-radius: 4px;
+  padding: 6px 8px;
+  overflow: hidden;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--g-ui-text);
+}
+.g-ui-event-calendar-day-event:hover {
+  opacity: 0.95;
+}
+.g-ui-event-calendar-day-event-title {
+  font-weight: 500;
+}
+.g-ui-event-calendar-day-event-time {
+  font-size: 11px;
+  color: var(--g-ui-muted);
+  display: block;
+}
+.g-ui-event-calendar-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-12);
+}
+.g-ui-event-calendar-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-event-calendar-form-row-inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--g-ui-space-12);
+}
+.g-ui-event-calendar-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-4);
+  min-width: 140px;
+}
+.g-ui-event-calendar-form-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--g-ui-text);
+}
+.g-ui-event-calendar-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--g-ui-space-10);
+  margin-top: var(--g-ui-space-8);
+  padding-top: var(--g-ui-space-12);
+  border-top: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-form-suggestions {
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid var(--g-ui-border);
+  border-radius: 8px;
+  margin-top: var(--g-ui-space-4);
+  background: var(--g-ui-bg);
+}
+.g-ui-event-calendar-form-suggestion-item {
+  padding: var(--g-ui-space-10) var(--g-ui-space-12);
+  font-size: 14px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--g-ui-border-muted);
+}
+.g-ui-event-calendar-form-suggestion-item:last-child {
+  border-bottom: 0;
+}
+.g-ui-event-calendar-form-suggestion-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-form-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-6);
+  margin-top: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-form-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--g-ui-space-4) var(--g-ui-space-8);
+  border-radius: 6px;
+  font-size: 13px;
+  background: var(--g-ui-bg-muted);
+  color: var(--g-ui-text);
+}
+.g-ui-event-calendar-form-chip-removable {
+  cursor: pointer;
+}
+.g-ui-event-calendar-form-chip-removable:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-event-calendar-form-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-6);
+  margin-top: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-form-color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+.g-ui-event-calendar-form-color-swatch:hover {
+  transform: scale(1.1);
+}
+.g-ui-event-calendar-form-color-swatch-active {
+  border-color: var(--g-ui-text);
+  box-shadow: 0 0 0 2px var(--g-ui-bg);
+}
+.g-ui-event-calendar-view-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-12);
+}
+.g-ui-event-calendar-view-modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--g-ui-text);
+}
+.g-ui-event-calendar-view-modal-meta {
+  font-size: 14px;
+  color: var(--g-ui-muted);
+}
+.g-ui-event-calendar-view-modal-date {
+  display: block;
+  margin-bottom: var(--g-ui-space-4);
+}
+.g-ui-event-calendar-view-modal-field {
+  font-size: 14px;
+  color: var(--g-ui-text);
+  line-height: 1.5;
+}
+.g-ui-event-calendar-view-modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-10);
+  margin-top: var(--g-ui-space-8);
+  padding-top: var(--g-ui-space-12);
+  border-top: 1px solid var(--g-ui-border);
+}
+.g-ui-event-calendar-view-modal-delete {
+  color: var(--g-ui-danger);
+}
+.g-ui-event-calendar-view-modal-delete:hover {
+  background: var(--g-ui-danger-subtle);
+}
+
+.g-ui-select-multi-root {
+  position: relative;
+  width: 100%;
+}
+.g-ui-select-multi {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--g-ui-border);
+  background: var(--g-ui-surface);
+  color: var(--g-ui-text);
+  padding: var(--g-ui-space-10) var(--g-ui-space-12);
+  min-height: 44px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-6);
+  align-items: center;
+}
+.g-ui-select-multi-placeholder {
+  color: var(--g-ui-muted);
+}
+.g-ui-select-multi-input {
+  border: 0;
+  background: transparent;
+  color: var(--g-ui-text);
+  min-width: 120px;
+  flex: 1;
+}
+.g-ui-select-multi-input:focus {
+  outline: none;
+}
+.g-ui-select-multi-size-xs { font-size: 12px; min-height: 30px; padding: var(--g-ui-space-5) var(--g-ui-space-10); }
+.g-ui-select-multi-size-sm { font-size: 13px; min-height: 36px; padding: var(--g-ui-space-6) var(--g-ui-space-12); }
+.g-ui-select-multi-size-md { font-size: 14px; min-height: 42px; padding: var(--g-ui-space-8) var(--g-ui-space-14); }
+.g-ui-select-multi-size-lg { font-size: 15px; min-height: 50px; padding: var(--g-ui-space-10) var(--g-ui-space-16); }
+.g-ui-select-multi-size-xl { font-size: 16px; min-height: 60px; padding: var(--g-ui-space-13) var(--g-ui-space-20); }
+.g-ui-select-tag {
+  border: 1px solid var(--g-ui-border);
+  border-radius: 999px;
+  padding: var(--g-ui-space-2) var(--g-ui-space-8);
+  color: var(--g-ui-text);
+}
+.g-ui-select-multi-size-xs .g-ui-select-tag { font-size: 11px; }
+.g-ui-select-multi-size-sm .g-ui-select-tag { font-size: 12px; }
+.g-ui-select-multi-size-md .g-ui-select-tag { font-size: 13px; }
+.g-ui-select-multi-size-lg .g-ui-select-tag { font-size: 14px; }
+.g-ui-select-multi-size-xl .g-ui-select-tag { font-size: 15px; }
+.g-ui-select-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-select-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.g-ui-select-tag-remove svg {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+}
+.g-ui-select-item-check {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-ui-primary);
+  line-height: 0;
+}
+.g-ui-select-item-check svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+.g-ui-select-item-label {
+  line-height: 1.4;
+}
+
+.g-ui-toast-stack {
+  position: fixed;
+  right: var(--g-ui-space-20);
+  top: var(--g-ui-space-20);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-12);
+  z-index: 1001;
+}
+.g-ui-toast {
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  padding: var(--g-ui-space-10) var(--g-ui-space-12);
+  background: var(--g-ui-bg);
+  min-width: 220px;
+  box-shadow: var(--g-ui-shadow-sm);
+}
+.g-ui-toast-title { font-weight: 600; }
+
+.g-ui-tabs-vertical {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: var(--g-ui-space-16);
+}
+.g-ui-tabs-vertical .g-ui-tabs-list {
+  flex-direction: column;
+}
+
+.g-ui-drawer-shadowed {
+  box-shadow: var(--g-ui-shadow);
+}
+
+.g-ui-notifications {
+  position: fixed;
+  right: var(--g-ui-space-20);
+  top: var(--g-ui-space-20);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-10);
+  z-index: 1001;
+}
+.g-ui-notifications-position-top-left { top: var(--g-ui-space-20); left: var(--g-ui-space-20); right: auto; }
+.g-ui-notifications-position-top-center { top: var(--g-ui-space-20); left: 50%; right: auto; transform: translateX(-50%); }
+.g-ui-notifications-position-top-right { top: var(--g-ui-space-20); right: var(--g-ui-space-20); left: auto; }
+.g-ui-notifications-position-bottom-left { bottom: var(--g-ui-space-20); left: var(--g-ui-space-20); right: auto; top: auto; flex-direction: column-reverse; }
+.g-ui-notifications-position-bottom-center { bottom: var(--g-ui-space-20); left: 50%; right: auto; top: auto; transform: translateX(-50%); flex-direction: column-reverse; }
+.g-ui-notifications-position-bottom-right { bottom: var(--g-ui-space-20); right: var(--g-ui-space-20); left: auto; top: auto; flex-direction: column-reverse; }
+
+.g-ui-range {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--g-ui-space-10);
+}
+
+.g-ui-input-number {
+  width: 100%;
+}
+
+.g-ui-popper {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-popper-dropdown {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-8));
+  left: 0;
+  min-width: 220px;
+  background: var(--g-ui-bg);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  box-shadow: var(--g-ui-shadow-sm);
+  padding: var(--g-ui-space-12) var(--g-ui-space-16);
+  z-index: 50;
+}
+
+.g-ui-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-6);
+  border-radius: 999px;
+  border: 1px solid var(--g-ui-border);
+  padding: var(--g-ui-space-4) var(--g-ui-space-10);
+  font-size: 12px;
+}
+
+.g-ui-pagination-compact .g-ui-pagination-item {
+  min-width: 26px;
+  height: 26px;
+  font-size: 12px;
+}
+
+
+.g-ui-password-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--g-ui-muted);
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.g-ui-copy-button {
+  border: 1px solid var(--g-ui-border-muted);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  border-radius: 8px;
+  padding: var(--g-ui-space-6) var(--g-ui-space-10);
+  cursor: pointer;
+  font-size: 12px;
+}
+.g-ui-copy-button:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-copy-button-done {
+  color: var(--g-ui-success);
+  border-color: rgba(18,184,134,0.5);
+}
+
+.g-ui-progress-ring {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 4px solid var(--g-ui-border-muted);
+  border-top-color: var(--g-ui-primary);
+  animation: g-ui-spin 1s linear infinite;
+}
+.g-ui-progress-ring-size-sm { width: 32px; height: 32px; }
+.g-ui-progress-ring-size-md { width: 48px; height: 48px; }
+.g-ui-progress-ring-size-lg { width: 64px; height: 64px; }
+
+.g-ui-toast-close {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: var(--g-ui-muted);
+  cursor: pointer;
+}
+
+.g-ui-toast-row {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+}
+
+.g-ui-select-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-8);
+}
+.g-ui-input-size-sm .g-ui-search-input-left-section { width: 16px; height: 16px; }
+.g-ui-input-size-md .g-ui-search-input-left-section { width: 20px; height: 20px; }
+.g-ui-input-size-lg .g-ui-search-input-left-section { width: 24px; height: 24px; }
+.g-ui-input-size-xl .g-ui-search-input-left-section { width: 28px; height: 28px; }
+.g-ui-search-input-left-section {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--g-ui-muted);
+  font-size: 16px;
+}
+.g-ui-search-input-left-section svg {
+  width: 100%;
+  height: 100%;
+  fill: inherit;
+}
+
+.g-ui-select-search-input {
+  width: 100%;
+  border-radius: var(--g-ui-radius);
+  border: 1px solid var(--g-ui-border-muted);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  padding: var(--g-ui-space-8) var(--g-ui-space-10);
+}
+.g-ui-select-search-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+  max-height: 160px;
+  overflow: auto;
+}
+.g-ui-select-search-item {
+  padding: var(--g-ui-space-6) var(--g-ui-space-8);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.g-ui-select-search-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+
+.g-ui-switch-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-8);
+}
+
+.g-ui-segmented-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.g-ui-range-picker {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--g-ui-space-12);
+}
+
+.g-ui-toast-auto {
+  border-color: var(--g-ui-primary);
+}
+
+.g-ui-flex {
+  display: flex;
+}
+.g-ui-flex-column { flex-direction: column; }
+.g-ui-flex-row { flex-direction: row; }
+.g-ui-flex-wrap { flex-wrap: wrap; }
+
+.g-ui-navlink-root {
+  display: flex;
+  flex-direction: column;
+}
+.g-ui-navlink {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-8);
+  padding: var(--g-ui-space-8) var(--g-ui-space-12);
+  border-radius: 0;
+  color: var(--g-ui-text);
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+.g-ui-navlink-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-2);
+  flex: 1;
+}
+.g-ui-navlink-description {
+  font-size: 12px;
+  color: var(--g-ui-muted);
+  font-weight: 400;
+}
+.g-ui-navlink-section {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-navlink-variant-subtle:hover { background: var(--g-ui-bg-subtle); }
+.g-ui-navlink-variant-light:hover { background: var(--g-ui-primary-muted); }
+.g-ui-navlink-variant-filled:hover { background: var(--g-ui-primary-hover); color: var(--g-ui-primary-fg); }
+.g-ui-navlink-active.g-ui-navlink-variant-subtle {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+}
+.g-ui-navlink-active.g-ui-navlink-variant-light {
+  background: var(--g-ui-primary-muted);
+  color: var(--g-ui-primary);
+}
+.g-ui-navlink-active.g-ui-navlink-variant-filled {
+  background: var(--g-ui-primary);
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-navlink-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.g-ui-navlink-children {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-4);
+}
+.g-ui-navlink-padding-none { padding: 0; }
+.g-ui-navlink-padding-sm { padding: var(--g-ui-space-8); }
+.g-ui-navlink-padding-md { padding: var(--g-ui-space-12); }
+.g-ui-navlink-padding-lg { padding: var(--g-ui-space-16); }
+.g-ui-navlink-padding-xl { padding: var(--g-ui-space-20); }
+.g-ui-navlink-padding-h-sm { padding: var(--g-ui-space-8) var(--g-ui-space-8) ; }
+.g-ui-navlink-padding-h-md { padding: var(--g-ui-space-8) var(--g-ui-space-12) ; }
+.g-ui-navlink-padding-h-lg { padding: var(--g-ui-space-8) var(--g-ui-space-20) ; }
+.g-ui-navlink-padding-h-xl { padding: var(--g-ui-space-8) var(--g-ui-space-24) ; }
+
+.g-ui-indicator {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-indicator-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--g-ui-danger);
+  border: 2px solid var(--g-ui-bg);
+}
+.g-ui-indicator-size-xs .g-ui-indicator-badge { width: 6px; height: 6px; border-width: 1px; }
+.g-ui-indicator-size-sm .g-ui-indicator-badge { width: 8px; height: 8px; border-width: 2px; }
+.g-ui-indicator-size-md .g-ui-indicator-badge { width: 10px; height: 10px; border-width: 2px; }
+.g-ui-indicator-size-lg .g-ui-indicator-badge { width: 12px; height: 12px; border-width: 2px; }
+.g-ui-indicator-size-xl .g-ui-indicator-badge { width: 14px; height: 14px; border-width: 3px; }
+.g-ui-indicator-position-top-right .g-ui-indicator-badge { top: -4px; right: -4px; bottom: auto; left: auto; }
+.g-ui-indicator-position-top-left .g-ui-indicator-badge { top: -4px; left: -4px; bottom: auto; right: auto; }
+.g-ui-indicator-position-bottom-right .g-ui-indicator-badge { bottom: -4px; right: -4px; top: auto; left: auto; }
+.g-ui-indicator-position-bottom-left .g-ui-indicator-badge { bottom: -4px; left: -4px; top: auto; right: auto; }
+.g-ui-indicator-color-danger .g-ui-indicator-badge { background: var(--g-ui-danger); }
+.g-ui-indicator-color-success .g-ui-indicator-badge { background: var(--g-ui-success); }
+.g-ui-indicator-color-warning .g-ui-indicator-badge { background: var(--g-ui-warning); }
+.g-ui-indicator-color-info .g-ui-indicator-badge { background: var(--g-ui-info); }
+
+.g-ui-burger {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  display: inline-block;
+}
+.g-ui-burger span {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--g-ui-text);
+  transition: transform .2s ease, opacity .2s ease, top .2s ease;
+}
+.g-ui-burger span:nth-child(1) { top: 6px; }
+.g-ui-burger span:nth-child(2) { top: 13px; }
+.g-ui-burger span:nth-child(3) { top: 20px; }
+.g-ui-burger-open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
+.g-ui-burger-open span:nth-child(2) { opacity: 0; }
+.g-ui-burger-open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
+
+.g-ui-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(15,17,21,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.g-ui-grid-system {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.g-ui-col-span-1 { grid-column: span 1; }
+.g-ui-col-span-2 { grid-column: span 2; }
+.g-ui-col-span-3 { grid-column: span 3; }
+.g-ui-col-span-4 { grid-column: span 4; }
+.g-ui-col-span-5 { grid-column: span 5; }
+.g-ui-col-span-6 { grid-column: span 6; }
+.g-ui-col-span-7 { grid-column: span 7; }
+.g-ui-col-span-8 { grid-column: span 8; }
+.g-ui-col-span-9 { grid-column: span 9; }
+.g-ui-col-span-10 { grid-column: span 10; }
+.g-ui-col-span-11 { grid-column: span 11; }
+.g-ui-col-span-12 { grid-column: span 12; }
+
+.g-ui-scroll-area {
+  overflow: auto;
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  background: var(--g-ui-bg);
+  padding: 0;
+}
+.g-ui-scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
+.g-ui-scroll-area::-webkit-scrollbar-track { background: transparent; }
+.g-ui-scroll-area::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--g-ui-muted) 30%, transparent);
+  border-radius: 999px;
+}
+.g-ui-scroll-area:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--g-ui-muted) 50%, transparent); }
+.g-ui-scroll-area-sm { max-height: 120px; }
+.g-ui-scroll-area-md { max-height: 200px; }
+.g-ui-scroll-area-lg { max-height: 320px; }
+.g-ui-scroll-area-auto { max-height: auto; }
+
+.g-ui-pin-input {
+  display: inline-flex;
+  align-items: center;
+  cursor: text;
+  box-sizing: border-box;
+}
+.g-ui-pin-input-wrapper {
+  display: flex;
+  gap: var(--g-ui-space-8);
+  box-sizing: border-box;
+}
+.g-ui-pin-input-field {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  text-align: center;
+  font-size: var(--g-ui-font-md);
+  font-weight: 500;
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  background: var(--g-ui-bg);
+  color: var(--g-ui-text);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.g-ui-pin-input-field::placeholder {
+  color: var(--g-ui-muted);
+  opacity: 0.5;
+}
+.g-ui-pin-input-field:focus {
+  border-color: var(--g-ui-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-ui-primary) 20%, transparent);
+}
+.g-ui-pin-input-field:disabled {
+  background: var(--g-ui-bg-subtle);
+  color: var(--g-ui-muted);
+  cursor: not-allowed;
+}
+.g-ui-pin-input-error {
+  border-color: var(--g-ui-danger);
+}
+.g-ui-pin-input-error:focus {
+  border-color: var(--g-ui-danger);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--g-ui-danger) 20%, transparent);
+}
+.g-ui-pin-input.g-ui-input-size-xs .g-ui-pin-input-field { width: 28px; height: 28px; font-size: var(--g-ui-font-xs); }
+.g-ui-pin-input.g-ui-input-size-sm .g-ui-pin-input-field { width: 34px; height: 34px; font-size: var(--g-ui-font-sm); }
+.g-ui-pin-input.g-ui-input-size-md .g-ui-pin-input-field { width: 40px; height: 40px; font-size: var(--g-ui-font-md); }
+.g-ui-pin-input.g-ui-input-size-lg .g-ui-pin-input-field { width: 48px; height: 48px; font-size: var(--g-ui-font-lg); }
+.g-ui-pin-input.g-ui-input-size-xl .g-ui-pin-input-field { width: 56px; height: 56px; font-size: var(--g-ui-font-xl); }
+
+.g-ui-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-8);
+}
+
+.g-ui-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.g-ui-avatar-group .g-ui-avatar {
+  margin-left: calc(0px - var(--g-ui-space-8));
+  border: 2px solid var(--g-ui-bg);
+}
+.g-ui-avatar-group .g-ui-avatar:first-child {
+  margin-left: 0;
+}
+
+.g-ui-badge-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--g-ui-space-6);
+}
+
+.g-ui-radio {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-ui-space-6);
+}
+.g-ui-radio-control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  cursor: pointer;
+}
+.g-ui-radio-input {
+  appearance: none;
+  width: var(--g-ui-control-size, 16px);
+  height: var(--g-ui-control-size, 16px);
+  border-radius: 50%;
+  border: 1px solid var(--g-ui-border);
+  background: var(--g-ui-bg);
+  position: relative;
+  transition: background-color .12s ease, border-color .12s ease;
+}
+.g-ui-radio-input:focus-visible {
+  outline: 2px solid var(--g-ui-primary);
+  outline-offset: 2px;
+}
+.g-ui-radio-input:checked {
+  border-color: var(--g-ui-primary);
+}
+.g-ui-radio-input:checked::after {
+  content: '';
+  position: absolute;
+  width: var(--g-ui-control-inner-size, 8px);
+  height: var(--g-ui-control-inner-size, 8px);
+  border-radius: 50%;
+  background: var(--g-ui-primary);
+  top: var(--g-ui-control-inner-offset, 3px);
+  left: var(--g-ui-control-inner-offset, 3px);
+}
+.g-ui-radio-label { font-size: 14px; }
+.g-ui-radio-description { font-size: 12px; color: var(--g-ui-muted); }
+.g-ui-radio-size-xs { --g-ui-control-size: 16px; --g-ui-control-inner-size: 6px; --g-ui-control-inner-offset: 4px; }
+.g-ui-radio-size-sm { --g-ui-control-size: 20px; --g-ui-control-inner-size: 8px; --g-ui-control-inner-offset: 5px; }
+.g-ui-radio-size-md { --g-ui-control-size: 24px; --g-ui-control-inner-size: 10px; --g-ui-control-inner-offset: 6px; }
+.g-ui-radio-size-lg { --g-ui-control-size: 30px; --g-ui-control-inner-size: 14px; --g-ui-control-inner-offset: 7px; }
+.g-ui-radio-size-xl { --g-ui-control-size: 36px; --g-ui-control-inner-size: 16px; --g-ui-control-inner-offset: 9px; }
+
+.g-ui-breadcrumbs {
+  display: inline-flex;
+  gap: var(--g-ui-space-8);
+  align-items: center;
+  color: var(--g-ui-muted);
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+.g-ui-breadcrumbs-separator { opacity: 0.6; }
+
+.g-ui-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.g-ui-space { display: block; width: var(--g-ui-space-16); height: var(--g-ui-space-16); }
+.g-ui-space-xs { width: var(--g-ui-space-8); height: var(--g-ui-space-8); }
+.g-ui-space-sm { width: var(--g-ui-space-12); height: var(--g-ui-space-12); }
+.g-ui-space-md { width: var(--g-ui-space-16); height: var(--g-ui-space-16); }
+.g-ui-space-lg { width: var(--g-ui-space-24); height: var(--g-ui-space-24); }
+.g-ui-space-xl { width: var(--g-ui-space-32); height: var(--g-ui-space-32); }
+
+.g-ui-collapse-hidden { display: none; }
+
+.g-ui-action-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid var(--g-ui-border);
+  background: transparent;
+  color: var(--g-ui-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.g-ui-action-icon-size-xs { width: 18px; height: 18px; }
+.g-ui-action-icon-size-sm { width: 22px; height: 22px; }
+.g-ui-action-icon-size-md { width: 28px; height: 28px; }
+.g-ui-action-icon-size-lg { width: 34px; height: 34px; }
+.g-ui-action-icon-size-xl { width: 44px; height: 44px; }
+
+.g-ui-action-icon-size-xs .g-ui-icon { font-size: 12px; }
+.g-ui-action-icon-size-sm .g-ui-icon { font-size: 14px; }
+.g-ui-action-icon-size-md .g-ui-icon { font-size: 16px; }
+.g-ui-action-icon-size-lg .g-ui-icon { font-size: 20px; }
+.g-ui-action-icon-size-xl .g-ui-icon { font-size: 24px; }
+
+.g-ui-action-icon-filled {
+  background: var(--g-ui-primary);
+  border-color: transparent;
+  color: var(--g-ui-primary-fg);
+}
+.g-ui-action-icon-subtle {
+  background: transparent;
+  border-color: var(--g-ui-border);
+}
+.g-ui-action-icon-light {
+  background: var(--g-ui-primary-subtle);
+  border-color: var(--g-ui-primary-muted);
+  color: var(--g-ui-primary);
+}
+.g-ui-action-icon-outline {
+  background: transparent;
+  border-color: var(--g-ui-primary);
+  color: var(--g-ui-primary);
+}
+.g-ui-action-icon-filled:hover { background: var(--g-ui-primary-hover); }
+.g-ui-action-icon-light:hover { background: var(--g-ui-primary-muted); }
+.g-ui-action-icon-outline:hover { background: var(--g-ui-primary-subtle); }
+.g-ui-action-icon-subtle:hover { background: var(--g-ui-bg-muted); }
+
+.g-ui-popover {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-popover-dropdown {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-8));
+  left: 0;
+  min-width: 220px;
+  background: var(--g-ui-surface);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: 10px;
+  box-shadow: var(--g-ui-shadow-sm);
+  padding: var(--g-ui-space-10) var(--g-ui-space-12);
+  z-index: 50;
+}
+.g-ui-popover-right { left: auto; right: 0; }
+.g-ui-popover-center { left: 50%; transform: translateX(-50%); }
+
+.g-ui-hover-card {
+  position: relative;
+  display: inline-flex;
+}
+.g-ui-hover-card-dropdown {
+  position: absolute;
+  top: calc(100% + var(--g-ui-space-8));
+  left: 0;
+  min-width: 220px;
+  background: var(--g-ui-surface);
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  box-shadow: var(--g-ui-shadow-sm);
+  padding: var(--g-ui-space-12) var(--g-ui-space-16);
+  z-index: 50;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease, transform .12s ease;
+  transform: translateY(-4px);
+}
+.g-ui-hover-card:hover .g-ui-hover-card-dropdown {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+.g-ui-hover-card-right { left: auto; right: 0; }
+.g-ui-hover-card-center { left: 50%; transform: translateX(-50%) translateY(-4px); }
+.g-ui-hover-card:hover .g-ui-hover-card-center { transform: translateX(-50%) translateY(0); }
+
+.g-ui-affix {
+  position: fixed;
+  z-index: 1000;
+}
+.g-ui-affix-bottom-right { right: var(--g-ui-space-20); bottom: var(--g-ui-space-20); }
+.g-ui-affix-bottom-left { left: var(--g-ui-space-20); bottom: var(--g-ui-space-20); }
+.g-ui-affix-top-right { right: var(--g-ui-space-20); top: var(--g-ui-space-20); }
+.g-ui-affix-top-left { left: var(--g-ui-space-20); top: var(--g-ui-space-20); }
+.g-ui-affix-center-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
+.g-ui-affix-top-center { left: 50%; top: var(--g-ui-space-20); transform: translateX(-50%); }
+.g-ui-affix-bottom-center { left: 50%; bottom: var(--g-ui-space-20); transform: translateX(-50%); }
+.g-ui-affix-left-center { left: var(--g-ui-space-20); top: 50%; transform: translateY(-50%); }
+.g-ui-affix-right-center { right: var(--g-ui-space-20); top: 50%; transform: translateY(-50%); }
+
+
+.g-ui-fieldset {
+  border: 1px solid var(--g-ui-border-muted);
+  border-radius: var(--g-ui-radius);
+  padding: var(--g-ui-space-14);
+}
+.g-ui-legend {
+  padding: 0 var(--g-ui-space-6);
+  color: var(--g-ui-muted);
+  font-size: 12px;
+}
+
+.g-ui-appbar {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--g-ui-space-12);
+  padding: 0 var(--g-ui-space-16);
+  background: var(--g-ui-bg);
+  border-bottom: 1px solid var(--g-ui-border);
+  z-index: 100;
+  position: relative;
+}
+.g-ui-appbar-static { position: static; }
+.g-ui-appbar-sticky { position: sticky; top: 0; }
+.g-ui-appbar-fixed { position: fixed; top: 0; left: 0; right: 0; }
+
+.g-ui-sidebar {
+  width: 260px;
+  min-width: 260px;
+  background: var(--g-ui-bg);
+  border-right: 1px solid var(--g-ui-border);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+.g-ui-sidebar-position-right { border-right: 0; border-left: 1px solid var(--g-ui-border-muted); }
+.g-ui-sidebar-size-sm { width: 220px; min-width: 220px; }
+.g-ui-sidebar-size-md { width: 260px; min-width: 260px; }
+.g-ui-sidebar-size-lg { width: 320px; min-width: 320px; }
+.g-ui-sidebar-size-xl { width: 380px; min-width: 380px; }
+.g-ui-sidebar-min-button { min-width: 38px; width: 38px; }
+.g-ui-sidebar-min-xs { min-width: 48px; width: 48px; }
+.g-ui-sidebar-min-sm { min-width: 64px; width: 64px; }
+.g-ui-sidebar-min-md { min-width: 80px; width: 80px; }
+.g-ui-sidebar-fixed { 
+  position: relative;
+  width: 45px; 
+  min-width: 45px; 
+  max-width: 45px;
+  height: 100%;
+  transition: 
+    width .22s cubic-bezier(.2,.8,.2,1),
+    min-width .22s cubic-bezier(.2,.8,.2,1),
+    max-width .22s cubic-bezier(.2,.8,.2,1);
+}
+.g-ui-sidebar-fixed.g-ui-sidebar-size-sm { width: 40px; min-width: 40px; max-width: 40px; }
+.g-ui-sidebar-fixed.g-ui-sidebar-size-md { width: 45px; min-width: 45px; max-width: 45px; }
+.g-ui-sidebar-fixed.g-ui-sidebar-size-lg { width: 50px; min-width: 50px; max-width: 50px; }
+.g-ui-sidebar-fixed.g-ui-sidebar-size-xl { width: 60px; min-width: 60px; max-width: 60px; }
+
+.g-ui-sidebar-fixed-open.g-ui-sidebar-size-sm { width: 220px; min-width: 220px; max-width: 220px; }
+.g-ui-sidebar-fixed-open.g-ui-sidebar-size-md { width: 260px; min-width: 260px; max-width: 260px; }
+.g-ui-sidebar-fixed-open.g-ui-sidebar-size-lg { width: 320px; min-width: 320px; max-width: 320px; }
+.g-ui-sidebar-fixed-open.g-ui-sidebar-size-xl { width: 380px; min-width: 380px; max-width: 380px; }
+
+.g-ui-sidebar-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 999;
+  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
+  opacity: 0;
+  transform: translateX(-100%);
+  height: 100%;
+  min-height: 100vh;
+}
+.g-ui-sidebar-drawer-left.g-ui-sidebar-drawer-open,
+.g-ui-sidebar-drawer-right.g-ui-sidebar-drawer-open {
+  opacity: 1;
+  transform: translateX(0);
+}
+.g-ui-sidebar-drawer-right {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.g-ui-sidebar-drawer-left {
+  left: 0;
+  right: auto;
+}
+.g-ui-sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  background: rgba(0,0,0,0.6);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .22s ease, backdrop-filter .22s ease;
+  backdrop-filter: blur(10px);
+}
+.g-ui-sidebar-overlay-noblur {
+  backdrop-filter: none;
+}
+.g-ui-sidebar-overlay-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.g-ui-sidebar-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--g-ui-muted);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.g-ui-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--g-ui-space-10);
+  padding: var(--g-ui-space-8) var(--g-ui-space-12);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--g-ui-text);
+  text-decoration: none;
+  font-size: 14px;
+}
+.g-ui-sidebar-item:hover {
+  background: var(--g-ui-bg-subtle);
+}
+.g-ui-sidebar-item-active {
+  background: var(--g-ui-primary-subtle);
+  color: var(--g-ui-primary);
+}
+.g-ui-sidebar-item-active:hover { background: var(--g-ui-primary-muted); }
+.g-ui-skeleton-h-xs { height: 8px; }
+.g-ui-skeleton-h-sm { height: 12px; }
+.g-ui-skeleton-h-md { height: 16px; }
+.g-ui-skeleton-h-lg { height: 24px; }
+.g-ui-skeleton-h-xl { height: 32px; }
+.g-ui-skeleton-w-xs { width: 60px; }
+.g-ui-skeleton-w-sm { width: 120px; }
+.g-ui-skeleton-w-md { width: 180px; }
+.g-ui-skeleton-w-lg { width: 240px; }
+.g-ui-skeleton-w-xl { width: 320px; }
+.g-ui-skeleton-w-full { width: 100%; }
+.g-ui-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-ui-spinner {
+  border: 3px solid var(--g-ui-border-muted);
+  border-top-color: var(--g-ui-primary);
+  border-radius: 50%;
+  animation: g-ui-spin 1s linear infinite;
+}
+.g-ui-loading-size-xs .g-ui-spinner { width: 14px; height: 14px; }
+.g-ui-loading-size-sm .g-ui-spinner { width: 18px; height: 18px; }
+.g-ui-loading-size-md .g-ui-spinner { width: 22px; height: 22px; }
+.g-ui-loading-size-lg .g-ui-spinner { width: 28px; height: 28px; }
+.g-ui-loading-size-xl .g-ui-spinner { width: 36px; height: 36px; }
+.g-ui-dots::before,
+.g-ui-dots::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--g-ui-primary);
+  margin: 0 var(--g-ui-space-3);
+  animation: g-ui-bounce 1s infinite ease-in-out;
+}
+.g-ui-dots::after { animation-delay: .2s; }
+.g-ui-loading-size-xs.g-ui-dots::before,
+.g-ui-loading-size-xs.g-ui-dots::after { width: 4px; height: 4px; }
+.g-ui-loading-size-sm.g-ui-dots::before,
+.g-ui-loading-size-sm.g-ui-dots::after { width: 6px; height: 6px; }
+.g-ui-loading-size-md.g-ui-dots::before,
+.g-ui-loading-size-md.g-ui-dots::after { width: 8px; height: 8px; }
+.g-ui-loading-size-lg.g-ui-dots::before,
+.g-ui-loading-size-lg.g-ui-dots::after { width: 10px; height: 10px; }
+.g-ui-loading-size-xl.g-ui-dots::before,
+.g-ui-loading-size-xl.g-ui-dots::after { width: 12px; height: 12px; }
+.g-ui-bars span {
+  width: 4px;
+  height: 16px;
+  background: var(--g-ui-primary);
+  margin: 0 var(--g-ui-space-2);
+  display: inline-block;
+  animation: g-ui-bars 1s infinite ease-in-out;
+}
+.g-ui-bars span:nth-child(2) { animation-delay: .15s; }
+.g-ui-bars span:nth-child(3) { animation-delay: .3s; }
+.g-ui-loading-size-xs.g-ui-bars span { width: 3px; height: 12px; }
+.g-ui-loading-size-sm.g-ui-bars span { width: 4px; height: 14px; }
+.g-ui-loading-size-md.g-ui-bars span { width: 4px; height: 16px; }
+.g-ui-loading-size-lg.g-ui-bars span { width: 5px; height: 20px; }
+.g-ui-loading-size-xl.g-ui-bars span { width: 6px; height: 24px; }
+
+
+.g-ui-grid-table {
+  display: grid;
+}
+.g-ui-grid-table-row {
+  display: contents;
+}
+.g-ui-grid-table-cell {
+  padding: var(--g-ui-space-8);
+  border-bottom: 1px solid var(--g-ui-border-muted);
+}
+.g-ui-grid-table-row-header .g-ui-grid-table-cell {
+  font-weight: 200;
+}
+.g-ui-grid-table-cell-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.g-ui-grid-table-cell-sortable:hover {
+  background: var(--g-ui-bg-hover, rgba(0,0,0,0.04));
+}
+.g-ui-grid-table-sort-icon {
+  opacity: 0.5;
+}
+.g-ui-grid-table-sticky .g-ui-grid-table-row-header .g-ui-grid-table-cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--g-ui-bg, #fff);
+}
+
+.g-ui-bottombar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--g-ui-space-4);
+  padding: var(--g-ui-space-4) var(--g-ui-space-8);
+  background: var(--g-ui-bg);
+  border-top: 1px solid var(--g-ui-border);
+  z-index: 100;
+  box-sizing: border-box;
+}
+.g-ui-bottombar-grow .g-ui-bottombar-action { flex: 1; }
+
+.g-ui-bottombar-action {
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--g-ui-space-6) var(--g-ui-space-12);
+  border-radius: var(--g-ui-radius-sm);
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+  color: var(--g-ui-text-muted);
+  font-size: var(--g-ui-fz-xs);
+  min-width: 48px;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+.g-ui-bottombar-action:hover { background: var(--g-ui-hover); }
+.g-ui-bottombar-action:active { background: var(--g-ui-active); }
+.g-ui-bottombar-action-active { color: var(--g-ui-primary); }
+.g-ui-bottombar-action-active:hover { background: var(--g-ui-primary-light-hover); }
+.g-ui-bottombar-action-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+.g-ui-bottombar-action-variant-filled.g-ui-bottombar-action-active {
+  background: var(--g-ui-primary);
+  color: var(--g-ui-white);
+}
+.g-ui-bottombar-action-variant-filled.g-ui-bottombar-action-active:hover {
+  background: var(--g-ui-primary-dark);
+}
+
+.g-ui-bottombar-action-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+}
+.g-ui-bottombar-action-label {
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-align: center;
+}
+
+
+@keyframes g-ui-spin { to { transform: rotate(360deg); } }
+@keyframes g-ui-bounce { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-5px); opacity: 1; } }
+@keyframes g-ui-bars { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.2); } }
+`;function Nt(){if(typeof document>"u"||document.getElementById(zt))return;let e=document.createElement("style");e.id=zt,e.textContent=Gr,document.head.appendChild(e)}var Zr=new Set(["--g-ui-bg","--g-ui-bg-subtle","--g-ui-bg-muted","--g-ui-bg-emphasized","--g-ui-bg-inverted","--g-ui-bg-panel","--g-ui-fg","--g-ui-fg-muted","--g-ui-fg-subtle","--g-ui-fg-inverted","--g-ui-border","--g-ui-border-subtle","--g-ui-border-emphasized","--g-ui-border-inverted","--g-ui-primary","--g-ui-primary-hover","--g-ui-primary-active","--g-ui-primary-subtle","--g-ui-primary-muted","--g-ui-primary-emphasized","--g-ui-success","--g-ui-success-hover","--g-ui-success-active","--g-ui-success-subtle","--g-ui-success-muted","--g-ui-danger","--g-ui-danger-hover","--g-ui-danger-active","--g-ui-danger-subtle","--g-ui-danger-muted","--g-ui-warning","--g-ui-warning-hover","--g-ui-warning-active","--g-ui-warning-subtle","--g-ui-warning-muted","--g-ui-info","--g-ui-info-hover","--g-ui-info-active","--g-ui-info-subtle","--g-ui-info-muted","--g-ui-shadow-xs","--g-ui-shadow-sm","--g-ui-shadow-md","--g-ui-shadow-lg","--g-ui-shadow-xl","--g-ui-shadow-2xl","--g-ui-radius","--g-ui-font","--g-ui-surface","--g-ui-text","--g-ui-muted","--g-ui-primary-strong","--g-ui-shadow"]);function Ur(e={},i=document?.documentElement){if(i)for(let[t,r]of Object.entries(e)){let a=t.startsWith("--")?t:`--g-ui-${t}`;Zr.has(a)&&i.style.setProperty(a,String(r))}}function Xr(e="dark",i=document?.documentElement){i&&(i.classList.remove("g-ui-theme-dark","g-ui-theme-light"),i.classList.add(e==="light"?"g-ui-theme-light":"g-ui-theme-dark"))}import{Renderer as Ct,isSignal as St,isState as Dt,isStatePath as Pt,isComputed as Mt,resolve as Le,computed as _r,after as Ai,concat as Kr}from"@granularjs/core";function Fi(e){return St(e)||Dt(e)||Pt(e)||Mt(e)}function o(...e){return Kr(...e,{separator:" ",filterFalsy:!0})}function Tt(e){if(!(e==null||e===""))return typeof e=="number"?`${e}px`:e}function s(e,i){let t={},r=[],a=n=>!!n&&typeof n=="object"&&!Array.isArray(n)&&!Ct.isRenderable(n)&&!Ct.isDomNode(n)&&!St(n)&&!Dt(n)&&!Pt(n)&&!Mt(n);for(let n of e)a(n)?Object.assign(t,n):r.push(n);if(i&&typeof i=="object")for(let n of Object.keys(i))t[n]===void 0&&(t[n]=i[n]);return{props:_r(t),rawProps:t,children:r}}function l(e){return Le(e)}function ve(e){return!!Le(e)}function k(e,i,t){let r=a=>{let n=Le(a),u=n==null||n===""?t:n;return u==null||u===""?"":`${e}${u}`};return Fi(i)?Ai(i).compute(a=>r(a)):r(i)}function W(e,i){return Fi(i)?Ai(i).compute(t=>Le(t)?e:""):Le(i)?e:""}function me(e,i,t){let r=a=>i[a]||null;return Fi(e)?Ai(e).compute(a=>r(Le(a??t))):r(Le(e??t))}import{Button as Qr,Span as ji,when as Ei,after as Jr}from"@granularjs/core";function Ri(...e){let{props:i,children:t}=s(e,{variant:"filled",size:"md"}),{variant:r,size:a,fullWidth:n,loading:u,leftSection:g,rightSection:p,className:h,disabled:m,...b}=i,x=Jr(m,u).compute(([d,y])=>d||y);return Qr({...b,disabled:x,className:o("g-ui-button",k("g-ui-button-variant-",r,"filled"),k("g-ui-button-size-",a,"md"),W("g-ui-button-full",n),W("g-ui-button-loading",u),h)},Ei(g,()=>ji({className:"g-ui-button-section-left"},g)),Ei(u,()=>ji("Loading..."),()=>t),Ei(p,()=>ji({className:"g-ui-button-section-right"},p)))}import{Span as ea}from"@granularjs/core";function Hi(...e){let{props:i,children:t}=s(e,{size:"md"}),{size:r,weight:a,color:n,dimmed:u,align:g,className:p,style:h,...m}=i,b=me(a,{bold:"g-ui-text-weight-700",semibold:"g-ui-text-weight-600",medium:"g-ui-text-weight-500",700:"g-ui-text-weight-700",600:"g-ui-text-weight-600",500:"g-ui-text-weight-500",400:"g-ui-text-weight-400"}),x=me(n,{primary:"g-ui-text-primary",success:"g-ui-text-success",danger:"g-ui-text-danger",muted:"g-ui-text-dimmed"}),d=me(g,{center:"g-ui-text-align-center",right:"g-ui-text-align-right",left:"g-ui-text-align-left"});return ea({...m,className:o("g-ui-text",k("g-ui-text-size-",r,"md"),W("g-ui-text-dimmed",u),b,x,d,p)},t)}import{H1 as ia,H2 as Vt,H3 as ta,H4 as ra,H5 as aa,H6 as oa}from"@granularjs/core";var na={1:ia,2:Vt,3:ta,4:ra,5:aa,6:oa};function sa(...e){let{props:i,children:t}=s(e,{order:2}),{order:r,className:a,style:n,...u}=i,g=l(r)||2;return(na[g]||Vt)({...u,className:o("g-ui-title",k("g-ui-title-order-",r,2),a)},t)}import{Div as ua}from"@granularjs/core";function ga(...e){let{props:i,children:t}=s(e,{size:"md"}),{size:r,fluid:a,className:n,style:u,...g}=i;return ua({...g,className:o("g-ui-container",W("g-ui-container-fluid",a),k("g-ui-container-size-",r,"md"),n)},t)}import{Div as la}from"@granularjs/core";function ca(...e){let{props:i,children:t}=s(e,{gap:"md"}),{gap:r,align:a,justify:n,className:u,style:g,...p}=i,h=me(n,{between:"g-ui-justify-between",center:"g-ui-justify-center",end:"g-ui-justify-end",start:"g-ui-justify-start"});return la({...p,style:g,className:o("g-ui-stack",k("g-ui-gap-",r,"md"),k("g-ui-align-",a),h,u)},t)}import{Div as pa}from"@granularjs/core";function da(...e){let{props:i,children:t}=s(e,{gap:"md",align:"center"}),{gap:r,align:a,justify:n,position:u,noWrap:g,className:p,style:h,...m}=i,b=me(u,{apart:"g-ui-justify-between",center:"g-ui-justify-center",right:"g-ui-justify-end",left:"g-ui-justify-start"});return pa({...m,style:h,className:o("g-ui-group",k("g-ui-gap-",r,"md"),k("g-ui-align-",a,"center"),k("g-ui-justify-",n,"none"),b,W("g-ui-no-wrap",g),p)},t)}import{Div as pi,list as ma,when as Oi,after as Lt}from"@granularjs/core";function fa(...e){let{props:i,children:t}=s(e,{padding:"md",radius:"md",shadow:"none",border:"default"}),{title:r,content:a,actions:n,border:u,padding:g,radius:p,shadow:h,className:m,style:b,...x}=i;return pi(Oi(r,()=>pi({className:"g-ui-card-title"},r)),Oi(a,()=>pi({className:"g-ui-card-content"},a)),Oi(n,()=>pi({className:"g-ui-card-actions"},ma(n,d=>Ri({className:"g-ui-card-action",onClick:y=>d.onClick.get()?.(y),leftSection:d.leftSection,rightSection:d.rightSection,size:Lt(d.size).compute(y=>y||"sm"),variant:Lt(d.variant).compute(y=>y||"outline"),...d.props.get()||{}},d.label)))),{className:o("g-ui-card",k("g-ui-card-border-",u,"md"),k("g-ui-card-padding-",g,"md"),k("g-ui-card-radius-",p,"md"),k("g-ui-card-shadow-",h,"md"),m),...x},t)}import{Span as ha}from"@granularjs/core";function xa(...e){let{props:i,children:t}=s(e,{variant:"filled",size:"md"}),{variant:r,size:a,className:n,dot:u,style:g,...p}=i,h=me(r,{dot:"g-ui-badge-dot"});return ha({...p,className:o("g-ui-badge",k("g-ui-badge-variant-",r,"filled"),k("g-ui-badge-size-",a,"md"),W("g-ui-badge-dot",u),h,n)},t)}import{Div as Ue,Input as va,Textarea as ba,Label as wa,Span as ya,when as Xe,state as ka,after as za,isState as Na}from"@granularjs/core";function ge(...e){let{props:i,rawProps:t}=s(e,{size:"md"}),{label:r,description:a,error:n,size:u,leftSection:g,rightSection:p,className:h,inputClassName:m,multiline:b,value:x,...d}=i,{value:y,onChange:P,onInput:A,onFocus:$,onBlur:S,onKeyDown:F,onKeyUp:z,onClick:w}=t,v=Na(y)&&!P&&!A,f=v?y:ka(l(x)??"");za(x).change(K=>{v||f.set(l(K)??"")});let C=K=>{let ue=K?.target?.value??"";ue!==x.get()&&(f.set(ue),P?.(K),A?.(K))},V=ve(b),I=V?ba:va,X=o(m,V&&"g-ui-textarea"),re=I({...d,value:f,onInput:C,onChange:C,onFocus:$,onBlur:S,onKeyDown:F,onKeyUp:z,onClick:w,className:o("g-ui-input",X)});return Ue({className:o("g-ui-text-input",h)},Xe(r,()=>wa({className:"g-ui-text-input-label"},r)),Xe(a,()=>ya({className:"g-ui-text-input-description"},a)),Ue({className:o("g-ui-input-wrapper",W("g-ui-input-multiline",b),k("g-ui-input-size-",u,"md"),W("g-ui-input-error",n))},Xe(g,()=>Ue({className:"g-ui-input-section"},g)),re,Xe(p,()=>Ue({className:"g-ui-input-section"},p))),Xe(n,()=>Ue({className:"g-ui-text-input-error-text"},n)))}function qi(...e){let{props:i}=s(e,{size:"md"}),{size:t,leftSection:r,rightSection:a,className:n,...u}=i;return ge({...u,size:t,className:n,leftSection:r,rightSection:a,multiline:!0})}import{Div as $t,Span as It,after as $e,state as Ca}from"@granularjs/core";function Yi(...e){let{props:i,rawProps:t}=s(e,{size:"md",step:1,allowDecimal:!0,allowNegative:!0,clampBehavior:"blur",hideControls:!1,decimalSeparator:".",thousandSeparator:"",format:null,prefix:"",suffix:""}),{value:r,min:a,max:n,step:u,size:g,allowDecimal:p,allowNegative:h,decimalSeparator:m,thousandSeparator:b,decimalScale:x,clampBehavior:d,hideControls:y,format:P,locale:A,currency:$,formatOptions:S,prefix:F,suffix:z,leftSection:w,rightSection:v,className:f,onChange:C,onInput:V,...I}=i,{onChange:X,onInput:re,onBlur:K,onFocus:ue,onKeyDown:te}=t,oe=M=>{X?.(M.target?.value??""),re?.(M.target?.value??"")},de=oe,ie=Ca(""),T=M=>String(M??"").replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),R=()=>{if(!!!l(p))return 0;let D=l(x);if(D!=null&&D!==""&&Number.isFinite(Number(D)))return Math.max(0,Number(D));let E=l(P);return E==="currency"||E==="percent"?2:0},N=M=>{let D=l(m)??".",E=l(b)??"",O=String(M??"");if(E&&(O=O.split(E).join("")),!O||O==="-"||O===D||O.endsWith(D))return null;let _=O.replace(D,"."),Z=Number(_);return Number.isFinite(Z)?Z:null},G=M=>{let D=l(b)??"";return D?M.replace(/\B(?=(\d{3})+(?!\d))/g,D):M},H=M=>{let D=l(m)??".",E=R(),O=Number(M);if(!Number.isFinite(O))return"";let _=O<0?"-":"",Z=Math.abs(O),[Y,U=""]=String(Z).split("."),ee=G(Y);if(E>0){let fe=U.slice(0,E).padEnd(E,"0");return`${_}${ee}${D}${fe}`}return`${_}${ee}`},ne=(M,D)=>{try{let E=l(A),O=l($)??"USD",_=l(S)??{},Z=R(),Y=D==="currency"?"currency":"decimal";return new Intl.NumberFormat(E,{style:Y,currency:O,...Z>0?{minimumFractionDigits:Z,maximumFractionDigits:Z}:{maximumFractionDigits:0},..._}).format(M)}catch{return H(M)}},se=M=>{let D=M,E=l(a),O=l(n);return E!=null&&Number.isFinite(Number(E))&&(D=Math.max(D,Number(E))),O!=null&&Number.isFinite(Number(O))&&(D=Math.min(D,Number(O))),!l(h)&&D<0&&(D=0),D},xe=()=>{let M=l(z)??"",D=l(P);return!M&&D==="percent"?"%":M},ze=(M,D,E)=>{let O=l(F)??"",_=xe(),Z=String(M??"").replace(/\u00A0/g," "),Y=String(O??"").replace(/\u00A0/g," "),U=String(_??"").replace(/\u00A0/g," "),ee=Y&&Z.startsWith(Y),fe=U&&Z.endsWith(U);return`${D??""}${ee?"":O}${M}${fe?"":_}`},Se=(M,D)=>{let E=R(),O=l(m)??".",Z=String(M??"").replace(/\D/g,"")||"0",Y=E>0?Z.padStart(E+1,"0"):Z,ee=(E>0?Y.slice(0,-E):Y).replace(/^0+(?=\d)/,"")||"0",fe=E>0?Y.slice(-E):"",Te=E>0?`${ee}${O}${fe}`:ee;return`${D??""}${Te}`},Ve=M=>{let D=l(F)??"",E=xe(),O=String(M??""),_=String(D??"").replace(/\u00A0/g," "),Z=String(E??"").replace(/\u00A0/g," ");return _&&O.replace(/\u00A0/g," ").startsWith(_)&&(O=O.slice(D.length)),Z&&O.replace(/\u00A0/g," ").endsWith(Z)&&(O=O.slice(0,-E.length)),O},li=M=>{let D=!!l(h),E=Ve(M),O=D&&E.includes("-")?"-":"",_=E.replace(/\D/g,""),Z=Se(_,O);if(l(d)==="strict"){let Y=N(Z);if(Y!=null){let U=se(Y);Z=`${U<0?"-":""}${H(Math.abs(U))}`}}return Z},Vi=M=>{if(M==null||M==="")return Se("","");if(typeof M=="number"&&Number.isFinite(M)){let U=l(d)==="strict"?se(M):M;return`${U<0?"-":""}${H(Math.abs(U))}`}let D=Ve(M),E=l(m)??".",_=!!l(h)&&String(D).includes("-")?"-":"",Z=String(D??"").replace(new RegExp(`[^0-9${T(E)}]`,"g"),""),Y=N(`${_}${Z}`);if(Y!=null){let U=l(d)==="strict"?se(Y):Y;return`${U<0?"-":""}${H(Math.abs(U))}`}return li(M)},Ne,Ze=M=>{let D=l(M);if(D===void 0)return;let E=Vi(D);E!==ie.get()&&(Ne=E,ie.set(E))};Ze(r),$e(r).change(M=>{Ze(M)}),$e(ie).change(M=>{if(M===Ne){Ne=void 0;return}Ne=void 0;let D=N(M);if(D==null){oe?.(M??"");return}oe?.(D)});let Li=$e(v).compute(M=>M!=null&&M!==!1),$i=$e(y,Li).compute(([M,D])=>!l(M)&&!D),ci=$e(p).compute(M=>l(M)?"decimal":"numeric"),Ii=$e(P,F,z,p,h,m,b,x,d,a,n,A,$,S).compute(()=>({mode:"both",format:M=>{let D=li(M),E=l(P),_=!!l(h)&&D.startsWith("-")?"-":"",Z=N(D),Y=D.replace(_,"");if(Z!=null){let U=Math.abs(Z);if(typeof E=="function")try{Y=E(U)}catch{Y=H(U)}else if(E==="currency")Y=ne(U,"currency");else if(E==="decimal"){let ee=l(A),fe=l(S);Y=ee||fe?ne(U,"decimal"):H(U)}else Y=H(U)}return{value:D,raw:D,visual:ze(Y,_,E)}}})),c=M=>{let D=N(ie.get()),E=Number(l(u)??1),_=se((D??0)+E*M);ie.set(H(_))},B=M=>{if(!M||typeof M.setSelectionRange!="function")return;let D=()=>{try{let E=String(M.value??"").length;M.setSelectionRange(E,E)}catch{}};typeof requestAnimationFrame=="function"?requestAnimationFrame(D):D()},ae=M=>{de?.(M);let D=M?.target;D&&B(D)},q=M=>{if(K?.(M),l(d)!=="blur")return;let D=N(ie.get());if(D==null)return;let E=se(D);ie.set(H(E))},J=M=>{ue?.(M),B(M?.target)},pe=M=>{te?.(M);let D=M?.target;if(!D)return;let E=l(F)??"",O=xe();O&&typeof D.selectionEnd=="number"&&(D.selectionEnd=Math.min(D.selectionEnd,String(D.value??"").length-O.length)),E&&typeof D.selectionStart=="number"&&(D.selectionStart=Math.max(D.selectionStart,E.length))},Q=$t({className:"g-ui-number-field-controls"},It({className:"g-ui-number-field-control",onClick:()=>c(1)},"+"),It({className:"g-ui-number-field-control",onClick:()=>c(-1)},"\u2212")),Ce=$t({className:"g-ui-number-field-controls-wrapper"},Q),De=$e($i,v).compute(([M,D])=>M?Ce:D);return ge({...I,size:g,className:o("g-ui-number-field",f),leftSection:w,rightSection:De,type:"text",inputMode:ci,inputClassName:o("g-ui-input-number"),value:ie,format:Ii,onInput:ae,onBlur:q,onFocus:J,onKeyDown:pe})}function Sa(...e){return Yi(...e)}import{Div as hi,Button as Da,portal as Pa,when as Wi,after as Ma}from"@granularjs/core";var di='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>',mi='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>',fi='<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#1f1f1f"><path d="M379.33-244 154-469.33 201.67-517l177.66 177.67 378.34-378.34L805.33-670l-426 426Z"/></svg>',Bt='<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#1f1f1f"><path d="M240-446.67v-66.66h480v66.66H240Z"/></svg>',Ee='<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#1f1f1f"><path d="M312-265.33 265.33-312l168-168-168-167L312-693.67l168 168 167-168L693.67-647l-168 167 168 168L647-265.33l-167-168-168 168Z"/></svg>',At='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',Ft='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>',jt='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360v-80h240v80H480Zm0 160v-80h320v80H480Zm0 160v-80h320v80H480ZM360-360v-80h80v80h-80Zm0 160v-80h80v80h-80Zm0 160v-80h80v80h-80Zm160-320h280l-36-37 37-37v74H520Zm-160 0h80v-80h-80v80ZM120-600v-160l160-160h160l-80 80H200v240h-80Zm80-240v-80 80Z"/></svg>',Et='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>',Rt='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z"/></svg>';function _e(...e){let{props:i,rawProps:t,children:r}=s(e,{size:"md",centered:!0,overlay:"normal"}),{opened:a,title:n,size:u,centered:g,overlay:p,position:h,className:m,style:b}=i,{onClose:x}=t,d=Ma(h,g).compute(([y,P])=>`g-ui-modal-position-${y??(P===!1?"top-center":"center")}`);return Wi(a,()=>Pa(hi({className:o("g-ui-modal-overlay",k("g-ui-modal-overlay-",p,"normal"),d),onClick:y=>{y.target===y.currentTarget&&x?.()}},hi({className:o("g-ui-modal",k("g-ui-modal-size-",u,"md"),m)},hi({className:"g-ui-modal-header"},Wi(n,()=>hi({className:"g-ui-modal-title"},n)),Wi(x,()=>Da({type:"button",className:"g-ui-button g-ui-button-variant-subtle g-ui-button-size-xs g-ui-modal-close",onClick:x,innerHTML:Ee}))),r))))}import{Div as xi,Span as Gi,after as Ht,when as Ot}from"@granularjs/core";function Ke(...e){let{props:i}=s(e,{variant:"spinner",size:"md"}),{variant:t,size:r,className:a}=i,n=Ht(t).compute(g=>g==="dots"),u=Ht(t).compute(g=>g==="bars");return Ot(n,()=>xi({className:o("g-ui-loading g-ui-dots",k("g-ui-loading-size-",r,"md"),a)}),()=>Ot(u,()=>xi({className:o("g-ui-loading g-ui-bars",k("g-ui-loading-size-",r,"md"),a)},Gi(""),Gi(""),Gi("")),()=>xi({className:o("g-ui-loading",k("g-ui-loading-size-",r,"md"),a)},xi({className:"g-ui-spinner"}))))}import{Div as Zi,Input as Ta,Label as Va,Span as qt,when as Ui,state as La,after as $a}from"@granularjs/core";function Xi(...e){let{props:i,rawProps:t}=s(e,{size:"md"}),{checked:r,label:a,description:n,size:u,indeterminate:g,className:p,style:h,inputProps:m,...b}=i,{onChange:x}=t,d=La(ve(r));$a(r).change(P=>{P!=null&&(d.set(!!P),x?.(P))});let y=Va({className:"g-ui-checkbox-control"},Ta({type:"checkbox",indeterminate:g,checked:d,className:o("g-ui-checkbox-input",k("g-ui-checkbox-size-",u,"md"),m?.className),...b}),Ui(d,()=>Zi({className:"g-ui-checkbox-checked",innerHTML:fi}),()=>{if(!d.get()&&g.get())return Zi({className:"g-ui-checkbox-indeterminate",innerHTML:Bt})}),Ui(a,()=>qt({className:"g-ui-checkbox-label"},a)));return Zi({className:o("g-ui-checkbox",k("g-ui-checkbox-size-",u,"md"),p)},y,Ui(n,()=>qt({className:"g-ui-checkbox-description"},n)))}import{Input as Ia,Label as Ba,Span as Aa,when as Fa}from"@granularjs/core";function ja(...e){let{props:i}=s(e,{size:"md"}),{label:t,size:r,className:a,style:n,inputProps:u,...g}=i;return Ba({className:o("g-ui-switch",k("g-ui-switch-size-",r,"md"),a)},Ia({type:"checkbox",className:o("g-ui-switch-input",k("g-ui-switch-size-",r,"md"),u?.className),...g}),Fa(t,()=>Aa({className:"g-ui-switch-label"},t)))}import{Div as Ie,Span as Yt,when as _i,state as Wt,after as vi}from"@granularjs/core";function Ea(...e){let{props:i,rawProps:t}=s(e,{data:[],size:"md"}),{data:r,value:a,size:n,leftSection:u,rightSection:g,placeholder:p,className:h,...m}=i,{onChange:b}=t,x=Wt(!1),d=Wt(l(a)??"");vi(a).change($=>{let S=l($);S!==void 0&&d.set(S??"")});let y=$=>{d.set($),b?.($),x.set(!1)},P=vi(d).compute($=>$?"":"g-ui-select-placeholder"),A=vi(d).compute($=>{let F=(l(r)??[]).find(z=>z.value===$);return $?F?.label??"":p??""});return Ie({...m,className:o("g-ui-select-root",h)},Ie({className:o("g-ui-input-wrapper",k("g-ui-input-size-",n,"md"))},_i(u,()=>Ie({className:"g-ui-input-section"},u)),Ie({className:o("g-ui-select",P),onClick:()=>x.set(!x.get())},Yt({className:"g-ui-select-value"},A)),_i(g,()=>Ie({className:"g-ui-input-section"},g),()=>Yt({className:"g-ui-select-caret"},"\u25BE"))),_i(x,()=>Ie({className:"g-ui-select-dropdown"},(l(r)??[]).map($=>Ie({className:o("g-ui-select-item",vi(d).compute(S=>S===$.value?"g-ui-select-item-active":"")),onClick:()=>y($.value)},$.label)))))}import{Button as Ra,Div as Re,state as Pe,after as Qe,list as Ha,when as Oa}from"@granularjs/core";function qa(...e){let{props:i,rawProps:t}=s(e,{tabs:[],orientation:"horizontal",variant:"default",sticky:!0}),{value:r,tabs:a,orientation:n,variant:u,sticky:g,className:p,style:h}=i,{onChange:m}=t,b=Pe(l(r)??l(a)?.[0]?.value??""),x=Pe(),d=Pe(),y=Pe(0),P=Pe(0),A=Pe(0),$=Pe(0),S=Pe(!1),F=Pe(0),z=!1,w=null,v=!1,f=new Set;Qe(r).change(N=>{let G=l(N);G!=null&&b.set(G)});let C=N=>{b.set(N),m?.(N)},V=N=>{let G=[],H=N?.parentElement;for(;H;){let ne=getComputedStyle(H),se=`${ne.overflow}${ne.overflowY}${ne.overflowX}`;/(auto|scroll)/.test(se)&&G.push(H),H=H.parentElement}return G},I=N=>V(N)[0]??null,X=N=>N?N.getBoundingClientRect().top:0,re=N=>N?N.scrollTop:window.scrollY||window.pageYOffset||0,K=(N,G)=>N>G?"down":N<G?"up":"none",ue=(N,G,H,ne)=>N==="down"&&G<H?!0:N==="up"&&G>=H?!1:ne,te=()=>{let N=x.get(),G=d.get();if(!N||!G)return;if(!ve(g)){S.set(!1),y.set(0);return}if(typeof window>"u")return;let H=N.getBoundingClientRect(),ne=G.getBoundingClientRect(),se=I(N),xe=X(se),ze=re(se),Se=K(ze,F.get());F.set(ze);let Ve=ue(Se,H.top,xe,S.get());y.set(ne.height),P.set(H.left),A.set(H.width),$.set(xe),Ve!==S.get()&&S.set(Ve)},oe=()=>{w==null&&(w=requestAnimationFrame(()=>{w=null,te()}))},de=N=>{!N||f.has(N)||(f.add(N),N.addEventListener("scroll",oe,{passive:!0}))},ie=()=>{if(z)return;let N=x.get(),G=d.get();!N||!G||typeof window>"u"||(z=!0,te(),de(window),window.addEventListener("resize",oe),V(N).forEach(de))};Qe(d,x,g).change(ie),!v&&typeof window<"u"&&(v=!0,setTimeout(()=>ie(),0));let T=Qe(S,P,A,$).compute(N=>{let[G,H,ne,se]=N;return G?{position:"fixed",top:`${se}px`,left:`${H}px`,width:`${ne}px`,background:"var(--g-ui-surface)",zIndex:100}:{position:"static",top:"auto",left:"auto",width:"auto",zIndex:"auto",background:"transparent"}}),R=Qe(S,y).compute(N=>{let[G,H]=N;return{height:G?`${H}px`:"0px"}});return Re(Re({className:o("g-ui-tabs",me(n,{vertical:"g-ui-tabs-vertical"}),k("g-ui-tabs-variant-",u,"default"),i.className??p)},Re({node:x}),Re({style:R}),Re({node:d,className:"g-ui-tabs-list",style:T},Ha(a,N=>Ra({className:Qe(b,N.value).compute(([G,H])=>o("g-ui-tabs-tab",H===G&&"g-ui-tabs-tab-active")),onClick:()=>C(N.value.get())},N.label))),Re({className:"g-ui-tabs-panel"},Oa(b,()=>a.get()?.find(N=>N.value===b.get())?.content??null))))}import{Table as Ya,Thead as Wa,Tbody as Ga,Tr as Gt,Th as Za,Td as Zt}from"@granularjs/core";function Ua(...e){let{props:i}=s(e,{headers:[],rows:[]}),{headers:t,rows:r,striped:a,highlightOnHover:n,withBorder:u,withColumnBorders:g,className:p,style:h,...m}=i;return Ya({...m,className:o("g-ui-table",W("g-ui-table-striped",a),W("g-ui-table-hover",n),W("g-ui-table-with-border",u),W("g-ui-table-column-borders",g),p)},t.length?Wa(Gt(t.map(b=>Za(b)))):null,Ga(r.map(b=>Gt(Array.isArray(b)?b.map(x=>Zt(x)):Object.values(b).map(x=>Zt(x))))))}import{Div as Ki}from"@granularjs/core";import{state as Xa,when as _a,after as Ka}from"@granularjs/core";function Qa(...e){let{props:i,children:t}=s(e,{opened:!1}),{opened:r,className:a,...n}=i,u=Xa(ve(r));Ka(r).change(m=>{u.set(ve(m))});let g=()=>{u.set(!u.get())},p=t[0],h=t[1];return Ki({...n,className:o("g-ui-accordion",a)},Ki({className:"g-ui-accordion-header",onClick:g},p),_a(u,()=>Ki({className:"g-ui-accordion-content"},h)))}import{Span as Ut}from"@granularjs/core";function Ja(...e){let{props:i,children:t}=s(e),{label:r,className:a,style:n}=i;return Ut({className:o("g-ui-tooltip",a)},t,Ut({className:"g-ui-tooltip-content"},r))}import{Div as Je,when as eo,after as io,state as ei,portal as to}from"@granularjs/core";var Qi=ei({currentOpenState:null});function ro(...e){let i=ei(),t=ei(),r=ei({}),{props:a,rawProps:n,children:u}=s(e,{position:"right"}),{opened:g,content:p,position:h,className:m,...b}=a,{onChange:x}=n,d=ei(l(g)??!1);io(g).change(z=>{let w=l(z);w!=null&&(d.set(!!w),w&&y())});let y=()=>{Qi.get().currentOpenState!==d&&(Qi.get().currentOpenState?.set(!1),Qi.set().currentOpenState=d)};g.get()&&y();let P=z=>{let v=String(z??"right").toLowerCase().split("-").filter(Boolean);if(v.length===1){let V=v[0];return V==="top"||V==="bottom"?{placement:V,align:"center"}:V==="left"||V==="right"?{placement:"bottom",align:V}:V==="center"?{placement:"bottom",align:"center"}:{placement:"bottom",align:"right"}}let[f,C]=v;return f==="top"||f==="bottom"?{placement:f,align:C||"center"}:f==="left"||f==="right"?{placement:f,align:C||"center"}:{placement:"bottom",align:"right"}},A=()=>{let z=i.get(),w=t.get();if(!z||!w||typeof window>"u")return;let v=z.getBoundingClientRect(),f=w.getBoundingClientRect(),C=l(h)??"right",V=getComputedStyle(document.documentElement).getPropertyValue("--g-ui-space-20"),I=Number.parseFloat(V)||20,X=window.innerWidth||0,re=window.innerHeight||0,K=Math.max(I,X-f.width-I),ue=Math.max(I,re-f.height-I),{placement:te,align:oe}=P(C),de=8,ie=v.bottom+de,T=v.left;te==="top"||te==="bottom"?(ie=te==="top"?v.top-f.height-de:v.bottom+de,oe==="center"?T=v.left+v.width/2-f.width/2:oe==="right"?T=v.right-f.width:T=v.left):(te==="left"||te==="right")&&(T=te==="left"?v.left-f.width-de:v.right+de,oe==="center"?ie=v.top+v.height/2-f.height/2:oe==="bottom"?ie=v.bottom-f.height:ie=v.top),T=Math.max(I,Math.min(T,K)),ie=Math.max(I,Math.min(ie,ue)),r.set({top:`${ie}px`,left:`${T}px`})},$=z=>{d.set(z),x?.(z),z&&(y(),typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>A()):setTimeout(()=>A(),0))},S=()=>$(!d.get()),F=()=>$(!1);return Je({...b,node:i,className:o("g-ui-menu",m)},Je({onClick:S},u),eo(d,()=>to(Je(Je({className:"g-ui-menu-overlay",onClick:F}),Je({className:"g-ui-menu-dropdown",node:t,style:r},p)))))}import{Div as Xt,portal as ao,when as oo}from"@granularjs/core";function no(...e){let{props:i,children:t}=s(e,{position:"right",size:"md",overlay:"normal",shadowed:!0}),{opened:r,onClose:a,position:n,size:u,overlay:g,shadowed:p,className:h,style:m}=i;return oo(r,()=>ao(Xt({className:o("g-ui-drawer-overlay",k("g-ui-drawer-overlay-",g,"normal")),onClick:a},Xt({className:o("g-ui-drawer",me(p,{true:"g-ui-drawer-shadowed"},!0),k("g-ui-drawer-",n,"right"),k("g-ui-drawer-size-",u,"md"),h),onClick:b=>b.stopPropagation()},t))))}import{Button as so,Div as Ji,Span as _t,when as bi,after as Kt}from"@granularjs/core";function et(...e){let{props:i,rawProps:t,children:r}=s(e,{color:"blue",withCloseButton:!0}),{title:a,color:n,icon:u,loading:g,withCloseButton:p,withBorder:h,className:m,style:b}=i,{onClose:x}=t,d=Kt(u,g).compute(([P,A])=>!P&&!!A),y=Kt(u,g).compute(([P,A])=>!!P||!!A);return Ji({className:o("g-ui-notification",[h,"g-ui-notification-bordered"],[n,P=>`g-ui-notification-${P}`],[y,"g-ui-notification-with-icon"],m)},bi(u,()=>_t({className:"g-ui-notification-icon"},u)),bi(d,()=>Ke({size:"sm",className:"g-ui-notification-loader"})),Ji({className:"g-ui-notification-body"},bi(a,()=>Ji({className:"g-ui-notification-title"},a)),r),bi(p,()=>so({type:"button",className:"g-ui-notification-close",onClick:()=>x?.()},_t({innerHTML:Ee}))))}import{Div as uo,when as go}from"@granularjs/core";function lo(...e){let{props:i}=s(e,{labelPosition:"center"}),{label:t,labelPosition:r,vertical:a,className:n,...u}=i;return uo({...u,className:o("g-ui-divider",W("label",t),k("g-ui-divider-label-",r,"center"),W("g-ui-divider-vertical",a),n)},go(t,()=>Hi({className:"g-ui-divider-label-text",size:"sm"},t)))}import{Div as co}from"@granularjs/core";function po(...e){let{props:i,children:t}=s(e,{padding:"md",radius:"md",shadow:"none"}),{padding:r,radius:a,shadow:n,className:u,...g}=i;return co({...g,className:o("g-ui-paper",[r,p=>`g-ui-card-padding-${p}`],[a,p=>`g-ui-card-radius-${p}`],[n,p=>`g-ui-card-shadow-${p}`],u)},t)}import{Button as mo,Div as it,Span as fo,after as Qt,when as tt}from"@granularjs/core";function ho(...e){let{props:i,rawProps:t,children:r}=s(e,{color:"blue"}),{title:a,color:n,icon:u,withCloseButton:g,className:p,...h}=i,{onClose:m}=t,b=Qt(a,g).compute(([d,y])=>d||y),x=Qt(u).compute(d=>d!==void 0);return it({...h,className:o("g-ui-alert",[n,d=>`g-ui-alert-${d}`],p)},it({className:"g-ui-alert-header"},tt(u,()=>fo({className:"g-ui-alert-icon"},u)),tt(a,()=>it({className:"g-ui-alert-title"},a)),tt(g,()=>mo({type:"button",className:"g-ui-alert-close",onClick:()=>m?.()},"\xD7"))),r)}import{Div as xo,Img as vo,when as bo}from"@granularjs/core";function wo(...e){let{props:i,children:t}=s(e,{size:"md",alt:""}),{src:r,size:a,alt:n,className:u,...g}=i;return xo({...g,className:o("g-ui-avatar",[a,p=>`g-ui-avatar-size-${p}`],u)},bo(r,()=>vo({className:"g-ui-avatar-img",src:r,alt:n}),()=>t))}import{Span as yo}from"@granularjs/core";function ko(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return yo({...a,className:o("g-ui-kbd",r)},t)}import{Code as zo}from"@granularjs/core";function No(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return zo({...a,className:o("g-ui-code",r)},t)}import{Blockquote as Co}from"@granularjs/core";function So(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Co({...a,className:o("g-ui-blockquote",r)},t)}import{Div as Do}from"@granularjs/core";function Po(...e){let{props:i,children:t}=s(e,{cols:3,gap:"md"}),{cols:r,gap:a,className:n,...u}=i;return Do({...u,className:o("g-ui-grid",[a,g=>`g-ui-gap-${g}`],[r,g=>`g-ui-grid-cols-${g}`],n)},t)}import{Ul as Mo,Ol as To,Li as rt,Div as wi,Span as at,after as ot,when as He,isSignal as Vo,isState as Lo,isStatePath as $o,isComputed as Io}from"@granularjs/core";function Jt(...e){let{props:i,children:t}=s(e,{type:"none",size:"md"}),{type:r,size:a,withPadding:n,className:u,...g}=i,p=me(r,{ordered:"g-ui-list-ordered",unordered:"g-ui-list-unordered",none:"g-ui-list-none"}),h=ot(r).compute(P=>P==="ordered"),m=P=>P&&typeof P=="object"&&typeof P.tagName=="string"&&(P.tagName.toLowerCase()==="ul"||P.tagName.toLowerCase()==="ol"),b=P=>P&&typeof P=="object"&&typeof P.tagName=="string"&&P.tagName.toLowerCase()==="li",x=P=>{let A=$=>$==null||$===!1?null:Array.isArray($)?$.map(S=>A(S)):b($)?$:m($)?rt({className:"g-ui-list-nested-item"},$):rt(at({className:"g-ui-list-item-shell"},$));return Vo(P)||Lo(P)||$o(P)||Io(P)?ot(P).compute($=>A($)):A(P)},d=t.map(P=>x(P)),y={...g,className:o("g-ui-list",k("g-ui-list-size-",a,"md"),W("g-ui-list-with-padding",n),p,u)};return He(h,()=>To(y,d),()=>Mo(y,d))}function Bo(...e){let{props:i,children:t}=s(e,{withBorder:!1}),{leftSection:r,rightSection:a,title:n,body:u,withBorder:g,className:p,...h}=i,m=ot(n,u).compute(([b,x])=>!!b||!!x);return rt({...h,className:o("g-ui-list-item",W("g-ui-list-item-border",g),p)},wi({className:"g-ui-list-item-shell"},He(r,()=>at({className:"g-ui-list-item-section g-ui-list-item-section-left"},r)),He(m,()=>wi({className:"g-ui-list-item-content"},He(n,()=>wi({className:"g-ui-list-item-title"},n)),He(u,()=>wi({className:"g-ui-list-item-body"},u))),()=>t),He(a,()=>at({className:"g-ui-list-item-section g-ui-list-item-section-right"},a))))}Jt.Item=Bo;import{A as Ao}from"@granularjs/core";function Fo(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Ao({...a,className:o("g-ui-anchor",r)},t)}import{Img as jo}from"@granularjs/core";function Eo(...e){let{props:i}=s(e),{className:t,...r}=i;return jo({...r,className:o("g-ui-image",t)})}import{Span as Ro}from"@granularjs/core";function ye(...e){let{props:i,children:t}=s(e,{size:"md"});return Ro({...i,className:o("g-ui-icon",k("g-ui-icon-size-",i.size,"md"),k("g-ui-icon-color-",i.color),i.className)},...t)}import{Div as er}from"@granularjs/core";function Ho(...e){let{props:i}=s(e,{value:0,color:"primary",size:"md"}),{value:t,color:r,size:a,className:n,...u}=i;return er({...u,className:o("g-ui-progress",k("g-ui-progress-size-",a,"md"),[t,g=>{let p=Math.max(0,Math.min(100,Number(g)||0));return`g-ui-progress-${Math.round(p/5)*5}`}],[r,g=>g?`g-ui-progress-${g}`:""],n)},er({className:"g-ui-progress-bar"}))}import{Div as Be,after as yi,state as Oo,when as qo}from"@granularjs/core";function Yo(...e){let{props:i,rawProps:t}=s(e,{size:"md",min:0,max:100,step:1}),{onChange:r}=t,{value:a,marks:n,size:u,min:g,max:p,step:h,disabled:m,className:b,...x}=i,d=Oo(l(a??g));yi(a).change(z=>{z!=null&&d.set(l(z))});let y=()=>{let z=Number(l(g)),w=Number(l(p));return!Number.isFinite(z)||!Number.isFinite(w)?{minValue:0,maxValue:100}:{minValue:Math.min(z,w),maxValue:Math.max(z,w)}},P=()=>{let z=Number(l(h));return Number.isFinite(z)&&z>0?z:1},A=z=>{let{minValue:w,maxValue:v}=y(),f=P(),C=Math.max(w,Math.min(v,Number(z))),V=Math.round((C-w)/f)*f+w;V!==d.get()&&(d.set(V),r?.(V))},$=yi(d).compute(z=>{let{minValue:w,maxValue:v}=y(),f=v-w;if(f<=0)return 0;let C=(Number(z??w)-w)/f*100;return Math.max(0,Math.min(100,C))}),S=(z,w)=>{let v=w?.();if(!v||v.width===0)return;let C=Math.min(Math.max(z.clientX-v.left,0),v.width)/v.width,{minValue:V,maxValue:I}=y();A(V+C*(I-V))},F=z=>{if(ve(m))return;z.preventDefault?.();let w=z.currentTarget,v=()=>w.getBoundingClientRect();w.setPointerCapture?.(z.pointerId),S(z,v);let f=V=>S(V,v),C=()=>{w.releasePointerCapture?.(z.pointerId),window.removeEventListener("pointermove",f),window.removeEventListener("pointerup",C)};window.addEventListener("pointermove",f),window.addEventListener("pointerup",C)};return Be({...x,className:o("g-ui-slider",k("g-ui-slider-size-",u,"md"),W("g-ui-slider-disabled",m),b)},Be({className:"g-ui-slider-track",onPointerDown:F},Be({className:"g-ui-slider-bar",style:yi($).compute(z=>({width:`${z}%`}))}),Be({className:"g-ui-slider-thumb",style:yi($).compute(z=>({left:`${z}%`}))})),qo(n,()=>Be({className:"g-ui-slider-marks"},n.map(z=>nt({mark:z,getBounds:y})))))}var nt=({mark:e,getBounds:i})=>{let{minValue:t,maxValue:r}=i(),a=r-t,n=e.value??e,u=e.label??String(e.value)??n,g=Number(n),p=0;return a>0&&(p=(g-t)/a*100),Be({className:"g-ui-slider-mark",style:{left:`${Math.max(0,Math.min(100,p))}%`}},Be({className:"g-ui-slider-mark-label"},u))};import{Div as Wo,after as Go}from"@granularjs/core";function Zo(...e){let{props:i}=s(e,{height:"md",width:"full"}),{height:t,width:r,className:a,...n}=i,u=Go(t,r).compute(([g,p])=>{let h={};return isNaN(g)||(h.height=`${g}px`),isNaN(p)||(h.width=`${p}px`),h});return Wo({...n,style:{width:u.width,height:u.height,...n.style||{}},className:o("g-ui-skeleton",[t,g=>`g-ui-skeleton-h-${g}`],[r,g=>`g-ui-skeleton-w-${g}`],a)})}import{Button as Uo,after as ir,state as Xo}from"@granularjs/core";function _o(...e){let{props:i,rawProps:t,children:r}=s(e,{size:"md",variant:"filled"}),{checked:a,size:n,variant:u,className:g,...p}=i,{onChange:h}=t,m=Xo(!!a);ir(a).change(x=>{x!=null&&m.set(!!x)});let b=x=>{m.set(x),h?.(x)};return Uo({...p,type:"button",className:o("g-ui-chip",k("g-ui-chip-size-",n,"md"),k("g-ui-chip-variant-",u,"filled"),ir(m).compute(x=>x?"g-ui-chip-active":""),g),onClick:()=>b(!m.get())},r)}import{Div as st,after as tr,state as Ko}from"@granularjs/core";function Qo(...e){let{props:i,rawProps:t}=s(e,{data:[],size:"sm"}),{value:r,data:a,size:n,scroll:u,className:g,...p}=i,{onChange:h}=t,m=Ko(l(r));tr(r).change(x=>{let d=l(x);d!=null&&m.set(d)});let b=x=>{m.set(x),h?.(x)};return st({...p,className:o(u&&"g-ui-segmented-scroll")},st({className:o("g-ui-segmented",k("g-ui-segmented-size-",n,"sm"),i.className??g)},a.map(x=>st({className:o("g-ui-segmented-item",tr(m).compute(d=>x.value===d?"g-ui-segmented-active":"")),onClick:()=>b(x.value)},x.label))))}import{Button as ut,Div as Jo,state as en,after as ki}from"@granularjs/core";function tn(...e){let{props:i,rawProps:t}=s(e,{total:1,size:"md"}),{page:r,total:a,size:n,className:u,...g}=i,{onChange:p}=t,h=en(l(r??1));ki(r).change(d=>{let y=l(d);y!=null&&h.set(y)});let m=d=>{let y=Number(l(a))||1,P=Math.max(1,Math.min(y,d));h.set(P),p?.(P)},b=[],x=Number(l(a))||1;for(let d=1;d<=x;d+=1)b.push(d);return Jo({...g,className:o("g-ui-pagination",k("g-ui-pagination-size-",n,"md"),i.className??u)},ut({className:"g-ui-pagination-item",onClick:()=>m((h.get?.()??h)-1),disabled:ki(h).compute(d=>d<=1)},"<"),b.map(d=>ut({className:ki(h).compute(y=>o("g-ui-pagination-item",d===y&&"g-ui-pagination-item-active")),onClick:()=>m(d)},String(d))),ut({className:"g-ui-pagination-item",onClick:()=>m((h.get?.()??h)+1),disabled:ki(h).compute(d=>d>=a)},">"))}import{Div as rn,Input as an,Label as on,Span as rr,when as ar}from"@granularjs/core";function nn(...e){let{props:i}=s(e,{size:"md"}),{label:t,description:r,size:a,className:n,inputProps:u,...g}=i,p=on({className:"g-ui-radio-control"},an({type:"radio",className:o("g-ui-radio-input",k("g-ui-radio-size-",a,"md"),u?.className),...g}),ar(t,()=>rr({className:"g-ui-radio-label"},t)));return rn({className:o("g-ui-radio",k("g-ui-radio-size-",a,"md"),n)},p,ar(r,()=>rr({className:"g-ui-radio-description"},r)))}import{Div as sn}from"@granularjs/core";function un(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return sn({...a,className:o("g-ui-stack g-ui-gap-sm",r)},t)}import{Nav as gn,Span as ln}from"@granularjs/core";function cn(...e){let{props:i,children:t}=s(e,{separator:"/"}),{separator:r,className:a,...n}=i,u=[];Array.isArray(t)?u.push(...t):u.push(t);let g=u.filter(Boolean),p=[];return g.forEach((h,m)=>{p.push(h),m<g.length-1&&p.push(ln({className:"g-ui-breadcrumbs-separator"},r))}),gn({...n,className:o("g-ui-breadcrumbs",a)},p)}import{Div as pn}from"@granularjs/core";function dn(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return pn({...a,className:o("g-ui-center",r)},t)}import{Div as mn}from"@granularjs/core";function fn(...e){let{props:i}=s(e,{size:"md"}),{size:t,className:r,...a}=i;return mn({...a,className:o("g-ui-space",[t,n=>`g-ui-space-${n}`],r)})}import{Div as hn,when as xn}from"@granularjs/core";function vn(...e){let{props:i,children:t}=s(e),{opened:r,className:a,...n}=i;return xn(r,()=>hn({...n,className:o("g-ui-collapse",a)},t))}import{Button as bn}from"@granularjs/core";function Ae(...e){let{props:i,children:t}=s(e,{size:"md",variant:"filled"}),{size:r,variant:a,className:n,...u}=i;return bn({...u,type:"button",className:o("g-ui-action-icon",k("g-ui-action-icon-size-",r,"md"),k("g-ui-action-icon-",a,"filled"),n)},t)}import{Div as gt,when as wn,after as yn,state as kn}from"@granularjs/core";function lt(...e){let{props:i,rawProps:t,children:r}=s(e,{position:"left"}),{opened:a,position:n,content:u,className:g,...p}=i,{onChange:h}=t,m=kn(l(a)??!1);yn(a).change(x=>{let d=l(x);d!=null&&m.set(!!d)});let b=x=>{m.set(x),h?.(x)};return gt({...p,className:o("g-ui-popover",i.className??g)},gt({onClick:()=>b(!m.get())},r),wn(m,()=>gt({className:o("g-ui-popover-dropdown",n==="right"&&"g-ui-popover-right",n==="center"&&"g-ui-popover-center")},u)))}import{Div as or}from"@granularjs/core";function zn(...e){let{props:i,children:t}=s(e,{position:"left"}),{position:r,content:a,className:n,...u}=i;return or({...u,className:o("g-ui-hover-card",n)},t,or({className:o("g-ui-hover-card-dropdown",[r,g=>g==="right"?"g-ui-hover-card-right":""],[r,g=>g==="center"?"g-ui-hover-card-center":""])},a))}import{Div as Nn}from"@granularjs/core";function Cn(...e){let{props:i,children:t}=s(e,{position:"bottom-right"}),{position:r,className:a,...n}=i;return Nn({...n,className:o("g-ui-affix",[r,u=>`g-ui-affix-${u}`],a)},t)}import{Fieldset as Sn,Legend as Dn,when as Pn}from"@granularjs/core";function Mn(...e){let{props:i,children:t}=s(e),{legend:r,className:a,...n}=i;return Sn({...n,className:o("g-ui-fieldset",a)},Pn(r,()=>Dn({className:"g-ui-legend"},r)),t)}import{Div as Tn}from"@granularjs/core";function Vn(...e){let{props:i,children:t}=s(e,{position:"sticky"}),{position:r,className:a,...n}=i;return Tn({...n,className:o("g-ui-appbar",k("g-ui-appbar-",r,"sticky"),a)},t)}import{Div as ct,portal as Ln,after as zi,state as nr,when as sr}from"@granularjs/core";function $n(...e){let{props:i,children:t}=s(e,{position:"left",size:"md",blur:!0,fixed:!1,minWidth:"button"});return sr(i.fixed,()=>Bn(i,t),()=>In(i,t))}var In=(e,i)=>{let{open:t,onClose:r,position:a,size:n,blur:u,fixed:g,minWidth:p,className:h,...m}=e,b=nr(!1),x=nr(!1),d=220,y=$=>{if($){b.set(!0),typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>x.set(!0)):setTimeout(()=>x.set(!0),0);return}x.set(!1),setTimeout(()=>b.set(!1),d)};y(!!t.get()),zi(t).change($=>y(!!$));let P=zi(x,u).compute($=>{let[S,F]=$;return o("g-ui-sidebar-overlay",S&&"g-ui-sidebar-overlay-open",!F&&"g-ui-sidebar-overlay-noblur")}),A=zi(n,a,x,h).compute($=>{let[S,F,z,w]=$,v=F==="right"?"g-ui-sidebar-drawer-right g-ui-sidebar-position-right":"g-ui-sidebar-drawer-left";return o("g-ui-sidebar","g-ui-sidebar-drawer",`g-ui-sidebar-size-${S}`,v,z&&"g-ui-sidebar-drawer-open",l(w))});return sr(b,()=>Ln(ct({className:P,onClick:r},ct({className:A,onClick:$=>$.stopPropagation()},i))))},Bn=(e,i)=>{let{open:t,position:r,size:a,minWidth:n,className:u,...g}=e,p=zi(a,r,t,n,u).compute(h=>{let[m,b,x,d,y]=h,P=d||"button",A=null;return P==="button"?A="g-ui-sidebar-min-button":P==="xs"?A="g-ui-sidebar-min-xs":P==="sm"?A="g-ui-sidebar-min-sm":P==="md"&&(A="g-ui-sidebar-min-md"),o("g-ui-sidebar g-ui-sidebar-fixed",`g-ui-sidebar-size-${m||"md"}`,A,x&&"g-ui-sidebar-fixed-open",y)});return ct({...g,className:p},i)};import{Div as Oe,when as ur}from"@granularjs/core";function An(...e){let{props:i}=s(e,{items:[]}),{items:t,className:r,...a}=i;return Oe({...a,className:o("g-ui-timeline",r)},t.map(n=>Oe({className:"g-ui-timeline-item"},Oe({className:"g-ui-timeline-dot"}),Oe({className:"g-ui-timeline-content"},ur(n.title,()=>Oe({className:"g-ui-timeline-title"},n.title)),ur(n.description,()=>Oe({className:"g-ui-timeline-desc"},n.description)),n.content))))}import{Div as Ni}from"@granularjs/core";function Fn(...e){let{props:i}=s(e,{active:0,items:[]}),{active:t,items:r,className:a,...n}=i;return Ni({...n,className:o("g-ui-stepper",a)},r.map((u,g)=>Ni({className:o("g-ui-stepper-item",[t,p=>g===p?"g-ui-stepper-active":""])},Ni({className:"g-ui-stepper-index"},String(g+1)),Ni({className:"g-ui-stepper-label"},u.label))))}import{Span as gr,after as lr,state as jn}from"@granularjs/core";function En(...e){let{props:i,rawProps:t}=s(e,{value:0,max:5,size:"md"}),{value:r,max:a,size:n,className:u,...g}=i,{onChange:p}=t,h=jn(l(r));lr(r).change(d=>{let y=l(d);y!=null&&h.set(y)});let m=d=>{h.set(d),p?.(d)},b=[],x=Number(l(a))||0;for(let d=1;d<=x;d+=1)b.push(d);return gr({...g,className:o("g-ui-rating",k("g-ui-rating-size-",n,"md"),i.className??u)},b.map(d=>gr({className:o("g-ui-rating-item",lr(h).compute(y=>d<=y?"g-ui-rating-item-active":"")),onClick:()=>m(d)},"\u2605")))}import{Span as Rn}from"@granularjs/core";function Hn(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Rn({...a,className:o("g-ui-tag",r)},t)}import{Button as cr,Div as qe,state as pr,after as Ci}from"@granularjs/core";var On=["S","M","T","W","T","F","S"];function ii(...e){let{props:i,rawProps:t}=s(e,{size:"md"}),{value:r,className:a,size:n,...u}=i,{onChange:g}=t,p=S=>{let F=l(S);if(F instanceof Date)return F;if(F==null)return null;let z=new Date(F);return Number.isNaN(z.getTime())?null:z},h=pr(p(r)??new Date),m=pr(new Date(h.get()));Ci(r).change(S=>{let F=p(S);F!=null&&(h.set(F),m.set(new Date(F)))});let b=(S,F,z)=>{let w=new Date(S,F+1,0).getDate();return new Date(S,F,Math.min(z,w))},x=S=>{let F=m.get(),z=b(F.getFullYear(),F.getMonth(),S);h.set(z),m.set(z),g?.(z)},d=S=>{let F=m.get(),z=b(F.getFullYear(),F.getMonth()+S,F.getDate());m.set(z)},y=S=>{let F=m.get(),z=b(F.getFullYear()+S,F.getMonth(),F.getDate());m.set(z)},P=Ci(m).compute(S=>S.toLocaleString("default",{month:"long"})),A=Ci(m).compute(S=>String(S.getFullYear())),$=Ci(m,h).compute(([S,F])=>{let z=S.getFullYear(),w=S.getMonth(),f=new Date(z,w,1).getDay(),C=new Date(z,w+1,0).getDate(),V=[];for(let I=0;I<f;I+=1)V.push({muted:!0,label:""});for(let I=1;I<=C;I+=1)V.push({label:I});return[...On.map(I=>qe({className:"g-ui-calendar-cell g-ui-calendar-cell-muted"},I)),...V.map(I=>qe({className:o("g-ui-calendar-cell",I.muted&&"g-ui-calendar-cell-muted",I.label&&F.getFullYear()===z&&F.getMonth()===w&&I.label===F.getDate()&&"g-ui-calendar-cell-active"),onClick:()=>I.label&&x(I.label)},I.label))]});return qe({...u,className:o("g-ui-calendar",a,k("g-ui-calendar-size-",n,"md"))},qe({className:"g-ui-calendar-header"},Ae({size:"xs",variant:"subtle",className:"g-ui-calendar-nav",onClick:()=>d(-1)},ye({size:"sm",className:"g-ui-calendar-nav-icon",innerHTML:mi})),qe({className:"g-ui-calendar-title-group"},cr({type:"button",className:"g-ui-calendar-title-button",onClick:()=>d(1)},P),cr({type:"button",className:"g-ui-calendar-title-button",onClick:()=>y(1)},A)),Ae({size:"xs",variant:"subtle",className:"g-ui-calendar-nav",onClick:()=>d(1)},ye({size:"sm",className:"g-ui-calendar-nav-icon",innerHTML:di}))),qe({className:"g-ui-calendar-grid"},$))}import{Div as ti,Span as Ye,Input as qn,when as pt,after as ke,state as Si}from"@granularjs/core";function Yn(...e){let{props:i,rawProps:t}=s(e,{data:[],size:"md",searchable:!0}),{value:r,data:a,size:n,className:u,placeholder:g,searchable:p,...h}=i,{onChange:m,onSearchChange:b}=t,x=Si(l(r)??[]),d=Si(""),y=Si(!1),P=Si(null),A=f=>(l(f)??[]).map(V=>typeof V=="string"?{value:V,label:V}:V&&typeof V=="object"?V:{value:String(V),label:String(V)});ke(r).change(f=>{let C=l(f);C!=null&&x.set(C)});let $=null;ke(y).change(f=>{if($&&($(),$=null),!f)return;let C=V=>{let I=P.get();I&&(I.contains(V.target)||y.set(!1))};document.addEventListener("mousedown",C),$=()=>document.removeEventListener("mousedown",C)}),ke(d).change(f=>{b?.(f)});let S=f=>{let C=x.get()??[],V=C.includes(f)?C.filter(I=>I!==f):C.concat(f);x.set(V),m?.(V)},F=ke(a).compute(f=>A(f)),z=ke(F,d).compute(([f,C])=>{let V=String(l(C)??"").toLowerCase().trim();return V?f.filter(I=>String(I.label??"").toLowerCase().includes(V)):f}),w=ke(x,d).compute(([f,C])=>{let V=l(f)??[],I=String(l(C)??"");return!V.length&&!I}),v=ke(p).compute(f=>!!f);return ti({...h,node:P,className:o("g-ui-select-multi-root",u)},ti({className:o("g-ui-select-multi",k("g-ui-select-multi-size-",n,"md")),onClick:()=>y.set(!0)},ke(F,x).compute(([f,C])=>(l(C)??[]).map(I=>{let re=(f??[]).find(K=>K.value===I)?.label??I;return Ye({className:"g-ui-select-tag"},Ye({className:"g-ui-select-tag-label",onClick:K=>{K?.stopPropagation?.()}},re),Ye({className:"g-ui-select-tag-remove",innerHTML:Ee,onClick:K=>{K?.stopPropagation?.(),S(I)}}))})),pt(w,()=>Ye({className:"g-ui-select-multi-placeholder"},g??"Select...")),pt(v,()=>qn({className:"g-ui-select-multi-input",value:d,onInput:f=>d.set(f.target?.value??""),onFocus:()=>y.set(!0)}))),pt(y,()=>ti({className:"g-ui-select-dropdown"},ke(z).compute(f=>f.length?f.map(C=>ti({className:o("g-ui-select-item",C.disabled&&"g-ui-select-item-disabled",ke(x).compute(V=>(l(V)??[]).includes(C.value)?"g-ui-select-item-active":"")),onClick:()=>{C.disabled||S(C.value)}},Ye({className:"g-ui-select-item-check",innerHTML:ke(x).compute(V=>(l(V)??[]).includes(C.value)?fi:"")}),Ye({className:"g-ui-select-item-label"},C.label))):ti({className:"g-ui-select-item"},"Nothing found")))))}import{Div as ri,when as dr}from"@granularjs/core";function Wn(...e){let{props:i}=s(e,{items:[]}),{items:t,className:r,onClose:a,timeout:n,...u}=i;return ri({...u,className:o("g-ui-toast-stack",r)},t.map(g=>ri({className:o("g-ui-toast",[n,"g-ui-toast-auto"])},ri({className:"g-ui-toast-row"},dr(g.title,()=>ri({className:"g-ui-toast-title"},g.title)),dr(a,()=>ri({className:"g-ui-toast-close",onClick:()=>a(g)},"\xD7"))),g.message)))}function Gn(...e){let{props:i}=s(e);return ii(i)}import{Div as Zn,after as Un}from"@granularjs/core";function Xn(...e){let{props:i,rawProps:t}=s(e,{items:[],position:"top-right"}),{items:r,position:a,className:n,...u}=i,{onRemove:g}=t,p=new Map,h=(b,x)=>b?.id??b?.key??x,m=Un(r).compute(b=>{let x=l(b)??[],d=new Set;x.forEach((y,P)=>{let A=h(y,P);if(d.add(A),y?.autoClose&&!p.has(A)){let $=setTimeout(()=>{p.delete(A),g?.(y)},y.autoClose);p.set(A,$)}});for(let[y,P]of p.entries())d.has(y)||(clearTimeout(P),p.delete(y));return x.map((y,P)=>et({key:h(y,P),title:y.title,color:y.color,icon:y.icon,loading:y.loading,withCloseButton:y.withCloseButton,withBorder:y.withBorder,onClose:()=>{y.onClose?.(),g?.(y)}},y.message??y.body??y.content??y.text))});return Zn({...u,className:o("g-ui-notifications",k("g-ui-notifications-position-",a,"top-right"),n)},m)}import{Div as We,after as ai,state as _n,when as Kn}from"@granularjs/core";function Qn(...e){let{props:i,rawProps:t}=s(e,{min:0,max:100,step:1,size:"md"}),{value:r,marks:a,min:n,max:u,step:g,size:p,disabled:h,className:m,...b}=i,{onChange:x}=t,d=_n(l(r??[n,u])),y=()=>{let w=Number(l(n)),v=Number(l(u));return!Number.isFinite(w)||!Number.isFinite(v)?{minValue:0,maxValue:100}:{minValue:Math.min(w,v),maxValue:Math.max(w,v)}},P=()=>{let w=Number(l(g));return Number.isFinite(w)&&w>0?w:1},A=w=>{let{minValue:v,maxValue:f}=y(),C=P(),V=[v,f];Array.isArray(w)&&(V=w);let I=Math.max(v,Math.min(f,Number(V[0]))),X=Math.max(v,Math.min(f,Number(V[1]))),re=Math.round(Math.min(I,X)/C)*C,K=Math.round(Math.max(I,X)/C)*C;return[re,K]};ai(r).change(w=>{w!=null&&d.set(A(w))});let $=w=>{let v=A(w);v?.[0]===d.get()?.[0]&&v?.[1]===d.get()?.[1]||(d.set(v),x?.(v))},S=ai(d).compute(w=>{let{minValue:v,maxValue:f}=y(),C=f-v,[V,I]=A(w);if(C<=0)return{lowPct:0,highPct:0};let X=(V-v)/C*100,re=(I-v)/C*100;return{lowPct:Math.max(0,Math.min(100,X)),highPct:Math.max(0,Math.min(100,re))}}),F=(w,v,f)=>{let C=v?.();if(!C||C.width===0)return;let I=Math.min(Math.max(w.clientX-C.left,0),C.width)/C.width,{minValue:X,maxValue:re}=y(),K=X+I*(re-X),ue=d;typeof d.get=="function"&&(ue=d.get());let[te,oe]=A(ue);$(f==="low"?[K,oe]:[te,K])},z=(w,v,f)=>{if(ve(h))return;w.preventDefault?.();let C=f||w.currentTarget,V=()=>C.getBoundingClientRect(),I=V(),X=S;typeof S.get=="function"&&(X=S.get());let{lowPct:re,highPct:K}=X,ue=(w.clientX-I.left)/I.width*100,te=v;if(!te){let ie=Math.abs(ue-re)<=Math.abs(ue-K);te="high",ie&&(te="low")}C.setPointerCapture?.(w.pointerId),F(w,V,te);let oe=ie=>F(ie,V,te),de=()=>{C.releasePointerCapture?.(w.pointerId),window.removeEventListener("pointermove",oe),window.removeEventListener("pointerup",de)};window.addEventListener("pointermove",oe),window.addEventListener("pointerup",de)};return We({...b,className:o("g-ui-range-slider",k("g-ui-slider-size-",p,"md"),W("g-ui-slider-disabled",h),i.className??m)},We({className:"g-ui-slider-track",onPointerDown:w=>z(w)},We({className:"g-ui-slider-bar",style:ai(S).compute(({lowPct:w,highPct:v})=>({left:`${w}%`,width:`${Math.max(0,v-w)}%`}))}),We({className:"g-ui-slider-thumb",style:ai(S).compute(({lowPct:w})=>({left:`${w}%`})),onPointerDown:w=>{w.stopPropagation?.(),z(w,"low",w.currentTarget.parentElement)}}),We({className:"g-ui-slider-thumb",style:ai(S).compute(({highPct:w})=>({left:`${w}%`})),onPointerDown:w=>{w.stopPropagation?.(),z(w,"high",w.currentTarget.parentElement)}})),Kn(a,()=>We({className:"g-ui-slider-marks"},a.map(w=>nt({mark:w,getBounds:y})))))}import{state as dt,after as mr}from"@granularjs/core";function Jn(...e){let{props:i,rawProps:t}=s(e,{size:"md",format:{pattern:"dddd-dd-dd"}}),{value:r,size:a,calendarSize:n,leftSection:u,rightSection:g,className:p,format:h,minDate:m,maxDate:b,...x}=i,{onChange:d}=t,y=v=>{let f=l(v);if(f instanceof Date)return f;if(f==null||f==="")return null;let C=new Date(f);return Number.isNaN(C.getTime())?null:C},P=(v,f)=>v&&f&&v.getFullYear()===f.getFullYear()&&v.getMonth()===f.getMonth()&&v.getDate()===f.getDate(),A=v=>{if(!v)return"";let f=String(v.getFullYear()).padStart(4,"0"),C=String(v.getMonth()+1).padStart(2,"0"),V=String(v.getDate()).padStart(2,"0");return`${f}-${C}-${V}`},$=v=>{let f=String(v??"").replace(/\D/g,"");if(f.length<8)return null;let C=Number(f.slice(0,4)),V=Number(f.slice(4,6)),I=Number(f.slice(6,8));if(!C||!V||!I)return null;let X=new Date(C,V-1,I);if(X.getFullYear()!==C||X.getMonth()!==V-1||X.getDate()!==I)return null;let re=y(m);if(re&&X<re)return null;let K=y(b);return K&&X>K?null:X},S=dt(y(r)),F=dt(A(S.get())),z=dt(!1);mr(r).change(v=>{if(r.get()==v)return;let f=y(v);if(f==null){S.set(null),F.set("");return}S.set(f),F.set(A(f))}),mr(F).change(v=>{let f=$(v);console.log("parsed",f),console.log("currentDate",S.get()),f&&(P(f,S.get())||(S.set(f),d?.(f)))});let w=v=>{v&&(P(v,S.get())||(S.set(v),F.set(A(v)),d?.(v),z.set(!1)))};return lt({opened:z,onChange:v=>z.set(!!v),content:ii({size:k("",n,"xs"),value:S,onChange:w}),className:"g-ui-date-input-popover"},ge({...x,size:a,className:o("g-ui-dateinput",p),leftSection:u,rightSection:g,type:"text",inputMode:"numeric",format:h,value:F,onChange:v=>F.set(v)}))}import{Div as mt,when as es,after as is,state as ts}from"@granularjs/core";function rs(...e){let{props:i,rawProps:t,children:r}=s(e),{opened:a,content:n,className:u,...g}=i,{onChange:p}=t,h=ts(l(a)??!1);is(a).change(b=>{let x=l(b);x!=null&&h.set(!!x)});let m=b=>{h.set(b),p?.(b)};return mt({...g,className:o("g-ui-popper",u)},mt({onClick:()=>m(!h.get())},r),es(h,()=>mt({className:"g-ui-popper-dropdown"},n)))}import{Button as as,after as fr,when as os,state as ns}from"@granularjs/core";function ss(...e){let{props:i,rawProps:t}=s(e,{size:"md"}),{size:r,className:a,rightSection:n,...u}=i,{onChange:g}=t,p=ns(!1),h=fr(p).compute(b=>b?"text":"password"),m=fr(n).compute(b=>b??as({className:"g-ui-password-toggle",onClick:()=>p.set(!p.get())},os(p,()=>"Hide",()=>"Show")));return ge({...u,size:r,className:a,onChange:g,rightSection:m,type:h})}import{Div as us}from"@granularjs/core";function gs(...e){let{props:i}=s(e,{size:"md"}),{size:t,className:r,...a}=i;return ge({...a,size:t,className:r,leftSection:us({className:"g-ui-search-input-left-section",innerHTML:At}),type:"text",inputMode:"search"})}import{Button as ls,after as cs,when as hr}from"@granularjs/core";import{state as ps}from"@granularjs/core";function ds(...e){let{props:i,children:t}=s(e,{value:"",timeout:1500}),{value:r,timeout:a,className:n,...u}=i,g=ps(!1),p=cs(g).compute(m=>o("g-ui-copy-button",m&&"g-ui-copy-button-done",n));return ls({...u,className:p,onClick:async()=>{try{await navigator.clipboard.writeText(String(r)),g.set(!0),setTimeout(()=>g.set(!1),a)}catch{}},type:"button"},hr(t?.length,()=>t,()=>hr(g,()=>"Copied",()=>"Copy")))}import{Div as ms}from"@granularjs/core";function fs(...e){let{props:i}=s(e,{size:"md"}),{size:t,className:r,...a}=i;return ms({...a,className:o("g-ui-progress-ring",[t,n=>`g-ui-progress-ring-size-${n}`],r)})}import{Div as ft,Button as hs,when as xr}from"@granularjs/core";function xs(...e){let{props:i,children:t}=s(e),{title:r,onClose:a,className:n,...u}=i;return ft({...u,className:o("g-ui-toast",n)},ft({className:"g-ui-toast-row"},xr(r,()=>ft({className:"g-ui-toast-title"},r)),xr(a,()=>hs({className:"g-ui-toast-close",onClick:a},"\xD7"))),t)}import{Div as ht}from"@granularjs/core";import{state as vs}from"@granularjs/core";function bs(...e){let{props:i,rawProps:t}=s(e,{data:[]}),{data:r,className:a,...n}=i,{onChange:u}=t,g=vs(""),p=r.filter(h=>String(h.label||"").toLowerCase().includes(String(g.get()).toLowerCase()));return ht({...n,className:o("g-ui-select-search",a)},ge({inputClassName:"g-ui-select-search-input",placeholder:"Search...",value:g,onInput:h=>g.set(h?.target?.value??"")}),ht({className:"g-ui-select-search-list"},p.map(h=>ht({className:"g-ui-select-search-item",onClick:()=>u?.(h.value)},h.label))))}import{Div as ws}from"@granularjs/core";function ys(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return ws({...a,className:o("g-ui-switch-group",r)},t)}import{Div as ks,state as zs,after as xt}from"@granularjs/core";function Ns(...e){let{props:i,rawProps:t}=s(e,{size:"md"}),{value:r,size:a,className:n,...u}=i,{onChange:g}=t,p=zs(l(r)??["",""]);xt(r).change(m=>{let b=l(m);b!=null&&p.set(b)});let h=m=>{p.set(m),g?.(m)};return ks({...u,className:o("g-ui-range-picker",i.className??n)},ge({size:a,type:"text",inputMode:"numeric",value:xt(p).compute(m=>m?.[0]??""),onInput:m=>{let b=p.get()??["",""];h([m.target.value,b[1]])}}),ge({size:a,type:"text",inputMode:"numeric",value:xt(p).compute(m=>m?.[1]??""),onInput:m=>{let b=p.get()??["",""];h([b[0],m.target.value])}}))}import{Div as Cs}from"@granularjs/core";function Ss(...e){let{props:i,children:t}=s(e,{align:"center",direction:"row"}),{direction:r,wrap:a,align:n,justify:u,gap:g,className:p,...h}=i;return Cs({...h,className:o("g-ui-flex",[r,m=>m==="column"?"g-ui-flex-column":"g-ui-flex-row"],[a,"g-ui-flex-wrap"],[n,m=>m&&`g-ui-align-${m}`],[u,m=>m&&`g-ui-justify-${m}`],[g,m=>m&&`g-ui-gap-${m}`],p)},t)}import{A as Ds,Div as oi,Span as vr,when as ni,after as br,state as Ps}from"@granularjs/core";function Ms(...e){let{props:i,rawProps:t,children:r}=s(e,{variant:"subtle",childrenOffset:24}),{label:a,description:n,leftSection:u,rightSection:g,active:p,disabled:h,variant:m,childrenOffset:b,opened:x,defaultOpened:d,className:y,padding:P,...A}=i,{onClick:$,onChange:S}=t,F=r.length>0,z=Ps(l(x)??l(d)??!1);br(x).change(f=>{let C=l(f);C!=null&&z.set(!!C)});let w=br(b).compute(f=>({paddingLeft:Tt(l(f??24))??"24px"})),v=f=>{if(l(h)){f?.preventDefault?.();return}if(F){let C=!z.get();z.set(C),S?.(C)}$?.(f)};return oi({className:o("g-ui-navlink-root",y)},Ds({...A,className:o("g-ui-navlink",k("g-ui-navlink-variant-",m,"subtle"),W("g-ui-navlink-active",p),W("g-ui-navlink-disabled",h),k("g-ui-navlink-padding-",P,"md")),onClick:v},ni(u,()=>vr({className:"g-ui-navlink-section g-ui-navlink-left"},u)),oi({className:"g-ui-navlink-body"},ni(a,()=>oi({className:"g-ui-navlink-label"},a)),ni(n,()=>oi({className:"g-ui-navlink-description"},n))),ni(g,()=>vr({className:"g-ui-navlink-section g-ui-navlink-right"},g))),F?ni(z,()=>oi({className:"g-ui-navlink-children",style:w},r)):null)}import{Div as wr,when as Ts}from"@granularjs/core";function Vs(...e){let{props:i,children:t}=s(e,{show:!0,position:"top-right",color:"danger",size:"md"}),{show:r,position:a,color:n,size:u,className:g,...p}=i;return wr({...p,className:o("g-ui-indicator",k("g-ui-indicator-position-",a,"top-right"),k("g-ui-indicator-color-",n,"danger"),k("g-ui-indicator-size-",u,"md"),g)},t,Ts(r,()=>wr({className:"g-ui-indicator-badge"})))}import{Span as Di}from"@granularjs/core";function Ls(...e){let{props:i}=s(e),{opened:t,className:r,...a}=i;return Di({...a,className:o("g-ui-burger",[t,"g-ui-burger-open"],r)},Di(""),Di(""),Di(""))}import{Div as $s,when as Is}from"@granularjs/core";function Bs(...e){let{props:i}=s(e),{visible:t,...r}=i;return Is(t,()=>$s({...r,className:"g-ui-loading-overlay"},Ke({})))}import{Div as As}from"@granularjs/core";function Fs(...e){let{props:i,children:t}=s(e,{gap:"md"}),{className:r,gap:a,...n}=i;return As({...n,className:o("g-ui-grid-system",[a,u=>`g-ui-gap-${u}`],r)},t)}import{Div as js}from"@granularjs/core";function Es(...e){let{props:i,children:t}=s(e,{span:12}),{span:r,className:a,...n}=i;return js({...n,className:o([r,u=>`g-ui-col-span-${u}`],a)},t)}import{Div as Rs}from"@granularjs/core";function Hs(...e){let{props:i,children:t}=s(e,{size:"md"}),{size:r,className:a,...n}=i;return Rs({...n,className:o("g-ui-scroll-area",[r,u=>`g-ui-scroll-area-${u}`],a)},t)}import{Div as yr,Input as Os,after as Me,state as vt,when as kr,list as qs}from"@granularjs/core";function Ys(...e){let{props:i,rawProps:t}=s(e,{length:4,size:"md",type:"alphanumeric",mask:!1,placeholder:"\u25CB",disabled:!1,error:!1,oneTimeCode:!1}),{length:r,value:a,size:n,type:u,mask:g,placeholder:p,disabled:h,error:m,oneTimeCode:b,className:x}=i,{onChange:d,onComplete:y}=t,P=vt(l(r)??4),A=()=>P.get();Me(r).change(T=>{let R=l(T)??4,N=P.get();if(R===N)return;P.set(R);let G=S.get(),H=$.get();S.set(Array.from({length:R},(ne,se)=>G[se]??"")),$.set(Array.from({length:R},(ne,se)=>H[se]??null))});let $=vt(Array.from({length:A()},()=>null)),S=vt(Array.from({length:A()},(T,R)=>{let N=l(a);return typeof N=="string"||Array.isArray(N)?N[R]??"":""}));Me(a).change(T=>{if(T==null)return;let R=A();typeof T=="string"?S.set(Array.from({length:R},(N,G)=>T[G]??"")):Array.isArray(T)&&S.set(Array.from({length:R},(N,G)=>T[G]??""))});let F=()=>S.get().join(""),z=T=>{S.set(T);let R=T.join("");d?.(R),T.every(N=>N!=="")&&T.length===A()&&y?.(R)},w=T=>{let R=A(),N=$.get();T>=0&&T<R&&N[T]&&(N[T].focus(),N[T].select())},v=()=>{let T=l(u);return T==="number"?/^[0-9]$/:T instanceof RegExp?T:/^[a-zA-Z0-9]$/},f=(T,R)=>{let N=R.target.value,G=v();if(N.length>1){C(T,N);return}if(N&&!G.test(N)){R.target.value=S.get()[T]??"";return}let H=S.get().slice();H[T]=N,z(H),N&&T<A()-1&&w(T+1)},C=(T,R)=>{let N=v(),G=R.split("").filter(xe=>N.test(xe)),H=S.get().slice(),ne=A();G.forEach((xe,ze)=>{let Se=T+ze;Se<ne&&(H[Se]=xe)}),z(H);let se=H.findIndex((xe,ze)=>ze>=T&&xe==="");se>=0?w(se):w(Math.min(T+G.length,ne-1))},V=(T,R)=>{if(R.key==="Backspace"){let N=S.get().slice();N[T]===""&&T>0?(R.preventDefault(),N[T-1]="",z(N),w(T-1)):N[T]!==""&&(N[T]="",z(N))}else R.key==="ArrowLeft"&&T>0?(R.preventDefault(),w(T-1)):R.key==="ArrowRight"&&T<A()-1&&(R.preventDefault(),w(T+1))},I=(T,R)=>{R.target.select()},X=()=>{let T=S.get(),R=T.findIndex(N=>N==="");R>=0?w(R):w(T.length-1)},re=Me(g).compute(T=>l(T)?"password":"text"),K=Me(u).compute(T=>l(T)==="number"?"numeric":"text"),ue=Me(b).compute(T=>l(T)?"one-time-code":"off"),te=Me(h).compute(T=>!!l(T)),oe=Me(m).compute(T=>!!l(T)),de=Me(P).compute(T=>Array.from({length:T},(R,N)=>N)),ie=T=>Os({className:o("g-ui-pin-input-field",kr(oe,()=>"g-ui-pin-input-error")),type:re,inputMode:K,autocomplete:ue,maxLength:2,placeholder:kr(te,()=>"",()=>p),disabled:te,value:Me(S,T).compute(([R,N])=>R[N]??""),node:$[T.get()],onInput:R=>f(T.get(),R),onChange:R=>f(T.get(),R),onKeyDown:R=>V(T.get(),R),onFocus:R=>I(T.get(),R)});return yr({className:o("g-ui-pin-input",k("g-ui-input-size-",n,"md"),x),onClick:X},yr({className:"g-ui-pin-input-wrapper"},qs(de,ie)))}import{Div as Ws}from"@granularjs/core";function Gs(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Ws({...a,className:o("g-ui-checkbox-group",r)},t)}import{Div as Zs}from"@granularjs/core";function Us(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Zs({...a,className:o("g-ui-avatar-group",r)},t)}import{Div as Xs}from"@granularjs/core";function _s(...e){let{props:i,children:t}=s(e),{className:r,...a}=i;return Xs({...a,className:o("g-ui-badge-group",r)},t)}import{Div as Pi,Span as Ks,after as si,context as zr}from"@granularjs/core";var Qs=zr([]),Nr=zr({sort:null,onSort:null});function bt(...e){let{props:i,rawProps:t,children:r}=s(e,{sizes:[],sort:null,stickyHeader:!1}),{className:a,sizes:n,sort:u,stickyHeader:g,...p}=i,{onSort:h}=t,m=Qs.scope(n.get());si(n).change(x=>m.set(x));let b=Nr.scope({sort:u.get(),onSort:h||null});return si(u).change(x=>b.set().sort=x),m.serve(b.serve(Pi({className:o("g-ui-grid-table",W("g-ui-grid-table-sticky",g),a),style:{gridTemplateColumns:si(m).compute(x=>Array.isArray(x)?x.join(" "):"")},...p},r)))}bt.GridRow=(...e)=>{let{props:i,children:t}=s(e,{}),{className:r,header:a,...n}=i;return Pi({className:o("g-ui-grid-table-row",W("g-ui-grid-table-row-header",a),r),...n},...t)};bt.GridCell=function(...e){let{props:i,rawProps:t,children:r}=s(e,{}),{className:a,sort:n,...u}=i,g=t.sort;if(g){let p=Nr.state(),h=si(p.sort).compute(b=>b?.key===g?b.direction:null),m=()=>{let b=p.get().sort,x;b?.key===g?x=b.direction==="asc"?{key:g,direction:"desc"}:null:x={key:g,direction:"asc"},p.set().sort=x;let{onSort:d}=p.get();d&&d(x)};return Pi({className:o("g-ui-grid-table-cell","g-ui-grid-table-cell-sortable",a),onClick:m,...u},r,Ks({className:"g-ui-grid-table-sort-icon"},si(h).compute(b=>b==="asc"?" \u2191":b==="desc"?" \u2193":"")))}return Pi({className:o("g-ui-grid-table-cell",a),...u},r)};import{Button as Js,Div as eu,Span as Cr,when as Sr}from"@granularjs/core";function Dr(...e){let{props:i,children:t}=s(e,{grow:!0}),{grow:r,className:a,...n}=i;return eu({...n,className:o("g-ui-bottombar",W("g-ui-bottombar-grow",r),a)},t)}Dr.Action=function(...i){let{props:t,rawProps:r,children:a}=s(i,{variant:"subtle"}),{icon:n,label:u,active:g,disabled:p,variant:h,className:m,...b}=t,{onClick:x}=r;return Js({...b,className:o("g-ui-bottombar-action",k("g-ui-bottombar-action-variant-",h,"subtle"),W("g-ui-bottombar-action-active",g),W("g-ui-bottombar-action-disabled",p),m),onClick:x,disabled:p},Sr(n,()=>Cr({className:"g-ui-bottombar-action-icon"},n)),Sr(u,()=>Cr({className:"g-ui-bottombar-action-label"},u)),a)};import{Div as j,Button as Fe,state as le,after as be,when as ce,Input as Mi,Label as ui,Span as je}from"@granularjs/core";var iu=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],tu=[{value:"day",label:"Day"},{value:"week",label:"Week"},{value:"month",label:"Month"}];function Ti(e){if(e instanceof Date)return e;if(e==null)return null;let i=new Date(e);return Number.isNaN(i.getTime())?null:i}function Tr(e){let i=Ti(e.start),t=Ti(e.end);return!i||!t?null:{...e,id:e.id??`${i.getTime()}-${e.title??"event"}`,title:e.title??"",start:i,end:t,allDay:!!e.allDay,description:e.description??"",location:e.location??"",attendees:Array.isArray(e.attendees)?e.attendees:[],color:e.color??null}}function Vr(e,i,t){let r=Ti(i).getTime(),a=Ti(t).getTime();return e.map(Tr).filter(Boolean).filter(n=>n.end.getTime()>r&&n.start.getTime()<a)}function Pr(e,i){let t=new Date(i);t.setHours(0,0,0,0);let r=t.getTime();t.setHours(23,59,59,999);let a=t.getTime();return Vr(e,r,a)}function wt(e,i){let t=new Date(e),a=(t.getDay()-i+7)%7;return t.setDate(t.getDate()-a),t.setHours(0,0,0,0),t}function Ge(e,i="default"){return e.toLocaleTimeString(i,{hour:"numeric",minute:"2-digit",hour12:!0})}function gi(e,i="default"){return e.toLocaleDateString(i,{weekday:"short",month:"short",day:"numeric"})}function ru(e,i="default"){return e.toLocaleDateString(i,{month:"long",year:"numeric"})}function au(e,i="default"){let t=new Date(e);return t.setDate(t.getDate()+6),`${e.toLocaleDateString(i,{month:"short",day:"numeric"})} \u2013 ${t.toLocaleDateString(i,{month:"short",day:"numeric",year:"numeric"})}`}function Mr(e,i,t,r){let a=new Date(e).setHours(t,0,0,0),n=new Date(e).setHours(r,0,0,0),u=(r-t)*60,g=Math.max(e.getTime(),a),h=(Math.min(i.getTime(),n)-g)/6e4,m=(g-a)/6e4/u*100,b=h/u*100;return{top:m,height:b}}function ou(...e){let{props:i,rawProps:t}=s(e,{defaultView:"month",firstDayOfWeek:0,locale:"default",hourSlotDuration:30,minTime:6,maxTime:22,eventCreationColorOptions:[]}),{events:r=[],defaultView:a,firstDayOfWeek:n,locale:u,hourSlotDuration:g,minTime:p,maxTime:h,eventCreationColorOptions:m,className:b,...x}=i,{onCreateEventRequest:d,onViewEventRequest:y,onUpdateEventRequest:P,onRemoveEventRequest:A,eventCreationEmailLookup:$,eventCreationLocationsCallback:S,eventCreationCalendarsCallback:F,onSlotClick:z,onDateRangeChange:w}=t,v=le(l(a)??"month"),f=le(new Date),C=le(null),V=le(null),I=le({title:"",start:null,end:null,allDay:!1,description:"",location:"",attendees:[],color:null}),X=be(r).compute(c=>Array.isArray(c)?c:[]),re=f.get(),K=wt(re,l(n)??0),ue=l(p)??6,te=l(h)??22,oe=l(g)??30,de=()=>{let c=new Date(f.get());v.get()==="month"?c.setMonth(c.getMonth()-1):v.get()==="week"?c.setDate(c.getDate()-7):c.setDate(c.getDate()-1),f.set(c),w?.({start:c,end:c,view:v.get()})},ie=()=>{let c=new Date(f.get());v.get()==="month"?c.setMonth(c.getMonth()+1):v.get()==="week"?c.setDate(c.getDate()+7):c.setDate(c.getDate()+1),f.set(c),w?.({start:c,end:c,view:v.get()})},T=()=>{let c=new Date;f.set(c),w?.({start:c,end:c,view:v.get()})},R=(c,B,ae=!1)=>{let q=c?new Date(c):new Date(f.get()),J=B?new Date(B):new Date(q.getTime()+3600*1e3);ae&&(q.setHours(0,0,0,0),J.setHours(23,59,59,999)),I.set({title:"",start:q,end:J,allDay:ae,description:"",location:"",attendees:[],color:null}),C.set("create")},N=c=>{V.set(Tr(c)),C.set("view"),y?.(c)},G=()=>{let c=V.get();c&&(I.set({title:c.title,start:new Date(c.start),end:new Date(c.end),allDay:c.allDay,description:c.description??"",location:c.location??"",attendees:[...c.attendees||[]],color:c.color??null}),C.set("edit"))},H=()=>{C.set(null),V.set(null)},ne=(c,B,ae)=>{if(z){z({date:c,hour:B,allDay:ae});return}let q=new Date(c);if(ae){q.setHours(0,0,0,0);let J=new Date(q);J.setHours(23,59,59,999),R(q,J,!0)}else{q.setHours(B,0,0,0);let J=new Date(q.getTime()+oe*60*1e3);R(q,J,!1)}},se=()=>{let c=I.get();!c.start||!c.end||d?.({title:c.title,start:c.start,end:c.end,allDay:c.allDay,description:c.description,location:c.location,attendees:c.attendees,color:c.color},()=>{H()})},xe=()=>{let c=V.get(),B=I.get();!c||!B.start||!B.end||P?.(c,{title:B.title,start:B.start,end:B.end,allDay:B.allDay,description:B.description,location:B.location,attendees:B.attendees,color:B.color},()=>H())},ze=()=>{let c=V.get();c&&A?.(c,()=>H())},Se=be(v,f).compute(([c,B])=>c==="month"?ru(B,l(u)):c==="week"?au(wt(B,l(n)??0),l(u)):gi(B,l(u))),Ve=j({className:"g-ui-event-calendar-header"},j({className:"g-ui-event-calendar-nav-group"},Ae({size:"sm",variant:"subtle",onClick:de,className:"g-ui-event-calendar-nav"},ye({size:"sm",innerHTML:mi})),Ae({size:"sm",variant:"subtle",onClick:ie,className:"g-ui-event-calendar-nav"},ye({size:"sm",innerHTML:di})),Fe({type:"button",variant:"subtle",size:"sm",className:"g-ui-event-calendar-today",onClick:T},ye({size:"sm",className:"g-ui-event-calendar-today-icon",innerHTML:Rt}),"Today")),j({className:"g-ui-event-calendar-title"},Se),j({className:"g-ui-event-calendar-actions"},tu.map(c=>j({className:o("g-ui-event-calendar-view-option",be(v).compute(B=>B===c.value?"g-ui-event-calendar-view-option-active":"")),onClick:()=>{v.set(c.value),w?.({start:f.get(),end:f.get(),view:c.value})}},c.label)),Fe({type:"button",variant:"filled",size:"sm",className:"g-ui-event-calendar-create-btn",onClick:()=>R(f.get(),null,!1)},ye({size:"sm",innerHTML:Ft}),"Create"))),li=be(f,X,n).compute(([c,B,ae])=>{let q=c.getFullYear(),J=c.getMonth(),Q=(new Date(q,J,1).getDay()-(ae??0)+7)%7,Ce=new Date(q,J+1,0).getDate(),De=new Date(q,J,0).getDate(),M=[],D=1,E=1,O=Math.ceil((Q+Ce)/7)*7,_=[];for(let Z=0;Z<O;Z+=1){let Y,U,ee;Z<Q?(Y=De-Q+Z+1,ee=new Date(q,J-1,Y),U=!1):D<=Ce?(Y=D,ee=new Date(q,J,Y),U=!0,D+=1):(Y=E,ee=new Date(q,J+1,Y),U=!1,E+=1);let fe=Pr(B,ee),Te=ee.getDate()===new Date().getDate()&&ee.getMonth()===new Date().getMonth()&&ee.getFullYear()===new Date().getFullYear();_.push(j({key:ee.getTime(),className:o("g-ui-event-calendar-month-cell",!U&&"g-ui-event-calendar-month-cell-outside",Te&&"g-ui-event-calendar-month-cell-today")},j({className:"g-ui-event-calendar-month-cell-header",onClick:()=>ne(ee,0,!0)},je({className:"g-ui-event-calendar-month-cell-day"},ee.getDate())),j({className:"g-ui-event-calendar-month-cell-events"},fe.slice(0,3).map(we=>j({key:we.id,className:"g-ui-event-calendar-month-event",style:we.color?{borderLeftColor:we.color,backgroundColor:`${we.color}20`}:{},onClick:Bi=>{Bi.stopPropagation(),N(we)}},we.title||"(No title)")),ce(fe.length>3,()=>j({className:"g-ui-event-calendar-month-more",onClick:we=>{we.stopPropagation(),N(fe[3])}},`+${fe.length-3} more`)))))}return _}),Vi=j({className:"g-ui-event-calendar-month"},j({className:"g-ui-event-calendar-weekdays"},iu.map(c=>j({key:c,className:"g-ui-event-calendar-weekday"},c))),j({className:"g-ui-event-calendar-month-grid"},li)),Ne=[];for(let c=ue;c<te;c+=1)for(let B=0;B<60;B+=oe)Ne.push(c+B/60);let Ze=be(f,n).compute(([c,B])=>{let ae=wt(c,B??0),q=[];for(let J=0;J<7;J+=1){let pe=new Date(ae);pe.setDate(pe.getDate()+J),q.push(pe)}return q}),Li=j({className:"g-ui-event-calendar-week"},be(Ze).compute(c=>j({className:"g-ui-event-calendar-week-days"},j({className:"g-ui-event-calendar-week-time-col"},""),(c||[]).map(B=>j({key:B.getTime(),className:"g-ui-event-calendar-week-day-col"},j({className:"g-ui-event-calendar-week-day-header"},gi(B,l(u))))))),j({className:"g-ui-event-calendar-week-body"},j({className:"g-ui-event-calendar-week-time-col"},Ne.map(c=>{let B=Math.floor(c),ae=(c-B)*60,q=`${B<=12?B:B-12}:${ae===0?"00":ae} ${B<12?"AM":"PM"}`;return j({key:c,className:"g-ui-event-calendar-week-slot-label"},q)})),be(Ze,X).compute(([c,B])=>{if(!c||!c.length)return null;let ae=c[0],q=new Date(c[6]);q.setHours(23,59,59,999);let J=Vr(B,ae,q);return j({className:"g-ui-event-calendar-week-grid-cols"},c.map(pe=>j({key:pe.getTime(),className:"g-ui-event-calendar-week-day-col g-ui-event-calendar-week-day-col-body"},Ne.map(Q=>j({key:Q,className:"g-ui-event-calendar-week-slot",onClick:()=>ne(pe,Q,!1)})),J.filter(Q=>!Q.allDay&&Q.start.getDate()===pe.getDate()&&Q.start.getMonth()===pe.getMonth()&&Q.start.getFullYear()===pe.getFullYear()).map(Q=>{let{top:Ce,height:De}=Mr(Q.start,Q.end,ue,te);return j({key:Q.id,className:"g-ui-event-calendar-week-event",style:{top:`${Ce}%`,height:`${De}%`,borderLeftColor:Q.color||"var(--g-ui-primary)"},onClick:M=>{M.stopPropagation(),N(Q)}},j({className:"g-ui-event-calendar-week-event-title"},Q.title||"(No title)"),ce(!Q.allDay,()=>je({className:"g-ui-event-calendar-week-event-time"},`${Ge(Q.start,l(u))} \u2013 ${Ge(Q.end,l(u))}`)))}))))}))),$i=j({className:"g-ui-event-calendar-day"},j({className:"g-ui-event-calendar-day-body"},j({className:"g-ui-event-calendar-day-time-col"},Ne.map(c=>{let B=Math.floor(c),ae=(c-B)*60,q=`${B<=12?B:B-12}:${ae===0?"00":ae} ${B<12?"AM":"PM"}`;return j({key:c,className:"g-ui-event-calendar-day-slot-label"},q)})),j({className:"g-ui-event-calendar-day-slots"},Ne.map(c=>j({key:c,className:"g-ui-event-calendar-day-slot",onClick:()=>ne(f.get(),c,!1)})),be(X,f).compute(([c,B])=>B?Pr(c,B).filter(q=>!q.allDay).map(q=>{let{top:J,height:pe}=Mr(q.start,q.end,ue,te);return j({key:q.id,className:"g-ui-event-calendar-day-event",style:{top:`${J}%`,height:`${pe}%`,borderLeftColor:q.color||"var(--g-ui-primary)"},onClick:Q=>{Q.stopPropagation(),N(q)}},j({className:"g-ui-event-calendar-day-event-title"},q.title||"(No title)"),je({className:"g-ui-event-calendar-day-event-time"},`${Ge(q.start,l(u))} \u2013 ${Ge(q.end,l(u))}`))}):[])))),ci=c=>{let B=I.get(),ae=new Date,q=B.start||ae,J=B.end||new Date(ae.getTime()+3600*1e3),pe=le(B.title),Q=le(q.toISOString().slice(0,10)),Ce=le(!B.allDay&&q?q.toTimeString().slice(0,5):"09:00"),De=le(J.toISOString().slice(0,10)),M=le(!B.allDay&&J?J.toTimeString().slice(0,5):"10:00"),D=le(B.allDay),E=le(B.description),O=le(B.location),_=le(B.attendees||[]),Z=le(""),Y=le([]),U=le([]),ee=le(""),fe=Array.isArray(m)?m:[],Te=le(B.color),we=()=>{let L=new Date(Q.get()+"T"+(D.get()?"00:00:00":Ce.get()+":00")),he=new Date(De.get()+"T"+(D.get()?"23:59:59":M.get()+":00"));I.set({title:pe.get(),start:L,end:he,allDay:D.get(),description:E.get(),location:O.get(),attendees:_.get(),color:Te.get()})},Bi=L=>{if(Z.set(L),!$||!L.trim()){Y.set([]);return}Promise.resolve($(L.trim())).then(he=>Y.set(Array.isArray(he)?he:[])).catch(()=>Y.set([]))},Lr=L=>{let he=_.get();he.some(kt=>(kt.email||kt.id)===(L.email||L.id))||(_.set([...he,{id:L.id,email:L.email??L.label,label:L.label}]),Z.set(""),Y.set([]))},$r=L=>{let he=[..._.get()];he.splice(L,1),_.set(he)},yt=()=>{S&&Promise.resolve(S(ee.get())).then(L=>U.set(Array.isArray(L)?L:[])).catch(()=>U.set([]))};return j({className:"g-ui-event-calendar-form"},j({className:"g-ui-event-calendar-form-row"},ge({label:"Title",placeholder:"Event title",value:pe,onInput:L=>pe.set(L?.target?.value??"")})),j({className:"g-ui-event-calendar-form-row g-ui-event-calendar-form-row-inline"},Xi({label:"All day",checked:D,onChange:L=>D.set(L)})),j({className:"g-ui-event-calendar-form-row g-ui-event-calendar-form-row-inline"},j({className:"g-ui-event-calendar-form-field"},ui({className:"g-ui-event-calendar-form-label"},"Start"),Mi({type:"date",className:"g-ui-input g-ui-input-size-md",value:Q,onInput:L=>Q.set(L?.target?.value??"")}),ce(!D,()=>Mi({type:"time",className:"g-ui-input g-ui-input-size-md",value:Ce,onInput:L=>Ce.set(L?.target?.value??"")}))),j({className:"g-ui-event-calendar-form-field"},ui({className:"g-ui-event-calendar-form-label"},"End"),Mi({type:"date",className:"g-ui-input g-ui-input-size-md",value:De,onInput:L=>De.set(L?.target?.value??"")}),ce(!D,()=>Mi({type:"time",className:"g-ui-input g-ui-input-size-md",value:M,onInput:L=>M.set(L?.target?.value??"")})))),ce(S,()=>j({className:"g-ui-event-calendar-form-row"},ui({className:"g-ui-event-calendar-form-label"},"Location"),ge({placeholder:"Search or type location",value:ee,onInput:L=>{ee.set(L?.target?.value??""),yt()},onFocus:yt}),ce(be(U).compute(L=>L&&L.length>0),()=>j({className:"g-ui-event-calendar-form-suggestions"},U.get().map(L=>j({key:L.id??L.label,className:"g-ui-event-calendar-form-suggestion-item",onClick:()=>{O.set(L.label??L.id),ee.set(""),U.set([])}},L.label??L.id)))),ce(be(O).compute(L=>!!L),()=>je({className:"g-ui-event-calendar-form-chip"},O)))),ce($,()=>j({className:"g-ui-event-calendar-form-row"},ui({className:"g-ui-event-calendar-form-label"},"Add guests"),ge({placeholder:"Type email to search",value:Z,onInput:L=>Bi(L?.target?.value??"")}),j({className:"g-ui-event-calendar-form-chips"},_.get().map((L,he)=>je({key:(L.email||L.id)+he,className:"g-ui-event-calendar-form-chip g-ui-event-calendar-form-chip-removable",onClick:()=>$r(he)},L.label||L.email||L.id," \xD7"))),ce(be(Y).compute(L=>L&&L.length>0),()=>j({className:"g-ui-event-calendar-form-suggestions"},Y.get().map(L=>j({key:L.id??L.email,className:"g-ui-event-calendar-form-suggestion-item",onClick:()=>Lr(L)},L.label??L.email??L.id)))))),j({className:"g-ui-event-calendar-form-row"},qi({label:"Description",placeholder:"Add description",value:E,onInput:L=>E.set(L?.target?.value??"")})),ce(fe.length>0,()=>j({className:"g-ui-event-calendar-form-row"},ui({className:"g-ui-event-calendar-form-label"},"Color"),j({className:"g-ui-event-calendar-form-colors"},fe.map(L=>j({key:L.value??L.id??L,className:o("g-ui-event-calendar-form-color-swatch",be(Te).compute(he=>he===(L.value??L.id??L)?"g-ui-event-calendar-form-color-swatch-active":"")),style:{backgroundColor:L.color??L.value??L},onClick:()=>Te.set(L.value??L.id??L)}))))),j({className:"g-ui-event-calendar-form-actions"},Fe({variant:"subtle",onClick:H},"Cancel"),Fe({variant:"filled",onClick:()=>{we(),c?xe():se()}},c?"Save":"Create")))},Ii=()=>{let c=V.get();return c?j({className:"g-ui-event-calendar-view-modal"},j({className:"g-ui-event-calendar-view-modal-title"},c.title||"(No title)"),j({className:"g-ui-event-calendar-view-modal-meta"},c.allDay?je({className:"g-ui-event-calendar-view-modal-date"},gi(c.start,l(u))+(c.start.getTime()!==c.end.getTime()?` \u2013 ${gi(c.end,l(u))}`:"")):je({className:"g-ui-event-calendar-view-modal-date"},`${gi(c.start,l(u))} \xB7 ${Ge(c.start,l(u))} \u2013 ${Ge(c.end,l(u))}`)),ce(c.location,()=>j({className:"g-ui-event-calendar-view-modal-field"},"Location: ",c.location)),ce(c.description,()=>j({className:"g-ui-event-calendar-view-modal-field"},c.description)),ce(c.attendees?.length,()=>j({className:"g-ui-event-calendar-view-modal-field"},"Guests: ",c.attendees.map(B=>B.label||B.email||B.id).join(", "))),j({className:"g-ui-event-calendar-view-modal-actions"},Fe({variant:"subtle",size:"sm",onClick:G},ye({size:"sm",innerHTML:jt})," Edit"),Fe({variant:"subtle",size:"sm",onClick:ze,className:"g-ui-event-calendar-view-modal-delete"},ye({size:"sm",innerHTML:Et})," Delete"),Fe({variant:"filled",size:"sm",onClick:H},"Close"))):null};return j({...x,className:o("g-ui-event-calendar",b)},Ve,ce(v,c=>c==="month",()=>Vi),ce(v,c=>c==="week",()=>Li),ce(v,c=>c==="day",()=>$i),ce(C,c=>c==="create",()=>_e({opened:!0,title:"New event",size:"lg",onClose:H},ci(!1))),ce(C,c=>c==="view",()=>_e({opened:!0,title:"Event",size:"md",onClose:H},Ii())),ce(C,c=>c==="edit",()=>_e({opened:!0,title:"Edit event",size:"lg",onClose:H},ci(!0))))}import{state as nu}from"@granularjs/core";function su(e=!1){let i=nu(!!e);return[i,{open:()=>i.set(!0),close:()=>i.set(!1),toggle:()=>i.set(!i.get())}]}Nt();export{Qa as Accordion,Ae as ActionIcon,Cn as Affix,ho as Alert,Fo as Anchor,Vn as AppBar,wo as Avatar,Us as AvatarGroup,xa as Badge,_s as BadgeGroup,So as Blockquote,Dr as BottomBar,cn as Breadcrumbs,Ls as Burger,Ri as Button,ii as Calendar,fa as Card,dn as Center,Xi as Checkbox,Gs as CheckboxGroup,_o as Chip,No as Code,Es as Col,vn as Collapse,ga as Container,ds as CopyButton,Jn as DateInput,Gn as DatePicker,lo as Divider,no as Drawer,ou as EventCalendar,Mn as Fieldset,Ss as Flex,Fs as Grid,bt as GridTable,da as Group,zn as HoverCard,ye as Icon,Eo as Image,Vs as Indicator,ko as Kbd,Jt as List,Ke as Loading,Bs as LoadingOverlay,ro as Menu,_e as Modal,Yn as MultiSelect,Ms as NavLink,et as Notification,Xn as Notifications,Yi as NumberField,Sa as NumberInput,tn as Pagination,po as Paper,ss as PasswordInput,Ys as PinInput,lt as Popover,rs as Popper,Ho as Progress,fs as ProgressRing,nn as Radio,un as RadioGroup,Ns as RangePicker,Qn as RangeSlider,En as Rating,Hs as ScrollArea,gs as SearchInput,Qo as SegmentedControl,Ea as Select,bs as SelectSearch,$n as Sidebar,Po as SimpleGrid,Zo as Skeleton,Yo as Slider,fn as Space,ca as Stack,Fn as Stepper,ja as Switch,ys as SwitchGroup,Ua as Table,qa as Tabs,Hn as Tag,Hi as Text,ge as TextInput,qi as Textarea,An as Timeline,sa as Title,xs as Toast,Wn as ToastStack,Ja as Tooltip,o as cx,Xr as setThemeMode,Ur as setThemeVars,su as useDisclosure};
+//# sourceMappingURL=granular-ui.min.js.map