@salutejs/plasma-new-hope 0.329.1-canary.2082.16264269696.0 → 0.329.1-canary.2082.16373442811.0

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

@@ -168,7 +168,8 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 var autocompleteRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var outerValue = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, suggestions = _param.suggestions, view = _param.view, size = _param.size, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, disabled = _param.disabled, readOnly = _param.readOnly, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, onScroll = _param.onScroll, _param_listMaxHeight = _param.listMaxHeight, listMaxHeight = _param_listMaxHeight === void 0 ? '25rem' : _param_listMaxHeight, listWidth = _param.listWidth, portal = _param.portal, filter = _param.filter, onSuggestionSelect = _param.onSuggestionSelect, _param_threshold = _param.threshold, threshold = _param_threshold === void 0 ? 2 : _param_threshold, renderList = _param.renderList, renderListEnd = _param.renderListEnd, renderItem = _param.renderItem, onSearch = _param.onSearch, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, beforeList = _param.beforeList, afterList = _param.afterList, _param_virtual = _param.virtual, virtual = _param_virtual === void 0 ? false : _param_virtual, rest = _object_without_properties(_param, [
+        var outerValue = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, suggestions = _param.suggestions, view = _param.view, size = _param.size, labelPlacement = _param.labelPlacement, keepPlaceholder = _param.keepPlaceholder, disabled = _param.disabled, readOnly = _param.readOnly, label = _param.label, leftHelper = _param.leftHelper, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, onScroll = _param.onScroll, _param_listMaxHeight = _param.listMaxHeight, listMaxHeight = _param_listMaxHeight === void 0 ? '25rem' : _param_listMaxHeight, listWidth = _param.listWidth, portal = _param.portal, filter = _param.filter, onSuggestionSelect = _param.onSuggestionSelect, _param_threshold = _param.threshold, threshold = _param_threshold === void 0 ? 2 : _param_threshold, renderList = _param.renderList, renderListEnd = _param.renderListEnd, renderItem = _param.renderItem, onSearch = _param.onSearch, hintText = _param.hintText, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, beforeList = _param.beforeList, afterList = _param.afterList, _param_virtual = _param.virtual, virtual = _param_virtual === void 0 ? false : _param_virtual, // @ts-ignore
+        _offset = _param._offset, rest = _object_without_properties(_param, [
             "value",
             "defaultValue",
             "onChange",
@@ -201,7 +202,8 @@ var autocompleteRoot = function(Root) {
             "hintSize",
             "beforeList",
             "afterList",
-            "virtual"
+            "virtual",
+            "_offset"
         ]);
         var _useReducer = _sliced_to_array((0, _react.useReducer)(_focusedReducer.focusedReducer, null), 2), focused = _useReducer[0], dispatchFocused = _useReducer[1];
         var _useState = _sliced_to_array((0, _react.useState)(''), 2), innerValue = _useState[0], setInnerValue = _useState[1];
@@ -280,6 +282,7 @@ var autocompleteRoot = function(Root) {
             opened: isOpen,
             portal: portal,
             listWidth: listWidth,
+            offset: _offset,
             target: function(referenceRef) {
                 return /*#__PURE__*/ _react.default.createElement(_ui.StyledTextField, _object_spread({
                     ref: ref,

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

@@ -73,10 +73,9 @@ var base = (0, _styledcomponents.css)([
 ]);
 var ListWrapper = _styledcomponents.default.div.withConfig({
     displayName: "Autocomplete.styles__ListWrapper",
-    componentId: "sc-c595d4f2-0"
+    componentId: "sc-9df667d5-0"
 })([
-    "margin:var(",
-    ") 0 0 0;padding:calc(var(",
+    "padding:calc(var(",
     ") + var(",
     ",0rem));border-radius:var(",
     ");box-sizing:border-box;background:var(",
@@ -84,10 +83,10 @@ var ListWrapper = _styledcomponents.default.div.withConfig({
     "),inset 0 0 0 var(",
     ",0rem) var(",
     ",transparent);"
-], _Autocompletetokens.tokens.margin, _Autocompletetokens.tokens.padding, _Autocompletetokens.tokens.dropdownBorderWidth, _Autocompletetokens.tokens.borderRadius, _Autocompletetokens.tokens.background, _Autocompletetokens.tokens.boxShadow, _Autocompletetokens.tokens.dropdownBorderWidth, _Autocompletetokens.tokens.dropdownBorderColor);
+], _Autocompletetokens.tokens.padding, _Autocompletetokens.tokens.dropdownBorderWidth, _Autocompletetokens.tokens.borderRadius, _Autocompletetokens.tokens.background, _Autocompletetokens.tokens.boxShadow, _Autocompletetokens.tokens.dropdownBorderWidth, _Autocompletetokens.tokens.dropdownBorderColor);
 var Ul = _styledcomponents.default.ul.withConfig({
     displayName: "Autocomplete.styles__Ul",
-    componentId: "sc-c595d4f2-1"
+    componentId: "sc-9df667d5-1"
 })([
     "border-radius:calc(var(",
     ") - 0.125rem - var(",
@@ -99,14 +98,14 @@ var Ul = _styledcomponents.default.ul.withConfig({
 });
 var InfiniteLoaderWrapper = _styledcomponents.default.li.withConfig({
     displayName: "Autocomplete.styles__InfiniteLoaderWrapper",
-    componentId: "sc-c595d4f2-2"
+    componentId: "sc-9df667d5-2"
 })([
     "display:flex;align-items:center;justify-content:center;box-sizing:content-box;min-height:var(",
     ");"
 ], _Autocompletetokens.tokens.textFieldHeight);
 var StyledLeftHelper = _styledcomponents.default.span.withConfig({
     displayName: "Autocomplete.styles__StyledLeftHelper",
-    componentId: "sc-c595d4f2-3"
+    componentId: "sc-9df667d5-3"
 })([
     "margin:0;padding:0;"
 ]);

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

@@ -141,7 +141,6 @@ var tokens = {
     boxShadow: '--plasma-autocomplete-box-shadow',
     borderRadius: '--plasma-autocomplete-border-radius',
     padding: '--plasma-autocomplete-padding',
-    margin: '--plasma-autocomplete-margin',
     dropdownBorderColor: '--plasma-select-dropdown-border-color',
     dropdownBorderWidth: '--plasma-select-dropdown-border-width',
     itemPadding: '--plasma-autocomplete-item-padding',

package/styled-components/cjs/components/Autocomplete/FloatingPopover.js

@@ -105,7 +105,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref) {
-    var target = param.target, children = param.children, opened = param.opened, portal = param.portal, listWidth = param.listWidth;
+    var target = param.target, children = param.children, opened = param.opened, portal = param.portal, listWidth = param.listWidth, offset = param.offset;
     var _useFloating = (0, _react.useFloating)({
         whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
             return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
@@ -117,6 +117,10 @@ var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref)
         placement: 'bottom-start',
         open: opened,
         middleware: [
+            (0, _react.offset)({
+                mainAxis: (offset === null || offset === void 0 ? void 0 : offset[1]) || 0,
+                alignmentAxis: (offset === null || offset === void 0 ? void 0 : offset[0]) || 0
+            }),
             (0, _react.flip)({
                 fallbackAxisSideDirection: 'end'
             }),

package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js

@@ -219,7 +219,8 @@ function _unsupported_iterable_to_array(o, minLen) {
 var comboboxRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         var _valueToItemMap_get, _getItemByFocused;
-        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, rest = _object_without_properties(props, [
+        var name = props.name, multiple = props.multiple, outerValue = props.value, outerOnChange = props.onChange, defaultValue = props.defaultValue, isTargetAmount = props.isTargetAmount, targetAmount = props.targetAmount, items = props.items, _props_placement = props.placement, placement = _props_placement === void 0 ? 'bottom-start' : _props_placement, label = props.label, placeholder = props.placeholder, helperText = props.helperText, contentLeft = props.contentLeft, textBefore = props.textBefore, textAfter = props.textAfter, _props_variant = props.variant, variant = _props_variant === void 0 ? 'normal' : _props_variant, listOverflow = props.listOverflow, listHeight = props.listHeight, listMaxHeight = props.listMaxHeight, listWidth = props.listWidth, portal = props.portal, renderItem = props.renderItem, view = props.view, size = props.size, labelPlacement = props.labelPlacement, keepPlaceholder = props.keepPlaceholder, _props_readOnly = props.readOnly, readOnly = _props_readOnly === void 0 ? false : _props_readOnly, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_alwaysOpened = props.alwaysOpened, alwaysOpened = _props_alwaysOpened === void 0 ? false : _props_alwaysOpened, filter = props.filter, outerCloseAfterSelect = props.closeAfterSelect, renderValue = props.renderValue, zIndex = props.zIndex, beforeList = props.beforeList, afterList = props.afterList, _props_virtual = props.virtual, virtual = _props_virtual === void 0 ? false : _props_virtual, hintView = props.hintView, hintSize = props.hintSize, emptyStateDescription = props.emptyStateDescription, onChangeValue = props.onChangeValue, onScroll = props.onScroll, onToggle = props.onToggle, // @ts-ignore
+        _offset = props._offset, rest = _object_without_properties(props, [
             "name",
             "multiple",
             "value",
@@ -261,7 +262,8 @@ var comboboxRoot = function(Root) {
             "emptyStateDescription",
             "onChangeValue",
             "onScroll",
-            "onToggle"
+            "onToggle",
+            "_offset"
         ]);
         var transformedItems = (0, _react.useMemo)(function() {
             return (0, _utils3.initialItemsTransform)(items || []);
@@ -633,6 +635,7 @@ var comboboxRoot = function(Root) {
             placement: placement,
             portal: portal,
             listWidth: listWidth,
+            offset: _offset,
             target: function(referenceRef) {
                 return /*#__PURE__*/ _react.default.createElement(_ui.StyledTextField, _object_spread_props(_object_spread({
                     ref: name ? inputRef : inputForkRef,

package/styled-components/cjs/components/Combobox/ComboboxNew/FloatingPopover.js

@@ -107,7 +107,7 @@ function _object_spread_props(target, source) {
 // TODO: #2003
 var LIST_PADDING = 2;
 var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref) {
-    var target = param.target, children = param.children, opened = param.opened, onToggle = param.onToggle, placement = param.placement, portal = param.portal, listWidth = param.listWidth, zIndex = param.zIndex, isInner = param.isInner;
+    var target = param.target, children = param.children, opened = param.opened, onToggle = param.onToggle, placement = param.placement, portal = param.portal, listWidth = param.listWidth, zIndex = param.zIndex, isInner = param.isInner, offset = param.offset;
     var _useFloating = (0, _react.useFloating)({
         whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
             return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
@@ -120,8 +120,8 @@ var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref)
         open: opened,
         middleware: [
             (0, _react.offset)({
-                mainAxis: isInner ? LIST_PADDING * 2 : 0,
-                alignmentAxis: isInner ? -LIST_PADDING : 0
+                mainAxis: isInner ? LIST_PADDING * 2 : (offset === null || offset === void 0 ? void 0 : offset[1]) || 0,
+                alignmentAxis: isInner ? -LIST_PADDING : (offset === null || offset === void 0 ? void 0 : offset[0]) || 0
             }),
             (0, _react.flip)({
                 fallbackAxisSideDirection: 'end'

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

@@ -128,7 +128,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, 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, 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",
@@ -154,7 +154,8 @@ var drawerRoot = function(Root) {
             "placement",
             "closeOnEsc",
             "closeOnOverlayClick",
-            "asModal"
+            "asModal",
+            "draggable"
         ]);
         var innerIsOpen = Boolean(isOpen || opened);
         var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef);

package/styled-components/cjs/components/Dropdown/FloatingPopover.js

@@ -114,7 +114,10 @@ function _object_spread_props(target, source) {
 // TODO: #2003
 var LIST_PADDING = 2;
 var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref) {
-    var target = param.target, children = param.children, opened = param.opened, onToggle = param.onToggle, placement = param.placement, portal = param.portal, offset = param.offset, isInner = param.isInner, trigger = param.trigger, zIndex = param.zIndex;
+    var target = param.target, children = param.children, opened = param.opened, onToggle = param.onToggle, placement = param.placement, portal = param.portal, _param_offset = param.offset, offset = _param_offset === void 0 ? [
+        0,
+        8
+    ] : _param_offset, isInner = param.isInner, trigger = param.trigger, zIndex = param.zIndex;
     var _useFloating = (0, _react.useFloating)({
         whileElementsMounted: function whileElementsMounted(referenceEl, floatingEl, update) {
             return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
@@ -128,8 +131,8 @@ var FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(function(param, ref)
         middleware: [
             placement === 'auto' && (0, _react.autoPlacement)(),
             (0, _react.offset)({
-                mainAxis: (offset === null || offset === void 0 ? void 0 : offset[1]) || (isInner ? LIST_PADDING * 2 : 0),
-                crossAxis: (offset === null || offset === void 0 ? void 0 : offset[0]) || (isInner ? -LIST_PADDING : 0)
+                mainAxis: isInner ? LIST_PADDING * 2 : offset[1],
+                crossAxis: isInner ? -LIST_PADDING : offset[0]
             }),
             (0, _react.flip)({
                 fallbackAxisSideDirection: 'end'

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

@@ -130,7 +130,7 @@ function _object_without_properties_loose(source, excluded) {
 var Popup = (0, _engines.component)(_Popup.popupConfig);
 var modalRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRootRef) {
-        var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, rest = _object_without_properties(_param, [
+        var id = _param.id, withAnimation = _param.withAnimation, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, withBlur = _param.withBlur, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, zIndex = _param.zIndex, popupInfo = _param.popupInfo, children = _param.children, view = _param.view, opened = _param.opened, isOpen = _param.isOpen, hasBody = _param.hasBody, hasClose = _param.hasClose, resizable = _param.resizable, draggable = _param.draggable, rest = _object_without_properties(_param, [
             "id",
             "withAnimation",
             "onClose",
@@ -148,7 +148,9 @@ var modalRoot = function(Root) {
             "opened",
             "isOpen",
             "hasBody",
-            "hasClose"
+            "hasClose",
+            "resizable",
+            "draggable"
         ]);
         var innerIsOpen = Boolean(isOpen || opened);
         var innerHasClose = hasClose === undefined && hasBody || hasClose;
@@ -203,7 +205,9 @@ var modalRoot = function(Root) {
             zIndex: zIndex,
             overlay: hasBody ? overlayNode : /*#__PURE__*/ _react.default.createElement(Root, {
                 view: view
-            }, overlayNode)
+            }, overlayNode),
+            draggable: draggable,
+            resizable: resizable
         }, rest), hasBody ? /*#__PURE__*/ _react.default.createElement(Root, {
             view: view
         }, /*#__PURE__*/ _react.default.createElement(_Modalstyles.ModalBody, null, /*#__PURE__*/ _react.default.createElement(_Modalstyles.ModalContent, null, innerHasClose && /*#__PURE__*/ _react.default.createElement(_Modalstyles.CloseButton, {
@@ -219,7 +223,7 @@ var modalConfig = {
     name: 'Modal',
     tag: 'div',
     layout: modalRoot,
-    base: '',
+    base: _Modalstyles.base,
     variations: {
         view: {
             css: _base.base

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

@@ -17,35 +17,77 @@ _export(exports, {
     },
     get ModalContent () {
         return ModalContent;
+    },
+    get base () {
+        return base;
     }
 });
-var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
 var _mixins = require("../../mixins");
 var _Modaltokens = require("./Modal.tokens");
-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();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
+var base = (0, _styledcomponents.css)([
+    "height:100%;"
+]);
 var ModalBody = _styledcomponents.default.div.withConfig({
     displayName: "Modal.styles__ModalBody",
-    componentId: "sc-65f5e73a-0"
+    componentId: "sc-96885df7-0"
 })([
-    "border-radius:var(",
+    "height:100%;box-sizing:border-box;border-radius:var(",
     ");padding:var(",
     ");background:var(",
     ");box-shadow:var(--shadow-down-soft-l);"
 ], _Modaltokens.tokens.modalBodyBorderRadius, _Modaltokens.tokens.modalBodyPadding, _Modaltokens.tokens.modalBodyBackground);
 var ModalContent = _styledcomponents.default.div.withConfig({
     displayName: "Modal.styles__ModalContent",
-    componentId: "sc-65f5e73a-1"
+    componentId: "sc-96885df7-1"
 })([
     "position:relative;padding:var(",
     ");"
 ], _Modaltokens.tokens.modalContentPadding);
 var CloseButton = _styledcomponents.default.button.withConfig({
     displayName: "Modal.styles__CloseButton",
-    componentId: "sc-65f5e73a-2"
+    componentId: "sc-96885df7-2"
 })([
     "top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(",
     ");padding:0;margin:0;outline:none;cursor:pointer;background:transparent;",

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

@@ -21,8 +21,11 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _plasmacore = require("@salutejs/plasma-core");
+var _reactdraggable = /*#__PURE__*/ _interop_require_default(require("react-draggable"));
+var _reresizable = require("re-resizable");
 var _utils = require("../../utils");
 var _Portal = require("../Portal");
+var _utils1 = require("./utils");
 var _PopupRoot = require("./PopupRoot");
 var _hooks = require("./hooks");
 var _Popuptokens = require("./Popup.tokens");
@@ -48,6 +51,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();
@@ -230,7 +238,7 @@ var popupRoot = function(Root) {
             0,
             0
         ] : _param_offset, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, children = _param.children, overlay = _param.overlay, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, rest = _object_without_properties(_param, [
+        role = _param.role, zIndex = _param.zIndex, popupInfo = _param.popupInfo, _param_withAnimation = _param.withAnimation, withAnimation = _param_withAnimation === void 0 ? false : _param_withAnimation, className = _param.className, draggable = _param.draggable, outerResizable = _param.resizable, rest = _object_without_properties(_param, [
             "id",
             "isOpen",
             "opened",
@@ -243,9 +251,15 @@ var popupRoot = function(Root) {
             "zIndex",
             "popupInfo",
             "withAnimation",
-            "className"
+            "className",
+            "draggable",
+            "resizable"
         ]);
+        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
         var innerIsOpen = isOpen || opened;
+        var resizable = typeof outerResizable === 'boolean' ? {
+            disabled: !outerResizable
+        } : outerResizable;
         var uniqId = (0, _utils.safeUseId)();
         var innerId = id || uniqId;
         var _usePopup = (0, _hooks.usePopup)({
@@ -256,11 +270,22 @@ var popupRoot = function(Root) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = (0, _react.useRef)(null);
         var contentRef = (0, _react.useRef)(null);
+        var resizableContainer = (0, _react.useRef)(null);
         var innerRef = (0, _plasmacore.useForkRef)(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = (0, _utils.cx)(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? _Popuptokens.classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? _Popuptokens.classes.endTransition : '');
+        var handleResizeStart = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+            }
+        };
+        var handleResizeStop = function() {
+            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+            }
+        };
         var rootNode = /*#__PURE__*/ _react.default.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ _react.default.createElement(_PopupRoot.PopupRoot, _object_spread({
@@ -271,7 +296,48 @@ var popupRoot = function(Root) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), children));
+        }, rest), /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
+            defaultClassName: draggable ? _Popuptokens.classes.draggablePopupWrapper : undefined,
+            defaultClassNameDragging: draggable ? _Popuptokens.classes.draggingPopupWrapper : undefined,
+            disabled: !draggable,
+            cancel: ".".concat(_Popuptokens.classes.resizableHandleWrapper)
+        }, /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
+            ref: resizableContainer,
+            enable: resizable && !resizable.disabled ? (0, _utils1.getResizeDirections)(resizable.directions) : false,
+            resizeRatio: (0, _utils1.getRatioBasedOnPlacement)(placement),
+            defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+            minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+            minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+            onResizeStart: handleResizeStart,
+            onResizeStop: handleResizeStop,
+            handleComponent: {
+                topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableTopRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                })),
+                topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableTopLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }))
+            },
+            className: _Popuptokens.classes.resizableContainer,
+            handleStyles: (0, _utils1.getHandleStyles)(),
+            handleWrapperClass: _Popuptokens.classes.resizableHandleWrapper
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
             return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
                 container: frame.current
@@ -298,7 +364,7 @@ var popupConfig = {
     name: 'Popup',
     tag: 'div',
     layout: popupRoot,
-    base: '',
+    base: _Popupstyles.base,
     variations: {},
     defaults: {}
 };

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

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get IconResizeDiagonalStyled () {
+        return IconResizeDiagonalStyled;
+    },
     get PopupRootContainer () {
         return PopupRootContainer;
     },
@@ -20,36 +23,83 @@ _export(exports, {
     },
     get StyledPortalContainer () {
         return StyledPortalContainer;
+    },
+    get base () {
+        return base;
     }
 });
-var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _styledcomponents = /*#__PURE__*/ _interop_require_wildcard(require("styled-components"));
+var _Icon = require("../_Icon");
+var _Popuptokens = require("./Popup.tokens");
 var _utils = require("./utils");
-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();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
+var base = (0, _styledcomponents.css)([
+    ".",
+    "{cursor:grab;}.",
+    "{cursor:grabbing;}.",
+    "{user-select:none;-webkit-user-select:none;}"
+], _Popuptokens.classes.draggablePopupWrapper, _Popuptokens.classes.draggingPopupWrapper, _Popuptokens.classes.resizableContainerNoSelect);
 var StyledPortal = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__StyledPortal",
-    componentId: "sc-9d33eb36-0"
+    componentId: "sc-e8036c4-0"
 })([
     ""
 ]);
 var StyledPortalContainer = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__StyledPortalContainer",
-    componentId: "sc-9d33eb36-1"
+    componentId: "sc-e8036c4-1"
 })([
     "width:0;"
 ]);
 var PopupView = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__PopupView",
-    componentId: "sc-9d33eb36-2"
+    componentId: "sc-e8036c4-2"
 })([
     "position:relative;max-width:100%;pointer-events:all;"
 ]);
 var PopupRootContainer = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__PopupRootContainer",
-    componentId: "sc-9d33eb36-3"
+    componentId: "sc-e8036c4-3"
 })([
     "position:",
     ";z-index:",
@@ -81,3 +131,13 @@ var PopupRootContainer = _styledcomponents.default.div.withConfig({
     var position = param.position;
     return position.transform || '';
 });
+var IconResizeDiagonalStyled = (0, _styledcomponents.default)(_Icon.IconResizeDiagonal).withConfig({
+    displayName: "Popup.styles__IconResizeDiagonalStyled",
+    componentId: "sc-e8036c4-4"
+})([
+    "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
+    "{transform:rotate(-90deg);}&.",
+    "{transform:rotate(0);}&.",
+    "{transform:rotate(90deg);}&.",
+    "{transform:rotate(180deg);}"
+], _Popuptokens.classes.resizableTopRightIcon, _Popuptokens.classes.resizableBottomRightIcon, _Popuptokens.classes.resizableBottomLeftIcon, _Popuptokens.classes.resizableTopLeftIcon);

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

@@ -13,5 +13,14 @@ var classes = {
      * Класс корневого компонента PopupRoot: `popup-base-root`
      */ root: 'popup-base-root',
     endAnimation: 'popup-end-animation',
-    endTransition: 'popup-end-transition'
+    endTransition: 'popup-end-transition',
+    resizableContainer: 'resizable-container',
+    resizableTopRightIcon: 'resizable-top-right-icon',
+    resizableBottomRightIcon: 'resizable-bottom-right-icon',
+    resizableBottomLeftIcon: 'resizable-bottom-left-icon',
+    resizableTopLeftIcon: 'resizable-top-left-icon',
+    resizableHandleWrapper: 'resizable-handle-wrapper',
+    resizableContainerNoSelect: 'resizable-container-no-select',
+    draggablePopupWrapper: 'draggable-popup-wrapper',
+    draggingPopupWrapper: 'dragging-popup-wrapper'
 };