cakeinpanic-ui 1.0.0

package/dist/esm/main-menu/MainMenuItem.mjs

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { NavLink } from './MainMenuItemStyles.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const MainMenuItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    children,
+    active,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/jsxs(NavLink, {
+    ref: ref,
+    active: Boolean(active),
+    ...restProps,
+    children: [icon, /*#__PURE__*/jsx("span", {
+      children: children
+    })]
+  });
+});
+MainMenuItem.displayName = 'MainMenuItem';
+
+export { MainMenuItem };
+//# sourceMappingURL=MainMenuItem.mjs.map

package/dist/esm/main-menu/MainMenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainMenuItem.mjs","sources":["../../../src/main-menu/MainMenuItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { MainMenuItemProps } from './types.js'\nimport { NavLink } from './MainMenuItemStyles.js'\n\nexport const MainMenuItem = forwardRef(\n  (\n    { icon, children, active, ...restProps }: MainMenuItemProps,\n    ref?: ForwardedRef<HTMLDivElement>,\n  ) => {\n    return (\n      <NavLink ref={ref} active={Boolean(active)} {...restProps}>\n        {icon}\n        <span>{children}</span>\n      </NavLink>\n    )\n  },\n)\nMainMenuItem.displayName = 'MainMenuItem'\n"],"names":["MainMenuItem","forwardRef","_ref","ref","icon","children","active","restProps","_jsxs","NavLink","Boolean","_jsx","displayName"],"mappings":";;;;AAIO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,CAAAC,IAAA,EAEEC,GAAkC,KAC/B;EAAA,IAFH;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAE,GAAGC,SAAAA;AAA6B,GAAC,GAAAL,IAAA,CAAA;EAG3D,oBACEM,IAAA,CAACC,OAAO,EAAA;AAACN,IAAAA,GAAG,EAAEA,GAAI;AAACG,IAAAA,MAAM,EAAEI,OAAO,CAACJ,MAAM,CAAE;AAAA,IAAA,GAAKC,SAAS;IAAAF,QAAA,EAAA,CACtDD,IAAI,eACLO,GAAA,CAAA,MAAA,EAAA;AAAAN,MAAAA,QAAA,EAAOA,QAAAA;AAAQ,KAAO,CAAC,CAAA;AAAA,GAChB,CAAC,CAAA;AAEd,CACF,EAAC;AACDL,YAAY,CAACY,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/main-menu/MainMenuItemStyles.mjs

@@ -0,0 +1,63 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+
+const NavLink = styled.a`
+  cursor: pointer;
+  color: var(--lido-color-secondary);
+  font-size: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.fontSizesMap.xxxs;
+}}px;
+  line-height: 1.7em;
+  font-weight: 800;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: ${props => props.active ? 1 : 0.8};
+
+  :hover {
+    opacity: 1;
+    color: var(--lido-color-secondary);
+  }
+
+  :not(:last-of-type) {
+    margin-right: 32px;
+  }
+
+  svg {
+    fill: var(
+      --lido-color-${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active ? `primary` : `secondary`;
+}}
+    );
+  }
+
+  ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.mediaQueries.md;
+}} {
+    flex-direction: column;
+    text-transform: none;
+    font-weight: 500;
+    font-size: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.fontSizesMap.xxxs;
+}}px;
+    line-height: 1.2em;
+    letter-spacing: 0;
+  }
+`;
+
+export { NavLink };
+//# sourceMappingURL=MainMenuItemStyles.mjs.map

package/dist/esm/main-menu/MainMenuItemStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainMenuItemStyles.mjs","sources":["../../../src/main-menu/MainMenuItemStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\n\nexport const NavLink = styled.a<{ active: boolean }>`\n  cursor: pointer;\n  color: var(--lido-color-secondary);\n  font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px;\n  line-height: 1.7em;\n  font-weight: 800;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: ${(props) => (props.active ? 1 : 0.8)};\n\n  :hover {\n    opacity: 1;\n    color: var(--lido-color-secondary);\n  }\n\n  :not(:last-of-type) {\n    margin-right: 32px;\n  }\n\n  svg {\n    fill: var(\n      --lido-color-${({ active }) => (active ? `primary` : `secondary`)}\n    );\n  }\n\n  ${({ theme }) => theme.mediaQueries.md} {\n    flex-direction: column;\n    text-transform: none;\n    font-weight: 500;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px;\n    line-height: 1.2em;\n    letter-spacing: 0;\n  }\n`\n"],"names":["NavLink","styled","a","_ref","theme","fontSizesMap","xxxs","props","active","_ref2","_ref3","mediaQueries","md","_ref4"],"mappings":";;AAEaA,MAAAA,OAAO,GAAGC,MAAM,CAACC,CAAsB,CAAA;AACpD;AACA;AACA,aAAA,EAAeC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,YAAY,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAcC,EAAAA,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAC,GAAG,GAAI,CAAA;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAA,EAAqBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,MAAAA;AAAO,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAMD,MAAM,GAAG,CAAS,OAAA,CAAA,GAAG,CAAW,SAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvE;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;AAAEN,IAAAA,KAAAA;AAAM,GAAC,GAAAM,KAAA,CAAA;AAAA,EAAA,OAAKN,KAAK,CAACO,YAAY,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AACxC;AACA;AACA;AACA,eAAA,EAAiBC,KAAA,IAAA;EAAA,IAAC;AAAET,IAAAA,KAAAA;AAAM,GAAC,GAAAS,KAAA,CAAA;AAAA,EAAA,OAAKT,KAAK,CAACC,YAAY,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AACvD;AACA;AACA;AACA;;;;"}

package/dist/esm/main-menu/MainMenuStyles.mjs

@@ -0,0 +1,45 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { css } from 'styled-components';
+
+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;
+  }
+`;
+const Nav = styled.div`
+  ${desktopCss}
+  ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.mediaQueries.md;
+}} {
+    ${mobileCss}
+  }
+
+  z-index: 5;
+`;
+
+export { Nav, desktopCss };
+//# sourceMappingURL=MainMenuStyles.mjs.map

package/dist/esm/main-menu/MainMenuStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainMenuStyles.mjs","sources":["../../../src/main-menu/MainMenuStyles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\n\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\n  z-index: 5;\n`\n"],"names":["desktopCss","css","mobileCss","Nav","styled","div","_ref","theme","mediaQueries","md"],"mappings":";;;AAEO,MAAMA,UAAU,GAAGC,GAAG,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAED,MAAMC,SAAS,GAAGD,GAAG,CAAA;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYE,MAAAA,GAAG,GAAGC,MAAM,CAACC,GAAG,CAAA;AAC7B,EAAA,EAAIL,UAAU,CAAA;AACd,EAAA,EAAIM,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,YAAY,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AACxC,IAAA,EAAMP,SAAS,CAAA;AACf;AACA;AACA;AACA;;;;"}

package/dist/esm/modal/Modal.mjs

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { ModalStyle, ModalBaseStyle, ModalSubtitleStyle, ModalContentStyle, ModalHeaderStyle, ModalBackStyle, ModalTitleStyle, ModalTitleIconStyle, ModalTitleTextStyle, ModalCloseStyle } from './ModalStyles.mjs';
+import { ModalOverlay } from './ModalOverlay.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    title,
+    titleIcon,
+    subtitle,
+    center = false,
+    extra,
+    open,
+    onClose,
+    onBack,
+    windowSize = 'sm',
+    windowProps,
+    ...rest
+  } = _ref;
+  const withTitleIcon = !!titleIcon;
+  const withSubtitle = !!subtitle;
+  const withCloseButton = !!onClose;
+  const withBackButton = !!onBack;
+  const modalHeader = /*#__PURE__*/jsxs(ModalHeaderStyle, {
+    $short: !title,
+    children: [withBackButton && /*#__PURE__*/jsx(ModalBackStyle, {
+      onClick: onBack
+    }), /*#__PURE__*/jsxs(ModalTitleStyle, {
+      $center: center,
+      $withTitleIcon: withTitleIcon,
+      $withCloseButton: withCloseButton,
+      $withBackButton: withBackButton,
+      children: [withTitleIcon && /*#__PURE__*/jsx(ModalTitleIconStyle, {
+        $center: center,
+        children: titleIcon
+      }), /*#__PURE__*/jsx(ModalTitleTextStyle, {
+        children: title
+      })]
+    }), withCloseButton && /*#__PURE__*/jsx(ModalCloseStyle, {
+      onClick: onClose
+    })]
+  });
+  return /*#__PURE__*/jsx(ModalOverlay, {
+    ref: ref,
+    in: open,
+    onClose: onClose,
+    onBack: onBack,
+    ...rest,
+    children: /*#__PURE__*/jsxs(ModalStyle, {
+      $center: center,
+      $size: windowSize,
+      ...windowProps,
+      children: [/*#__PURE__*/jsxs(ModalBaseStyle, {
+        children: [modalHeader, withSubtitle && /*#__PURE__*/jsx(ModalSubtitleStyle, {
+          children: subtitle
+        }), /*#__PURE__*/jsx(ModalContentStyle, {
+          children: children
+        })]
+      }), extra]
+    })
+  });
+});
+Modal.displayName = 'Modal';
+
+export { Modal };
+//# sourceMappingURL=Modal.mjs.map

package/dist/esm/modal/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../src/modal/Modal.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  ModalStyle,\n  ModalBaseStyle,\n  ModalHeaderStyle,\n  ModalTitleStyle,\n  ModalTitleIconStyle,\n  ModalTitleTextStyle,\n  ModalCloseStyle,\n  ModalContentStyle,\n  ModalBackStyle,\n  ModalSubtitleStyle,\n} from './ModalStyles.js'\nimport { ModalProps } from './types.js'\nimport { ModalOverlay } from './ModalOverlay.js'\n\nexport const Modal = forwardRef(\n  (\n    {\n      children,\n      title,\n      titleIcon,\n      subtitle,\n      center = false,\n      extra,\n      open,\n      onClose,\n      onBack,\n      windowSize = 'sm',\n      windowProps,\n      ...rest\n    }: ModalProps,\n    ref?: ForwardedRef<HTMLDivElement>,\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\n        ref={ref}\n        in={open}\n        onClose={onClose}\n        onBack={onBack}\n        {...rest}\n      >\n        <ModalStyle $center={center} $size={windowSize} {...windowProps}>\n          <ModalBaseStyle>\n            {modalHeader}\n            {withSubtitle && (\n              <ModalSubtitleStyle>{subtitle}</ModalSubtitleStyle>\n            )}\n            <ModalContentStyle>{children}</ModalContentStyle>\n          </ModalBaseStyle>\n          {extra}\n        </ModalStyle>\n      </ModalOverlay>\n    )\n  },\n)\nModal.displayName = 'Modal'\n"],"names":["Modal","forwardRef","_ref","ref","children","title","titleIcon","subtitle","center","extra","open","onClose","onBack","windowSize","windowProps","rest","withTitleIcon","withSubtitle","withCloseButton","withBackButton","modalHeader","_jsxs","ModalHeaderStyle","$short","_jsx","ModalBackStyle","onClick","ModalTitleStyle","$center","$withTitleIcon","$withCloseButton","$withBackButton","ModalTitleIconStyle","ModalTitleTextStyle","ModalCloseStyle","ModalOverlay","in","ModalStyle","$size","ModalBaseStyle","ModalSubtitleStyle","ModalContentStyle","displayName"],"mappings":";;;;;AAgBO,MAAMA,KAAK,gBAAGC,UAAU,CAC7B,CAAAC,IAAA,EAeEC,GAAkC,KAC/B;EAAA,IAfH;IACEC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,QAAQ;AACRC,IAAAA,MAAM,GAAG,KAAK;IACdC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,MAAM;AACNC,IAAAA,UAAU,GAAG,IAAI;IACjBC,WAAW;IACX,GAAGC,IAAAA;AACO,GAAC,GAAAb,IAAA,CAAA;AAGb,EAAA,MAAMc,aAAa,GAAG,CAAC,CAACV,SAAS,CAAA;AACjC,EAAA,MAAMW,YAAY,GAAG,CAAC,CAACV,QAAQ,CAAA;AAC/B,EAAA,MAAMW,eAAe,GAAG,CAAC,CAACP,OAAO,CAAA;AACjC,EAAA,MAAMQ,cAAc,GAAG,CAAC,CAACP,MAAM,CAAA;AAE/B,EAAA,MAAMQ,WAAW,gBACfC,IAAA,CAACC,gBAAgB,EAAA;IAACC,MAAM,EAAE,CAAClB,KAAM;AAAAD,IAAAA,QAAA,EAC9Be,CAAAA,cAAc,iBAAIK,GAAA,CAACC,cAAc,EAAA;AAACC,MAAAA,OAAO,EAAEd,MAAAA;AAAO,KAAE,CAAC,eACtDS,IAAA,CAACM,eAAe,EAAA;AACdC,MAAAA,OAAO,EAAEpB,MAAO;AAChBqB,MAAAA,cAAc,EAAEb,aAAc;AAC9Bc,MAAAA,gBAAgB,EAAEZ,eAAgB;AAClCa,MAAAA,eAAe,EAAEZ,cAAe;AAAAf,MAAAA,QAAA,EAE/BY,CAAAA,aAAa,iBACZQ,GAAA,CAACQ,mBAAmB,EAAA;AAACJ,QAAAA,OAAO,EAAEpB,MAAO;AAAAJ,QAAAA,QAAA,EAClCE,SAAAA;AAAS,OACS,CACtB,eACDkB,GAAA,CAACS,mBAAmB,EAAA;AAAA7B,QAAAA,QAAA,EAAEC,KAAAA;AAAK,OAAsB,CAAC,CAAA;AAAA,KACnC,CAAC,EACjBa,eAAe,iBAAIM,GAAA,CAACU,eAAe,EAAA;AAACR,MAAAA,OAAO,EAAEf,OAAAA;AAAQ,KAAE,CAAC,CAAA;AAAA,GACzC,CACnB,CAAA;EAED,oBACEa,GAAA,CAACW,YAAY,EAAA;AACXhC,IAAAA,GAAG,EAAEA,GAAI;AACTiC,IAAAA,EAAE,EAAE1B,IAAK;AACTC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,MAAM,EAAEA,MAAO;AAAA,IAAA,GACXG,IAAI;IAAAX,QAAA,eAERiB,IAAA,CAACgB,UAAU,EAAA;AAACT,MAAAA,OAAO,EAAEpB,MAAO;AAAC8B,MAAAA,KAAK,EAAEzB,UAAW;AAAA,MAAA,GAAKC,WAAW;MAAAV,QAAA,EAAA,cAC7DiB,IAAA,CAACkB,cAAc,EAAA;AAAAnC,QAAAA,QAAA,GACZgB,WAAW,EACXH,YAAY,iBACXO,GAAA,CAACgB,kBAAkB,EAAA;AAAApC,UAAAA,QAAA,EAAEG,QAAAA;AAAQ,SAAqB,CACnD,eACDiB,GAAA,CAACiB,iBAAiB,EAAA;AAAArC,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAoB,CAAC,CAAA;OACnC,CAAC,EAChBK,KAAK,CAAA;KACI,CAAA;AAAC,GACD,CAAC,CAAA;AAEnB,CACF,EAAC;AACDT,KAAK,CAAC0C,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/modal/ModalButton.mjs

@@ -0,0 +1,54 @@
+import { forwardRef, cloneElement } from 'react';
+import { ModalButtonStyle, ModalButtonContentStyle } from './ModalButtonStyles.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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'
+  }
+};
+const ModalButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size = 'md',
+    loading = false,
+    children,
+    icon,
+    ...rest
+  } = _ref;
+  const AdaptiveIconProps = icon.props.width || icon.props.height ? icon.props : {
+    ...iconSize[size]
+  };
+  const AdaptiveIcon = /*#__PURE__*/cloneElement(icon, AdaptiveIconProps);
+  return /*#__PURE__*/jsx(ModalButtonStyle, {
+    type: "button",
+    size: size,
+    loading: loading,
+    ref: ref,
+    icon: icon,
+    ...rest,
+    children: /*#__PURE__*/jsxs(ModalButtonContentStyle, {
+      children: [children, " ", AdaptiveIcon]
+    })
+  });
+});
+ModalButton.displayName = 'ModalButton';
+
+export { ModalButton };
+//# sourceMappingURL=ModalButton.mjs.map

package/dist/esm/modal/ModalButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButton.mjs","sources":["../../../src/modal/ModalButton.tsx"],"sourcesContent":["import { cloneElement, ForwardedRef, forwardRef } from 'react'\nimport {\n  ModalButtonStyle,\n  ModalButtonContentStyle,\n} from './ModalButtonStyles.js'\nimport { ModalButtonIconProps } from './types.js'\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\nexport const ModalButton = forwardRef(\n  (\n    {\n      size = 'md',\n      loading = false,\n      children,\n      icon,\n      ...rest\n    }: ModalButtonIconProps,\n    ref?: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    const AdaptiveIconProps =\n      icon.props.width || icon.props.height ? icon.props : { ...iconSize[size] }\n    const AdaptiveIcon = cloneElement(icon, AdaptiveIconProps)\n\n    return (\n      <ModalButtonStyle\n        type='button'\n        size={size}\n        loading={loading}\n        ref={ref}\n        icon={icon}\n        {...rest}\n      >\n        <ModalButtonContentStyle>\n          {children} {AdaptiveIcon}\n        </ModalButtonContentStyle>\n      </ModalButtonStyle>\n    )\n  },\n)\nModalButton.displayName = 'ModalButton'\n"],"names":["iconSize","xxs","width","height","xs","sm","md","lg","ModalButton","forwardRef","_ref","ref","size","loading","children","icon","rest","AdaptiveIconProps","props","AdaptiveIcon","cloneElement","_jsx","ModalButtonStyle","type","_jsxs","ModalButtonContentStyle","displayName"],"mappings":";;;;AAOA,MAAMA,QAAQ,GAAG;AACfC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDC,EAAAA,EAAE,EAAE;AACFF,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDE,EAAAA,EAAE,EAAE;AACFH,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDG,EAAAA,EAAE,EAAE;AACFJ,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDI,EAAAA,EAAE,EAAE;AACFL,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,MAAA;AACV,GAAA;AACF,CAAC,CAAA;AAEM,MAAMK,WAAW,gBAAGC,UAAU,CACnC,CAAAC,IAAA,EAQEC,GAAqC,KAClC;EAAA,IARH;AACEC,IAAAA,IAAI,GAAG,IAAI;AACXC,IAAAA,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,IAAI;IACJ,GAAGC,IAAAA;AACiB,GAAC,GAAAN,IAAA,CAAA;AAGvB,EAAA,MAAMO,iBAAiB,GACrBF,IAAI,CAACG,KAAK,CAAChB,KAAK,IAAIa,IAAI,CAACG,KAAK,CAACf,MAAM,GAAGY,IAAI,CAACG,KAAK,GAAG;IAAE,GAAGlB,QAAQ,CAACY,IAAI,CAAA;GAAG,CAAA;AAC5E,EAAA,MAAMO,YAAY,gBAAGC,YAAY,CAACL,IAAI,EAAEE,iBAAiB,CAAC,CAAA;EAE1D,oBACEI,GAAA,CAACC,gBAAgB,EAAA;AACfC,IAAAA,IAAI,EAAC,QAAQ;AACbX,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,GAAG,EAAEA,GAAI;AACTI,IAAAA,IAAI,EAAEA,IAAK;AAAA,IAAA,GACPC,IAAI;IAAAF,QAAA,eAERU,IAAA,CAACC,uBAAuB,EAAA;AAAAX,MAAAA,QAAA,EACrBA,CAAAA,QAAQ,EAAC,GAAC,EAACK,YAAY,CAAA;KACD,CAAA;AAAC,GACV,CAAC,CAAA;AAEvB,CACF,EAAC;AACDX,WAAW,CAACkB,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/modal/ModalButtonStyles.mjs

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

package/dist/esm/modal/ModalButtonStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalButtonStyles.mjs","sources":["../../../src/modal/ModalButtonStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\nimport { Button } from '../button/index.js'\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  background-color: ${({ active }) =>\n    active ? 'rgba(0, 163, 255, 0.1);' : `var(--lido-color-background)`};\n  color: var(--lido-color-text);\n\n  :not(:disabled):hover,\n  :focus-visible {\n    background-color: rgb(0 163 255 / 10%);\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","styled","Button","_ref","active","_ref2","ModalButtonContentStyle","span"],"mappings":";;;;MAGaA,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAA;AAC9C,UAAA,EAAYC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OACnBC,MAAM,GACF,CAAqC,mCAAA,CAAA,GACrC,CAAwC,sCAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AAChD,oBAAA,EAAsBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,MAAAA;AAAO,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAC7BD,MAAM,GAAG,yBAAyB,GAAG,CAA8B,4BAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYE,MAAAA,uBAAuB,GAAGL,MAAM,CAACM,IAAI,CAAA;AAClD;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/modal/ModalExtra.mjs

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { ModalExtraStyle } from './ModalExtraStyles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const ModalExtra = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(ModalExtraStyle, {
+    ...props,
+    ref: ref
+  });
+});
+ModalExtra.displayName = 'ModalExtra';
+
+export { ModalExtra };
+//# sourceMappingURL=ModalExtra.mjs.map

package/dist/esm/modal/ModalExtra.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalExtra.mjs","sources":["../../../src/modal/ModalExtra.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { ModalExtraStyle } from './ModalExtraStyles.js'\nimport { ModalExtraProps } from './types.js'\n\nexport const ModalExtra = forwardRef(\n  (props: ModalExtraProps, ref?: ForwardedRef<HTMLDivElement>) => {\n    return <ModalExtraStyle {...props} ref={ref} />\n  },\n)\nModalExtra.displayName = 'ModalExtra'\n"],"names":["ModalExtra","forwardRef","props","ref","_jsx","ModalExtraStyle","displayName"],"mappings":";;;;AAIO,MAAMA,UAAU,gBAAGC,UAAU,CAClC,CAACC,KAAsB,EAAEC,GAAkC,KAAK;EAC9D,oBAAOC,GAAA,CAACC,eAAe,EAAA;AAAA,IAAA,GAAKH,KAAK;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAE,CAAC,CAAA;AACjD,CACF,EAAC;AACDH,UAAU,CAACM,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/modal/ModalExtraStyles.mjs

@@ -0,0 +1,49 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+
+const ModalExtraStyle = styled.div`
+  margin-top: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return -theme.borderRadiusesMap.xl;
+}}px;
+  color: var(--lido-color-accentContrast);
+  background: var(--lido-color-accent);
+  padding: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spaceMap.xxl;
+}}px;
+  padding-top: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.borderRadiusesMap.xl + theme.spaceMap.xxl;
+}}px;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.mediaQueries.md;
+}} {
+    padding: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.spaceMap.lg;
+}}px;
+    padding-top: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadiusesMap.xl + theme.spaceMap.lg;
+}}px;
+  }
+`;
+
+export { ModalExtraStyle };
+//# sourceMappingURL=ModalExtraStyles.mjs.map

package/dist/esm/modal/ModalExtraStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalExtraStyles.mjs","sources":["../../../src/modal/ModalExtraStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\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","_ref","theme","borderRadiusesMap","xl","_ref2","spaceMap","xxl","_ref3","_ref4","mediaQueries","md","_ref5","lg","_ref6"],"mappings":";;AAEaA,MAAAA,eAAe,GAAGC,MAAM,CAACC,GAAG,CAAA;AACzC,cAAA,EAAgBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAK,CAACC,KAAK,CAACC,iBAAiB,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AAC1D;AACA;AACA,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,KAAAA;AAAM,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKH,KAAK,CAACI,QAAQ,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AAC9C,eAAA,EAAiBC,KAAA,IAAA;EAAA,IAAC;AAAEN,IAAAA,KAAAA;AAAM,GAAC,GAAAM,KAAA,CAAA;EAAA,OACvBN,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAGF,KAAK,CAACI,QAAQ,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACnD;AACA;AACA;AACA,EAAA,EAAIE,KAAA,IAAA;EAAA,IAAC;AAAEP,IAAAA,KAAAA;AAAM,GAAC,GAAAO,KAAA,CAAA;AAAA,EAAA,OAAKP,KAAK,CAACQ,YAAY,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AACxC,aAAA,EAAeC,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,KAAAA;AAAM,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OAAKV,KAAK,CAACI,QAAQ,CAACO,EAAE,CAAA;AAAA,CAAA,CAAA;AAC/C,iBAAA,EAAmBC,KAAA,IAAA;EAAA,IAAC;AAAEZ,IAAAA,KAAAA;AAAM,GAAC,GAAAY,KAAA,CAAA;EAAA,OACvBZ,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAGF,KAAK,CAACI,QAAQ,CAACO,EAAE,CAAA;AAAA,CAAA,CAAA;AACpD;AACA;;;;"}

package/dist/esm/modal/ModalOverlay.mjs

@@ -0,0 +1,63 @@
+import { forwardRef } from 'react';
+import ReactDOM from 'react-dom';
+import '../utils/styled-components-wrapper.mjs';
+import { useEscape } from '../hooks/useEscape.mjs';
+import { useLockScroll } from '../hooks/useLockScroll.mjs';
+import { useMergeRefs } from '../hooks/useMergeRefs.mjs';
+import '../theme/cookie-theme-provider.mjs';
+import '../theme/theme-provider.mjs';
+import { jsx } from 'react/jsx-runtime';
+import '../theme/document-head-contents/element-theme-colors.mjs';
+import ModalRoot from '../utils/modalRoot.mjs';
+import '../utils/cookies-client-side.mjs';
+import '../theme/constants.mjs';
+import '../theme/utils/set-theme-cookie.mjs';
+import '../theme/themes.mjs';
+import { withTransition } from '../transition/withTransition.mjs';
+import { ModalPortalStyle, ModalOverflowStyle, ModalContentStyle } from './ModalOverlayStyles.mjs';
+import { useModalFocus } from './useModalFocus.mjs';
+import { useModalClose } from './useModalClose.mjs';
+
+const ModalOverlay = withTransition(
+/*#__PURE__*/
+// eslint-disable-next-line react/display-name
+forwardRef((_ref, externalRef) => {
+  let {
+    onClose,
+    onBack,
+    duration,
+    transitionStatus,
+    ...rest
+  } = _ref;
+  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__*/jsx(ModalPortalStyle, {
+    $closable: closable,
+    $duration: duration,
+    $transition: transitionStatus,
+    onClick: handleClick,
+    children: /*#__PURE__*/jsx(ModalOverflowStyle, {
+      children: /*#__PURE__*/jsx(ModalContentStyle, {
+        tabIndex: -1,
+        role: "dialog",
+        "aria-modal": "true",
+        ref: mergedRef,
+        $transition: transitionStatus,
+        $duration: duration,
+        ...rest
+      })
+    })
+  }), ModalRoot);
+}));
+ModalOverlay.displayName = 'ModalOverlay';
+
+export { ModalOverlay };
+//# sourceMappingURL=ModalOverlay.mjs.map

package/dist/esm/modal/ModalOverlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlay.mjs","sources":["../../../src/modal/ModalOverlay.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport { useMergeRefs, useEscape, useLockScroll } from '../hooks/index.js'\nimport { withTransition } from '../transition/index.js'\nimport { modalRoot } from '../utils/index.js'\nimport { ModalOverlayInnerProps } from './types.js'\nimport {\n  ModalPortalStyle,\n  ModalOverflowStyle,\n  ModalContentStyle,\n} from './ModalOverlayStyles.js'\nimport { useModalFocus } from './useModalFocus.js'\nimport { useModalClose } from './useModalClose.js'\n\nexport const ModalOverlay = withTransition(\n  // eslint-disable-next-line react/display-name\n  forwardRef(\n    (\n      {\n        onClose,\n        onBack,\n        duration,\n        transitionStatus,\n        ...rest\n      }: ModalOverlayInnerProps,\n      externalRef?: ForwardedRef<HTMLDivElement>,\n    ) => {\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  ),\n)\nModalOverlay.displayName = 'ModalOverlay'\n"],"names":["ModalOverlay","withTransition","forwardRef","_ref","externalRef","onClose","onBack","duration","transitionStatus","rest","closable","useEscape","useLockScroll","controlRef","useModalFocus","ref","closeRef","handleClick","useModalClose","mergedRef","useMergeRefs","modalRoot","ReactDOM","createPortal","_jsx","ModalPortalStyle","$closable","$duration","$transition","onClick","children","ModalOverflowStyle","ModalContentStyle","tabIndex","role","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAY,GAAGC,cAAc;AAAA;AACxC;AACAC,UAAU,CACR,CAAAC,IAAA,EAQEC,WAA0C,KACvC;EAAA,IARH;IACEC,OAAO;IACPC,MAAM;IACNC,QAAQ;IACRC,gBAAgB;IAChB,GAAGC,IAAAA;AACmB,GAAC,GAAAN,IAAA,CAAA;AAGzB,EAAA,MAAMO,QAAQ,GAAG,CAAC,CAACL,OAAO,CAAA;EAE1BM,SAAS,CAACN,OAAO,CAAC,CAAA;AAClBO,EAAAA,aAAa,EAAE,CAAA;AAEf,EAAA,MAAMC,UAAU,GAAGC,aAAa,EAAE,CAAA;EAClC,MAAM;AAAEC,IAAAA,GAAG,EAAEC,QAAQ;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAGC,aAAa,CAACb,OAAO,CAAC,CAAA;EAE7D,MAAMc,SAAS,GAAGC,YAAY,CAAC,CAACP,UAAU,EAAEG,QAAQ,EAAEZ,WAAW,CAAC,CAAC,CAAA;AAEnE,EAAA,IAAI,CAACiB,SAAS,EAAE,OAAO,IAAI,CAAA;AAE3B,EAAA,oBAAOC,QAAQ,CAACC,YAAY,cAC1BC,GAAA,CAACC,gBAAgB,EAAA;AACfC,IAAAA,SAAS,EAAEhB,QAAS;AACpBiB,IAAAA,SAAS,EAAEpB,QAAS;AACpBqB,IAAAA,WAAW,EAAEpB,gBAAiB;AAC9BqB,IAAAA,OAAO,EAAEZ,WAAY;IAAAa,QAAA,eAErBN,GAAA,CAACO,kBAAkB,EAAA;MAAAD,QAAA,eACjBN,GAAA,CAACQ,iBAAiB,EAAA;QAChBC,QAAQ,EAAE,CAAC,CAAE;AACbC,QAAAA,IAAI,EAAC,QAAQ;AACb,QAAA,YAAA,EAAW,MAAM;AACjBnB,QAAAA,GAAG,EAAEI,SAAU;AACfS,QAAAA,WAAW,EAAEpB,gBAAiB;AAC9BmB,QAAAA,SAAS,EAAEpB,QAAS;QAAA,GAChBE,IAAAA;OACL,CAAA;KACiB,CAAA;GACJ,CAAC,EACnBY,SACF,CAAC,CAAA;AACH,CACF,CACF,EAAC;AACDrB,YAAY,CAACmC,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/modal/ModalOverlayStyles.mjs

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

package/dist/esm/modal/ModalOverlayStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlayStyles.mjs","sources":["../../../src/modal/ModalOverlayStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\nimport { TransitionInnerProps } from '../transition/index.js'\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  inset: 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  inset: 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":["getOpacity","_ref","$transition","includes","ModalPortalStyle","styled","div","_ref2","$closable","_ref3","$duration","ModalOverflowStyle","getTransform","_ref4","ModalContentStyle","_ref5","theme","spaceMap","lg","_ref6"],"mappings":";;AAQA,MAAMA,UAAU,GAAGC,IAAA,IAAsC;EAAA,IAArC;AAAEC,IAAAA,WAAAA;AAA6B,GAAC,GAAAD,IAAA,CAAA;AAClD,EAAA,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAACE,QAAQ,CAACD,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAC5D,CAAC,CAAA;AAEYE,MAAAA,gBAAgB,GAAGC,MAAM,CAACC,GAEtC,CAAA;AACD;AACA;AACA;AACA;AACA,UAAA,EAAYC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAAA,CAAC,CAAA;AAClE,sBAAA,EAAwBC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,SAAS,CAAA;AAAA,CAAA,CAAA;AACpD,WAAA,EAAaV,UAAU,CAAA;AACvB,EAAC;AAEYW,MAAAA,kBAAkB,GAAGN,MAAM,CAACC,GAAG,CAAA;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAED,MAAMM,YAAY,GAAGC,KAAA,IAAsC;EAAA,IAArC;AAAEX,IAAAA,WAAAA;AAA6B,GAAC,GAAAW,KAAA,CAAA;AACpD,EAAA,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAACV,QAAQ,CAACD,WAAW,CAAC,GAC9C,iBAAiB,GACjB,eAAe,CAAA;AACrB,CAAC,CAAA;AAEYY,MAAAA,iBAAiB,GAAGT,MAAM,CAACC,GAAoB,CAAA;AAC5D;AACA;AACA,WAAA,EAAaS,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AAC7C;AACA;AACA;AACA,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAET,IAAAA,SAAAA;AAAU,GAAC,GAAAS,KAAA,CAAA;AAAA,EAAA,OAAKT,SAAS,CAAA;AAAA,CAAA,CAAA;AACtD,aAAA,EAAeE,YAAY,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;;;;"}