@salutejs/plasma-new-hope 0.336.0-canary.2239.17794430722.0 → 0.336.0

package/styled-components/cjs/examples/components/Avatar/Avatar.config.js

@@ -13,7 +13,8 @@ var _Avatartokens = require("../../../components/Avatar/Avatar.tokens");
 var config = {
     defaults: {
         view: 'default',
-        size: 'xxl'
+        size: 'xxl',
+        shape: 'circled'
     },
     variations: {
         view: {
@@ -34,6 +35,7 @@ var config = {
                 ":600;",
                 ":2rem;",
                 ":0.75rem;",
+                ":1.125rem;",
                 ":0.5rem;",
                 ":1.75rem;",
                 ":0 0.6875rem;",
@@ -58,7 +60,7 @@ var config = {
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
                 ":var(--plasma-typo-body-s-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             l: (0, _styledcomponents.css)([
                 "",
                 ":3rem;",
@@ -66,6 +68,7 @@ var config = {
                 ":600;",
                 ":1.25rem;",
                 ":0.5rem;",
+                ":0.75rem;",
                 ":2;",
                 ":0.375rem;",
                 ":1.25rem;",
@@ -91,7 +94,7 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             m: (0, _styledcomponents.css)([
                 "",
                 ":2.25rem;",
@@ -99,6 +102,7 @@ var config = {
                 ":600;",
                 ":0.875rem;",
                 ":0.5rem;",
+                ":0.625rem;",
                 ":2;",
                 ":0.25rem;",
                 ":1rem;",
@@ -124,7 +128,7 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.badgeBorderRadius, _Avatartokens.tokens.badgeHeight, _Avatartokens.tokens.badgePadding, _Avatartokens.tokens.badgePaddingIconOnly, _Avatartokens.tokens.badgeFontFamily, _Avatartokens.tokens.badgeFontSize, _Avatartokens.tokens.badgeFontStyle, _Avatartokens.tokens.badgeFontWeight, _Avatartokens.tokens.badgeLetterSpacing, _Avatartokens.tokens.badgeLineHeight, _Avatartokens.tokens.badgeLeftContentMarginLeft, _Avatartokens.tokens.badgeLeftContentMarginRight, _Avatartokens.tokens.badgeRightContentMarginLeft, _Avatartokens.tokens.badgeRightContentMarginRight, _Avatartokens.tokens.badgePilledBorderRadius, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             s: (0, _styledcomponents.css)([
                 "",
                 ":1.5rem;",
@@ -132,6 +136,7 @@ var config = {
                 ":600;",
                 ":0.5rem;",
                 ":0.375rem;",
+                ":0.5rem;",
                 ":1;",
                 ":1rem;",
                 ":0.75rem;",
@@ -142,15 +147,16 @@ var config = {
                 ":var(--plasma-typo-body-xxs-font-weight);",
                 ":var(--plasma-typo-body-xxs-letter-spacing);",
                 ":var(--plasma-typo-body-xxs-line-height);"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.extraPlacementFactor, _Avatartokens.tokens.counterBorderRadius, _Avatartokens.tokens.counterHeight, _Avatartokens.tokens.counterPadding, _Avatartokens.tokens.counterFontFamily, _Avatartokens.tokens.counterFontSize, _Avatartokens.tokens.counterFontStyle, _Avatartokens.tokens.counterFontWeight, _Avatartokens.tokens.counterLetterSpacing, _Avatartokens.tokens.counterLineHeight),
             fit: (0, _styledcomponents.css)([
                 "",
                 ":100%;",
                 ":0;",
                 ":0;",
                 ":0;",
-                ":0;"
-            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize)
+                ":0;",
+                ":50%;"
+            ], _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.fontSize, _Avatartokens.tokens.fontWeight, _Avatartokens.tokens.lineHeight, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.borderRadius)
         },
         focused: {
             true: (0, _styledcomponents.css)([
@@ -160,6 +166,27 @@ var config = {
                 ":var(--surface-accent);"
             ], _Avatartokens.tokens.outlineSize, _Avatartokens.tokens.outlineOffset, _Avatartokens.tokens.outlineColor)
         },
+        shape: {
+            circled: (0, _styledcomponents.css)([
+                "",
+                ":50%;",
+                ":calc(0.867 * var(",
+                ") - var(",
+                ") / 2);",
+                ":calc(0.867 * var(",
+                ") - var(",
+                ") / 2);"
+            ], _Avatartokens.tokens.borderRadius, _Avatartokens.tokens.statusLeft, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.statusTop, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize),
+            rounded: (0, _styledcomponents.css)([
+                "",
+                ":calc(var(",
+                ") - var(",
+                "));",
+                ":calc(var(",
+                ") - var(",
+                "));"
+            ], _Avatartokens.tokens.statusLeft, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize, _Avatartokens.tokens.statusTop, _Avatartokens.tokens.avatarSize, _Avatartokens.tokens.statusIconSize)
+        },
         badgeView: {
             default: (0, _styledcomponents.css)([
                 "",

package/styled-components/cjs/examples/components/Skeleton/LineSkeleton.config.js

@@ -12,9 +12,20 @@ var _styledcomponents = require("styled-components");
 var _Skeleton = require("../../../components/Skeleton");
 var config = {
     defaults: {
-        size: 'bodyM'
+        size: 'bodyM',
+        view: 'default'
     },
     variations: {
+        view: {
+            default: (0, _styledcomponents.css)([
+                "",
+                ":var(--plasma-colors-skeleton-gradient,var(--surface-skeleton-gradient));"
+            ], _Skeleton.skeletonTokens.gradientColor),
+            lighter: (0, _styledcomponents.css)([
+                "",
+                ":var(--plasma-colors-skeleton-gradient-lighter,var(--surface-skeleton-deep-gradient));"
+            ], _Skeleton.skeletonTokens.gradientColor)
+        },
         size: {
             bodyL: (0, _styledcomponents.css)([
                 "",

package/styled-components/es/components/Attach/Attach.js

@@ -99,24 +99,25 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { forwardRef, useEffect, useRef, useState } from "react";
-import { useForkRef, useIsomorphicLayoutEffect } from "@salutejs/plasma-core";
+import React, { forwardRef, useRef, useState } from "react";
+import { useForkRef } from "@salutejs/plasma-core";
 import { cx } from "../../utils";
 import { IconCloseCircleOutline } from "../_Icon";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as helperTextViewCSS } from "./variations/_helperTextView/base";
-import { base, StyledHelperText, StyledHiddenInput, StyledHiddenInputHelper, StyledAttachButtonWrapper } from "./Attach.styles";
+import { base, StyledHelperText, StyledHiddenInput, StyledAttachButtonWrapper, FilenameWrapper, TruncatedFilenamePart, FilenameExtensionPart } from "./Attach.styles";
 import { StyledCell } from "./ui/Cell/Cell";
-import { extractExtension, getFileicon, addSeparator, separator } from "./utils";
+import { extractExtension, getFileIcon } from "./utils";
 import { classes } from "./Attach.tokens";
 import { AttachButton } from "./components/AttachButton";
 import { StyledIconButtonCancel } from "./ui/IconButton/IconButton.styles";
 export var attachRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, outerRef) {
-        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
+        var _props_flow = props.flow, flow = _props_flow === void 0 ? 'auto' : _props_flow, _props_buttonType = props.buttonType, buttonType = _props_buttonType === void 0 ? 'button' : _props_buttonType, _props_hideButtonOnAttach = props.hideButtonOnAttach, hideButtonOnAttach = _props_hideButtonOnAttach === void 0 ? false : _props_hideButtonOnAttach, _props_hasAttachment = props.hasAttachment, hasAttachment = _props_hasAttachment === void 0 ? true : _props_hasAttachment, acceptedFileFormats = props.acceptedFileFormats, helperText = props.helperText, size = props.size, view = props.view, helperTextView = props.helperTextView, className = props.className, style = props.style, isLoading = props.isLoading, disabled = props.disabled, id = props.id, name = props.name, customIcon = props.customIcon, onClick = props.onClick, onChange = props.onChange, onClear = props.onClear, rest = _object_without_properties(props, [
             "flow",
             "buttonType",
+            "hideButtonOnAttach",
             "hasAttachment",
             "acceptedFileFormats",
             "helperText",
@@ -130,66 +131,31 @@ export var attachRoot = function(Root) {
             "id",
             "name",
             "customIcon",
+            "onClick",
             "onChange",
             "onClear"
         ]);
         var innerRef = useRef(null);
         var ref = useForkRef(outerRef, innerRef);
         var inputRef = useRef(null);
-        var inputHelperRef = useRef(null);
         var cellRef = useRef(null);
         var buttonRef = useRef(null);
-        var emptyTextCellWidth = useRef(null);
         var _useState = _sliced_to_array(useState(''), 2), filename = _useState[0], setFilename = _useState[1];
-        var _useState1 = _sliced_to_array(useState(''), 2), truncatedFilename = _useState1[0], setTruncatedFilename = _useState1[1];
         var horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;
         var verticalClass = flow === 'vertical' ? classes.vertical : undefined;
         var withHelperTextClass = helperText ? classes.withHelperText : undefined;
         var autoClass = flow === 'auto' ? classes.auto : undefined;
-        var cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;
         var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
         var extension = extractExtension(filename);
-        var cellContentLeft = customIcon || getFileicon(extension, size);
-        useEffect(function() {
-            var _cellRef_current;
-            emptyTextCellWidth.current = ((_cellRef_current = cellRef.current) === null || _cellRef_current === void 0 ? void 0 : _cellRef_current.offsetWidth) || 0;
-        }, []);
-        useIsomorphicLayoutEffect(function() {
-            if (!cellRef.current || !cellRef.current.parentElement || !inputHelperRef.current || !inputHelperRef.current.textContent || !emptyTextCellWidth.current || !buttonRef.current) {
-                return;
-            }
-            var _inputHelperRef_current = inputHelperRef.current, textWidth = _inputHelperRef_current.offsetWidth;
-            var _buttonRef_current = buttonRef.current, buttonWidth = _buttonRef_current.offsetWidth;
-            var _cellRef_current_parentElement_getBoundingClientRect = cellRef.current.parentElement.getBoundingClientRect(), parentWidth = _cellRef_current_parentElement_getBoundingClientRect.width, parentLeft = _cellRef_current_parentElement_getBoundingClientRect.left;
-            var _cellRef_current_getBoundingClientRect = cellRef.current.getBoundingClientRect(), cellLeft = _cellRef_current_getBoundingClientRect.left;
-            var leftDiff = cellLeft - parentLeft;
-            var currentTextWidth = textWidth;
-            if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth || currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                setTruncatedFilename(filename);
-                return;
-            }
-            var currFilename = addSeparator(filename, separator);
-            for(var i = currFilename.indexOf(separator) - 1; i > 0; i -= 1){
-                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {
-                    break;
-                }
-                var left = currFilename.slice(0, i);
-                var right = currFilename.slice(i + 1);
-                var newFilename = "".concat(left).concat(right);
-                inputHelperRef.current.textContent = newFilename;
-                currentTextWidth = inputHelperRef.current.offsetWidth;
-                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {
-                    break;
-                }
-                currFilename = newFilename;
-            }
-            inputHelperRef.current.textContent = filename;
-            setTruncatedFilename(currFilename);
-        });
-        var handleClick = function() {
+        var filenameWithoutExtension = filename.slice(0, -1 - ((extension === null || extension === void 0 ? void 0 : extension.length) || 0));
+        var cellContentLeft = customIcon || getFileIcon(extension, size);
+        var handleClick = function(e) {
             if (!inputRef.current) {
                 return;
             }
+            if (onClick) {
+                onClick(e);
+            }
             inputRef.current.click();
         };
         var handleChange = function(e) {
@@ -210,7 +176,6 @@ export var attachRoot = function(Root) {
             }
             inputRef.current.value = '';
             setFilename('');
-            setTruncatedFilename('');
         };
         return /*#__PURE__*/ React.createElement(Root, {
             className: cx(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
@@ -226,20 +191,16 @@ export var attachRoot = function(Root) {
             id: id,
             name: name,
             onChange: handleChange
-        }), /*#__PURE__*/ React.createElement(StyledHiddenInputHelper, {
-            ref: inputHelperRef
-        }, filename), /*#__PURE__*/ React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/ React.createElement(AttachButton, _object_spread({
+        }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/ React.createElement(StyledAttachButtonWrapper, null, /*#__PURE__*/ React.createElement(AttachButton, _object_spread({
             ref: buttonRef,
             buttonType: buttonType,
             isLoading: isLoading,
             disabled: disabled,
             onClick: handleClick
-        }, rest)), helperText && /*#__PURE__*/ React.createElement(StyledHelperText, null, helperText)), hasAttachment && /*#__PURE__*/ React.createElement(StyledCell, {
+        }, rest)), helperText && /*#__PURE__*/ React.createElement(StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/ React.createElement(StyledCell, {
             stretching: "fixed",
-            className: cellHiddenClass,
             ref: cellRef,
             size: size,
-            title: truncatedFilename,
             contentLeft: cellContentLeft,
             contentRight: /*#__PURE__*/ React.createElement(StyledIconButtonCancel, {
                 onClick: handleClear
@@ -247,7 +208,7 @@ export var attachRoot = function(Root) {
                 size: "xs",
                 color: "inherit"
             }))
-        }));
+        }, /*#__PURE__*/ React.createElement(FilenameWrapper, null, /*#__PURE__*/ React.createElement(TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/ React.createElement(FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
     });
 };
 export var attachConfig = {

package/styled-components/es/components/Attach/Attach.styles.js

@@ -1,29 +1,43 @@
 import styled from "styled-components";
 import { css } from "styled-components";
+import { applyEllipsis } from "../../mixins";
 export var base = css([
     "position:relative;display:flex;"
 ]);
 export var StyledHiddenInput = styled.input.withConfig({
     displayName: "Attach.styles__StyledHiddenInput",
-    componentId: "sc-7ce14282-0"
+    componentId: "sc-ebfa8a10-0"
 })([
     "display:none;"
 ]);
-export var StyledHiddenInputHelper = styled.div.withConfig({
-    displayName: "Attach.styles__StyledHiddenInputHelper",
-    componentId: "sc-7ce14282-1"
-})([
-    "position:absolute;visibility:hidden;white-space:nowrap;"
-]);
 export var StyledAttachButtonWrapper = styled.div.withConfig({
     displayName: "Attach.styles__StyledAttachButtonWrapper",
-    componentId: "sc-7ce14282-2"
+    componentId: "sc-ebfa8a10-1"
 })([
     "position:relative;"
 ]);
 export var StyledHelperText = styled.div.withConfig({
     displayName: "Attach.styles__StyledHelperText",
-    componentId: "sc-7ce14282-3"
+    componentId: "sc-ebfa8a10-2"
 })([
     "position:absolute;margin-top:0.25rem;"
 ]);
+export var FilenameWrapper = styled.div.withConfig({
+    displayName: "Attach.styles__FilenameWrapper",
+    componentId: "sc-ebfa8a10-3"
+})([
+    "display:inline-grid;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;"
+]);
+export var TruncatedFilenamePart = styled.span.withConfig({
+    displayName: "Attach.styles__TruncatedFilenamePart",
+    componentId: "sc-ebfa8a10-4"
+})([
+    "",
+    ""
+], applyEllipsis());
+export var FilenameExtensionPart = styled.span.withConfig({
+    displayName: "Attach.styles__FilenameExtensionPart",
+    componentId: "sc-ebfa8a10-5"
+})([
+    ""
+]);

package/styled-components/es/components/Attach/Attach.tokens.js

@@ -9,6 +9,7 @@ export var tokens = {
     horizontalGap: '--plasma-attach-horizontal-gap',
     verticalGap: '--plasma-attach-vertical-gap',
     verticalGapWithHelperText: '--plasma-attach-vertical-gap-with-helper-text',
+    filenameWrapperHeight: '--plasma-attach-filename-wrapper-height',
     helperTextColor: '--plasma-attach-helper-text-color',
     // Токены для Button
     buttonColor: '--plasma-attach-button-color',

package/styled-components/es/components/Attach/utils/getFileicon.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { IconBlankCsvOutline, IconBlankDocOutline, IconBlankOutline, IconBlankPdfOutline, IconBlankTxtOutline, IconBlankXlsOutline } from "../../_Icon";
-export var getFileicon = function(extension, size) {
+export var getFileIcon = function(extension, size) {
     var iconSize = size === 'xs' ? 'xs' : 's';
     switch(extension){
         case 'pdf':

package/styled-components/es/components/Attach/utils/index.js

@@ -1,4 +1,2 @@
 export { extractExtension } from "./extractExtension";
-export { getFileicon } from "./getFileicon";
-export { addSeparator } from "./addSeparator";
-export var separator = '...';
+export { getFileIcon } from "./getFileicon";

package/styled-components/es/components/Attach/variations/_size/base.js

@@ -1,6 +1,6 @@
 import { css } from "styled-components";
 import { tokens, classes } from "../../Attach.tokens";
-import { StyledHelperText, StyledHiddenInputHelper } from "../../Attach.styles";
+import { FilenameWrapper, StyledHelperText } from "../../Attach.styles";
 export var base = css([
     "&.",
     "{column-gap:var(",
@@ -18,6 +18,7 @@ export var base = css([
     ");font-weight:var(",
     ");letter-spacing:var(",
     ");line-height:var(",
+    ");height:var(",
     ");}",
     "{font-family:var(--plasma-typo-body-xs-font-family);font-size:var(--plasma-typo-body-xs-font-size);font-style:var(--plasma-typo-body-xs-font-style);font-weight:var(--plasma-typo-body-xs-font-weight);letter-spacing:var(--plasma-typo-body-xs-letter-spacing);line-height:var(--plasma-typo-body-xs-line-height);}}"
-], classes.horizontal, tokens.horizontalGap, classes.vertical, tokens.verticalGap, classes.auto, tokens.verticalGap, tokens.horizontalGap, classes.withHelperText, tokens.verticalGapWithHelperText, StyledHiddenInputHelper, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, StyledHelperText);
+], classes.horizontal, tokens.horizontalGap, classes.vertical, tokens.verticalGap, classes.auto, tokens.verticalGap, tokens.horizontalGap, classes.withHelperText, tokens.verticalGapWithHelperText, FilenameWrapper, tokens.cellTitleFontFamily, tokens.cellTitleFontSize, tokens.cellTitleFontStyle, tokens.cellTitleFontWeight, tokens.cellTitleLetterSpacing, tokens.cellTitleLineHeight, tokens.filenameWrapperHeight, StyledHelperText);

package/styled-components/es/components/Avatar/Avatar.js

@@ -84,8 +84,9 @@ import { cx } from "../../utils";
 import { indicatorConfig, indicatorTokens } from "../Indicator";
 import { classes, tokens } from "./Avatar.tokens";
 import { base, Wrapper, Image, StatusIcon, Text, ExtraContent, ExtraCounter, ExtraBadge } from "./Avatar.styles";
-import { base as viewCSS } from "./variations/_size/base";
+import { base as sizeCSS } from "./variations/_size/base";
 import { base as focusedCSS } from "./variations/_focused/base";
+import { base as shapeCSS } from "./variations/_shape/base";
 import { extraPlacementMap, getInitialsForName } from "./utils";
 var StatusLabelsDefault = {
     active: 'Активен',
@@ -117,7 +118,7 @@ var mergedConfig = mergeConfig(indicatorConfig);
 var Indicator = component(mergedConfig);
 var StyledIndicator = styled(Indicator).withConfig({
     displayName: "Avatar__StyledIndicator",
-    componentId: "sc-7036ad13-0"
+    componentId: "sc-76e2f30f-0"
 })([
     "",
     ":var(",
@@ -130,7 +131,7 @@ var StyledIndicator = styled(Indicator).withConfig({
 });
 export var avatarRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(props, ref) {
-        var avatarSize = props.size, name = props.name, url = props.url, customText = props.customText, status = props.status, className = props.className, _props_focused = props.focused, focused = _props_focused === void 0 ? true : _props_focused, isScalable = props.isScalable, _props_statusLabels = props.statusLabels, statusLabels = _props_statusLabels === void 0 ? StatusLabelsDefault : _props_statusLabels, hasExtra = props.hasExtra, extraPlacement = props.extraPlacement, type = props.type, counterView = props.counterView, count = props.count, maxCount = props.maxCount, badgeView = props.badgeView, text = props.text, customColor = props.customColor, customBackgroundColor = props.customBackgroundColor, contentLeft = props.contentLeft, contentRight = props.contentRight, pilled = props.pilled, rest = _object_without_properties(props, [
+        var avatarSize = props.size, name = props.name, url = props.url, customText = props.customText, status = props.status, className = props.className, _props_focused = props.focused, focused = _props_focused === void 0 ? true : _props_focused, isScalable = props.isScalable, shape = props.shape, _props_statusLabels = props.statusLabels, statusLabels = _props_statusLabels === void 0 ? StatusLabelsDefault : _props_statusLabels, hasExtra = props.hasExtra, extraPlacement = props.extraPlacement, type = props.type, counterView = props.counterView, count = props.count, maxCount = props.maxCount, badgeView = props.badgeView, text = props.text, customColor = props.customColor, customBackgroundColor = props.customBackgroundColor, contentLeft = props.contentLeft, contentRight = props.contentRight, pilled = props.pilled, rest = _object_without_properties(props, [
             "size",
             "name",
             "url",
@@ -139,6 +140,7 @@ export var avatarRoot = function(Root) {
             "className",
             "focused",
             "isScalable",
+            "shape",
             "statusLabels",
             "hasExtra",
             "extraPlacement",
@@ -171,6 +173,7 @@ export var avatarRoot = function(Root) {
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             size: avatarSize,
+            shape: shape,
             className: cx(classes.avatarItem, className),
             "aria-label": ariaLabel,
             focused: focused
@@ -211,13 +214,17 @@ export var avatarConfig = {
     base: base,
     variations: {
         size: {
-            css: viewCSS
+            css: sizeCSS
         },
         focused: {
             css: focusedCSS
+        },
+        shape: {
+            css: shapeCSS
         }
     },
     defaults: {
-        size: 'm'
+        size: 'm',
+        shape: 'circled'
     }
 };

package/styled-components/es/components/Avatar/Avatar.styles.js

@@ -13,9 +13,9 @@ export var base = css([
 ]);
 export var Wrapper = styled.div.withConfig({
     displayName: "Avatar.styles__Wrapper",
-    componentId: "sc-5ac342c-0"
+    componentId: "sc-86d30134-0"
 })([
-    "display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:50%;background:var(",
+    "display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(",
     ");overflow:hidden;&:hover{scale:",
     ";cursor:",
     ";}"
@@ -28,23 +28,19 @@ export var Wrapper = styled.div.withConfig({
 });
 export var StatusIcon = styled.div.withConfig({
     displayName: "Avatar.styles__StatusIcon",
-    componentId: "sc-5ac342c-1"
+    componentId: "sc-86d30134-1"
 })([
-    "position:absolute;top:calc(1.02 * 0.85 * var(",
-    ") - var(",
-    ") / 2);left:calc(1.02 * 0.85 * var(",
-    ") - var(",
-    ") / 2);"
-], tokens.avatarSize, tokens.statusIconSize, tokens.avatarSize, tokens.statusIconSize);
+    "position:absolute;"
+]);
 export var Image = styled.img.withConfig({
     displayName: "Avatar.styles__Image",
-    componentId: "sc-5ac342c-2"
+    componentId: "sc-86d30134-2"
 })([
-    "width:100%;height:100%;border-radius:50%;"
+    "width:100%;height:100%;"
 ]);
 export var Text = styled.span.withConfig({
     displayName: "Avatar.styles__Text",
-    componentId: "sc-5ac342c-3"
+    componentId: "sc-86d30134-3"
 })([
     "font-size:var(",
     ");font-family:var(",
@@ -56,7 +52,7 @@ export var Text = styled.span.withConfig({
 ], tokens.fontSize, tokens.fontFamily, tokens.fontWeight, tokens.lineHeight, tokens.color, tokens.color);
 export var ExtraContent = styled.div.withConfig({
     displayName: "Avatar.styles__ExtraContent",
-    componentId: "sc-5ac342c-4"
+    componentId: "sc-86d30134-4"
 })([
     "max-width:100%;display:flex;position:absolute;z-index:2;&.",
     "{top:calc(-0.063rem * var(",
@@ -74,7 +70,7 @@ export var ExtraContent = styled.div.withConfig({
 ], classes.extraPlacementTopLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementTopRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomRight, tokens.extraPlacementFactor, tokens.extraPlacementFactor, classes.extraPlacementBottomLeft, tokens.extraPlacementFactor, tokens.extraPlacementFactor);
 export var ExtraBadge = styled(Badge).withConfig({
     displayName: "Avatar.styles__ExtraBadge",
-    componentId: "sc-5ac342c-5"
+    componentId: "sc-86d30134-5"
 })([
     "",
     ":var(",
@@ -122,7 +118,7 @@ export var ExtraBadge = styled(Badge).withConfig({
 ], badgeTokens.background, tokens.badgeBackground, badgeTokens.color, tokens.badgeColor, badgeTokens.backgroundTransparent, tokens.badgeBackgroundTransparent, badgeTokens.colorTransparent, tokens.badgeColorTransparent, badgeTokens.colorClear, tokens.badgeColorClear, badgeTokens.backgroundClear, tokens.badgeBackgroundClear, badgeTokens.borderRadius, tokens.badgeBorderRadius, badgeTokens.pilledBorderRadius, tokens.badgePilledBorderRadius, badgeTokens.height, tokens.badgeHeight, badgeTokens.padding, tokens.badgePadding, badgeTokens.paddingIconOnly, tokens.badgePaddingIconOnly, badgeTokens.fontFamily, tokens.badgeFontFamily, badgeTokens.fontSize, tokens.badgeFontSize, badgeTokens.fontStyle, tokens.badgeFontStyle, badgeTokens.fontWeight, tokens.badgeFontWeight, badgeTokens.letterSpacing, tokens.badgeLetterSpacing, badgeTokens.lineHeight, tokens.badgeLineHeight, badgeTokens.leftContentMarginLeft, tokens.badgeLeftContentMarginLeft, badgeTokens.leftContentMarginRight, tokens.badgeLeftContentMarginRight, badgeTokens.rightContentMarginLeft, tokens.badgeRightContentMarginLeft, badgeTokens.rightContentMarginRight, tokens.badgeRightContentMarginRight);
 export var ExtraCounter = styled(Counter).withConfig({
     displayName: "Avatar.styles__ExtraCounter",
-    componentId: "sc-5ac342c-6"
+    componentId: "sc-86d30134-6"
 })([
     "",
     ":var(",

package/styled-components/es/components/Avatar/Avatar.tokens.js

@@ -21,6 +21,9 @@ export var tokens = {
     outlineOffset: '--plasma-avatar-outline-offset',
     scaleHover: '--plasma-avatar-scale-hover',
     extraPlacementFactor: '--plasma-avatar-extra-placement-factor',
+    borderRadius: '--plasma-avatar-border-radius',
+    statusLeft: '--plasma-avatar-status-left',
+    statusTop: '--plasma-avatar-status-top',
     // extra badge tokens
     badgeBackground: '--plasma-avatar-extra-badge-background',
     badgeColor: '--plasma-avatar-extra-badge-color',

package/styled-components/es/components/Avatar/variations/_shape/base.js

@@ -0,0 +1,13 @@
+import { css } from "styled-components";
+import { tokens } from "../../Avatar.tokens";
+import { Image, Wrapper, StatusIcon } from "../../Avatar.styles";
+export var base = css([
+    "",
+    "{border-radius:var(",
+    ");}",
+    "{border-radius:var(",
+    ");}",
+    "{top:var(",
+    ");left:var(",
+    ");}"
+], Image, tokens.borderRadius, Wrapper, tokens.borderRadius, StatusIcon, tokens.statusTop, tokens.statusLeft);

package/styled-components/es/components/Drawer/Drawer.js

@@ -54,8 +54,9 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import React, { forwardRef, useMemo } from "react";
+import cls from "classnames";
 import { useForkRef } from "@salutejs/plasma-core";
-import { cx, getSizeValueFromProp, safeUseId } from "../../utils";
+import { getSizeValueFromProp, safeUseId } from "../../utils";
 import { usePopupContext } from "../Popup";
 import { Overlay } from "../Overlay";
 import { DEFAULT_Z_INDEX } from "../Popup/utils";
@@ -70,7 +71,7 @@ import { useDrawer } from "./hooks";
 // issue #823
 export var drawerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, outerRef) {
-        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
+        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, animationInfo = _param.animationInfo, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
             "id",
             "zIndex",
             "popupInfo",
@@ -84,6 +85,7 @@ export var drawerRoot = function(Root) {
             "opened",
             "initialFocusRef",
             "focusAfterRef",
+            "animationInfo",
             "className",
             "customBackgroundColor",
             "customContentBackgroundColor",
@@ -133,10 +135,11 @@ export var drawerRoot = function(Root) {
                 onClose();
             }
         };
+        var _obj;
         return /*#__PURE__*/ React.createElement(StyledPopup, _object_spread({
             id: innerId,
             ref: asModal ? innerRef : outerRef,
-            className: cx(placementClass),
+            className: cls(placementClass, className, (_obj = {}, _define_property(_obj, classes.enterCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter), _define_property(_obj, classes.exitCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit), _obj)),
             opened: innerIsOpen,
             zIndex: zIndex,
             placement: placement,
@@ -146,6 +149,7 @@ export var drawerRoot = function(Root) {
             height: innerHeight,
             offset: offset,
             withAnimation: true,
+            drawerAnimationInfo: animationInfo,
             overlay: asModal && /*#__PURE__*/ React.createElement(Root, {
                 view: view
             }, /*#__PURE__*/ React.createElement(Overlay, {
@@ -158,6 +162,7 @@ export var drawerRoot = function(Root) {
                 onOverlayClick: onDrawerOverlayKeyDown
             }))
         }, rest), /*#__PURE__*/ React.createElement(Root, {
+            className: classes.panel,
             view: view,
             size: size,
             style: {
@@ -169,8 +174,7 @@ export var drawerRoot = function(Root) {
             width: innerWidth,
             height: innerHeight,
             customBackgroundColor: customBackgroundColor,
-            customContentBackgroundColor: customContentBackgroundColor,
-            className: className
+            customContentBackgroundColor: customContentBackgroundColor
         }, children)));
     });
 };