@salutejs/plasma-new-hope 0.335.0-canary.2198.17378237458.0 → 0.335.0-canary.2203.17432366342.0

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

@@ -0,0 +1,69 @@
+export var classes = {
+    navigationDrawerSidebar: 'navigation-drawer-sidebar',
+    navigationDrawerSidebarOverlay: 'navigation-drawer-sidebar-overlay',
+    navigationDrawerSidebarClosed: 'navigation-drawer-sidebar-closed',
+    navigationDrawerMenuItem: 'navigation-drawer-menu-item',
+    navigationDrawerMenuLink: 'navigation-drawer-menu-link',
+    navigationDrawerMenuIndicator: 'navigation-drawer-menu-item-indicator',
+    navigationDrawerMenuCounter: 'navigation-drawer-menu-item-counter',
+    navigationDrawerMenuItemWithoutContentLeft: 'navigation-drawer-menu-item-without-content-left',
+    navigationDrawerMenuItemSelected: 'navigation-drawer-menu-item-selected',
+    navigationDrawerMenuItemDisabled: 'navigation-drawer-menu-item-disabled',
+    navigationDrawerMenuItemContentLeft: 'navigation-drawer-menu-item-content-left',
+    navigationDrawerContentOverlay: 'navigation-drawer-content-overlay',
+    navigationDrawerArrowInverse: 'navigation-drawer-arrow-inverse'
+};
+export var tokens = {
+    // Sidebar
+    sidebarPadding: '--plasma-navigation-drawer-sidebar-padding',
+    sidebarGap: '--plasma-navigation-drawer-sidebar-gap',
+    sidebarWidth: '--plasma-navigation-drawer-sidebar-width',
+    sidebarWidthClosed: '--plasma-navigation-drawer-sidebar-width-closed',
+    sidebarBoxShadow: '--plasma-navigation-drawer-sidebar-box-shadow',
+    sidebarBackground: '--plasma-navigation-drawer-sidebar-background',
+    // Section
+    sectionFontSize: '--plasma-navigation-drawer-section-font-size',
+    sectionColor: '--plasma-navigation-drawer-section-color',
+    sectionHeaderGap: '--plasma-navigation-drawer-section-header-gap',
+    sectionPadding: '--plasma-navigation-drawer-section-padding',
+    sectionBorderRadius: '--plasma-navigation-drawer-section-border-radius',
+    // Menu Item
+    menuItemGap: '--plasma-navigation-drawer-menu-item-gap',
+    menuItemPadding: '--plasma-navigation-drawer-menu-item-padding',
+    menuItemBorderRadius: '--plasma-navigation-drawer-menu-item-border-radius',
+    menuItemHoverColor: '--plasma-navigation-drawer-menu-item-hover-color',
+    menuItemSelectedColor: '--plasma-navigation-drawer-menu-item-selected-color',
+    menuItemDisabledOpacity: '--plasma-navigation-drawer-menu-item-disabled-opacity',
+    menuItemIndicatorSize: '--plasma-navigation-drawer-menu-item-indicator-size',
+    menuItemIndicatorColor: '--plasma-navigation-drawer-menu-item-indicator-color',
+    // Menu Item Font
+    menuItemFontFamily: '--plasma-navigation-drawer-menu-item-font-family',
+    menuItemFontSize: '--plasma-navigation-drawer-menu-item-font-size',
+    menuItemFontStyle: '--plasma-navigation-drawer-menu-item-font-style',
+    menuItemFontWeight: '--plasma-navigation-drawer-menu-item-font-weight',
+    menuItemFontLetterSpacing: '--plasma-navigation-drawer-menu-item-font-letter-spacing',
+    menuItemFontLineHeight: '--plasma-navigation-drawer-menu-item-font-line-height',
+    menuItemContentLeftSize: '--plasma-navigation-drawer-menu-item-content-left-size',
+    menuItemContentLeftMargin: '--plasma-navigation-drawer-menu-item-content-left-margin',
+    // Divider
+    dividerColor: '--plasma-navigation-drawer-divider-color',
+    dividerHeight: '--plasma-navigation-drawer-divider-height',
+    // Icon
+    iconSize: '--plasma-navigation-drawer-icon-size',
+    iconContainerSize: '--plasma-navigation-drawer-icon-container-size',
+    iconMargin: '--plasma-navigation-drawer-icon-margin',
+    // Overlay
+    overlayBackground: '--plasma-navigation-drawer-overlay-background',
+    // Extra counter tokens
+    counterBackground: '--plasma-navigation-drawer-avatar-extra-counter-background',
+    counterColor: '--plasma-navigation-drawer-avatar-extra-counter-color',
+    counterBorderRadius: '--plasma-navigation-drawer-avatar-extra-counter-border-radius',
+    counterHeight: '--plasma-navigation-drawer-avatar-extra-counter-height',
+    counterPadding: '--plasma-navigation-drawer-avatar-extra-counter-padding',
+    counterFontFamily: '--plasma-navigation-drawer-avatar-extra-counter-font-family',
+    counterFontSize: '--plasma-navigation-drawer-avatar-extra-counter-font-size',
+    counterFontStyle: '--plasma-navigation-drawer-avatar-extra-counter-font-style',
+    counterFontWeight: '--plasma-navigation-drawer-avatar-extra-counter-font-weight',
+    counterLetterSpacing: '--plasma-navigation-drawer-avatar-extra-counter-letter-spacing',
+    counterLineHeight: '--plasma-navigation-drawer-avatar-extra-counter-lineheight'
+};

package/styled-components/es/components/NavigationDrawer/NavigationDrawer.types.js

@@ -0,0 +1 @@
+export { };

package/styled-components/es/components/NavigationDrawer/index.js

@@ -0,0 +1,2 @@
+export { navigationDrawerRoot, navigationDrawerConfig } from "./NavigationDrawer";
+export { tokens as navigationDrawerTokens } from "./NavigationDrawer.tokens";

package/styled-components/es/components/NavigationDrawer/ui/MenuItem/MenuItem.js

@@ -0,0 +1,29 @@
+import React from "react";
+import cls from "classnames";
+import { ExtraCounter, IconWrapper, Icon, StyledIndicator, RightContentWrapper, ContentLeftWrapper, Label } from "./MenuItem.styles";
+import { classes } from "../../NavigationDrawer.tokens";
+import { Link } from "../../../../examples/components/Link/Link";
+export var MenuItem = function(props) {
+    var onClick = props.onClick, href = props.href, target = props.target, disabled = props.disabled, selected = props.selected, icon = props.icon, contentLeft = props.contentLeft, withContentLeft = props.withContentLeft, label = props.label, isOpen = props.isOpen, hasIndicator = props.hasIndicator, counter = props.counter;
+    var onMenuClick = typeof onClick === 'function' && !disabled ? onClick : undefined;
+    var hasCustomContentLeft = contentLeft && withContentLeft;
+    var menuClasses = cls(classes.navigationDrawerMenuItem, selected && classes.navigationDrawerMenuItemSelected, disabled && classes.navigationDrawerMenuItemDisabled, hasCustomContentLeft && classes.navigationDrawerMenuItemContentLeft, !withContentLeft && classes.navigationDrawerMenuItemWithoutContentLeft);
+    var indicators = /*#__PURE__*/ React.createElement(React.Fragment, null, hasIndicator && /*#__PURE__*/ React.createElement(StyledIndicator, {
+        className: cls(withContentLeft && classes.navigationDrawerMenuIndicator)
+    }), counter !== undefined && /*#__PURE__*/ React.createElement(ExtraCounter, {
+        className: cls(withContentLeft && classes.navigationDrawerMenuCounter),
+        count: counter
+    }));
+    var contentLeftItem = contentLeft ? /*#__PURE__*/ React.createElement(ContentLeftWrapper, null, contentLeft, indicators) : null;
+    var iconItem = icon ? /*#__PURE__*/ React.createElement(IconWrapper, null, /*#__PURE__*/ React.createElement(Icon, null, icon), indicators) : null;
+    var menuItemContent = withContentLeft ? /*#__PURE__*/ React.createElement(React.Fragment, null, contentLeft && contentLeftItem, icon && iconItem, isOpen && /*#__PURE__*/ React.createElement(Label, null, label)) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Label, null, label), /*#__PURE__*/ React.createElement(RightContentWrapper, null, indicators));
+    return typeof onClick === 'function' ? /*#__PURE__*/ React.createElement("div", {
+        className: menuClasses,
+        onClick: onMenuClick
+    }, menuItemContent) : /*#__PURE__*/ React.createElement(Link, {
+        className: cls(classes.navigationDrawerMenuLink, menuClasses),
+        href: href,
+        rel: "noopener noreferrer",
+        target: target
+    }, menuItemContent);
+};

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

@@ -0,0 +1,87 @@
+import { counterConfig, counterTokens } from "../../../Counter";
+import styled from "styled-components";
+import { component, mergeConfig } from "../../../../engines";
+import { indicatorTokens, indicatorConfig } from "../../../Indicator";
+import { applyEllipsis } from "../../../../mixins";
+import { tokens } from "../../NavigationDrawer.tokens";
+var mergedCounterConfig = mergeConfig(counterConfig);
+var Counter = component(mergedCounterConfig);
+var indicatorMergedConfig = mergeConfig(indicatorConfig);
+var Indicator = component(indicatorMergedConfig);
+export var ExtraCounter = styled(Counter).withConfig({
+    displayName: "MenuItem.styles__ExtraCounter",
+    componentId: "sc-ae40179-0"
+})([
+    "margin:auto;",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], counterTokens.background, tokens.counterBackground, counterTokens.color, tokens.counterColor, counterTokens.borderRadius, tokens.counterBorderRadius, counterTokens.height, tokens.counterHeight, counterTokens.padding, tokens.counterPadding, counterTokens.fontFamily, tokens.counterFontFamily, counterTokens.fontSize, tokens.counterFontSize, counterTokens.fontStyle, tokens.counterFontStyle, counterTokens.fontWeight, tokens.counterFontWeight, counterTokens.letterSpacing, tokens.counterLetterSpacing, counterTokens.lineHeight, tokens.counterLineHeight);
+export var StyledIndicator = styled(Indicator).withConfig({
+    displayName: "MenuItem.styles__StyledIndicator",
+    componentId: "sc-ae40179-1"
+})([
+    "margin:auto;",
+    ":var(",
+    ");",
+    ":var(",
+    ");"
+], indicatorTokens.size, tokens.menuItemIndicatorSize, indicatorTokens.color, tokens.menuItemIndicatorColor);
+export var IconWrapper = styled.div.withConfig({
+    displayName: "MenuItem.styles__IconWrapper",
+    componentId: "sc-ae40179-2"
+})([
+    "position:relative;width:var(",
+    ");height:var(",
+    ");"
+], tokens.iconContainerSize, tokens.iconContainerSize);
+export var Icon = styled.div.withConfig({
+    displayName: "MenuItem.styles__Icon",
+    componentId: "sc-ae40179-3"
+})([
+    "margin:var(",
+    ");div{width:var(",
+    ");height:var(",
+    ");}"
+], tokens.iconMargin, tokens.iconSize, tokens.iconSize);
+export var ContentLeftWrapper = styled.div.withConfig({
+    displayName: "MenuItem.styles__ContentLeftWrapper",
+    componentId: "sc-ae40179-4"
+})([
+    "position:relative;width:var(",
+    ");height:var(",
+    ");"
+], tokens.menuItemContentLeftSize, tokens.menuItemContentLeftSize);
+export var RightContentWrapper = styled.div.withConfig({
+    displayName: "MenuItem.styles__RightContentWrapper",
+    componentId: "sc-ae40179-5"
+})([
+    "position:relative;height:var(",
+    ");display:flex;"
+], tokens.iconContainerSize);
+export var Label = styled.span.withConfig({
+    displayName: "MenuItem.styles__Label",
+    componentId: "sc-ae40179-6"
+})([
+    "",
+    ";"
+], applyEllipsis());

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,158 @@
+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 _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);
+}
+import React, { useState } from "react";
+import cls from "classnames";
+import { MenuItem } from "../MenuItem/MenuItem";
+import { classes } from "../../NavigationDrawer.tokens";
+import { StyledSection, SectionHeader, SectionDivider, SectionIcon, ArrowIcon, Label } from "./Section.styles";
+export 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(useState(false), 2), isCollapsed = _useState[0], setIsCollapsed = _useState[1];
+    var icon = /*#__PURE__*/ React.createElement(SectionIcon, null, /*#__PURE__*/ React.createElement(ArrowIcon, {
+        className: cls(isCollapsed && classes.navigationDrawerArrowInverse),
+        color: "inherit"
+    }));
+    return /*#__PURE__*/ React.createElement(StyledSection, _object_spread({
+        className: className
+    }, rest), label ? /*#__PURE__*/ React.createElement(SectionHeader, {
+        onClick: function() {
+            return setIsCollapsed(!isCollapsed);
+        }
+    }, withContentLeft && label && icon, isOpen && /*#__PURE__*/ React.createElement(Label, null, label), !withContentLeft && icon) : hasDivider && /*#__PURE__*/ React.createElement(SectionDivider, null), !isCollapsed && items.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement(MenuItem, _object_spread_props(_object_spread({}, item), {
+            key: index,
+            withContentLeft: withContentLeft,
+            isOpen: isOpen
+        }));
+    }));
+};

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

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { IconDisclosureDownCentered } from "../../../_Icon";
+import { applyEllipsis } from "../../../../mixins";
+import { tokens } from "../../NavigationDrawer.tokens";
+export var StyledSection = styled.div.withConfig({
+    displayName: "Section.styles__StyledSection",
+    componentId: "sc-c179f8d5-0"
+})([
+    "display:flex;flex-direction:column;"
+]);
+export var SectionHeader = styled.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;"
+], tokens.sectionPadding, tokens.sectionHeaderGap, tokens.sidebarWidthClosed, tokens.sidebarWidthClosed, tokens.sectionColor, tokens.sectionFontSize, tokens.sectionBorderRadius);
+export var SectionDivider = styled.div.withConfig({
+    displayName: "Section.styles__SectionDivider",
+    componentId: "sc-c179f8d5-2"
+})([
+    "height:var(",
+    ");background:var(",
+    ");margin:10px 0;"
+], tokens.dividerHeight, tokens.dividerColor);
+export var SectionIcon = styled.div.withConfig({
+    displayName: "Section.styles__SectionIcon",
+    componentId: "sc-c179f8d5-3"
+})([
+    "width:var(",
+    ");min-width:var(",
+    ");height:var(",
+    ");display:flex;div{width:var(",
+    ");height:var(",
+    ");}"
+], tokens.iconContainerSize, tokens.iconContainerSize, tokens.iconContainerSize, tokens.iconSize, tokens.iconSize);
+export var ArrowIcon = styled(IconDisclosureDownCentered).withConfig({
+    displayName: "Section.styles__ArrowIcon",
+    componentId: "sc-c179f8d5-4"
+})([
+    "margin:auto;"
+]);
+export var Label = styled.span.withConfig({
+    displayName: "Section.styles__Label",
+    componentId: "sc-c179f8d5-5"
+})([
+    "",
+    ";"
+], applyEllipsis());

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+export { Section } from "./Section";

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

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export var base = css([
+    ""
+]);

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

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export var base = css([
+    ""
+]);

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

@@ -101,15 +101,13 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import React, { forwardRef, useRef } from "react";
 import { useForkRef } from "@salutejs/plasma-core";
-import Draggable from "react-draggable";
-import { Resizable } from "re-resizable";
 import { canUseDOM, cx, safeUseId } from "../../utils";
 import { Portal } from "../Portal";
-import { getRatioBasedOnPlacement, getResizeDirections, getHandleStyles } from "./utils";
+import { Draggable, Resizable } from "./ui";
 import { PopupRoot } from "./PopupRoot";
 import { usePopup } from "./hooks";
 import { classes } from "./Popup.tokens";
-import { StyledPortalContainer, base, IconResizeDiagonalStyled } from "./Popup.styles";
+import { StyledPortalContainer, base } from "./Popup.styles";
 export var handlePosition = function(placement, offset) {
     var x = '0rem';
     var y = '0rem';
@@ -190,12 +188,7 @@ export var handlePosition = function(placement, offset) {
             "draggable",
             "resizable"
         ]);
-        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
-        var nodeRef = useRef(null);
         var innerIsOpen = isOpen || opened;
-        var resizable = typeof outerResizable === 'boolean' ? {
-            disabled: !outerResizable
-        } : outerResizable;
         var uniqId = safeUseId();
         var innerId = id || uniqId;
         var _usePopup = usePopup({
@@ -206,22 +199,11 @@ export var handlePosition = function(placement, offset) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = useRef(null);
         var contentRef = useRef(null);
-        var resizableContainer = useRef(null);
         var innerRef = useForkRef(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = cx(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? classes.endTransition : '');
-        var handleResizeStart = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
-            }
-        };
-        var handleResizeStop = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
-            }
-        };
         var rootNode = /*#__PURE__*/ React.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ React.createElement(PopupRoot, _object_spread({
@@ -233,50 +215,11 @@ export var handlePosition = function(placement, offset) {
             animationInfo: animationInfo,
             setVisible: setVisible
         }, rest), /*#__PURE__*/ React.createElement(Draggable, {
-            nodeRef: nodeRef,
-            defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
-            defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
-            disabled: !draggable,
-            cancel: ".".concat(classes.resizableHandleWrapper)
-        }, /*#__PURE__*/ React.createElement("div", {
-            ref: nodeRef
+            draggable: draggable
         }, /*#__PURE__*/ React.createElement(Resizable, {
-            ref: resizableContainer,
-            enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
-            resizeRatio: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
-                    className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
-                    className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
-                    className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
-                    className: classes.resizableTopLeftIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                }))
-            },
-            className: classes.resizableContainer,
-            handleStyles: getHandleStyles(),
-            handleWrapperClass: classes.resizableHandleWrapper
-        }, children)))));
+            resizable: outerResizable,
+            placement: placement
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && canUseDOM) {
             return /*#__PURE__*/ React.createElement(Portal, {
                 container: frame.current

package/styled-components/es/components/Popup/ui/Draggable/Draggable.js

@@ -0,0 +1,19 @@
+import React, { useRef } from "react";
+import ReactDraggable from "react-draggable";
+import { classes } from "../../Popup.tokens";
+export var Draggable = function(param) {
+    var children = param.children, draggable = param.draggable;
+    var nodeRef = useRef(null);
+    if (!draggable) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }
+    return /*#__PURE__*/ React.createElement(ReactDraggable, {
+        nodeRef: nodeRef,
+        defaultClassName: draggable ? classes.draggablePopupWrapper : undefined,
+        defaultClassNameDragging: draggable ? classes.draggingPopupWrapper : undefined,
+        disabled: !draggable,
+        cancel: ".".concat(classes.resizableHandleWrapper)
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: nodeRef
+    }, children));
+};

package/styled-components/es/components/Popup/ui/Resizable/Resizable.js

@@ -0,0 +1,63 @@
+import React, { useRef } from "react";
+import { Resizable as ReResizable } from "re-resizable";
+import { classes } from "../../Popup.tokens";
+import { getHandleStyles, getRatioBasedOnPlacement, getResizeDirections } from "../../utils";
+import { IconResizeDiagonalStyled } from "../../Popup.styles";
+export var Resizable = function(param) {
+    var children = param.children, outerResizable = param.resizable, placement = param.placement;
+    var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
+    var resizableContainer = useRef(null);
+    var resizable = typeof outerResizable === 'boolean' ? {
+        disabled: !outerResizable
+    } : outerResizable;
+    var handleResizeStart = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+        }
+    };
+    var handleResizeStop = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+        }
+    };
+    if (!resizable || resizable.disabled) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }
+    return /*#__PURE__*/ React.createElement(ReResizable, {
+        ref: resizableContainer,
+        enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
+        resizeRatio: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
+                className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
+                className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
+                className: 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.createElement(React.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.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableTopLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            }))
+        },
+        className: classes.resizableContainer,
+        handleStyles: getHandleStyles(),
+        handleWrapperClass: classes.resizableHandleWrapper
+    }, children);
+};

package/styled-components/es/components/Popup/ui/index.js

@@ -0,0 +1,2 @@
+export { Draggable } from "./Draggable/Draggable";
+export { Resizable } from "./Resizable/Resizable";