@foxford/ui 2.50.0 → 2.50.1-beta-6021b2d-20241029

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- 'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var IconButton=require('../IconButton/IconButton.js');var Skeleton=require('../Skeleton/Skeleton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=style.createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `:`\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `));const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,100%;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 6px 20px 1px ${o.shadowColor};\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `,template_fancy=o=>`\n color: ${o.color};\n ${FancyBackground} {\n background-color: ${o.backgroundColor};\n }\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n `),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ScrollableContent=styled__default.default.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus.focus);const Controls=styled__default.default.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n background-color: ${o.theme.colors['bg-onmain-tertiary']};\n `),focus.focus);const PositionedIconButton=styled__default.default(IconButton.IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled__default.default.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled__default.default.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;":"\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;"));const MediaSkeleton=styled__default.default(Skeleton.Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${o.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `));const MediaPortraitContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n "),(o=>o.bottom&&"\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n "));exports.Container=Container,exports.Controls=Controls,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.MediaPortrait=MediaPortrait,exports.MediaPortraitContainer=MediaPortraitContainer,exports.MediaSkeleton=MediaSkeleton,exports.Placeholder=Placeholder,exports.PositionedIconButton=PositionedIconButton,exports.Root=Root,exports.ScrollableContent=ScrollableContent;
1
+ 'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var IconButton=require('../IconButton/IconButton.js');var Skeleton=require('../Skeleton/Skeleton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=style.createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `:`\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `));const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 6px 20px 1px ${o.shadowColor};\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `,template_fancy=o=>`\n color: ${o.color};\n ${FancyBackground} {\n background-color: ${o.backgroundColor};\n }\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n `),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ScrollableContent=styled__default.default.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus.focus);const Controls=styled__default.default.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n background-color: ${o.theme.colors['bg-onmain-tertiary']};\n `),focus.focus);const PositionedIconButton=styled__default.default(IconButton.IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled__default.default.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled__default.default.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;":"\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;"));const MediaSkeleton=styled__default.default(Skeleton.Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${o.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `));const MediaPortraitContainer=styled__default.default.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n "),(o=>o.bottom&&"\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n "));exports.Container=Container,exports.Controls=Controls,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Media=Media,exports.MediaLandscape=MediaLandscape,exports.MediaPortrait=MediaPortrait,exports.MediaPortraitContainer=MediaPortraitContainer,exports.MediaSkeleton=MediaSkeleton,exports.Placeholder=Placeholder,exports.PositionedIconButton=PositionedIconButton,exports.Root=Root,exports.ScrollableContent=ScrollableContent;
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n StyledDialogComponentProps,\n DialogComponentPalette,\n StyledDialogContainerProps,\n StyledDialogFadingProps,\n StyledPlaceholderProps,\n StyledDialogMediaProps,\n StyledMediaContainerProps,\n StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, 100%;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding-top: 1px;\n padding-bottom: 1px;\n min-height: 85px;\n flex-grow: 1;\n\n ${focus}\n`\n\nexport const Controls = styled.div`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 10px;\n padding-bottom: 10px;\n cursor: grab;\n touch-action: none;\n z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n padding: 3px 12px;\n border-radius: 12px;\n\n & > * {\n height: 0.25em;\n }\n\n ${(props) => `\n background-color: ${props.theme.colors['bg-onmain-tertiary']};\n `}\n\n ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n z-index: 3;\n ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n .withConfig<StyledPlaceholderProps>({\n shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n })\n .attrs<StyledPlaceholderProps>((props) => ({\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n width: props.orientation === 'portrait' ? '100%' : undefined,\n height: props.orientation === 'landscape' ? '100%' : undefined,\n }))`\n display: block;\n`\n\nexport const MediaPortrait = styled.div`\n box-sizing: border-box;\n position: relative;\n margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n box-sizing: border-box;\n position: relative;\n height: 100%;\n overflow: hidden;\n\n ${(props) =>\n props.right\n ? `\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;`\n : `\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n position: absolute;\n top: 0;\n left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${props.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n box-sizing: border-box;\n overflow: hidden;\n\n ${(props) =>\n props.top &&\n `\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n `}\n\n ${(props) =>\n props.bottom &&\n `\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","default","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"khBAmBA,MAAMA,iCAAmCC,MAAAA,yBAAyBC,IAAa,CAAC,WAAY,SAASC,SAASD,KAE9G,MAAME,iCAAmCH,MAAAA,yBAAyBC,IAAa,CAAC,SAASC,SAASD,KAE3F,MAAMG,OAASC,gBAAAA,QAAOC,IAAIC,WAAoC,CACnEC,kBAAoBP,IAAa,CAAC,UAAW,SAASC,SAASD,KAC/DM,WAAA,CAAAE,YAAA,0BAAAC,YAAA,oBAFoBL,CAEpB,CAAA,+MAAA,KAeGM,GACDA,EAAMC,MACF,iWAWeD,EAAME,QAAU,EAAI,gCAGnC,8VAWeF,EAAME,QAAU,EAAI,kCAK9BC,gBAAkBT,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,mCAAAC,YAAA,oBAAVL,CAOXU,CAAAA,wFAAAA,SAAAA,iHAAAA,UAASC,QAAUC,uBAOvC,MAAMC,iBACMC,GAAoC,gBACnCA,EAAQC,iCACGD,EAAQE,oDACCF,EAAQG,qBACnClB,0BACSe,EAAQE,8BANjBH,eASIC,GAAoC,gBACjCA,EAAQC,eACfN,8CACoBK,EAAQE,gCAE5BjB,0BACSe,EAAQE,8BAKhB,MAAME,KAAOlB,gBAAAA,QAAOC,IAAIC,WAAuC,CACpEC,kBAAmBT,mCACnBQ,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAFkBL,CAElB,CAAA,0EAAA,IAAA,IAAA,KAMGM,IACAA,EAAMa,MAAQN,eAAiBA,kBAAkB,CAChDE,MAAOT,EAAMc,MAAMC,OAAO,0BAC1BL,gBAAiBV,EAAMc,MAAMC,OAAO,qBACpCJ,YAAaX,EAAMc,MAAMC,OAAO,uBAC7Bf,EAAMQ,YAGVR,GACDA,EAAMgB,UACN,iCAC0BhB,EAAMc,MAAMC,OAAOE,oBAAoBjB,EAAMc,MAAMC,OAAO,4BAGpFG,eAAAA,gBAGG,MAAMC,UAAYzB,gBAAAA,QAAOC,IAAIC,WAAuC,CACzEC,kBAAmBL,mCACnBI,WAAA,CAAAE,YAAA,6BAAAC,YAAA,oBAFuBL,CAEvB,CAAA,0GAAA,IAQEwB,eAAAA,sBAGSE,kBAAoB1B,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,qCAAAC,YAAA,oBAAVL,CAAU,CAAA,oJAAA,IAUvC2B,MAAAA,aAGSC,SAAW5B,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,4BAAAC,YAAA,oBAAVL,CAKvB,CAAA,kFAEY6B,eAAiB7B,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,kCAAAC,YAAA,oBAAVL,CAa7B,CAAA,4LAEY8B,sBAAwB9B,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,yCAAAC,YAAA,oBAAVL,CAAU,CAAA,+FAAA,IAAA,KAU1CM,GAAU,6BACWA,EAAMc,MAAMC,OAAO,gCAGzCM,MAAAA,OAGG,MAAMI,qBAAuB/B,gBAAMW,QAACqB,uBAAY9B,WAA4C,CACjGC,kBAAoBP,GAAYA,IAAY,UAC5CM,WAAA,CAAAE,YAAA,wCAAAC,YAAA,oBAFkCL,CAElC,CAAA,+BAAA,KAGGM,GAAUA,EAAM2B,QAGd,MAAMC,YAAclC,gBAAAA,QAAOmC,IAC/BjC,WAAmC,CAClCC,kBAAoBP,IAAa,CAAC,cAAe,eAAeC,SAASD,KAE1EwC,OAA+B9B,IAAW,CACzC+B,MAAO,6BACPC,QAAShC,EAAMiC,cAAgB,MAAQ,UAAY,UACnDC,MAAOlC,EAAMmC,cAAgB,WAAa,YAASC,EACnDC,OAAQrC,EAAMmC,cAAgB,YAAc,YAASC,MACpDxC,WAAA,CAAAE,YAAA,+BAAAC,YAAA,oBATsBL,CAW1B,CAAA,yBAEY4C,cAAgB5C,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,iCAAAC,YAAA,qBAAVL,CAI5B,CAAA,gEAEM,MAAM6C,eAAiB7C,gBAAAA,QAAOC,IAAIC,WAAsC,CAC7EC,kBAAoBP,GAAYA,IAAY,UAC5CM,WAAA,CAAAE,YAAA,kCAAAC,YAAA,qBAF4BL,CAE5B,CAAA,uEAAA,KAMGM,GACDA,EAAMwC,MACF,4FAGA,4FAKD,MAAMC,cAAgB/C,gBAAMW,QAACqC,mBAAS9C,WAAA,CAAAE,YAAA,iCAAAC,YAAA,qBAAhBL,CAI5B,CAAA,oCAEM,MAAMiD,MAAQjD,gBAAAA,QAAOC,IAAIC,WAAmC,CACjEC,kBAAoBP,GAAYA,IAAY,QAC5CM,WAAA,CAAAE,YAAA,yBAAAC,YAAA,qBAFmBL,CAEnB,CAAA,GAAA,KACGM,GAAU,mKAOeA,EAAM4C,uHAO7B,MAAMC,uBAAyBnD,gBAAAA,QAAOC,IAAIC,WAAsC,CACrFC,kBAAoBP,IAAa,CAAC,MAAO,UAAUC,SAASD,KAC5DM,WAAA,CAAAE,YAAA,0CAAAC,YAAA,qBAFoCL,CAEpC,CAAA,yCAAA,IAAA,KAIGM,GACDA,EAAM8C,KACN,4FAKC9C,GACDA,EAAM+C,QACN"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n StyledDialogComponentProps,\n DialogComponentPalette,\n StyledDialogContainerProps,\n StyledDialogFadingProps,\n StyledPlaceholderProps,\n StyledDialogMediaProps,\n StyledMediaContainerProps,\n StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, cover;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding-top: 1px;\n padding-bottom: 1px;\n min-height: 85px;\n flex-grow: 1;\n\n ${focus}\n`\n\nexport const Controls = styled.div`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 10px;\n padding-bottom: 10px;\n cursor: grab;\n touch-action: none;\n z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n padding: 3px 12px;\n border-radius: 12px;\n\n & > * {\n height: 0.25em;\n }\n\n ${(props) => `\n background-color: ${props.theme.colors['bg-onmain-tertiary']};\n `}\n\n ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n z-index: 3;\n ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n .withConfig<StyledPlaceholderProps>({\n shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n })\n .attrs<StyledPlaceholderProps>((props) => ({\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n width: props.orientation === 'portrait' ? '100%' : undefined,\n height: props.orientation === 'landscape' ? '100%' : undefined,\n }))`\n display: block;\n`\n\nexport const MediaPortrait = styled.div`\n box-sizing: border-box;\n position: relative;\n margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n box-sizing: border-box;\n position: relative;\n height: 100%;\n overflow: hidden;\n\n ${(props) =>\n props.right\n ? `\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;`\n : `\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n position: absolute;\n top: 0;\n left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${props.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n box-sizing: border-box;\n overflow: hidden;\n\n ${(props) =>\n props.top &&\n `\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n `}\n\n ${(props) =>\n props.bottom &&\n `\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","default","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import maskRectangle from'./images/mask-rectangle.svg.mjs';import maskSlope from'./images/mask-slope.svg.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `:`\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `));const FancyBackground=styled.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,100%;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope,maskRectangle);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 6px 20px 1px ${o.shadowColor};\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `,template_fancy=o=>`\n color: ${o.color};\n ${FancyBackground} {\n background-color: ${o.backgroundColor};\n }\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `;const Root=styled.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n `),responsiveSize);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const ScrollableContent=styled.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus);const Controls=styled.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n background-color: ${o.theme.colors['bg-onmain-tertiary']};\n `),focus);const PositionedIconButton=styled(IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;":"\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;"));const MediaSkeleton=styled(Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${o.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `));const MediaPortraitContainer=styled.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n "),(o=>o.bottom&&"\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n "));export{Container,Controls,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Media,MediaLandscape,MediaPortrait,MediaPortraitContainer,MediaSkeleton,Placeholder,PositionedIconButton,Root,ScrollableContent};
1
+ import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import maskRectangle from'./images/mask-rectangle.svg.mjs';import maskSlope from'./images/mask-slope.svg.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy'].includes(o)));const shouldForwardDialogContainerProp=createShouldForwardProp((o=>!['fancy'].includes(o)));const Fading=styled.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `:`\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${o.visible?1:0};\n }\n `));const FancyBackground=styled.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope,maskRectangle);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 6px 20px 1px ${o.shadowColor};\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `,template_fancy=o=>`\n color: ${o.color};\n ${FancyBackground} {\n background-color: ${o.backgroundColor};\n }\n ${Fading} {\n color: ${o.backgroundColor};\n }\n `;const Root=styled.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n `),responsiveSize);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const ScrollableContent=styled.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding-top:1px;padding-bottom:1px;min-height:85px;flex-grow:1;",""],focus);const Controls=styled.div.withConfig({displayName:"DialogComponent__Controls",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;position:relative;flex-shrink:0;padding-top:12px;"]);const DraggingHandle=styled.div.withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:10px;padding-bottom:10px;cursor:grab;touch-action:none;z-index:2;"]);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;display:flex;padding:3px 12px;border-radius:12px;& > *{height:0.25em;}"," ",""],(o=>`\n background-color: ${o.theme.colors['bg-onmain-tertiary']};\n `),focus);const PositionedIconButton=styled(IconButton).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedIconButton",componentId:"ui__sc-1dlvioj-8"})(["position:absolute;z-index:3;",""],(o=>o.inset));const Placeholder=styled.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:o.aspectRatio==='3:1'?'0 0 3 1':'0 0 5 7',width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-9"})(["display:block;"]);const MediaPortrait=styled.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;position:relative;margin:-1px -1px 0;"]);const MediaLandscape=styled.div.withConfig({shouldForwardProp:o=>o!=='right'}).withConfig({displayName:"DialogComponent__MediaLandscape",componentId:"ui__sc-1dlvioj-11"})(["box-sizing:border-box;position:relative;height:100%;overflow:hidden;",""],(o=>o.right?"\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;":"\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;"));const MediaSkeleton=styled(Skeleton).withConfig({displayName:"DialogComponent__MediaSkeleton",componentId:"ui__sc-1dlvioj-12"})(["position:absolute;top:0;left:0;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-13"})(["",""],(o=>`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${o.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `));const MediaPortraitContainer=styled.div.withConfig({shouldForwardProp:o=>!['top','bottom'].includes(o)}).withConfig({displayName:"DialogComponent__MediaPortraitContainer",componentId:"ui__sc-1dlvioj-14"})(["box-sizing:border-box;overflow:hidden;"," ",""],(o=>o.top&&"\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n "),(o=>o.bottom&&"\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n "));export{Container,Controls,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Media,MediaLandscape,MediaPortrait,MediaPortraitContainer,MediaSkeleton,Placeholder,PositionedIconButton,Root,ScrollableContent};
2
2
  //# sourceMappingURL=style.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n StyledDialogComponentProps,\n DialogComponentPalette,\n StyledDialogContainerProps,\n StyledDialogFadingProps,\n StyledPlaceholderProps,\n StyledDialogMediaProps,\n StyledMediaContainerProps,\n StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, 100%;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding-top: 1px;\n padding-bottom: 1px;\n min-height: 85px;\n flex-grow: 1;\n\n ${focus}\n`\n\nexport const Controls = styled.div`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 10px;\n padding-bottom: 10px;\n cursor: grab;\n touch-action: none;\n z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n padding: 3px 12px;\n border-radius: 12px;\n\n & > * {\n height: 0.25em;\n }\n\n ${(props) => `\n background-color: ${props.theme.colors['bg-onmain-tertiary']};\n `}\n\n ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n z-index: 3;\n ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n .withConfig<StyledPlaceholderProps>({\n shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n })\n .attrs<StyledPlaceholderProps>((props) => ({\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n width: props.orientation === 'portrait' ? '100%' : undefined,\n height: props.orientation === 'landscape' ? '100%' : undefined,\n }))`\n display: block;\n`\n\nexport const MediaPortrait = styled.div`\n box-sizing: border-box;\n position: relative;\n margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n box-sizing: border-box;\n position: relative;\n height: 100%;\n overflow: hidden;\n\n ${(props) =>\n props.right\n ? `\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;`\n : `\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n position: absolute;\n top: 0;\n left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${props.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n box-sizing: border-box;\n overflow: hidden;\n\n ${(props) =>\n props.top &&\n `\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n `}\n\n ${(props) =>\n props.bottom &&\n `\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"iaAmBA,MAAMA,iCAAmCC,yBAAyBC,IAAa,CAAC,WAAY,SAASC,SAASD,KAE9G,MAAME,iCAAmCH,yBAAyBC,IAAa,CAAC,SAASC,SAASD,KAE3F,MAAMG,OAASC,OAAOC,IAAIC,WAAoC,CACnEC,kBAAoBP,IAAa,CAAC,UAAW,SAASC,SAASD,KAC/DM,WAAA,CAAAE,YAAA,0BAAAC,YAAA,oBAFoBL,CAEpB,CAAA,+MAAA,KAeGM,GACDA,EAAMC,MACF,iWAWeD,EAAME,QAAU,EAAI,gCAGnC,8VAWeF,EAAME,QAAU,EAAI,kCAK9BC,gBAAkBT,OAAOC,IAAGC,WAAA,CAAAE,YAAA,mCAAAC,YAAA,oBAAVL,CAOXU,CAAAA,wFAAAA,SAAAA,iHAAAA,UAAmBC,eAOvC,MAAMC,iBACMC,GAAoC,gBACnCA,EAAQC,iCACGD,EAAQE,oDACCF,EAAQG,qBACnCjB,0BACSc,EAAQE,8BANjBH,eASIC,GAAoC,gBACjCA,EAAQC,eACfL,8CACoBI,EAAQE,gCAE5BhB,0BACSc,EAAQE,8BAKhB,MAAME,KAAOjB,OAAOC,IAAIC,WAAuC,CACpEC,kBAAmBT,mCACnBQ,WAAA,CAAAE,YAAA,wBAAAC,YAAA,oBAFkBL,CAElB,CAAA,0EAAA,IAAA,IAAA,KAMGM,IACAA,EAAMY,MAAQN,eAAiBA,kBAAkB,CAChDE,MAAOR,EAAMa,MAAMC,OAAO,0BAC1BL,gBAAiBT,EAAMa,MAAMC,OAAO,qBACpCJ,YAAaV,EAAMa,MAAMC,OAAO,uBAC7Bd,EAAMO,YAGVP,GACDA,EAAMe,UACN,iCAC0Bf,EAAMa,MAAMC,OAAOE,oBAAoBhB,EAAMa,MAAMC,OAAO,4BAGpFG,gBAGG,MAAMC,UAAYxB,OAAOC,IAAIC,WAAuC,CACzEC,kBAAmBL,mCACnBI,WAAA,CAAAE,YAAA,6BAAAC,YAAA,oBAFuBL,CAEvB,CAAA,0GAAA,IAQEuB,sBAGSE,kBAAoBzB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,qCAAAC,YAAA,oBAAVL,CAAU,CAAA,oJAAA,IAUvC0B,aAGSC,SAAW3B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,4BAAAC,YAAA,oBAAVL,CAKvB,CAAA,kFAEY4B,eAAiB5B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,kCAAAC,YAAA,oBAAVL,CAa7B,CAAA,4LAEY6B,sBAAwB7B,OAAOC,IAAGC,WAAA,CAAAE,YAAA,yCAAAC,YAAA,oBAAVL,CAAU,CAAA,+FAAA,IAAA,KAU1CM,GAAU,6BACWA,EAAMa,MAAMC,OAAO,gCAGzCM,OAGG,MAAMI,qBAAuB9B,OAAO+B,YAAY7B,WAA4C,CACjGC,kBAAoBP,GAAYA,IAAY,UAC5CM,WAAA,CAAAE,YAAA,wCAAAC,YAAA,oBAFkCL,CAElC,CAAA,+BAAA,KAGGM,GAAUA,EAAM0B,QAGd,MAAMC,YAAcjC,OAAOkC,IAC/BhC,WAAmC,CAClCC,kBAAoBP,IAAa,CAAC,cAAe,eAAeC,SAASD,KAE1EuC,OAA+B7B,IAAW,CACzC8B,MAAO,6BACPC,QAAS/B,EAAMgC,cAAgB,MAAQ,UAAY,UACnDC,MAAOjC,EAAMkC,cAAgB,WAAa,YAASC,EACnDC,OAAQpC,EAAMkC,cAAgB,YAAc,YAASC,MACpDvC,WAAA,CAAAE,YAAA,+BAAAC,YAAA,oBATsBL,CAW1B,CAAA,yBAEY2C,cAAgB3C,OAAOC,IAAGC,WAAA,CAAAE,YAAA,iCAAAC,YAAA,qBAAVL,CAI5B,CAAA,gEAEM,MAAM4C,eAAiB5C,OAAOC,IAAIC,WAAsC,CAC7EC,kBAAoBP,GAAYA,IAAY,UAC5CM,WAAA,CAAAE,YAAA,kCAAAC,YAAA,qBAF4BL,CAE5B,CAAA,uEAAA,KAMGM,GACDA,EAAMuC,MACF,4FAGA,4FAKD,MAAMC,cAAgB9C,OAAO+C,UAAS7C,WAAA,CAAAE,YAAA,iCAAAC,YAAA,qBAAhBL,CAI5B,CAAA,oCAEM,MAAMgD,MAAQhD,OAAOC,IAAIC,WAAmC,CACjEC,kBAAoBP,GAAYA,IAAY,QAC5CM,WAAA,CAAAE,YAAA,yBAAAC,YAAA,qBAFmBL,CAEnB,CAAA,GAAA,KACGM,GAAU,mKAOeA,EAAM2C,uHAO7B,MAAMC,uBAAyBlD,OAAOC,IAAIC,WAAsC,CACrFC,kBAAoBP,IAAa,CAAC,MAAO,UAAUC,SAASD,KAC5DM,WAAA,CAAAE,YAAA,0CAAAC,YAAA,qBAFoCL,CAEpC,CAAA,yCAAA,IAAA,KAIGM,GACDA,EAAM6C,KACN,4FAKC7C,GACDA,EAAM8C,QACN"}
1
+ {"version":3,"file":"style.mjs","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { IconButton } from 'components/IconButton'\nimport { Skeleton } from 'components/Skeleton'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type {\n StyledDialogComponentProps,\n DialogComponentPalette,\n StyledDialogContainerProps,\n StyledDialogFadingProps,\n StyledPlaceholderProps,\n StyledDialogMediaProps,\n StyledMediaContainerProps,\n StyledPositionedIconButtonProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp((propKey) => !['dragging', 'fancy'].includes(propKey))\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, cover;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding-top: 1px;\n padding-bottom: 1px;\n min-height: 85px;\n flex-grow: 1;\n\n ${focus}\n`\n\nexport const Controls = styled.div`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n padding-top: 12px;\n`\n\nexport const DraggingHandle = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: center;\n padding-top: 10px;\n padding-bottom: 10px;\n cursor: grab;\n touch-action: none;\n z-index: 2;\n`\n\nexport const DraggingIconContainer = styled.div`\n box-sizing: border-box;\n display: flex;\n padding: 3px 12px;\n border-radius: 12px;\n\n & > * {\n height: 0.25em;\n }\n\n ${(props) => `\n background-color: ${props.theme.colors['bg-onmain-tertiary']};\n `}\n\n ${focus}\n`\n\nexport const PositionedIconButton = styled(IconButton).withConfig<StyledPositionedIconButtonProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n z-index: 3;\n ${(props) => props.inset}\n`\n\nexport const Placeholder = styled.svg\n .withConfig<StyledPlaceholderProps>({\n shouldForwardProp: (propKey) => !['aspectRatio', 'orientation'].includes(propKey),\n })\n .attrs<StyledPlaceholderProps>((props) => ({\n xmlns: 'http://www.w3.org/2000/svg',\n viewBox: props.aspectRatio === '3:1' ? '0 0 3 1' : '0 0 5 7',\n width: props.orientation === 'portrait' ? '100%' : undefined,\n height: props.orientation === 'landscape' ? '100%' : undefined,\n }))`\n display: block;\n`\n\nexport const MediaPortrait = styled.div`\n box-sizing: border-box;\n position: relative;\n margin: -1px -1px 0;\n`\n\nexport const MediaLandscape = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => propKey !== 'right',\n})`\n box-sizing: border-box;\n position: relative;\n height: 100%;\n overflow: hidden;\n\n ${(props) =>\n props.right\n ? `\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;`\n : `\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;`}\n`\n\nexport const MediaSkeleton = styled(Skeleton)`\n position: absolute;\n top: 0;\n left: 0;\n`\n\nexport const Media = styled.div.withConfig<StyledDialogMediaProps>({\n shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n ${(props) => `\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-image: url(${props.src});\n background-size: contain;\n background-repeat: no-repeat;\n background-position: 50%;\n `}\n`\n\nexport const MediaPortraitContainer = styled.div.withConfig<StyledMediaContainerProps>({\n shouldForwardProp: (propKey) => !['top', 'bottom'].includes(propKey),\n})`\n box-sizing: border-box;\n overflow: hidden;\n\n ${(props) =>\n props.top &&\n `\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n `}\n\n ${(props) =>\n props.bottom &&\n `\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n `}\n`\n"],"names":["shouldForwardDialogComponentProp","createShouldForwardProp","propKey","includes","shouldForwardDialogContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","Placeholder","svg","attrs","xmlns","viewBox","aspectRatio","width","orientation","undefined","height","MediaPortrait","MediaLandscape","right","MediaSkeleton","Skeleton","Media","src","MediaPortraitContainer","top","bottom"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@foxford/ui",
3
- "version": "2.50.0",
3
+ "version": "2.50.1-beta-6021b2d-20241029",
4
4
  "description": "UI components library",
5
5
  "bugs": {
6
6
  "url": "https://github.com/foxford/ui/issues"
@@ -62,3 +62,4 @@
62
62
  "theme"
63
63
  ]
64
64
  }
65
+