@astral/ui 4.17.5 → 4.17.6

package/components/hooks/useScrollManagement/useScrollManagement.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { pageLayoutClassnames } from '../../PageLayout/PageLayoutContainer';
+import { pageLayoutClassnames } from '../../PageLayoutContainer';
 import { useViewportType } from '../useViewportType';
 /**
  * Отслеживание скролла для динамического отображения футера

package/components/index.d.ts

@@ -33,8 +33,15 @@ export * from './ContentState';
 export { CopyTypography, type CopyTypographyProps } from './CopyTypography';
 export { Counter, type CounterProps } from './Counter';
 export { DashboardAlert, type DashboardAlertProps } from './DashboardAlert';
-export { type DashboardLayoutProps, DashboardLayout, MenuSidebarButton, type MenuSidebarButtonProps, SidebarButton, SidebarCounter, type SidebarCounterProps, SidebarPopover, type SidebarPopoverItemProps, type SidebarPopoverProps, type DashboardSidebarProps, DashboardContext, type DashboardContextProps, SidebarSkeleton, } from './DashboardLayout';
-export { SidebarContext, type SidebarContextProps, } from './DashboardSidebarProvider';
+export { type DashboardLayoutProps, DashboardLayout, } from './DashboardLayout';
+export { DashboardContext, type DashboardContextProps, } from './DashboardContext';
+export type { DashboardSidebarProps } from './DashboardSidebar';
+export { DashboardSidebarButton as SidebarButton } from './DashboardSidebarButton';
+export { DashboardSidebarCounter as SidebarCounter, type DashboardSidebarCounterProps as SidebarCounterProps, } from './DashboardSidebarCounter';
+export { DashboardMenuSidebarButton as MenuSidebarButton, type DashboardMenuSidebarButtonProps as MenuSidebarButtonProps, } from './DashboardMenuSidebarButton';
+export { DashboardSidebarPopover as SidebarPopover, type SidebarPopoverItemProps, type DashboardSidebarPopoverProps as SidebarPopoverProps, } from './DashboardSidebarPopover';
+export { DashboardSidebarSkeleton as SidebarSkeleton } from './DashboardSidebarSkeleton';
+export { DashboardSidebarContext as SidebarContext, type DashboardSidebarContextProps as SidebarContextProps, } from './DashboardSidebarProvider';
 export { DataGridActionCell, type DataGridActionCellProps, type DataGridActions, DataGridMainActions, DataGridSecondaryActions, type DataGridMainActionsProps, type DataGridSecondaryActionsProps, DataGridSecondaryActionsSkeleton, } from './DataGridActionCell';
 export { DataGridMinimalisticPagination, type DataGridMinimalisticPaginationProps, } from './DataGridMinimalisticPagination';
 export * from './DataGridPagination';
@@ -103,7 +110,17 @@ export { NumberedList } from './NumberedList';
 export { NumberedListItem } from './NumberedListItem';
 export { NumberField, type NumberFieldProps, type NumberFieldValue, } from './NumberField';
 export * from './OverflowTypography';
-export { PageActionSkeleton, PageActions, type PageActionsProps, PageAlert, type PageAlertProps, PageAside, PageAsideBlock, type PageAsideBlockProps, type PageAsideProps, PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, type PageContentProps, PageContext, type PageContextProps, PageContextProvider, PageHeader, type PageHeaderProps, PageLayout, PageLayoutContainer, type PageLayoutContainerProps, PageLayoutFooter, type PageLayoutFooterProps, PageLayoutLoader, type PageLayoutProps, PagePinnableAside, type PagePinnableAsideProps, pageContentClassnames, pageHeaderClassnames, } from './PageLayout';
+export { PageAlert, type PageAlertProps, } from './PageAlert';
+export { PageAside, type PageAsideProps, } from './PageAside';
+export { PageLayout, type PageLayoutProps, } from './PageLayout';
+export { PageAsideBlock, type PageAsideBlockProps, } from './PageAsideBlock';
+export { PageContent, PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, type PageContentProps, pageContentClassnames, } from './PageContent';
+export { PageContext, type PageContextProps, PageContextProvider, } from './PageContext';
+export { pageHeaderClassnames, PageHeader, type PageHeaderProps, PageActionSkeleton, PageActions, type PageActionsProps, } from './PageHeader';
+export { PageLayoutContainer, type PageLayoutContainerProps, } from './PageLayoutContainer';
+export { PageLayoutFooter, type PageLayoutFooterProps, } from './PageLayoutFooter';
+export { PagePinnableAside, type PagePinnableAsideProps, } from './PagePinnableAside';
+export { PageLayoutLoader } from './PageLayoutLoader';
 export { Pagination, type PaginationProps } from './Pagination';
 export * from './Paper';
 export * from './PasswordField';
@@ -136,7 +153,7 @@ export * from './StylesCacheProvider';
 export * from './Switch';
 export { SvgIcon, type SvgIconProps, type SvgIconColor, svgIconClassnames, } from './SvgIcon';
 export { UNSTABLE_SecondsCountdownService } from './services';
-export * from './styles';
+export * from './styled';
 export * from './Tabs';
 export * from './Tag';
 export * from './TagBadge';

package/components/index.js

@@ -33,8 +33,14 @@ export * from './ContentState';
 export { CopyTypography } from './CopyTypography';
 export { Counter } from './Counter';
 export { DashboardAlert } from './DashboardAlert';
-export { DashboardLayout, MenuSidebarButton, SidebarButton, SidebarCounter, SidebarPopover, DashboardContext, SidebarSkeleton, } from './DashboardLayout';
-export { SidebarContext, } from './DashboardSidebarProvider';
+export { DashboardLayout, } from './DashboardLayout';
+export { DashboardContext, } from './DashboardContext';
+export { DashboardSidebarButton as SidebarButton } from './DashboardSidebarButton';
+export { DashboardSidebarCounter as SidebarCounter, } from './DashboardSidebarCounter';
+export { DashboardMenuSidebarButton as MenuSidebarButton, } from './DashboardMenuSidebarButton';
+export { DashboardSidebarPopover as SidebarPopover, } from './DashboardSidebarPopover';
+export { DashboardSidebarSkeleton as SidebarSkeleton } from './DashboardSidebarSkeleton';
+export { DashboardSidebarContext as SidebarContext, } from './DashboardSidebarProvider';
 export { DataGridActionCell, DataGridMainActions, DataGridSecondaryActions, DataGridSecondaryActionsSkeleton, } from './DataGridActionCell';
 export { DataGridMinimalisticPagination, } from './DataGridMinimalisticPagination';
 export * from './DataGridPagination';
@@ -103,7 +109,17 @@ export { NumberedList } from './NumberedList';
 export { NumberedListItem } from './NumberedListItem';
 export { NumberField, } from './NumberField';
 export * from './OverflowTypography';
-export { PageActionSkeleton, PageActions, PageAlert, PageAside, PageAsideBlock, PageContent, PageContentHeader, PageContentHeaderActions, PageContext, PageContextProvider, PageHeader, PageLayout, PageLayoutContainer, PageLayoutFooter, PageLayoutLoader, PagePinnableAside, pageContentClassnames, pageHeaderClassnames, } from './PageLayout';
+export { PageAlert, } from './PageAlert';
+export { PageAside, } from './PageAside';
+export { PageLayout, } from './PageLayout';
+export { PageAsideBlock, } from './PageAsideBlock';
+export { PageContent, PageContentHeader, PageContentHeaderActions, pageContentClassnames, } from './PageContent';
+export { PageContext, PageContextProvider, } from './PageContext';
+export { pageHeaderClassnames, PageHeader, PageActionSkeleton, PageActions, } from './PageHeader';
+export { PageLayoutContainer, } from './PageLayoutContainer';
+export { PageLayoutFooter, } from './PageLayoutFooter';
+export { PagePinnableAside, } from './PagePinnableAside';
+export { PageLayoutLoader } from './PageLayoutLoader';
 export { Pagination } from './Pagination';
 export * from './Paper';
 export * from './PasswordField';
@@ -136,7 +152,7 @@ export * from './StylesCacheProvider';
 export * from './Switch';
 export { SvgIcon, svgIconClassnames, } from './SvgIcon';
 export { UNSTABLE_SecondsCountdownService } from './services';
-export * from './styles';
+export * from './styled';
 export * from './Tabs';
 export * from './Tag';
 export * from './TagBadge';

package/components/placeholders/LoadingPlaceholder/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const LoadingContainer: import("@emotion/styled").StyledComponent<{
+export declare const LoadingContainer: 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/placeholders/LoadingPlaceholder/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 export const LoadingContainer = styled.div `
   display: flex;
   flex-direction: column;

package/components/placeholders/Placeholder/Image/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type PlaceholderSize } from '../types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("../../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/components/placeholders/Placeholder/Image/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../../styles';
+import { styled } from '../../../styled';
 import { IMAGE_HEIGHT, IMAGE_WIDTH, SIZE } from '../constants';
 export const Wrapper = styled('img', {
     shouldForwardProp: (prop) => prop !== 'size',

package/components/placeholders/Placeholder/styles.d.ts

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

package/components/placeholders/Placeholder/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 import { MAX_INNER_WIDTH, SIZE } from './constants';
 const shouldForwardProp = (propName) => {

package/components/styled/mixins/list/list.js

@@ -0,0 +1,7 @@
+import { css } from '../../../styled';
+export const listContainer = () => css `
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+`;

package/components/styled/mixins/transitions/easeOutBackTransition.js

@@ -0,0 +1,4 @@
+import { css } from '../../../styled';
+export const easeOutBackTransition = () => css `
+  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+`;

package/components/styled/mixins/transitions/fadeDropDownTransition.js

@@ -0,0 +1,34 @@
+import { css } from '../../../styled';
+export const fadeDropDownTransition = (isOpen) => css `
+  animation: ${isOpen
+    ? 'fade-in 150ms ease-out forwards'
+    : 'fade-out 150ms ease-out forwards'};
+
+  @keyframes fade-in {
+    from {
+      transform: translateY(-8px);
+
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      transform: translateY(0);
+
+      opacity: 1;
+    }
+
+    to {
+      transform: translateY(-8px);
+
+      opacity: 0;
+    }
+  }
+`;

package/components/styled/styled.d.ts

@@ -0,0 +1,3 @@
+export { css, Global, keyframes } from '@emotion/react';
+export type { StyledComponent } from '@emotion/styled';
+export { default as styled } from '@emotion/styled';

package/components/theme/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="src/components/declaration/emotion" />
 export * from './baseTheme';
 export * from './constants';
 export * from './elevation';

package/components/theme/index.js

@@ -1,3 +1,4 @@
+/// <reference path="../declaration/emotion.d.ts" />
 export * from './baseTheme';
 export * from './constants';
 export * from './elevation';

package/components/theme/types.d.ts

@@ -1,5 +1,9 @@
 import { type Theme as MuiTheme } from '@mui/material';
+import type { Elevation } from './elevation';
+import type { MicroSpacing } from './microSpacing';
 import type { Background, Color, ColorBrand, CommonColors, ComponentsColors, PaletteColor, PrimaryColorOptions, SecondaryColor, TextColor } from './palette';
+import type { Shape } from './shape';
+import type { TypographyThemeOptions } from './typography';
 export type Palette = {
     red: Color;
     green: Color;
@@ -16,6 +20,10 @@ export type Palette = {
     text: TextColor;
     common: CommonColors;
 };
-export type Theme = Omit<MuiTheme, 'shadows' | 'palette'> & {
+export type Theme = Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> & {
+    elevation: Elevation;
+    microSpacing: MicroSpacing;
     palette: Palette;
+    shape: Shape;
+    typography: TypographyThemeOptions;
 };

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

@@ -48,4 +48,4 @@ export type EditableTextProps<TValue = string> = {
      */
     onSubmit: (fieldValue?: TValue) => void | Promise<void>;
 };
-export declare const EditableText: <TValue = string>(props: EditableTextProps<TValue>) => JSX.Element;
+export declare const EditableText: <TValue extends unknown = string>(props: EditableTextProps<TValue>) => JSX.Element;

package/hook-form/EditableText/EditableText.js

@@ -3,6 +3,7 @@ import { Tooltip } from '../../components/Tooltip';
 import { EditingForm } from './EditingForm';
 import { DisplayValue, StyledEditIcon, StyledLoader, StyledPopover, } from './styles';
 import { useLogic } from './useLogic';
+// biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизации в тестах
 export const EditableText = (props) => {
     const { isIconOnLeft, onClose, displayValueProps, tooltipProps, popoverProps, } = useLogic(props);
     const { className, children, isShowIcon = true, isLoading, iconPosition = 'right', ...restProps } = props;

package/hook-form/EditableText/EditingForm/EditingForm.d.ts

@@ -34,4 +34,4 @@ export type EditingFormProps<TValue = string> = {
      */
     onSubmit: (fieldValue?: TValue) => void | Promise<void>;
 };
-export declare const EditingForm: <TValue = string>(props: EditingFormProps<TValue>) => JSX.Element;
+export declare const EditingForm: <TValue extends unknown = string>(props: EditingFormProps<TValue>) => JSX.Element;

package/hook-form/EditableText/EditingForm/EditingForm.js

@@ -6,6 +6,7 @@ import { FormTextField } from '../../FormTextField';
 import { FIELD_NAME } from '../constants';
 import { Description, FormFooter, Wrapper } from './styles';
 import { useLogic } from './useLogic';
+// biome-ignore lint/complexity/noUselessTypeConstraint: Фикс типизация в тестах
 export const EditingForm = (props) => {
     const { formProps } = useLogic(props);
     const { componentField = (fieldProps) => _jsx(FormTextField, { ...fieldProps }), onClose, } = props;

package/hook-form/EditableText/EditingForm/styles.d.ts

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

package/hook-form/EditableText/EditingForm/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../../components/styles';
+import { styled } from '../../../components/styled';
 import { Typography } from '../../../components/Typography';
 export const Wrapper = styled.div `
   width: 400px;

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

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

package/hook-form/EditableText/styles.js

@@ -1,6 +1,6 @@
 import { Loader } from '../../components/Loader';
 import { Popover } from '../../components/Popover';
-import { styled } from '../../components/styles';
+import { styled } from '../../components/styled';
 import { Typography } from '../../components/Typography';
 import { EditOutlineMd } from '../../icons';
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+export declare const Backdrop: 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 StyledForm: import("@emotion/styled").StyledComponent<{
+export declare const StyledForm: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/hook-form/Form/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../components/styles';
+import { styled } from '../../components/styled';
 export const Backdrop = styled.div `
   position: absolute;
   z-index: ${({ theme }) => theme.zIndex.mobileStepper};

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

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/hook-form/FormController/index.js

@@ -0,0 +1 @@
+export { Controller as FormController, } from 'react-hook-form';

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

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/hook-form/FormController/public.js

@@ -0,0 +1 @@
+export { Controller as FormController, } from 'react-hook-form';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledPageLayoutFooter: import("../../components/styled").StyledComponent<import("../../components/PageLayoutFooter").PageLayoutFooterProps & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/hook-form/FormPageFooterContainer/styles.js

@@ -0,0 +1,36 @@
+import { PageLayoutFooter } from '../../components/PageLayoutFooter';
+import { styled } from '../../components/styled';
+import { formPageLayoutClassnames } from '../FormPageLayoutBase';
+import { HEADER_HEIGHT } from './constants';
+export const StyledPageLayoutFooter = styled(PageLayoutFooter) `
+  position: sticky;
+  z-index: ${({ theme }) => theme.zIndex.speedDial};
+
+  border-top: unset;
+
+  &.${formPageLayoutClassnames.footerShadow} {
+    bottom: 0;
+
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    align-items: unset;
+
+    width: 100%;
+    height: unset;
+    max-height: calc(100% - ${HEADER_HEIGHT});
+    padding: 0;
+
+    border-top-left-radius: ${({ theme }) => theme.shape.large};
+    border-top-right-radius: ${({ theme }) => theme.shape.large};
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+`;

package/hook-form/FormPageFooterContainer/useLogic/useLogic.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { pageContentClassnames } from '../../../components/PageContent';
+import { formPageLayoutClassnames } from '../../FormPageLayoutBase';
+export const useLogic = () => {
+    const footerRef = useRef(null);
+    const updateStickyState = useCallback((container) => {
+        if (!footerRef?.current) {
+            return;
+        }
+        if (!container || !container.parentElement) {
+            return;
+        }
+        if (container.scrollHeight > container.parentElement.clientHeight) {
+            return footerRef.current.classList.add(formPageLayoutClassnames.footerShadow);
+        }
+        footerRef.current.classList.remove(formPageLayoutClassnames.footerShadow);
+    }, []);
+    useEffect(() => {
+        const container = document.querySelector(`.${pageContentClassnames.content}`);
+        const rootContainer = document.querySelector(`.${pageContentClassnames.pageContent}`);
+        updateStickyState(container);
+        if (!container) {
+            return;
+        }
+        // ResizeObserver следит за изменением размеров контейнера
+        const resizeObserver = new ResizeObserver(() => updateStickyState(container));
+        resizeObserver.observe(container);
+        if (rootContainer) {
+            resizeObserver.observe(rootContainer);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [updateStickyState]);
+    return { footerRef };
+};