@salutejs/plasma-new-hope 0.336.0-canary.2235.17792261875.0 → 0.336.0-canary.2238.17818313113.0

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

@@ -173,9 +173,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var attachRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.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",
@@ -189,66 +190,31 @@ var attachRoot = function(Root) {
             "id",
             "name",
             "customIcon",
+            "onClick",
             "onChange",
             "onClear"
         ]);
         var innerRef = (0, _react.useRef)(null);
         var ref = (0, _plasmacore.useForkRef)(outerRef, innerRef);
         var inputRef = (0, _react.useRef)(null);
-        var inputHelperRef = (0, _react.useRef)(null);
         var cellRef = (0, _react.useRef)(null);
         var buttonRef = (0, _react.useRef)(null);
-        var emptyTextCellWidth = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(''), 2), filename = _useState[0], setFilename = _useState[1];
-        var _useState1 = _sliced_to_array((0, _react.useState)(''), 2), truncatedFilename = _useState1[0], setTruncatedFilename = _useState1[1];
         var horizontalClass = flow === 'horizontal' ? _Attachtokens.classes.horizontal : undefined;
         var verticalClass = flow === 'vertical' ? _Attachtokens.classes.vertical : undefined;
         var withHelperTextClass = helperText ? _Attachtokens.classes.withHelperText : undefined;
         var autoClass = flow === 'auto' ? _Attachtokens.classes.auto : undefined;
-        var cellHiddenClass = truncatedFilename.length === 0 ? _Attachtokens.classes.cellHidden : undefined;
         var accept = acceptedFileFormats === null || acceptedFileFormats === void 0 ? void 0 : acceptedFileFormats.join(',');
         var extension = (0, _utils1.extractExtension)(filename);
-        var cellContentLeft = customIcon || (0, _utils1.getFileicon)(extension, size);
-        (0, _react.useEffect)(function() {
-            var _cellRef_current;
-            emptyTextCellWidth.current = ((_cellRef_current = cellRef.current) === null || _cellRef_current === void 0 ? void 0 : _cellRef_current.offsetWidth) || 0;
-        }, []);
-        (0, _plasmacore.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 = (0, _utils1.addSeparator)(filename, _utils1.separator);
-            for(var i = currFilename.indexOf(_utils1.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 || (0, _utils1.getFileIcon)(extension, size);
+        var handleClick = function(e) {
             if (!inputRef.current) {
                 return;
             }
+            if (onClick) {
+                onClick(e);
+            }
             inputRef.current.click();
         };
         var handleChange = function(e) {
@@ -269,7 +235,6 @@ var attachRoot = function(Root) {
             }
             inputRef.current.value = '';
             setFilename('');
-            setTruncatedFilename('');
         };
         return /*#__PURE__*/ _react.default.createElement(Root, {
             className: (0, _utils.cx)(horizontalClass, verticalClass, autoClass, withHelperTextClass, className),
@@ -285,20 +250,16 @@ var attachRoot = function(Root) {
             id: id,
             name: name,
             onChange: handleChange
-        }), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHiddenInputHelper, {
-            ref: inputHelperRef
-        }, filename), /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
+        }), (!hideButtonOnAttach || !filename) && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledAttachButtonWrapper, null, /*#__PURE__*/ _react.default.createElement(_AttachButton.AttachButton, _object_spread({
             ref: buttonRef,
             buttonType: buttonType,
             isLoading: isLoading,
             disabled: disabled,
             onClick: handleClick
-        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), hasAttachment && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
+        }, rest)), helperText && /*#__PURE__*/ _react.default.createElement(_Attachstyles.StyledHelperText, null, helperText)), (hasAttachment || hideButtonOnAttach) && filename && /*#__PURE__*/ _react.default.createElement(_Cell.StyledCell, {
             stretching: "fixed",
-            className: cellHiddenClass,
             ref: cellRef,
             size: size,
-            title: truncatedFilename,
             contentLeft: cellContentLeft,
             contentRight: /*#__PURE__*/ _react.default.createElement(_IconButtonstyles.StyledIconButtonCancel, {
                 onClick: handleClear
@@ -306,7 +267,7 @@ var attachRoot = function(Root) {
                 size: "xs",
                 color: "inherit"
             }))
-        }));
+        }, /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameWrapper, null, /*#__PURE__*/ _react.default.createElement(_Attachstyles.TruncatedFilenamePart, null, filenameWithoutExtension.slice(0, -1)), /*#__PURE__*/ _react.default.createElement(_Attachstyles.FilenameExtensionPart, null, filenameWithoutExtension.at(-1), ".", extension))));
     });
 };
 var attachConfig = {

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

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get FilenameExtensionPart () {
+        return FilenameExtensionPart;
+    },
+    get FilenameWrapper () {
+        return FilenameWrapper;
+    },
     get StyledAttachButtonWrapper () {
         return StyledAttachButtonWrapper;
     },
@@ -18,14 +24,15 @@ _export(exports, {
     get StyledHiddenInput () {
         return StyledHiddenInput;
     },
-    get StyledHiddenInputHelper () {
-        return StyledHiddenInputHelper;
+    get TruncatedFilenamePart () {
+        return TruncatedFilenamePart;
     },
     get base () {
         return base;
     }
 });
 var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+var _mixins = require("../../mixins");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -72,25 +79,38 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledHiddenInput = _styledcomponents.default.input.withConfig({
     displayName: "Attach.styles__StyledHiddenInput",
-    componentId: "sc-7ce14282-0"
+    componentId: "sc-ebfa8a10-0"
 })([
     "display:none;"
 ]);
-var StyledHiddenInputHelper = _styledcomponents.default.div.withConfig({
-    displayName: "Attach.styles__StyledHiddenInputHelper",
-    componentId: "sc-7ce14282-1"
-})([
-    "position:absolute;visibility:hidden;white-space:nowrap;"
-]);
 var StyledAttachButtonWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Attach.styles__StyledAttachButtonWrapper",
-    componentId: "sc-7ce14282-2"
+    componentId: "sc-ebfa8a10-1"
 })([
     "position:relative;"
 ]);
 var StyledHelperText = _styledcomponents.default.div.withConfig({
     displayName: "Attach.styles__StyledHelperText",
-    componentId: "sc-7ce14282-3"
+    componentId: "sc-ebfa8a10-2"
 })([
     "position:absolute;margin-top:0.25rem;"
 ]);
+var FilenameWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "Attach.styles__FilenameWrapper",
+    componentId: "sc-ebfa8a10-3"
+})([
+    "display:inline-grid;align-items:center;grid-template-columns:auto 1fr;min-width:8ch;"
+]);
+var TruncatedFilenamePart = _styledcomponents.default.span.withConfig({
+    displayName: "Attach.styles__TruncatedFilenamePart",
+    componentId: "sc-ebfa8a10-4"
+})([
+    "",
+    ""
+], (0, _mixins.applyEllipsis)());
+var FilenameExtensionPart = _styledcomponents.default.span.withConfig({
+    displayName: "Attach.styles__FilenameExtensionPart",
+    componentId: "sc-ebfa8a10-5"
+})([
+    ""
+]);

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

@@ -27,6 +27,7 @@ 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/cjs/components/Attach/utils/getFileicon.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "getFileicon", {
+Object.defineProperty(exports, "getFileIcon", {
     enumerable: true,
     get: function() {
-        return getFileicon;
+        return getFileIcon;
     }
 });
 var _react = /*#__PURE__*/ _interop_require_default(require("react"));
@@ -15,7 +15,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var getFileicon = function(extension, size) {
+var getFileIcon = function(extension, size) {
     var iconSize = size === 'xs' ? 'xs' : 's';
     switch(extension){
         case 'pdf':

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

@@ -9,20 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get addSeparator () {
-        return _addSeparator.addSeparator;
-    },
     get extractExtension () {
         return _extractExtension.extractExtension;
     },
-    get getFileicon () {
-        return _getFileicon.getFileicon;
-    },
-    get separator () {
-        return separator;
+    get getFileIcon () {
+        return _getFileicon.getFileIcon;
     }
 });
 var _extractExtension = require("./extractExtension");
 var _getFileicon = require("./getFileicon");
-var _addSeparator = require("./addSeparator");
-var separator = '...';

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

@@ -28,6 +28,7 @@ var base = (0, _styledcomponents.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);}}"
-], _Attachtokens.classes.horizontal, _Attachtokens.tokens.horizontalGap, _Attachtokens.classes.vertical, _Attachtokens.tokens.verticalGap, _Attachtokens.classes.auto, _Attachtokens.tokens.verticalGap, _Attachtokens.tokens.horizontalGap, _Attachtokens.classes.withHelperText, _Attachtokens.tokens.verticalGapWithHelperText, _Attachstyles.StyledHiddenInputHelper, _Attachtokens.tokens.cellTitleFontFamily, _Attachtokens.tokens.cellTitleFontSize, _Attachtokens.tokens.cellTitleFontStyle, _Attachtokens.tokens.cellTitleFontWeight, _Attachtokens.tokens.cellTitleLetterSpacing, _Attachtokens.tokens.cellTitleLineHeight, _Attachstyles.StyledHelperText);
+], _Attachtokens.classes.horizontal, _Attachtokens.tokens.horizontalGap, _Attachtokens.classes.vertical, _Attachtokens.tokens.verticalGap, _Attachtokens.classes.auto, _Attachtokens.tokens.verticalGap, _Attachtokens.tokens.horizontalGap, _Attachtokens.classes.withHelperText, _Attachtokens.tokens.verticalGapWithHelperText, _Attachstyles.FilenameWrapper, _Attachtokens.tokens.cellTitleFontFamily, _Attachtokens.tokens.cellTitleFontSize, _Attachtokens.tokens.cellTitleFontStyle, _Attachtokens.tokens.cellTitleFontWeight, _Attachtokens.tokens.cellTitleLetterSpacing, _Attachtokens.tokens.cellTitleLineHeight, _Attachtokens.tokens.filenameWrapperHeight, _Attachstyles.StyledHelperText);

package/styled-components/cjs/components/Button/Button.styles.js

@@ -91,15 +91,16 @@ var mergedConfig = (0, _engines.mergeConfig)(_Spinner.spinnerConfig);
 var Spinner = (0, _engines.component)(mergedConfig);
 var ButtonText = _styledcomponents.default.span.withConfig({
     displayName: "Button.styles__ButtonText",
-    componentId: "sc-8625a921-0"
+    componentId: "sc-b7c1e7a-0"
 })([
     "min-width:4ch;&.",
-    "{flex-grow:2;text-align:start;}",
+    "{flex-grow:2;text-align:start;}color:var(",
+    ");",
     ""
-], String(_Buttontokens.classes.contentRelaxed), (0, _mixins.applyEllipsis)());
+], String(_Buttontokens.classes.contentRelaxed), _Buttontokens.tokens.buttonTextColor, (0, _mixins.applyEllipsis)());
 var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__StyledAdditionalContent",
-    componentId: "sc-8625a921-1"
+    componentId: "sc-b7c1e7a-1"
 })([
     "display:flex;align-items:center;margin:var(",
     ");&.",
@@ -109,7 +110,7 @@ var StyledAdditionalContent = _styledcomponents.default.div.withConfig({
 ], _Buttontokens.tokens.buttonAdditionalContentMargin, String(_Buttontokens.classes.contentRelaxed), _Buttontokens.classes.buttonHasValue, _Buttontokens.tokens.buttonAdditionalContentMarginRightWidthValue);
 var ButtonValue = _styledcomponents.default.span.withConfig({
     displayName: "Button.styles__ButtonValue",
-    componentId: "sc-8625a921-2"
+    componentId: "sc-b7c1e7a-2"
 })([
     "color:var(",
     ");margin:var(",
@@ -118,7 +119,7 @@ var ButtonValue = _styledcomponents.default.span.withConfig({
 ], _Buttontokens.tokens.buttonValueColor, _Buttontokens.tokens.buttonValueMargin, (0, _mixins.applyEllipsis)());
 var LoadWrap = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__LoadWrap",
-    componentId: "sc-8625a921-3"
+    componentId: "sc-b7c1e7a-3"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:",
@@ -132,13 +133,13 @@ var LoadWrap = _styledcomponents.default.div.withConfig({
 });
 var Loader = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__Loader",
-    componentId: "sc-8625a921-4"
+    componentId: "sc-b7c1e7a-4"
 })([
     "position:absolute;"
 ]);
 var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
     displayName: "Button.styles__StyledSpinner",
-    componentId: "sc-8625a921-5"
+    componentId: "sc-b7c1e7a-5"
 })([
     "",
     ":var(",
@@ -148,7 +149,7 @@ var StyledSpinner = (0, _styledcomponents.default)(Spinner).withConfig({
 ], _Spinner.spinnerTokens.size, _Buttontokens.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Buttontokens.tokens.buttonSpinnerColor);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__StyledContentLeft",
-    componentId: "sc-8625a921-6"
+    componentId: "sc-b7c1e7a-6"
 })([
     "display:flex;align-self:var(",
     ");color:var(",
@@ -160,7 +161,7 @@ var StyledContentLeft = _styledcomponents.default.div.withConfig({
 });
 var StyledContentRight = _styledcomponents.default.div.withConfig({
     displayName: "Button.styles__StyledContentRight",
-    componentId: "sc-8625a921-7"
+    componentId: "sc-b7c1e7a-7"
 })([
     "display:flex;align-self:var(",
     ");color:var(",

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

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../utils");
 var _Popup = require("../Popup");
@@ -43,6 +44,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -128,7 +134,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 var drawerRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.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",
@@ -142,6 +148,7 @@ var drawerRoot = function(Root) {
             "opened",
             "initialFocusRef",
             "focusAfterRef",
+            "animationInfo",
             "className",
             "customBackgroundColor",
             "customContentBackgroundColor",
@@ -191,10 +198,11 @@ var drawerRoot = function(Root) {
                 onClose();
             }
         };
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement(_Drawerstyles.StyledPopup, _object_spread({
             id: innerId,
             ref: asModal ? innerRef : outerRef,
-            className: (0, _utils.cx)(placementClass),
+            className: (0, _classnames.default)(placementClass, className, (_obj = {}, _define_property(_obj, _Drawertokens.classes.enterCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.enter), _define_property(_obj, _Drawertokens.classes.exitCustomAnimation, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.exit), _obj)),
             opened: innerIsOpen,
             zIndex: zIndex,
             placement: placement,
@@ -204,6 +212,7 @@ var drawerRoot = function(Root) {
             height: innerHeight,
             offset: offset,
             withAnimation: true,
+            drawerAnimationInfo: animationInfo,
             overlay: asModal && /*#__PURE__*/ _react.default.createElement(Root, {
                 view: view
             }, /*#__PURE__*/ _react.default.createElement(_Overlay.Overlay, {
@@ -216,6 +225,7 @@ var drawerRoot = function(Root) {
                 onOverlayClick: onDrawerOverlayKeyDown
             }))
         }, rest), /*#__PURE__*/ _react.default.createElement(Root, {
+            className: _Drawertokens.classes.panel,
             view: view,
             size: size,
             style: {
@@ -227,8 +237,7 @@ var drawerRoot = function(Root) {
             width: innerWidth,
             height: innerHeight,
             customBackgroundColor: customBackgroundColor,
-            customContentBackgroundColor: customContentBackgroundColor,
-            className: className
+            customContentBackgroundColor: customContentBackgroundColor
         }, children)));
     });
 };

package/styled-components/cjs/components/Drawer/Drawer.styles.js

@@ -82,7 +82,7 @@ var getAnimationStyles = function() {
 };
 var StyledPanel = (0, _styledcomponents.default)(Panel).withConfig({
     displayName: "Drawer.styles__StyledPanel",
-    componentId: "sc-7ba5c890-0"
+    componentId: "sc-758b0d76-0"
 })([
     "",
     ":var(",
@@ -90,7 +90,7 @@ var StyledPanel = (0, _styledcomponents.default)(Panel).withConfig({
 ], _Panel.panelTokens.closeColor, _Drawertokens.tokens.closeIconColor);
 var StyledPopup = (0, _styledcomponents.default)(Popup).withConfig({
     displayName: "Drawer.styles__StyledPopup",
-    componentId: "sc-7ba5c890-1"
+    componentId: "sc-758b0d76-1"
 })([
     "&&.",
     "{animation:fadeIn 0.2s forwards;scrollbar-gutter:stable;}&&.",
@@ -100,11 +100,24 @@ var StyledPopup = (0, _styledcomponents.default)(Popup).withConfig({
     " > div{width:",
     ";height:",
     ";}",
-    ""
+    " &.",
+    "{&& .",
+    "{animation:",
+    ";}}&.",
+    "{&&.",
+    " .",
+    "{animation:",
+    ";}}"
 ], _Drawertokens.classes.overlay, _Popup.popupClasses.endAnimation, _Drawertokens.classes.overlay, _Popup.popupClasses.root, _Popup.popupClasses.root, function(param) {
     var width = param.width;
     return width || 'auto';
 }, function(param) {
     var height = param.height;
     return height || 'auto';
-}, getAnimationStyles());
+}, getAnimationStyles(), _Drawertokens.classes.enterCustomAnimation, _Popup.popupClasses.root, function(param) {
+    var drawerAnimationInfo = param.drawerAnimationInfo;
+    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.enter) || "var(".concat(_Drawertokens.privateTokens.enterAnimation, ")");
+}, _Drawertokens.classes.exitCustomAnimation, _Popup.popupClasses.endAnimation, _Popup.popupClasses.root, function(param) {
+    var drawerAnimationInfo = param.drawerAnimationInfo;
+    return (drawerAnimationInfo === null || drawerAnimationInfo === void 0 ? void 0 : drawerAnimationInfo.exit) || "var(".concat(_Drawertokens.privateTokens.exitAnimation, ")");
+});

package/styled-components/cjs/components/Drawer/Drawer.tokens.js

@@ -12,6 +12,9 @@ _export(exports, {
     get classes () {
         return classes;
     },
+    get privateTokens () {
+        return privateTokens;
+    },
     get tokens () {
         return tokens;
     }
@@ -21,6 +24,9 @@ var classes = {
     header: 'drawer-header',
     footer: 'drawer-footer',
     overlay: 'drawer-overlay',
+    panel: 'drawer-panel',
+    enterCustomAnimation: 'drawer-enter-custom-animation',
+    exitCustomAnimation: 'drawer-exit-custom-animation',
     horizontal: 'drawer-horizontal',
     hasHeader: 'drawer-has-header',
     isRightClose: 'drawer-right-close-button',
@@ -29,6 +35,12 @@ var classes = {
     rightPlacement: 'drawer-right-placement',
     leftPlacement: 'drawer-left-placement'
 };
+var privateTokens = {
+    enterAnimation: '--plasma__private-drawer-enter-animation',
+    exitAnimation: '--plasma__private-drawer-exit-animation',
+    customEnterAnimation: '--plasma__private-drawer-custom-enter-animation',
+    customExitAnimation: '--plasma__private-drawer-custom-exit-animation'
+};
 var tokens = {
     drawerOverlayWithBlurColor: '--plasma-drawer-overlay-with-blur-color',
     drawerOverlayColor: '--plasma-drawer-overlay-color',

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

@@ -19,6 +19,7 @@ _export(exports, {
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _mixins = require("../../../mixins");
 var _base = require("./variations/_size/base");
+var _base1 = require("./variations/_view/base");
 var _LineSkeletonstyles = require("./LineSkeleton.styles");
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -118,22 +119,24 @@ function _object_without_properties_loose(source, excluded) {
 }
 var lineSkeletonRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRootRef) {
-        var size = _param.size, lighter = _param.lighter, customGradientColor = _param.customGradientColor, _param_roundness = _param.roundness, roundness = _param_roundness === void 0 ? '16' : _param_roundness, rest = _object_without_properties(_param, [
+        var size = _param.size, lighter = _param.lighter, customGradientColor = _param.customGradientColor, _param_roundness = _param.roundness, roundness = _param_roundness === void 0 ? '16' : _param_roundness, view = _param.view, rest = _object_without_properties(_param, [
             "size",
             "lighter",
             "customGradientColor",
-            "roundness"
+            "roundness",
+            "view"
         ]);
         var roundnessValue = (0, _mixins.getRoundness)({
             roundness: roundness
         });
-        var skeletonGradientColor = (0, _mixins.getSkeletonColor)({
+        var skeletonGradientColor = lighter ? (0, _mixins.getSkeletonColor)({
             lighter: lighter,
             customGradientColor: customGradientColor
-        });
+        }) : undefined;
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: outerRootRef,
-            size: size
+            size: size,
+            view: view
         }, rest), /*#__PURE__*/ _react.default.createElement(_LineSkeletonstyles.StyledVisibleLine, {
             roundness: roundnessValue,
             gradientColor: skeletonGradientColor
@@ -148,6 +151,9 @@ var lineSkeletonConfig = {
     variations: {
         size: {
             css: _base.base
+        },
+        view: {
+            css: _base1.base
         }
     },
     defaults: {}

package/styled-components/cjs/components/Skeleton/LineSkeleton/LineSkeleton.styles.js

@@ -18,6 +18,7 @@ _export(exports, {
 });
 var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
 var _mixins = require("../../../mixins");
+var _tokens = require("../tokens");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -64,7 +65,7 @@ var base = (0, _styledcomponents.css)([
 ]);
 var StyledVisibleLine = _styledcomponents.default.div.withConfig({
     displayName: "LineSkeleton.styles__StyledVisibleLine",
-    componentId: "sc-7d32d69d-0"
+    componentId: "sc-e66a9562-0"
 })([
     "position:relative;overflow:hidden;width:100%;--plasma_private-line-skeleton-roundness:",
     ";",
@@ -76,5 +77,5 @@ var StyledVisibleLine = _styledcomponents.default.div.withConfig({
     return roundness;
 }, (0, _mixins.applyRoundness)('var(--plasma_private-line-skeleton-roundness)'), function(param) {
     var gradientColor = param.gradientColor;
-    return gradientColor;
+    return gradientColor || "var(".concat(_tokens.tokens.gradientColor, ")");
 }, (0, _mixins.applySkeletonGradient)('var(--plasma_private-line-skeleton-gradient)'));

package/styled-components/cjs/components/Skeleton/LineSkeleton/variations/_size/base.js

@@ -9,11 +9,6 @@ Object.defineProperty(exports, "base", {
     }
 });
 var _styledcomponents = require("styled-components");
-var _LineSkeletonstyles = require("../../LineSkeleton.styles");
-var _tokens = require("../../../tokens");
 var base = (0, _styledcomponents.css)([
-    "height:var(",
-    ");& ",
-    "{height:var(",
-    ");}"
-], _tokens.tokens.lineHeight, _LineSkeletonstyles.StyledVisibleLine, _tokens.tokens.visibleLineHeight);
+    ""
+]);

package/styled-components/cjs/components/Skeleton/LineSkeleton/variations/_view/base.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var _LineSkeletonstyles = require("../../LineSkeleton.styles");
+var _tokens = require("../../../tokens");
+var base = (0, _styledcomponents.css)([
+    "height:var(",
+    ");& ",
+    "{height:var(",
+    ");}"
+], _tokens.tokens.lineHeight, _LineSkeletonstyles.StyledVisibleLine, _tokens.tokens.visibleLineHeight);

package/styled-components/cjs/components/Skeleton/TextSkeleton/TextSkeleton.js

@@ -195,13 +195,14 @@ var variousWidth = [
 ];
 var textSkeleton = function(Component) {
     return function(_param) {
-        var lines = _param.lines, width = _param.width, roundness = _param.roundness, customGradientColor = _param.customGradientColor, lighter = _param.lighter, _param_size = _param.size, size = _param_size === void 0 ? 'bodyM' : _param_size, props = _object_without_properties(_param, [
+        var lines = _param.lines, width = _param.width, roundness = _param.roundness, customGradientColor = _param.customGradientColor, lighter = _param.lighter, _param_size = _param.size, size = _param_size === void 0 ? 'bodyM' : _param_size, _param_view = _param.view, view = _param_view === void 0 ? 'default' : _param_view, props = _object_without_properties(_param, [
             "lines",
             "width",
             "roundness",
             "customGradientColor",
             "lighter",
-            "size"
+            "size",
+            "view"
         ]);
         var _useState = _sliced_to_array((0, _react.useState)(null), 2), fixedWidth = _useState[0], setFixedWidth = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)([]), 2), linesWidth = _useState1[0], setLinesWidth = _useState1[1];
@@ -239,6 +240,7 @@ var textSkeleton = function(Component) {
             return /*#__PURE__*/ _react.default.createElement(ComponentSkeleton, {
                 key: "line:".concat(i),
                 size: size,
+                view: view,
                 roundness: roundness,
                 customGradientColor: customGradientColor,
                 lighter: lighter,

package/styled-components/cjs/components/Skeleton/tokens.js

@@ -10,5 +10,6 @@ Object.defineProperty(exports, "tokens", {
 });
 var tokens = {
     lineHeight: '--plasma-skeleton-line-height',
-    visibleLineHeight: '--plasma-skeleton-visible-line-height'
+    visibleLineHeight: '--plasma-skeleton-visible-line-height',
+    gradientColor: '--plasma-skeleton-gradient-color'
 };