@alfalab/core-components 41.7.0-beta.0 → 41.7.0-beta.2

package/icon-view/esm/components/rectangle/paths.js

@@ -0,0 +1,58 @@
+var borderPaths = {
+    20: {
+        none: 'M0.5 6.4C0.5 5.27165 0.500389 4.45545 0.552836 3.81352C0.604807 3.17744 0.705391 2.75662 0.881477 2.41103C1.21703 1.75247 1.75247 1.21703 2.41103 0.881477C2.75662 0.705391 3.17744 0.604807 3.81352 0.552836C4.45545 0.500389 5.27164 0.5 6.4 0.5H13.6C14.7284 0.5 15.5446 0.500389 16.1865 0.552836C16.8226 0.604807 17.2434 0.705391 17.589 0.881477C18.2475 1.21703 18.783 1.75247 19.1185 2.41103C19.2946 2.75662 19.3952 3.17744 19.4472 3.81352C19.4996 4.45545 19.5 5.27164 19.5 6.4V7.6C19.5 8.72836 19.4996 9.54455 19.4472 10.1865C19.3952 10.8226 19.2946 11.2434 19.1185 11.589C18.783 12.2475 18.2475 12.783 17.589 13.1185C17.2434 13.2946 16.8226 13.3952 16.1865 13.4472C15.5446 13.4996 14.7284 13.5 13.6 13.5H6.4C5.27164 13.5 4.45545 13.4996 3.81352 13.4472C3.17744 13.3952 2.75662 13.2946 2.41103 13.1185C1.75247 12.783 1.21703 12.2475 0.881477 11.589C0.705391 11.2434 0.604807 10.8226 0.552836 10.1865C0.500389 9.54455 0.5 8.72836 0.5 7.6V6.4Z',
+    },
+    24: {
+        none: 'M0.5 8C0.5 6.59162 0.500389 5.5654 0.56646 4.75673C0.632055 3.95389 0.759887 3.40959 0.990471 2.95704C1.4219 2.11031 2.11031 1.4219 2.95704 0.990471C3.40959 0.759887 3.95389 0.632055 4.75673 0.56646C5.5654 0.500389 6.59162 0.5 8 0.5H16C17.4084 0.5 18.4346 0.500389 19.2433 0.56646C20.0461 0.632055 20.5904 0.759887 21.043 0.990471C21.8897 1.4219 22.5781 2.11031 23.0095 2.95704C23.2401 3.40959 23.3679 3.95389 23.4335 4.75673C23.4996 5.5654 23.5 6.59162 23.5 8C23.5 9.40838 23.4996 10.4346 23.4335 11.2433C23.3679 12.0461 23.2401 12.5904 23.0095 13.043C22.5781 13.8897 21.8897 14.5781 21.043 15.0095C20.5904 15.2401 20.0461 15.3679 19.2433 15.4335C18.4346 15.4996 17.4084 15.5 16 15.5H8C6.59162 15.5 5.5654 15.4996 4.75673 15.4335C3.95389 15.3679 3.40959 15.2401 2.95704 15.0095C2.11031 14.5781 1.4219 13.8897 0.990471 13.043C0.759887 12.5904 0.632055 12.0461 0.56646 11.2433C0.500389 10.4346 0.5 9.40838 0.5 8Z',
+    },
+    32: {
+        none: 'M0.5 9.6C0.5 7.91159 0.500389 6.67536 0.580085 5.69993C0.659303 4.73034 0.814384 4.06255 1.09946 3.50305C1.62677 2.46816 2.46816 1.62677 3.50305 1.09946C4.06255 0.814384 4.73034 0.659303 5.69993 0.580085C6.67536 0.500389 7.91159 0.5 9.6 0.5H22.4C24.0884 0.5 25.3246 0.500389 26.3001 0.580085C27.2697 0.659303 27.9374 0.814384 28.4969 1.09946C29.5318 1.62677 30.3732 2.46816 30.9005 3.50305C31.1856 4.06255 31.3407 4.73034 31.4199 5.69993C31.4996 6.67536 31.5 7.91159 31.5 9.6V12.4C31.5 14.0884 31.4996 15.3246 31.4199 16.3001C31.3407 17.2697 31.1856 17.9374 30.9005 18.4969C30.3732 19.5318 29.5318 20.3732 28.4969 20.9005C27.9374 21.1856 27.2697 21.3407 26.3001 21.4199C25.3246 21.4996 24.0884 21.5 22.4 21.5H9.6C7.91159 21.5 6.67536 21.4996 5.69993 21.4199C4.73034 21.3407 4.06255 21.1856 3.50305 20.9005C2.46816 20.3732 1.62677 19.5318 1.09946 18.4969C0.814384 17.9374 0.659303 17.2697 0.580085 16.3001C0.500389 15.3246 0.5 14.0884 0.5 12.4V9.6Z',
+    },
+    40: {
+        none: 'M0.5 12.8C0.5 10.5515 0.500389 8.89527 0.607333 7.58633C0.7138 6.28324 0.923378 5.36848 1.31745 4.59507C2.0365 3.18386 3.18386 2.0365 4.59507 1.31745C5.36848 0.923378 6.28324 0.7138 7.58633 0.607333C8.89526 0.500389 10.5515 0.5 12.8 0.5H27.2C29.4485 0.5 31.1047 0.500389 32.4137 0.607333C33.7168 0.7138 34.6315 0.923378 35.4049 1.31745C36.8161 2.0365 37.9635 3.18386 38.6825 4.59507C39.0766 5.36848 39.2862 6.28324 39.3927 7.58633C39.4996 8.89526 39.5 10.5515 39.5 12.8V15.2C39.5 17.4485 39.4996 19.1047 39.3927 20.4137C39.2862 21.7168 39.0766 22.6315 38.6825 23.4049C37.9635 24.8161 36.8161 25.9635 35.4049 26.6825C34.6315 27.0766 33.7168 27.2862 32.4137 27.3927C31.1047 27.4996 29.4485 27.5 27.2 27.5H12.8C10.5515 27.5 8.89526 27.4996 7.58633 27.3927C6.28324 27.2862 5.36848 27.0766 4.59507 26.6825C3.18386 25.9635 2.0365 24.8161 1.31745 23.4049C0.923378 22.6315 0.7138 21.7168 0.607333 20.4137C0.500389 19.1047 0.5 17.4485 0.5 15.2V12.8Z',
+    },
+    48: {
+        none: 'M0.5 16C0.5 13.1915 0.500389 11.1152 0.634581 9.47274C0.768297 7.83614 1.03237 6.67442 1.53544 5.68709C2.44623 3.89955 3.89955 2.44623 5.68709 1.53544C6.67442 1.03237 7.83614 0.768297 9.47274 0.634581C11.1152 0.500389 13.1915 0.5 16 0.5H32C34.8085 0.5 36.8848 0.500389 38.5273 0.634581C40.1639 0.768297 41.3256 1.03237 42.3129 1.53544C44.1005 2.44623 45.5538 3.89955 46.4646 5.68709C46.9676 6.67442 47.2317 7.83614 47.3654 9.47274C47.4996 11.1152 47.5 13.1915 47.5 16V18C47.5 20.8085 47.4996 22.8848 47.3654 24.5273C47.2317 26.1639 46.9676 27.3256 46.4646 28.3129C45.5538 30.1005 44.1005 31.5538 42.3129 32.4646C41.3256 32.9676 40.1639 33.2317 38.5273 33.3654C36.8848 33.4996 34.8085 33.5 32 33.5H16C13.1915 33.5 11.1152 33.4996 9.47274 33.3654C7.83614 33.2317 6.67442 32.9676 5.68709 32.4646C3.89955 31.5538 2.44623 30.1004 1.53544 28.3129C1.03237 27.3256 0.768297 26.1639 0.634581 24.5273C0.500389 22.8848 0.5 20.8085 0.5 18V16Z',
+    },
+    64: {
+        none: 'M0.5 20.8C0.5 17.1514 0.500389 14.445 0.675454 12.3023C0.850042 10.1655 1.19586 8.63331 1.86242 7.32512C3.06084 4.97309 4.97309 3.06084 7.32512 1.86242C8.63331 1.19586 10.1655 0.850042 12.3023 0.675454C14.445 0.500389 17.1514 0.5 20.8 0.5H43.2C46.8486 0.5 49.555 0.500389 51.6977 0.675454C53.8345 0.850042 55.3667 1.19586 56.6749 1.86242C59.0269 3.06084 60.9392 4.97309 62.1376 7.32512C62.8041 8.63331 63.15 10.1655 63.3245 12.3023C63.4996 14.445 63.5 17.1514 63.5 20.8V25.2C63.5 28.8486 63.4996 31.555 63.3245 33.6977C63.15 35.8345 62.8041 37.3667 62.1376 38.6749C60.9392 41.0269 59.0269 42.9392 56.6749 44.1376C55.3667 44.8041 53.8345 45.15 51.6977 45.3245C49.555 45.4996 46.8486 45.5 43.2 45.5H20.8C17.1514 45.5 14.445 45.4996 12.3023 45.3245C10.1655 45.15 8.63331 44.8041 7.32512 44.1376C4.97309 42.9392 3.06084 41.0269 1.86242 38.6749C1.19586 37.3667 0.850042 35.8345 0.675454 33.6977C0.500389 31.555 0.5 28.8486 0.5 25.2V20.8Z',
+    },
+    80: {
+        none: 'M0.5 25.6C0.5 21.1113 0.500389 17.7749 0.716326 15.1319C0.931787 12.4948 1.35935 10.5922 2.1894 8.96315C3.67544 6.04663 6.04663 3.67544 8.96315 2.1894C10.5922 1.35935 12.4948 0.931787 15.1319 0.716326C17.7749 0.500389 21.1113 0.5 25.6 0.5H54.4C58.8887 0.5 62.2251 0.500389 64.8681 0.716326C67.5052 0.931787 69.4078 1.35935 71.0368 2.1894C73.9534 3.67544 76.3246 6.04663 77.8106 8.96315C78.6406 10.5922 79.0682 12.4948 79.2837 15.1319C79.4996 17.7749 79.5 21.1113 79.5 25.6V32.4C79.5 36.8887 79.4996 40.2251 79.2837 42.8681C79.0682 45.5052 78.6406 47.4078 77.8106 49.0369C76.3246 51.9534 73.9534 54.3246 71.0368 55.8106C69.4078 56.6406 67.5052 57.0682 64.8681 57.2837C62.2251 57.4996 58.8887 57.5 54.4 57.5H25.6C21.1113 57.5 17.7749 57.4996 15.1319 57.2837C12.4948 57.0682 10.5922 56.6406 8.96315 55.8106C6.04663 54.3246 3.67544 51.9534 2.1894 49.0369C1.35935 47.4078 0.931787 45.5052 0.716326 42.8681C0.500389 40.2251 0.5 36.8887 0.5 32.4V25.6Z',
+    },
+    128: {
+        none: 'M0.5 41.6C0.5 34.3111 0.500389 28.8744 0.852568 24.564C1.20427 20.2593 1.90432 17.1219 3.27933 14.4232C5.7241 9.62511 9.62511 5.7241 14.4232 3.27933C17.1219 1.90432 20.2593 1.20427 24.564 0.852568C28.8744 0.500389 34.3111 0.5 41.6 0.5H86.4C93.6889 0.5 99.1256 0.500389 103.436 0.852568C107.741 1.20427 110.878 1.90432 113.577 3.27933C118.375 5.7241 122.276 9.62511 124.721 14.4232C126.096 17.1219 126.796 20.2593 127.147 24.564C127.5 28.8744 127.5 34.3111 127.5 41.6V50.4C127.5 57.6889 127.5 63.1256 127.147 67.436C126.796 71.7407 126.096 74.8781 124.721 77.5768C122.276 82.3749 118.375 86.2759 113.577 88.7207C110.878 90.0957 107.741 90.7957 103.436 91.1474C99.1256 91.4996 93.6889 91.5 86.4 91.5H41.6C34.3111 91.5 28.8744 91.4996 24.564 91.1474C20.2593 90.7957 17.1219 90.0957 14.4232 88.7207C9.62511 86.2759 5.7241 82.3749 3.27933 77.5768C1.90432 74.8781 1.20427 71.7407 0.852568 67.436C0.500389 63.1256 0.5 57.6889 0.5 50.4V41.6Z',
+    },
+};
+var shapePaths = {
+    20: {
+        none: 'M0 6.4C0 4.15979 0 3.03968 0.435974 2.18404C0.819467 1.43139 1.43139 0.819467 2.18404 0.435974C3.03968 0 4.15979 0 6.4 0H13.6C15.8402 0 16.9603 0 17.816 0.435974C18.5686 0.819467 19.1805 1.43139 19.564 2.18404C20 3.03968 20 4.15979 20 6.4V7.6C20 9.84021 20 10.9603 19.564 11.816C19.1805 12.5686 18.5686 13.1805 17.816 13.564C16.9603 14 15.8402 14 13.6 14H6.4C4.15979 14 3.03968 14 2.18404 13.564C1.43139 13.1805 0.819467 12.5686 0.435974 11.816C0 10.9603 0 9.84021 0 7.6V6.4Z',
+    },
+    24: {
+        none: 'M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0H16C18.8003 0 20.2004 0 21.27 0.544967C22.2108 1.02433 22.9757 1.78924 23.455 2.73005C24 3.79961 24 5.19974 24 8C24 10.8003 24 12.2004 23.455 13.27C22.9757 14.2108 22.2108 14.9757 21.27 15.455C20.2004 16 18.8003 16 16 16H8C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z',
+    },
+    32: {
+        none: 'M0 9.6C0 6.23969 0 4.55953 0.653961 3.27606C1.2292 2.14708 2.14708 1.2292 3.27606 0.653961C4.55953 0 6.23969 0 9.6 0H22.4C25.7603 0 27.4405 0 28.7239 0.653961C29.8529 1.2292 30.7708 2.14708 31.346 3.27606C32 4.55953 32 6.23969 32 9.6V12.4C32 15.7603 32 17.4405 31.346 18.7239C30.7708 19.8529 29.8529 20.7708 28.7239 21.346C27.4405 22 25.7603 22 22.4 22H9.6C6.23969 22 4.55953 22 3.27606 21.346C2.14708 20.7708 1.2292 19.8529 0.653961 18.7239C0 17.4405 0 15.7603 0 12.4V9.6Z',
+    },
+    40: {
+        none: 'M0 12.8C0 8.31958 0 6.07937 0.871948 4.36808C1.63893 2.86278 2.86278 1.63893 4.36808 0.871948C6.07937 0 8.31958 0 12.8 0H27.2C31.6804 0 33.9206 0 35.6319 0.871948C37.1372 1.63893 38.3611 2.86278 39.1281 4.36808C40 6.07937 40 8.31958 40 12.8V15.2C40 19.6804 40 21.9206 39.1281 23.6319C38.3611 25.1372 37.1372 26.3611 35.6319 27.1281C33.9206 28 31.6804 28 27.2 28H12.8C8.31958 28 6.07937 28 4.36808 27.1281C2.86278 26.3611 1.63893 25.1372 0.871948 23.6319C0 21.9206 0 19.6804 0 15.2V12.8Z',
+    },
+    48: {
+        none: 'M0 16C0 10.3995 0 7.59921 1.08993 5.46009C2.04867 3.57847 3.57847 2.04867 5.46009 1.08993C7.59921 0 10.3995 0 16 0H32C37.6005 0 40.4008 0 42.5399 1.08993C44.4215 2.04867 45.9513 3.57847 46.9101 5.46009C48 7.59921 48 10.3995 48 16V18C48 23.6005 48 26.4008 46.9101 28.5399C45.9513 30.4215 44.4215 31.9513 42.5399 32.9101C40.4008 34 37.6005 34 32 34H16C10.3995 34 7.59921 34 5.46009 32.9101C3.57847 31.9513 2.04867 30.4215 1.08993 28.5399C0 26.4008 0 23.6005 0 18V16Z',
+    },
+    64: {
+        none: 'M0 20.8C0 13.5193 0 9.87898 1.41692 7.09812C2.66327 4.65202 4.65202 2.66327 7.09812 1.41692C9.87898 0 13.5193 0 20.8 0H43.2C50.4807 0 54.121 0 56.9019 1.41692C59.348 2.66327 61.3367 4.65202 62.5831 7.09812C64 9.87898 64 13.5193 64 20.8V25.2C64 32.4807 64 36.121 62.5831 38.9019C61.3367 41.348 59.348 43.3367 56.9019 44.5831C54.121 46 50.4807 46 43.2 46H20.8C13.5193 46 9.87898 46 7.09812 44.5831C4.65202 43.3367 2.66327 41.348 1.41692 38.9019C0 36.121 0 32.4807 0 25.2V20.8Z',
+    },
+    80: {
+        none: 'M0 25.6C0 16.6392 0 12.1587 1.7439 8.73615C3.27787 5.72556 5.72556 3.27787 8.73615 1.7439C12.1587 0 16.6392 0 25.6 0H54.4C63.3608 0 67.8413 0 71.2638 1.7439C74.2744 3.27787 76.7221 5.72556 78.2561 8.73615C80 12.1587 80 16.6392 80 25.6V32.4C80 41.3608 80 45.8413 78.2561 49.2638C76.7221 52.2744 74.2744 54.7221 71.2638 56.2561C67.8413 58 63.3608 58 54.4 58H25.6C16.6392 58 12.1587 58 8.73615 56.2561C5.72556 54.7221 3.27787 52.2744 1.7439 49.2638C0 45.8413 0 41.3608 0 32.4V25.6Z',
+    },
+    128: {
+        none: 'M0 41.6C0 27.0386 0 19.758 2.83383 14.1962C5.32654 9.30403 9.30403 5.32654 14.1962 2.83383C19.758 0 27.0386 0 41.6 0H86.4C100.961 0 108.242 0 113.804 2.83383C118.696 5.32654 122.673 9.30403 125.166 14.1962C128 19.758 128 27.0386 128 41.6V50.4C128 64.9614 128 72.2421 125.166 77.8038C122.673 82.696 118.696 86.6735 113.804 89.1662C108.242 92 100.961 92 86.4 92H41.6C27.0386 92 19.758 92 14.1962 89.1662C9.30403 86.6735 5.32654 82.696 2.83383 77.8038C0 72.2421 0 64.9614 0 50.4V41.6Z',
+    },
+};
+var pathsMap = {
+    shape: shapePaths,
+    border: borderPaths,
+};
+
+export { borderPaths, pathsMap, shapePaths };

package/icon-view/esm/no-shape.d.ts

@@ -0,0 +1 @@
+export * from "./components/no-shape/index";

package/icon-view/esm/no-shape.js

@@ -0,0 +1,8 @@
+export { NoShape } from './components/no-shape/component.js';
+import 'tslib';
+import 'react';
+import './components/base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './components/no-shape/paths.js';
+import './components/base-shape/utils.js';

package/icon-view/esm/rectangle.d.ts

@@ -0,0 +1 @@
+export * from "./components/rectangle/index";

package/icon-view/esm/rectangle.js

@@ -0,0 +1,8 @@
+export { Rectangle } from './components/rectangle/component.js';
+import 'tslib';
+import 'react';
+import './components/base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './components/rectangle/paths.js';
+import './components/base-shape/utils.js';

package/icon-view/modern/components/base-shape/component.d.ts

@@ -2,11 +2,19 @@
 import React from 'react';
 import { ElementType, ReactNode } from "react";
 import { PathsMap } from "./utils";
+type Border = {
+    width?: number;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+};
 type BaseShapeProps = {
     /**
      * Размер компонента
      */
-    size?: number;
+    size?: number | {
+        width: number;
+        height: number;
+    };
     /**
      * Цвет заливки
      * @default #f3f4f5
@@ -16,7 +24,7 @@ type BaseShapeProps = {
      * Видимость обводки
      * @default false
      */
-    border?: boolean;
+    border?: boolean | Border;
     /**
      * Фоновое изображение. Имеет приоритет над иконкой и заливкой
      */
@@ -53,6 +61,10 @@ type BaseShapeProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+    /**
+     * Текст
+     */
+    text?: ReactNode;
 };
 declare const BaseShape: React.ForwardRefExoticComponent<BaseShapeProps & React.RefAttributes<HTMLDivElement>>;
 export { BaseShapeProps, BaseShape };

package/icon-view/modern/components/base-shape/component.js

@@ -3,22 +3,23 @@ import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 import { getPath } from './utils.js';
 
-const styles = {"componentWrapper":"icon-view__componentWrapper_j6ogi","component":"icon-view__component_j6ogi","bg":"icon-view__bg_j6ogi","border":"icon-view__border_j6ogi","children":"icon-view__children_j6ogi","addons":"icon-view__addons_j6ogi","size_128":"icon-view__size_128_j6ogi","topAddons":"icon-view__topAddons_j6ogi","bottomAddons":"icon-view__bottomAddons_j6ogi","size_80":"icon-view__size_80_j6ogi","indicator":"icon-view__indicator_j6ogi","size_64":"icon-view__size_64_j6ogi","size_48":"icon-view__size_48_j6ogi","size_40":"icon-view__size_40_j6ogi","size_32":"icon-view__size_32_j6ogi","size_24":"icon-view__size_24_j6ogi","size_20":"icon-view__size_20_j6ogi"};
+const styles = {"componentWrapper":"icon-view__componentWrapper_j6ogi","component":"icon-view__component_j6ogi","bg":"icon-view__bg_j6ogi","border":"icon-view__border_j6ogi","text":"icon-view__text_j6ogi","children":"icon-view__children_j6ogi","addons":"icon-view__addons_j6ogi","size_128":"icon-view__size_128_j6ogi","topAddons":"icon-view__topAddons_j6ogi","bottomAddons":"icon-view__bottomAddons_j6ogi","size_80":"icon-view__size_80_j6ogi","indicator":"icon-view__indicator_j6ogi","size_64":"icon-view__size_64_j6ogi","size_48":"icon-view__size_48_j6ogi","size_40":"icon-view__size_40_j6ogi","size_32":"icon-view__size_32_j6ogi","size_24":"icon-view__size_24_j6ogi","size_20":"icon-view__size_20_j6ogi"};
 require('./index.css');
 
-const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, }, ref) => {
+const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imageUrl, backgroundIcon: Icon, className, text, children, topAddons, bottomAddons, indicator, pathsMap, dataTestId, }, ref) => {
+    const [width, height] = typeof size === 'object' ? [size.width, size.height] : [size, size];
     const imagePatternId = useId();
-    const svgPatternId = Icon && `svg_${size}`;
-    const hasTopAddons = Boolean(topAddons) && size > 32;
-    const hasBottomAddons = Boolean(bottomAddons) && size > 32;
-    const hasIndicator = Boolean(indicator) && size < 128;
-    return (React.createElement("div", { className: cn(styles.componentWrapper, styles[`size_${size}`], className), ref: ref, "data-test-id": dataTestId },
+    const svgPatternId = useId();
+    const hasTopAddons = Boolean(topAddons) && width > 32;
+    const hasBottomAddons = Boolean(bottomAddons) && width > 32;
+    const hasIndicator = Boolean(indicator) && width < 128;
+    return (React.createElement("div", { className: cn(styles.componentWrapper, styles[`size_${Math.max(width, height)}`], className), ref: ref, "data-test-id": dataTestId },
         React.createElement("div", { className: styles.component },
-            React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, xmlns: 'http://www.w3.org/2000/svg', focusable: false },
+            React.createElement("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: 'http://www.w3.org/2000/svg', focusable: false },
                 React.createElement("path", { className: styles.bg, style: {
                         fill: backgroundColor,
                     }, d: getPath({
-                        size,
+                        size: Math.max(width, height),
                         hasTopAddons,
                         hasBottomAddons,
                         hasIndicator,
@@ -31,33 +32,39 @@ const BaseShape = forwardRef(({ size = 64, border = false, backgroundColor, imag
                     React.createElement("path", { style: {
                             fill: `url(#${imagePatternId})`,
                         }, d: getPath({
-                            size,
+                            size: Math.max(width, height),
                             hasTopAddons,
                             hasBottomAddons,
                             hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                Icon && !imageUrl && (React.createElement(Fragment, null,
+                Icon && (React.createElement(Fragment, null,
                     React.createElement("defs", null,
                         React.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
-                            React.createElement(Icon, { width: size, height: size }))),
+                            React.createElement(Icon, { width: width, height: height }))),
                     React.createElement("path", { style: {
                             fill: `url(#${svgPatternId})`,
                         }, d: getPath({
-                            size,
+                            size: Math.max(width, height),
                             hasTopAddons,
                             hasBottomAddons,
                             hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                border && (React.createElement("path", { className: styles.border, d: getPath({
-                        size,
+                border && (React.createElement("path", { className: styles.border, style: typeof border === 'object'
+                        ? {
+                            stroke: border.color,
+                            strokeWidth: border.width,
+                        }
+                        : undefined, d: getPath({
+                        size: Math.max(width, height),
                         hasTopAddons,
                         hasBottomAddons,
                         hasIndicator,
                         pathsMap: pathsMap.border,
                     }) }))),
-            !imageUrl && !Icon && React.createElement("div", { className: styles.children }, children)),
+            text && React.createElement("div", { className: styles.text }, text),
+            children && React.createElement("div", { className: styles.children }, children)),
         hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React.createElement("div", { className: cn(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React.createElement("div", { className: cn(styles.addons, styles.indicator) }, indicator))));

package/icon-view/modern/components/base-shape/index.css

@@ -25,7 +25,10 @@
     display: inline-flex;
 } .icon-view__component_j6ogi {
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
+    overflow: hidden;
     color: var(--icon-view-color);
 } .icon-view__bg_j6ogi {
     fill: var(--icon-view-bg-color);
@@ -33,6 +36,17 @@
     stroke: var(--color-light-specialbg-component);
     stroke-width: 1px;
     fill: transparent;
+} .icon-view__text_j6ogi {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    text-align: center;
 } .icon-view__children_j6ogi {
     display: flex;
     justify-content: center;
@@ -51,6 +65,9 @@
     flex-shrink: 0;
     position: absolute;
     line-height: 0;
+} .icon-view__size_128_j6ogi {
+    width: 128px;
+    height: 128px
 } .icon-view__size_128_j6ogi .icon-view__children_j6ogi {
         width: 64px;
         height: 64px;
@@ -63,7 +80,10 @@
     } .icon-view__size_128_j6ogi .icon-view__bottomAddons_j6ogi {
         bottom: -8px;
         right: -8px;
-    } .icon-view__size_80_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_80_j6ogi {
+    width: 80px;
+    height: 80px
+} .icon-view__size_80_j6ogi .icon-view__children_j6ogi {
         width: 48px;
         height: 48px;
     } .icon-view__size_80_j6ogi .icon-view__addons_j6ogi {
@@ -78,7 +98,10 @@
     } .icon-view__size_80_j6ogi .icon-view__indicator_j6ogi {
         top: -6px;
         right: -14px;
-    } .icon-view__size_64_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_64_j6ogi {
+    width: 64px;
+    height: 64px
+} .icon-view__size_64_j6ogi .icon-view__children_j6ogi {
         width: 32px;
         height: 32px;
     } .icon-view__size_64_j6ogi .icon-view__addons_j6ogi {
@@ -93,7 +116,10 @@
     } .icon-view__size_64_j6ogi .icon-view__indicator_j6ogi {
         top: -8px;
         right: -16px;
-    } .icon-view__size_48_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_48_j6ogi {
+    width: 48px;
+    height: 48px
+} .icon-view__size_48_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_48_j6ogi .icon-view__addons_j6ogi {
@@ -108,7 +134,10 @@
     } .icon-view__size_48_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_40_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_40_j6ogi {
+    width: 40px;
+    height: 40px
+} .icon-view__size_40_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_40_j6ogi .icon-view__addons_j6ogi {
@@ -123,19 +152,28 @@
     } .icon-view__size_40_j6ogi .icon-view__indicator_j6ogi {
         top: -7px;
         right: -13px;
-    } .icon-view__size_32_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_32_j6ogi {
+    width: 32px;
+    height: 32px
+} .icon-view__size_32_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_32_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_24_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_24_j6ogi {
+    width: 24px;
+    height: 24px
+} .icon-view__size_24_j6ogi .icon-view__children_j6ogi {
         width: 24px;
         height: 24px;
     } .icon-view__size_24_j6ogi .icon-view__indicator_j6ogi {
         top: -2px;
         right: -2px;
-    } .icon-view__size_20_j6ogi .icon-view__children_j6ogi {
+    } .icon-view__size_20_j6ogi {
+    width: 20px;
+    height: 20px
+} .icon-view__size_20_j6ogi .icon-view__children_j6ogi {
         width: 16px;
         height: 16px;
     } .icon-view__size_20_j6ogi .icon-view__indicator_j6ogi {

package/icon-view/modern/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./super-ellipse/index";
 export * from "./circle/index";
+export * from "./rectangle/index";
+export * from "./no-shape/index";
 export * from "./base-shape/index";

package/icon-view/modern/components/index.js

@@ -1,9 +1,13 @@
 export { SuperEllipse } from './super-ellipse/component.js';
 export { Circle } from './circle/component.js';
+export { Rectangle } from './rectangle/component.js';
+export { NoShape } from './no-shape/component.js';
 export { BaseShape } from './base-shape/component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
 import './super-ellipse/paths.js';
-import './circle/paths.js';
 import './base-shape/utils.js';
+import './circle/paths.js';
+import './rectangle/paths.js';
+import './no-shape/paths.js';

package/icon-view/modern/components/no-shape/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type NoShapeProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator' | 'border'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const NoShape: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "border" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { NoShapeProps, NoShape };

package/icon-view/modern/components/no-shape/component.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+const NoShape = forwardRef((props, ref) => (React.createElement(BaseShape, { ...props, pathsMap: pathsMap, ref: ref })));
+
+export { NoShape };

package/icon-view/modern/components/no-shape/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/modern/components/no-shape/index.js

@@ -0,0 +1,7 @@
+export { NoShape } from './component.js';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';

package/icon-view/modern/components/no-shape/paths.d.ts

@@ -0,0 +1,81 @@
+declare const shapePaths: {
+    20: {
+        none: string;
+    };
+    24: {
+        none: string;
+    };
+    32: {
+        none: string;
+    };
+    40: {
+        none: string;
+    };
+    48: {
+        none: string;
+    };
+    64: {
+        none: string;
+    };
+    80: {
+        none: string;
+    };
+    128: {
+        none: string;
+    };
+};
+declare const pathsMap: {
+    shape: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+    border: {
+        20: {
+            none: string;
+        };
+        24: {
+            none: string;
+        };
+        32: {
+            none: string;
+        };
+        40: {
+            none: string;
+        };
+        48: {
+            none: string;
+        };
+        64: {
+            none: string;
+        };
+        80: {
+            none: string;
+        };
+        128: {
+            none: string;
+        };
+    };
+};
+export { shapePaths, pathsMap };

package/icon-view/modern/components/no-shape/paths.js

@@ -0,0 +1,32 @@
+const shapePaths = {
+    20: {
+        none: 'M0 0 H20 V20 H0 Z',
+    },
+    24: {
+        none: 'M0 0 H24 V24 H0 Z',
+    },
+    32: {
+        none: 'M0 0 H32 V32 H0 Z',
+    },
+    40: {
+        none: 'M0 0 H40 V40 H0 Z',
+    },
+    48: {
+        none: 'M0 0 H48 V48 H0 Z',
+    },
+    64: {
+        none: 'M0 0 H64 V64 H0 Z',
+    },
+    80: {
+        none: 'M0 0 H80 V80 H0 Z',
+    },
+    128: {
+        none: 'M0 0 H128 V128 H0 Z',
+    },
+};
+const pathsMap = {
+    shape: shapePaths,
+    border: shapePaths,
+};
+
+export { pathsMap, shapePaths };

package/icon-view/modern/components/rectangle/component.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BaseShapeProps } from "../base-shape/index";
+type RectangleProps = Omit<BaseShapeProps, 'pathsMap' | 'size' | 'topAddons' | 'bottomAddons' | 'indicator'> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 20 | 24 | 32 | 40 | 48 | 64 | 80 | 128;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+};
+declare const Rectangle: React.ForwardRefExoticComponent<Omit<BaseShapeProps, "size" | "pathsMap" | "topAddons" | "bottomAddons" | "indicator"> & {
+    /**
+     * Размер компонента
+     * @default 64
+     */
+    size?: 64 | 32 | 128 | 20 | 24 | 40 | 48 | 80 | undefined;
+    /**
+     * Дочерний компонент
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { RectangleProps, Rectangle };

package/icon-view/modern/components/rectangle/component.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { BaseShape } from '../base-shape/component.js';
+import { pathsMap } from './paths.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../base-shape/utils.js';
+
+const heights = {
+    20: 14,
+    24: 16,
+    32: 22,
+    40: 28,
+    48: 34,
+    64: 46,
+    80: 58,
+    128: 94,
+};
+const Rectangle = forwardRef(({ size = 64, ...props }, ref) => (React.createElement(BaseShape, { ...props, size: { width: size, height: heights[size] }, pathsMap: pathsMap, ref: ref })));
+
+export { Rectangle };

package/icon-view/modern/components/rectangle/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/icon-view/modern/components/rectangle/index.js

@@ -0,0 +1,7 @@
+export { Rectangle } from './component.js';
+import 'react';
+import '../base-shape/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import './paths.js';
+import '../base-shape/utils.js';