@alfalab/core-components 41.7.0-beta.3 → 41.7.0-beta.4

package/hatching-progress-bar/index.css

@@ -255,10 +255,6 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
-    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
-    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
-    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
-    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -411,10 +407,6 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
-    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
-    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
-    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
-    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/hatching-progress-bar/modern/index.css

@@ -255,10 +255,6 @@
     --color-dark-bg-secondary-inverted-tint-7: rgb(244, 245, 246);
     --color-dark-bg-secondary-inverted-tint-15: rgb(245, 246, 246);
     --color-dark-bg-tertiary-tint-7: rgb(59, 59, 61);
-    --color-dark-border-key-alpha-7: rgba(255, 255, 255, 0.07);
-    --color-dark-border-key-alpha-15: rgba(255, 255, 255, 0.15);
-    --color-dark-border-key-inverted-alpha-7: rgba(0, 0, 0, 0.07);
-    --color-dark-border-key-inverted-alpha-15: rgba(0, 0, 0, 0.15);
     --color-dark-border-underline-alpha-30: rgba(70, 70, 73, 0.3);
     --color-dark-border-underline-inverted-alpha-30: rgba(197, 197, 199, 0.3);
     --color-dark-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);
@@ -411,10 +407,6 @@
     --color-light-bg-secondary-inverted-shade-7: rgb(30, 30, 32);
     --color-light-bg-secondary-inverted-shade-15: rgb(27, 27, 29);
     --color-light-bg-tertiary-shade-7: rgb(217, 217, 219);
-    --color-light-border-key-alpha-7: rgba(0, 0, 0, 0.07);
-    --color-light-border-key-alpha-15: rgba(0, 0, 0, 0.15);
-    --color-light-border-key-inverted-alpha-7: rgba(255, 255, 255, 0.07);
-    --color-light-border-key-inverted-alpha-15: rgba(255, 255, 255, 0.15);
     --color-light-border-underline-alpha-30: rgba(197, 197, 199, 0.3);
     --color-light-border-underline-inverted-alpha-30: rgba(70, 70, 73, 0.3);
     --color-light-graphic-accent-alpha-30: rgba(239, 49, 36, 0.3);

package/icon-view/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/components/base-shape/component.js

@@ -10,23 +10,24 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var 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"};
+var 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');
 
 var BaseShape = React.forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId;
+    var _b = _a.size, size = _b === void 0 ? 64 : _b, _c = _a.border, border = _c === void 0 ? false : _c, backgroundColor = _a.backgroundColor, imageUrl = _a.imageUrl, Icon = _a.backgroundIcon, className = _a.className, text = _a.text, children = _a.children, topAddons = _a.topAddons, bottomAddons = _a.bottomAddons, indicator = _a.indicator, pathsMap = _a.pathsMap, dataTestId = _a.dataTestId;
+    var _d = typeof size === 'object' ? [size.width, size.height] : [size, size], width = _d[0], height = _d[1];
     var imagePatternId = hooks.useId();
-    var svgPatternId = Icon && "svg_".concat(size);
-    var hasTopAddons = Boolean(topAddons) && size > 32;
-    var hasBottomAddons = Boolean(bottomAddons) && size > 32;
-    var hasIndicator = Boolean(indicator) && size < 128;
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.componentWrapper, styles["size_".concat(size)], className), ref: ref, "data-test-id": dataTestId },
+    var svgPatternId = hooks.useId();
+    var hasTopAddons = Boolean(topAddons) && width > 32;
+    var hasBottomAddons = Boolean(bottomAddons) && width > 32;
+    var hasIndicator = Boolean(indicator) && width < 128;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.componentWrapper, styles["size_".concat(Math.max(width, height))], className), ref: ref, "data-test-id": dataTestId },
         React__default.default.createElement("div", { className: styles.component },
-            React__default.default.createElement("svg", { width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
+            React__default.default.createElement("svg", { width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: 'http://www.w3.org/2000/svg', focusable: false },
                 React__default.default.createElement("path", { className: styles.bg, style: {
                         fill: backgroundColor,
                     }, d: components_baseShape_utils.getPath({
-                        size: size,
+                        size: Math.max(width, height),
                         hasTopAddons: hasTopAddons,
                         hasBottomAddons: hasBottomAddons,
                         hasIndicator: hasIndicator,
@@ -39,33 +40,39 @@ var BaseShape = React.forwardRef(function (_a, ref) {
                     React__default.default.createElement("path", { style: {
                             fill: "url(#".concat(imagePatternId, ")"),
                         }, d: components_baseShape_utils.getPath({
-                            size: size,
+                            size: Math.max(width, height),
                             hasTopAddons: hasTopAddons,
                             hasBottomAddons: hasBottomAddons,
                             hasIndicator: hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                Icon && !imageUrl && (React__default.default.createElement(React.Fragment, null,
+                Icon && (React__default.default.createElement(React.Fragment, null,
                     React__default.default.createElement("defs", null,
                         React__default.default.createElement("pattern", { id: svgPatternId, width: '100%', height: '100%' },
-                            React__default.default.createElement(Icon, { width: size, height: size }))),
+                            React__default.default.createElement(Icon, { width: width, height: height }))),
                     React__default.default.createElement("path", { style: {
                             fill: "url(#".concat(svgPatternId, ")"),
                         }, d: components_baseShape_utils.getPath({
-                            size: size,
+                            size: Math.max(width, height),
                             hasTopAddons: hasTopAddons,
                             hasBottomAddons: hasBottomAddons,
                             hasIndicator: hasIndicator,
                             pathsMap: pathsMap.shape,
                         }) }))),
-                border && (React__default.default.createElement("path", { className: styles.border, d: components_baseShape_utils.getPath({
-                        size: size,
+                border && (React__default.default.createElement("path", { className: styles.border, style: typeof border === 'object'
+                        ? {
+                            stroke: border.color,
+                            strokeWidth: border.width,
+                        }
+                        : undefined, d: components_baseShape_utils.getPath({
+                        size: Math.max(width, height),
                         hasTopAddons: hasTopAddons,
                         hasBottomAddons: hasBottomAddons,
                         hasIndicator: hasIndicator,
                         pathsMap: pathsMap.border,
                     }) }))),
-            !imageUrl && !Icon && React__default.default.createElement("div", { className: styles.children }, children)),
+            text && React__default.default.createElement("div", { className: styles.text }, text),
+            children && React__default.default.createElement("div", { className: styles.children }, children)),
         hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.topAddons) }, topAddons)),
         hasBottomAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.bottomAddons) }, bottomAddons)),
         hasIndicator && !hasTopAddons && (React__default.default.createElement("div", { className: cn__default.default(styles.addons, styles.indicator) }, indicator))));

package/icon-view/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/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/components/index.js

@@ -2,11 +2,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_superEllipse_component = require('./super-ellipse/component.js');
 var components_circle_component = require('./circle/component.js');
+var components_rectangle_component = require('./rectangle/component.js');
+var components_noShape_component = require('./no-shape/component.js');
 var components_baseShape_component = require('./base-shape/component.js');
 require('tslib');
 require('react');
 require('./super-ellipse/paths.js');
 require('./circle/paths.js');
+require('./rectangle/paths.js');
+require('./no-shape/paths.js');
 require('classnames');
 require('@alfalab/hooks');
 require('./base-shape/utils.js');
@@ -15,4 +19,6 @@ require('./base-shape/utils.js');
 
 exports.SuperEllipse = components_superEllipse_component.SuperEllipse;
 exports.Circle = components_circle_component.Circle;
+exports.Rectangle = components_rectangle_component.Rectangle;
+exports.NoShape = components_noShape_component.NoShape;
 exports.BaseShape = components_baseShape_component.BaseShape;

package/icon-view/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/components/no-shape/component.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseShape_component = require('../base-shape/component.js');
+var components_noShape_paths = require('./paths.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../base-shape/utils.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var NoShape = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseShape_component.BaseShape, tslib.__assign({}, props, { pathsMap: components_noShape_paths.pathsMap, ref: ref }))); });
+
+exports.NoShape = NoShape;

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

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

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

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_noShape_component = require('./component.js');
+require('tslib');
+require('react');
+require('../base-shape/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../base-shape/utils.js');
+require('./paths.js');
+
+
+
+exports.NoShape = components_noShape_component.NoShape;

package/icon-view/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/components/no-shape/paths.js

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var 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',
+    },
+};
+var pathsMap = {
+    shape: shapePaths,
+    border: shapePaths,
+};
+
+exports.pathsMap = pathsMap;
+exports.shapePaths = shapePaths;

package/icon-view/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/components/rectangle/component.js

@@ -0,0 +1,30 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseShape_component = require('../base-shape/component.js');
+var components_rectangle_paths = require('./paths.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../base-shape/utils.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var heights = {
+    20: 14,
+    24: 16,
+    32: 22,
+    40: 28,
+    48: 34,
+    64: 46,
+    80: 58,
+    128: 94,
+};
+var Rectangle = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 64 : _b, props = tslib.__rest(_a, ["size"]);
+    return (React__default.default.createElement(components_baseShape_component.BaseShape, tslib.__assign({}, props, { size: { width: size, height: heights[size] }, pathsMap: components_rectangle_paths.pathsMap, ref: ref })));
+});
+
+exports.Rectangle = Rectangle;

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

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

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

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_rectangle_component = require('./component.js');
+require('tslib');
+require('react');
+require('../base-shape/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../base-shape/utils.js');
+require('./paths.js');
+
+
+
+exports.Rectangle = components_rectangle_component.Rectangle;