@salutejs/plasma-new-hope 0.330.0-dev.0 → 0.331.0-canary.1655.16171144116.0

package/es/components/Popup/utils/getHandleStyles.js

@@ -0,0 +1,54 @@
+var getBaseDimension = function getBaseDimension(iconSize) {
+  switch (iconSize) {
+    case 'xs':
+      {
+        return 16;
+      }
+    case 's':
+      {
+        return 24;
+      }
+    case 'm':
+      {
+        return 36;
+      }
+    default:
+      {
+        return 16;
+      }
+  }
+};
+var getHandleStyles = function getHandleStyles() {
+  var iconSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 's';
+  var size = getBaseDimension(iconSize);
+  var offset = size / 2;
+  return {
+    topRight: {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      top: "-".concat(offset, "px"),
+      right: "-".concat(offset, "px")
+    },
+    bottomRight: {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      right: "-".concat(offset, "px"),
+      bottom: "-".concat(offset, "px")
+    },
+    bottomLeft: {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      bottom: "-".concat(offset, "px"),
+      left: "-".concat(offset, "px")
+    },
+    topLeft: {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px"),
+      top: "-".concat(offset, "px"),
+      left: "-".concat(offset, "px")
+    }
+  };
+};
+
+export { getHandleStyles };
+//# sourceMappingURL=getHandleStyles.js.map

package/es/components/Popup/utils/getHandleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getHandleStyles.js","sources":["../../../../src/components/Popup/utils/getHandleStyles.ts"],"sourcesContent":["interface ReturnData {\n    topRight: {\n        width: string;\n        height: string;\n        top: string;\n        right: string;\n    };\n    bottomRight: {\n        width: string;\n        height: string;\n        right: string;\n        bottom: string;\n    };\n    bottomLeft: {\n        width: string;\n        height: string;\n        bottom: string;\n        left: string;\n    };\n    topLeft: {\n        width: string;\n        height: string;\n        top: string;\n        left: string;\n    };\n}\n\nconst getBaseDimension = (iconSize?: 'xs' | 's' | 'm'): number => {\n    switch (iconSize) {\n        case 'xs': {\n            return 16;\n        }\n        case 's': {\n            return 24;\n        }\n        case 'm': {\n            return 36;\n        }\n        default: {\n            return 16;\n        }\n    }\n};\n\nexport const getHandleStyles = (iconSize: 'xs' | 's' | 'm' = 's'): ReturnData => {\n    const size = getBaseDimension(iconSize);\n    const offset = size / 2;\n\n    return {\n        topRight: {\n            width: `${size}px`,\n            height: `${size}px`,\n            top: `-${offset}px`,\n            right: `-${offset}px`,\n        },\n        bottomRight: {\n            width: `${size}px`,\n            height: `${size}px`,\n            right: `-${offset}px`,\n            bottom: `-${offset}px`,\n        },\n        bottomLeft: {\n            width: `${size}px`,\n            height: `${size}px`,\n            bottom: `-${offset}px`,\n            left: `-${offset}px`,\n        },\n        topLeft: {\n            width: `${size}px`,\n            height: `${size}px`,\n            top: `-${offset}px`,\n            left: `-${offset}px`,\n        },\n    };\n};\n"],"names":["getBaseDimension","iconSize","getHandleStyles","arguments","length","undefined","size","offset","topRight","width","concat","height","top","right","bottomRight","bottom","bottomLeft","left","topLeft"],"mappings":"AA2BA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,QAA2B,EAAa;AAC9D,EAAA,QAAQA,QAAQ;AACZ,IAAA,KAAK,IAAI;AAAE,MAAA;AACP,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA,KAAK,GAAG;AAAE,MAAA;AACN,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA,KAAK,GAAG;AAAE,MAAA;AACN,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACA,IAAA;AAAS,MAAA;AACL,QAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACJ,GAAA;AACJ,CAAC,CAAA;IAEYC,eAAe,GAAG,SAAlBA,eAAeA,GAAqD;AAAA,EAAA,IAAjDD,QAA0B,GAAAE,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,GAAG,CAAA;AAC5D,EAAA,IAAMG,IAAI,GAAGN,gBAAgB,CAACC,QAAQ,CAAC,CAAA;AACvC,EAAA,IAAMM,MAAM,GAAGD,IAAI,GAAG,CAAC,CAAA;EAEvB,OAAO;AACHE,IAAAA,QAAQ,EAAE;AACNC,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBM,MAAAA,GAAG,EAAAF,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACnBM,KAAK,EAAA,GAAA,CAAAH,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACpB;AACDO,IAAAA,WAAW,EAAE;AACTL,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBO,MAAAA,KAAK,EAAAH,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACrBQ,MAAM,EAAA,GAAA,CAAAL,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACrB;AACDS,IAAAA,UAAU,EAAE;AACRP,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBS,MAAAA,MAAM,EAAAL,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACtBU,IAAI,EAAA,GAAA,CAAAP,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;KACnB;AACDW,IAAAA,OAAO,EAAE;AACLT,MAAAA,KAAK,EAAAC,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AAClBK,MAAAA,MAAM,EAAAD,EAAAA,CAAAA,MAAA,CAAKJ,IAAI,EAAI,IAAA,CAAA;AACnBM,MAAAA,GAAG,EAAAF,GAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAI,IAAA,CAAA;MACnBU,IAAI,EAAA,GAAA,CAAAP,MAAA,CAAMH,MAAM,EAAA,IAAA,CAAA;AACpB,KAAA;GACH,CAAA;AACL;;;;"}

package/es/components/Popup/utils/getRatioBasedOnPlacement.js

@@ -0,0 +1,32 @@
+var getRatioBasedOnPlacement = function getRatioBasedOnPlacement(placement) {
+  switch (placement) {
+    case 'center':
+      {
+        return [2, 2];
+      }
+    case 'top':
+    case 'bottom':
+      {
+        return [2, 1];
+      }
+    case 'left':
+    case 'right':
+      {
+        return [1, 2];
+      }
+    case 'top-left':
+    case 'top-right':
+    case 'bottom-left':
+    case 'bottom-right':
+      {
+        return [1, 1];
+      }
+    default:
+      {
+        return [2, 2];
+      }
+  }
+};
+
+export { getRatioBasedOnPlacement };
+//# sourceMappingURL=getRatioBasedOnPlacement.js.map

package/es/components/Popup/utils/getRatioBasedOnPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRatioBasedOnPlacement.js","sources":["../../../../src/components/Popup/utils/getRatioBasedOnPlacement.ts"],"sourcesContent":["import type { PopupPlacement } from '../Popup.types';\n\nexport const getRatioBasedOnPlacement = (placement: PopupPlacement): [number, number] => {\n    switch (placement) {\n        case 'center': {\n            return [2, 2];\n        }\n\n        case 'top':\n        case 'bottom': {\n            return [2, 1];\n        }\n\n        case 'left':\n        case 'right': {\n            return [1, 2];\n        }\n\n        case 'top-left':\n        case 'top-right':\n        case 'bottom-left':\n        case 'bottom-right': {\n            return [1, 1];\n        }\n\n        default: {\n            return [2, 2];\n        }\n    }\n};\n"],"names":["getRatioBasedOnPlacement","placement"],"mappings":"IAEaA,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAIC,SAAyB,EAAuB;AACrF,EAAA,QAAQA,SAAS;AACb,IAAA,KAAK,QAAQ;AAAE,MAAA;AACX,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,OAAA;AAEA,IAAA,KAAK,KAAK,CAAA;AACV,IAAA,KAAK,QAAQ;AAAE,MAAA;AACX,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,OAAA;AAEA,IAAA,KAAK,MAAM,CAAA;AACX,IAAA,KAAK,OAAO;AAAE,MAAA;AACV,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,OAAA;AAEA,IAAA,KAAK,UAAU,CAAA;AACf,IAAA,KAAK,WAAW,CAAA;AAChB,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,cAAc;AAAE,MAAA;AACjB,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,OAAA;AAEA,IAAA;AAAS,MAAA;AACL,QAAA,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AACjB,OAAA;AACJ,GAAA;AACJ;;;;"}

package/es/components/Popup/utils/getResizeDirections.js

@@ -0,0 +1,69 @@
+import { createForOfIteratorHelper as _createForOfIteratorHelper } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var getResizeDirections = function getResizeDirections(directions) {
+  if (!directions) {
+    return {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      topRight: true,
+      bottomRight: true,
+      bottomLeft: true,
+      topLeft: true
+    };
+  }
+  var result = {
+    top: false,
+    right: false,
+    bottom: false,
+    left: false,
+    topRight: false,
+    bottomRight: false,
+    bottomLeft: false,
+    topLeft: false
+  };
+  var _iterator = _createForOfIteratorHelper(directions),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var dir = _step.value;
+      switch (dir) {
+        case 'top':
+          result.top = true;
+          break;
+        case 'right':
+          result.right = true;
+          break;
+        case 'bottom':
+          result.bottom = true;
+          break;
+        case 'left':
+          result.left = true;
+          break;
+        case 'top-right':
+          result.topRight = true;
+          break;
+        case 'top-left':
+          result.topLeft = true;
+          break;
+        case 'bottom-right':
+          result.bottomRight = true;
+          break;
+        case 'bottom-left':
+          result.bottomLeft = true;
+          break;
+        default:
+          break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return result;
+};
+
+export { getResizeDirections };
+//# sourceMappingURL=getResizeDirections.js.map

package/es/components/Popup/utils/getResizeDirections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResizeDirections.js","sources":["../../../../src/components/Popup/utils/getResizeDirections.ts"],"sourcesContent":["import type { ResizeDirections } from '../Popup.types';\n\ninterface Directions {\n    top?: boolean;\n    right?: boolean;\n    bottom?: boolean;\n    left?: boolean;\n    topRight?: boolean;\n    bottomRight?: boolean;\n    bottomLeft?: boolean;\n    topLeft?: boolean;\n}\n\nexport const getResizeDirections = (directions?: ResizeDirections): Directions => {\n    if (!directions) {\n        return {\n            top: true,\n            right: true,\n            bottom: true,\n            left: true,\n            topRight: true,\n            bottomRight: true,\n            bottomLeft: true,\n            topLeft: true,\n        };\n    }\n\n    const result: Directions = {\n        top: false,\n        right: false,\n        bottom: false,\n        left: false,\n        topRight: false,\n        bottomRight: false,\n        bottomLeft: false,\n        topLeft: false,\n    };\n\n    for (const dir of directions) {\n        switch (dir) {\n            case 'top':\n                result.top = true;\n                break;\n            case 'right':\n                result.right = true;\n                break;\n            case 'bottom':\n                result.bottom = true;\n                break;\n            case 'left':\n                result.left = true;\n                break;\n            case 'top-right':\n                result.topRight = true;\n                break;\n            case 'top-left':\n                result.topLeft = true;\n                break;\n            case 'bottom-right':\n                result.bottomRight = true;\n                break;\n            case 'bottom-left':\n                result.bottomLeft = true;\n                break;\n            default:\n                break;\n        }\n    }\n\n    return result;\n};\n"],"names":["getResizeDirections","directions","top","right","bottom","left","topRight","bottomRight","bottomLeft","topLeft","result","_iterator","_createForOfIteratorHelper","_step","s","n","done","dir","value","err","e","f"],"mappings":";;IAaaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,UAA6B,EAAiB;EAC9E,IAAI,CAACA,UAAU,EAAE;IACb,OAAO;AACHC,MAAAA,GAAG,EAAE,IAAI;AACTC,MAAAA,KAAK,EAAE,IAAI;AACXC,MAAAA,MAAM,EAAE,IAAI;AACZC,MAAAA,IAAI,EAAE,IAAI;AACVC,MAAAA,QAAQ,EAAE,IAAI;AACdC,MAAAA,WAAW,EAAE,IAAI;AACjBC,MAAAA,UAAU,EAAE,IAAI;AAChBC,MAAAA,OAAO,EAAE,IAAA;KACZ,CAAA;AACL,GAAA;AAEA,EAAA,IAAMC,MAAkB,GAAG;AACvBR,IAAAA,GAAG,EAAE,KAAK;AACVC,IAAAA,KAAK,EAAE,KAAK;AACZC,IAAAA,MAAM,EAAE,KAAK;AACbC,IAAAA,IAAI,EAAE,KAAK;AACXC,IAAAA,QAAQ,EAAE,KAAK;AACfC,IAAAA,WAAW,EAAE,KAAK;AAClBC,IAAAA,UAAU,EAAE,KAAK;AACjBC,IAAAA,OAAO,EAAE,KAAA;GACZ,CAAA;AAAC,EAAA,IAAAE,SAAA,GAAAC,0BAAA,CAEgBX,UAAU,CAAA;IAAAY,KAAA,CAAA;AAAA,EAAA,IAAA;IAA5B,KAAAF,SAAA,CAAAG,CAAA,EAAAD,EAAAA,CAAAA,CAAAA,KAAA,GAAAF,SAAA,CAAAI,CAAA,EAAAC,EAAAA,IAAA,GAA8B;AAAA,MAAA,IAAnBC,GAAG,GAAAJ,KAAA,CAAAK,KAAA,CAAA;AACV,MAAA,QAAQD,GAAG;AACP,QAAA,KAAK,KAAK;UACNP,MAAM,CAACR,GAAG,GAAG,IAAI,CAAA;AACjB,UAAA,MAAA;AACJ,QAAA,KAAK,OAAO;UACRQ,MAAM,CAACP,KAAK,GAAG,IAAI,CAAA;AACnB,UAAA,MAAA;AACJ,QAAA,KAAK,QAAQ;UACTO,MAAM,CAACN,MAAM,GAAG,IAAI,CAAA;AACpB,UAAA,MAAA;AACJ,QAAA,KAAK,MAAM;UACPM,MAAM,CAACL,IAAI,GAAG,IAAI,CAAA;AAClB,UAAA,MAAA;AACJ,QAAA,KAAK,WAAW;UACZK,MAAM,CAACJ,QAAQ,GAAG,IAAI,CAAA;AACtB,UAAA,MAAA;AACJ,QAAA,KAAK,UAAU;UACXI,MAAM,CAACD,OAAO,GAAG,IAAI,CAAA;AACrB,UAAA,MAAA;AACJ,QAAA,KAAK,cAAc;UACfC,MAAM,CAACH,WAAW,GAAG,IAAI,CAAA;AACzB,UAAA,MAAA;AACJ,QAAA,KAAK,aAAa;UACdG,MAAM,CAACF,UAAU,GAAG,IAAI,CAAA;AACxB,UAAA,MAAA;AACJ,QAAA;AACI,UAAA,MAAA;AACR,OAAA;AACJ,KAAA;AAAC,GAAA,CAAA,OAAAW,GAAA,EAAA;IAAAR,SAAA,CAAAS,CAAA,CAAAD,GAAA,CAAA,CAAA;AAAA,GAAA,SAAA;AAAAR,IAAAA,SAAA,CAAAU,CAAA,EAAA,CAAA;AAAA,GAAA;AAED,EAAA,OAAOX,MAAM,CAAA;AACjB;;;;"}

package/es/components/Popup/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Popup/utils/index.ts"],"sourcesContent":["export const DEFAULT_Z_INDEX = '9000';\n"],"names":["DEFAULT_Z_INDEX"],"mappings":"AAAO,IAAMA,eAAe,GAAG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Popup/utils/index.ts"],"sourcesContent":["export * from './getRatioBasedOnPlacement';\nexport * from './getResizeDirections';\nexport * from './getHandleStyles';\n\nexport const DEFAULT_Z_INDEX = '9000';\n"],"names":["DEFAULT_Z_INDEX"],"mappings":"AAIO,IAAMA,eAAe,GAAG;;;;"}

package/es/components/_Icon/Icon.assets/ResizeDiagonal.js

@@ -0,0 +1,22 @@
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+
+var _path, _path2;
+var ResizeDiagonal = function ResizeDiagonal(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props, {
+    xmlns: "http://www.w3.org/2000/svg"
+  }), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M21.5 13.25C21.5985 13.25 21.6961 13.269 21.7871 13.3066C21.8781 13.3443 21.9606 13.4001 22.0303 13.4697C22.1 13.5394 22.1556 13.6218 22.1934 13.7129C22.2311 13.8039 22.25 13.9015 22.25 14C22.25 14.0985 22.2311 14.1961 22.1934 14.2871C22.1556 14.3782 22.1 14.4606 22.0303 14.5303L14.5303 22.0303C14.4606 22.0999 14.3781 22.1557 14.2871 22.1934C14.1961 22.231 14.0985 22.25 14 22.25C13.9015 22.25 13.8039 22.2311 13.7129 22.1934C13.6218 22.1556 13.5394 22.1 13.4697 22.0303C13.4001 21.9606 13.3443 21.8781 13.3066 21.7871C13.269 21.6961 13.25 21.5985 13.25 21.5C13.25 21.4015 13.269 21.3039 13.3066 21.2129C13.3443 21.1219 13.4001 21.0394 13.4697 20.9697L20.9697 13.4697C21.0394 13.4 21.1218 13.3444 21.2129 13.3066C21.3039 13.2689 21.4015 13.25 21.5 13.25Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M20 4.99902C20.0985 4.99902 20.1961 5.01892 20.2871 5.05664C20.3782 5.09438 20.4606 5.15 20.5303 5.21973C20.6 5.28938 20.6556 5.37184 20.6934 5.46289C20.7311 5.55392 20.751 5.65146 20.751 5.75C20.751 5.84855 20.7311 5.94607 20.6934 6.03711C20.6556 6.12816 20.6 6.21062 20.5303 6.28027L6.28027 20.5303C6.13955 20.671 5.94901 20.75 5.75 20.75C5.551 20.75 5.36045 20.671 5.21973 20.5303C5.07901 20.3895 5.00001 20.199 5 20C5 19.801 5.07902 19.6105 5.21973 19.4697L19.4697 5.21973C19.5394 5.14999 19.6218 5.09438 19.7129 5.05664C19.8039 5.01891 19.9015 4.99903 20 4.99902Z",
+    fill: "currentColor"
+  })));
+};
+
+export { ResizeDiagonal };
+//# sourceMappingURL=ResizeDiagonal.js.map

package/es/components/_Icon/Icon.assets/ResizeDiagonal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeDiagonal.js","sources":["../../../../src/components/_Icon/Icon.assets/ResizeDiagonal.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconProps } from '../IconRoot';\n\nexport const ResizeDiagonal: React.FC<IconProps> = (props) => (\n    <svg width=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" {...props} xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n            d=\"M21.5 13.25C21.5985 13.25 21.6961 13.269 21.7871 13.3066C21.8781 13.3443 21.9606 13.4001 22.0303 13.4697C22.1 13.5394 22.1556 13.6218 22.1934 13.7129C22.2311 13.8039 22.25 13.9015 22.25 14C22.25 14.0985 22.2311 14.1961 22.1934 14.2871C22.1556 14.3782 22.1 14.4606 22.0303 14.5303L14.5303 22.0303C14.4606 22.0999 14.3781 22.1557 14.2871 22.1934C14.1961 22.231 14.0985 22.25 14 22.25C13.9015 22.25 13.8039 22.2311 13.7129 22.1934C13.6218 22.1556 13.5394 22.1 13.4697 22.0303C13.4001 21.9606 13.3443 21.8781 13.3066 21.7871C13.269 21.6961 13.25 21.5985 13.25 21.5C13.25 21.4015 13.269 21.3039 13.3066 21.2129C13.3443 21.1219 13.4001 21.0394 13.4697 20.9697L20.9697 13.4697C21.0394 13.4 21.1218 13.3444 21.2129 13.3066C21.3039 13.2689 21.4015 13.25 21.5 13.25Z\"\n            fill=\"currentColor\"\n        />\n        <path\n            d=\"M20 4.99902C20.0985 4.99902 20.1961 5.01892 20.2871 5.05664C20.3782 5.09438 20.4606 5.15 20.5303 5.21973C20.6 5.28938 20.6556 5.37184 20.6934 5.46289C20.7311 5.55392 20.751 5.65146 20.751 5.75C20.751 5.84855 20.7311 5.94607 20.6934 6.03711C20.6556 6.12816 20.6 6.21062 20.5303 6.28027L6.28027 20.5303C6.13955 20.671 5.94901 20.75 5.75 20.75C5.551 20.75 5.36045 20.671 5.21973 20.5303C5.07901 20.3895 5.00001 20.199 5 20C5 19.801 5.07902 19.6105 5.21973 19.4697L19.4697 5.21973C19.5394 5.14999 19.6218 5.09438 19.7129 5.05664C19.8039 5.01891 19.9015 4.99903 20 4.99902Z\"\n            fill=\"currentColor\"\n        />\n    </svg>\n);\n"],"names":["ResizeDiagonal","props","React","createElement","_extends","width","viewBox","fill","xmlns","_path","d","_path2"],"mappings":";;;;IAIaA,cAAmC,GAAG,SAAtCA,cAAmCA,CAAIC,KAAK,EAAA;AAAA,EAAA,oBACrDC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AAAKC,IAAAA,KAAK,EAAC,MAAM;AAACC,IAAAA,OAAO,EAAC,WAAW;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAAKN,KAAK,EAAA;AAAEO,IAAAA,KAAK,EAAC,4BAAA;AAA4B,GAAA,CAAA,EAAAC,KAAA,KAAAA,KAAA,gBAC3FP,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACIO,IAAAA,CAAC,EAAC,svBAAsvB;AACxvBH,IAAAA,IAAI,EAAC,cAAA;GACR,CAAC,GAAAI,MAAA,KAAAA,MAAA,gBACFT,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACIO,IAAAA,CAAC,EAAC,0jBAA0jB;AAC5jBH,IAAAA,IAAI,EAAC,cAAA;GACR,CAAC,CACD,CAAC,CAAA;AAAA;;;;"}

package/es/components/_Icon/Icons/IconResizeDiagonal.js

@@ -0,0 +1,22 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { ResizeDiagonal } from '../Icon.assets/ResizeDiagonal.js';
+import { IconRoot } from '../IconRoot.js';
+
+var _excluded = ["size", "color", "className"];
+var IconResizeDiagonal = function IconResizeDiagonal(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(IconRoot, _extends({
+    className: className,
+    size: size,
+    color: color,
+    icon: ResizeDiagonal
+  }, rest));
+};
+
+export { IconResizeDiagonal };
+//# sourceMappingURL=IconResizeDiagonal.js.map

package/es/components/_Icon/Icons/IconResizeDiagonal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconResizeDiagonal.js","sources":["../../../../src/components/_Icon/Icons/IconResizeDiagonal.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ResizeDiagonal } from '../Icon.assets/ResizeDiagonal';\nimport { IconRoot, IconProps } from '../IconRoot';\n\nexport const IconResizeDiagonal: React.FC<IconProps> = ({ size = 's', color, className, ...rest }) => {\n    return <IconRoot className={className} size={size} color={color} icon={ResizeDiagonal} {...rest} />;\n};\n"],"names":["IconResizeDiagonal","_ref","_ref$size","size","color","className","rest","_objectWithoutProperties","_excluded","React","createElement","IconRoot","_extends","icon","ResizeDiagonal"],"mappings":";;;;;;IAKaA,kBAAuC,GAAG,SAA1CA,kBAAuCA,CAAAC,IAAA,EAAkD;AAAA,EAAA,IAAAC,SAAA,GAAAD,IAAA,CAA5CE,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,GAAG,GAAAA,SAAA;IAAEE,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AAC3F,EAAA,oBAAOC,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAAC,QAAA,CAAA;AAACP,IAAAA,SAAS,EAAEA,SAAU;AAACF,IAAAA,IAAI,EAAEA,IAAK;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAACS,IAAAA,IAAI,EAAEC,cAAAA;GAAoBR,EAAAA,IAAI,CAAG,CAAC,CAAA;AACvG;;;;"}

package/es/index.css

@@ -349,14 +349,17 @@
 
 .Subtitle_styles_g6d0r2_b810c19__dce1fd86{font-family:var(--typo-font-family);font-size:var(--typo-font-size);font-style:var(--typo-font-style);-webkit-letter-spacing:var(--typo-font-letter-spacing);-moz-letter-spacing:var(--typo-font-letter-spacing);-ms-letter-spacing:var(--typo-font-letter-spacing);letter-spacing:var(--typo-font-letter-spacing);line-height:var(--typo-font-line-height);font-weight:var(--typo-font-weight);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}.Subtitle_styles_g6d0r2_b810c19__dce1fd86.Subtitle_styles_g6d0r2_withNoWrap__dce1fd86{white-space:nowrap;}
 
+.Popup_styles_1dvwxdu_bvkpf6n__17d6e35c .Popup_styles_1dvwxdu_draggablePopupWrapper__17d6e35c{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.Popup_styles_1dvwxdu_bvkpf6n__17d6e35c .Popup_styles_1dvwxdu_draggingPopupWrapper__17d6e35c{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}
 
-.Popup_styles_gq4luz_s1cjo3us__bb610b96{width:0;}
-.Popup_styles_gq4luz_p5u7tqa__bb610b96{position:relative;max-width:100%;pointer-events:all;}
-.Popup_styles_gq4luz_p1f40oul__bb610b96{position:var(--p1f40oul-0);z-index:var(--p1f40oul-1);left:var(--p1f40oul-2);right:var(--p1f40oul-3);top:var(--p1f40oul-4);bottom:var(--p1f40oul-5);-webkit-transform:var(--p1f40oul-6);-ms-transform:var(--p1f40oul-6);transform:var(--p1f40oul-6);}
+.Popup_styles_1dvwxdu_s5u7tqa__17d6e35c{width:0;}
+.Popup_styles_1dvwxdu_p1f40oul__17d6e35c{position:relative;max-width:100%;pointer-events:all;}
+.Popup_styles_1dvwxdu_p1ug7bn2__17d6e35c{position:var(--p1ug7bn2-0);z-index:var(--p1ug7bn2-1);left:var(--p1ug7bn2-2);right:var(--p1ug7bn2-3);top:var(--p1ug7bn2-4);bottom:var(--p1ug7bn2-5);-webkit-transform:var(--p1ug7bn2-6);-ms-transform:var(--p1ug7bn2-6);transform:var(--p1ug7bn2-6);}
+.Popup_styles_1dvwxdu_i10c9529__17d6e35c{color:var(--text-secondary);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c:hover{color:var(--text-secondary-hover);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c:active{color:var(--text-secondary-active);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c.Popup_styles_1dvwxdu_resizableTopRightIcon__17d6e35c{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c.Popup_styles_1dvwxdu_resizableBottomRightIcon__17d6e35c{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c.Popup_styles_1dvwxdu_resizableBottomLeftIcon__17d6e35c{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popup_styles_1dvwxdu_i10c9529__17d6e35c.Popup_styles_1dvwxdu_resizableTopLeftIcon__17d6e35c{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
 
-.Modal_styles_1gt0sfn_m7npn1w__75045114{border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
-.Modal_styles_1gt0sfn_m16phoaz__75045114{position:relative;padding:var(--plasma-modal-content-padding);}
-.Modal_styles_1gt0sfn_c5bx5hr__75045114{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;color:var(--plasma-modal-close-button-color);position:absolute;}.Modal_styles_1gt0sfn_c5bx5hr__75045114::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Modal_styles_1gt0sfn_c5bx5hr__75045114.Modal_styles_1gt0sfn_focusVisible__75045114:focus::before,.Modal_styles_1gt0sfn_c5bx5hr__75045114[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}.Modal_styles_1gt0sfn_c5bx5hr__75045114:hover{color:var(--plasma-modal-close-button-hover-color);}.Modal_styles_1gt0sfn_c5bx5hr__75045114:active{color:var(--plasma-modal-close-button-active-color);}
+.Modal_styles_1obtvtw_b7npn1w__a2f4e50d{height:100%;}
+.Modal_styles_1obtvtw_m16phoaz__a2f4e50d{height:100%;box-sizing:border-box;border-radius:var(--plasma-modal-body-border-radius);padding:var(--plasma-modal-body-padding);background:var(--plasma-modal-body-background);box-shadow:var(--shadow-down-soft-l);}
+.Modal_styles_1obtvtw_m5bx5hr__a2f4e50d{position:relative;padding:var(--plasma-modal-content-padding);}
+.Modal_styles_1obtvtw_cjp242v__a2f4e50d{top:0;right:0;width:1.5rem;height:1.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:none;border-radius:var(--plasma-modal-close-button-radius);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;position:relative;color:var(--plasma-modal-close-button-color);position:absolute;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma-modal-close-button-radius) + 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.Modal_styles_1obtvtw_cjp242v__a2f4e50d.Modal_styles_1obtvtw_focusVisible__a2f4e50d:focus::before,.Modal_styles_1obtvtw_cjp242v__a2f4e50d[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-modal-outline-focus-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:hover{color:var(--plasma-modal-close-button-hover-color);}.Modal_styles_1obtvtw_cjp242v__a2f4e50d:active{color:var(--plasma-modal-close-button-active-color);}
 
 .NotificationsPortal_6417q6_s19gbs9t__4166aeb6 > .NotificationsPortal_6417q6_popupBaseRoot__4166aeb6{overflow:hidden;}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.330.0-dev.0",
+  "version": "0.331.0-canary.1655.16171144116.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -128,6 +128,7 @@
     "lodash.throttle": "4.1.1",
     "rc-tree": "5.11.0",
     "rc-virtual-list": "3.18.1",
+    "re-resizable": "6.10.3",
     "react-draggable": "4.4.3",
     "react-hot-toast": "2.5.2",
     "react-number-format": "5.4.3",
@@ -137,5 +138,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "fb3652d0496ba839897b74469332d4e644b37e23"
+  "gitHead": "bf9e5f4ef8bbf0370ff796d691bcabca0874699e"
 }

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_hiddenIcons1, _resizable_hiddenIcons2, _resizable_hiddenIcons3;
         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)({
@@ -257,10 +271,10 @@ var popupRoot = function(Root) {
         var portalRef = (0, _react.useRef)(null);
         var contentRef = (0, _react.useRef)(null);
         var innerRef = (0, _plasmacore.useForkRef)(contentRef, outerRootRef);
+        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 : '');
         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 rootNode = /*#__PURE__*/ _react.default.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ _react.default.createElement(_PopupRoot.PopupRoot, _object_spread({
@@ -271,7 +285,45 @@ 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, {
+            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,
+            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(_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(_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(_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(_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)(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize),
+            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 +350,7 @@ var popupConfig = {
     name: 'Popup',
     tag: 'div',
     layout: popupRoot,
-    base: '',
+    base: _Popupstyles.base,
     variations: {},
     defaults: {}
 };