@salutejs/plasma-new-hope 0.328.1-canary.2061.16018714039.0 → 0.329.0-canary.1655.16029761547.0

package/es/components/Popup/Popup.tokens.js

@@ -4,7 +4,12 @@ var classes = {
    */
   root: 'popup-base-root',
   endAnimation: 'popup-end-animation',
-  endTransition: 'popup-end-transition'
+  endTransition: 'popup-end-transition',
+  resizableContainer: 'resizable-container',
+  resizableTopRightIcon: 'resizable-top-right-icon',
+  resizableBottomRightIcon: 'resizable-bottom-right-icon',
+  resizableBottomLeftIcon: 'resizable-bottom-left-icon',
+  resizableTopLeftIcon: 'resizable-top-left-icon'
 };
 
 export { classes };

package/es/components/Popup/Popup.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.tokens.js","sources":["../../../src/components/Popup/Popup.tokens.ts"],"sourcesContent":["export const classes = {\n    /*\n     * Класс корневого компонента PopupRoot: `popup-base-root`\n     */\n    root: 'popup-base-root',\n    endAnimation: 'popup-end-animation',\n    endTransition: 'popup-end-transition',\n};\n"],"names":["classes","root","endAnimation","endTransition"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnB;AACJ;AACA;AACIC,EAAAA,IAAI,EAAE,iBAAiB;AACvBC,EAAAA,YAAY,EAAE,qBAAqB;AACnCC,EAAAA,aAAa,EAAE,sBAAA;AACnB;;;;"}
+{"version":3,"file":"Popup.tokens.js","sources":["../../../src/components/Popup/Popup.tokens.ts"],"sourcesContent":["export const classes = {\n    /*\n     * Класс корневого компонента PopupRoot: `popup-base-root`\n     */\n    root: 'popup-base-root',\n    endAnimation: 'popup-end-animation',\n    endTransition: 'popup-end-transition',\n    resizableContainer: 'resizable-container',\n    resizableTopRightIcon: 'resizable-top-right-icon',\n    resizableBottomRightIcon: 'resizable-bottom-right-icon',\n    resizableBottomLeftIcon: 'resizable-bottom-left-icon',\n    resizableTopLeftIcon: 'resizable-top-left-icon',\n};\n"],"names":["classes","root","endAnimation","endTransition","resizableContainer","resizableTopRightIcon","resizableBottomRightIcon","resizableBottomLeftIcon","resizableTopLeftIcon"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnB;AACJ;AACA;AACIC,EAAAA,IAAI,EAAE,iBAAiB;AACvBC,EAAAA,YAAY,EAAE,qBAAqB;AACnCC,EAAAA,aAAa,EAAE,sBAAsB;AACrCC,EAAAA,kBAAkB,EAAE,qBAAqB;AACzCC,EAAAA,qBAAqB,EAAE,0BAA0B;AACjDC,EAAAA,wBAAwB,EAAE,6BAA6B;AACvDC,EAAAA,uBAAuB,EAAE,4BAA4B;AACrDC,EAAAA,oBAAoB,EAAE,yBAAA;AAC1B;;;;"}

package/es/components/Popup/PopupContext.css

@@ -1,4 +1,8 @@
+.IconRoot_7pl7ig_svvlqhf__32c458a1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:var(--svvlqhf-0);height:var(--svvlqhf-0);-webkit-flex:0 0 var(--svvlqhf-0);-ms-flex:0 0 var(--svvlqhf-0);flex:0 0 var(--svvlqhf-0);}
 
-.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_sejy82_s5u7tqa__dfce5444{width:0;}
+.Popup_styles_sejy82_p1f40oul__dfce5444{position:relative;max-width:100%;pointer-events:all;}
+.Popup_styles_sejy82_p1ug7bn2__dfce5444{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_sejy82_i10c9529__dfce5444{color:var(--text-secondary);}.Popup_styles_sejy82_i10c9529__dfce5444:hover{color:var(--text-secondary-hover);}.Popup_styles_sejy82_i10c9529__dfce5444:active{color:var(--text-secondary-active);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopRightIcon__dfce5444{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomRightIcon__dfce5444{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomLeftIcon__dfce5444{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopLeftIcon__dfce5444{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}

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

@@ -0,0 +1,53 @@
+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(iconSize) {
+  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'): 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","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,CAAID,QAA2B,EAAiB;AACxE,EAAA,IAAME,IAAI,GAAGH,gBAAgB,CAACC,QAAQ,CAAC,CAAA;AACvC,EAAA,IAAMG,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

@@ -346,9 +346,11 @@
 .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_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_sejy82_s5u7tqa__dfce5444{width:0;}
+.Popup_styles_sejy82_p1f40oul__dfce5444{position:relative;max-width:100%;pointer-events:all;}
+.Popup_styles_sejy82_p1ug7bn2__dfce5444{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_sejy82_i10c9529__dfce5444{color:var(--text-secondary);}.Popup_styles_sejy82_i10c9529__dfce5444:hover{color:var(--text-secondary-hover);}.Popup_styles_sejy82_i10c9529__dfce5444:active{color:var(--text-secondary-active);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopRightIcon__dfce5444{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomRightIcon__dfce5444{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableBottomLeftIcon__dfce5444{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popup_styles_sejy82_i10c9529__dfce5444.Popup_styles_sejy82_resizableTopLeftIcon__dfce5444{-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);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.328.1-canary.2061.16018714039.0",
+  "version": "0.329.0-canary.1655.16029761547.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -79,7 +79,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.201.1-canary.2061.16018714039.0",
+    "@salutejs/plasma-sb-utils": "0.201.0-dev.0",
     "@salutejs/plasma-themes": "0.34.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
@@ -117,7 +117,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.200.1-canary.2061.16018714039.0",
+    "@salutejs/plasma-core": "1.200.0-dev.0",
     "@salutejs/react-maskinput": "3.2.6",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -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": "5bfd594f086753138b828db25d28bed621c15a52"
+  "gitHead": "86b811fa67746a68315a97b13057bf4ebf38d22f"
 }

package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js

@@ -573,28 +573,36 @@ var datePickerRangeRoot = function(Root) {
             calendarSecondValue
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalFirstDate(startExternalValue || undefined);
+            if (!defaultFirstDate) {
+                updateExternalFirstDate(startExternalValue || undefined);
+            }
         }, [
             startExternalValue,
             format,
             lang
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalSecondDate(endExternalValue || undefined);
+            if (!defaultSecondDate) {
+                updateExternalSecondDate(endExternalValue || undefined);
+            }
         }, [
             endExternalValue,
             format,
             lang
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalFirstDate(defaultFirstDate);
+            if (!startExternalValue) {
+                updateExternalFirstDate(defaultFirstDate);
+            }
         }, [
             defaultFirstDate,
             format,
             lang
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalSecondDate(defaultSecondDate);
+            if (!endExternalValue) {
+                updateExternalSecondDate(defaultSecondDate);
+            }
         }, [
             defaultSecondDate,
             format,

package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -371,14 +371,18 @@ var datePickerRoot = function(Root) {
             opened
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalDate(value);
+            if (!defaultDate) {
+                updateExternalDate(value);
+            }
         }, [
             value,
             format,
             lang
         ]);
         (0, _react.useLayoutEffect)(function() {
-            updateExternalDate(defaultDate);
+            if (!value) {
+                updateExternalDate(defaultDate);
+            }
         }, [
             defaultDate,
             format,

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, draggable = _param.draggable, handle = _param.handle, resizable = _param.resizable, rest = _object_without_properties(_param, [
             "id",
             "withAnimation",
             "onClose",
@@ -148,7 +148,10 @@ var modalRoot = function(Root) {
             "opened",
             "isOpen",
             "hasBody",
-            "hasClose"
+            "hasClose",
+            "draggable",
+            "handle",
+            "resizable"
         ]);
         var innerIsOpen = Boolean(isOpen || opened);
         var innerHasClose = hasClose === undefined && hasBody || hasClose;
@@ -203,7 +206,10 @@ var modalRoot = function(Root) {
             zIndex: zIndex,
             overlay: hasBody ? overlayNode : /*#__PURE__*/ _react.default.createElement(Root, {
                 view: view
-            }, overlayNode)
+            }, overlayNode),
+            draggable: draggable,
+            handle: handle,
+            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, {

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

@@ -21,8 +21,10 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _plasmacore = require("@salutejs/plasma-core");
+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");
@@ -230,7 +232,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, _param_draggable = _param.draggable, draggable = _param_draggable === void 0 ? false : _param_draggable, handle = _param.handle, resizable = _param.resizable, rest = _object_without_properties(_param, [
             "id",
             "isOpen",
             "opened",
@@ -243,8 +245,15 @@ var popupRoot = function(Root) {
             "zIndex",
             "popupInfo",
             "withAnimation",
-            "className"
+            "className",
+            "draggable",
+            "handle",
+            "resizable"
         ]);
+        var resizableDimensions = (0, _react.useRef)({
+            width: 0,
+            height: 0
+        });
         var innerIsOpen = isOpen || opened;
         var uniqId = (0, _utils.safeUseId)();
         var innerId = id || uniqId;
@@ -257,10 +266,30 @@ 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 : '');
+        // Хук для получения размеров попапа, которые задаются как минимальные габариты при ресайзе.
+        (0, _react.useLayoutEffect)(function() {
+            var _contentRef_current;
+            if (!innerIsOpen) return;
+            var rect = (_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.getBoundingClientRect();
+            if (rect) {
+                resizableDimensions.current = {
+                    width: rect.width,
+                    height: rect.height
+                };
+            }
+            return function() {
+                resizableDimensions.current = {
+                    width: 0,
+                    height: 0
+                };
+            };
+        }, [
+            innerIsOpen
+        ]);
         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 +300,38 @@ var popupRoot = function(Root) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), children));
+        }, rest), /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
+            enable: resizable && !resizable.disabled ? (0, _utils1.getResizeDirections)(resizable.directions) : false,
+            resizeRatio: (0, _utils1.getRatioBasedOnPlacement)(placement),
+            minWidth: resizableDimensions.current.width,
+            minHeight: resizableDimensions.current.height,
+            handleComponent: !(resizable === null || resizable === void 0 ? void 0 : resizable.hiddenIcon) && {
+                topRight: /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableTopRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }),
+                bottomRight: /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomRightIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }),
+                bottomLeft: /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                    className: _Popuptokens.classes.resizableBottomLeftIcon,
+                    color: "inherit",
+                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+                }),
+                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)(resizable === null || resizable === void 0 ? void 0 : resizable.iconSize),
+            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight
+        }, children)));
         if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
             return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
                 container: frame.current
@@ -298,7 +358,7 @@ var popupConfig = {
     name: 'Popup',
     tag: 'div',
     layout: popupRoot,
-    base: '',
+    base: _Popupstyles.base,
     variations: {},
     defaults: {}
 };