@astral/ui 4.18.3 → 4.18.5

package/node/components/OverflowTypography/styles.d.ts

@@ -3,32 +3,20 @@ type OverflowTypographyWrapperProps = {
     hasMultipleRows: boolean;
     rowsCount: number;
 };
-export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     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" | "search" | "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" | "big" | "center" | "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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & OverflowTypographyWrapperProps, {}, {}>;
-export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     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" | "search" | "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" | "big" | "center" | "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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/OverflowTypography/types.d.ts

@@ -0,0 +1,32 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import { type TooltipProps as BasicTooltipProps } from '../Tooltip';
+import { type TypographyProps } from '../Typography';
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
+export type OverflowedProps = {
+    /**
+     * Максимальное количество отображаемых строк
+     * @example <OverflowTypography rowsCount={2} />
+     * @default 1
+     */
+    rowsCount?: number;
+};
+type TooltipCustomizable = {
+    /**
+     * Пропс для кастомизации тултипа
+     * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
+     */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'> & {
+        /**
+         * Кастомный контент внутри tooltip. Данный props перекрывает дефолтный текст,
+         * когда строка не вмещается в контейнер
+         */
+        title?: ReactNode;
+    };
+    /**
+     * Количество отображаемых после сокращения в конце символов
+     */
+    visibleLastSymbolsCount?: number;
+};
+export type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
+export type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
+export {};

package/node/components/OverflowTypography/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/OverflowTypography/useLogic/useLogic.d.ts

@@ -1,5 +1,5 @@
 import { type ForwardedRef } from 'react';
-import { type OverflowedTypographyProps } from '../OverflowTypography';
+import { type OverflowedTypographyProps } from '../types';
 type UseLogicParams = OverflowedTypographyProps & {
     forwardedRef: ForwardedRef<HTMLElement>;
 };

package/node/components/OverflowTypography/useLogic/useLogic.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
-const hooks_1 = require("../hooks");
+const useOverflowed_1 = require("../hooks/useOverflowed");
 const utils_1 = require("../utils");
 const useLogic = ({ forwardedRef, children, visibleLastSymbolsCount = 0, rowsCount = 1, }) => {
     const canSlice = Boolean(children && typeof children === 'string');
     const hasVisibleLastSymbols = canSlice && visibleLastSymbolsCount > 0;
     const hasMultipleRows = hasVisibleLastSymbols ? false : rowsCount > 1;
-    const { ref, isOverflowed } = (0, hooks_1.useOverflowed)(forwardedRef, hasMultipleRows, hasVisibleLastSymbols);
+    const { ref, isOverflowed } = (0, useOverflowed_1.useOverflowed)(forwardedRef, hasMultipleRows, hasVisibleLastSymbols);
     const { firstPartLabel, secondPartLabel } = hasVisibleLastSymbols && typeof children === 'string'
         ? (0, utils_1.truncateString)(visibleLastSymbolsCount, children)
         : { firstPartLabel: '', secondPartLabel: '' };

package/node/components/PageAsideBlock/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledDivider = exports.Wrapper = void 0;
-const material_1 = require("@mui/material");
-const Divider_1 = require("../Divider");
+const Divider_1 = require("@mui/material/Divider");
+const Divider_2 = require("../Divider");
 const styled_1 = require("../styled");
 exports.Wrapper = styled_1.styled.div `
   position: relative;
@@ -16,7 +16,7 @@ exports.Wrapper = styled_1.styled.div `
   :last-of-type {
     padding: ${({ theme }) => theme.spacing(5, 0, 0)};
 
-    .${material_1.dividerClasses.root} {
+    .${Divider_1.dividerClasses.root} {
       display: none;
     }
   }
@@ -33,7 +33,7 @@ exports.Wrapper = styled_1.styled.div `
     }
   }
 `;
-exports.StyledDivider = (0, styled_1.styled)(Divider_1.Divider, {
+exports.StyledDivider = (0, styled_1.styled)(Divider_2.Divider, {
     shouldForwardProp: (prop) => !['$isFullWidth'].includes(prop),
 }) `
   position: absolute;

package/node/components/PageContent/PageContent.js

@@ -4,12 +4,12 @@ exports.PageContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const PageLayoutFooter_1 = require("../PageLayoutFooter");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.PageContent = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { hasAside, contentClassnames } = (0, useLogic_1.useLogic)(props);
     const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
 });

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

@@ -1,15 +1,9 @@
 /// <reference types="react" />
-export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
     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" | "search" | "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" | "big" | "center" | "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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/PageContent/constants.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PAGE_CONTENT_ANIMATION = exports.pageContentClassnames = void 0;
-const utils_1 = require("../utils");
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pageContentClassnames = {
-    pageContent: (0, utils_1.createUIKitClassname)('page-content'),
-    content: (0, utils_1.createUIKitClassname)('page-content__content'),
-    contentHasHeader: (0, utils_1.createUIKitClassname)('page-content__content_has-header'),
-    animation: (0, utils_1.createUIKitClassname)('page-content_animation'),
+    pageContent: (0, createUIKitClassname_1.createUIKitClassname)('page-content'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content'),
+    contentHasHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content_has-header'),
+    animation: (0, createUIKitClassname_1.createUIKitClassname)('page-content_animation'),
 };
 exports.PAGE_CONTENT_ANIMATION = 'white-flash';

package/node/components/PageContent/useLogic/useLogic.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const PageContext_1 = require("../../PageContext");
-const utils_1 = require("../../utils");
+const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const useLogic = ({ header }) => {
     const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
-    const contentClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageContentClassnames.content, {
+    const contentClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageContentClassnames.content, {
         [constants_1.pageContentClassnames.contentHasHeader]: Boolean(header),
     }), [header]);
     return { contentClassnames, hasAside };

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

@@ -1,22 +1,16 @@
 /// <reference types="react" />
-export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../Typography/types").TypographyPropsBase & {
     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" | "search" | "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" | "big" | "center" | "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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../../../Typography/types").ComponentProp | 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/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
     component?: import("react").ElementType | undefined;
-    variant?: "text" | "rounded" | "circular" | undefined;
+    variant?: "text" | "circular" | "rounded" | undefined;
     shapeSize?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/PageHeader/HeaderContent/HeaderContent.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Breadcrumbs_1 = require("../../Breadcrumbs");
-const utils_1 = require("../../utils");
+const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const PageActions_1 = require("../PageActions");
 const Title_1 = require("../Title");
@@ -16,6 +16,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, action
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
 };
 exports.HeaderContent = HeaderContent;

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

@@ -3,10 +3,10 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ShowMoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "action" | "color" | "classes" | "className" | "children" | "sx" | "variant" | "tabIndex" | "fullWidth" | "size" | "disabled" | "href" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+export declare const ShowMoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "sx" | "classes" | "className" | "style" | "tabIndex" | "color" | "children" | "disabled" | "size" | "href" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledCollapse: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").CollapseProps & {
+export declare const StyledCollapse: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/Collapse").CollapseProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const ActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/components/PageHeader/MobilePageActions/styles.js

@@ -1,7 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledMainActions = exports.SecondaryActionsWrapper = exports.ActionWrapper = exports.StyledCollapse = exports.ShowMoreButton = exports.Wrapper = void 0;
-const material_1 = require("@mui/material");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Collapse_1 = __importStar(require("@mui/material/Collapse"));
 const styled_1 = require("../../styled");
 const constants_1 = require("../constants");
 const PageActions_1 = require("../PageActions");
@@ -32,7 +59,7 @@ exports.Wrapper = styled_1.styled.div `
     box-shadow: ${({ theme }) => theme.elevation.up[100]};
   }
 `;
-exports.ShowMoreButton = (0, styled_1.styled)(material_1.Button) `
+exports.ShowMoreButton = (0, styled_1.styled)(Button_1.default) `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: flex;
 
@@ -45,8 +72,8 @@ exports.ShowMoreButton = (0, styled_1.styled)(material_1.Button) `
     }
   }
 `;
-exports.StyledCollapse = (0, styled_1.styled)(material_1.Collapse) `
-  & .${material_1.collapseClasses.wrapper} > .${material_1.collapseClasses.wrapperInner} {
+exports.StyledCollapse = (0, styled_1.styled)(Collapse_1.default) `
+  & .${Collapse_1.collapseClasses.wrapper} > .${Collapse_1.collapseClasses.wrapperInner} {
     display: flex;
     flex-direction: column;
   }

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
-const material_1 = require("@mui/material");
+const Button_1 = require("@mui/material/Button");
 const styled_1 = require("../../../styled");
 const Tooltip_1 = require("../../../Tooltip");
 exports.Wrapper = styled_1.styled.div `
@@ -15,7 +15,7 @@ exports.Wrapper = styled_1.styled.div `
 
     padding-bottom: ${({ theme }) => theme.spacing(2)};
 
-    & > .${Tooltip_1.tooltipClassnames.contentWrapper}, & > .${material_1.buttonClasses.root} {
+    & > .${Tooltip_1.tooltipClassnames.contentWrapper}, & > .${Button_1.buttonClasses.root} {
       flex: 1 1 calc(50% - ${({ theme }) => theme.spacing(1)});
     }
   }

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

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

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

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

package/node/components/PageHeader/PageHeader.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
 const constants_1 = require("./constants");
 const HeaderContent_1 = require("./HeaderContent");
 const MobilePageActions_1 = require("./MobilePageActions");
@@ -12,6 +12,6 @@ const useLogic_1 = require("./useLogic");
 const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageHeader/Title/Title.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("../../../icons");
+const ArrowLOutlineMd_1 = require("../../../icons/ArrowLOutlineMd");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const styles_1 = require("./styles");
 const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }) => {
     if (!title && isLoading) {
         return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(ArrowLOutlineMd_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
 };
 exports.Title = Title;

package/node/components/PageHeader/Title/styles.d.ts

@@ -1,15 +1,9 @@
 /// <reference types="react" />
-export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     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" | "search" | "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" | "big" | "center" | "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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -17,10 +11,10 @@ export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src
     $hasDescription?: boolean | undefined;
     $hasBreadcrumbs?: boolean | undefined;
 }, {}, {}>;
-export declare const BackButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+export declare const BackButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
-    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
@@ -28,7 +22,7 @@ export declare const BackButton: import("@emotion/styled/dist/declarations/src/t
 }, {}, {}>;
 export declare const StyledSkeleton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
     component?: import("react").ElementType | undefined;
-    variant?: "text" | "rounded" | "circular" | undefined;
+    variant?: "text" | "circular" | "rounded" | undefined;
     shapeSize?: "large" | "medium" | "small" | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/components/PageHeader/constants.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PAGE_HEADER_HEIGHT_MOBILE = exports.pageHeaderClassnames = void 0;
-const utils_1 = require("../utils");
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pageHeaderClassnames = {
-    pageHeaderMobileTitle: (0, utils_1.createUIKitClassname)('page-header__mobile-title'),
-    pageHeaderActions: (0, utils_1.createUIKitClassname)('page-header__actions'),
-    hasBackButton: (0, utils_1.createUIKitClassname)('page-header_has-back-button'),
-    hasTitle: (0, utils_1.createUIKitClassname)('page-header_has-title'),
+    pageHeaderMobileTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header__mobile-title'),
+    pageHeaderActions: (0, createUIKitClassname_1.createUIKitClassname)('page-header__actions'),
+    hasBackButton: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-back-button'),
+    hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-title'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/node/components/PageHeader/hooks/usePageTitle/usePageTitle.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePageTitle = void 0;
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../../ConfigProvider");
-const utils_1 = require("../../../utils");
+const getNodeText_1 = require("../../../utils/getNodeText");
 const usePageTitle = ({ shouldUpdateDocumentTitle, title, htmlTitle, }) => {
     const prevTitleRef = (0, react_1.useRef)(null);
     const { components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
@@ -14,7 +14,7 @@ const usePageTitle = ({ shouldUpdateDocumentTitle, title, htmlTitle, }) => {
         if (!isDynamicTitle) {
             return;
         }
-        const newTitle = (0, utils_1.getNodeText)(title);
+        const newTitle = (0, getNodeText_1.getNodeText)(title);
         if (!newTitle && !htmlTitle) {
             // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
             console.warn('@astral/ui:PageHeader: Не получилось определить заголовок страницы. Передайте htmlTitle.');

package/node/components/PageHeader/types.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ElementType, ReactNode } from 'react';
 import type { ButtonProps } from '../Button';
-import type { Theme } from '../theme';
+import type { Theme } from '../theme/types';
 import type { PageActionsProps } from './PageActions';
 export type PageHeaderProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = {
     /**

package/node/components/PageHeader/useLogic/useLogic.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const PageContext_1 = require("../../PageContext");
-const utils_1 = require("../../utils");
+const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
-const hooks_1 = require("../hooks");
+const usePageTitle_1 = require("../hooks/usePageTitle");
 const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
     //Переопределение Html title на title из параметров
-    (0, hooks_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
+    (0, usePageTitle_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    const mobileClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
+    const mobileClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
         [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
         [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
     }), [title, backButton, isLoading]);

package/node/components/PageLayout/PageLayout.js

@@ -8,7 +8,7 @@ const PageContent_1 = require("../PageContent");
 const PageContext_1 = require("../PageContext");
 const PageHeader_1 = require("../PageHeader");
 const PageLayoutContainer_1 = require("../PageLayoutContainer");
-const placeholders_1 = require("../placeholders");
+const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PageLayout = (props) => {
@@ -16,7 +16,7 @@ const PageLayout = (props) => {
     const { hasAside, ref } = (0, useLogic_1.useLogic)(props);
     return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: className, ref: ref, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header)
                         ? header
-                        : header && (0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { ...header }), isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(placeholders_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(content) ? (content) : ((0, jsx_runtime_1.jsx)(PageContent_1.PageContent, { ...content, footer: footer })), aside && !(0, react_1.isValidElement)(aside) && ((0, jsx_runtime_1.jsx)(PageAside_1.PageAside, { ...aside })), (0, react_1.isValidElement)(aside) && aside] }))] })] }));
+                        : header && (0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { ...header }), isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(content) ? (content) : ((0, jsx_runtime_1.jsx)(PageContent_1.PageContent, { ...content, footer: footer })), aside && !(0, react_1.isValidElement)(aside) && ((0, jsx_runtime_1.jsx)(PageAside_1.PageAside, { ...aside })), (0, react_1.isValidElement)(aside) && aside] }))] })] }));
 };
 exports.PageLayout = PageLayout;
 exports.default = exports.PageLayout;

package/node/components/PageLayoutContainer/PageLayoutContainer.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const utils_1 = require("../utils");
+const classNames_1 = require("../utils/classNames");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 exports.PageLayoutContainer = (0, react_1.forwardRef)(({ children, className }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.StylePaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, utils_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StylePaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });