@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

package/types/components/Button/Button.styles.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-export declare const base: import("@linaria/core").LinariaClassName;
 export declare const ButtonText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const ButtonValue: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const LoadWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    contentPlacing: string;
     isLoading?: boolean | undefined;
 }>;
 export declare const Loader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -21,5 +22,8 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
     size?: undefined;
     view?: string | undefined;
 } & import("react").RefAttributes<HTMLDivElement>))>;
+export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const base: import("@linaria/core").LinariaClassName;
 export declare const baseContent: string;
 //# sourceMappingURL=Button.styles.d.ts.map

package/types/components/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAKF,eAAO,MAAM,UAAU,uKAUtB,CAAC;AAGF,eAAO,MAAM,QAAQ;;EAOpB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAE9B,CAAC;AAEF,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}

package/types/components/Button/Button.tokens.d.ts

@@ -3,11 +3,13 @@ export declare const classes: {
     autoStretching: string;
     filledStretching: string;
     fixedStretching: string;
+    contentRelaxed: string;
     buttonSquare: string;
     buttonItem: string;
 };
 export declare const tokens: {
     buttonColor: string;
+    buttonValueColor: string;
     buttonBackgroundColor: string;
     buttonColorHover: string;
     buttonBackgroundColorHover: string;
@@ -26,6 +28,9 @@ export declare const tokens: {
     buttonFontWeight: string;
     buttonLetterSpacing: string;
     buttonLineHeight: string;
+    buttonLeftContentMargin: string;
+    buttonRightContentMargin: string;
+    buttonValueMargin: string;
     buttonDisabledOpacity: string;
     buttonFocusColor: string;
     buttonSpinnerColor: string;

package/types/components/Button/Button.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA4BlB,CAAC"}
+{"version":3,"file":"Button.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiClB,CAAC"}

package/types/components/Button/Button.types.d.ts

@@ -3,6 +3,11 @@ import type { Pin } from '../../utils/roundness';
 import { Blur } from '../../mixins';
 import type { AsProps } from '../../types';
 declare type Stretching = 'fixed' | 'filled' | 'auto';
+declare type ContentPlacing = 'default' | 'relaxed';
+declare type ContentPlacingValue = 'center' | 'space-between';
+export declare type ContentPlacementMapper = {
+    [K in ContentPlacing]: ContentPlacingValue;
+};
 declare type CustomButtonProps = {
     /**
      * Текстовая надпись
@@ -16,6 +21,11 @@ declare type CustomButtonProps = {
      * Слот для контента справа, например `Icon`
      */
     contentRight?: ReactNode;
+    /**
+     * Положение контента по ширине кнопки.
+     * @default 'default'
+     */
+    contentPlacing?: ContentPlacing;
     /**
      * У кнопки состояние загрузки
      */

package/types/components/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE9C,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,WAAW,CACxC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC3B,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EACrC,OAAO,EACP,iBAAiB;CAAG"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,WAAW,CACxC,SAAQ,oBAAoB,CAAC,CAAC,CAAC,EAC3B,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EACrC,OAAO,EACP,iBAAiB;CAAG"}

package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0OlB,CAAC"}
+{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}

package/types/examples/plasma_web/components/Button/Button.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0OlB,CAAC"}
+{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}

package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0OlB,CAAC"}
+{"version":3,"file":"Button.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Button/Button.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwRlB,CAAC"}

package/cjs/components/Button/Button.styles_uqvh6u.css

@@ -1,5 +0,0 @@
-.bzw1898{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.bzw1898{-webkit-text-decoration:none;text-decoration:none;}.bzw1898.bzw1898.button-square{width:var(--plasma-button-height);padding:0;}
-.bdfuqwe{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bdfuqwe:not(:last-child){margin-right:0.375rem;}.bdfuqwe:not(:first-child){margin-left:0.375rem;}
-.l9ypozh{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
-.l4dfhbg{position:absolute;}
-.srdlazt{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}

package/es/components/Button/Button.styles_uqvh6u.css

@@ -1,5 +0,0 @@
-.bzw1898{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.bzw1898{-webkit-text-decoration:none;text-decoration:none;}.bzw1898.bzw1898.button-square{width:var(--plasma-button-height);padding:0;}
-.bdfuqwe{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bdfuqwe:not(:last-child){margin-right:0.375rem;}.bdfuqwe:not(:first-child){margin-left:0.375rem;}
-.l9ypozh{opacity:var(--l9ypozh-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:inherit;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;}
-.l4dfhbg{position:absolute;}
-.srdlazt{--plasma-spinner-size:var(--plasma-button-spinner-size);--plasma-spinner-color:var(--plasma-button-spinner-color);}

package/styled-components/cjs/components/Cell/Cell.template-doc.mdx

@@ -1,68 +0,0 @@
----
-id: cell
-title: Cell
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Cell
-<PropsTable name="Cell" />
-<Description name="Cell" />
-
-Компонент ячейки представляет собой стилизованные слоты для контента.
-
-Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
-
-Они представляют собой стилизованный текст и слот для них.
-
-## Примеры
-
-### Базовое использование
-
-```tsx live
-import React from 'react';
-import { Avatar, Cell } from '@salutejs/{{ package }}';
-import { IconChevronRight } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <>
-            <Cell
-                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
-                size="m"
-                contentRight={<IconChevronRight color="inheart" size="xs" />}
-                title="Title"
-                subtitle="Subtitle"
-                label="Label"
-            />
-        </>
-    );
-}
-```
-
-### С использованием своих стилей или встроенных компонентов
-
-```tsx live
-import React from 'react';
-import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
-import { IconChevronRight } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <>
-            <Cell
-                contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
-                size="m"
-                contentRight={<IconChevronRight color="inheart" size="xs" />}
-            >
-                <CellTextbox>
-                    <CellTextboxLabel>Label</CellTextboxLabel>
-                    <CellTextboxTitle>Title</CellTextboxTitle>
-                    <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
-                    <div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
-                </CellTextbox>
-            </Cell>
-        </>
-    );
-}
-```

package/styled-components/cjs/components/Divider/Divider.template-docs.mdx

@@ -1,57 +0,0 @@
----
-id: divider
-title: Divider
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-## Divider
-<Description name="Divider" />
-<PropsTable name="Divider" exclude={['css']} />
-
-## Использование
-Компонент `Divider` используется для визуального разделения компонент.
-
-### Ориентация разделителя
-Ориентация разделителя задается с помощью свойства orientation.
-
-Возможные значения свойства orientation:
-+ "horizontal" – горизонтальная (по умолчанию);
-+ "vertical" – вертикальная;
-
-```tsx live
-import React from 'react';
-import { BodyS, Divider } from '@salutejs/{{ package }}';
-
-export function App() {
-    const Demo = ({
-        orientation = 'horizontal',
-        length = '100%',
-        beforeText = 'Before',
-        afterText = 'After',
-    }) => {
-        const wrapperStyle = {
-            display: "inline-flex",
-            gap: "0.5rem",
-            alignItems: "center",
-            justifyContent: "center",
-            flexDirection: orientation === "horizontal" ? "column" : "row"
-        }
-
-        return (
-            <div style={wrapperStyle}>
-                <BodyS>{beforeText}</BodyS>
-                <Divider orientation={orientation} length={length} />
-                <BodyS>{afterText}</BodyS>
-            </div>
-        );
-    };
-
-    return (
-        <div style=\{{ display: "flex", gap: "2rem" }}>
-            <Demo />
-            <Demo orientation="vertical" />
-        </div>
-    );
-}
-```

package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx

@@ -1,156 +0,0 @@
----
-id: IconButton
-title: IconButton
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# IconButton
-Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку.
-
-## IconButton
-<Description name="IconButton" />
-<PropsTable name="IconButton" exclude={['css']} />
-
-## Использование
-Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`.
-
-```tsx live
-import React from 'react';
-import { IconButton } from '@salutejs/{{ package }}';
-import { IconClose } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <IconButton>
-                <IconClose color="inherit" />
-            </IconButton>
-        </div>
-    );
-}
-```
-
-## Примеры
-
-### Размер кнопки
-Размер кнопки задается с помощью свойства `size`.
-
-```tsx live
-import React from 'react';
-import { IconButton } from '@salutejs/{{ package }}';
-import { IconClose } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <IconButton size="l">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="m">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="xs">
-                <IconClose color="inherit" size="xs" />
-            </IconButton>
-        </div>
-    );
-}
-```
-
-### Вид кнопки
-Вид кнопки задается с помощью свойства `view`.
-
-Возможные значения свойства `view`:
-+ `"default"` – по умолчанию;
-+ `"secondary"` – вторичная;
-+ `"success"` – успешное завершение;
-+ `"warning"` – предупреждение;
-+ `"critical"` – ошибка;
-+ `"clear"` – без цветового сопровождения;
-+ `"dark"` – темная;
-+ `"black"` – черная;
-+ `"white"` – белая.
-
-```tsx live
-import React from 'react';
-import { IconButton } from '@salutejs/{{ package }}';
-import { IconClose } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <IconButton size="s" view="default">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="secondary">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="success">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="warning">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="critical">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="clear">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="dark">
-                <IconClose  color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="black">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton size="s" view="white">
-                <IconClose color="inherit" />
-            </IconButton>
-        </div>
-    );
-}
-```
-
-### Границы кнопки
-Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
-+ `square` – обычное скругление;
-+ `circle` – сильное скругление;
-+ `clear` – нет скругления.
-
-```tsx live
-import React from 'react';
-import { IconButton } from '@salutejs/{{ package }}';
-import { IconClose } from '@salutejs/plasma-icons';
-
-export function App() {
-    return (
-        <div>
-            <IconButton pin="square-square">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="square-clear">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="clear-square">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="clear-clear">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="clear-circle">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="circle-clear">
-                <IconClose color="inherit" />
-            </IconButton>
-            <IconButton pin="circle-circle">
-                <IconClose color="inherit" />
-            </IconButton>
-        </div>
-    );
-}
-```

package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx

@@ -1,130 +0,0 @@
----
-id: pagination
-title: Pagination
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Pagination
-
-Pagination может отображаться в разных размерах и может содержать select с выбором количества элементов на странице 
-и быстрый выбор страницы.
-
-## Pagination
-<Description name="Pagination" />
-<PropsTable name="Pagination" exclude={['css', 'focused']} />
-
-## Использование
-Компонент `Pagination` должен содержать параметр slots. Он обозначает количество кнопок в Pagination.
-
-Также компонент имеет параметр hasPerPage, логика работы такова:
-
-- если указан только параметр count, то он равен кол-ву страниц
-- если указан параметр hasPerPage или perPage, то count делится на perPage
-
-```tsx live
-import React from 'react';
-import { Pagination } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{display: "flex", "flex-direction": "column"}}>
-            <div>
-                <Pagination slots={7} count={200} />
-            </div>
-            <div>
-                <Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
-            </div>
-            <div>
-                <Pagination slots={9} count={200} hasPerPage={true} />
-            </div>
-            <div>
-                <Pagination slots={9} count={200} hasPerPage={false} />
-            </div>
-        </div>
-    );
-}
-```
-
-## Примеры
-
-### Размер Pagination
-Размер Pagination задается с помощью свойства `size`.
-Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
-
-```tsx live
-import React from 'react';
-import { Pagination } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{display: "flex", "flex-direction": "column"}}>
-            <Pagination size="l" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="m" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="s" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" slots={9} count={200} hasPerPage={true} />
-        </div>
-    );
-}
-```
-
-### Вид Pagination
-Вид Pagination задается с помощью свойства `view`. Возможные значения свойства `view`:
-+ `"default"` – основная;
-+ `"secondary"` – вторичная;
-+ `"clear"` – чистая;
-
-```tsx live
-import React from 'react';
-import { Pagination } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{display: "flex", "flex-direction": "column"}}>
-            <Pagination size="xs" view="default" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" view="secondary" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" view="clear" slots={9} count={200} hasPerPage={true} />
-        </div>
-    );
-}
-```
-
-### Вид активной кнопки Pagination
-Вид Pagination задается с помощью свойства `viewCurrentPage`. Возможные значения свойства `viewCurrentPage`:
-+ `"default"` – основная;
-+ `"secondary"` – вторичная;
-+ `"clear"` – чистая;
-
-```tsx live
-import React from 'react';
-import { Pagination } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{display: "flex", "flex-direction": "column"}}>
-            <Pagination size="xs" viewCurrentPage="default" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" viewCurrentPage="secondary" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" viewCurrentPage="clear" slots={9} count={200} hasPerPage={true} />
-        </div>
-    );
-}
-```
-
-### Типы Pagination
-Тип Pagination задается с помощью свойства `type`. Возможные значения свойства `type`:
-+ `"default"` – обычная;
-+ `"compact"` – компактная;
-
-```tsx live
-import React from 'react';
-import { Pagination } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{display: "flex", "flex-direction": "column"}}>
-            <Pagination size="xs" type="default" slots={9} count={200} hasPerPage={true} />
-            <Pagination size="xs" type="compact" slots={9} count={200} hasPerPage={true} />
-        </div>
-    );
-}
-```

package/styled-components/cjs/components/Progress/Progress.template-doc.mdx

@@ -1,33 +0,0 @@
----
-id: progress
-title: Progress
----
-
-import { PropsTable, Description } from '@site/src/components';
-
-# Progress
-<Description name="Progress" />
-<PropsTable name="Progress" exclude={['css']} />
-
-##Примеры
-
-### Вид прогресса
-Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
-+ `"default"` – по умолчанию;
-+ `"primary"` – основная;
-+ `"secondary"` – вторичная;
-+ `"accent"` – акцентная;
-+ `"success"` – успешное завершение;
-+ `"warning"` – предупреждение;
-+ `"error"` – ошибка;
-
-```tsx live
-import React from 'react';
-import { Progress } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <Progress value={25} view="success" displayValue />
-    );
-}
-```