@foxford/ui 2.57.1-beta-a74b35e-20241220 → 2.58.0-beta-457979c-20250110

package/components/Dialog/Dialog.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var ReactModal=require('react-modal');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var withTranslation=require('../../hocs/withTranslation.js');var constants$1=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var DialogComponent=require('../DialogComponent/DialogComponent.js');var constants=require('../DialogComponent/constants.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ReactModal__default=_interopDefault(ReactModal);const TranslationDialogComponent=withTranslation.withTranslation(React.forwardRef(((e,o)=>{const{positions:a={},translated:n,...r}=e;const s=n?{}:ramda.mergeDeepLeft(a,constants$1.POSITIONS);return require$$0.jsx(style.PositionedDialogComponent,{...r,positions:s,ref:o})})));const Dialog=Object.assign(withMergedProps.withMergedProps((e=>{const{size:o="s",position:a="center",role:n="dialog",open:r,preventScrollAfterClose:s,closeTimeoutMS:t,portalClassName:l,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,palette:v,overlayBlur:y,overlayDisabled:M,onAfterOpen:h,onAfterClose:w,onRequestClose:N,...O}=e;return require$$0.jsx(ReactModal__default.default,{isOpen:r,ariaHideApp:!1,preventScroll:s,closeTimeoutMS:t,portalClassName:l,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,onAfterOpen:h,onAfterClose:w,onRequestClose:N,contentElement:e=>{const{ref:r,className:s,tabIndex:t,onKeyDown:l,onMouseDown:i,onMouseUp:c,onClick:u}=e;return require$$0.jsx(TranslationDialogComponent,{...O,ref:r,size:o,role:n,className:s,tabIndex:t,position:a,"aria-modal":!O.draggable&&!M,palette:{color:v.color,backgroundColor:v.backgroundColor,shadowColor:v.shadowColor},onKeyDown:e=>{O.onKeyDown&&O.onKeyDown(e),l&&l(e)},onMouseDown:e=>{O.onMouseDown&&O.onMouseDown(e),i&&i(e)},onMouseUp:e=>{O.onMouseUp&&O.onMouseUp(e),c&&c(e)},onClick:e=>{O.onClick&&O.onClick(e),u&&u(e)}})},overlayElement:(e,o)=>{const{ref:a,className:n,onClick:r,onMouseDown:s}=e;return O.draggable||M?o:require$$0.jsx(style.DialogOverlay,{ref:a,className:n,blur:y,palette:{backgroundColor:v.overlayBackgroundColor},onClick:r,onMouseDown:s,children:o})}})}),{sizes:e=>e.fancy?constants.SIZES_FANCY:constants.SIZES,displayName:"Dialog"}),{Component:DialogComponent.DialogComponent});exports.COMPONENT_NAME="Dialog",exports.Dialog=Dialog;
+'use strict';var React=require('react');var ReactModal=require('react-modal');var ramda=require('ramda');var withMergedProps=require('../../hocs/withMergedProps.js');var withTranslation=require('../../hocs/withTranslation.js');var constants$1=require('./constants.js');var style=require('./style.js');var require$$0=require('react/jsx-runtime');var DialogComponent=require('../DialogComponent/DialogComponent.js');var constants=require('../DialogComponent/constants.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var ReactModal__default=_interopDefault(ReactModal);const TranslationDialogComponent=withTranslation.withTranslation(React.forwardRef(((e,o)=>{const{positions:n={},translated:a,...r}=e;const s=a?{}:ramda.mergeDeepLeft(n,constants$1.POSITIONS);return require$$0.jsx(style.PositionedDialogComponent,{...r,positions:s,ref:o})})));const Dialog=Object.assign(withMergedProps.withMergedProps((e=>{const{size:o="s",position:n="center",role:a="dialog",open:r,preventScrollAfterClose:s,closeTimeoutMS:t,portalClassName:l,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:d,shouldCloseOnOverlayClick:p,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,palette:v,overlayBlur:y,overlayDisabled:M,zIndex:h,onAfterOpen:w,onAfterClose:N,onRequestClose:O,...q}=e;const R=q.draggable||M;return require$$0.jsx(ReactModal__default.default,{isOpen:r,ariaHideApp:!1,preventScroll:s,closeTimeoutMS:t,portalClassName:l,className:i,bodyOpenClassName:c,htmlOpenClassName:u,overlayClassName:d,shouldCloseOnOverlayClick:p,shouldCloseOnEsc:C,shouldReturnFocusAfterClose:m,parentSelector:g,overlayRef:D,contentRef:f,onAfterOpen:w,onAfterClose:N,onRequestClose:O,contentElement:e=>{const{ref:r,className:s,tabIndex:t,onKeyDown:l,onMouseDown:i,onMouseUp:c,onClick:u}=e;return require$$0.jsx(TranslationDialogComponent,{...q,ref:r,size:o,role:a,className:s,tabIndex:t,position:n,"aria-modal":!q.draggable&&!M,palette:{color:v.color,backgroundColor:v.backgroundColor,shadowColor:v.shadowColor},zIndex:R?h:void 0,onKeyDown:e=>{q.onKeyDown&&q.onKeyDown(e),l&&l(e)},onMouseDown:e=>{q.onMouseDown&&q.onMouseDown(e),i&&i(e)},onMouseUp:e=>{q.onMouseUp&&q.onMouseUp(e),c&&c(e)},onClick:e=>{q.onClick&&q.onClick(e),u&&u(e)}})},overlayElement:(e,o)=>{const{ref:n,className:a,onClick:r,onMouseDown:s}=e;return R?o:require$$0.jsx(style.DialogOverlay,{ref:n,className:a,blur:y,palette:{backgroundColor:v.overlayBackgroundColor},zIndex:h,onClick:r,onMouseDown:s,children:o})}})}),{sizes:e=>e.fancy?constants.SIZES_FANCY:constants.SIZES,displayName:"Dialog"}),{Component:DialogComponent.DialogComponent});exports.COMPONENT_NAME="Dialog",exports.Dialog=Dialog;
 //# sourceMappingURL=Dialog.js.map

package/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport { DialogComponent, SIZES, SIZES_FANCY } from 'components/DialogComponent'\nimport { POSITIONS } from './constants'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n  forwardRef((props, ref) => {\n    const { positions = {}, translated, ...restProps } = props\n\n    const dialogPositions = translated ? {} : mergeDeepLeft(positions, POSITIONS)\n\n    return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n  })\n)\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента и пропсы \"react-modal\" [v3.16.1](https://reactcommunity.org/react-modal).\n *\n * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.\n *\n * Получить доступ к компоненту, не подключенному к \"react-modal\", можно через Dialog.Component.\n *\n * Полный интерфейс Dialog можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dialog/types.ts), интерфейс Dialog.Component [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n *\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n  withMergedProps<DialogProps, HTMLDivElement>(\n    (props) => {\n      const {\n        size = 's',\n        position = 'center',\n        role = 'dialog',\n        open,\n        preventScrollAfterClose,\n        closeTimeoutMS,\n        portalClassName,\n        className,\n        bodyOpenClassName,\n        htmlOpenClassName,\n        overlayClassName,\n        shouldCloseOnOverlayClick,\n        shouldCloseOnEsc,\n        shouldReturnFocusAfterClose,\n        parentSelector,\n        overlayRef,\n        contentRef,\n        palette,\n        overlayBlur,\n        overlayDisabled,\n        onAfterOpen,\n        onAfterClose,\n        onRequestClose,\n        ...dialogProps\n      } = props\n\n      return (\n        <ReactModal\n          isOpen={open}\n          ariaHideApp={false}\n          preventScroll={preventScrollAfterClose}\n          closeTimeoutMS={closeTimeoutMS}\n          portalClassName={portalClassName}\n          className={className}\n          bodyOpenClassName={bodyOpenClassName}\n          htmlOpenClassName={htmlOpenClassName}\n          overlayClassName={overlayClassName}\n          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n          shouldCloseOnEsc={shouldCloseOnEsc}\n          shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n          parentSelector={parentSelector}\n          overlayRef={overlayRef}\n          contentRef={contentRef}\n          onAfterOpen={onAfterOpen}\n          onAfterClose={onAfterClose}\n          onRequestClose={onRequestClose}\n          contentElement={(contentProps) => {\n            const { ref, className, tabIndex, onKeyDown, onMouseDown, onMouseUp, onClick } = contentProps\n\n            return (\n              <TranslationDialogComponent\n                {...dialogProps}\n                ref={ref}\n                size={size}\n                role={role}\n                className={className}\n                tabIndex={tabIndex}\n                position={position}\n                aria-modal={!dialogProps.draggable && !overlayDisabled}\n                palette={{\n                  color: palette.color,\n                  backgroundColor: palette.backgroundColor,\n                  shadowColor: palette.shadowColor,\n                }}\n                onKeyDown={(evt) => {\n                  if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n                  if (onKeyDown) onKeyDown(evt)\n                }}\n                onMouseDown={(evt) => {\n                  if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n                  if (onMouseDown) onMouseDown(evt)\n                }}\n                onMouseUp={(evt) => {\n                  if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n                  if (onMouseUp) onMouseUp(evt)\n                }}\n                onClick={(evt) => {\n                  if (dialogProps.onClick) dialogProps.onClick(evt)\n                  if (onClick) onClick(evt)\n                }}\n              />\n            )\n          }}\n          overlayElement={(overlayProps, contentElement) => {\n            const { ref, className, onClick, onMouseDown } = overlayProps\n\n            return dialogProps.draggable || overlayDisabled ? (\n              contentElement\n            ) : (\n              <Styled.DialogOverlay\n                ref={ref}\n                className={className}\n                blur={overlayBlur}\n                palette={{\n                  backgroundColor: palette.overlayBackgroundColor,\n                }}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n              >\n                {contentElement}\n              </Styled.DialogOverlay>\n            )\n          }}\n        />\n      )\n    },\n    {\n      sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Component: DialogComponent,\n  }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","mergeDeepLeft","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","onAfterOpen","onAfterClose","onRequestClose","dialogProps","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","draggable","color","backgroundColor","shadowColor","evt","overlayElement","overlayProps","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"4kBAYA,MAAMA,2BAA6BC,gBAAAA,gBACjCC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,MAAAA,cAAcJ,EAAWK,YAAAA,WAEnE,OAAOC,WAAAA,IAACC,MAAAA,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAe9FS,MAAAA,OAA+FC,OAAOC,OAC1GC,gBAAAA,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,YACfA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDrC,EAEJ,OACEQ,WAAAA,IAAC8B,oBAAAA,QAAU,CACTC,OAAQtB,EACRuB,aAAa,EACbC,cAAevB,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZI,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBM,eAAiBC,IACf,MAAM1C,IAAEA,EAAGoB,UAAEA,EAASuB,SAAEA,EAAQC,UAAEA,EAASC,YAAEA,EAAWC,UAAEA,EAASC,QAAEA,GAAYL,EAEjF,OACEnC,WAAAA,IAACX,2BAA0B,IACrBwC,EACJpC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAWA,EACXuB,SAAUA,EACV7B,SAAUA,EACV,cAAasB,EAAYY,YAAchB,EACvCF,QAAS,CACPmB,MAAOnB,EAAQmB,MACfC,gBAAiBpB,EAAQoB,gBACzBC,YAAarB,EAAQqB,aAEvBP,UAAYQ,IACNhB,EAAYQ,WAAWR,EAAYQ,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRhB,EAAYS,aAAaT,EAAYS,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNhB,EAAYU,WAAWV,EAAYU,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJhB,EAAYW,SAASX,EAAYW,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcb,KAC7B,MAAMzC,IAAEA,EAAGoB,UAAEA,EAAS2B,QAAEA,EAAOF,YAAEA,GAAgBS,EAEjD,OAAOlB,EAAYY,WAAahB,EAC9BS,EAEAlC,WAAAA,IAACC,MAAAA,cAAoB,CACnBR,IAAKA,EACLoB,UAAWA,EACXmC,KAAMxB,EACND,QAAS,CACPoB,gBAAiBpB,EAAQ0B,wBAE3BT,QAASA,EACTF,YAAaA,EAAYY,SAExBhB,GAEJ,GAEH,GAGN,CACEiB,MAAQ3D,GAAWA,EAAM4D,MAAQC,UAAWA,YAAGC,UAAMA,MACrDC,YAvIiB,WA0IrB,CACEC,UAAWC,gBAAAA,yCA3IQ"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport { DialogComponent, SIZES, SIZES_FANCY } from 'components/DialogComponent'\nimport { POSITIONS } from './constants'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n  forwardRef((props, ref) => {\n    const { positions = {}, translated, ...restProps } = props\n\n    const dialogPositions = translated ? {} : mergeDeepLeft(positions, POSITIONS)\n\n    return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n  })\n)\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента и пропсы \"react-modal\" [v3.16.1](https://reactcommunity.org/react-modal).\n *\n * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.\n *\n * Получить доступ к компоненту, не подключенному к \"react-modal\", можно через Dialog.Component.\n *\n * Полный интерфейс Dialog можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dialog/types.ts), интерфейс Dialog.Component [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n *\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n  withMergedProps<DialogProps, HTMLDivElement>(\n    (props) => {\n      const {\n        size = 's',\n        position = 'center',\n        role = 'dialog',\n        open,\n        preventScrollAfterClose,\n        closeTimeoutMS,\n        portalClassName,\n        className,\n        bodyOpenClassName,\n        htmlOpenClassName,\n        overlayClassName,\n        shouldCloseOnOverlayClick,\n        shouldCloseOnEsc,\n        shouldReturnFocusAfterClose,\n        parentSelector,\n        overlayRef,\n        contentRef,\n        palette,\n        overlayBlur,\n        overlayDisabled,\n        zIndex,\n        onAfterOpen,\n        onAfterClose,\n        onRequestClose,\n        ...dialogProps\n      } = props\n\n      const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n      return (\n        <ReactModal\n          isOpen={open}\n          ariaHideApp={false}\n          preventScroll={preventScrollAfterClose}\n          closeTimeoutMS={closeTimeoutMS}\n          portalClassName={portalClassName}\n          className={className}\n          bodyOpenClassName={bodyOpenClassName}\n          htmlOpenClassName={htmlOpenClassName}\n          overlayClassName={overlayClassName}\n          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n          shouldCloseOnEsc={shouldCloseOnEsc}\n          shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n          parentSelector={parentSelector}\n          overlayRef={overlayRef}\n          contentRef={contentRef}\n          onAfterOpen={onAfterOpen}\n          onAfterClose={onAfterClose}\n          onRequestClose={onRequestClose}\n          contentElement={(contentProps) => {\n            const { ref, className, tabIndex, onKeyDown, onMouseDown, onMouseUp, onClick } = contentProps\n\n            return (\n              <TranslationDialogComponent\n                {...dialogProps}\n                ref={ref}\n                size={size}\n                role={role}\n                className={className}\n                tabIndex={tabIndex}\n                position={position}\n                aria-modal={!dialogProps.draggable && !overlayDisabled}\n                palette={{\n                  color: palette.color,\n                  backgroundColor: palette.backgroundColor,\n                  shadowColor: palette.shadowColor,\n                }}\n                zIndex={overlayElementDisabled ? zIndex : undefined}\n                onKeyDown={(evt) => {\n                  if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n                  if (onKeyDown) onKeyDown(evt)\n                }}\n                onMouseDown={(evt) => {\n                  if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n                  if (onMouseDown) onMouseDown(evt)\n                }}\n                onMouseUp={(evt) => {\n                  if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n                  if (onMouseUp) onMouseUp(evt)\n                }}\n                onClick={(evt) => {\n                  if (dialogProps.onClick) dialogProps.onClick(evt)\n                  if (onClick) onClick(evt)\n                }}\n              />\n            )\n          }}\n          overlayElement={(overlayProps, contentElement) => {\n            const { ref, className, onClick, onMouseDown } = overlayProps\n\n            return overlayElementDisabled ? (\n              contentElement\n            ) : (\n              <Styled.DialogOverlay\n                ref={ref}\n                className={className}\n                blur={overlayBlur}\n                palette={{\n                  backgroundColor: palette.overlayBackgroundColor,\n                }}\n                zIndex={zIndex}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n              >\n                {contentElement}\n              </Styled.DialogOverlay>\n            )\n          }}\n        />\n      )\n    },\n    {\n      sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Component: DialogComponent,\n  }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","mergeDeepLeft","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","jsx","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"4kBAYA,MAAMA,2BAA6BC,gBAAAA,gBACjCC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,MAAAA,cAAcJ,EAAWK,YAAAA,WAEnE,OAAOC,WAAAA,IAACC,MAAAA,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAe9FS,MAAAA,OAA+FC,OAAOC,OAC1GC,gBAAAA,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,OACfA,EAAMC,YACNA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDtC,EAEJ,MAAMuC,EAAyBD,EAAYE,WAAaP,EAExD,OACEzB,WAAAA,IAACiC,oBAAAA,QAAU,CACTC,OAAQzB,EACR0B,aAAa,EACbC,cAAe1B,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZK,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBQ,eAAiBC,IACf,MAAM7C,IAAEA,EAAGoB,UAAEA,EAAS0B,SAAEA,EAAQC,UAAEA,EAASC,YAAEA,EAAWC,UAAEA,EAASC,QAAEA,GAAYL,EAEjF,OACEtC,WAAAA,IAACX,2BAA0B,IACrByC,EACJrC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAWA,EACX0B,SAAUA,EACVhC,SAAUA,EACV,cAAauB,EAAYE,YAAcP,EACvCF,QAAS,CACPqB,MAAOrB,EAAQqB,MACfC,gBAAiBtB,EAAQsB,gBACzBC,YAAavB,EAAQuB,aAEvBpB,OAAQK,EAAyBL,OAASqB,EAC1CP,UAAYQ,IACNlB,EAAYU,WAAWV,EAAYU,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRlB,EAAYW,aAAaX,EAAYW,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNlB,EAAYY,WAAWZ,EAAYY,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJlB,EAAYa,SAASb,EAAYa,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcb,KAC7B,MAAM5C,IAAEA,EAAGoB,UAAEA,EAAS8B,QAAEA,EAAOF,YAAEA,GAAgBS,EAEjD,OAAOnB,EACLM,EAEArC,WAAAmD,IAAClD,oBAAoB,CACnBR,IAAKA,EACLoB,UAAWA,EACXuC,KAAM5B,EACND,QAAS,CACPsB,gBAAiBtB,EAAQ8B,wBAE3B3B,OAAQA,EACRiB,QAASA,EACTF,YAAaA,EAAYa,SAExBjB,GAEJ,GAEH,GAGN,CACEkB,MAAQ/D,GAAWA,EAAMgE,MAAQC,UAAWA,YAAGC,UAAMA,MACrDC,YA5IiB,WA+IrB,CACEC,UAAWC,gBAAAA,yCAhJQ"}

package/components/Dialog/Dialog.mjs

@@ -1,2 +1,2 @@
-import{forwardRef}from'react';import ReactModal from'react-modal';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{withTranslation}from'../../hocs/withTranslation.mjs';import{POSITIONS}from'./constants.mjs';import{DialogOverlay,PositionedDialogComponent}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';import{SIZES_FANCY,SIZES}from'../DialogComponent/constants.mjs';const COMPONENT_NAME='Dialog';const TranslationDialogComponent=withTranslation(forwardRef(((o,e)=>{const{positions:n={},translated:s,...l}=o;const a=s?{}:mergeDeepLeft(n,POSITIONS);return jsx(PositionedDialogComponent,{...l,positions:a,ref:e})})));const Dialog=Object.assign(withMergedProps((o=>{const{size:e="s",position:n="center",role:s="dialog",open:l,preventScrollAfterClose:a,closeTimeoutMS:r,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,palette:N,overlayBlur:O,overlayDisabled:y,onAfterOpen:M,onAfterClose:w,onRequestClose:h,...S}=o;return jsx(ReactModal,{isOpen:l,ariaHideApp:!1,preventScroll:a,closeTimeoutMS:r,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,onAfterOpen:M,onAfterClose:w,onRequestClose:h,contentElement:o=>{const{ref:l,className:a,tabIndex:r,onKeyDown:t,onMouseDown:i,onMouseUp:m,onClick:c}=o;return jsx(TranslationDialogComponent,{...S,ref:l,size:e,role:s,className:a,tabIndex:r,position:n,"aria-modal":!S.draggable&&!y,palette:{color:N.color,backgroundColor:N.backgroundColor,shadowColor:N.shadowColor},onKeyDown:o=>{S.onKeyDown&&S.onKeyDown(o),t&&t(o)},onMouseDown:o=>{S.onMouseDown&&S.onMouseDown(o),i&&i(o)},onMouseUp:o=>{S.onMouseUp&&S.onMouseUp(o),m&&m(o)},onClick:o=>{S.onClick&&S.onClick(o),c&&c(o)}})},overlayElement:(o,e)=>{const{ref:n,className:s,onClick:l,onMouseDown:a}=o;return S.draggable||y?e:jsx(DialogOverlay,{ref:n,className:s,blur:O,palette:{backgroundColor:N.overlayBackgroundColor},onClick:l,onMouseDown:a,children:e})}})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:"Dialog"}),{Component:DialogComponent});export{COMPONENT_NAME,Dialog};
+import{forwardRef}from'react';import ReactModal from'react-modal';import{mergeDeepLeft}from'ramda';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{withTranslation}from'../../hocs/withTranslation.mjs';import{POSITIONS}from'./constants.mjs';import{DialogOverlay,PositionedDialogComponent}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';import{SIZES_FANCY,SIZES}from'../DialogComponent/constants.mjs';const COMPONENT_NAME='Dialog';const TranslationDialogComponent=withTranslation(forwardRef(((o,e)=>{const{positions:n={},translated:s,...l}=o;const a=s?{}:mergeDeepLeft(n,POSITIONS);return jsx(PositionedDialogComponent,{...l,positions:a,ref:e})})));const Dialog=Object.assign(withMergedProps((o=>{const{size:e="s",position:n="center",role:s="dialog",open:l,preventScrollAfterClose:a,closeTimeoutMS:r,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,palette:N,overlayBlur:O,overlayDisabled:y,zIndex:M,onAfterOpen:w,onAfterClose:h,onRequestClose:S,...v}=o;const j=v.draggable||y;return jsx(ReactModal,{isOpen:l,ariaHideApp:!1,preventScroll:a,closeTimeoutMS:r,portalClassName:t,className:i,bodyOpenClassName:m,htmlOpenClassName:c,overlayClassName:p,shouldCloseOnOverlayClick:C,shouldCloseOnEsc:d,shouldReturnFocusAfterClose:u,parentSelector:f,overlayRef:g,contentRef:D,onAfterOpen:w,onAfterClose:h,onRequestClose:S,contentElement:o=>{const{ref:l,className:a,tabIndex:r,onKeyDown:t,onMouseDown:i,onMouseUp:m,onClick:c}=o;return jsx(TranslationDialogComponent,{...v,ref:l,size:e,role:s,className:a,tabIndex:r,position:n,"aria-modal":!v.draggable&&!y,palette:{color:N.color,backgroundColor:N.backgroundColor,shadowColor:N.shadowColor},zIndex:j?M:void 0,onKeyDown:o=>{v.onKeyDown&&v.onKeyDown(o),t&&t(o)},onMouseDown:o=>{v.onMouseDown&&v.onMouseDown(o),i&&i(o)},onMouseUp:o=>{v.onMouseUp&&v.onMouseUp(o),m&&m(o)},onClick:o=>{v.onClick&&v.onClick(o),c&&c(o)}})},overlayElement:(o,e)=>{const{ref:n,className:s,onClick:l,onMouseDown:a}=o;return j?e:jsx(DialogOverlay,{ref:n,className:s,blur:O,palette:{backgroundColor:N.overlayBackgroundColor},zIndex:M,onClick:l,onMouseDown:a,children:e})}})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:"Dialog"}),{Component:DialogComponent});export{COMPONENT_NAME,Dialog};
 //# sourceMappingURL=Dialog.mjs.map

package/components/Dialog/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport { DialogComponent, SIZES, SIZES_FANCY } from 'components/DialogComponent'\nimport { POSITIONS } from './constants'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n  forwardRef((props, ref) => {\n    const { positions = {}, translated, ...restProps } = props\n\n    const dialogPositions = translated ? {} : mergeDeepLeft(positions, POSITIONS)\n\n    return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n  })\n)\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента и пропсы \"react-modal\" [v3.16.1](https://reactcommunity.org/react-modal).\n *\n * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.\n *\n * Получить доступ к компоненту, не подключенному к \"react-modal\", можно через Dialog.Component.\n *\n * Полный интерфейс Dialog можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dialog/types.ts), интерфейс Dialog.Component [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n *\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n  withMergedProps<DialogProps, HTMLDivElement>(\n    (props) => {\n      const {\n        size = 's',\n        position = 'center',\n        role = 'dialog',\n        open,\n        preventScrollAfterClose,\n        closeTimeoutMS,\n        portalClassName,\n        className,\n        bodyOpenClassName,\n        htmlOpenClassName,\n        overlayClassName,\n        shouldCloseOnOverlayClick,\n        shouldCloseOnEsc,\n        shouldReturnFocusAfterClose,\n        parentSelector,\n        overlayRef,\n        contentRef,\n        palette,\n        overlayBlur,\n        overlayDisabled,\n        onAfterOpen,\n        onAfterClose,\n        onRequestClose,\n        ...dialogProps\n      } = props\n\n      return (\n        <ReactModal\n          isOpen={open}\n          ariaHideApp={false}\n          preventScroll={preventScrollAfterClose}\n          closeTimeoutMS={closeTimeoutMS}\n          portalClassName={portalClassName}\n          className={className}\n          bodyOpenClassName={bodyOpenClassName}\n          htmlOpenClassName={htmlOpenClassName}\n          overlayClassName={overlayClassName}\n          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n          shouldCloseOnEsc={shouldCloseOnEsc}\n          shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n          parentSelector={parentSelector}\n          overlayRef={overlayRef}\n          contentRef={contentRef}\n          onAfterOpen={onAfterOpen}\n          onAfterClose={onAfterClose}\n          onRequestClose={onRequestClose}\n          contentElement={(contentProps) => {\n            const { ref, className, tabIndex, onKeyDown, onMouseDown, onMouseUp, onClick } = contentProps\n\n            return (\n              <TranslationDialogComponent\n                {...dialogProps}\n                ref={ref}\n                size={size}\n                role={role}\n                className={className}\n                tabIndex={tabIndex}\n                position={position}\n                aria-modal={!dialogProps.draggable && !overlayDisabled}\n                palette={{\n                  color: palette.color,\n                  backgroundColor: palette.backgroundColor,\n                  shadowColor: palette.shadowColor,\n                }}\n                onKeyDown={(evt) => {\n                  if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n                  if (onKeyDown) onKeyDown(evt)\n                }}\n                onMouseDown={(evt) => {\n                  if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n                  if (onMouseDown) onMouseDown(evt)\n                }}\n                onMouseUp={(evt) => {\n                  if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n                  if (onMouseUp) onMouseUp(evt)\n                }}\n                onClick={(evt) => {\n                  if (dialogProps.onClick) dialogProps.onClick(evt)\n                  if (onClick) onClick(evt)\n                }}\n              />\n            )\n          }}\n          overlayElement={(overlayProps, contentElement) => {\n            const { ref, className, onClick, onMouseDown } = overlayProps\n\n            return dialogProps.draggable || overlayDisabled ? (\n              contentElement\n            ) : (\n              <Styled.DialogOverlay\n                ref={ref}\n                className={className}\n                blur={overlayBlur}\n                palette={{\n                  backgroundColor: palette.overlayBackgroundColor,\n                }}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n              >\n                {contentElement}\n              </Styled.DialogOverlay>\n            )\n          }}\n        />\n      )\n    },\n    {\n      sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Component: DialogComponent,\n  }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","mergeDeepLeft","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","onAfterOpen","onAfterClose","onRequestClose","dialogProps","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","draggable","color","backgroundColor","shadowColor","evt","overlayElement","overlayProps","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"0eAUMA,MAAAA,eAAiB,SAEvB,MAAMC,2BAA6BC,gBACjCC,YAAW,CAACC,EAAOC,KACjB,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,cAAcJ,EAAWK,WAEnE,OAAOC,IAACC,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAe9FS,MAAAA,OAA+FC,OAAOC,OAC1GC,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,YACfA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDrC,EAEJ,OACEQ,IAAC8B,WAAU,CACTC,OAAQtB,EACRuB,aAAa,EACbC,cAAevB,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZI,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBM,eAAiBC,IACf,MAAM1C,IAAEA,EAAGoB,UAAEA,EAASuB,SAAEA,EAAQC,UAAEA,EAASC,YAAEA,EAAWC,UAAEA,EAASC,QAAEA,GAAYL,EAEjF,OACEnC,IAACX,2BAA0B,IACrBwC,EACJpC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAWA,EACXuB,SAAUA,EACV7B,SAAUA,EACV,cAAasB,EAAYY,YAAchB,EACvCF,QAAS,CACPmB,MAAOnB,EAAQmB,MACfC,gBAAiBpB,EAAQoB,gBACzBC,YAAarB,EAAQqB,aAEvBP,UAAYQ,IACNhB,EAAYQ,WAAWR,EAAYQ,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRhB,EAAYS,aAAaT,EAAYS,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNhB,EAAYU,WAAWV,EAAYU,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJhB,EAAYW,SAASX,EAAYW,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcb,KAC7B,MAAMzC,IAAEA,EAAGoB,UAAEA,EAAS2B,QAAEA,EAAOF,YAAEA,GAAgBS,EAEjD,OAAOlB,EAAYY,WAAahB,EAC9BS,EAEAlC,IAACC,cAAoB,CACnBR,IAAKA,EACLoB,UAAWA,EACXmC,KAAMxB,EACND,QAAS,CACPoB,gBAAiBpB,EAAQ0B,wBAE3BT,QAASA,EACTF,YAAaA,EAAYY,SAExBhB,GAEJ,GAEH,GAGN,CACEiB,MAAQ3D,GAAWA,EAAM4D,MAAQC,YAAcC,MAC/CC,YAvIiB,WA0IrB,CACEC,UAAWC"}
+{"version":3,"file":"Dialog.mjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport ReactModal from 'react-modal'\nimport { mergeDeepLeft } from 'ramda'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { withTranslation } from 'hocs/withTranslation'\nimport { DialogComponent, SIZES, SIZES_FANCY } from 'components/DialogComponent'\nimport { POSITIONS } from './constants'\nimport * as Styled from './style'\nimport type { DialogProps, TranslationDialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'Dialog'\n\nconst TranslationDialogComponent = withTranslation<HTMLDivElement, TranslationDialogComponentProps>(\n  forwardRef((props, ref) => {\n    const { positions = {}, translated, ...restProps } = props\n\n    const dialogPositions = translated ? {} : mergeDeepLeft(positions, POSITIONS)\n\n    return <Styled.PositionedDialogComponent {...restProps} positions={dialogPositions} ref={ref} />\n  })\n)\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента и пропсы \"react-modal\" [v3.16.1](https://reactcommunity.org/react-modal).\n *\n * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.\n *\n * Получить доступ к компоненту, не подключенному к \"react-modal\", можно через Dialog.Component.\n *\n * Полный интерфейс Dialog можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dialog/types.ts), интерфейс Dialog.Component [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n *\n */\nconst Dialog: React.ForwardRefExoticComponent<DialogProps> & { Component: typeof DialogComponent } = Object.assign(\n  withMergedProps<DialogProps, HTMLDivElement>(\n    (props) => {\n      const {\n        size = 's',\n        position = 'center',\n        role = 'dialog',\n        open,\n        preventScrollAfterClose,\n        closeTimeoutMS,\n        portalClassName,\n        className,\n        bodyOpenClassName,\n        htmlOpenClassName,\n        overlayClassName,\n        shouldCloseOnOverlayClick,\n        shouldCloseOnEsc,\n        shouldReturnFocusAfterClose,\n        parentSelector,\n        overlayRef,\n        contentRef,\n        palette,\n        overlayBlur,\n        overlayDisabled,\n        zIndex,\n        onAfterOpen,\n        onAfterClose,\n        onRequestClose,\n        ...dialogProps\n      } = props\n\n      const overlayElementDisabled = dialogProps.draggable || overlayDisabled\n\n      return (\n        <ReactModal\n          isOpen={open}\n          ariaHideApp={false}\n          preventScroll={preventScrollAfterClose}\n          closeTimeoutMS={closeTimeoutMS}\n          portalClassName={portalClassName}\n          className={className}\n          bodyOpenClassName={bodyOpenClassName}\n          htmlOpenClassName={htmlOpenClassName}\n          overlayClassName={overlayClassName}\n          shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n          shouldCloseOnEsc={shouldCloseOnEsc}\n          shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}\n          parentSelector={parentSelector}\n          overlayRef={overlayRef}\n          contentRef={contentRef}\n          onAfterOpen={onAfterOpen}\n          onAfterClose={onAfterClose}\n          onRequestClose={onRequestClose}\n          contentElement={(contentProps) => {\n            const { ref, className, tabIndex, onKeyDown, onMouseDown, onMouseUp, onClick } = contentProps\n\n            return (\n              <TranslationDialogComponent\n                {...dialogProps}\n                ref={ref}\n                size={size}\n                role={role}\n                className={className}\n                tabIndex={tabIndex}\n                position={position}\n                aria-modal={!dialogProps.draggable && !overlayDisabled}\n                palette={{\n                  color: palette.color,\n                  backgroundColor: palette.backgroundColor,\n                  shadowColor: palette.shadowColor,\n                }}\n                zIndex={overlayElementDisabled ? zIndex : undefined}\n                onKeyDown={(evt) => {\n                  if (dialogProps.onKeyDown) dialogProps.onKeyDown(evt)\n                  if (onKeyDown) onKeyDown(evt)\n                }}\n                onMouseDown={(evt) => {\n                  if (dialogProps.onMouseDown) dialogProps.onMouseDown(evt)\n                  if (onMouseDown) onMouseDown(evt)\n                }}\n                onMouseUp={(evt) => {\n                  if (dialogProps.onMouseUp) dialogProps.onMouseUp(evt)\n                  if (onMouseUp) onMouseUp(evt)\n                }}\n                onClick={(evt) => {\n                  if (dialogProps.onClick) dialogProps.onClick(evt)\n                  if (onClick) onClick(evt)\n                }}\n              />\n            )\n          }}\n          overlayElement={(overlayProps, contentElement) => {\n            const { ref, className, onClick, onMouseDown } = overlayProps\n\n            return overlayElementDisabled ? (\n              contentElement\n            ) : (\n              <Styled.DialogOverlay\n                ref={ref}\n                className={className}\n                blur={overlayBlur}\n                palette={{\n                  backgroundColor: palette.overlayBackgroundColor,\n                }}\n                zIndex={zIndex}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n              >\n                {contentElement}\n              </Styled.DialogOverlay>\n            )\n          }}\n        />\n      )\n    },\n    {\n      sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n      displayName: COMPONENT_NAME,\n    }\n  ),\n  {\n    Component: DialogComponent,\n  }\n)\n\nexport { Dialog }\n\nexport { COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","TranslationDialogComponent","withTranslation","forwardRef","props","ref","positions","translated","restProps","dialogPositions","mergeDeepLeft","POSITIONS","_jsx","Styled","Dialog","Object","assign","withMergedProps","size","position","role","open","preventScrollAfterClose","closeTimeoutMS","portalClassName","className","bodyOpenClassName","htmlOpenClassName","overlayClassName","shouldCloseOnOverlayClick","shouldCloseOnEsc","shouldReturnFocusAfterClose","parentSelector","overlayRef","contentRef","palette","overlayBlur","overlayDisabled","zIndex","onAfterOpen","onAfterClose","onRequestClose","dialogProps","overlayElementDisabled","draggable","ReactModal","isOpen","ariaHideApp","preventScroll","contentElement","contentProps","tabIndex","onKeyDown","onMouseDown","onMouseUp","onClick","color","backgroundColor","shadowColor","undefined","evt","overlayElement","overlayProps","blur","overlayBackgroundColor","children","sizes","fancy","SIZES_FANCY","SIZES","displayName","Component","DialogComponent"],"mappings":"0eAUMA,MAAAA,eAAiB,SAEvB,MAAMC,2BAA6BC,gBACjCC,YAAW,CAACC,EAAOC,KACjB,MAAMC,UAAEA,EAAY,CAAE,EAAAC,WAAEA,KAAeC,GAAcJ,EAErD,MAAMK,EAAkBF,EAAa,CAAA,EAAKG,cAAcJ,EAAWK,WAEnE,OAAOC,IAACC,0BAAgC,IAAKL,EAAWF,UAAWG,EAAiBJ,IAAKA,GAAO,KAe9FS,MAAAA,OAA+FC,OAAOC,OAC1GC,iBACGb,IACC,MAAMc,KACJA,EAAO,IAAGC,SACVA,EAAW,SAAQC,KACnBA,EAAO,SAAQC,KACfA,EAAIC,wBACJA,EAAuBC,eACvBA,EAAcC,gBACdA,EAAeC,UACfA,EAASC,kBACTA,EAAiBC,kBACjBA,EAAiBC,iBACjBA,EAAgBC,0BAChBA,EAAyBC,iBACzBA,EAAgBC,4BAChBA,EAA2BC,eAC3BA,EAAcC,WACdA,EAAUC,WACVA,EAAUC,QACVA,EAAOC,YACPA,EAAWC,gBACXA,EAAeC,OACfA,EAAMC,YACNA,EAAWC,aACXA,EAAYC,eACZA,KACGC,GACDtC,EAEJ,MAAMuC,EAAyBD,EAAYE,WAAaP,EAExD,OACEzB,IAACiC,WAAU,CACTC,OAAQzB,EACR0B,aAAa,EACbC,cAAe1B,EACfC,eAAgBA,EAChBC,gBAAiBA,EACjBC,UAAWA,EACXC,kBAAmBA,EACnBC,kBAAmBA,EACnBC,iBAAkBA,EAClBC,0BAA2BA,EAC3BC,iBAAkBA,EAClBC,4BAA6BA,EAC7BC,eAAgBA,EAChBC,WAAYA,EACZC,WAAYA,EACZK,YAAaA,EACbC,aAAcA,EACdC,eAAgBA,EAChBQ,eAAiBC,IACf,MAAM7C,IAAEA,EAAGoB,UAAEA,EAAS0B,SAAEA,EAAQC,UAAEA,EAASC,YAAEA,EAAWC,UAAEA,EAASC,QAAEA,GAAYL,EAEjF,OACEtC,IAACX,2BAA0B,IACrByC,EACJrC,IAAKA,EACLa,KAAMA,EACNE,KAAMA,EACNK,UAAWA,EACX0B,SAAUA,EACVhC,SAAUA,EACV,cAAauB,EAAYE,YAAcP,EACvCF,QAAS,CACPqB,MAAOrB,EAAQqB,MACfC,gBAAiBtB,EAAQsB,gBACzBC,YAAavB,EAAQuB,aAEvBpB,OAAQK,EAAyBL,OAASqB,EAC1CP,UAAYQ,IACNlB,EAAYU,WAAWV,EAAYU,UAAUQ,GAC7CR,GAAWA,EAAUQ,EAAI,EAE/BP,YAAcO,IACRlB,EAAYW,aAAaX,EAAYW,YAAYO,GACjDP,GAAaA,EAAYO,EAAI,EAEnCN,UAAYM,IACNlB,EAAYY,WAAWZ,EAAYY,UAAUM,GAC7CN,GAAWA,EAAUM,EAAI,EAE/BL,QAAUK,IACJlB,EAAYa,SAASb,EAAYa,QAAQK,GACzCL,GAASA,EAAQK,EAAI,GAE3B,EAGNC,eAAgBA,CAACC,EAAcb,KAC7B,MAAM5C,IAAEA,EAAGoB,UAAEA,EAAS8B,QAAEA,EAAOF,YAAEA,GAAgBS,EAEjD,OAAOnB,EACLM,EAEArC,IAACC,cAAoB,CACnBR,IAAKA,EACLoB,UAAWA,EACXsC,KAAM3B,EACND,QAAS,CACPsB,gBAAiBtB,EAAQ6B,wBAE3B1B,OAAQA,EACRiB,QAASA,EACTF,YAAaA,EAAYY,SAExBhB,GAEJ,GAEH,GAGN,CACEiB,MAAQ9D,GAAWA,EAAM+D,MAAQC,YAAcC,MAC/CC,YA5IiB,WA+IrB,CACEC,UAAWC"}

package/components/Dialog/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var responsivePosition=require('../../mixins/responsive-position.js');var DialogComponent=require('../DialogComponent/DialogComponent.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const PositionedDialogComponent=styled__default.default(DialogComponent.DialogComponent).withConfig({shouldForwardProp:o=>!['position','positions','positionXXS','positionXS','positionS','positionM','positionL','positionXL'].includes(o)}).withConfig({displayName:"Dialog__PositionedDialogComponent",componentId:"ui__sc-19crdz4-0"})(["position:fixed;&:focus-visible{outline:none;}",""],responsivePosition.responsivePosition);const DialogOverlay=styled__default.default.div.withConfig({shouldForwardProp:o=>!['palette','blur'].includes(o)}).withConfig({displayName:"Dialog__DialogOverlay",componentId:"ui__sc-19crdz4-1"})(["position:fixed;top:0;right:0;bottom:0;left:0;"," ",""],(o=>o.blur&&"\n      backdrop-filter: blur(10px);\n    "),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-other-overlay']};\n`));exports.DialogOverlay=DialogOverlay,exports.PositionedDialogComponent=PositionedDialogComponent;
+'use strict';var styled=require('styled-components');var responsivePosition=require('../../mixins/responsive-position.js');var DialogComponent=require('../DialogComponent/DialogComponent.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const PositionedDialogComponent=styled__default.default(DialogComponent.DialogComponent).withConfig({shouldForwardProp:o=>!['position','positions','positionXXS','positionXS','positionS','positionM','positionL','positionXL'].includes(o)}).withConfig({displayName:"Dialog__PositionedDialogComponent",componentId:"ui__sc-19crdz4-0"})(["position:fixed;&:focus-visible{outline:none;}",""],responsivePosition.responsivePosition);const DialogOverlay=styled__default.default.div.withConfig({shouldForwardProp:o=>!['palette','blur','zIndex'].includes(o)}).withConfig({displayName:"Dialog__DialogOverlay",componentId:"ui__sc-19crdz4-1"})(["position:fixed;top:0;right:0;bottom:0;left:0;"," "," ",""],(o=>o.blur&&"\n      backdrop-filter: blur(10px);\n    "),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-other-overlay']};\n`));exports.DialogOverlay=DialogOverlay,exports.PositionedDialogComponent=PositionedDialogComponent;
 //# sourceMappingURL=style.js.map

package/components/Dialog/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Dialog/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { responsivePosition } from 'mixins/responsive-position'\nimport type { DialogOverlayPalette, StyledDialogOverlayProps, StyledTranslationDialogComponentProps } from './types'\n\nconst overlayTemplate = (palette: DialogOverlayPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const PositionedDialogComponent = styled(DialogComponent).withConfig<StyledTranslationDialogComponentProps>({\n  shouldForwardProp: (propKey) =>\n    ![\n      'position',\n      'positions',\n      'positionXXS',\n      'positionXS',\n      'positionS',\n      'positionM',\n      'positionL',\n      'positionXL',\n    ].includes(propKey),\n})`\n  position: fixed;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${responsivePosition}\n`\n\nexport const DialogOverlay = styled.div.withConfig<StyledDialogOverlayProps>({\n  shouldForwardProp: (propKey) => !['palette', 'blur'].includes(propKey),\n})`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    props.blur &&\n    `\n      backdrop-filter: blur(10px);\n    `}\n\n  ${(props) =>\n    overlayTemplate({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-other-overlay'],\n    })}\n`\n"],"names":["PositionedDialogComponent","styled","default","DialogComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","responsivePosition","DialogOverlay","div","props","blur","palette","backgroundColor","theme","colors"],"mappings":"6SASO,MAAMA,0BAA4BC,gBAAMC,QAACC,iCAAiBC,WAAkD,CACjHC,kBAAoBC,IACjB,CACC,WACA,YACA,cACA,aACA,YACA,YACA,YACA,cACAC,SAASD,KACbF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,oBAZuCR,CAYvC,CAAA,gDAAA,IAOES,mBAAAA,oBAGG,MAAMC,cAAgBV,gBAAAA,QAAOW,IAAIR,WAAqC,CAC3EC,kBAAoBC,IAAa,CAAC,UAAW,QAAQC,SAASD,KAC9DF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAF2BR,CAE3B,CAAA,gDAAA,IAAA,KAOGY,GACDA,EAAMC,MACN,+CAICD,GAzCsD,yBA2CpCA,EAAME,QAAQC,iBAAmBH,EAAMI,MAAMC,OAAO"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Dialog/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { responsivePosition } from 'mixins/responsive-position'\nimport type { DialogOverlayPalette, StyledDialogOverlayProps, StyledTranslationDialogComponentProps } from './types'\n\nconst overlayTemplate = (palette: DialogOverlayPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const PositionedDialogComponent = styled(DialogComponent).withConfig<StyledTranslationDialogComponentProps>({\n  shouldForwardProp: (propKey) =>\n    ![\n      'position',\n      'positions',\n      'positionXXS',\n      'positionXS',\n      'positionS',\n      'positionM',\n      'positionL',\n      'positionXL',\n    ].includes(propKey),\n})`\n  position: fixed;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${responsivePosition}\n`\n\nexport const DialogOverlay = styled.div.withConfig<StyledDialogOverlayProps>({\n  shouldForwardProp: (propKey) => !['palette', 'blur', 'zIndex'].includes(propKey),\n})`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    props.blur &&\n    `\n      backdrop-filter: blur(10px);\n    `}\n\n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${(props) =>\n    overlayTemplate({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-other-overlay'],\n    })}\n`\n"],"names":["PositionedDialogComponent","styled","default","DialogComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","responsivePosition","DialogOverlay","div","props","blur","zIndex","palette","backgroundColor","theme","colors"],"mappings":"6SASO,MAAMA,0BAA4BC,gBAAMC,QAACC,iCAAiBC,WAAkD,CACjHC,kBAAoBC,IACjB,CACC,WACA,YACA,cACA,aACA,YACA,YACA,YACA,cACAC,SAASD,KACbF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,oBAZuCR,CAYvC,CAAA,gDAAA,IAOES,mBAAAA,oBAGG,MAAMC,cAAgBV,gBAAAA,QAAOW,IAAIR,WAAqC,CAC3EC,kBAAoBC,IAAa,CAAC,UAAW,OAAQ,UAAUC,SAASD,KACxEF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAF2BR,CAE3B,CAAA,gDAAA,IAAA,IAAA,KAOGY,GACDA,EAAMC,MACN,+CAICD,UAAiBA,EAAME,QAAW,UAAY,YAAYF,EAAME,YAEhEF,GA3CsD,yBA6CpCA,EAAMG,QAAQC,iBAAmBJ,EAAMK,MAAMC,OAAO"}

package/components/Dialog/style.mjs

@@ -1,2 +1,2 @@
-import styled from'styled-components';import{responsivePosition}from'../../mixins/responsive-position.mjs';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';const PositionedDialogComponent=styled(DialogComponent).withConfig({shouldForwardProp:o=>!['position','positions','positionXXS','positionXS','positionS','positionM','positionL','positionXL'].includes(o)}).withConfig({displayName:"Dialog__PositionedDialogComponent",componentId:"ui__sc-19crdz4-0"})(["position:fixed;&:focus-visible{outline:none;}",""],responsivePosition);const DialogOverlay=styled.div.withConfig({shouldForwardProp:o=>!['palette','blur'].includes(o)}).withConfig({displayName:"Dialog__DialogOverlay",componentId:"ui__sc-19crdz4-1"})(["position:fixed;top:0;right:0;bottom:0;left:0;"," ",""],(o=>o.blur&&"\n      backdrop-filter: blur(10px);\n    "),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-other-overlay']};\n`));export{DialogOverlay,PositionedDialogComponent};
+import styled from'styled-components';import{responsivePosition}from'../../mixins/responsive-position.mjs';import{DialogComponent}from'../DialogComponent/DialogComponent.mjs';const PositionedDialogComponent=styled(DialogComponent).withConfig({shouldForwardProp:o=>!['position','positions','positionXXS','positionXS','positionS','positionM','positionL','positionXL'].includes(o)}).withConfig({displayName:"Dialog__PositionedDialogComponent",componentId:"ui__sc-19crdz4-0"})(["position:fixed;&:focus-visible{outline:none;}",""],responsivePosition);const DialogOverlay=styled.div.withConfig({shouldForwardProp:o=>!['palette','blur','zIndex'].includes(o)}).withConfig({displayName:"Dialog__DialogOverlay",componentId:"ui__sc-19crdz4-1"})(["position:fixed;top:0;right:0;bottom:0;left:0;"," "," ",""],(o=>o.blur&&"\n      backdrop-filter: blur(10px);\n    "),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),(o=>`\n  background-color: ${o.palette.backgroundColor??o.theme.colors['bg-other-overlay']};\n`));export{DialogOverlay,PositionedDialogComponent};
 //# sourceMappingURL=style.mjs.map

package/components/Dialog/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Dialog/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { responsivePosition } from 'mixins/responsive-position'\nimport type { DialogOverlayPalette, StyledDialogOverlayProps, StyledTranslationDialogComponentProps } from './types'\n\nconst overlayTemplate = (palette: DialogOverlayPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const PositionedDialogComponent = styled(DialogComponent).withConfig<StyledTranslationDialogComponentProps>({\n  shouldForwardProp: (propKey) =>\n    ![\n      'position',\n      'positions',\n      'positionXXS',\n      'positionXS',\n      'positionS',\n      'positionM',\n      'positionL',\n      'positionXL',\n    ].includes(propKey),\n})`\n  position: fixed;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${responsivePosition}\n`\n\nexport const DialogOverlay = styled.div.withConfig<StyledDialogOverlayProps>({\n  shouldForwardProp: (propKey) => !['palette', 'blur'].includes(propKey),\n})`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    props.blur &&\n    `\n      backdrop-filter: blur(10px);\n    `}\n\n  ${(props) =>\n    overlayTemplate({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-other-overlay'],\n    })}\n`\n"],"names":["PositionedDialogComponent","styled","DialogComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","responsivePosition","DialogOverlay","div","props","blur","palette","backgroundColor","theme","colors"],"mappings":"+KASO,MAAMA,0BAA4BC,OAAOC,iBAAiBC,WAAkD,CACjHC,kBAAoBC,IACjB,CACC,WACA,YACA,cACA,aACA,YACA,YACA,YACA,cACAC,SAASD,KACbF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,oBAZuCP,CAYvC,CAAA,gDAAA,IAOEQ,oBAGG,MAAMC,cAAgBT,OAAOU,IAAIR,WAAqC,CAC3EC,kBAAoBC,IAAa,CAAC,UAAW,QAAQC,SAASD,KAC9DF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAF2BP,CAE3B,CAAA,gDAAA,IAAA,KAOGW,GACDA,EAAMC,MACN,+CAICD,GAzCsD,yBA2CpCA,EAAME,QAAQC,iBAAmBH,EAAMI,MAAMC,OAAO"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Dialog/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { DialogComponent } from 'components/DialogComponent'\nimport { responsivePosition } from 'mixins/responsive-position'\nimport type { DialogOverlayPalette, StyledDialogOverlayProps, StyledTranslationDialogComponentProps } from './types'\n\nconst overlayTemplate = (palette: DialogOverlayPalette) => `\n  background-color: ${palette.backgroundColor};\n`\n\nexport const PositionedDialogComponent = styled(DialogComponent).withConfig<StyledTranslationDialogComponentProps>({\n  shouldForwardProp: (propKey) =>\n    ![\n      'position',\n      'positions',\n      'positionXXS',\n      'positionXS',\n      'positionS',\n      'positionM',\n      'positionL',\n      'positionXL',\n    ].includes(propKey),\n})`\n  position: fixed;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${responsivePosition}\n`\n\nexport const DialogOverlay = styled.div.withConfig<StyledDialogOverlayProps>({\n  shouldForwardProp: (propKey) => !['palette', 'blur', 'zIndex'].includes(propKey),\n})`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  ${(props) =>\n    props.blur &&\n    `\n      backdrop-filter: blur(10px);\n    `}\n\n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${(props) =>\n    overlayTemplate({\n      backgroundColor: props.palette.backgroundColor ?? props.theme.colors['bg-other-overlay'],\n    })}\n`\n"],"names":["PositionedDialogComponent","styled","DialogComponent","withConfig","shouldForwardProp","propKey","includes","displayName","componentId","responsivePosition","DialogOverlay","div","props","blur","zIndex","palette","backgroundColor","theme","colors"],"mappings":"+KASO,MAAMA,0BAA4BC,OAAOC,iBAAiBC,WAAkD,CACjHC,kBAAoBC,IACjB,CACC,WACA,YACA,cACA,aACA,YACA,YACA,YACA,cACAC,SAASD,KACbF,WAAA,CAAAI,YAAA,oCAAAC,YAAA,oBAZuCP,CAYvC,CAAA,gDAAA,IAOEQ,oBAGG,MAAMC,cAAgBT,OAAOU,IAAIR,WAAqC,CAC3EC,kBAAoBC,IAAa,CAAC,UAAW,OAAQ,UAAUC,SAASD,KACxEF,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAF2BP,CAE3B,CAAA,gDAAA,IAAA,IAAA,KAOGW,GACDA,EAAMC,MACN,+CAICD,UAAiBA,EAAME,QAAW,UAAY,YAAYF,EAAME,YAEhEF,GA3CsD,yBA6CpCA,EAAMG,QAAQC,iBAAmBJ,EAAMK,MAAMC,OAAO"}

package/components/DialogComponent/DialogComponent.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var DialogContainer=require('./DialogContainer.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var utils=require('./utils.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Visibility=require('../Visibility/Visibility.js');var Spacer=require('../Spacer/Spacer.js');var Icon=require('../Icon/Icon.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:i="s",iconButtonProps:t={},captionProps:s={},titleProps:n={},subtitleProps:o={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},fancy:d,floats:u,children:$,caption:g,title:x,subtitle:y,controls:p,imgLandscapePositionRight:S,imgPortraitPositionBottom:q,className:j,backgroundClassName:h,scrollFadingDisabled:b,draggable:I,loading:m,sizeXXS:z,sizeXS:T,sizeS:v,sizeM:k,sizeL:P,sizeXL:B,onGrab:w,onNudge:C,...R}=e;const D={size:i,sizeXXS:z,sizeXS:T,sizeS:v,sizeM:k,sizeL:P,sizeXL:B};const E=utils.getCommonSizeProps(D);const f=d?j:dom.concatClassNames(j,h);const[M,L]=React.useState(null);const[V,_]=React.useState(null);const A=React.useRef(null);const N=React.useCallback((e=>{e.scrollHeight===e.clientHeight?(L(null),_(null)):(L(e.scrollTop<=0),_(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return React.useLayoutEffect((()=>{const e=A.current;return!b&&e&&(e[resizeHandlerSymbol]=N,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[N,b]),require$$0.jsxs(style.Root,{...R,...D,className:f,fancy:d,ref:r,children:[u&&u(E),d&&require$$0.jsx(style.FancyBackground,{className:h}),d&&t.onClick&&require$$0.jsx(style.PositionedIconButton,{secondary:!0,size:"xxl",icon:"close",inset:{top:0,right:0},...t}),(I||l.portrait&&!q||d)&&require$$0.jsxs(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_PORTRAIT,children:[d&&require$$0.jsx(Spacer.Spacer,{top:96}),I&&require$$0.jsx(style.DraggingHandle,{onPointerDown:w,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:C,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&!q&&require$$0.jsx(style.MediaPortraitContainer,{top:!d,children:require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})})]}),l.landscape&&!S&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),!d&&t.onClick&&require$$0.jsx(style.PositionedIconButton,{size:"l",icon:"close",inset:{top:8,right:8},...t}),require$$0.jsxs(DialogContainer.DialogContainer,{...D,fancy:d,children:[I&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE,children:require$$0.jsx(style.DraggingHandle,{onPointerDown:w,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:C,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})})}),require$$0.jsx(style.Fading,{visible:M===!1}),require$$0.jsx(style.ScrollableContent,{ref:A,tabIndex:0,onScroll:e=>{b||N(e.currentTarget)},onKeyDown:e=>{constants$1.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants$1.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:require$$0.jsxs(require$$0.Fragment,m?{children:[require$$0.jsx(Skeleton.Skeleton,{children:require$$0.jsx(Text.Text,{appearance:"heading",marginBottom:"1.5em",sizes:constants.SIZES_TITLE,...E,...n})}),require$$0.jsx(Skeleton.Skeleton,{width:"90%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...E,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"70%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...E,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"50%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...E,...o})})]}:{children:[g&&require$$0.jsx(Text.Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_CAPTION,...E,...s,children:g}),x&&require$$0.jsx(Text.Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:constants.SIZES_TITLE,...E,...n,children:x}),y&&require$$0.jsx(Text.Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...E,...o,children:y}),$]})}),require$$0.jsx(style.Fading,{visible:V===!1,after:!0}),p&&require$$0.jsx(style.Controls,{children:m?require$$0.jsx(Skeleton.Skeleton,{borderRadius:48,...c,children:require$$0.jsx(Button.Button,{preset:"brand",...E})}):p(E)})]}),l.landscape&&S&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{right:!0,children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),l.portrait&&q&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_PORTRAIT,children:require$$0.jsx(style.MediaPortraitContainer,{bottom:!0,children:require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})})})]})})),{sizes:e=>e.fancy?constants.SIZES_FANCY:constants.SIZES,displayName:'DialogComponent'});exports.SIZES=constants.SIZES,exports.SIZES_FANCY=constants.SIZES_FANCY,exports.DialogComponent=DialogComponent;
+'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var DialogContainer=require('./DialogContainer.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var utils=require('./utils.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Visibility=require('../Visibility/Visibility.js');var Spacer=require('../Spacer/Spacer.js');var Icon=require('../Icon/Icon.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:i="s",iconButtonProps:t={},captionProps:s={},titleProps:n={},subtitleProps:o={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},fancy:d,floats:u,children:$,caption:y,title:g,subtitle:x,controls:p,imgLandscapePositionRight:S,imgPortraitPositionBottom:q,className:j,backgroundClassName:h,scrollFadingDisabled:b,draggable:I,loading:m,sizeXXS:z,sizeXS:T,sizeS:v,sizeM:k,sizeL:P,sizeXL:B,onGrab:w,onNudge:C,...R}=e;const D={size:i,sizeXXS:z,sizeXS:T,sizeS:v,sizeM:k,sizeL:P,sizeXL:B};const E=utils.getCommonSizeProps(D);const f=d?j:dom.concatClassNames(j,h);const[M,L]=React.useState(null);const[V,_]=React.useState(null);const A=React.useRef(null);const N=React.useCallback((e=>{e.scrollHeight===e.clientHeight?(L(null),_(null)):(L(e.scrollTop<=0),_(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return React.useLayoutEffect((()=>{const e=A.current;return!b&&e&&(e[resizeHandlerSymbol]=N,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[N,b]),require$$0.jsxs(style.Root,{...R,...D,className:f,fancy:d,ref:r,children:[u&&u(E),d&&require$$0.jsx(style.FancyBackground,{className:h}),d&&t.onClick&&require$$0.jsx(style.PositionedIconButton,{secondary:!0,size:"xxl",icon:"close",inset:{top:0,right:0},...t}),(I||l.portrait&&!q||d)&&require$$0.jsxs(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_PORTRAIT,children:[d&&require$$0.jsx(Spacer.Spacer,{top:96}),I&&require$$0.jsx(style.DraggingHandle,{onPointerDown:w,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:C,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&!q&&require$$0.jsx(style.MediaPortraitContainer,{top:!d,children:require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})})]}),l.landscape&&!S&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),!d&&t.onClick&&require$$0.jsx(style.PositionedIconButton,{size:"l",icon:"close",inset:{top:8,right:8},...t}),require$$0.jsxs(DialogContainer.DialogContainer,{...D,fancy:d,children:[I&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE,children:require$$0.jsx(style.DraggingHandle,{onPointerDown:w,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:C,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})})}),!b&&require$$0.jsx(style.Fading,{visible:M===!1}),require$$0.jsx(style.ScrollableContent,{ref:A,tabIndex:0,onScroll:e=>{b||N(e.currentTarget)},onKeyDown:e=>{constants$1.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants$1.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:require$$0.jsxs(require$$0.Fragment,m?{children:[require$$0.jsx(Skeleton.Skeleton,{children:require$$0.jsx(Text.Text,{appearance:"heading",marginBottom:"1.5em",sizes:constants.SIZES_TITLE,...E,...n})}),require$$0.jsx(Skeleton.Skeleton,{width:"90%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...E,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"70%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...E,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"50%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...E,...o})})]}:{children:[y&&require$$0.jsx(Text.Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_CAPTION,...E,...s,children:y}),g&&require$$0.jsx(Text.Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:constants.SIZES_TITLE,...E,...n,children:g}),x&&require$$0.jsx(Text.Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...E,...o,children:x}),typeof $=='function'?$(E):$]})}),!b&&require$$0.jsx(style.Fading,{visible:V===!1,after:!0}),p&&require$$0.jsx(style.Controls,{children:m?require$$0.jsx(Skeleton.Skeleton,{borderRadius:48,...c,children:require$$0.jsx(Button.Button,{preset:"brand",...E})}):p(E)})]}),l.landscape&&S&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{right:!0,children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),l.portrait&&q&&require$$0.jsx(Visibility.Visibility,{...D,sizes:constants.VISIBILITY_PORTRAIT,children:require$$0.jsx(style.MediaPortraitContainer,{bottom:!0,children:require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),m?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})})})]})})),{sizes:e=>e.fancy?constants.SIZES_FANCY:constants.SIZES,displayName:'DialogComponent'});exports.SIZES=constants.SIZES,exports.SIZES_FANCY=constants.SIZES_FANCY,exports.DialogComponent=DialogComponent;
 //# sourceMappingURL=DialogComponent.js.map

package/components/DialogComponent/DialogComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","jsx","onClick","secondary","icon","inset","top","right","portrait","jsxs","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"i1BA8BA,MAAMA,oBAAsBC,OAAO,kBAEnC,MAAMC,eAAiB,IAAIC,eAAcC,SAAEC,IACzCA,EAAQC,SAASC,WACJA,EAAMC,OAAOR,sBAAyB,YAC/CO,EAAMC,OAAOR,qBAAqBO,EAAMC,OAC1C,GACA,IAaEC,MAAAA,gBAAyEC,gBAAAA,gBAI7EC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,gBACVA,EAAkB,CAAE,EAAAC,aACpBA,EAAe,CAAE,EAAAC,WACjBA,EAAa,CAAE,EAAAC,cACfA,EAAgB,CAAE,EAAAC,kBAClBA,EAAoB,CAAE,EAAAC,OACtBA,EAAS,CAAE,EAAAC,cACXA,EAAgB,CAAE,EAAAC,MAClBA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,QACRA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,0BACRA,EAAyBC,0BACzBA,EAAyBC,UACzBA,EAASC,oBACTA,EAAmBC,qBACnBA,EAAoBC,UACpBA,EAASC,QACTA,EAAOC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,OACNA,EAAMC,QACNA,KACGC,GACDhC,EAEJ,MAAMiC,EAAkB,CACtB/B,OACAsB,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMK,EAAYC,yBAAmBF,GAErC,MAAMG,EAAiB1B,EAA2DS,EAAnDkB,IAAAA,iBAAiBlB,EAAWC,GAE3D,MAAOkB,EAAWC,GAAgBC,MAAQA,SAAoB,MAC9D,MAAOC,EAAcC,GAAmBF,MAAQA,SAAoB,MAEpE,MAAMG,EAAaC,aAA8B,MAEjD,MAAMC,EAAyBC,MAAWA,aAAEC,IACtCA,EAAEC,eAAiBD,EAAEE,cACvBV,EAAa,MACbG,EAAgB,QAEhBH,EAAaQ,EAAET,WAAa,GAC5BI,EAAgBQ,KAAKC,IAAIJ,EAAEC,aAAeD,EAAEE,aAAeF,EAAET,YAAc,GAC7E,GACC,IAiBH,OAfAc,MAAAA,iBAAgB,KACd,MAAMC,EAAiBV,EAAWW,QAOlC,OALKjC,GAAwBgC,IAC3BA,EAAejE,qBAAuByD,EACtCvD,eAAeiE,QAAQF,IAGlB,KACDA,GACF/D,eAAekE,UAAUH,EAC3B,CACD,GACA,CAACR,EAAwBxB,IAG1BoC,WAAAA,KAACC,MAAAA,KAAW,IAAK1B,KAAeC,EAAiBd,UAAWiB,EAAe1B,MAAOA,EAAOT,IAAKA,EAAIW,SAC/FD,CAAAA,GAAUA,EAAOuB,GACjBxB,GAASiD,WAAAC,IAACF,sBAAsB,CAACvC,UAAWC,IAC5CV,GAASP,EAAgB0D,SACxBF,WAAAA,IAACD,MAAAA,qBAA2B,CAC1BI,WAAS,EACT5D,KAAK,MACL6D,KAAK,QACLC,MAAO,CAAEC,IAAK,EAAGC,MAAO,MACpB/D,KAGNmB,GAAcd,EAAO2D,WAAajD,GAA8BR,IAChE+C,WAAAW,KAACC,sBAAU,IAAKpC,EAAiBqC,MAAOC,UAAoBA,oBAAA3D,SACzDF,CAAAA,GAASiD,WAAAC,IAACY,cAAM,CAACP,IAAK,KACtB3C,GACCqC,WAAAC,IAACF,qBAAqB,CAACe,cAAe3C,EAAOlB,SAC3C+C,WAAAC,IAACF,4BAA4B,CAACgB,SAAU,EAAGC,UAAW5C,EAAQnB,SAC5D+C,WAAAC,IAACgB,UAAI,CAACb,KAAMJ,WAAAA,IAACkB,SAAQrF,YAAKU,KAAM,GAAI4E,MAAM,6BAA8BvE,QAI7EC,EAAO2D,WAAajD,GACnByC,WAAAA,IAACD,MAAAA,uBAA6B,CAACO,KAAMvD,EAAME,SACzC6C,WAAAW,KAACV,oBAAoB,CAAA9C,SACnB+C,CAAAA,WAAAC,IAACF,kBAAkB,CAACqB,YAAY,WAAWC,YAAY,QACtDzD,EACCoC,WAAAC,IAACF,oBAAoB,CAACuB,MAAM,OAAOC,OAAO,OAAOC,aAAc,KAAO1E,IAEtEkD,WAAAC,IAACF,YAAY,CAAC0B,IAAK5E,EAAO2D,mBAOrC3D,EAAO6E,YAAcpE,GACpB0C,WAAAA,IAACU,WAAAA,WAAU,IAAKpC,EAAiBqC,MAAOgB,UAA2BA,2BAAA1E,SACjE6C,WAAAW,KAACV,qBAAqB,CAAA9C,SACpB+C,CAAAA,WAAAC,IAACF,kBAAkB,CAACqB,YAAY,YAAYC,YAAY,QACvDzD,EACCoC,WAAAC,IAACF,oBAAoB,CAACuB,MAAM,OAAOC,OAAO,OAAOC,aAAc,KAAO1E,IAEtEkD,WAAAC,IAACF,YAAY,CAAC0B,IAAK5E,EAAO6E,kBAKhC3E,GAASP,EAAgB0D,SACzBF,WAAAA,IAACD,MAAAA,qBAA2B,CAACxD,KAAK,IAAI6D,KAAK,QAAQC,MAAO,CAAEC,IAAK,EAAGC,MAAO,MAAS/D,IAEtFsD,WAAAW,KAACmB,gCAAe,IAAKtD,EAAiBvB,MAAOA,EAAME,SAChDU,CAAAA,GACCqC,WAAAC,IAACS,sBAAU,IAAKpC,EAAiBqC,MAAOkB,UAAqBA,qBAAA5E,SAC3D+C,WAAAC,IAACF,qBAAqB,CAACe,cAAe3C,EAAOlB,SAC3C+C,WAAAC,IAACF,4BAA4B,CAACgB,SAAU,EAAGC,UAAW5C,EAAQnB,SAC5D+C,WAAAC,IAACgB,UAAI,CAACb,KAAMJ,WAAAA,IAACkB,SAAQrF,YAAKU,KAAM,GAAI4E,MAAM,6BAA8BvE,UAKhFoD,WAAAC,IAACF,aAAa,CAAC+B,QAASnD,KAAc,IACtCqB,WAAAC,IAACF,wBAAwB,CACvBzD,IAAK0C,EACL+B,SAAU,EACVgB,SAAWC,IACJtE,GACHwB,EAAuB8C,EAAIC,cAC7B,EAEFjB,UAAYgB,IACNE,YAAYA,aAACC,QAAQC,SAASJ,EAAIK,MACpCL,EAAIM,iBACJN,EAAIC,cAAcM,SAAS,GAAI,KACtBL,YAAYA,aAACM,UAAUJ,SAASJ,EAAIK,OAC7CL,EAAIM,iBACJN,EAAIC,cAAcM,SAAS,EAAG,IAChC,EACAtF,SAGA6C,WAAAW,KAAAgC,oBADD7E,EACC,CAAAX,SAAA,CACE+C,WAAAC,IAACyC,kBAAQ,CAAAzF,SACP+C,WAAAC,IAAC0C,UAAI,CAACC,WAAW,UAAUC,aAAa,QAAQlC,MAAOmC,UAAYA,eAAKvE,KAAe7B,MAEzFsD,WAAAC,IAACyC,kBAAQ,CAACpB,MAAM,MAAKrE,SACnB+C,WAAAC,IAAC0C,UAAI,CACHC,WAAW,OACXC,aAAa,QACblC,MAAOoC,UAAeA,kBAClBxE,KACA5B,MAGRqD,WAAAC,IAACyC,kBAAQ,CAACpB,MAAM,MAAKrE,SACnB+C,WAAAC,IAAC0C,UAAI,CACHC,WAAW,OACXC,aAAa,QACblC,MAAOoC,UAAeA,kBAClBxE,KACA5B,MAGRqD,WAAAC,IAACyC,kBAAQ,CAACpB,MAAM,MAAKrE,SACnB+C,WAAAC,IAAC0C,UAAI,CACHC,WAAW,OACXC,aAAa,QACblC,MAAOoC,UAAeA,kBAClBxE,KACA5B,QAKV,CAAAM,SACGC,CAAAA,GACC8C,WAAAC,IAAC0C,UAAI,CACHC,WAAW,OACXzB,MAAM,0BACN6B,UAAU,aACVH,aAAa,QACblC,MAAOsC,UAAcA,iBACjB1E,KACA9B,EAAYQ,SAEfC,IAGJC,GACC6C,WAAAC,IAAC0C,UAAI,CACHO,GAAG,KACHN,WAAW,UACXzB,MAAM,yBACN6B,UAAU,aACVH,aAAa,QACblC,MAAOmC,UAAYA,eACfvE,KACA7B,EAAUO,SAEbE,IAGJC,GACC4C,WAAAC,IAAC0C,UAAI,CACHO,GAAG,IACHN,WAAW,OACXzB,MAAM,yBACN6B,UAAU,aACVH,aAAa,QACblC,MAAOoC,UAAeA,kBAClBxE,KACA5B,EAAaM,SAEhBG,IAGJH,OAIP+C,WAAAC,IAACF,aAAa,CAAC+B,QAAShD,KAAiB,EAAOqE,OAAK,IACpD9F,GACC2C,WAAAC,IAACF,eAAe,CAAA9C,SACbW,EACCoC,WAAAC,IAACyC,kBAAQ,CAAClB,aAAc,MAAQ1E,EAAaG,SAC3C+C,WAAAC,IAACmD,cAAM,CAACC,OAAO,WAAY9E,MAG7BlB,EAASkB,QAKhB1B,EAAO6E,WAAapE,GACnB0C,WAAAA,IAACU,WAAAA,WAAU,IAAKpC,EAAiBqC,MAAOgB,UAA2BA,2BAAA1E,SACjE6C,WAAAW,KAACV,qBAAqB,CAACQ,OAAK,EAAAtD,SAC1B+C,CAAAA,WAAAC,IAACF,kBAAkB,CAACqB,YAAY,YAAYC,YAAY,QACvDzD,EACCoC,WAAAC,IAACF,oBAAoB,CAACuB,MAAM,OAAOC,OAAO,OAAOC,aAAc,KAAO1E,IAEtEkD,WAAAC,IAACF,YAAY,CAAC0B,IAAK5E,EAAO6E,iBAKjC7E,EAAO2D,UAAYjD,GAClByC,WAAAA,IAACU,WAAAA,WAAU,IAAKpC,EAAiBqC,MAAOC,UAAoBA,oBAAA3D,SAC1D+C,WAAAC,IAACF,6BAA6B,CAACuD,QAAM,EAAArG,SACnC6C,WAAAW,KAACV,oBAAoB,CAAA9C,SACnB+C,CAAAA,WAAAC,IAACF,kBAAkB,CAACqB,YAAY,WAAWC,YAAY,QACtDzD,EACCoC,WAAAC,IAACF,oBAAoB,CAACuB,MAAM,OAAOC,OAAO,OAAOC,aAAc,KAAO1E,IAEtEkD,WAAAC,IAACF,YAAY,CAAC0B,IAAK5E,EAAO2D,oBAMxB,IAGlB,CACEG,MAAQtE,GAAWA,EAAMU,MAAQwG,UAAWA,YAAGC,UAAMA,MACrDC,YAtTmB"}
+{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollTop === false} />}\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {typeof children === 'function' ? children(sizeProps) : children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollBottom === false} after />}\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","jsx","onClick","secondary","icon","inset","top","right","portrait","jsxs","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}

package/components/DialogComponent/DialogComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useState,useRef,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{DialogContainer}from'./DialogContainer.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,PositionedIconButton,DraggingHandle,DraggingIconContainer,MediaPortraitContainer,MediaPortrait,Placeholder,MediaSkeleton,Media,MediaLandscape,Fading,ScrollableContent,Controls}from'./style.mjs';import{getCommonSizeProps}from'./utils.mjs';import{SIZES_FANCY,SIZES,VISIBILITY_PORTRAIT,VISIBILITY_LANDSCAPE_MEDIA,VISIBILITY_LANDSCAPE,SIZES_TITLE,SIZES_SUBTITLE,SIZES_CAPTION}from'./constants.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Visibility}from'../Visibility/Visibility.mjs';import{Spacer}from'../Spacer/Spacer.mjs';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps(forwardRef(((e,o)=>{const{size:r="s",iconButtonProps:i={},captionProps:t={},titleProps:s={},subtitleProps:n={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},fancy:d,floats:m,children:g,caption:p,title:S,subtitle:I,controls:x,imgLandscapePositionRight:j,imgPortraitPositionBottom:h,className:b,backgroundClassName:y,scrollFadingDisabled:u,draggable:T,loading:z,sizeXXS:f,sizeXS:P,sizeS:B,sizeM:C,sizeL:E,sizeXL:k,onGrab:D,onNudge:L,...M}=e;const w={size:r,sizeXXS:f,sizeXS:P,sizeS:B,sizeM:C,sizeL:E,sizeXL:k};const R=getCommonSizeProps(w);const _=d?b:concatClassNames(b,y);const[A,v]=useState(null);const[N,V]=useState(null);const Z=useRef(null);const F=useCallback((e=>{e.scrollHeight===e.clientHeight?(v(null),V(null)):(v(e.scrollTop<=0),V(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return useLayoutEffect((()=>{const e=Z.current;return!u&&e&&(e[resizeHandlerSymbol]=F,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[F,u]),jsxs(Root,{...M,...w,className:_,fancy:d,ref:o,children:[m&&m(R),d&&jsx(FancyBackground,{className:y}),d&&i.onClick&&jsx(PositionedIconButton,{secondary:!0,size:"xxl",icon:"close",inset:{top:0,right:0},...i}),(T||l.portrait&&!h||d)&&jsxs(Visibility,{...w,sizes:VISIBILITY_PORTRAIT,children:[d&&jsx(Spacer,{top:96}),T&&jsx(DraggingHandle,{onPointerDown:D,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:L,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&!h&&jsx(MediaPortraitContainer,{top:!d,children:jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})})]}),l.landscape&&!j&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),!d&&i.onClick&&jsx(PositionedIconButton,{size:"l",icon:"close",inset:{top:8,right:8},...i}),jsxs(DialogContainer,{...w,fancy:d,children:[T&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE,children:jsx(DraggingHandle,{onPointerDown:D,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:L,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})})}),jsx(Fading,{visible:A===!1}),jsx(ScrollableContent,{ref:Z,tabIndex:0,onScroll:e=>{u||F(e.currentTarget)},onKeyDown:e=>{keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxs(Fragment,z?{children:[jsx(Skeleton,{children:jsx(Text,{appearance:"heading",marginBottom:"1.5em",sizes:SIZES_TITLE,...R,...s})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...R,...n})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...R,...n})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{appearance:"body",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...R,...n})})]}:{children:[p&&jsx(Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_CAPTION,...R,...t,children:p}),S&&jsx(Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:SIZES_TITLE,...R,...s,children:S}),I&&jsx(Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...R,...n,children:I}),g]})}),jsx(Fading,{visible:N===!1,after:!0}),x&&jsx(Controls,{children:z?jsx(Skeleton,{borderRadius:48,...c,children:jsx(Button,{preset:"brand",...R})}):x(R)})]}),l.landscape&&j&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{right:!0,children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),l.portrait&&h&&jsx(Visibility,{...w,sizes:VISIBILITY_PORTRAIT,children:jsx(MediaPortraitContainer,{bottom:!0,children:jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})})})]})})),{sizes:e=>e.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent,SIZES,SIZES_FANCY};
+import{forwardRef,useState,useRef,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{DialogContainer}from'./DialogContainer.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,PositionedIconButton,DraggingHandle,DraggingIconContainer,MediaPortraitContainer,MediaPortrait,Placeholder,MediaSkeleton,Media,MediaLandscape,Fading,ScrollableContent,Controls}from'./style.mjs';import{getCommonSizeProps}from'./utils.mjs';import{SIZES_FANCY,SIZES,VISIBILITY_PORTRAIT,VISIBILITY_LANDSCAPE_MEDIA,VISIBILITY_LANDSCAPE,SIZES_TITLE,SIZES_SUBTITLE,SIZES_CAPTION}from'./constants.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Visibility}from'../Visibility/Visibility.mjs';import{Spacer}from'../Spacer/Spacer.mjs';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps(forwardRef(((e,o)=>{const{size:r="s",iconButtonProps:i={},captionProps:t={},titleProps:s={},subtitleProps:n={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},fancy:d,floats:m,children:p,caption:g,title:S,subtitle:I,controls:x,imgLandscapePositionRight:j,imgPortraitPositionBottom:h,className:b,backgroundClassName:y,scrollFadingDisabled:u,draggable:T,loading:z,sizeXXS:f,sizeXS:P,sizeS:B,sizeM:C,sizeL:E,sizeXL:k,onGrab:D,onNudge:L,...M}=e;const w={size:r,sizeXXS:f,sizeXS:P,sizeS:B,sizeM:C,sizeL:E,sizeXL:k};const R=getCommonSizeProps(w);const _=d?b:concatClassNames(b,y);const[A,v]=useState(null);const[N,V]=useState(null);const Z=useRef(null);const F=useCallback((e=>{e.scrollHeight===e.clientHeight?(v(null),V(null)):(v(e.scrollTop<=0),V(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return useLayoutEffect((()=>{const e=Z.current;return!u&&e&&(e[resizeHandlerSymbol]=F,resizeObserver.observe(e)),()=>{e&&resizeObserver.unobserve(e)}}),[F,u]),jsxs(Root,{...M,...w,className:_,fancy:d,ref:o,children:[m&&m(R),d&&jsx(FancyBackground,{className:y}),d&&i.onClick&&jsx(PositionedIconButton,{secondary:!0,size:"xxl",icon:"close",inset:{top:0,right:0},...i}),(T||l.portrait&&!h||d)&&jsxs(Visibility,{...w,sizes:VISIBILITY_PORTRAIT,children:[d&&jsx(Spacer,{top:96}),T&&jsx(DraggingHandle,{onPointerDown:D,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:L,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&!h&&jsx(MediaPortraitContainer,{top:!d,children:jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})})]}),l.landscape&&!j&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),!d&&i.onClick&&jsx(PositionedIconButton,{size:"l",icon:"close",inset:{top:8,right:8},...i}),jsxs(DialogContainer,{...w,fancy:d,children:[T&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE,children:jsx(DraggingHandle,{onPointerDown:D,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:L,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})})}),!u&&jsx(Fading,{visible:A===!1}),jsx(ScrollableContent,{ref:Z,tabIndex:0,onScroll:e=>{u||F(e.currentTarget)},onKeyDown:e=>{keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxs(Fragment,z?{children:[jsx(Skeleton,{children:jsx(Text,{appearance:"heading",marginBottom:"1.5em",sizes:SIZES_TITLE,...R,...s})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...R,...n})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...R,...n})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{appearance:"body",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...R,...n})})]}:{children:[g&&jsx(Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_CAPTION,...R,...t,children:g}),S&&jsx(Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:SIZES_TITLE,...R,...s,children:S}),I&&jsx(Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...R,...n,children:I}),typeof p=='function'?p(R):p]})}),!u&&jsx(Fading,{visible:N===!1,after:!0}),x&&jsx(Controls,{children:z?jsx(Skeleton,{borderRadius:48,...c,children:jsx(Button,{preset:"brand",...R})}):x(R)})]}),l.landscape&&j&&jsx(Visibility,{...w,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{right:!0,children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),l.portrait&&h&&jsx(Visibility,{...w,sizes:VISIBILITY_PORTRAIT,children:jsx(MediaPortraitContainer,{bottom:!0,children:jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),z?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})})})]})})),{sizes:e=>e.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent,SIZES,SIZES_FANCY};
 //# sourceMappingURL=DialogComponent.mjs.map

package/components/DialogComponent/DialogComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","onClick","secondary","icon","inset","top","right","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport { Spacer } from 'components/Spacer'\nimport { concatClassNames } from 'shared/utils/dom'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      fancy,\n      floats,\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      imgPortraitPositionBottom,\n      className,\n      backgroundClassName,\n      scrollFadingDisabled,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      const observerTarget = scrollable.current\n\n      if (!scrollFadingDisabled && observerTarget) {\n        observerTarget[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(observerTarget)\n      }\n\n      return () => {\n        if (observerTarget) {\n          resizeObserver.unobserve(observerTarget)\n        }\n      }\n    }, [handleScrollThresholds, scrollFadingDisabled])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} className={rootClassName} fancy={fancy} ref={ref}>\n        {floats && floats(sizeProps)}\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton\n            secondary\n            size='xxl'\n            icon='close'\n            inset={{ top: 0, right: 0 }}\n            {...iconButtonProps}\n          />\n        )}\n        {(draggable || (imgSrc.portrait && !imgPortraitPositionBottom) || fancy) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {fancy && <Spacer top={96} />}\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && !imgPortraitPositionBottom && (\n              <Styled.MediaPortraitContainer top={!fancy}>\n                <Styled.MediaPortrait>\n                  <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                  {loading ? (\n                    <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                  ) : (\n                    <Styled.Media src={imgSrc.portrait} />\n                  )}\n                </Styled.MediaPortrait>\n              </Styled.MediaPortraitContainer>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {!fancy && iconButtonProps.onClick && (\n          <Styled.PositionedIconButton size='l' icon='close' inset={{ top: 8, right: 8 }} {...iconButtonProps} />\n        )}\n        <DialogContainer {...dialogSizeProps} fancy={fancy}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollTop === false} />}\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!scrollFadingDisabled) {\n                handleScrollThresholds(evt.currentTarget)\n              }\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {typeof children === 'function' ? children(sizeProps) : children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          {!scrollFadingDisabled && <Styled.Fading visible={scrollBottom === false} after />}\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape right>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {imgSrc.portrait && imgPortraitPositionBottom && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            <Styled.MediaPortraitContainer bottom>\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            </Styled.MediaPortraitContainer>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES, SIZES_FANCY }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","fancy","floats","children","caption","title","subtitle","controls","imgLandscapePositionRight","imgPortraitPositionBottom","className","backgroundClassName","scrollFadingDisabled","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","rootClassName","concatClassNames","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","observerTarget","current","observe","unobserve","_jsxs","Styled","_jsx","onClick","secondary","icon","inset","top","right","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","Spacer","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","bottom","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}

package/components/DialogComponent/style.js

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var IconButton=require('../IconButton/IconButton.js');var Skeleton=require('../Skeleton/Skeleton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=style.createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ScrollableContent=styled__default.default.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus.focus);const Controls=styled__default.default.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `),focus.focus);const PositionedIconButton=styled__default.default(IconButton.IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled__default.default.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled__default.default.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;":"\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;"));const MediaSkeleton=styled__default.default(Skeleton.Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${o.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `));const MediaPortraitContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    "),(o=>o.bottom&&"\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    "));exports.Container=Container,exports.Controls=Controls,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.MediaPortrait=MediaPortrait,exports.MediaPortraitContainer=MediaPortraitContainer,exports.MediaSkeleton=MediaSkeleton,exports.Placeholder=Placeholder,exports.PositionedIconButton=PositionedIconButton,exports.Root=Root,exports.ScrollableContent=ScrollableContent;
+'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var IconButton=require('../IconButton/IconButton.js');var Skeleton=require('../Skeleton/Skeleton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)));const shouldForwardDialogContainerProp=style.createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ScrollableContent=styled__default.default.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus.focus);const Controls=styled__default.default.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `),focus.focus);const PositionedIconButton=styled__default.default(IconButton.IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled__default.default.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled__default.default.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;":"\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;"));const MediaSkeleton=styled__default.default(Skeleton.Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${o.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `));const MediaPortraitContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    "),(o=>o.bottom&&"\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    "));exports.Container=Container,exports.Controls=Controls,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.MediaPortrait=MediaPortrait,exports.MediaPortraitContainer=MediaPortraitContainer,exports.MediaSkeleton=MediaSkeleton,exports.Placeholder=Placeholder,exports.PositionedIconButton=PositionedIconButton,exports.Root=Root,exports.ScrollableContent=ScrollableContent;
 //# sourceMappingURL=style.js.map

package/components/DialogComponent/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContainerProps,\n  StyledDialogFadingProps,\n  StyledPlaceholderProps,\n  StyledDialogMediaProps,\n  StyledMediaContainerProps,\n  StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size: 100% 32px, cover;\n  mask-position: 0 56px, 0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n  shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  min-height: 85px;\n  flex-grow: 1;\n\n  ${focus}\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n  shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n  position: absolute;\n  z-index: 3;\n  ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n  .withConfig<StyledPlaceholderProps>({\n    shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n  })\n  .attrs<StyledPlaceholderProps>((props) => ({\n    xmlns: 'http://www.w3.org/2000/svg',\n    viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n    width: props.orientation === 'portrait' ? '100%' : undefined,\n    height: props.orientation === 'landscape' ? '100%' : undefined,\n  }))`\n  display: block;\n`\n\nexport const MediaPortrait = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n  box-sizing: border-box;\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n\n  ${(props) =>\n    props.right\n      ? `\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;`\n      : `\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n  position: absolute;\n  top: 0;\n  left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${props.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n\n  ${(props) =>\n    props.top &&\n    `\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    `}\n\n  ${(props) =>\n    props.bottom &&\n    `\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","default","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContainerProps,\n  StyledDialogFadingProps,\n  StyledPlaceholderProps,\n  StyledDialogMediaProps,\n  StyledMediaContainerProps,\n  StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey)\n)\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size: 100% 32px, cover;\n  mask-position: 0 56px, 0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n  \n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n  shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  min-height: 85px;\n  flex-grow: 1;\n\n  ${focus}\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n  shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n  position: absolute;\n  z-index: 3;\n  ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n  .withConfig<StyledPlaceholderProps>({\n    shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n  })\n  .attrs<StyledPlaceholderProps>((props) => ({\n    xmlns: 'http://www.w3.org/2000/svg',\n    viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n    width: props.orientation === 'portrait' ? '100%' : undefined,\n    height: props.orientation === 'landscape' ? '100%' : undefined,\n  }))`\n  display: block;\n`\n\nexport const MediaPortrait = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n  box-sizing: border-box;\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n\n  ${(props) =>\n    props.right\n      ? `\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;`\n      : `\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n  position: absolute;\n  top: 0;\n  left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${props.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n\n  ${(props) =>\n    props.top &&\n    `\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    `}\n\n  ${(props) =>\n    props.bottom &&\n    `\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","default","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","zIndex","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}

package/components/DialogComponent/style.mjs

@@ -1,2 +1,2 @@
-import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import maskRectangle from'./images/mask-rectangle.svg.mjs';import maskSlope from'./images/mask-slope.svg.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope,maskRectangle);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),responsiveSize);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const ScrollableContent=styled.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus);const Controls=styled.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `),focus);const PositionedIconButton=styled(IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;":"\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;"));const MediaSkeleton=styled(Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${o.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `));const MediaPortraitContainer=styled.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    "),(o=>o.bottom&&"\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    "));export{Container,Controls,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Media,MediaLandscape,MediaPortrait,MediaPortraitContainer,MediaSkeleton,Placeholder,PositionedIconButton,Root,ScrollableContent};
+import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import maskRectangle from'./images/mask-rectangle.svg.mjs';import maskSlope from'./images/mask-slope.svg.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)));const shouldForwardDialogContainerProp=createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope,maskRectangle);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const ScrollableContent=styled.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus);const Controls=styled.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n      background-color: ${o.theme.colors['bg-onmain-tertiary']};\n    `),focus);const PositionedIconButton=styled(IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;":"\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;"));const MediaSkeleton=styled(Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${o.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `));const MediaPortraitContainer=styled.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    "),(o=>o.bottom&&"\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    "));export{Container,Controls,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Media,MediaLandscape,MediaPortrait,MediaPortraitContainer,MediaSkeleton,Placeholder,PositionedIconButton,Root,ScrollableContent};
 //# sourceMappingURL=style.mjs.map

package/components/DialogComponent/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContainerProps,\n  StyledDialogFadingProps,\n  StyledPlaceholderProps,\n  StyledDialogMediaProps,\n  StyledMediaContainerProps,\n  StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size: 100% 32px, cover;\n  mask-position: 0 56px, 0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n  shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  min-height: 85px;\n  flex-grow: 1;\n\n  ${focus}\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n  shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n  position: absolute;\n  z-index: 3;\n  ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n  .withConfig<StyledPlaceholderProps>({\n    shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n  })\n  .attrs<StyledPlaceholderProps>((props) => ({\n    xmlns: 'http://www.w3.org/2000/svg',\n    viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n    width: props.orientation === 'portrait' ? '100%' : undefined,\n    height: props.orientation === 'landscape' ? '100%' : undefined,\n  }))`\n  display: block;\n`\n\nexport const MediaPortrait = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n  box-sizing: border-box;\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n\n  ${(props) =>\n    props.right\n      ? `\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;`\n      : `\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n  position: absolute;\n  top: 0;\n  left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${props.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n\n  ${(props) =>\n    props.top &&\n    `\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    `}\n\n  ${(props) =>\n    props.bottom &&\n    `\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContainerProps,\n  StyledDialogFadingProps,\n  StyledPlaceholderProps,\n  StyledDialogMediaProps,\n  StyledMediaContainerProps,\n  StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey)\n)\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n  shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  z-index: 1;\n\n  &::before,\n  &::after {\n    transition-property: opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n    pointer-events: none;\n  }\n\n  ${(props) =>\n    props.after\n      ? `\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n            `\n      : `\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${props.visible ? 1 : 0};\n          }\n      `}\n`\n\nexport const FancyBackground = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  mask-image: url(${maskSlope}), url(${maskRectangle});\n  mask-repeat: no-repeat, no-repeat;\n  mask-size: 100% 32px, cover;\n  mask-position: 0 56px, 0 87px;\n  border-radius: inherit;\n`\n\nconst template = {\n  default: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    background-color: ${palette.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n  fancy: (palette: DialogComponentPalette) => `\n    color: ${palette.color};\n    ${FancyBackground} {\n      background-color: ${palette.backgroundColor};\n    }\n    ${Fading} {\n      color: ${palette.backgroundColor};\n    }\n  `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n  shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  isolation: isolate;\n\n  ${(props) =>\n    (props.fancy ? template.fancy : template.default)({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${(props) =>\n    props.dragging &&\n    `\n      box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n      `}\n  \n  ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n  ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n  shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  min-height: 85px;\n  flex-grow: 1;\n\n  ${focus}\n`\n\nexport const Controls = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  flex-shrink: 0;\n  padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  cursor: grab;\n  touch-action: none;\n  z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  padding: 3px 12px;\n  border-radius: 12px;\n\n  & > * {\n    height: 0.25em;\n  }\n\n  ${(props) => `\n      background-color: ${props.theme.colors['bg-onmain-tertiary']};\n    `}\n\n  ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n  shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n  position: absolute;\n  z-index: 3;\n  ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n  .withConfig<StyledPlaceholderProps>({\n    shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n  })\n  .attrs<StyledPlaceholderProps>((props) => ({\n    xmlns: 'http://www.w3.org/2000/svg',\n    viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n    width: props.orientation === 'portrait' ? '100%' : undefined,\n    height: props.orientation === 'landscape' ? '100%' : undefined,\n  }))`\n  display: block;\n`\n\nexport const MediaPortrait = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n  box-sizing: border-box;\n  position: relative;\n  height: 100%;\n  overflow: hidden;\n\n  ${(props) =>\n    props.right\n      ? `\n        border-top-right-radius: inherit;\n        border-bottom-right-radius: inherit;`\n      : `\n        border-top-left-radius: inherit;\n        border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n  position: absolute;\n  top: 0;\n  left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  ${(props) => `\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n      background-image: url(${props.src});\n      background-size: contain;\n      background-repeat: no-repeat;\n      background-position: 50%;\n    `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n  shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n\n  ${(props) =>\n    props.top &&\n    `\n      border-top-left-radius: inherit;\n      border-top-right-radius: inherit;\n    `}\n\n  ${(props) =>\n    props.bottom &&\n    `\n      border-bottom-left-radius: inherit;\n      border-bottom-right-radius: inherit;\n    `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","zIndex","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}

package/components/DialogComponent/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/DialogComponent/utils.ts"],"sourcesContent":["import type { Size } from 'shared/types'\nimport type { DialogComponentSizeProps, DialogComponentSize } from './types'\n\nconst dialogMappingRules: Partial<Record<DialogComponentSize, Size>> = {\n  'xxl-landscape': 'xxl',\n  'xl-landscape': 'xl',\n  'l-landscape': 'l',\n}\n\nexport const getCommonSizeProps = (\n  dialogSizeProps: DialogComponentSizeProps\n): Partial<Record<keyof DialogComponentSizeProps, Size>> =>\n  Object.keys(dialogSizeProps).reduce((sizeProps, propKey) => {\n    const dialogSize = dialogSizeProps[propKey]\n\n    if (Array.isArray(dialogSize)) {\n      sizeProps[propKey] = dialogSize.map((size) => dialogMappingRules[size] ?? size)\n    } else if (typeof dialogSize === 'string') {\n      sizeProps[propKey] = dialogMappingRules[dialogSize] ?? dialogSize\n    } else {\n      sizeProps[propKey] = dialogSize\n    }\n\n    return sizeProps\n  }, {})\n"],"names":["dialogMappingRules","dialogSizeProps","Object","keys","reduce","sizeProps","propKey","dialogSize","Array","isArray","map","size"],"mappings":"aAGA,MAAMA,mBAAiE,CACrE,gBAAiB,MACjB,eAAgB,KAChB,cAAe,gCAIfC,GAEAC,OAAOC,KAAKF,GAAiBG,QAAO,CAACC,EAAWC,KAC9C,MAAMC,EAAaN,EAAgBK,GAUnC,OAPED,EAAUC,GADRE,MAAMC,QAAQF,GACKA,EAAWG,KAAKC,GAASX,mBAAmBW,IAASA,WAC1DJ,GAAe,SACVP,mBAAmBO,IAAeA,EAElCA,EAGhBF,CAAS,GACf,CAAE"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/DialogComponent/utils.ts"],"sourcesContent":["import type { ResponsiveSizeProps } from 'shared/interfaces'\nimport type { DialogComponentSizeProps, DialogComponentCommonSize, DialogComponentSize } from './types'\n\nconst dialogMappingRules: Partial<Record<DialogComponentSize, DialogComponentCommonSize>> = {\n  'xxl-landscape': 'xxl',\n  'xl-landscape': 'xl',\n  'l-landscape': 'l',\n}\n\nexport const getCommonSizeProps = (dialogSizeProps: DialogComponentSizeProps) =>\n  Object.keys(dialogSizeProps).reduce<\n    Pick<\n      ResponsiveSizeProps<DialogComponentCommonSize>,\n      'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'\n    >\n  >((sizeProps, propKey) => {\n    const dialogSize = dialogSizeProps[propKey as keyof DialogComponentSizeProps]\n\n    if (Array.isArray(dialogSize)) {\n      sizeProps[propKey] = dialogSize.map((size) => dialogMappingRules[size] ?? size)\n    } else if (typeof dialogSize === 'string') {\n      sizeProps[propKey] = dialogMappingRules[dialogSize] ?? dialogSize\n    } else {\n      sizeProps[propKey] = dialogSize\n    }\n\n    return sizeProps\n  }, {})\n"],"names":["dialogMappingRules","dialogSizeProps","Object","keys","reduce","sizeProps","propKey","dialogSize","Array","isArray","map","size"],"mappings":"aAGA,MAAMA,mBAAsF,CAC1F,gBAAiB,MACjB,eAAgB,KAChB,cAAe,gCAGkBC,GACjCC,OAAOC,KAAKF,GAAiBG,QAK3B,CAACC,EAAWC,KACZ,MAAMC,EAAaN,EAAgBK,GAUnC,OAPED,EAAUC,GADRE,MAAMC,QAAQF,GACKA,EAAWG,KAAKC,GAASX,mBAAmBW,IAASA,WAC1DJ,GAAe,SACVP,mBAAmBO,IAAeA,EAElCA,EAGhBF,CAAS,GACf,CAAE"}

package/components/DialogComponent/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../src/components/DialogComponent/utils.ts"],"sourcesContent":["import type { Size } from 'shared/types'\nimport type { DialogComponentSizeProps, DialogComponentSize } from './types'\n\nconst dialogMappingRules: Partial<Record<DialogComponentSize, Size>> = {\n  'xxl-landscape': 'xxl',\n  'xl-landscape': 'xl',\n  'l-landscape': 'l',\n}\n\nexport const getCommonSizeProps = (\n  dialogSizeProps: DialogComponentSizeProps\n): Partial<Record<keyof DialogComponentSizeProps, Size>> =>\n  Object.keys(dialogSizeProps).reduce((sizeProps, propKey) => {\n    const dialogSize = dialogSizeProps[propKey]\n\n    if (Array.isArray(dialogSize)) {\n      sizeProps[propKey] = dialogSize.map((size) => dialogMappingRules[size] ?? size)\n    } else if (typeof dialogSize === 'string') {\n      sizeProps[propKey] = dialogMappingRules[dialogSize] ?? dialogSize\n    } else {\n      sizeProps[propKey] = dialogSize\n    }\n\n    return sizeProps\n  }, {})\n"],"names":["dialogMappingRules","getCommonSizeProps","dialogSizeProps","Object","keys","reduce","sizeProps","propKey","dialogSize","Array","isArray","map","size"],"mappings":"AAGA,MAAMA,mBAAiE,CACrE,gBAAiB,MACjB,eAAgB,KAChB,cAAe,WAGJC,mBACXC,GAEAC,OAAOC,KAAKF,GAAiBG,QAAO,CAACC,EAAWC,KAC9C,MAAMC,EAAaN,EAAgBK,GAUnC,OAPED,EAAUC,GADRE,MAAMC,QAAQF,GACKA,EAAWG,KAAKC,GAASZ,mBAAmBY,IAASA,WAC1DJ,GAAe,SACVR,mBAAmBQ,IAAeA,EAElCA,EAGhBF,CAAS,GACf,CAAE"}
+{"version":3,"file":"utils.mjs","sources":["../../../../src/components/DialogComponent/utils.ts"],"sourcesContent":["import type { ResponsiveSizeProps } from 'shared/interfaces'\nimport type { DialogComponentSizeProps, DialogComponentCommonSize, DialogComponentSize } from './types'\n\nconst dialogMappingRules: Partial<Record<DialogComponentSize, DialogComponentCommonSize>> = {\n  'xxl-landscape': 'xxl',\n  'xl-landscape': 'xl',\n  'l-landscape': 'l',\n}\n\nexport const getCommonSizeProps = (dialogSizeProps: DialogComponentSizeProps) =>\n  Object.keys(dialogSizeProps).reduce<\n    Pick<\n      ResponsiveSizeProps<DialogComponentCommonSize>,\n      'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'\n    >\n  >((sizeProps, propKey) => {\n    const dialogSize = dialogSizeProps[propKey as keyof DialogComponentSizeProps]\n\n    if (Array.isArray(dialogSize)) {\n      sizeProps[propKey] = dialogSize.map((size) => dialogMappingRules[size] ?? size)\n    } else if (typeof dialogSize === 'string') {\n      sizeProps[propKey] = dialogMappingRules[dialogSize] ?? dialogSize\n    } else {\n      sizeProps[propKey] = dialogSize\n    }\n\n    return sizeProps\n  }, {})\n"],"names":["dialogMappingRules","getCommonSizeProps","dialogSizeProps","Object","keys","reduce","sizeProps","propKey","dialogSize","Array","isArray","map","size"],"mappings":"AAGA,MAAMA,mBAAsF,CAC1F,gBAAiB,MACjB,eAAgB,KAChB,cAAe,WAGJC,mBAAsBC,GACjCC,OAAOC,KAAKF,GAAiBG,QAK3B,CAACC,EAAWC,KACZ,MAAMC,EAAaN,EAAgBK,GAUnC,OAPED,EAAUC,GADRE,MAAMC,QAAQF,GACKA,EAAWG,KAAKC,GAASZ,mBAAmBY,IAASA,WAC1DJ,GAAe,SACVR,mBAAmBQ,IAAeA,EAElCA,EAGhBF,CAAS,GACf,CAAE"}

package/dts/index.d.ts

@@ -6380,28 +6380,29 @@ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
     Divider: typeof MenuDivider;
 };
 
-declare type DialogComponentSize = 'xxl' | 'xxl-landscape' | 'xl' | 'xl-landscape' | 'l' | 'l-landscape' | 'm' | 's' | 'xs';
+declare type DialogComponentCommonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type DialogComponentSize = DialogComponentCommonSize | 'xxl-landscape' | 'xl-landscape' | 'l-landscape';
 declare type DialogComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'title' | 'draggable'> {
+interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title' | 'draggable'> {
     /** Текст над заголовком диалога */
     caption?: React.ReactNode;
     /** Пропсы для типографики текста над заголовком */
     captionProps?: TextProps;
     /** Класс для элемента с бекграундом диалога */
     backgroundClassName?: string;
-    /** Основной контент */
-    children?: React.ReactNode;
+    /** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
+    children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
     /**
      * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
      * Для рендера кнопки нужно передать iconButtonProps.onClick
      */
     iconButtonProps?: Partial<IconButtonProps>;
     /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
-    controls?: (props: Partial<Record<keyof Pick<DialogComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
     /** Рендер области для захвата окна для перетаскивания */
     draggable?: boolean;
     /** Диалог находится в состоянии перетаскивания (использование визуальной индикации) */
@@ -6411,7 +6412,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     /** Вариант внешнего вида со скошенным верхним сегментом */
     fancy?: boolean;
     /** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
-    floats?: (props: Partial<Record<keyof Pick<DialogComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
     /** Рендер картинки справа в горизонтальной ориентации (дефолт слева) */
     imgLandscapePositionRight?: boolean;
     /** Рендер картинки снизу в вертикальной ориентации (дефолт сверху) */
@@ -6444,6 +6445,8 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     title?: React.ReactNode;
     /** Пропсы типографики для заголовка */
     titleProps?: TextProps;
+    /** z-index рутового элемента */
+    zIndex?: number;
 }
 
 /**
@@ -6459,7 +6462,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
 declare const DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps>;
 
 declare type DialogPosition = 'center' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
-interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, ResponsivePositionProps<DialogPosition>, Omit<React.ComponentPropsWithRef<'div'>, 'className' | 'title' | 'draggable'> {
+interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, ResponsivePositionProps<DialogPosition>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'className' | 'title' | 'draggable'> {
     /** Открыто диалоговое окно */
     open: boolean;
     /** Колбек, который будет вызван после открытия */
@@ -6500,15 +6503,15 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     caption?: React.ReactNode;
     /** Пропсы для типографики текста над заголовком */
     captionProps?: TextProps;
-    /** Основной контент */
-    children?: React.ReactNode;
+    /** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
+    children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
     /**
      * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
      * Для рендера кнопки нужно передать iconButtonProps.onClick
      */
     iconButtonProps?: Partial<IconButtonProps>;
     /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
-    controls?: (props: Partial<Record<keyof Pick<DialogProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
     /**
      * Диалоговое окно можно перетаскивать.
      * В этом случае оверлей не используется и диалог рендерит область захвата
@@ -6519,7 +6522,7 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     /** Вариант внешнего вида со скошенным верхним сегментом */
     fancy?: boolean;
     /** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
-    floats?: (props: Partial<Record<keyof Pick<DialogProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
     /** Рендер картинки справа в горизонтальной ориентации (дефолт слева) */
     imgLandscapePositionRight?: boolean;
     /** Рендер картинки снизу в вертикальной ориентации (дефолт сверху) */
@@ -6557,6 +6560,8 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     title?: React.ReactNode;
     /** Пропсы типографики для заголовка */
     titleProps?: TextProps;
+    /** z-index оверлея или рутового элемента, если оверлей не используется */
+    zIndex?: number;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxford/ui",
-  "version": "2.57.1-beta-a74b35e-20241220",
+  "version": "2.58.0-beta-457979c-20250110",
   "description": "UI components library",
   "bugs": {
     "url": "https://github.com/foxford/ui/issues"