@foxford/ui 2.126.0 → 2.128.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.
- package/components/Dialog/Dialog.js +1 -1
- package/components/Dialog/Dialog.js.map +1 -1
- package/components/Dialog/Dialog.mjs +1 -1
- package/components/Dialog/Dialog.mjs.map +1 -1
- package/components/Dialog/style.js +1 -1
- package/components/Dialog/style.js.map +1 -1
- package/components/Dialog/style.mjs +1 -1
- package/components/Dialog/style.mjs.map +1 -1
- package/components/DialogComponent/Body.js +2 -0
- package/components/DialogComponent/Body.js.map +1 -0
- package/components/DialogComponent/Body.mjs +2 -0
- package/components/DialogComponent/Body.mjs.map +1 -0
- package/components/DialogComponent/DialogComponent.js +1 -1
- package/components/DialogComponent/DialogComponent.js.map +1 -1
- package/components/DialogComponent/DialogComponent.mjs +1 -1
- package/components/DialogComponent/DialogComponent.mjs.map +1 -1
- package/components/DialogComponent/DraggingHandle.js +2 -0
- package/components/DialogComponent/DraggingHandle.js.map +1 -0
- package/components/DialogComponent/DraggingHandle.mjs +2 -0
- package/components/DialogComponent/DraggingHandle.mjs.map +1 -0
- package/components/DialogComponent/MediaBlock.js +2 -0
- package/components/DialogComponent/MediaBlock.js.map +1 -0
- package/components/DialogComponent/MediaBlock.mjs +2 -0
- package/components/DialogComponent/MediaBlock.mjs.map +1 -0
- package/components/DialogComponent/layouts.js +1 -1
- package/components/DialogComponent/layouts.js.map +1 -1
- package/components/DialogComponent/layouts.mjs +1 -1
- package/components/DialogComponent/layouts.mjs.map +1 -1
- package/components/DialogComponent/sizes.js +1 -1
- package/components/DialogComponent/sizes.js.map +1 -1
- package/components/DialogComponent/sizes.mjs +1 -1
- package/components/DialogComponent/sizes.mjs.map +1 -1
- package/components/DialogComponent/style.js +1 -1
- package/components/DialogComponent/style.js.map +1 -1
- package/components/DialogComponent/style.mjs +1 -1
- package/components/DialogComponent/style.mjs.map +1 -1
- package/components/Switch/Knob.js +1 -1
- package/components/Switch/Knob.js.map +1 -1
- package/components/Switch/Knob.mjs +1 -1
- package/components/Switch/Knob.mjs.map +1 -1
- package/components/Switch/Switch.js +1 -1
- package/components/Switch/Switch.js.map +1 -1
- package/components/Switch/Switch.mjs +1 -1
- package/components/Switch/Switch.mjs.map +1 -1
- package/components/Switch/sizes.js +2 -0
- package/components/Switch/sizes.js.map +1 -0
- package/components/Switch/sizes.mjs +2 -0
- package/components/Switch/sizes.mjs.map +1 -0
- package/components/Switch/style.js +1 -1
- package/components/Switch/style.js.map +1 -1
- package/components/Switch/style.mjs +1 -1
- package/components/Switch/style.mjs.map +1 -1
- package/dts/index.d.ts +72 -38
- package/hooks/useScrollLock.js +1 -1
- package/hooks/useScrollLock.js.map +1 -1
- package/hooks/useScrollLock.mjs +1 -1
- package/hooks/useScrollLock.mjs.map +1 -1
- package/package.json +2 -2
- package/components/Switch/constants.js +0 -2
- package/components/Switch/constants.js.map +0 -1
- package/components/Switch/constants.mjs +0 -2
- package/components/Switch/constants.mjs.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';const LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'},'vertical-reverse':{flexDirection:'column-reverse'},'horizontal-reverse':{flexDirection:'row-reverse'}};const LAYOUTS_FANCY={vertical:{...LAYOUTS.vertical,paddingTop:
|
|
1
|
+
'use strict';const LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'},'vertical-reverse':{flexDirection:'column-reverse'},'horizontal-reverse':{flexDirection:'row-reverse'}};const LAYOUTS_FANCY={vertical:{...LAYOUTS.vertical,paddingTop:'var(--dialog-fancy-padding-top-vertical)'},horizontal:{...LAYOUTS.horizontal,paddingTop:0},'vertical-reverse':{...LAYOUTS['vertical-reverse'],paddingTop:'var(--dialog-fancy-padding-top-vertical-reverse)'},'horizontal-reverse':{...LAYOUTS['horizontal-reverse'],paddingTop:0}};exports.LAYOUTS=LAYOUTS,exports.LAYOUTS_FANCY=LAYOUTS_FANCY,exports.LAYOUTS_FANCY_BACKGROUND={vertical:{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-vertical)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-vertical)'},horizontal:{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-horizontal)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-horizontal)'},'vertical-reverse':{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-vertical)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-vertical)'},'horizontal-reverse':{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-horizontal)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-horizontal)'}},exports.LAYOUTS_FANCY_MEDIA_VERTICAL={vertical:{borderBottomRightRadius:0,borderBottomLeftRadius:0},horizontal:{display:'none'},'vertical-reverse':{borderBottomRightRadius:'inherit',borderBottomLeftRadius:'inherit'},'horizontal-reverse':{display:'none'}},exports.LAYOUTS_FANCY_PROGRESS={vertical:{top:0,right:0,bottom:'auto',left:0},horizontal:{top:'auto',right:0,bottom:0,left:0},'vertical-reverse':{top:0,right:0,bottom:'auto',left:0},'horizontal-reverse':{top:'auto',right:0,bottom:0,left:0}},exports.LAYOUTS_MEDIA_HORIZONTAL={vertical:{display:'none'},horizontal:{height:'100%',borderTopLeftRadius:'inherit',borderBottomLeftRadius:'inherit',borderTopRightRadius:0,borderBottomRightRadius:0},'vertical-reverse':{display:'none'},'horizontal-reverse':{height:'100%',borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:'inherit',borderBottomRightRadius:'inherit'}},exports.LAYOUTS_MEDIA_VERTICAL={vertical:{borderTopRightRadius:'inherit',borderTopLeftRadius:'inherit',borderBottomRightRadius:0,borderBottomLeftRadius:0},horizontal:{display:'none'},'vertical-reverse':{borderTopRightRadius:0,borderTopLeftRadius:0,borderBottomRightRadius:'inherit',borderBottomLeftRadius:'inherit'},'horizontal-reverse':{display:'none'}},exports.LAYOUTS_PROGRESS={vertical:{top:0,right:0,left:0},horizontal:{top:0,right:0,left:0},'vertical-reverse':{top:0,right:0,left:0},'horizontal-reverse':{top:0,right:0,left:0}},exports.LAYOUTS_SPACER={vertical:{},horizontal:{'--dialog-layout-spacer-size':'var(--dialog-layout-spacer-size-horizontal)'},'vertical-reverse':{},'horizontal-reverse':{'--dialog-layout-spacer-size':'var(--dialog-layout-spacer-size-horizontal)'}},exports.VISIBILITY_HORIZONTAL={vertical:{display:'none'},horizontal:{},'vertical-reverse':{display:'none'},'horizontal-reverse':{}},exports.VISIBILITY_VERTICAL={vertical:{},horizontal:{display:'none'},'vertical-reverse':{},'horizontal-reverse':{display:'none'}};
|
|
2
2
|
//# sourceMappingURL=layouts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layouts.js","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:
|
|
1
|
+
{"version":3,"file":"layouts.js","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: 'var(--dialog-fancy-padding-top-vertical)',\n },\n horizontal: {\n ...LAYOUTS.horizontal,\n paddingTop: 0,\n },\n 'vertical-reverse': {\n ...LAYOUTS['vertical-reverse'],\n paddingTop: 'var(--dialog-fancy-padding-top-vertical-reverse)',\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: {\n display: 'none',\n },\n 'vertical-reverse': {},\n 'horizontal-reverse': {\n display: 'none',\n },\n}\n\nexport const VISIBILITY_HORIZONTAL: Record<Layout, CSSProperties> = {\n vertical: {\n display: 'none',\n },\n horizontal: {},\n 'vertical-reverse': {\n display: 'none',\n },\n 'horizontal-reverse': {},\n}\n\nexport const LAYOUTS_FANCY_BACKGROUND: Record<Layout, CSSProperties> = {\n vertical: {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-vertical)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-vertical)',\n },\n horizontal: {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-horizontal)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-horizontal)',\n },\n 'vertical-reverse': {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-vertical)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-vertical)',\n },\n 'horizontal-reverse': {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-horizontal)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-horizontal)',\n },\n}\n\nexport const LAYOUTS_SPACER: Record<Layout, CSSProperties> = {\n vertical: {},\n horizontal: {\n '--dialog-layout-spacer-size': 'var(--dialog-layout-spacer-size-horizontal)',\n },\n 'vertical-reverse': {},\n 'horizontal-reverse': {\n '--dialog-layout-spacer-size': 'var(--dialog-layout-spacer-size-horizontal)',\n },\n}\n"],"names":["LAYOUTS","vertical","flexDirection","horizontal","LAYOUTS_FANCY","paddingTop","borderBottomRightRadius","borderBottomLeftRadius","display","top","right","bottom","left","height","borderTopLeftRadius","borderTopRightRadius"],"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,4CAEdF,WAAY,IACPH,QAAQG,WACXE,WAAY,GAEd,mBAAoB,IACfL,QAAQ,oBACXK,WAAY,oDAEd,qBAAsB,IACjBL,QAAQ,sBACXK,WAAY,iGAqGuD,CACrEJ,SAAU,CACR,+BAAgC,6CAChC,8BAA+B,6CAEjCE,WAAY,CACV,+BAAgC,+CAChC,8BAA+B,+CAEjC,mBAAoB,CAClB,+BAAgC,6CAChC,8BAA+B,6CAEjC,qBAAsB,CACpB,+BAAgC,+CAChC,8BAA+B,qFA3FwC,CACzEF,SAAU,CACRK,wBAAyB,EACzBC,uBAAwB,GAE1BJ,WAAY,CACVK,QAAS,QAEX,mBAAoB,CAClBF,wBAAyB,UACzBC,uBAAwB,WAE1B,qBAAsB,CACpBC,QAAS,wCAkCwD,CACnEP,SAAU,CAAEQ,IAAK,EAAGC,MAAO,EAAGC,OAAQ,OAAQC,KAAM,GACpDT,WAAY,CAAEM,IAAK,OAAQC,MAAO,EAAGC,OAAQ,EAAGC,KAAM,GACtD,mBAAoB,CAAEH,IAAK,EAAGC,MAAO,EAAGC,OAAQ,OAAQC,KAAM,GAC9D,qBAAsB,CAAEH,IAAK,OAAQC,MAAO,EAAGC,OAAQ,EAAGC,KAAM,qCAlCK,CACrEX,SAAU,CACRO,QAAS,QAEXL,WAAY,CACVU,OAAQ,OACRC,oBAAqB,UACrBP,uBAAwB,UACxBQ,qBAAsB,EACtBT,wBAAyB,GAE3B,mBAAoB,CAClBE,QAAS,QAEX,qBAAsB,CACpBK,OAAQ,OACRC,oBAAqB,EACrBP,uBAAwB,EACxBQ,qBAAsB,UACtBT,wBAAyB,2CAzDwC,CACnEL,SAAU,CACRc,qBAAsB,UACtBD,oBAAqB,UACrBR,wBAAyB,EACzBC,uBAAwB,GAE1BJ,WAAY,CACVK,QAAS,QAEX,mBAAoB,CAClBO,qBAAsB,EACtBD,oBAAqB,EACrBR,wBAAyB,UACzBC,uBAAwB,WAE1B,qBAAsB,CACpBC,QAAS,kCA4CkD,CAC7DP,SAAU,CAAEQ,IAAK,EAAGC,MAAO,EAAGE,KAAM,GACpCT,WAAY,CAAEM,IAAK,EAAGC,MAAO,EAAGE,KAAM,GACtC,mBAAoB,CAAEH,IAAK,EAAGC,MAAO,EAAGE,KAAM,GAC9C,qBAAsB,CAAEH,IAAK,EAAGC,MAAO,EAAGE,KAAM,2BAmDW,CAC3DX,SAAU,CAAA,EACVE,WAAY,CACV,8BAA+B,+CAEjC,mBAAoB,CAAA,EACpB,qBAAsB,CACpB,8BAA+B,8EArCiC,CAClEF,SAAU,CACRO,QAAS,QAEXL,WAAY,CAAA,EACZ,mBAAoB,CAClBK,QAAS,QAEX,qBAAsB,CAAA,+BAnB0C,CAChEP,SAAU,CAAA,EACVE,WAAY,CACVK,QAAS,QAEX,mBAAoB,CAAA,EACpB,qBAAsB,CACpBA,QAAS"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'},'vertical-reverse':{flexDirection:'column-reverse'},'horizontal-reverse':{flexDirection:'row-reverse'}};const LAYOUTS_FANCY={vertical:{...LAYOUTS.vertical,paddingTop:
|
|
1
|
+
const LAYOUTS={vertical:{flexDirection:'column'},horizontal:{flexDirection:'row'},'vertical-reverse':{flexDirection:'column-reverse'},'horizontal-reverse':{flexDirection:'row-reverse'}};const LAYOUTS_FANCY={vertical:{...LAYOUTS.vertical,paddingTop:'var(--dialog-fancy-padding-top-vertical)'},horizontal:{...LAYOUTS.horizontal,paddingTop:0},'vertical-reverse':{...LAYOUTS['vertical-reverse'],paddingTop:'var(--dialog-fancy-padding-top-vertical-reverse)'},'horizontal-reverse':{...LAYOUTS['horizontal-reverse'],paddingTop:0}};const LAYOUTS_MEDIA_VERTICAL={vertical:{borderTopRightRadius:'inherit',borderTopLeftRadius:'inherit',borderBottomRightRadius:0,borderBottomLeftRadius:0},horizontal:{display:'none'},'vertical-reverse':{borderTopRightRadius:0,borderTopLeftRadius:0,borderBottomRightRadius:'inherit',borderBottomLeftRadius:'inherit'},'horizontal-reverse':{display:'none'}};const LAYOUTS_FANCY_MEDIA_VERTICAL={vertical:{borderBottomRightRadius:0,borderBottomLeftRadius:0},horizontal:{display:'none'},'vertical-reverse':{borderBottomRightRadius:'inherit',borderBottomLeftRadius:'inherit'},'horizontal-reverse':{display:'none'}};const LAYOUTS_MEDIA_HORIZONTAL={vertical:{display:'none'},horizontal:{height:'100%',borderTopLeftRadius:'inherit',borderBottomLeftRadius:'inherit',borderTopRightRadius:0,borderBottomRightRadius:0},'vertical-reverse':{display:'none'},'horizontal-reverse':{height:'100%',borderTopLeftRadius:0,borderBottomLeftRadius:0,borderTopRightRadius:'inherit',borderBottomRightRadius:'inherit'}};const LAYOUTS_PROGRESS={vertical:{top:0,right:0,left:0},horizontal:{top:0,right:0,left:0},'vertical-reverse':{top:0,right:0,left:0},'horizontal-reverse':{top:0,right:0,left:0}};const LAYOUTS_FANCY_PROGRESS={vertical:{top:0,right:0,bottom:'auto',left:0},horizontal:{top:'auto',right:0,bottom:0,left:0},'vertical-reverse':{top:0,right:0,bottom:'auto',left:0},'horizontal-reverse':{top:'auto',right:0,bottom:0,left:0}};const VISIBILITY_VERTICAL={vertical:{},horizontal:{display:'none'},'vertical-reverse':{},'horizontal-reverse':{display:'none'}};const VISIBILITY_HORIZONTAL={vertical:{display:'none'},horizontal:{},'vertical-reverse':{display:'none'},'horizontal-reverse':{}};const LAYOUTS_FANCY_BACKGROUND={vertical:{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-vertical)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-vertical)'},horizontal:{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-horizontal)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-horizontal)'},'vertical-reverse':{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-vertical)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-vertical)'},'horizontal-reverse':{'--dialog-mask-position-slope':'var(--dialog-mask-position-slope-horizontal)','--dialog-mask-position-rect':'var(--dialog-mask-position-rect-horizontal)'}};const LAYOUTS_SPACER={vertical:{},horizontal:{'--dialog-layout-spacer-size':'var(--dialog-layout-spacer-size-horizontal)'},'vertical-reverse':{},'horizontal-reverse':{'--dialog-layout-spacer-size':'var(--dialog-layout-spacer-size-horizontal)'}};export{LAYOUTS,LAYOUTS_FANCY,LAYOUTS_FANCY_BACKGROUND,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_PROGRESS,LAYOUTS_SPACER,VISIBILITY_HORIZONTAL,VISIBILITY_VERTICAL};
|
|
2
2
|
//# sourceMappingURL=layouts.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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:
|
|
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: 'var(--dialog-fancy-padding-top-vertical)',\n },\n horizontal: {\n ...LAYOUTS.horizontal,\n paddingTop: 0,\n },\n 'vertical-reverse': {\n ...LAYOUTS['vertical-reverse'],\n paddingTop: 'var(--dialog-fancy-padding-top-vertical-reverse)',\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: {\n display: 'none',\n },\n 'vertical-reverse': {},\n 'horizontal-reverse': {\n display: 'none',\n },\n}\n\nexport const VISIBILITY_HORIZONTAL: Record<Layout, CSSProperties> = {\n vertical: {\n display: 'none',\n },\n horizontal: {},\n 'vertical-reverse': {\n display: 'none',\n },\n 'horizontal-reverse': {},\n}\n\nexport const LAYOUTS_FANCY_BACKGROUND: Record<Layout, CSSProperties> = {\n vertical: {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-vertical)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-vertical)',\n },\n horizontal: {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-horizontal)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-horizontal)',\n },\n 'vertical-reverse': {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-vertical)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-vertical)',\n },\n 'horizontal-reverse': {\n '--dialog-mask-position-slope': 'var(--dialog-mask-position-slope-horizontal)',\n '--dialog-mask-position-rect': 'var(--dialog-mask-position-rect-horizontal)',\n },\n}\n\nexport const LAYOUTS_SPACER: Record<Layout, CSSProperties> = {\n vertical: {},\n horizontal: {\n '--dialog-layout-spacer-size': 'var(--dialog-layout-spacer-size-horizontal)',\n },\n 'vertical-reverse': {},\n 'horizontal-reverse': {\n '--dialog-layout-spacer-size': 'var(--dialog-layout-spacer-size-horizontal)',\n },\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","LAYOUTS_FANCY_BACKGROUND","LAYOUTS_SPACER"],"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,4CAEdF,WAAY,IACPH,QAAQG,WACXE,WAAY,GAEd,mBAAoB,IACfL,QAAQ,oBACXK,WAAY,oDAEd,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,CAAA,EACVE,WAAY,CACVQ,QAAS,QAEX,mBAAoB,CAAA,EACpB,qBAAsB,CACpBA,QAAS,SAIN,MAAMW,sBAAuD,CAClErB,SAAU,CACRU,QAAS,QAEXR,WAAY,CAAA,EACZ,mBAAoB,CAClBQ,QAAS,QAEX,qBAAsB,CAAA,GAGjB,MAAMY,yBAA0D,CACrEtB,SAAU,CACR,+BAAgC,6CAChC,8BAA+B,6CAEjCE,WAAY,CACV,+BAAgC,+CAChC,8BAA+B,+CAEjC,mBAAoB,CAClB,+BAAgC,6CAChC,8BAA+B,6CAEjC,qBAAsB,CACpB,+BAAgC,+CAChC,8BAA+B,gDAI5B,MAAMqB,eAAgD,CAC3DvB,SAAU,CAAA,EACVE,WAAY,CACV,8BAA+B,+CAEjC,mBAAoB,CAAA,EACpB,qBAAsB,CACpB,8BAA+B"}
|
|
@@ -1,2 +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
|
|
1
|
+
'use strict';const SIZES={xxl:{width:'100%',minWidth:'min-content',maxWidth:1228,borderRadius:20,'--dialog-padding':'48px','--dialog-header-gap':'16px','--dialog-content-gap':'12px'},xl:{width:'100%',minWidth:'min-content',maxWidth:960,borderRadius:20,'--dialog-padding':'40px','--dialog-header-gap':'12px','--dialog-content-gap':'12px'},l:{width:'100%',minWidth:'min-content',maxWidth:780,borderRadius:20,'--dialog-padding':'36px','--dialog-header-gap':'12px','--dialog-content-gap':'12px'},m:{width:'100%',minWidth:'min-content',maxWidth:560,borderRadius:20,'--dialog-padding':'32px','--dialog-header-gap':'10px','--dialog-content-gap':'12px'},s:{width:'100%',minWidth:'min-content',maxWidth:440,borderRadius:20,'--dialog-padding':'32px','--dialog-header-gap':'8px','--dialog-content-gap':'12px'},xs:{width:'100%',minWidth:'min-content',maxWidth:304,borderRadius:20,'--dialog-padding':'24px','--dialog-header-gap':'6px','--dialog-content-gap':'12px'}};const SIZES_FANCY={xxl:{...SIZES.xxl,borderRadius:0,'--dialog-fancy-padding-top-vertical':'119px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'74px','--dialog-layout-spacer-size-vertical':'76px','--dialog-mask-position-slope-horizontal':'79px','--dialog-mask-position-slope-vertical':'79px','--dialog-mask-position-rect-horizontal':'110px','--dialog-mask-position-rect-vertical':'110px'},xl:{...SIZES.xl,borderRadius:0,'--dialog-fancy-padding-top-vertical':'119px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'84px','--dialog-layout-spacer-size-vertical':'84px','--dialog-mask-position-slope-horizontal':'81px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'112px','--dialog-mask-position-rect-vertical':'71px'},l:{...SIZES.l,borderRadius:0,'--dialog-fancy-padding-top-vertical':'96px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'64px','--dialog-layout-spacer-size-vertical':'64px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},m:{...SIZES.m,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'52px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'47px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},s:{...SIZES.s,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'52px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'76px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},xs:{...SIZES.xs,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'65px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'59px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'}};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_FANCY=SIZES_FANCY,exports.SIZES_SUBTITLE={xxl:{fontSize:24},xl:{fontSize:20},l:{fontSize:20},m:{fontSize:16},s:{fontSize:16,marginBottom:0},xs:{fontSize:14,marginBottom:0}},exports.SIZES_TITLE={xxl:{fontSize:36},xl:{fontSize:32},l:{fontSize:28},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}};
|
|
2
2
|
//# sourceMappingURL=sizes.js.map
|
|
@@ -1 +1 @@
|
|
|
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: {
|
|
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 '--dialog-padding': '48px',\n '--dialog-header-gap': '16px',\n '--dialog-content-gap': '12px',\n },\n xl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 960,\n borderRadius: 20,\n '--dialog-padding': '40px',\n '--dialog-header-gap': '12px',\n '--dialog-content-gap': '12px',\n },\n l: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 780,\n borderRadius: 20,\n '--dialog-padding': '36px',\n '--dialog-header-gap': '12px',\n '--dialog-content-gap': '12px',\n },\n m: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 560,\n borderRadius: 20,\n '--dialog-padding': '32px',\n '--dialog-header-gap': '10px',\n '--dialog-content-gap': '12px',\n },\n s: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 440,\n borderRadius: 20,\n '--dialog-padding': '32px',\n '--dialog-header-gap': '8px',\n '--dialog-content-gap': '12px',\n },\n xs: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 304,\n borderRadius: 20,\n '--dialog-padding': '24px',\n '--dialog-header-gap': '6px',\n '--dialog-content-gap': '12px',\n },\n}\n\nexport const SIZES_FANCY: Record<Size, CSSProperties> = {\n xxl: {\n ...SIZES.xxl,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '119px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '74px',\n '--dialog-layout-spacer-size-vertical': '76px',\n '--dialog-mask-position-slope-horizontal': '79px',\n '--dialog-mask-position-slope-vertical': '79px',\n '--dialog-mask-position-rect-horizontal': '110px',\n '--dialog-mask-position-rect-vertical': '110px',\n },\n xl: {\n ...SIZES.xl,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '119px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '84px',\n '--dialog-layout-spacer-size-vertical': '84px',\n '--dialog-mask-position-slope-horizontal': '81px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '112px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n l: {\n ...SIZES.l,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '96px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '64px',\n '--dialog-layout-spacer-size-vertical': '64px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n m: {\n ...SIZES.m,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '52px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '47px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n s: {\n ...SIZES.s,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '52px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '76px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n xs: {\n ...SIZES.xs,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '65px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '59px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\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: 36 },\n xl: { fontSize: 32 },\n l: { fontSize: 28 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 18 },\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, marginBottom: 0 },\n xs: { fontSize: 14, marginBottom: 0 },\n}\n"],"names":["SIZES","xxl","width","minWidth","maxWidth","borderRadius","xl","l","m","s","xs","SIZES_FANCY","fontSize","marginBottom"],"mappings":"aAGO,MAAMA,MAAqC,CAChDC,IAAK,CACHC,MAAO,OACPC,SAAU,cACVC,SAAU,KACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BC,GAAI,CACFJ,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BE,EAAG,CACDL,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BG,EAAG,CACDN,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BI,EAAG,CACDP,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,MACvB,uBAAwB,QAE1BK,GAAI,CACFR,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,MACvB,uBAAwB,SAIrB,MAAMM,YAA2C,CACtDV,IAAK,IACAD,MAAMC,IACTI,aAAc,EACd,sCAAuC,QACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,QAC1C,uCAAwC,SAE1CC,GAAI,IACCN,MAAMM,GACTD,aAAc,EACd,sCAAuC,QACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,QAC1C,uCAAwC,QAE1CE,EAAG,IACEP,MAAMO,EACTF,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CG,EAAG,IACER,MAAMQ,EACTH,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CI,EAAG,IACET,MAAMS,EACTJ,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CK,GAAI,IACCV,MAAMU,GACTL,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,mDAIc,CACxDJ,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU,4DAYyC,CACzDX,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,GAAIC,aAAc,GACjCH,GAAI,CAAEE,SAAU,GAAIC,aAAc,wBAfoB,CACtDZ,IAAK,CAAEW,SAAU,IACjBN,GAAI,CAAEM,SAAU,IAChBL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,EAAG,CAAEG,SAAU,IACfF,GAAI,CAAEE,SAAU"}
|
|
@@ -1,2 +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
|
|
1
|
+
const SIZES={xxl:{width:'100%',minWidth:'min-content',maxWidth:1228,borderRadius:20,'--dialog-padding':'48px','--dialog-header-gap':'16px','--dialog-content-gap':'12px'},xl:{width:'100%',minWidth:'min-content',maxWidth:960,borderRadius:20,'--dialog-padding':'40px','--dialog-header-gap':'12px','--dialog-content-gap':'12px'},l:{width:'100%',minWidth:'min-content',maxWidth:780,borderRadius:20,'--dialog-padding':'36px','--dialog-header-gap':'12px','--dialog-content-gap':'12px'},m:{width:'100%',minWidth:'min-content',maxWidth:560,borderRadius:20,'--dialog-padding':'32px','--dialog-header-gap':'10px','--dialog-content-gap':'12px'},s:{width:'100%',minWidth:'min-content',maxWidth:440,borderRadius:20,'--dialog-padding':'32px','--dialog-header-gap':'8px','--dialog-content-gap':'12px'},xs:{width:'100%',minWidth:'min-content',maxWidth:304,borderRadius:20,'--dialog-padding':'24px','--dialog-header-gap':'6px','--dialog-content-gap':'12px'}};const SIZES_FANCY={xxl:{...SIZES.xxl,borderRadius:0,'--dialog-fancy-padding-top-vertical':'119px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'74px','--dialog-layout-spacer-size-vertical':'76px','--dialog-mask-position-slope-horizontal':'79px','--dialog-mask-position-slope-vertical':'79px','--dialog-mask-position-rect-horizontal':'110px','--dialog-mask-position-rect-vertical':'110px'},xl:{...SIZES.xl,borderRadius:0,'--dialog-fancy-padding-top-vertical':'119px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'84px','--dialog-layout-spacer-size-vertical':'84px','--dialog-mask-position-slope-horizontal':'81px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'112px','--dialog-mask-position-rect-vertical':'71px'},l:{...SIZES.l,borderRadius:0,'--dialog-fancy-padding-top-vertical':'96px','--dialog-fancy-padding-top-vertical-reverse':'96px','--dialog-layout-spacer-size-horizontal':'64px','--dialog-layout-spacer-size-vertical':'64px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},m:{...SIZES.m,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'52px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'47px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},s:{...SIZES.s,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'52px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'76px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'},xs:{...SIZES.xs,borderRadius:0,'--dialog-fancy-padding-top-vertical':'80px','--dialog-fancy-padding-top-vertical-reverse':'65px','--dialog-layout-spacer-size-horizontal':'76px','--dialog-layout-spacer-size-vertical':'59px','--dialog-mask-position-slope-horizontal':'56px','--dialog-mask-position-slope-vertical':'40px','--dialog-mask-position-rect-horizontal':'87px','--dialog-mask-position-rect-vertical':'71px'}};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:36},xl:{fontSize:32},l:{fontSize:28},m:{fontSize:24},s:{fontSize:20},xs:{fontSize:18}};const SIZES_SUBTITLE={xxl:{fontSize:24},xl:{fontSize:20},l:{fontSize:20},m:{fontSize:16},s:{fontSize:16,marginBottom:0},xs:{fontSize:14,marginBottom:0}};export{SIZES,SIZES_CAPTION,SIZES_FANCY,SIZES_SUBTITLE,SIZES_TITLE};
|
|
2
2
|
//# sourceMappingURL=sizes.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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: {
|
|
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 '--dialog-padding': '48px',\n '--dialog-header-gap': '16px',\n '--dialog-content-gap': '12px',\n },\n xl: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 960,\n borderRadius: 20,\n '--dialog-padding': '40px',\n '--dialog-header-gap': '12px',\n '--dialog-content-gap': '12px',\n },\n l: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 780,\n borderRadius: 20,\n '--dialog-padding': '36px',\n '--dialog-header-gap': '12px',\n '--dialog-content-gap': '12px',\n },\n m: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 560,\n borderRadius: 20,\n '--dialog-padding': '32px',\n '--dialog-header-gap': '10px',\n '--dialog-content-gap': '12px',\n },\n s: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 440,\n borderRadius: 20,\n '--dialog-padding': '32px',\n '--dialog-header-gap': '8px',\n '--dialog-content-gap': '12px',\n },\n xs: {\n width: '100%',\n minWidth: 'min-content',\n maxWidth: 304,\n borderRadius: 20,\n '--dialog-padding': '24px',\n '--dialog-header-gap': '6px',\n '--dialog-content-gap': '12px',\n },\n}\n\nexport const SIZES_FANCY: Record<Size, CSSProperties> = {\n xxl: {\n ...SIZES.xxl,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '119px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '74px',\n '--dialog-layout-spacer-size-vertical': '76px',\n '--dialog-mask-position-slope-horizontal': '79px',\n '--dialog-mask-position-slope-vertical': '79px',\n '--dialog-mask-position-rect-horizontal': '110px',\n '--dialog-mask-position-rect-vertical': '110px',\n },\n xl: {\n ...SIZES.xl,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '119px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '84px',\n '--dialog-layout-spacer-size-vertical': '84px',\n '--dialog-mask-position-slope-horizontal': '81px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '112px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n l: {\n ...SIZES.l,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '96px',\n '--dialog-fancy-padding-top-vertical-reverse': '96px',\n '--dialog-layout-spacer-size-horizontal': '64px',\n '--dialog-layout-spacer-size-vertical': '64px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n m: {\n ...SIZES.m,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '52px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '47px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n s: {\n ...SIZES.s,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '52px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '76px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\n xs: {\n ...SIZES.xs,\n borderRadius: 0,\n '--dialog-fancy-padding-top-vertical': '80px',\n '--dialog-fancy-padding-top-vertical-reverse': '65px',\n '--dialog-layout-spacer-size-horizontal': '76px',\n '--dialog-layout-spacer-size-vertical': '59px',\n '--dialog-mask-position-slope-horizontal': '56px',\n '--dialog-mask-position-slope-vertical': '40px',\n '--dialog-mask-position-rect-horizontal': '87px',\n '--dialog-mask-position-rect-vertical': '71px',\n },\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: 36 },\n xl: { fontSize: 32 },\n l: { fontSize: 28 },\n m: { fontSize: 24 },\n s: { fontSize: 20 },\n xs: { fontSize: 18 },\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, marginBottom: 0 },\n xs: { fontSize: 14, marginBottom: 0 },\n}\n"],"names":["SIZES","xxl","width","minWidth","maxWidth","borderRadius","xl","l","m","s","xs","SIZES_FANCY","SIZES_CAPTION","fontSize","SIZES_TITLE","SIZES_SUBTITLE","marginBottom"],"mappings":"AAGO,MAAMA,MAAqC,CAChDC,IAAK,CACHC,MAAO,OACPC,SAAU,cACVC,SAAU,KACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BC,GAAI,CACFJ,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BE,EAAG,CACDL,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BG,EAAG,CACDN,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,OACvB,uBAAwB,QAE1BI,EAAG,CACDP,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,MACvB,uBAAwB,QAE1BK,GAAI,CACFR,MAAO,OACPC,SAAU,cACVC,SAAU,IACVC,aAAc,GACd,mBAAoB,OACpB,sBAAuB,MACvB,uBAAwB,SAIrB,MAAMM,YAA2C,CACtDV,IAAK,IACAD,MAAMC,IACTI,aAAc,EACd,sCAAuC,QACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,QAC1C,uCAAwC,SAE1CC,GAAI,IACCN,MAAMM,GACTD,aAAc,EACd,sCAAuC,QACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,QAC1C,uCAAwC,QAE1CE,EAAG,IACEP,MAAMO,EACTF,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CG,EAAG,IACER,MAAMQ,EACTH,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CI,EAAG,IACET,MAAMS,EACTJ,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,QAE1CK,GAAI,IACCV,MAAMU,GACTL,aAAc,EACd,sCAAuC,OACvC,8CAA+C,OAC/C,yCAA0C,OAC1C,uCAAwC,OACxC,0CAA2C,OAC3C,wCAAyC,OACzC,yCAA0C,OAC1C,uCAAwC,SAIrC,MAAMO,cAA6C,CACxDX,IAAK,CAAEY,SAAU,IACjBP,GAAI,CAAEO,SAAU,IAChBN,EAAG,CAAEM,SAAU,IACfL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,GAAI,CAAEG,SAAU,KAGX,MAAMC,YAA2C,CACtDb,IAAK,CAAEY,SAAU,IACjBP,GAAI,CAAEO,SAAU,IAChBN,EAAG,CAAEM,SAAU,IACfL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,IACfH,GAAI,CAAEG,SAAU,KAGX,MAAME,eAA8C,CACzDd,IAAK,CAAEY,SAAU,IACjBP,GAAI,CAAEO,SAAU,IAChBN,EAAG,CAAEM,SAAU,IACfL,EAAG,CAAEK,SAAU,IACfJ,EAAG,CAAEI,SAAU,GAAIG,aAAc,GACjCN,GAAI,CAAEG,SAAU,GAAIG,aAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'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
|
|
1
|
+
'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 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:70ms;transition-timing-function:ease-in;pointer-events:none;}",""],o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 48px;\n bottom: 100%;\n right: 0; \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: 48px;\n top: 100%;\n right: 0;\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({shouldForwardProp:filterLayoutProps}).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 var(--dialog-mask-position-slope),0 var(--dialog-mask-position-rect);border-radius:inherit;",""],maskSlope.default,maskRectangle.default,responsiveLayout.responsiveLayout);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 0 20px 0 ${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['effect-shadow-medium'],...o.palette}),o=>o.dragging&&`\n box-shadow: 0 2px 4px 0 ${o.theme.colors['effect-shadow-small']};\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 Header=styled__default.default.div.withConfig({shouldForwardProp:o=>!['stickyHeader'].includes(o)}).withConfig({displayName:"DialogComponent__Header",componentId:"ui__sc-1dlvioj-4"})([""," & > *{margin-bottom:var(--dialog-header-gap);}"],({stickyHeader:o})=>o?`\n padding-top: min(${focus.focus.padding}px, var(--dialog-padding-top, var(--dialog-padding)));\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.focus.padding}px);\n `:`\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2*focus.focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2*focus.focus.padding}px);\n `);const Container=styled__default.default.div.withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;padding-top:calc(var(--dialog-padding-top,var(--dialog-padding)) - ","px);padding-bottom:calc(var(--dialog-padding-bottom,var(--dialog-padding)) - ","px);padding-left:min(","px,var(--dialog-padding-left,var(--dialog-padding)));padding-right:min(","px,var(--dialog-padding-right,var(--dialog-padding)));"],focus.focus.padding,focus.focus.padding,focus.focus.padding,focus.focus.padding);const ScrollArea=styled__default.default.div.withConfig({shouldForwardProp:o=>!['scrollable'].includes(o)}).withConfig({displayName:"DialogComponent__ScrollArea",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-grow:1;padding:min(","px,var(--dialog-padding));"," "," ~ &{padding-top:var(--dialog-content-gap);}",""],focus.focus.padding,o=>`\n overflow: ${o.scrollable?'auto':'hidden'};\n overscroll-behavior: ${o.scrollable?'contain':'auto'};\n `,Header,focus.focus);const Content=styled__default.default.div.withConfig({shouldForwardProp:o=>!['scrollable','loading'].includes(o)}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;padding-right:calc(var(--dialog-padding-right,var(--dialog-padding)) - ","px);padding-left:calc(var(--dialog-padding-left,var(--dialog-padding)) - ","px);"," "," + &{padding-top:var(--dialog-content-gap);}"],2*focus.focus.padding,2*focus.focus.padding,({loading:o})=>o&&'height: 100%;',Header);const Footer=styled__default.default.div.withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-8"})(["box-sizing:border-box;flex-shrink:0;padding-top:var(--dialog-content-gap);padding-right:calc(var(--dialog-padding-right,var(--dialog-padding)) - ","px);padding-bottom:min(","px,var(--dialog-padding-bottom,var(--dialog-padding)));padding-left:calc(var(--dialog-padding-left,var(--dialog-padding)) - ","px);"],focus.focus.padding,focus.focus.padding,focus.focus.padding);const DraggingHandle=styled__default.default.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:8px;padding-bottom:8px;cursor:grab;touch-action:none;z-index:2;",""],responsiveLayout.responsiveLayout);const DraggingIconContainer=styled__default.default.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;display:flex;padding:6px 12px;border-radius:12px;& > *{height:4px;}"," ",""],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-11"})(["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-12"})(["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-13"})(["padding-top:var(--dialog-layout-spacer-size);",""],responsiveLayout.responsiveLayout);const ButtonPosition=styled__default.default.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-14"})(["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-15"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout.responsiveLayout);const LoadingContent=styled__default.default.div.withConfig({displayName:"DialogComponent__LoadingContent",componentId:"ui__sc-1dlvioj-16"})(["box-sizing:border-box;display:flex;flex-direction:column;& > *{margin-bottom:var(--dialog-content-gap);}"]);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.Header=Header,exports.Img=Img,exports.LayoutSpacer=LayoutSpacer,exports.LoadingContent=LoadingContent,exports.Media=Media,exports.ProgressPosition=ProgressPosition,exports.Root=Root,exports.ScrollArea=ScrollArea;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { 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()\n\nexport const Fading = styled.div.withConfig<{\n visible: boolean\n after?: boolean\n}>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n bottom: 100%;\n right: 4px; \n left: 4px;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n top: 100%;\n right: 4px;\n left: 4px;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 32px,\n cover;\n mask-position:\n 0 56px,\n 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n display: flex;\n position: relative;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 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 StickyHeader = styled.div.withConfig<\n ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>\n>({\n shouldForwardProp: filterCommonProps,\n})`\n ${responsiveSize}\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 ContentScrollArea = styled.div.withConfig<{ scrollable: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n box-sizing: border-box;\n flex-grow: 1;\n margin: 0 4px;\n overflow: auto;\n\n ${(props) => `\n overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n `}\n\n ${focus}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n shouldForwardProp: filterCommonProps,\n})`\n box-sizing: border-box;\n\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","zIndex","responsiveSize","responsiveLayout","Body","StickyHeader","Container","ContentScrollArea","scrollable","focus","Content","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"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 { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type { StyledDialogComponentProps, DialogComponentPalette, Layout } 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\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: 70ms;\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: 48px;\n bottom: 100%;\n right: 0; \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: 48px;\n top: 100%;\n right: 0;\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.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n shouldForwardProp: filterLayoutProps,\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 32px,\n cover;\n mask-position:\n 0 var(--dialog-mask-position-slope),\n 0 var(--dialog-mask-position-rect);\n border-radius: inherit;\n\n ${responsiveLayout}\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 0 20px 0 ${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['effect-shadow-medium'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 2px 4px 0 ${props.theme.colors['effect-shadow-small']};\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 Header = styled.div.withConfig<{ stickyHeader?: boolean }>({\n shouldForwardProp: (propKey: string) => !['stickyHeader'].includes(propKey),\n})`\n ${({ stickyHeader }) =>\n stickyHeader\n ? `\n padding-top: min(${focus.padding}px, var(--dialog-padding-top, var(--dialog-padding)));\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.padding}px);\n `\n : `\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2 * focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2 * focus.padding}px);\n `}\n\n & > * {\n margin-bottom: var(--dialog-header-gap);\n }\n`\n\nexport const Container = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n padding-top: calc(var(--dialog-padding-top, var(--dialog-padding)) - ${focus.padding}px);\n padding-bottom: calc(var(--dialog-padding-bottom, var(--dialog-padding)) - ${focus.padding}px);\n padding-left: min(${focus.padding}px, var(--dialog-padding-left, var(--dialog-padding)));\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n padding-right: min(${focus.padding}px, var(--dialog-padding-right, var(--dialog-padding)));\n`\n\nexport const ScrollArea = styled.div.withConfig<{ scrollable?: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n box-sizing: border-box;\n flex-grow: 1;\n padding: min(${focus.padding}px, var(--dialog-padding));\n\n ${(props) => `\n overflow: ${props.scrollable ? 'auto' : 'hidden'};\n overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n `}\n\n ${Header} ~ & {\n padding-top: var(--dialog-content-gap);\n }\n\n ${focus}\n`\n\nexport const Content = styled.div.withConfig<{ scrollable?: boolean; loading?: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable', 'loading'].includes(propKey),\n})`\n box-sizing: border-box;\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2 * focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2 * focus.padding}px);\n ${({ loading }) => loading && 'height: 100%;'}\n\n ${Header} + & {\n padding-top: var(--dialog-content-gap);\n }\n`\n\nexport const Footer = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n padding-top: var(--dialog-content-gap);\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.padding}px);\n padding-bottom: min(${focus.padding}px, var(--dialog-padding-bottom, var(--dialog-padding)));\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.padding}px);\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: 8px;\n padding-bottom: 8px;\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: 6px 12px;\n border-radius: 12px;\n\n & > * {\n height: 4px;\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 padding-top: var(--dialog-layout-spacer-size);\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\nexport const LoadingContent = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n & > * {\n margin-bottom: var(--dialog-content-gap);\n }\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","responsiveLayout","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","zIndex","responsiveSize","Body","Header","stickyHeader","focus","padding","Container","ScrollArea","scrollable","Content","loading","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition","LoadingContent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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
|
|
1
|
+
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 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:70ms;transition-timing-function:ease-in;pointer-events:none;}",""],o=>o.after?`\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 48px;\n bottom: 100%;\n right: 0; \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: 48px;\n top: 100%;\n right: 0;\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({shouldForwardProp:filterLayoutProps}).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 var(--dialog-mask-position-slope),0 var(--dialog-mask-position-rect);border-radius:inherit;",""],maskSlope,maskRectangle,responsiveLayout);const template_default=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n box-shadow: 0 0 20px 0 ${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['effect-shadow-medium'],...o.palette}),o=>o.dragging&&`\n box-shadow: 0 2px 4px 0 ${o.theme.colors['effect-shadow-small']};\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 Header=styled.div.withConfig({shouldForwardProp:o=>!['stickyHeader'].includes(o)}).withConfig({displayName:"DialogComponent__Header",componentId:"ui__sc-1dlvioj-4"})([""," & > *{margin-bottom:var(--dialog-header-gap);}"],({stickyHeader:o})=>o?`\n padding-top: min(${focus.padding}px, var(--dialog-padding-top, var(--dialog-padding)));\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.padding}px);\n `:`\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2*focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2*focus.padding}px);\n `);const Container=styled.div.withConfig({displayName:"DialogComponent__Container",componentId:"ui__sc-1dlvioj-5"})(["box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;flex-grow:1;padding-top:calc(var(--dialog-padding-top,var(--dialog-padding)) - ","px);padding-bottom:calc(var(--dialog-padding-bottom,var(--dialog-padding)) - ","px);padding-left:min(","px,var(--dialog-padding-left,var(--dialog-padding)));padding-right:min(","px,var(--dialog-padding-right,var(--dialog-padding)));"],focus.padding,focus.padding,focus.padding,focus.padding);const ScrollArea=styled.div.withConfig({shouldForwardProp:o=>!['scrollable'].includes(o)}).withConfig({displayName:"DialogComponent__ScrollArea",componentId:"ui__sc-1dlvioj-6"})(["box-sizing:border-box;flex-grow:1;padding:min(","px,var(--dialog-padding));"," "," ~ &{padding-top:var(--dialog-content-gap);}",""],focus.padding,o=>`\n overflow: ${o.scrollable?'auto':'hidden'};\n overscroll-behavior: ${o.scrollable?'contain':'auto'};\n `,Header,focus);const Content=styled.div.withConfig({shouldForwardProp:o=>!['scrollable','loading'].includes(o)}).withConfig({displayName:"DialogComponent__Content",componentId:"ui__sc-1dlvioj-7"})(["box-sizing:border-box;padding-right:calc(var(--dialog-padding-right,var(--dialog-padding)) - ","px);padding-left:calc(var(--dialog-padding-left,var(--dialog-padding)) - ","px);"," "," + &{padding-top:var(--dialog-content-gap);}"],2*focus.padding,2*focus.padding,({loading:o})=>o&&'height: 100%;',Header);const Footer=styled.div.withConfig({displayName:"DialogComponent__Footer",componentId:"ui__sc-1dlvioj-8"})(["box-sizing:border-box;flex-shrink:0;padding-top:var(--dialog-content-gap);padding-right:calc(var(--dialog-padding-right,var(--dialog-padding)) - ","px);padding-bottom:min(","px,var(--dialog-padding-bottom,var(--dialog-padding)));padding-left:calc(var(--dialog-padding-left,var(--dialog-padding)) - ","px);"],focus.padding,focus.padding,focus.padding);const DraggingHandle=styled.div.withConfig({shouldForwardProp:filterLayoutProps}).withConfig({displayName:"DialogComponent__DraggingHandle",componentId:"ui__sc-1dlvioj-9"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;padding-top:8px;padding-bottom:8px;cursor:grab;touch-action:none;z-index:2;",""],responsiveLayout);const DraggingIconContainer=styled.div.withConfig({displayName:"DialogComponent__DraggingIconContainer",componentId:"ui__sc-1dlvioj-10"})(["box-sizing:border-box;display:flex;padding:6px 12px;border-radius:12px;& > *{height:4px;}"," ",""],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-11"})(["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-12"})(["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-13"})(["padding-top:var(--dialog-layout-spacer-size);",""],responsiveLayout);const ButtonPosition=styled.div.withConfig({displayName:"DialogComponent__ButtonPosition",componentId:"ui__sc-1dlvioj-14"})(["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-15"})(["box-sizing:border-box;position:absolute;z-index:2;",""],responsiveLayout);const LoadingContent=styled.div.withConfig({displayName:"DialogComponent__LoadingContent",componentId:"ui__sc-1dlvioj-16"})(["box-sizing:border-box;display:flex;flex-direction:column;& > *{margin-bottom:var(--dialog-content-gap);}"]);export{Body,ButtonPosition,Container,Content,DraggingHandle,DraggingIconContainer,Fading,FancyBackground,Footer,Header,Img,LayoutSpacer,LoadingContent,Media,ProgressPosition,Root,ScrollArea};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/DialogComponent/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { 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()\n\nexport const Fading = styled.div.withConfig<{\n visible: boolean\n after?: boolean\n}>({\n shouldForwardProp: (propKey) => !['visible', 'after'].includes(propKey),\n})`\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n width: 100%;\n z-index: 1;\n\n &::before,\n &::after {\n transition-property: opacity;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n pointer-events: none;\n }\n\n ${(props) =>\n props.after\n ? `\n &::after {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n bottom: 100%;\n right: 4px; \n left: 4px;\n margin-bottom: -1px;\n background-image: linear-gradient(0deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `\n : `\n &::before {\n content: '';\n display: block;\n position: absolute;\n height: 35px;\n top: 100%;\n right: 4px;\n left: 4px;\n margin-top: -1px;\n background-image: linear-gradient(180deg, currentcolor, transparent);\n opacity: ${props.visible ? 1 : 0};\n }\n `}\n`\n\nexport const FancyBackground = styled.div`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 32px,\n cover;\n mask-position:\n 0 56px,\n 0 87px;\n border-radius: inherit;\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 1px ${palette.shadowColor};\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n fancy: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n ${FancyBackground} {\n background-color: ${palette.backgroundColor};\n }\n ${Fading} {\n color: ${palette.backgroundColor};\n }\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledDialogComponentProps>({\n shouldForwardProp: shouldForwardDialogComponentProp,\n})`\n box-sizing: border-box;\n display: flex;\n position: relative;\n isolation: isolate;\n\n ${(props) =>\n (props.fancy ? template.fancy : template.default)({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n shadowColor: props.theme.colors['bg-oncolor-hover'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 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 StickyHeader = styled.div.withConfig<\n ResponsiveSizeInterpolationProps<Size, Size, ResponsiveSizeProps<Size>>\n>({\n shouldForwardProp: filterCommonProps,\n})`\n ${responsiveSize}\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 ContentScrollArea = styled.div.withConfig<{ scrollable: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n box-sizing: border-box;\n flex-grow: 1;\n margin: 0 4px;\n overflow: auto;\n\n ${(props) => `\n overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n `}\n\n ${focus}\n`\n\nexport const Content = styled.div.withConfig<StyledDialogContentProps>({\n shouldForwardProp: filterCommonProps,\n})`\n box-sizing: border-box;\n\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","zIndex","responsiveSize","responsiveLayout","Body","StickyHeader","Container","ContentScrollArea","scrollable","focus","Content","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition"],"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 { ResponsiveLayoutInterpolationProps } from 'shared/interfaces'\nimport maskRectangle from './images/mask-rectangle.svg'\nimport maskSlope from './images/mask-slope.svg'\nimport type { StyledDialogComponentProps, DialogComponentPalette, Layout } 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\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: 70ms;\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: 48px;\n bottom: 100%;\n right: 0; \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: 48px;\n top: 100%;\n right: 0;\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.withConfig<ResponsiveLayoutInterpolationProps<Layout>>({\n shouldForwardProp: filterLayoutProps,\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n mask-image: url(${maskSlope}), url(${maskRectangle});\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 32px,\n cover;\n mask-position:\n 0 var(--dialog-mask-position-slope),\n 0 var(--dialog-mask-position-rect);\n border-radius: inherit;\n\n ${responsiveLayout}\n`\n\nconst template = {\n default: (palette: DialogComponentPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 0 20px 0 ${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['effect-shadow-medium'],\n ...props.palette,\n })}\n\n ${(props) =>\n props.dragging &&\n `\n box-shadow: 0 2px 4px 0 ${props.theme.colors['effect-shadow-small']};\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 Header = styled.div.withConfig<{ stickyHeader?: boolean }>({\n shouldForwardProp: (propKey: string) => !['stickyHeader'].includes(propKey),\n})`\n ${({ stickyHeader }) =>\n stickyHeader\n ? `\n padding-top: min(${focus.padding}px, var(--dialog-padding-top, var(--dialog-padding)));\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.padding}px);\n `\n : `\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2 * focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2 * focus.padding}px);\n `}\n\n & > * {\n margin-bottom: var(--dialog-header-gap);\n }\n`\n\nexport const Container = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex-grow: 1;\n padding-top: calc(var(--dialog-padding-top, var(--dialog-padding)) - ${focus.padding}px);\n padding-bottom: calc(var(--dialog-padding-bottom, var(--dialog-padding)) - ${focus.padding}px);\n padding-left: min(${focus.padding}px, var(--dialog-padding-left, var(--dialog-padding)));\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n padding-right: min(${focus.padding}px, var(--dialog-padding-right, var(--dialog-padding)));\n`\n\nexport const ScrollArea = styled.div.withConfig<{ scrollable?: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable'].includes(propKey),\n})`\n box-sizing: border-box;\n flex-grow: 1;\n padding: min(${focus.padding}px, var(--dialog-padding));\n\n ${(props) => `\n overflow: ${props.scrollable ? 'auto' : 'hidden'};\n overscroll-behavior: ${props.scrollable ? 'contain' : 'auto'};\n `}\n\n ${Header} ~ & {\n padding-top: var(--dialog-content-gap);\n }\n\n ${focus}\n`\n\nexport const Content = styled.div.withConfig<{ scrollable?: boolean; loading?: boolean }>({\n shouldForwardProp: (propKey: string) => !['scrollable', 'loading'].includes(propKey),\n})`\n box-sizing: border-box;\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${2 * focus.padding}px);\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${2 * focus.padding}px);\n ${({ loading }) => loading && 'height: 100%;'}\n\n ${Header} + & {\n padding-top: var(--dialog-content-gap);\n }\n`\n\nexport const Footer = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n padding-top: var(--dialog-content-gap);\n padding-right: calc(var(--dialog-padding-right, var(--dialog-padding)) - ${focus.padding}px);\n padding-bottom: min(${focus.padding}px, var(--dialog-padding-bottom, var(--dialog-padding)));\n /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */\n padding-left: calc(var(--dialog-padding-left, var(--dialog-padding)) - ${focus.padding}px);\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: 8px;\n padding-bottom: 8px;\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: 6px 12px;\n border-radius: 12px;\n\n & > * {\n height: 4px;\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 padding-top: var(--dialog-layout-spacer-size);\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\nexport const LoadingContent = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n & > * {\n margin-bottom: var(--dialog-content-gap);\n }\n`\n"],"names":["filterLayoutProps","propKey","includes","shouldForwardDialogComponentProp","createShouldForwardProp","Fading","styled","div","withConfig","shouldForwardProp","displayName","componentId","props","after","visible","FancyBackground","maskSlope","maskRectangle","responsiveLayout","template","palette","color","backgroundColor","shadowColor","Root","fancy","theme","colors","dragging","zIndex","responsiveSize","Body","Header","stickyHeader","focus","padding","Container","ScrollArea","scrollable","Content","loading","Footer","DraggingHandle","DraggingIconContainer","Media","Img","src","LayoutSpacer","Spacer","ButtonPosition","ProgressPosition","LoadingContent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var
|
|
1
|
+
'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');const Knob=withMergedProps.withMergedProps(({size:e="m",...s})=>jsxRuntime.jsx(style.Knob,{...s,size:e}),{displayName:'Knob',sizes:sizes.SIZES_KNOB});exports.Knob=Knob;
|
|
2
2
|
//# sourceMappingURL=Knob.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Knob.js","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './
|
|
1
|
+
{"version":3,"file":"Knob.js","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './sizes'\nimport * as Styled from './style'\nimport type { KnobProps } from './types'\n\nconst COMPONENT_NAME = 'Knob'\n\nconst Knob: React.ForwardRefExoticComponent<KnobProps> = withMergedProps<KnobProps, HTMLSpanElement>(\n ({ size = 'm', ...props }) => {\n return <Styled.Knob {...props} size={size} />\n },\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES_KNOB,\n }\n)\n\nexport { Knob }\n"],"names":["Knob","withMergedProps","size","props","_jsx","Styled","displayName","sizes","SIZES_KNOB"],"mappings":"sLAOA,MAAMA,KAAmDC,gBAAAA,gBACvD,EAAGC,OAAO,OAAQC,KACTC,WAAAA,IAACC,MAAAA,KAAW,IAAKF,EAAOD,KAAMA,IAEvC,CACEI,YAPmB,OAQnBC,MAAOC,MAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_KNOB}from'./
|
|
1
|
+
import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_KNOB}from'./sizes.mjs';import{Knob as Knob$1}from'./style.mjs';import{jsx}from'react/jsx-runtime';const Knob=withMergedProps(({size:o="m",...s})=>jsx(Knob$1,{...s,size:o}),{displayName:'Knob',sizes:SIZES_KNOB});export{Knob};
|
|
2
2
|
//# sourceMappingURL=Knob.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Knob.mjs","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './
|
|
1
|
+
{"version":3,"file":"Knob.mjs","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './sizes'\nimport * as Styled from './style'\nimport type { KnobProps } from './types'\n\nconst COMPONENT_NAME = 'Knob'\n\nconst Knob: React.ForwardRefExoticComponent<KnobProps> = withMergedProps<KnobProps, HTMLSpanElement>(\n ({ size = 'm', ...props }) => {\n return <Styled.Knob {...props} size={size} />\n },\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES_KNOB,\n }\n)\n\nexport { Knob }\n"],"names":["Knob","withMergedProps","size","props","_jsx","Styled","displayName","sizes","SIZES_KNOB"],"mappings":"2KAOA,MAAMA,KAAmDC,gBACvD,EAAGC,OAAO,OAAQC,KACTC,IAACC,OAAW,IAAKF,EAAOD,KAAMA,IAEvC,CACEI,YAPmB,OAQnBC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var Knob=require('./Knob.js');var
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var Knob=require('./Knob.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');const Switch=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:i="m",knobProps:t={},sizeXXS:r,sizeXS:n,sizeS:a,sizeM:z,sizeL:c,sizeXL:o,sizes:l,sizeUnits:u,preset:d,inline:j,palette:p,style:h,className:x,disabled:S,...m}=e;const w={size:i,sizeXXS:r,sizeXS:n,sizeS:a,sizeM:z,sizeL:c,sizeXL:o};return jsxRuntime.jsxs(style.Root,{...w,sizes:l,sizeUnits:u,preset:d,inline:j,palette:p,style:h,className:x,disabled:S,children:[jsxRuntime.jsx(style.Input,{...m,disabled:S,type:"checkbox",ref:s}),jsxRuntime.jsx(style.Track,{children:jsxRuntime.jsx(Knob.Knob,{...w,...t})})]})}),{displayName:"Switch",sizes:sizes.SIZES});exports.COMPONENT_NAME="Switch",exports.Switch=Switch;
|
|
2
2
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { SwitchProps } from './types'\n\nconst COMPONENT_NAME = 'Switch'\n\n/**\n *\n * *v1.1.0*\n *\n * Контрол для переключения между двумя значениями: включено или выключено.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<input\\> элемента.\n */\nconst Switch: React.ForwardRefExoticComponent<SwitchProps> = withMergedProps<SwitchProps, HTMLInputElement>(\n forwardRef<HTMLInputElement, MergedProps<SwitchProps>>((props, ref) => {\n const {\n size = 'm',\n knobProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n preset,\n inline,\n palette,\n style,\n className,\n disabled,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root\n {...sizeProps}\n sizes={sizes}\n sizeUnits={sizeUnits}\n preset={preset}\n inline={inline}\n palette={palette}\n style={style}\n className={className}\n disabled={disabled}\n >\n <Styled.Input {...inputProps} disabled={disabled} type='checkbox' ref={ref} />\n <Styled.Track>\n <Knob {...sizeProps} {...knobProps} />\n </Styled.Track>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Switch, COMPONENT_NAME }\n"],"names":["Switch","withMergedProps","forwardRef","props","ref","size","knobProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","preset","inline","palette","style","className","disabled","inputProps","sizeProps","_jsxs","Styled","children","_jsx","type","Knob","displayName","SIZES"],"mappings":"+OAkBA,MAAMA,OAAuDC,gBAAAA,gBAC3DC,MAAAA,WAAuD,CAACC,EAAOC,KAC7D,MAAMC,KACJA,EAAO,IAAGC,UACVA,EAAY,CAAA,EAAEC,QACdA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,OACNA,EAAMC,QACNA,QACAC,EAAKC,UACLA,EAASC,SACTA,KACGC,GACDlB,EAEJ,MAAMmB,EAAY,CAChBjB,OACAE,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEW,WAAAA,KAACC,MAAAA,KAAW,IACNF,EACJT,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EACTC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAASK,SAAA,CAEnBC,WAAAA,IAACF,YAAY,IAAKH,EAAYD,SAAUA,EAAUO,KAAK,WAAWvB,IAAKA,IACvEsB,WAAAA,IAACF,YAAY,CAAAC,SACXC,WAAAA,IAACE,UAAI,IAAKN,KAAehB,WAKjC,CACEuB,YA9DmB,SA+DnBhB,MAAOiB,MAAAA,+BA/DY"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{Knob}from'./Knob.mjs';import{SIZES}from'./
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{Knob}from'./Knob.mjs';import{SIZES}from'./sizes.mjs';import{Root,Input,Track}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';const COMPONENT_NAME='Switch';const Switch=withMergedProps(forwardRef((s,e)=>{const{size:i="m",knobProps:t={},sizeXXS:r,sizeXS:o,sizeS:m,sizeM:n,sizeL:z,sizeXL:c,sizes:p,sizeUnits:a,preset:l,inline:d,palette:S,style:f,className:h,disabled:j,...w}=s;const x={size:i,sizeXXS:r,sizeXS:o,sizeS:m,sizeM:n,sizeL:z,sizeXL:c};return jsxs(Root,{...x,sizes:p,sizeUnits:a,preset:l,inline:d,palette:S,style:f,className:h,disabled:j,children:[jsx(Input,{...w,disabled:j,type:"checkbox",ref:e}),jsx(Track,{children:jsx(Knob,{...x,...t})})]})}),{displayName:"Switch",sizes:SIZES});export{COMPONENT_NAME,Switch};
|
|
2
2
|
//# sourceMappingURL=Switch.mjs.map
|