@astral/ui 4.17.5 → 4.17.6

package/components/DashboardLayout/Sidebar/types.d.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-import type { NavMenuProps } from '../../NavMenu';
-export type DashboardSidebarProps = {
-    /**
-     * Название класса, применяется к корневому компоненту
-     */
-    className?: string;
-    /**
-     * Пропс для передачи контента в заголовок сайдбара
-     * @example <Sidebar header={<SidebarButton />>} >
-     */
-    header?: ReactNode;
-    /**
-     * Описание меню
-     */
-    menu: {
-        /**
-         * Пункты меню
-         */
-        items: NavMenuProps['items'];
-    };
-    /**
-     * Если true, отображается skeleton
-     */
-    isLoading?: boolean;
-};

package/components/DashboardLayout/Sidebar/useLogic/useLogic.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-import { type DashboardSidebarProps } from '../types';
-export declare const useLogic: (props: DashboardSidebarProps) => {
-    isPinned: boolean;
-    isMobile: boolean;
-    collapsedIn: boolean;
-    onTogglePin: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    alertHeight: number;
-    className: string | undefined;
-    menu: {
-        items: [key: string, value: {
-            icon: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-            text: import("react").ReactNode;
-            counter?: import("../../../NavMenu/Item").CounterProps | undefined;
-            active?: boolean | undefined;
-            items?: [key: string, value: {
-                text: import("react").ReactNode;
-                active: boolean;
-                component: import("react").ElementType;
-                counter?: import("../../../NavMenu/Item").CounterProps | undefined;
-            }][] | undefined;
-            component?: import("react").ElementType | undefined;
-        } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & {
-            component?: import("react").ElementType | undefined;
-        }][];
-    };
-    header: import("react").ReactNode;
-    isLoading: boolean;
-};

package/components/DashboardLayout/Sidebar/useLogic/useLogic.js

@@ -1,94 +0,0 @@
-import { useContext, useEffect, useRef } from 'react';
-import { SidebarContext } from '../../../DashboardSidebarProvider';
-import { useViewportType } from '../../../hooks';
-import { useTheme } from '../../../theme';
-import { DashboardContext } from '../../DashboardContext';
-import { dashboardLayoutHeaderClassnames } from '../../Header/constants';
-import { dashboardLayoutMainClassnames } from '../../Main/constants';
-export const useLogic = (props) => {
-    const { className, menu, header, isLoading } = props;
-    const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = useContext(SidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading } = useContext(DashboardContext);
-    const { isMobile } = useViewportType();
-    const hoverTimerRef = useRef(null);
-    const theme = useTheme();
-    const onMouseEnter = () => {
-        if (isMobile) {
-            return;
-        }
-        if (hoverTimerRef.current) {
-            clearTimeout(hoverTimerRef.current);
-        }
-        //Задержка 200ms
-        hoverTimerRef.current = window.setTimeout(() => {
-            onToggleSidebar(true);
-        }, theme.transitions.duration.shorter);
-    };
-    const onMouseLeave = () => {
-        if (isMobile) {
-            return;
-        }
-        if (hoverTimerRef.current) {
-            clearTimeout(hoverTimerRef.current);
-            hoverTimerRef.current = null;
-        }
-        onToggleSidebar(false);
-        setIsPopupOpen(false);
-    };
-    useEffect(() => {
-        return () => {
-            if (hoverTimerRef.current) {
-                clearTimeout(hoverTimerRef.current);
-            }
-        };
-    }, []);
-    /**
-     * Функция закрытия sidebar
-     * Для избежания ситуации, когда sidebar не закреплен, но курсор увели за пределы его контейнера и
-     * событие onMouseLeave на элементе sidebar не выполнилось
-     */
-    useEffect(() => {
-        //Не подписываемся на изменения если мобильное устройство, если sidebar закреплен или свернут
-        if (isMobile || isPinned || (!collapsedIn && !isPinned)) {
-            return;
-        }
-        const handleMouseEnter = () => onToggleSidebar(false);
-        //Основные элементы DashboardLayout
-        const mainElement = document.querySelector(`.${dashboardLayoutMainClassnames.main}`);
-        const pageAlertElement = document.querySelector(`.${dashboardLayoutMainClassnames.alert}`);
-        const headerElement = document.querySelector(`.${dashboardLayoutHeaderClassnames.root}`);
-        if (mainElement) {
-            mainElement.addEventListener('mouseenter', handleMouseEnter);
-        }
-        if (pageAlertElement) {
-            pageAlertElement.addEventListener('mouseenter', handleMouseEnter);
-        }
-        if (headerElement) {
-            headerElement.addEventListener('mouseenter', handleMouseEnter);
-        }
-        return () => {
-            if (mainElement) {
-                mainElement.removeEventListener('mouseenter', handleMouseEnter);
-            }
-            if (pageAlertElement) {
-                pageAlertElement.removeEventListener('mouseenter', handleMouseEnter);
-            }
-            if (headerElement) {
-                headerElement.removeEventListener('mouseenter', handleMouseEnter);
-            }
-        };
-    }, [collapsedIn, isPinned]);
-    return {
-        isPinned,
-        isMobile,
-        collapsedIn,
-        onTogglePin,
-        onMouseEnter,
-        onMouseLeave,
-        alertHeight,
-        className,
-        menu,
-        header,
-        isLoading: isLoading || isDashboardLoading,
-    };
-};

package/components/PageLayout/PageAlert/PageAlert.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { type DashboardAlertProps } from '../../DashboardAlert';
-export type PageAlertProps = DashboardAlertProps;
-/**
- * Компонент отображения уведомления на странице приложения
- */
-export declare const PageAlert: (props: PageAlertProps) => JSX.Element;

package/components/PageLayout/PageAlert/styles.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const StyledDashboardAlert: import("@emotion/styled").StyledComponent<Omit<import("../../Alert").AlertProps, "title" | "display" | "slotProps" | "slots" | "actions"> & {
-    linkButtonProps?: import("../../DashboardAlert/types").LinkButtonProps<import("react").ElementType> | undefined;
-    isShow?: boolean | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/PageLayout/PageAlert/styles.js

@@ -1,10 +0,0 @@
-import { alertClassnames } from '../../Alert';
-import { DashboardAlert } from '../../DashboardAlert';
-import { styled } from '../../styles';
-export const StyledDashboardAlert = styled(DashboardAlert) `
-  &.${alertClassnames.root} {
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
-    }
-  }
-`;

package/components/PageLayout/PageAside/styles.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/components/PageLayout/PageAside/styles.js

@@ -1,27 +0,0 @@
-import { styled } from '../../styles';
-import { PAGE_ASIDE_WIDTH } from './constants';
-export const Wrapper = styled.aside `
-  overflow: auto;
-  grid-column: 2;
-  grid-row: 2;
-
-  width: ${PAGE_ASIDE_WIDTH};
-  padding: ${({ theme }) => theme.spacing(4, 6)};
-
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow: unset;
-    order: 3;
-
-    width: unset;
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
-    padding: ${({ theme }) => theme.spacing(4)};
-
-    background-color: ${({ theme }) => theme.palette.background.default};
-    border-top: 0;
-    border-left: 0;
-    border-radius: ${({ theme }) => theme.shape.medium};
-  }
-`;

package/components/PageLayout/PageAsideBlock/styles.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $isFullWidth?: boolean | undefined;
-}, {}, {}>;

package/components/PageLayout/PageAsideBlock/styles.js

@@ -1,47 +0,0 @@
-import { dividerClasses } from '@mui/material';
-import { Divider } from '../../Divider';
-import { styled } from '../../styles';
-export const Wrapper = styled.div `
-  position: relative;
-
-  padding: ${({ theme }) => theme.spacing(5, 0)};
-
-  :first-of-type {
-    padding: ${({ theme }) => theme.spacing(0, 0, 5)};
-  }
-
-  :last-of-type {
-    padding: ${({ theme }) => theme.spacing(5, 0, 0)};
-
-    .${dividerClasses.root} {
-      display: none;
-    }
-  }
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(4, 0)};
-
-    :first-of-type {
-      padding: ${({ theme }) => theme.spacing(3, 0, 4)};
-    }
-
-    :last-of-type {
-      padding: ${({ theme }) => theme.spacing(4, 0, 3)};
-    }
-  }
-`;
-export const StyledDivider = styled(Divider, {
-    shouldForwardProp: (prop) => !['$isFullWidth'].includes(prop),
-}) `
-  position: absolute;
-  bottom: 0;
-  left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-6)}` : '0'};
-
-  width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(12)})` : '100%'};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
-
-    width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(8)})` : '100%'};
-  }
-`;

package/components/PageLayout/PageContent/PageContent.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from 'react';
-import { classNames } from '../../utils';
-import { PageLayoutFooter, } from '../PageLayoutFooter';
-import { pageContentClassnames } from './constants';
-import { Content, Wrapper } from './styles';
-import { useLogic } from './useLogic';
-export const PageContent = forwardRef((props, forwardedRef) => {
-    const { hasAside, contentClassnames } = useLogic(props);
-    const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
-});

package/components/PageLayout/PageContent/PageContentHeader/Description/Description.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton } from '../../../../Skeleton';
-import { Typography } from '../../../../Typography';
-export const Description = ({ description, isLoading }) => {
-    if (!description && isLoading) {
-        return _jsx(Skeleton, { height: 20, width: 300 });
-    }
-    if (typeof description === 'string') {
-        return _jsx(Typography, { variant: "body1", children: description });
-    }
-    return (_jsx(Typography, { component: "div", variant: "body1", children: description }));
-};

package/components/PageLayout/PageContent/PageContentHeader/Title/Title.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OverflowTypography } from '../../../../OverflowTypography';
-import { Skeleton } from '../../../../Skeleton';
-import { TitleWrapper } from './styles';
-export const Title = ({ title, isLoading, children }) => {
-    if (!title && !children && isLoading) {
-        return _jsx(Skeleton, { height: 20, width: 200 });
-    }
-    if (typeof title === 'string') {
-        return (_jsxs(TitleWrapper, { component: "h3", variant: "h5", children: [_jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }), children] }));
-    }
-    return (_jsxs(TitleWrapper, { component: "div", role: "heading", "aria-level": 3, variant: "h5", children: [title, children] }));
-};

package/components/PageLayout/PageContent/PageContentHeader/Title/styles.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
-    color?: import("../../../../Typography").TypographyColor | undefined;
-    variant?: import("../../../../Typography").TypographyVariant | undefined;
-    colorIntensity?: import("../../../../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
-    isUpperCase?: boolean | undefined;
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/PageLayout/PageContent/PageContentHeader/Title/styles.js

@@ -1,8 +0,0 @@
-import { styled } from '../../../../styles';
-import { Typography } from '../../../../Typography';
-export const TitleWrapper = styled(Typography) `
-  overflow: hidden;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  align-items: center;
-`;

package/components/PageLayout/PageContent/PageContentHeader/styles.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const TitleBlock: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageContent/PageContentHeader/styles.js

@@ -1,24 +0,0 @@
-import { styled } from '../../../styles';
-export const Wrapper = styled.header `
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  align-items: center;
-  justify-content: space-between;
-
-  padding: ${({ theme }) => theme.spacing(4, 6)};
-
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-      margin: ${({ theme }) => theme.spacing(0, 4)};
-
-      background-color: ${({ theme }) => theme.palette.background.default};
-      border-top-left-radius: ${({ theme }) => theme.shape.medium};
-      border-top-right-radius: ${({ theme }) => theme.shape.medium};
-  }
-`;
-export const TitleBlock = styled.div `
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-`;

package/components/PageLayout/PageContent/constants.js

@@ -1,8 +0,0 @@
-import { createUIKitClassname } from '../../utils';
-export const pageContentClassnames = {
-    pageContent: createUIKitClassname('page-content'),
-    content: createUIKitClassname('page-content__content'),
-    contentHasHeader: createUIKitClassname('page-content__content_has-header'),
-    animation: createUIKitClassname('page-content_animation'),
-};
-export const PAGE_CONTENT_ANIMATION = 'white-flash';

package/components/PageLayout/PageContent/styles.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-type PageContentWrapperProps = {
-    $isFullHeight?: boolean;
-    $isSeparatorShown?: boolean;
-};
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & PageContentWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    $hasAside?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};

package/components/PageLayout/PageContent/styles.js

@@ -1,93 +0,0 @@
-import { pdfViewerClassnames } from '../../PdfViewer';
-import { styled } from '../../styles';
-import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
-const getPaddingContent = (theme, hasAside) => {
-    return hasAside ? theme.spacing(4, 6, 4) : theme.spacing(0, 6, 4);
-};
-export const Wrapper = styled('article', {
-    shouldForwardProp: (prop) => !['$isFullHeight', '$isSeparatorShown'].includes(prop),
-}) `
-  scroll-behavior: smooth;
-  scrollbar-gutter: unset;
-
-  overflow: hidden;
-  display: flex;
-  grid-column: 1;
-  grid-row: 2;
-  flex-direction: column;
-
-  border-top: ${({ $isSeparatorShown, theme }) => $isSeparatorShown ? `1px solid ${theme.palette.grey[300]}` : 'none'};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow: unset;
-    flex-grow: 1;
-    order: 4;
-
-    height: ${({ $isFullHeight }) => ($isFullHeight ? 'auto' : '100%')};
-
-    border-top: none;
-  }
-
-  @keyframes ${PAGE_CONTENT_ANIMATION} {
-    0% {
-      display: none;
-
-      opacity: 0;
-    }
-
-    50% {
-      display: none;
-
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  &.${pageContentClassnames.animation} > * {
-    animation: ${({ theme }) => `${PAGE_CONTENT_ANIMATION} ${theme.transitions.duration.complex * 2}ms`};
-  }
-`;
-export const Content = styled.div `
-  scroll-behavior: smooth;
-  scrollbar-gutter: stable;
-
-  overflow: auto;
-  flex-grow: 1;
-
-  padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    scrollbar-gutter: unset;
-
-    overflow: hidden;
-
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
-    padding: ${({ theme }) => theme.spacing(4, 4, 3)};
-
-    background-color: ${({ theme }) => theme.palette.background.default};
-    border-radius: ${({ theme }) => theme.shape.medium};
-
-    &.${pageContentClassnames.contentHasHeader} {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-  }
-
-  &:has(.${pdfViewerClassnames.document}.${pdfViewerClassnames.zoom}) {
-    scroll-behavior: auto;
-    scrollbar-gutter: auto;
-
-    overflow: auto;
-
-    padding-right: 0;
-
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      scrollbar-gutter: auto;
-
-      padding: ${({ theme }) => theme.spacing(4, 4, 3)};
-    }
-  }
-`;

package/components/PageLayout/PageContent/useLogic/useLogic.js

@@ -1,11 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { classNames } from '../../../utils';
-import { PageContext } from '../../PageContext';
-import { pageContentClassnames } from '../constants';
-export const useLogic = ({ header }) => {
-    const { hasAside } = useContext(PageContext);
-    const contentClassnames = useMemo(() => classNames(pageContentClassnames.content, {
-        [pageContentClassnames.contentHasHeader]: Boolean(header),
-    }), [header]);
-    return { contentClassnames, hasAside };
-};

package/components/PageLayout/PageHeader/HeaderContent/Description/styles.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-export declare const StyledTypography: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
-    color?: import("../../../../Typography").TypographyColor | undefined;
-    variant?: import("../../../../Typography").TypographyVariant | undefined;
-    colorIntensity?: import("../../../../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
-    isUpperCase?: boolean | undefined;
-} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledSkeleton: import("@emotion/styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
-    component?: import("react").ElementType | undefined;
-    variant?: "text" | "rounded" | "circular" | undefined;
-    shapeSize?: "small" | "medium" | "large" | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/components/PageLayout/PageHeader/HeaderContent/Description/styles.js

@@ -1,23 +0,0 @@
-import { Skeleton } from '../../../../Skeleton';
-import { styled } from '../../../../styles';
-import { Typography } from '../../../../Typography';
-export const StyledTypography = styled(Typography) `
-  grid-column: 2 / -1;
-  grid-row: 3;
-
-  padding-top: ${({ theme }) => theme.spacing(1)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
-export const StyledSkeleton = styled(Skeleton) `
-  grid-column: 2 / -1;
-  grid-row: 3;
-
-  margin: ${({ theme }) => theme.spacing(1, 0)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;

package/components/PageLayout/PageHeader/HeaderContent/HeaderContent.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Breadcrumbs } from '../../../Breadcrumbs';
-import { classNames } from '../../../utils';
-import { pageHeaderClassnames } from '../constants';
-import { PageActions } from '../PageActions';
-import { Title } from '../Title';
-import { Description } from './Description';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
-export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, isLoading, }) => {
-    const renderBreadcrumbs = () => {
-        if (!breadcrumbs) {
-            return null;
-        }
-        return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
-    };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && _jsx(PageSubheader, { children: subheader })] }));
-};

package/components/PageLayout/PageHeader/HeaderContent/styles.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-export declare const BreadcrumbsWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PageSubheader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DesktopTitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageHeader/HeaderContent/styles.js

@@ -1,33 +0,0 @@
-import { styled } from '../../../styles';
-export const BreadcrumbsWrapper = styled.div `
-  grid-column: 2;
-  grid-row: 1;
-
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
-export const PageSubheader = styled.div `
-  grid-column: 1 / -1;
-  grid-row: 4;
-
-  padding-top: ${({ theme }) => theme.spacing(4)};
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
-  }
-`;
-export const DesktopTitleWrapper = styled.div `
-  display: contents;
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-
-    min-height: 48px;
-    padding: ${({ theme }) => theme.spacing(0, 4)};
-
-    background-color: ${({ theme }) => theme.palette.grey[100]};
-  }
-`;