@astral/ui 4.17.5 → 4.17.6

package/hook-form/FormPageLayout/FormPageFooter/FormPageFooter.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { SecondaryAction } from '../../FormPageLayoutBase';
+export type FormFooterProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+    /**
+     * Текст для кнопки отправки формы
+     * @default 'Отправить'
+     */
+    submitButtonText?: string;
+};
+export declare const FormPageFooter: (props: FormFooterProps) => JSX.Element;

package/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { SecondaryAction } from '../../../FormPageLayoutBase';
+export type SecondaryActionsProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Массив вторичных действий для отображения
+     */
+    actions: SecondaryAction[];
+    /**
+     * Состояние для Collapse
+     */
+    isActive: boolean;
+    /**
+     * Отключает отступ у действий скрытых
+     */
+    isDisablePadding?: boolean;
+};
+export declare const SecondaryActions: (props: SecondaryActionsProps) => JSX.Element;

package/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse } from '../../../../components/Collapse';
+import { Tooltip } from '../../../../components/Tooltip';
+import { ActionWrapper, DesktopActionWrapper, MobileActionWrapper, StyledButton, StyledMobileButton, } from './styles';
+import { useLogic } from './useLogic';
+export const SecondaryActions = (props) => {
+    const { isDisabled, actions, isActive, isDisablePadding = false } = props;
+    const { isShowCollapseActions } = useLogic(props);
+    const renderMobileButton = ({ text, disabled, isBlockingOperation, ...restButtonProps }) => (_jsx(StyledMobileButton, { disabled: isDisabled || disabled, variant: "outlined", color: "grey", ...restButtonProps, children: text }, text));
+    return (_jsxs(_Fragment, { children: [_jsx(MobileActionWrapper, { children: isShowCollapseActions ? (_jsx(Collapse, { in: isActive, children: _jsx(ActionWrapper, { "$isDisablePadding": isDisablePadding, children: actions.map(renderMobileButton) }) })) : (_jsx(ActionWrapper, { "$isDisablePadding": isDisablePadding, children: renderMobileButton(actions[0]) })) }), _jsx(DesktopActionWrapper, { children: actions?.map((action) => {
+                    const { text, disabled, disabledReason, loading, isBlockingOperation, ...restActionProps } = action;
+                    return (_jsx(Tooltip, { title: disabled && disabledReason, withoutContainer: !(isDisabled || disabled), children: _jsx(StyledButton, { disabled: isDisabled || disabled, loading: loading, size: "large", color: "grey", variant: "outlined", ...restActionProps, children: text }) }, text));
+                }) })] }));
+};

package/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare const StyledButton: import("../../../../components/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 StyledMobileButton: import("../../../../components/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 ActionWrapper: import("../../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isDisablePadding?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DesktopActionWrapper: import("../../../../components/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 MobileActionWrapper: import("../../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.js

@@ -0,0 +1,41 @@
+import { Button } from '../../../../components/Button';
+import { styled } from '../../../../components/styled';
+export const StyledButton = styled(Button) `
+  flex-grow: 1;
+`;
+export const StyledMobileButton = styled(Button) `
+  display: none;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    height: 50px;
+  }
+`;
+export const ActionWrapper = styled('div', {
+    shouldForwardProp: (prop) => !['$isDisablePadding'].includes(prop),
+}) `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  padding-top: ${({ theme, $isDisablePadding }) => $isDisablePadding ? 0 : theme.spacing(2)};
+`;
+export const DesktopActionWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)}; 
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const MobileActionWrapper = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+    order: 2;
+  }
+`;

package/hook-form/FormPageLayout/FormPageFooter/styles.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const ActionsWrapper: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isShowMoreButton?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ShowMoreButton: import("../../../components/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;
+} & {
+    $isActive: boolean;
+}, {}, {}>;
+export declare const StyledFormSubmitButton: import("../../../components/styled").StyledComponent<import("../../FormSubmitButton").FormSubmitButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isShowSecondaryActions?: boolean | undefined;
+}, {}, {}>;

package/hook-form/FormPageLayout/FormPageFooter/styles.js

@@ -0,0 +1,48 @@
+import { Button } from '../../../components/Button';
+import { styled } from '../../../components/styled';
+import { FormSubmitButton } from '../../FormSubmitButton';
+export const ActionsWrapper = styled('div', {
+    shouldForwardProp: (prop) => !['$isShowMoreButton'].includes(prop),
+}) `
+  display: flex;
+  flex-direction: row-reverse;
+  gap: ${({ theme }) => theme.spacing(4)};  
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: auto;
+    flex-direction: column;
+    gap: 0;
+
+    padding: ${({ theme, $isShowMoreButton }) => $isShowMoreButton ? theme.spacing(4, 4, 0) : theme.spacing(4)};
+  }
+`;
+export const ShowMoreButton = styled(Button, {
+    shouldForwardProp: (prop) => !['$isActive'].includes(prop),
+}) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    width: 100%;
+    height: 36px;
+    min-height: 36px;
+    margin-top: ${({ theme }) => theme.spacing(2)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+    padding: 0;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+export const StyledFormSubmitButton = styled(FormSubmitButton, {
+    shouldForwardProp: (prop) => !['$isShowSecondaryActions'].includes(prop),
+}) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 50px;
+    margin-bottom: ${({ theme, $isShowSecondaryActions }) => $isShowSecondaryActions ? theme.spacing(2) : 0};
+  }
+`;

package/hook-form/FormPageLayout/FormPageLayout.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type PageLayoutProps } from '../../components/PageLayout';
+import { type FormProps } from '../Form';
+import type { SecondaryAction } from '../FormPageLayoutBase';
+type FormPageProps<TFormValues extends Record<string, unknown>> = Omit<FormProps<TFormValues>, 'children'> & {
+    /**
+     * Текст для кнопки отправки формы
+     */
+    submitButtonText?: string;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+};
+export type FormPageLayoutProps<TFormValues extends Record<string, unknown>> = Omit<PageLayoutProps, 'content'> & {
+    /**
+     * Содержимое формы
+     */
+    children: ReactNode;
+    /**
+     * Параметры страницы формы
+     */
+    form: FormPageProps<TFormValues>;
+};
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+export declare const FormPageLayout: <TFormValues extends Record<string, unknown>>(props: FormPageLayoutProps<TFormValues>) => JSX.Element;
+export {};

package/hook-form/FormPageLayout/FormPageLayout.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../components/utils';
+import { Form } from '../Form';
+import { FormPageLayoutBase, formPageContentClassnames, } from '../FormPageLayoutBase';
+import { FormPageFooter } from './FormPageFooter';
+import { FormContent } from './styles';
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+export const FormPageLayout = (props) => {
+    const { form, children, ...restProps } = props;
+    const { secondaryActions, submitButtonText, ...restFormProps } = form;
+    return (_jsx(FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: classNames({
+            [formPageContentClassnames.formPageContentSecondaryActions]: Boolean(secondaryActions),
+        }), children: ({ isDisabled }) => (_jsxs(Form, { ...restFormProps, isDisabled: isDisabled, children: [_jsx(FormContent, { children: children }), _jsx(FormPageFooter, { isDisabled: isDisabled, submitButtonText: submitButtonText, secondaryActions: secondaryActions })] })) }));
+};

package/hook-form/FormPageLayout/public.d.ts

@@ -0,0 +1,2 @@
+export { formPageContentClassnames, formPageLayoutClassnames, } from '../FormPageLayoutBase';
+export * from './FormPageLayout';

package/hook-form/FormPageLayout/public.js

@@ -0,0 +1,2 @@
+export { formPageContentClassnames, formPageLayoutClassnames, } from '../FormPageLayoutBase';
+export * from './FormPageLayout';

package/hook-form/FormPageLayout/styles.d.ts

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

package/hook-form/FormPageLayout/styles.js

@@ -0,0 +1,8 @@
+import { styled } from '../../components/styled';
+export const FormContent = styled.div `
+  padding: ${({ theme }) => theme.spacing(0, 6, 4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4, 4)};
+  }
+`;

package/hook-form/FormPageLayoutBase/FormMobileActions/FormMobileActions.d.ts

@@ -0,0 +1,5 @@
+import { type ElementType } from 'react';
+import { type PageHeaderProps } from '../../../components/PageHeader';
+type FormMobileActionsProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent>, 'actions'>;
+export declare const FormMobileActions: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType>({ actions, }: FormMobileActionsProps<TMainActionComponent, TSecondaryActionComponent>) => JSX.Element | null;
+export {};

package/hook-form/FormPageLayoutBase/FormMobileActions/FormMobileActions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMainActions, } from '../../../components/ActionGroup';
+import { MenuItem } from '../../../components/MenuItem';
+import { DotsVOutlineMd } from '../../../icons';
+import { StyledButton, StyledDropdownButton, StyledIconDropDownButton, } from './styles';
+export const FormMobileActions = ({ actions, }) => {
+    const mainActions = useMainActions({
+        actions: actions?.main || [],
+    });
+    if (!actions) {
+        return null;
+    }
+    const { secondaryVisible = [], secondary = [] } = actions;
+    const secondaryActions = [...secondaryVisible, ...secondary];
+    return (_jsxs(StyledIconDropDownButton, { title: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", variant: "text", icon: _jsx(DotsVOutlineMd, {}), children: [mainActions.map(({ isNested, buttonProps, nestedActions }, index) => {
+                const { name, disabled } = buttonProps;
+                if (isNested) {
+                    return (_jsx(MenuItem
+                    // biome-ignore lint/suspicious/noArrayIndexKey: Используется вместе с name
+                    , { disabled: disabled, children: _jsx(StyledDropdownButton, { ...buttonProps, variant: "text", children: nestedActions.map(({ key, text, ...nestedProps }) => (_jsx(MenuItem, { ...nestedProps, children: text }, key))) }) }, `${name}:${index}`));
+                }
+                return (
+                // biome-ignore lint/suspicious/noArrayIndexKey: Используется вместе с name
+                _jsx(MenuItem, { disabled: disabled, children: _jsx(StyledButton, { ...buttonProps, variant: "text" }) }, `${name}:${index}`));
+            }), secondaryActions?.map((action, index) => {
+                const label = 'name' in action ? action.name : action.text;
+                const { disabled, onClick } = action;
+                return (_jsx(MenuItem
+                // biome-ignore lint/suspicious/noArrayIndexKey: Используется вместе с label
+                , { disabled: disabled, onClick: onClick, children: label }, `${label}:${index}`));
+            })] }));
+};

package/hook-form/FormPageLayoutBase/FormMobileActions/styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const StyledIconDropDownButton: import("../../../components/styled").StyledComponent<Omit<import("../../../components/IconDropdownButton").IconDropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledButton: import("../../../components/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 StyledDropdownButton: import("../../../components/styled").StyledComponent<Omit<import("../../../components/DropdownButton").DropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/hook-form/FormPageLayoutBase/FormMobileActions/styles.js

@@ -0,0 +1,34 @@
+import { Button, buttonClasses } from '../../../components/Button';
+import { DropdownButton } from '../../../components/DropdownButton';
+import { IconDropdownButton } from '../../../components/IconDropdownButton';
+import { styled } from '../../../components/styled';
+export const StyledIconDropDownButton = styled(IconDropdownButton) `
+  margin-left: auto;
+`;
+export const StyledButton = styled(Button) `
+  justify-content: flex-start;
+
+  font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+  line-height: ${({ theme }) => theme.typography.h6.lineHeight};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+    height: unset;
+    padding: 0;
+  }
+`;
+export const StyledDropdownButton = styled(DropdownButton) `
+  justify-content: flex-start;
+
+  font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+  line-height: ${({ theme }) => theme.typography.h6.lineHeight};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: unset;
+    padding: 0;
+
+    .${buttonClasses.endIcon} {
+      display: none;
+    }
+  }
+`;

package/hook-form/FormPageLayoutBase/FormPageLayoutBase.d.ts

@@ -0,0 +1,36 @@
+import { type ElementType, type ReactNode } from 'react';
+import { type PageLayoutProps } from '../../components/PageLayout';
+import type { SecondaryAction } from '../FormPageLayoutBase';
+import { type UseFormReturn } from '../hooks';
+type FormPageProps<TFormValues extends Record<string, unknown>> = {
+    form: UseFormReturn<TFormValues> | null;
+    /**
+     * Если true, форма будет недоступна для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+};
+export type FormPageLayoutBaseProps<TFormValues extends Record<string, unknown>, TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = Omit<PageLayoutProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'content'> & {
+    /**
+     * Содержимое layout
+     */
+    children: (props: {
+        isDisabled?: boolean;
+    }) => ReactNode;
+    /**
+     * Параметры страницы формы
+     */
+    formProps: FormPageProps<TFormValues>;
+    /**
+     * Класс применяемый к PageContent
+     */
+    contentClassname?: string;
+};
+/**
+ * Компонент не предназначен для экспорта из пакета. Используется внутри FormPageLayout и FormWizardPageLayout
+ */
+export declare const FormPageLayoutBase: <TFormValues extends Record<string, unknown>>(props: FormPageLayoutBaseProps<TFormValues, ElementType, ElementType, ElementType>) => JSX.Element;
+export {};

package/hook-form/FormPageLayoutBase/FormPageLayoutBase.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { PageAside } from '../../components/PageAside';
+import { PageContextProvider } from '../../components/PageContext';
+import { PageLayoutContainer } from '../../components/PageLayoutContainer';
+import { classNames } from '../../components/utils';
+import { FormMobileActions } from './FormMobileActions';
+import { DesktopAlertWrapper, MobileAlertWrapper, StyledPageContent, StyledPageHeader, } from './styles';
+import { useLogic } from './useLogic';
+/**
+ * Компонент не предназначен для экспорта из пакета. Используется внутри FormPageLayout и FormWizardPageLayout
+ */
+export const FormPageLayoutBase = (props) => {
+    const { pageContentProps, headerProps, renderChildrenProps, headerActions } = useLogic(props);
+    const { className, aside, children, alert, contentClassname, header } = props;
+    return (_jsxs(PageContextProvider, { hasAside: Boolean(aside), mobileTitleActions: _jsx(FormMobileActions, { actions: headerActions }), children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: className, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header) ? (header) : (_jsx(StyledPageHeader, { ...headerProps })), _jsx(StyledPageContent, { className: classNames(contentClassname), isFormPaddingDisable: true, ...pageContentProps, children: children(renderChildrenProps) }), aside && !isValidElement(aside) && (_jsx(PageAside, { ...aside })), isValidElement(aside) && aside] })] }));
+};

package/hook-form/FormPageLayoutBase/constants.js

@@ -0,0 +1,9 @@
+import { createUIKitClassname } from '../../components/utils';
+export const formPageLayoutClassnames = {
+    pageHeaderActions: createUIKitClassname('form-page-layout__header__actions'),
+    footerShadow: createUIKitClassname('form-page-layout__footer_shadow'),
+};
+export const formPageContentClassnames = {
+    formPageContentSecondaryActions: createUIKitClassname('form-page-content__actions'),
+    formWizardPageContentActions: createUIKitClassname('form-wizard-page-content_has-actions'),
+};

package/hook-form/FormPageLayoutBase/index.d.ts

@@ -0,0 +1,3 @@
+export { formPageContentClassnames, formPageLayoutClassnames, } from './constants';
+export * from './FormPageLayoutBase';
+export type { SecondaryAction } from './types';

package/hook-form/FormPageLayoutBase/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const DesktopAlertWrapper: import("../../components/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 MobileAlertWrapper: import("../../components/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 StyledPageContent: import("../../components/styled").StyledComponent<import("../../components/PageContent").PageContentProps & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledPageHeader: import("../../components/styled").StyledComponent<import("../../components/PageHeader").PageHeaderProps<import("react").ElementType, import("react").ElementType, import("react").ElementType> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/hook-form/FormPageLayoutBase/styles.js

@@ -0,0 +1,53 @@
+import { PageContent, pageContentClassnames, } from '../../components/PageContent';
+import { PageHeader, pageHeaderClassnames } from '../../components/PageHeader';
+import { styled } from '../../components/styled';
+import { formPageContentClassnames } from './constants';
+export const DesktopAlertWrapper = styled.div `
+  display: block;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const MobileAlertWrapper = styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+  }
+`;
+export const StyledPageContent = styled(PageContent) `
+  scrollbar-gutter: stable;
+
+  overflow: auto;
+
+  padding-top: ${({ theme }) => theme.spacing(4)};
+
+  .${pageContentClassnames.content} {
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      overflow: unset;
+
+      height: auto;
+      padding: 0;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme }) => theme.spacing(24)};
+
+    &.${formPageContentClassnames.formPageContentSecondaryActions} {
+      margin-bottom: ${({ theme }) => theme.spacing(38)};
+
+      &.${formPageContentClassnames.formWizardPageContentActions} {
+        margin-bottom: ${({ theme }) => theme.spacing(52)};
+      }
+    }
+  }
+`;
+export const StyledPageHeader = styled(PageHeader) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${pageHeaderClassnames.pageHeaderMobileTitle} {
+      padding-right: ${({ theme }) => theme.spacing(1)};
+    }
+  }
+`;

package/hook-form/FormPageLayoutBase/useLogic/useLogic.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { type ActionGroupProps } from '../../../components/ActionGroup';
+import { type FormPageLayoutBaseProps } from '../FormPageLayoutBase';
+type UseLogicParams<TFormValues extends Record<string, unknown>> = FormPageLayoutBaseProps<TFormValues>;
+export declare const useLogic: <TFormValues extends Record<string, unknown>>({ aside, header, formProps, }: UseLogicParams<TFormValues>) => {
+    headerProps: {
+        title?: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        subheader?: import("react").ReactNode;
+        breadcrumbs?: import("react").ReactNode;
+        className?: string | undefined;
+        isLoading?: boolean | undefined;
+        shouldUpdateDocumentTitle?: boolean | undefined;
+        htmlTitle?: string | undefined;
+        backButton?: (Omit<import("../../..").ButtonProps, "children" | "variant"> & {
+            component?: import("react").ElementType | undefined;
+            theme?: import("../../..").Theme | undefined;
+        } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
+        actions: ActionGroupProps | undefined;
+    };
+    pageContentProps: {
+        isSeparatorShown: boolean;
+    };
+    renderChildrenProps: {
+        isDisabled: boolean | undefined;
+        containerRef: import("react").MutableRefObject<null>;
+    };
+    headerActions: ActionGroupProps | undefined;
+};
+export {};

package/hook-form/FormWizard/Footer/styles.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("../../../components/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 PrevButton: import("@emotion/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+export declare const PrevButton: import("../../../components/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;

package/hook-form/FormWizard/Footer/styles.js

@@ -1,5 +1,5 @@
 import { Button } from '../../../components/Button';
-import { styled } from '../../../components/styles';
+import { styled } from '../../../components/styled';
 export const Wrapper = styled.footer `
   display: flex;
   gap: ${({ theme }) => theme.spacing(4)};

package/hook-form/FormWizard/styles.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("../../components/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 BeforeContentWrapper: import("@emotion/styled").StyledComponent<{
+export declare const BeforeContentWrapper: import("../../components/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 StyledStepperWizard: import("@emotion/styled").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
+export declare const StyledStepperWizard: import("../../components/styled").StyledComponent<Omit<import("../..").StepperProps, "children"> & {
     steps: import("../../components/StepperWizard").StepWizard[];
     onClickPrevStep?: ((index: number) => void) | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const FormContent: import("@emotion/styled").StyledComponent<{
+export declare const FormContent: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormWizard/styles.js

@@ -1,5 +1,5 @@
 import { StepperWizard } from '../../components/StepperWizard';
-import { styled } from '../../components/styles';
+import { styled } from '../../components/styled';
 export const Wrapper = styled.section `
   display: flex;
   flex-direction: column;