@astral/ui 4.17.5 → 4.17.6

package/components/PagePinnableAside/styles.js

@@ -0,0 +1,132 @@
+import { PAGE_ASIDE_WIDTH } from '../PageAside';
+import { css, styled } from '../styled';
+import { pinnableAsideClassnames } from './constants';
+export const Aside = styled('aside', {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  position: relative;
+
+  overflow: ${({ $isPinned }) => ($isPinned ? 'hidden' : 'unset')};
+  grid-column: 2;
+  grid-row: 2;
+
+  height: 100%;
+
+  border-bottom-right-radius: ${({ theme }) => theme.shape.medium};
+
+  &:hover {
+    .${pinnableAsideClassnames.content} {
+      transform: translateX(0);
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    z-index: 0;
+
+    overflow: unset;
+    order: 3;
+
+    width: ${({ theme }) => `calc(100% - ${theme.spacing(8)})`};
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+export const Dummy = styled('div', {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  height: 100%;
+
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ $isPinned }) => $isPinned && 'display: none;'}
+`;
+const pinnedStyles = css `
+  transform: translateX(0);
+`;
+const unpinnedStyles = css `
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateX(105%);
+`;
+export const Content = styled('div', {
+    shouldForwardProp: (prop) => !['$isPinned'].includes(prop),
+}) `
+  position: relative;
+  z-index: ${({ theme }) => theme.zIndex.appBar - 2};
+
+  overflow: hidden;
+  display: flex;
+  grid-column: 2;
+  grid-row: 2;
+  flex-direction: column;
+
+  width: ${PAGE_ASIDE_WIDTH};
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  transition: ${({ theme }) => {
+    return theme.transitions.create(['transform'], {
+        duration: theme.transitions.duration.shorter * 2,
+        easing: theme.transitions.easing.easeInOut,
+        delay: theme.transitions.duration.shorter,
+    });
+}};
+
+  ${({ $isPinned }) => ($isPinned ? pinnedStyles : unpinnedStyles)}
+  
+  ${({ $isPinned, theme }) => !$isPinned &&
+    `
+    box-shadow: 0px 0px 1px 0px #072D574F, -8px -5px 12px -6px #072D5726;
+    border-radius: ${theme.shape.medium};
+  `}
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: unset;
+    order: -1;
+
+    width: 100%;
+
+    border-top: unset;
+    border-left: 0;
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+export const ChildrenWrapper = styled.div `
+  overflow-y: auto;
+  flex-grow: 1;
+
+  padding: ${({ theme }) => theme.spacing(4, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+export const Footer = styled.footer `
+  display: flex;
+  flex-shrink: 0;
+
+  box-sizing: content-box;
+  height: 64px;
+  margin-top: auto;
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/PagePinnableAside/useLogic/useLogic.js

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from 'react';
+import { useLocalStorage } from '../../hooks';
+import { ASIDE_LOCAL_STORAGE_KEY } from '../constants';
+export const useLogic = ({ isPinned: isPinnedProp, onPin: onPinProp, persistState, }) => {
+    useEffect(() => {
+        const hasIsPinned = isPinnedProp !== undefined;
+        const hasOnPin = onPinProp !== undefined;
+        const hasPersistState = persistState !== undefined;
+        if (hasIsPinned !== hasOnPin) {
+            // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
+            console.warn('PagePinnableAside: Параметры isPinned и onPin необходимо передавать вместе');
+        }
+        if (!hasIsPinned && !hasPersistState) {
+            // biome-ignore lint/suspicious/noConsole: Ошибка для интеграторов
+            console.error('PagePinnableAside: Необходимо передать параметры isPinned и onPin или состояние persistState');
+        }
+    }, []);
+    const isControlled = isPinnedProp !== undefined;
+    const localStorageKey = useMemo(() => persistState ? `${ASIDE_LOCAL_STORAGE_KEY}::${persistState.id}` : null, [persistState]);
+    // Хук useLocalStorage имеет обязательный параметр key.
+    // При его отсутствии используем статично открытое состояние для aside
+    const [storedValue = true, setStoredValue] = localStorageKey
+        ? // biome-ignore lint/correctness/useHookAtTopLevel: <>
+            useLocalStorage(localStorageKey, true)
+        : [true, () => undefined];
+    const isPinned = isControlled ? isPinnedProp : (storedValue ?? true);
+    const togglePin = () => {
+        const newValue = !isPinned;
+        if (isControlled) {
+            return onPinProp?.(newValue);
+        }
+        setStoredValue(newValue);
+    };
+    return { isPinned, togglePin };
+};

package/components/Pagination/PaginationItem/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const Ellipsis: import("@emotion/styled").StyledComponent<{
+export declare const Ellipsis: 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;
@@ -9,15 +9,15 @@ export declare const Ellipsis: 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;
 } & {
     $disabled?: boolean | undefined;
 }, {}, {}>;
-export declare const StyledButton: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
-    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+export declare const StyledButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
     loading?: boolean | undefined;
     color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
     component?: import("react").ElementType | undefined;

package/components/Pagination/PaginationItem/styles.js

@@ -1,5 +1,5 @@
 import { Button } from '../../Button';
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 export const Ellipsis = styled(Typography, {
     shouldForwardProp: (prop) => !['$disabled'].includes(prop),

package/components/Pagination/styles.d.ts

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

package/components/Pagination/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../styles';
+import { styled } from '../styled';
 export const PaginationList = styled.ul `
   display: flex;
   gap: ${({ theme }) => theme.microSpacing(1)};

package/components/Paper/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+export declare const StyledPaper: import("../styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").PaperClasses> | undefined;
     elevation?: number | undefined;

package/components/Paper/styles.js

@@ -1,5 +1,5 @@
 import { Paper } from '@mui/material';
-import { styled } from '../styles';
+import { styled } from '../styled';
 export const StyledPaper = styled(Paper, {
     shouldForwardProp: (prop) => !['$shape'].includes(prop),
 }) `

package/components/PdfViewer/ControlBar/styles.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-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;
 } & {
     $isVisible?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTag: import("@emotion/styled").StyledComponent<{
+export declare const StyledTag: import("../../styled").StyledComponent<{
     disabled?: boolean | undefined;
     label?: import("react").ReactNode;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/components/PdfViewer/ControlBar/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { Tag } from '../../Tag';
 import { RESERVED_CONTROL_BAR_SPACE } from '../constants';
 export const Wrapper = styled.div `

package/components/PdfViewer/List/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PdfViewer/List/styles.js

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

package/components/PdfViewer/PdfDocument/styles.d.ts

@@ -1,21 +1,21 @@
 /// <reference types="react" />
-export declare const StyledDocument: import("@emotion/styled").StyledComponent<{
+export declare const StyledDocument: import("../../styled").StyledComponent<{
     children?: import("react").ReactNode;
-    className?: import("react-pdf/dist/cjs/shared/types").ClassName;
-    error?: import("react-pdf/dist/cjs/shared/types").NodeOrRenderer;
+    className?: import("react-pdf/dist/esm/shared/types.js").ClassName;
+    error?: import("react-pdf/dist/esm/shared/types.js").NodeOrRenderer;
     externalLinkRel?: string | undefined;
-    externalLinkTarget?: import("react-pdf/dist/cjs/shared/types").ExternalLinkTarget | undefined;
-    file?: import("react-pdf/dist/cjs/shared/types").File | undefined;
+    externalLinkTarget?: import("react-pdf/dist/esm/shared/types.js").ExternalLinkTarget | undefined;
+    file?: import("react-pdf/dist/esm/shared/types.js").File | undefined;
     imageResourcesPath?: string | undefined;
     inputRef?: import("react").Ref<HTMLDivElement | null> | undefined;
-    loading?: import("react-pdf/dist/cjs/shared/types").NodeOrRenderer;
-    noData?: import("react-pdf/dist/cjs/shared/types").NodeOrRenderer;
-    onItemClick?: ((args: import("react-pdf/dist/cjs/shared/types").OnItemClickArgs) => void) | undefined;
-    onLoadError?: import("react-pdf/dist/cjs/shared/types").OnError | undefined;
-    onLoadProgress?: import("react-pdf/dist/cjs/shared/types").OnDocumentLoadProgress | undefined;
-    onLoadSuccess?: import("react-pdf/dist/cjs/shared/types").OnDocumentLoadSuccess | undefined;
-    onPassword?: ((callback: import("react-pdf/dist/cjs/shared/types").OnPasswordCallback, reason: number) => void) | undefined;
-    onSourceError?: import("react-pdf/dist/cjs/shared/types").OnError | undefined;
+    loading?: import("react-pdf/dist/esm/shared/types.js").NodeOrRenderer;
+    noData?: import("react-pdf/dist/esm/shared/types.js").NodeOrRenderer;
+    onItemClick?: ((args: import("react-pdf/dist/esm/shared/types.js").OnItemClickArgs) => void) | undefined;
+    onLoadError?: import("react-pdf/dist/esm/shared/types.js").OnError | undefined;
+    onLoadProgress?: import("react-pdf/dist/esm/shared/types.js").OnDocumentLoadProgress | undefined;
+    onLoadSuccess?: import("react-pdf/dist/esm/shared/types.js").OnDocumentLoadSuccess | undefined;
+    onPassword?: ((callback: import("react-pdf/dist/esm/shared/types.js").OnPasswordCallback, reason: number) => void) | undefined;
+    onSourceError?: import("react-pdf/dist/esm/shared/types.js").OnError | undefined;
     onSourceSuccess?: (() => void) | undefined;
     options?: {
         length?: number | null | undefined;
@@ -51,13 +51,13 @@ export declare const StyledDocument: import("@emotion/styled").StyledComponent<{
         FilterFactory?: Object | null | undefined;
         enableHWA?: boolean | null | undefined;
     } | undefined;
-    renderMode?: import("react-pdf/dist/cjs/shared/types").RenderMode | undefined;
+    renderMode?: import("react-pdf/dist/esm/shared/types.js").RenderMode | undefined;
     rotate?: number | null | undefined;
 } & import("make-event-props").EventProps<false | import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined> & import("react").RefAttributes<{
-    linkService: import("react").RefObject<import("react-pdf/dist/cjs/LinkService").default>;
+    linkService: import("react").RefObject<import("react-pdf/dist/esm/LinkService.js").default>;
     pages: import("react").RefObject<HTMLDivElement[]>;
     viewer: import("react").RefObject<{
-        scrollPageIntoView: (args: import("react-pdf/dist/cjs/shared/types").ScrollPageIntoViewArgs) => void;
+        scrollPageIntoView: (args: import("react-pdf/dist/esm/shared/types.js").ScrollPageIntoViewArgs) => void;
     }>;
 }> & {
     theme?: import("@emotion/react").Theme | undefined;

package/components/PdfViewer/PdfDocument/styles.js

@@ -1,5 +1,5 @@
 import { Document } from 'react-pdf';
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { PDF_VIEWER_ANIMATION, pdfViewerClassnames } from '../constants';
 export const StyledDocument = styled(Document, {
     shouldForwardProp: (prop) => prop !== '$isLoading',

package/components/PdfViewer/PdfPage/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-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;
 } & {
@@ -7,7 +7,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     $isShowTag: boolean;
     $isViewerLite?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledTag: import("@emotion/styled").StyledComponent<{
+export declare const StyledTag: import("../../styled").StyledComponent<{
     disabled?: boolean | undefined;
     label?: import("react").ReactNode;
     icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/components/PdfViewer/PdfPage/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { StyledTag as Tag } from '../ControlBar';
 import { RESERVED_TOP_SPACE } from '../constants';
 export const Wrapper = styled.div `

package/components/PdfViewer/styles.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-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;
 } & {
     $enabledZoom?: boolean | undefined;
     $isViewerLite?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PDFViewerContainer: import("@emotion/styled").StyledComponent<{
+export declare const PDFViewerContainer: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     $isViewerLite?: boolean | undefined;
     $enabledZoom: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ScrollContainer: import("@emotion/styled").StyledComponent<{
+export declare const ScrollContainer: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/components/PdfViewer/styles.js

@@ -1,4 +1,4 @@
-import { styled } from '../styles';
+import { styled } from '../styled';
 import { RESERVED_CONTROL_BAR_SPACE } from './constants';
 export const Wrapper = styled.div `
   position: relative;

package/components/PinButton/PinButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type ButtonProps } from '../Button';
+export type PinButtonProps = ButtonProps & {
+    isPinned: boolean;
+    collapsedIn?: boolean;
+    isUseCollapse?: boolean;
+};
+export declare const PinButton: (props: PinButtonProps) => JSX.Element;

package/components/PinButton/PinButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PinOutlineMd, UnpinOutlineMd } from '../../icons';
+import { Collapse } from '../Collapse';
+import { classNames } from '../utils';
+import { pinButtonClassnames } from './constants';
+import { Content, TogglerButton } from './styles';
+export const PinButton = (props) => {
+    const { isPinned, collapsedIn, isUseCollapse = true, className, ...restProps } = props;
+    const PinIcon = isPinned ? UnpinOutlineMd : PinOutlineMd;
+    return (_jsx(TogglerButton, { startIcon: _jsx(PinIcon, {}), variant: "text", className: classNames(className, pinButtonClassnames.root), ...restProps, children: isUseCollapse ? (_jsx(Collapse, { in: collapsedIn, orientation: "horizontal", children: _jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' }) })) : (_jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' })) }));
+};

package/components/PinButton/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils';
+export const pinButtonClassnames = {
+    root: createUIKitClassname('pin-button'),
+};

package/components/PinButton/styles.d.ts

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

package/components/PinButton/styles.js

@@ -0,0 +1,31 @@
+import { Button } from '../Button';
+import { styled } from '../styled';
+import { Typography } from '../Typography';
+export const TogglerButton = styled(Button) `
+  justify-content: flex-start;
+
+  width: 100%;
+  height: 100%;
+  padding-left: ${({ theme }) => theme.spacing(6)};
+
+  border-radius: unset;
+
+  :hover {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    background-color: unset;
+  }
+
+  :active {
+    background-color: unset;
+  }
+
+  &:focus-visible {
+    border-radius: ${({ theme }) => theme.shape.medium};
+  }
+`;
+export const Content = styled(Typography) `
+  margin-left: ${({ theme }) => theme.spacing(1)};
+
+  white-space: nowrap;
+`;

package/components/Popover/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const StyledMuiPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
+export declare const StyledMuiPopover: import("../styled").StyledComponent<import("@mui/material").PopoverProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Popover/styles.js

@@ -1,5 +1,5 @@
 import { Popover as MuiPopover, paperClasses } from '@mui/material';
-import { styled } from '../styles';
+import { styled } from '../styled';
 export const StyledMuiPopover = styled(MuiPopover) `
   & .${paperClasses.root} {
     border-radius: ${({ theme }) => theme.shape.medium};

package/components/Product/styles.d.ts

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

package/components/Product/styles.js

@@ -1,5 +1,5 @@
 import { Button } from '../Button';
-import { styled } from '../styles';
+import { styled } from '../styled';
 export const StyledButton = styled(Button) `
   padding: ${({ theme }) => theme.spacing(1)};
 

package/components/ProductSwitcher/Content/styles.d.ts

@@ -6,16 +6,16 @@ export declare const ProductItem: <TComponent extends import("react").ElementTyp
     component?: TComponent | undefined;
     href?: string | undefined;
 } & import("react").ComponentPropsWithRef<import("react").ElementType extends TComponent ? "li" : TComponent> & import("react").RefAttributes<HTMLLIElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
-export declare const Logo: import("@emotion/styled").StyledComponent<{
+export declare const Logo: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const TitleErrorContainer: import("@emotion/styled").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const TitleErrorContainer: import("../../styled").StyledComponent<Omit<import("../../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("../../Grid/styles").StyledGridProps, {}, {}>;
-export declare const ProductName: import("@emotion/styled").StyledComponent<{
+export declare const ProductName: 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;
@@ -23,7 +23,7 @@ export declare const ProductName: 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;

package/components/ProductSwitcher/Content/styles.js

@@ -1,7 +1,7 @@
 import { menuItemClasses } from '@mui/material';
 import { Grid } from '../../Grid';
 import { MenuItem } from '../../MenuItem';
-import { styled } from '../../styles';
+import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 // as typeof MenuItem необходим для возможности прокинуть component
 // https://github.com/mui/material-ui/issues/15695

package/components/ProductSwitcher/faker.js

@@ -1,4 +1,4 @@
-const mockImage = '/product-switcher-logo.svg';
+const mockImage = './product-switcher-logo.svg';
 export const handleReject = () => {
     return new Promise((_resolve, reject) => reject(''));
 };

package/components/ProductSwitcher/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").MenuProps> & {
+export declare const StyledMenu: import("../styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").MenuProps> & {
     title?: string | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;