@codebit-programando-solucoes/codebit-web-antd 1.1.40 → 1.1.41

package/dist/index.cjs

@@ -298,10 +298,11 @@ var __webpack_exports__ = {};
         LoggedMainContainer: ()=>LoggedMainContainer,
         CodebitThemeProvider: ()=>CodebitThemeProvider,
         Login: ()=>Login,
-        useErrorModal: ()=>useErrorModal,
+        UserMenu: ()=>UserMenu,
         ErrorRetry: ()=>ErrorRetry,
         CodebitThemeContext: ()=>CodebitThemeContext,
         LocalLoginChangePasswordResult: ()=>LocalLoginChangePasswordResult,
+        useErrorModal: ()=>useErrorModal,
         ChangePassword: ()=>ChangePassword,
         ListCard: ()=>ListCard,
         ForgotPassword: ()=>ForgotPassword,
@@ -326,6 +327,9 @@ var __webpack_exports__ = {};
                 logout: 'Sair',
                 version: 'Versão'
             },
+            UserMenu: {
+                openMenu: 'Abrir menu do usuário'
+            },
             HandleError: {
                 notFoundTitle: 'Página não encontrada',
                 forbiddenTitle: 'Acesso negado',
@@ -391,7 +395,7 @@ var __webpack_exports__ = {};
                 passwordUpperCase: 'uma letra maiúscula',
                 passwordLowerCase: 'uma letra minúscula',
                 passwordNumbers: 'um número',
-                passwordSpecialChars: 'um caractere especial (!@#$%^&*)',
+                passwordSpecialChars: 'um caractere especial (ex: !@#$%=+)',
                 passwordWeak: 'Senha fraca: Deve ter pelo menos {{requirements}}',
                 passwordsNotMatch: 'As senhas digitadas não coincidem!',
                 tokenInvalidTitle: 'Token inválido',
@@ -467,6 +471,9 @@ var __webpack_exports__ = {};
                 logout: 'Logout',
                 version: 'Version'
             },
+            UserMenu: {
+                openMenu: 'Open user menu'
+            },
             HandleError: {
                 notFoundTitle: 'Page not found',
                 forbiddenTitle: 'Access denied',
@@ -532,7 +539,7 @@ var __webpack_exports__ = {};
                 passwordUpperCase: 'an uppercase letter',
                 passwordLowerCase: 'a lowercase letter',
                 passwordNumbers: 'a number',
-                passwordSpecialChars: 'a special character (!@#$%^&*)',
+                passwordSpecialChars: 'a special character (e.g. !@#$%=+)',
                 passwordWeak: 'Weak password: Must have at least {{requirements}}',
                 passwordsNotMatch: 'The passwords do not match!',
                 tokenInvalidTitle: 'Invalid Token',
@@ -613,7 +620,7 @@ var __webpack_exports__ = {};
     const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
     const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
     const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
+    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, userMenuItems, doLogout, checkLogin, onMenuClick }) {
         const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
         const [user, setUser] = (0, external_react_.useState)(null);
         const logout = async ()=>{
@@ -658,6 +665,7 @@ var __webpack_exports__ = {};
                 secondarySidebar,
                 secondarySidebarWidth,
                 bottomMenuItems,
+                userMenuItems,
                 onMenuClick
             }), [
             menuItems,
@@ -668,6 +676,7 @@ var __webpack_exports__ = {};
             secondarySidebar,
             secondarySidebarWidth,
             bottomMenuItems,
+            userMenuItems,
             onMenuClick
         ]);
         return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
@@ -683,10 +692,119 @@ var __webpack_exports__ = {};
         secondarySidebar: external_prop_types_default().func,
         secondarySidebarWidth: external_prop_types_default().number,
         bottomMenuItems: external_prop_types_default().func,
+        userMenuItems: external_prop_types_default().func,
         doLogout: external_prop_types_default().func.isRequired,
         checkLogin: external_prop_types_default().func.isRequired,
         onMenuClick: external_prop_types_default().func
     };
+    const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
+    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
+        const hasLoaded = (0, external_react_.useRef)(false);
+        const [isDarkMode, setIsDarkMode] = (0, external_react_.useState)(()=>{
+            if (forcedTheme) return 'dark' === forcedTheme;
+            try {
+                if (storeThemeInLocalStorage) {
+                    const savedTheme = localStorage?.getItem('theme');
+                    if (null !== savedTheme) return 'dark' === savedTheme;
+                }
+                return globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+            } finally{
+                hasLoaded.current = true;
+            }
+        });
+        (0, external_react_.useEffect)(()=>{
+            if (forcedTheme) {
+                const mode = 'dark' === forcedTheme;
+                setIsDarkMode(mode);
+            }
+        }, [
+            forcedTheme
+        ]);
+        const toggleTheme = ()=>{
+            setIsDarkMode((prev)=>!prev);
+        };
+        (0, external_react_.useEffect)(()=>{
+            const target = document.getElementById(containerId);
+            if (!target) return;
+            if (isDarkMode) {
+                document.documentElement.classList.add('dark-theme');
+                target.classList.add('dark-theme');
+            } else {
+                document.documentElement.classList.remove('dark-theme');
+                target.classList.remove('dark-theme');
+            }
+            document.documentElement.style.setProperty('--color-primary', isDarkMode ? '#589C75' : '#29D266');
+        }, [
+            isDarkMode,
+            containerId
+        ]);
+        (0, external_react_.useEffect)(()=>{
+            if (hasLoaded.current && storeThemeInLocalStorage) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            if (hasLoaded.current && storeThemeInLocalStorage && !forcedTheme) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+        }, [
+            isDarkMode,
+            storeThemeInLocalStorage,
+            forcedTheme
+        ]);
+        const themeContextValue = (0, external_react_.useMemo)(()=>({
+                isDarkMode,
+                toggleTheme,
+                setIsDarkMode
+            }), [
+            isDarkMode
+        ]);
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitThemeContext.Provider, {
+            value: themeContextValue,
+            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.ConfigProvider, {
+                theme: {
+                    algorithm: isDarkMode ? external_antd_namespaceObject.theme.darkAlgorithm : external_antd_namespaceObject.theme.defaultAlgorithm,
+                    token: {
+                        colorPrimary: isDarkMode ? '#589C75' : '#29D266',
+                        colorInfo: isDarkMode ? '#589C75' : '#29D266',
+                        colorLink: isDarkMode ? '#589C75' : '#29D266'
+                    },
+                    components: {
+                        Menu: {
+                            itemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
+                            itemSelectedColor: '#FAFAFA',
+                            darkItemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
+                            darkItemSelectedColor: '#FAFAFA'
+                        },
+                        Button: {
+                            colorPrimary: isDarkMode ? '#589C75' : '#29D266',
+                            colorPrimaryHover: isDarkMode ? '#6DB589' : '#3FE67F',
+                            colorPrimaryActive: isDarkMode ? '#4A8361' : '#1FBF4D'
+                        },
+                        Layout: {
+                            siderBg: isDarkMode ? '#1a1a1a' : '#001529',
+                            triggerBg: isDarkMode ? '#589C75' : '#29D266',
+                            triggerColor: '#FAFAFA'
+                        },
+                        Header: {
+                            colorPrimary: isDarkMode ? '#589C75' : '#29D266'
+                        }
+                    }
+                },
+                ...props,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {
+                        containerId: containerId
+                    }),
+                    children
+                ]
+            })
+        });
+    };
+    CodebitThemeProvider.propTypes = {
+        children: external_prop_types_default().node.isRequired,
+        storeThemeInLocalStorage: external_prop_types_default().bool,
+        containerId: external_prop_types_default().string,
+        forcedTheme: external_prop_types_default().oneOf([
+            'dark',
+            'light',
+            null
+        ])
+    };
     const ThemeToggle = ()=>{
         const config = (0, external_react_.useContext)(CodebitThemeContext);
         if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
@@ -725,1167 +843,1220 @@ var __webpack_exports__ = {};
     const useCodebitWebAntdTranslation = ()=>(0, external_react_i18next_namespaceObject.useTranslation)('codebitWebAntd', {
             i18n: i18n
         });
-    function useErrorMessage() {
-        const { t } = useCodebitWebAntdTranslation();
-        const getErrorMessage = (error)=>{
-            let status = 'error';
-            const responseStatus = error?.response?.status || null;
-            let errorMessage = t('Error.defaultError');
-            let retryText = t('Error.retryButton');
-            let onRetryAction = null;
-            if (error?.errorCode) switch(error.errorCode){
-                case codebit_web_namespaceObject.ErrorCode.ERR_NETWORK:
-                    errorMessage = t('Error.networkError');
-                    break;
-                case codebit_web_namespaceObject.ErrorCode.ERR_TIMEOUT:
-                    errorMessage = t('Error.timeoutError');
-                    break;
-            }
-            else if (responseStatus) switch(responseStatus){
-                case 400:
-                    errorMessage = t('Error.badRequestError');
-                    break;
-                case 403:
-                    errorMessage = t('Error.forbiddenError');
-                    retryText = t('Error.reloadPageButton');
-                    status = 403;
-                    onRetryAction = ()=>{
-                        globalThis.location.reload();
-                    };
-                    break;
-                case 404:
-                    errorMessage = t('Error.notFoundError');
-                    status = 404;
-                    break;
-                case 500:
-                    errorMessage = t('Error.internalServerError');
-                    status = 500;
-                    break;
-                case 401:
-                    errorMessage = t('Error.sessionExpiredError');
-                    retryText = t('Error.reloadPageButton');
-                    onRetryAction = ()=>{
-                        globalThis.location.reload();
-                    };
-                    break;
-            }
-            return {
-                errorMessage,
-                status,
-                retryText,
-                onRetryAction
-            };
-        };
-        return {
-            getErrorMessage
-        };
-    }
-    const ErrorRetry_logger = new codebit_web_namespaceObject.Logger('ErrorRetry');
-    function ErrorRetry({ error, onRetry }) {
-        if (error && error instanceof Error) {
-            ErrorRetry_logger.error('Fail to load.', error);
-            react_namespaceObject.captureException(error);
-        }
-        const { getErrorMessage } = useErrorMessage();
-        const { status, errorMessage, retryText, onRetryAction } = getErrorMessage(error);
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Card, {
-            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Result, {
-                status: status,
-                title: errorMessage,
-                extra: [
-                    /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                        type: 'primary',
-                        onClick: onRetryAction ?? onRetry,
-                        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.ReloadOutlined, {}),
-                        children: retryText
-                    }, 'retry')
-                ]
-            })
-        });
-    }
-    ErrorRetry.propTypes = {
-        error: external_prop_types_default().object.isRequired,
-        onRetry: external_prop_types_default().func.isRequired
-    };
-    const ListCard_module = {
-        listCard: "listCard-ISftFd",
-        headerRow: "headerRow-UsZAzP",
-        actions: "actions-ig53s2",
-        filtersRow: "filtersRow-f3Xk5a",
-        expandArea: "expandArea-czOoFS"
+    const UserMenu_module = {
+        trigger: "trigger-tlcps4",
+        avatar: "avatar-Tmnqa_",
+        caret: "caret-OWS8_0",
+        panel: "panel-GCcfCo",
+        userInfo: "userInfo-fDuDn1",
+        userName: "userName-sIs1iq",
+        userSubtitle: "userSubtitle-Fflhaw",
+        divider: "divider-JJjJVy",
+        menu: "menu-cuORr_"
     };
-    const { Title } = external_antd_namespaceObject.Typography;
-    function ListCard({ title, onClearFilters, headerContainer, tableContainer, actions }) {
-        const { token } = external_antd_namespaceObject.theme.useToken();
-        const { t } = (0, external_react_i18next_namespaceObject.useTranslation)('codebitWebAntd');
-        const margin = token['margin'];
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Card, {
-            className: ListCard_module.listCard,
+    const OPEN_KEYS = new Set([
+        'Enter',
+        ' '
+    ]);
+    const { Text } = external_antd_namespaceObject.Typography;
+    function getInitials(name) {
+        const parts = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+        if (0 === parts.length) return '';
+        const first = [
+            ...parts[0]
+        ];
+        if (1 === parts.length) return first.slice(0, 2).join('').toUpperCase();
+        const last = [
+            ...parts.at(-1)
+        ];
+        return `${first[0]}${last[0]}`.toUpperCase();
+    }
+    function UserMenuPanel({ user, items, onItemClick }) {
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+            className: UserMenu_module.panel,
             children: [
-                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Row, {
-                    gutter: margin,
-                    align: 'middle',
-                    className: ListCard_module.headerRow,
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                    className: UserMenu_module.userInfo,
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Col, {
-                            xs: 24,
-                            sm: 24,
-                            md: 12,
-                            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(Title, {
-                                level: 4,
-                                children: title
-                            })
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
+                            className: UserMenu_module.userName,
+                            strong: true,
+                            children: user?.name
                         }),
-                        (!!onClearFilters || !!actions) && /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Col, {
-                            xs: 24,
-                            sm: 24,
-                            md: 12,
-                            className: ListCard_module.actions,
-                            children: [
-                                !!onClearFilters && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.ClearOutlined, {}),
-                                    onClick: onClearFilters,
-                                    children: t('ListCard.clearFilters')
-                                }),
-                                actions
-                            ]
+                        user?.subtitle && /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
+                            className: UserMenu_module.userSubtitle,
+                            type: 'secondary',
+                            children: user.subtitle
                         })
                     ]
                 }),
-                !!headerContainer && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Row, {
-                    gutter: margin,
-                    className: ListCard_module.filtersRow,
-                    children: headerContainer
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Divider, {
+                    className: UserMenu_module.divider
                 }),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout, {
-                    className: ListCard_module.expandArea,
-                    children: tableContainer
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
+                    className: UserMenu_module.menu,
+                    items: items,
+                    onClick: ({ key })=>onItemClick?.(key)
                 })
             ]
         });
     }
-    ListCard.propTypes = {
-        title: external_prop_types_default().string.isRequired,
-        onClearFilters: external_prop_types_default().func,
-        headerContainer: external_prop_types_default().node,
-        tableContainer: external_prop_types_default().node,
-        actions: external_prop_types_default().node
+    UserMenuPanel.propTypes = {
+        user: external_prop_types_default().shape({
+            name: external_prop_types_default().string,
+            subtitle: external_prop_types_default().string
+        }),
+        items: external_prop_types_default().arrayOf(external_prop_types_default().object).isRequired,
+        onItemClick: external_prop_types_default().func
     };
-    ListCard.defaultProps = {
-        onClearFilters: null,
-        headerContainer: null,
-        tableContainer: null,
-        actions: null
-    };
-    const CssTokenBridge = ({ containerId })=>{
-        const { token } = external_antd_namespaceObject.theme.useToken();
-        (0, external_react_.useLayoutEffect)(()=>{
-            const root = containerId ? document.getElementById(containerId) ?? document.documentElement : document.documentElement;
-            root.style.setProperty('--antd-color-bg-base', token['colorBgBase']);
-            root.style.setProperty('--antd-color-bg-container', token['colorBgContainer']);
-            root.style.setProperty('--antd-color-bg-elevated', token['colorBgElevated']);
-            root.style.setProperty('--antd-color-bg-layout', token['colorBgLayout']);
-            root.style.setProperty('--antd-color-bg-mask', token['colorBgMask']);
-            root.style.setProperty('--antd-color-bg-spotlight', token['colorBgSpotlight']);
-            root.style.setProperty('--antd-color-primary', token['colorPrimary']);
-            root.style.setProperty('--antd-color-success', token['colorSuccess']);
-            root.style.setProperty('--antd-color-success-bg', token['colorSuccessBg']);
-            root.style.setProperty('--antd-color-success-border', token['colorSuccessBorder']);
-            root.style.setProperty('--antd-color-success-text', token['colorSuccessText']);
-            root.style.setProperty('--antd-color-warning', token['colorWarning']);
-            root.style.setProperty('--antd-color-warning-bg', token['colorWarningBg']);
-            root.style.setProperty('--antd-color-warning-border', token['colorWarningBorder']);
-            root.style.setProperty('--antd-color-warning-text', token['colorWarningText']);
-            root.style.setProperty('--antd-color-error', token['colorError']);
-            root.style.setProperty('--antd-color-error-bg', token['colorErrorBg']);
-            root.style.setProperty('--antd-color-error-border', token['colorErrorBorder']);
-            root.style.setProperty('--antd-color-error-text', token['colorErrorText']);
-            root.style.setProperty('--antd-color-info', token['colorInfo']);
-            root.style.setProperty('--antd-color-info-bg', token['colorInfoBg']);
-            root.style.setProperty('--antd-color-info-border', token['colorInfoBorder']);
-            root.style.setProperty('--antd-color-info-text', token['colorInfoText']);
-            root.style.setProperty('--antd-color-text', token['colorText']);
-            root.style.setProperty('--antd-color-text-secondary', token['colorTextSecondary']);
-            root.style.setProperty('--antd-color-text-tertiary', token['colorTextTertiary']);
-            root.style.setProperty('--antd-color-text-quaternary', token['colorTextQuaternary']);
-            root.style.setProperty('--antd-color-text-disabled', token['colorTextDisabled']);
-            root.style.setProperty('--antd-color-border', token['colorBorder']);
-            root.style.setProperty('--antd-color-border-secondary', token['colorBorderSecondary']);
-            root.style.setProperty('--antd-color-border-hover', token['colorBorderHover']);
-            root.style.setProperty('--antd-color-border-secondary-hover', token['colorBorderSecondaryHover']);
-            root.style.setProperty('--antd-color-border-disabled', token['colorBorderDisabled']);
-            root.style.setProperty('--antd-color-split', token['colorSplit']);
-            root.style.setProperty('--antd-color-link', token['colorLink']);
-            root.style.setProperty('--antd-color-link-hover', token['colorLinkHover']);
-            root.style.setProperty('--antd-color-link-active', token['colorLinkActive']);
-            root.style.setProperty('--antd-color-fill', token['colorFill']);
-            root.style.setProperty('--antd-color-fill-secondary', token['colorFillSecondary']);
-            root.style.setProperty('--antd-color-fill-tertiary', token['colorFillTertiary']);
-            root.style.setProperty('--antd-color-fill-quaternary', token['colorFillQuaternary']);
-            root.style.setProperty('--antd-color-fill-content', token['colorFillContent']);
-            root.style.setProperty('--antd-color-fill-content-hover', token['colorFillContentHover']);
-            root.style.setProperty('--antd-color-fill-content-selected', token['colorFillContentSelected']);
-            root.style.setProperty('--antd-color-fill-alter', token['colorFillAlter']);
-            root.style.setProperty('--antd-color-fill-alter-hover', token['colorFillAlterHover']);
-            root.style.setProperty('--antd-color-fill-alter-active', token['colorFillAlterActive']);
-            root.style.setProperty('--antd-color-fill-alter-selected', token['colorFillAlterSelected']);
-            root.style.setProperty('--antd-color-fill-alter-disabled', token['colorFillAlterDisabled']);
-            root.style.setProperty('--antd-color-white', token['colorWhite']);
-            root.style.setProperty('--antd-color-black', token['colorBlack']);
-            root.style.setProperty('--antd-margin-xxs', `${token['marginXXS']}px`);
-            root.style.setProperty('--antd-margin-xs', `${token['marginXS']}px`);
-            root.style.setProperty('--antd-margin-sm', `${token['marginSM']}px`);
-            root.style.setProperty('--antd-margin', `${token['margin']}px`);
-            root.style.setProperty('--antd-margin-md', `${token['marginMD']}px`);
-            root.style.setProperty('--antd-margin-lg', `${token['marginLG']}px`);
-            root.style.setProperty('--antd-margin-xl', `${token['marginXL']}px`);
-            root.style.setProperty('--antd-margin-xxl', `${token['marginXXL']}px`);
-            root.style.setProperty('--antd-padding-xxs', `${token['paddingXXS']}px`);
-            root.style.setProperty('--antd-padding-xs', `${token['paddingXS']}px`);
-            root.style.setProperty('--antd-padding-sm', `${token['paddingSM']}px`);
-            root.style.setProperty('--antd-padding', `${token['padding']}px`);
-            root.style.setProperty('--antd-padding-md', `${token['paddingMD']}px`);
-            root.style.setProperty('--antd-padding-lg', `${token['paddingLG']}px`);
-            root.style.setProperty('--antd-padding-xl', `${token['paddingXL']}px`);
-            root.style.setProperty('--antd-font-size-xxs', '8px');
-            root.style.setProperty('--antd-font-size-xs', '10px');
-            root.style.setProperty('--antd-font-size-sm', `${token['fontSizeSM']}px`);
-            root.style.setProperty('--antd-font-size', `${token['fontSize']}px`);
-            root.style.setProperty('--antd-font-size-lg', `${token['fontSizeLG']}px`);
-            root.style.setProperty('--antd-font-size-xl', `${token['fontSizeXL']}px`);
-            root.style.setProperty('--antd-font-size-xxl', `${token['fontSizeXXL']}px`);
-            root.style.setProperty('--antd-font-size-heading1', `${token['fontSizeHeading1']}px`);
-            root.style.setProperty('--antd-font-size-heading2', `${token['fontSizeHeading2']}px`);
-            root.style.setProperty('--antd-font-size-heading3', `${token['fontSizeHeading3']}px`);
-            root.style.setProperty('--antd-font-size-heading4', `${token['fontSizeHeading4']}px`);
-            root.style.setProperty('--antd-font-size-heading5', `${token['fontSizeHeading5']}px`);
-            root.style.setProperty('--antd-line-height', token['lineHeight']);
-            root.style.setProperty('--antd-line-height-lg', token['lineHeightLG']);
-            root.style.setProperty('--antd-control-height-sm', `${token['controlHeightSM']}px`);
-            root.style.setProperty('--antd-control-height', `${token['controlHeight']}px`);
-            root.style.setProperty('--antd-control-height-lg', `${token['controlHeightLG']}px`);
-            root.style.setProperty('--antd-border-radius-sm', `${token['borderRadiusSM']}px`);
-            root.style.setProperty('--antd-border-radius', `${token['borderRadius']}px`);
-            root.style.setProperty('--antd-border-radius-lg', `${token['borderRadiusLG']}px`);
-        }, [
-            containerId,
-            token
-        ]);
-        return null;
-    };
-    CssTokenBridge.propTypes = {
-        containerId: external_prop_types_default().string
-    };
-    const TableContainer_module = {
-        tableContainer: "tableContainer-EhNwOm"
-    };
-    function isPaginationNode(node) {
-        if (node.nodeType !== Node.ELEMENT_NODE) return false;
-        const element = node;
-        return element.classList?.contains('ant-table-pagination') || element.querySelector?.('.ant-table-pagination');
-    }
-    function hasPaginationInMutation(mutation) {
-        return Array.from(mutation.addedNodes).some(isPaginationNode);
-    }
-    function TableContainer({ children }) {
-        const containerRef = (0, external_react_.useRef)(null);
-        const containerHeightRef = (0, external_react_.useRef)(null);
-        const [scrollY, setScrollY] = (0, external_react_.useState)(void 0);
-        (0, external_react_.useLayoutEffect)(()=>{
-            const calculateHeights = ()=>{
-                if (!containerRef.current) return;
-                containerHeightRef.current = containerRef.current.offsetHeight;
-                const thead = containerRef.current.querySelector('thead');
-                let theadHeight = 0;
-                if (thead) {
-                    const rect = thead.getBoundingClientRect();
-                    const styles = globalThis.getComputedStyle(thead);
-                    const marginTop = Number.parseFloat(styles.marginTop) || 0;
-                    const marginBottom = Number.parseFloat(styles.marginBottom) || 0;
-                    theadHeight = rect.height + marginTop + marginBottom;
-                }
-                const pagination = containerRef.current.querySelector('.ant-table-pagination');
-                let paginationHeight = 0;
-                if (pagination) {
-                    const rect = pagination.getBoundingClientRect();
-                    const styles = globalThis.getComputedStyle(pagination);
-                    const marginTop = Number.parseFloat(styles.marginTop) || 0;
-                    const marginBottom = Number.parseFloat(styles.marginBottom) || 0;
-                    paginationHeight = rect.height + marginTop + marginBottom;
-                }
-                const availableHeight = Math.ceil(containerHeightRef.current) - Math.ceil(theadHeight) - Math.ceil(paginationHeight) - 1;
-                setScrollY(availableHeight);
-            };
-            calculateHeights();
-            const observer = new MutationObserver((mutations)=>{
-                const hasPagination = mutations.some(hasPaginationInMutation);
-                if (hasPagination) calculateHeights();
-            });
-            if (containerRef.current) observer.observe(containerRef.current, {
-                childList: true,
-                subtree: true
+    function createPopupRender(user, items, onItemClick) {
+        return ()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(UserMenuPanel, {
+                user: user,
+                items: items,
+                onItemClick: onItemClick
             });
-            globalThis.addEventListener('resize', calculateHeights);
-            return ()=>{
-                observer.disconnect();
-                globalThis.removeEventListener('resize', calculateHeights);
-            };
-        }, []);
-        const enhancedChildren = scrollY ? /*#__PURE__*/ (0, external_react_.cloneElement)(children, {
-            scroll: {
-                ...children.props?.scroll,
-                y: scrollY,
-                x: 'max-content'
-            }
-        }) : children;
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
-            ref: containerRef,
-            className: TableContainer_module.tableContainer,
-            children: enhancedChildren
-        });
     }
-    TableContainer.propTypes = {
-        children: external_prop_types_default().element.isRequired
-    };
-    function FilterContainer({ children, ...props }) {
-        const { token } = external_antd_namespaceObject.theme.useToken();
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Card, {
-            styles: {
-                body: {
-                    padding: token['paddingXS'] + 'px'
-                }
-            },
-            ...props,
-            children: children
+    function UserMenu({ user, items = [], onItemClick, caretIcon = /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.DownOutlined, {}) }) {
+        const { t } = useCodebitWebAntdTranslation();
+        const [open, setOpen] = (0, external_react_.useState)(false);
+        const initials = getInitials(user?.name);
+        const handleItemClick = (key)=>{
+            setOpen(false);
+            onItemClick?.(key);
+        };
+        const avatar = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Avatar, {
+            className: UserMenu_module.avatar,
+            children: initials || /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.UserOutlined, {})
+        });
+        if (!items.length) return avatar;
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Dropdown, {
+            trigger: [
+                'click'
+            ],
+            open: open,
+            onOpenChange: setOpen,
+            placement: 'bottomRight',
+            popupRender: createPopupRender(user, items, handleItemClick),
+            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                className: UserMenu_module.trigger,
+                role: 'button',
+                tabIndex: 0,
+                "aria-haspopup": 'menu',
+                "aria-expanded": open,
+                "aria-label": t('UserMenu.openMenu'),
+                onKeyDown: (event)=>{
+                    if (!OPEN_KEYS.has(event.key)) return;
+                    event.preventDefault();
+                    setOpen((wasOpen)=>!wasOpen);
+                },
+                children: [
+                    avatar,
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                        className: UserMenu_module.caret,
+                        children: caretIcon
+                    })
+                ]
+            })
         });
     }
-    FilterContainer.propTypes = {
-        children: external_prop_types_default().node.isRequired,
-        ...external_antd_namespaceObject.Card.propTypes
+    UserMenu.propTypes = {
+        user: external_prop_types_default().shape({
+            name: external_prop_types_default().string,
+            email: external_prop_types_default().string,
+            id: external_prop_types_default().string,
+            roles: external_prop_types_default().arrayOf(external_prop_types_default().string),
+            subtitle: external_prop_types_default().string
+        }),
+        items: external_prop_types_default().arrayOf(external_prop_types_default().object),
+        onItemClick: external_prop_types_default().func,
+        caretIcon: external_prop_types_default().node
     };
-    const external_date_fns_namespaceObject = require("date-fns");
-    const AudioPlayer_module = {
-        audioPlayer: "audioPlayer-a4xARM",
-        durationTimeContainer: "durationTimeContainer-kmkK6M",
-        slider: "slider-bdta4v"
+    const LoggedMainContainer_module = {
+        layout: "layout-mL5o6I",
+        drawer: "drawer-oj0mJX",
+        drawerBody: "drawerBody-YtAN37",
+        drawerFlex: "drawerFlex-AGTAax",
+        sider: "sider-BDy1Bs",
+        siderLayout: "siderLayout-C8H0uI",
+        secondarySidebar: "secondarySidebar-P6J_Xn",
+        menu: "menu-KMvPt7",
+        menuContainer: "menuContainer-ahnhBu",
+        menuLabel: "menuLabel-csBJTc",
+        menuDescription: "menuDescription-d6BFBO",
+        menuSpacer: "menuSpacer-RIB3II",
+        versionMenu: "versionMenu-NM4uyG",
+        bottomMenu: "bottomMenu-VtOktS",
+        header: "header-vgc67L",
+        mobile: "mobile-mKGxb5",
+        headerSpace: "headerSpace-Fd_iha",
+        headerDivider: "headerDivider-yfEwNN",
+        content: "content-OZHp2h"
     };
-    const AudioPlayer = ({ audioUrl })=>{
-        const [isMuted, setIsMuted] = (0, external_react_.useState)(false);
-        const [duration, setDuration] = (0, external_react_.useState)(0);
-        const [currentTime, setCurrentTime] = (0, external_react_.useState)(0);
-        const [isPlaying, setIsPlaying] = (0, external_react_.useState)(false);
+    const { Header, Sider, Content } = external_antd_namespaceObject.Layout;
+    const { Text: LoggedMainContainer_Text } = external_antd_namespaceObject.Typography;
+    const MENU_KEY_APP_LOGOUT = 'app-logout';
+    function filterMenuItemsByRole(items, user) {
+        return items.filter((item)=>{
+            if (!item.roles) return true;
+            if (!user?.roles) return false;
+            return item.roles.some((role)=>user.roles.includes(role));
+        });
+    }
+    function LoggedMainContainer({ children }) {
+        const [collapsed, setCollapsed] = (0, external_react_.useState)(true);
+        const [isMobile, setIsMobile] = (0, external_react_.useState)(false);
+        const [drawerVisible, setDrawerVisible] = (0, external_react_.useState)(false);
+        const [secondarySidebarDrawerVisible, setSecondarySidebarDrawerVisible] = (0, external_react_.useState)(false);
         const { t } = useCodebitWebAntdTranslation();
-        const audioRef = (0, external_react_.useRef)(null);
-        const hasSource = !!audioUrl;
-        const formatTime = (seconds)=>{
-            const sec = Math.max(0, Math.floor(seconds));
-            const date = (0, external_date_fns_namespaceObject.addSeconds)(new Date(0), sec);
-            const h = Math.floor(sec / 3600);
-            const timeFormat = h > 0 ? 'H:mm:ss' : 'm:ss';
-            return (0, external_date_fns_namespaceObject.format)(date, timeFormat);
-        };
-        const togglePlay = async ()=>{
-            if (!audioRef.current || !hasSource) return;
-            if (audioRef.current.paused) {
-                await audioRef.current.play();
-                setIsPlaying(true);
-            } else {
-                audioRef.current.pause();
-                setIsPlaying(false);
-            }
-        };
-        const toggleMute = ()=>{
-            if (!audioRef.current) return;
-            audioRef.current.muted = !audioRef.current.muted;
-            setIsMuted(audioRef.current.muted);
-        };
-        const handleSliderChange = (value)=>{
-            if (!audioRef.current) return;
-            const safeValue = Math.min(Math.round(value), Math.round(duration));
-            audioRef.current.currentTime = safeValue;
-            setCurrentTime(safeValue);
-        };
+        const configCodebit = (0, external_react_.useContext)(CodebitConfigContext);
+        const configTheme = (0, external_react_.useContext)(CodebitThemeContext);
+        const navigate = (0, external_react_router_namespaceObject.useNavigate)();
+        const location = (0, external_react_router_namespaceObject.useLocation)();
+        if (!configCodebit || !configTheme) throw new Error('LoggedContainer must be used within CodebitConfigProvider and CodebitThemeContext');
+        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, userMenuItems, onMenuClick } = configCodebit;
+        const { isDarkMode } = configTheme;
+        const theme = isDarkMode ? 'dark' : 'light';
+        const allMenuItems = (0, external_react_.useMemo)(()=>[
+                ...menuItems(user),
+                ...bottomMenuItems?.(user) ?? []
+            ], [
+            menuItems,
+            user,
+            bottomMenuItems
+        ]);
+        const filteredMenuItems = (0, external_react_.useMemo)(()=>filterMenuItemsByRole(menuItems(user), user), [
+            menuItems,
+            user
+        ]);
+        const filteredBottomMenuItems = (0, external_react_.useMemo)(()=>{
+            if (!bottomMenuItems) return [];
+            return filterMenuItemsByRole(bottomMenuItems(user), user);
+        }, [
+            bottomMenuItems,
+            user
+        ]);
+        const filteredUserMenuItems = (0, external_react_.useMemo)(()=>{
+            if (!userMenuItems) return [];
+            return filterMenuItemsByRole(userMenuItems(user), user);
+        }, [
+            userMenuItems,
+            user
+        ]);
+        const memoizedBottomMenuItems = (0, external_react_.useMemo)(()=>[
+                ...filteredBottomMenuItems,
+                {
+                    key: MENU_KEY_APP_LOGOUT,
+                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.LogoutOutlined, {}),
+                    label: t('LoggedMainContainer.logout'),
+                    danger: true
+                }
+            ], [
+            filteredBottomMenuItems,
+            t
+        ]);
+        const [selectedKeys, setSelectedKeys] = (0, external_react_.useState)('');
         (0, external_react_.useEffect)(()=>{
-            if (audioRef.current && audioUrl) {
-                audioRef.current.pause();
-                audioRef.current.currentTime = 0;
-                audioRef.current.src = audioUrl;
-                audioRef.current.load();
+            const computeSelectedKey = ()=>{
+                const match = allMenuItems.find((item)=>item.key ? (0, external_react_router_namespaceObject.matchPath)({
+                        path: item.key,
+                        end: true
+                    }, location.pathname) : false);
+                return match?.key ?? '';
+            };
+            setSelectedKeys(computeSelectedKey());
+        }, [
+            location.pathname,
+            allMenuItems
+        ]);
+        const handleLogout = (0, external_react_.useCallback)(async ()=>{
+            await logout?.();
+            if (isMobile) setDrawerVisible(false);
+            navigate('/');
+        }, [
+            logout,
+            isMobile,
+            setDrawerVisible,
+            navigate
+        ]);
+        const handleMenuClick = (0, external_react_.useCallback)(async (key)=>{
+            if (onMenuClick?.(key) === false) return;
+            try {
+                if (key === MENU_KEY_APP_LOGOUT) return void await handleLogout();
+                navigate(key);
+            } finally{
+                if (isMobile) setDrawerVisible(false);
             }
-            setIsPlaying(false);
-            setCurrentTime(0);
-            setDuration(0);
         }, [
-            audioUrl
+            onMenuClick,
+            handleLogout,
+            navigate,
+            isMobile,
+            setDrawerVisible
         ]);
-        const handleLoadedMetadata = ()=>{
-            if (!audioRef.current) return;
-            const audio = audioRef.current;
-            if (audio.duration !== 1 / 0 && Number.isFinite(audio.duration)) {
-                if (audio.duration > 0) setDuration(audio.duration);
-            } else {
-                audio.currentTime = 1e101;
-                const timeUpdateHandler = ()=>{
-                    audio.removeEventListener('timeupdate', timeUpdateHandler);
-                    audio.currentTime = 0;
-                    setDuration(audio.duration || 0);
-                };
-                audio.addEventListener('timeupdate', timeUpdateHandler);
-            }
+        const handleUserMenuItemClick = (0, external_react_.useCallback)((key)=>{
+            onMenuClick?.(key);
+        }, [
+            onMenuClick
+        ]);
+        const primaryMenu = (0, external_react_.useMemo)(()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
+                theme: theme,
+                mode: 'inline',
+                selectedKeys: selectedKeys ? [
+                    selectedKeys
+                ] : [],
+                onClick: ({ key })=>handleMenuClick(key),
+                items: filteredMenuItems,
+                className: LoggedMainContainer_module.menu
+            }, 'primary-menu'), [
+            selectedKeys,
+            filteredMenuItems,
+            theme,
+            handleMenuClick
+        ]);
+        (0, external_react_.useEffect)(()=>{
+            const checkScreenSize = ()=>setIsMobile(window.innerWidth < 768);
+            checkScreenSize();
+            window.addEventListener('resize', checkScreenSize);
+            return ()=>window.removeEventListener('resize', checkScreenSize);
+        }, []);
+        const menuContent = /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+            children: [
+                primaryMenu,
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout.Content, {
+                    className: LoggedMainContainer_module.menuSpacer
+                }),
+                showVersion?.(user) && version && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
+                    motion: false,
+                    theme: theme,
+                    mode: 'horizontal',
+                    className: LoggedMainContainer_module.versionMenu,
+                    disabled: true,
+                    items: [
+                        {
+                            icon: collapsed ? version : `${t('LoggedMainContainer.version')}: ${version}`,
+                            title: ''
+                        }
+                    ]
+                }, 'version-menu'),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
+                    motion: false,
+                    theme: theme,
+                    mode: 'inline',
+                    selectedKeys: selectedKeys ? [
+                        selectedKeys
+                    ] : [],
+                    onClick: ({ key })=>handleMenuClick(key),
+                    className: LoggedMainContainer_module.bottomMenu,
+                    items: memoizedBottomMenuItems
+                }, 'bottom-menu')
+            ]
+        });
+        const renderMenuContent = ()=>{
+            if (isMobile) return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Drawer, {
+                placement: 'left',
+                onClose: ()=>setDrawerVisible(false),
+                open: drawerVisible,
+                size: 250,
+                className: LoggedMainContainer_module.drawer,
+                classNames: {
+                    body: LoggedMainContainer_module.drawerBody
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Flex, {
+                    vertical: true,
+                    className: LoggedMainContainer_module.drawerFlex,
+                    children: menuContent
+                })
+            });
+            return /*#__PURE__*/ (0, jsx_runtime.jsx)(Sider, {
+                theme: theme,
+                trigger: null,
+                collapsible: true,
+                collapsed: collapsed,
+                breakpoint: 'lg',
+                collapsedWidth: 80,
+                className: LoggedMainContainer_module.sider,
+                children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout, {
+                    className: LoggedMainContainer_module.siderLayout,
+                    children: menuContent
+                })
+            });
         };
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
-            className: AudioPlayer_module.audioPlayer,
+        const renderSecondarySidebar = ()=>{
+            if (!secondarySidebar) return null;
+            if (isMobile) return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Drawer, {
+                placement: 'right',
+                onClose: ()=>setSecondarySidebarDrawerVisible(false),
+                open: secondarySidebarDrawerVisible,
+                size: 280,
+                className: LoggedMainContainer_module.drawer,
+                title: null,
+                closeIcon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.CloseOutlined, {}),
+                children: secondarySidebar(user)
+            });
+            return /*#__PURE__*/ (0, jsx_runtime.jsx)(Sider, {
+                theme: theme,
+                width: secondarySidebarWidth,
+                children: secondarySidebar(user)
+            });
+        };
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Layout, {
+            className: LoggedMainContainer_module.layout,
             children: [
-                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
-                    orientation: 'vertical',
-                    size: 'middle',
+                renderMenuContent(),
+                renderSecondarySidebar(),
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Layout, {
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
-                            align: 'center',
+                        /*#__PURE__*/ (0, jsx_runtime.jsxs)(Header, {
+                            className: `${LoggedMainContainer_module.header} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                    type: 'primary',
-                                    shape: 'circle',
-                                    icon: isPlaying ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PauseCircleOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PlayCircleOutlined, {}),
-                                    onClick: togglePlay,
-                                    disabled: !hasSource,
-                                    title: isPlaying ? t('AudioPlayer.pause') : t('AudioPlayer.play'),
-                                    "aria-label": isPlaying ? t('AudioPlayer.pauseAudio') : t('AudioPlayer.playAudio')
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Slider, {
-                                    min: 0,
-                                    max: duration,
-                                    value: currentTime,
-                                    onChange: handleSliderChange,
-                                    tooltip: {
-                                        open: false
-                                    },
-                                    disabled: 0 === duration,
-                                    className: AudioPlayer_module.slider
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
+                                    children: isMobile ? /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                        type: 'text',
+                                        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuOutlined, {}),
+                                        onClick: ()=>setDrawerVisible(true)
+                                    }) : /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                        type: 'text',
+                                        icon: collapsed ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuUnfoldOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuFoldOutlined, {}),
+                                        onClick: ()=>setCollapsed(!collapsed)
+                                    })
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                    shape: 'circle',
-                                    icon: isMuted ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MutedOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SoundOutlined, {}),
-                                    onClick: toggleMute,
-                                    disabled: !hasSource,
-                                    title: isMuted ? t('AudioPlayer.unmute') : t('AudioPlayer.mute'),
-                                    "aria-label": isMuted ? t('AudioPlayer.unmuteAudio') : t('AudioPlayer.muteAudio')
+                                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                                    size: isMobile ? 'small' : 'middle',
+                                    className: `${LoggedMainContainer_module.headerSpace} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
+                                    children: [
+                                        secondarySidebar && isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                            type: 'text',
+                                            icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.WechatOutlined, {}),
+                                            onClick: ()=>setSecondarySidebarDrawerVisible(true)
+                                        }),
+                                        !isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(LoggedMainContainer_Text, {
+                                            children: t('LoggedMainContainer.theme')
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(ThemeToggle, {}),
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Divider, {
+                                            type: 'vertical',
+                                            className: LoggedMainContainer_module.headerDivider
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(UserMenu, {
+                                            user: user,
+                                            items: filteredUserMenuItems,
+                                            onItemClick: handleUserMenuItemClick
+                                        })
+                                    ]
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
-                            className: AudioPlayer_module.durationTimeContainer,
-                            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Typography.Text, {
-                                children: `${formatTime(currentTime)} / ${formatTime(duration)}`
-                            })
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)(Content, {
+                            className: `${LoggedMainContainer_module.content} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
+                            children: children
                         })
                     ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)("audio", {
-                    ref: audioRef,
-                    onTimeUpdate: (e)=>{
-                        if (!isPlaying) return;
-                        const audioElement = e.target;
-                        setCurrentTime(audioElement.currentTime);
-                    },
-                    onLoadedMetadata: handleLoadedMetadata,
-                    onEnded: ()=>{
-                        setIsPlaying(false);
-                        setCurrentTime(0);
-                    },
-                    onPlay: ()=>setIsPlaying(true),
-                    onPause: ()=>setIsPlaying(false),
-                    muted: isMuted,
-                    children: /*#__PURE__*/ (0, jsx_runtime.jsx)("track", {
-                        kind: 'captions'
-                    })
                 })
             ]
         });
+    }
+    LoggedMainContainer.propTypes = {
+        children: external_prop_types_default().node.isRequired
     };
-    AudioPlayer.propTypes = {
-        audioUrl: external_prop_types_default().string.isRequired
-    };
-    const COUNTRIES = [
-        {
-            code: 'BR',
-            dialCode: '55',
-            flag: '🇧🇷',
-            maxLocalDigits: 11
-        },
-        {
-            code: 'US',
-            dialCode: '1',
-            flag: '🇺🇸',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'CA',
-            dialCode: '1',
-            flag: '🇨🇦',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'MX',
-            dialCode: '52',
-            flag: '🇲🇽',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'AR',
-            dialCode: '54',
-            flag: '🇦🇷',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'CL',
-            dialCode: '56',
-            flag: '🇨🇱',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'CO',
-            dialCode: '57',
-            flag: '🇨🇴',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'PE',
-            dialCode: '51',
-            flag: '🇵🇪',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'VE',
-            dialCode: '58',
-            flag: '🇻🇪',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'UY',
-            dialCode: '598',
-            flag: '🇺🇾',
-            maxLocalDigits: 8
-        },
-        {
-            code: 'PY',
-            dialCode: '595',
-            flag: '🇵🇾',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'BO',
-            dialCode: '591',
-            flag: '🇧🇴',
-            maxLocalDigits: 8
-        },
-        {
-            code: 'PT',
-            dialCode: '351',
-            flag: '🇵🇹',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'ES',
-            dialCode: '34',
-            flag: '🇪🇸',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'IT',
-            dialCode: '39',
-            flag: '🇮🇹',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'FR',
-            dialCode: '33',
-            flag: '🇫🇷',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'DE',
-            dialCode: '49',
-            flag: '🇩🇪',
-            maxLocalDigits: 11
-        },
-        {
-            code: 'GB',
-            dialCode: '44',
-            flag: '🇬🇧',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'AO',
-            dialCode: '244',
-            flag: '🇦🇴',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'MZ',
-            dialCode: '258',
-            flag: '🇲🇿',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'ZA',
-            dialCode: '27',
-            flag: '🇿🇦',
-            maxLocalDigits: 9
-        },
-        {
-            code: 'CN',
-            dialCode: '86',
-            flag: '🇨🇳',
-            maxLocalDigits: 11
-        },
-        {
-            code: 'JP',
-            dialCode: '81',
-            flag: '🇯🇵',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'IN',
-            dialCode: '91',
-            flag: '🇮🇳',
-            maxLocalDigits: 10
-        },
-        {
-            code: 'AU',
-            dialCode: '61',
-            flag: '🇦🇺',
-            maxLocalDigits: 9
-        }
-    ];
-    function applyBrMask(digits) {
-        if (digits.length <= 2) return `(${digits}`;
-        if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
-        if (digits.length <= 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
-        return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
-    }
-    function applyUsMask(digits) {
-        if (digits.length <= 3) return `(${digits}`;
-        if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
-        return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
-    }
-    function applyArMask(digits) {
-        if (digits.length <= 2) return `(${digits}`;
-        if (digits.length <= 6) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
-        return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
-    }
-    function applyGenericMask(digits, areaLen, totalLen) {
-        if (digits.length <= areaLen) return `(${digits}`;
-        const area = digits.slice(0, areaLen);
-        const rest = digits.slice(areaLen, totalLen);
-        const mid = Math.floor(rest.length / 2 + rest.length % 2);
-        if (rest.length <= mid) return `(${area}) ${rest}`;
-        return `(${area}) ${rest.slice(0, mid)}-${rest.slice(mid)}`;
+    function useErrorMessage() {
+        const { t } = useCodebitWebAntdTranslation();
+        const getErrorMessage = (error)=>{
+            let status = 'error';
+            const responseStatus = error?.response?.status || null;
+            let errorMessage = t('Error.defaultError');
+            let retryText = t('Error.retryButton');
+            let onRetryAction = null;
+            if (error?.errorCode) switch(error.errorCode){
+                case codebit_web_namespaceObject.ErrorCode.ERR_NETWORK:
+                    errorMessage = t('Error.networkError');
+                    break;
+                case codebit_web_namespaceObject.ErrorCode.ERR_TIMEOUT:
+                    errorMessage = t('Error.timeoutError');
+                    break;
+            }
+            else if (responseStatus) switch(responseStatus){
+                case 400:
+                    errorMessage = t('Error.badRequestError');
+                    break;
+                case 403:
+                    errorMessage = t('Error.forbiddenError');
+                    retryText = t('Error.reloadPageButton');
+                    status = 403;
+                    onRetryAction = ()=>{
+                        globalThis.location.reload();
+                    };
+                    break;
+                case 404:
+                    errorMessage = t('Error.notFoundError');
+                    status = 404;
+                    break;
+                case 500:
+                    errorMessage = t('Error.internalServerError');
+                    status = 500;
+                    break;
+                case 401:
+                    errorMessage = t('Error.sessionExpiredError');
+                    retryText = t('Error.reloadPageButton');
+                    onRetryAction = ()=>{
+                        globalThis.location.reload();
+                    };
+                    break;
+            }
+            return {
+                errorMessage,
+                status,
+                retryText,
+                onRetryAction
+            };
+        };
+        return {
+            getErrorMessage
+        };
     }
-    function applyMask(digits, countryCode) {
-        switch(countryCode){
-            case 'BR':
-                return applyBrMask(digits);
-            case 'US':
-            case 'CA':
-                return applyUsMask(digits);
-            case 'MX':
-            case 'CO':
-            case 'VE':
-                return applyGenericMask(digits, 2, 10);
-            case 'AR':
-                return applyArMask(digits);
-            case 'CL':
-            case 'PE':
-            case 'PT':
-            case 'ES':
-            case 'AU':
-            case 'ZA':
-            case 'AO':
-            case 'MZ':
-                return applyGenericMask(digits, 2, 9);
-            case 'UY':
-            case 'BO':
-                return applyGenericMask(digits, 1, 8);
-            case 'PY':
-                return applyGenericMask(digits, 3, 9);
-            case 'FR':
-                return applyGenericMask(digits, 2, 9);
-            case 'IT':
-                return applyGenericMask(digits, 3, 10);
-            case 'DE':
-                return applyGenericMask(digits, 3, 11);
-            case 'GB':
-                return applyGenericMask(digits, 4, 10);
-            case 'CN':
-                return applyGenericMask(digits, 3, 11);
-            case 'JP':
-                return applyGenericMask(digits, 3, 10);
-            case 'IN':
-                return applyGenericMask(digits, 5, 10);
-            default:
-                return digits;
+    const ErrorRetry_logger = new codebit_web_namespaceObject.Logger('ErrorRetry');
+    function ErrorRetry({ error, onRetry }) {
+        if (error && error instanceof Error) {
+            ErrorRetry_logger.error('Fail to load.', error);
+            react_namespaceObject.captureException(error);
         }
+        const { getErrorMessage } = useErrorMessage();
+        const { status, errorMessage, retryText, onRetryAction } = getErrorMessage(error);
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Card, {
+            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Result, {
+                status: status,
+                title: errorMessage,
+                extra: [
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                        type: 'primary',
+                        onClick: onRetryAction ?? onRetry,
+                        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.ReloadOutlined, {}),
+                        children: retryText
+                    }, 'retry')
+                ]
+            })
+        });
     }
-    function detectCountry(fullDigits) {
-        if (!fullDigits) return COUNTRIES[0];
-        const sorted = [
-            ...COUNTRIES
-        ].sort((a, b)=>b.dialCode.length - a.dialCode.length);
-        for (const c of sorted)if (fullDigits.startsWith(c.dialCode)) return c;
-        return COUNTRIES[0];
-    }
-    const PhoneInput = ({ value, onChange, disabled, size, placeholder })=>{
-        const { t } = useCodebitWebAntdTranslation();
-        const countrySearchLabel = (c)=>{
-            const name = t(`PhoneInput.countries.${c.code}`);
-            return `${c.flag} ${name} +${c.dialCode}`;
-        };
-        const [selectedCountry, setSelectedCountry] = (0, external_react_.useState)(()=>detectCountry(value));
-        const [displayValue, setDisplayValue] = (0, external_react_.useState)(()=>{
-            if (!value) return '';
-            const country = detectCountry(value);
-            const localDigits = value.slice(country.dialCode.length);
-            return applyMask(localDigits, country.code);
+    ErrorRetry.propTypes = {
+        error: external_prop_types_default().object.isRequired,
+        onRetry: external_prop_types_default().func.isRequired
+    };
+    const ListCard_module = {
+        listCard: "listCard-ISftFd",
+        headerRow: "headerRow-UsZAzP",
+        actions: "actions-ig53s2",
+        filtersRow: "filtersRow-f3Xk5a",
+        expandArea: "expandArea-czOoFS"
+    };
+    const { Title } = external_antd_namespaceObject.Typography;
+    function ListCard({ title, onClearFilters, headerContainer, tableContainer, actions }) {
+        const { token } = external_antd_namespaceObject.theme.useToken();
+        const { t } = (0, external_react_i18next_namespaceObject.useTranslation)('codebitWebAntd');
+        const margin = token['margin'];
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Card, {
+            className: ListCard_module.listCard,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Row, {
+                    gutter: margin,
+                    align: 'middle',
+                    className: ListCard_module.headerRow,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Col, {
+                            xs: 24,
+                            sm: 24,
+                            md: 12,
+                            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(Title, {
+                                level: 4,
+                                children: title
+                            })
+                        }),
+                        (!!onClearFilters || !!actions) && /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Col, {
+                            xs: 24,
+                            sm: 24,
+                            md: 12,
+                            className: ListCard_module.actions,
+                            children: [
+                                !!onClearFilters && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.ClearOutlined, {}),
+                                    onClick: onClearFilters,
+                                    children: t('ListCard.clearFilters')
+                                }),
+                                actions
+                            ]
+                        })
+                    ]
+                }),
+                !!headerContainer && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Row, {
+                    gutter: margin,
+                    className: ListCard_module.filtersRow,
+                    children: headerContainer
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout, {
+                    className: ListCard_module.expandArea,
+                    children: tableContainer
+                })
+            ]
         });
-        (0, external_react_.useEffect)(()=>{
-            if (!value) return void setDisplayValue('');
-            const country = detectCountry(value);
-            setSelectedCountry(country);
-            const localDigits = value.slice(country.dialCode.length);
-            setDisplayValue(applyMask(localDigits, country.code));
+    }
+    ListCard.propTypes = {
+        title: external_prop_types_default().string.isRequired,
+        onClearFilters: external_prop_types_default().func,
+        headerContainer: external_prop_types_default().node,
+        tableContainer: external_prop_types_default().node,
+        actions: external_prop_types_default().node
+    };
+    ListCard.defaultProps = {
+        onClearFilters: null,
+        headerContainer: null,
+        tableContainer: null,
+        actions: null
+    };
+    const CssTokenBridge = ({ containerId })=>{
+        const { token } = external_antd_namespaceObject.theme.useToken();
+        (0, external_react_.useLayoutEffect)(()=>{
+            const scopedContainer = containerId ? document.getElementById(containerId) : null;
+            const targets = scopedContainer ? [
+                document.documentElement,
+                scopedContainer
+            ] : [
+                document.documentElement
+            ];
+            const setVar = (name, value)=>{
+                for (const target of targets)target.style.setProperty(name, value);
+            };
+            setVar('--antd-color-bg-base', token['colorBgBase']);
+            setVar('--antd-color-bg-container', token['colorBgContainer']);
+            setVar('--antd-color-bg-elevated', token['colorBgElevated']);
+            setVar('--antd-color-bg-layout', token['colorBgLayout']);
+            setVar('--antd-color-bg-mask', token['colorBgMask']);
+            setVar('--antd-color-bg-spotlight', token['colorBgSpotlight']);
+            setVar('--antd-color-primary', token['colorPrimary']);
+            setVar('--antd-color-success', token['colorSuccess']);
+            setVar('--antd-color-success-bg', token['colorSuccessBg']);
+            setVar('--antd-color-success-border', token['colorSuccessBorder']);
+            setVar('--antd-color-success-text', token['colorSuccessText']);
+            setVar('--antd-color-warning', token['colorWarning']);
+            setVar('--antd-color-warning-bg', token['colorWarningBg']);
+            setVar('--antd-color-warning-border', token['colorWarningBorder']);
+            setVar('--antd-color-warning-text', token['colorWarningText']);
+            setVar('--antd-color-error', token['colorError']);
+            setVar('--antd-color-error-bg', token['colorErrorBg']);
+            setVar('--antd-color-error-border', token['colorErrorBorder']);
+            setVar('--antd-color-error-text', token['colorErrorText']);
+            setVar('--antd-color-info', token['colorInfo']);
+            setVar('--antd-color-info-bg', token['colorInfoBg']);
+            setVar('--antd-color-info-border', token['colorInfoBorder']);
+            setVar('--antd-color-info-text', token['colorInfoText']);
+            setVar('--antd-color-text', token['colorText']);
+            setVar('--antd-color-text-secondary', token['colorTextSecondary']);
+            setVar('--antd-color-text-tertiary', token['colorTextTertiary']);
+            setVar('--antd-color-text-quaternary', token['colorTextQuaternary']);
+            setVar('--antd-color-text-disabled', token['colorTextDisabled']);
+            setVar('--antd-color-border', token['colorBorder']);
+            setVar('--antd-color-border-secondary', token['colorBorderSecondary']);
+            setVar('--antd-color-border-hover', token['colorBorderHover']);
+            setVar('--antd-color-border-disabled', token['colorBorderDisabled']);
+            setVar('--antd-color-split', token['colorSplit']);
+            setVar('--antd-color-link', token['colorLink']);
+            setVar('--antd-color-link-hover', token['colorLinkHover']);
+            setVar('--antd-color-link-active', token['colorLinkActive']);
+            setVar('--antd-color-fill', token['colorFill']);
+            setVar('--antd-color-fill-secondary', token['colorFillSecondary']);
+            setVar('--antd-color-fill-tertiary', token['colorFillTertiary']);
+            setVar('--antd-color-fill-quaternary', token['colorFillQuaternary']);
+            setVar('--antd-color-fill-content', token['colorFillContent']);
+            setVar('--antd-color-fill-content-hover', token['colorFillContentHover']);
+            setVar('--antd-color-fill-content-selected', token['colorFillContentSelected']);
+            setVar('--antd-color-fill-alter', token['colorFillAlter']);
+            setVar('--antd-color-fill-alter-hover', token['colorFillAlterHover']);
+            setVar('--antd-color-fill-alter-active', token['colorFillAlterActive']);
+            setVar('--antd-color-fill-alter-selected', token['colorFillAlterSelected']);
+            setVar('--antd-color-fill-alter-disabled', token['colorFillAlterDisabled']);
+            setVar('--antd-color-white', token['colorWhite']);
+            setVar('--antd-color-black', token['colorBlack']);
+            setVar('--antd-margin-xxs', `${token['marginXXS']}px`);
+            setVar('--antd-margin-xs', `${token['marginXS']}px`);
+            setVar('--antd-margin-sm', `${token['marginSM']}px`);
+            setVar('--antd-margin', `${token['margin']}px`);
+            setVar('--antd-margin-md', `${token['marginMD']}px`);
+            setVar('--antd-margin-lg', `${token['marginLG']}px`);
+            setVar('--antd-margin-xl', `${token['marginXL']}px`);
+            setVar('--antd-margin-xxl', `${token['marginXXL']}px`);
+            setVar('--antd-padding-xxs', `${token['paddingXXS']}px`);
+            setVar('--antd-padding-xs', `${token['paddingXS']}px`);
+            setVar('--antd-padding-sm', `${token['paddingSM']}px`);
+            setVar('--antd-padding', `${token['padding']}px`);
+            setVar('--antd-padding-md', `${token['paddingMD']}px`);
+            setVar('--antd-padding-lg', `${token['paddingLG']}px`);
+            setVar('--antd-padding-xl', `${token['paddingXL']}px`);
+            setVar('--antd-font-size-xxs', '8px');
+            setVar('--antd-font-size-xs', '10px');
+            setVar('--antd-font-size-sm', `${token['fontSizeSM']}px`);
+            setVar('--antd-font-size', `${token['fontSize']}px`);
+            setVar('--antd-font-size-lg', `${token['fontSizeLG']}px`);
+            setVar('--antd-font-size-xl', `${token['fontSizeXL']}px`);
+            setVar('--antd-font-size-xxl', `${token['fontSizeXXL']}px`);
+            setVar('--antd-font-size-heading1', `${token['fontSizeHeading1']}px`);
+            setVar('--antd-font-size-heading2', `${token['fontSizeHeading2']}px`);
+            setVar('--antd-font-size-heading3', `${token['fontSizeHeading3']}px`);
+            setVar('--antd-font-size-heading4', `${token['fontSizeHeading4']}px`);
+            setVar('--antd-font-size-heading5', `${token['fontSizeHeading5']}px`);
+            setVar('--antd-line-height-sm', token['lineHeightSM']);
+            setVar('--antd-line-height', token['lineHeight']);
+            setVar('--antd-line-height-lg', token['lineHeightLG']);
+            setVar('--antd-control-height-xs', `${token['controlHeightXS']}px`);
+            setVar('--antd-control-height-sm', `${token['controlHeightSM']}px`);
+            setVar('--antd-control-height', `${token['controlHeight']}px`);
+            setVar('--antd-control-height-lg', `${token['controlHeightLG']}px`);
+            setVar('--antd-border-radius-sm', `${token['borderRadiusSM']}px`);
+            setVar('--antd-border-radius', `${token['borderRadius']}px`);
+            setVar('--antd-border-radius-lg', `${token['borderRadiusLG']}px`);
+            setVar('--antd-shadow', token['boxShadow']);
+            setVar('--antd-shadow-lg', token['boxShadowSecondary']);
         }, [
-            value
+            containerId,
+            token
         ]);
-        const handleCountryChange = (countryCode)=>{
-            const country = COUNTRIES.find((c)=>c.code === countryCode) ?? COUNTRIES[0];
-            setSelectedCountry(country);
-            setDisplayValue('');
-            onChange?.('');
-        };
-        const handleInputChange = (e)=>{
-            const rawDigits = e.target.value.replaceAll(/\D/g, '').slice(0, selectedCountry.maxLocalDigits);
-            setDisplayValue(applyMask(rawDigits, selectedCountry.code));
-            onChange?.(selectedCountry.dialCode + rawDigits);
-        };
-        const countrySelector = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Select, {
-            value: selectedCountry.code,
-            onChange: handleCountryChange,
-            disabled: disabled,
-            size: size,
-            style: {
-                width: 110
-            },
-            popupMatchSelectWidth: false,
-            showSearch: true,
-            filterOption: (input, option)=>option?.searchLabel?.toLowerCase().includes(input.toLowerCase()) ?? false,
-            options: COUNTRIES.map((c)=>({
-                    value: c.code,
-                    label: `${c.flag} +${c.dialCode}`,
-                    searchLabel: countrySearchLabel(c)
-                })),
-            optionRender: (option)=>option.data.searchLabel
-        });
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Input, {
-            addonBefore: countrySelector,
-            value: displayValue,
-            onChange: handleInputChange,
-            disabled: disabled,
-            size: size,
-            placeholder: placeholder
-        });
+        return null;
     };
-    PhoneInput.propTypes = {
-        value: external_prop_types_default().string,
-        onChange: external_prop_types_default().func,
-        disabled: external_prop_types_default().bool,
-        size: external_prop_types_default().oneOf([
-            'large',
-            'middle',
-            'small'
-        ]),
-        placeholder: external_prop_types_default().string
+    CssTokenBridge.propTypes = {
+        containerId: external_prop_types_default().string
     };
-    PhoneInput.format = (fullDigits)=>{
-        if (!fullDigits) return '';
-        const country = detectCountry(fullDigits);
-        const localDigits = fullDigits.slice(country.dialCode.length);
-        const masked = applyMask(localDigits, country.code);
-        return `${country.flag} +${country.dialCode} ${masked}`;
+    const TableContainer_module = {
+        tableContainer: "tableContainer-EhNwOm"
     };
-    const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
-        const hasLoaded = (0, external_react_.useRef)(false);
-        const [isDarkMode, setIsDarkMode] = (0, external_react_.useState)(()=>{
-            if (forcedTheme) return 'dark' === forcedTheme;
-            try {
-                if (storeThemeInLocalStorage) {
-                    const savedTheme = localStorage?.getItem('theme');
-                    if (null !== savedTheme) return 'dark' === savedTheme;
+    function isPaginationNode(node) {
+        if (node.nodeType !== Node.ELEMENT_NODE) return false;
+        const element = node;
+        return element.classList?.contains('ant-table-pagination') || element.querySelector?.('.ant-table-pagination');
+    }
+    function hasPaginationInMutation(mutation) {
+        return Array.from(mutation.addedNodes).some(isPaginationNode);
+    }
+    function TableContainer({ children }) {
+        const containerRef = (0, external_react_.useRef)(null);
+        const containerHeightRef = (0, external_react_.useRef)(null);
+        const [scrollY, setScrollY] = (0, external_react_.useState)(void 0);
+        (0, external_react_.useLayoutEffect)(()=>{
+            const calculateHeights = ()=>{
+                if (!containerRef.current) return;
+                containerHeightRef.current = containerRef.current.offsetHeight;
+                const thead = containerRef.current.querySelector('thead');
+                let theadHeight = 0;
+                if (thead) {
+                    const rect = thead.getBoundingClientRect();
+                    const styles = globalThis.getComputedStyle(thead);
+                    const marginTop = Number.parseFloat(styles.marginTop) || 0;
+                    const marginBottom = Number.parseFloat(styles.marginBottom) || 0;
+                    theadHeight = rect.height + marginTop + marginBottom;
                 }
-                return globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
-            } finally{
-                hasLoaded.current = true;
+                const pagination = containerRef.current.querySelector('.ant-table-pagination');
+                let paginationHeight = 0;
+                if (pagination) {
+                    const rect = pagination.getBoundingClientRect();
+                    const styles = globalThis.getComputedStyle(pagination);
+                    const marginTop = Number.parseFloat(styles.marginTop) || 0;
+                    const marginBottom = Number.parseFloat(styles.marginBottom) || 0;
+                    paginationHeight = rect.height + marginTop + marginBottom;
+                }
+                const availableHeight = Math.ceil(containerHeightRef.current) - Math.ceil(theadHeight) - Math.ceil(paginationHeight) - 1;
+                setScrollY(availableHeight);
+            };
+            calculateHeights();
+            const observer = new MutationObserver((mutations)=>{
+                const hasPagination = mutations.some(hasPaginationInMutation);
+                if (hasPagination) calculateHeights();
+            });
+            if (containerRef.current) observer.observe(containerRef.current, {
+                childList: true,
+                subtree: true
+            });
+            globalThis.addEventListener('resize', calculateHeights);
+            return ()=>{
+                observer.disconnect();
+                globalThis.removeEventListener('resize', calculateHeights);
+            };
+        }, []);
+        const enhancedChildren = scrollY ? /*#__PURE__*/ (0, external_react_.cloneElement)(children, {
+            scroll: {
+                ...children.props?.scroll,
+                y: scrollY,
+                x: 'max-content'
             }
+        }) : children;
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
+            ref: containerRef,
+            className: TableContainer_module.tableContainer,
+            children: enhancedChildren
         });
-        (0, external_react_.useEffect)(()=>{
-            if (forcedTheme) {
-                const mode = 'dark' === forcedTheme;
-                setIsDarkMode(mode);
-            }
-        }, [
-            forcedTheme
-        ]);
-        const toggleTheme = ()=>{
-            setIsDarkMode((prev)=>!prev);
-        };
-        (0, external_react_.useEffect)(()=>{
-            const target = document.getElementById(containerId);
-            if (!target) return;
-            if (isDarkMode) {
-                document.documentElement.classList.add('dark-theme');
-                target.classList.add('dark-theme');
-            } else {
-                document.documentElement.classList.remove('dark-theme');
-                target.classList.remove('dark-theme');
-            }
-            document.documentElement.style.setProperty('--color-primary', isDarkMode ? '#589C75' : '#29D266');
-        }, [
-            isDarkMode,
-            containerId
-        ]);
-        (0, external_react_.useEffect)(()=>{
-            if (hasLoaded.current && storeThemeInLocalStorage) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
-            if (hasLoaded.current && storeThemeInLocalStorage && !forcedTheme) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
-        }, [
-            isDarkMode,
-            storeThemeInLocalStorage,
-            forcedTheme
-        ]);
-        const themeContextValue = (0, external_react_.useMemo)(()=>({
-                isDarkMode,
-                toggleTheme,
-                setIsDarkMode
-            }), [
-            isDarkMode
-        ]);
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitThemeContext.Provider, {
-            value: themeContextValue,
-            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.ConfigProvider, {
-                theme: {
-                    algorithm: isDarkMode ? external_antd_namespaceObject.theme.darkAlgorithm : external_antd_namespaceObject.theme.defaultAlgorithm,
-                    token: {
-                        colorPrimary: isDarkMode ? '#589C75' : '#29D266',
-                        colorInfo: isDarkMode ? '#589C75' : '#29D266',
-                        colorLink: isDarkMode ? '#589C75' : '#29D266'
-                    },
-                    components: {
-                        Menu: {
-                            itemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
-                            itemSelectedColor: '#FAFAFA',
-                            darkItemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
-                            darkItemSelectedColor: '#FAFAFA'
-                        },
-                        Button: {
-                            colorPrimary: isDarkMode ? '#589C75' : '#29D266',
-                            colorPrimaryHover: isDarkMode ? '#6DB589' : '#3FE67F',
-                            colorPrimaryActive: isDarkMode ? '#4A8361' : '#1FBF4D'
-                        },
-                        Layout: {
-                            siderBg: isDarkMode ? '#1a1a1a' : '#001529',
-                            triggerBg: isDarkMode ? '#589C75' : '#29D266',
-                            triggerColor: '#FAFAFA'
-                        },
-                        Header: {
-                            colorPrimary: isDarkMode ? '#589C75' : '#29D266'
-                        }
-                    }
-                },
-                ...props,
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime.jsx)(CssTokenBridge, {
-                        containerId: containerId
-                    }),
-                    children
-                ]
-            })
-        });
+    }
+    TableContainer.propTypes = {
+        children: external_prop_types_default().element.isRequired
     };
-    CodebitThemeProvider.propTypes = {
+    function FilterContainer({ children, ...props }) {
+        const { token } = external_antd_namespaceObject.theme.useToken();
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Card, {
+            styles: {
+                body: {
+                    padding: token['paddingXS'] + 'px'
+                }
+            },
+            ...props,
+            children: children
+        });
+    }
+    FilterContainer.propTypes = {
         children: external_prop_types_default().node.isRequired,
-        storeThemeInLocalStorage: external_prop_types_default().bool,
-        containerId: external_prop_types_default().string,
-        forcedTheme: external_prop_types_default().oneOf([
-            'dark',
-            'light',
-            null
-        ])
+        ...external_antd_namespaceObject.Card.propTypes
     };
-    const LoggedMainContainer_module = {
-        layout: "layout-mL5o6I",
-        drawer: "drawer-oj0mJX",
-        drawerBody: "drawerBody-YtAN37",
-        drawerFlex: "drawerFlex-AGTAax",
-        sider: "sider-BDy1Bs",
-        siderLayout: "siderLayout-C8H0uI",
-        secondarySidebar: "secondarySidebar-P6J_Xn",
-        menu: "menu-KMvPt7",
-        menuContainer: "menuContainer-ahnhBu",
-        menuLabel: "menuLabel-csBJTc",
-        menuDescription: "menuDescription-d6BFBO",
-        menuSpacer: "menuSpacer-RIB3II",
-        versionMenu: "versionMenu-NM4uyG",
-        bottomMenu: "bottomMenu-VtOktS",
-        header: "header-vgc67L",
-        mobile: "mobile-mKGxb5",
-        headerSpace: "headerSpace-Fd_iha",
-        content: "content-OZHp2h"
+    const external_date_fns_namespaceObject = require("date-fns");
+    const AudioPlayer_module = {
+        audioPlayer: "audioPlayer-a4xARM",
+        durationTimeContainer: "durationTimeContainer-kmkK6M",
+        slider: "slider-bdta4v"
     };
-    const { Header, Sider, Content } = external_antd_namespaceObject.Layout;
-    const { Text } = external_antd_namespaceObject.Typography;
-    const MENU_KEY_APP_LOGOUT = 'app-logout';
-    function LoggedMainContainer({ children }) {
-        const [collapsed, setCollapsed] = (0, external_react_.useState)(true);
-        const [isMobile, setIsMobile] = (0, external_react_.useState)(false);
-        const [drawerVisible, setDrawerVisible] = (0, external_react_.useState)(false);
-        const [secondarySidebarDrawerVisible, setSecondarySidebarDrawerVisible] = (0, external_react_.useState)(false);
+    const AudioPlayer = ({ audioUrl })=>{
+        const [isMuted, setIsMuted] = (0, external_react_.useState)(false);
+        const [duration, setDuration] = (0, external_react_.useState)(0);
+        const [currentTime, setCurrentTime] = (0, external_react_.useState)(0);
+        const [isPlaying, setIsPlaying] = (0, external_react_.useState)(false);
         const { t } = useCodebitWebAntdTranslation();
-        const configCodebit = (0, external_react_.useContext)(CodebitConfigContext);
-        const configTheme = (0, external_react_.useContext)(CodebitThemeContext);
-        const navigate = (0, external_react_router_namespaceObject.useNavigate)();
-        const location = (0, external_react_router_namespaceObject.useLocation)();
-        if (!configCodebit || !configTheme) throw new Error('LoggedContainer must be used within CodebitConfigProvider and CodebitThemeContext');
-        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, onMenuClick } = configCodebit;
-        const { isDarkMode } = configTheme;
-        const theme = isDarkMode ? 'dark' : 'light';
-        const allMenuItems = (0, external_react_.useMemo)(()=>[
-                ...menuItems(user),
-                ...bottomMenuItems?.(user) ?? []
-            ], [
-            menuItems,
-            user,
-            bottomMenuItems
-        ]);
-        const filteredMenuItems = (0, external_react_.useMemo)(()=>menuItems(user).filter((item)=>{
-                if (!item.roles) return true;
-                if (!user?.roles) return false;
-                return item.roles.some((role)=>user.roles.includes(role));
-            }), [
-            menuItems,
-            user
-        ]);
-        const filteredBottomMenuItems = (0, external_react_.useMemo)(()=>{
-            if (!bottomMenuItems) return [];
-            return bottomMenuItems(user).filter((item)=>{
-                if (!item.roles) return true;
-                if (!user?.roles) return false;
-                return item.roles.some((role)=>user.roles.includes(role));
-            });
+        const audioRef = (0, external_react_.useRef)(null);
+        const hasSource = !!audioUrl;
+        const formatTime = (seconds)=>{
+            const sec = Math.max(0, Math.floor(seconds));
+            const date = (0, external_date_fns_namespaceObject.addSeconds)(new Date(0), sec);
+            const h = Math.floor(sec / 3600);
+            const timeFormat = h > 0 ? 'H:mm:ss' : 'm:ss';
+            return (0, external_date_fns_namespaceObject.format)(date, timeFormat);
+        };
+        const togglePlay = async ()=>{
+            if (!audioRef.current || !hasSource) return;
+            if (audioRef.current.paused) {
+                await audioRef.current.play();
+                setIsPlaying(true);
+            } else {
+                audioRef.current.pause();
+                setIsPlaying(false);
+            }
+        };
+        const toggleMute = ()=>{
+            if (!audioRef.current) return;
+            audioRef.current.muted = !audioRef.current.muted;
+            setIsMuted(audioRef.current.muted);
+        };
+        const handleSliderChange = (value)=>{
+            if (!audioRef.current) return;
+            const safeValue = Math.min(Math.round(value), Math.round(duration));
+            audioRef.current.currentTime = safeValue;
+            setCurrentTime(safeValue);
+        };
+        (0, external_react_.useEffect)(()=>{
+            if (audioRef.current && audioUrl) {
+                audioRef.current.pause();
+                audioRef.current.currentTime = 0;
+                audioRef.current.src = audioUrl;
+                audioRef.current.load();
+            }
+            setIsPlaying(false);
+            setCurrentTime(0);
+            setDuration(0);
         }, [
-            bottomMenuItems,
-            user
-        ]);
-        const memoizedBottomMenuItems = (0, external_react_.useMemo)(()=>[
-                ...filteredBottomMenuItems,
-                {
-                    key: MENU_KEY_APP_LOGOUT,
-                    icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.LogoutOutlined, {}),
-                    label: t('LoggedMainContainer.logout'),
-                    danger: true
-                }
-            ], [
-            filteredBottomMenuItems,
-            t
+            audioUrl
         ]);
-        const [selectedKeys, setSelectedKeys] = (0, external_react_.useState)('');
+        const handleLoadedMetadata = ()=>{
+            if (!audioRef.current) return;
+            const audio = audioRef.current;
+            if (audio.duration !== 1 / 0 && Number.isFinite(audio.duration)) {
+                if (audio.duration > 0) setDuration(audio.duration);
+            } else {
+                audio.currentTime = 1e101;
+                const timeUpdateHandler = ()=>{
+                    audio.removeEventListener('timeupdate', timeUpdateHandler);
+                    audio.currentTime = 0;
+                    setDuration(audio.duration || 0);
+                };
+                audio.addEventListener('timeupdate', timeUpdateHandler);
+            }
+        };
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+            className: AudioPlayer_module.audioPlayer,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                    orientation: 'vertical',
+                    size: 'middle',
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                            align: 'center',
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                    type: 'primary',
+                                    shape: 'circle',
+                                    icon: isPlaying ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PauseCircleOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.PlayCircleOutlined, {}),
+                                    onClick: togglePlay,
+                                    disabled: !hasSource,
+                                    title: isPlaying ? t('AudioPlayer.pause') : t('AudioPlayer.play'),
+                                    "aria-label": isPlaying ? t('AudioPlayer.pauseAudio') : t('AudioPlayer.playAudio')
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Slider, {
+                                    min: 0,
+                                    max: duration,
+                                    value: currentTime,
+                                    onChange: handleSliderChange,
+                                    tooltip: {
+                                        open: false
+                                    },
+                                    disabled: 0 === duration,
+                                    className: AudioPlayer_module.slider
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                    shape: 'circle',
+                                    icon: isMuted ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MutedOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SoundOutlined, {}),
+                                    onClick: toggleMute,
+                                    disabled: !hasSource,
+                                    title: isMuted ? t('AudioPlayer.unmute') : t('AudioPlayer.mute'),
+                                    "aria-label": isMuted ? t('AudioPlayer.unmuteAudio') : t('AudioPlayer.muteAudio')
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
+                            className: AudioPlayer_module.durationTimeContainer,
+                            children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Typography.Text, {
+                                children: `${formatTime(currentTime)} / ${formatTime(duration)}`
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)("audio", {
+                    ref: audioRef,
+                    onTimeUpdate: (e)=>{
+                        if (!isPlaying) return;
+                        const audioElement = e.target;
+                        setCurrentTime(audioElement.currentTime);
+                    },
+                    onLoadedMetadata: handleLoadedMetadata,
+                    onEnded: ()=>{
+                        setIsPlaying(false);
+                        setCurrentTime(0);
+                    },
+                    onPlay: ()=>setIsPlaying(true),
+                    onPause: ()=>setIsPlaying(false),
+                    muted: isMuted,
+                    children: /*#__PURE__*/ (0, jsx_runtime.jsx)("track", {
+                        kind: 'captions'
+                    })
+                })
+            ]
+        });
+    };
+    AudioPlayer.propTypes = {
+        audioUrl: external_prop_types_default().string.isRequired
+    };
+    const COUNTRIES = [
+        {
+            code: 'BR',
+            dialCode: '55',
+            flag: '🇧🇷',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'US',
+            dialCode: '1',
+            flag: '🇺🇸',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'CA',
+            dialCode: '1',
+            flag: '🇨🇦',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'MX',
+            dialCode: '52',
+            flag: '🇲🇽',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AR',
+            dialCode: '54',
+            flag: '🇦🇷',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'CL',
+            dialCode: '56',
+            flag: '🇨🇱',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'CO',
+            dialCode: '57',
+            flag: '🇨🇴',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'PE',
+            dialCode: '51',
+            flag: '🇵🇪',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'VE',
+            dialCode: '58',
+            flag: '🇻🇪',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'UY',
+            dialCode: '598',
+            flag: '🇺🇾',
+            maxLocalDigits: 8
+        },
+        {
+            code: 'PY',
+            dialCode: '595',
+            flag: '🇵🇾',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'BO',
+            dialCode: '591',
+            flag: '🇧🇴',
+            maxLocalDigits: 8
+        },
+        {
+            code: 'PT',
+            dialCode: '351',
+            flag: '🇵🇹',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'ES',
+            dialCode: '34',
+            flag: '🇪🇸',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'IT',
+            dialCode: '39',
+            flag: '🇮🇹',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'FR',
+            dialCode: '33',
+            flag: '🇫🇷',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'DE',
+            dialCode: '49',
+            flag: '🇩🇪',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'GB',
+            dialCode: '44',
+            flag: '🇬🇧',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AO',
+            dialCode: '244',
+            flag: '🇦🇴',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'MZ',
+            dialCode: '258',
+            flag: '🇲🇿',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'ZA',
+            dialCode: '27',
+            flag: '🇿🇦',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'CN',
+            dialCode: '86',
+            flag: '🇨🇳',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'JP',
+            dialCode: '81',
+            flag: '🇯🇵',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'IN',
+            dialCode: '91',
+            flag: '🇮🇳',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AU',
+            dialCode: '61',
+            flag: '🇦🇺',
+            maxLocalDigits: 9
+        }
+    ];
+    function applyBrMask(digits) {
+        if (digits.length <= 2) return `(${digits}`;
+        if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+        if (digits.length <= 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
+        return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
+    }
+    function applyUsMask(digits) {
+        if (digits.length <= 3) return `(${digits}`;
+        if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+        return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+    }
+    function applyArMask(digits) {
+        if (digits.length <= 2) return `(${digits}`;
+        if (digits.length <= 6) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+        return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
+    }
+    function applyGenericMask(digits, areaLen, totalLen) {
+        if (digits.length <= areaLen) return `(${digits}`;
+        const area = digits.slice(0, areaLen);
+        const rest = digits.slice(areaLen, totalLen);
+        const mid = Math.floor(rest.length / 2 + rest.length % 2);
+        if (rest.length <= mid) return `(${area}) ${rest}`;
+        return `(${area}) ${rest.slice(0, mid)}-${rest.slice(mid)}`;
+    }
+    function applyMask(digits, countryCode) {
+        switch(countryCode){
+            case 'BR':
+                return applyBrMask(digits);
+            case 'US':
+            case 'CA':
+                return applyUsMask(digits);
+            case 'MX':
+            case 'CO':
+            case 'VE':
+                return applyGenericMask(digits, 2, 10);
+            case 'AR':
+                return applyArMask(digits);
+            case 'CL':
+            case 'PE':
+            case 'PT':
+            case 'ES':
+            case 'AU':
+            case 'ZA':
+            case 'AO':
+            case 'MZ':
+                return applyGenericMask(digits, 2, 9);
+            case 'UY':
+            case 'BO':
+                return applyGenericMask(digits, 1, 8);
+            case 'PY':
+                return applyGenericMask(digits, 3, 9);
+            case 'FR':
+                return applyGenericMask(digits, 2, 9);
+            case 'IT':
+                return applyGenericMask(digits, 3, 10);
+            case 'DE':
+                return applyGenericMask(digits, 3, 11);
+            case 'GB':
+                return applyGenericMask(digits, 4, 10);
+            case 'CN':
+                return applyGenericMask(digits, 3, 11);
+            case 'JP':
+                return applyGenericMask(digits, 3, 10);
+            case 'IN':
+                return applyGenericMask(digits, 5, 10);
+            default:
+                return digits;
+        }
+    }
+    function detectCountry(fullDigits) {
+        if (!fullDigits) return COUNTRIES[0];
+        const sorted = [
+            ...COUNTRIES
+        ].sort((a, b)=>b.dialCode.length - a.dialCode.length);
+        for (const c of sorted)if (fullDigits.startsWith(c.dialCode)) return c;
+        return COUNTRIES[0];
+    }
+    const PhoneInput = ({ value, onChange, disabled, size, placeholder })=>{
+        const { t } = useCodebitWebAntdTranslation();
+        const countrySearchLabel = (c)=>{
+            const name = t(`PhoneInput.countries.${c.code}`);
+            return `${c.flag} ${name} +${c.dialCode}`;
+        };
+        const [selectedCountry, setSelectedCountry] = (0, external_react_.useState)(()=>detectCountry(value));
+        const [displayValue, setDisplayValue] = (0, external_react_.useState)(()=>{
+            if (!value) return '';
+            const country = detectCountry(value);
+            const localDigits = value.slice(country.dialCode.length);
+            return applyMask(localDigits, country.code);
+        });
         (0, external_react_.useEffect)(()=>{
-            const computeSelectedKey = ()=>{
-                const match = allMenuItems.find((item)=>item.key ? (0, external_react_router_namespaceObject.matchPath)({
-                        path: item.key,
-                        end: true
-                    }, location.pathname) : false);
-                return match?.key ?? '';
-            };
-            setSelectedKeys(computeSelectedKey());
-        }, [
-            location.pathname,
-            allMenuItems
-        ]);
-        const handleLogout = (0, external_react_.useCallback)(async ()=>{
-            await logout?.();
-            if (isMobile) setDrawerVisible(false);
-            navigate('/');
-        }, [
-            logout,
-            isMobile,
-            setDrawerVisible,
-            navigate
-        ]);
-        const handleMenuClick = (0, external_react_.useCallback)(async (key)=>{
-            if (onMenuClick?.(key) === false) return;
-            try {
-                if (key === MENU_KEY_APP_LOGOUT) return void await handleLogout();
-                navigate(key);
-            } finally{
-                if (isMobile) setDrawerVisible(false);
-            }
+            if (!value) return void setDisplayValue('');
+            const country = detectCountry(value);
+            setSelectedCountry(country);
+            const localDigits = value.slice(country.dialCode.length);
+            setDisplayValue(applyMask(localDigits, country.code));
         }, [
-            onMenuClick,
-            handleLogout,
-            navigate,
-            isMobile,
-            setDrawerVisible
-        ]);
-        const primaryMenu = (0, external_react_.useMemo)(()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
-                theme: theme,
-                mode: 'inline',
-                selectedKeys: selectedKeys ? [
-                    selectedKeys
-                ] : [],
-                onClick: ({ key })=>handleMenuClick(key),
-                items: filteredMenuItems,
-                className: LoggedMainContainer_module.menu
-            }, 'primary-menu'), [
-            selectedKeys,
-            filteredMenuItems,
-            theme,
-            handleMenuClick
+            value
         ]);
-        (0, external_react_.useEffect)(()=>{
-            const checkScreenSize = ()=>setIsMobile(window.innerWidth < 768);
-            checkScreenSize();
-            window.addEventListener('resize', checkScreenSize);
-            return ()=>window.removeEventListener('resize', checkScreenSize);
-        }, []);
-        const menuContent = /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-            children: [
-                primaryMenu,
-                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout.Content, {
-                    className: LoggedMainContainer_module.menuSpacer
-                }),
-                showVersion?.(user) && version && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
-                    motion: false,
-                    theme: theme,
-                    mode: 'horizontal',
-                    className: LoggedMainContainer_module.versionMenu,
-                    disabled: true,
-                    items: [
-                        {
-                            icon: collapsed ? version : `${t('LoggedMainContainer.version')}: ${version}`,
-                            title: ''
-                        }
-                    ]
-                }, 'version-menu'),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
-                    motion: false,
-                    theme: theme,
-                    mode: 'inline',
-                    selectedKeys: selectedKeys ? [
-                        selectedKeys
-                    ] : [],
-                    onClick: ({ key })=>handleMenuClick(key),
-                    className: LoggedMainContainer_module.bottomMenu,
-                    items: memoizedBottomMenuItems
-                }, 'bottom-menu')
-            ]
-        });
-        const renderMenuContent = ()=>{
-            if (isMobile) return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Drawer, {
-                placement: 'left',
-                onClose: ()=>setDrawerVisible(false),
-                open: drawerVisible,
-                size: 250,
-                className: LoggedMainContainer_module.drawer,
-                classNames: {
-                    body: LoggedMainContainer_module.drawerBody
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Flex, {
-                    vertical: true,
-                    className: LoggedMainContainer_module.drawerFlex,
-                    children: menuContent
-                })
-            });
-            return /*#__PURE__*/ (0, jsx_runtime.jsx)(Sider, {
-                theme: theme,
-                trigger: null,
-                collapsible: true,
-                collapsed: collapsed,
-                breakpoint: 'lg',
-                collapsedWidth: 80,
-                className: LoggedMainContainer_module.sider,
-                children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Layout, {
-                    className: LoggedMainContainer_module.siderLayout,
-                    children: menuContent
-                })
-            });
+        const handleCountryChange = (countryCode)=>{
+            const country = COUNTRIES.find((c)=>c.code === countryCode) ?? COUNTRIES[0];
+            setSelectedCountry(country);
+            setDisplayValue('');
+            onChange?.('');
         };
-        const renderSecondarySidebar = ()=>{
-            if (!secondarySidebar) return null;
-            if (isMobile) return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Drawer, {
-                placement: 'right',
-                onClose: ()=>setSecondarySidebarDrawerVisible(false),
-                open: secondarySidebarDrawerVisible,
-                size: 280,
-                className: LoggedMainContainer_module.drawer,
-                title: null,
-                closeIcon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.CloseOutlined, {}),
-                children: secondarySidebar(user)
-            });
-            return /*#__PURE__*/ (0, jsx_runtime.jsx)(Sider, {
-                theme: theme,
-                width: secondarySidebarWidth,
-                children: secondarySidebar(user)
-            });
+        const handleInputChange = (e)=>{
+            const rawDigits = e.target.value.replaceAll(/\D/g, '').slice(0, selectedCountry.maxLocalDigits);
+            setDisplayValue(applyMask(rawDigits, selectedCountry.code));
+            onChange?.(selectedCountry.dialCode + rawDigits);
         };
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Layout, {
-            className: LoggedMainContainer_module.layout,
-            children: [
-                renderMenuContent(),
-                renderSecondarySidebar(),
-                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Layout, {
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime.jsxs)(Header, {
-                            className: `${LoggedMainContainer_module.header} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
-                                    children: isMobile ? /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                        type: 'text',
-                                        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuOutlined, {}),
-                                        onClick: ()=>setDrawerVisible(true)
-                                    }) : /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                        type: 'text',
-                                        icon: collapsed ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuUnfoldOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuFoldOutlined, {}),
-                                        onClick: ()=>setCollapsed(!collapsed)
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
-                                    size: isMobile ? 'small' : 'middle',
-                                    className: `${LoggedMainContainer_module.headerSpace} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
-                                    children: [
-                                        secondarySidebar && isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                            type: 'text',
-                                            icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.WechatOutlined, {}),
-                                            onClick: ()=>setSecondarySidebarDrawerVisible(true)
-                                        }),
-                                        !isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
-                                            children: t('LoggedMainContainer.theme')
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(ThemeToggle, {})
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)(Content, {
-                            className: `${LoggedMainContainer_module.content} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
-                            children: children
-                        })
-                    ]
-                })
-            ]
+        const countrySelector = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Select, {
+            value: selectedCountry.code,
+            onChange: handleCountryChange,
+            disabled: disabled,
+            size: size,
+            style: {
+                width: 110
+            },
+            popupMatchSelectWidth: false,
+            showSearch: true,
+            filterOption: (input, option)=>option?.searchLabel?.toLowerCase().includes(input.toLowerCase()) ?? false,
+            options: COUNTRIES.map((c)=>({
+                    value: c.code,
+                    label: `${c.flag} +${c.dialCode}`,
+                    searchLabel: countrySearchLabel(c)
+                })),
+            optionRender: (option)=>option.data.searchLabel
         });
-    }
-    LoggedMainContainer.propTypes = {
-        children: external_prop_types_default().node.isRequired
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Input, {
+            addonBefore: countrySelector,
+            value: displayValue,
+            onChange: handleInputChange,
+            disabled: disabled,
+            size: size,
+            placeholder: placeholder
+        });
+    };
+    PhoneInput.propTypes = {
+        value: external_prop_types_default().string,
+        onChange: external_prop_types_default().func,
+        disabled: external_prop_types_default().bool,
+        size: external_prop_types_default().oneOf([
+            'large',
+            'middle',
+            'small'
+        ]),
+        placeholder: external_prop_types_default().string
+    };
+    PhoneInput.format = (fullDigits)=>{
+        if (!fullDigits) return '';
+        const country = detectCountry(fullDigits);
+        const localDigits = fullDigits.slice(country.dialCode.length);
+        const masked = applyMask(localDigits, country.code);
+        return `${country.flag} +${country.dialCode} ${masked}`;
     };
     const Login_module = {
         containerRow: "containerRow-lnjnDt",
@@ -2499,7 +2670,7 @@ var __webpack_exports__ = {};
                                             hasUpperCase: /[A-Z]/.test(value),
                                             hasLowerCase: /[a-z]/.test(value),
                                             hasNumbers: /\d/.test(value),
-                                            hasSpecialChars: /[!@#$%^&*(),.?":{}|<>]/.test(value)
+                                            hasSpecialChars: /[^a-zA-Z0-9\s]/.test(value)
                                         };
                                         const failedChecks = Object.entries(strengthChecks).filter(([, passes])=>!passes).map(([key])=>key);
                                         if (0 === failedChecks.length) return Promise.resolve();
@@ -2688,6 +2859,7 @@ exports.OllamaOutlinedIcon = __webpack_exports__.OllamaOutlinedIcon;
 exports.PhoneInput = __webpack_exports__.PhoneInput;
 exports.TableContainer = __webpack_exports__.TableContainer;
 exports.ThemeToggle = __webpack_exports__.ThemeToggle;
+exports.UserMenu = __webpack_exports__.UserMenu;
 exports.useErrorMessage = __webpack_exports__.useErrorMessage;
 exports.useErrorModal = __webpack_exports__.useErrorModal;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
@@ -2715,6 +2887,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "PhoneInput",
     "TableContainer",
     "ThemeToggle",
+    "UserMenu",
     "useErrorMessage",
     "useErrorModal"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];