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

package/dist/esm/main-menu/src/MainMenuStyles.js

@@ -0,0 +1,39 @@
+import styled, { css } from "styled-components";
+export const desktopCss = css`
+  margin: 0 46px;
+  display: flex;
+
+  svg {
+    margin-right: 10px;
+  }
+`;
+const mobileCss = css`
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background-color: var(--lido-color-foreground);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-top: 1px solid var(--lido-color-border);
+
+  svg {
+    margin-right: 0;
+    margin-bottom: 7px;
+  }
+`;
+export const Nav = styled.div`
+  ${desktopCss}
+  ${(param)=>{
+    let { theme  } = param;
+    return theme.mediaQueries.md;
+}} {
+    ${mobileCss}
+  }
+  z-index: 5;
+`;
+
+//# sourceMappingURL=MainMenuStyles.js.map

package/dist/esm/main-menu/src/MainMenuStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/main-menu/src/MainMenuStyles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nexport const desktopCss = css`\n  margin: 0 46px;\n  display: flex;\n\n  svg {\n    margin-right: 10px;\n  }\n`\n\nconst mobileCss = css`\n  margin: 0;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 8px;\n  background-color: var(--lido-color-foreground);\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  border-top: 1px solid var(--lido-color-border);\n\n  svg {\n    margin-right: 0;\n    margin-bottom: 7px;\n  }\n`\n\nexport const Nav = styled.div`\n  ${desktopCss}\n  ${({ theme }) => theme.mediaQueries.md} {\n    ${mobileCss}\n  }\n  z-index: 5;\n`\n"],"names":["styled","css","desktopCss","mobileCss","Nav","div","theme","mediaQueries","md"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB,CAAA;AAC/C,OAAO,MAAMC,UAAU,GAAGD,GAAG,CAAC;;;;;;;AAO9B,CAAC,CAAA;AAED,MAAME,SAAS,GAAGF,GAAG,CAAC;;;;;;;;;;;;;;;;;AAiBtB,CAAC;AAED,OAAO,MAAMG,GAAG,GAAGJ,MAAM,CAACK,GAAG,CAAC;EAC5B,EAAEH,UAAU,CAAC;EACb,EAAE,SAAeI;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,YAAY,CAACC,EAAE;AAAD,CAAC,CAAC;IACrC,EAAEL,SAAS,CAAC;;;AAGhB,CAAC,CAAA"}

package/dist/esm/main-menu/src/index.js

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

package/dist/esm/main-menu/src/index.js.map

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

package/dist/esm/main-menu/src/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/esm/main-menu/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/main-menu/src/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\n\nexport type MainMenuProps = LidoComponentProps<'div'>\n\nexport type MainMenuItemProps = LidoComponentProps<\n  'div',\n  {\n    icon?: JSX.Element\n    active?: boolean\n  }\n>\n"],"names":[],"mappings":"AAAA,WAUC"}

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

@@ -0,0 +1,36 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { ModalStyle, ModalBaseStyle, ModalHeaderStyle, ModalTitleStyle, ModalTitleIconStyle, ModalTitleTextStyle, ModalCloseStyle, ModalContentStyle, ModalBackStyle, ModalSubtitleStyle } from "./ModalStyles";
+import ModalOverlay from "./ModalOverlay";
+function Modal(props, ref) {
+    const { children , title , titleIcon , subtitle , center =false , extra , open , ...rest } = props;
+    const { onClose , onBack  } = props;
+    const withTitleIcon = !!titleIcon;
+    const withSubtitle = !!subtitle;
+    const withCloseButton = !!onClose;
+    const withBackButton = !!onBack;
+    const modalHeader = /*#__PURE__*/ React.createElement(ModalHeaderStyle, {
+        $short: !title
+    }, withBackButton && /*#__PURE__*/ React.createElement(ModalBackStyle, {
+        onClick: onBack
+    }), /*#__PURE__*/ React.createElement(ModalTitleStyle, {
+        $center: center,
+        $withTitleIcon: withTitleIcon,
+        $withCloseButton: withCloseButton,
+        $withBackButton: withBackButton
+    }, withTitleIcon && /*#__PURE__*/ React.createElement(ModalTitleIconStyle, {
+        $center: center
+    }, titleIcon), /*#__PURE__*/ React.createElement(ModalTitleTextStyle, null, title)), withCloseButton && /*#__PURE__*/ React.createElement(ModalCloseStyle, {
+        onClick: onClose
+    }));
+    return /*#__PURE__*/ React.createElement(ModalOverlay, _extends({
+        in: open
+    }, rest, {
+        ref: ref
+    }), /*#__PURE__*/ React.createElement(ModalStyle, {
+        $center: center
+    }, /*#__PURE__*/ React.createElement(ModalBaseStyle, null, modalHeader, withSubtitle && /*#__PURE__*/ React.createElement(ModalSubtitleStyle, null, subtitle), /*#__PURE__*/ React.createElement(ModalContentStyle, null, children)), extra));
+}
+export default /*#__PURE__*/ forwardRef(Modal);
+
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/Modal.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\n\nimport {\n  ModalStyle,\n  ModalBaseStyle,\n  ModalHeaderStyle,\n  ModalTitleStyle,\n  ModalTitleIconStyle,\n  ModalTitleTextStyle,\n  ModalCloseStyle,\n  ModalContentStyle,\n  ModalBackStyle,\n  ModalSubtitleStyle,\n} from './ModalStyles'\nimport { ModalProps } from './types'\nimport ModalOverlay from './ModalOverlay'\n\nfunction Modal(props: ModalProps, ref?: ForwardedRef<HTMLDivElement>) {\n  const {\n    children,\n    title,\n    titleIcon,\n    subtitle,\n    center = false,\n    extra,\n    open,\n    ...rest\n  } = props\n  const { onClose, onBack } = props\n\n  const withTitleIcon = !!titleIcon\n  const withSubtitle = !!subtitle\n  const withCloseButton = !!onClose\n  const withBackButton = !!onBack\n\n  const modalHeader = (\n    <ModalHeaderStyle $short={!title}>\n      {withBackButton && <ModalBackStyle onClick={onBack} />}\n      <ModalTitleStyle\n        $center={center}\n        $withTitleIcon={withTitleIcon}\n        $withCloseButton={withCloseButton}\n        $withBackButton={withBackButton}\n      >\n        {withTitleIcon && (\n          <ModalTitleIconStyle $center={center}>\n            {titleIcon}\n          </ModalTitleIconStyle>\n        )}\n        <ModalTitleTextStyle>{title}</ModalTitleTextStyle>\n      </ModalTitleStyle>\n      {withCloseButton && <ModalCloseStyle onClick={onClose} />}\n    </ModalHeaderStyle>\n  )\n\n  return (\n    <ModalOverlay in={open} {...rest} ref={ref}>\n      <ModalStyle $center={center}>\n        <ModalBaseStyle>\n          {modalHeader}\n          {withSubtitle && <ModalSubtitleStyle>{subtitle}</ModalSubtitleStyle>}\n          <ModalContentStyle>{children}</ModalContentStyle>\n        </ModalBaseStyle>\n        {extra}\n      </ModalStyle>\n    </ModalOverlay>\n  )\n}\n\nexport default forwardRef(Modal)\n"],"names":["React","forwardRef","ModalStyle","ModalBaseStyle","ModalHeaderStyle","ModalTitleStyle","ModalTitleIconStyle","ModalTitleTextStyle","ModalCloseStyle","ModalContentStyle","ModalBackStyle","ModalSubtitleStyle","ModalOverlay","Modal","props","ref","children","title","titleIcon","subtitle","center","extra","open","rest","onClose","onBack","withTitleIcon","withSubtitle","withCloseButton","withBackButton","modalHeader","$short","onClick","$center","$withTitleIcon","$withCloseButton","$withBackButton","in"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AAEvD,SACEC,UAAU,EACVC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,mBAAmB,EACnBC,eAAe,EACfC,iBAAiB,EACjBC,cAAc,EACdC,kBAAkB,QACb,eAAe,CAAA;AAEtB,OAAOC,YAAY,MAAM,gBAAgB,CAAA;AAEzC,SAASC,KAAK,CAACC,KAAiB,EAAEC,GAAkC,EAAE;IACpE,MAAM,EACJC,QAAQ,CAAA,EACRC,KAAK,CAAA,EACLC,SAAS,CAAA,EACTC,QAAQ,CAAA,EACRC,MAAM,EAAG,KAAK,CAAA,EACdC,KAAK,CAAA,EACLC,IAAI,CAAA,EACJ,GAAGC,IAAI,EACR,GAAGT,KAAK;IACT,MAAM,EAAEU,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGX,KAAK;IAEjC,MAAMY,aAAa,GAAG,CAAC,CAACR,SAAS;IACjC,MAAMS,YAAY,GAAG,CAAC,CAACR,QAAQ;IAC/B,MAAMS,eAAe,GAAG,CAAC,CAACJ,OAAO;IACjC,MAAMK,cAAc,GAAG,CAAC,CAACJ,MAAM;IAE/B,MAAMK,WAAW,iBACf,oBAAC1B,gBAAgB;QAAC2B,MAAM,EAAE,CAACd,KAAK;OAC7BY,cAAc,kBAAI,oBAACnB,cAAc;QAACsB,OAAO,EAAEP,MAAM;MAAI,gBACtD,oBAACpB,eAAe;QACd4B,OAAO,EAAEb,MAAM;QACfc,cAAc,EAAER,aAAa;QAC7BS,gBAAgB,EAAEP,eAAe;QACjCQ,eAAe,EAAEP,cAAc;OAE9BH,aAAa,kBACZ,oBAACpB,mBAAmB;QAAC2B,OAAO,EAAEb,MAAM;OACjCF,SAAS,CACU,AACvB,gBACD,oBAACX,mBAAmB,QAAEU,KAAK,CAAuB,CAClC,EACjBW,eAAe,kBAAI,oBAACpB,eAAe;QAACwB,OAAO,EAAER,OAAO;MAAI,CACxC,AACpB;IAED,qBACE,oBAACZ,YAAY;QAACyB,EAAE,EAAEf,IAAI;OAAMC,IAAI;QAAER,GAAG,EAAEA,GAAG;sBACxC,oBAACb,UAAU;QAAC+B,OAAO,EAAEb,MAAM;qBACzB,oBAACjB,cAAc,QACZ2B,WAAW,EACXH,YAAY,kBAAI,oBAAChB,kBAAkB,QAAEQ,QAAQ,CAAsB,gBACpE,oBAACV,iBAAiB,QAAEO,QAAQ,CAAqB,CAClC,EAChBK,KAAK,CACK,CACA,CAChB;AACH,CAAC;AAED,6BAAepB,UAAU,CAACY,KAAK,CAAC,CAAA"}

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

@@ -0,0 +1,41 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { ModalButtonStyle, ModalButtonContentStyle } from "./ModalButtonStyles";
+const iconSize = {
+    xxs: {
+        width: '16px',
+        height: '16px'
+    },
+    xs: {
+        width: '24px',
+        height: '24px'
+    },
+    sm: {
+        width: '32px',
+        height: '32px'
+    },
+    md: {
+        width: '48px',
+        height: '48px'
+    },
+    lg: {
+        width: '64px',
+        height: '64px'
+    }
+};
+function ModalButton(props, ref) {
+    const { size ='md' , loading =false , children , icon  } = props;
+    const AdaptiveIconProps = icon.props.width || icon.props.height ? icon.props : {
+        ...iconSize[size]
+    };
+    const AdaptiveIcon = /*#__PURE__*/ React.cloneElement(icon, AdaptiveIconProps);
+    return /*#__PURE__*/ React.createElement(ModalButtonStyle, _extends({
+        type: "button",
+        size: size,
+        loading: loading,
+        ref: ref
+    }, props), /*#__PURE__*/ React.createElement(ModalButtonContentStyle, null, children, " ", AdaptiveIcon));
+}
+export default /*#__PURE__*/ forwardRef(ModalButton);
+
+//# sourceMappingURL=ModalButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalButton.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\n\nimport { ModalButtonStyle, ModalButtonContentStyle } from './ModalButtonStyles'\nimport { ModalButtonIconProps } from './types'\n\nconst iconSize = {\n  xxs: {\n    width: '16px',\n    height: '16px',\n  },\n  xs: {\n    width: '24px',\n    height: '24px',\n  },\n  sm: {\n    width: '32px',\n    height: '32px',\n  },\n  md: {\n    width: '48px',\n    height: '48px',\n  },\n  lg: {\n    width: '64px',\n    height: '64px',\n  },\n}\n\nfunction ModalButton(\n  props: ModalButtonIconProps,\n  ref?: ForwardedRef<HTMLButtonElement>\n) {\n  const { size = 'md', loading = false, children, icon } = props\n\n  const AdaptiveIconProps =\n    icon.props.width || icon.props.height ? icon.props : { ...iconSize[size] }\n  const AdaptiveIcon = React.cloneElement(icon, AdaptiveIconProps)\n\n  return (\n    <ModalButtonStyle\n      type='button'\n      size={size}\n      loading={loading}\n      ref={ref}\n      {...props}\n    >\n      <ModalButtonContentStyle>\n        {children} {AdaptiveIcon}\n      </ModalButtonContentStyle>\n    </ModalButtonStyle>\n  )\n}\n\nexport default forwardRef(ModalButton)\n"],"names":["React","forwardRef","ModalButtonStyle","ModalButtonContentStyle","iconSize","xxs","width","height","xs","sm","md","lg","ModalButton","props","ref","size","loading","children","icon","AdaptiveIconProps","AdaptiveIcon","cloneElement","type"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AAEvD,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,qBAAqB,CAAA;AAG/E,MAAMC,QAAQ,GAAG;IACfC,GAAG,EAAE;QACHC,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;KACf;IACDC,EAAE,EAAE;QACFF,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;KACf;IACDE,EAAE,EAAE;QACFH,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;KACf;IACDG,EAAE,EAAE;QACFJ,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;KACf;IACDI,EAAE,EAAE;QACFL,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,MAAM;KACf;CACF;AAED,SAASK,WAAW,CAClBC,KAA2B,EAC3BC,GAAqC,EACrC;IACA,MAAM,EAAEC,IAAI,EAAG,IAAI,CAAA,EAAEC,OAAO,EAAG,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,IAAI,CAAA,EAAE,GAAGL,KAAK;IAE9D,MAAMM,iBAAiB,GACrBD,IAAI,CAACL,KAAK,CAACP,KAAK,IAAIY,IAAI,CAACL,KAAK,CAACN,MAAM,GAAGW,IAAI,CAACL,KAAK,GAAG;QAAE,GAAGT,QAAQ,CAACW,IAAI,CAAC;KAAE;IAC5E,MAAMK,YAAY,iBAAGpB,KAAK,CAACqB,YAAY,CAACH,IAAI,EAAEC,iBAAiB,CAAC;IAEhE,qBACE,oBAACjB,gBAAgB;QACfoB,IAAI,EAAC,QAAQ;QACbP,IAAI,EAAEA,IAAI;QACVC,OAAO,EAAEA,OAAO;QAChBF,GAAG,EAAEA,GAAG;OACJD,KAAK,iBAET,oBAACV,uBAAuB,QACrBc,QAAQ,EAAC,GAAC,EAACG,YAAY,CACA,CACT,CACpB;AACH,CAAC;AAED,6BAAenB,UAAU,CAACW,WAAW,CAAC,CAAA"}

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { Button } from "../../button/src/index";
+export const ModalButtonStyle = styled(Button)`
+  border: ${(param)=>{
+    let { active  } = param;
+    return active ? `1px solid var(--lido-color-primary)` : `1px solid var(--lido-color-background)`;
+}};
+
+  background-color: ${(param)=>{
+    let { active  } = param;
+    return active ? 'rgba(0, 163, 255, 0.1);' : `var(--lido-color-background)`;
+}};
+
+  color: var(--lido-color-text);
+
+  :not(:disabled):hover,
+  :focus-visible {
+    background-color: rgba(0, 163, 255, 0.1);
+    color: var(--lido-color-text);
+  }
+`;
+export const ModalButtonContentStyle = styled.span`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+//# sourceMappingURL=ModalButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalButtonStyles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { Button } from '@lidofinance/button'\n\nexport const ModalButtonStyle = styled(Button)`\n  border: ${({ active }) =>\n    active\n      ? `1px solid var(--lido-color-primary)`\n      : `1px solid var(--lido-color-background)`};\n\n  background-color: ${({ active }) =>\n    active ? 'rgba(0, 163, 255, 0.1);' : `var(--lido-color-background)`};\n\n  color: var(--lido-color-text);\n\n  :not(:disabled):hover,\n  :focus-visible {\n    background-color: rgba(0, 163, 255, 0.1);\n    color: var(--lido-color-text);\n  }\n`\n\nexport const ModalButtonContentStyle = styled.span`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n`\n"],"names":["styled","Button","ModalButtonStyle","active","ModalButtonContentStyle","span"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAEtC,SAASC,MAAM,QAAQ,wBAAqB,CAAA;AAE5C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACC,MAAM,CAAC,CAAC;UACrC,EAAE,SACRE;QADS,EAAEA,MAAM,CAAA,EAAE;WACnBA,MAAM,GACF,CAAC,mCAAmC,CAAC,GACrC,CAAC,sCAAsC,CAAC;AAAD,CAAC,CAAC;;oBAE7B,EAAE,SAClBA;QADmB,EAAEA,MAAM,CAAA,EAAE;WAC7BA,MAAM,GAAG,yBAAyB,GAAG,CAAC,4BAA4B,CAAC;AAAD,CAAC,CAAC;;;;;;;;;AASxE,CAAC,CAAA;AAED,OAAO,MAAMC,uBAAuB,GAAGJ,MAAM,CAACK,IAAI,CAAC;;;;;AAKnD,CAAC,CAAA"}

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

@@ -0,0 +1,11 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import { ModalExtraStyle } from "./ModalExtraStyles";
+function ModalExtra(props, ref) {
+    return /*#__PURE__*/ React.createElement(ModalExtraStyle, _extends({}, props, {
+        ref: ref
+    }));
+}
+export default /*#__PURE__*/ forwardRef(ModalExtra);
+
+//# sourceMappingURL=ModalExtra.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalExtra.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\n\nimport { ModalExtraStyle } from './ModalExtraStyles'\nimport { ModalExtraProps } from './types'\n\nfunction ModalExtra(\n  props: ModalExtraProps,\n  ref?: ForwardedRef<HTMLDivElement>\n) {\n  return <ModalExtraStyle {...props} ref={ref} />\n}\n\nexport default forwardRef(ModalExtra)\n"],"names":["React","forwardRef","ModalExtraStyle","ModalExtra","props","ref"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AAEvD,SAASC,eAAe,QAAQ,oBAAoB,CAAA;AAGpD,SAASC,UAAU,CACjBC,KAAsB,EACtBC,GAAkC,EAClC;IACA,qBAAO,oBAACH,eAAe,eAAKE,KAAK;QAAEC,GAAG,EAAEA,GAAG;OAAI,CAAA;AACjD,CAAC;AAED,6BAAeJ,UAAU,CAACE,UAAU,CAAC,CAAA"}

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+export const ModalExtraStyle = styled.div`
+  margin-top: ${(param)=>{
+    let { theme  } = param;
+    return -theme.borderRadiusesMap.xl;
+}}px;
+  color: var(--lido-color-accentContrast);
+  background: var(--lido-color-accent);
+  padding: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.xxl;
+}}px;
+  padding-top: ${(param)=>{
+    let { theme  } = param;
+    return theme.borderRadiusesMap.xl + theme.spaceMap.xxl;
+}}px;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  ${(param)=>{
+    let { theme  } = param;
+    return theme.mediaQueries.md;
+}} {
+    padding: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.lg;
+}}px;
+    padding-top: ${(param)=>{
+    let { theme  } = param;
+    return theme.borderRadiusesMap.xl + theme.spaceMap.lg;
+}}px;
+  }
+`;
+
+//# sourceMappingURL=ModalExtraStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalExtraStyles.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ModalExtraStyle = styled.div`\n  margin-top: ${({ theme }) => -theme.borderRadiusesMap.xl}px;\n  color: var(--lido-color-accentContrast);\n  background: var(--lido-color-accent);\n  padding: ${({ theme }) => theme.spaceMap.xxl}px;\n  padding-top: ${({ theme }) =>\n    theme.borderRadiusesMap.xl + theme.spaceMap.xxl}px;\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n\n  ${({ theme }) => theme.mediaQueries.md} {\n    padding: ${({ theme }) => theme.spaceMap.lg}px;\n    padding-top: ${({ theme }) =>\n      theme.borderRadiusesMap.xl + theme.spaceMap.lg}px;\n  }\n`\n"],"names":["styled","ModalExtraStyle","div","theme","borderRadiusesMap","xl","spaceMap","xxl","mediaQueries","md","lg"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAG,CAAC;cAC5B,EAAE,SAAe;QAAd,EAAEC,KAAK,CAAA,EAAE;WAAK,CAACA,KAAK,CAACC,iBAAiB,CAACC,EAAE;AAAD,CAAC,CAAC;;;WAGhD,EAAE,SAAeF;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACG,QAAQ,CAACC,GAAG;AAAD,CAAC,CAAC;eAChC,EAAE,SACbJ;QADc,EAAEA,KAAK,CAAA,EAAE;WACvBA,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAGF,KAAK,CAACG,QAAQ,CAACC,GAAG;AAAD,CAAC,CAAC;;;;EAIlD,EAAE,SAAeJ;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACK,YAAY,CAACC,EAAE;AAAD,CAAC,CAAC;aAC5B,EAAE,SAAeN;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACG,QAAQ,CAACI,EAAE;AAAD,CAAC,CAAC;iBAC/B,EAAE,SACbP;QADc,EAAEA,KAAK,CAAA,EAAE;WACvBA,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAGF,KAAK,CAACG,QAAQ,CAACI,EAAE;AAAD,CAAC,CAAC;;AAErD,CAAC,CAAA"}

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

@@ -0,0 +1,39 @@
+import _extends from "@swc/helpers/src/_extends.mjs";
+import React, { forwardRef } from "react";
+import ReactDOM from "react-dom";
+import { useMergeRefs, useEscape, useLockScroll } from "../../hooks/src/index";
+import { withTransition } from "../../transition/src/index";
+import { modalRoot } from "../../utils/src/index";
+import { ModalPortalStyle, ModalOverflowStyle, ModalContentStyle } from "./ModalOverlayStyles";
+import { useModalFocus } from "./useModalFocus";
+import { useModalClose } from "./useModalClose";
+function ModalOverlay(props, externalRef) {
+    const { onClose , onBack , duration , transitionStatus , ...rest } = props;
+    const closable = !!onClose;
+    useEscape(onClose);
+    useLockScroll();
+    const controlRef = useModalFocus();
+    const { ref: closeRef , handleClick  } = useModalClose(onClose);
+    const mergedRef = useMergeRefs([
+        controlRef,
+        closeRef,
+        externalRef
+    ]);
+    if (!modalRoot) return null;
+    return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(ModalPortalStyle, {
+        $closable: closable,
+        $duration: duration,
+        $transition: transitionStatus,
+        onClick: handleClick
+    }, /*#__PURE__*/ React.createElement(ModalOverflowStyle, null, /*#__PURE__*/ React.createElement(ModalContentStyle, _extends({
+        tabIndex: -1,
+        role: "dialog",
+        "aria-modal": "true",
+        ref: mergedRef,
+        $transition: transitionStatus,
+        $duration: duration
+    }, rest)))), modalRoot);
+}
+export default withTransition(/*#__PURE__*/ forwardRef(ModalOverlay));
+
+//# sourceMappingURL=ModalOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalOverlay.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport { useMergeRefs, useEscape, useLockScroll } from '@lidofinance/hooks'\nimport { withTransition } from '@lidofinance/transition'\nimport { modalRoot } from '@lidofinance/utils'\nimport { ModalOverlayInnerProps } from './types'\nimport {\n  ModalPortalStyle,\n  ModalOverflowStyle,\n  ModalContentStyle,\n} from './ModalOverlayStyles'\nimport { useModalFocus } from './useModalFocus'\nimport { useModalClose } from './useModalClose'\n\nfunction ModalOverlay(\n  props: ModalOverlayInnerProps,\n  externalRef?: ForwardedRef<HTMLDivElement>\n) {\n  const { onClose, onBack, duration, transitionStatus, ...rest } = props\n  const closable = !!onClose\n\n  useEscape(onClose)\n  useLockScroll()\n\n  const controlRef = useModalFocus()\n  const { ref: closeRef, handleClick } = useModalClose(onClose)\n\n  const mergedRef = useMergeRefs([controlRef, closeRef, externalRef])\n\n  if (!modalRoot) return null\n\n  return ReactDOM.createPortal(\n    <ModalPortalStyle\n      $closable={closable}\n      $duration={duration}\n      $transition={transitionStatus}\n      onClick={handleClick}\n    >\n      <ModalOverflowStyle>\n        <ModalContentStyle\n          tabIndex={-1}\n          role='dialog'\n          aria-modal='true'\n          ref={mergedRef}\n          $transition={transitionStatus}\n          $duration={duration}\n          {...rest}\n        />\n      </ModalOverflowStyle>\n    </ModalPortalStyle>,\n    modalRoot\n  )\n}\n\nexport default withTransition(forwardRef(ModalOverlay))\n"],"names":["React","forwardRef","ReactDOM","useMergeRefs","useEscape","useLockScroll","withTransition","modalRoot","ModalPortalStyle","ModalOverflowStyle","ModalContentStyle","useModalFocus","useModalClose","ModalOverlay","props","externalRef","onClose","onBack","duration","transitionStatus","rest","closable","controlRef","ref","closeRef","handleClick","mergedRef","createPortal","$closable","$duration","$transition","onClick","tabIndex","role","aria-modal"],"mappings":"AAAA;AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO,CAAA;AACvD,OAAOC,QAAQ,MAAM,WAAW,CAAA;AAChC,SAASC,YAAY,EAAEC,SAAS,EAAEC,aAAa,QAAQ,uBAAoB,CAAA;AAC3E,SAASC,cAAc,QAAQ,4BAAyB,CAAA;AACxD,SAASC,SAAS,QAAQ,uBAAoB,CAAA;AAE9C,SACEC,gBAAgB,EAChBC,kBAAkB,EAClBC,iBAAiB,QACZ,sBAAsB,CAAA;AAC7B,SAASC,aAAa,QAAQ,iBAAiB,CAAA;AAC/C,SAASC,aAAa,QAAQ,iBAAiB,CAAA;AAE/C,SAASC,YAAY,CACnBC,KAA6B,EAC7BC,WAA0C,EAC1C;IACA,MAAM,EAAEC,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,QAAQ,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGC,IAAI,EAAE,GAAGN,KAAK;IACtE,MAAMO,QAAQ,GAAG,CAAC,CAACL,OAAO;IAE1BZ,SAAS,CAACY,OAAO,CAAC;IAClBX,aAAa,EAAE;IAEf,MAAMiB,UAAU,GAAGX,aAAa,EAAE;IAClC,MAAM,EAAEY,GAAG,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGb,aAAa,CAACI,OAAO,CAAC;IAE7D,MAAMU,SAAS,GAAGvB,YAAY,CAAC;QAACmB,UAAU;QAAEE,QAAQ;QAAET,WAAW;KAAC,CAAC;IAEnE,IAAI,CAACR,SAAS,EAAE,OAAO,IAAI,CAAA;IAE3B,qBAAOL,QAAQ,CAACyB,YAAY,eAC1B,oBAACnB,gBAAgB;QACfoB,SAAS,EAAEP,QAAQ;QACnBQ,SAAS,EAAEX,QAAQ;QACnBY,WAAW,EAAEX,gBAAgB;QAC7BY,OAAO,EAAEN,WAAW;qBAEpB,oBAAChB,kBAAkB,sBACjB,oBAACC,iBAAiB;QAChBsB,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAC,QAAQ;QACbC,YAAU,EAAC,MAAM;QACjBX,GAAG,EAAEG,SAAS;QACdI,WAAW,EAAEX,gBAAgB;QAC7BU,SAAS,EAAEX,QAAQ;OACfE,IAAI,EACR,CACiB,CACJ,EACnBb,SAAS,CACV,CAAA;AACH,CAAC;AAED,eAAeD,cAAc,eAACL,UAAU,CAACY,YAAY,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+const getOpacity = (param)=>{
+    let { $transition  } = param;
+    return [
+        'exiting',
+        'exited'
+    ].includes($transition) ? 0 : 1;
+};
+export const ModalPortalStyle = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 300;
+  background: var(--lido-color-overlay);
+  cursor: ${(param)=>{
+    let { $closable  } = param;
+    return $closable ? 'pointer' : 'default';
+}};
+  transition: opacity ${(param)=>{
+    let { $duration  } = param;
+    return $duration;
+}}ms ease;
+  opacity: ${getOpacity};
+`;
+export const ModalOverflowStyle = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  overflow: auto;
+  overflow-x: hidden;
+  display: flex;
+`;
+const getTransform = (param)=>{
+    let { $transition  } = param;
+    return [
+        'exiting',
+        'exited'
+    ].includes($transition) ? 'translateY(6px)' : 'translateY(0)';
+};
+export const ModalContentStyle = styled.div`
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.lg;
+}}px;
+  outline: none;
+  margin: auto;
+  cursor: default;
+  transition: transform ${(param)=>{
+    let { $duration  } = param;
+    return $duration;
+}}ms ease-out;
+  transform: ${getTransform};
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+`;
+
+//# sourceMappingURL=ModalOverlayStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalOverlayStyles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { TransitionInnerProps } from '@lidofinance/transition'\n\ntype TransitionProps = {\n  $duration: number\n  $transition: TransitionInnerProps['transitionStatus']\n}\n\nconst getOpacity = ({ $transition }: TransitionProps) => {\n  return ['exiting', 'exited'].includes($transition) ? 0 : 1\n}\n\nexport const ModalPortalStyle = styled.div<\n  { $closable: boolean } & TransitionProps\n>`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 300;\n  background: var(--lido-color-overlay);\n  cursor: ${({ $closable }) => ($closable ? 'pointer' : 'default')};\n  transition: opacity ${({ $duration }) => $duration}ms ease;\n  opacity: ${getOpacity};\n`\n\nexport const ModalOverflowStyle = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  overflow: auto;\n  overflow-x: hidden;\n  display: flex;\n`\n\nconst getTransform = ({ $transition }: TransitionProps) => {\n  return ['exiting', 'exited'].includes($transition)\n    ? 'translateY(6px)'\n    : 'translateY(0)'\n}\n\nexport const ModalContentStyle = styled.div<TransitionProps>`\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: ${({ theme }) => theme.spaceMap.lg}px;\n  outline: none;\n  margin: auto;\n  cursor: default;\n  transition: transform ${({ $duration }) => $duration}ms ease-out;\n  transform: ${getTransform};\n  pointer-events: none;\n\n  & > * {\n    pointer-events: auto;\n  }\n`\n"],"names":["styled","getOpacity","$transition","includes","ModalPortalStyle","div","$closable","$duration","ModalOverflowStyle","getTransform","ModalContentStyle","theme","spaceMap","lg"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAQtC,MAAMC,UAAU,GAAG,SAAsC;QAArC,EAAEC,WAAW,CAAA,EAAmB;IAClD,OAAO;QAAC,SAAS;QAAE,QAAQ;KAAC,CAACC,QAAQ,CAACD,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAC5D,CAAC;AAED,OAAO,MAAME,gBAAgB,GAAGJ,MAAM,CAACK,GAAG,AAEzC,CAAC;;;;;;;;UAQQ,EAAE,SAAmB;QAAlB,EAAEC,SAAS,CAAA,EAAE;WAAMA,SAAS,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,CAAC;sBAC7C,EAAE,SAAmBC;QAAlB,EAAEA,SAAS,CAAA,EAAE;WAAKA,SAAS;AAAD,CAAC,CAAC;WAC1C,EAAEN,UAAU,CAAC;AACxB,CAAC,CAAA;AAED,OAAO,MAAMO,kBAAkB,GAAGR,MAAM,CAACK,GAAG,CAAC;;;;;;;;;;AAU7C,CAAC,CAAA;AAED,MAAMI,YAAY,GAAG,SAAsC;QAArC,EAAEP,WAAW,CAAA,EAAmB;IACpD,OAAO;QAAC,SAAS;QAAE,QAAQ;KAAC,CAACC,QAAQ,CAACD,WAAW,CAAC,GAC9C,iBAAiB,GACjB,eAAe,CAAA;AACrB,CAAC;AAED,OAAO,MAAMQ,iBAAiB,GAAGV,MAAM,CAACK,GAAG,AAAiB,CAAC;;;WAGlD,EAAE,SAAeM;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;wBAItB,EAAE,SAAmBN;QAAlB,EAAEA,SAAS,CAAA,EAAE;WAAKA,SAAS;AAAD,CAAC,CAAC;aAC1C,EAAEE,YAAY,CAAC;;;;;;AAM5B,CAAC,CAAA"}

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

@@ -0,0 +1,147 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { Close, ArrowBack } from "../../icons/src/index";
+import { ButtonIcon } from "../../button/src/index";
+export const ModalStyle = styled.div`
+  ${(param)=>{
+    let { theme: { fontSizesMap , borderRadiusesMap , colors , boxShadows  } , $center ,  } = param;
+    return css`
+    width: 432px;
+    max-width: 100%;
+    font-weight: 400;
+    font-size: ${fontSizesMap.xs}px;
+    line-height: 1.5em;
+    text-align: ${$center ? 'center' : 'left'};
+    border-radius: ${borderRadiusesMap.xl}px;
+    box-shadow: ${boxShadows.xxl} ${colors.shadowDark};
+  `;
+}}
+`;
+export const ModalBaseStyle = styled.div`
+  ${(param)=>{
+    let { theme: { colors  }  } = param;
+    return css`
+    color: ${colors.text};
+    background: ${colors.foreground};
+    border-radius: inherit;
+    position: relative;
+    z-index: 1;
+  `;
+}}
+`;
+export const ModalHeaderStyle = styled.div`
+  ${(param)=>{
+    let { theme: { spaceMap , fontSizesMap , mediaQueries  } , $short  } = param;
+    return css`
+    display: flex;
+    align-items: flex-start;
+    min-height: 32px;
+    margin-bottom: ${$short ? -spaceMap.md : 0}px;
+    padding: ${spaceMap.xl}px ${spaceMap.xxl}px;
+    font-size: ${fontSizesMap.md}px;
+    line-height: 1.5em;
+
+    ${mediaQueries.md} {
+      padding: ${spaceMap.lg}px;
+    }
+  `;
+}}
+`;
+export const ModalTitleStyle = styled.div`
+  ${(param)=>{
+    let { theme: { fontSizesMap , spaceMap , mediaQueries  } , $center , $withBackButton , $withCloseButton , $withTitleIcon ,  } = param;
+    return css`
+    font-size: ${fontSizesMap.sm}px;
+    line-height: 1.5em;
+    font-weight: 700;
+    margin-left: ${$center && !$withBackButton ? spaceMap.xxl : '0'}px;
+    margin-right: ${$center && !$withCloseButton ? spaceMap.xxl : '0'}px;
+    padding-top: ${$withTitleIcon ? spaceMap.sm : '0'}px;
+    padding-left: 0;
+    padding-right: ${spaceMap.sm}px;
+    flex-grow: 1;
+    align-self: center;
+
+    ${mediaQueries.md} {
+      padding-right: ${spaceMap.xs}px;
+    }
+  `;
+}}
+`;
+export const ModalTitleIconStyle = styled.div`
+  ${(param)=>{
+    let { theme: { spaceMap  } , $center  } = param;
+    return css`
+    display: ${$center ? 'flex' : 'block'};
+    justify-content: ${$center ? 'center' : 'flex-start'};
+    line-height: 0.7;
+    margin-bottom: ${spaceMap.md}px;
+  `;
+}}
+`;
+export const ModalTitleTextStyle = styled.div`
+  margin: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.xs;
+}}px 0;
+`;
+export const ModalSubtitleStyle = styled.div`
+  ${(param)=>{
+    let { theme: { colors , fontSizesMap , spaceMap , mediaQueries  }  } = param;
+    return css`
+    color: ${colors.textSecondary};
+    font-size: ${fontSizesMap.xs}px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-top: -${spaceMap.xl}px;
+    padding: 0 ${spaceMap.xxl}px ${spaceMap.sm}px;
+
+    ${mediaQueries.md} {
+      padding-left: ${spaceMap.xl}px;
+      padding-right: ${spaceMap.xl}px;
+    }
+  `;
+}}
+`;
+export const ModalContentStyle = styled.div`
+  ${(param)=>{
+    let { theme: { spaceMap , mediaQueries  }  } = param;
+    return css`
+    padding: 0 ${spaceMap.xxl}px ${spaceMap.xxl}px;
+
+    ${mediaQueries.md} {
+      padding: 0 ${spaceMap.lg}px ${spaceMap.lg}px;
+    }
+  `;
+}}
+`;
+export const ModalCloseStyle = styled(ButtonIcon).attrs({
+    icon: /*#__PURE__*/ React.createElement(Close, null),
+    color: 'secondary',
+    variant: 'ghost',
+    size: 'xs'
+})`
+  margin: 0 -10px 0 0;
+  color: var(--lido-color-textSecondary);
+  flex-shrink: 0;
+  border-radius: 50%;
+`;
+export const ModalBackStyle = styled(ButtonIcon).attrs({
+    icon: /*#__PURE__*/ React.createElement(ArrowBack, null),
+    color: 'secondary',
+    variant: 'ghost',
+    size: 'xs'
+})`
+  ${(param)=>{
+    let { theme: { colors , spaceMap  }  } = param;
+    return css`
+    color: ${colors.textSecondary};
+    flex-shrink: 0;
+    margin: 0 ${spaceMap.sm}px 0 -6px;
+    border-radius: 50%;
+    background: transparent !important;
+  `;
+}}
+`;
+
+//# sourceMappingURL=ModalStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/ModalStyles.tsx"],"sourcesContent":["import React from 'react'\nimport styled, { css } from 'styled-components'\nimport { Close, ArrowBack } from '@lidofinance/icons'\nimport { ButtonIcon } from '@lidofinance/button'\n\nexport const ModalStyle = styled.div<{ $center: boolean }>`\n  ${({\n    theme: { fontSizesMap, borderRadiusesMap, colors, boxShadows },\n    $center,\n  }) => css`\n    width: 432px;\n    max-width: 100%;\n    font-weight: 400;\n    font-size: ${fontSizesMap.xs}px;\n    line-height: 1.5em;\n    text-align: ${$center ? 'center' : 'left'};\n    border-radius: ${borderRadiusesMap.xl}px;\n    box-shadow: ${boxShadows.xxl} ${colors.shadowDark};\n  `}\n`\n\nexport const ModalBaseStyle = styled.div`\n  ${({ theme: { colors } }) => css`\n    color: ${colors.text};\n    background: ${colors.foreground};\n    border-radius: inherit;\n    position: relative;\n    z-index: 1;\n  `}\n`\n\nexport const ModalHeaderStyle = styled.div<{\n  $short: boolean\n}>`\n  ${({ theme: { spaceMap, fontSizesMap, mediaQueries }, $short }) => css`\n    display: flex;\n    align-items: flex-start;\n    min-height: 32px;\n    margin-bottom: ${$short ? -spaceMap.md : 0}px;\n    padding: ${spaceMap.xl}px ${spaceMap.xxl}px;\n    font-size: ${fontSizesMap.md}px;\n    line-height: 1.5em;\n\n    ${mediaQueries.md} {\n      padding: ${spaceMap.lg}px;\n    }\n  `}\n`\n\nexport const ModalTitleStyle = styled.div<{\n  $center: boolean\n  $withTitleIcon: boolean\n  $withCloseButton: boolean\n  $withBackButton: boolean\n}>`\n  ${({\n    theme: { fontSizesMap, spaceMap, mediaQueries },\n    $center,\n    $withBackButton,\n    $withCloseButton,\n    $withTitleIcon,\n  }) => css`\n    font-size: ${fontSizesMap.sm}px;\n    line-height: 1.5em;\n    font-weight: 700;\n    margin-left: ${$center && !$withBackButton ? spaceMap.xxl : '0'}px;\n    margin-right: ${$center && !$withCloseButton ? spaceMap.xxl : '0'}px;\n    padding-top: ${$withTitleIcon ? spaceMap.sm : '0'}px;\n    padding-left: 0;\n    padding-right: ${spaceMap.sm}px;\n    flex-grow: 1;\n    align-self: center;\n\n    ${mediaQueries.md} {\n      padding-right: ${spaceMap.xs}px;\n    }\n  `}\n`\n\nexport const ModalTitleIconStyle = styled.div<{\n  $center: boolean\n}>`\n  ${({ theme: { spaceMap }, $center }) => css`\n    display: ${$center ? 'flex' : 'block'};\n    justify-content: ${$center ? 'center' : 'flex-start'};\n    line-height: 0.7;\n    margin-bottom: ${spaceMap.md}px;\n  `}\n`\n\nexport const ModalTitleTextStyle = styled.div`\n  margin: ${({ theme }) => theme.spaceMap.xs}px 0;\n`\n\nexport const ModalSubtitleStyle = styled.div`\n  ${({ theme: { colors, fontSizesMap, spaceMap, mediaQueries } }) => css`\n    color: ${colors.textSecondary};\n    font-size: ${fontSizesMap.xs}px;\n    font-weight: 400;\n    line-height: 24px;\n    margin-top: -${spaceMap.xl}px;\n    padding: 0 ${spaceMap.xxl}px ${spaceMap.sm}px;\n\n    ${mediaQueries.md} {\n      padding-left: ${spaceMap.xl}px;\n      padding-right: ${spaceMap.xl}px;\n    }\n  `}\n`\n\nexport const ModalContentStyle = styled.div`\n  ${({ theme: { spaceMap, mediaQueries } }) => css`\n    padding: 0 ${spaceMap.xxl}px ${spaceMap.xxl}px;\n\n    ${mediaQueries.md} {\n      padding: 0 ${spaceMap.lg}px ${spaceMap.lg}px;\n    }\n  `}\n`\n\nexport const ModalCloseStyle = styled(ButtonIcon).attrs({\n  icon: <Close />,\n  color: 'secondary',\n  variant: 'ghost',\n  size: 'xs',\n})`\n  margin: 0 -10px 0 0;\n  color: var(--lido-color-textSecondary);\n  flex-shrink: 0;\n  border-radius: 50%;\n`\n\nexport const ModalBackStyle = styled(ButtonIcon).attrs({\n  icon: <ArrowBack />,\n  color: 'secondary',\n  variant: 'ghost',\n  size: 'xs',\n})`\n  ${({ theme: { colors, spaceMap } }) => css`\n    color: ${colors.textSecondary};\n    flex-shrink: 0;\n    margin: 0 ${spaceMap.sm}px 0 -6px;\n    border-radius: 50%;\n    background: transparent !important;\n  `}\n`\n"],"names":["React","styled","css","Close","ArrowBack","ButtonIcon","ModalStyle","div","theme","fontSizesMap","borderRadiusesMap","colors","boxShadows","$center","xs","xl","xxl","shadowDark","ModalBaseStyle","text","foreground","ModalHeaderStyle","spaceMap","mediaQueries","$short","md","lg","ModalTitleStyle","$withBackButton","$withCloseButton","$withTitleIcon","sm","ModalTitleIconStyle","ModalTitleTextStyle","ModalSubtitleStyle","textSecondary","ModalContentStyle","ModalCloseStyle","attrs","icon","color","variant","size","ModalBackStyle"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+export const FOCUSABLE_ELEMENTS = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+    'select:not([disabled]):not([aria-hidden])',
+    'textarea:not([disabled]):not([aria-hidden])',
+    'button:not([disabled]):not([aria-hidden])',
+    'iframe',
+    'object',
+    'embed',
+    '[contenteditable]',
+    '[tabindex]:not([tabindex^="-"])', 
+];
+
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/constants.ts"],"sourcesContent":["export const FOCUSABLE_ELEMENTS = [\n  'a[href]',\n  'area[href]',\n  'input:not([disabled]):not([type=\"hidden\"]):not([aria-hidden])',\n  'select:not([disabled]):not([aria-hidden])',\n  'textarea:not([disabled]):not([aria-hidden])',\n  'button:not([disabled]):not([aria-hidden])',\n  'iframe',\n  'object',\n  'embed',\n  '[contenteditable]',\n  '[tabindex]:not([tabindex^=\"-\"])',\n]\n"],"names":["FOCUSABLE_ELEMENTS"],"mappings":"AAAA,OAAO,MAAMA,kBAAkB,GAAG;IAChC,SAAS;IACT,YAAY;IACZ,+DAA+D;IAC/D,2CAA2C;IAC3C,6CAA6C;IAC7C,2CAA2C;IAC3C,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,mBAAmB;IACnB,iCAAiC;CAClC,CAAA"}

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

@@ -0,0 +1,7 @@
+export { default as Modal } from "./Modal";
+export { default as ModalExtra } from "./ModalExtra";
+export { default as ModalOverlay } from "./ModalOverlay";
+export { default as ModalButton } from "./ModalButton";
+export * from './types';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/index.ts"],"sourcesContent":["export { default as Modal } from './Modal'\nexport { default as ModalExtra } from './ModalExtra'\nexport { default as ModalOverlay } from './ModalOverlay'\nexport { default as ModalButton } from './ModalButton'\nexport * from './types'\n"],"names":["default","Modal","ModalExtra","ModalOverlay","ModalButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,KAAK,QAAQ,SAAS,CAAA;AAC1C,SAASD,OAAO,IAAIE,UAAU,QAAQ,cAAc,CAAA;AACpD,SAASF,OAAO,IAAIG,YAAY,QAAQ,gBAAgB,CAAA;AACxD,SAASH,OAAO,IAAII,WAAW,QAAQ,eAAe,CAAA;AACtD,cAAc,SAAS,CAAA"}

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

@@ -0,0 +1,3 @@
+import React from "react";
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport {\n  TransitionWrapperProps,\n  TransitionInnerProps,\n} from '@lidofinance/transition'\nimport { ButtonProps } from '@lidofinance/button'\nimport React from 'react'\n\nexport type ModalOverlayOwnProps = LidoComponentProps<\n  'div',\n  {\n    onClose?: () => void\n    onBack?: () => void\n  }\n>\n\nexport type ModalOverlayProps = ModalOverlayOwnProps & TransitionWrapperProps\nexport type ModalOverlayInnerProps = ModalOverlayOwnProps & TransitionInnerProps\n\nexport type ModalProps = {\n  title?: React.ReactNode\n  titleIcon?: React.ReactNode\n  subtitle?: React.ReactNode\n  extra?: React.ReactNode\n  center?: boolean\n  open?: boolean\n} & Omit<ModalOverlayProps, 'title' | 'in'>\n\nexport type ModalExtraProps = LidoComponentProps<'div'>\n\nexport type ModalButtonIconProps = {\n  icon: React.ReactElement\n} & ButtonProps\n"],"names":["React"],"mappings":"AAMA,OAAOA,KAAK,MAAM,OAAO,CAAA"}

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

@@ -0,0 +1,19 @@
+import React, { useCallback, useRef } from "react";
+export const useModalClose = (callback)=>{
+    const ref = useRef(null);
+    const handleClick = useCallback((event)=>{
+        const contentElement = ref.current;
+        if (!contentElement) return;
+        if (!(event.target instanceof Node)) return;
+        if (contentElement.contains(event.target)) return;
+        callback === null || callback === void 0 ? void 0 : callback();
+    }, [
+        callback
+    ]);
+    return {
+        ref,
+        handleClick
+    };
+};
+
+//# sourceMappingURL=useModalClose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/modal/src/useModalClose.ts"],"sourcesContent":["import React, { useCallback, useRef } from 'react'\n\nexport const useModalClose = <T extends HTMLDivElement>(\n  callback?: () => void\n): {\n  ref: React.RefObject<T>\n  handleClick: (event: React.MouseEvent<T, MouseEvent>) => void\n} => {\n  const ref = useRef<T>(null)\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<T, MouseEvent>) => {\n      const contentElement = ref.current\n\n      if (!contentElement) return\n      if (!(event.target instanceof Node)) return\n\n      if (contentElement.contains(event.target)) return\n\n      callback?.()\n    },\n    [callback]\n  )\n\n  return {\n    ref,\n    handleClick,\n  }\n}\n"],"names":["React","useCallback","useRef","useModalClose","callback","ref","handleClick","event","contentElement","current","target","Node","contains"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,QAAQ,OAAO,CAAA;AAElD,OAAO,MAAMC,aAAa,GAAG,CAC3BC,QAAqB,GAIlB;IACH,MAAMC,GAAG,GAAGH,MAAM,CAAI,IAAI,CAAC;IAE3B,MAAMI,WAAW,GAAGL,WAAW,CAC7B,CAACM,KAAsC,GAAK;QAC1C,MAAMC,cAAc,GAAGH,GAAG,CAACI,OAAO;QAElC,IAAI,CAACD,cAAc,EAAE,OAAM;QAC3B,IAAI,CAAC,CAACD,KAAK,CAACG,MAAM,YAAYC,IAAI,CAAC,EAAE,OAAM;QAE3C,IAAIH,cAAc,CAACI,QAAQ,CAACL,KAAK,CAACG,MAAM,CAAC,EAAE,OAAM;QAEjDN,QAAQ,aAARA,QAAQ,WAAI,GAAZA,KAAAA,CAAY,GAAZA,QAAQ,EAAI,CAAA;IACd,CAAC,EACD;QAACA,QAAQ;KAAC,CACX;IAED,OAAO;QACLC,GAAG;QACHC,WAAW;KACZ,CAAA;AACH,CAAC,CAAA"}