@foxford/ui 2.70.0 → 2.71.0

package/components/PopoverComponent/style.mjs

@@ -1,2 +1,2 @@
-import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{IconButton}from'../IconButton/IconButton.mjs';const shouldForwardPopoverComponentProp=createShouldForwardProp((o=>!['orientation','controlsDirection','black','contrast','elevated'].includes(o)));const MediaLandscape=styled.div.withConfig({displayName:"PopoverComponent__MediaLandscape",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;flex-shrink:0;width:45%;margin-right:18px;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='aspectRatio'}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-1"})(["",""],(o=>`\n    box-sizing: border-box;\n    position: relative;\n    height: 0;\n    padding-bottom: ${o.aspectRatio==='16:9'?'56.25%':'100%'};\n    border-radius: 8px;\n\n    & > * {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n    }\n\n    & img,\n    & video {\n      border-radius: inherit;\n      object-fit: contain;\n      height: 100%;\n      width: 100%;\n    }  \n  `));const Controls=styled.div.withConfig({displayName:"PopoverComponent__Controls",componentId:"ui__sc-hvg57g-2"})(["display:flex;flex-wrap:wrap;margin-top:18px;"]);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:inline-flex;isolation:isolate;position:relative;"," "," ",""],(o=>`\n    & ${Controls} {\n      flex-direction: ${o.controlsDirection};\n    }\n  `),(o=>{return`\n  color: ${(n={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,mediaPlaceholderColor:o.theme.colors['bg-oncolor-hover'],...o.palette}).color};\n  background-color: ${n.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${n.shadowColor});\n\n  & ${Media} img,\n  & ${Media} video {\n    background-color: ${n.mediaPlaceholderColor};\n  }\n`;var n}),responsiveSize);const Container=styled.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;"]);const Header=styled.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:center;margin-right:20px;"]);const Content=styled.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;word-break:break-word;& > *:not(:last-child){margin-bottom:18px;}"]);const Video=styled.video.withConfig({displayName:"PopoverComponent__Video",componentId:"ui__sc-hvg57g-7"})(["",""],focus);const CloseButton=styled(IconButton).withConfig({displayName:"PopoverComponent__CloseButton",componentId:"ui__sc-hvg57g-8"})(["position:absolute;top:10px;right:10px;"]);const Footer=styled.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-9"})(["box-sizing:border-box;position:relative;margin-top:18px;"]);export{CloseButton,Container,Content,Controls,Footer,Header,Media,MediaLandscape,Root,Video};
+import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveLayout}from'../../mixins/responsive-layout.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardPopoverComponentProp=createShouldForwardProp((o=>!['black','contrast','elevated'].includes(o)),filterLayoutProps);const Root=styled.div.withConfig({shouldForwardProp:shouldForwardPopoverComponentProp}).withConfig({displayName:"PopoverComponent__Root",componentId:"ui__sc-hvg57g-0"})(["box-sizing:border-box;position:relative;"," "," ",""],(o=>{return`\n  color: ${(e={color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.elevated?o.theme.colors['bg-oncolor-hover']:o.theme.colors.transparent,...o.palette}).color};\n  background-color: ${e.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${e.shadowColor});\n`;var e}),responsiveSize,responsiveLayout);const ButtonPosition=styled.div.withConfig({displayName:"PopoverComponent__ButtonPosition",componentId:"ui__sc-hvg57g-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;"]);const Header=styled.div.withConfig({displayName:"PopoverComponent__Header",componentId:"ui__sc-hvg57g-2"})(["box-sizing:border-box;display:flex;align-items:center;padding-right:20px;"]);const Container=styled.div.withConfig({displayName:"PopoverComponent__Container",componentId:"ui__sc-hvg57g-3"})(["box-sizing:border-box;display:flex;flex-direction:column;gap:inherit;"]);const Content=styled.div.withConfig({displayName:"PopoverComponent__Content",componentId:"ui__sc-hvg57g-4"})(["box-sizing:border-box;display:grid;grid-template-columns:100%;align-content:start;gap:inherit;"]);const Footer=styled.div.withConfig({displayName:"PopoverComponent__Footer",componentId:"ui__sc-hvg57g-5"})(["box-sizing:border-box;display:flex;align-items:end;flex-grow:1;margin-top:12px;"]);const Media=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"PopoverComponent__Media",componentId:"ui__sc-hvg57g-6"})(["box-sizing:border-box;",""],responsiveLayout);const Img=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"PopoverComponent__Img",componentId:"ui__sc-hvg57g-7"})(["box-sizing:border-box;border-radius:8px;",""],(o=>o.src&&`\n      background-image: url(${o.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `));export{ButtonPosition,Container,Content,Footer,Header,Img,Media,Root};
 //# sourceMappingURL=style.mjs.map

package/components/PopoverComponent/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { focus } from 'mixins/focus'\nimport { IconButton } from 'components/IconButton'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { PopoverComponentPalette, StyledPopoverComponentProps, StyledPopoverComponentMediaProps } from './types'\n\nconst shouldForwardPopoverComponentProp = createShouldForwardProp(\n  (propKey) => !['orientation', 'controlsDirection', 'black', 'contrast', 'elevated'].includes(propKey)\n)\n\nexport const MediaLandscape = styled.div`\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 45%;\n  margin-right: 18px;\n`\n\nexport const Media = styled.div.withConfig<StyledPopoverComponentMediaProps>({\n  shouldForwardProp: (propKey) => propKey !== 'aspectRatio',\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    position: relative;\n    height: 0;\n    padding-bottom: ${props.aspectRatio === '16:9' ? '56.25%' : '100%'};\n    border-radius: 8px;\n\n    & > * {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      width: 100%;\n    }\n\n    & img,\n    & video {\n      border-radius: inherit;\n      object-fit: contain;\n      height: 100%;\n      width: 100%;\n    }  \n  `}\n`\n\nexport const Controls = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 18px;\n`\n\nconst template = (\n  palette: Pick<PopoverComponentPalette, 'color' | 'backgroundColor' | 'shadowColor' | 'mediaPlaceholderColor'>\n) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n\n  & ${Media} img,\n  & ${Media} video {\n    background-color: ${palette.mediaPlaceholderColor};\n  }\n`\n\nexport const Root = styled.div.withConfig<StyledPopoverComponentProps>({\n  shouldForwardProp: shouldForwardPopoverComponentProp,\n})`\n  box-sizing: border-box;\n  display: inline-flex;\n  isolation: isolate;\n  position: relative;\n\n  ${(props) => `\n    & ${Controls} {\n      flex-direction: ${props.controlsDirection};\n    }\n  `}\n\n  ${(props) =>\n    template({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n      mediaPlaceholderColor: props.theme.colors['bg-oncolor-hover'],\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  flex-grow: 1;\n`\n\nexport const Header = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  margin-right: 20px;\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  word-break: break-word;\n\n  & > *:not(:last-child) {\n    margin-bottom: 18px;\n  }\n`\n\nexport const Video = styled.video`\n  ${focus}\n`\n\nexport const CloseButton = styled(IconButton)`\n  position: absolute;\n  top: 10px;\n  right: 10px;\n`\n\nexport const Footer = styled.div`\n  box-sizing: border-box;\n  position: relative;\n  margin-top: 18px;\n`\n"],"names":["shouldForwardPopoverComponentProp","createShouldForwardProp","propKey","includes","MediaLandscape","styled","div","withConfig","displayName","componentId","Media","shouldForwardProp","props","aspectRatio","Controls","Root","controlsDirection","template","palette","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","mediaPlaceholderColor","responsiveSize","Container","Header","Content","Video","video","focus","CloseButton","IconButton","Footer"],"mappings":"oQAOA,MAAMA,kCAAoCC,yBACvCC,IAAa,CAAC,cAAe,oBAAqB,QAAS,WAAY,YAAYC,SAASD,WAGlFE,eAAiBC,OAAOC,IAAGC,WAAA,CAAAC,YAAA,mCAAAC,YAAA,mBAAVJ,CAK7B,CAAA,qEAEM,MAAMK,MAAQL,OAAOC,IAAIC,WAA6C,CAC3EI,kBAAoBT,GAAYA,IAAY,gBAC5CK,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAFmBJ,CAEnB,CAAA,GAAA,KACGO,GAAU,+FAIOA,EAAMC,cAAgB,OAAS,SAAW,iVAsBnDC,SAAWT,OAAOC,IAAGC,WAAA,CAAAC,YAAA,6BAAAC,YAAA,mBAAVJ,CAIvB,CAAA,iDAeM,MAAMU,KAAOV,OAAOC,IAAIC,WAAwC,CACrEI,kBAAmBX,oCACnBO,WAAA,CAAAC,YAAA,yBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,iFAAA,IAAA,IAAA,KAMGO,GAAU,WACPE,qCACgBF,EAAMI,kCAIzBJ,IACDK,MA1BC,eADHC,EA2BW,CACPC,MAAOP,EAAMQ,MAAMC,OAAO,0BAC1BC,gBAAiBV,EAAMQ,MAAMC,OAAO,qBACpCE,YAAaX,EAAMY,SAAWZ,EAAMQ,MAAMC,OAAO,oBAAsBT,EAAMQ,MAAMC,OAAOI,YAC1FC,sBAAuBd,EAAMQ,MAAMC,OAAO,uBACvCT,EAAMM,UA9BIC,+BACGD,EAAQI,sDACKJ,EAAQK,wBAErCb,mBACAA,wCACkBQ,EAAQQ,gCAR9BR,KAiCI,GAEFS,sBAGSC,UAAYvB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,8BAAAC,YAAA,mBAAVJ,CAMxB,CAAA,8GAEYwB,OAASxB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAKrB,CAAA,mFAEYyB,QAAUzB,OAAOC,IAAGC,WAAA,CAAAC,YAAA,4BAAAC,YAAA,mBAAVJ,CAOtB,CAAA,kGAEY0B,MAAQ1B,OAAO2B,MAAKzB,WAAA,CAAAC,YAAA,0BAAAC,YAAA,mBAAZJ,CAAY,CAAA,GAAA,IAC7B4B,OAGG,MAAMC,YAAc7B,OAAO8B,YAAW5B,WAAA,CAAAC,YAAA,gCAAAC,YAAA,mBAAlBJ,CAI1B,CAAA,iDAEY+B,OAAS/B,OAAOC,IAAGC,WAAA,CAAAC,YAAA,2BAAAC,YAAA,mBAAVJ,CAIrB,CAAA"}
+{"version":3,"file":"style.mjs","sources":["../../../../src/components/PopoverComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveLayout } from 'mixins/responsive-layout'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport type { PopoverComponentPalette, StyledPopoverComponentProps, StyledPopoverImgProps, Layout } from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n  !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardPopoverComponentProp = createShouldForwardProp(\n  (propKey) => !['black', 'contrast', 'elevated'].includes(propKey),\n  filterLayoutProps\n)\n\nconst template = (palette: Pick<PopoverComponentPalette, 'color' | 'backgroundColor' | 'shadowColor'>) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n`\n\nexport const Root = styled.div.withConfig<StyledPopoverComponentProps>({\n  shouldForwardProp: shouldForwardPopoverComponentProp,\n})`\n  box-sizing: border-box;\n  position: relative;\n\n  ${(props) =>\n    template({\n      color: props.theme.colors['content-onmain-primary'],\n      backgroundColor: props.theme.colors['bg-onmain-primary'],\n      shadowColor: props.elevated ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n      ...props.palette,\n    })}\n\n  ${responsiveSize}\n  ${responsiveLayout}\n`\n\nexport const ButtonPosition = styled.div`\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n`\n\nexport const Header = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding-right: 20px;\n`\n\nexport const Container = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: inherit;\n`\n\nexport const Content = styled.div`\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 100%;\n  align-content: start;\n  gap: inherit;\n`\n\nexport const Footer = styled.div`\n  box-sizing: border-box;\n  display: flex;\n  align-items: end;\n  flex-grow: 1;\n  margin-top: 12px;\n`\n\nexport const Media = styled.div.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n  shouldForwardProp: filterLayoutProps,\n})`\n  box-sizing: border-box;\n\n  ${responsiveLayout}\n`\n\nexport const Img = styled.div.withConfig<StyledPopoverImgProps>({\n  shouldForwardProp: (propKey) => propKey !== 'src',\n})`\n  box-sizing: border-box;\n  border-radius: 8px;\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"],"names":["filterLayoutProps","propKey","includes","shouldForwardPopoverComponentProp","createShouldForwardProp","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","template","palette","color","theme","colors","backgroundColor","shadowColor","elevated","transparent","responsiveSize","responsiveLayout","ButtonPosition","Header","Container","Content","Footer","Media","Img","src"],"mappings":"sOAOA,MAAMA,kBAAqBC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAExG,MAAME,kCAAoCC,yBACvCH,IAAa,CAAC,QAAS,WAAY,YAAYC,SAASD,IACzDD,mBASK,MAAMK,KAAOC,OAAOC,IAAIC,WAAwC,CACrEC,kBAAmBN,oCACnBK,WAAA,CAAAE,YAAA,yBAAAC,YAAA,mBAFkBL,CAMfM,CAAAA,2CAAAA,IAAAA,IAAAA,KAAAA,IACDC,MAbsG,eAAxFC,EAaL,CACPC,MAAOH,EAAMI,MAAMC,OAAO,0BAC1BC,gBAAiBN,EAAMI,MAAMC,OAAO,qBACpCE,YAAaP,EAAMQ,SAAWR,EAAMI,MAAMC,OAAO,oBAAsBL,EAAMI,MAAMC,OAAOI,eACvFT,EAAME,UAhBIC,+BACGD,EAAQI,sDACKJ,EAAQK,kBAHzBL,KAkBZ,GAEFQ,eACAC,wBAGSC,eAAiBlB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,mCAAAC,YAAA,mBAAVL,CAK7B,CAAA,iEAEYmB,OAASnB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,2BAAAC,YAAA,mBAAVL,CAKrB,CAAA,oFAEYoB,UAAYpB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,8BAAAC,YAAA,mBAAVL,CAKxB,CAAA,gFAEYqB,QAAUrB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,4BAAAC,YAAA,mBAAVL,CAMtB,CAAA,yGAEYsB,OAAStB,OAAOC,IAAGC,WAAA,CAAAE,YAAA,2BAAAC,YAAA,mBAAVL,CAMrB,CAAA,oFAEM,MAAMuB,MAAQvB,OAAOC,IAAIC,WAAuD,CACrFC,kBAAmBT,oBACnBQ,WAAA,CAAAE,YAAA,0BAAAC,YAAA,mBAFmBL,CAEnB,CAAA,yBAAA,IAGEiB,kBAGG,MAAMO,IAAMxB,OAAOC,IAAIC,WAAkC,CAC9DC,kBAAoBR,GAAYA,IAAY,QAC5CO,WAAA,CAAAE,YAAA,wBAAAC,YAAA,mBAFiBL,CAEjB,CAAA,2CAAA,KAGGM,GACDA,EAAMmB,KACN,iCAC0BnB,EAAMmB"}