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

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _modalStyles = require("./ModalStyles");
+const _modalOverlay = /*#__PURE__*/ _interopRequireDefault(require("./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.default.createElement(_modalStyles.ModalHeaderStyle, {
+        $short: !title
+    }, withBackButton && /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalBackStyle, {
+        onClick: onBack
+    }), /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalTitleStyle, {
+        $center: center,
+        $withTitleIcon: withTitleIcon,
+        $withCloseButton: withCloseButton,
+        $withBackButton: withBackButton
+    }, withTitleIcon && /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalTitleIconStyle, {
+        $center: center
+    }, titleIcon), /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalTitleTextStyle, null, title)), withCloseButton && /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalCloseStyle, {
+        onClick: onClose
+    }));
+    return /*#__PURE__*/ _react.default.createElement(_modalOverlay.default, _extends({
+        in: open
+    }, rest, {
+        ref: ref
+    }), /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalStyle, {
+        $center: center
+    }, /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalBaseStyle, null, modalHeader, withSubtitle && /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalSubtitleStyle, null, subtitle), /*#__PURE__*/ _react.default.createElement(_modalStyles.ModalContentStyle, null, children)), extra));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(Modal);
+
+//# sourceMappingURL=Modal.js.map

package/dist/cjs/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":["Modal","props","ref","children","title","titleIcon","subtitle","center","extra","open","rest","onClose","onBack","withTitleIcon","withSubtitle","withCloseButton","withBackButton","modalHeader","ModalHeaderStyle","$short","ModalBackStyle","onClick","ModalTitleStyle","$center","$withTitleIcon","$withCloseButton","$withBackButton","ModalTitleIconStyle","ModalTitleTextStyle","ModalCloseStyle","ModalOverlay","in","ModalStyle","ModalBaseStyle","ModalSubtitleStyle","ModalContentStyle","forwardRef"],"mappings":"AAAA;;;;+BAqEA,SAAgC;;aAAhC,QAAgC;;;;;6DArEgB,OAAO;6BAahD,eAAe;mEAEG,gBAAgB;AAEzC,SAASA,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,6BAACC,YAAgB,iBAAA;QAACC,MAAM,EAAE,CAACf,KAAK;OAC7BY,cAAc,kBAAI,6BAACI,YAAc,eAAA;QAACC,OAAO,EAAET,MAAM;MAAI,gBACtD,6BAACU,YAAe,gBAAA;QACdC,OAAO,EAAEhB,MAAM;QACfiB,cAAc,EAAEX,aAAa;QAC7BY,gBAAgB,EAAEV,eAAe;QACjCW,eAAe,EAAEV,cAAc;OAE9BH,aAAa,kBACZ,6BAACc,YAAmB,oBAAA;QAACJ,OAAO,EAAEhB,MAAM;OACjCF,SAAS,CACU,AACvB,gBACD,6BAACuB,YAAmB,oBAAA,QAAExB,KAAK,CAAuB,CAClC,EACjBW,eAAe,kBAAI,6BAACc,YAAe,gBAAA;QAACR,OAAO,EAAEV,OAAO;MAAI,CACxC,AACpB;IAED,qBACE,6BAACmB,aAAY,QAAA;QAACC,EAAE,EAAEtB,IAAI;OAAMC,IAAI;QAAER,GAAG,EAAEA,GAAG;sBACxC,6BAAC8B,YAAU,WAAA;QAACT,OAAO,EAAEhB,MAAM;qBACzB,6BAAC0B,YAAc,eAAA,QACZhB,WAAW,EACXH,YAAY,kBAAI,6BAACoB,YAAkB,mBAAA,QAAE5B,QAAQ,CAAsB,gBACpE,6BAAC6B,YAAiB,kBAAA,QAAEhC,QAAQ,CAAqB,CAClC,EAChBK,KAAK,CACK,CACA,CAChB;AACH,CAAC;MAED,QAAgC,iBAAjB4B,IAAAA,MAAU,WAAA,EAACpC,KAAK,CAAC"}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _modalButtonStyles = require("./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.default.cloneElement(icon, AdaptiveIconProps);
+    return /*#__PURE__*/ _react.default.createElement(_modalButtonStyles.ModalButtonStyle, _extends({
+        type: "button",
+        size: size,
+        loading: loading,
+        ref: ref
+    }, props), /*#__PURE__*/ _react.default.createElement(_modalButtonStyles.ModalButtonContentStyle, null, children, " ", AdaptiveIcon));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(ModalButton);
+
+//# sourceMappingURL=ModalButton.js.map

package/dist/cjs/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":["iconSize","xxs","width","height","xs","sm","md","lg","ModalButton","props","ref","size","loading","children","icon","AdaptiveIconProps","AdaptiveIcon","React","cloneElement","ModalButtonStyle","type","ModalButtonContentStyle","forwardRef"],"mappings":"AAAA;;;;+BAqDA,SAAsC;;aAAtC,QAAsC;;;;6DArDU,OAAO;mCAEG,qBAAqB;AAG/E,MAAMA,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,iBAAGC,MAAK,QAAA,CAACC,YAAY,CAACJ,IAAI,EAAEC,iBAAiB,CAAC;IAEhE,qBACE,6BAACI,kBAAgB,iBAAA;QACfC,IAAI,EAAC,QAAQ;QACbT,IAAI,EAAEA,IAAI;QACVC,OAAO,EAAEA,OAAO;QAChBF,GAAG,EAAEA,GAAG;OACJD,KAAK,iBAET,6BAACY,kBAAuB,wBAAA,QACrBR,QAAQ,EAAC,GAAC,EAACG,YAAY,CACA,CACT,CACpB;AACH,CAAC;MAED,QAAsC,iBAAvBM,IAAAA,MAAU,WAAA,EAACd,WAAW,CAAC"}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ModalButtonStyle: ()=>ModalButtonStyle,
+    ModalButtonContentStyle: ()=>ModalButtonContentStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
+const _button = require("../../button/src/index");
+const ModalButtonStyle = (0, _styledComponents.default)(_button.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);
+  }
+`;
+const ModalButtonContentStyle = _styledComponents.default.span`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+//# sourceMappingURL=ModalButtonStyles.js.map

package/dist/cjs/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":["ModalButtonStyle","ModalButtonContentStyle","styled","Button","active","span"],"mappings":"AAAA;;;;;;;;;;;IAIaA,gBAAgB,MAAhBA,gBAAgB;IAkBhBC,uBAAuB,MAAvBA,uBAAuB;;;uEAtBjB,mBAAmB;wBAEf,wBAAqB;AAErC,MAAMD,gBAAgB,GAAGE,IAAAA,iBAAM,QAAA,EAACC,OAAM,OAAA,CAAC,CAAC;UACrC,EAAE,SACRC;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;AAEM,MAAMH,uBAAuB,GAAGC,iBAAM,QAAA,CAACG,IAAI,CAAC;;;;;AAKnD,CAAC"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _modalExtraStyles = require("./ModalExtraStyles");
+function ModalExtra(props, ref) {
+    return /*#__PURE__*/ _react.default.createElement(_modalExtraStyles.ModalExtraStyle, _extends({}, props, {
+        ref: ref
+    }));
+}
+const _default = /*#__PURE__*/ (0, _react.forwardRef)(ModalExtra);
+
+//# sourceMappingURL=ModalExtra.js.map

package/dist/cjs/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":["ModalExtra","props","ref","ModalExtraStyle","forwardRef"],"mappings":"AAAA;;;;+BAYA,SAAqC;;aAArC,QAAqC;;;;6DAZW,OAAO;kCAEvB,oBAAoB;AAGpD,SAASA,UAAU,CACjBC,KAAsB,EACtBC,GAAkC,EAClC;IACA,qBAAO,6BAACC,iBAAe,gBAAA,eAAKF,KAAK;QAAEC,GAAG,EAAEA,GAAG;OAAI,CAAA;AACjD,CAAC;MAED,QAAqC,iBAAtBE,IAAAA,MAAU,WAAA,EAACJ,UAAU,CAAC"}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalExtraStyle", {
+    enumerable: true,
+    get: ()=>ModalExtraStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
+const ModalExtraStyle = _styledComponents.default.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/cjs/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":["ModalExtraStyle","styled","div","theme","borderRadiusesMap","xl","spaceMap","xxl","mediaQueries","md","lg"],"mappings":"AAAA;;;;+BAEaA,iBAAe;;aAAfA,eAAe;;;uEAFT,mBAAmB;AAE/B,MAAMA,eAAe,GAAGC,iBAAM,QAAA,CAACC,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"}

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _extends = require("@swc/helpers/lib/_extends.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactDom = /*#__PURE__*/ _interopRequireDefault(require("react-dom"));
+const _hooks = require("../../hooks/src/index");
+const _transition = require("../../transition/src/index");
+const _utils = require("../../utils/src/index");
+const _modalOverlayStyles = require("./ModalOverlayStyles");
+const _useModalFocus = require("./useModalFocus");
+const _useModalClose = require("./useModalClose");
+function ModalOverlay(props, externalRef) {
+    const { onClose , onBack , duration , transitionStatus , ...rest } = props;
+    const closable = !!onClose;
+    (0, _hooks.useEscape)(onClose);
+    (0, _hooks.useLockScroll)();
+    const controlRef = (0, _useModalFocus.useModalFocus)();
+    const { ref: closeRef , handleClick  } = (0, _useModalClose.useModalClose)(onClose);
+    const mergedRef = (0, _hooks.useMergeRefs)([
+        controlRef,
+        closeRef,
+        externalRef
+    ]);
+    if (!_utils.modalRoot) return null;
+    return /*#__PURE__*/ _reactDom.default.createPortal(/*#__PURE__*/ _react.default.createElement(_modalOverlayStyles.ModalPortalStyle, {
+        $closable: closable,
+        $duration: duration,
+        $transition: transitionStatus,
+        onClick: handleClick
+    }, /*#__PURE__*/ _react.default.createElement(_modalOverlayStyles.ModalOverflowStyle, null, /*#__PURE__*/ _react.default.createElement(_modalOverlayStyles.ModalContentStyle, _extends({
+        tabIndex: -1,
+        role: "dialog",
+        "aria-modal": "true",
+        ref: mergedRef,
+        $transition: transitionStatus,
+        $duration: duration
+    }, rest)))), _utils.modalRoot);
+}
+const _default = (0, _transition.withTransition)(/*#__PURE__*/ (0, _react.forwardRef)(ModalOverlay));
+
+//# sourceMappingURL=ModalOverlay.js.map

package/dist/cjs/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":["ModalOverlay","props","externalRef","onClose","onBack","duration","transitionStatus","rest","closable","useEscape","useLockScroll","controlRef","useModalFocus","ref","closeRef","handleClick","useModalClose","mergedRef","useMergeRefs","modalRoot","ReactDOM","createPortal","ModalPortalStyle","$closable","$duration","$transition","onClick","ModalOverflowStyle","ModalContentStyle","tabIndex","role","aria-modal","withTransition","forwardRef"],"mappings":"AAAA;;;;+BAsDA,SAAuD;;aAAvD,QAAuD;;;;;6DAtDP,OAAO;+DAClC,WAAW;uBACuB,uBAAoB;4BAC5C,4BAAyB;uBAC9B,uBAAoB;oCAMvC,sBAAsB;+BACC,iBAAiB;+BACjB,iBAAiB;AAE/C,SAASA,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;IAE1BM,IAAAA,MAAS,UAAA,EAACN,OAAO,CAAC;IAClBO,IAAAA,MAAa,cAAA,GAAE;IAEf,MAAMC,UAAU,GAAGC,IAAAA,cAAa,cAAA,GAAE;IAClC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGC,IAAAA,cAAa,cAAA,EAACb,OAAO,CAAC;IAE7D,MAAMc,SAAS,GAAGC,IAAAA,MAAY,aAAA,EAAC;QAACP,UAAU;QAAEG,QAAQ;QAAEZ,WAAW;KAAC,CAAC;IAEnE,IAAI,CAACiB,MAAS,UAAA,EAAE,OAAO,IAAI,CAAA;IAE3B,qBAAOC,SAAQ,QAAA,CAACC,YAAY,eAC1B,6BAACC,mBAAgB,iBAAA;QACfC,SAAS,EAAEf,QAAQ;QACnBgB,SAAS,EAAEnB,QAAQ;QACnBoB,WAAW,EAAEnB,gBAAgB;QAC7BoB,OAAO,EAAEX,WAAW;qBAEpB,6BAACY,mBAAkB,mBAAA,sBACjB,6BAACC,mBAAiB,kBAAA;QAChBC,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAC,QAAQ;QACbC,YAAU,EAAC,MAAM;QACjBlB,GAAG,EAAEI,SAAS;QACdQ,WAAW,EAAEnB,gBAAgB;QAC7BkB,SAAS,EAAEnB,QAAQ;OACfE,IAAI,EACR,CACiB,CACJ,EACnBY,MAAS,UAAA,CACV,CAAA;AACH,CAAC;MAED,QAAuD,GAAxCa,IAAAA,WAAc,eAAA,gBAACC,IAAAA,MAAU,WAAA,EAACjC,YAAY,CAAC,CAAC"}

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ModalPortalStyle: ()=>ModalPortalStyle,
+    ModalOverflowStyle: ()=>ModalOverflowStyle,
+    ModalContentStyle: ()=>ModalContentStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
+const getOpacity = (param)=>{
+    let { $transition  } = param;
+    return [
+        'exiting',
+        'exited'
+    ].includes($transition) ? 0 : 1;
+};
+const ModalPortalStyle = _styledComponents.default.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};
+`;
+const ModalOverflowStyle = _styledComponents.default.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)';
+};
+const ModalContentStyle = _styledComponents.default.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/cjs/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":["ModalPortalStyle","ModalOverflowStyle","ModalContentStyle","getOpacity","$transition","includes","styled","div","$closable","$duration","getTransform","theme","spaceMap","lg"],"mappings":"AAAA;;;;;;;;;;;IAYaA,gBAAgB,MAAhBA,gBAAgB;IAehBC,kBAAkB,MAAlBA,kBAAkB;IAkBlBC,iBAAiB,MAAjBA,iBAAiB;;;uEA7CX,mBAAmB;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;AAEM,MAAMJ,gBAAgB,GAAGM,iBAAM,QAAA,CAACC,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;AAEM,MAAMF,kBAAkB,GAAGK,iBAAM,QAAA,CAACC,GAAG,CAAC;;;;;;;;;;AAU7C,CAAC;AAED,MAAMG,YAAY,GAAG,SAAsC;QAArC,EAAEN,WAAW,CAAA,EAAmB;IACpD,OAAO;QAAC,SAAS;QAAE,QAAQ;KAAC,CAACC,QAAQ,CAACD,WAAW,CAAC,GAC9C,iBAAiB,GACjB,eAAe,CAAA;AACrB,CAAC;AAEM,MAAMF,iBAAiB,GAAGI,iBAAM,QAAA,CAACC,GAAG,AAAiB,CAAC;;;WAGlD,EAAE,SAAeI;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;wBAItB,EAAE,SAAmBJ;QAAlB,EAAEA,SAAS,CAAA,EAAE;WAAKA,SAAS;AAAD,CAAC,CAAC;aAC1C,EAAEC,YAAY,CAAC;;;;;;AAM5B,CAAC"}

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

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ModalStyle: ()=>ModalStyle,
+    ModalBaseStyle: ()=>ModalBaseStyle,
+    ModalHeaderStyle: ()=>ModalHeaderStyle,
+    ModalTitleStyle: ()=>ModalTitleStyle,
+    ModalTitleIconStyle: ()=>ModalTitleIconStyle,
+    ModalTitleTextStyle: ()=>ModalTitleTextStyle,
+    ModalSubtitleStyle: ()=>ModalSubtitleStyle,
+    ModalContentStyle: ()=>ModalContentStyle,
+    ModalCloseStyle: ()=>ModalCloseStyle,
+    ModalBackStyle: ()=>ModalBackStyle
+});
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _styledComponents = /*#__PURE__*/ _interopRequireWildcard(require("styled-components"));
+const _icons = require("../../icons/src/index");
+const _button = require("../../button/src/index");
+const ModalStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { fontSizesMap , borderRadiusesMap , colors , boxShadows  } , $center ,  } = param;
+    return (0, _styledComponents.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};
+  `;
+}}
+`;
+const ModalBaseStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { colors  }  } = param;
+    return (0, _styledComponents.css)`
+    color: ${colors.text};
+    background: ${colors.foreground};
+    border-radius: inherit;
+    position: relative;
+    z-index: 1;
+  `;
+}}
+`;
+const ModalHeaderStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { spaceMap , fontSizesMap , mediaQueries  } , $short  } = param;
+    return (0, _styledComponents.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;
+    }
+  `;
+}}
+`;
+const ModalTitleStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { fontSizesMap , spaceMap , mediaQueries  } , $center , $withBackButton , $withCloseButton , $withTitleIcon ,  } = param;
+    return (0, _styledComponents.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;
+    }
+  `;
+}}
+`;
+const ModalTitleIconStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { spaceMap  } , $center  } = param;
+    return (0, _styledComponents.css)`
+    display: ${$center ? 'flex' : 'block'};
+    justify-content: ${$center ? 'center' : 'flex-start'};
+    line-height: 0.7;
+    margin-bottom: ${spaceMap.md}px;
+  `;
+}}
+`;
+const ModalTitleTextStyle = _styledComponents.default.div`
+  margin: ${(param)=>{
+    let { theme  } = param;
+    return theme.spaceMap.xs;
+}}px 0;
+`;
+const ModalSubtitleStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { colors , fontSizesMap , spaceMap , mediaQueries  }  } = param;
+    return (0, _styledComponents.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;
+    }
+  `;
+}}
+`;
+const ModalContentStyle = _styledComponents.default.div`
+  ${(param)=>{
+    let { theme: { spaceMap , mediaQueries  }  } = param;
+    return (0, _styledComponents.css)`
+    padding: 0 ${spaceMap.xxl}px ${spaceMap.xxl}px;
+
+    ${mediaQueries.md} {
+      padding: 0 ${spaceMap.lg}px ${spaceMap.lg}px;
+    }
+  `;
+}}
+`;
+const ModalCloseStyle = (0, _styledComponents.default)(_button.ButtonIcon).attrs({
+    icon: /*#__PURE__*/ _react.default.createElement(_icons.Close, null),
+    color: 'secondary',
+    variant: 'ghost',
+    size: 'xs'
+})`
+  margin: 0 -10px 0 0;
+  color: var(--lido-color-textSecondary);
+  flex-shrink: 0;
+  border-radius: 50%;
+`;
+const ModalBackStyle = (0, _styledComponents.default)(_button.ButtonIcon).attrs({
+    icon: /*#__PURE__*/ _react.default.createElement(_icons.ArrowBack, null),
+    color: 'secondary',
+    variant: 'ghost',
+    size: 'xs'
+})`
+  ${(param)=>{
+    let { theme: { colors , spaceMap  }  } = param;
+    return (0, _styledComponents.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/cjs/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":["ModalStyle","ModalBaseStyle","ModalHeaderStyle","ModalTitleStyle","ModalTitleIconStyle","ModalTitleTextStyle","ModalSubtitleStyle","ModalContentStyle","ModalCloseStyle","ModalBackStyle","styled","div","css","theme","fontSizesMap","borderRadiusesMap","colors","boxShadows","$center","xs","xl","xxl","shadowDark","text","foreground","spaceMap","mediaQueries","$short","md","lg","$withBackButton","$withCloseButton","$withTitleIcon","sm","textSecondary","ButtonIcon","attrs","icon","Close","color","variant","size","ArrowBack"],"mappings":"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"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FOCUSABLE_ELEMENTS", {
+    enumerable: true,
+    get: ()=>FOCUSABLE_ELEMENTS
+});
+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/cjs/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;;;;+BAAaA,oBAAkB;;aAAlBA,kBAAkB;;AAAxB,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"}

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Modal: ()=>_modal.default,
+    ModalExtra: ()=>_modalExtra.default,
+    ModalOverlay: ()=>_modalOverlay.default,
+    ModalButton: ()=>_modalButton.default
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+const _modal = /*#__PURE__*/ _interopRequireDefault(require("./Modal"));
+const _modalExtra = /*#__PURE__*/ _interopRequireDefault(require("./ModalExtra"));
+const _modalOverlay = /*#__PURE__*/ _interopRequireDefault(require("./ModalOverlay"));
+const _modalButton = /*#__PURE__*/ _interopRequireDefault(require("./ModalButton"));
+_exportStar(require("./types"), exports);
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":["Modal","ModalExtra","ModalOverlay","ModalButton"],"mappings":"AAAA;;;;;;;;;;;IAAoBA,KAAK,MAALA,MAAK,QAAA;IACLC,UAAU,MAAVA,WAAU,QAAA;IACVC,YAAY,MAAZA,aAAY,QAAA;IACZC,WAAW,MAAXA,YAAW,QAAA;;;;4DAHE,SAAS;iEACJ,cAAc;mEACZ,gBAAgB;kEACjB,eAAe;oBACxC,SAAS"}