@atomazing-org/design-system 1.0.63 → 1.0.64

package/README.md

@@ -6,8 +6,18 @@ Contents
 - Introduction
 - Installation
 - Quick Start
+- Provider Props
+- Dynamic Themes (array)
+- Theme Switching (UI)
+- Dark Mode Control
 - Extended Palette (4 variants)
-- Ad‑hoc Custom Colors
+- Palette Overrides
+- Using Palette In SX
+- Typography Variants
+- Global Styles
+- Animations
+- Components
+- Utilities
 - SSR Notes
 - Peer Dependencies
 
@@ -33,17 +43,90 @@ export function App() {
 }
 ```
 
+If `themes` is not provided, the provider falls back to a single "Default" theme using the current palette brand color.
+
+Provider Props
+- `themes?: { name: string; primaryColor: string; secondaryColor?: string }[]`
+- `fontFamily?: string`
+- `colorPaletteOverride?: Partial<ColorPaletteType>`
+
+Dynamic Themes (array)
+Provide a fully dynamic list of themes to the provider. This takes priority over static defaults.
+
+```tsx
+<ThemeProviderWrapper
+  themes={[
+    { name: 'Blue', primaryColor: '#3B82F6' },
+    { name: 'Green', primaryColor: '#22C55E', secondaryColor: '#F6F9F6' },
+    { name: 'Gray', primaryColor: '#64748B' },
+  ]}
+>
+  {/* ... */}
+</ThemeProviderWrapper>
+```
+
+Theme Switching (UI)
+Use the theme context to read and change the active theme.
+
+```tsx
+import { useThemeSettings } from '@atomazing-org/design-system';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useThemeSettings();
+  const options = ['Blue', 'Green', 'Gray'];
+
+  return (
+    <ToggleButtonGroup
+      size="small"
+      exclusive
+      color="brand"
+      value={theme}
+      onChange={(_, v) => v && setTheme(v)}
+    >
+      {options.map((o) => (
+        <ToggleButton key={o} value={o}>{o}</ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}
+```
+
+Dark Mode Control
+Use `useThemeSettings()` to read and set dark mode. Modes: `light | dark | system | auto`.
+
+```tsx
+import { useThemeSettings, darkModeOptions } from '@atomazing-org/design-system';
+import { RadioGroup, FormControlLabel, Radio } from '@mui/material';
+
+export function DarkModeSelector() {
+  const { darkMode, setDarkMode } = useThemeSettings();
+  const options = darkModeOptions; // label + icon
+
+  return (
+    <RadioGroup
+      row
+      value={darkMode}
+      onChange={(e) => setDarkMode(e.target.value as any)}
+    >
+      {options.map((o) => (
+        <FormControlLabel key={o.value} value={o.value} control={<Radio />} label={o.label} />
+      ))}
+    </RadioGroup>
+  );
+}
+```
+
 Extended Palette (4 variants)
 The design system adds four typed colors to the MUI palette, available on common components via the `color` prop:
 
-- brand: project brand color (independent from `primary`); defaults to the currently selected theme’s primary.
+- brand: project brand color (uses the active theme `primary`).
 - neutral: neutral/gray scale color (from the design-system palette).
 - accent: supporting accent color (from palette `accent`).
 - muted: soft/desaturated color (based on neutral by default).
 
-Supported components (out of the box): `Button`, `Chip`, `Badge`, `Alert`.
+Supported components: `Button`, `Chip`, `Badge`, `Alert`.
 
-Examples
 ```tsx
 import { Button, Chip, Alert } from '@mui/material';
 
@@ -53,26 +136,129 @@ import { Button, Chip, Alert } from '@mui/material';
 <Alert color="muted" variant="filled">Muted Alert</Alert>
 ```
 
-Ad‑hoc Custom Colors
-If you need additional colors without extending types, use `customColors`. They will be available under `theme.palette.custom[<name>]` with generated light/dark/contrast shades.
+Palette Overrides
+Override base palette tokens for the whole app.
 
 ```tsx
-<ThemeProviderWrapper customColors={{ marketing: '#FF6A00', accent2: '#4ADE80' }}>
+<ThemeProviderWrapper
+  colorPaletteOverride={{
+    brand: '#4F46E5',
+    accent: '#F59E0B',
+    muted: '#94A3B8',
+    neutral: '#64748B',
+    success: '#16A34A',
+    warning: '#D97706',
+    error: '#DC2626',
+    info: '#0284C7',
+  }}
+>
   {/* ... */}
 </ThemeProviderWrapper>
+```
 
-// Usage
+Using Palette In SX
+```tsx
 import { Box } from '@mui/material';
 
-<Box sx={{ bgcolor: (t) => t.palette.custom?.marketing.main }} />
+<Box sx={{ bgcolor: (t) => t.palette.accent.main, color: (t) => t.palette.getContrastText(t.palette.accent.main) }}>
+  Accent surface
+</Box>
 ```
 
-Notes
-- To add more typed colors to the `color` prop, augment MUI types (see `src/styles/muiAugmentations.d.ts`).
-- You can override the global color palette via `colorPaletteOverride` and theme map via `themeConfigOverride`.
+Typography Variants
+Extra variants are available (mapping to `<p>`/headers). Examples:
+
+```tsx
+import { Typography } from '@mui/material';
+
+<Typography variant="text_md_regular">Body text</Typography>
+<Typography variant="text_sm_bold">Strong caption</Typography>
+<Typography variant="header_lg_bold">Section Title</Typography>
+```
+
+Global Styles
+`ThemeProviderWrapper` injects global styles via Emotion. You can also set a custom font family:
+
+```tsx
+<ThemeProviderWrapper fontFamily="Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif">
+  {/* ... */}
+</ThemeProviderWrapper>
+```
+
+Animations
+Keyframes ready for use in Emotion/MUI `sx`:
+
+```tsx
+import { keyframes } from '@emotion/react';
+import { fadeIn, slideIn, scale, pulseAnimation, progressPulse } from '@atomazing-org/design-system';
+import styled from '@emotion/styled';
+
+const Card = styled.div`
+  animation: ${fadeIn} 300ms ease-in both;
+`;
+
+const Glowing = styled.div`
+  animation: ${progressPulse('#9FA9EA')} 2s ease-in-out infinite;
+`;
+```
+
+Components
+- ErrorBoundary
+```tsx
+import { ErrorBoundary } from '@atomazing-org/design-system';
+
+<ErrorBoundary>
+  <App />
+</ErrorBoundary>
+```
+
+- Loading
+```tsx
+import { Loading } from '@atomazing-org/design-system';
+
+<Loading />
+```
+
+- PathName / DialogBtn
+```tsx
+import { PathName, DialogBtn } from '@atomazing-org/design-system';
+
+<PathName>/settings/profile</PathName>
+<DialogBtn variant="contained" color="brand">OK</DialogBtn>
+```
+
+Utilities
+```tsx
+import {
+  getFontColor, isFontLight, isHexColor,
+  timeAgo, timeAgoFromStart,
+  useResponsiveDisplay, useSystemTheme,
+  displayGreeting, getDayIdentifier,
+  systemInfo,
+} from '@atomazing-org/design-system';
+
+// Colors
+getFontColor('#ffffff'); // '#101727' | '#f0f0f0'
+isFontLight('#222');
+isHexColor('#abc');
+
+// Time
+timeAgo(new Date(Date.now() - 3600_000));
+timeAgoFromStart(new Date(Date.now() + 90_000));
+
+// Device
+const isMobile = useResponsiveDisplay(768);
+const sysTheme = useSystemTheme(); // 'light' | 'dark' | 'unknown'
+
+// Misc
+displayGreeting(); // Good morning / afternoon / evening
+getDayIdentifier(new Date()); // 'YYYY-MM-DD'
+console.log(systemInfo.os, systemInfo.browser);
+```
 
 SSR Notes
-- The library guards `localStorage`/`navigator` usage. Wrap your app in `<ThemeProviderWrapper>` as usual in SSR frameworks; settings hydrate on the client.
+- The library guards `localStorage`/`navigator`. Use normally in SSR apps; hydration updates settings on client.
+- For Next.js, place the provider in a client boundary (e.g., `layout.tsx` with `"use client"`).
 
 Peer Dependencies
 - `@mui/material` ^7

package/dist/index.d.mts

@@ -220,17 +220,17 @@ declare const useThemeSettings: () => ThemeContextProps;
 type ThemeProviderWrapperProps = PropsWithChildren<{
     /** Optional font stack to apply across the app. */
     fontFamily?: string;
-    /** Optional direct override for a single theme primary color. */
-    primaryColor?: string;
-    /** Optional map to override default themeConfig with custom themes. */
-    themeConfigOverride?: Record<string, {
+    /**
+     * Optional dynamic list of themes.
+     * Takes precedence over static defaults when provided.
+     */
+    themes?: {
+        name: string;
         primaryColor: string;
         secondaryColor?: string;
-    }>;
+    }[];
     /** Optional color palette override (e.g., fontLight/fontDark/accent colors). */
     colorPaletteOverride?: Partial<ColorPaletteType>;
-    /** Optional registry of ad-hoc colors to inject into theme.palette.custom */
-    customColors?: Record<string, string>;
 }>;
 declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
 
@@ -241,13 +241,6 @@ declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
 declare const commonComponentProps: Theme["components"];
 
 declare const createCustomTheme: (primaryColor: string, mode?: PaletteMode, secondaryColor?: string) => Theme;
-/**
- * A predefined list of named themes based on the `themeConfig` definition.
- */
-declare const themes: {
-    name: string;
-    MuiTheme: Theme;
-}[];
 
 /**
  * Injects global styles into the document using Emotion.
@@ -360,10 +353,6 @@ declare const getColorPalette: () => ColorPaletteType;
  * Pass `undefined` or empty to reset to defaults.
  */
 declare const setColorPaletteOverride: (override?: Partial<ColorPaletteType>) => void;
-declare const themeConfig: Record<string, {
-    primaryColor: string;
-    secondaryColor?: string;
-}>;
 /** Backward-compatible live view of the active palette. */
 declare const ColorPalette: Readonly<ColorPaletteType>;
 
@@ -453,4 +442,4 @@ declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
  */
 declare const useSystemTheme: () => SystemTheme;
 
-export { type AppSettings, ColorPalette, type ColorPaletteType, type CustomTypographyVariants, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, type OptionItem, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, darkModeOptions, defaultColorPalette, displayGreeting, fadeIn, fadeInLeft, getColorPalette, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, setColorPaletteOverride, slideIn, slideInBottom, systemInfo, themeConfig, themes, timeAgo, timeAgoFromStart, useResponsiveDisplay, useSystemTheme, useThemeSettings };
+export { type AppSettings, ColorPalette, type ColorPaletteType, type CustomTypographyVariants, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, type OptionItem, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, darkModeOptions, defaultColorPalette, displayGreeting, fadeIn, fadeInLeft, getColorPalette, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, setColorPaletteOverride, slideIn, slideInBottom, systemInfo, timeAgo, timeAgoFromStart, useResponsiveDisplay, useSystemTheme, useThemeSettings };

package/dist/index.d.ts

@@ -220,17 +220,17 @@ declare const useThemeSettings: () => ThemeContextProps;
 type ThemeProviderWrapperProps = PropsWithChildren<{
     /** Optional font stack to apply across the app. */
     fontFamily?: string;
-    /** Optional direct override for a single theme primary color. */
-    primaryColor?: string;
-    /** Optional map to override default themeConfig with custom themes. */
-    themeConfigOverride?: Record<string, {
+    /**
+     * Optional dynamic list of themes.
+     * Takes precedence over static defaults when provided.
+     */
+    themes?: {
+        name: string;
         primaryColor: string;
         secondaryColor?: string;
-    }>;
+    }[];
     /** Optional color palette override (e.g., fontLight/fontDark/accent colors). */
     colorPaletteOverride?: Partial<ColorPaletteType>;
-    /** Optional registry of ad-hoc colors to inject into theme.palette.custom */
-    customColors?: Record<string, string>;
 }>;
 declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
 
@@ -241,13 +241,6 @@ declare const ThemeProviderWrapper: FC<ThemeProviderWrapperProps>;
 declare const commonComponentProps: Theme["components"];
 
 declare const createCustomTheme: (primaryColor: string, mode?: PaletteMode, secondaryColor?: string) => Theme;
-/**
- * A predefined list of named themes based on the `themeConfig` definition.
- */
-declare const themes: {
-    name: string;
-    MuiTheme: Theme;
-}[];
 
 /**
  * Injects global styles into the document using Emotion.
@@ -360,10 +353,6 @@ declare const getColorPalette: () => ColorPaletteType;
  * Pass `undefined` or empty to reset to defaults.
  */
 declare const setColorPaletteOverride: (override?: Partial<ColorPaletteType>) => void;
-declare const themeConfig: Record<string, {
-    primaryColor: string;
-    secondaryColor?: string;
-}>;
 /** Backward-compatible live view of the active palette. */
 declare const ColorPalette: Readonly<ColorPaletteType>;
 
@@ -453,4 +442,4 @@ declare const useResponsiveDisplay: (breakpoint?: number) => boolean;
  */
 declare const useSystemTheme: () => SystemTheme;
 
-export { type AppSettings, ColorPalette, type ColorPaletteType, type CustomTypographyVariants, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, type OptionItem, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, darkModeOptions, defaultColorPalette, displayGreeting, fadeIn, fadeInLeft, getColorPalette, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, setColorPaletteOverride, slideIn, slideInBottom, systemInfo, themeConfig, themes, timeAgo, timeAgoFromStart, useResponsiveDisplay, useSystemTheme, useThemeSettings };
+export { type AppSettings, ColorPalette, type ColorPaletteType, type CustomTypographyVariants, type DarkModeOptions, DialogBtn, ErrorBoundary, GlobalStyles, Loading, type OptionItem, PathName, type SystemTheme, type ThemeContextProps, ThemeProviderWrapper, commonComponentProps, createCustomTheme, darkModeOptions, defaultColorPalette, displayGreeting, fadeIn, fadeInLeft, getColorPalette, getDayIdentifier, getFontColor, installAppAnimation, isDarkMode, isFontLight, isHexColor, logoutAnimation, progressPulse, pulseAnimation, scale, setColorPaletteOverride, slideIn, slideInBottom, systemInfo, timeAgo, timeAgoFromStart, useResponsiveDisplay, useSystemTheme, useThemeSettings };

package/dist/index.js

@@ -1,14 +1,14 @@
-"use strict";var Ge=Object.create;var O=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var je=(e,t)=>{for(var o in t)O(e,o,{get:t[o],enumerable:!0})},q=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Ue(t))!Ye.call(e,r)&&r!==o&&O(e,r,{get:()=>t[r],enumerable:!(n=Ne(t,r))||n.enumerable});return e};var f=(e,t,o)=>(o=e!=null?Ge(He(e)):{},q(t||!e||!e.__esModule?O(o,"default",{value:e,enumerable:!0}):o,e)),Ve=e=>q(O({},"__esModule",{value:!0}),e);var Ke={};je(Ke,{ColorPalette:()=>ce,DialogBtn:()=>te,ErrorBoundary:()=>I,GlobalStyles:()=>Y,Loading:()=>ne,PathName:()=>ae,ThemeProviderWrapper:()=>$e,commonComponentProps:()=>L,createCustomTheme:()=>b,darkModeOptions:()=>de,defaultColorPalette:()=>C,displayGreeting:()=>ge,fadeIn:()=>Me,fadeInLeft:()=>Se,getColorPalette:()=>l,getDayIdentifier:()=>ye,getFontColor:()=>w,installAppAnimation:()=>Ee,isDarkMode:()=>W,isFontLight:()=>xe,isHexColor:()=>Z,logoutAnimation:()=>Fe,progressPulse:()=>De,pulseAnimation:()=>Ie,scale:()=>Oe,setColorPaletteOverride:()=>$,slideIn:()=>Pe,slideInBottom:()=>Re,systemInfo:()=>be,themeConfig:()=>B,themes:()=>z,timeAgo:()=>_e,timeAgoFromStart:()=>ve,useResponsiveDisplay:()=>Te,useSystemTheme:()=>U,useThemeSettings:()=>ue});module.exports=Ve(Ke);var K=f(require("@emotion/styled")),ee=require("@mui/material"),te=(0,K.default)(ee.Button)`
+"use strict";var Ae=Object.create;var M=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var We=(e,t)=>{for(var o in t)M(e,o,{get:t[o],enumerable:!0})},X=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of $e(t))!ze.call(e,r)&&r!==o&&M(e,r,{get:()=>t[r],enumerable:!(n=Le(t,r))||n.enumerable});return e};var f=(e,t,o)=>(o=e!=null?Ae(Be(e)):{},X(t||!e||!e.__esModule?M(o,"default",{value:e,enumerable:!0}):o,e)),Ge=e=>X(M({},"__esModule",{value:!0}),e);var Xe={};We(Xe,{ColorPalette:()=>le,DialogBtn:()=>j,ErrorBoundary:()=>P,GlobalStyles:()=>W,Loading:()=>K,PathName:()=>te,ThemeProviderWrapper:()=>Fe,commonComponentProps:()=>I,createCustomTheme:()=>v,darkModeOptions:()=>ae,defaultColorPalette:()=>C,displayGreeting:()=>ue,fadeIn:()=>ke,fadeInLeft:()=>ve,getColorPalette:()=>s,getDayIdentifier:()=>ce,getFontColor:()=>S,installAppAnimation:()=>Re,isDarkMode:()=>A,isFontLight:()=>me,isHexColor:()=>Y,logoutAnimation:()=>Pe,progressPulse:()=>Me,pulseAnimation:()=>Se,scale:()=>Ce,setColorPaletteOverride:()=>E,slideIn:()=>we,slideInBottom:()=>Te,systemInfo:()=>fe,timeAgo:()=>he,timeAgoFromStart:()=>xe,useResponsiveDisplay:()=>ge,useSystemTheme:()=>B,useThemeSettings:()=>se});module.exports=Ge(Xe);var J=f(require("@emotion/styled")),Q=require("@mui/material"),j=(0,J.default)(Q.Button)`
   padding: 10px 16px;
   border-radius: 16px;
   font-size: 16px;
   margin: 8px;
-`;var re=f(require("react")),X=f(require("@emotion/styled")),V=f(require("@mui/icons-material/ErrorOutlineRounded")),v=require("@mui/material"),u=require("react/jsx-runtime"),I=class extends re.default.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,o){console.error("Error:",t),console.error("Error Info:",o)}render(){var n,r,i;let{state:t,props:o}=this;return t.hasError?(0,u.jsxs)(Xe,{children:[(0,u.jsx)(Je,{children:(0,u.jsx)(v.Box,{children:"Something went wrong.\xA0"})}),(0,u.jsxs)("h3",{children:[(0,u.jsxs)(v.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,u.jsx)(V.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",(0,u.jsxs)(v.Box,{translate:"no",children:["[",(n=t.error)==null?void 0:n.name,"] ",(r=t.error)==null?void 0:r.message]}),(0,u.jsxs)(v.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,u.jsx)(V.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",(0,u.jsxs)(v.Box,{translate:"no",children:["[",(i=t.error)==null?void 0:i.stack,"]"]})]})]}):o.children}},Xe=X.default.div`
+`;var Z=f(require("react")),N=f(require("@emotion/styled")),G=f(require("@mui/icons-material/ErrorOutlineRounded")),_=require("@mui/material"),m=require("react/jsx-runtime"),P=class extends Z.default.Component{constructor(t){super(t),this.state={hasError:!1}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,o){console.error("Error:",t),console.error("Error Info:",o)}render(){var n,r,i;let{state:t,props:o}=this;return t.hasError?(0,m.jsxs)(Ne,{children:[(0,m.jsx)(Ue,{children:(0,m.jsx)(_.Box,{children:"Something went wrong.\xA0"})}),(0,m.jsxs)("h3",{children:[(0,m.jsxs)(_.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,m.jsx)(G.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","ERROR:"]})," ",(0,m.jsxs)(_.Box,{translate:"no",children:["[",(n=t.error)==null?void 0:n.name,"] ",(r=t.error)==null?void 0:r.message]}),(0,m.jsxs)(_.Box,{style:{color:"#ff3131",display:"inline-block"},children:[(0,m.jsx)(G.default,{sx:{verticalAlign:"middle",mb:"4px"}})," ","Stack:"]})," ",(0,m.jsxs)(_.Box,{translate:"no",children:["[",(i=t.error)==null?void 0:i.stack,"]"]})]})]}):o.children}},Ne=N.default.div`
   margin: 0 8vw;
   @media (max-width: 768px) {
     margin: 0;
   }
-`,Je=X.default.h1`
+`,Ue=N.default.h1`
   margin-top: 32px;
   margin-bottom: 32px;
   font-size: 36px;
@@ -24,7 +24,7 @@
     margin-top: 0;
     margin-bottom: 0;
   }
-`;var D=require("react"),oe=f(require("@emotion/styled")),F=require("@mui/material"),g=require("react/jsx-runtime"),ne=()=>{let[e,t]=(0,D.useState)(!1);return(0,D.useEffect)(()=>{let o=setTimeout(()=>{t(!0)},100);return()=>clearTimeout(o)},[]),(0,g.jsx)(Qe,{"aria-live":"polite",role:"status",children:e&&(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(F.CircularProgress,{"aria-label":"loading",size:80,thickness:4}),(0,g.jsx)("h3",{style:{opacity:.8},children:"Loading Page..."})]})})},Qe=(0,oe.default)(F.Box)`
+`;var R=require("react"),q=f(require("@emotion/styled")),D=require("@mui/material"),g=require("react/jsx-runtime"),K=()=>{let[e,t]=(0,R.useState)(!1);return(0,R.useEffect)(()=>{let o=setTimeout(()=>{t(!0)},100);return()=>clearTimeout(o)},[]),(0,g.jsx)(He,{"aria-live":"polite",role:"status",children:e&&(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(D.CircularProgress,{"aria-label":"loading",size:80,thickness:4}),(0,g.jsx)("h3",{style:{opacity:.8},children:"Loading Page..."})]})})},He=(0,q.default)(D.Box)`
   position: absolute;
   top: 50%;
   left: 50%;
@@ -35,26 +35,28 @@
   flex-direction: column;
   text-align: center;
   gap: 8px;
-`;var ie=f(require("@emotion/styled")),ae=ie.default.code`
+`;var ee=f(require("@emotion/styled")),te=ee.default.code`
   background: #000000c8;
   color: white;
   padding: 4px 6px;
   border-radius: 8px;
-`;var se=f(require("@mui/icons-material/BrightnessAutoRounded")),le=f(require("@mui/icons-material/DarkModeRounded")),pe=f(require("@mui/icons-material/LightModeRounded")),me=f(require("@mui/icons-material/PersonalVideoRounded")),k=require("react/jsx-runtime"),E=32,de=[{label:"Auto",value:"auto",icon:(0,k.jsx)(se.default,{color:"inherit",sx:{fontSize:E}})},{label:"System",value:"system",icon:(0,k.jsx)(me.default,{color:"inherit",sx:{fontSize:E}})},{label:"Light",value:"light",icon:(0,k.jsx)(pe.default,{color:"inherit",sx:{fontSize:E}})},{label:"Dark",value:"dark",icon:(0,k.jsx)(le.default,{color:"inherit",sx:{fontSize:E}})}];var C={fontDark:"#101727",fontLight:"#f0f0f0",brand:"#9FA9EA",accent:"#F3503A",muted:"#64748B",success:"#2E7D32",info:"#0288D1",warning:"#ED6C02",error:"#D32F2F",neutral:"#64748B"};var A=require("react"),J=(0,A.createContext)(void 0),ue=()=>{let e=(0,A.useContext)(J);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};var d=require("react"),Ae=require("@emotion/react"),Le=require("@mui/material/styles");var L={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:e.shape.borderRadius,fontSize:"12px"})}},MuiButton:{styleOverrides:{root:({theme:e})=>({padding:"12px 24px",borderRadius:e.shape.borderRadius}),contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiSelect:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:24,minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500}}},MuiAlert:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiTextField:{defaultProps:{variant:"outlined"},styleOverrides:{root:({theme:e})=>({"& .MuiInputBase-root":{borderRadius:e.shape.borderRadius}})}},MuiOutlinedInput:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"& fieldset":{borderColor:e.palette.primary.main},"&:hover fieldset":{borderColor:e.palette.primary.dark},"&.Mui-focused fieldset":{borderColor:e.palette.primary.main}})}},MuiInputLabel:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"&.Mui-focused":{color:e.palette.primary.main}})}},MuiFormHelperText:{styleOverrides:{root:({theme:e})=>({color:e.palette.error.main})}},MuiPaper:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),elevation8:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiMenuItem:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiBottomNavigationAction:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"12px",margin:0,maxHeight:"none"})}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiTab:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};var Q=require("@mui/material");var c={...C},l=()=>c,$=e=>{c={...C,...e}},B={Main:{primaryColor:"#9FA9EA",secondaryColor:"#f2f2f2"}},ce={get fontDark(){return c.fontDark},get fontLight(){return c.fontLight},get brand(){return c.brand},get accent(){return c.accent},get muted(){return c.muted},get success(){return c.success},get info(){return c.info},get warning(){return c.warning},get error(){return c.error},get neutral(){return c.neutral}};var fe={defaultProps:{variantMapping:{text_xl_regular:"p",text_lg_regular:"p",text_md_regular:"p",text_sm_regular:"p",text_xs_regular:"p",text_2xs_regular:"p",text_xl_bold:"p",text_lg_bold:"p",text_md_bold:"p",text_sm_bold:"p",text_xs_bold:"p",text_2xs_bold:"p",text_xl_semibold:"p",text_lg_semibold:"p",text_md_semibold:"p",text_sm_semibold:"p",text_xs_semibold:"p",text_2xs_semibold:"p",text_xl_thin:"p",text_lg_thin:"p",text_md_thin:"p",text_sm_thin:"p",text_xs_thin:"p",text_2xs_thin:"p",header_2xl_regular:"h1",header_xl_regular:"h2",header_lg_regular:"h3",header_md_regular:"h4",header_sm_regular:"h5",header_xs_regular:"h6",header_2xl_bold:"h1",header_xl_bold:"h2",header_lg_bold:"h3",header_md_bold:"h4",header_sm_bold:"h5",header_xs_bold:"h6"}}},he={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"700 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},header_2xl_regular:{font:"400 48px/60px inherit inherit"},header_xl_regular:{font:"400 42px/54px inherit inherit"},header_lg_regular:{font:"400 36px/46px inherit inherit"},header_md_regular:{font:"400 30px/38px inherit inherit"},header_sm_regular:{font:"400 26px/34px inherit inherit"},header_xs_regular:{font:"400 22px/30px inherit inherit"},header_2xl_bold:{font:"700 48px/60px inherit inherit"},header_xl_bold:{font:"700 42px/54px inherit inherit"},header_lg_bold:{font:"700 36px/46px inherit inherit"},header_md_bold:{font:"700 30px/38px inherit inherit"},header_sm_bold:{font:"700 26px/34px inherit inherit"},header_xs_bold:{font:"700 22px/30px inherit inherit"}};var b=(e,t="light",o)=>{let n=t==="dark",r=(0,Q.createTheme)({palette:{mode:t}});return(0,Q.createTheme)(r,{palette:{primary:{...r.palette.primary,main:e},brand:r.palette.augmentColor({color:{main:l().brand}}),neutral:r.palette.augmentColor({color:{main:l().neutral}}),accent:r.palette.augmentColor({color:{main:l().accent}}),muted:r.palette.augmentColor({color:{main:l().muted}}),...o?{secondary:{...r.palette.secondary,main:o}}:{},error:{...r.palette.error,main:l().error},warning:{...r.palette.warning,main:l().warning},success:{...r.palette.success,main:l().success},info:{...r.palette.info,main:l().info},background:n?{...r.palette.background,default:"#1C1C1E",paper:"#2C2C2E"}:{...r.palette.background,default:"#F2F2F7",paper:"#FFFFFF"},divider:n?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.12)"},components:{...L,MuiTypography:fe},typography:{...he,fontFamily:'var(--app-font-family, "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)'},shape:{borderRadius:24}})},z=Object.entries(B).map(([e,t])=>({name:e,MuiTheme:b(t.primaryColor,"light",t.secondaryColor)}));var ke=require("react"),H=require("@emotion/react"),Ce=require("@mui/material/styles");var Z=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),w=e=>{if(!Z(e))return console.error("Invalid hex color provided:",e),l().fontDark;let t=e.slice(1),o=t.length===3?t.split("").map(x=>x+x).join(""):t,n=Number.parseInt(o.slice(0,2),16),r=Number.parseInt(o.slice(2,4),16),i=Number.parseInt(o.slice(4,6),16),p=Math.round((n*299+r*587+i*114)/1e3),a=l();return p>128?a.fontDark:a.fontLight},xe=e=>w(e)===l().fontLight;var ge=()=>{let e=new Date().getHours();return e>=5&&e<12?"Good morning":e>12&&e<18?"Good afternoon":"Good evening"};var ye=e=>{let t=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0");return`${t}-${o}-${n}`};var Ze=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},qe=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},be={os:typeof navigator=="undefined"?"Unknown":Ze(),browser:typeof navigator=="undefined"?"Unknown":qe()};var W=(e,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return t==="dark";default:return!1}};var _e=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=Math.floor((n.getTime()-e.getTime())/1e3),i=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(r<60)return i.format(-r,"second");if(r<3600){let a=Math.floor(r/60);return i.format(-a,"minute")}if(r<86400){let a=Math.floor(r/3600);return i.format(-a,"hour")}let p=Math.floor(r/86400);return i.format(-p,"day")},ve=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=(e.getTime()-n.getTime())/1e3,i=Math.floor(r/(60*60)),p=Math.floor((r-60*60*i)/60),a=Math.floor(r-60*60*i-60*p),x=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(p===0&&a<60)return x.format(a,"second");if(i===0&&p<60)return x.format(p,"minute");if(i<24){let S=`${new Intl.RelativeTimeFormat(o,{numeric:"auto"}).format(i,"hour")}`,_=` ${new Intl.RelativeTimeFormat(o,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(p,"minute")}`.replace(/^\D+/,"");return`${S} ${_}`}let y=Math.floor(a/86400);return x.format(y,"day")};var G=require("react"),Te=(e=768)=>{let[t,o]=(0,G.useState)(!1);return(0,G.useEffect)(()=>{let n=()=>{o(window.innerWidth<e)};n();let r=()=>n();return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[e]),t};var N=require("react"),U=()=>{let[e,t]=(0,N.useState)("unknown");return(0,N.useEffect)(()=>{let o=r=>{t(r.matches?"dark":"light")},n=globalThis.matchMedia("(prefers-color-scheme: dark)");return t(n.matches?"dark":"light"),n.addEventListener("change",o),()=>{n.removeEventListener("change",o)}},[]),e};var we=require("react/jsx-runtime"),Y=({fontFamily:e})=>{let t=(0,Ce.useTheme)(),o=t.palette.mode==="dark",n=t.palette.primary.main,r=t.palette.background.default,i=(0,ke.useMemo)(()=>w(n),[n]);return(0,we.jsx)(H.Global,{styles:H.css`
+`;var re=f(require("@mui/icons-material/BrightnessAutoRounded")),oe=f(require("@mui/icons-material/DarkModeRounded")),ne=f(require("@mui/icons-material/LightModeRounded")),ie=f(require("@mui/icons-material/PersonalVideoRounded")),T=require("react/jsx-runtime"),O=32,ae=[{label:"Auto",value:"auto",icon:(0,T.jsx)(re.default,{color:"inherit",sx:{fontSize:O}})},{label:"System",value:"system",icon:(0,T.jsx)(ie.default,{color:"inherit",sx:{fontSize:O}})},{label:"Light",value:"light",icon:(0,T.jsx)(ne.default,{color:"inherit",sx:{fontSize:O}})},{label:"Dark",value:"dark",icon:(0,T.jsx)(oe.default,{color:"inherit",sx:{fontSize:O}})}];var C={fontDark:"#101727",fontLight:"#f0f0f0",brand:"#9FA9EA",accent:"#F3503A",muted:"#64748B",success:"#2E7D32",info:"#0288D1",warning:"#ED6C02",error:"#D32F2F",neutral:"#64748B"};var F=require("react"),U=(0,F.createContext)(void 0),se=()=>{let e=(0,F.useContext)(U);if(!e)throw new Error("useThemeSettings must be used within ThemeProviderWrapper");return e};var p=require("react"),De=require("@emotion/react"),Oe=require("@mui/material/styles");var I={MuiTooltip:{defaultProps:{disableInteractive:!0},styleOverrides:{tooltip:({theme:e})=>({backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",padding:"8px 16px",borderRadius:e.shape.borderRadius,fontSize:"12px"})}},MuiButton:{styleOverrides:{root:({theme:e})=>({padding:"12px 24px",borderRadius:e.shape.borderRadius}),contained:{boxShadow:"none"}}},MuiSkeleton:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiSelect:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),select:{display:"flex",justifyContent:"flex-start",alignItems:"center",gap:"4px"}}},MuiDialog:{defaultProps:{slotProps:{paper:{style:{padding:"12px",borderRadius:24,minWidth:"400px"}}}},styleOverrides:{root:{"& .MuiDialog-container":{backdropFilter:"blur(4px)"}}}},MuiAvatar:{styleOverrides:{root:{fontWeight:500}}},MuiAlert:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiTextField:{defaultProps:{variant:"outlined"},styleOverrides:{root:({theme:e})=>({"& .MuiInputBase-root":{borderRadius:e.shape.borderRadius}})}},MuiOutlinedInput:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"& fieldset":{borderColor:e.palette.primary.main},"&:hover fieldset":{borderColor:e.palette.primary.dark},"&.Mui-focused fieldset":{borderColor:e.palette.primary.main}})}},MuiInputLabel:{styleOverrides:{root:({theme:e})=>({color:e.palette.primary.main,"&.Mui-focused":{color:e.palette.primary.main}})}},MuiFormHelperText:{styleOverrides:{root:({theme:e})=>({color:e.palette.error.main})}},MuiPaper:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius}),elevation8:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiMenuItem:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiBottomNavigationAction:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"12px",margin:0,maxHeight:"none"})}},MuiDialogContent:{styleOverrides:{root:{padding:0}}},MuiSlider:{styleOverrides:{valueLabel:({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"6px 14px","&::before, &::after":{display:"none"}})}},MuiCircularProgress:{styleOverrides:{circle:{strokeLinecap:"round"}}},MuiTab:{styleOverrides:{root:({theme:e})=>({borderRadius:e.shape.borderRadius})}},MuiAccordion:{styleOverrides:{root:{"&::before":{display:"none"}}}}};var H=require("@mui/material");var u={...C},s=()=>u,E=e=>{u={...C,...e}},le={get fontDark(){return u.fontDark},get fontLight(){return u.fontLight},get brand(){return u.brand},get accent(){return u.accent},get muted(){return u.muted},get success(){return u.success},get info(){return u.info},get warning(){return u.warning},get error(){return u.error},get neutral(){return u.neutral}};var pe={defaultProps:{variantMapping:{text_xl_regular:"p",text_lg_regular:"p",text_md_regular:"p",text_sm_regular:"p",text_xs_regular:"p",text_2xs_regular:"p",text_xl_bold:"p",text_lg_bold:"p",text_md_bold:"p",text_sm_bold:"p",text_xs_bold:"p",text_2xs_bold:"p",text_xl_semibold:"p",text_lg_semibold:"p",text_md_semibold:"p",text_sm_semibold:"p",text_xs_semibold:"p",text_2xs_semibold:"p",text_xl_thin:"p",text_lg_thin:"p",text_md_thin:"p",text_sm_thin:"p",text_xs_thin:"p",text_2xs_thin:"p",header_2xl_regular:"h1",header_xl_regular:"h2",header_lg_regular:"h3",header_md_regular:"h4",header_sm_regular:"h5",header_xs_regular:"h6",header_2xl_bold:"h1",header_xl_bold:"h2",header_lg_bold:"h3",header_md_bold:"h4",header_sm_bold:"h5",header_xs_bold:"h6"}}},de={text_xl_regular:{font:"400 20px/30px inherit inherit"},text_lg_regular:{font:"400 18px/28px inherit inherit"},text_md_regular:{font:"400 16px/24px inherit inherit"},text_sm_regular:{font:"400 14px/20px inherit inherit"},text_xs_regular:{font:"400 12px/18px inherit inherit"},text_2xs_regular:{font:"400 10px/14px inherit inherit"},text_xl_bold:{font:"700 20px/30px inherit inherit"},text_lg_bold:{font:"700 18px/28px inherit inherit"},text_md_bold:{font:"700 16px/24px inherit inherit"},text_sm_bold:{font:"700 14px/20px inherit inherit"},text_xs_bold:{font:"700 12px/18px inherit inherit"},text_2xs_bold:{font:"700 10px/14px inherit inherit"},text_xl_semibold:{font:"600 20px/30px inherit inherit"},text_lg_semibold:{font:"600 18px/28px inherit inherit"},text_md_semibold:{font:"600 16px/24px inherit inherit"},text_sm_semibold:{font:"600 14px/20px inherit inherit"},text_xs_semibold:{font:"600 12px/18px inherit inherit"},text_2xs_semibold:{font:"600 10px/14px inherit inherit"},text_xl_thin:{font:"100 20px/30px inherit inherit"},text_lg_thin:{font:"100 18px/28px inherit inherit"},text_md_thin:{font:"100 16px/24px inherit inherit"},text_sm_thin:{font:"100 14px/20px inherit inherit"},text_xs_thin:{font:"100 12px/18px inherit inherit"},text_2xs_thin:{font:"100 10px/14px inherit inherit"},header_2xl_regular:{font:"400 48px/60px inherit inherit"},header_xl_regular:{font:"400 42px/54px inherit inherit"},header_lg_regular:{font:"400 36px/46px inherit inherit"},header_md_regular:{font:"400 30px/38px inherit inherit"},header_sm_regular:{font:"400 26px/34px inherit inherit"},header_xs_regular:{font:"400 22px/30px inherit inherit"},header_2xl_bold:{font:"700 48px/60px inherit inherit"},header_xl_bold:{font:"700 42px/54px inherit inherit"},header_lg_bold:{font:"700 36px/46px inherit inherit"},header_md_bold:{font:"700 30px/38px inherit inherit"},header_sm_bold:{font:"700 26px/34px inherit inherit"},header_xs_bold:{font:"700 22px/30px inherit inherit"}};var v=(e,t="light",o)=>{let n=t==="dark",r=(0,H.createTheme)({palette:{mode:t}});return(0,H.createTheme)(r,{palette:{primary:{...r.palette.primary,main:e},brand:r.palette.augmentColor({color:{main:e}}),neutral:r.palette.augmentColor({color:{main:s().neutral}}),accent:r.palette.augmentColor({color:{main:s().accent}}),muted:r.palette.augmentColor({color:{main:s().muted}}),...o?{secondary:{...r.palette.secondary,main:o}}:{},error:{...r.palette.error,main:s().error},warning:{...r.palette.warning,main:s().warning},success:{...r.palette.success,main:s().success},info:{...r.palette.info,main:s().info},background:n?{...r.palette.background,default:"#1C1C1E",paper:"#2C2C2E"}:{...r.palette.background,default:"#F2F2F7",paper:"#FFFFFF"},divider:n?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.12)"},components:{...I,MuiTypography:pe},typography:{...de,fontFamily:'var(--app-font-family, "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)'},shape:{borderRadius:24}})};var ye=require("react"),z=require("@emotion/react"),be=require("@mui/material/styles");var Y=e=>/^#([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$/.test(e),S=e=>{if(!Y(e))return console.error("Invalid hex color provided:",e),s().fontDark;let t=e.slice(1),o=t.length===3?t.split("").map(x=>x+x).join(""):t,n=Number.parseInt(o.slice(0,2),16),r=Number.parseInt(o.slice(2,4),16),i=Number.parseInt(o.slice(4,6),16),d=Math.round((n*299+r*587+i*114)/1e3),a=s();return d>128?a.fontDark:a.fontLight},me=e=>S(e)===s().fontLight;var ue=()=>{let e=new Date().getHours();return e>=5&&e<12?"Good morning":e>12&&e<18?"Good afternoon":"Good evening"};var ce=e=>{let t=e.getFullYear(),o=String(e.getMonth()+1).padStart(2,"0"),n=String(e.getDate()).padStart(2,"0");return`${t}-${o}-${n}`};var Ye=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("windows nt")?"Windows":e.includes("iphone")||e.includes("ipad")||e.includes("ipod")?"iOS":e.includes("mac")?"macOS":e.includes("android")?"Android":e.includes("linux")?"Linux":"Unknown"},Ve=()=>{let e=(typeof navigator=="undefined"?"":navigator.userAgent).toLowerCase();return e.includes("edg")?"Edge":e.includes("chrome")?"Chrome":e.includes("firefox")?"Firefox":e.includes("safari")?"Safari":"Unknown"},fe={os:typeof navigator=="undefined"?"Unknown":Ye(),browser:typeof navigator=="undefined"?"Unknown":Ve()};var A=(e,t)=>{switch(e){case"light":return!1;case"dark":return!0;case"system":return t==="dark";default:return!1}};var he=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=Math.floor((n.getTime()-e.getTime())/1e3),i=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(r<60)return i.format(-r,"second");if(r<3600){let a=Math.floor(r/60);return i.format(-a,"minute")}if(r<86400){let a=Math.floor(r/3600);return i.format(-a,"hour")}let d=Math.floor(r/86400);return i.format(-d,"day")},xe=(e,t)=>{let o=t!=null?t:typeof navigator=="undefined"?"en-US":navigator.language,n=new Date;e=new Date(e);let r=(e.getTime()-n.getTime())/1e3,i=Math.floor(r/(60*60)),d=Math.floor((r-60*60*i)/60),a=Math.floor(r-60*60*i-60*d),x=new Intl.RelativeTimeFormat(o,{numeric:"auto"});if(d===0&&a<60)return x.format(a,"second");if(i===0&&d<60)return x.format(d,"minute");if(i<24){let w=`${new Intl.RelativeTimeFormat(o,{numeric:"auto"}).format(i,"hour")}`,b=` ${new Intl.RelativeTimeFormat(o,{localeMatcher:"lookup",numeric:"always",style:"long"}).format(d,"minute")}`.replace(/^\D+/,"");return`${w} ${b}`}let y=Math.floor(a/86400);return x.format(y,"day")};var L=require("react"),ge=(e=768)=>{let[t,o]=(0,L.useState)(!1);return(0,L.useEffect)(()=>{let n=()=>{o(window.innerWidth<e)};n();let r=()=>n();return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}},[e]),t};var $=require("react"),B=()=>{let[e,t]=(0,$.useState)("unknown");return(0,$.useEffect)(()=>{let o=r=>{t(r.matches?"dark":"light")},n=globalThis.matchMedia("(prefers-color-scheme: dark)");return t(n.matches?"dark":"light"),n.addEventListener("change",o),()=>{n.removeEventListener("change",o)}},[]),e};var _e=require("react/jsx-runtime"),W=({fontFamily:e})=>{let t=(0,be.useTheme)(),o=t.palette.mode==="dark",n=t.palette.primary.main,r=t.palette.background.default,i=(0,ye.useMemo)(()=>S(n),[n]);return(0,_e.jsx)(z.Global,{styles:z.css`
         /* Allow application to control font via CSS var or prop */
         :root {
           ${e?`--app-font-family: ${e};`:""}
         }
         * {
-          font-family: var(
-            --app-font-family,
-            "Mulish",
-            system-ui,
-            -apple-system,
-            "Segoe UI",
-            Roboto,
-            Arial
-          ),sans-serif !important;
+          font-family:
+            var(
+              --app-font-family,
+              "Mulish",
+              system-ui,
+              -apple-system,
+              "Segoe UI",
+              Roboto,
+              Arial
+            ),
+            sans-serif !important;
           -webkit-tap-highlight-color: transparent;
           &::selection {
             background-color: ${`${n}e1`};
@@ -169,7 +171,7 @@
           border-radius: 42px 42px 0 0;
           z-index: 9999999;
         }
-      `})};var h=require("@emotion/react"),Se=h.keyframes`
+      `})};var h=require("@emotion/react"),ve=h.keyframes`
   from {
     opacity: 0;
     transform: translateX(-40px);
@@ -178,35 +180,35 @@
     opacity: 1;
     transform: translateX(0);
   }
-`,Me=h.keyframes`
+`,ke=h.keyframes`
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-`,Pe=h.keyframes`
+`,we=h.keyframes`
   from {
     transform: translateX(-100%);
   }
   to {
     transform: translateX(0);
   }
-`,Re=h.keyframes`
+`,Te=h.keyframes`
   from {
     transform: translateY(100%);
   }
   to {
     transform: translateY(0);
   }
-`,Oe=h.keyframes`
+`,Ce=h.keyframes`
   from {
     transform: scale(0);
   }
   to {
     transform: scale(1);
   }
-`,Ie=(e,t=12)=>h.keyframes`
+`,Se=(e,t=12)=>h.keyframes`
   0% {
     transform: scale(0.95);
     box-shadow: 0 0 0 0 ${e}b2;
@@ -219,7 +221,7 @@
     transform: scale(0.95);
     box-shadow: 0 0 0 0 ${e}00;
   }
-`,De=e=>h.keyframes`
+`,Me=e=>h.keyframes`
   0% {
     filter: none;
   }
@@ -229,7 +231,7 @@
   100% {
     filter: none;
   }
-`,Fe=h.keyframes`
+`,Pe=h.keyframes`
   0% {
     transform: scale(1);
     opacity: 1;
@@ -242,7 +244,7 @@
     transform: scale(1);
     opacity: 1;
   }
-`,Ee=h.keyframes`
+`,Re=h.keyframes`
   0% {
     transform: translateY(0);
   }
@@ -258,5 +260,5 @@
   100% {
     transform: translateY(0);
   }
-`;var T=require("react/jsx-runtime"),$e=({children:e,fontFamily:t,primaryColor:o,themeConfigOverride:n,colorPaletteOverride:r,customColors:i})=>{let p=U();(0,d.useEffect)(()=>{$(r)},[r]);let[a,x]=(0,d.useState)("system"),[y,S]=(0,d.useState)("auto");(0,d.useEffect)(()=>{if(globalThis.window!==void 0)try{let s=globalThis.localStorage.getItem("appSettings");if(s){let m=JSON.parse(s);m.theme&&x(m.theme),m.darkMode&&S(m.darkMode)}}catch(s){}},[]),(0,d.useEffect)(()=>{if(globalThis.window!==void 0)try{globalThis.localStorage.setItem("appSettings",JSON.stringify({theme:a,darkMode:y}))}catch(s){}},[a,y]);let _=(0,d.useMemo)(()=>n&&Object.keys(n).length>0?Object.entries(n).map(([s,m])=>({name:s,MuiTheme:b(m.primaryColor)})):o?[{name:"Custom",MuiTheme:b(o)}]:z,[n,o]),j=(0,d.useMemo)(()=>{var s;return a==="system"||p==="unknown"?_[0].MuiTheme:((s=_.find(m=>m.name===a))==null?void 0:s.MuiTheme)||_[0].MuiTheme},[p,a,_]),M=(0,d.useMemo)(()=>W(y,p)?"dark":"light",[y,p]),P=(0,d.useMemo)(()=>{var m,R;let s=(R=(m=j.palette)==null?void 0:m.secondary)==null?void 0:R.main;return b(j.palette.primary.main,M,s)},[j,M]),Be=(0,d.useMemo)(()=>{if(!i||Object.keys(i).length===0)return P;let s={...P,palette:{...P.palette}},m={};for(let[R,We]of Object.entries(i))m[R]=s.palette.augmentColor({color:{main:We}});return s.palette.custom=m,s},[P,i]),ze=(0,d.useMemo)(()=>({darkMode:M==="dark"}),[M]);return(0,T.jsx)(J.Provider,{value:{theme:a,darkMode:y,setTheme:x,setDarkMode:S},children:(0,T.jsx)(Le.ThemeProvider,{theme:Be,children:(0,T.jsxs)(Ae.ThemeProvider,{theme:ze,children:[(0,T.jsx)(Y,{fontFamily:t}),e]})})})};0&&(module.exports={ColorPalette,DialogBtn,ErrorBoundary,GlobalStyles,Loading,PathName,ThemeProviderWrapper,commonComponentProps,createCustomTheme,darkModeOptions,defaultColorPalette,displayGreeting,fadeIn,fadeInLeft,getColorPalette,getDayIdentifier,getFontColor,installAppAnimation,isDarkMode,isFontLight,isHexColor,logoutAnimation,progressPulse,pulseAnimation,scale,setColorPaletteOverride,slideIn,slideInBottom,systemInfo,themeConfig,themes,timeAgo,timeAgoFromStart,useResponsiveDisplay,useSystemTheme,useThemeSettings});
+`;var k=require("react/jsx-runtime"),Fe=({children:e,fontFamily:t,themes:o,colorPaletteOverride:n})=>{let r=B();(0,p.useEffect)(()=>{E(n)},[n]);let[i,d]=(0,p.useState)("system"),[a,x]=(0,p.useState)("auto");(0,p.useEffect)(()=>{if(globalThis.window!==void 0)try{let c=globalThis.localStorage.getItem("appSettings");if(c){let l=JSON.parse(c);l.theme&&d(l.theme),l.darkMode&&x(l.darkMode)}}catch(c){}},[]),(0,p.useEffect)(()=>{if(globalThis.window!==void 0)try{globalThis.localStorage.setItem("appSettings",JSON.stringify({theme:i,darkMode:a}))}catch(c){}},[i,a]);let y=(0,p.useMemo)(()=>{if(o&&o.length>0)return o.map(l=>({name:l.name,MuiTheme:v(l.primaryColor,"light",l.secondaryColor)}));let c=s().brand;return[{name:"Default",MuiTheme:v(c,"light")}]},[o]),w=(0,p.useMemo)(()=>{var c;return i==="system"||r==="unknown"?y[0].MuiTheme:((c=y.find(l=>l.name===i))==null?void 0:c.MuiTheme)||y[0].MuiTheme},[r,i,y]),b=(0,p.useMemo)(()=>A(a,r)?"dark":"light",[a,r]),Ie=(0,p.useMemo)(()=>{var l,V;let c=(V=(l=w.palette)==null?void 0:l.secondary)==null?void 0:V.main;return v(w.palette.primary.main,b,c)},[w,b]),Ee=(0,p.useMemo)(()=>({darkMode:b==="dark"}),[b]);return(0,k.jsx)(U.Provider,{value:{theme:i,darkMode:a,setTheme:d,setDarkMode:x},children:(0,k.jsx)(Oe.ThemeProvider,{theme:Ie,children:(0,k.jsxs)(De.ThemeProvider,{theme:Ee,children:[(0,k.jsx)(W,{fontFamily:t}),e]})})})};0&&(module.exports={ColorPalette,DialogBtn,ErrorBoundary,GlobalStyles,Loading,PathName,ThemeProviderWrapper,commonComponentProps,createCustomTheme,darkModeOptions,defaultColorPalette,displayGreeting,fadeIn,fadeInLeft,getColorPalette,getDayIdentifier,getFontColor,installAppAnimation,isDarkMode,isFontLight,isHexColor,logoutAnimation,progressPulse,pulseAnimation,scale,setColorPaletteOverride,slideIn,slideInBottom,systemInfo,timeAgo,timeAgoFromStart,useResponsiveDisplay,useSystemTheme,useThemeSettings});
 //# sourceMappingURL=index.js.map