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

package/cjs/components/NavigationDrawer/NavigationDrawer_x642ct.css

@@ -0,0 +1 @@
+

package/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.css

@@ -0,0 +1,39 @@
+.base_1vjakah_b15waymg__f123ad8a{color:var(--plasma-counter-color);background-color:var(--plasma-counter-background);}
+
+.base_mpen2h_b1t6e429__c433f416{font-family:var(--plasma-counter-font-family);font-size:var(--plasma-counter-font-size);font-style:var(--plasma-counter-font-style);font-weight:var(--plasma-counter-font-weight);-webkit-letter-spacing:var(--plasma-counter-letter-spacing);-moz-letter-spacing:var(--plasma-counter-letter-spacing);-ms-letter-spacing:var(--plasma-counter-letter-spacing);letter-spacing:var(--plasma-counter-letter-spacing);line-height:var(--plasma-counter-lineheight);border-radius:var(--plasma-counter-border-radius);height:var(--plasma-counter-height);padding:var(--plasma-counter-padding);}.base_mpen2h_b1t6e429__c433f416.base_mpen2h__PlasmaCounterRound__c433f416{width:var(--plasma-counter-height);}
+
+.Counter_styles_1uue90v_b1dqw7l5__00d0b847{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;}
+
+.Indicator_styles_v8giip_b5hgwnm__ffd4472f{border-radius:100%;}
+
+.base_1rjb5ly_bu942ai__5ed616c0{background-color:var(--plasma-indicator-color);}
+
+.base_7436cm_b17chi2r__254eb615{height:var(--plasma-indicator-size);width:var(--plasma-indicator-size);}
+
+.MenuItem_styles_1jc86lh_e1gh4xi__47602df6{margin:auto;--plasma-counter-background:var(--plasma-navigation-drawer-avatar-extra-counter-background);--plasma-counter-color:var(--plasma-navigation-drawer-avatar-extra-counter-color);--plasma-counter-border-radius:var(--plasma-navigation-drawer-avatar-extra-counter-border-radius);--plasma-counter-height:var(--plasma-navigation-drawer-avatar-extra-counter-height);--plasma-counter-padding:var(--plasma-navigation-drawer-avatar-extra-counter-padding);--plasma-counter-font-family:var(--plasma-navigation-drawer-avatar-extra-counter-font-family);--plasma-counter-font-size:var(--plasma-navigation-drawer-avatar-extra-counter-font-size);--plasma-counter-font-style:var(--plasma-navigation-drawer-avatar-extra-counter-font-style);--plasma-counter-font-weight:var(--plasma-navigation-drawer-avatar-extra-counter-font-weight);--plasma-counter-letter-spacing:var(--plasma-navigation-drawer-avatar-extra-counter-letter-spacing);--plasma-counter-lineheight:var(--plasma-navigation-drawer-avatar-extra-counter-lineheight);}
+.MenuItem_styles_1jc86lh_stvv1dr__47602df6{margin:auto;--plasma-indicator-size:var(--plasma-navigation-drawer-menu-item-indicator-size);--plasma-indicator-color:var(--plasma-navigation-drawer-menu-item-indicator-color);}
+.MenuItem_styles_1jc86lh_i1dhk4c__47602df6{position:relative;width:var(--plasma-navigation-drawer-icon-container-size);height:var(--plasma-navigation-drawer-icon-container-size);}
+.MenuItem_styles_1jc86lh_i7xwwzp__47602df6{margin:var(--plasma-navigation-drawer-icon-margin);}.MenuItem_styles_1jc86lh_i7xwwzp__47602df6 div{width:var(--plasma-navigation-drawer-icon-size);height:var(--plasma-navigation-drawer-icon-size);}
+.MenuItem_styles_1jc86lh_cc26hzf__47602df6{position:relative;width:var(--plasma-navigation-drawer-menu-item-content-left-size);height:var(--plasma-navigation-drawer-menu-item-content-left-size);}
+.MenuItem_styles_1jc86lh_ry1cfbm__47602df6{position:relative;height:var(--plasma-navigation-drawer-icon-container-size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.MenuItem_styles_1jc86lh_l14iipd__47602df6{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.base_1vy4dme_bcchm3r__d3e4eaba{font-family:var(--plasma-link-font-family);color:var(--plasma-link-color);}.base_1vy4dme_bcchm3r__d3e4eaba::before{border-bottom:var(--plasma-link-underline-border) solid currentColor;}.base_1vy4dme_bcchm3r__d3e4eaba:hover{color:var(--plasma-link-color-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:active{color:var(--plasma-link-color-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:active::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited{color:var(--plasma-link-color-visited,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover{color:var(--plasma-link-color-visited-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active{color:var(--plasma-link-color-visited-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active::before{opacity:1;}
+
+.base_1w750p8_b1j3f4f__d44baab5[disabled]{opacity:var(--plasma-link-disabled-opacity);cursor:not-allowed;}.base_1w750p8_b1j3f4f__d44baab5[disabled]:hover,.base_1w750p8_b1j3f4f__d44baab5[disabled]:active{color:var(--plasma-link-color);}.base_1w750p8_b1j3f4f__d44baab5[disabled]::before{opacity:1;}
+
+.base_avgvpx_b1iw8i40__d86ab9a8:focus{outline:none;}.base_avgvpx_b1iw8i40__d86ab9a8:focus-visible::before{top:-0.0625rem;right:-0.0625rem;opacity:1;border-radius:0.375rem;box-shadow:0 0 0 0.0625rem var(--plasma-link-color-focus);border-bottom:none;}
+
+.Link_1oiwct5_b1j91s21__5667805d{position:relative;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color 0.15s ease-in;transition:color 0.15s ease-in;}.Link_1oiwct5_b1j91s21__5667805d::before{content:'';position:absolute;inset:0;opacity:0.4;}
+
+.Link_config_zeymp2_d1calyk9__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_s1a4vrvj__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_t1hxd0ad__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_p1mbfmqw__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_a17wwycj__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-accent);--plasma-link-color-hover:var(--text-accent-hover);--plasma-link-color-active:var(--text-accent-active);--plasma-link-color-visited:var(--text-accent);--plasma-link-color-visited-hover:var(--text-accent-hover);--plasma-link-color-visited-active:var(--text-accent-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_p14qgpkv__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-positive);--plasma-link-color-hover:var(--text-positive-hover);--plasma-link-color-active:var(--text-positive-active);--plasma-link-color-visited:var(--text-positive);--plasma-link-color-visited-hover:var(--text-positive-hover);--plasma-link-color-visited-active:var(--text-positive-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_w1py6g25__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-warning);--plasma-link-color-hover:var(--text-warning-hover);--plasma-link-color-active:var(--text-warning-active);--plasma-link-color-visited:var(--text-warning);--plasma-link-color-visited-hover:var(--text-warning-hover);--plasma-link-color-visited-active:var(--text-warning-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_n4mb9bq__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-negative);--plasma-link-color-hover:var(--text-negative-hover);--plasma-link-color-active:var(--text-negative-active);--plasma-link-color-visited:var(--text-negative);--plasma-link-color-visited-hover:var(--text-negative-hover);--plasma-link-color-visited-active:var(--text-negative-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_c2p2703__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:inherit;--plasma-link-color-hover:inherit;--plasma-link-color-active:inherit;--plasma-link-color-visited:inherit;--plasma-link-color-visited-hover:inherit;--plasma-link-color-visited-active:inherit;--plasma-link-underline-border:0.0625rem;}
+.Link_config_zeymp2_tnow91e__36d400a7{--plasma-link-disabled-opacity:0.4;}
+.Link_config_zeymp2_tt8wdu3__36d400a7{--plasma-link-color-focus:var(--text-accent);}

package/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cls = require('classnames');
+var MenuItem_styles = require('./MenuItem.styles.js');
+var NavigationDrawer_tokens = require('../../NavigationDrawer.tokens.js');
+var Link = require('../../../../examples/components/Link/Link.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+var MenuItem = function MenuItem(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__default.default(NavigationDrawer_tokens.classes.navigationDrawerMenuItem, selected && NavigationDrawer_tokens.classes.navigationDrawerMenuItemSelected, disabled && NavigationDrawer_tokens.classes.navigationDrawerMenuItemDisabled, hasCustomContentLeft && NavigationDrawer_tokens.classes.navigationDrawerMenuItemContentLeft, !withContentLeft && NavigationDrawer_tokens.classes.navigationDrawerMenuItemWithoutContentLeft);
+  var indicators = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, hasIndicator && /*#__PURE__*/React__default.default.createElement(MenuItem_styles.StyledIndicator, {
+    className: cls__default.default(withContentLeft && NavigationDrawer_tokens.classes.navigationDrawerMenuIndicator)
+  }), counter !== undefined && /*#__PURE__*/React__default.default.createElement(MenuItem_styles.ExtraCounter, {
+    className: cls__default.default(withContentLeft && NavigationDrawer_tokens.classes.navigationDrawerMenuCounter),
+    count: counter
+  }));
+  var contentLeftItem = contentLeft ? /*#__PURE__*/React__default.default.createElement(MenuItem_styles.ContentLeftWrapper, null, contentLeft, indicators) : null;
+  var iconItem = icon ? /*#__PURE__*/React__default.default.createElement(MenuItem_styles.IconWrapper, null, /*#__PURE__*/React__default.default.createElement(MenuItem_styles.Icon, null, icon), indicators) : null;
+  var menuItemContent = withContentLeft ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft && contentLeftItem, icon && iconItem, isOpen && /*#__PURE__*/React__default.default.createElement(MenuItem_styles.Label, null, label)) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(MenuItem_styles.Label, null, label), /*#__PURE__*/React__default.default.createElement(MenuItem_styles.RightContentWrapper, null, indicators));
+  return typeof onClick === 'function' ? /*#__PURE__*/React__default.default.createElement("div", {
+    className: menuClasses,
+    onClick: onMenuClick
+  }, menuItemContent) : /*#__PURE__*/React__default.default.createElement(Link.Link, {
+    className: cls__default.default(NavigationDrawer_tokens.classes.navigationDrawerMenuLink, menuClasses),
+    href: href,
+    rel: "noopener noreferrer",
+    target: target
+  }, menuItemContent);
+};
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/NavigationDrawer/ui/MenuItem/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuItemProps } from 'src/components/NavigationDrawer/ui/MenuItem/MenuItem.types';\nimport cls from 'classnames';\nimport {\n    ExtraCounter,\n    IconWrapper,\n    Icon,\n    StyledIndicator,\n    RightContentWrapper,\n    ContentLeftWrapper,\n    Label,\n} from 'src/components/NavigationDrawer/ui/MenuItem/MenuItem.styles';\nimport { classes } from 'src/components/NavigationDrawer/NavigationDrawer.tokens';\nimport { Link } from 'src/examples/components/Link/Link';\n\nexport const MenuItem: React.FC<MenuItemProps> = (props) => {\n    const {\n        onClick,\n        href,\n        target,\n        disabled,\n        selected,\n        icon,\n        contentLeft,\n        withContentLeft,\n        label,\n        isOpen,\n        hasIndicator,\n        counter,\n    } = props;\n\n    const onMenuClick = typeof onClick === 'function' && !disabled ? onClick : undefined;\n\n    const hasCustomContentLeft = contentLeft && withContentLeft;\n\n    const menuClasses = cls(\n        classes.navigationDrawerMenuItem,\n        selected && classes.navigationDrawerMenuItemSelected,\n        disabled && classes.navigationDrawerMenuItemDisabled,\n        hasCustomContentLeft && classes.navigationDrawerMenuItemContentLeft,\n        !withContentLeft && classes.navigationDrawerMenuItemWithoutContentLeft,\n    );\n\n    const indicators = (\n        <>\n            {hasIndicator && (\n                <StyledIndicator className={cls(withContentLeft && classes.navigationDrawerMenuIndicator)} />\n            )}\n            {counter !== undefined && (\n                <ExtraCounter className={cls(withContentLeft && classes.navigationDrawerMenuCounter)} count={counter} />\n            )}\n        </>\n    );\n\n    const contentLeftItem = contentLeft ? (\n        <ContentLeftWrapper>\n            {contentLeft}\n            {indicators}\n        </ContentLeftWrapper>\n    ) : null;\n\n    const iconItem = icon ? (\n        <IconWrapper>\n            <Icon>{icon}</Icon>\n            {indicators}\n        </IconWrapper>\n    ) : null;\n\n    const menuItemContent = withContentLeft ? (\n        <>\n            {contentLeft && contentLeftItem}\n            {icon && iconItem}\n            {isOpen && <Label>{label}</Label>}\n        </>\n    ) : (\n        <>\n            <Label>{label}</Label>\n            <RightContentWrapper>{indicators}</RightContentWrapper>\n        </>\n    );\n\n    return typeof onClick === 'function' ? (\n        <div className={menuClasses} onClick={onMenuClick}>\n            {menuItemContent}\n        </div>\n    ) : (\n        <Link\n            className={cls(classes.navigationDrawerMenuLink, menuClasses)}\n            href={href}\n            rel=\"noopener noreferrer\"\n            target={target}\n        >\n            {menuItemContent}\n        </Link>\n    );\n};\n"],"names":["MenuItem","props","onClick","href","target","disabled","selected","icon","contentLeft","withContentLeft","label","isOpen","hasIndicator","counter","onMenuClick","undefined","hasCustomContentLeft","menuClasses","cls","classes","navigationDrawerMenuItem","navigationDrawerMenuItemSelected","navigationDrawerMenuItemDisabled","navigationDrawerMenuItemContentLeft","navigationDrawerMenuItemWithoutContentLeft","indicators","React","createElement","Fragment","StyledIndicator","className","navigationDrawerMenuIndicator","ExtraCounter","navigationDrawerMenuCounter","count","contentLeftItem","ContentLeftWrapper","iconItem","IconWrapper","Icon","menuItemContent","Label","RightContentWrapper","Link","navigationDrawerMenuLink","rel"],"mappings":";;;;;;;;;;;;;;;IAeaA,QAAiC,GAAG,SAApCA,QAAiCA,CAAIC,KAAK,EAAK;AACxD,EAAA,IACIC,OAAO,GAYPD,KAAK,CAZLC,OAAO;IACPC,IAAI,GAWJF,KAAK,CAXLE,IAAI;IACJC,MAAM,GAUNH,KAAK,CAVLG,MAAM;IACNC,QAAQ,GASRJ,KAAK,CATLI,QAAQ;IACRC,QAAQ,GAQRL,KAAK,CARLK,QAAQ;IACRC,IAAI,GAOJN,KAAK,CAPLM,IAAI;IACJC,WAAW,GAMXP,KAAK,CANLO,WAAW;IACXC,eAAe,GAKfR,KAAK,CALLQ,eAAe;IACfC,KAAK,GAILT,KAAK,CAJLS,KAAK;IACLC,MAAM,GAGNV,KAAK,CAHLU,MAAM;IACNC,YAAY,GAEZX,KAAK,CAFLW,YAAY;IACZC,OAAO,GACPZ,KAAK,CADLY,OAAO,CAAA;AAGX,EAAA,IAAMC,WAAW,GAAG,OAAOZ,OAAO,KAAK,UAAU,IAAI,CAACG,QAAQ,GAAGH,OAAO,GAAGa,SAAS,CAAA;AAEpF,EAAA,IAAMC,oBAAoB,GAAGR,WAAW,IAAIC,eAAe,CAAA;AAE3D,EAAA,IAAMQ,WAAW,GAAGC,oBAAG,CACnBC,+BAAO,CAACC,wBAAwB,EAChCd,QAAQ,IAAIa,+BAAO,CAACE,gCAAgC,EACpDhB,QAAQ,IAAIc,+BAAO,CAACG,gCAAgC,EACpDN,oBAAoB,IAAIG,+BAAO,CAACI,mCAAmC,EACnE,CAACd,eAAe,IAAIU,+BAAO,CAACK,0CAChC,CAAC,CAAA;AAED,EAAA,IAAMC,UAAU,gBACZC,sBAAA,CAAAC,aAAA,CAAAD,sBAAA,CAAAE,QAAA,EAAA,IAAA,EACKhB,YAAY,iBACTc,sBAAA,CAAAC,aAAA,CAACE,+BAAe,EAAA;AAACC,IAAAA,SAAS,EAAEZ,oBAAG,CAACT,eAAe,IAAIU,+BAAO,CAACY,6BAA6B,CAAA;GAAI,CAC/F,EACAlB,OAAO,KAAKE,SAAS,iBAClBW,sBAAA,CAAAC,aAAA,CAACK,4BAAY,EAAA;IAACF,SAAS,EAAEZ,oBAAG,CAACT,eAAe,IAAIU,+BAAO,CAACc,2BAA2B,CAAE;AAACC,IAAAA,KAAK,EAAErB,OAAAA;AAAQ,GAAE,CAE7G,CACL,CAAA;AAED,EAAA,IAAMsB,eAAe,GAAG3B,WAAW,gBAC/BkB,sBAAA,CAAAC,aAAA,CAACS,kCAAkB,QACd5B,WAAW,EACXiB,UACe,CAAC,GACrB,IAAI,CAAA;EAER,IAAMY,QAAQ,GAAG9B,IAAI,gBACjBmB,sBAAA,CAAAC,aAAA,CAACW,2BAAW,EACRZ,IAAAA,eAAAA,sBAAA,CAAAC,aAAA,CAACY,oBAAI,EAAEhC,IAAAA,EAAAA,IAAW,CAAC,EAClBkB,UACQ,CAAC,GACd,IAAI,CAAA;EAER,IAAMe,eAAe,GAAG/B,eAAe,gBACnCiB,sBAAA,CAAAC,aAAA,CAAAD,sBAAA,CAAAE,QAAA,EACKpB,IAAAA,EAAAA,WAAW,IAAI2B,eAAe,EAC9B5B,IAAI,IAAI8B,QAAQ,EAChB1B,MAAM,iBAAIe,sBAAA,CAAAC,aAAA,CAACc,qBAAK,EAAA,IAAA,EAAE/B,KAAa,CAClC,CAAC,gBAEHgB,sBAAA,CAAAC,aAAA,CAAAD,sBAAA,CAAAE,QAAA,EACIF,IAAAA,eAAAA,sBAAA,CAAAC,aAAA,CAACc,qBAAK,EAAE/B,IAAAA,EAAAA,KAAa,CAAC,eACtBgB,sBAAA,CAAAC,aAAA,CAACe,mCAAmB,EAAA,IAAA,EAAEjB,UAAgC,CACxD,CACL,CAAA;AAED,EAAA,OAAO,OAAOvB,OAAO,KAAK,UAAU,gBAChCwB,sBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKG,IAAAA,SAAS,EAAEb,WAAY;AAACf,IAAAA,OAAO,EAAEY,WAAAA;AAAY,GAAA,EAC7C0B,eACA,CAAC,gBAENd,sBAAA,CAAAC,aAAA,CAACgB,SAAI,EAAA;IACDb,SAAS,EAAEZ,oBAAG,CAACC,+BAAO,CAACyB,wBAAwB,EAAE3B,WAAW,CAAE;AAC9Dd,IAAAA,IAAI,EAAEA,IAAK;AACX0C,IAAAA,GAAG,EAAC,qBAAqB;AACzBzC,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EAEdoC,eACC,CACT,CAAA;AACL;;;;"}

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

@@ -0,0 +1,64 @@
+require('./MenuItem.styles_1jc86lh.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@linaria/react');
+var common = require('../../../../engines/common.js');
+var Counter$1 = require('../../../Counter/Counter.js');
+var Indicator$1 = require('../../../Indicator/Indicator.js');
+
+var mergedCounterConfig = /*#__PURE__*/common.mergeConfig(Counter$1.counterConfig);
+var Counter = /*#__PURE__*/common.component(mergedCounterConfig);
+var indicatorMergedConfig = /*#__PURE__*/common.mergeConfig(Indicator$1.indicatorConfig);
+var Indicator = /*#__PURE__*/common.component(indicatorMergedConfig);
+var _exp = function _exp() {
+  return Counter;
+};
+var ExtraCounter = /*#__PURE__*/react.styled(_exp())({
+  name: "ExtraCounter",
+  "class": "e1gh4xi",
+  propsAsIs: true
+});
+var _exp24 = function _exp24() {
+  return Indicator;
+};
+var StyledIndicator = /*#__PURE__*/react.styled(_exp24())({
+  name: "StyledIndicator",
+  "class": "stvv1dr",
+  propsAsIs: true
+});
+var IconWrapper = /*#__PURE__*/react.styled('div')({
+  name: "IconWrapper",
+  "class": "i1dhk4c",
+  propsAsIs: false
+});
+var Icon = /*#__PURE__*/react.styled('div')({
+  name: "Icon",
+  "class": "i7xwwzp",
+  propsAsIs: false
+});
+var ContentLeftWrapper = /*#__PURE__*/react.styled('div')({
+  name: "ContentLeftWrapper",
+  "class": "cc26hzf",
+  propsAsIs: false
+});
+var RightContentWrapper = /*#__PURE__*/react.styled('div')({
+  name: "RightContentWrapper",
+  "class": "ry1cfbm",
+  propsAsIs: false
+});
+var Label = /*#__PURE__*/react.styled('span')({
+  name: "Label",
+  "class": "l14iipd",
+  propsAsIs: false
+});
+
+exports.ContentLeftWrapper = ContentLeftWrapper;
+exports.ExtraCounter = ExtraCounter;
+exports.Icon = Icon;
+exports.IconWrapper = IconWrapper;
+exports.Label = Label;
+exports.RightContentWrapper = RightContentWrapper;
+exports.StyledIndicator = StyledIndicator;
+//# sourceMappingURL=MenuItem.styles.js.map

package/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../../src/components/NavigationDrawer/ui/MenuItem/MenuItem.styles.ts"],"sourcesContent":["import { counterConfig, counterTokens } from 'src/components/Counter';\nimport { styled } from '@linaria/react';\nimport { component, mergeConfig } from 'src/engines';\nimport { indicatorTokens, indicatorConfig } from 'src/components/Indicator';\nimport { applyEllipsis } from 'src/mixins';\n\nimport { tokens } from '../../NavigationDrawer.tokens';\n\nconst mergedCounterConfig = mergeConfig(counterConfig);\nconst Counter = component(mergedCounterConfig);\n\nconst indicatorMergedConfig = mergeConfig(indicatorConfig);\nconst Indicator: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = component(\n    indicatorMergedConfig,\n) as never;\n\nexport const ExtraCounter = styled(Counter)`\n    margin: auto;\n\n    ${counterTokens.background}: var(${tokens.counterBackground});\n    ${counterTokens.color}: var(${tokens.counterColor});\n    ${counterTokens.borderRadius}: var(${tokens.counterBorderRadius});\n    ${counterTokens.height}: var(${tokens.counterHeight});\n    ${counterTokens.padding}: var(${tokens.counterPadding});\n    ${counterTokens.fontFamily}: var(${tokens.counterFontFamily});\n    ${counterTokens.fontSize}: var(${tokens.counterFontSize});\n    ${counterTokens.fontStyle}: var(${tokens.counterFontStyle});\n    ${counterTokens.fontWeight}: var(${tokens.counterFontWeight});\n    ${counterTokens.letterSpacing}: var(${tokens.counterLetterSpacing});\n    ${counterTokens.lineHeight}: var(${tokens.counterLineHeight});\n`;\n\nexport const StyledIndicator = styled(Indicator)`\n    margin: auto;\n\n    ${indicatorTokens.size}: var(${tokens.menuItemIndicatorSize});\n    ${indicatorTokens.color}: var(${tokens.menuItemIndicatorColor});\n`;\n\nexport const IconWrapper = styled.div`\n    position: relative;\n    width: var(${tokens.iconContainerSize});\n    height: var(${tokens.iconContainerSize});\n`;\n\nexport const Icon = styled.div`\n    margin: var(${tokens.iconMargin});\n    div {\n        width: var(${tokens.iconSize});\n        height: var(${tokens.iconSize});\n    }\n`;\n\nexport const ContentLeftWrapper = styled.div`\n    position: relative;\n    width: var(${tokens.menuItemContentLeftSize});\n    height: var(${tokens.menuItemContentLeftSize});\n`;\n\nexport const RightContentWrapper = styled.div`\n    position: relative;\n    height: var(${tokens.iconContainerSize});\n    display: flex;\n`;\n\nexport const Label = styled.span`\n    ${applyEllipsis()};\n`;\n"],"names":["mergedCounterConfig","mergeConfig","counterConfig","Counter","component","indicatorMergedConfig","indicatorConfig","Indicator","_exp","ExtraCounter","styled","name","class","propsAsIs","_exp24","StyledIndicator","IconWrapper","Icon","ContentLeftWrapper","RightContentWrapper","Label"],"mappings":";;;;;;;;;AAQA,IAAMA,mBAAmB,gBAAGC,kBAAW,CAACC,uBAAa,CAAC,CAAA;AACtD,IAAMC,OAAO,gBAAGC,gBAAS,CAACJ,mBAAmB,CAAC,CAAA;AAE9C,IAAMK,qBAAqB,gBAAGJ,kBAAW,CAACK,2BAAe,CAAC,CAAA;AAC1D,IAAMC,SAAwE,gBAAGH,gBAAS,CACtFC,qBACJ,CAAU,CAAA;AAAC,IAAAG,IAAA,GAbOA,SAaPA,IAAAA,GAAA;AAAA,EAAA,OAEwBL,OAAO,CAAA;AAAA,CAAA,CAAA;AAAnC,IAAMM,YAAY,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,cAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAcjC,EAAA;AAAC,IAAAC,MAAA,GA7BgBA,SA6BhBA,MAAAA,GAAA;AAAA,EAAA,OAEoCP,SAAS,CAAA;AAAA,CAAA,CAAA;AAAxC,IAAMQ,eAAe,gBAAGL,YAAM,CAAAI,MAAA,EAAA,CAAA,CAAA;AAAAH,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKpC,EAAA;AAEM,IAAMG,WAAW,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIhC,EAAA;AAEM,IAAMI,IAAI,gBAAGP,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAMzB,EAAA;AAEM,IAAMK,kBAAkB,gBAAGR,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIvC,EAAA;AAEM,IAAMM,mBAAmB,gBAAGT,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,qBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAIxC,EAAA;AAEM,IAAMO,KAAK,gBAAGV,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE1B;;;;;;;;;;"}

package/cjs/components/NavigationDrawer/ui/MenuItem/MenuItem.styles_1jc86lh.css

@@ -0,0 +1,7 @@
+.e1gh4xi{margin:auto;--plasma-counter-background:var(--plasma-navigation-drawer-avatar-extra-counter-background);--plasma-counter-color:var(--plasma-navigation-drawer-avatar-extra-counter-color);--plasma-counter-border-radius:var(--plasma-navigation-drawer-avatar-extra-counter-border-radius);--plasma-counter-height:var(--plasma-navigation-drawer-avatar-extra-counter-height);--plasma-counter-padding:var(--plasma-navigation-drawer-avatar-extra-counter-padding);--plasma-counter-font-family:var(--plasma-navigation-drawer-avatar-extra-counter-font-family);--plasma-counter-font-size:var(--plasma-navigation-drawer-avatar-extra-counter-font-size);--plasma-counter-font-style:var(--plasma-navigation-drawer-avatar-extra-counter-font-style);--plasma-counter-font-weight:var(--plasma-navigation-drawer-avatar-extra-counter-font-weight);--plasma-counter-letter-spacing:var(--plasma-navigation-drawer-avatar-extra-counter-letter-spacing);--plasma-counter-lineheight:var(--plasma-navigation-drawer-avatar-extra-counter-lineheight);}
+.stvv1dr{margin:auto;--plasma-indicator-size:var(--plasma-navigation-drawer-menu-item-indicator-size);--plasma-indicator-color:var(--plasma-navigation-drawer-menu-item-indicator-color);}
+.i1dhk4c{position:relative;width:var(--plasma-navigation-drawer-icon-container-size);height:var(--plasma-navigation-drawer-icon-container-size);}
+.i7xwwzp{margin:var(--plasma-navigation-drawer-icon-margin);}.i7xwwzp div{width:var(--plasma-navigation-drawer-icon-size);height:var(--plasma-navigation-drawer-icon-size);}
+.cc26hzf{position:relative;width:var(--plasma-navigation-drawer-menu-item-content-left-size);height:var(--plasma-navigation-drawer-menu-item-content-left-size);}
+.ry1cfbm{position:relative;height:var(--plasma-navigation-drawer-icon-container-size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l14iipd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

package/cjs/components/NavigationDrawer/ui/Section/Section.css

@@ -0,0 +1,48 @@
+.base_1vjakah_b15waymg__f123ad8a{color:var(--plasma-counter-color);background-color:var(--plasma-counter-background);}
+
+.base_mpen2h_b1t6e429__c433f416{font-family:var(--plasma-counter-font-family);font-size:var(--plasma-counter-font-size);font-style:var(--plasma-counter-font-style);font-weight:var(--plasma-counter-font-weight);-webkit-letter-spacing:var(--plasma-counter-letter-spacing);-moz-letter-spacing:var(--plasma-counter-letter-spacing);-ms-letter-spacing:var(--plasma-counter-letter-spacing);letter-spacing:var(--plasma-counter-letter-spacing);line-height:var(--plasma-counter-lineheight);border-radius:var(--plasma-counter-border-radius);height:var(--plasma-counter-height);padding:var(--plasma-counter-padding);}.base_mpen2h_b1t6e429__c433f416.base_mpen2h__PlasmaCounterRound__c433f416{width:var(--plasma-counter-height);}
+
+.Counter_styles_1uue90v_b1dqw7l5__00d0b847{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;}
+
+.Indicator_styles_v8giip_b5hgwnm__ffd4472f{border-radius:100%;}
+
+.base_1rjb5ly_bu942ai__5ed616c0{background-color:var(--plasma-indicator-color);}
+
+.base_7436cm_b17chi2r__254eb615{height:var(--plasma-indicator-size);width:var(--plasma-indicator-size);}
+
+.MenuItem_styles_1jc86lh_e1gh4xi__47602df6{margin:auto;--plasma-counter-background:var(--plasma-navigation-drawer-avatar-extra-counter-background);--plasma-counter-color:var(--plasma-navigation-drawer-avatar-extra-counter-color);--plasma-counter-border-radius:var(--plasma-navigation-drawer-avatar-extra-counter-border-radius);--plasma-counter-height:var(--plasma-navigation-drawer-avatar-extra-counter-height);--plasma-counter-padding:var(--plasma-navigation-drawer-avatar-extra-counter-padding);--plasma-counter-font-family:var(--plasma-navigation-drawer-avatar-extra-counter-font-family);--plasma-counter-font-size:var(--plasma-navigation-drawer-avatar-extra-counter-font-size);--plasma-counter-font-style:var(--plasma-navigation-drawer-avatar-extra-counter-font-style);--plasma-counter-font-weight:var(--plasma-navigation-drawer-avatar-extra-counter-font-weight);--plasma-counter-letter-spacing:var(--plasma-navigation-drawer-avatar-extra-counter-letter-spacing);--plasma-counter-lineheight:var(--plasma-navigation-drawer-avatar-extra-counter-lineheight);}
+.MenuItem_styles_1jc86lh_stvv1dr__47602df6{margin:auto;--plasma-indicator-size:var(--plasma-navigation-drawer-menu-item-indicator-size);--plasma-indicator-color:var(--plasma-navigation-drawer-menu-item-indicator-color);}
+.MenuItem_styles_1jc86lh_i1dhk4c__47602df6{position:relative;width:var(--plasma-navigation-drawer-icon-container-size);height:var(--plasma-navigation-drawer-icon-container-size);}
+.MenuItem_styles_1jc86lh_i7xwwzp__47602df6{margin:var(--plasma-navigation-drawer-icon-margin);}.MenuItem_styles_1jc86lh_i7xwwzp__47602df6 div{width:var(--plasma-navigation-drawer-icon-size);height:var(--plasma-navigation-drawer-icon-size);}
+.MenuItem_styles_1jc86lh_cc26hzf__47602df6{position:relative;width:var(--plasma-navigation-drawer-menu-item-content-left-size);height:var(--plasma-navigation-drawer-menu-item-content-left-size);}
+.MenuItem_styles_1jc86lh_ry1cfbm__47602df6{position:relative;height:var(--plasma-navigation-drawer-icon-container-size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.MenuItem_styles_1jc86lh_l14iipd__47602df6{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.base_1vy4dme_bcchm3r__d3e4eaba{font-family:var(--plasma-link-font-family);color:var(--plasma-link-color);}.base_1vy4dme_bcchm3r__d3e4eaba::before{border-bottom:var(--plasma-link-underline-border) solid currentColor;}.base_1vy4dme_bcchm3r__d3e4eaba:hover{color:var(--plasma-link-color-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:active{color:var(--plasma-link-color-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:active::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited{color:var(--plasma-link-color-visited,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover{color:var(--plasma-link-color-visited-hover,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:hover::before{opacity:1;}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active{color:var(--plasma-link-color-visited-active,var(--plasma-link-color));}.base_1vy4dme_bcchm3r__d3e4eaba:visited:active::before{opacity:1;}
+
+.base_1w750p8_b1j3f4f__d44baab5[disabled]{opacity:var(--plasma-link-disabled-opacity);cursor:not-allowed;}.base_1w750p8_b1j3f4f__d44baab5[disabled]:hover,.base_1w750p8_b1j3f4f__d44baab5[disabled]:active{color:var(--plasma-link-color);}.base_1w750p8_b1j3f4f__d44baab5[disabled]::before{opacity:1;}
+
+.base_avgvpx_b1iw8i40__d86ab9a8:focus{outline:none;}.base_avgvpx_b1iw8i40__d86ab9a8:focus-visible::before{top:-0.0625rem;right:-0.0625rem;opacity:1;border-radius:0.375rem;box-shadow:0 0 0 0.0625rem var(--plasma-link-color-focus);border-bottom:none;}
+
+.Link_1oiwct5_b1j91s21__5667805d{position:relative;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color 0.15s ease-in;transition:color 0.15s ease-in;}.Link_1oiwct5_b1j91s21__5667805d::before{content:'';position:absolute;inset:0;opacity:0.4;}
+
+.Link_config_zeymp2_d1calyk9__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-primary);--plasma-link-color-hover:var(--text-primary-hover);--plasma-link-color-active:var(--text-primary-active);--plasma-link-color-visited:var(--text-primary);--plasma-link-color-visited-hover:var(--text-primary-hover);--plasma-link-color-visited-active:var(--text-primary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_s1a4vrvj__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-secondary);--plasma-link-color-hover:var(--text-secondary-hover);--plasma-link-color-active:var(--text-secondary-active);--plasma-link-color-visited:var(--text-secondary);--plasma-link-color-visited-hover:var(--text-secondary-hover);--plasma-link-color-visited-active:var(--text-secondary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_t1hxd0ad__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-tertiary);--plasma-link-color-hover:var(--text-tertiary-hover);--plasma-link-color-active:var(--text-tertiary-active);--plasma-link-color-visited:var(--text-tertiary);--plasma-link-color-visited-hover:var(--text-tertiary-hover);--plasma-link-color-visited-active:var(--text-tertiary-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_p1mbfmqw__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-paragraph);--plasma-link-color-hover:var(--text-paragraph-hover);--plasma-link-color-active:var(--text-paragraph-active);--plasma-link-color-visited:var(--text-paragraph);--plasma-link-color-visited-hover:var(--text-paragraph-hover);--plasma-link-color-visited-active:var(--text-paragraph-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_a17wwycj__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-accent);--plasma-link-color-hover:var(--text-accent-hover);--plasma-link-color-active:var(--text-accent-active);--plasma-link-color-visited:var(--text-accent);--plasma-link-color-visited-hover:var(--text-accent-hover);--plasma-link-color-visited-active:var(--text-accent-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_p14qgpkv__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-positive);--plasma-link-color-hover:var(--text-positive-hover);--plasma-link-color-active:var(--text-positive-active);--plasma-link-color-visited:var(--text-positive);--plasma-link-color-visited-hover:var(--text-positive-hover);--plasma-link-color-visited-active:var(--text-positive-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_w1py6g25__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-warning);--plasma-link-color-hover:var(--text-warning-hover);--plasma-link-color-active:var(--text-warning-active);--plasma-link-color-visited:var(--text-warning);--plasma-link-color-visited-hover:var(--text-warning-hover);--plasma-link-color-visited-active:var(--text-warning-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_n4mb9bq__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:var(--text-negative);--plasma-link-color-hover:var(--text-negative-hover);--plasma-link-color-active:var(--text-negative-active);--plasma-link-color-visited:var(--text-negative);--plasma-link-color-visited-hover:var(--text-negative-hover);--plasma-link-color-visited-active:var(--text-negative-active);--plasma-link-underline-border:0;}
+.Link_config_zeymp2_c2p2703__36d400a7{--plasma-link-font-family:var(--plasma-typo-text-m-font-family);--plasma-link-color:inherit;--plasma-link-color-hover:inherit;--plasma-link-color-active:inherit;--plasma-link-color-visited:inherit;--plasma-link-color-visited-hover:inherit;--plasma-link-color-visited-active:inherit;--plasma-link-underline-border:0.0625rem;}
+.Link_config_zeymp2_tnow91e__36d400a7{--plasma-link-disabled-opacity:0.4;}
+.Link_config_zeymp2_tt8wdu3__36d400a7{--plasma-link-color-focus:var(--text-accent);}
+
+.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);}
+
+.Section_styles_147bzzp_swlgppx__60e0567c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.Section_styles_147bzzp_s1qtk9zr__60e0567c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding:var(--plasma-navigation-drawer-section-padding);gap:var(--plasma-navigation-drawer-section-header-gap);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;box-sizing:border-box;height:var(--plasma-navigation-drawer-sidebar-width-closed);min-width:var(--plasma-navigation-drawer-sidebar-width-closed);color:var(--plasma-navigation-drawer-section-color);font-size:var(--plasma-navigation-drawer-section-font-size);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);-webkit-letter-spacing:var(--plasma-typo-text-s-letter-spacing);-moz-letter-spacing:var(--plasma-typo-text-s-letter-spacing);-ms-letter-spacing:var(--plasma-typo-text-s-letter-spacing);letter-spacing:var(--plasma-typo-text-s-letter-spacing);border-radius:var(--plasma-navigation-drawer-section-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.Section_styles_147bzzp_sqhdtrl__60e0567c{height:var(--plasma-navigation-drawer-divider-height);background:var(--plasma-navigation-drawer-divider-color);margin:10px 0;}
+.Section_styles_147bzzp_sxoeynx__60e0567c{width:var(--plasma-navigation-drawer-icon-container-size);min-width:var(--plasma-navigation-drawer-icon-container-size);height:var(--plasma-navigation-drawer-icon-container-size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.Section_styles_147bzzp_sxoeynx__60e0567c div{width:var(--plasma-navigation-drawer-icon-size);height:var(--plasma-navigation-drawer-icon-size);}
+.Section_styles_147bzzp_a6i3xtj__60e0567c{margin:auto;}
+.Section_styles_147bzzp_lnmmdxt__60e0567c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cls = require('classnames');
+var MenuItem = require('../MenuItem/MenuItem.js');
+var NavigationDrawer_tokens = require('../../NavigationDrawer.tokens.js');
+var Section_styles = require('./Section.styles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+var _SectionDivider;
+var _excluded = ["items", "label", "withContentLeft", "isOpen", "className", "hasDivider"];
+var Section = function Section(_ref) {
+  var items = _ref.items,
+    label = _ref.label,
+    withContentLeft = _ref.withContentLeft,
+    isOpen = _ref.isOpen,
+    className = _ref.className,
+    _ref$hasDivider = _ref.hasDivider,
+    hasDivider = _ref$hasDivider === void 0 ? false : _ref$hasDivider,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var icon = /*#__PURE__*/React__default.default.createElement(Section_styles.SectionIcon, null, /*#__PURE__*/React__default.default.createElement(Section_styles.ArrowIcon, {
+    className: cls__default.default(isCollapsed && NavigationDrawer_tokens.classes.navigationDrawerArrowInverse),
+    color: "inherit"
+  }));
+  return /*#__PURE__*/React__default.default.createElement(Section_styles.StyledSection, _rollupPluginBabelHelpers.extends({
+    className: className
+  }, rest), label ? /*#__PURE__*/React__default.default.createElement(Section_styles.SectionHeader, {
+    onClick: function onClick() {
+      return setIsCollapsed(!isCollapsed);
+    }
+  }, withContentLeft && label && icon, isOpen && /*#__PURE__*/React__default.default.createElement(Section_styles.Label, null, label), !withContentLeft && icon) : hasDivider && (_SectionDivider || (_SectionDivider = /*#__PURE__*/React__default.default.createElement(Section_styles.SectionDivider, null))), !isCollapsed && items.map(function (item, index) {
+    return /*#__PURE__*/React__default.default.createElement(MenuItem.MenuItem, _rollupPluginBabelHelpers.extends({}, item, {
+      key: index,
+      withContentLeft: withContentLeft,
+      isOpen: isOpen
+    }));
+  }));
+};
+
+exports.Section = Section;
+//# sourceMappingURL=Section.js.map

package/cjs/components/NavigationDrawer/ui/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../../../src/components/NavigationDrawer/ui/Section/Section.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cls from 'classnames';\n\nimport { MenuItem } from '../MenuItem/MenuItem';\nimport { classes } from '../../NavigationDrawer.tokens';\n\nimport { SectionProps } from './Section.types';\nimport { StyledSection, SectionHeader, SectionDivider, SectionIcon, ArrowIcon, Label } from './Section.styles';\n\nexport const Section = <T extends boolean = false>({\n    items,\n    label,\n    withContentLeft,\n    isOpen,\n    className,\n    hasDivider = false,\n    ...rest\n}: SectionProps<T>) => {\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    const icon = (\n        <SectionIcon>\n            <ArrowIcon className={cls(isCollapsed && classes.navigationDrawerArrowInverse)} color=\"inherit\" />\n        </SectionIcon>\n    );\n\n    return (\n        <StyledSection className={className} {...rest}>\n            {label ? (\n                <SectionHeader onClick={() => setIsCollapsed(!isCollapsed)}>\n                    {withContentLeft && label && icon}\n                    {isOpen && <Label>{label}</Label>}\n                    {!withContentLeft && icon}\n                </SectionHeader>\n            ) : (\n                hasDivider && <SectionDivider />\n            )}\n\n            {!isCollapsed &&\n                items.map((item, index) => (\n                    <MenuItem {...item} key={index} withContentLeft={withContentLeft} isOpen={isOpen} />\n                ))}\n        </StyledSection>\n    );\n};\n"],"names":["Section","_ref","items","label","withContentLeft","isOpen","className","_ref$hasDivider","hasDivider","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","isCollapsed","setIsCollapsed","icon","React","createElement","SectionIcon","ArrowIcon","cls","classes","navigationDrawerArrowInverse","color","StyledSection","_extends","SectionHeader","onClick","Label","_SectionDivider","SectionDivider","map","item","index","MenuItem","key"],"mappings":";;;;;;;;;;;;;;;;;;IASaA,OAAO,GAAG,SAAVA,OAAOA,CAAAC,IAAA,EAQG;AAAA,EAAA,IAPnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAAC,eAAA,GAAAN,IAAA,CACTO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,eAAA;AACfE,IAAAA,IAAI,GAAAC,iDAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAsCC,cAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA9CI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,IAAI,gBACNC,sBAAA,CAAAC,aAAA,CAACC,0BAAW,EAAA,IAAA,eACRF,sBAAA,CAAAC,aAAA,CAACE,wBAAS,EAAA;IAAChB,SAAS,EAAEiB,oBAAG,CAACP,WAAW,IAAIQ,+BAAO,CAACC,4BAA4B,CAAE;AAACC,IAAAA,KAAK,EAAC,SAAA;AAAS,GAAE,CACxF,CAChB,CAAA;AAED,EAAA,oBACIP,sBAAA,CAAAC,aAAA,CAACO,4BAAa,EAAAC,iCAAA,CAAA;AAACtB,IAAAA,SAAS,EAAEA,SAAAA;GAAeG,EAAAA,IAAI,GACxCN,KAAK,gBACFgB,sBAAA,CAAAC,aAAA,CAACS,4BAAa,EAAA;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,MAAA,OAAMb,cAAc,CAAC,CAACD,WAAW,CAAC,CAAA;AAAA,KAAA;GACrDZ,EAAAA,eAAe,IAAID,KAAK,IAAIe,IAAI,EAChCb,MAAM,iBAAIc,sBAAA,CAAAC,aAAA,CAACW,oBAAK,EAAA,IAAA,EAAE5B,KAAa,CAAC,EAChC,CAACC,eAAe,IAAIc,IACV,CAAC,GAEhBV,UAAU,KAAAwB,eAAA,KAAAA,eAAA,gBAAIb,sBAAA,CAAAC,aAAA,CAACa,6BAAc,EAAA,IAAE,CAAC,CAAA,CACnC,EAEA,CAACjB,WAAW,IACTd,KAAK,CAACgC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK,EAAA;IAAA,oBAClBjB,sBAAA,CAAAC,aAAA,CAACiB,iBAAQ,EAAAT,iCAAA,KAAKO,IAAI,EAAA;AAAEG,MAAAA,GAAG,EAAEF,KAAM;AAAChC,MAAAA,eAAe,EAAEA,eAAgB;AAACC,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAAA,CAAE,CAAC,CAAA;AAAA,GACvF,CACM,CAAC,CAAA;AAExB;;;;"}

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

@@ -0,0 +1,49 @@
+require('./Section.styles_147bzzp.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@linaria/react');
+var IconDisclosureDownCentered = require('../../../_Icon/Icons/IconDisclosureDownCentered.js');
+
+var StyledSection = /*#__PURE__*/react.styled('div')({
+  name: "StyledSection",
+  "class": "swlgppx",
+  propsAsIs: false
+});
+var SectionHeader = /*#__PURE__*/react.styled('div')({
+  name: "SectionHeader",
+  "class": "s1qtk9zr",
+  propsAsIs: false
+});
+var SectionDivider = /*#__PURE__*/react.styled('div')({
+  name: "SectionDivider",
+  "class": "sqhdtrl",
+  propsAsIs: false
+});
+var SectionIcon = /*#__PURE__*/react.styled('div')({
+  name: "SectionIcon",
+  "class": "sxoeynx",
+  propsAsIs: false
+});
+var _exp15 = function _exp15() {
+  return IconDisclosureDownCentered.IconDisclosureDownCentered;
+};
+var ArrowIcon = /*#__PURE__*/react.styled(_exp15())({
+  name: "ArrowIcon",
+  "class": "a6i3xtj",
+  propsAsIs: true
+});
+var Label = /*#__PURE__*/react.styled('span')({
+  name: "Label",
+  "class": "lnmmdxt",
+  propsAsIs: false
+});
+
+exports.ArrowIcon = ArrowIcon;
+exports.Label = Label;
+exports.SectionDivider = SectionDivider;
+exports.SectionHeader = SectionHeader;
+exports.SectionIcon = SectionIcon;
+exports.StyledSection = StyledSection;
+//# sourceMappingURL=Section.styles.js.map

package/cjs/components/NavigationDrawer/ui/Section/Section.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.styles.js","sources":["../../../../../src/components/NavigationDrawer/ui/Section/Section.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { IconDisclosureDownCentered } from 'src/components/_Icon';\nimport { applyEllipsis } from 'src/mixins';\n\nimport { tokens } from '../../NavigationDrawer.tokens';\n\nexport const StyledSection = styled.div`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const SectionHeader = styled.div`\n    display: flex;\n    flex-direction: row;\n    padding: var(${tokens.sectionPadding});\n    gap: var(${tokens.sectionHeaderGap});\n    align-items: center;\n    cursor: pointer;\n    box-sizing: border-box;\n    height: var(${tokens.sidebarWidthClosed});\n    min-width: var(${tokens.sidebarWidthClosed});\n\n    color: var(${tokens.sectionColor});\n    font-size: var(${tokens.sectionFontSize});\n    font-family: var(--plasma-typo-body-s-font-family);\n    font-style: var(--plasma-typo-text-s-font-style);\n    font-weight: var(--plasma-typo-text-s-font-weight);\n    line-height: var(--plasma-typo-text-s-line-height);\n    letter-spacing: var(--plasma-typo-text-s-letter-spacing);\n\n    border-radius: var(${tokens.sectionBorderRadius});\n\n    user-select: none;\n`;\n\nexport const SectionDivider = styled.div`\n    height: var(${tokens.dividerHeight});\n    background: var(${tokens.dividerColor});\n    margin: 10px 0;\n`;\n\nexport const SectionIcon = styled.div`\n    width: var(${tokens.iconContainerSize});\n    min-width: var(${tokens.iconContainerSize});\n    height: var(${tokens.iconContainerSize});\n    display: flex;\n\n    div {\n        width: var(${tokens.iconSize});\n        height: var(${tokens.iconSize});\n    }\n`;\n\nexport const ArrowIcon = styled(IconDisclosureDownCentered)`\n    margin: auto;\n`;\n\nexport const Label = styled.span`\n    ${applyEllipsis()};\n`;\n"],"names":["StyledSection","styled","name","class","propsAsIs","SectionHeader","SectionDivider","SectionIcon","_exp15","IconDisclosureDownCentered","ArrowIcon","Label"],"mappings":";;;;;;;AAMO,IAAMA,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGlC,EAAA;AAEM,IAAMC,aAAa,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAsBlC,EAAA;AAEM,IAAME,cAAc,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAInC,EAAA;AAEM,IAAMG,WAAW,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAUhC,EAAA;AAAC,IAAAI,MAAA,GAlDgBA,SAkDhBA,MAAAA,GAAA;AAAA,EAAA,OAE8BC,qDAA0B,CAAA;AAAA,CAAA,CAAA;AAAnD,IAAMC,SAAS,gBAAGT,YAAM,CAAAO,MAAA,EAAA,CAAA,CAAA;AAAAN,EAAAA,IAAA,EAAA,WAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAE9B,EAAA;AAEM,IAAMO,KAAK,gBAAGV,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAE1B;;;;;;;;;"}

package/cjs/components/NavigationDrawer/ui/Section/Section.styles_147bzzp.css

@@ -0,0 +1,6 @@
+.swlgppx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1qtk9zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding:var(--plasma-navigation-drawer-section-padding);gap:var(--plasma-navigation-drawer-section-header-gap);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;box-sizing:border-box;height:var(--plasma-navigation-drawer-sidebar-width-closed);min-width:var(--plasma-navigation-drawer-sidebar-width-closed);color:var(--plasma-navigation-drawer-section-color);font-size:var(--plasma-navigation-drawer-section-font-size);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);-webkit-letter-spacing:var(--plasma-typo-text-s-letter-spacing);-moz-letter-spacing:var(--plasma-typo-text-s-letter-spacing);-ms-letter-spacing:var(--plasma-typo-text-s-letter-spacing);letter-spacing:var(--plasma-typo-text-s-letter-spacing);border-radius:var(--plasma-navigation-drawer-section-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
+.sqhdtrl{height:var(--plasma-navigation-drawer-divider-height);background:var(--plasma-navigation-drawer-divider-color);margin:10px 0;}
+.sxoeynx{width:var(--plasma-navigation-drawer-icon-container-size);min-width:var(--plasma-navigation-drawer-icon-container-size);height:var(--plasma-navigation-drawer-icon-container-size);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.sxoeynx div{width:var(--plasma-navigation-drawer-icon-size);height:var(--plasma-navigation-drawer-icon-size);}
+.a6i3xtj{margin:auto;}
+.lnmmdxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

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

@@ -0,0 +1,9 @@
+require('./base_x642ct.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "b1jdq075";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/cjs/components/NavigationDrawer/variations/_size/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../src/components/NavigationDrawer/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/NavigationDrawer/variations/_size/base_x642ct.css

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+require('./base_x642ct.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "b1oz43b2";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/cjs/components/NavigationDrawer/variations/_view/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../src/components/NavigationDrawer/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/cjs/components/NavigationDrawer/variations/_view/base_x642ct.css

@@ -0,0 +1 @@
+

package/cjs/components/Popup/Popup.js

@@ -5,24 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var plasmaCore = require('@salutejs/plasma-core');
-var Draggable = require('react-draggable');
-var reResizable = require('re-resizable');
 var index = require('../../utils/index.js');
 var PopupRoot = require('./PopupRoot.js');
 var Popup_tokens = require('./Popup.tokens.js');
 var Popup_styles = require('./Popup.styles.js');
 var react = require('../../utils/react.js');
 var usePopup = require('./hooks/usePopup.js');
-var getResizeDirections = require('./utils/getResizeDirections.js');
-var getRatioBasedOnPlacement = require('./utils/getRatioBasedOnPlacement.js');
-var getHandleStyles = require('./utils/getHandleStyles.js');
+var Draggable = require('./ui/Draggable/Draggable.js');
+var Resizable = require('./ui/Resizable/Resizable.js');
 var canUseDOM = require('../../utils/canUseDOM.js');
 var Portal = require('../Portal/Portal.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var Draggable__default = /*#__PURE__*/_interopDefault(Draggable);
 
 var _excluded = ["id", "isOpen", "opened", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className", "draggable", "resizable"];
 var handlePosition = function handlePosition(placement, offset) {
@@ -86,7 +82,6 @@ var handlePosition = function handlePosition(placement, offset) {
  */
 var popupRoot = function popupRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
-    var _resizable$hiddenIcon, _resizable$icons, _resizable$hiddenIcon2, _resizable$icons2, _resizable$hiddenIcon3, _resizable$icons3, _resizable$hiddenIcon4, _resizable$icons4;
     var id = _ref.id,
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
@@ -108,11 +103,7 @@ var popupRoot = function popupRoot(Root) {
       draggable = _ref.draggable,
       outerResizable = _ref.resizable,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-    var nodeRef = React.useRef(null);
     var innerIsOpen = isOpen || opened;
-    var resizable = typeof outerResizable === 'boolean' ? {
-      disabled: !outerResizable
-    } : outerResizable;
     var uniqId = react.safeUseId();
     var innerId = id || uniqId;
     var _usePopup = usePopup.usePopup({
@@ -127,22 +118,11 @@ var popupRoot = function popupRoot(Root) {
       rootId = _usePopup.rootId;
     var portalRef = React.useRef(null);
     var contentRef = React.useRef(null);
-    var resizableContainer = React.useRef(null);
     var innerRef = plasmaCore.useForkRef(contentRef, outerRootRef);
     if (!isVisible && !innerIsOpen) {
       return null;
     }
     var cls = index.cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? Popup_tokens.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? Popup_tokens.classes.endTransition : '');
-    var handleResizeStart = function handleResizeStart() {
-      if (resizableContainer !== null && resizableContainer !== void 0 && resizableContainer.current && resizableContainer.current.resizable) {
-        resizableContainer.current.resizable.classList.toggle(Popup_tokens.classes.resizableContainerNoSelect);
-      }
-    };
-    var handleResizeStop = function handleResizeStop() {
-      if (resizableContainer !== null && resizableContainer !== void 0 && resizableContainer.current && resizableContainer.current.resizable) {
-        resizableContainer.current.resizable.classList.toggle(Popup_tokens.classes.resizableContainerNoSelect);
-      }
-    };
     var rootNode = /*#__PURE__*/React__default.default.createElement(Root, {
       className: cls
     }, overlay, /*#__PURE__*/React__default.default.createElement(PopupRoot.PopupRoot, _rollupPluginBabelHelpers.extends({
@@ -153,51 +133,12 @@ var popupRoot = function popupRoot(Root) {
       frame: frame,
       animationInfo: animationInfo,
       setVisible: setVisible
-    }, rest), /*#__PURE__*/React__default.default.createElement(Draggable__default.default, {
-      nodeRef: nodeRef,
-      defaultClassName: draggable ? Popup_tokens.classes.draggablePopupWrapper : undefined,
-      defaultClassNameDragging: draggable ? Popup_tokens.classes.draggingPopupWrapper : undefined,
-      disabled: !draggable,
-      cancel: ".".concat(Popup_tokens.classes.resizableHandleWrapper)
-    }, /*#__PURE__*/React__default.default.createElement("div", {
-      ref: nodeRef
-    }, /*#__PURE__*/React__default.default.createElement(reResizable.Resizable, {
-      ref: resizableContainer,
-      enable: resizable && !resizable.disabled ? getResizeDirections.getResizeDirections(resizable.directions) : false,
-      resizeRatio: getRatioBasedOnPlacement.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 && (_resizable$hiddenIcon = resizable.hiddenIcons) !== null && _resizable$hiddenIcon !== void 0 && _resizable$hiddenIcon.includes('top-right') ? undefined : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons = resizable.icons) === null || _resizable$icons === void 0 ? void 0 : _resizable$icons.topRight) || /*#__PURE__*/React__default.default.createElement(Popup_styles.IconResizeDiagonalStyled, {
-          className: Popup_tokens.classes.resizableTopRightIcon,
-          color: "inherit",
-          size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-        })),
-        bottomRight: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon2 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon2 !== void 0 && _resizable$hiddenIcon2.includes('bottom-right') ? undefined : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons2 = resizable.icons) === null || _resizable$icons2 === void 0 ? void 0 : _resizable$icons2.bottomRight) || /*#__PURE__*/React__default.default.createElement(Popup_styles.IconResizeDiagonalStyled, {
-          className: Popup_tokens.classes.resizableBottomRightIcon,
-          color: "inherit",
-          size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-        })),
-        bottomLeft: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon3 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon3 !== void 0 && _resizable$hiddenIcon3.includes('bottom-left') ? undefined : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons3 = resizable.icons) === null || _resizable$icons3 === void 0 ? void 0 : _resizable$icons3.bottomLeft) || /*#__PURE__*/React__default.default.createElement(Popup_styles.IconResizeDiagonalStyled, {
-          className: Popup_tokens.classes.resizableBottomLeftIcon,
-          color: "inherit",
-          size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-        })),
-        topLeft: resizable !== null && resizable !== void 0 && (_resizable$hiddenIcon4 = resizable.hiddenIcons) !== null && _resizable$hiddenIcon4 !== void 0 && _resizable$hiddenIcon4.includes('top-left') ? undefined : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, (resizable === null || resizable === void 0 || (_resizable$icons4 = resizable.icons) === null || _resizable$icons4 === void 0 ? void 0 : _resizable$icons4.topLeft) || /*#__PURE__*/React__default.default.createElement(Popup_styles.IconResizeDiagonalStyled, {
-          className: Popup_tokens.classes.resizableTopLeftIcon,
-          color: "inherit",
-          size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-        }))
-      },
-      className: Popup_tokens.classes.resizableContainer,
-      handleStyles: getHandleStyles.getHandleStyles(),
-      handleWrapperClass: Popup_tokens.classes.resizableHandleWrapper
-    }, children)))));
+    }, rest), /*#__PURE__*/React__default.default.createElement(Draggable.Draggable, {
+      draggable: draggable
+    }, /*#__PURE__*/React__default.default.createElement(Resizable.Resizable, {
+      resizable: outerResizable,
+      placement: placement
+    }, children))));
     if (typeof frame !== 'string' && frame && frame.current && canUseDOM.canUseDOM) {
       return /*#__PURE__*/React__default.default.createElement(Portal.Portal, {
         container: frame.current