@foxford/ui 2.0.5 → 2.0.6-beta-2691fd9-20221221

package/components/Modal/Modal.js

@@ -1,2 +1,2 @@
-import e from'react-modal';import{ModalClose as o}from'./Close.js';import{Modal as l}from'./style.js';import{jsx as s}from'react/jsx-runtime';var a;function n(e){var{children:o,closeTimeoutMS:a,contentLabel:n,isOpen:t,onAfterOpen:r,onRequestClose:i,overlayClassName:d,role:m,shouldCloseOnOverlayClick:c,width:p,valign:C,className:u,style:y,zIndex:O}=e;return s(l,{closeTimeoutMS:a,contentLabel:n,isOpen:Boolean(t),onAfterOpen:r,onRequestClose:i,portalClassName:u,overlayClassName:d,bodyOpenClassName:"modal--open",role:m,zIndex:O,valign:C,width:p,shouldCloseOnOverlayClick:c,children:s("div",{style:y,children:o})})}'undefined'!=typeof window&&(a=document.body)&&a instanceof HTMLElement&&e.setAppElement(a),n.defaultProps={closeTimeoutMS:0,zIndex:9e3,contentLabel:'',isOpen:!1,role:'dialog',shouldCloseOnOverlayClick:!0,width:'m',valign:'center',className:'modal'},n.Close=o,n.displayName='Modal';export{n as Modal};
+import e from'react-modal';import{ModalClose as l}from'./Close.js';import{Modal as o}from'./style.js';import{jsx as a}from'react/jsx-runtime';var s;function n(e){var{blurredOverlay:l,children:s,closeTimeoutMS:n,contentLabel:r,isOpen:t,onAfterOpen:d,onRequestClose:i,overlayClassName:m,role:c,shouldCloseOnOverlayClick:p,width:u,valign:y,className:C,style:O,zIndex:v}=e;return a(o,{blurredOverlay:l,closeTimeoutMS:n,contentLabel:r,isOpen:Boolean(t),onAfterOpen:d,onRequestClose:i,portalClassName:C,overlayClassName:m,bodyOpenClassName:"modal--open",role:c,zIndex:v,valign:y,width:u,shouldCloseOnOverlayClick:p,children:a("div",{style:O,children:s})})}'undefined'!=typeof window&&(s=document.body)&&s instanceof HTMLElement&&e.setAppElement(s),n.defaultProps={blurredOverlay:!1,closeTimeoutMS:0,zIndex:9e3,contentLabel:'',isOpen:!1,role:'dialog',shouldCloseOnOverlayClick:!0,width:'m',valign:'center',className:'modal'},n.Close=l,n.displayName='Modal';export{n as Modal};
 //# sourceMappingURL=Modal.js.map

package/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import ReactModal, { Classes } from 'react-modal'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ModalClose } from './Close'\nimport * as Styled from './style'\n\nfunction setAppModalElement() {\n  const appElement = document.body\n\n  if (appElement && appElement instanceof HTMLElement) ReactModal.setAppElement(appElement)\n}\n\n// eslint-disable-next-line prettier/prettier\nif (typeof window !== 'undefined') {\n  setAppModalElement()\n}\n\nexport interface ModalProps extends BaseProps, ResponsiveNamedProperty<'width'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   * Modal class name\n   */\n  className?: string\n  /**\n   * Number indicating the milliseconds to wait before closing the modal.\n   */\n  closeTimeoutMS?: number\n  /**\n   * String indicating how the content container should be announced to screenreaders\n   */\n  contentLabel?: string\n  /**\n   * Boolean describing if the modal should be shown or not.\n   */\n  isOpen?: boolean\n  /**\n   * Function that will be run after the modal has opened.\n   */\n  onAfterOpen?(): void\n  /**\n   * Function that will be run when the modal is requested to be closed, prior to actually closing.\n   */\n  onRequestClose?(): void\n  /**\n   * Custom overlay CSS class name\n   */\n  overlayClassName?: string | Classes\n  /**\n   * String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.\n   */\n  role?: string\n  /**\n   * Boolean indicating if the overlay should close the modal\n   */\n  shouldCloseOnOverlayClick?: boolean\n  /**\n   * Vertical align\n   */\n  valign?: 'top' | 'center' | 'bottom'\n  /**\n   * z-index\n   */\n  zIndex?: number\n}\n\nModal.defaultProps = {\n  closeTimeoutMS: 0,\n  zIndex: 9000,\n  contentLabel: '',\n  isOpen: false,\n  role: 'dialog',\n  shouldCloseOnOverlayClick: true,\n  width: 'm',\n  valign: 'center',\n  className: 'modal',\n}\n\nModal.Close = ModalClose\nModal.displayName = 'Modal'\n\n/**\n * Основан на [react-modal](https://github.com/reactjs/react-modal).\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n */\nexport function Modal(props: ModalProps) {\n  const {\n    children,\n    closeTimeoutMS,\n    contentLabel,\n    isOpen,\n    onAfterOpen,\n    onRequestClose,\n    overlayClassName,\n    role,\n    shouldCloseOnOverlayClick,\n    width,\n    valign,\n    className,\n    style,\n    zIndex,\n  } = props\n\n  return (\n    <Styled.Modal\n      closeTimeoutMS={closeTimeoutMS}\n      contentLabel={contentLabel}\n      isOpen={Boolean(isOpen)}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onRequestClose}\n      portalClassName={className}\n      overlayClassName={overlayClassName}\n      bodyOpenClassName='modal--open'\n      role={role}\n      zIndex={zIndex}\n      valign={valign}\n      width={width}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n    >\n      <div style={style}>{children}</div>\n    </Styled.Modal>\n  )\n}\n"],"names":["appElement","Modal","props","children","closeTimeoutMS","contentLabel","isOpen","onAfterOpen","onRequestClose","overlayClassName","role","shouldCloseOnOverlayClick","width","valign","className","style","zIndex","_jsx","Styled.Modal","Boolean","portalClassName","bodyOpenClassName","window","document","body","HTMLElement","ReactModal","setAppElement","defaultProps","Close","ModalClose","displayName"],"mappings":"8IAMA,IACQA,EAsFD,SAASC,EAAMC,GACpB,IAAMC,SACJA,EADIC,eAEJA,EAFIC,aAGJA,EAHIC,OAIJA,EAJIC,YAKJA,EALIC,eAMJA,EANIC,iBAOJA,EAPIC,KAQJA,EARIC,0BASJA,EATIC,MAUJA,EAVIC,OAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,OAcJA,GACEd,EAEJ,OACEe,EAACC,EAAD,CACEd,eAAgBA,EAChBC,aAAcA,EACdC,OAAQa,QAAQb,GAChBC,YAAaA,EACbC,eAAgBA,EAChBY,gBAAiBN,EACjBL,iBAAkBA,EAClBY,kBAAkB,cAClBX,KAAMA,EACNM,OAAQA,EACRH,OAAQA,EACRD,MAAOA,EACPD,0BAA2BA,EAb7BR,SAeEc,EAAA,MAAA,CAAKF,MAAOA,EAAZZ,SAAoBA,MAlHJ,oBAAXmB,SANHtB,EAAauB,SAASC,OAEVxB,aAAsByB,aAAaC,EAAWC,cAAc3B,GA8DhFC,EAAM2B,aAAe,CACnBxB,eAAgB,EAChBY,OAAQ,IACRX,aAAc,GACdC,QAAAA,EACAI,KAAM,SACNC,2BAAAA,EACAC,MAAO,IACPC,OAAQ,SACRC,UAAW,SAGbb,EAAM4B,MAAQC,EACd7B,EAAM8B,YAAc"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import ReactModal, { Classes } from 'react-modal'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ModalClose } from './Close'\nimport * as Styled from './style'\n\nfunction setAppModalElement() {\n  const appElement = document.body\n\n  if (appElement && appElement instanceof HTMLElement) ReactModal.setAppElement(appElement)\n}\n\n// eslint-disable-next-line prettier/prettier\nif (typeof window !== 'undefined') {\n  setAppModalElement()\n}\n\nexport interface ModalProps extends BaseProps, ResponsiveNamedProperty<'width'> {\n  /**\n   * Primary content.\n   */\n  /**\n   * Boolean indicating if the overlay background should be blurred\n   */\n  blurredOverlay?: boolean\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   * Modal class name\n   */\n  className?: string\n  /**\n   * Number indicating the milliseconds to wait before closing the modal.\n   */\n  closeTimeoutMS?: number\n  /**\n   * String indicating how the content container should be announced to screenreaders\n   */\n  contentLabel?: string\n  /**\n   * Boolean describing if the modal should be shown or not.\n   */\n  isOpen?: boolean\n  /**\n   * Function that will be run after the modal has opened.\n   */\n  onAfterOpen?(): void\n  /**\n   * Function that will be run when the modal is requested to be closed, prior to actually closing.\n   */\n  onRequestClose?(): void\n  /**\n   * Custom overlay CSS class name\n   */\n  overlayClassName?: string | Classes\n  /**\n   * String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.\n   */\n  role?: string\n  /**\n   * Boolean indicating if the overlay should close the modal\n   */\n  shouldCloseOnOverlayClick?: boolean\n  /**\n   * Vertical align\n   */\n  valign?: 'top' | 'center' | 'bottom'\n  /**\n   * z-index\n   */\n  zIndex?: number\n}\n\nModal.defaultProps = {\n  blurredOverlay: false,\n  closeTimeoutMS: 0,\n  zIndex: 9000,\n  contentLabel: '',\n  isOpen: false,\n  role: 'dialog',\n  shouldCloseOnOverlayClick: true,\n  width: 'm',\n  valign: 'center',\n  className: 'modal',\n}\n\nModal.Close = ModalClose\nModal.displayName = 'Modal'\n\n/**\n * Основан на [react-modal](https://github.com/reactjs/react-modal).\n *\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n */\nexport function Modal(props: ModalProps) {\n  const {\n    blurredOverlay,\n    children,\n    closeTimeoutMS,\n    contentLabel,\n    isOpen,\n    onAfterOpen,\n    onRequestClose,\n    overlayClassName,\n    role,\n    shouldCloseOnOverlayClick,\n    width,\n    valign,\n    className,\n    style,\n    zIndex,\n  } = props\n\n  return (\n    <Styled.Modal\n      blurredOverlay={blurredOverlay}\n      closeTimeoutMS={closeTimeoutMS}\n      contentLabel={contentLabel}\n      isOpen={Boolean(isOpen)}\n      onAfterOpen={onAfterOpen}\n      onRequestClose={onRequestClose}\n      portalClassName={className}\n      overlayClassName={overlayClassName}\n      bodyOpenClassName='modal--open'\n      role={role}\n      zIndex={zIndex}\n      valign={valign}\n      width={width}\n      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n    >\n      <div style={style}>{children}</div>\n    </Styled.Modal>\n  )\n}\n"],"names":["appElement","Modal","props","blurredOverlay","children","closeTimeoutMS","contentLabel","isOpen","onAfterOpen","onRequestClose","overlayClassName","role","shouldCloseOnOverlayClick","width","valign","className","style","zIndex","_jsx","Styled.Modal","Boolean","portalClassName","bodyOpenClassName","window","document","body","HTMLElement","ReactModal","setAppElement","defaultProps","Close","ModalClose","displayName"],"mappings":"8IAMA,IACQA,EA2FD,SAASC,EAAMC,GACpB,IAAMC,eACJA,EADIC,SAEJA,EAFIC,eAGJA,EAHIC,aAIJA,EAJIC,OAKJA,EALIC,YAMJA,EANIC,eAOJA,EAPIC,iBAQJA,EARIC,KASJA,EATIC,0BAUJA,EAVIC,MAWJA,EAXIC,OAYJA,EAZIC,UAaJA,EAbIC,MAcJA,EAdIC,OAeJA,GACEf,EAEJ,OACEgB,EAACC,EAAD,CACEhB,eAAgBA,EAChBE,eAAgBA,EAChBC,aAAcA,EACdC,OAAQa,QAAQb,GAChBC,YAAaA,EACbC,eAAgBA,EAChBY,gBAAiBN,EACjBL,iBAAkBA,EAClBY,kBAAkB,cAClBX,KAAMA,EACNM,OAAQA,EACRH,OAAQA,EACRD,MAAOA,EACPD,0BAA2BA,EAd7BR,SAgBEc,EAAA,MAAA,CAAKF,MAAOA,EAAZZ,SAAoBA,MAzHJ,oBAAXmB,SANHvB,EAAawB,SAASC,OAEVzB,aAAsB0B,aAAaC,EAAWC,cAAc5B,GAkEhFC,EAAM4B,aAAe,CACnB1B,gBAAAA,EACAE,eAAgB,EAChBY,OAAQ,IACRX,aAAc,GACdC,QAAAA,EACAI,KAAM,SACNC,2BAAAA,EACAC,MAAO,IACPC,OAAQ,SACRC,UAAW,SAGbd,EAAM6B,MAAQC,EACd9B,EAAM+B,YAAc"}

package/components/Modal/style.js

@@ -1,2 +1,2 @@
-import t,{css as e,createGlobalStyle as o}from'styled-components';import{property as i}from'../../mixins/responsive-property.js';import{ReactModalAdapter as a}from'./adapter.js';var n={xxxs:100,xxs:200,xs:300,s:400,m:500,l:600,xl:740,xxl:800,xxxl:900};var r=t(a).withConfig({componentId:"fox-ui__sc-1ilisuf-0"})(["&__overlay{z-index:",";display:flex;flex-direction:row;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-x:none;overflow-y:auto;"," &.ReactModal__Overlay--after-open{","}&.ReactModal__Overlay--before-close{}}&__content{width:100%;max-height:100%;position:relative;&:focus{outline:0;}"," &.ReactModal__Content--after-open{}&.ReactModal__Content--before-close{}}"],(t=>t.zIndex||t.theme.zIndex.modal),(t=>t.valign?e(["align-items:",";"],(t=>{switch(t){case'top':return'flex-start';case'bottom':return'flex-end';default:return'center'}})(t.valign)):null),(t=>t.overlayClassName?null:e(["background:rgba(246,247,251,0.9);"])),(t=>t.width?i((t=>'number'==typeof t.width?t.width:t.width&&'string'==typeof t.width&&n[t.width]?n[t.width]:'auto')(t),'max-width'):null));var l=t.span.withConfig({componentId:"fox-ui__sc-1ilisuf-1"})(["opacity:1;transition:0.3s;position:absolute;right:20px;top:20px;cursor:pointer;z-index:10;svg{width:18px;height:18px;}&:hover{opacity:0.5;}"]);o([".bodyOpen{overflow:hidden;}"]);export{r as Modal,l as ModalClose};
+import e,{css as t,createGlobalStyle as o}from'styled-components';import{property as r}from'../../mixins/responsive-property.js';import{ReactModalAdapter as a}from'./adapter.js';var i={xxxs:100,xxs:200,xs:300,s:400,m:500,l:600,xl:740,xxl:800,xxxl:900};var n=e(a).withConfig({componentId:"fox-ui__sc-1ilisuf-0"})(["&__overlay{z-index:",";display:flex;flex-direction:row;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-x:none;overflow-y:auto;"," &.ReactModal__Overlay--after-open{","}&.ReactModal__Overlay--before-close{}}&__content{width:100%;max-height:100%;position:relative;&:focus{outline:0;}"," &.ReactModal__Content--after-open{}&.ReactModal__Content--before-close{}}"],(e=>e.zIndex||e.theme.zIndex.modal),(e=>e.valign?t(["align-items:",";"],(e=>{switch(e){case'top':return'flex-start';case'bottom':return'flex-end';default:return'center'}})(e.valign)):null),(e=>e.overlayClassName?null:t(e.blurredOverlay?["background:rgba(246,247,251,0.3);backdrop-filter:blur(3.5px);"]:["background:rgba(246,247,251,0.9);"])),(e=>e.width?r((e=>'number'==typeof e.width?e.width:e.width&&'string'==typeof e.width&&i[e.width]?i[e.width]:'auto')(e),'max-width'):null));var l=e.span.withConfig({componentId:"fox-ui__sc-1ilisuf-1"})(["opacity:1;transition:0.3s;position:absolute;right:20px;top:20px;cursor:pointer;z-index:10;svg{width:18px;height:18px;}&:hover{opacity:0.5;}"]);o([".bodyOpen{overflow:hidden;}"]);export{n as Modal,l as ModalClose};
 //# sourceMappingURL=style.js.map

package/components/Modal/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Modal/style.ts"],"sourcesContent":["import styled, { createGlobalStyle, css } from 'styled-components'\nimport ReactModal from 'react-modal'\nimport { property, PossibleValues } from 'mixins/responsive-property'\nimport { ModalProps } from './Modal'\nimport { ReactModalAdapter } from './adapter'\n\ninterface ReactModalProps extends ReactModal.Props {\n  zIndex?: ModalProps['zIndex']\n  valign?: ModalProps['valign']\n}\n\nconst WIDTHS = {\n  xxxs: 100,\n  xxs: 200,\n  xs: 300,\n  s: 400,\n  m: 500,\n  l: 600,\n  xl: 740,\n  xxl: 800,\n  xxxl: 900,\n}\n\nconst chooseWidthValue = (props: ModalProps): PossibleValues => {\n  if (typeof props.width === 'number') return props.width\n\n  if (props.width && typeof props.width === 'string' && WIDTHS[props.width]) return WIDTHS[props.width]\n\n  return 'auto'\n}\n\nconst getPosition = (valign: ModalProps['valign']) => {\n  switch (valign) {\n    case 'top':\n      return 'flex-start'\n    case 'bottom':\n      return 'flex-end'\n    case 'center':\n      return 'center'\n    default:\n      return 'center'\n  }\n}\n\nexport const Modal = styled(ReactModalAdapter)<ReactModalProps>`\n  &__overlay {\n    z-index: ${(props) => props.zIndex || props.theme.zIndex.modal};\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow-x: none;\n    overflow-y: auto;\n    ${(props) =>\n      props.valign\n        ? css`\n            align-items: ${getPosition(props.valign)};\n          `\n        : null}\n    &.ReactModal__Overlay--after-open {\n      ${(props) =>\n        props.overlayClassName\n          ? null\n          : css`\n              background: rgba(246, 247, 251, 0.9);\n            `}\n    }\n    &.ReactModal__Overlay--before-close {\n    }\n  }\n\n  &__content {\n    width: 100%;\n    max-height: 100%;\n    position: relative;\n    &:focus {\n      outline: 0;\n    }\n    ${(props) => (props.width ? property(chooseWidthValue(props), 'max-width') : null)}\n    &.ReactModal__Content--after-open {\n    }\n    &.ReactModal__Content--before-close {\n    }\n  }\n`\n\nexport const ModalClose = styled.span`\n  opacity: 1;\n  transition: 0.3s;\n  position: absolute;\n  right: 20px;\n  top: 20px;\n  cursor: pointer;\n  z-index: 10;\n  svg {\n    width: 18px;\n    height: 18px;\n  }\n  &:hover {\n    opacity: 0.5;\n  }\n`\n\nexport const GlobalRoot = createGlobalStyle`\n  .bodyOpen {\n    overflow: hidden;\n  }\n`\n"],"names":["WIDTHS","xxxs","xxs","xs","s","m","l","xl","xxl","xxxl","Modal","styled","ReactModalAdapter","withConfig","componentId","props","zIndex","theme","modal","valign","css","getPosition","overlayClassName","width","property","ModalClose","span","createGlobalStyle"],"mappings":"kLAWA,IAAMA,EAAS,CACbC,KAAM,IACNC,IAAK,IACLC,GAAI,IACJC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IACJC,IAAK,IACLC,KAAM,SAwBKC,EAAQC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAELI,CAAAA,sBAAAA,wIAAAA,sCAAAA,qHAAAA,+EAAAA,GAAUA,EAAMC,QAAUD,EAAME,MAAMD,OAAOE,QAWtDH,GACDA,EAAMI,OACFC,EACiBC,CAAAA,eAAAA,KA7BNF,CAAAA,IACnB,OAAQA,GACN,IAAK,MACH,MAAO,aACT,IAAK,SACH,MAAO,WAGT,QACE,MAAO,WATQA,CA6BkBJ,EAAMI,SAEnC,OAEDJ,GACDA,EAAMO,iBACF,KACAF,EAFJ,CAAA,wCAiBDL,GAAWA,EAAMQ,MAAQC,EA3DNT,CAAAA,GACG,iBAAhBA,EAAMQ,MAA2BR,EAAMQ,MAE9CR,EAAMQ,OAAgC,iBAAhBR,EAAMQ,OAAsBvB,EAAOe,EAAMQ,OAAevB,EAAOe,EAAMQ,OAExF,OALiBR,CA2DgCA,GAAQ,aAAe,OAQpEU,IAAAA,EAAad,EAAOe,KAAVb,WAAA,CAAAC,YAAA,wBAAGH,CAAnB,CAAA,gJAiBmBgB,EAAnB,CAAA"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Modal/style.ts"],"sourcesContent":["import styled, { createGlobalStyle, css } from 'styled-components'\nimport ReactModal from 'react-modal'\nimport { property, PossibleValues } from 'mixins/responsive-property'\nimport { ModalProps } from './Modal'\nimport { ReactModalAdapter } from './adapter'\n\ninterface ReactModalProps extends ReactModal.Props {\n  zIndex?: ModalProps['zIndex']\n  valign?: ModalProps['valign']\n}\n\nconst WIDTHS = {\n  xxxs: 100,\n  xxs: 200,\n  xs: 300,\n  s: 400,\n  m: 500,\n  l: 600,\n  xl: 740,\n  xxl: 800,\n  xxxl: 900,\n}\n\nconst chooseWidthValue = (props: ModalProps): PossibleValues => {\n  if (typeof props.width === 'number') return props.width\n\n  if (props.width && typeof props.width === 'string' && WIDTHS[props.width]) return WIDTHS[props.width]\n\n  return 'auto'\n}\n\nconst getPosition = (valign: ModalProps['valign']) => {\n  switch (valign) {\n    case 'top':\n      return 'flex-start'\n    case 'bottom':\n      return 'flex-end'\n    case 'center':\n      return 'center'\n    default:\n      return 'center'\n  }\n}\n\nexport const Modal = styled(ReactModalAdapter)<ReactModalProps>`\n  &__overlay {\n    z-index: ${(props) => props.zIndex || props.theme.zIndex.modal};\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow-x: none;\n    overflow-y: auto;\n    ${(props) =>\n      props.valign\n        ? css`\n            align-items: ${getPosition(props.valign)};\n          `\n        : null}\n    &.ReactModal__Overlay--after-open {\n      ${(props) => {\n        if (props.overlayClassName) return null\n\n        if (props.blurredOverlay) {\n          return css`\n            background: rgba(246, 247, 251, 0.3);\n            backdrop-filter: blur(3.5px);\n          `\n        }\n\n        return css`\n          background: rgba(246, 247, 251, 0.9);\n        `\n      }}\n    }\n    &.ReactModal__Overlay--before-close {\n    }\n  }\n\n  &__content {\n    width: 100%;\n    max-height: 100%;\n    position: relative;\n    &:focus {\n      outline: 0;\n    }\n    ${(props) => (props.width ? property(chooseWidthValue(props), 'max-width') : null)}\n    &.ReactModal__Content--after-open {\n    }\n    &.ReactModal__Content--before-close {\n    }\n  }\n`\n\nexport const ModalClose = styled.span`\n  opacity: 1;\n  transition: 0.3s;\n  position: absolute;\n  right: 20px;\n  top: 20px;\n  cursor: pointer;\n  z-index: 10;\n  svg {\n    width: 18px;\n    height: 18px;\n  }\n  &:hover {\n    opacity: 0.5;\n  }\n`\n\nexport const GlobalRoot = createGlobalStyle`\n  .bodyOpen {\n    overflow: hidden;\n  }\n`\n"],"names":["WIDTHS","xxxs","xxs","xs","s","m","l","xl","xxl","xxxl","Modal","styled","ReactModalAdapter","withConfig","componentId","props","zIndex","theme","modal","valign","css","overlayClassName","blurredOverlay","width","property","ModalClose","span","createGlobalStyle"],"mappings":"kLAWA,IAAMA,EAAS,CACbC,KAAM,IACNC,IAAK,IACLC,GAAI,IACJC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IACJC,IAAK,IACLC,KAAM,SAwBKC,EAAQC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,sBAAA,wIAAA,sCAAA,qHAAA,+EAEFI,GAAUA,EAAMC,QAAUD,EAAME,MAAMD,OAAOE,QAWtDH,GACDA,EAAMI,OACFC,EADJ,CAAA,eAAA,KA3BeD,CAAAA,IACnB,OAAQA,GACN,IAAK,MACH,MAAO,aACT,IAAK,SACH,MAAO,WAGT,QACE,MAAO,WATQA,CA6BkBJ,EAAMI,SAEnC,OAEDJ,GACGA,EAAMM,iBAAyB,KAG1BD,EADLL,EAAMO,eACR,CAAA,iEAMF,CAAA,wCAgBDP,GAAWA,EAAMQ,MAAQC,EAnENT,CAAAA,GACG,iBAAhBA,EAAMQ,MAA2BR,EAAMQ,MAE9CR,EAAMQ,OAAgC,iBAAhBR,EAAMQ,OAAsBvB,EAAOe,EAAMQ,OAAevB,EAAOe,EAAMQ,OAExF,OALiBR,CAmEgCA,GAAQ,aAAe,OAQpEU,IAAAA,EAAad,EAAOe,KAAVb,WAAA,CAAAC,YAAA,wBAAGH,CAAnB,CAAA,gJAiBmBgB,EAAnB,CAAA"}

package/dts/index.d.ts

@@ -1184,6 +1184,10 @@ interface ModalProps extends BaseProps, ResponsiveNamedProperty<'width'> {
     /**
      * Primary content.
      */
+    /**
+     * Boolean indicating if the overlay background should be blurred
+     */
+    blurredOverlay?: boolean;
     /**
      * Children react node
      */
@@ -1243,6 +1247,7 @@ interface ModalProps extends BaseProps, ResponsiveNamedProperty<'width'> {
 declare function Modal(props: ModalProps): JSX.Element;
 declare namespace Modal {
     var defaultProps: {
+        blurredOverlay: boolean;
         closeTimeoutMS: number;
         zIndex: number;
         contentLabel: string;