npm - @foxford/ui - Versions diffs - 2.72.0 → 2.73.0 - Mend

@foxford/ui 2.72.0 → 2.73.0

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.

Files changed (60) hide show

package/components/DialogComponent/layouts.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"layouts.mjs","sources":["../../../../src/components/DialogComponent/layouts.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Layout } from './types'\n\nexport const LAYOUTS: Record<Layout, CSSProperties> = {\n vertical: {\n flexDirection: 'column',\n },\n horizontal: {\n flexDirection: 'row',\n },\n 'vertical-reverse': {\n flexDirection: 'column-reverse',\n },\n 'horizontal-reverse': {\n flexDirection: 'row-reverse',\n },\n}\n\nexport const LAYOUTS_FANCY: Record<Layout, CSSProperties> = {\n vertical: {\n ...LAYOUTS.vertical,\n paddingTop: 96,\n },\n horizontal: {\n ...LAYOUTS.horizontal,\n paddingTop: 0,\n },\n 'vertical-reverse': {\n ...LAYOUTS['vertical-reverse'],\n paddingTop: 96,\n },\n 'horizontal-reverse': {\n ...LAYOUTS['horizontal-reverse'],\n paddingTop: 0,\n },\n}\n\nexport const LAYOUTS_MEDIA_VERTICAL: Record<Layout, CSSProperties> = {\n vertical: {\n borderTopRightRadius: 'inherit',\n borderTopLeftRadius: 'inherit',\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n horizontal: {\n display: 'none',\n },\n 'vertical-reverse': {\n borderTopRightRadius: 0,\n borderTopLeftRadius: 0,\n borderBottomRightRadius: 'inherit',\n borderBottomLeftRadius: 'inherit',\n },\n 'horizontal-reverse': {\n display: 'none',\n },\n}\n\nexport const LAYOUTS_FANCY_MEDIA_VERTICAL: Record<Layout, CSSProperties> = {\n vertical: {\n borderBottomRightRadius: 0,\n borderBottomLeftRadius: 0,\n },\n horizontal: {\n display: 'none',\n },\n 'vertical-reverse': {\n borderBottomRightRadius: 'inherit',\n borderBottomLeftRadius: 'inherit',\n },\n 'horizontal-reverse': {\n display: 'none',\n },\n}\n\nexport const LAYOUTS_MEDIA_HORIZONTAL: Record<Layout, CSSProperties> = {\n vertical: {\n display: 'none',\n },\n horizontal: {\n height: '100%',\n borderTopLeftRadius: 'inherit',\n borderBottomLeftRadius: 'inherit',\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n 'vertical-reverse': {\n display: 'none',\n },\n 'horizontal-reverse': {\n height: '100%',\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderTopRightRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n },\n}\n\nexport const LAYOUTS_PROGRESS: Record<Layout, CSSProperties> = {\n vertical: { top: 0, right: 0, left: 0 },\n horizontal: { top: 0, right: 0, left: 0 },\n 'vertical-reverse': { top: 0, right: 0, left: 0 },\n 'horizontal-reverse': { top: 0, right: 0, left: 0 },\n}\n\nexport const LAYOUTS_FANCY_PROGRESS: Record<Layout, CSSProperties> = {\n vertical: { top: 0, right: 0, bottom: 'auto', left: 0 },\n horizontal: { top: 'auto', right: 0, bottom: 0, left: 0 },\n 'vertical-reverse': { top: 0, right: 0, bottom: 'auto', left: 0 },\n 'horizontal-reverse': { top: 'auto', right: 0, bottom: 0, left: 0 },\n}\n\nexport const VISIBILITY_VERTICAL: Record<Layout, CSSProperties> = {\n vertical: {},\n horizontal: { display: 'none' },\n 'vertical-reverse': {},\n 'horizontal-reverse': { display: 'none' },\n}\n\nexport const VISIBILITY_HORIZONTAL: Record<Layout, CSSProperties> = {\n vertical: { display: 'none' },\n horizontal: {},\n 'vertical-reverse': { display: 'none' },\n 'horizontal-reverse': {},\n}\n"],"names":["LAYOUTS","vertical","flexDirection","horizontal","LAYOUTS_FANCY","paddingTop","LAYOUTS_MEDIA_VERTICAL","borderTopRightRadius","borderTopLeftRadius","borderBottomRightRadius","borderBottomLeftRadius","display","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_PROGRESS","top","right","left","LAYOUTS_FANCY_PROGRESS","bottom","VISIBILITY_VERTICAL","VISIBILITY_HORIZONTAL"],"mappings":"AAGO,MAAMA,QAAyC,CACpDC,SAAU,CACRC,cAAe,UAEjBC,WAAY,CACVD,cAAe,OAEjB,mBAAoB,CAClBA,cAAe,kBAEjB,qBAAsB,CACpBA,cAAe,gBAIZ,MAAME,cAA+C,CAC1DH,SAAU,IACLD,QAAQC,SACXI,WAAY,IAEdF,WAAY,IACPH,QAAQG,WACXE,WAAY,GAEd,mBAAoB,IACfL,QAAQ,oBACXK,WAAY,IAEd,qBAAsB,IACjBL,QAAQ,sBACXK,WAAY,IAIT,MAAMC,uBAAwD,CACnEL,SAAU,CACRM,qBAAsB,UACtBC,oBAAqB,UACrBC,wBAAyB,EACzBC,uBAAwB,GAE1BP,WAAY,CACVQ,QAAS,QAEX,mBAAoB,CAClBJ,qBAAsB,EACtBC,oBAAqB,EACrBC,wBAAyB,UACzBC,uBAAwB,WAE1B,qBAAsB,CACpBC,QAAS,SAIN,MAAMC,6BAA8D,CACzEX,SAAU,CACRQ,wBAAyB,EACzBC,uBAAwB,GAE1BP,WAAY,CACVQ,QAAS,QAEX,mBAAoB,CAClBF,wBAAyB,UACzBC,uBAAwB,WAE1B,qBAAsB,CACpBC,QAAS,SAIN,MAAME,yBAA0D,CACrEZ,SAAU,CACRU,QAAS,QAEXR,WAAY,CACVW,OAAQ,OACRN,oBAAqB,UACrBE,uBAAwB,UACxBH,qBAAsB,EACtBE,wBAAyB,GAE3B,mBAAoB,CAClBE,QAAS,QAEX,qBAAsB,CACpBG,OAAQ,OACRN,oBAAqB,EACrBE,uBAAwB,EACxBH,qBAAsB,UACtBE,wBAAyB,YAItB,MAAMM,iBAAkD,CAC7Dd,SAAU,CAAEe,IAAK,EAAGC,MAAO,EAAGC,KAAM,GACpCf,WAAY,CAAEa,IAAK,EAAGC,MAAO,EAAGC,KAAM,GACtC,mBAAoB,CAAEF,IAAK,EAAGC,MAAO,EAAGC,KAAM,GAC9C,qBAAsB,CAAEF,IAAK,EAAGC,MAAO,EAAGC,KAAM,IAG3C,MAAMC,uBAAwD,CACnElB,SAAU,CAAEe,IAAK,EAAGC,MAAO,EAAGG,OAAQ,OAAQF,KAAM,GACpDf,WAAY,CAAEa,IAAK,OAAQC,MAAO,EAAGG,OAAQ,EAAGF,KAAM,GACtD,mBAAoB,CAAEF,IAAK,EAAGC,MAAO,EAAGG,OAAQ,OAAQF,KAAM,GAC9D,qBAAsB,CAAEF,IAAK,OAAQC,MAAO,EAAGG,OAAQ,EAAGF,KAAM,IAG3D,MAAMG,oBAAqD,CAChEpB,SAAU,CAAE,EACZE,WAAY,CAAEQ,QAAS,QACvB,mBAAoB,CAAE,EACtB,qBAAsB,CAAEA,QAAS,SAG5B,MAAMW,sBAAuD,CAClErB,SAAU,CAAEU,QAAS,QACrBR,WAAY,CAAE,EACd,mBAAoB,CAAEQ,QAAS,QAC/B,qBAAsB,CAAC"}

package/components/DialogComponent/sizes.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 'use strict';const SIZES={xxl:{width:'100%',minWidth:'min-content',maxWidth:1228,borderRadius:20},xl:{width:'100%',minWidth:'min-content',maxWidth:960,borderRadius:20},l:{width:'100%',minWidth:'min-content',maxWidth:780,borderRadius:20},m:{width:'100%',minWidth:'min-content',maxWidth:560,borderRadius:20},s:{width:'100%',minWidth:'min-content',maxWidth:440,borderRadius:20},xs:{width:'100%',minWidth:'min-content',maxWidth:304,borderRadius:20}};const SIZES_FANCY={xxl:{...SIZES.xxl,borderRadius:0},xl:{...SIZES.xl,borderRadius:0},l:{...SIZES.l,borderRadius:0},m:{...SIZES.m,borderRadius:0},s:{...SIZES.s,borderRadius:0},xs:{...SIZES.xs,borderRadius:0}};exports.SIZES=SIZES,exports.SIZES_CAPTION={xxl:{fontSize:20},xl:{fontSize:18},l:{fontSize:18},m:{fontSize:14},s:{fontSize:14},xs:{fontSize:14}},exports.SIZES_CONTAINER={xxl:{paddingTop:44,paddingBottom:44},xl:{paddingTop:36,paddingBottom:36},l:{paddingTop:32,paddingBottom:32},m:{paddingTop:28,paddingBottom:28},s:{paddingTop:28,paddingBottom:28},xs:{paddingTop:20,paddingBottom:20}},exports.SIZES_CONTENT={xxl:{padding:'4px 44px',margin:'0px 4px'},xl:{padding:'4px 36px',margin:'0px 4px'},l:{padding:'4px 32px',margin:'0px 4px'},m:{padding:'4px 28px',margin:'0px 4px'},s:{padding:'4px 28px',margin:'0px 4px'},xs:{padding:'4px 20px',margin:'0px 4px'}},exports.SIZES_FANCY=SIZES_FANCY,exports.SIZES_FOOTER={xxl:{padding:'12px 48px 4px'},xl:{padding:'12px 40px 4px'},l:{padding:'12px 36px 4px'},m:{padding:'12px 32px 4px'},s:{padding:'12px 32px 4px'},xs:{padding:'12px 24px 4px'}},exports.SIZES_SUBTITLE={xxl:{fontSize:24},xl:{fontSize:20},l:{fontSize:20},m:{fontSize:16},s:{fontSize:16},xs:{fontSize:14}},exports.SIZES_TITLE={xxl:{fontSize:32},xl:{fontSize:28},l:{fontSize:24},m:{fontSize:20},s:{fontSize:18},xs:{fontSize:16}};
2	+ //# sourceMappingURL=sizes.js.map

package/components/DialogComponent/sizes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sizes.js","sources":["../../../../src/components/DialogComponent/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 1228,\n borderRadius: 20,\n },\n xl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 960,\n borderRadius: 20,\n },\n l: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 780,\n borderRadius: 20,\n },\n m: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 560,\n borderRadius: 20,\n },\n s: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 440,\n borderRadius: 20,\n },\n xs: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 304,\n borderRadius: 20,\n },\n}\n\nexport const SIZES_FANCY: Record<Size, CSSProperties> = {\n xxl: { ...SIZES.xxl, borderRadius: 0 },\n xl: { ...SIZES.xl, borderRadius: 0 },\n l: { ...SIZES.l, borderRadius: 0 },\n m: { ...SIZES.m, borderRadius: 0 },\n s: { ...SIZES.s, borderRadius: 0 },\n xs: { ...SIZES.xs, borderRadius: 0 },\n}\n\nexport const SIZES_CONTAINER: Record<Size, CSSProperties> = {\n xxl: {\n paddingTop: 44,\n paddingBottom: 44,\n },\n xl: {\n paddingTop: 36,\n paddingBottom: 36,\n },\n l: {\n paddingTop: 32,\n paddingBottom: 32,\n },\n m: {\n paddingTop: 28,\n paddingBottom: 28,\n },\n s: {\n paddingTop: 28,\n paddingBottom: 28,\n },\n xs: {\n paddingTop: 20,\n paddingBottom: 20,\n },\n}\n\nexport const SIZES_CONTENT: Record<Size, CSSProperties> = {\n xxl: {\n padding: '4px 44px',\n margin: '0px 4px',\n },\n xl: {\n padding: '4px 36px',\n margin: '0px 4px',\n },\n l: {\n padding: '4px 32px',\n margin: '0px 4px',\n },\n m: {\n padding: '4px 28px',\n margin: '0px 4px',\n },\n s: {\n padding: '4px 28px',\n margin: '0px 4px',\n },\n xs: {\n padding: '4px 20px',\n margin: '0px 4px',\n },\n}\n\nexport const SIZES_FOOTER: Record<Size, CSSProperties> = {\n xxl: { padding: '12px 48px 4px' },\n xl: { padding: '12px 40px 4px' },\n l: { padding: '12px 36px 4px' },\n m: { padding: '12px 32px 4px' },\n s: { padding: '12px 32px 4px' },\n xs: { padding: '12px 24px 4px' },\n}\n\nexport const SIZES_CAPTION: Record<Size, CSSProperties> = {\n xxl: { fontSize: 20 },\n xl: { fontSize: 18 },\n l: { fontSize: 18 },\n m: { fontSize: 14 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n\nexport const SIZES_TITLE: Record<Size, CSSProperties> = {\n xxl: { fontSize: 32 },\n xl: { fontSize: 28 },\n l: { fontSize: 24 },\n m: { fontSize: 20 },\n s: { fontSize: 18 },\n xs: { fontSize: 16 },\n}\n\nexport const SIZES_SUBTITLE: Record<Size, CSSProperties> = {\n xxl: { fontSize: 24 },\n xl: { fontSize: 20 },\n l: { fontSize: 20 },\n m: { fontSize: 16 },\n s: { fontSize: 16 },\n xs: { fontSize: 14 },\n}\n"],"names":["SIZES","xxl","width","minWidth","maxWidth","borderRadius","xl","l","m","s","xs","SIZES_FANCY","fontSize","paddingTop","paddingBottom","padding","margin"],"mappings":"aAGO,MAAMA,MAAqC,CAChDC,IAAK,CACHC,MAAO,OACPC,SAAU,cACVC,SAAU,KACVC,aAAc,IAEhBC,GAAI,CACFJ,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBE,EAAG,CACDL,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBG,EAAG,CACDN,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBI,EAAG,CACDP,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBK,GAAI,CACFR,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,KAIX,MAAMM,YAA2C,CACtDV,IAAK,IAAKD,MAAMC,IAAKI,aAAc,GACnCC,GAAI,IAAKN,MAAMM,GAAID,aAAc,GACjCE,EAAG,IAAKP,MAAMO,EAAGF,aAAc,GAC/BG,EAAG,IAAKR,MAAMQ,EAAGH,aAAc,GAC/BI,EAAG,IAAKT,MAAMS,EAAGJ,aAAc,GAC/BK,GAAI,IAAKV,MAAMU,GAAIL,aAAc,8CAkEuB,CACxDJ,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU,6BArE0C,CAC1DX,IAAK,CACHY,WAAY,GACZC,cAAe,IAEjBR,GAAI,CACFO,WAAY,GACZC,cAAe,IAEjBP,EAAG,CACDM,WAAY,GACZC,cAAe,IAEjBN,EAAG,CACDK,WAAY,GACZC,cAAe,IAEjBL,EAAG,CACDI,WAAY,GACZC,cAAe,IAEjBJ,GAAI,CACFG,WAAY,GACZC,cAAe,2BAIuC,CACxDb,IAAK,CACHc,QAAS,WACTC,OAAQ,WAEVV,GAAI,CACFS,QAAS,WACTC,OAAQ,WAEVT,EAAG,CACDQ,QAAS,WACTC,OAAQ,WAEVR,EAAG,CACDO,QAAS,WACTC,OAAQ,WAEVP,EAAG,CACDM,QAAS,WACTC,OAAQ,WAEVN,GAAI,CACFK,QAAS,WACTC,OAAQ,iEAI6C,CACvDf,IAAK,CAAEc,QAAS,iBAChBT,GAAI,CAAES,QAAS,iBACfR,EAAG,CAAEQ,QAAS,iBACdP,EAAG,CAAEO,QAAS,iBACdN,EAAG,CAAEM,QAAS,iBACdL,GAAI,CAAEK,QAAS,yCAqB0C,CACzDd,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU,yBAfsC,CACtDX,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU"}

package/components/DialogComponent/sizes.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const SIZES={xxl:{width:'100%',minWidth:'min-content',maxWidth:1228,borderRadius:20},xl:{width:'100%',minWidth:'min-content',maxWidth:960,borderRadius:20},l:{width:'100%',minWidth:'min-content',maxWidth:780,borderRadius:20},m:{width:'100%',minWidth:'min-content',maxWidth:560,borderRadius:20},s:{width:'100%',minWidth:'min-content',maxWidth:440,borderRadius:20},xs:{width:'100%',minWidth:'min-content',maxWidth:304,borderRadius:20}};const SIZES_FANCY={xxl:{...SIZES.xxl,borderRadius:0},xl:{...SIZES.xl,borderRadius:0},l:{...SIZES.l,borderRadius:0},m:{...SIZES.m,borderRadius:0},s:{...SIZES.s,borderRadius:0},xs:{...SIZES.xs,borderRadius:0}};const SIZES_CONTAINER={xxl:{paddingTop:44,paddingBottom:44},xl:{paddingTop:36,paddingBottom:36},l:{paddingTop:32,paddingBottom:32},m:{paddingTop:28,paddingBottom:28},s:{paddingTop:28,paddingBottom:28},xs:{paddingTop:20,paddingBottom:20}};const SIZES_CONTENT={xxl:{padding:'4px 44px',margin:'0px 4px'},xl:{padding:'4px 36px',margin:'0px 4px'},l:{padding:'4px 32px',margin:'0px 4px'},m:{padding:'4px 28px',margin:'0px 4px'},s:{padding:'4px 28px',margin:'0px 4px'},xs:{padding:'4px 20px',margin:'0px 4px'}};const SIZES_FOOTER={xxl:{padding:'12px 48px 4px'},xl:{padding:'12px 40px 4px'},l:{padding:'12px 36px 4px'},m:{padding:'12px 32px 4px'},s:{padding:'12px 32px 4px'},xs:{padding:'12px 24px 4px'}};const SIZES_CAPTION={xxl:{fontSize:20},xl:{fontSize:18},l:{fontSize:18},m:{fontSize:14},s:{fontSize:14},xs:{fontSize:14}};const SIZES_TITLE={xxl:{fontSize:32},xl:{fontSize:28},l:{fontSize:24},m:{fontSize:20},s:{fontSize:18},xs:{fontSize:16}};const SIZES_SUBTITLE={xxl:{fontSize:24},xl:{fontSize:20},l:{fontSize:20},m:{fontSize:16},s:{fontSize:16},xs:{fontSize:14}};export{SIZES,SIZES_CAPTION,SIZES_CONTAINER,SIZES_CONTENT,SIZES_FANCY,SIZES_FOOTER,SIZES_SUBTITLE,SIZES_TITLE};
2	+ //# sourceMappingURL=sizes.mjs.map

package/components/DialogComponent/sizes.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sizes.mjs","sources":["../../../../src/components/DialogComponent/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xxl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 1228,\n borderRadius: 20,\n },\n xl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 960,\n borderRadius: 20,\n },\n l: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 780,\n borderRadius: 20,\n },\n m: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 560,\n borderRadius: 20,\n },\n s: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 440,\n borderRadius: 20,\n },\n xs: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 304,\n borderRadius: 20,\n },\n}\n\nexport const SIZES_FANCY: Record<Size, CSSProperties> = {\n xxl: { ...SIZES.xxl, borderRadius: 0 },\n xl: { ...SIZES.xl, borderRadius: 0 },\n l: { ...SIZES.l, borderRadius: 0 },\n m: { ...SIZES.m, borderRadius: 0 },\n s: { ...SIZES.s, borderRadius: 0 },\n xs: { ...SIZES.xs, borderRadius: 0 },\n}\n\nexport const SIZES_CONTAINER: Record<Size, CSSProperties> = {\n xxl: {\n paddingTop: 44,\n paddingBottom: 44,\n },\n xl: {\n paddingTop: 36,\n paddingBottom: 36,\n },\n l: {\n paddingTop: 32,\n paddingBottom: 32,\n },\n m: {\n paddingTop: 28,\n paddingBottom: 28,\n },\n s: {\n paddingTop: 28,\n paddingBottom: 28,\n },\n xs: {\n paddingTop: 20,\n paddingBottom: 20,\n },\n}\n\nexport const SIZES_CONTENT: Record<Size, CSSProperties> = {\n xxl: {\n padding: '4px 44px',\n margin: '0px 4px',\n },\n xl: {\n padding: '4px 36px',\n margin: '0px 4px',\n },\n l: {\n padding: '4px 32px',\n margin: '0px 4px',\n },\n m: {\n padding: '4px 28px',\n margin: '0px 4px',\n },\n s: {\n padding: '4px 28px',\n margin: '0px 4px',\n },\n xs: {\n padding: '4px 20px',\n margin: '0px 4px',\n },\n}\n\nexport const SIZES_FOOTER: Record<Size, CSSProperties> = {\n xxl: { padding: '12px 48px 4px' },\n xl: { padding: '12px 40px 4px' },\n l: { padding: '12px 36px 4px' },\n m: { padding: '12px 32px 4px' },\n s: { padding: '12px 32px 4px' },\n xs: { padding: '12px 24px 4px' },\n}\n\nexport const SIZES_CAPTION: Record<Size, CSSProperties> = {\n xxl: { fontSize: 20 },\n xl: { fontSize: 18 },\n l: { fontSize: 18 },\n m: { fontSize: 14 },\n s: { fontSize: 14 },\n xs: { fontSize: 14 },\n}\n\nexport const SIZES_TITLE: Record<Size, CSSProperties> = {\n xxl: { fontSize: 32 },\n xl: { fontSize: 28 },\n l: { fontSize: 24 },\n m: { fontSize: 20 },\n s: { fontSize: 18 },\n xs: { fontSize: 16 },\n}\n\nexport const SIZES_SUBTITLE: Record<Size, CSSProperties> = {\n xxl: { fontSize: 24 },\n xl: { fontSize: 20 },\n l: { fontSize: 20 },\n m: { fontSize: 16 },\n s: { fontSize: 16 },\n xs: { fontSize: 14 },\n}\n"],"names":["SIZES","xxl","width","minWidth","maxWidth","borderRadius","xl","l","m","s","xs","SIZES_FANCY","SIZES_CONTAINER","paddingTop","paddingBottom","SIZES_CONTENT","padding","margin","SIZES_FOOTER","SIZES_CAPTION","fontSize","SIZES_TITLE","SIZES_SUBTITLE"],"mappings":"AAGO,MAAMA,MAAqC,CAChDC,IAAK,CACHC,MAAO,OACPC,SAAU,cACVC,SAAU,KACVC,aAAc,IAEhBC,GAAI,CACFJ,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBE,EAAG,CACDL,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBG,EAAG,CACDN,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBI,EAAG,CACDP,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,IAEhBK,GAAI,CACFR,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,KAIX,MAAMM,YAA2C,CACtDV,IAAK,IAAKD,MAAMC,IAAKI,aAAc,GACnCC,GAAI,IAAKN,MAAMM,GAAID,aAAc,GACjCE,EAAG,IAAKP,MAAMO,EAAGF,aAAc,GAC/BG,EAAG,IAAKR,MAAMQ,EAAGH,aAAc,GAC/BI,EAAG,IAAKT,MAAMS,EAAGJ,aAAc,GAC/BK,GAAI,IAAKV,MAAMU,GAAIL,aAAc,IAG5B,MAAMO,gBAA+C,CAC1DX,IAAK,CACHY,WAAY,GACZC,cAAe,IAEjBR,GAAI,CACFO,WAAY,GACZC,cAAe,IAEjBP,EAAG,CACDM,WAAY,GACZC,cAAe,IAEjBN,EAAG,CACDK,WAAY,GACZC,cAAe,IAEjBL,EAAG,CACDI,WAAY,GACZC,cAAe,IAEjBJ,GAAI,CACFG,WAAY,GACZC,cAAe,KAIZ,MAAMC,cAA6C,CACxDd,IAAK,CACHe,QAAS,WACTC,OAAQ,WAEVX,GAAI,CACFU,QAAS,WACTC,OAAQ,WAEVV,EAAG,CACDS,QAAS,WACTC,OAAQ,WAEVT,EAAG,CACDQ,QAAS,WACTC,OAAQ,WAEVR,EAAG,CACDO,QAAS,WACTC,OAAQ,WAEVP,GAAI,CACFM,QAAS,WACTC,OAAQ,YAIL,MAAMC,aAA4C,CACvDjB,IAAK,CAAEe,QAAS,iBAChBV,GAAI,CAAEU,QAAS,iBACfT,EAAG,CAAES,QAAS,iBACdR,EAAG,CAAEQ,QAAS,iBACdP,EAAG,CAAEO,QAAS,iBACdN,GAAI,CAAEM,QAAS,kBAGV,MAAMG,cAA6C,CACxDlB,IAAK,CAAEmB,SAAU,IACjBd,GAAI,CAAEc,SAAU,IAChBb,EAAG,CAAEa,SAAU,IACfZ,EAAG,CAAEY,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,GAAI,CAAEU,SAAU,KAGX,MAAMC,YAA2C,CACtDpB,IAAK,CAAEmB,SAAU,IACjBd,GAAI,CAAEc,SAAU,IAChBb,EAAG,CAAEa,SAAU,IACfZ,EAAG,CAAEY,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,GAAI,CAAEU,SAAU,KAGX,MAAME,eAA8C,CACzDrB,IAAK,CAAEmB,SAAU,IACjBd,GAAI,CAAEc,SAAU,IAChBb,EAAG,CAAEa,SAAU,IACfZ,EAAG,CAAEY,SAAU,IACfX,EAAG,CAAEW,SAAU,IACfV,GAAI,CAAEU,SAAU"}

package/components/DialogComponent/style.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');var maskRectangle=require('./images/mask-rectangle.svg.js');var maskSlope=require('./images/mask-slope.svg.js');var IconButton=require('../IconButton/IconButton.js');var ProgressLine=require('../ProgressLine/ProgressLine.js');var Skeleton=require('../Skeleton/Skeleton.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)));const shouldForwardDialogContainerProp=style.createShouldForwardProp((o=>!['fancy'].includes(o)));const shouldForwardProgressLineContainerProp=style.createShouldForwardProp((o=>!['inset'].includes(o)));const Fading=styled__default.default.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled__default.default.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope.default,maskRectangle.default);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize.responsiveSize);const Container=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const ScrollableContent=styled__default.default.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding:4px;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:12px 4px 4px;"]);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 PositionedProgressLine=styled__default.default(ProgressLine.ProgressLine).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedProgressLine",componentId:"ui__sc-1dlvioj-9"})(["position:absolute;",""],(o=>o.inset));const ProgressLineContainer=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardProgressLineContainerProp}).withConfig({displayName:"DialogComponent__ProgressLineContainer",componentId:"ui__sc-1dlvioj-10"})(["position:absolute;"," ",""],(o=>o.inset),responsiveSize.responsiveSize);const Placeholder=styled__default.default.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:{'1:1':'0 0 1 1','3:1':'0 0 3 1','4:5':'0 0 4 5','5:2':'0 0 5 2','5:7':'0 0 5 7'}[o.aspectRatio],width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-11"})(["display:block;"]);const MediaPortrait=styled__default.default.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-12"})(["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-13"})(["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-14"})(["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-15"})(["",""],(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-16"})(["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.PositionedProgressLine=PositionedProgressLine,exports.ProgressLineContainer=ProgressLineContainer,exports.Root=Root,exports.ScrollableContent=ScrollableContent;
+'use strict';var styled=require('styled-components');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveLayout=require('../../mixins/responsive-layout.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 Spacer=require('../Spacer/Spacer.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardDialogComponentProp=style.createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)),filterLayoutProps);const filterCommonProps=style.createShouldForwardProp((o=>!['scrollable'].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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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;display:flex;position:relative;isolation:isolate;"," "," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize.responsiveSize,responsiveLayout.responsiveLayout);const Body=styled__default.default.div.withConfig({displayName:"DialogComponent__Body",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;"]);const Container=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize.responsiveSize);const Content=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;flex-grow:1;"," "," ",""],(o=>`\n     overflow: ${o.scrollable?'auto':'hidden'};\n     overscroll-behavior: ${o.scrollable?'contain':'auto'};\n  `),focus.focus,responsiveSize.responsiveSize);const Footer=styled__default.default.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-shrink:0;",""],responsiveSize.responsiveSize);const DraggingHandle=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-7"})(["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;",""],responsiveLayout.responsiveLayout);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-8"})(["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 Media=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;overflow:hidden;flex-shrink:0;",""],responsiveLayout.responsiveLayout);const Img=styled__default.default.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Img",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;",""],(o=>o.src&&`\n      background-image: url(${o.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `));const LayoutSpacer=styled__default.default(Spacer.Spacer).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__LayoutSpacer",componentId:"ui__sc-1dlvioj-11"})(["",""],responsiveLayout.responsiveLayout);const ButtonPosition=styled__default.default.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-12"})(["box-sizing:border-box;position:absolute;top:0;right:0;z-index:3;"]);const ProgressPosition=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__ProgressPosition",componentId:"ui__sc-1dlvioj-13"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout.responsiveLayout);exports.Body=Body,exports.ButtonPosition=ButtonPosition,exports.Container=Container,exports.Content=Content,exports.DraggingHandle=DraggingHandle,exports.DraggingIconContainer=DraggingIconContainer,exports.Fading=Fading,exports.FancyBackground=FancyBackground,exports.Footer=Footer,exports.Img=Img,exports.LayoutSpacer=LayoutSpacer,exports.Media=Media,exports.ProgressPosition=ProgressPosition,exports.Root=Root;
 //# sourceMappingURL=style.js.map

package/components/DialogComponent/style.js.map CHANGED Viewed

	@@ -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 { ProgressLine } from 'components/ProgressLine'\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 StyledPositionedProgressLineProps,\n StyledProgressLineContainerProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey)\n)\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nconst shouldForwardProgressLineContainerProp = createShouldForwardProp((propKey) => !['inset'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, cover;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n \n ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 4px;\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: 12px 4px 4px;\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 PositionedProgressLine = styled(ProgressLine).withConfig<StyledPositionedProgressLineProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n ${(props) => props.inset}\n`\n\nexport const ProgressLineContainer = styled.div.withConfig<StyledProgressLineContainerProps>({\n shouldForwardProp: shouldForwardProgressLineContainerProp,\n})`\n position: absolute;\n ${(props) => props.inset}\n\n ${responsiveSize}\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: {\n '1:1': '0 0 1 1',\n '3:1': '0 0 3 1',\n '4:5': '0 0 4 5',\n '5:2': '0 0 5 2',\n '5:7': '0 0 5 7',\n }[props.aspectRatio],\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","shouldForwardProgressLineContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","default","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","zIndex","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","PositionedProgressLine","ProgressLine","ProgressLineContainer","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	+ {"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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"}

package/components/DialogComponent/style.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import maskRectangle from'./images/mask-rectangle.svg.mjs';import maskSlope from'./images/mask-slope.svg.mjs';import{IconButton}from'../IconButton/IconButton.mjs';import{ProgressLine}from'../ProgressLine/ProgressLine.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)));const shouldForwardDialogContainerProp=createShouldForwardProp((o=>!['fancy'].includes(o)));const shouldForwardProgressLineContainerProp=createShouldForwardProp((o=>!['inset'].includes(o)));const Fading=styled.div.withConfig({shouldForwardProp:o=>!['visible','after'].includes(o)}).withConfig({displayName:"DialogComponent__Fading",componentId:"ui__sc-1dlvioj-0"})(["box-sizing:border-box;position:relative;flex-shrink:0;width:100%;z-index:1;&::before,&::after{transition-property:opacity;transition-duration:150ms;transition-timing-function:ease-in;pointer-events:none;}",""],(o=>o.after?`\n          &::after {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            bottom: 100%;\n            left: 0;\n            margin-bottom: -1px;\n            background-image: linear-gradient(0deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n            `:`\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            height: 35px;\n            width: 100%;\n            top: 100%;\n            left: 0;\n            margin-top: -1px;\n            background-image: linear-gradient(180deg, currentcolor, transparent);\n            opacity: ${o.visible?1:0};\n          }\n      `));const FancyBackground=styled.div.withConfig({displayName:"DialogComponent__FancyBackground",componentId:"ui__sc-1dlvioj-1"})(["box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;mask-image:url(","),url(",");mask-repeat:no-repeat,no-repeat;mask-size:100% 32px,cover;mask-position:0 56px,0 87px;border-radius:inherit;"],maskSlope,maskRectangle);const template_default=o=>`\n    color: ${o.color};\n    background-color: ${o.backgroundColor};\n    box-shadow: 0 6px 20px 1px ${o.shadowColor};\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `,template_fancy=o=>`\n    color: ${o.color};\n    ${FancyBackground} {\n      background-color: ${o.backgroundColor};\n    }\n    ${Fading} {\n      color: ${o.backgroundColor};\n    }\n  `;const Root=styled.div.withConfig({shouldForwardProp:shouldForwardDialogComponentProp}).withConfig({displayName:"DialogComponent__Root",componentId:"ui__sc-1dlvioj-2"})(["box-sizing:border-box;position:relative;display:flex;isolation:isolate;"," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize);const Container=styled.div.withConfig({shouldForwardProp:shouldForwardDialogContainerProp}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const ScrollableContent=styled.div.withConfig({displayName:"DialogComponent__ScrollableContent",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;position:relative;overflow:auto;overscroll-behavior:contain;padding:4px;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:12px 4px 4px;"]);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 PositionedProgressLine=styled(ProgressLine).withConfig({shouldForwardProp:o=>o!=='inset'}).withConfig({displayName:"DialogComponent__PositionedProgressLine",componentId:"ui__sc-1dlvioj-9"})(["position:absolute;",""],(o=>o.inset));const ProgressLineContainer=styled.div.withConfig({shouldForwardProp:shouldForwardProgressLineContainerProp}).withConfig({displayName:"DialogComponent__ProgressLineContainer",componentId:"ui__sc-1dlvioj-10"})(["position:absolute;"," ",""],(o=>o.inset),responsiveSize);const Placeholder=styled.svg.withConfig({shouldForwardProp:o=>!['aspectRatio','orientation'].includes(o)}).attrs((o=>({xmlns:'http://www.w3.org/2000/svg',viewBox:{'1:1':'0 0 1 1','3:1':'0 0 3 1','4:5':'0 0 4 5','5:2':'0 0 5 2','5:7':'0 0 5 7'}[o.aspectRatio],width:o.orientation==='portrait'?'100%':void 0,height:o.orientation==='landscape'?'100%':void 0}))).withConfig({displayName:"DialogComponent__Placeholder",componentId:"ui__sc-1dlvioj-11"})(["display:block;"]);const MediaPortrait=styled.div.withConfig({displayName:"DialogComponent__MediaPortrait",componentId:"ui__sc-1dlvioj-12"})(["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-13"})(["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-14"})(["position:absolute;top:0;left:0;"]);const Media=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-15"})(["",""],(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-16"})(["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,PositionedProgressLine,ProgressLineContainer,Root,ScrollableContent};
+import styled from'styled-components';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveLayout}from'../../mixins/responsive-layout.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{Spacer}from'../Spacer/Spacer.mjs';const filterLayoutProps=o=>!['layout','layoutXXS','layoutXS','layoutS','layoutM','layoutL','layoutXL','layouts'].includes(o);const shouldForwardDialogComponentProp=createShouldForwardProp((o=>!['dragging','fancy','zIndex'].includes(o)),filterLayoutProps);const filterCommonProps=createShouldForwardProp((o=>!['scrollable'].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            bottom: 100%;\n            right: 4px; \n            left: 4px;\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            top: 100%;\n            right: 4px;\n            left: 4px;\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;display:flex;position:relative;isolation:isolate;"," "," "," "," ",""],(o=>(o.fancy?template_fancy:template_default)({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-primary'],shadowColor:o.theme.colors['bg-oncolor-hover'],...o.palette})),(o=>o.dragging&&`\n      box-shadow: 0 0 0 2px ${o.theme.colors.white}, 0 0 0 4px ${o.theme.colors['border-focus']};\n      `),(o=>typeof o.zIndex=='number'&&`z-index: ${o.zIndex};`),responsiveSize,responsiveLayout);const Body=styled.div.withConfig({displayName:"DialogComponent__Body",componentId:"ui__sc-1dlvioj-3"})(["box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;"]);const Container=styled.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-4"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;",""],responsiveSize);const Content=styled.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;flex-grow:1;"," "," ",""],(o=>`\n     overflow: ${o.scrollable?'auto':'hidden'};\n     overscroll-behavior: ${o.scrollable?'contain':'auto'};\n  `),focus,responsiveSize);const Footer=styled.div.withConfig({shouldForwardProp:filterCommonProps}).withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-shrink:0;",""],responsiveSize);const DraggingHandle=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-7"})(["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;",""],responsiveLayout);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-8"})(["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 Media=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__Media",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;overflow:hidden;flex-shrink:0;",""],responsiveLayout);const Img=styled.div.withConfig({shouldForwardProp:o=>o!=='src'}).withConfig({displayName:"DialogComponent__Img",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;",""],(o=>o.src&&`\n      background-image: url(${o.src});\n      background-repeat: no-repeat;\n      background-position: 50%;\n      background-size: cover;\n    `));const LayoutSpacer=styled(Spacer).withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__LayoutSpacer",componentId:"ui__sc-1dlvioj-11"})(["",""],responsiveLayout);const ButtonPosition=styled.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-12"})(["box-sizing:border-box;position:absolute;top:0;right:0;z-index:3;"]);const ProgressPosition=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__ProgressPosition",componentId:"ui__sc-1dlvioj-13"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout);export{Body,ButtonPosition,Container,Content,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Footer,Img,LayoutSpacer,Media,ProgressPosition,Root};
 //# sourceMappingURL=style.mjs.map

package/components/DialogComponent/style.mjs.map CHANGED Viewed

	@@ -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 { ProgressLine } from 'components/ProgressLine'\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 StyledPositionedProgressLineProps,\n StyledProgressLineContainerProps,\n} from './types'\n\nconst shouldForwardDialogComponentProp = createShouldForwardProp(\n (propKey) => !['dragging', 'fancy', 'zIndex'].includes(propKey)\n)\n\nconst shouldForwardDialogContainerProp = createShouldForwardProp((propKey) => !['fancy'].includes(propKey))\n\nconst shouldForwardProgressLineContainerProp = createShouldForwardProp((propKey) => !['inset'].includes(propKey))\n\nexport const Fading = styled.div.withConfig<StyledDialogFadingProps>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n bottom: 100%;\n left: 0;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n width: 100%;\n top: 100%;\n left: 0;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size: 100% 32px, cover;\n mask-position: 0 56px, 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n `}\n \n ${(props) => typeof props.zIndex === 'number' && `z-index: ${props.zIndex};`}\n\n ${responsiveSize}\n`\n\nexport const Container = styled.div.withConfig<StyledDialogContainerProps>({\n shouldForwardProp: shouldForwardDialogContainerProp,\n})`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n\n ${responsiveSize}\n`\n\nexport const ScrollableContent = styled.div`\n box-sizing: border-box;\n position: relative;\n overflow: auto;\n overscroll-behavior: contain;\n padding: 4px;\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: 12px 4px 4px;\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 PositionedProgressLine = styled(ProgressLine).withConfig<StyledPositionedProgressLineProps>({\n shouldForwardProp: (propKey) => propKey !== 'inset',\n})`\n position: absolute;\n ${(props) => props.inset}\n`\n\nexport const ProgressLineContainer = styled.div.withConfig<StyledProgressLineContainerProps>({\n shouldForwardProp: shouldForwardProgressLineContainerProp,\n})`\n position: absolute;\n ${(props) => props.inset}\n\n ${responsiveSize}\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: {\n '1:1': '0 0 1 1',\n '3:1': '0 0 3 1',\n '4:5': '0 0 4 5',\n '5:2': '0 0 5 2',\n '5:7': '0 0 5 7',\n }[props.aspectRatio],\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","shouldForwardProgressLineContainerProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","white","zIndex","responsiveSize","Container","ScrollableContent","focus","Controls","DraggingHandle","DraggingIconContainer","PositionedIconButton","IconButton","inset","PositionedProgressLine","ProgressLine","ProgressLineContainer","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	+ {"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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"}

package/components/PopoverComponent/PopoverComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Badge=require('../Badge/Badge.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const PopoverComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="s",layout:i="vertical",sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:R,root:p,badge:y,caption:S,header:h,title:g,content:z,body:T,closeButton:E,media:f,footer:B,imgSrcVertical:k,imgSrcHorizontal:I,loading:b,palette:w,closeFn:v,...A}=e;const L={size:s,sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u};const X={layout:i,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:R};const P={borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:sizes.SIZES_HEADER_BADGE};const V={as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:sizes.SIZES_CAPTION};const C={as:'h2',appearance:'subheading',color:'inherit',marginBottom:z?'0.4em':void 0,wordBreak:'break-word',sizes:sizes.SIZES_TITLE};const q={as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:sizes.SIZES_CONTENT};const _={icon:'close',square:!0,marginTop:10,marginRight:10,sizes:sizes.SIZES_CLOSE_BUTTON,onClick:()=>{typeof v=='function'&&v()}};return jsxRuntime.jsx(style.Root,{...A,...L,...X,layouts:layouts.LAYOUTS,palette:w,ref:t,children:React.isValidElement(p)?p:typeof p=='function'?p({badgeProps:P,captionProps:V,titleProps:C,contentProps:q,closeButtonProps:_}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(b||f||I)&&jsxRuntime.jsx(style.Media,{...X,layouts:layouts.VISIBILITY_HORIZONTAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(f)?f:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:I})})}),jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsxs(style.Content,{children:[b?jsxRuntime.jsx(style.Header,{children:jsxRuntime.jsx(Skeleton.Skeleton,{width:"20%",children:jsxRuntime.jsx(Badge.Badge,{...L,...P})})}):React.isValidElement(h)?h:y||S?jsxRuntime.jsxs(style.Header,{children:[React.isValidElement(y)?y:typeof y=='function'?y({...L,...P}):typeof y=='string'||typeof y=='number'?jsxRuntime.jsx(Badge.Badge,{...L,...P,children:y}):null,React.isValidElement(S)?S:typeof S=='function'?S({...L,...V}):typeof S=='string'||typeof S=='number'?jsxRuntime.jsx(Text.Text,{...L,...V,children:S}):null]}):null,(b||f||k)&&jsxRuntime.jsx(style.Media,{...X,layouts:layouts.VISIBILITY_VERTICAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(f)?f:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(style.Img,{src:k})})}),b?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,children:jsxRuntime.jsx(Text.Text,{appearance:"subheading",marginBottom:"0.4em",sizes:sizes.SIZES_TITLE,...L})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"70%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:sizes.SIZES_CONTENT,...L})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"50%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",sizes:sizes.SIZES_CONTENT,...L})})]}):React.isValidElement(T)?T:g||z?jsxRuntime.jsxs("div",{children:[React.isValidElement(g)?g:typeof g=='function'?g({...L,...C}):typeof g=='string'||typeof g=='number'?jsxRuntime.jsx(Text.Text,{...L,...C,children:g}):null,React.isValidElement(z)?z:typeof z=='function'?z({...L,...q}):typeof z=='string'||typeof z=='number'?jsxRuntime.jsx(Text.Text,{...L,...q,children:z}):null]}):null]}),B&&jsxRuntime.jsx(style.Footer,{children:b?jsxRuntime.jsx(Skeleton.Skeleton,{width:"100%",children:jsxRuntime.jsx(Button.Button,{preset:"brand",...L})}):React.isValidElement(B)?B:null})]}),E&&jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(E)?E:typeof E=='function'?E({...L,..._}):null})]})})})),{displayName:'PopoverComponent',sizes:sizes.SIZES});exports.PopoverComponent=PopoverComponent;
+'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Badge=require('../Badge/Badge.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const PopoverComponent=withMergedProps.withMergedProps(React.forwardRef(((e,t)=>{const{size:s="s",layout:i="vertical",sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p,root:R,badge:y,caption:S,header:h,title:g,content:z,body:T,closeButton:f,media:E,footer:B,imgSrcVertical:k,imgSrcHorizontal:I,loading:b,palette:w,closeFn:v,...P}=e;const A={size:s,sizeXXS:n,sizeXS:o,sizeS:r,sizeM:a,sizeL:l,sizeXL:u};const L={layout:i,layoutXXS:c,layoutXS:d,layoutS:x,layoutM:j,layoutL:m,layoutXL:p};const X={...A,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:sizes.SIZES_HEADER_BADGE};const V={...A,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:sizes.SIZES_CAPTION};const C={...A,as:'h2',appearance:'subheading',color:'inherit',marginBottom:z?'0.4em':void 0,wordBreak:'break-word',sizes:sizes.SIZES_TITLE};const q={...A,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:sizes.SIZES_CONTENT};const _={...A,icon:'close',square:!0,marginTop:10,marginRight:10,sizes:sizes.SIZES_CLOSE_BUTTON,onClick:()=>{typeof v=='function'&&v()}};return jsxRuntime.jsx(style.Root,{...P,...A,...L,layouts:layouts.LAYOUTS,palette:w,ref:t,children:React.isValidElement(R)?R:typeof R=='function'?R({badgeProps:X,captionProps:V,titleProps:C,contentProps:q,closeButtonProps:_}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(b||E||I)&&jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_HORIZONTAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"1:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:I})})}),jsxRuntime.jsxs(style.Container,{children:[jsxRuntime.jsxs(style.Content,{children:[b?jsxRuntime.jsx(style.Header,{children:jsxRuntime.jsx(Skeleton.Skeleton,{width:"20%",children:jsxRuntime.jsx(Badge.Badge,{...X})})}):React.isValidElement(h)?h:typeof h=='function'?h({badgeProps:X,captionProps:V}):y||S?jsxRuntime.jsxs(style.Header,{children:[React.isValidElement(y)?y:typeof y=='function'?y(X):typeof y=='string'||typeof y=='number'?jsxRuntime.jsx(Badge.Badge,{...X,children:y}):null,React.isValidElement(S)?S:typeof S=='function'?S(V):typeof S=='string'||typeof S=='number'?jsxRuntime.jsx(Text.Text,{...V,children:S}):null]}):null,(b||E||k)&&jsxRuntime.jsx(style.Media,{...L,layouts:layouts.VISIBILITY_VERTICAL,children:b?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{})}):React.isValidElement(E)?E:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"16:9",width:"100%",children:jsxRuntime.jsx(style.Img,{src:k})})}),b?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,children:jsxRuntime.jsx(Text.Text,{appearance:"subheading",marginBottom:"0.4em",sizes:sizes.SIZES_TITLE,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"70%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:sizes.SIZES_CONTENT,...A})}),jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:4,width:"50%",children:jsxRuntime.jsx(Text.Text,{appearance:"body",sizes:sizes.SIZES_CONTENT,...A})})]}):React.isValidElement(T)?T:typeof T=='function'?T({titleProps:C,contentProps:q}):g||z?jsxRuntime.jsxs("div",{children:[React.isValidElement(g)?g:typeof g=='function'?g(C):typeof g=='string'||typeof g=='number'?jsxRuntime.jsx(Text.Text,{...C,children:g}):null,React.isValidElement(z)?z:typeof z=='function'?z(q):typeof z=='string'||typeof z=='number'?jsxRuntime.jsx(Text.Text,{...q,children:z}):null]}):null]}),B&&jsxRuntime.jsx(style.Footer,{children:b?jsxRuntime.jsx(Skeleton.Skeleton,{width:"100%",children:jsxRuntime.jsx(Button.Button,{preset:"brand",...A})}):React.isValidElement(B)?B:null})]}),f&&jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(f)?f:typeof f=='function'?f(_):null})]})})})),{displayName:'PopoverComponent',sizes:sizes.SIZES});exports.PopoverComponent=PopoverComponent;
 //# sourceMappingURL=PopoverComponent.js.map

package/components/PopoverComponent/PopoverComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverComponent.js","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n PopoverComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\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 badge,\n caption,\n header,\n title,\n content,\n body,\n closeButton,\n media,\n footer,\n imgSrcVertical,\n imgSrcHorizontal,\n loading,\n palette,\n closeFn,\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 badgeBaseProps: BadgeProps = {\n borderRadius: 8,\n marginRight: 12,\n resetDefaultMargin: true,\n sizes: SIZES_HEADER_BADGE,\n }\n\n const captionBaseProps: TextProps = {\n as: 'span',\n appearance: 'caption',\n color: 'content-onmain-tertiary',\n weight: 700,\n wordBreak: 'break-word',\n sizes: SIZES_CAPTION,\n }\n\n const titleBaseProps: TextProps = {\n as: 'h2',\n appearance: 'subheading',\n color: 'inherit',\n marginBottom: content ? '0.4em' : undefined,\n wordBreak: 'break-word',\n sizes: SIZES_TITLE,\n }\n\n const contentBaseProps: TextProps = {\n as: 'p',\n appearance: 'body',\n color: 'inherit',\n wordBreak: 'break-word',\n sizes: SIZES_CONTENT,\n }\n\n const closeButtonBaseProps: IconButtonProps = {\n icon: 'close',\n square: true,\n marginTop: 10,\n marginRight: 10,\n sizes: SIZES_CLOSE_BUTTON,\n onClick: () => {\n if (typeof closeFn === 'function') closeFn()\n },\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n badgeProps: badgeBaseProps,\n captionProps: captionBaseProps,\n titleProps: titleBaseProps,\n contentProps: contentBaseProps,\n closeButtonProps: closeButtonBaseProps,\n })\n ) : (\n <>\n {(loading \|\| media \|\| imgSrcHorizontal) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='1:1' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='1:1' width='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n <Styled.Container>\n <Styled.Content>\n {loading ? (\n <Styled.Header>\n <Skeleton width='20%'>\n <Badge {...sizeProps} {...badgeBaseProps} />\n </Skeleton>\n </Styled.Header>\n ) : isValidElement(header) ? (\n header\n ) : badge \|\| caption ? (\n <Styled.Header>\n {isValidElement(badge) ? (\n badge\n ) : typeof badge === 'function' ? (\n badge({\n ...sizeProps,\n ...badgeBaseProps,\n })\n ) : typeof badge === 'string' \|\| typeof badge === 'number' ? (\n <Badge {...sizeProps} {...badgeBaseProps}>\n {badge}\n </Badge>\n ) : null}\n {isValidElement(caption) ? (\n caption\n ) : typeof caption === 'function' ? (\n caption({\n ...sizeProps,\n ...captionBaseProps,\n })\n ) : typeof caption === 'string' \|\| typeof caption === 'number' ? (\n <Text {...sizeProps} {...captionBaseProps}>\n {caption}\n </Text>\n ) : null}\n </Styled.Header>\n ) : null}\n {(loading \|\| media \|\| imgSrcVertical) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='16:9' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='16:9' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n {loading ? (\n <div>\n <Skeleton borderRadius={4}>\n <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='70%'>\n <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='50%'>\n <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n </div>\n ) : isValidElement(body) ? (\n body\n ) : title \|\| content ? (\n <div>\n {isValidElement(title) ? (\n title\n ) : typeof title === 'function' ? (\n title({\n ...sizeProps,\n ...titleBaseProps,\n })\n ) : typeof title === 'string' \|\| typeof title === 'number' ? (\n <Text {...sizeProps} {...titleBaseProps}>\n {title}\n </Text>\n ) : null}\n {isValidElement(content) ? (\n content\n ) : typeof content === 'function' ? (\n content({\n ...sizeProps,\n ...contentBaseProps,\n })\n ) : typeof content === 'string' \|\| typeof content === 'number' ? (\n <Text {...sizeProps} {...contentBaseProps}>\n {content}\n </Text>\n ) : null}\n </div>\n ) : null}\n </Styled.Content>\n {footer && (\n <Styled.Footer>\n {loading ? (\n <Skeleton width='100%'>\n <Button preset='brand' {...sizeProps} />\n </Skeleton>\n ) : isValidElement(footer) ? (\n footer\n ) : null}\n </Styled.Footer>\n )}\n </Styled.Container>\n {closeButton && (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton({\n ...sizeProps,\n ...closeButtonBaseProps,\n })\n : null}\n </Styled.ButtonPosition>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeBaseProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionBaseProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleBaseProps","marginBottom","undefined","SIZES_TITLE","contentBaseProps","SIZES_CONTENT","closeButtonBaseProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","badgeProps","captionProps","titleProps","contentProps","closeButtonProps","_jsxs","jsxs","_Fragment","jsx","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}
1	+ {"version":3,"file":"PopoverComponent.js","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n PopoverComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\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 badge,\n caption,\n header,\n title,\n content,\n body,\n closeButton,\n media,\n footer,\n imgSrcVertical,\n imgSrcHorizontal,\n loading,\n palette,\n closeFn,\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 badgeProps: BadgeProps = {\n ...sizeProps,\n borderRadius: 8,\n marginRight: 12,\n resetDefaultMargin: true,\n sizes: SIZES_HEADER_BADGE,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n as: 'span',\n appearance: 'caption',\n color: 'content-onmain-tertiary',\n weight: 700,\n wordBreak: 'break-word',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'subheading',\n color: 'inherit',\n marginBottom: content ? '0.4em' : undefined,\n wordBreak: 'break-word',\n sizes: SIZES_TITLE,\n }\n\n const contentProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'inherit',\n wordBreak: 'break-word',\n sizes: SIZES_CONTENT,\n }\n\n const closeButtonProps: IconButtonProps = {\n ...sizeProps,\n icon: 'close',\n square: true,\n marginTop: 10,\n marginRight: 10,\n sizes: SIZES_CLOSE_BUTTON,\n onClick: () => {\n if (typeof closeFn === 'function') closeFn()\n },\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n badgeProps,\n captionProps,\n titleProps,\n contentProps,\n closeButtonProps,\n })\n ) : (\n <>\n {(loading \|\| media \|\| imgSrcHorizontal) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='1:1' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='1:1' width='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n <Styled.Container>\n <Styled.Content>\n {loading ? (\n <Styled.Header>\n <Skeleton width='20%'>\n <Badge {...badgeProps} />\n </Skeleton>\n </Styled.Header>\n ) : isValidElement(header) ? (\n header\n ) : typeof header === 'function' ? (\n header({\n badgeProps,\n captionProps,\n })\n ) : badge \|\| caption ? (\n <Styled.Header>\n {isValidElement(badge) ? (\n badge\n ) : typeof badge === 'function' ? (\n badge(badgeProps)\n ) : typeof badge === 'string' \|\| typeof badge === 'number' ? (\n <Badge {...badgeProps}>{badge}</Badge>\n ) : null}\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 </Styled.Header>\n ) : null}\n {(loading \|\| media \|\| imgSrcVertical) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='16:9' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='16:9' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n {loading ? (\n <div>\n <Skeleton borderRadius={4}>\n <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='70%'>\n <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='50%'>\n <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n </div>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n titleProps,\n contentProps,\n })\n ) : title \|\| content ? (\n <div>\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(content) ? (\n content\n ) : typeof content === 'function' ? (\n content(contentProps)\n ) : typeof content === 'string' \|\| typeof content === 'number' ? (\n <Text {...contentProps}>{content}</Text>\n ) : null}\n </div>\n ) : null}\n </Styled.Content>\n {footer && (\n <Styled.Footer>\n {loading ? (\n <Skeleton width='100%'>\n <Button preset='brand' {...sizeProps} />\n </Skeleton>\n ) : isValidElement(footer) ? (\n footer\n ) : null}\n </Styled.Footer>\n )}\n </Styled.Container>\n {closeButton && (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","jsxs","_Fragment","jsx","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"mdAiBMA,MAAAA,iBAA2EC,gBAAAA,gBAI/EC,MAAAA,YAAW,CAACC,EAAOC,KACjB,MAAMC,KACJA,EAAO,IAAGC,OACVA,EAAS,WAAUC,QACnBA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,KACRA,EAAIC,MACJA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,YACJA,EAAWC,MACXA,EAAKC,OACLA,EAAMC,eACNA,EAAcC,iBACdA,EAAgBC,QAChBA,EAAOC,QACPA,EAAOC,QACPA,KACGC,GACD/B,EAEJ,MAAMgC,EAAY,CAChB9B,OACAE,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMwB,EAAc,CAClB9B,SACAO,YACAC,WACAC,UACAC,UACAC,UACAC,YAGF,MAAMmB,EAAyB,IAC1BF,EACHG,aAAc,EACdC,YAAa,GACbC,oBAAoB,EACpBC,MAAOC,MAAAA,oBAGT,MAAMC,EAA0B,IAC3BR,EACHS,GAAI,OACJC,WAAY,UACZC,MAAO,0BACPC,OAAQ,IACRC,UAAW,aACXP,MAAOQ,MAAAA,eAGT,MAAMC,EAAwB,IACzBf,EACHS,GAAI,KACJC,WAAY,aACZC,MAAO,UACPK,aAAc3B,EAAU,aAAU4B,EAClCJ,UAAW,aACXP,MAAOY,MAAAA,aAGT,MAAMC,EAA0B,IAC3BnB,EACHS,GAAI,IACJC,WAAY,OACZC,MAAO,UACPE,UAAW,aACXP,MAAOc,MAAAA,eAGT,MAAMC,EAAoC,IACrCrB,EACHsB,KAAM,QACNC,QAAQ,EACRC,UAAW,GACXpB,YAAa,GACbE,MAAOmB,MAAkBA,mBACzBC,QAASA,YACI5B,GAAY,YAAYA,GAAS,GAIhD,OACE6B,WAAAA,IAACC,MAAAA,KAAW,IAAK7B,KAAeC,KAAeC,EAAa4B,QAASC,QAAQA,QAACjC,QAASA,EAAS5B,IAAKA,EAAI8D,SACtGC,MAAcA,eAAChD,GACdA,SACSA,GAAS,WAClBA,EAAK,CACHkB,aACAM,eACAO,aACAI,eACAE,qBAGFY,WAAAC,KAAAC,oBAAA,CAAAJ,SACG,EAACnC,GAAWJ,GAASG,IACpBgC,WAAAS,IAACR,YAAY,IAAK3B,EAAa4B,QAASQ,QAAsBA,sBAAAN,SAC3DnC,EACC+B,WAAAS,IAACE,wBAAW,CAACC,MAAM,MAAMC,MAAM,OAAMT,SACnCJ,WAAAA,IAACc,SAAQA,SAAE,MAEXT,MAAcA,eAACxC,GACjBA,EAEAmC,WAAAA,IAACW,YAAAA,YAAW,CAACC,MAAM,MAAMC,MAAM,OAAMT,SACnCJ,WAAAS,IAACR,UAAU,CAACc,IAAK/C,QAKzBsC,WAAAC,KAACN,gBAAgB,CAAAG,SACfE,CAAAA,WAAAC,KAACN,cAAc,CAAAG,UACZnC,EACC+B,WAAAS,IAACR,aAAa,CAAAG,SACZJ,WAAAS,IAACK,kBAAQ,CAACD,MAAM,MAAKT,SACnBJ,WAAAS,IAACO,YAAK,IAAKzC,QAGb8B,MAAcA,eAAC7C,GACjBA,SACSA,GAAW,WACpBA,EAAO,CACLe,aACAM,iBAEAvB,GAASC,EACX+C,WAAAA,KAACL,MAAAA,OAAa,CAAAG,SACX,CAAAC,MAAAA,eAAe/C,GACdA,SACSA,GAAU,WACnBA,EAAMiB,UACGjB,GAAU,iBAAmBA,GAAU,SAChD0C,WAAAS,IAACO,YAAK,IAAKzC,EAAU6B,SAAG9C,IACtB,KACH+C,qBAAe9C,GACdA,SACSA,GAAY,WACrBA,EAAQsB,UACCtB,GAAY,iBAAmBA,GAAY,SACpDyC,WAAAS,IAACQ,UAAI,IAAKpC,EAAYuB,SAAG7C,IACvB,QAEJ,MACFU,GAAWJ,GAASE,IACpBiC,WAAAS,IAACR,YAAY,IAAK3B,EAAa4B,QAASgB,QAAoBA,oBAAAd,SACzDnC,EACC+B,WAAAS,IAACE,wBAAW,CAACC,MAAM,OAAOC,MAAM,OAAMT,SACpCJ,WAAAA,IAACc,SAAQA,SAAE,MAEXT,MAAcA,eAACxC,GACjBA,EAEAmC,WAAAA,IAACW,YAAAA,YAAW,CAACC,MAAM,OAAOC,MAAM,OAAMT,SACpCJ,WAAAS,IAACR,UAAU,CAACc,IAAKhD,QAKxBE,EACCqC,WAAAC,KAAA,MAAA,CAAAH,SAAA,CACEJ,WAAAS,IAACK,kBAAQ,CAACtC,aAAc,EAAE4B,SACxBJ,WAAAS,IAACQ,UAAI,CAAClC,WAAW,aAAaM,aAAa,QAAQV,MAAOY,MAAYA,eAAKlB,MAE7E2B,WAAAS,IAACK,kBAAQ,CAACtC,aAAc,EAAGqC,MAAM,MAAKT,SACpCJ,WAAAS,IAACQ,UAAI,CAAClC,WAAW,OAAOM,aAAa,QAAQV,MAAOc,MAAcA,iBAAKpB,MAEzE2B,WAAAS,IAACK,kBAAQ,CAACtC,aAAc,EAAGqC,MAAM,MAAKT,SACpCJ,WAAAS,IAACQ,UAAI,CAAClC,WAAW,OAAOJ,MAAOc,MAAcA,iBAAKpB,SAGpDgC,MAAcA,eAAC1C,GACjBA,SACSA,GAAS,WAClBA,EAAK,CACHyB,aACAI,iBAEA/B,GAASC,EACX4C,WAAAA,KAAA,MAAA,CAAAF,SACG,CAAAC,MAAAA,eAAe5C,GACdA,SACSA,GAAU,WACnBA,EAAM2B,UACG3B,GAAU,iBAAmBA,GAAU,SAChDuC,WAAAS,IAACQ,UAAI,IAAK7B,EAAUgB,SAAG3C,IACrB,KACH4C,qBAAe3C,GACdA,SACSA,GAAY,WACrBA,EAAQ8B,UACC9B,GAAY,iBAAmBA,GAAY,SACpDsC,WAAAS,IAACQ,UAAI,IAAKzB,EAAYY,SAAG1C,IACvB,QAEJ,QAELI,GACCkC,WAAAS,IAACR,aAAa,CAAAG,SACXnC,EACC+B,WAAAS,IAACK,kBAAQ,CAACD,MAAM,OAAMT,SACpBJ,WAAAS,IAACU,cAAM,CAACC,OAAO,WAAY/C,MAE3BgC,MAAcA,eAACvC,GACjBA,EACE,UAITF,GACCoC,WAAAS,IAACR,qBAAqB,CAAAG,SACnBC,MAAAA,eAAezC,GACZA,SACOA,GAAgB,WACvBA,EAAY8B,GACZ,WAKA,IAGlB,CACE2B,YA3PmB,mBA4PnB1C,MAAO2C,MAAAA"}

package/components/PopoverComponent/PopoverComponent.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TITLE,SIZES_CONTENT,SIZES_HEADER_BADGE,SIZES_CAPTION,SIZES_CLOSE_BUTTON}from'./sizes.mjs';import{LAYOUTS,VISIBILITY_HORIZONTAL,VISIBILITY_VERTICAL}from'./layouts.mjs';import{Root,Media,Img,Container,Content,Header,Footer,ButtonPosition}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Badge}from'../Badge/Badge.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const PopoverComponent=withMergedProps(forwardRef(((e,t)=>{const{size:o="s",layout:i="vertical",sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d,layoutXXS:c,layoutXS:m,layoutS:p,layoutM:S,layoutL:u,layoutXL:x,root:h,badge:j,caption:E,header:I,title:f,content:y,body:T,closeButton:g,media:B,footer:z,imgSrcVertical:L,imgSrcHorizontal:R,loading:_,palette:b,closeFn:w,...A}=e;const V={size:o,sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d};const C={layout:i,layoutXXS:c,layoutXS:m,layoutS:p,layoutM:S,layoutL:u,layoutXL:x};const k={borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:SIZES_HEADER_BADGE};const Z={as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:SIZES_CAPTION};const O={as:'h2',appearance:'subheading',color:'inherit',marginBottom:y?'0.4em':void 0,wordBreak:'break-word',sizes:SIZES_TITLE};const X={as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:SIZES_CONTENT};const N={icon:'close',square:!0,marginTop:10,marginRight:10,sizes:SIZES_CLOSE_BUTTON,onClick:()=>{typeof w=='function'&&w()}};return jsx(Root,{...A,...V,...C,layouts:LAYOUTS,palette:b,ref:t,children:isValidElement(h)?h:typeof h=='function'?h({badgeProps:k,captionProps:Z,titleProps:O,contentProps:X,closeButtonProps:N}):jsxs(Fragment,{children:[(_||B||R)&&jsx(Media,{...C,layouts:VISIBILITY_HORIZONTAL,children:_?jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Img,{src:R})})}),jsxs(Container,{children:[jsxs(Content,{children:[_?jsx(Header,{children:jsx(Skeleton,{width:"20%",children:jsx(Badge,{...V,...k})})}):isValidElement(I)?I:j||E?jsxs(Header,{children:[isValidElement(j)?j:typeof j=='function'?j({...V,...k}):typeof j=='string'||typeof j=='number'?jsx(Badge,{...V,...k,children:j}):null,isValidElement(E)?E:typeof E=='function'?E({...V,...Z}):typeof E=='string'||typeof E=='number'?jsx(Text,{...V,...Z,children:E}):null]}):null,(_||B||L)&&jsx(Media,{...C,layouts:VISIBILITY_VERTICAL,children:_?jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Img,{src:L})})}),_?jsxs("div",{children:[jsx(Skeleton,{borderRadius:4,children:jsx(Text,{appearance:"subheading",marginBottom:"0.4em",sizes:SIZES_TITLE,...V})}),jsx(Skeleton,{borderRadius:4,width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_CONTENT,...V})}),jsx(Skeleton,{borderRadius:4,width:"50%",children:jsx(Text,{appearance:"body",sizes:SIZES_CONTENT,...V})})]}):isValidElement(T)?T:f||y?jsxs("div",{children:[isValidElement(f)?f:typeof f=='function'?f({...V,...O}):typeof f=='string'||typeof f=='number'?jsx(Text,{...V,...O,children:f}):null,isValidElement(y)?y:typeof y=='function'?y({...V,...X}):typeof y=='string'||typeof y=='number'?jsx(Text,{...V,...X,children:y}):null]}):null]}),z&&jsx(Footer,{children:_?jsx(Skeleton,{width:"100%",children:jsx(Button,{preset:"brand",...V})}):isValidElement(z)?z:null})]}),g&&jsx(ButtonPosition,{children:isValidElement(g)?g:typeof g=='function'?g({...V,...N}):null})]})})})),{displayName:'PopoverComponent',sizes:SIZES});export{PopoverComponent};
+import{forwardRef,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES,SIZES_TITLE,SIZES_CONTENT,SIZES_HEADER_BADGE,SIZES_CAPTION,SIZES_CLOSE_BUTTON}from'./sizes.mjs';import{LAYOUTS,VISIBILITY_HORIZONTAL,VISIBILITY_VERTICAL}from'./layouts.mjs';import{Root,Media,Img,Container,Content,Header,Footer,ButtonPosition}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Badge}from'../Badge/Badge.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const PopoverComponent=withMergedProps(forwardRef(((e,t)=>{const{size:o="s",layout:i="vertical",sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x,root:h,badge:j,caption:f,header:E,title:I,content:y,body:T,closeButton:g,media:B,footer:z,imgSrcVertical:L,imgSrcHorizontal:R,loading:b,palette:_,closeFn:w,...A}=e;const P={size:o,sizeXXS:s,sizeXS:n,sizeS:r,sizeM:a,sizeL:l,sizeXL:d};const V={layout:i,layoutXXS:c,layoutXS:p,layoutS:m,layoutM:S,layoutL:u,layoutXL:x};const C={...P,borderRadius:8,marginRight:12,resetDefaultMargin:!0,sizes:SIZES_HEADER_BADGE};const k={...P,as:'span',appearance:'caption',color:'content-onmain-tertiary',weight:700,wordBreak:'break-word',sizes:SIZES_CAPTION};const Z={...P,as:'h2',appearance:'subheading',color:'inherit',marginBottom:y?'0.4em':void 0,wordBreak:'break-word',sizes:SIZES_TITLE};const O={...P,as:'p',appearance:'body',color:'inherit',wordBreak:'break-word',sizes:SIZES_CONTENT};const X={...P,icon:'close',square:!0,marginTop:10,marginRight:10,sizes:SIZES_CLOSE_BUTTON,onClick:()=>{typeof w=='function'&&w()}};return jsx(Root,{...A,...P,...V,layouts:LAYOUTS,palette:_,ref:t,children:isValidElement(h)?h:typeof h=='function'?h({badgeProps:C,captionProps:k,titleProps:Z,contentProps:O,closeButtonProps:X}):jsxs(Fragment,{children:[(b||B||R)&&jsx(Media,{...V,layouts:VISIBILITY_HORIZONTAL,children:b?jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"1:1",width:"100%",children:jsx(Img,{src:R})})}),jsxs(Container,{children:[jsxs(Content,{children:[b?jsx(Header,{children:jsx(Skeleton,{width:"20%",children:jsx(Badge,{...C})})}):isValidElement(E)?E:typeof E=='function'?E({badgeProps:C,captionProps:k}):j||f?jsxs(Header,{children:[isValidElement(j)?j:typeof j=='function'?j(C):typeof j=='string'||typeof j=='number'?jsx(Badge,{...C,children:j}):null,isValidElement(f)?f:typeof f=='function'?f(k):typeof f=='string'||typeof f=='number'?jsx(Text,{...k,children:f}):null]}):null,(b||B||L)&&jsx(Media,{...V,layouts:VISIBILITY_VERTICAL,children:b?jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Skeleton,{})}):isValidElement(B)?B:jsx(AspectRatio,{ratio:"16:9",width:"100%",children:jsx(Img,{src:L})})}),b?jsxs("div",{children:[jsx(Skeleton,{borderRadius:4,children:jsx(Text,{appearance:"subheading",marginBottom:"0.4em",sizes:SIZES_TITLE,...P})}),jsx(Skeleton,{borderRadius:4,width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_CONTENT,...P})}),jsx(Skeleton,{borderRadius:4,width:"50%",children:jsx(Text,{appearance:"body",sizes:SIZES_CONTENT,...P})})]}):isValidElement(T)?T:typeof T=='function'?T({titleProps:Z,contentProps:O}):I||y?jsxs("div",{children:[isValidElement(I)?I:typeof I=='function'?I(Z):typeof I=='string'||typeof I=='number'?jsx(Text,{...Z,children:I}):null,isValidElement(y)?y:typeof y=='function'?y(O):typeof y=='string'||typeof y=='number'?jsx(Text,{...O,children:y}):null]}):null]}),z&&jsx(Footer,{children:b?jsx(Skeleton,{width:"100%",children:jsx(Button,{preset:"brand",...P})}):isValidElement(z)?z:null})]}),g&&jsx(ButtonPosition,{children:isValidElement(g)?g:typeof g=='function'?g(X):null})]})})})),{displayName:'PopoverComponent',sizes:SIZES});export{PopoverComponent};
 //# sourceMappingURL=PopoverComponent.mjs.map

package/components/PopoverComponent/PopoverComponent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverComponent.mjs","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n PopoverComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\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 badge,\n caption,\n header,\n title,\n content,\n body,\n closeButton,\n media,\n footer,\n imgSrcVertical,\n imgSrcHorizontal,\n loading,\n palette,\n closeFn,\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 badgeBaseProps: BadgeProps = {\n borderRadius: 8,\n marginRight: 12,\n resetDefaultMargin: true,\n sizes: SIZES_HEADER_BADGE,\n }\n\n const captionBaseProps: TextProps = {\n as: 'span',\n appearance: 'caption',\n color: 'content-onmain-tertiary',\n weight: 700,\n wordBreak: 'break-word',\n sizes: SIZES_CAPTION,\n }\n\n const titleBaseProps: TextProps = {\n as: 'h2',\n appearance: 'subheading',\n color: 'inherit',\n marginBottom: content ? '0.4em' : undefined,\n wordBreak: 'break-word',\n sizes: SIZES_TITLE,\n }\n\n const contentBaseProps: TextProps = {\n as: 'p',\n appearance: 'body',\n color: 'inherit',\n wordBreak: 'break-word',\n sizes: SIZES_CONTENT,\n }\n\n const closeButtonBaseProps: IconButtonProps = {\n icon: 'close',\n square: true,\n marginTop: 10,\n marginRight: 10,\n sizes: SIZES_CLOSE_BUTTON,\n onClick: () => {\n if (typeof closeFn === 'function') closeFn()\n },\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n badgeProps: badgeBaseProps,\n captionProps: captionBaseProps,\n titleProps: titleBaseProps,\n contentProps: contentBaseProps,\n closeButtonProps: closeButtonBaseProps,\n })\n ) : (\n <>\n {(loading \|\| media \|\| imgSrcHorizontal) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='1:1' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='1:1' width='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n <Styled.Container>\n <Styled.Content>\n {loading ? (\n <Styled.Header>\n <Skeleton width='20%'>\n <Badge {...sizeProps} {...badgeBaseProps} />\n </Skeleton>\n </Styled.Header>\n ) : isValidElement(header) ? (\n header\n ) : badge \|\| caption ? (\n <Styled.Header>\n {isValidElement(badge) ? (\n badge\n ) : typeof badge === 'function' ? (\n badge({\n ...sizeProps,\n ...badgeBaseProps,\n })\n ) : typeof badge === 'string' \|\| typeof badge === 'number' ? (\n <Badge {...sizeProps} {...badgeBaseProps}>\n {badge}\n </Badge>\n ) : null}\n {isValidElement(caption) ? (\n caption\n ) : typeof caption === 'function' ? (\n caption({\n ...sizeProps,\n ...captionBaseProps,\n })\n ) : typeof caption === 'string' \|\| typeof caption === 'number' ? (\n <Text {...sizeProps} {...captionBaseProps}>\n {caption}\n </Text>\n ) : null}\n </Styled.Header>\n ) : null}\n {(loading \|\| media \|\| imgSrcVertical) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='16:9' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='16:9' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n {loading ? (\n <div>\n <Skeleton borderRadius={4}>\n <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='70%'>\n <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='50%'>\n <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n </div>\n ) : isValidElement(body) ? (\n body\n ) : title \|\| content ? (\n <div>\n {isValidElement(title) ? (\n title\n ) : typeof title === 'function' ? (\n title({\n ...sizeProps,\n ...titleBaseProps,\n })\n ) : typeof title === 'string' \|\| typeof title === 'number' ? (\n <Text {...sizeProps} {...titleBaseProps}>\n {title}\n </Text>\n ) : null}\n {isValidElement(content) ? (\n content\n ) : typeof content === 'function' ? (\n content({\n ...sizeProps,\n ...contentBaseProps,\n })\n ) : typeof content === 'string' \|\| typeof content === 'number' ? (\n <Text {...sizeProps} {...contentBaseProps}>\n {content}\n </Text>\n ) : null}\n </div>\n ) : null}\n </Styled.Content>\n {footer && (\n <Styled.Footer>\n {loading ? (\n <Skeleton width='100%'>\n <Button preset='brand' {...sizeProps} />\n </Skeleton>\n ) : isValidElement(footer) ? (\n footer\n ) : null}\n </Styled.Footer>\n )}\n </Styled.Container>\n {closeButton && (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton({\n ...sizeProps,\n ...closeButtonBaseProps,\n })\n : null}\n </Styled.ButtonPosition>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeBaseProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionBaseProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleBaseProps","marginBottom","undefined","SIZES_TITLE","contentBaseProps","SIZES_CONTENT","closeButtonBaseProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","badgeProps","captionProps","titleProps","contentProps","closeButtonProps","_jsxs","_Fragment","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}
1	+ {"version":3,"file":"PopoverComponent.mjs","sources":["../../../../src/components/PopoverComponent/PopoverComponent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Badge } from 'components/Badge'\nimport { Text } from 'components/Text'\nimport { Button } from 'components/Button'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { BadgeProps } from 'components/Badge'\nimport type { TextProps } from 'components/Text'\nimport { SIZES, SIZES_CLOSE_BUTTON, SIZES_HEADER_BADGE, SIZES_CAPTION, SIZES_TITLE, SIZES_CONTENT } from './sizes'\nimport { LAYOUTS, VISIBILITY_HORIZONTAL, VISIBILITY_VERTICAL } from './layouts'\nimport * as Styled from './style'\nimport type { PopoverComponentProps } from './types'\n\nconst COMPONENT_NAME = 'PopoverComponent'\n\nconst PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps> = withMergedProps<\n PopoverComponentProps,\n HTMLDivElement\n>(\n forwardRef((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\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 badge,\n caption,\n header,\n title,\n content,\n body,\n closeButton,\n media,\n footer,\n imgSrcVertical,\n imgSrcHorizontal,\n loading,\n palette,\n closeFn,\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 badgeProps: BadgeProps = {\n ...sizeProps,\n borderRadius: 8,\n marginRight: 12,\n resetDefaultMargin: true,\n sizes: SIZES_HEADER_BADGE,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n as: 'span',\n appearance: 'caption',\n color: 'content-onmain-tertiary',\n weight: 700,\n wordBreak: 'break-word',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'subheading',\n color: 'inherit',\n marginBottom: content ? '0.4em' : undefined,\n wordBreak: 'break-word',\n sizes: SIZES_TITLE,\n }\n\n const contentProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'inherit',\n wordBreak: 'break-word',\n sizes: SIZES_CONTENT,\n }\n\n const closeButtonProps: IconButtonProps = {\n ...sizeProps,\n icon: 'close',\n square: true,\n marginTop: 10,\n marginRight: 10,\n sizes: SIZES_CLOSE_BUTTON,\n onClick: () => {\n if (typeof closeFn === 'function') closeFn()\n },\n }\n\n return (\n <Styled.Root {...restProps} {...sizeProps} {...layoutProps} layouts={LAYOUTS} palette={palette} ref={ref}>\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n badgeProps,\n captionProps,\n titleProps,\n contentProps,\n closeButtonProps,\n })\n ) : (\n <>\n {(loading \|\| media \|\| imgSrcHorizontal) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='1:1' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='1:1' width='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n <Styled.Container>\n <Styled.Content>\n {loading ? (\n <Styled.Header>\n <Skeleton width='20%'>\n <Badge {...badgeProps} />\n </Skeleton>\n </Styled.Header>\n ) : isValidElement(header) ? (\n header\n ) : typeof header === 'function' ? (\n header({\n badgeProps,\n captionProps,\n })\n ) : badge \|\| caption ? (\n <Styled.Header>\n {isValidElement(badge) ? (\n badge\n ) : typeof badge === 'function' ? (\n badge(badgeProps)\n ) : typeof badge === 'string' \|\| typeof badge === 'number' ? (\n <Badge {...badgeProps}>{badge}</Badge>\n ) : null}\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 </Styled.Header>\n ) : null}\n {(loading \|\| media \|\| imgSrcVertical) && (\n <Styled.Media {...layoutProps} layouts={VISIBILITY_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='16:9' width='100%'>\n <Skeleton />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='16:9' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n )}\n {loading ? (\n <div>\n <Skeleton borderRadius={4}>\n <Text appearance='subheading' marginBottom='0.4em' sizes={SIZES_TITLE} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='70%'>\n <Text appearance='body' marginBottom='0.4em' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n <Skeleton borderRadius={4} width='50%'>\n <Text appearance='body' sizes={SIZES_CONTENT} {...sizeProps} />\n </Skeleton>\n </div>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n titleProps,\n contentProps,\n })\n ) : title \|\| content ? (\n <div>\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(content) ? (\n content\n ) : typeof content === 'function' ? (\n content(contentProps)\n ) : typeof content === 'string' \|\| typeof content === 'number' ? (\n <Text {...contentProps}>{content}</Text>\n ) : null}\n </div>\n ) : null}\n </Styled.Content>\n {footer && (\n <Styled.Footer>\n {loading ? (\n <Skeleton width='100%'>\n <Button preset='brand' {...sizeProps} />\n </Skeleton>\n ) : isValidElement(footer) ? (\n footer\n ) : null}\n </Styled.Footer>\n )}\n </Styled.Container>\n {closeButton && (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n )}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { PopoverComponent }\n"],"names":["PopoverComponent","withMergedProps","forwardRef","props","ref","size","layout","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","badge","caption","header","title","content","body","closeButton","media","footer","imgSrcVertical","imgSrcHorizontal","loading","palette","closeFn","restProps","sizeProps","layoutProps","badgeProps","borderRadius","marginRight","resetDefaultMargin","sizes","SIZES_HEADER_BADGE","captionProps","as","appearance","color","weight","wordBreak","SIZES_CAPTION","titleProps","marginBottom","undefined","SIZES_TITLE","contentProps","SIZES_CONTENT","closeButtonProps","icon","square","marginTop","SIZES_CLOSE_BUTTON","onClick","_jsx","Styled","layouts","LAYOUTS","children","isValidElement","_jsxs","_Fragment","VISIBILITY_HORIZONTAL","AspectRatio","ratio","width","Skeleton","src","Badge","Text","VISIBILITY_VERTICAL","Button","preset","displayName","SIZES"],"mappings":"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"}