@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/commons/components/notification/elements/NotificationContainer.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FeedbackOutlined } from '@mui/icons-material';
-import { Drawer, useMediaQuery, useTheme } from '@mui/material';
-import {} from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
-import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import { NotificationCloseButton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationCloseButton';
-import { NotificationHeader } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationHeader';
-import { NotificationItems } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationItems';
-import { memo, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-export const NotificationContainer = memo(props => {
-    const { notifications = [], drawer = true, onDrawerOpen = () => null, onDrawerClose = () => null, initialPageSize = 10, loadingPageDelta = 2, ItemComponent = null, inDrawer = true, status = 'loading', maxDrawerWidth = '500px' } = props;
-    const { t } = useTranslation();
-    const theme = useTheme();
-    const upSM = useMediaQuery(theme.breakpoints.up('sm'));
-    const [pageSize, setPageSize] = useState(initialPageSize);
-    const handleLoading = useCallback(() => {
-        setPageSize(v => v + loadingPageDelta);
-    }, [loadingPageDelta]);
-    return inDrawer ? (_jsx(Drawer, { anchor: "right", open: drawer, onClick: () => (drawer ? onDrawerClose() : onDrawerOpen()), PaperProps: { style: { width: upSM ? '80%' : '100%', maxWidth: maxDrawerWidth } }, children: _jsxs("div", { style: {
-                height: '100%',
-                width: '100%',
-                overflowX: 'hidden',
-                pageBreakBefore: 'avoid',
-                pageBreakInside: 'avoid',
-                padding: theme.spacing(2.5),
-                paddingTop: 0
-            }, children: [_jsx(NotificationHeader, { icon: _jsx(FeedbackOutlined, {}), title: t('notification.title'), children: _jsx(NotificationCloseButton, { ...props }) }), _jsx(NotificationItems, { status: status, notifications: notifications, pageSize: pageSize, handleLoading: handleLoading, ItemComponent: ItemComponent })] }) })) : (_jsx(NotificationItems, { notifications: notifications, pageSize: pageSize, handleLoading: handleLoading, ItemComponent: ItemComponent, status: status }));
-});

package/commons/components/notification/elements/NotificationEndOfPage.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-export declare const NotificationEndOfPage: FC<{
-    endOfPage?: boolean;
-    onLoading?: () => void;
-}>;

package/commons/components/notification/elements/NotificationEndOfPage.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { NotificationSkeleton } from '@cccsaurora/howler-ui/commons/components/notification/elements/NotificationSkeleton';
-import { memo, useEffect, useRef, useState } from 'react';
-function useOnScreen(ref, rootMargin = '0px') {
-    // State and setter for storing whether element is visible
-    const [isIntersecting, setIntersecting] = useState(false);
-    useEffect(() => {
-        const observerRef = ref.current;
-        const observer = new IntersectionObserver(([entry]) => {
-            // Update our state when observer callback fires
-            setIntersecting(entry.isIntersecting);
-        }, {
-            rootMargin
-        });
-        if (observerRef) {
-            observer.observe(observerRef);
-        }
-        return () => {
-            if (observerRef) {
-                observer.unobserve(observerRef);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Empty array ensures that effect is only run on mount and unmount
-    return isIntersecting;
-}
-export const NotificationEndOfPage = memo(({ endOfPage = true, onLoading = () => null }) => {
-    const ref = useRef();
-    const onScreen = useOnScreen(ref);
-    useEffect(() => {
-        if (onScreen) {
-            onLoading();
-        }
-    }, [onLoading, onScreen]);
-    return endOfPage ? null : (_jsx("div", { ref: ref, style: { display: 'flex', justifyContent: 'center' }, children: _jsx(NotificationSkeleton, {}) }));
-});

package/commons/components/notification/elements/NotificationError.d.ts

@@ -1,2 +0,0 @@
-import { type FC } from 'react';
-export declare const NotificationError: FC;

package/commons/components/notification/elements/NotificationError.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ErrorOutline } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-export const NotificationError = memo(() => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-    return (_jsxs(Grid, { container: true, sx: { padding: 1, minHeight: theme.spacing(20) }, alignContent: "center", justifyContent: "center", alignItems: "center", gap: 1, children: [_jsx(ErrorOutline, { color: "error", sx: { fontSize: 40 } }), _jsx(Typography, { color: "error", variant: "h6", children: t('details.notification.error') })] }));
-});

package/commons/components/notification/elements/NotificationHeader.d.ts

@@ -1,8 +0,0 @@
-import React, { type FC } from 'react';
-type NotificationHeaderProps = {
-    title: string;
-    icon: React.ReactElement;
-    children: React.ReactNode;
-};
-export declare const NotificationHeader: FC<NotificationHeaderProps>;
-export {};

package/commons/components/notification/elements/NotificationHeader.js

@@ -1,18 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Icon, Typography, useTheme } from '@mui/material';
-import React, { memo } from 'react';
-export const NotificationHeader = memo(({ title = '', icon = null, children = null }) => {
-    const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingTop: theme.spacing(2)
-                }, children: [_jsx(Icon, { fontSize: "medium", sx: {
-                            color: 'inherit',
-                            backgroundColor: 'inherit',
-                            marginLeft: theme.spacing(1.5),
-                            marginRight: theme.spacing(1.5)
-                        }, children: icon }), _jsx(Typography, { variant: "h6", fontSize: "large", fontWeight: "bolder", flex: 1, children: title }), children] }), _jsx(Divider, { orientation: "horizontal", flexItem: true, style: { width: '100%', marginTop: theme.spacing(0.5) } })] }));
-});

package/commons/components/notification/elements/NotificationItems.d.ts

@@ -1,12 +0,0 @@
-import { type ItemComponentProps } from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
-import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
-import { type FC } from 'react';
-type NotificationListsProps = {
-    notifications: FeedItem[];
-    ItemComponent: FC<ItemComponentProps>;
-    pageSize?: number;
-    handleLoading: () => void;
-    status: string;
-};
-export declare const NotificationItems: FC<NotificationListsProps>;
-export {};

package/commons/components/notification/elements/NotificationItems.js

@@ -1,12 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Stack, useTheme } from '@mui/material';
-import {} from '@cccsaurora/howler-ui/commons/components/app/AppNotificationService';
-import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import { memo } from 'react';
-import { NotificationEndOfPage } from './NotificationEndOfPage';
-import { NotificationError } from './NotificationError';
-import { NotificationSkeleton } from './NotificationSkeleton';
-export const NotificationItems = memo(({ notifications = [], handleLoading = () => null, pageSize = 10, ItemComponent = null, status = 'loading' }) => {
-    const theme = useTheme();
-    return status === 'loading' ? (_jsx(_Fragment, { children: Array.from({ length: 3 }).map((_, i) => (_jsx(NotificationSkeleton, {}, `skeleton-${i}`))) })) : status === 'error' ? (_jsx(NotificationError, {})) : (status === 'ready' && (_jsxs(_Fragment, { children: [_jsx(Stack, { direction: "column", spacing: theme.spacing(1.25), margin: theme.spacing(1.25), divider: _jsx(Divider, { orientation: "horizontal", flexItem: true, style: { width: '100%', alignSelf: 'center' } }), children: notifications.slice(0, pageSize).map(n => (_jsx(ItemComponent, { item: n }, n?.title))) }), _jsx(NotificationEndOfPage, { endOfPage: pageSize >= notifications.length, onLoading: () => handleLoading() })] })));
-});

package/commons/components/notification/elements/NotificationSkeleton.d.ts

@@ -1,2 +0,0 @@
-import { type FC } from 'react';
-export declare const NotificationSkeleton: FC;

package/commons/components/notification/elements/NotificationSkeleton.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Chip, Skeleton, Typography, useTheme } from '@mui/material';
-import { memo } from 'react';
-export const NotificationSkeleton = memo(() => {
-    const theme = useTheme();
-    return (_jsxs("div", { style: { width: '100%' }, children: [_jsx(Typography, { variant: "caption", children: _jsx(Skeleton, { width: "30%" }) }), _jsx(Typography, { variant: "h6", children: _jsx(Skeleton, { width: "50%" }) }), _jsxs("div", { style: { marginTop: theme.spacing(0.25), marginBottom: theme.spacing(1) }, children: [_jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) }), _jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) }), _jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) })] }), _jsxs("div", { style: {
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center'
-                }, children: [_jsx(Chip, { size: "small", variant: "outlined", label: _jsx(Skeleton, { width: "30px" }), style: { margin: theme.spacing(0.25) } }), _jsx(Chip, { size: "small", variant: "outlined", label: _jsx(Skeleton, { width: "30px" }), style: { margin: theme.spacing(0.25) } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }), _jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: _jsx(Skeleton, { width: 50 }) }), _jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }), _jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: _jsx(Skeleton, { width: 50 }) })] })] }));
-});

package/commons/components/notification/elements/NotificationTopNavButton.d.ts

@@ -1,9 +0,0 @@
-import { type FC } from 'react';
-type TopNavButtonProps = {
-    newItems?: number;
-    drawer?: boolean;
-    onDrawerOpen: () => void;
-    onDrawerClose: () => void;
-};
-export declare const NotificationTopNavButton: FC<TopNavButtonProps>;
-export {};

package/commons/components/notification/elements/NotificationTopNavButton.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { NotificationsActiveOutlined, NotificationsNoneOutlined } from '@mui/icons-material';
-import { Badge, IconButton, Tooltip } from '@mui/material';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-export const NotificationTopNavButton = memo(({ newItems = 0, drawer = false, onDrawerOpen = () => null, onDrawerClose = () => null }) => {
-    const { t } = useTranslation();
-    return (_jsx(Tooltip, { title: t('notification.title'), children: _jsx(IconButton, { color: "inherit", onClick: () => (drawer ? onDrawerClose() : onDrawerOpen()), size: "large", children: _jsx(Badge, { badgeContent: newItems, color: "info", max: 99, children: newItems > 0 ? _jsx(NotificationsActiveOutlined, {}) : _jsx(NotificationsNoneOutlined, {}) }) }) }));
-});

package/commons/components/notification/elements/item/NotificationItem.d.ts

@@ -1,5 +0,0 @@
-import { type FC } from 'react';
-import type { FeedItem } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
-export declare const NotificationItem: FC<{
-    item?: FeedItem;
-}>;

package/commons/components/notification/elements/item/NotificationItem.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
-import { memo } from 'react';
-import { NotificationItemAuthor } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemAuthor';
-import { NotificationItemContent } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemContent';
-import { NotificationItemDate } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemDate';
-import { NotificationItemImage } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemImage';
-import { NotificationItemTag } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTag';
-import { NotificationItemTitle } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTitle';
-export const NotificationItem = memo(({ item = null }) => {
-    const theme = useTheme();
-    return !item ? null : (_jsxs("div", { style: {
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start'
-        }, children: [_jsx(NotificationItemDate, { ...item }), _jsx(NotificationItemTitle, { ...item }), _jsx(NotificationItemContent, { ...item }), _jsx(NotificationItemImage, { ...item }), _jsxs("div", { style: {
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    marginTop: theme.spacing(1)
-                }, children: [item?.tags && item?.tags.map(tag => _jsx(NotificationItemTag, { tag: tag }, `${tag}`)), _jsx("div", { style: { flex: 1 } }), item?.authors &&
-                        item?.authors.map(author => _jsx(NotificationItemAuthor, { author: author }, `${author?.name}`))] })] }));
-});

package/commons/components/notification/elements/item/NotificationItemAuthor.d.ts

@@ -1,5 +0,0 @@
-import type { FeedAuthor } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
-import { type FC } from 'react';
-export declare const NotificationItemAuthor: FC<{
-    author: FeedAuthor;
-}>;

package/commons/components/notification/elements/item/NotificationItemAuthor.js

@@ -1,31 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, Typography, useTheme } from '@mui/material';
-import { memo, useMemo } from 'react';
-export const NotificationItemAuthor = memo(({ author = null }) => {
-    const theme = useTheme();
-    //Limit github avatar size to 50px
-    const avatar = useMemo(() => {
-        if (author?.avatar.includes('github')) {
-            let url = new URLSearchParams(author?.avatar);
-            url.append('s', '50');
-            return decodeURIComponent(url.toString());
-        }
-        else {
-            return author?.avatar;
-        }
-    }, [author]);
-    const NotificationAuthorContent = useMemo(() => (_jsxs(_Fragment, { children: [avatar && (_jsx("img", { src: avatar, alt: avatar, style: {
-                    maxHeight: '25px',
-                    borderRadius: '50%',
-                    color: theme.palette.text.secondary,
-                    marginRight: theme.spacing(1)
-                } })), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: author?.url &&
-                    author?.url !== '' && {
-                    color: theme.palette.text.secondary,
-                    transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-                    '&:hover': {
-                        color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.dark
-                    }
-                }, children: author?.name })] })), [author?.name, author?.url, avatar, theme]);
-    return author && author?.url && author?.url !== '' ? (_jsx(Link, { title: author?.url, href: author?.url, target: "_blank", rel: "noopener noreferrer", style: { display: 'contents' }, children: NotificationAuthorContent }, `${author?.name}`)) : (_jsx("div", { style: { display: 'contents' }, children: NotificationAuthorContent }, `${author?.name}`));
-});

package/commons/components/notification/elements/item/NotificationItemContent.d.ts

@@ -1,3 +0,0 @@
-import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
-import { type FC } from 'react';
-export declare const NotificationItemContent: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemContent.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Link, Typography } from '@mui/material';
-import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import DOMPurify from 'dompurify';
-import { memo } from 'react';
-import Markdown from 'react-markdown';
-export const NotificationItemContent = memo(({ content_html = null, content_text = null, content_md = null }) => content_md ? (_jsx(Box, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, children: _jsx(Markdown, { components: { a: props => _jsx(Link, { href: props.href, children: props.children }) }, children: content_md }) })) : content_html ? (_jsx(Typography, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, dangerouslySetInnerHTML: {
-        __html: DOMPurify.sanitize(content_html, { USE_PROFILES: { html: true } })
-    } })) : content_text ? (_jsx(Typography, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, variant: "body2", color: "textPrimary", children: content_text })) : null);

package/commons/components/notification/elements/item/NotificationItemDate.d.ts

@@ -1,3 +0,0 @@
-import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
-import { type FC } from 'react';
-export declare const NotificationItemDate: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemDate.js

@@ -1,10 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import dayjs from 'dayjs';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-export const NotificationItemDate = memo(({ date_published = null }) => {
-    const { i18n } = useTranslation(['notification']);
-    return !date_published ? null : (_jsx(Typography, { lineHeight: "revert", display: "block", variant: "caption", color: "textSecondary", children: _jsx(_Fragment, { children: dayjs(date_published).locale(i18n.language).fromNow() }) }));
-});

package/commons/components/notification/elements/item/NotificationItemImage.d.ts

@@ -1,4 +0,0 @@
-import { type FC } from 'react';
-export declare const NotificationItemImage: FC<{
-    image?: string;
-}>;

package/commons/components/notification/elements/item/NotificationItemImage.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-export const NotificationItemImage = memo(({ image = null }) => image && (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("img", { src: image, alt: image, style: {
-            maxWidth: '256px',
-            maxHeight: '256px',
-            borderRadius: '5px',
-            marginTop: '8px'
-        } }) })));

package/commons/components/notification/elements/item/NotificationItemTag.d.ts

@@ -1,4 +0,0 @@
-import { type FC } from 'react';
-export declare const NotificationItemTag: FC<{
-    tag: string;
-}>;

package/commons/components/notification/elements/item/NotificationItemTag.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Chip } from '@mui/material';
-import { memo } from 'react';
-const TAG_COLOR = {
-    new: 'info',
-    current: 'success',
-    dev: 'warning',
-    service: 'secondary',
-    blog: 'default'
-};
-export const NotificationItemTag = memo(({ tag = null }) => tag &&
-    tag in TAG_COLOR && (_jsx(Chip, { label: tag.toLowerCase(), variant: "outlined", size: "small", color: TAG_COLOR[tag] ?? 'default' })));

package/commons/components/notification/elements/item/NotificationItemTitle.d.ts

@@ -1,3 +0,0 @@
-import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
-import { type FC } from 'react';
-export declare const NotificationItemTitle: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemTitle.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle } from '@mui/icons-material';
-import { Link, Stack, Typography, useTheme } from '@mui/material';
-import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import { memo } from 'react';
-export const NotificationItemTitle = memo(({ title = null, url = null, _isNew = false }) => {
-    const theme = useTheme();
-    return !title ? null : !url ? (_jsx(Typography, { variant: "h6", sx: { color: theme.palette.primary.main }, children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [title, _isNew && _jsx(Circle, { sx: { width: '15px' } })] }) })) : (_jsx(Typography, { component: Link, href: url, target: "_blank", rel: "noopener noreferrer", underline: "none", sx: {
-            color: theme.palette.primary.main,
-            transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-            '&:hover': {
-                color: theme.palette.text.secondary
-            }
-        }, variant: "h6", children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [title, _isNew && _jsx(Circle, { sx: { width: '15px' } })] }) }));
-});

package/commons/components/notification/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
-export * from '@cccsaurora/howler-ui/commons/components/notification/Notification';

package/commons/components/notification/index.js

@@ -1,2 +0,0 @@
-export * from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
-export * from '@cccsaurora/howler-ui/commons/components/notification/Notification';

package/commons/components/pages/PageCardCentered.d.ts

@@ -1,5 +0,0 @@
-declare function PageCardCentered({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PageCardCentered>;
-export default _default;

package/commons/components/pages/PageCardCentered.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card, styled, useMediaQuery, useTheme } from '@mui/material';
-import { memo } from 'react';
-const StyledCard = styled(Card)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    left: '50%', // X
-    top: '50%', // Y
-    transform: 'translate(-50%, -50%)',
-    maxWidth: '22rem',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '4px',
-    [theme.breakpoints.down('sm')]: {
-        backgroundColor: theme.palette.background.default,
-        width: '100%',
-        maxWidth: '22rem',
-        padding: '0rem 1rem 3rem'
-    },
-    [theme.breakpoints.up('sm')]: {
-        width: '22rem',
-        padding: '0 2rem 3rem'
-    }
-}));
-function PageCardCentered({ children }) {
-    const theme = useTheme();
-    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
-    return _jsx(StyledCard, { elevation: isXs ? 0 : 4, children: children });
-}
-export default memo(PageCardCentered);

package/commons/components/pages/PageCenter.d.ts

@@ -1,9 +0,0 @@
-import { type PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-type PageCenterProps = PageProps & {
-    children: React.ReactNode;
-    maxWidth?: string;
-    textAlign?: string;
-};
-declare const PageCenter: ({ children, height, width, maxWidth, textAlign, ...props }: PageCenterProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PageCenter>;
-export default _default;

package/commons/components/pages/PageCenter.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
-import {} from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import { memo } from 'react';
-const PageCenter = ({ children, height, width = '95%', maxWidth = '1200px', textAlign = 'center', ...props }) => {
-    return (_jsx(Box, { component: "div", height: height, width: width, maxWidth: maxWidth, sx: theme => ({
-            height,
-            width,
-            textAlign,
-            display: 'flex',
-            flexDirection: 'column',
-            margin: '0 auto 0 auto',
-            maxWidth,
-            [theme.breakpoints.down('sm')]: {
-                maxWidth: '100%'
-            }
-        }), children: _jsx(PageContent, { ...props, height: "100%", children: children }) }));
-};
-export default memo(PageCenter);

package/commons/components/pages/PageContent.d.ts

@@ -1,8 +0,0 @@
-import { type PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import { type ReactNode } from 'react';
-type PageContentProps = PageProps & {
-    children?: ReactNode;
-};
-declare const PageContent: ({ children, ...props }: PageContentProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PageContent>;
-export default _default;

package/commons/components/pages/PageContent.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import usePageProps, {} from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import { memo } from 'react';
-const PageContent = ({ children, ...props }) => {
-    const pageProps = usePageProps({ props });
-    return _jsx("div", { ...pageProps, children: children });
-};
-export default memo(PageContent);

package/commons/components/pages/PageFullScreen.d.ts

@@ -1,11 +0,0 @@
-type PageFullscreenProps = {
-    children: React.ReactNode;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-declare const PageFullscreen: ({ children, margin, mb, ml, mr, mt }: PageFullscreenProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PageFullscreen>;
-export default _default;

package/commons/components/pages/PageFullScreen.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fullscreen, FullscreenExit } from '@mui/icons-material';
-import { Box, IconButton } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
-import useFullscreenStatus from '@cccsaurora/howler-ui/commons/components/utils/hooks/useFullscreenStatus';
-import { memo, useCallback, useRef } from 'react';
-const PageFullscreen = ({ children, margin = null, mb = 2, ml = 2, mr = 2, mt = 2 }) => {
-    const maximizableElement = useRef(null);
-    const appBarHeight = useAppBarHeight();
-    const layout = useAppLayout();
-    const appbar = useAppBar();
-    let isFullscreen;
-    let setIsFullscreen;
-    let fullscreenSupported;
-    const barWillHide = layout.current !== 'top' && appbar.autoHide;
-    try {
-        [isFullscreen, setIsFullscreen] = useFullscreenStatus(maximizableElement);
-    }
-    catch (e) {
-        fullscreenSupported = false;
-        isFullscreen = false;
-        setIsFullscreen = undefined;
-    }
-    const handleEnterFullscreen = useCallback(() => {
-        setIsFullscreen();
-    }, [setIsFullscreen]);
-    const handleExitFullscreen = () => {
-        document.exitFullscreen();
-    };
-    return (_jsxs(Box, { ref: maximizableElement, component: "div", sx: theme => ({ backgroundColor: theme.palette.background.default }), children: [_jsx(Box, { component: "div", sx: theme => ({
-                    top: barWillHide || isFullscreen ? 0 : appBarHeight,
-                    float: 'right',
-                    paddingTop: theme.spacing(2),
-                    position: 'sticky',
-                    right: theme.spacing(2),
-                    zIndex: theme.zIndex.appBar + 1
-                }), children: fullscreenSupported ? null : isFullscreen ? (_jsx(IconButton, { onClick: handleExitFullscreen, size: "large", children: _jsx(FullscreenExit, {}) })) : (_jsx(IconButton, { onClick: handleEnterFullscreen, size: "large", children: _jsx(Fullscreen, {}) })) }), _jsx(PageContent, { margin: margin, mb: mb, ml: ml, mr: mr, mt: mt, children: children })] }));
-};
-export default memo(PageFullscreen);

package/commons/components/pages/PageFullWidth.d.ts

@@ -1,11 +0,0 @@
-type PageFullWidthProps = {
-    children: React.ReactNode;
-    height?: number | string;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-declare const _default: import("react").NamedExoticComponent<PageFullWidthProps>;
-export default _default;

package/commons/components/pages/PageFullWidth.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
-import { memo } from 'react';
-const PageFullWidth = ({ children, height, margin = null, mb = 2, ml = 2, mr = 2, mt = 2 }) => {
-    return (_jsx(PageContent, { width: "100%", height: height, margin: margin, mb: mb, ml: ml, mr: mr, mt: mt, children: children }));
-};
-export default memo(PageFullWidth);

package/commons/components/pages/PageHeader.d.ts

@@ -1,23 +0,0 @@
-import { type ButtonProps, type IconButtonProps } from '@mui/material';
-export type PageHeaderAction = {
-    key?: string;
-    title?: string;
-    tooltip?: string;
-    icon?: React.ReactNode;
-    color?: 'primary' | 'secondary';
-    action?: () => void;
-    btnProp?: ButtonProps | IconButtonProps;
-};
-type PageHeaderProps = {
-    children?: React.ReactNode;
-    left?: React.ReactNode;
-    right?: React.ReactNode;
-    actions?: PageHeaderAction[];
-    isSticky?: boolean;
-    top?: number;
-    elevation?: number;
-    backgroundColor?: string;
-    className?: string;
-};
-declare const _default: import("react").NamedExoticComponent<PageHeaderProps>;
-export default _default;

package/commons/components/pages/PageHeader.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppBar, Button, IconButton, Toolbar, Tooltip, useTheme } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { memo } from 'react';
-const PageHeader = ({ children, left, right, actions, backgroundColor, className, isSticky = false, top = null, elevation = 0 }) => {
-    const theme = useTheme();
-    const layout = useAppLayout();
-    const appbar = useAppBar();
-    const appBarHeight = useAppBarHeight();
-    const barWillHide = layout.current !== 'top' && appbar.autoHide;
-    return (_jsxs(AppBar, { id: "header1", position: isSticky ? 'sticky' : 'relative', style: {
-            top: top !== null ? top : isSticky ? (barWillHide ? 0 : appBarHeight) : null,
-            backgroundColor: backgroundColor || theme.palette.background.default,
-            zIndex: !isSticky ? theme.zIndex.appBar - 100 : null
-        }, className: className, elevation: elevation, color: "inherit", children: [children, (left || right || actions) && (_jsxs(Toolbar, { style: { minHeight: 0 }, disableGutters: true, children: [_jsx("div", { style: { flexGrow: 1 }, children: left }), _jsx("div", { children: actions &&
-                            actions.map((a, i) => {
-                                let act = null;
-                                if (a.title) {
-                                    act = (_jsx(Button, { startIcon: a.icon, color: a.color, onClick: a.action, ...a.btnProp, style: { marginRight: theme.spacing(1) }, children: a.title }, a.tooltip ? null : a.key ? a.key : `ph-action-${i}`));
-                                }
-                                else {
-                                    act = (_jsx(IconButton, { color: a.color, onClick: a.action, ...a.btnProp, style: { marginRight: theme.spacing(1) }, size: "large", children: a.icon }, a.tooltip ? null : a.key ? a.key : `ph-action-${i}`));
-                                }
-                                return a.tooltip ? (_jsx(Tooltip, { title: a.tooltip, children: act }, a.key ? a.key : `ph-action-${i}`)) : (act);
-                            }) }), _jsx("div", { children: right })] }))] }));
-};
-export default memo(PageHeader);

package/commons/components/pages/hooks/usePageProps.d.ts

@@ -1,24 +0,0 @@
-export type PageProps = {
-    className?: string;
-    width?: string | number;
-    height?: string | number;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-export default function usePageProps({ props, defaultOverrides }: {
-    props: PageProps;
-    defaultOverrides?: PageProps;
-}): {
-    className: string;
-    style: {
-        width: string | number;
-        height: string | number;
-        marginBottom: string;
-        marginLeft: string;
-        marginRight: string;
-        marginTop: string;
-    };
-};