@salutejs/plasma-new-hope 0.335.0-canary.2199.17384366399.0 → 0.335.0-canary.2203.17433640523.0

package/styled-components/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.styles.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ContentLeftWrapper () {
+        return ContentLeftWrapper;
+    },
+    get ExtraCounter () {
+        return ExtraCounter;
+    },
+    get Icon () {
+        return Icon;
+    },
+    get IconWrapper () {
+        return IconWrapper;
+    },
+    get Label () {
+        return Label;
+    },
+    get RightContentWrapper () {
+        return RightContentWrapper;
+    },
+    get StyledIndicator () {
+        return StyledIndicator;
+    }
+});
+var _Counter = require("../../../Counter");
+var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _engines = require("../../../../engines");
+var _Indicator = require("../../../Indicator");
+var _mixins = require("../../../../mixins");
+var _NavigationDrawertokens = require("../../NavigationDrawer.tokens");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var mergedCounterConfig = (0, _engines.mergeConfig)(_Counter.counterConfig);
+var Counter = (0, _engines.component)(mergedCounterConfig);
+var indicatorMergedConfig = (0, _engines.mergeConfig)(_Indicator.indicatorConfig);
+var Indicator = (0, _engines.component)(indicatorMergedConfig);
+var ExtraCounter = (0, _styledcomponents.default)(Counter).withConfig({
+    displayName: "MenuItem.styles__ExtraCounter",
+    componentId: "sc-ae40179-0"
+})([
+    "margin:auto;",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], _Counter.counterTokens.background, _NavigationDrawertokens.tokens.counterBackground, _Counter.counterTokens.color, _NavigationDrawertokens.tokens.counterColor, _Counter.counterTokens.borderRadius, _NavigationDrawertokens.tokens.counterBorderRadius, _Counter.counterTokens.height, _NavigationDrawertokens.tokens.counterHeight, _Counter.counterTokens.padding, _NavigationDrawertokens.tokens.counterPadding, _Counter.counterTokens.fontFamily, _NavigationDrawertokens.tokens.counterFontFamily, _Counter.counterTokens.fontSize, _NavigationDrawertokens.tokens.counterFontSize, _Counter.counterTokens.fontStyle, _NavigationDrawertokens.tokens.counterFontStyle, _Counter.counterTokens.fontWeight, _NavigationDrawertokens.tokens.counterFontWeight, _Counter.counterTokens.letterSpacing, _NavigationDrawertokens.tokens.counterLetterSpacing, _Counter.counterTokens.lineHeight, _NavigationDrawertokens.tokens.counterLineHeight);
+var StyledIndicator = (0, _styledcomponents.default)(Indicator).withConfig({
+    displayName: "MenuItem.styles__StyledIndicator",
+    componentId: "sc-ae40179-1"
+})([
+    "margin:auto;",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], _Indicator.indicatorTokens.size, _NavigationDrawertokens.tokens.menuItemIndicatorSize, _Indicator.indicatorTokens.color, _NavigationDrawertokens.tokens.menuItemIndicatorColor);
+var IconWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "MenuItem.styles__IconWrapper",
+    componentId: "sc-ae40179-2"
+})([
+    "position:relative;width:var(",
+    ");height:var(",
+    ");"
+], _NavigationDrawertokens.tokens.iconContainerSize, _NavigationDrawertokens.tokens.iconContainerSize);
+var Icon = _styledcomponents.default.div.withConfig({
+    displayName: "MenuItem.styles__Icon",
+    componentId: "sc-ae40179-3"
+})([
+    "margin:var(",
+    ");div{width:var(",
+    ");height:var(",
+    ");}"
+], _NavigationDrawertokens.tokens.iconMargin, _NavigationDrawertokens.tokens.iconSize, _NavigationDrawertokens.tokens.iconSize);
+var ContentLeftWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "MenuItem.styles__ContentLeftWrapper",
+    componentId: "sc-ae40179-4"
+})([
+    "position:relative;width:var(",
+    ");height:var(",
+    ");"
+], _NavigationDrawertokens.tokens.menuItemContentLeftSize, _NavigationDrawertokens.tokens.menuItemContentLeftSize);
+var RightContentWrapper = _styledcomponents.default.div.withConfig({
+    displayName: "MenuItem.styles__RightContentWrapper",
+    componentId: "sc-ae40179-5"
+})([
+    "position:relative;height:var(",
+    ");display:flex;"
+], _NavigationDrawertokens.tokens.iconContainerSize);
+var Label = _styledcomponents.default.span.withConfig({
+    displayName: "MenuItem.styles__Label",
+    componentId: "sc-ae40179-6"
+})([
+    "",
+    ";"
+], (0, _mixins.applyEllipsis)());

package/styled-components/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/styled-components/cjs/components/NavigationDrawer/ui/Section/Section.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Section", {
+    enumerable: true,
+    get: function() {
+        return Section;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+var _MenuItem = require("../MenuItem/MenuItem");
+var _NavigationDrawertokens = require("../../NavigationDrawer.tokens");
+var _Sectionstyles = require("./Section.styles");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        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();
+    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;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    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);
+}
+var Section = function(_param) {
+    var items = _param.items, label = _param.label, withContentLeft = _param.withContentLeft, isOpen = _param.isOpen, className = _param.className, _param_hasDivider = _param.hasDivider, hasDivider = _param_hasDivider === void 0 ? false : _param_hasDivider, rest = _object_without_properties(_param, [
+        "items",
+        "label",
+        "withContentLeft",
+        "isOpen",
+        "className",
+        "hasDivider"
+    ]);
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), isCollapsed = _useState[0], setIsCollapsed = _useState[1];
+    var icon = /*#__PURE__*/ _react.default.createElement(_Sectionstyles.SectionIcon, null, /*#__PURE__*/ _react.default.createElement(_Sectionstyles.ArrowIcon, {
+        className: (0, _classnames.default)(isCollapsed && _NavigationDrawertokens.classes.navigationDrawerArrowInverse),
+        color: "inherit"
+    }));
+    return /*#__PURE__*/ _react.default.createElement(_Sectionstyles.StyledSection, _object_spread({
+        className: className
+    }, rest), label ? /*#__PURE__*/ _react.default.createElement(_Sectionstyles.SectionHeader, {
+        onClick: function() {
+            return setIsCollapsed(!isCollapsed);
+        }
+    }, withContentLeft && label && icon, isOpen && /*#__PURE__*/ _react.default.createElement(_Sectionstyles.Label, null, label), !withContentLeft && icon) : hasDivider && /*#__PURE__*/ _react.default.createElement(_Sectionstyles.SectionDivider, null), !isCollapsed && items.map(function(item, index) {
+        return /*#__PURE__*/ _react.default.createElement(_MenuItem.MenuItem, _object_spread_props(_object_spread({}, item), {
+            key: index,
+            withContentLeft: withContentLeft,
+            isOpen: isOpen
+        }));
+    }));
+};

package/styled-components/cjs/components/NavigationDrawer/ui/Section/Section.styles.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ArrowIcon () {
+        return ArrowIcon;
+    },
+    get Label () {
+        return Label;
+    },
+    get SectionDivider () {
+        return SectionDivider;
+    },
+    get SectionHeader () {
+        return SectionHeader;
+    },
+    get SectionIcon () {
+        return SectionIcon;
+    },
+    get StyledSection () {
+        return StyledSection;
+    }
+});
+var _styledcomponents = /*#__PURE__*/ _interop_require_default(require("styled-components"));
+var _Icon = require("../../../_Icon");
+var _mixins = require("../../../../mixins");
+var _NavigationDrawertokens = require("../../NavigationDrawer.tokens");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var StyledSection = _styledcomponents.default.div.withConfig({
+    displayName: "Section.styles__StyledSection",
+    componentId: "sc-c179f8d5-0"
+})([
+    "display:flex;flex-direction:column;"
+]);
+var SectionHeader = _styledcomponents.default.div.withConfig({
+    displayName: "Section.styles__SectionHeader",
+    componentId: "sc-c179f8d5-1"
+})([
+    "display:flex;flex-direction:row;padding:var(",
+    ");gap:var(",
+    ");align-items:center;cursor:pointer;box-sizing:border-box;height:var(",
+    ");min-width:var(",
+    ");color:var(",
+    ");font-size:var(",
+    ");font-family:var(--plasma-typo-body-s-font-family);font-style:var(--plasma-typo-text-s-font-style);font-weight:var(--plasma-typo-text-s-font-weight);line-height:var(--plasma-typo-text-s-line-height);letter-spacing:var(--plasma-typo-text-s-letter-spacing);border-radius:var(",
+    ");user-select:none;"
+], _NavigationDrawertokens.tokens.sectionPadding, _NavigationDrawertokens.tokens.sectionHeaderGap, _NavigationDrawertokens.tokens.sidebarWidthClosed, _NavigationDrawertokens.tokens.sidebarWidthClosed, _NavigationDrawertokens.tokens.sectionColor, _NavigationDrawertokens.tokens.sectionFontSize, _NavigationDrawertokens.tokens.sectionBorderRadius);
+var SectionDivider = _styledcomponents.default.div.withConfig({
+    displayName: "Section.styles__SectionDivider",
+    componentId: "sc-c179f8d5-2"
+})([
+    "height:var(",
+    ");background:var(",
+    ");margin:10px 0;"
+], _NavigationDrawertokens.tokens.dividerHeight, _NavigationDrawertokens.tokens.dividerColor);
+var SectionIcon = _styledcomponents.default.div.withConfig({
+    displayName: "Section.styles__SectionIcon",
+    componentId: "sc-c179f8d5-3"
+})([
+    "width:var(",
+    ");min-width:var(",
+    ");height:var(",
+    ");display:flex;div{width:var(",
+    ");height:var(",
+    ");}"
+], _NavigationDrawertokens.tokens.iconContainerSize, _NavigationDrawertokens.tokens.iconContainerSize, _NavigationDrawertokens.tokens.iconContainerSize, _NavigationDrawertokens.tokens.iconSize, _NavigationDrawertokens.tokens.iconSize);
+var ArrowIcon = (0, _styledcomponents.default)(_Icon.IconDisclosureDownCentered).withConfig({
+    displayName: "Section.styles__ArrowIcon",
+    componentId: "sc-c179f8d5-4"
+})([
+    "margin:auto;"
+]);
+var Label = _styledcomponents.default.span.withConfig({
+    displayName: "Section.styles__Label",
+    componentId: "sc-c179f8d5-5"
+})([
+    "",
+    ";"
+], (0, _mixins.applyEllipsis)());

package/styled-components/cjs/components/NavigationDrawer/ui/Section/Section.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/styled-components/cjs/components/NavigationDrawer/ui/Section/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Section", {
+    enumerable: true,
+    get: function() {
+        return _Section.Section;
+    }
+});
+var _Section = require("./Section");

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var base = (0, _styledcomponents.css)([
+    ""
+]);

package/styled-components/cjs/components/NavigationDrawer/variations/_view/base.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "base", {
+    enumerable: true,
+    get: function() {
+        return base;
+    }
+});
+var _styledcomponents = require("styled-components");
+var base = (0, _styledcomponents.css)([
+    ""
+]);

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

@@ -21,11 +21,9 @@ _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 _ui = require("./ui");
 var _PopupRoot = require("./PopupRoot");
 var _hooks = require("./hooks");
 var _Popuptokens = require("./Popup.tokens");
@@ -51,11 +49,6 @@ 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();
@@ -255,12 +248,7 @@ var popupRoot = function(Root) {
             "draggable",
             "resizable"
         ]);
-        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
-        var nodeRef = (0, _react.useRef)(null);
         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)({
@@ -271,22 +259,11 @@ 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({
@@ -297,51 +274,12 @@ var popupRoot = function(Root) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
-            nodeRef: nodeRef,
-            defaultClassName: draggable ? _Popuptokens.classes.draggablePopupWrapper : undefined,
-            defaultClassNameDragging: draggable ? _Popuptokens.classes.draggingPopupWrapper : undefined,
-            disabled: !draggable,
-            cancel: ".".concat(_Popuptokens.classes.resizableHandleWrapper)
-        }, /*#__PURE__*/ _react.default.createElement("div", {
-            ref: nodeRef
-        }, /*#__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)))));
+        }, rest), /*#__PURE__*/ _react.default.createElement(_ui.Draggable, {
+            draggable: draggable
+        }, /*#__PURE__*/ _react.default.createElement(_ui.Resizable, {
+            resizable: outerResizable,
+            placement: placement
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
             return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
                 container: frame.current