@foxford/ui 2.76.1 → 2.77.0-beta-ee6908c-20250807

package/components/DialogComponent/DialogComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,Fading,Footer}from'./style.mjs';import{SIZES_FANCY,SIZES,SIZES_CONTAINER,SIZES_CONTENT,SIZES_FOOTER,SIZES_CAPTION,SIZES_TITLE,SIZES_SUBTITLE}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';const DialogComponent=withMergedProps(forwardRef(((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:n=!1,scrollFading:r=!1,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:m,layoutXXS:S,layoutXS:g,layoutS:I,layoutM:p,layoutL:T,layoutXL:y,root:u,floats:x,media:j,body:h,caption:E,title:A,subtitle:f,children:L,footer:_,closeButton:O,progressLine:R,fancy:C,imgSrcVertical:N,imgSrcHorizontal:b,draggable:z,loading:B,className:Y,backgroundClassName:D,onGrab:P,onNudge:k,...w}=o;const Z={size:t,sizeXXS:i,sizeXS:a,sizeS:l,sizeM:c,sizeL:d,sizeXL:m};const V={layout:s,layoutXXS:S,layoutXS:g,layoutS:I,layoutM:p,layoutL:T,layoutXL:y};const F={...Z,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const U={...Z,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const M={...Z,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const X=C?{icon:'close',size:'xxl',secondary:!0}:{icon:'close',size:'l',marginTop:8,marginRight:8};const v={size:'xs'};const H=C?Y:concatClassNames(Y,D);const G=n&&r;const[K,q]=useState(null);const{scrollThresholds:J,setScrollThresholds:Q}=useScrollThresholds({enabled:G,target:K});return jsxs(Root,{...w,...Z,...V,layouts:C?LAYOUTS_FANCY:LAYOUTS,className:H,fancy:C,ref:e,children:[C&&jsx(FancyBackground,{className:D}),isValidElement(u)?u:typeof u=='function'?u({captionProps:F,titleProps:U,subtitleProps:M,closeButtonProps:X,progressLineProps:v,onGrab:P,onNudge:k}):jsxs(Fragment,{children:[x,z&&jsx(DraggingHandle,{...V,layouts:VISIBILITY_VERTICAL,onPointerDown:P,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:k,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}),O&&jsx(ButtonPosition,{children:isValidElement(O)?O:typeof O=='function'?O(X):null}),(B||j||N)&&jsx(Media,{...V,layouts:C?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:B?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:N})})}),(B||j||b)&&jsx(Media,{...V,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:B?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:b})})}),jsxs(Body,{children:[R&&!B&&jsx(ProgressPosition,{...V,layouts:C?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(R)?R:typeof R=='function'?R(v):null}),z&&jsx(DraggingHandle,{...V,layouts:VISIBILITY_HORIZONTAL,onPointerDown:P,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:k,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}),C&&jsx(LayoutSpacer,{...V,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}),B?jsx(Container,{...Z,sizes:SIZES_CONTAINER,children:jsxs(Content,{...Z,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...U,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...M,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...M,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...M,marginBottom:"0.8em"})})]})}):isValidElement(h)?h:typeof h=='function'?h({captionProps:F,titleProps:U,subtitleProps:M}):jsxs(Container,{...Z,sizes:SIZES_CONTAINER,children:[G&&jsx(Fading,{visible:J.top===!1}),jsxs(Content,{...Z,sizes:SIZES_CONTENT,ref:o=>{q(o)},scrollable:n,tabIndex:n?0:void 0,onScroll:o=>{G&&Q(o.currentTarget)},onKeyDown:o=>{keyboardKeys.ArrowUp.validate(o.key)?(o.preventDefault(),o.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(o.key)&&(o.preventDefault(),o.currentTarget.scrollBy(0,13))},children:[isValidElement(E)?E:typeof E=='function'?E(F):typeof E=='string'||typeof E=='number'?jsx(Text,{...F,children:E}):null,isValidElement(A)?A:typeof A=='function'?A(U):typeof A=='string'||typeof A=='number'?jsx(Text,{...U,children:A}):null,isValidElement(f)?f:typeof f=='function'?f(M):typeof f=='string'||typeof f=='number'?jsx(Text,{...M,children:f}):null,L]}),G&&jsx(Fading,{visible:J.bottom===!1,after:!0}),_&&jsx(Footer,{...Z,sizes:SIZES_FOOTER,children:_})]})]})]})]})})),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
+import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,Fading,Footer}from'./style.mjs';import{SIZES_FANCY,SIZES,SIZES_CONTAINER,SIZES_CONTENT,SIZES_FOOTER,SIZES_CAPTION,SIZES_TITLE,SIZES_SUBTITLE}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';const DialogComponent=withMergedProps(forwardRef(((o,e)=>{const{size:t="s",layout:n="vertical",scrollable:s=!1,scrollFading:r=!1,sizeXXS:i,sizeXS:l,sizeS:a,sizeM:c,sizeL:d,sizeXL:m,layoutXXS:S,layoutXS:g,layoutS:u,layoutM:I,layoutL:p,layoutXL:T,root:y,floats:x,media:j,body:h,caption:E,title:A,subtitle:f,children:L,footer:_,closeButton:O,progressLine:R,fancy:C,imgSrcVertical:N,imgSrcHorizontal:b,draggable:z,loading:B,className:Y,backgroundClassName:D,onGrab:P,onNudge:k,...w}=o;const Z={size:t,sizeXXS:i,sizeXS:l,sizeS:a,sizeM:c,sizeL:d,sizeXL:m};const V={layout:n,layoutXXS:S,layoutXS:g,layoutS:u,layoutM:I,layoutL:p,layoutXL:T};const F={...Z,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const U={...Z,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const M={...Z,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const X=C?{icon:'close',size:'xxl',secondary:!0}:{icon:'close',size:'l',marginTop:8,marginRight:8};const v={size:'xs'};const H=C?Y:concatClassNames(Y,D);const G=s&&r;const[K,q]=useState(null);const{scrollThresholds:J,setScrollThresholds:Q}=useScrollThresholds({enabled:G,target:K});return jsxs(Root,{...w,...Z,...V,layouts:C?LAYOUTS_FANCY:LAYOUTS,className:H,fancy:C,ref:e,children:[C?jsx(FancyBackground,{className:D}):null,isValidElement(y)?y:typeof y=='function'?y({captionProps:F,titleProps:U,subtitleProps:M,closeButtonProps:X,progressLineProps:v,onGrab:P,onNudge:k}):jsxs(Fragment,{children:[x,z?jsx(DraggingHandle,{...V,layouts:VISIBILITY_VERTICAL,onPointerDown:P,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:k,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,O?jsx(ButtonPosition,{children:isValidElement(O)?O:typeof O=='function'?O(X):null}):null,B||j||N?jsx(Media,{...V,layouts:C?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:B?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:N})})}):null,B||j||b?jsx(Media,{...V,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:B?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(j)?j:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:b})})}):null,jsxs(Body,{children:[R&&!B?jsx(ProgressPosition,{...V,layouts:C?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(R)?R:typeof R=='function'?R(v):null}):null,z?jsx(DraggingHandle,{...V,layouts:VISIBILITY_HORIZONTAL,onPointerDown:P,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:k,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,C?jsx(LayoutSpacer,{...V,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}):null,B?jsx(Container,{...Z,sizes:SIZES_CONTAINER,children:jsxs(Content,{...Z,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...U,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...M,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...M,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...M,marginBottom:"0.8em"})})]})}):isValidElement(h)?h:typeof h=='function'?h({captionProps:F,titleProps:U,subtitleProps:M}):jsxs(Container,{...Z,sizes:SIZES_CONTAINER,children:[G?jsx(Fading,{visible:J.top===!1}):null,jsxs(Content,{...Z,sizes:SIZES_CONTENT,ref:o=>{q(o)},scrollable:s,tabIndex:s?0:void 0,onScroll:o=>{G&&Q(o.currentTarget)},onKeyDown:o=>{keyboardKeys.ArrowUp.validate(o.key)?(o.preventDefault(),o.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(o.key)&&(o.preventDefault(),o.currentTarget.scrollBy(0,13))},children:[isValidElement(E)?E:typeof E=='function'?E(F):typeof E=='string'||typeof E=='number'?jsx(Text,{...F,children:E}):null,isValidElement(A)?A:typeof A=='function'?A(U):typeof A=='string'||typeof A=='number'?jsx(Text,{...U,children:A}):null,isValidElement(f)?f:typeof f=='function'?f(M):typeof f=='string'||typeof f=='number'?jsx(Text,{...M,children:f}):null,L]}),G?jsx(Fading,{visible:J.bottom===!1,after:!0}):null,_?jsx(Footer,{...Z,sizes:SIZES_FOOTER,children:_}):null]})]})]})]})})),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
 //# 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, useState, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: 'close', size: 'xxl', secondary: true }\n      : { icon: 'close', size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy && <Styled.FancyBackground className={backgroundClassName} />}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable && (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {closeButton && (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                  ? closeButton(closeButtonProps)\n                  : null}\n              </Styled.ButtonPosition>\n            )}\n            {(loading || media || imgSrcVertical) && (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            )}\n            {(loading || media || imgSrcHorizontal) && (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            )}\n            <Styled.Body>\n              {progressLine && !loading && (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                    ? progressLine(progressLineProps)\n                    : null}\n                </Styled.ProgressPosition>\n              )}\n              {draggable && (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              )}\n              {fancy && <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} />}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {scrollFadingEnabled && <Styled.Fading visible={scrollThresholds.top === false} />}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(ref) => {\n                      setContentRef(ref)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(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                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(subtitle) ? (\n                      subtitle\n                    ) : typeof subtitle === 'function' ? (\n                      subtitle(subtitleProps)\n                    ) : typeof subtitle === 'string' || typeof subtitle === 'number' ? (\n                      <Text {...subtitleProps}>{subtitle}</Text>\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled && <Styled.Fading visible={scrollThresholds.bottom === false} after />}\n                  {footer && (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  )}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\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"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","_jsx","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n  SIZES,\n  SIZES_FANCY,\n  SIZES_CONTAINER,\n  SIZES_CONTENT,\n  SIZES_FOOTER,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n} from './sizes'\nimport {\n  LAYOUTS,\n  LAYOUTS_FANCY,\n  LAYOUTS_MEDIA_VERTICAL,\n  LAYOUTS_FANCY_MEDIA_VERTICAL,\n  LAYOUTS_MEDIA_HORIZONTAL,\n  LAYOUTS_PROGRESS,\n  LAYOUTS_FANCY_PROGRESS,\n  VISIBILITY_VERTICAL,\n  VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n    const {\n      size = 's',\n      layout = 'vertical',\n      scrollable = false,\n      scrollFading = false,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n      root,\n      floats,\n      media,\n      body,\n      caption,\n      title,\n      subtitle,\n      children,\n      footer,\n      closeButton,\n      progressLine,\n      fancy,\n      imgSrcVertical,\n      imgSrcHorizontal,\n      draggable,\n      loading,\n      className,\n      backgroundClassName,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const sizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const layoutProps = {\n      layout,\n      layoutXXS,\n      layoutXS,\n      layoutS,\n      layoutM,\n      layoutL,\n      layoutXL,\n    }\n\n    const captionProps: TextProps = {\n      ...sizeProps,\n      appearance: 'body',\n      color: 'content-onmain-tertiary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_CAPTION,\n    }\n\n    const titleProps: TextProps = {\n      ...sizeProps,\n      as: 'h2',\n      appearance: 'heading',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.5em',\n      sizes: SIZES_TITLE,\n    }\n\n    const subtitleProps: TextProps = {\n      ...sizeProps,\n      as: 'p',\n      appearance: 'body',\n      color: 'content-onmain-primary',\n      wordBreak: 'break-word',\n      marginBottom: '0.8em',\n      sizes: SIZES_SUBTITLE,\n    }\n\n    const closeButtonProps: IconButtonProps = fancy\n      ? { icon: 'close', size: 'xxl', secondary: true }\n      : { icon: 'close', size: 'l', marginTop: 8, marginRight: 8 }\n\n    const progressLineProps: ProgressLineProps = {\n      size: 'xs',\n    }\n\n    const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n    const scrollFadingEnabled = scrollable && scrollFading\n\n    const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n    const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n      enabled: scrollFadingEnabled,\n      target: contentRef,\n    })\n\n    return (\n      <Styled.Root\n        {...restProps}\n        {...sizeProps}\n        {...layoutProps}\n        layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n        className={rootClassName}\n        fancy={fancy}\n        ref={ref}\n      >\n        {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n        {isValidElement(root) ? (\n          root\n        ) : typeof root === 'function' ? (\n          root({\n            captionProps,\n            titleProps,\n            subtitleProps,\n            closeButtonProps,\n            progressLineProps,\n            onGrab,\n            onNudge,\n          })\n        ) : (\n          <>\n            {floats}\n            {draggable ? (\n              <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            ) : null}\n            {closeButton ? (\n              <Styled.ButtonPosition>\n                {isValidElement(closeButton)\n                  ? closeButton\n                  : typeof closeButton === 'function'\n                    ? closeButton(closeButtonProps)\n                    : null}\n              </Styled.ButtonPosition>\n            ) : null}\n            {loading || media || imgSrcVertical ? (\n              <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n                {loading ? (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='3:1' width='100%'>\n                    <Styled.Img src={imgSrcVertical} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            {loading || media || imgSrcHorizontal ? (\n              <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n                {loading ? (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Skeleton borderRadius={0} />\n                  </AspectRatio>\n                ) : isValidElement(media) ? (\n                  media\n                ) : (\n                  <AspectRatio ratio='5:7' height='100%'>\n                    <Styled.Img src={imgSrcHorizontal} />\n                  </AspectRatio>\n                )}\n              </Styled.Media>\n            ) : null}\n            <Styled.Body>\n              {progressLine && !loading ? (\n                <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n                  {isValidElement(progressLine)\n                    ? progressLine\n                    : typeof progressLine === 'function'\n                      ? progressLine(progressLineProps)\n                      : null}\n                </Styled.ProgressPosition>\n              ) : null}\n              {draggable ? (\n                <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n                  <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                    <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n                  </Styled.DraggingIconContainer>\n                </Styled.DraggingHandle>\n              ) : null}\n              {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n              {loading ? (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n                    <Skeleton>\n                      <Text {...titleProps} marginBottom='1.5em' />\n                    </Skeleton>\n                    <Skeleton width='90%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='70%'>\n                      <Text {...subtitleProps} marginBottom='0.4em' />\n                    </Skeleton>\n                    <Skeleton width='50%'>\n                      <Text {...subtitleProps} marginBottom='0.8em' />\n                    </Skeleton>\n                  </Styled.Content>\n                </Styled.Container>\n              ) : isValidElement(body) ? (\n                body\n              ) : typeof body === 'function' ? (\n                body({\n                  captionProps,\n                  titleProps,\n                  subtitleProps,\n                })\n              ) : (\n                <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n                  <Styled.Content\n                    {...sizeProps}\n                    sizes={SIZES_CONTENT}\n                    ref={(node) => {\n                      setContentRef(node)\n                    }}\n                    scrollable={scrollable}\n                    tabIndex={scrollable ? 0 : undefined}\n                    onScroll={(evt) => {\n                      if (scrollFadingEnabled) {\n                        setScrollThresholds(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                    {isValidElement(caption) ? (\n                      caption\n                    ) : typeof caption === 'function' ? (\n                      caption(captionProps)\n                    ) : typeof caption === 'string' || typeof caption === 'number' ? (\n                      <Text {...captionProps}>{caption}</Text>\n                    ) : null}\n                    {isValidElement(title) ? (\n                      title\n                    ) : typeof title === 'function' ? (\n                      title(titleProps)\n                    ) : typeof title === 'string' || typeof title === 'number' ? (\n                      <Text {...titleProps}>{title}</Text>\n                    ) : null}\n                    {isValidElement(subtitle) ? (\n                      subtitle\n                    ) : typeof subtitle === 'function' ? (\n                      subtitle(subtitleProps)\n                    ) : typeof subtitle === 'string' || typeof subtitle === 'number' ? (\n                      <Text {...subtitleProps}>{subtitle}</Text>\n                    ) : null}\n                    {children}\n                  </Styled.Content>\n                  {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n                  {footer ? (\n                    <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n                      {footer}\n                    </Styled.Footer>\n                  ) : null}\n                </Styled.Container>\n              )}\n            </Styled.Body>\n          </>\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"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","_jsx","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","visible","top","node","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}

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 { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp((propKey: string) => !['scrollable'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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  display: flex;\n  position: relative;\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  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n\n  ${(props) => `\n     overflow: ${props.scrollable ? 'auto' : 'hidden'};\n     overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\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  ${responsiveLayout}\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 Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","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","responsiveLayout","Body","Container","Content","scrollable","focus","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"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 { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp((propKey: string) => !['scrollable'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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:\n    100% 32px,\n    cover;\n  mask-position:\n    0 56px,\n    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  display: flex;\n  position: relative;\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  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n\n  ${(props) => `\n     overflow: ${props.scrollable ? 'auto' : 'hidden'};\n     overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\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  ${responsiveLayout}\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 Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","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","responsiveLayout","Body","Container","Content","scrollable","focus","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"mappings":"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"}

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 { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp((propKey: string) => !['scrollable'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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  display: flex;\n  position: relative;\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  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n\n  ${(props) => `\n     overflow: ${props.scrollable ? 'auto' : 'hidden'};\n     overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\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  ${responsiveLayout}\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 Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","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","responsiveLayout","Body","Container","Content","scrollable","focus","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"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 { responsiveLayout } from 'mixins/responsive-layout'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { Spacer } from 'components/Spacer'\nimport type {\n  ResponsiveSizeProps,\n  ResponsiveSizeInterpolationProps,\n  ResponsiveLayoutInterpolationProps,\n} from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n  StyledDialogComponentProps,\n  DialogComponentPalette,\n  StyledDialogContentProps,\n  Size,\n  Layout,\n} from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n  (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey),\n  filterLayoutProps\n)\n\nconst filterCommonProps = createShouldForwardProp((propKey: string) => !['scrollable'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<{\n  visible: boolean\n  after?: boolean\n}>({\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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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:\n    100% 32px,\n    cover;\n  mask-position:\n    0 56px,\n    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  display: flex;\n  position: relative;\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  ${responsiveLayout}\n`\n\nexport const Body = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n`\n\nexport const Container = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>(\n  {\n    shouldForwardProp: filterCommonProps,\n  }\n)`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-grow: 1;\n\n  ${responsiveSize}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-grow: 1;\n\n  ${(props) => `\n     overflow: ${props.scrollable ? 'auto' : 'hidden'};\n     overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n  `}\n\n  ${focus}\n  ${responsiveSize}\n`\n\nexport const Footer = styled.div.withConfig<ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>>({\n  shouldForwardProp: filterCommonProps,\n})`\n  box-sizing: border-box;\n  flex-shrink: 0;\n\n  ${responsiveSize}\n`\n\nexport const DraggingHandle = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\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  ${responsiveLayout}\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 Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<{ src?: string }>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n\n  ${(props) =>\n    props.src &&\n    `\n      background-image: url(${props.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `}\n`\n\nexport const LayoutSpacer = styled(Spacer).withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 3;\n`\n\nexport const ProgressPosition = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 2;\n\n  ${responsiveLayout}\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","filterCommonProps","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","responsiveLayout","Body","Container","Content","scrollable","focus","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"mappings":"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"}

package/components/Divider/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Divider/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { DividerProps } from './types'\n\nconst shouldForwardDividerProp = createShouldForwardProp()\n\nexport const Root = styled.div.withConfig<DividerProps>({\n  shouldForwardProp: shouldForwardDividerProp,\n})`\n  box-sizing: border-box;\n  height: 1px;\n  ${(props) => `\n      background-color: ${\n        props.color ? props.theme.colors[props.color] ?? props.color : props.theme.colors['border-onmain-default-large']\n      };  \n    `}\n\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardDividerProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","color","theme","colors","responsiveMargin"],"mappings":"qRAKA,MAAMA,yBAA2BC,MAAuBA,0BAEjD,MAAMC,KAAOC,gBAAAA,QAAOC,IAAIC,WAAyB,CACtDC,kBAAmBN,2BACnBK,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAElB,CAAA,oCAAA,IAAA,KAGGM,GAAU,6BAEPA,EAAMC,MAAQD,EAAME,MAAMC,OAAOH,EAAMC,QAAUD,EAAMC,MAAQD,EAAME,MAAMC,OAAO,2CAItFC,iBAAgBA"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Divider/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { DividerProps } from './types'\n\nconst shouldForwardDividerProp = createShouldForwardProp()\n\nexport const Root = styled.div.withConfig<DividerProps>({\n  shouldForwardProp: shouldForwardDividerProp,\n})`\n  box-sizing: border-box;\n  height: 1px;\n  ${(props) => `\n      background-color: ${\n        props.color\n          ? (props.theme.colors[props.color as keyof typeof props.theme.colors] ?? props.color)\n          : props.theme.colors['border-onmain-default-large']\n      };  \n    `}\n\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardDividerProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","color","theme","colors","responsiveMargin"],"mappings":"qRAKA,MAAMA,yBAA2BC,MAAuBA,0BAEjD,MAAMC,KAAOC,gBAAAA,QAAOC,IAAIC,WAAyB,CACtDC,kBAAmBN,2BACnBK,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAElB,CAAA,oCAAA,IAAA,KAGGM,GAAU,6BAEPA,EAAMC,MACDD,EAAME,MAAMC,OAAOH,EAAMC,QAA6CD,EAAMC,MAC7ED,EAAME,MAAMC,OAAO,2CAI3BC,iBAAgBA"}

package/components/Divider/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/Divider/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { DividerProps } from './types'\n\nconst shouldForwardDividerProp = createShouldForwardProp()\n\nexport const Root = styled.div.withConfig<DividerProps>({\n  shouldForwardProp: shouldForwardDividerProp,\n})`\n  box-sizing: border-box;\n  height: 1px;\n  ${(props) => `\n      background-color: ${\n        props.color ? props.theme.colors[props.color] ?? props.color : props.theme.colors['border-onmain-default-large']\n      };  \n    `}\n\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardDividerProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","color","theme","colors","responsiveMargin"],"mappings":"yKAKA,MAAMA,yBAA2BC,0BAE1B,MAAMC,KAAOC,OAAOC,IAAIC,WAAyB,CACtDC,kBAAmBN,2BACnBK,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAElB,CAAA,oCAAA,IAAA,KAGGM,GAAU,6BAEPA,EAAMC,MAAQD,EAAME,MAAMC,OAAOH,EAAMC,QAAUD,EAAMC,MAAQD,EAAME,MAAMC,OAAO,2CAItFC"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/Divider/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { DividerProps } from './types'\n\nconst shouldForwardDividerProp = createShouldForwardProp()\n\nexport const Root = styled.div.withConfig<DividerProps>({\n  shouldForwardProp: shouldForwardDividerProp,\n})`\n  box-sizing: border-box;\n  height: 1px;\n  ${(props) => `\n      background-color: ${\n        props.color\n          ? (props.theme.colors[props.color as keyof typeof props.theme.colors] ?? props.color)\n          : props.theme.colors['border-onmain-default-large']\n      };  \n    `}\n\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardDividerProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","color","theme","colors","responsiveMargin"],"mappings":"yKAKA,MAAMA,yBAA2BC,0BAE1B,MAAMC,KAAOC,OAAOC,IAAIC,WAAyB,CACtDC,kBAAmBN,2BACnBK,WAAA,CAAAE,YAAA,gBAAAC,YAAA,oBAFkBL,CAElB,CAAA,oCAAA,IAAA,KAGGM,GAAU,6BAEPA,EAAMC,MACDD,EAAME,MAAMC,OAAOH,EAAMC,QAA6CD,EAAMC,MAC7ED,EAAME,MAAMC,OAAO,2CAI3BC"}

package/components/Dropdown/Dropdown.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var misc=require('../../shared/utils/misc.js');var constants$1=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var hooks=require('./hooks.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,o)=>{const{size:t="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,iconProps:c={},menuProps:l={},loadingIconProps:u={},optionsEmptyIconProps:d={},loading:p,autoFocus:b,disableAutoScrollToSelectedOption:m,closeMenuOnScroll:g,scrollMonitorTarget:v,contrast:x,selectedOption:f,defaultSelectedOption:k,icon:C,inputMode:h,loadingMessage:I,loadingIcon:R,maxLength:j,multiple:y,clearable:w,onChangeInput:D,onCloseMenu:M,onOpenMenu:S,onSelectOption:P,options:L,loadOptions:E,groupSelectedOptions:T,optionsMultiToggleCaption:F,optionsEmptyMessage:q,optionsEmptyIcon:B,palette:z,placeholder:O,readOnly:K,required:X,status:$,sizeXXS:H,sizeXS:N,sizeS:Z,sizeM:_,sizeL:A,sizeXL:U,form:G,...J}=e;const Q={size:t,sizeXXS:H,sizeXS:N,sizeS:Z,sizeM:_,sizeL:A,sizeXL:U};const V={sizes:constants.SIZES_ICON,color:J.disabled?'content-disabled':'content-onmain-tertiary'};const W=React.useMemo((()=>J.id??`${n}-${nanoid.nanoid()}`),[n,J.id]);const Y=React.useMemo((()=>nanoid.nanoid()),[]);const ee=React.useMemo((()=>nanoid.nanoid()),[]);const[oe,te]=hooks.useFilteredOptions({options:L});const[ne,re,se]=hooks.useLoadedOptions({loadOptions:E,options:L});const[ae,ie]=React.useState((()=>utils.getDropdownSelectedOption(f!==void 0?f:k,y)));const[ce,le]=React.useState((()=>utils.getDropdownInputText(ae,y)));const[ue,de]=React.useState(!1);const[pe,be]=React.useState(!1);const me=E?ne:oe;const ge=E?p??re:p;const ve=React.useMemo((()=>y?utils.groupDropdownOptions(me,ae):[[],[]]),[y,me,ae]);const xe=pe&&!J.disabled;const fe=X&&ae.length===0;const ke=Boolean(xe||ce||ue);const Ce=ve[0].length>0&&ve[1].length===0;const he=ve[0].length>0&&ve[1].length>0;const Ie=React.useRef(null);const[Re,je]=React.useState(null);const ye=React.useRef(null);const we=React.useRef(null);const De=React.useRef(xe);const Me=React.useCallback((e=>{le(e),D&&D(e)}),[D]);const Se=React.useCallback((e=>{E?se(e):te(e)}),[E,se,te]);const Pe=React.useMemo((()=>misc.createDebouncedCallback(Se,150)),[Se]);const preventBlur=e=>{e.target!==Ie.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||l.renderInPortal&&xe&&Re&&Re.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:v,onScrollStart:()=>{g&&xe&&(Ie.current?.focus(),be(!1))}}),React.useLayoutEffect((()=>{f!==void 0&&(y||xe||Me(utils.getDropdownInputText(f)),ie(utils.getDropdownSelectedOption(f,y)))}),[y,f,xe,Me]),React.useEffect((()=>{xe!==De.current&&(xe&&S&&S(),!xe&&M&&M(),De.current=xe)}),[xe,M,S]),React.useEffect((()=>{if(!y&&!m&&xe&&!ge&&ce.length===0&&Re&&we.current){const e=Re.getBoundingClientRect();const o=we.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{Re&&we.current&&Re.scrollTo(0,we.current.offsetTop)}),0)}}),[y,m,xe,ge,ce,Re]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...J,...Q,ref:o,id:W,labelId:Y,labelPosition:r,active:ke,onColored:x,primary:a,error:$==='error',success:$==='success',focus:ue,icon:[C,jsxRuntime.jsx(style.ChevronIcon,{up:xe},'chevron')],iconProps:{...Q,...V,...c},palette:{color:J.disabled?z.labelColorDisabled:z.labelColor,backgroundColor:J.disabled?z.backgroundColorDisabled:z.backgroundColor,backgroundColorHover:J.disabled?z.backgroundColorDisabled:z.backgroundColorHover,borderColor:J.disabled?z.borderColorDisabled:z.borderColor},onClick:e=>{J.onClick&&J.onClick(e),J.disabled||(Ie.current?.focus(),xe?Re&&e.target instanceof Node&&!Re.contains(e.target)&&(be(!1),Me(utils.getDropdownInputText(ae,y))):(be(!0),Se(''),s&&Me('')))},onPointerDown:e=>{J.onPointerDown&&J.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{J.onMouseDown&&J.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{J.onFocus&&J.onFocus(e),de(!0),Ie.current&&e.target===Ie.current&&s&&!y&&!xe&&Me('')},onBlur:e=>{J.onBlur&&J.onBlur(e),e.currentTarget.contains(e.relatedTarget)||l.renderInPortal&&xe&&Re&&Re.contains(e.relatedTarget)||(de(!1),Me(utils.getDropdownInputText(ae,y)),be(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[fe&&!s&&!K&&jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{Ie.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{ref:Ie,role:"combobox","aria-controls":ee,"aria-expanded":xe,"aria-labelledby":J.label?Y:void 0,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",form:G,autoFocus:b,inputMode:s?h:'none',maxLength:j,placeholder:O,readOnly:K||!s,required:fe,disabled:J.disabled,value:ce,palette:{color:z.color,colorDisabled:z.colorDisabled,placeholderColor:z.placeholderColor,placeholderColorDisabled:z.placeholderColorDisabled},onClick:e=>{xe&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;Me(o),Pe(o),be(!0)},onKeyDown:e=>{if(constants$1.keyboardKeys.Enter.validate(e.key)&&(Me(utils.getDropdownInputText(ae,y)),be(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||xe&&e.currentTarget.selectionStart!==0||(e.preventDefault(),xe||(Se(''),s&&Me('')),be((e=>!e))),constants$1.keyboardKeys.Esc.validate(e.key)&&be(!1),constants$1.keyboardKeys.Tab.validate(e.key)&&xe&&(e.preventDefault(),be(!1)),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&xe&&ye.current)if(e.preventDefault(),!y&&we.current){const e=[...ye.current.children];const o=e.findIndex((e=>e.contains(we.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusFirstFocusable(ye.current);if(constants$1.keyboardKeys.ArrowUp.validate(e.key)&&xe&&ye.current)if(e.preventDefault(),!y&&we.current){const e=[...ye.current.children];const o=e.findIndex((e=>e.contains(we.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusLastFocusable(ye.current)}}),ae.map((e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:J.disabled},e.value)))]}),addon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[y&&ae.length>0&&jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:12,disabled:J.disabled,cursor:J.disabled?'not-allowed':void 0,text:ae.length,textProps:{appearance:'caption',size:'xs'},palette:J.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!J.disabled,onClick:e=>{e.stopPropagation(),K||(f===void 0&&ie([]),P&&P([]),Ie.current?.focus(),Me(''),Se(''),be(!0))}}}),!y&&w&&ae.length>0&&jsxRuntime.jsx(IconButton.IconButton,{icon:"close",size:"l",square:!0,marginLeft:12,disabled:J.disabled,onClick:e=>{e.stopPropagation(),K||(f===void 0&&ie([]),P&&P(null),Ie.current?.focus(),Me(''),Se(''),be(!0))}})]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...l,setRef:je,open:xe,popperReferenceId:W,secondary:!x,elevated:x,disableAutoFocus:!0,palette:{backgroundColor:z.menuBackgroundColor,borderColor:z.menuBorderColor},empty:me.length===0,loading:ge,loadingMessage:I,loadingIcon:R,loadingIconProps:{...Q,...V,...u},emptyMessage:q,emptyIcon:B,emptyIconProps:{...Q,...V,...d},onKeyDown:e=>{constants$1.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),Ie.current?.focus(),be(!1)),constants$1.keyboardKeys.Enter.validate(e.key)&&(Ie.current?.focus(),Me(utils.getDropdownInputText(ae,y)),be(!1)),constants$1.keyboardKeys.Esc.validate(e.key)&&(Ie.current?.focus(),be(!1)),constants$1.keyboardKeys.Backspace.validate(e.key)&&!K&&(y||!y&&w)&&(f===void 0&&ie([]),P&&P(y?[]:null),Me(''),Se(''))},children:jsxRuntime.jsx(MenuList.MenuList,y?{ref:ye,id:ee,role:"listbox","aria-labelledby":J.label?Y:void 0,"aria-multiselectable":!0,children:ce.length===0?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[i&&jsxRuntime.jsx(ListItem.ListItem,{...Q,text:F,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:n,checked:Ce,indeterminate:he,error:(Ce||he)&&$==='error',success:(Ce||he)&&$==='success',onChange:()=>{if(!K){const e=Ce||he?[]:[...me];f===void 0&&ie(e),P&&P(e)}}})}),i&&jsxRuntime.jsx(MenuDivider.MenuDivider,{}),T&&ve[0].map((e=>{const o=e.status??$;const t=o==='error';const r=o==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,active:!0,text:e.text,danger:t,success:r,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),Ie.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!0,name:n,value:e.value,checked:!0,error:t,success:r,onChange:e=>{if(!K){const o=ae.filter((o=>o.value!==e.currentTarget.value));f===void 0&&ie(o),P&&P(o)}}})})})),T&&ve[0].length>0&&ve[1].length>0&&jsxRuntime.jsx(MenuDivider.MenuDivider,{}),T&&ve[1].map((e=>React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),Ie.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!1,name:n,value:e.value,checked:!1,onChange:()=>{if(!K){const o=[...ae,e];f===void 0&&ie(o),P&&P(o)}}})}))),!T&&me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;const t=e.status??$;const r=o&&t==='error';const s=o&&t==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,danger:r,success:s,disabled:J.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":o,name:n,value:e.value,checked:o,error:r,success:s,onChange:t=>{if(!K){const n=o?ae.filter((e=>e.value!==t.currentTarget.value)):[...ae,e];f===void 0&&ie(n),P&&P(n)}}})})}))]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;const t=e.status??$;const r=o&&t==='error';const s=o&&t==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,danger:r,success:s,disabled:J.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":o,name:n,value:e.value,checked:o,error:r,success:s,onChange:t=>{if(!K){const n=o?ae.filter((e=>e.value!==t.currentTarget.value)):[...ae,e];f===void 0&&ie(n),P&&P(n)}}})})}))})}:{ref:ye,id:ee,role:"listbox","aria-labelledby":J.label?Y:void 0,children:me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;return React.createElement(ListItem.ListItem,{...Q,role:"option","aria-selected":o,ref:o?we:void 0,key:e.value,text:e.text,active:o,danger:o&&$==='error',success:o&&$==='success',disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:o=>{if(o.stopPropagation(),!K){const o={...e};f===void 0&&(Me(utils.getDropdownInputText(o)),ie(utils.getDropdownSelectedOption(o))),P&&P(o),Ie.current?.focus(),be(!1)}}})}))})})})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
+'use strict';var React=require('react');var nanoid=require('nanoid');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollMonitor=require('../../hooks/useScrollMonitor.js');var dom=require('../../shared/utils/dom.js');var misc=require('../../shared/utils/misc.js');var constants$1=require('../../shared/constants.js');var DropdownMenu=require('./DropdownMenu.js');var hooks=require('./hooks.js');var constants=require('./constants.js');var utils=require('./utils.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var FormInputLabel=require('../FormInputLabel/FormInputLabel.js');var FormInput=require('../FormInput/FormInput.js');var Chip=require('../Chip/Chip.js');var IconButton=require('../IconButton/IconButton.js');var MenuList=require('../MenuList/MenuList.js');var ListItem=require('../ListItem/ListItem.js');var InputCheckbox=require('../InputCheckbox/InputCheckbox.js');var MenuDivider=require('../MenuDivider/MenuDivider.js');const Dropdown=withMergedProps.withMergedProps(React.forwardRef(((e,o)=>{const{size:t="m",name:n="fox-dropdown",labelPosition:r="dynamic",searchable:s=!0,primary:a=!0,optionsMultiToggle:i=!0,iconProps:l={},menuProps:c={},loadingIconProps:u={},optionsEmptyIconProps:d={},loading:p,autoFocus:b,disableAutoScrollToSelectedOption:m,closeMenuOnScroll:g,scrollMonitorTarget:v,contrast:x,selectedOption:f,defaultSelectedOption:k,icon:C,inputMode:h,loadingMessage:I,loadingIcon:R,maxLength:j,multiple:y,clearable:w,onChangeInput:D,onCloseMenu:M,onOpenMenu:S,onSelectOption:P,options:L,loadOptions:E,groupSelectedOptions:B,optionsMultiToggleCaption:T,optionsEmptyMessage:F,optionsEmptyIcon:q,palette:z,placeholder:O,readOnly:K,required:X,status:$,sizeXXS:H,sizeXS:N,sizeS:Z,sizeM:_,sizeL:A,sizeXL:U,form:G,...J}=e;const Q={size:t,sizeXXS:H,sizeXS:N,sizeS:Z,sizeM:_,sizeL:A,sizeXL:U};const V={sizes:constants.SIZES_ICON,color:J.disabled?'content-disabled':'content-onmain-tertiary'};const W=React.useMemo((()=>J.id??`${n}-${nanoid.nanoid()}`),[n,J.id]);const Y=React.useMemo((()=>nanoid.nanoid()),[]);const ee=React.useMemo((()=>nanoid.nanoid()),[]);const[oe,te]=hooks.useFilteredOptions({options:L});const[ne,re,se]=hooks.useLoadedOptions({loadOptions:E,options:L});const[ae,ie]=React.useState((()=>utils.getDropdownSelectedOption(f!==void 0?f:k,y)));const[le,ce]=React.useState((()=>utils.getDropdownInputText(ae,y)));const[ue,de]=React.useState(!1);const[pe,be]=React.useState(!1);const me=E?ne:oe;const ge=E?p??re:p;const ve=React.useMemo((()=>y?utils.groupDropdownOptions(me,ae):[[],[]]),[y,me,ae]);const xe=pe&&!J.disabled;const fe=X&&ae.length===0;const ke=Boolean(xe||le||ue);const Ce=ve[0].length>0&&ve[1].length===0;const he=ve[0].length>0&&ve[1].length>0;const Ie=React.useRef(null);const[Re,je]=React.useState(null);const ye=React.useRef(null);const we=React.useRef(null);const De=React.useRef(xe);const Me=React.useCallback((e=>{ce(e),D&&D(e)}),[D]);const Se=React.useCallback((e=>{E?se(e):te(e)}),[E,se,te]);const Pe=React.useMemo((()=>misc.createDebouncedCallback(Se,150)),[Se]);const preventBlur=e=>{e.target!==Ie.current&&e.target instanceof Node&&(e.currentTarget.contains(e.target)||c.renderInPortal&&xe&&Re&&Re.contains(e.target))&&e.preventDefault()};return useScrollMonitor.useScrollMonitor({target:v,onScrollStart:()=>{g&&xe&&(Ie.current?.focus(),be(!1))}}),React.useLayoutEffect((()=>{f!==void 0&&(y||xe||Me(utils.getDropdownInputText(f)),ie(utils.getDropdownSelectedOption(f,y)))}),[y,f,xe,Me]),React.useEffect((()=>{xe!==De.current&&(xe&&S&&S(),!xe&&M&&M(),De.current=xe)}),[xe,M,S]),React.useEffect((()=>{if(!y&&!m&&xe&&!ge&&le.length===0&&Re&&we.current){const e=Re.getBoundingClientRect();const o=we.current.getBoundingClientRect();(o.top<e.top||o.bottom>e.bottom)&&setTimeout((()=>{Re&&we.current&&Re.scrollTo(0,we.current.offsetTop)}),0)}}),[y,m,xe,ge,le,Re]),jsxRuntime.jsx(FormInputLabel.FormInputLabel,{...J,...Q,ref:o,id:W,labelId:Y,labelPosition:r,active:ke,onColored:x,primary:a,error:$==='error',success:$==='success',focus:ue,icon:[C,jsxRuntime.jsx(style.ChevronIcon,{up:xe},'chevron')],iconProps:{...Q,...V,...l},palette:{color:J.disabled?z.labelColorDisabled:z.labelColor,backgroundColor:J.disabled?z.backgroundColorDisabled:z.backgroundColor,backgroundColorHover:J.disabled?z.backgroundColorDisabled:z.backgroundColorHover,borderColor:J.disabled?z.borderColorDisabled:z.borderColor},onClick:e=>{J.onClick&&J.onClick(e),J.disabled||(Ie.current?.focus(),xe?Re&&e.target instanceof Node&&!Re.contains(e.target)&&(be(!1),Me(utils.getDropdownInputText(ae,y))):(be(!0),Se(''),s&&Me('')))},onPointerDown:e=>{J.onPointerDown&&J.onPointerDown(e),preventBlur(e)},onMouseDown:e=>{J.onMouseDown&&J.onMouseDown(e),window.PointerEvent||preventBlur(e)},onFocus:e=>{J.onFocus&&J.onFocus(e),de(!0),Ie.current&&e.target===Ie.current&&s&&!y&&!xe&&Me('')},onBlur:e=>{J.onBlur&&J.onBlur(e),e.currentTarget.contains(e.relatedTarget)||c.renderInPortal&&xe&&Re&&Re.contains(e.relatedTarget)||(de(!1),Me(utils.getDropdownInputText(ae,y)),be(!1))},input:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[!fe||s||K?null:jsxRuntime.jsx(style.InputMimic,{required:!0,type:"text",inputMode:"none",form:G,tabIndex:-1,onFocus:()=>{Ie.current?.focus()}}),jsxRuntime.jsx(FormInput.FormInput,{ref:Ie,role:"combobox","aria-controls":ee,"aria-expanded":xe,"aria-labelledby":J.label?Y:void 0,type:"text",autoComplete:"off",autoCapitalize:"off",autoCorrect:"off",spellCheck:"false",form:G,autoFocus:b,inputMode:s?h:'none',maxLength:j,placeholder:O,readOnly:K||!s,required:fe,disabled:J.disabled,value:le,palette:{color:z.color,colorDisabled:z.colorDisabled,placeholderColor:z.placeholderColor,placeholderColorDisabled:z.placeholderColorDisabled},onClick:e=>{xe&&e.currentTarget.selectionStart!==e.currentTarget.selectionEnd&&e.stopPropagation()},onChange:e=>{const o=e.currentTarget.value;Me(o),Pe(o),be(!0)},onKeyDown:e=>{if(constants$1.keyboardKeys.Enter.validate(e.key)&&(Me(utils.getDropdownInputText(ae,y)),be(!1)),!constants$1.keyboardKeys.Space.validate(e.key)||xe&&e.currentTarget.selectionStart!==0||(e.preventDefault(),xe||(Se(''),s&&Me('')),be((e=>!e))),constants$1.keyboardKeys.Esc.validate(e.key)&&be(!1),constants$1.keyboardKeys.Tab.validate(e.key)&&xe&&(e.preventDefault(),be(!1)),constants$1.keyboardKeys.ArrowDown.validate(e.key)&&xe&&ye.current)if(e.preventDefault(),!y&&we.current){const e=[...ye.current.children];const o=e.findIndex((e=>e.contains(we.current)));const t=e[o+1]??e[0];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusFirstFocusable(ye.current);if(constants$1.keyboardKeys.ArrowUp.validate(e.key)&&xe&&ye.current)if(e.preventDefault(),!y&&we.current){const e=[...ye.current.children];const o=e.findIndex((e=>e.contains(we.current)));const t=e[o-1]??e[e.length-1];t instanceof HTMLElement&&dom.focusFirstFocusable(t)}else dom.focusLastFocusable(ye.current)}}),ae.map((e=>jsxRuntime.jsx("input",{type:"hidden",name:n,value:e.value,form:G,disabled:J.disabled},e.value)))]}),addon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[y&&ae.length>0?jsxRuntime.jsx(Chip.Chip,{size:"xs",active:!0,black:!0,marginLeft:12,disabled:J.disabled,cursor:J.disabled?'not-allowed':void 0,text:ae.length,textProps:{appearance:'caption',size:'xs'},palette:J.disabled?{color:'content-disabled',colorHover:'content-disabled',backgroundColor:'bg-disabled-small',backgroundColorHover:'bg-disabled-small'}:void 0,onPointerDown:e=>{e.preventDefault()},onMouseDown:e=>{window.PointerEvent||e.preventDefault()},discardButtonProps:{square:!0,contrast:!J.disabled,onClick:e=>{e.stopPropagation(),K||(f===void 0&&ie([]),P&&P([]),Ie.current?.focus(),Me(''),Se(''),be(!0))}}}):null,!y&&w&&ae.length>0?jsxRuntime.jsx(IconButton.IconButton,{icon:"close",size:"l",square:!0,marginLeft:12,disabled:J.disabled,onClick:e=>{e.stopPropagation(),K||(f===void 0&&ie([]),P&&P(null),Ie.current?.focus(),Me(''),Se(''),be(!0))}}):null]}),dropdown:jsxRuntime.jsx(DropdownMenu.DropdownMenu,{...c,setRef:je,open:xe,popperReferenceId:W,secondary:!x,elevated:x,disableAutoFocus:!0,palette:{backgroundColor:z.menuBackgroundColor,borderColor:z.menuBorderColor},empty:me.length===0,loading:ge,loadingMessage:I,loadingIcon:R,loadingIconProps:{...Q,...V,...u},emptyMessage:F,emptyIcon:q,emptyIconProps:{...Q,...V,...d},onKeyDown:e=>{constants$1.keyboardKeys.Tab.validate(e.key)&&(e.preventDefault(),Ie.current?.focus(),be(!1)),constants$1.keyboardKeys.Enter.validate(e.key)&&(Ie.current?.focus(),Me(utils.getDropdownInputText(ae,y)),be(!1)),constants$1.keyboardKeys.Esc.validate(e.key)&&(Ie.current?.focus(),be(!1)),constants$1.keyboardKeys.Backspace.validate(e.key)&&!K&&(y||!y&&w)&&(f===void 0&&ie([]),P&&P(y?[]:null),Me(''),Se(''))},children:jsxRuntime.jsx(MenuList.MenuList,y?{ref:ye,id:ee,role:"listbox","aria-labelledby":J.label?Y:void 0,"aria-multiselectable":!0,children:le.length===0?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[i?jsxRuntime.jsx(ListItem.ListItem,{...Q,text:T,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",name:n,checked:Ce,indeterminate:he,error:Boolean((Ce||he)&&$==='error'),success:Boolean((Ce||he)&&$==='success'),onChange:()=>{if(!K){const e=Ce||he?[]:[...me];f===void 0&&ie(e),P&&P(e)}}})}):null,i?jsxRuntime.jsx(MenuDivider.MenuDivider,{}):null,B?ve[0].map((e=>{const o=e.status??$;const t=o==='error';const r=o==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,active:!0,text:e.text,danger:t,success:r,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),Ie.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!0,name:n,value:e.value,checked:!0,error:t,success:r,onChange:e=>{if(!K){const o=ae.filter((o=>o.value!==e.currentTarget.value));f===void 0&&ie(o),P&&P(o)}}})})})):null,B&&ve[0].length>0&&ve[1].length>0?jsxRuntime.jsx(MenuDivider.MenuDivider,{}):null,B?ve[1].map((e=>React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation(),Ie.current?.focus()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":!1,name:n,value:e.value,checked:!1,onChange:()=>{if(!K){const o=[...ae,e];f===void 0&&ie(o),P&&P(o)}}})}))):null,!B&&me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;const t=e.status??$;const r=o&&t==='error';const s=o&&t==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,danger:r,success:s,disabled:J.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":o,name:n,value:e.value,checked:o,error:r,success:s,onChange:t=>{if(!K){const n=o?ae.filter((e=>e.value!==t.currentTarget.value)):[...ae,e];f===void 0&&ie(n),P&&P(n)}}})})}))]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;const t=e.status??$;const r=o&&t==='error';const s=o&&t==='success';return React.createElement(ListItem.ListItem,{...Q,key:e.value,text:e.text,danger:r,success:s,disabled:J.disabled,active:o,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:e=>{e.stopPropagation()},control:jsxRuntime.jsx(InputCheckbox.InputCheckbox,{sizes:constants.SIZES_CHECKBOX,form:"none",role:"option","aria-selected":o,name:n,value:e.value,checked:o,error:r,success:s,onChange:t=>{if(!K){const n=o?ae.filter((e=>e.value!==t.currentTarget.value)):[...ae,e];f===void 0&&ie(n),P&&P(n)}}})})}))})}:{ref:ye,id:ee,role:"listbox","aria-labelledby":J.label?Y:void 0,children:me.map((e=>{const o=ae.findIndex((o=>o.value===e.value))!==-1;return React.createElement(ListItem.ListItem,{...Q,role:"option","aria-selected":o,ref:o?we:void 0,key:e.value,text:e.text,active:o,danger:Boolean(o&&$==='error'),success:Boolean(o&&$==='success'),disabled:J.disabled,borderRadius:8,ellipsis:!1,textProps:{wordBreak:'break-word'},onClick:o=>{if(o.stopPropagation(),!K){const o={...e};f===void 0&&(Me(utils.getDropdownInputText(o)),ie(utils.getDropdownSelectedOption(o))),P&&P(o),Ie.current?.focus(),be(!1)}}})}))})})})})),{sizes:constants.SIZES,displayName:"Dropdown"});exports.COMPONENT_NAME="Dropdown",exports.Dropdown=Dropdown;
 //# sourceMappingURL=Dropdown.js.map