@astral/ui 4.17.5 → 4.17.6

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const StyledTypography: import("../../../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "inherit" | "left" | "right" | "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" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "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" | "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("../../../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?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,23 @@
+import { Skeleton } from '../../../Skeleton';
+import { styled } from '../../../styled';
+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/PageHeader/HeaderContent/HeaderContent.js

@@ -0,0 +1,17 @@
+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/PageHeader/HeaderContent/styles.d.ts

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

package/components/PageHeader/HeaderContent/styles.js

@@ -0,0 +1,33 @@
+import { styled } from '../../styled';
+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]};
+  }
+`;

package/components/PageHeader/MobilePageActions/MobilePageActions.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType } from 'react';
+import type { ActionGroupProps } from '../../ActionGroup';
+export type MobilePageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+};
+export declare const MobilePageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: MobilePageActionsProps<TMainActionComponent, TSecondaryActionComponent>) => JSX.Element | null;

package/components/PageHeader/MobilePageActions/styles.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../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 ShowMoreButton: import("../../styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"large" | "medium" | "small", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "contained" | "text", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "action" | "color" | "fullWidth" | "size" | "children" | "tabIndex" | "sx" | "disabled" | "href" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledCollapse: import("../../styled").StyledComponent<import("@mui/material").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionWrapper: import("../../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 SecondaryActionsWrapper: import("../../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 StyledMainActions: import("../../styled").StyledComponent<Omit<import("../../ActionGroup").MainActionsProps<import("react").ElementType>, "actions"> & {
+    actions?: import("../..").MainAction<import("react").ElementType>[] | undefined;
+    className?: string | undefined;
+    size: "large" | "medium";
+    spacing?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isVisibleShowMoreButton: boolean;
+}, {}, {}>;

package/components/PageHeader/MobilePageActions/styles.js

@@ -0,0 +1,67 @@
+import { Button, Collapse, collapseClasses } from '@mui/material';
+import { styled } from '../../styled';
+import { PAGE_HEADER_HEIGHT_MOBILE } from '../constants';
+import { MainActions } from '../PageActions';
+export const Wrapper = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.speedDial};
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    order: 5;
+
+    width: 100%;
+
+    /* Ограничиваем высоту */
+    max-height: calc(100% - ${PAGE_HEADER_HEIGHT_MOBILE});
+    margin-top: auto;
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.common.white};
+    border-top-left-radius: ${({ theme }) => theme.shape.large};
+    border-top-right-radius: ${({ theme }) => theme.shape.large};
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+`;
+export const ShowMoreButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    height: 40px;
+    min-height: 40px;
+    padding: 0;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+export const StyledCollapse = styled(Collapse) `
+  & .${collapseClasses.wrapper} > .${collapseClasses.wrapperInner} {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+export const ActionWrapper = styled.div `
+  overflow: auto;
+`;
+export const SecondaryActionsWrapper = styled('div') `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+export const StyledMainActions = styled(MainActions, {
+    shouldForwardProp: (prop) => !['$isVisibleShowMoreButton'].includes(prop),
+}) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: ${({ theme, $isVisibleShowMoreButton }) => $isVisibleShowMoreButton ? theme.spacing(2) : 0};
+  }
+`;

package/components/PageHeader/MobilePageActions/useLogic/useLogic.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType } from 'react';
+import { type MobilePageActionsProps } from '../MobilePageActions';
+type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = MobilePageActionsProps<TMainActionComponent, TSecondaryActionComponent>;
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, secondaryVisible, isLoading, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent>) => {
+    disabledAction: boolean;
+    isActive: boolean;
+    handleToggle: () => void;
+    visibleMainActions: import("../../../ActionGroup").MainAction<TMainActionComponent>[] | undefined;
+    hiddenMainActions: import("../../../ActionGroup").MainAction<TMainActionComponent>[] | undefined;
+    isVisibleShowMoreButton: boolean;
+    isLoading: boolean | undefined;
+};
+export {};

package/components/PageHeader/MobilePageActions/useLogic/useLogic.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { useActionsState } from '../../../ActionGroup';
+export const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
+    const [isActive, setIsActive] = useState(false);
+    const { disabledAction } = useActionsState({ main, secondary });
+    const handleToggle = () => {
+        setIsActive(!isActive);
+    };
+    const visibleMainActions = main?.slice(0, 2);
+    const hiddenMainActions = main?.slice(2);
+    return {
+        disabledAction,
+        isActive,
+        handleToggle,
+        visibleMainActions,
+        hiddenMainActions,
+        isVisibleShowMoreButton: Boolean(secondary || secondaryVisible || hiddenMainActions?.length),
+        isLoading,
+    };
+};

package/components/PageHeader/PageActions/MainActions/MainActions.d.ts

@@ -0,0 +1,17 @@
+import { type ElementType } from 'react';
+import { type MainAction, type MainActionsProps } from '../../../ActionGroup';
+import { type ButtonSize } from '../../../Button';
+type PageMainActionsProps<TMainActionComponent extends ElementType> = Omit<MainActionsProps<TMainActionComponent>, 'actions'> & {
+    actions?: MainAction<TMainActionComponent>[];
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    className?: string;
+    size: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
+};
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
+export {};

package/components/PageHeader/PageActions/MainActions/MainActions.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MainActions as ActionGroupMainActions, } from '../../../ActionGroup';
+import { Wrapper } from './styles';
+export const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
+    if (!actions || (actions && actions.length === 0)) {
+        return null;
+    }
+    return (_jsx(Wrapper, { className: className, "$spacing": spacing, children: _jsx(ActionGroupMainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+};

package/components/PageHeader/PageActions/MainActions/styles.d.ts

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

package/components/PageHeader/PageActions/MainActions/styles.js

@@ -0,0 +1,19 @@
+import { buttonClasses } from '@mui/material';
+import { styled } from '../../../styled';
+import { tooltipClassnames } from '../../../Tooltip';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-wrap: wrap;
+    gap: ${({ theme }) => theme.spacing(2)};
+    order: -1;
+
+    padding-bottom: ${({ theme }) => theme.spacing(2)};
+
+    & > .${tooltipClassnames.contentWrapper}, & > .${buttonClasses.root} {
+      flex: 1 1 calc(50% - ${({ theme }) => theme.spacing(1)});
+    }
+  }
+`;

package/components/PageHeader/PageActions/PageActionSkeleton/PageActionSkeleton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ButtonSize } from '../../../Button';
+type Props = {
+    size?: ButtonSize;
+};
+export declare const PageActionSkeleton: ({ size }: Props) => JSX.Element;
+export {};

package/components/PageHeader/PageActions/PageActionSkeleton/PageActionSkeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../../../Skeleton';
+import { Wrapper } from './styles';
+export const PageActionSkeleton = ({ size = 'medium' }) => {
+    if (size === 'medium') {
+        return _jsx(Skeleton, { variant: "rounded", height: 32, width: 180 });
+    }
+    return (_jsxs(Wrapper, { children: [_jsx(Skeleton, { variant: "rounded", height: 40, width: 40 }), _jsx(Skeleton, { variant: "rounded", height: 40, width: 190 })] }));
+};

package/components/PageHeader/PageActions/PageActionSkeleton/styles.d.ts

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

package/components/PageHeader/PageActions/PageActionSkeleton/styles.js

@@ -0,0 +1,5 @@
+import { styled } from '../../../styled';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;

package/components/PageHeader/PageActions/PageActions.d.ts

@@ -0,0 +1,25 @@
+import { type ElementType } from 'react';
+import { type ActionGroupProps } from '../../ActionGroup';
+import { type ButtonSize } from '../../Button';
+export type PageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+    size?: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
+};
+export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/components/PageHeader/PageActions/PageActions.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionsState } from '../../ActionGroup';
+import { forwardRefWithGeneric } from '../../forwardRefWithGeneric';
+import { MainActions } from './MainActions';
+import { PageActionSkeleton } from './PageActionSkeleton';
+import { SecondaryActions } from './SecondaryActions';
+import { SecondaryVisibleActions } from './SecondaryVisibleActions';
+import { ActionWrapper, SecondaryWrapper, Wrapper } from './styles';
+const PageActionsInner = (props, ref) => {
+    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
+    const { disabledAction } = useActionsState({ main, secondary });
+    const renderSecondaryActions = () => (_jsxs(SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
+    if (isLoading) {
+        return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
+    }
+    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
+};
+export const PageActions = forwardRefWithGeneric(PageActionsInner);

package/components/PageHeader/PageActions/SecondaryActions/SecondaryActions.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+import type { SecondaryActionProps } from '../../../ActionGroup';
+export declare const SecondaryActions: <TSecondaryActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, }: SecondaryActionProps<TSecondaryActionComponent>) => JSX.Element;

package/components/PageHeader/PageActions/SecondaryActions/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledMobileButton: import("../../../styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => JSX.Element | null;

package/components/PageHeader/PageActions/SecondaryActions/styles.js

@@ -0,0 +1,19 @@
+import { SecondaryActions } from '../../../ActionGroup';
+import { Button } from '../../../Button';
+import { styled } from '../../../styled';
+export const StyledMobileButton = styled(Button) `
+  display: none;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+  }
+`;
+export const StyledSecondaryActions = styled(SecondaryActions) `
+  display: flex;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/PageHeader/PageActions/SecondaryVisibleActions/SecondaryVisibleActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type SecondaryVisibleActionProps } from '../../../ActionGroup';
+export declare const SecondaryVisibleActions: ({ actions, size, }: SecondaryVisibleActionProps) => JSX.Element;

package/components/PageHeader/PageActions/SecondaryVisibleActions/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const StyledMobileButton: import("../../../styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSecondaryVisibleActions: import("../../../styled").StyledComponent<import("../../../ActionGroup").SecondaryVisibleActionProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageHeader/PageActions/SecondaryVisibleActions/styles.js

@@ -0,0 +1,18 @@
+import { SecondaryVisibleActions } from '../../../ActionGroup';
+import { Button } from '../../../Button';
+import { styled } from '../../../styled';
+export const StyledMobileButton = styled(Button) `
+  display: none;
+  flex-grow: 1;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+  }
+`;
+export const StyledSecondaryVisibleActions = styled(SecondaryVisibleActions) `
+  display: flex;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/PageHeader/PageActions/styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../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 SecondaryWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ActionWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageHeader/PageActions/styles.js

@@ -0,0 +1,29 @@
+import { styled } from '../../styled';
+export const Wrapper = styled.div `
+  display: flex;
+  grid-column: 3;
+  grid-row: 1 / 4;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const SecondaryWrapper = styled('div') `
+  display: flex;
+  flex-wrap: nowrap;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+export const ActionWrapper = styled.div `
+  display: flex;
+  flex-direction: row-reverse;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
+`;

package/components/PageHeader/PageHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from '../utils';
+import { pageHeaderClassnames } from './constants';
+import { HeaderContent } from './HeaderContent';
+import { MobilePageActions } from './MobilePageActions';
+import { MobileTitleWrapper, Wrapper } from './styles';
+import { Title } from './Title';
+import { useLogic } from './useLogic';
+export const PageHeader = (props) => {
+    const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = useLogic(props);
+    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+};

package/components/PageHeader/Title/Title.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLOutlineMd } from '../../../icons';
+import { OverflowTypography } from '../../OverflowTypography';
+import { BackButton, StyledSkeleton, TitleWrapper } from './styles';
+export const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }) => {
+    if (!title && isLoading) {
+        return _jsx(StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
+    }
+    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+};