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

package/dist/esm/modal/src/useModalFocus.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { useInterceptFocus } from "../../hooks/src/index";
+import { FOCUSABLE_ELEMENTS } from "./constants";
+export const useModalFocus = ()=>{
+    const modalRef = useRef(null);
+    const getFocusableNodes = useCallback(()=>{
+        var ref;
+        var ref1;
+        const nodes = (ref1 = (ref = modalRef.current) === null || ref === void 0 ? void 0 : ref.querySelectorAll(FOCUSABLE_ELEMENTS.join(','))) !== null && ref1 !== void 0 ? ref1 : [];
+        return Array.from(nodes).filter((node)=>node && node instanceof HTMLElement && node.offsetParent !== null);
+    }, []);
+    const handleRetainFocus = useCallback((event)=>{
+        const focusableNodes = getFocusableNodes();
+        if (focusableNodes.length === 0) return;
+        const currentElement = document.activeElement;
+        const focusedItemIndex = currentElement instanceof HTMLElement && focusableNodes.indexOf(currentElement);
+        if (event.shiftKey && focusedItemIndex === 0) {
+            focusableNodes[focusableNodes.length - 1].focus();
+            event.preventDefault();
+        }
+        if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) {
+            focusableNodes[0].focus();
+            event.preventDefault();
+        }
+    }, [
+        getFocusableNodes
+    ]);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.code === 'Tab') handleRetainFocus(event);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        handleRetainFocus
+    ]);
+    const [interceptFocus, restoreFocus] = useInterceptFocus();
+    useEffect(()=>{
+        if (!modalRef.current) return;
+        interceptFocus(modalRef.current);
+        return restoreFocus;
+    }, [
+        interceptFocus,
+        restoreFocus
+    ]);
+    return modalRef;
+};
+
+//# sourceMappingURL=useModalFocus.js.map

package/dist/esm/modal/src/useModalFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/useModalFocus.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react'\nimport { useInterceptFocus } from '@lidofinance/hooks'\nimport { FOCUSABLE_ELEMENTS } from './constants'\n\nexport const useModalFocus = (): React.RefObject<HTMLDivElement> => {\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  const getFocusableNodes = useCallback(() => {\n    const nodes =\n      modalRef.current?.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')) ?? []\n\n    return Array.from(nodes).filter(\n      (node): node is HTMLElement =>\n        node && node instanceof HTMLElement && node.offsetParent !== null\n    )\n  }, [])\n\n  const handleRetainFocus = useCallback(\n    (event: KeyboardEvent) => {\n      const focusableNodes = getFocusableNodes()\n\n      if (focusableNodes.length === 0) return\n\n      const currentElement = document.activeElement\n      const focusedItemIndex =\n        currentElement instanceof HTMLElement &&\n        focusableNodes.indexOf(currentElement)\n\n      if (event.shiftKey && focusedItemIndex === 0) {\n        focusableNodes[focusableNodes.length - 1].focus()\n        event.preventDefault()\n      }\n\n      if (\n        !event.shiftKey &&\n        focusableNodes.length > 0 &&\n        focusedItemIndex === focusableNodes.length - 1\n      ) {\n        focusableNodes[0].focus()\n        event.preventDefault()\n      }\n    },\n    [getFocusableNodes]\n  )\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.code === 'Tab') handleRetainFocus(event)\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [handleRetainFocus])\n\n  const [interceptFocus, restoreFocus] = useInterceptFocus()\n\n  useEffect(() => {\n    if (!modalRef.current) return\n\n    interceptFocus(modalRef.current)\n    return restoreFocus\n  }, [interceptFocus, restoreFocus])\n\n  return modalRef\n}\n"],"names":["React","useCallback","useEffect","useRef","useInterceptFocus","FOCUSABLE_ELEMENTS","useModalFocus","modalRef","getFocusableNodes","nodes","current","querySelectorAll","join","Array","from","filter","node","HTMLElement","offsetParent","handleRetainFocus","event","focusableNodes","length","currentElement","document","activeElement","focusedItemIndex","indexOf","shiftKey","focus","preventDefault","handleKeyDown","code","addEventListener","removeEventListener","interceptFocus","restoreFocus"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO,CAAA;AAC7D,SAASC,iBAAiB,QAAQ,uBAAoB,CAAA;AACtD,SAASC,kBAAkB,QAAQ,aAAa,CAAA;AAEhD,OAAO,MAAMC,aAAa,GAAG,IAAuC;IAClE,MAAMC,QAAQ,GAAGJ,MAAM,CAAiB,IAAI,CAAC;IAE7C,MAAMK,iBAAiB,GAAGP,WAAW,CAAC,IAAM;YAExCM,GAAgB;YAAhBA,IAAgE;QADlE,MAAME,KAAK,GACTF,CAAAA,IAAgE,GAAhEA,CAAAA,GAAgB,GAAhBA,QAAQ,CAACG,OAAO,cAAhBH,GAAgB,WAAkB,GAAlCA,KAAAA,CAAkC,GAAlCA,GAAgB,CAAEI,gBAAgB,CAACN,kBAAkB,CAACO,IAAI,CAAC,GAAG,CAAC,CAAC,cAAhEL,IAAgE,cAAhEA,IAAgE,GAAI,EAAE;QAExE,OAAOM,KAAK,CAACC,IAAI,CAACL,KAAK,CAAC,CAACM,MAAM,CAC7B,CAACC,IAAI,GACHA,IAAI,IAAIA,IAAI,YAAYC,WAAW,IAAID,IAAI,CAACE,YAAY,KAAK,IAAI,CACpE,CAAA;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMC,iBAAiB,GAAGlB,WAAW,CACnC,CAACmB,KAAoB,GAAK;QACxB,MAAMC,cAAc,GAAGb,iBAAiB,EAAE;QAE1C,IAAIa,cAAc,CAACC,MAAM,KAAK,CAAC,EAAE,OAAM;QAEvC,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa;QAC7C,MAAMC,gBAAgB,GACpBH,cAAc,YAAYN,WAAW,IACrCI,cAAc,CAACM,OAAO,CAACJ,cAAc,CAAC;QAExC,IAAIH,KAAK,CAACQ,QAAQ,IAAIF,gBAAgB,KAAK,CAAC,EAAE;YAC5CL,cAAc,CAACA,cAAc,CAACC,MAAM,GAAG,CAAC,CAAC,CAACO,KAAK,EAAE;YACjDT,KAAK,CAACU,cAAc,EAAE;QACxB,CAAC;QAED,IACE,CAACV,KAAK,CAACQ,QAAQ,IACfP,cAAc,CAACC,MAAM,GAAG,CAAC,IACzBI,gBAAgB,KAAKL,cAAc,CAACC,MAAM,GAAG,CAAC,EAC9C;YACAD,cAAc,CAAC,CAAC,CAAC,CAACQ,KAAK,EAAE;YACzBT,KAAK,CAACU,cAAc,EAAE;QACxB,CAAC;IACH,CAAC,EACD;QAACtB,iBAAiB;KAAC,CACpB;IAEDN,SAAS,CAAC,IAAM;QACd,MAAM6B,aAAa,GAAG,CAACX,KAAoB,GAAK;YAC9C,IAAIA,KAAK,CAACY,IAAI,KAAK,KAAK,EAAEb,iBAAiB,CAACC,KAAK,CAAC;QACpD,CAAC;QAEDI,QAAQ,CAACS,gBAAgB,CAAC,SAAS,EAAEF,aAAa,CAAC;QACnD,OAAO,IAAMP,QAAQ,CAACU,mBAAmB,CAAC,SAAS,EAAEH,aAAa,CAAC,CAAA;IACrE,CAAC,EAAE;QAACZ,iBAAiB;KAAC,CAAC;IAEvB,MAAM,CAACgB,cAAc,EAAEC,YAAY,CAAC,GAAGhC,iBAAiB,EAAE;IAE1DF,SAAS,CAAC,IAAM;QACd,IAAI,CAACK,QAAQ,CAACG,OAAO,EAAE,OAAM;QAE7ByB,cAAc,CAAC5B,QAAQ,CAACG,OAAO,CAAC;QAChC,OAAO0B,YAAY,CAAA;IACrB,CAAC,EAAE;QAACD,cAAc;QAAEC,YAAY;KAAC,CAAC;IAElC,OAAO7B,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/esm/pagination/src/Pagination.js

@@ -0,0 +1,74 @@
+import React, { useMemo, useState, useEffect } from "react";
+import styled from "styled-components";
+import { ArrowLeft, ArrowRight } from "../../icons/src/index";
+import { Box } from "../../box/src/index";
+import { PaginationItemVariant } from "./types";
+import getShowingPages from "./getShowingPages";
+import PaginationItem from "./PaginationItem";
+const getActiveItem = (length, activeItem)=>{
+    const isActiveNotInRange = activeItem >= length || activeItem < 0;
+    if (!activeItem || isActiveNotInRange) {
+        return 1 // default active item will be the first one
+        ;
+    }
+    return activeItem;
+};
+const PaginationBlock = styled(Box)`
+  display: flex;
+  gap: 8px;
+`;
+const Pagination = (props)=>{
+    const { onItemClick , pagesCount , activePage =1 , siblingCount  } = props;
+    const [currentPage, setCurrPage] = useState(getActiveItem(pagesCount, activePage));
+    const showingPages = useMemo(()=>getShowingPages(pagesCount, currentPage, siblingCount), [
+        pagesCount,
+        currentPage,
+        siblingCount
+    ]);
+    useEffect(()=>{
+        setCurrPage((page)=>page !== activePage ? activePage : page);
+    }, [
+        activePage
+    ]);
+    if (pagesCount <= 0) {
+        return null;
+    }
+    const onPageItemClick = (page, e)=>{
+        onItemClick(page, e);
+        setCurrPage(page);
+    };
+    const onPreviousClick = ()=>{
+        if (currentPage === 1) {
+            return; // disabled
+        }
+        setCurrPage(currentPage - 1);
+    };
+    const onNextClick = ()=>{
+        if (currentPage === pagesCount) {
+            return; // disabled
+        }
+        setCurrPage(currentPage + 1);
+    };
+    return /*#__PURE__*/ React.createElement(PaginationBlock, null, /*#__PURE__*/ React.createElement(PaginationItem, {
+        disabled: currentPage === 1,
+        icon: /*#__PURE__*/ React.createElement(ArrowLeft, null),
+        onClick: onPreviousClick
+    }), showingPages.map((page, index)=>{
+        const isDisabled = page === '...';
+        const variant = page === currentPage ? PaginationItemVariant.active : PaginationItemVariant.default;
+        return /*#__PURE__*/ React.createElement(PaginationItem, {
+            key: page === '...' ? `${page}${index}` : page,
+            icon: page,
+            variant: variant,
+            disabled: isDisabled,
+            onClick: onPageItemClick.bind(null, page)
+        });
+    }), /*#__PURE__*/ React.createElement(PaginationItem, {
+        disabled: currentPage === pagesCount,
+        icon: /*#__PURE__*/ React.createElement(ArrowRight, null),
+        onClick: onNextClick
+    }));
+};
+export default Pagination;
+
+//# sourceMappingURL=Pagination.js.map

package/dist/esm/pagination/src/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/Pagination.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect } from 'react'\nimport styled from 'styled-components'\n\nimport { ArrowLeft, ArrowRight } from '@lidofinance/icons'\nimport { Box } from '@lidofinance/box'\n\nimport {\n  PaginationProps,\n  PaginationItemProps,\n  PaginationItemVariant,\n} from './types'\nimport getShowingPages from './getShowingPages'\nimport PaginationItem from './PaginationItem'\n\nconst getActiveItem = (length: number, activeItem: number): number => {\n  const isActiveNotInRange: boolean = activeItem >= length || activeItem < 0\n\n  if (!activeItem || isActiveNotInRange) {\n    return 1 // default active item will be the first one\n  }\n\n  return activeItem\n}\n\nconst PaginationBlock = styled(Box)`\n  display: flex;\n  gap: 8px;\n`\n\nconst Pagination: React.FC<PaginationProps> = (props) => {\n  const { onItemClick, pagesCount, activePage = 1, siblingCount } = props\n\n  const [currentPage, setCurrPage] = useState(\n    getActiveItem(pagesCount, activePage)\n  )\n\n  const showingPages = useMemo<(string | number)[]>(\n    () => getShowingPages(pagesCount, currentPage, siblingCount),\n    [pagesCount, currentPage, siblingCount]\n  )\n\n  useEffect(() => {\n    setCurrPage((page) => (page !== activePage ? activePage : page))\n  }, [activePage])\n\n  if (pagesCount <= 0) {\n    return null\n  }\n\n  const onPageItemClick = (page: number, e: React.MouseEvent) => {\n    onItemClick(page, e)\n    setCurrPage(page)\n  }\n\n  const onPreviousClick = () => {\n    if (currentPage === 1) {\n      return // disabled\n    }\n\n    setCurrPage(currentPage - 1)\n  }\n\n  const onNextClick = () => {\n    if (currentPage === pagesCount) {\n      return // disabled\n    }\n\n    setCurrPage(currentPage + 1)\n  }\n\n  return (\n    <PaginationBlock>\n      <PaginationItem\n        disabled={currentPage === 1}\n        icon={<ArrowLeft />}\n        onClick={onPreviousClick}\n      />\n\n      {showingPages.map((page, index) => {\n        const isDisabled = page === '...'\n        const variant: PaginationItemProps['variant'] =\n          page === currentPage\n            ? PaginationItemVariant.active\n            : PaginationItemVariant.default\n\n        return (\n          <PaginationItem\n            key={page === '...' ? `${page}${index}` : page}\n            icon={page}\n            variant={variant}\n            disabled={isDisabled}\n            onClick={onPageItemClick.bind(null, page)}\n          />\n        )\n      })}\n\n      <PaginationItem\n        disabled={currentPage === pagesCount}\n        icon={<ArrowRight />}\n        onClick={onNextClick}\n      />\n    </PaginationBlock>\n  )\n}\n\nexport default Pagination\n"],"names":["React","useMemo","useState","useEffect","styled","ArrowLeft","ArrowRight","Box","PaginationItemVariant","getShowingPages","PaginationItem","getActiveItem","length","activeItem","isActiveNotInRange","PaginationBlock","Pagination","props","onItemClick","pagesCount","activePage","siblingCount","currentPage","setCurrPage","showingPages","page","onPageItemClick","e","onPreviousClick","onNextClick","disabled","icon","onClick","map","index","isDisabled","variant","active","default","key","bind"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO,CAAA;AAC3D,OAAOC,MAAM,MAAM,mBAAmB,CAAA;AAEtC,SAASC,SAAS,EAAEC,UAAU,QAAQ,uBAAoB,CAAA;AAC1D,SAASC,GAAG,QAAQ,qBAAkB,CAAA;AAEtC,SAGEC,qBAAqB,QAChB,SAAS,CAAA;AAChB,OAAOC,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAOC,cAAc,MAAM,kBAAkB,CAAA;AAE7C,MAAMC,aAAa,GAAG,CAACC,MAAc,EAAEC,UAAkB,GAAa;IACpE,MAAMC,kBAAkB,GAAYD,UAAU,IAAID,MAAM,IAAIC,UAAU,GAAG,CAAC;IAE1E,IAAI,CAACA,UAAU,IAAIC,kBAAkB,EAAE;QACrC,OAAO,CAAC,CAAC,4CAA4C;SAA7C;IACV,CAAC;IAED,OAAOD,UAAU,CAAA;AACnB,CAAC;AAED,MAAME,eAAe,GAAGX,MAAM,CAACG,GAAG,CAAC,CAAC;;;AAGpC,CAAC;AAED,MAAMS,UAAU,GAA8B,CAACC,KAAK,GAAK;IACvD,MAAM,EAAEC,WAAW,CAAA,EAAEC,UAAU,CAAA,EAAEC,UAAU,EAAG,CAAC,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGJ,KAAK;IAEvE,MAAM,CAACK,WAAW,EAAEC,WAAW,CAAC,GAAGrB,QAAQ,CACzCS,aAAa,CAACQ,UAAU,EAAEC,UAAU,CAAC,CACtC;IAED,MAAMI,YAAY,GAAGvB,OAAO,CAC1B,IAAMQ,eAAe,CAACU,UAAU,EAAEG,WAAW,EAAED,YAAY,CAAC,EAC5D;QAACF,UAAU;QAAEG,WAAW;QAAED,YAAY;KAAC,CACxC;IAEDlB,SAAS,CAAC,IAAM;QACdoB,WAAW,CAAC,CAACE,IAAI,GAAMA,IAAI,KAAKL,UAAU,GAAGA,UAAU,GAAGK,IAAI,AAAC,CAAC;IAClE,CAAC,EAAE;QAACL,UAAU;KAAC,CAAC;IAEhB,IAAID,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAMO,eAAe,GAAG,CAACD,IAAY,EAAEE,CAAmB,GAAK;QAC7DT,WAAW,CAACO,IAAI,EAAEE,CAAC,CAAC;QACpBJ,WAAW,CAACE,IAAI,CAAC;IACnB,CAAC;IAED,MAAMG,eAAe,GAAG,IAAM;QAC5B,IAAIN,WAAW,KAAK,CAAC,EAAE;YACrB,OAAM,CAAC,WAAW;QACpB,CAAC;QAEDC,WAAW,CAACD,WAAW,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAMO,WAAW,GAAG,IAAM;QACxB,IAAIP,WAAW,KAAKH,UAAU,EAAE;YAC9B,OAAM,CAAC,WAAW;QACpB,CAAC;QAEDI,WAAW,CAACD,WAAW,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,oBAACP,eAAe,sBACd,oBAACL,cAAc;QACboB,QAAQ,EAAER,WAAW,KAAK,CAAC;QAC3BS,IAAI,gBAAE,oBAAC1B,SAAS,OAAG;QACnB2B,OAAO,EAAEJ,eAAe;MACxB,EAEDJ,YAAY,CAACS,GAAG,CAAC,CAACR,IAAI,EAAES,KAAK,GAAK;QACjC,MAAMC,UAAU,GAAGV,IAAI,KAAK,KAAK;QACjC,MAAMW,OAAO,GACXX,IAAI,KAAKH,WAAW,GAChBd,qBAAqB,CAAC6B,MAAM,GAC5B7B,qBAAqB,CAAC8B,OAAO;QAEnC,qBACE,oBAAC5B,cAAc;YACb6B,GAAG,EAAEd,IAAI,KAAK,KAAK,GAAG,CAAC,EAAEA,IAAI,CAAC,EAAES,KAAK,CAAC,CAAC,GAAGT,IAAI;YAC9CM,IAAI,EAAEN,IAAI;YACVW,OAAO,EAAEA,OAAO;YAChBN,QAAQ,EAAEK,UAAU;YACpBH,OAAO,EAAEN,eAAe,CAACc,IAAI,CAAC,IAAI,EAAEf,IAAI,CAAC;UACzC,CACH;IACH,CAAC,CAAC,gBAEF,oBAACf,cAAc;QACboB,QAAQ,EAAER,WAAW,KAAKH,UAAU;QACpCY,IAAI,gBAAE,oBAACzB,UAAU,OAAG;QACpB0B,OAAO,EAAEH,WAAW;MACpB,CACc,CACnB;AACH,CAAC;AAED,eAAeb,UAAU,CAAA"}

package/dist/esm/pagination/src/PaginationItem.js

@@ -0,0 +1,13 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React from "react";
+import { PaginationItemStyle } from "./PaginationItemStyles";
+import { PaginationItemVariant } from "./types";
+const PaginationItem = (props)=>{
+    const { icon , variant =PaginationItemVariant.default , ...rest } = props;
+    return /*#__PURE__*/ React.createElement(PaginationItemStyle, _extends({
+        $variant: variant
+    }, rest), icon);
+};
+export default PaginationItem;
+
+//# sourceMappingURL=PaginationItem.js.map

package/dist/esm/pagination/src/PaginationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/PaginationItem.tsx"],"sourcesContent":["import React from 'react'\nimport { PaginationItemStyle } from './PaginationItemStyles'\nimport { PaginationItemProps, PaginationItemVariant } from './types'\n\nconst PaginationItem: React.FC<PaginationItemProps> = (props) => {\n  const { icon, variant = PaginationItemVariant.default, ...rest } = props\n  return (\n    <PaginationItemStyle $variant={variant} {...rest}>\n      {icon}\n    </PaginationItemStyle>\n  )\n}\n\nexport default PaginationItem\n"],"names":["React","PaginationItemStyle","PaginationItemVariant","PaginationItem","props","icon","variant","default","rest","$variant"],"mappings":"AAAA;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,SAASC,mBAAmB,QAAQ,wBAAwB,CAAA;AAC5D,SAA8BC,qBAAqB,QAAQ,SAAS,CAAA;AAEpE,MAAMC,cAAc,GAAkC,CAACC,KAAK,GAAK;IAC/D,MAAM,EAAEC,IAAI,CAAA,EAAEC,OAAO,EAAGJ,qBAAqB,CAACK,OAAO,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGJ,KAAK;IACxE,qBACE,oBAACH,mBAAmB;QAACQ,QAAQ,EAAEH,OAAO;OAAME,IAAI,GAC7CH,IAAI,CACe,CACvB;AACH,CAAC;AAED,eAAeF,cAAc,CAAA"}

package/dist/esm/pagination/src/PaginationItemStyles.js

@@ -0,0 +1,49 @@
+import styled, { css } from "styled-components";
+import { PaginationItemVariant } from "./types";
+const variantColors = {
+    [PaginationItemVariant.active]: css`
+    border-color: var(--lido-color-primary);
+    color: var(--lido-color-primary);
+
+    :not(:disabled):hover {
+      border-color: var(--lido-color-primaryVisited);
+      color: var(--lido-color-primaryVisited);
+    }
+  `,
+    [PaginationItemVariant.default]: css`
+    border-color: var(--lido-color-border);
+    color: var(--lido-color-text);
+
+    :not(:disabled):hover {
+      border-color: var(--lido-color-primary);
+      color: var(--lido-color-primary);
+    }
+  `
+};
+export const PaginationItemStyle = styled.button`
+  width: 32px;
+  height: 32px;
+  background-color: var(--lido-color-foreground);
+  border: 1px solid;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0;
+
+  ${(param)=>{
+    let { $variant  } = param;
+    return variantColors[$variant];
+}}
+
+  :disabled {
+    border-color: var(--lido-color-border);
+    color: var(--lido-color-textSecondary);
+    cursor: unset;
+  }
+`;
+
+//# sourceMappingURL=PaginationItemStyles.js.map

package/dist/esm/pagination/src/PaginationItemStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/PaginationItemStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Theme } from '@lidofinance/theme'\nimport { PaginationItemVariant } from './types'\n\ntype InjectedProps = {\n  $variant: PaginationItemVariant\n  theme: Theme\n}\n\nconst variantColors = {\n  [PaginationItemVariant.active]: css`\n    border-color: var(--lido-color-primary);\n    color: var(--lido-color-primary);\n\n    :not(:disabled):hover {\n      border-color: var(--lido-color-primaryVisited);\n      color: var(--lido-color-primaryVisited);\n    }\n  `,\n  [PaginationItemVariant.default]: css`\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    :not(:disabled):hover {\n      border-color: var(--lido-color-primary);\n      color: var(--lido-color-primary);\n    }\n  `,\n}\n\nexport const PaginationItemStyle = styled.button<InjectedProps>`\n  width: 32px;\n  height: 32px;\n  background-color: var(--lido-color-foreground);\n  border: 1px solid;\n  display: grid;\n  place-items: center;\n  box-sizing: border-box;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 700;\n  padding: 0;\n\n  ${({ $variant }) => variantColors[$variant]}\n\n  :disabled {\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-textSecondary);\n    cursor: unset;\n  }\n`\n"],"names":["styled","css","PaginationItemVariant","variantColors","active","default","PaginationItemStyle","button","$variant"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB,CAAA;AAE/C,SAASC,qBAAqB,QAAQ,SAAS,CAAA;AAO/C,MAAMC,aAAa,GAAG;IACpB,CAACD,qBAAqB,CAACE,MAAM,CAAC,EAAEH,GAAG,CAAC;;;;;;;;EAQpC,CAAC;IACD,CAACC,qBAAqB,CAACG,OAAO,CAAC,EAAEJ,GAAG,CAAC;;;;;;;;EAQrC,CAAC;CACF;AAED,OAAO,MAAMK,mBAAmB,GAAGN,MAAM,CAACO,MAAM,AAAe,CAAC;;;;;;;;;;;;;;EAc9D,EAAE,SAAkBJ;QAAjB,EAAEK,QAAQ,CAAA,EAAE;WAAKL,aAAa,CAACK,QAAQ,CAAC;AAAD,CAAC,CAAC;;;;;;;AAO9C,CAAC,CAAA"}

package/dist/esm/pagination/src/getShowingPages.js

@@ -0,0 +1,130 @@
+export const arrayPusher = ()=>{
+    const innerArray = [];
+    return (arr, element)=>{
+        if (!innerArray.includes(element) || element === '...') {
+            innerArray.push(element);
+            arr.push(element);
+        }
+        return innerArray.length;
+    };
+};
+export const numberSort = (a, b)=>a - b;
+export const range = (start, end)=>{
+    const length = end - start + 1;
+    return Array.from({
+        length
+    }, (_, i)=>start + i);
+};
+const getShowingPages = function(pagesCount) {
+    let currPage = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1, siblingCount = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+    if (!pagesCount) {
+        return [];
+    }
+    const showingPagesCount = siblingCount === 1 ? 7 : 5;
+    if (pagesCount <= showingPagesCount) {
+        return range(1, pagesCount);
+    }
+    const firstPage = 1;
+    const lastPage = pagesCount;
+    const firstPages = [];
+    const firstEllipsis = [];
+    const middlePages = [];
+    const lastEllipsis = [];
+    const lastPages = [];
+    const pusher = arrayPusher();
+    pusher(firstPages, firstPage);
+    // see getShowingPages.test.ts for full example
+    let siblings;
+    switch(true){
+        case firstPage === currPage:
+            siblings = [
+                0,
+                1,
+                1 + siblingCount
+            ] //currPage=1 => [1. 2, 3?]
+            ;
+            break;
+        case lastPage === currPage:
+            siblings = [
+                -siblingCount - 1,
+                -1,
+                0
+            ] // currPage=10 => [?8, 9, 10]
+            ;
+            break;
+        case siblingCount === 1 && currPage - firstPage === 3:
+            siblings = [
+                -2,
+                -1,
+                0,
+                1
+            ] // currPage=4 => [2, 3, 4, 5]
+            ;
+            break;
+        case siblingCount === 1 && lastPage - currPage === 3:
+            siblings = [
+                -1,
+                0,
+                1,
+                2
+            ] // currPage=7 => [6, 7, 8, 9]
+            ;
+            break;
+        case siblingCount === 1:
+            siblings = [
+                -1,
+                0,
+                1
+            ] // currPage=5 => [4, 5, 6]
+            ;
+            break;
+        case siblingCount === 0 && currPage - firstPage === 2:
+            siblings = [
+                -1,
+                0
+            ] // currPage=3 => [1, 2, 3]
+            ;
+            break;
+        case siblingCount === 0 && lastPage - currPage === 2:
+            siblings = [
+                0,
+                1
+            ] // currPage=8 => [8, 9]
+            ;
+            break;
+        default:
+            siblings = [
+                0
+            ] // no siblings
+            ;
+            break;
+    }
+    siblings.forEach((sibling)=>{
+        pusher(middlePages, currPage + sibling);
+    });
+    if (currPage - firstPage >= 3 + siblingCount) {
+        pusher(firstEllipsis, '...');
+    }
+    if (lastPage - currPage >= 3 + siblingCount) {
+        pusher(lastEllipsis, '...');
+    }
+    const count = pusher(lastPages, lastPage);
+    const rest = showingPagesCount - count;
+    for(let i = rest; i > 0; i--){
+        if (currPage < pagesCount / 2) {
+            pusher(lastPages, lastPage - i);
+        } else {
+            pusher(firstPages, firstPage + i);
+        }
+    }
+    return [
+        ...firstPages.sort(numberSort),
+        ...firstEllipsis,
+        ...middlePages,
+        ...lastEllipsis,
+        ...lastPages.sort(numberSort), 
+    ];
+};
+export default getShowingPages;
+
+//# sourceMappingURL=getShowingPages.js.map

package/dist/esm/pagination/src/getShowingPages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/getShowingPages.ts"],"sourcesContent":["import { SiblingsCount } from './types'\n\nexport const arrayPusher = (): ((\n  arr: unknown[],\n  element: unknown\n) => number) => {\n  const innerArray: unknown[] = []\n\n  return (arr: unknown[], element: unknown) => {\n    if (!innerArray.includes(element) || element === '...') {\n      innerArray.push(element)\n      arr.push(element)\n    }\n\n    return innerArray.length\n  }\n}\n\nexport const numberSort = (a: number, b: number): number => a - b\n\nexport const range = (start: number, end: number): number[] => {\n  const length = end - start + 1\n  return Array.from({ length }, (_, i) => start + i)\n}\n\nconst getShowingPages = (\n  pagesCount: number,\n  currPage = 1,\n  siblingCount: SiblingsCount = 1\n): (string | number)[] => {\n  if (!pagesCount) {\n    return []\n  }\n\n  const showingPagesCount = siblingCount === 1 ? 7 : 5\n  if (pagesCount <= showingPagesCount) {\n    return range(1, pagesCount)\n  }\n\n  const firstPage = 1\n  const lastPage = pagesCount\n\n  const firstPages: number[] = []\n  const firstEllipsis: string[] = []\n  const middlePages: number[] = []\n  const lastEllipsis: string[] = []\n  const lastPages: number[] = []\n\n  const pusher = arrayPusher()\n  pusher(firstPages, firstPage)\n\n  // see getShowingPages.test.ts for full example\n  let siblings\n  switch (true) {\n    case firstPage === currPage:\n      siblings = [0, 1, 1 + siblingCount] //currPage=1 => [1. 2, 3?]\n      break\n\n    case lastPage === currPage:\n      siblings = [-siblingCount - 1, -1, 0] // currPage=10 => [?8, 9, 10]\n      break\n\n    case siblingCount === 1 && currPage - firstPage === 3:\n      siblings = [-2, -1, 0, 1] // currPage=4 => [2, 3, 4, 5]\n      break\n\n    case siblingCount === 1 && lastPage - currPage === 3:\n      siblings = [-1, 0, 1, 2] // currPage=7 => [6, 7, 8, 9]\n      break\n\n    case siblingCount === 1:\n      siblings = [-1, 0, 1] // currPage=5 => [4, 5, 6]\n      break\n\n    case siblingCount === 0 && currPage - firstPage === 2:\n      siblings = [-1, 0] // currPage=3 => [1, 2, 3]\n      break\n\n    case siblingCount === 0 && lastPage - currPage === 2:\n      siblings = [0, 1] // currPage=8 => [8, 9]\n      break\n\n    default:\n      siblings = [0] // no siblings\n      break\n  }\n\n  siblings.forEach((sibling) => {\n    pusher(middlePages, currPage + sibling)\n  })\n\n  if (currPage - firstPage >= 3 + siblingCount) {\n    pusher(firstEllipsis, '...')\n  }\n\n  if (lastPage - currPage >= 3 + siblingCount) {\n    pusher(lastEllipsis, '...')\n  }\n\n  const count = pusher(lastPages, lastPage)\n\n  const rest = showingPagesCount - count\n  for (let i = rest; i > 0; i--) {\n    if (currPage < pagesCount / 2) {\n      pusher(lastPages, lastPage - i)\n    } else {\n      pusher(firstPages, firstPage + i)\n    }\n  }\n\n  return [\n    ...firstPages.sort(numberSort),\n    ...firstEllipsis,\n    ...middlePages,\n    ...lastEllipsis,\n    ...lastPages.sort(numberSort),\n  ]\n}\n\nexport default getShowingPages\n"],"names":["arrayPusher","innerArray","arr","element","includes","push","length","numberSort","a","b","range","start","end","Array","from","_","i","getShowingPages","pagesCount","currPage","siblingCount","showingPagesCount","firstPage","lastPage","firstPages","firstEllipsis","middlePages","lastEllipsis","lastPages","pusher","siblings","forEach","sibling","count","rest","sort"],"mappings":"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"}

package/dist/esm/pagination/src/index.js

@@ -0,0 +1,4 @@
+export { default as Pagination } from "./Pagination";
+export * from './types';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/pagination/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/index.ts"],"sourcesContent":["export { default as Pagination } from './Pagination'\nexport * from './types'\n"],"names":["default","Pagination"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc,CAAA;AACpD,cAAc,SAAS,CAAA"}

package/dist/esm/pagination/src/types.js

@@ -0,0 +1,8 @@
+import React from "react";
+export var PaginationItemVariant;
+(function(PaginationItemVariant) {
+    PaginationItemVariant["default"] = "default";
+    PaginationItemVariant["active"] = "active";
+})(PaginationItemVariant || (PaginationItemVariant = {}));
+
+//# sourceMappingURL=types.js.map

package/dist/esm/pagination/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/pagination/src/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React from 'react'\n\nexport type SiblingsCount = 0 | 1\n\nexport type onItemClick = (index: number, e?: React.MouseEvent) => void\n\nexport type PaginationProps = LidoComponentProps<\n  'div',\n  {\n    pagesCount: number\n    activePage?: number\n    onItemClick: onItemClick\n    siblingCount?: SiblingsCount\n  }\n>\n\nexport enum PaginationItemVariant {\n  default = 'default',\n  active = 'active',\n}\n\nexport type PaginationItemProps = LidoComponentProps<\n  'button',\n  {\n    variant?: PaginationItemVariant\n    icon: React.ReactNode\n  }\n>\n"],"names":["React","PaginationItemVariant","default","active"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO,CAAA;WAgBlB,qBAGN;UAHWC,qBAAqB;IAArBA,qBAAqB,CAC/BC,SAAO,IAAPA,SAAO;IADGD,qBAAqB,CAE/BE,QAAM,IAANA,QAAM;GAFIF,qBAAqB,KAArBA,qBAAqB"}

package/dist/esm/popover/src/Popover.js

@@ -0,0 +1,17 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { DEFAULT_PLACEMENT } from "./constants";
+import { PopoverStyle } from "./PopoverStyles";
+function Popover(props, ref) {
+    const { placement =DEFAULT_PLACEMENT , open =false , offset ='xs' , ...rest } = props;
+    return /*#__PURE__*/ React.createElement(PopoverStyle, _extends({
+        $offset: offset,
+        placement: placement,
+        in: open
+    }, rest, {
+        ref: ref
+    }));
+}
+export default /*#__PURE__*/ forwardRef(Popover);
+
+//# sourceMappingURL=Popover.js.map

package/dist/esm/popover/src/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/Popover.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport { DEFAULT_PLACEMENT } from './constants'\n\nimport { PopoverStyle } from './PopoverStyles'\nimport { PopoverProps } from './types'\n\nfunction Popover(props: PopoverProps, ref?: ForwardedRef<HTMLDivElement>) {\n  const {\n    placement = DEFAULT_PLACEMENT,\n    open = false,\n    offset = 'xs',\n    ...rest\n  } = props\n\n  return (\n    <PopoverStyle\n      $offset={offset}\n      placement={placement}\n      in={open}\n      {...rest}\n      ref={ref}\n    />\n  )\n}\n\nexport default forwardRef(Popover)\n"],"names":["React","forwardRef","DEFAULT_PLACEMENT","PopoverStyle","Popover","props","ref","placement","open","offset","rest","$offset","in"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AACvD,SAASC,iBAAiB,QAAQ,aAAa,CAAA;AAE/C,SAASC,YAAY,QAAQ,iBAAiB,CAAA;AAG9C,SAASC,OAAO,CAACC,KAAmB,EAAEC,GAAkC,EAAE;IACxE,MAAM,EACJC,SAAS,EAAGL,iBAAiB,CAAA,EAC7BM,IAAI,EAAG,KAAK,CAAA,EACZC,MAAM,EAAG,IAAI,CAAA,EACb,GAAGC,IAAI,EACR,GAAGL,KAAK;IAET,qBACE,oBAACF,YAAY;QACXQ,OAAO,EAAEF,MAAM;QACfF,SAAS,EAAEA,SAAS;QACpBK,EAAE,EAAEJ,IAAI;OACJE,IAAI;QACRJ,GAAG,EAAEA,GAAG;OACR,CACH;AACH,CAAC;AAED,6BAAeL,UAAU,CAACG,OAAO,CAAC,CAAA"}

package/dist/esm/popover/src/PopoverRoot.js

@@ -0,0 +1,39 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import ReactDOM from "react-dom";
+import { modalRoot } from "../../utils/src/index";
+import { useMergeRefs, useOutsideClick, useEscape } from "../../hooks/src/index";
+import { withTransition } from "../../transition/src/index";
+import { usePopoverPosition } from "./usePopoverPosition";
+import { PopoverWrapperStyle, PopoverRootStyle } from "./PopoverRootStyles";
+import { DEFAULT_PLACEMENT } from "./constants";
+function PopoverRoot(props, externalRef) {
+    const { anchorRef , wrapperRef: externalWrapperRef , placement =DEFAULT_PLACEMENT , backdrop =true , transitionStatus , duration , ...rest } = props;
+    const { onClose  } = props;
+    useEscape(onClose);
+    const { ref: outsidePopoverRef  } = useOutsideClick(onClose);
+    const { popoverRef: positionPopoverRef , wrapperRef: positionWrapperRef , style ,  } = usePopoverPosition(props);
+    const popoverRef = useMergeRefs([
+        positionPopoverRef,
+        outsidePopoverRef,
+        externalRef, 
+    ]);
+    const wrapperRef = useMergeRefs([
+        positionWrapperRef,
+        externalWrapperRef
+    ]);
+    if (!modalRoot) return null;
+    return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(PopoverWrapperStyle, {
+        $backdrop: backdrop,
+        ref: wrapperRef
+    }, /*#__PURE__*/ React.createElement(PopoverRootStyle, _extends({}, rest, {
+        $transition: transitionStatus,
+        $duration: duration,
+        "data-placement": placement,
+        style: style,
+        ref: popoverRef
+    }))), modalRoot);
+}
+export default withTransition(/*#__PURE__*/ forwardRef(PopoverRoot));
+
+//# sourceMappingURL=PopoverRoot.js.map

package/dist/esm/popover/src/PopoverRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/popover/src/PopoverRoot.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport { modalRoot } from '@lidofinance/utils'\nimport { useMergeRefs, useOutsideClick, useEscape } from '@lidofinance/hooks'\nimport { withTransition } from '@lidofinance/transition'\nimport { usePopoverPosition } from './usePopoverPosition'\nimport { PopoverWrapperStyle, PopoverRootStyle } from './PopoverRootStyles'\nimport { PopoverRootInnerProps } from './types'\nimport { DEFAULT_PLACEMENT } from './constants'\n\nfunction PopoverRoot(\n  props: PopoverRootInnerProps,\n  externalRef?: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    anchorRef,\n    wrapperRef: externalWrapperRef,\n    placement = DEFAULT_PLACEMENT,\n    backdrop = true,\n    transitionStatus,\n    duration,\n    ...rest\n  } = props\n\n  const { onClose } = props\n  useEscape(onClose)\n  const { ref: outsidePopoverRef } = useOutsideClick(onClose)\n\n  const {\n    popoverRef: positionPopoverRef,\n    wrapperRef: positionWrapperRef,\n    style,\n  } = usePopoverPosition(props)\n\n  const popoverRef = useMergeRefs([\n    positionPopoverRef,\n    outsidePopoverRef,\n    externalRef,\n  ])\n\n  const wrapperRef = useMergeRefs([positionWrapperRef, externalWrapperRef])\n\n  if (!modalRoot) return null\n\n  return ReactDOM.createPortal(\n    <PopoverWrapperStyle $backdrop={backdrop} ref={wrapperRef}>\n      <PopoverRootStyle\n        {...rest}\n        $transition={transitionStatus}\n        $duration={duration}\n        data-placement={placement}\n        style={style}\n        ref={popoverRef}\n      />\n    </PopoverWrapperStyle>,\n    modalRoot\n  )\n}\n\nexport default withTransition(forwardRef(PopoverRoot))\n"],"names":["React","forwardRef","ReactDOM","modalRoot","useMergeRefs","useOutsideClick","useEscape","withTransition","usePopoverPosition","PopoverWrapperStyle","PopoverRootStyle","DEFAULT_PLACEMENT","PopoverRoot","props","externalRef","anchorRef","wrapperRef","externalWrapperRef","placement","backdrop","transitionStatus","duration","rest","onClose","ref","outsidePopoverRef","popoverRef","positionPopoverRef","positionWrapperRef","style","createPortal","$backdrop","$transition","$duration","data-placement"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AACvD,OAAOC,QAAQ,MAAM,WAAW,CAAA;AAChC,SAASC,SAAS,QAAQ,uBAAoB,CAAA;AAC9C,SAASC,YAAY,EAAEC,eAAe,EAAEC,SAAS,QAAQ,uBAAoB,CAAA;AAC7E,SAASC,cAAc,QAAQ,4BAAyB,CAAA;AACxD,SAASC,kBAAkB,QAAQ,sBAAsB,CAAA;AACzD,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,qBAAqB,CAAA;AAE3E,SAASC,iBAAiB,QAAQ,aAAa,CAAA;AAE/C,SAASC,WAAW,CAClBC,KAA4B,EAC5BC,WAA0C,EAC1C;IACA,MAAM,EACJC,SAAS,CAAA,EACTC,UAAU,EAAEC,kBAAkB,CAAA,EAC9BC,SAAS,EAAGP,iBAAiB,CAAA,EAC7BQ,QAAQ,EAAG,IAAI,CAAA,EACfC,gBAAgB,CAAA,EAChBC,QAAQ,CAAA,EACR,GAAGC,IAAI,EACR,GAAGT,KAAK;IAET,MAAM,EAAEU,OAAO,CAAA,EAAE,GAAGV,KAAK;IACzBP,SAAS,CAACiB,OAAO,CAAC;IAClB,MAAM,EAAEC,GAAG,EAAEC,iBAAiB,CAAA,EAAE,GAAGpB,eAAe,CAACkB,OAAO,CAAC;IAE3D,MAAM,EACJG,UAAU,EAAEC,kBAAkB,CAAA,EAC9BX,UAAU,EAAEY,kBAAkB,CAAA,EAC9BC,KAAK,CAAA,IACN,GAAGrB,kBAAkB,CAACK,KAAK,CAAC;IAE7B,MAAMa,UAAU,GAAGtB,YAAY,CAAC;QAC9BuB,kBAAkB;QAClBF,iBAAiB;QACjBX,WAAW;KACZ,CAAC;IAEF,MAAME,UAAU,GAAGZ,YAAY,CAAC;QAACwB,kBAAkB;QAAEX,kBAAkB;KAAC,CAAC;IAEzE,IAAI,CAACd,SAAS,EAAE,OAAO,IAAI,CAAA;IAE3B,qBAAOD,QAAQ,CAAC4B,YAAY,eAC1B,oBAACrB,mBAAmB;QAACsB,SAAS,EAAEZ,QAAQ;QAAEK,GAAG,EAAER,UAAU;qBACvD,oBAACN,gBAAgB,eACXY,IAAI;QACRU,WAAW,EAAEZ,gBAAgB;QAC7Ba,SAAS,EAAEZ,QAAQ;QACnBa,gBAAc,EAAEhB,SAAS;QACzBW,KAAK,EAAEA,KAAK;QACZL,GAAG,EAAEE,UAAU;OACf,CACkB,EACtBvB,SAAS,CACV,CAAA;AACH,CAAC;AAED,eAAeI,cAAc,eAACN,UAAU,CAACW,WAAW,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+export const PopoverWrapperStyle = styled.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 = css`
+  opacity: 1;
+
+  &[data-placement] {
+    transform: translate(0, 0);
+  }
+`;
+const hiddenCSS = 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;
+};
+export const PopoverRootStyle = styled.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/esm/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":["styled","css","PopoverWrapperStyle","div","$backdrop","visibleCSS","hiddenCSS","getTransitionCSS","$transition","includes","PopoverRootStyle","$duration"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB,CAAA;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAAG,AAAwB,CAAC;;;;;;;;UAQ5D,EAAE,SAAmB;QAAlB,EAAEC,SAAS,CAAA,EAAE;WAAMA,SAAS,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC,CAAC;AAC5D,CAAC,CAAA;AAED,MAAMC,UAAU,GAAGJ,GAAG,CAAC;;;;;;AAMvB,CAAC;AAED,MAAMK,SAAS,GAAGL,GAAG,CAAC;;;;;;;;;;;;;;;AAetB,CAAC;AAED,MAAMM,gBAAgB,GAAG,SAAsC;QAArC,EAAEC,WAAW,CAAA,EAAmB;IACxD,OAAO;QAAC,SAAS;QAAE,QAAQ;KAAC,CAACC,QAAQ,CAACD,WAAW,CAAC,GAAGF,SAAS,GAAGD,UAAU,CAAA;AAC7E,CAAC;AAED,OAAO,MAAMK,gBAAgB,GAAGV,MAAM,CAACG,GAAG,AAAiB,CAAC;;;;;sBAKtC,EAAE,SAAmBQ;QAAlB,EAAEA,SAAS,CAAA,EAAE;WAAKA,SAAS;AAAD,CAAC,CAAC;;;EAGnD,EAAEJ,gBAAgB,CAAC;AACrB,CAAC,CAAA"}

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

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import PopoverRoot from "./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 '';
+};
+export const PopoverStyle = styled(PopoverRoot)`
+  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/esm/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":["styled","PopoverRoot","getOffset","props","$offset","placement","theme","offset","spaceMap","startsWith","PopoverStyle","fontSizesMap","xs","borderRadiusesMap","lg","boxShadows"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAOC,WAAW,MAAM,eAAe,CAAA;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;AAED,OAAO,MAAMG,YAAY,GAAGV,MAAM,CAACC,WAAW,CAAC,CAAC;;;aAGnC,EAAE,SAAeK;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACK,YAAY,CAACC,EAAE;AAAD,CAAC,CAAC;;;iBAGnC,EAAE,SAAeN;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACO,iBAAiB,CAACC,EAAE;AAAD,CAAC,CAAC;cAC/C,EAAE,SAAeR;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACS,UAAU,CAACH,EAAE;AAAD,CAAC,CAAC;;WAExC,EAAE,SAAeN;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACE,QAAQ,CAACM,EAAE;AAAD,CAAC,CAAC;;;EAG5C,EAAEZ,SAAS,CAAC;AACd,CAAC,CAAA"}

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

@@ -0,0 +1,56 @@
+export 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