@lidofinance/lido-ui 1.10.13 → 2.0.0-next.2

package/dist/cjs/popover/src/PopoverRootStyles.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PopoverWrapperStyle: ()=>PopoverWrapperStyle,
+    PopoverRootStyle: ()=>PopoverRootStyle
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireWildcard(require("styled-components"));
+const PopoverWrapperStyle = _styledComponents.default.div`
+  position: absolute;
+  z-index: 500;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: ${(param)=>{
+    let { $backdrop  } = param;
+    return $backdrop ? '100%' : '0px';
+}};
+`;
+const visibleCSS = (0, _styledComponents.css)`
+  opacity: 1;
+
+  &[data-placement] {
+    transform: translate(0, 0);
+  }
+`;
+const hiddenCSS = (0, _styledComponents.css)`
+  opacity: 0;
+
+  &[data-placement^='top'] {
+    transform: translateY(6px);
+  }
+  &[data-placement^='right'] {
+    transform: translateX(-6px);
+  }
+  &[data-placement^='bottom'] {
+    transform: translateY(-6px);
+  }
+  &[data-placement^='left'] {
+    transform: translateX(6px);
+  }
+`;
+const getTransitionCSS = (param)=>{
+    let { $transition  } = param;
+    return [
+        'exiting',
+        'exited'
+    ].includes($transition) ? hiddenCSS : visibleCSS;
+};
+const PopoverRootStyle = _styledComponents.default.div`
+  box-sizing: border-box;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  transition: opacity ${(param)=>{
+    let { $duration  } = param;
+    return $duration;
+}}ms ease;
+  transition-property: opacity, transform;
+
+  ${getTransitionCSS}
+`;
+
+//# sourceMappingURL=PopoverRootStyles.js.map

package/dist/cjs/popover/src/PopoverRootStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/PopoverRootStyles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { TransitionInnerProps } from '@lidofinance/transition'\n\ntype TransitionProps = {\n  $duration: number\n  $transition: TransitionInnerProps['transitionStatus']\n}\n\nexport const PopoverWrapperStyle = styled.div<{ $backdrop: boolean }>`\n  position: absolute;\n  z-index: 500;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  height: ${({ $backdrop }) => ($backdrop ? '100%' : '0px')};\n`\n\nconst visibleCSS = css`\n  opacity: 1;\n\n  &[data-placement] {\n    transform: translate(0, 0);\n  }\n`\n\nconst hiddenCSS = css`\n  opacity: 0;\n\n  &[data-placement^='top'] {\n    transform: translateY(6px);\n  }\n  &[data-placement^='right'] {\n    transform: translateX(-6px);\n  }\n  &[data-placement^='bottom'] {\n    transform: translateY(-6px);\n  }\n  &[data-placement^='left'] {\n    transform: translateX(6px);\n  }\n`\n\nconst getTransitionCSS = ({ $transition }: TransitionProps) => {\n  return ['exiting', 'exited'].includes($transition) ? hiddenCSS : visibleCSS\n}\n\nexport const PopoverRootStyle = styled.div<TransitionProps>`\n  box-sizing: border-box;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  transition: opacity ${({ $duration }) => $duration}ms ease;\n  transition-property: opacity, transform;\n\n  ${getTransitionCSS}\n`\n"],"names":["PopoverWrapperStyle","PopoverRootStyle","styled","div","$backdrop","visibleCSS","css","hiddenCSS","getTransitionCSS","$transition","includes","$duration"],"mappings":"AAAA;;;;;;;;;;;IAQaA,mBAAmB,MAAnBA,mBAAmB;IAwCnBC,gBAAgB,MAAhBA,gBAAgB;;;wEAhDD,mBAAmB;AAQxC,MAAMD,mBAAmB,GAAGE,iBAAM,QAAA,CAACC,GAAG,AAAwB,CAAC;;;;;;;;UAQ5D,EAAE,SAAmB;QAAlB,EAAEC,SAAS,CAAA,EAAE;WAAMA,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC,CAAC;AAC5D,CAAC;AAED,MAAMC,UAAU,GAAGC,IAAAA,iBAAG,IAAA,CAAA,CAAC;;;;;;AAMvB,CAAC;AAED,MAAMC,SAAS,GAAGD,IAAAA,iBAAG,IAAA,CAAA,CAAC;;;;;;;;;;;;;;;AAetB,CAAC;AAED,MAAME,gBAAgB,GAAG,SAAsC;QAArC,EAAEC,WAAW,CAAA,EAAmB;IACxD,OAAO;QAAC,SAAS;QAAE,QAAQ;KAAC,CAACC,QAAQ,CAACD,WAAW,CAAC,GAAGF,SAAS,GAAGF,UAAU,CAAA;AAC7E,CAAC;AAEM,MAAMJ,gBAAgB,GAAGC,iBAAM,QAAA,CAACC,GAAG,AAAiB,CAAC;;;;;sBAKtC,EAAE,SAAmBQ;QAAlB,EAAEA,SAAS,CAAA,EAAE;WAAKA,SAAS;AAAD,CAAC,CAAC;;;EAGnD,EAAEH,gBAAgB,CAAC;AACrB,CAAC"}

package/dist/cjs/popover/src/PopoverStyles.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PopoverStyle", {
+    enumerable: true,
+    get: ()=>PopoverStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
+const _popoverRoot = /*#__PURE__*/ _interopRequireDefault(require("./PopoverRoot"));
+const getOffset = (props)=>{
+    const { $offset , placement , theme  } = props;
+    const offset = theme.spaceMap[$offset];
+    if (placement.startsWith('top')) return `margin-top: ${-offset}px`;
+    if (placement.startsWith('right')) return `margin-left: ${offset}px`;
+    if (placement.startsWith('bottom')) return `margin-top: ${offset}px`;
+    if (placement.startsWith('left')) return `margin-left: ${-offset}px`;
+    return '';
+};
+const PopoverStyle = (0, _styledComponents.default)(_popoverRoot.default)`
+  background: var(--lido-color-foreground);
+  color: var(--lido-color-text);
+  font-size: ${(param)=>{
+    let { theme  } = param;
+    return theme.fontSizesMap.xs;
+}}px;
+  line-height: 1.5em;
+  font-weight: 400;
+  border-radius: ${(param)=>{
+    let { theme  } = param;
+    return theme.borderRadiusesMap.lg;
+}}px;
+  box-shadow: ${(param)=>{
+    let { theme  } = param;
+    return theme.boxShadows.xs;
+}}
+    var(--lido-color-shadowLight);
+  padding: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.lg;
+}}px;
+  overflow: auto;
+
+  ${getOffset}
+`;
+
+//# sourceMappingURL=PopoverStyles.js.map

package/dist/cjs/popover/src/PopoverStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/PopoverStyles.ts"],"sourcesContent":["import styled from 'styled-components'\nimport PopoverRoot from './PopoverRoot'\nimport { PopoverOffsets, PopoverPlacements } from './types'\nimport { Theme } from '@lidofinance/theme'\n\ntype InjectedProps = {\n  $offset: PopoverOffsets\n  placement: PopoverPlacements\n  theme: Theme\n}\n\nconst getOffset = (props: InjectedProps): string => {\n  const { $offset, placement, theme } = props\n  const offset = theme.spaceMap[$offset]\n\n  if (placement.startsWith('top')) return `margin-top: ${-offset}px`\n  if (placement.startsWith('right')) return `margin-left: ${offset}px`\n  if (placement.startsWith('bottom')) return `margin-top: ${offset}px`\n  if (placement.startsWith('left')) return `margin-left: ${-offset}px`\n  return ''\n}\n\nexport const PopoverStyle = styled(PopoverRoot)`\n  background: var(--lido-color-foreground);\n  color: var(--lido-color-text);\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  line-height: 1.5em;\n  font-weight: 400;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  box-shadow: ${({ theme }) => theme.boxShadows.xs}\n    var(--lido-color-shadowLight);\n  padding: ${({ theme }) => theme.spaceMap.lg}px;\n  overflow: auto;\n\n  ${getOffset}\n`\n"],"names":["PopoverStyle","getOffset","props","$offset","placement","theme","offset","spaceMap","startsWith","styled","PopoverRoot","fontSizesMap","xs","borderRadiusesMap","lg","boxShadows"],"mappings":"AAAA;;;;+BAsBaA,cAAY;;aAAZA,YAAY;;;uEAtBN,mBAAmB;kEACd,eAAe;AAUvC,MAAMC,SAAS,GAAG,CAACC,KAAoB,GAAa;IAClD,MAAM,EAAEC,OAAO,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGH,KAAK;IAC3C,MAAMI,MAAM,GAAGD,KAAK,CAACE,QAAQ,CAACJ,OAAO,CAAC;IAEtC,IAAIC,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,CAACF,MAAM,CAAC,EAAE,CAAC,CAAA;IAClE,IAAIF,SAAS,CAACI,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAEF,MAAM,CAAC,EAAE,CAAC,CAAA;IACpE,IAAIF,SAAS,CAACI,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,EAAEF,MAAM,CAAC,EAAE,CAAC,CAAA;IACpE,IAAIF,SAAS,CAACI,UAAU,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,CAACF,MAAM,CAAC,EAAE,CAAC,CAAA;IACpE,OAAO,EAAE,CAAA;AACX,CAAC;AAEM,MAAMN,YAAY,GAAGS,IAAAA,iBAAM,QAAA,EAACC,YAAW,QAAA,CAAC,CAAC;;;aAGnC,EAAE,SAAeL;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACM,YAAY,CAACC,EAAE;AAAD,CAAC,CAAC;;;iBAGnC,EAAE,SAAeP;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACQ,iBAAiB,CAACC,EAAE;AAAD,CAAC,CAAC;cAC/C,EAAE,SAAeT;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACU,UAAU,CAACH,EAAE;AAAD,CAAC,CAAC;;WAExC,EAAE,SAAeP;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACE,QAAQ,CAACO,EAAE;AAAD,CAAC,CAAC;;;EAG5C,EAAEb,SAAS,CAAC;AACd,CAAC"}

package/dist/cjs/popover/src/calculatePosition.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "calculatePosition", {
+    enumerable: true,
+    get: ()=>calculatePosition
+});
+const calculatePosition = (anchorRect, popoverRect, wrapperRect, placement)=>{
+    const position = {};
+    switch(placement){
+        case 'top':
+        case 'bottom':
+            position.left = (anchorRect.left + anchorRect.right) / 2 - popoverRect.width / 2;
+            break;
+        case 'topLeft':
+        case 'bottomLeft':
+            position.left = anchorRect.left;
+            break;
+        case 'topRight':
+        case 'bottomRight':
+            position.left = anchorRect.right - popoverRect.width;
+            break;
+        case 'rightTop':
+        case 'right':
+        case 'rightBottom':
+            position.left = anchorRect.right;
+            break;
+        case 'leftTop':
+        case 'left':
+        case 'leftBottom':
+            position.left = anchorRect.left - popoverRect.width;
+            break;
+    }
+    switch(placement){
+        case 'left':
+        case 'right':
+            position.top = (anchorRect.top + anchorRect.bottom) / 2 - popoverRect.height / 2;
+            break;
+        case 'leftTop':
+        case 'rightTop':
+            position.top = anchorRect.top;
+            break;
+        case 'leftBottom':
+        case 'rightBottom':
+            position.top = anchorRect.bottom - popoverRect.height;
+            break;
+        case 'topLeft':
+        case 'top':
+        case 'topRight':
+            position.top = anchorRect.top - popoverRect.height;
+            break;
+        case 'bottomLeft':
+        case 'bottom':
+        case 'bottomRight':
+            position.top = anchorRect.bottom;
+            break;
+    }
+    position.top -= wrapperRect.top;
+    position.left -= wrapperRect.left;
+    return position;
+};
+
+//# sourceMappingURL=calculatePosition.js.map

package/dist/cjs/popover/src/calculatePosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/calculatePosition.ts"],"sourcesContent":["import { CSSProperties } from 'react'\nimport { PopoverPlacements } from './types'\n\nexport const calculatePosition = (\n  anchorRect: DOMRect,\n  popoverRect: DOMRect,\n  wrapperRect: DOMRect,\n  placement: PopoverPlacements\n): CSSProperties => {\n  const position: CSSProperties = {}\n\n  switch (placement) {\n    case 'top':\n    case 'bottom':\n      position.left =\n        (anchorRect.left + anchorRect.right) / 2 - popoverRect.width / 2\n      break\n\n    case 'topLeft':\n    case 'bottomLeft':\n      position.left = anchorRect.left\n      break\n\n    case 'topRight':\n    case 'bottomRight':\n      position.left = anchorRect.right - popoverRect.width\n      break\n\n    case 'rightTop':\n    case 'right':\n    case 'rightBottom':\n      position.left = anchorRect.right\n      break\n\n    case 'leftTop':\n    case 'left':\n    case 'leftBottom':\n      position.left = anchorRect.left - popoverRect.width\n      break\n  }\n\n  switch (placement) {\n    case 'left':\n    case 'right':\n      position.top =\n        (anchorRect.top + anchorRect.bottom) / 2 - popoverRect.height / 2\n      break\n\n    case 'leftTop':\n    case 'rightTop':\n      position.top = anchorRect.top\n      break\n\n    case 'leftBottom':\n    case 'rightBottom':\n      position.top = anchorRect.bottom - popoverRect.height\n      break\n\n    case 'topLeft':\n    case 'top':\n    case 'topRight':\n      position.top = anchorRect.top - popoverRect.height\n      break\n\n    case 'bottomLeft':\n    case 'bottom':\n    case 'bottomRight':\n      position.top = anchorRect.bottom\n      break\n  }\n\n  position.top -= wrapperRect.top\n  position.left -= wrapperRect.left\n\n  return position\n}\n"],"names":["calculatePosition","anchorRect","popoverRect","wrapperRect","placement","position","left","right","width","top","bottom","height"],"mappings":"AAAA;;;;+BAGaA,mBAAiB;;aAAjBA,iBAAiB;;AAAvB,MAAMA,iBAAiB,GAAG,CAC/BC,UAAmB,EACnBC,WAAoB,EACpBC,WAAoB,EACpBC,SAA4B,GACV;IAClB,MAAMC,QAAQ,GAAkB,EAAE;IAElC,OAAQD,SAAS;QACf,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ;YACXC,QAAQ,CAACC,IAAI,GACX,CAACL,UAAU,CAACK,IAAI,GAAGL,UAAU,CAACM,KAAK,CAAC,GAAG,CAAC,GAAGL,WAAW,CAACM,KAAK,GAAG,CAAC;YAClE,MAAK;QAEP,KAAK,SAAS,CAAC;QACf,KAAK,YAAY;YACfH,QAAQ,CAACC,IAAI,GAAGL,UAAU,CAACK,IAAI;YAC/B,MAAK;QAEP,KAAK,UAAU,CAAC;QAChB,KAAK,aAAa;YAChBD,QAAQ,CAACC,IAAI,GAAGL,UAAU,CAACM,KAAK,GAAGL,WAAW,CAACM,KAAK;YACpD,MAAK;QAEP,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,aAAa;YAChBH,QAAQ,CAACC,IAAI,GAAGL,UAAU,CAACM,KAAK;YAChC,MAAK;QAEP,KAAK,SAAS,CAAC;QACf,KAAK,MAAM,CAAC;QACZ,KAAK,YAAY;YACfF,QAAQ,CAACC,IAAI,GAAGL,UAAU,CAACK,IAAI,GAAGJ,WAAW,CAACM,KAAK;YACnD,MAAK;KACR;IAED,OAAQJ,SAAS;QACf,KAAK,MAAM,CAAC;QACZ,KAAK,OAAO;YACVC,QAAQ,CAACI,GAAG,GACV,CAACR,UAAU,CAACQ,GAAG,GAAGR,UAAU,CAACS,MAAM,CAAC,GAAG,CAAC,GAAGR,WAAW,CAACS,MAAM,GAAG,CAAC;YACnE,MAAK;QAEP,KAAK,SAAS,CAAC;QACf,KAAK,UAAU;YACbN,QAAQ,CAACI,GAAG,GAAGR,UAAU,CAACQ,GAAG;YAC7B,MAAK;QAEP,KAAK,YAAY,CAAC;QAClB,KAAK,aAAa;YAChBJ,QAAQ,CAACI,GAAG,GAAGR,UAAU,CAACS,MAAM,GAAGR,WAAW,CAACS,MAAM;YACrD,MAAK;QAEP,KAAK,SAAS,CAAC;QACf,KAAK,KAAK,CAAC;QACX,KAAK,UAAU;YACbN,QAAQ,CAACI,GAAG,GAAGR,UAAU,CAACQ,GAAG,GAAGP,WAAW,CAACS,MAAM;YAClD,MAAK;QAEP,KAAK,YAAY,CAAC;QAClB,KAAK,QAAQ,CAAC;QACd,KAAK,aAAa;YAChBN,QAAQ,CAACI,GAAG,GAAGR,UAAU,CAACS,MAAM;YAChC,MAAK;KACR;IAEDL,QAAQ,CAACI,GAAG,IAAIN,WAAW,CAACM,GAAG;IAC/BJ,QAAQ,CAACC,IAAI,IAAIH,WAAW,CAACG,IAAI;IAEjC,OAAOD,QAAQ,CAAA;AACjB,CAAC"}

package/dist/cjs/popover/src/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    INITIAL_STYLE: ()=>INITIAL_STYLE,
+    DEFAULT_PLACEMENT: ()=>DEFAULT_PLACEMENT
+});
+const INITIAL_STYLE = {
+    // needs to prevent scrolling to initial state when using the auto focus
+    position: 'fixed',
+    opacity: 0,
+    pointerEvents: 'none'
+};
+const DEFAULT_PLACEMENT = 'bottomLeft';
+
+//# sourceMappingURL=constants.js.map

package/dist/cjs/popover/src/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/constants.ts"],"sourcesContent":["import { CSSProperties } from 'react'\n\nexport const INITIAL_STYLE: CSSProperties = {\n  // needs to prevent scrolling to initial state when using the auto focus\n  position: 'fixed',\n\n  opacity: 0,\n  pointerEvents: 'none',\n}\n\nexport const DEFAULT_PLACEMENT = 'bottomLeft'\n"],"names":["INITIAL_STYLE","DEFAULT_PLACEMENT","position","opacity","pointerEvents"],"mappings":"AAAA;;;;;;;;;;;IAEaA,aAAa,MAAbA,aAAa;IAQbC,iBAAiB,MAAjBA,iBAAiB;;AARvB,MAAMD,aAAa,GAAkB;IAC1C,wEAAwE;IACxEE,QAAQ,EAAE,OAAO;IAEjBC,OAAO,EAAE,CAAC;IACVC,aAAa,EAAE,MAAM;CACtB;AAEM,MAAMH,iBAAiB,GAAG,YAAY"}

package/dist/cjs/popover/src/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Popover", {
+    enumerable: true,
+    get: ()=>_popover.default
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _popover = /*#__PURE__*/ _interopRequireDefault(require("./Popover"));
+_exportStar(require("./types"), exports);
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/popover/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/index.ts"],"sourcesContent":["export { default as Popover } from './Popover'\nexport * from './types'\n"],"names":["Popover"],"mappings":"AAAA;;;;+BAAoBA,SAAO;;aAAPA,QAAO,QAAA;;;;8DAAQ,WAAW;oBAChC,SAAS"}

package/dist/cjs/popover/src/types.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PopoverOffset: ()=>PopoverOffset,
+    PopoverPlacement: ()=>PopoverPlacement
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+var PopoverOffset;
+(function(PopoverOffset) {
+    PopoverOffset[PopoverOffset["xs"] = 0] = "xs";
+    PopoverOffset[PopoverOffset["sm"] = 1] = "sm";
+    PopoverOffset[PopoverOffset["md"] = 2] = "md";
+    PopoverOffset[PopoverOffset["lg"] = 3] = "lg";
+    PopoverOffset[PopoverOffset["xl"] = 4] = "xl";
+})(PopoverOffset || (PopoverOffset = {}));
+var PopoverPlacement;
+(function(PopoverPlacement) {
+    PopoverPlacement[PopoverPlacement["topLeft"] = 0] = "topLeft";
+    PopoverPlacement[PopoverPlacement["top"] = 1] = "top";
+    PopoverPlacement[PopoverPlacement["topRight"] = 2] = "topRight";
+    PopoverPlacement[PopoverPlacement["rightTop"] = 3] = "rightTop";
+    PopoverPlacement[PopoverPlacement["right"] = 4] = "right";
+    PopoverPlacement[PopoverPlacement["rightBottom"] = 5] = "rightBottom";
+    PopoverPlacement[PopoverPlacement["bottomLeft"] = 6] = "bottomLeft";
+    PopoverPlacement[PopoverPlacement["bottom"] = 7] = "bottom";
+    PopoverPlacement[PopoverPlacement["bottomRight"] = 8] = "bottomRight";
+    PopoverPlacement[PopoverPlacement["leftTop"] = 9] = "leftTop";
+    PopoverPlacement[PopoverPlacement["left"] = 10] = "left";
+    PopoverPlacement[PopoverPlacement["leftBottom"] = 11] = "leftBottom";
+})(PopoverPlacement || (PopoverPlacement = {}));
+
+//# sourceMappingURL=types.js.map

package/dist/cjs/popover/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport {\n  TransitionWrapperProps,\n  TransitionInnerProps,\n} from '@lidofinance/transition'\nimport React from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum PopoverOffset {\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n}\nexport type PopoverOffsets = keyof typeof PopoverOffset\n\nexport enum PopoverPlacement {\n  topLeft,\n  top,\n  topRight,\n\n  rightTop,\n  right,\n  rightBottom,\n\n  bottomLeft,\n  bottom,\n  bottomRight,\n\n  leftTop,\n  left,\n  leftBottom,\n}\nexport type PopoverPlacements = keyof typeof PopoverPlacement\n\nexport type PopoverRootOwnProps = LidoComponentProps<\n  'div',\n  {\n    wrapperRef?: React.RefObject<HTMLDivElement>\n    anchorRef: React.RefObject<HTMLElement | null>\n    placement?: PopoverPlacements\n    backdrop?: boolean\n    onClose?: () => void\n  }\n>\n\nexport type PopoverRootProps = PopoverRootOwnProps & TransitionWrapperProps\nexport type PopoverRootInnerProps = PopoverRootOwnProps & TransitionInnerProps\n\nexport type PopoverProps = {\n  as?: never\n  offset?: PopoverOffsets\n  open?: boolean\n} & Omit<PopoverRootProps, 'in'>\n"],"names":["PopoverOffset","xs","sm","md","lg","xl","PopoverPlacement","topLeft","top","topRight","rightTop","right","rightBottom","bottomLeft","bottom","bottomRight","leftTop","left","leftBottom"],"mappings":"AAAA;;;;;;;;;;;;;;;4DAKkB,OAAO;IAGlB,aAMN;UANWA,aAAa;IAAbA,aAAa,CAAbA,aAAa,CACvBC,IAAE,IAAFA,CAAE,IAAFA,IAAE;IADQD,aAAa,CAAbA,aAAa,CAEvBE,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAFQF,aAAa,CAAbA,aAAa,CAGvBG,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAHQH,aAAa,CAAbA,aAAa,CAIvBI,IAAE,IAAFA,CAAE,IAAFA,IAAE;IAJQJ,aAAa,CAAbA,aAAa,CAKvBK,IAAE,IAAFA,CAAE,IAAFA,IAAE;GALQL,aAAa,KAAbA,aAAa;IASlB,gBAgBN;UAhBWM,gBAAgB;IAAhBA,gBAAgB,CAAhBA,gBAAgB,CAC1BC,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGD,gBAAgB,CAAhBA,gBAAgB,CAE1BE,KAAG,IAAHA,CAAG,IAAHA,KAAG;IAFOF,gBAAgB,CAAhBA,gBAAgB,CAG1BG,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAHEH,gBAAgB,CAAhBA,gBAAgB,CAK1BI,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IALEJ,gBAAgB,CAAhBA,gBAAgB,CAM1BK,OAAK,IAALA,CAAK,IAALA,OAAK;IANKL,gBAAgB,CAAhBA,gBAAgB,CAO1BM,aAAW,IAAXA,CAAW,IAAXA,aAAW;IAPDN,gBAAgB,CAAhBA,gBAAgB,CAS1BO,YAAU,IAAVA,CAAU,IAAVA,YAAU;IATAP,gBAAgB,CAAhBA,gBAAgB,CAU1BQ,QAAM,IAANA,CAAM,IAANA,QAAM;IAVIR,gBAAgB,CAAhBA,gBAAgB,CAW1BS,aAAW,IAAXA,CAAW,IAAXA,aAAW;IAXDT,gBAAgB,CAAhBA,gBAAgB,CAa1BU,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAbGV,gBAAgB,CAAhBA,gBAAgB,CAc1BW,MAAI,IAAJA,EAAI,IAAJA,MAAI;IAdMX,gBAAgB,CAAhBA,gBAAgB,CAe1BY,YAAU,IAAVA,EAAU,IAAVA,YAAU;GAfAZ,gBAAgB,KAAhBA,gBAAgB"}

package/dist/cjs/popover/src/usePopoverPosition.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePopoverPosition", {
+    enumerable: true,
+    get: ()=>usePopoverPosition
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _hooks = require("../../hooks/src/index");
+const _constants = require("./constants");
+const _calculatePosition = require("./calculatePosition");
+const usePopoverPosition = (props)=>{
+    const { placement =_constants.DEFAULT_PLACEMENT , anchorRef  } = props;
+    const popoverRef = (0, _react.useRef)(null);
+    const wrapperRef = (0, _react.useRef)(null);
+    const [popoverStyle, setPopoverStyle] = (0, _react.useState)(_constants.INITIAL_STYLE);
+    const [windowWidth, windowHeight] = (0, _hooks.useWindowSize)();
+    (0, _react.useLayoutEffect)(()=>{
+        if (!anchorRef.current || !popoverRef.current || !wrapperRef.current) return;
+        const anchorRect = anchorRef.current.getBoundingClientRect();
+        const popoverRect = popoverRef.current.getBoundingClientRect();
+        const wrapperRect = wrapperRef.current.getBoundingClientRect();
+        const position = (0, _calculatePosition.calculatePosition)(anchorRect, popoverRect, wrapperRect, placement);
+        setPopoverStyle(position);
+    }, [
+        anchorRef,
+        placement,
+        windowWidth,
+        windowHeight
+    ]);
+    const style = {
+        ...props.style,
+        ...popoverStyle
+    };
+    return {
+        popoverRef,
+        wrapperRef,
+        style
+    };
+};
+
+//# sourceMappingURL=usePopoverPosition.js.map

package/dist/cjs/popover/src/usePopoverPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/usePopoverPosition.ts"],"sourcesContent":["import React, { useRef, useLayoutEffect, useState, CSSProperties } from 'react'\nimport { useWindowSize } from '@lidofinance/hooks'\nimport { PopoverRootProps } from './types'\nimport { INITIAL_STYLE, DEFAULT_PLACEMENT } from './constants'\nimport { calculatePosition } from './calculatePosition'\n\nexport const usePopoverPosition = <\n  P extends HTMLDivElement,\n  W extends HTMLDivElement\n>(\n  props: PopoverRootProps\n): {\n  popoverRef: React.RefObject<P>\n  wrapperRef: React.RefObject<W>\n  style: CSSProperties\n} => {\n  const { placement = DEFAULT_PLACEMENT, anchorRef } = props\n\n  const popoverRef = useRef<P>(null)\n  const wrapperRef = useRef<W>(null)\n\n  const [popoverStyle, setPopoverStyle] = useState<CSSProperties>(INITIAL_STYLE)\n  const [windowWidth, windowHeight] = useWindowSize()\n\n  useLayoutEffect(() => {\n    if (!anchorRef.current || !popoverRef.current || !wrapperRef.current) return\n\n    const anchorRect = anchorRef.current.getBoundingClientRect()\n    const popoverRect = popoverRef.current.getBoundingClientRect()\n    const wrapperRect = wrapperRef.current.getBoundingClientRect()\n\n    const position = calculatePosition(\n      anchorRect,\n      popoverRect,\n      wrapperRect,\n      placement\n    )\n    setPopoverStyle(position)\n  }, [anchorRef, placement, windowWidth, windowHeight])\n\n  const style = {\n    ...props.style,\n    ...popoverStyle,\n  }\n\n  return {\n    popoverRef,\n    wrapperRef,\n    style,\n  }\n}\n"],"names":["usePopoverPosition","props","placement","DEFAULT_PLACEMENT","anchorRef","popoverRef","useRef","wrapperRef","popoverStyle","setPopoverStyle","useState","INITIAL_STYLE","windowWidth","windowHeight","useWindowSize","useLayoutEffect","current","anchorRect","getBoundingClientRect","popoverRect","wrapperRect","position","calculatePosition","style"],"mappings":"AAAA;;;;+BAMaA,oBAAkB;;aAAlBA,kBAAkB;;;6DANyC,OAAO;uBACjD,uBAAoB;2BAED,aAAa;mCAC5B,qBAAqB;AAEhD,MAAMA,kBAAkB,GAAG,CAIhCC,KAAuB,GAKpB;IACH,MAAM,EAAEC,SAAS,EAAGC,UAAiB,kBAAA,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGH,KAAK;IAE1D,MAAMI,UAAU,GAAGC,IAAAA,MAAM,OAAA,EAAI,IAAI,CAAC;IAClC,MAAMC,UAAU,GAAGD,IAAAA,MAAM,OAAA,EAAI,IAAI,CAAC;IAElC,MAAM,CAACE,YAAY,EAAEC,eAAe,CAAC,GAAGC,IAAAA,MAAQ,SAAA,EAAgBC,UAAa,cAAA,CAAC;IAC9E,MAAM,CAACC,WAAW,EAAEC,YAAY,CAAC,GAAGC,IAAAA,MAAa,cAAA,GAAE;IAEnDC,IAAAA,MAAe,gBAAA,EAAC,IAAM;QACpB,IAAI,CAACX,SAAS,CAACY,OAAO,IAAI,CAACX,UAAU,CAACW,OAAO,IAAI,CAACT,UAAU,CAACS,OAAO,EAAE,OAAM;QAE5E,MAAMC,UAAU,GAAGb,SAAS,CAACY,OAAO,CAACE,qBAAqB,EAAE;QAC5D,MAAMC,WAAW,GAAGd,UAAU,CAACW,OAAO,CAACE,qBAAqB,EAAE;QAC9D,MAAME,WAAW,GAAGb,UAAU,CAACS,OAAO,CAACE,qBAAqB,EAAE;QAE9D,MAAMG,QAAQ,GAAGC,IAAAA,kBAAiB,kBAAA,EAChCL,UAAU,EACVE,WAAW,EACXC,WAAW,EACXlB,SAAS,CACV;QACDO,eAAe,CAACY,QAAQ,CAAC;IAC3B,CAAC,EAAE;QAACjB,SAAS;QAAEF,SAAS;QAAEU,WAAW;QAAEC,YAAY;KAAC,CAAC;IAErD,MAAMU,KAAK,GAAG;QACZ,GAAGtB,KAAK,CAACsB,KAAK;QACd,GAAGf,YAAY;KAChB;IAED,OAAO;QACLH,UAAU;QACVE,UAAU;QACVgB,KAAK;KACN,CAAA;AACH,CAAC"}

package/dist/cjs/popup-menu/src/PopupMenu.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _hooks = require("../../hooks/src/index");
+const _popupMenuProvider = require("./PopupMenuProvider");
+const _popupMenuStyles = require("./PopupMenuStyles");
+const _usePopupFocus = require("./usePopupFocus");
+function PopupMenu(props, externalRef) {
+    const { variant , children , onKeyDown , onMouseMove , ...rest } = props;
+    const { ref: controlRef , handleMouseMove , handleKeyDown , handleEnter , handleExit ,  } = (0, _usePopupFocus.usePopupFocus)(props);
+    const popupRef = (0, _hooks.useMergeRefs)([
+        controlRef,
+        externalRef
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_popupMenuStyles.PopupMenuStyle, _extends({
+        onMouseMove: handleMouseMove,
+        onKeyDown: handleKeyDown,
+        onEnter: handleEnter,
+        onExit: handleExit,
+        tabIndex: -1,
+        role: "listbox"
+    }, rest, {
+        ref: popupRef
+    }), /*#__PURE__*/ _react.default.createElement(_popupMenuProvider.PopupMenuProvider, {
+        variant: variant
+    }, children));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(PopupMenu);
+
+//# sourceMappingURL=PopupMenu.js.map

package/dist/cjs/popup-menu/src/PopupMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popup-menu/src/PopupMenu.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport { useMergeRefs } from '@lidofinance/hooks'\nimport { PopupMenuProvider } from './PopupMenuProvider'\nimport { PopupMenuStyle } from './PopupMenuStyles'\nimport { PopupMenuProps } from './types'\nimport { usePopupFocus } from './usePopupFocus'\n\nfunction PopupMenu(\n  props: PopupMenuProps,\n  externalRef?: ForwardedRef<HTMLDivElement>\n) {\n  const { variant, children, onKeyDown, onMouseMove, ...rest } = props\n\n  const {\n    ref: controlRef,\n    handleMouseMove,\n    handleKeyDown,\n    handleEnter,\n    handleExit,\n  } = usePopupFocus(props)\n  const popupRef = useMergeRefs([controlRef, externalRef])\n\n  return (\n    <PopupMenuStyle\n      onMouseMove={handleMouseMove}\n      onKeyDown={handleKeyDown}\n      onEnter={handleEnter}\n      onExit={handleExit}\n      tabIndex={-1}\n      role='listbox'\n      {...rest}\n      ref={popupRef}\n    >\n      <PopupMenuProvider variant={variant}>{children}</PopupMenuProvider>\n    </PopupMenuStyle>\n  )\n}\n\nexport default forwardRef(PopupMenu)\n"],"names":["PopupMenu","props","externalRef","variant","children","onKeyDown","onMouseMove","rest","ref","controlRef","handleMouseMove","handleKeyDown","handleEnter","handleExit","usePopupFocus","popupRef","useMergeRefs","PopupMenuStyle","onEnter","onExit","tabIndex","role","PopupMenuProvider","forwardRef"],"mappings":"AAAA;;;;+BAsCA,SAAoC;;aAApC,QAAoC;;;;6DAtCY,OAAO;uBAC1B,uBAAoB;mCACf,qBAAqB;iCACxB,mBAAmB;+BAEpB,iBAAiB;AAE/C,SAASA,SAAS,CAChBC,KAAqB,EACrBC,WAA0C,EAC1C;IACA,MAAM,EAAEC,OAAO,CAAA,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGN,KAAK;IAEpE,MAAM,EACJO,GAAG,EAAEC,UAAU,CAAA,EACfC,eAAe,CAAA,EACfC,aAAa,CAAA,EACbC,WAAW,CAAA,EACXC,UAAU,CAAA,IACX,GAAGC,IAAAA,cAAa,cAAA,EAACb,KAAK,CAAC;IACxB,MAAMc,QAAQ,GAAGC,IAAAA,MAAY,aAAA,EAAC;QAACP,UAAU;QAAEP,WAAW;KAAC,CAAC;IAExD,qBACE,6BAACe,gBAAc,eAAA;QACbX,WAAW,EAAEI,eAAe;QAC5BL,SAAS,EAAEM,aAAa;QACxBO,OAAO,EAAEN,WAAW;QACpBO,MAAM,EAAEN,UAAU;QAClBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAC,SAAS;OACVd,IAAI;QACRC,GAAG,EAAEO,QAAQ;sBAEb,6BAACO,kBAAiB,kBAAA;QAACnB,OAAO,EAAEA,OAAO;OAAGC,QAAQ,CAAqB,CACpD,CAClB;AACH,CAAC;MAED,QAAoC,iBAArBmB,IAAAA,MAAU,WAAA,EAACvB,SAAS,CAAC"}

package/dist/cjs/popup-menu/src/PopupMenuItem.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _popupMenuItemStyles = require("./PopupMenuItemStyles");
+const _popupMenuProvider = require("./PopupMenuProvider");
+function PopupMenuItem(props, ref) {
+    const { active =false , leftDecorator , rightDecorator , children , ...rest } = props;
+    const { variant ='default'  } = (0, _popupMenuProvider.usePopupMenuContext)();
+    const hasLeftDecorator = !!leftDecorator;
+    const hasRightDecorator = !!rightDecorator;
+    return /*#__PURE__*/ _react.default.createElement(_popupMenuItemStyles.PopupMenuItemStyle, _extends({
+        $active: active,
+        role: "option",
+        "aria-selected": active
+    }, rest, {
+        ref: ref
+    }), hasLeftDecorator && /*#__PURE__*/ _react.default.createElement(_popupMenuItemStyles.PopupMenuItemLeftDecoratorStyle, null, leftDecorator), /*#__PURE__*/ _react.default.createElement(_popupMenuItemStyles.PopupMenuItemContentStyle, {
+        $variant: variant
+    }, children), hasRightDecorator && /*#__PURE__*/ _react.default.createElement(_popupMenuItemStyles.PopupMenuItemRightDecoratorStyle, null, rightDecorator));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(PopupMenuItem);
+
+//# sourceMappingURL=PopupMenuItem.js.map

package/dist/cjs/popup-menu/src/PopupMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popup-menu/src/PopupMenuItem.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport {\n  PopupMenuItemStyle,\n  PopupMenuItemContentStyle,\n  PopupMenuItemLeftDecoratorStyle,\n  PopupMenuItemRightDecoratorStyle,\n} from './PopupMenuItemStyles'\nimport { usePopupMenuContext } from './PopupMenuProvider'\nimport { PopupMenuItemProps } from './types'\n\nfunction PopupMenuItem(\n  props: PopupMenuItemProps,\n  ref?: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    active = false,\n    leftDecorator,\n    rightDecorator,\n    children,\n    ...rest\n  } = props\n  const { variant = 'default' } = usePopupMenuContext()\n\n  const hasLeftDecorator = !!leftDecorator\n  const hasRightDecorator = !!rightDecorator\n\n  return (\n    <PopupMenuItemStyle\n      $active={active}\n      role='option'\n      aria-selected={active}\n      {...rest}\n      ref={ref}\n    >\n      {hasLeftDecorator && (\n        <PopupMenuItemLeftDecoratorStyle>\n          {leftDecorator}\n        </PopupMenuItemLeftDecoratorStyle>\n      )}\n\n      <PopupMenuItemContentStyle $variant={variant}>\n        {children}\n      </PopupMenuItemContentStyle>\n\n      {hasRightDecorator && (\n        <PopupMenuItemRightDecoratorStyle>\n          {rightDecorator}\n        </PopupMenuItemRightDecoratorStyle>\n      )}\n    </PopupMenuItemStyle>\n  )\n}\n\nexport default forwardRef(PopupMenuItem)\n"],"names":["PopupMenuItem","props","ref","active","leftDecorator","rightDecorator","children","rest","variant","usePopupMenuContext","hasLeftDecorator","hasRightDecorator","PopupMenuItemStyle","$active","role","aria-selected","PopupMenuItemLeftDecoratorStyle","PopupMenuItemContentStyle","$variant","PopupMenuItemRightDecoratorStyle","forwardRef"],"mappings":"AAAA;;;;+BAqDA,SAAwC;;aAAxC,QAAwC;;;;6DArDQ,OAAO;qCAMhD,uBAAuB;mCACM,qBAAqB;AAGzD,SAASA,aAAa,CACpBC,KAAyB,EACzBC,GAAqC,EACrC;IACA,MAAM,EACJC,MAAM,EAAG,KAAK,CAAA,EACdC,aAAa,CAAA,EACbC,cAAc,CAAA,EACdC,QAAQ,CAAA,EACR,GAAGC,IAAI,EACR,GAAGN,KAAK;IACT,MAAM,EAAEO,OAAO,EAAG,SAAS,CAAA,EAAE,GAAGC,IAAAA,kBAAmB,oBAAA,GAAE;IAErD,MAAMC,gBAAgB,GAAG,CAAC,CAACN,aAAa;IACxC,MAAMO,iBAAiB,GAAG,CAAC,CAACN,cAAc;IAE1C,qBACE,6BAACO,oBAAkB,mBAAA;QACjBC,OAAO,EAAEV,MAAM;QACfW,IAAI,EAAC,QAAQ;QACbC,eAAa,EAAEZ,MAAM;OACjBI,IAAI;QACRL,GAAG,EAAEA,GAAG;QAEPQ,gBAAgB,kBACf,6BAACM,oBAA+B,gCAAA,QAC7BZ,aAAa,CACkB,AACnC,gBAED,6BAACa,oBAAyB,0BAAA;QAACC,QAAQ,EAAEV,OAAO;OACzCF,QAAQ,CACiB,EAE3BK,iBAAiB,kBAChB,6BAACQ,oBAAgC,iCAAA,QAC9Bd,cAAc,CACkB,AACpC,CACkB,CACtB;AACH,CAAC;MAED,QAAwC,iBAAzBe,IAAAA,MAAU,WAAA,EAACpB,aAAa,CAAC"}

package/dist/cjs/popup-menu/src/PopupMenuItemStyles.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PopupMenuItemStyle: ()=>PopupMenuItemStyle,
+    PopupMenuItemContentStyle: ()=>PopupMenuItemContentStyle,
+    PopupMenuItemLeftDecoratorStyle: ()=>PopupMenuItemLeftDecoratorStyle,
+    PopupMenuItemRightDecoratorStyle: ()=>PopupMenuItemRightDecoratorStyle
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireWildcard(require("styled-components"));
+const PopupMenuItemStyle = _styledComponents.default.button`
+  text-align: left;
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+  border-radius: 0;
+  color: var(--lido-color-text);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0 15px;
+  margin: 0;
+  position: relative;
+
+  &:disabled {
+    cursor: default;
+    color: var(--lido-color-textSecondary);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    opacity: ${(param)=>{
+    let { $active  } = param;
+    return $active ? 0.04 : 0;
+}};
+    background: var(--lido-color-popupMenuItemBgActiveHover);
+    transition: opacity ${(param)=>{
+    let { theme  } = param;
+    return theme.duration.fast;
+}} ease;
+  }
+
+  &:focus:not(:disabled):before {
+    opacity: 0.04;
+  }
+`;
+const variants = {
+    small: (0, _styledComponents.css)`
+    padding: 12px 0;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xxs;
+    }}px;
+    line-height: 1.35em;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-weight: 800;
+  `,
+    default: (0, _styledComponents.css)`
+    padding: 18px 0;
+    font-size: ${(param)=>{
+        let { theme  } = param;
+        return theme.fontSizesMap.xs;
+    }}px;
+    line-height: 1.4em;
+    font-weight: 400;
+  `
+};
+const PopupMenuItemContentStyle = _styledComponents.default.span`
+  position: relative;
+  padding: 18px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${(param)=>{
+    let { $variant  } = param;
+    return variants[$variant];
+}}
+`;
+const decoratorCSS = (0, _styledComponents.css)`
+  flex-grow: 0;
+  flex-shrink: 0;
+  cursor: default;
+  display: flex;
+  align-items: center;
+`;
+const PopupMenuItemLeftDecoratorStyle = _styledComponents.default.span`
+  ${decoratorCSS};
+  padding-right: 16px;
+`;
+const PopupMenuItemRightDecoratorStyle = _styledComponents.default.span`
+  ${decoratorCSS};
+  padding-left: 16px;
+`;
+
+//# sourceMappingURL=PopupMenuItemStyles.js.map

package/dist/cjs/popup-menu/src/PopupMenuItemStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popup-menu/src/PopupMenuItemStyles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { PopupMenuVariants } from './types'\n\nexport const PopupMenuItemStyle = styled.button<{ $active: boolean }>`\n  text-align: left;\n  display: flex;\n  width: 100%;\n  align-items: stretch;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  background: transparent;\n  border-radius: 0;\n  color: var(--lido-color-text);\n  border: none;\n  box-shadow: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0 15px;\n  margin: 0;\n  position: relative;\n\n  &:disabled {\n    cursor: default;\n    color: var(--lido-color-textSecondary);\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    opacity: ${({ $active }) => ($active ? 0.04 : 0)};\n    background: var(--lido-color-popupMenuItemBgActiveHover);\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  &:focus:not(:disabled):before {\n    opacity: 0.04;\n  }\n`\n\nconst variants = {\n  small: css`\n    padding: 12px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    line-height: 1.35em;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-weight: 800;\n  `,\n  default: css`\n    padding: 18px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    line-height: 1.4em;\n    font-weight: 400;\n  `,\n}\n\nexport const PopupMenuItemContentStyle = styled.span<{\n  $variant: PopupMenuVariants\n}>`\n  position: relative;\n  padding: 18px 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ${({ $variant }) => variants[$variant]}\n`\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: default;\n  display: flex;\n  align-items: center;\n`\n\nexport const PopupMenuItemLeftDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-right: 16px;\n`\n\nexport const PopupMenuItemRightDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-left: 16px;\n`\n"],"names":["PopupMenuItemStyle","PopupMenuItemContentStyle","PopupMenuItemLeftDecoratorStyle","PopupMenuItemRightDecoratorStyle","styled","button","$active","theme","duration","fast","variants","small","css","fontSizesMap","xxs","default","xs","span","$variant","decoratorCSS"],"mappings":"AAAA;;;;;;;;;;;IAGaA,kBAAkB,MAAlBA,kBAAkB;IA8DlBC,yBAAyB,MAAzBA,yBAAyB;IAmBzBC,+BAA+B,MAA/BA,+BAA+B;IAK/BC,gCAAgC,MAAhCA,gCAAgC;;;wEAzFjB,mBAAmB;AAGxC,MAAMH,kBAAkB,GAAGI,iBAAM,QAAA,CAACC,MAAM,AAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAmCzD,EAAE,SAAiB;QAAhB,EAAEC,OAAO,CAAA,EAAE;WAAMA,OAAO,GAAG,IAAI,GAAG,CAAC;AAAA,CAAC,CAAC;;wBAE7B,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,IAAI;AAAD,CAAC,CAAC;;;;;;AAM7D,CAAC;AAED,MAAMC,QAAQ,GAAG;IACfC,KAAK,EAAEC,IAAAA,iBAAG,IAAA,CAAA,CAAC;;eAEE,EAAE,SAAeL;YAAd,EAAEA,KAAK,CAAA,EAAE;eAAKA,KAAK,CAACM,YAAY,CAACC,GAAG;IAAD,CAAC,CAAC;;;;;EAKrD,CAAC;IACDC,OAAO,EAAEH,IAAAA,iBAAG,IAAA,CAAA,CAAC;;eAEA,EAAE,SAAeL;YAAd,EAAEA,KAAK,CAAA,EAAE;eAAKA,KAAK,CAACM,YAAY,CAACG,EAAE;IAAD,CAAC,CAAC;;;EAGpD,CAAC;CACF;AAEM,MAAMf,yBAAyB,GAAGG,iBAAM,QAAA,CAACa,IAAI,AAElD,CAAC;;;;;;EAMD,EAAE,SAAkBP;QAAjB,EAAEQ,QAAQ,CAAA,EAAE;WAAKR,QAAQ,CAACQ,QAAQ,CAAC;AAAD,CAAC,CAAC;AACzC,CAAC;AAED,MAAMC,YAAY,GAAGP,IAAAA,iBAAG,IAAA,CAAA,CAAC;;;;;;AAMzB,CAAC;AAEM,MAAMV,+BAA+B,GAAGE,iBAAM,QAAA,CAACa,IAAI,CAAC;EACzD,EAAEE,YAAY,CAAC;;AAEjB,CAAC;AAEM,MAAMhB,gCAAgC,GAAGC,iBAAM,QAAA,CAACa,IAAI,CAAC;EAC1D,EAAEE,YAAY,CAAC;;AAEjB,CAAC"}

package/dist/cjs/popup-menu/src/PopupMenuProvider.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    usePopupMenuContext: ()=>usePopupMenuContext,
+    PopupMenuProvider: ()=>PopupMenuProvider
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const Context = /*#__PURE__*/ (0, _react.createContext)({});
+const usePopupMenuContext = ()=>{
+    return (0, _react.useContext)(Context);
+};
+const PopupMenuProvider = (props)=>{
+    const { variant , ...rest } = props;
+    return /*#__PURE__*/ _react.default.createElement(Context.Provider, _extends({
+        value: {
+            variant
+        }
+    }, rest));
+};
+
+//# sourceMappingURL=PopupMenuProvider.js.map

package/dist/cjs/popup-menu/src/PopupMenuProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popup-menu/src/PopupMenuProvider.tsx"],"sourcesContent":["import React, { PropsWithChildren, createContext, useContext, FC } from 'react'\nimport { PopupMenuVariants } from './types'\n\nexport interface PopupMenuContext {\n  variant?: PopupMenuVariants\n}\n\nconst Context = createContext({} as PopupMenuContext)\n\nexport const usePopupMenuContext = (): PopupMenuContext => {\n  return useContext(Context)\n}\n\nexport const PopupMenuProvider: FC<PropsWithChildren<PopupMenuContext>> = (\n  props\n) => {\n  const { variant, ...rest } = props\n\n  return <Context.Provider value={{ variant }} {...rest} />\n}\n"],"names":["usePopupMenuContext","PopupMenuProvider","Context","createContext","useContext","props","variant","rest","Provider","value"],"mappings":"AAAA;;;;;;;;;;;IASaA,mBAAmB,MAAnBA,mBAAmB;IAInBC,iBAAiB,MAAjBA,iBAAiB;;;;6DAb0C,OAAO;AAO/E,MAAMC,OAAO,iBAAGC,IAAAA,MAAa,cAAA,EAAC,EAAE,CAAqB;AAE9C,MAAMH,mBAAmB,GAAG,IAAwB;IACzD,OAAOI,IAAAA,MAAU,WAAA,EAACF,OAAO,CAAC,CAAA;AAC5B,CAAC;AAEM,MAAMD,iBAAiB,GAA4C,CACxEI,KAAK,GACF;IACH,MAAM,EAAEC,OAAO,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGF,KAAK;IAElC,qBAAO,6BAACH,OAAO,CAACM,QAAQ;QAACC,KAAK,EAAE;YAAEH,OAAO;SAAE;OAAMC,IAAI,EAAI,CAAA;AAC3D,CAAC"}