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

package/dist/esm/hooks/src/useBreakpoint.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "styled-components";
+export const useBreakpoint = (breakpoint)=>{
+    const theme = useTheme();
+    const maxWidth = theme.breakpointsMap[breakpoint].width;
+    const [isBreakpoint, seIsBreakpoint] = useState(()=>{
+        try {
+            return window.matchMedia(`(max-width: ${maxWidth})`).matches;
+        } catch (error) {
+            return false;
+        }
+    });
+    useEffect(()=>{
+        try {
+            const mql = window.matchMedia(`(max-width: ${maxWidth})`);
+            const setMobileFromQuery = (param)=>{
+                let { matches  } = param;
+                seIsBreakpoint(matches);
+            };
+            mql.addEventListener('change', setMobileFromQuery);
+            setMobileFromQuery(mql);
+            return ()=>{
+                mql.removeEventListener('change', setMobileFromQuery);
+            };
+        } catch (error) {
+            return;
+        }
+    }, [
+        maxWidth
+    ]);
+    return isBreakpoint;
+};
+
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/esm/hooks/src/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useBreakpoint.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { Theme } from '@lidofinance/theme'\nimport { useTheme } from 'styled-components'\n\nexport const useBreakpoint = (\n  breakpoint: keyof Theme['breakpointsMap']\n): boolean => {\n  const theme = useTheme()\n  const maxWidth = theme.breakpointsMap[breakpoint].width\n\n  const [isBreakpoint, seIsBreakpoint] = useState(() => {\n    try {\n      return window.matchMedia(`(max-width: ${maxWidth})`).matches\n    } catch (error) {\n      return false\n    }\n  })\n\n  useEffect(() => {\n    try {\n      const mql = window.matchMedia(`(max-width: ${maxWidth})`)\n\n      const setMobileFromQuery = ({ matches }: { matches: boolean }) => {\n        seIsBreakpoint(matches)\n      }\n\n      mql.addEventListener('change', setMobileFromQuery)\n      setMobileFromQuery(mql)\n\n      return () => {\n        mql.removeEventListener('change', setMobileFromQuery)\n      }\n    } catch (error) {\n      return\n    }\n  }, [maxWidth])\n\n  return isBreakpoint\n}\n"],"names":["useEffect","useState","useTheme","useBreakpoint","breakpoint","theme","maxWidth","breakpointsMap","width","isBreakpoint","seIsBreakpoint","window","matchMedia","matches","error","mql","setMobileFromQuery","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAA;AAE3C,SAASC,QAAQ,QAAQ,mBAAmB,CAAA;AAE5C,OAAO,MAAMC,aAAa,GAAG,CAC3BC,UAAyC,GAC7B;IACZ,MAAMC,KAAK,GAAGH,QAAQ,EAAE;IACxB,MAAMI,QAAQ,GAAGD,KAAK,CAACE,cAAc,CAACH,UAAU,CAAC,CAACI,KAAK;IAEvD,MAAM,CAACC,YAAY,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,IAAM;QACpD,IAAI;YACF,OAAOU,MAAM,CAACC,UAAU,CAAC,CAAC,YAAY,EAAEN,QAAQ,CAAC,CAAC,CAAC,CAAC,CAACO,OAAO,CAAA;QAC9D,EAAE,OAAOC,KAAK,EAAE;YACd,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC,CAAC;IAEFd,SAAS,CAAC,IAAM;QACd,IAAI;YACF,MAAMe,GAAG,GAAGJ,MAAM,CAACC,UAAU,CAAC,CAAC,YAAY,EAAEN,QAAQ,CAAC,CAAC,CAAC,CAAC;YAEzD,MAAMU,kBAAkB,GAAG,SAAuC;oBAAtC,EAAEH,OAAO,CAAA,EAAwB;gBAC3DH,cAAc,CAACG,OAAO,CAAC;YACzB,CAAC;YAEDE,GAAG,CAACE,gBAAgB,CAAC,QAAQ,EAAED,kBAAkB,CAAC;YAClDA,kBAAkB,CAACD,GAAG,CAAC;YAEvB,OAAO,IAAM;gBACXA,GAAG,CAACG,mBAAmB,CAAC,QAAQ,EAAEF,kBAAkB,CAAC;YACvD,CAAC,CAAA;QACH,EAAE,OAAOF,KAAK,EAAE;YACd,OAAM;QACR,CAAC;IACH,CAAC,EAAE;QAACR,QAAQ;KAAC,CAAC;IAEd,OAAOG,YAAY,CAAA;AACrB,CAAC,CAAA"}

package/dist/esm/hooks/src/useEscape.js

@@ -0,0 +1,18 @@
+import { useCallback, useEffect } from "react";
+export const useEscape = (callback)=>{
+    const handleKeyDown = useCallback((event)=>{
+        if (event.key === 'Escape') {
+            callback === null || callback === void 0 ? void 0 : callback();
+        }
+    }, [
+        callback
+    ]);
+    useEffect(()=>{
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        handleKeyDown
+    ]);
+};
+
+//# sourceMappingURL=useEscape.js.map

package/dist/esm/hooks/src/useEscape.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useEscape.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react'\n\nexport const useEscape = (callback?: () => void): void => {\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        callback?.()\n      }\n    },\n    [callback]\n  )\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [handleKeyDown])\n}\n"],"names":["useCallback","useEffect","useEscape","callback","handleKeyDown","event","key","window","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO,CAAA;AAE9C,OAAO,MAAMC,SAAS,GAAG,CAACC,QAAqB,GAAW;IACxD,MAAMC,aAAa,GAAGJ,WAAW,CAC/B,CAACK,KAAoB,GAAK;QACxB,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;YAC1BH,QAAQ,aAARA,QAAQ,WAAI,GAAZA,KAAAA,CAAY,GAAZA,QAAQ,EAAI,CAAA;QACd,CAAC;IACH,CAAC,EACD;QAACA,QAAQ;KAAC,CACX;IAEDF,SAAS,CAAC,IAAM;QACdM,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEJ,aAAa,CAAC;QAEjD,OAAO,IAAMG,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEL,aAAa,CAAC,CAAA;IACnE,CAAC,EAAE;QAACA,aAAa;KAAC,CAAC;AACrB,CAAC,CAAA"}

package/dist/esm/hooks/src/useInterceptFocus.js

@@ -0,0 +1,20 @@
+import { useCallback, useRef } from "react";
+export const useInterceptFocus = ()=>{
+    const savedElement = useRef(null);
+    const restoreFocus = useCallback(()=>{
+        if (!(savedElement.current instanceof HTMLElement)) return;
+        savedElement.current.focus();
+    }, []);
+    const interceptFocus = useCallback((node)=>{
+        savedElement.current = document.activeElement;
+        const isFocusInside = node.contains(document.activeElement);
+        if (isFocusInside) return;
+        node.focus();
+    }, []);
+    return [
+        interceptFocus,
+        restoreFocus
+    ];
+};
+
+//# sourceMappingURL=useInterceptFocus.js.map

package/dist/esm/hooks/src/useInterceptFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useInterceptFocus.ts"],"sourcesContent":["import { useCallback, useRef } from 'react'\n\nexport const useInterceptFocus = (): [\n  (node: HTMLElement) => void,\n  () => void\n] => {\n  const savedElement = useRef<Element | null>(null)\n\n  const restoreFocus = useCallback(() => {\n    if (!(savedElement.current instanceof HTMLElement)) return\n    savedElement.current.focus()\n  }, [])\n\n  const interceptFocus = useCallback((node: HTMLElement) => {\n    savedElement.current = document.activeElement\n\n    const isFocusInside = node.contains(document.activeElement)\n    if (isFocusInside) return\n\n    node.focus()\n  }, [])\n\n  return [interceptFocus, restoreFocus]\n}\n"],"names":["useCallback","useRef","useInterceptFocus","savedElement","restoreFocus","current","HTMLElement","focus","interceptFocus","node","document","activeElement","isFocusInside","contains"],"mappings":"AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO,CAAA;AAE3C,OAAO,MAAMC,iBAAiB,GAAG,IAG5B;IACH,MAAMC,YAAY,GAAGF,MAAM,CAAiB,IAAI,CAAC;IAEjD,MAAMG,YAAY,GAAGJ,WAAW,CAAC,IAAM;QACrC,IAAI,CAAC,CAACG,YAAY,CAACE,OAAO,YAAYC,WAAW,CAAC,EAAE,OAAM;QAC1DH,YAAY,CAACE,OAAO,CAACE,KAAK,EAAE;IAC9B,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMC,cAAc,GAAGR,WAAW,CAAC,CAACS,IAAiB,GAAK;QACxDN,YAAY,CAACE,OAAO,GAAGK,QAAQ,CAACC,aAAa;QAE7C,MAAMC,aAAa,GAAGH,IAAI,CAACI,QAAQ,CAACH,QAAQ,CAACC,aAAa,CAAC;QAC3D,IAAIC,aAAa,EAAE,OAAM;QAEzBH,IAAI,CAACF,KAAK,EAAE;IACd,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QAACC,cAAc;QAAEJ,YAAY;KAAC,CAAA;AACvC,CAAC,CAAA"}

package/dist/esm/hooks/src/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from "react";
+// use this instead of useLayoutEffect for SSR
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/dist/esm/hooks/src/useIsomorphicLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\n// use this instead of useLayoutEffect for SSR\nexport const useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":["useEffect","useLayoutEffect","useIsomorphicLayoutEffect","window"],"mappings":"AAAA,SAASA,SAAS,EAAEC,eAAe,QAAQ,OAAO,CAAA;AAElD,8CAA8C;AAC9C,OAAO,MAAMC,yBAAyB,GACpC,OAAOC,MAAM,KAAK,WAAW,GAAGF,eAAe,GAAGD,SAAS,CAAA"}

package/dist/esm/hooks/src/useLockScroll.js

@@ -0,0 +1,58 @@
+import { useCallback, useLayoutEffect } from "react";
+const getScrollbarSize = ()=>{
+    const tempDiv = document.createElement('div');
+    Object.assign(tempDiv.style, {
+        position: 'absolute',
+        left: '-9000px',
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll'
+    });
+    document.body.appendChild(tempDiv);
+    const scrollbarSize = tempDiv.offsetWidth - tempDiv.clientWidth;
+    document.body.removeChild(tempDiv);
+    return scrollbarSize;
+};
+const isVerticalScroll = (element)=>{
+    const isBody = document.body === element;
+    return isBody ? window.innerWidth > document.documentElement.clientWidth : element.scrollHeight > element.clientHeight;
+};
+const getPaddingRight = (element)=>{
+    return parseInt(window.getComputedStyle(element).paddingRight, 10) || 0;
+};
+const setStyleProperty = (element, property, value)=>{
+    if (value) {
+        element.style.setProperty(property, value);
+    } else {
+        element.style.removeProperty(property);
+    }
+};
+export const useLockScroll = function() {
+    let element = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : document.body;
+    const lockScroll = useCallback(()=>{
+        if (!isVerticalScroll(element)) return;
+        const previousValues = {
+            paddingRight: element.style.paddingRight,
+            overflow: element.style.overflow
+        };
+        const paddingRight = getPaddingRight(element) + getScrollbarSize();
+        setStyleProperty(element, 'padding-right', `${paddingRight}px`);
+        setStyleProperty(element, 'overflow', 'hidden');
+        const unlockScroll = ()=>{
+            const { paddingRight , overflow  } = previousValues;
+            setStyleProperty(element, 'padding-right', paddingRight);
+            setStyleProperty(element, 'overflow', overflow);
+        };
+        return unlockScroll;
+    }, [
+        element
+    ]);
+    useLayoutEffect(()=>{
+        const unlockScroll = lockScroll();
+        return unlockScroll;
+    }, [
+        lockScroll
+    ]);
+};
+
+//# sourceMappingURL=useLockScroll.js.map

package/dist/esm/hooks/src/useLockScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useLockScroll.ts"],"sourcesContent":["import { useCallback, useLayoutEffect } from 'react'\n\nconst getScrollbarSize = (): number => {\n  const tempDiv = document.createElement('div')\n\n  Object.assign(tempDiv.style, {\n    position: 'absolute',\n    left: '-9000px',\n    width: '100px',\n    height: '100px',\n    overflow: 'scroll',\n  })\n\n  document.body.appendChild(tempDiv)\n  const scrollbarSize = tempDiv.offsetWidth - tempDiv.clientWidth\n  document.body.removeChild(tempDiv)\n\n  return scrollbarSize\n}\n\nconst isVerticalScroll = (element: HTMLElement): boolean => {\n  const isBody = document.body === element\n\n  return isBody\n    ? window.innerWidth > document.documentElement.clientWidth\n    : element.scrollHeight > element.clientHeight\n}\n\nconst getPaddingRight = (element: HTMLElement): number => {\n  return parseInt(window.getComputedStyle(element).paddingRight, 10) || 0\n}\n\nconst setStyleProperty = (\n  element: HTMLElement,\n  property: string,\n  value?: string\n): void => {\n  if (value) {\n    element.style.setProperty(property, value)\n  } else {\n    element.style.removeProperty(property)\n  }\n}\n\nexport const useLockScroll = (element: HTMLElement = document.body): void => {\n  const lockScroll = useCallback(() => {\n    if (!isVerticalScroll(element)) return\n\n    const previousValues = {\n      paddingRight: element.style.paddingRight,\n      overflow: element.style.overflow,\n    }\n\n    const paddingRight = getPaddingRight(element) + getScrollbarSize()\n    setStyleProperty(element, 'padding-right', `${paddingRight}px`)\n    setStyleProperty(element, 'overflow', 'hidden')\n\n    const unlockScroll = () => {\n      const { paddingRight, overflow } = previousValues\n\n      setStyleProperty(element, 'padding-right', paddingRight)\n      setStyleProperty(element, 'overflow', overflow)\n    }\n\n    return unlockScroll\n  }, [element])\n\n  useLayoutEffect(() => {\n    const unlockScroll = lockScroll()\n    return unlockScroll\n  }, [lockScroll])\n}\n"],"names":["useCallback","useLayoutEffect","getScrollbarSize","tempDiv","document","createElement","Object","assign","style","position","left","width","height","overflow","body","appendChild","scrollbarSize","offsetWidth","clientWidth","removeChild","isVerticalScroll","element","isBody","window","innerWidth","documentElement","scrollHeight","clientHeight","getPaddingRight","parseInt","getComputedStyle","paddingRight","setStyleProperty","property","value","setProperty","removeProperty","useLockScroll","lockScroll","previousValues","unlockScroll"],"mappings":"AAAA,SAASA,WAAW,EAAEC,eAAe,QAAQ,OAAO,CAAA;AAEpD,MAAMC,gBAAgB,GAAG,IAAc;IACrC,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE7CC,MAAM,CAACC,MAAM,CAACJ,OAAO,CAACK,KAAK,EAAE;QAC3BC,QAAQ,EAAE,UAAU;QACpBC,IAAI,EAAE,SAAS;QACfC,KAAK,EAAE,OAAO;QACdC,MAAM,EAAE,OAAO;QACfC,QAAQ,EAAE,QAAQ;KACnB,CAAC;IAEFT,QAAQ,CAACU,IAAI,CAACC,WAAW,CAACZ,OAAO,CAAC;IAClC,MAAMa,aAAa,GAAGb,OAAO,CAACc,WAAW,GAAGd,OAAO,CAACe,WAAW;IAC/Dd,QAAQ,CAACU,IAAI,CAACK,WAAW,CAAChB,OAAO,CAAC;IAElC,OAAOa,aAAa,CAAA;AACtB,CAAC;AAED,MAAMI,gBAAgB,GAAG,CAACC,OAAoB,GAAc;IAC1D,MAAMC,MAAM,GAAGlB,QAAQ,CAACU,IAAI,KAAKO,OAAO;IAExC,OAAOC,MAAM,GACTC,MAAM,CAACC,UAAU,GAAGpB,QAAQ,CAACqB,eAAe,CAACP,WAAW,GACxDG,OAAO,CAACK,YAAY,GAAGL,OAAO,CAACM,YAAY,CAAA;AACjD,CAAC;AAED,MAAMC,eAAe,GAAG,CAACP,OAAoB,GAAa;IACxD,OAAOQ,QAAQ,CAACN,MAAM,CAACO,gBAAgB,CAACT,OAAO,CAAC,CAACU,YAAY,EAAE,EAAE,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC;AAED,MAAMC,gBAAgB,GAAG,CACvBX,OAAoB,EACpBY,QAAgB,EAChBC,KAAc,GACL;IACT,IAAIA,KAAK,EAAE;QACTb,OAAO,CAACb,KAAK,CAAC2B,WAAW,CAACF,QAAQ,EAAEC,KAAK,CAAC;IAC5C,OAAO;QACLb,OAAO,CAACb,KAAK,CAAC4B,cAAc,CAACH,QAAQ,CAAC;IACxC,CAAC;AACH,CAAC;AAED,OAAO,MAAMI,aAAa,GAAG,WAAgD;QAA/ChB,OAAoB,oEAAGjB,QAAQ,CAACU,IAAI;IAChE,MAAMwB,UAAU,GAAGtC,WAAW,CAAC,IAAM;QACnC,IAAI,CAACoB,gBAAgB,CAACC,OAAO,CAAC,EAAE,OAAM;QAEtC,MAAMkB,cAAc,GAAG;YACrBR,YAAY,EAAEV,OAAO,CAACb,KAAK,CAACuB,YAAY;YACxClB,QAAQ,EAAEQ,OAAO,CAACb,KAAK,CAACK,QAAQ;SACjC;QAED,MAAMkB,YAAY,GAAGH,eAAe,CAACP,OAAO,CAAC,GAAGnB,gBAAgB,EAAE;QAClE8B,gBAAgB,CAACX,OAAO,EAAE,eAAe,EAAE,CAAC,EAAEU,YAAY,CAAC,EAAE,CAAC,CAAC;QAC/DC,gBAAgB,CAACX,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC;QAE/C,MAAMmB,YAAY,GAAG,IAAM;YACzB,MAAM,EAAET,YAAY,CAAA,EAAElB,QAAQ,CAAA,EAAE,GAAG0B,cAAc;YAEjDP,gBAAgB,CAACX,OAAO,EAAE,eAAe,EAAEU,YAAY,CAAC;YACxDC,gBAAgB,CAACX,OAAO,EAAE,UAAU,EAAER,QAAQ,CAAC;QACjD,CAAC;QAED,OAAO2B,YAAY,CAAA;IACrB,CAAC,EAAE;QAACnB,OAAO;KAAC,CAAC;IAEbpB,eAAe,CAAC,IAAM;QACpB,MAAMuC,YAAY,GAAGF,UAAU,EAAE;QACjC,OAAOE,YAAY,CAAA;IACrB,CAAC,EAAE;QAACF,UAAU;KAAC,CAAC;AAClB,CAAC,CAAA"}

package/dist/esm/hooks/src/useMergeRefs.js

@@ -0,0 +1,7 @@
+import { useMergeRefs as useCallbackMergeRefs } from "use-callback-ref";
+import React from "react";
+export const useMergeRefs = (refs)=>{
+    return useCallbackMergeRefs(refs.filter((ref)=>!!ref));
+};
+
+//# sourceMappingURL=useMergeRefs.js.map

package/dist/esm/hooks/src/useMergeRefs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useMergeRefs.ts"],"sourcesContent":["import { useMergeRefs as useCallbackMergeRefs } from 'use-callback-ref'\nimport React from 'react'\n\nexport const useMergeRefs = <T extends HTMLElement>(\n  refs: (React.ForwardedRef<T | null> | undefined)[]\n): React.MutableRefObject<T | null> => {\n  return useCallbackMergeRefs(\n    refs.filter((ref): ref is React.ForwardedRef<T> => !!ref)\n  )\n}\n"],"names":["useMergeRefs","useCallbackMergeRefs","React","refs","filter","ref"],"mappings":"AAAA,SAASA,YAAY,IAAIC,oBAAoB,QAAQ,kBAAkB,CAAA;AACvE,OAAOC,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,MAAMF,YAAY,GAAG,CAC1BG,IAAkD,GACb;IACrC,OAAOF,oBAAoB,CACzBE,IAAI,CAACC,MAAM,CAAC,CAACC,GAAG,GAAmC,CAAC,CAACA,GAAG,CAAC,CAC1D,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/hooks/src/useOutsideClick.js

@@ -0,0 +1,24 @@
+import React, { useCallback, useEffect, useRef } from "react";
+export const useOutsideClick = (callback)=>{
+    const ref = useRef(null);
+    const handleOutsideClick = useCallback((event)=>{
+        const popover = ref.current;
+        const { target  } = event;
+        if (!(target instanceof Element)) return;
+        const isOutside = (popover === null || popover === void 0 ? void 0 : popover.contains(target)) === false;
+        if (isOutside) callback === null || callback === void 0 ? void 0 : callback();
+    }, [
+        callback
+    ]);
+    useEffect(()=>{
+        document.addEventListener('mousedown', handleOutsideClick);
+        return ()=>document.removeEventListener('mousedown', handleOutsideClick);
+    }, [
+        handleOutsideClick
+    ]);
+    return {
+        ref
+    };
+};
+
+//# sourceMappingURL=useOutsideClick.js.map

package/dist/esm/hooks/src/useOutsideClick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useOutsideClick.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react'\n\nexport const useOutsideClick = <T extends HTMLDivElement>(\n  callback?: () => void\n): {\n  ref: React.RefObject<T>\n} => {\n  const ref = useRef<T>(null)\n\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const popover = ref.current\n      const { target } = event\n\n      if (!(target instanceof Element)) return\n\n      const isOutside = popover?.contains(target) === false\n      if (isOutside) callback?.()\n    },\n    [callback]\n  )\n\n  useEffect(() => {\n    document.addEventListener('mousedown', handleOutsideClick)\n\n    return () => document.removeEventListener('mousedown', handleOutsideClick)\n  }, [handleOutsideClick])\n\n  return { ref }\n}\n"],"names":["React","useCallback","useEffect","useRef","useOutsideClick","callback","ref","handleOutsideClick","event","popover","current","target","Element","isOutside","contains","document","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO,CAAA;AAE7D,OAAO,MAAMC,eAAe,GAAG,CAC7BC,QAAqB,GAGlB;IACH,MAAMC,GAAG,GAAGH,MAAM,CAAI,IAAI,CAAC;IAE3B,MAAMI,kBAAkB,GAAGN,WAAW,CACpC,CAACO,KAAiB,GAAK;QACrB,MAAMC,OAAO,GAAGH,GAAG,CAACI,OAAO;QAC3B,MAAM,EAAEC,MAAM,CAAA,EAAE,GAAGH,KAAK;QAExB,IAAI,CAAC,CAACG,MAAM,YAAYC,OAAO,CAAC,EAAE,OAAM;QAExC,MAAMC,SAAS,GAAGJ,CAAAA,OAAO,aAAPA,OAAO,WAAU,GAAjBA,KAAAA,CAAiB,GAAjBA,OAAO,CAAEK,QAAQ,CAACH,MAAM,CAAC,MAAK,KAAK;QACrD,IAAIE,SAAS,EAAER,QAAQ,aAARA,QAAQ,WAAI,GAAZA,KAAAA,CAAY,GAAZA,QAAQ,EAAI,CAAA;IAC7B,CAAC,EACD;QAACA,QAAQ;KAAC,CACX;IAEDH,SAAS,CAAC,IAAM;QACda,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAET,kBAAkB,CAAC;QAE1D,OAAO,IAAMQ,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEV,kBAAkB,CAAC,CAAA;IAC5E,CAAC,EAAE;QAACA,kBAAkB;KAAC,CAAC;IAExB,OAAO;QAAED,GAAG;KAAE,CAAA;AAChB,CAAC,CAAA"}

package/dist/esm/hooks/src/useSystemTheme.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { THEME } from "../../theme/src/index";
+export const useSystemTheme = ()=>{
+    const [systemTheme, setSystemTheme] = useState();
+    useEffect(()=>{
+        const mql = window.matchMedia('(prefers-color-scheme: dark)');
+        const setThemeFromQuery = (param)=>{
+            let { matches  } = param;
+            setSystemTheme(matches ? THEME.dark : THEME.light);
+        };
+        mql.addEventListener('change', setThemeFromQuery);
+        setThemeFromQuery(mql);
+        return ()=>{
+            mql.removeEventListener('change', setThemeFromQuery);
+        };
+    }, []);
+    return systemTheme;
+};
+
+//# sourceMappingURL=useSystemTheme.js.map

package/dist/esm/hooks/src/useSystemTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useSystemTheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { THEME } from '@lidofinance/theme'\n\nexport const useSystemTheme = (): THEME | undefined => {\n  const [systemTheme, setSystemTheme] = useState<THEME>()\n\n  useEffect(() => {\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n\n    const setThemeFromQuery = ({ matches }: { matches: boolean }) => {\n      setSystemTheme(matches ? THEME.dark : THEME.light)\n    }\n\n    mql.addEventListener('change', setThemeFromQuery)\n    setThemeFromQuery(mql)\n\n    return () => {\n      mql.removeEventListener('change', setThemeFromQuery)\n    }\n  }, [])\n\n  return systemTheme\n}\n"],"names":["useEffect","useState","THEME","useSystemTheme","systemTheme","setSystemTheme","mql","window","matchMedia","setThemeFromQuery","matches","dark","light","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAA;AAE3C,SAASC,KAAK,QAAQ,uBAAoB,CAAA;AAE1C,OAAO,MAAMC,cAAc,GAAG,IAAyB;IACrD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGJ,QAAQ,EAAS;IAEvDD,SAAS,CAAC,IAAM;QACd,MAAMM,GAAG,GAAGC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;QAE7D,MAAMC,iBAAiB,GAAG,SAAuC;gBAAtC,EAAEC,OAAO,CAAA,EAAwB;YAC1DL,cAAc,CAACK,OAAO,GAAGR,KAAK,CAACS,IAAI,GAAGT,KAAK,CAACU,KAAK,CAAC;QACpD,CAAC;QAEDN,GAAG,CAACO,gBAAgB,CAAC,QAAQ,EAAEJ,iBAAiB,CAAC;QACjDA,iBAAiB,CAACH,GAAG,CAAC;QAEtB,OAAO,IAAM;YACXA,GAAG,CAACQ,mBAAmB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,OAAOL,WAAW,CAAA;AACpB,CAAC,CAAA"}

package/dist/esm/hooks/src/useWindowSize.js

@@ -0,0 +1,24 @@
+import { useCallback, useState, useEffect } from "react";
+const getWindowSize = ()=>{
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    return [
+        width,
+        height
+    ];
+};
+export const useWindowSize = ()=>{
+    const [size, setSize] = useState(getWindowSize);
+    const handleResize = useCallback(()=>{
+        setSize(getWindowSize());
+    }, []);
+    useEffect(()=>{
+        window.addEventListener('resize', handleResize);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, [
+        handleResize
+    ]);
+    return size;
+};
+
+//# sourceMappingURL=useWindowSize.js.map

package/dist/esm/hooks/src/useWindowSize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/hooks/src/useWindowSize.ts"],"sourcesContent":["import { useCallback, useState, useEffect } from 'react'\n\ntype WindowSize = [width: number, height: number]\n\nconst getWindowSize = (): WindowSize => {\n  const width = window.innerWidth\n  const height = window.innerHeight\n\n  return [width, height]\n}\n\nexport const useWindowSize = (): WindowSize => {\n  const [size, setSize] = useState(getWindowSize)\n\n  const handleResize = useCallback(() => {\n    setSize(getWindowSize())\n  }, [])\n\n  useEffect(() => {\n    window.addEventListener('resize', handleResize)\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [handleResize])\n\n  return size\n}\n"],"names":["useCallback","useState","useEffect","getWindowSize","width","window","innerWidth","height","innerHeight","useWindowSize","size","setSize","handleResize","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,WAAW,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,OAAO,CAAA;AAIxD,MAAMC,aAAa,GAAG,IAAkB;IACtC,MAAMC,KAAK,GAAGC,MAAM,CAACC,UAAU;IAC/B,MAAMC,MAAM,GAAGF,MAAM,CAACG,WAAW;IAEjC,OAAO;QAACJ,KAAK;QAAEG,MAAM;KAAC,CAAA;AACxB,CAAC;AAED,OAAO,MAAME,aAAa,GAAG,IAAkB;IAC7C,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAACE,aAAa,CAAC;IAE/C,MAAMS,YAAY,GAAGZ,WAAW,CAAC,IAAM;QACrCW,OAAO,CAACR,aAAa,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC;IAEND,SAAS,CAAC,IAAM;QACdG,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;QAE/C,OAAO,IAAMP,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC,CAAA;IACjE,CAAC,EAAE;QAACA,YAAY;KAAC,CAAC;IAElB,OAAOF,IAAI,CAAA;AACb,CAAC,CAAA"}

package/dist/esm/icons/converter/index.js

@@ -0,0 +1,89 @@
+const svgr = require('@svgr/core').default;
+const svgrSvgo = require('@svgr/plugin-svgo').default;
+const svgrJsx = require('@svgr/plugin-jsx').default;
+const svgrPrettier = require('@svgr/plugin-prettier').default;
+const indexTemplate = require('./template.index.js');
+const fs = require('fs/promises');
+const { extname , resolve  } = require('path');
+const SRC_DIR = resolve(__dirname, '../src/svg');
+const DEST_FILE = resolve(__dirname, '../src/index.tsx');
+const svgoConfig = {
+    plugins: [
+        {
+            removeStyleElement: true
+        },
+        {
+            removeScriptElement: true
+        },
+        {
+            removeViewBox: false
+        },
+        {
+            removeTitle: false
+        },
+        {
+            removeUnknownsAndDefaults: false
+        },
+        {
+            removeAttrs: {
+                attrs: [
+                    '(class|style)',
+                    'svg:fill',
+                    'aria-labelledby',
+                    'aria-describedby',
+                    'xmlns:xlink',
+                    'xmlns',
+                    'data-name', 
+                ]
+            }
+        }, 
+    ],
+    multipass: true
+};
+const upperFirst = (string)=>{
+    return string.charAt(0).toUpperCase() + string.slice(1);
+};
+const convertToPascalCase = (name)=>{
+    return name.match(/([a-z0-9]+)/gi).map(upperFirst).join('');
+};
+const readFolder = async (folder)=>{
+    const files = await fs.readdir(folder);
+    const filtered = files.filter((file)=>extname(file) === '.svg');
+    return await Promise.all(filtered.map(async (file)=>{
+        const data = await fs.readFile(resolve(folder, file));
+        return {
+            code: data.toString(),
+            name: file.replace('.svg', '')
+        };
+    }));
+};
+const convertFiles = async ()=>{
+    const svgData = await readFolder(SRC_DIR);
+    const componentsCode = await Promise.all(svgData.map(async (param)=>{
+        let { code , name  } = param;
+        const componentName = convertToPascalCase(name);
+        return await svgr(code, {
+            icon: false,
+            ref: true,
+            svgo: true,
+            typescript: true,
+            svgoConfig,
+            svgProps: {
+                fill: 'currentColor'
+            },
+            plugins: [
+                svgrSvgo,
+                svgrJsx,
+                svgrPrettier
+            ],
+            template: require('./template.component.js')
+        }, {
+            componentName
+        });
+    }));
+    const content = indexTemplate(componentsCode);
+    fs.writeFile(DEST_FILE, content);
+};
+convertFiles();
+
+//# sourceMappingURL=index.js.map

package/dist/esm/icons/converter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/icons/converter/index.js"],"sourcesContent":["const svgr = require('@svgr/core').default\nconst svgrSvgo = require('@svgr/plugin-svgo').default\nconst svgrJsx = require('@svgr/plugin-jsx').default\nconst svgrPrettier = require('@svgr/plugin-prettier').default\nconst indexTemplate = require('./template.index.js')\n\nconst fs = require('fs/promises')\nconst { extname, resolve } = require('path')\n\nconst SRC_DIR = resolve(__dirname, '../src/svg')\nconst DEST_FILE = resolve(__dirname, '../src/index.tsx')\n\nconst svgoConfig = {\n  plugins: [\n    { removeStyleElement: true },\n    { removeScriptElement: true },\n    { removeViewBox: false },\n    { removeTitle: false },\n    { removeUnknownsAndDefaults: false },\n    {\n      removeAttrs: {\n        attrs: [\n          '(class|style)',\n          'svg:fill',\n          'aria-labelledby',\n          'aria-describedby',\n          'xmlns:xlink',\n          'xmlns',\n          'data-name',\n        ],\n      },\n    },\n  ],\n  multipass: true,\n}\n\nconst upperFirst = (string) => {\n  return string.charAt(0).toUpperCase() + string.slice(1)\n}\n\nconst convertToPascalCase = (name) => {\n  return name\n    .match(/([a-z0-9]+)/gi)\n    .map(upperFirst)\n    .join('')\n}\n\nconst readFolder = async (folder) => {\n  const files = await fs.readdir(folder)\n  const filtered = files.filter((file) => extname(file) === '.svg')\n\n  return await Promise.all(\n    filtered.map(async (file) => {\n      const data = await fs.readFile(resolve(folder, file))\n\n      return {\n        code: data.toString(),\n        name: file.replace('.svg', ''),\n      }\n    })\n  )\n}\n\nconst convertFiles = async () => {\n  const svgData = await readFolder(SRC_DIR)\n\n  const componentsCode = await Promise.all(\n    svgData.map(async ({ code, name }) => {\n      const componentName = convertToPascalCase(name)\n\n      return await svgr(\n        code,\n        {\n          icon: false,\n          ref: true,\n          svgo: true,\n          typescript: true,\n          svgoConfig,\n          svgProps: {\n            fill: 'currentColor',\n          },\n          plugins: [svgrSvgo, svgrJsx, svgrPrettier],\n          template: require('./template.component.js'),\n        },\n        { componentName }\n      )\n    })\n  )\n\n  const content = indexTemplate(componentsCode)\n  fs.writeFile(DEST_FILE, content)\n}\n\nconvertFiles()\n"],"names":["svgr","require","default","svgrSvgo","svgrJsx","svgrPrettier","indexTemplate","fs","extname","resolve","SRC_DIR","__dirname","DEST_FILE","svgoConfig","plugins","removeStyleElement","removeScriptElement","removeViewBox","removeTitle","removeUnknownsAndDefaults","removeAttrs","attrs","multipass","upperFirst","string","charAt","toUpperCase","slice","convertToPascalCase","name","match","map","join","readFolder","folder","files","readdir","filtered","filter","file","Promise","all","data","readFile","code","toString","replace","convertFiles","svgData","componentsCode","componentName","icon","ref","svgo","typescript","svgProps","fill","template","content","writeFile"],"mappings":"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"}

package/dist/esm/icons/converter/template.component.js

@@ -0,0 +1,13 @@
+module.exports = function template(param, opts, param1) {
+    let { template  } = param, { interfaces , componentName , props , jsx  } = param1;
+    return template.ast`
+    ${interfaces}
+    export const ${componentName} = React.forwardRef(
+      function ${componentName}(${props}) {
+        return ${jsx};
+      }
+    )
+  `;
+};
+
+//# sourceMappingURL=template.component.js.map

package/dist/esm/icons/converter/template.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/icons/converter/template.component.js"],"sourcesContent":["module.exports = function template(\n  { template },\n  opts,\n  { interfaces, componentName, props, jsx }\n) {\n  return template.ast`\n    ${interfaces}\n    export const ${componentName} = React.forwardRef(\n      function ${componentName}(${props}) {\n        return ${jsx};\n      }\n    )\n  `\n}\n"],"names":["module","exports","template","opts","interfaces","componentName","props","jsx","ast"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAG,SAASC,QAAQ,CAChC,KAAY,EACZC,IAAI,EACJ,MAAyC,EACzC;QAHA,EAAED,QAAQ,CAAA,EAAE,GAAZ,KAAY,EAEZ,EAAEE,UAAU,CAAA,EAAEC,aAAa,CAAA,EAAEC,KAAK,CAAA,EAAEC,GAAG,CAAA,EAAE,GAAzC,MAAyC;IAEzC,OAAOL,QAAQ,CAACM,GAAG,CAAC;IAClB,EAAEJ,UAAU,CAAC;iBACA,EAAEC,aAAa,CAAC;eAClB,EAAEA,aAAa,CAAC,CAAC,EAAEC,KAAK,CAAC;eACzB,EAAEC,GAAG,CAAC;;;EAGnB,CAAC,CAAA;AACH,CAAC"}

package/dist/esm/icons/converter/template.index.js

@@ -0,0 +1,9 @@
+module.exports = function template(componentsCode) {
+    return [
+        '// THIS FILE IS AUTO GENERATED\n',
+        "import React from 'react'\n",
+        ...componentsCode, 
+    ].join('\n');
+};
+
+//# sourceMappingURL=template.index.js.map

package/dist/esm/icons/converter/template.index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/icons/converter/template.index.js"],"sourcesContent":["module.exports = function template(componentsCode) {\n  return [\n    '// THIS FILE IS AUTO GENERATED\\n',\n    \"import React from 'react'\\n\",\n    ...componentsCode,\n  ].join('\\n')\n}\n"],"names":["module","exports","template","componentsCode","join"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAG,SAASC,QAAQ,CAACC,cAAc,EAAE;IACjD,OAAO;QACL,kCAAkC;QAClC,6BAA6B;WAC1BA,cAAc;KAClB,CAACC,IAAI,CAAC,IAAI,CAAC,CAAA;AACd,CAAC"}