cakeinpanic-ui 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlay.js","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,6BAAc;AAAA;AACxC;AACAC,gBAAU,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,mBAAS,CAACN,OAAO,CAAC,CAAA;AAClBO,EAAAA,2BAAa,EAAE,CAAA;AAEf,EAAA,MAAMC,UAAU,GAAGC,2BAAa,EAAE,CAAA;EAClC,MAAM;AAAEC,IAAAA,GAAG,EAAEC,QAAQ;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAGC,2BAAa,CAACb,OAAO,CAAC,CAAA;EAE7D,MAAMc,SAAS,GAAGC,yBAAY,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,cAAA,CAACC,mCAAgB,EAAA;AACfC,IAAAA,SAAS,EAAEhB,QAAS;AACpBiB,IAAAA,SAAS,EAAEpB,QAAS;AACpBqB,IAAAA,WAAW,EAAEpB,gBAAiB;AAC9BqB,IAAAA,OAAO,EAAEZ,WAAY;IAAAa,QAAA,eAErBN,cAAA,CAACO,qCAAkB,EAAA;MAAAD,QAAA,eACjBN,cAAA,CAACQ,oCAAiB,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/cjs/modal/ModalOverlayStyles.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+
+const getOpacity = _ref => {
+  let {
+    $transition
+  } = _ref;
+  return ['exiting', 'exited'].includes($transition) ? 0 : 1;
+};
+const ModalPortalStyle = styledComponentsWrapper.default.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 = styledComponentsWrapper.default.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 = styledComponentsWrapper.default.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;
+  }
+`;
+
+exports.ModalContentStyle = ModalContentStyle;
+exports.ModalOverflowStyle = ModalOverflowStyle;
+exports.ModalPortalStyle = ModalPortalStyle;
+//# sourceMappingURL=ModalOverlayStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOverlayStyles.js","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,+BAAM,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,+BAAM,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,+BAAM,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;;;;;;"}

package/dist/cjs/modal/ModalStyles.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const index = require('../icons/index.js');
+require('../button/Button.js');
+const ButtonIcon = require('../button/ButtonIcon.js');
+const jsxRuntime = require('react/jsx-runtime');
+const _styled = require('styled-components');
+
+const ModalWindowSizesMap = {
+  sm: _styled.css`
+    width: 432px;
+  `,
+  md: _styled.css`
+    width: 520px;
+  `,
+  lg: _styled.css`
+    width: 960px;
+  `
+};
+const ModalStyle = styledComponentsWrapper.default.div`
+  ${_ref => {
+  let {
+    theme: {
+      fontSizesMap,
+      borderRadiusesMap,
+      colors,
+      boxShadows
+    },
+    $center,
+    $size
+  } = _ref;
+  return _styled.css`
+    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};
+
+    ${ModalWindowSizesMap[$size]}
+  `;
+}}
+`;
+const ModalBaseStyle = styledComponentsWrapper.default.div`
+  ${_ref2 => {
+  let {
+    theme: {
+      colors
+    }
+  } = _ref2;
+  return _styled.css`
+    color: ${colors.text};
+    background: ${colors.foreground};
+    border-radius: inherit;
+    position: relative;
+    z-index: 1;
+  `;
+}}
+`;
+const ModalHeaderStyle = styledComponentsWrapper.default.div`
+  ${_ref3 => {
+  let {
+    theme: {
+      spaceMap,
+      fontSizesMap,
+      mediaQueries
+    },
+    $short
+  } = _ref3;
+  return _styled.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 = styledComponentsWrapper.default.div`
+  ${_ref4 => {
+  let {
+    theme: {
+      fontSizesMap,
+      spaceMap,
+      mediaQueries
+    },
+    $center,
+    $withBackButton,
+    $withCloseButton,
+    $withTitleIcon
+  } = _ref4;
+  return _styled.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 = styledComponentsWrapper.default.div`
+  ${_ref5 => {
+  let {
+    theme: {
+      spaceMap
+    },
+    $center
+  } = _ref5;
+  return _styled.css`
+    display: ${$center ? 'flex' : 'block'};
+    justify-content: ${$center ? 'center' : 'flex-start'};
+    line-height: 0.7;
+    margin-bottom: ${spaceMap.md}px;
+  `;
+}}
+`;
+const ModalTitleTextStyle = styledComponentsWrapper.default.div`
+  margin: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.spaceMap.xs;
+}}px 0;
+`;
+const ModalSubtitleStyle = styledComponentsWrapper.default.div`
+  ${_ref7 => {
+  let {
+    theme: {
+      colors,
+      fontSizesMap,
+      spaceMap,
+      mediaQueries
+    }
+  } = _ref7;
+  return _styled.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 = styledComponentsWrapper.default.div`
+  ${_ref8 => {
+  let {
+    theme: {
+      spaceMap,
+      mediaQueries
+    }
+  } = _ref8;
+  return _styled.css`
+    padding: 0 ${spaceMap.xxl}px ${spaceMap.xxl}px;
+
+    ${mediaQueries.md} {
+      padding: 0 ${spaceMap.lg}px ${spaceMap.lg}px;
+    }
+  `;
+}}
+`;
+const ModalCloseStyle = styledComponentsWrapper.default(ButtonIcon.ButtonIcon).attrs({
+  icon: /*#__PURE__*/jsxRuntime.jsx(index.Close, {}),
+  color: 'secondary',
+  variant: 'ghost',
+  size: 'xs'
+})`
+  margin: 0 -10px 0 0;
+  color: var(--lido-color-textSecondary);
+  flex-shrink: 0;
+  border-radius: 50%;
+`;
+const ModalBackStyle = styledComponentsWrapper.default(ButtonIcon.ButtonIcon).attrs({
+  icon: /*#__PURE__*/jsxRuntime.jsx(index.ArrowBack, {}),
+  color: 'secondary',
+  variant: 'ghost',
+  size: 'xs'
+})`
+  ${_ref9 => {
+  let {
+    theme: {
+      colors,
+      spaceMap
+    }
+  } = _ref9;
+  return _styled.css`
+    color: ${colors.textSecondary};
+    flex-shrink: 0;
+    margin: 0 ${spaceMap.sm}px 0 -6px;
+    border-radius: 50%;
+    background: transparent !important;
+  `;
+}}
+`;
+
+exports.ModalBackStyle = ModalBackStyle;
+exports.ModalBaseStyle = ModalBaseStyle;
+exports.ModalCloseStyle = ModalCloseStyle;
+exports.ModalContentStyle = ModalContentStyle;
+exports.ModalHeaderStyle = ModalHeaderStyle;
+exports.ModalStyle = ModalStyle;
+exports.ModalSubtitleStyle = ModalSubtitleStyle;
+exports.ModalTitleIconStyle = ModalTitleIconStyle;
+exports.ModalTitleStyle = ModalTitleStyle;
+exports.ModalTitleTextStyle = ModalTitleTextStyle;
+exports.ModalWindowSizesMap = ModalWindowSizesMap;
+//# sourceMappingURL=ModalStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalStyles.js","sources":["../../../src/modal/ModalStyles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { Close, ArrowBack } from '../icons/index.js'\nimport { ButtonIcon } from '../button/index.js'\nimport { ModalWindowSizes } from './types.js'\n\nexport const ModalWindowSizesMap = {\n  sm: css`\n    width: 432px;\n  `,\n  md: css`\n    width: 520px;\n  `,\n  lg: css`\n    width: 960px;\n  `,\n}\n\nexport const ModalStyle = styled.div<{\n  $center: boolean\n  $size: ModalWindowSizes\n}>`\n  ${({\n    theme: { fontSizesMap, borderRadiusesMap, colors, boxShadows },\n    $center,\n    $size,\n  }) => css`\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    ${ModalWindowSizesMap[$size]}\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":["ModalWindowSizesMap","sm","css","md","lg","ModalStyle","styled","div","_ref","theme","fontSizesMap","borderRadiusesMap","colors","boxShadows","$center","$size","xs","xl","xxl","shadowDark","ModalBaseStyle","_ref2","text","foreground","ModalHeaderStyle","_ref3","spaceMap","mediaQueries","$short","ModalTitleStyle","_ref4","$withBackButton","$withCloseButton","$withTitleIcon","ModalTitleIconStyle","_ref5","ModalTitleTextStyle","_ref6","ModalSubtitleStyle","_ref7","textSecondary","ModalContentStyle","_ref8","ModalCloseStyle","ButtonIcon","attrs","icon","_jsx","Close","color","variant","size","ModalBackStyle","ArrowBack","_ref9"],"mappings":";;;;;;;;;;;AAKO,MAAMA,mBAAmB,GAAG;AACjCC,EAAAA,EAAE,EAAEC,WAAG,CAAA;AACT;AACA,EAAG,CAAA;AACDC,EAAAA,EAAE,EAAED,WAAG,CAAA;AACT;AACA,EAAG,CAAA;AACDE,EAAAA,EAAE,EAAEF,WAAG,CAAA;AACT;AACA,EAAA,CAAA;AACA,EAAC;AAEYG,MAAAA,UAAU,GAAGC,+BAAM,CAACC,GAG/B,CAAA;AACF,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AACDC,IAAAA,KAAK,EAAE;MAAEC,YAAY;MAAEC,iBAAiB;MAAEC,MAAM;AAAEC,MAAAA,UAAAA;KAAY;IAC9DC,OAAO;AACPC,IAAAA,KAAAA;AACF,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,OAAKN,WAAG,CAAA;AACX;AACA;AACA,eAAiBQ,EAAAA,YAAY,CAACM,EAAE,CAAA;AAChC;AACA,gBAAA,EAAkBF,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC7C,mBAAqBH,EAAAA,iBAAiB,CAACM,EAAE,CAAA;AACzC,gBAAA,EAAkBJ,UAAU,CAACK,GAAG,CAAIN,CAAAA,EAAAA,MAAM,CAACO,UAAU,CAAA;AACrD;AACA,IAAMnB,EAAAA,mBAAmB,CAACe,KAAK,CAAC,CAAA;AAChC,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYK,MAAAA,cAAc,GAAGd,+BAAM,CAACC,GAAG,CAAA;AACxC,EAAA,EAAIc,KAAA,IAAA;EAAA,IAAC;AAAEZ,IAAAA,KAAK,EAAE;AAAEG,MAAAA,MAAAA;AAAO,KAAA;AAAE,GAAC,GAAAS,KAAA,CAAA;AAAA,EAAA,OAAKnB,WAAG,CAAA;AAClC,WAAaU,EAAAA,MAAM,CAACU,IAAI,CAAA;AACxB,gBAAkBV,EAAAA,MAAM,CAACW,UAAU,CAAA;AACnC;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYC,MAAAA,gBAAgB,GAAGlB,+BAAM,CAACC,GAErC,CAAA;AACF,EAAA,EAAIkB,KAAA,IAAA;EAAA,IAAC;AAAEhB,IAAAA,KAAK,EAAE;MAAEiB,QAAQ;MAAEhB,YAAY;AAAEiB,MAAAA,YAAAA;KAAc;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,OAAKvB,WAAG,CAAA;AACxE;AACA;AACA;AACA,mBAAA,EAAqB0B,MAAM,GAAG,CAACF,QAAQ,CAACvB,EAAE,GAAG,CAAC,CAAA;AAC9C,aAAA,EAAeuB,QAAQ,CAACT,EAAE,CAAMS,GAAAA,EAAAA,QAAQ,CAACR,GAAG,CAAA;AAC5C,eAAiBR,EAAAA,YAAY,CAACP,EAAE,CAAA;AAChC;AACA;AACA,IAAMwB,EAAAA,YAAY,CAACxB,EAAE,CAAA;AACrB,eAAiBuB,EAAAA,QAAQ,CAACtB,EAAE,CAAA;AAC5B;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYyB,MAAAA,eAAe,GAAGvB,+BAAM,CAACC,GAKpC,CAAA;AACF,EAAA,EAAIuB,KAAA,IAAA;EAAA,IAAC;AACDrB,IAAAA,KAAK,EAAE;MAAEC,YAAY;MAAEgB,QAAQ;AAAEC,MAAAA,YAAAA;KAAc;IAC/Cb,OAAO;IACPiB,eAAe;IACfC,gBAAgB;AAChBC,IAAAA,cAAAA;AACF,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,OAAK5B,WAAG,CAAA;AACX,eAAiBQ,EAAAA,YAAY,CAACT,EAAE,CAAA;AAChC;AACA;AACA,iBAAmBa,EAAAA,OAAO,IAAI,CAACiB,eAAe,GAAGL,QAAQ,CAACR,GAAG,GAAG,GAAG,CAAA;AACnE,kBAAoBJ,EAAAA,OAAO,IAAI,CAACkB,gBAAgB,GAAGN,QAAQ,CAACR,GAAG,GAAG,GAAG,CAAA;AACrE,iBAAA,EAAmBe,cAAc,GAAGP,QAAQ,CAACzB,EAAE,GAAG,GAAG,CAAA;AACrD;AACA,mBAAqByB,EAAAA,QAAQ,CAACzB,EAAE,CAAA;AAChC;AACA;AACA;AACA,IAAM0B,EAAAA,YAAY,CAACxB,EAAE,CAAA;AACrB,qBAAuBuB,EAAAA,QAAQ,CAACV,EAAE,CAAA;AAClC;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYkB,MAAAA,mBAAmB,GAAG5B,+BAAM,CAACC,GAExC,CAAA;AACF,EAAA,EAAI4B,KAAA,IAAA;EAAA,IAAC;AAAE1B,IAAAA,KAAK,EAAE;AAAEiB,MAAAA,QAAAA;KAAU;AAAEZ,IAAAA,OAAAA;AAAQ,GAAC,GAAAqB,KAAA,CAAA;AAAA,EAAA,OAAKjC,WAAG,CAAA;AAC7C,aAAA,EAAeY,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;AACzC,qBAAA,EAAuBA,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAA;AACxD;AACA,mBAAqBY,EAAAA,QAAQ,CAACvB,EAAE,CAAA;AAChC,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYiC,MAAAA,mBAAmB,GAAG9B,+BAAM,CAACC,GAAG,CAAA;AAC7C,UAAA,EAAY8B,KAAA,IAAA;EAAA,IAAC;AAAE5B,IAAAA,KAAAA;AAAM,GAAC,GAAA4B,KAAA,CAAA;AAAA,EAAA,OAAK5B,KAAK,CAACiB,QAAQ,CAACV,EAAE,CAAA;AAAA,CAAA,CAAA;AAC5C,EAAC;AAEYsB,MAAAA,kBAAkB,GAAGhC,+BAAM,CAACC,GAAG,CAAA;AAC5C,EAAA,EAAIgC,KAAA,IAAA;EAAA,IAAC;AAAE9B,IAAAA,KAAK,EAAE;MAAEG,MAAM;MAAEF,YAAY;MAAEgB,QAAQ;AAAEC,MAAAA,YAAAA;AAAa,KAAA;AAAE,GAAC,GAAAY,KAAA,CAAA;AAAA,EAAA,OAAKrC,WAAG,CAAA;AACxE,WAAaU,EAAAA,MAAM,CAAC4B,aAAa,CAAA;AACjC,eAAiB9B,EAAAA,YAAY,CAACM,EAAE,CAAA;AAChC;AACA;AACA,iBAAmBU,EAAAA,QAAQ,CAACT,EAAE,CAAA;AAC9B,eAAA,EAAiBS,QAAQ,CAACR,GAAG,CAAMQ,GAAAA,EAAAA,QAAQ,CAACzB,EAAE,CAAA;AAC9C;AACA,IAAM0B,EAAAA,YAAY,CAACxB,EAAE,CAAA;AACrB,oBAAsBuB,EAAAA,QAAQ,CAACT,EAAE,CAAA;AACjC,qBAAuBS,EAAAA,QAAQ,CAACT,EAAE,CAAA;AAClC;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEYwB,MAAAA,iBAAiB,GAAGnC,+BAAM,CAACC,GAAG,CAAA;AAC3C,EAAA,EAAImC,KAAA,IAAA;EAAA,IAAC;AAAEjC,IAAAA,KAAK,EAAE;MAAEiB,QAAQ;AAAEC,MAAAA,YAAAA;AAAa,KAAA;AAAE,GAAC,GAAAe,KAAA,CAAA;AAAA,EAAA,OAAKxC,WAAG,CAAA;AAClD,eAAA,EAAiBwB,QAAQ,CAACR,GAAG,CAAMQ,GAAAA,EAAAA,QAAQ,CAACR,GAAG,CAAA;AAC/C;AACA,IAAMS,EAAAA,YAAY,CAACxB,EAAE,CAAA;AACrB,iBAAA,EAAmBuB,QAAQ,CAACtB,EAAE,CAAMsB,GAAAA,EAAAA,QAAQ,CAACtB,EAAE,CAAA;AAC/C;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH,EAAC;AAEM,MAAMuC,eAAe,GAAGrC,+BAAM,CAACsC,qBAAU,CAAC,CAACC,KAAK,CAAC;AACtDC,EAAAA,IAAI,eAAEC,cAAA,CAACC,WAAK,IAAE,CAAC;AACfC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,OAAO,EAAE,OAAO;AAChBC,EAAAA,IAAI,EAAE,IAAA;AACR,CAAC,CAAC,CAAA;AACF;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMC,cAAc,GAAG9C,+BAAM,CAACsC,qBAAU,CAAC,CAACC,KAAK,CAAC;AACrDC,EAAAA,IAAI,eAAEC,cAAA,CAACM,eAAS,IAAE,CAAC;AACnBJ,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,OAAO,EAAE,OAAO;AAChBC,EAAAA,IAAI,EAAE,IAAA;AACR,CAAC,CAAC,CAAA;AACF,EAAA,EAAIG,KAAA,IAAA;EAAA,IAAC;AAAE7C,IAAAA,KAAK,EAAE;MAAEG,MAAM;AAAEc,MAAAA,QAAAA;AAAS,KAAA;AAAE,GAAC,GAAA4B,KAAA,CAAA;AAAA,EAAA,OAAKpD,WAAG,CAAA;AAC5C,WAAaU,EAAAA,MAAM,CAAC4B,aAAa,CAAA;AACjC;AACA,cAAgBd,EAAAA,QAAQ,CAACzB,EAAE,CAAA;AAC3B;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAA,CAAA;AACH;;;;;;;;;;;;;;"}

package/dist/cjs/modal/constants.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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^="-"])'];
+
+exports.FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/modal/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":";;;;AAAO,MAAMA,kBAAkB,GAAG,CAChC,SAAS,EACT,YAAY,EACZ,+DAA+D,EAC/D,2CAA2C,EAC3C,6CAA6C,EAC7C,2CAA2C,EAC3C,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,iCAAiC;;;;"}

package/dist/cjs/modal/types.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+let ModalWindowSize = /*#__PURE__*/function (ModalWindowSize) {
+  ModalWindowSize[ModalWindowSize["sm"] = 0] = "sm";
+  ModalWindowSize[ModalWindowSize["md"] = 1] = "md";
+  ModalWindowSize[ModalWindowSize["lg"] = 2] = "lg";
+  return ModalWindowSize;
+}({});
+
+exports.ModalWindowSize = ModalWindowSize;
+//# sourceMappingURL=types.js.map

package/dist/cjs/modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/modal/types.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react'\nimport { LidoComponentProps } from '../utils/index.js'\nimport {\n  TransitionWrapperProps,\n  TransitionInnerProps,\n} from '../transition/index.js'\nimport { ButtonProps } from '../button/index.js'\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?: ReactNode\n  titleIcon?: ReactNode\n  subtitle?: ReactNode\n  extra?: ReactNode\n  center?: boolean\n  open?: boolean\n  windowSize?: ModalWindowSizes\n  windowProps?: ModalWindowProps\n} & Omit<ModalOverlayProps, 'title' | 'in'>\n\nexport enum ModalWindowSize {\n  sm,\n  md,\n  lg,\n}\nexport type ModalWindowSizes = keyof typeof ModalWindowSize\nexport type ModalWindowProps = LidoComponentProps<'div'>\n\nexport type ModalExtraProps = LidoComponentProps<'div'>\n\nexport type ModalButtonIconProps = {\n  icon: ReactElement\n} & ButtonProps\n"],"names":["ModalWindowSize"],"mappings":";;;;AA8BYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;AAAfA,EAAAA,eAAe,CAAfA,eAAe,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAfA,EAAAA,eAAe,CAAfA,eAAe,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAfA,EAAAA,eAAe,CAAfA,eAAe,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/modal/useModalClose.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const useModalClose = callback => {
+  const ref = React.useRef(null);
+  const handleClick = React.useCallback(event => {
+    const contentElement = ref.current;
+    if (!contentElement) return;
+    if (!(event.target instanceof Node)) return;
+    if (contentElement.contains(event.target)) return;
+    callback?.();
+  }, [callback]);
+  return {
+    ref,
+    handleClick
+  };
+};
+
+exports.useModalClose = useModalClose;
+//# sourceMappingURL=useModalClose.js.map

package/dist/cjs/modal/useModalClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalClose.js","sources":["../../../src/modal/useModalClose.ts"],"sourcesContent":["import { MouseEvent, RefObject, useCallback, useRef } from 'react'\n\nexport const useModalClose = <T extends HTMLDivElement>(\n  callback?: () => void,\n): {\n  ref: RefObject<T>\n  handleClick: (event: MouseEvent<T>) => void\n} => {\n  const ref = useRef<T>(null)\n\n  const handleClick = useCallback(\n    (event: MouseEvent<T>) => {\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":["useModalClose","callback","ref","useRef","handleClick","useCallback","event","contentElement","current","target","Node","contains"],"mappings":";;;;;;AAEaA,MAAAA,aAAa,GACxBC,QAAqB,IAIlB;AACH,EAAA,MAAMC,GAAG,GAAGC,YAAM,CAAI,IAAI,CAAC,CAAA;AAE3B,EAAA,MAAMC,WAAW,GAAGC,iBAAW,CAC5BC,KAAoB,IAAK;AACxB,IAAA,MAAMC,cAAc,GAAGL,GAAG,CAACM,OAAO,CAAA;IAElC,IAAI,CAACD,cAAc,EAAE,OAAA;AACrB,IAAA,IAAI,EAAED,KAAK,CAACG,MAAM,YAAYC,IAAI,CAAC,EAAE,OAAA;IAErC,IAAIH,cAAc,CAACI,QAAQ,CAACL,KAAK,CAACG,MAAM,CAAC,EAAE,OAAA;AAE3CR,IAAAA,QAAQ,IAAI,CAAA;AACd,GAAC,EACD,CAACA,QAAQ,CACX,CAAC,CAAA;EAED,OAAO;IACLC,GAAG;AACHE,IAAAA,WAAAA;GACD,CAAA;AACH;;;;"}

package/dist/cjs/modal/useModalFocus.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+require('../utils/styled-components-wrapper.js');
+const useInterceptFocus = require('../hooks/useInterceptFocus.js');
+require('use-callback-ref');
+require('../theme/cookie-theme-provider.js');
+require('../theme/theme-provider.js');
+require('react/jsx-runtime');
+require('../theme/document-head-contents/element-theme-colors.js');
+require('../utils/modalRoot.js');
+require('../utils/cookies-client-side.js');
+require('../theme/constants.js');
+require('../theme/utils/set-theme-cookie.js');
+require('../theme/themes.js');
+const constants = require('./constants.js');
+
+const useModalFocus = () => {
+  const modalRef = React.useRef(null);
+  const getFocusableNodes = React.useCallback(() => {
+    const nodes = modalRef.current?.querySelectorAll(constants.FOCUSABLE_ELEMENTS.join(',')) ?? [];
+    return Array.from(nodes).filter(node => node && node instanceof HTMLElement && node.offsetParent !== null);
+  }, []);
+  const handleRetainFocus = React.useCallback(event => {
+    const focusableNodes = getFocusableNodes();
+    if (focusableNodes.length === 0) return;
+    const currentElement = document.activeElement;
+    const focusedItemIndex = currentElement instanceof HTMLElement && focusableNodes.indexOf(currentElement);
+    if (event.shiftKey && focusedItemIndex === 0) {
+      focusableNodes[focusableNodes.length - 1].focus();
+      event.preventDefault();
+    }
+    if (!event.shiftKey && focusableNodes.length > 0 && focusedItemIndex === focusableNodes.length - 1) {
+      focusableNodes[0].focus();
+      event.preventDefault();
+    }
+  }, [getFocusableNodes]);
+  React.useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.code === 'Tab') handleRetainFocus(event);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleRetainFocus]);
+  const [interceptFocus, restoreFocus] = useInterceptFocus.useInterceptFocus();
+  React.useEffect(() => {
+    if (!modalRef.current) return;
+    interceptFocus(modalRef.current);
+    return restoreFocus;
+  }, [interceptFocus, restoreFocus]);
+  return modalRef;
+};
+
+exports.useModalFocus = useModalFocus;
+//# sourceMappingURL=useModalFocus.js.map

package/dist/cjs/modal/useModalFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalFocus.js","sources":["../../../src/modal/useModalFocus.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from 'react'\nimport { useInterceptFocus } from '../hooks/index.js'\nimport { FOCUSABLE_ELEMENTS } from './constants.js'\n\nexport const useModalFocus = (): RefObject<HTMLDivElement> => {\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  const getFocusableNodes = useCallback(() => {\n    const nodes =\n      modalRef.current?.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')) ?? []\n\n    return Array.from(nodes).filter(\n      (node): node is HTMLElement =>\n        node && node instanceof HTMLElement && node.offsetParent !== null,\n    )\n  }, [])\n\n  const handleRetainFocus = useCallback(\n    (event: KeyboardEvent) => {\n      const focusableNodes = getFocusableNodes()\n\n      if (focusableNodes.length === 0) return\n\n      const currentElement = document.activeElement\n      const focusedItemIndex =\n        currentElement instanceof HTMLElement &&\n        focusableNodes.indexOf(currentElement)\n\n      if (event.shiftKey && focusedItemIndex === 0) {\n        focusableNodes[focusableNodes.length - 1].focus()\n        event.preventDefault()\n      }\n\n      if (\n        !event.shiftKey &&\n        focusableNodes.length > 0 &&\n        focusedItemIndex === focusableNodes.length - 1\n      ) {\n        focusableNodes[0].focus()\n        event.preventDefault()\n      }\n    },\n    [getFocusableNodes],\n  )\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.code === 'Tab') handleRetainFocus(event)\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [handleRetainFocus])\n\n  const [interceptFocus, restoreFocus] = useInterceptFocus()\n\n  useEffect(() => {\n    if (!modalRef.current) return\n\n    interceptFocus(modalRef.current)\n    return restoreFocus\n  }, [interceptFocus, restoreFocus])\n\n  return modalRef\n}\n"],"names":["useModalFocus","modalRef","useRef","getFocusableNodes","useCallback","nodes","current","querySelectorAll","FOCUSABLE_ELEMENTS","join","Array","from","filter","node","HTMLElement","offsetParent","handleRetainFocus","event","focusableNodes","length","currentElement","document","activeElement","focusedItemIndex","indexOf","shiftKey","focus","preventDefault","useEffect","handleKeyDown","code","addEventListener","removeEventListener","interceptFocus","restoreFocus","useInterceptFocus"],"mappings":";;;;;;;;;;;;;;;;;;;AAIaA,MAAAA,aAAa,GAAGA,MAAiC;AAC5D,EAAA,MAAMC,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;AAE7C,EAAA,MAAMC,iBAAiB,GAAGC,iBAAW,CAAC,MAAM;AAC1C,IAAA,MAAMC,KAAK,GACTJ,QAAQ,CAACK,OAAO,EAAEC,gBAAgB,CAACC,4BAAkB,CAACC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAA;IAExE,OAAOC,KAAK,CAACC,IAAI,CAACN,KAAK,CAAC,CAACO,MAAM,CAC5BC,IAAI,IACHA,IAAI,IAAIA,IAAI,YAAYC,WAAW,IAAID,IAAI,CAACE,YAAY,KAAK,IACjE,CAAC,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMC,iBAAiB,GAAGZ,iBAAW,CAClCa,KAAoB,IAAK;AACxB,IAAA,MAAMC,cAAc,GAAGf,iBAAiB,EAAE,CAAA;AAE1C,IAAA,IAAIe,cAAc,CAACC,MAAM,KAAK,CAAC,EAAE,OAAA;AAEjC,IAAA,MAAMC,cAAc,GAAGC,QAAQ,CAACC,aAAa,CAAA;IAC7C,MAAMC,gBAAgB,GACpBH,cAAc,YAAYN,WAAW,IACrCI,cAAc,CAACM,OAAO,CAACJ,cAAc,CAAC,CAAA;AAExC,IAAA,IAAIH,KAAK,CAACQ,QAAQ,IAAIF,gBAAgB,KAAK,CAAC,EAAE;MAC5CL,cAAc,CAACA,cAAc,CAACC,MAAM,GAAG,CAAC,CAAC,CAACO,KAAK,EAAE,CAAA;MACjDT,KAAK,CAACU,cAAc,EAAE,CAAA;AACxB,KAAA;AAEA,IAAA,IACE,CAACV,KAAK,CAACQ,QAAQ,IACfP,cAAc,CAACC,MAAM,GAAG,CAAC,IACzBI,gBAAgB,KAAKL,cAAc,CAACC,MAAM,GAAG,CAAC,EAC9C;AACAD,MAAAA,cAAc,CAAC,CAAC,CAAC,CAACQ,KAAK,EAAE,CAAA;MACzBT,KAAK,CAACU,cAAc,EAAE,CAAA;AACxB,KAAA;AACF,GAAC,EACD,CAACxB,iBAAiB,CACpB,CAAC,CAAA;AAEDyB,EAAAA,eAAS,CAAC,MAAM;IACd,MAAMC,aAAa,GAAIZ,KAAoB,IAAK;MAC9C,IAAIA,KAAK,CAACa,IAAI,KAAK,KAAK,EAAEd,iBAAiB,CAACC,KAAK,CAAC,CAAA;KACnD,CAAA;AAEDI,IAAAA,QAAQ,CAACU,gBAAgB,CAAC,SAAS,EAAEF,aAAa,CAAC,CAAA;IACnD,OAAO,MAAMR,QAAQ,CAACW,mBAAmB,CAAC,SAAS,EAAEH,aAAa,CAAC,CAAA;AACrE,GAAC,EAAE,CAACb,iBAAiB,CAAC,CAAC,CAAA;EAEvB,MAAM,CAACiB,cAAc,EAAEC,YAAY,CAAC,GAAGC,mCAAiB,EAAE,CAAA;AAE1DP,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAI,CAAC3B,QAAQ,CAACK,OAAO,EAAE,OAAA;AAEvB2B,IAAAA,cAAc,CAAChC,QAAQ,CAACK,OAAO,CAAC,CAAA;AAChC,IAAA,OAAO4B,YAAY,CAAA;AACrB,GAAC,EAAE,CAACD,cAAc,EAAEC,YAAY,CAAC,CAAC,CAAA;AAElC,EAAA,OAAOjC,QAAQ,CAAA;AACjB;;;;"}

package/dist/cjs/pagination/Pagination.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const index = require('../icons/index.js');
+const Box = require('../box/Box.js');
+const types = require('./types.js');
+const getShowingPages = require('./getShowingPages.js');
+const PaginationItem = require('./PaginationItem.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const getActiveItem = (length, activeItem) => {
+  const isActiveNotInRange = activeItem >= length || activeItem < 0;
+  if (!activeItem || isActiveNotInRange) {
+    return 1; // default active item will be the first one
+  }
+  return activeItem;
+};
+const PaginationBlock = styledComponentsWrapper.default(Box.Box)`
+  display: flex;
+  gap: 8px;
+`;
+const Pagination = _ref => {
+  let {
+    onItemClick,
+    pagesCount,
+    activePage = 1,
+    siblingCount,
+    ...rest
+  } = _ref;
+  const [currentPage, setCurrPage] = React.useState(getActiveItem(pagesCount, activePage));
+  const showingPages = React.useMemo(() => getShowingPages.default(pagesCount, currentPage, siblingCount), [pagesCount, currentPage, siblingCount]);
+  React.useEffect(() => {
+    setCurrPage(page => page !== activePage ? activePage : page);
+  }, [activePage]);
+  if (pagesCount <= 0) {
+    return null;
+  }
+  const onPageItemClick = (page, e) => {
+    onItemClick(page, e);
+    setCurrPage(page);
+  };
+  const onPreviousClick = () => {
+    if (currentPage === 1) {
+      return; // disabled
+    }
+    onItemClick(currentPage - 1);
+    setCurrPage(currentPage - 1);
+  };
+  const onNextClick = () => {
+    if (currentPage === pagesCount) {
+      return; // disabled
+    }
+    onItemClick(currentPage + 1);
+    setCurrPage(currentPage + 1);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(PaginationBlock, {
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx(PaginationItem.PaginationItem, {
+      disabled: currentPage === 1,
+      icon: /*#__PURE__*/jsxRuntime.jsx(index.ArrowLeft, {}),
+      onClick: onPreviousClick
+    }), showingPages.map((page, index) => {
+      const isDisabled = page === '...';
+      const variant = page === currentPage ? types.PaginationItemVariant.active : types.PaginationItemVariant.default;
+      return /*#__PURE__*/jsxRuntime.jsx(PaginationItem.PaginationItem, {
+        icon: page,
+        variant: variant,
+        disabled: isDisabled,
+        onClick: onPageItemClick.bind(null, page)
+      }, page === '...' ? `${page}${index}` : page);
+    }), /*#__PURE__*/jsxRuntime.jsx(PaginationItem.PaginationItem, {
+      disabled: currentPage === pagesCount,
+      icon: /*#__PURE__*/jsxRuntime.jsx(index.ArrowRight, {}),
+      onClick: onNextClick
+    })]
+  });
+};
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.js.map

package/dist/cjs/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/pagination/Pagination.tsx"],"sourcesContent":["import { useMemo, useState, useEffect, FC, MouseEvent } from 'react'\nimport styled from '../utils/styled-components-wrapper.js'\nimport { ArrowLeft, ArrowRight } from '../icons/index.js'\nimport { Box } from '../box/index.js'\nimport {\n  PaginationProps,\n  PaginationItemProps,\n  PaginationItemVariant,\n} from './types.js'\nimport getShowingPages from './getShowingPages.js'\nimport { PaginationItem } from './PaginationItem.js'\n\nconst getActiveItem = (length: number, activeItem: number): number => {\n  const isActiveNotInRange: boolean = activeItem >= length || activeItem < 0\n\n  if (!activeItem || isActiveNotInRange) {\n    return 1 // default active item will be the first one\n  }\n\n  return activeItem\n}\n\nconst PaginationBlock = styled(Box)`\n  display: flex;\n  gap: 8px;\n`\n\nexport const Pagination: FC<PaginationProps> = ({\n  onItemClick,\n  pagesCount,\n  activePage = 1,\n  siblingCount,\n  ...rest\n}) => {\n  const [currentPage, setCurrPage] = useState(\n    getActiveItem(pagesCount, activePage),\n  )\n\n  const showingPages = useMemo<(string | number)[]>(\n    () => getShowingPages(pagesCount, currentPage, siblingCount),\n    [pagesCount, currentPage, siblingCount],\n  )\n\n  useEffect(() => {\n    setCurrPage((page) => (page !== activePage ? activePage : page))\n  }, [activePage])\n\n  if (pagesCount <= 0) {\n    return null\n  }\n\n  const onPageItemClick = (page: number, e: MouseEvent) => {\n    onItemClick(page, e)\n    setCurrPage(page)\n  }\n\n  const onPreviousClick = () => {\n    if (currentPage === 1) {\n      return // disabled\n    }\n\n    onItemClick(currentPage - 1)\n    setCurrPage(currentPage - 1)\n  }\n\n  const onNextClick = () => {\n    if (currentPage === pagesCount) {\n      return // disabled\n    }\n\n    onItemClick(currentPage + 1)\n    setCurrPage(currentPage + 1)\n  }\n\n  return (\n    <PaginationBlock {...rest}>\n      <PaginationItem\n        disabled={currentPage === 1}\n        icon={<ArrowLeft />}\n        onClick={onPreviousClick}\n      />\n\n      {showingPages.map((page, index) => {\n        const isDisabled = page === '...'\n        const variant: PaginationItemProps['variant'] =\n          page === currentPage\n            ? PaginationItemVariant.active\n            : PaginationItemVariant.default\n\n        return (\n          <PaginationItem\n            key={page === '...' ? `${page}${index}` : page}\n            icon={page}\n            variant={variant}\n            disabled={isDisabled}\n            onClick={onPageItemClick.bind(null, page)}\n          />\n        )\n      })}\n\n      <PaginationItem\n        disabled={currentPage === pagesCount}\n        icon={<ArrowRight />}\n        onClick={onNextClick}\n      />\n    </PaginationBlock>\n  )\n}\n"],"names":["getActiveItem","length","activeItem","isActiveNotInRange","PaginationBlock","styled","Box","Pagination","_ref","onItemClick","pagesCount","activePage","siblingCount","rest","currentPage","setCurrPage","useState","showingPages","useMemo","getShowingPages","useEffect","page","onPageItemClick","e","onPreviousClick","onNextClick","_jsxs","children","_jsx","PaginationItem","disabled","icon","ArrowLeft","onClick","map","index","isDisabled","variant","PaginationItemVariant","active","default","bind","ArrowRight"],"mappings":"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"}

package/dist/cjs/pagination/PaginationItem.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const PaginationItemStyles = require('./PaginationItemStyles.js');
+const types = require('./types.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const PaginationItem = _ref => {
+  let {
+    icon,
+    variant = types.PaginationItemVariant.default,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(PaginationItemStyles.PaginationItemStyle, {
+    $variant: variant,
+    ...rest,
+    children: icon
+  });
+};
+
+exports.PaginationItem = PaginationItem;
+//# sourceMappingURL=PaginationItem.js.map

package/dist/cjs/pagination/PaginationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationItem.js","sources":["../../../src/pagination/PaginationItem.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { PaginationItemStyle } from './PaginationItemStyles.js'\nimport { PaginationItemProps, PaginationItemVariant } from './types.js'\n\nexport const PaginationItem: FC<PaginationItemProps> = ({\n  icon,\n  variant = PaginationItemVariant.default,\n  ...rest\n}) => {\n  return (\n    <PaginationItemStyle $variant={variant} {...rest}>\n      {icon}\n    </PaginationItemStyle>\n  )\n}\n"],"names":["PaginationItem","_ref","icon","variant","PaginationItemVariant","default","rest","_jsx","PaginationItemStyle","$variant","children"],"mappings":";;;;;;;;AAIaA,MAAAA,cAAuC,GAAGC,IAAA,IAIjD;EAAA,IAJkD;IACtDC,IAAI;IACJC,OAAO,GAAGC,2BAAqB,CAACC,OAAO;IACvC,GAAGC,IAAAA;AACL,GAAC,GAAAL,IAAA,CAAA;EACC,oBACEM,cAAA,CAACC,wCAAmB,EAAA;AAACC,IAAAA,QAAQ,EAAEN,OAAQ;AAAA,IAAA,GAAKG,IAAI;AAAAI,IAAAA,QAAA,EAC7CR,IAAAA;AAAI,GACc,CAAC,CAAA;AAE1B;;;;"}