npm - @skodaflow/web-library - Versions diffs - 8.3.2 → 8.5.0 - Mend

@skodaflow/web-library 8.3.2 → 8.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (308) hide show

package/materialui/divider/divider.theme.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e={styleOverrides:{root:({theme:e})=>({borderColor:e.palette.surface.secondary,"&:after, &:before":{borderColor:"inherit"}})}};export{e as flowDivider};
+const e={defaultProps:{"aria-hidden":!0},styleOverrides:{root:({theme:e})=>({borderColor:e.palette.surface.secondary,"&:after, &:before":{borderColor:"inherit"}})}};export{e as flowDivider};
 //# sourceMappingURL=divider.theme.js.map

package/materialui/divider/divider.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.theme.js","sources":["../../../src/materialui/divider/divider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\n\nexport const flowDivider: Components<Theme>['MuiDivider'] = {\n styleOverrides: {\n root: ({ theme }) => ({\n borderColor: theme.palette.surface.secondary,\n '&:after, &:before': {\n borderColor: 'inherit',\n },\n }),\n },\n};\n"],"names":["flowDivider","styleOverrides","root","theme","borderColor","palette","surface","secondary"],"mappings":"AAGO,MAAMA,EAA+C,CAC1DC,eAAgB,CACdC,KAAM,EAAGC,YAAO,CACdC,YAAaD,EAAME,QAAQC,QAAQC,UACnC,oBAAqB,CACnBH,YAAa"}
1	+ {"version":3,"file":"divider.theme.js","sources":["../../../src/materialui/divider/divider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\n\nexport const flowDivider: Components<Theme>['MuiDivider'] = {\n defaultProps: {\n // decorative line, Flow does not support content inside\n ['aria-hidden']: true,\n },\n styleOverrides: {\n root: ({ theme }) => ({\n borderColor: theme.palette.surface.secondary,\n '&:after, &:before': {\n borderColor: 'inherit',\n },\n }),\n },\n};\n"],"names":["flowDivider","defaultProps","styleOverrides","root","theme","borderColor","palette","surface","secondary"],"mappings":"AAGO,MAAMA,EAA+C,CAC1DC,aAAc,CAEZ,eAAiB,GAEnBC,eAAgB,CACdC,KAAM,EAAGC,YAAO,CACdC,YAAaD,EAAME,QAAQC,QAAQC,UACnC,oBAAqB,CACnBH,YAAa"}

package/materialui/iconButton/iconButton.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"iconButton.theme.js","sources":["../../../src/materialui/iconButton/iconButton.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle, updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowIconButton: Components<Theme>['MuiIconButton'] = {\n defaultProps: {\n disableRipple: true,\n variant: 'standard',\n color: 'secondary',\n size: 'medium',\n },\n styleOverrides: {\n root: ({ theme }) => ({\n position: 'relative',\n boxShadow: 'none',\n outline: 'none',\n width: '44px',\n height: '44px',\n borderRadius: '1000px',\n maxWidth: 'none',\n transition: 'all 0.3s ease-out',\n flexShrink: '0',\n '&:hover': {\n boxShadow: 'none',\n },\n '&&:active': {\n boxShadow: 'none',\n },\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n },\n {\n // hover effect also in accordionSummary.theme.tsx\n backgroundColor: theme.palette.transparent.secondary,\n },\n ),\n // focused style\n ...getFocusRingStyle(theme),\n // disabled style\n '&.Mui-disabled': {\n opacity: '1',\n color: theme.palette.disabled.primary,\n },\n }),\n sizeSmall: {\n height: '32px',\n width: '32px',\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n },\n },\n sizeMedium: {\n // width & height & borderRadius is default in root\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n },\n },\n sizeLarge: {\n height: '50px',\n width: '50px',\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '22px',\n },\n },\n },\n variants: [\n {\n props: { color: 'secondary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n color: theme.palette.text.primary,\n },\n {\n color: theme.palette.text.primary,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled' },\n style: ({ theme }) => ({\n // disabled style\n '&.Mui-disabled': {\n opacity: '1',\n backgroundColor: theme.palette.disabled.secondary,\n color: theme.palette.disabled.tertiary,\n },\n }),\n },\n {\n props: { variant: 'filled', color: 'primary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.brand.secondary,\n color: theme.palette.onSurface.os900,\n },\n {\n backgroundColor: theme.palette.brandHover.secondary,\n color: theme.palette.onSurface.os900,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'secondary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText,\n },\n {\n backgroundColor: theme.palette.secondary.light,\n color: theme.palette.secondary.contrastText,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'error' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n color: theme.palette.error.contrastText,\n backgroundColor: theme.palette.error.main,\n },\n {\n color: theme.palette.error.contrastText,\n backgroundColor: theme.palette.error.dark,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'inherit' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.transparent.secondary,\n },\n {\n backgroundColor: theme.palette.surface.primary,\n },\n ),\n }),\n },\n {\n props: { variant: 'outlined' },\n style: {\n border: '2px solid currentColor',\n ...updateFocusRingStyle(2),\n },\n },\n {\n props: { variant: 'outlined', size: 'small' },\n style: {\n borderWidth: '1px',\n ...updateFocusRingStyle(1),\n },\n },\n {\n props: { color: 'surface' },\n style: ({ theme }) => ({\n border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.transparent.quarternary : theme.palette.onSurface.os100}`,\n ...updateFocusRingStyle(1),\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.surface.primary,\n color: theme.palette.text.primary,\n },\n {\n backgroundColor: theme.palette.surface.secondary,\n color: theme.palette.text.primary,\n },\n ),\n // disabled style\n '&.Mui-disabled': {\n backgroundColor: theme.palette.surface.secondary,\n borderColor: theme.palette.surface.secondary,\n color: theme.palette.disabled.primary,\n },\n }),\n },\n {\n props: { color: 'surface', variant: 'outlined' },\n style: {\n borderWidth: '2px',\n ...updateFocusRingStyle(2),\n },\n },\n {\n props: { color: 'white' },\n style: ({ theme }) => ({\n // hover effect also in accordionSummary.theme.tsx\n // hover effect also in FooterAccordion.tsx\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os0,\n },\n {\n color: theme.palette.onSurface.os0,\n backgroundColor: theme.palette.transparent.tertiary,\n },\n ),\n // disabled style\n '&.Mui-disabled': {\n borderColor: theme.palette.disabled.primary,\n color: theme.palette.disabled.primary,\n },\n }),\n },\n ],\n};\n"],"names":["flowIconButton","defaultProps","disableRipple","variant","color","size","styleOverrides","root","theme","position","boxShadow","outline","width","height","borderRadius","maxWidth","transition","flexShrink","getInteractiveStyle","backgroundColor","palette","transparent","secondary","getFocusRingStyle","opacity","disabled","primary","sizeSmall","fontSize","sizeMedium","sizeLarge","variants","props","style","text","tertiary","brand","onSurface","os900","brandHover","main","contrastText","light","error","dark","surface","border","updateFocusRingStyle","borderWidth","mode","quarternary","os100","borderColor","os0"],"mappings":"qKAKO,MAAMA,EAAqD,CAChEC,aAAc,CACZC,eAAe,EACfC,QAAS,WACTC,MAAO,YACPC,KAAM,UAERC,eAAgB,~~CACdC~~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"}
1	+ {"version":3,"file":"iconButton.theme.js","sources":["../../../src/materialui/iconButton/iconButton.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle, updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\n\nexport const flowIconButton: Components<Theme>['MuiIconButton'] = {\n defaultProps: {\n disableRipple: true,\n variant: 'standard',\n color: 'secondary',\n size: 'medium',\n },\n styleOverrides: {\n // this style is mirrored in advancedTable/agGrid.tsx for the AG Grid pagination arrows,\n // which are plain divs - keep the two in sync\n root: ({ theme }) => ({\n position: 'relative',\n boxShadow: 'none',\n outline: 'none',\n width: '44px',\n height: '44px',\n borderRadius: '1000px',\n maxWidth: 'none',\n transition: 'all 0.3s ease-out',\n flexShrink: '0',\n '&:hover': {\n boxShadow: 'none',\n },\n '&&:active': {\n boxShadow: 'none',\n },\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n },\n {\n // hover effect also in accordionSummary.theme.tsx\n backgroundColor: theme.palette.transparent.secondary,\n },\n ),\n // focused style\n ...getFocusRingStyle(theme),\n // disabled style\n '&.Mui-disabled': {\n opacity: '1',\n color: theme.palette.disabled.primary,\n },\n }),\n sizeSmall: {\n height: '32px',\n width: '32px',\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '17px',\n },\n },\n sizeMedium: {\n // width & height & borderRadius is default in root\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n },\n },\n sizeLarge: {\n height: '50px',\n width: '50px',\n // icon itself\n '& .MuiSvgIcon-root': {\n fontSize: '22px',\n },\n },\n },\n variants: [\n {\n props: { color: 'secondary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n color: theme.palette.text.primary,\n },\n {\n color: theme.palette.text.primary,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled' },\n style: ({ theme }) => ({\n // disabled style\n '&.Mui-disabled': {\n opacity: '1',\n backgroundColor: theme.palette.disabled.secondary,\n color: theme.palette.disabled.tertiary,\n },\n }),\n },\n {\n props: { variant: 'filled', color: 'primary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.brand.secondary,\n color: theme.palette.onSurface.os900,\n },\n {\n backgroundColor: theme.palette.brandHover.secondary,\n color: theme.palette.onSurface.os900,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'secondary' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText,\n },\n {\n backgroundColor: theme.palette.secondary.light,\n color: theme.palette.secondary.contrastText,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'error' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n color: theme.palette.error.contrastText,\n backgroundColor: theme.palette.error.main,\n },\n {\n color: theme.palette.error.contrastText,\n backgroundColor: theme.palette.error.dark,\n },\n ),\n }),\n },\n {\n props: { variant: 'filled', color: 'inherit' },\n style: ({ theme }) => ({\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.transparent.secondary,\n },\n {\n backgroundColor: theme.palette.surface.primary,\n },\n ),\n }),\n },\n {\n props: { variant: 'outlined' },\n style: {\n border: '2px solid currentColor',\n ...updateFocusRingStyle(2),\n },\n },\n {\n props: { variant: 'outlined', size: 'small' },\n style: {\n borderWidth: '1px',\n ...updateFocusRingStyle(1),\n },\n },\n {\n props: { color: 'surface' },\n style: ({ theme }) => ({\n border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.transparent.quarternary : theme.palette.onSurface.os100}`,\n ...updateFocusRingStyle(1),\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.surface.primary,\n color: theme.palette.text.primary,\n },\n {\n backgroundColor: theme.palette.surface.secondary,\n color: theme.palette.text.primary,\n },\n ),\n // disabled style\n '&.Mui-disabled': {\n backgroundColor: theme.palette.surface.secondary,\n borderColor: theme.palette.surface.secondary,\n color: theme.palette.disabled.primary,\n },\n }),\n },\n {\n props: { color: 'surface', variant: 'outlined' },\n style: {\n borderWidth: '2px',\n ...updateFocusRingStyle(2),\n },\n },\n {\n props: { color: 'white' },\n style: ({ theme }) => ({\n // hover effect also in accordionSummary.theme.tsx\n // hover effect also in FooterAccordion.tsx\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os0,\n },\n {\n color: theme.palette.onSurface.os0,\n backgroundColor: theme.palette.transparent.tertiary,\n },\n ),\n // disabled style\n '&.Mui-disabled': {\n borderColor: theme.palette.disabled.primary,\n color: theme.palette.disabled.primary,\n },\n }),\n },\n ],\n};\n"],"names":["flowIconButton","defaultProps","disableRipple","variant","color","size","styleOverrides","root","theme","position","boxShadow","outline","width","height","borderRadius","maxWidth","transition","flexShrink","getInteractiveStyle","backgroundColor","palette","transparent","secondary","getFocusRingStyle","opacity","disabled","primary","sizeSmall","fontSize","sizeMedium","sizeLarge","variants","props","style","text","tertiary","brand","onSurface","os900","brandHover","main","contrastText","light","error","dark","surface","border","updateFocusRingStyle","borderWidth","mode","quarternary","os100","borderColor","os0"],"mappings":"qKAKO,MAAMA,EAAqD,CAChEC,aAAc,CACZC,eAAe,EACfC,QAAS,WACTC,MAAO,YACPC,KAAM,UAERC,eAAgB,CAGdC,KAAM,EAAGC,YAAO,CACdC,SAAU,WACVC,UAAW,OACXC,QAAS,OACTC,MAAO,OACPC,OAAQ,OACRC,aAAc,SACdC,SAAU,OACVC,WAAY,oBACZC,WAAY,IACZ,UAAW,CACTP,UAAW,QAEb,YAAa,CACXA,UAAW,WAEVQ,EACD,CACEC,gBAAiB,eAEnB,CAEEA,gBAAiBX,EAAMY,QAAQC,YAAYC,eAI5CC,EAAkBf,GAErB,iBAAkB,CAChBgB,QAAS,IACTpB,MAAOI,EAAMY,QAAQK,SAASC,WAGlCC,UAAW,CACTd,OAAQ,OACRD,MAAO,OAEP,qBAAsB,CACpBgB,SAAU,SAGdC,WAAY,CAGV,qBAAsB,CACpBD,SAAU,SAGdE,UAAW,CACTjB,OAAQ,OACRD,MAAO,OAEP,qBAAsB,CACpBgB,SAAU,UAIhBG,SAAU,CACR,CACEC,MAAO,CAAE5B,MAAO,aAChB6B,MAAO,EAAGzB,YAAO,IACZU,EACD,CACEd,MAAOI,EAAMY,QAAQc,KAAKR,SAE5B,CACEtB,MAAOI,EAAMY,QAAQc,KAAKR,aAKlC,CACEM,MAAO,CAAE7B,QAAS,UAClB8B,MAAO,EAAGzB,YAAO,CAEf,iBAAkB,CAChBgB,QAAS,IACTL,gBAAiBX,EAAMY,QAAQK,SAASH,UACxClB,MAAOI,EAAMY,QAAQK,SAASU,aAIpC,CACEH,MAAO,CAAE7B,QAAS,SAAUC,MAAO,WACnC6B,MAAO,EAAGzB,YAAO,IACZU,EACD,CACEC,gBAAiBX,EAAMY,QAAQgB,MAAMd,UACrClB,MAAOI,EAAMY,QAAQiB,UAAUC,OAEjC,CACEnB,gBAAiBX,EAAMY,QAAQmB,WAAWjB,UAC1ClB,MAAOI,EAAMY,QAAQiB,UAAUC,WAKvC,CACEN,MAAO,CAAE7B,QAAS,SAAUC,MAAO,aACnC6B,MAAO,EAAGzB,YAAO,IACZU,EACD,CACEC,gBAAiBX,EAAMY,QAAQE,UAAUkB,KACzCpC,MAAOI,EAAMY,QAAQE,UAAUmB,cAEjC,CACEtB,gBAAiBX,EAAMY,QAAQE,UAAUoB,MACzCtC,MAAOI,EAAMY,QAAQE,UAAUmB,kBAKvC,CACET,MAAO,CAAE7B,QAAS,SAAUC,MAAO,SACnC6B,MAAO,EAAGzB,YAAO,IACZU,EACD,CACEd,MAAOI,EAAMY,QAAQuB,MAAMF,aAC3BtB,gBAAiBX,EAAMY,QAAQuB,MAAMH,MAEvC,CACEpC,MAAOI,EAAMY,QAAQuB,MAAMF,aAC3BtB,gBAAiBX,EAAMY,QAAQuB,MAAMC,UAK7C,CACEZ,MAAO,CAAE7B,QAAS,SAAUC,MAAO,WACnC6B,MAAO,EAAGzB,YAAO,IACZU,EACD,CACEC,gBAAiBX,EAAMY,QAAQC,YAAYC,WAE7C,CACEH,gBAAiBX,EAAMY,QAAQyB,QAAQnB,aAK/C,CACEM,MAAO,CAAE7B,QAAS,YAClB8B,MAAO,CACLa,OAAQ,4BACLC,EAAqB,KAG5B,CACEf,MAAO,CAAE7B,QAAS,WAAYE,KAAM,SACpC4B,MAAO,CACLe,YAAa,SACVD,EAAqB,KAG5B,CACEf,MAAO,CAAE5B,MAAO,WAChB6B,MAAO,EAAGzB,YAAO,CACfsC,OAAQ,aAAoC,SAAvBtC,EAAMY,QAAQ6B,KAAkBzC,EAAMY,QAAQC,YAAY6B,YAAc1C,EAAMY,QAAQiB,UAAUc,WAClHJ,EAAqB,MACrB7B,EACD,CACEC,gBAAiBX,EAAMY,QAAQyB,QAAQnB,QACvCtB,MAAOI,EAAMY,QAAQc,KAAKR,SAE5B,CACEP,gBAAiBX,EAAMY,QAAQyB,QAAQvB,UACvClB,MAAOI,EAAMY,QAAQc,KAAKR,UAI9B,iBAAkB,CAChBP,gBAAiBX,EAAMY,QAAQyB,QAAQvB,UACvC8B,YAAa5C,EAAMY,QAAQyB,QAAQvB,UACnClB,MAAOI,EAAMY,QAAQK,SAASC,YAIpC,CACEM,MAAO,CAAE5B,MAAO,UAAWD,QAAS,YACpC8B,MAAO,CACLe,YAAa,SACVD,EAAqB,KAG5B,CACEf,MAAO,CAAE5B,MAAO,SAChB6B,MAAO,EAAGzB,YAAO,IAGZU,EACD,CACEC,gBAAiB,cACjBf,MAAOI,EAAMY,QAAQiB,UAAUgB,KAEjC,CACEjD,MAAOI,EAAMY,QAAQiB,UAAUgB,IAC/BlC,gBAAiBX,EAAMY,QAAQC,YAAYc,WAI/C,iBAAkB,CAChBiB,YAAa5C,EAAMY,QAAQK,SAASC,QACpCtB,MAAOI,EAAMY,QAAQK,SAASC"}

package/materialui/skeleton/skeleton.theme.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"@skodaflow/web-tokens/src/tokens.json";const a=(a,e)=>{const t=r["flow-typography"].find(r=>r.name===`${e}-${a}`);return t?{height:t.style.lineHeight}:{}},e=(r,e)=>({...a(r,"small"),[e.breakpoints.up("md")]:{...a(r,"medium")},[e.breakpoints.up("xl")]:{...a(r,"large")}}),t=()=>({borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%"}),s={defaultProps:{animation:"wave","aria-label":"placeholder",role:"progressbar"},styleOverrides:{text:{borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%"},circular:{flexShrink:"0"},wave:({theme:r})=>({backgroundColor:r.palette.onSurface.os100,"&:after":{background:`\n          linear-gradient(\n            90deg,\n            transparent,\n            ${r.palette.surface.secondary},\n            transparent\n          )\n        `},..."dark"===r.palette.mode&&{backgroundColor:r.palette.surface.secondary,"&:after":{background:`\n             linear-gradient(\n               90deg,\n               transparent,\n               ${r.palette.surface.primary},\n               transparent\n             )\n           `}}})},variants:[{props:{variant:"display"},style:({theme:r})=>({...e("display",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"600px"})},{props:{variant:"h1"},style:({theme:r})=>({...e("h1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"540px"})},{props:{variant:"h2"},style:({theme:r})=>({...e("h2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"510px"})},{props:{variant:"h3"},style:({theme:r})=>({...e("h3",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"480px"})},{props:{variant:"h4"},style:({theme:r})=>({...e("h4",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"450px"})},{props:{variant:"subheadline"},style:({theme:r})=>({...e("subheadline",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"420px"})},{props:{variant:"body"},style:({theme:r})=>({...e("body",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"480px"})},{props:{variant:"disclaimer"},style:({theme:r})=>({...e("disclaimer",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"disclaimer1"},style:({theme:r})=>({...e("disclaimer1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"disclaimer2"},style:({theme:r})=>({...e("disclaimer2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"caption1"},style:({theme:r})=>({...e("caption1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"300px"})},{props:{variant:"caption2"},style:({theme:r})=>({...e("caption2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"300px"})},{props:{variant:"list"},style:({theme:r})=>({...e("list",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"600px"})}]};export{s as flowSkeleton,e as getResponsiveLineHeight,t as getTextVariantStyle,a as getTypographyLineHeight};
+import r from"@skodaflow/web-tokens/src/tokens.json";const a=(a,e)=>{const t=r["flow-typography"].find(r=>r.name===`${e}-${a}`);return t?{height:t.style.lineHeight}:{}},e=(r,e)=>({...a(r,"small"),[e.breakpoints.up("md")]:{...a(r,"medium")},[e.breakpoints.up("xl")]:{...a(r,"large")}}),t=()=>({borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%"}),s={defaultProps:{animation:"wave","aria-hidden":!0},styleOverrides:{text:{borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%"},circular:{flexShrink:"0"},wave:({theme:r})=>({backgroundColor:r.palette.onSurface.os100,"&:after":{background:`\n          linear-gradient(\n            90deg,\n            transparent,\n            ${r.palette.surface.secondary},\n            transparent\n          )\n        `},..."dark"===r.palette.mode&&{backgroundColor:r.palette.surface.secondary,"&:after":{background:`\n             linear-gradient(\n               90deg,\n               transparent,\n               ${r.palette.surface.primary},\n               transparent\n             )\n           `}}})},variants:[{props:{variant:"display"},style:({theme:r})=>({...e("display",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"600px"})},{props:{variant:"h1"},style:({theme:r})=>({...e("h1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"540px"})},{props:{variant:"h2"},style:({theme:r})=>({...e("h2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"510px"})},{props:{variant:"h3"},style:({theme:r})=>({...e("h3",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"480px"})},{props:{variant:"h4"},style:({theme:r})=>({...e("h4",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"450px"})},{props:{variant:"subheadline"},style:({theme:r})=>({...e("subheadline",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"420px"})},{props:{variant:"body"},style:({theme:r})=>({...e("body",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"480px"})},{props:{variant:"disclaimer"},style:({theme:r})=>({...e("disclaimer",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"disclaimer1"},style:({theme:r})=>({...e("disclaimer1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"disclaimer2"},style:({theme:r})=>({...e("disclaimer2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"360px"})},{props:{variant:"caption1"},style:({theme:r})=>({...e("caption1",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"300px"})},{props:{variant:"caption2"},style:({theme:r})=>({...e("caption2",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"300px"})},{props:{variant:"list"},style:({theme:r})=>({...e("list",r),borderRadius:"4px",transform:"scale(1, 0.60)",transformOrigin:"0 55%",width:"600px"})}]};export{s as flowSkeleton,e as getResponsiveLineHeight,t as getTextVariantStyle,a as getTypographyLineHeight};
 //# sourceMappingURL=skeleton.theme.js.map

package/materialui/skeleton/skeleton.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.theme.js","sources":["../../../src/materialui/skeleton/skeleton.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { CSSObject, Theme } from '@mui/material';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\nimport { TypographySize } from '../typography/typography.theme';\n\nexport const getTypographyLineHeight = (element: string, size: TypographySize): CSSObject => {\n const typo = tokens['flow-typography'].find((el) => el.name === `${size}-${element}`);\n if (typo) {\n return {\n height: typo['style'].lineHeight,\n };\n } else {\n return {};\n }\n};\n\nexport const getResponsiveLineHeight = (element: string, theme: Theme): CSSObject => {\n return {\n ...getTypographyLineHeight(element, 'small'),\n [theme.breakpoints.up('md')]: {\n ...getTypographyLineHeight(element, 'medium'),\n },\n [theme.breakpoints.up('xl')]: {\n ...getTypographyLineHeight(element, 'large'),\n },\n };\n};\n\nexport const getTextVariantStyle = (): CSSObject => ({\n borderRadius: '4px',\n // style taken from @mui, lowering size\n transform: 'scale(1, 0.60)',\n transformOrigin: '0 55%',\n});\n\nexport const flowSkeleton: Components<Theme>['MuiSkeleton'] = {\n defaultProps: {\n animation: 'wave',\n ['aria-~~label~~']: ~~'placeholder'~~,\n ~~role: 'progressbar',\n~~ },\n styleOverrides: {\n text: {\n ...getTextVariantStyle(),\n },\n circular: {\n flexShrink: '0',\n },\n wave: ({ theme }) => ({\n backgroundColor: theme.palette.onSurface.os100,\n '&:after': {\n background: `\n linear-gradient(\n 90deg,\n transparent,\n ${theme.palette.surface.secondary},\n transparent\n )\n `,\n },\n ...(theme.palette.mode === 'dark' && {\n backgroundColor: theme.palette.surface.secondary,\n '&:after': {\n background: `\n linear-gradient(\n 90deg,\n transparent,\n ${theme.palette.surface.primary},\n transparent\n )\n `,\n },\n }),\n }),\n },\n variants: [\n {\n props: { variant: 'display' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('display', theme),\n ...getTextVariantStyle(),\n width: '600px',\n }),\n },\n {\n props: { variant: 'h1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h1', theme),\n ...getTextVariantStyle(),\n width: '540px',\n }),\n },\n {\n props: { variant: 'h2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h2', theme),\n ...getTextVariantStyle(),\n width: '510px',\n }),\n },\n {\n props: { variant: 'h3' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h3', theme),\n ...getTextVariantStyle(),\n width: '480px',\n }),\n },\n {\n props: { variant: 'h4' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h4', theme),\n ...getTextVariantStyle(),\n width: '450px',\n }),\n },\n {\n props: { variant: 'subheadline' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('subheadline', theme),\n ...getTextVariantStyle(),\n width: '420px',\n }),\n },\n {\n props: { variant: 'body' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('body', theme),\n ...getTextVariantStyle(),\n width: '480px',\n }),\n },\n {\n props: { variant: 'disclaimer' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'disclaimer1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer1', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'disclaimer2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer2', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'caption1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('caption1', theme),\n ...getTextVariantStyle(),\n width: '300px',\n }),\n },\n {\n props: { variant: 'caption2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('caption2', theme),\n ...getTextVariantStyle(),\n width: '300px',\n }),\n },\n {\n props: { variant: 'list' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('list', theme),\n ...getTextVariantStyle(),\n width: '600px',\n }),\n },\n ],\n};\n"],"names":["getTypographyLineHeight","element","size","typo","tokens","find","el","name","height","lineHeight","getResponsiveLineHeight","theme","breakpoints","up","getTextVariantStyle","borderRadius","transform","transformOrigin","flowSkeleton","defaultProps","animation","~~role","~~styleOverrides","text","circular","flexShrink","wave","backgroundColor","palette","onSurface","os100","background","surface","secondary","mode","primary","variants","props","variant","style","width"],"mappings":"2DAKaA,EAA0B,CAACC,EAAiBC,KACvD,MAAMC,EAAOC,EAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,KAAQD,KAC3E,OAAIE,EACK,CACLK,OAAQL,EAAY,MAAEM,YAGjB,CAAA,GAIEC,EAA0B,CAACT,EAAiBU,KAChD,IACFX,EAAwBC,EAAS,SACpC,CAACU,EAAMC,YAAYC,GAAG,OAAQ,IACzBb,EAAwBC,EAAS,WAEtC,CAACU,EAAMC,YAAYC,GAAG,OAAQ,IACzBb,EAAwBC,EAAS,YAK7Ba,EAAsB,KAAA,CACjCC,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,UAGNC,EAAiD,CAC5DC,aAAc,CACZC,UAAW,~~OACX~~,~~aAAgB~~,~~cAChBC~~,~~KAAM,eAERC,~~eAAgB,CACdC,KAAM,~~CAbRR~~,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~SAafO~~,SAAU,CACRC,WAAY,KAEdC,KAAM,~~EAAGf~~,YAAO,~~CACdgB~~,~~gBAAiBhB~~,~~EAAMiB~~,QAAQC,UAAUC,MACzC,UAAW,CACTC,WAAY,~~2FAINpB~~,~~EAAMiB~~,QAAQI,QAAQC,iEAKH,~~SAAvBtB~~,~~EAAMiB~~,QAAQM,MAAmB,CACnCP,~~gBAAiBhB~~,~~EAAMiB~~,QAAQI,QAAQC,UACvC,UAAW,CACTF,WAAY,~~uGAILpB~~,~~EAAMiB~~,QAAQI,QAAQG,yEAQrCC,SAAU,CACR,CACEC,MAAO,CAAEC,QAAS,WAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,UAAWC,GAlD5CI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiDXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,MAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,KAAMC,GA1DvCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyDXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,MAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,KAAMC,GAlEvCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiEXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,MAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,KAAMC,GA1EvCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyEXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,MAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,KAAMC,GAlFvCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiFXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,eAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,cAAeC,GA1FhDI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyFXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,QAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,OAAQC,GAlGzCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiGXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,cAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,aAAcC,GA1G/CI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyGXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,eAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,cAAeC,GAlHhDI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiHXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,eAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,cAAeC,GA1HhDI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyHXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,YAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,WAAYC,GAlI7CI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiIXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,YAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,WAAYC,GA1I7CI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAyIXuB~~,MAAO,WAGX,CACEH,MAAO,CAAEC,QAAS,QAClBC,MAAO,~~EAAG5B~~,YAAO,IACZD,EAAwB,OAAQC,GAlJzCI,aAAc,MAEdC,UAAW,iBACXC,gBAAiB,~~QAiJXuB~~,MAAO"}
1	+ {"version":3,"file":"skeleton.theme.js","sources":["../../../src/materialui/skeleton/skeleton.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { CSSObject, Theme } from '@mui/material';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\nimport { TypographySize } from '../typography/typography.theme';\n\nexport const getTypographyLineHeight = (element: string, size: TypographySize): CSSObject => {\n const typo = tokens['flow-typography'].find((el) => el.name === `${size}-${element}`);\n if (typo) {\n return {\n height: typo['style'].lineHeight,\n };\n } else {\n return {};\n }\n};\n\nexport const getResponsiveLineHeight = (element: string, theme: Theme): CSSObject => {\n return {\n ...getTypographyLineHeight(element, 'small'),\n [theme.breakpoints.up('md')]: {\n ...getTypographyLineHeight(element, 'medium'),\n },\n [theme.breakpoints.up('xl')]: {\n ...getTypographyLineHeight(element, 'large'),\n },\n };\n};\n\nexport const getTextVariantStyle = (): CSSObject => ({\n borderRadius: '4px',\n // style taken from @mui, lowering size\n transform: 'scale(1, 0.60)',\n transformOrigin: '0 55%',\n});\n\nexport const flowSkeleton: Components<Theme>['MuiSkeleton'] = {\n defaultProps: {\n animation: 'wave',\n // decorative placeholder, the loading state is announced by aria-busy on the loaded region\n ['aria-hidden']: true,\n },\n styleOverrides: {\n text: {\n ...getTextVariantStyle(),\n },\n circular: {\n flexShrink: '0',\n },\n wave: ({ theme }) => ({\n backgroundColor: theme.palette.onSurface.os100,\n '&:after': {\n background: `\n linear-gradient(\n 90deg,\n transparent,\n ${theme.palette.surface.secondary},\n transparent\n )\n `,\n },\n ...(theme.palette.mode === 'dark' && {\n backgroundColor: theme.palette.surface.secondary,\n '&:after': {\n background: `\n linear-gradient(\n 90deg,\n transparent,\n ${theme.palette.surface.primary},\n transparent\n )\n `,\n },\n }),\n }),\n },\n variants: [\n {\n props: { variant: 'display' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('display', theme),\n ...getTextVariantStyle(),\n width: '600px',\n }),\n },\n {\n props: { variant: 'h1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h1', theme),\n ...getTextVariantStyle(),\n width: '540px',\n }),\n },\n {\n props: { variant: 'h2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h2', theme),\n ...getTextVariantStyle(),\n width: '510px',\n }),\n },\n {\n props: { variant: 'h3' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h3', theme),\n ...getTextVariantStyle(),\n width: '480px',\n }),\n },\n {\n props: { variant: 'h4' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('h4', theme),\n ...getTextVariantStyle(),\n width: '450px',\n }),\n },\n {\n props: { variant: 'subheadline' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('subheadline', theme),\n ...getTextVariantStyle(),\n width: '420px',\n }),\n },\n {\n props: { variant: 'body' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('body', theme),\n ...getTextVariantStyle(),\n width: '480px',\n }),\n },\n {\n props: { variant: 'disclaimer' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'disclaimer1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer1', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'disclaimer2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('disclaimer2', theme),\n ...getTextVariantStyle(),\n width: '360px',\n }),\n },\n {\n props: { variant: 'caption1' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('caption1', theme),\n ...getTextVariantStyle(),\n width: '300px',\n }),\n },\n {\n props: { variant: 'caption2' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('caption2', theme),\n ...getTextVariantStyle(),\n width: '300px',\n }),\n },\n {\n props: { variant: 'list' },\n style: ({ theme }) => ({\n ...getResponsiveLineHeight('list', theme),\n ...getTextVariantStyle(),\n width: '600px',\n }),\n },\n ],\n};\n"],"names":["getTypographyLineHeight","element","size","typo","tokens","find","el","name","height","lineHeight","getResponsiveLineHeight","theme","breakpoints","up","getTextVariantStyle","borderRadius","transform","transformOrigin","flowSkeleton","defaultProps","animation","styleOverrides","text","circular","flexShrink","wave","backgroundColor","palette","onSurface","os100","background","surface","secondary","mode","primary","variants","props","variant","style","width"],"mappings":"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"}

package/materialui/slider/slider.theme.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{getFocusRingStyle as e}from"../../components/focusring/focusring.js";const o=40,t=20,a={defaultProps:{min:0,max:100,step:1,valueLabelDisplay:"auto",marks:!1},styleOverrides:{root:({theme:e,ownerState:o})=>({display:"block",borderRadius:"0",padding:"13px 0",..."vertical"===o.orientation?{width:"6px",height:"320px"}:{height:"6px"},"&.Mui-disabled":{"& .MuiSlider-rail":{color:e.palette.disabled.primary},"& .MuiSlider-track":{color:e.palette.disabled.tertiary},"& .MuiSlider-mark":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}},"& .MuiSlider-thumb":{borderColor:e.palette.disabled.tertiary}}}),rail:({theme:e})=>({borderRadius:"6px",opacity:"1",color:e.palette.onSurface.os500,transform:"translate3d(0px, -50%, 0px)"}),track:({theme:e})=>({borderRadius:"6px",border:"none",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,transform:"translate3d(0px, -50%, 0px)"}),mark:({theme:e})=>({height:"4px",width:"4px",borderRadius:"4px",opacity:"1",backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}}),thumb:({theme:o,ownerState:t})=>({..."vertical"===t.orientation?{width:"20px",height:"40px"}:{width:"40px",height:"20px"},borderRadius:"20px",backgroundColor:o.palette.onSurface.os0,border:`1px solid ${o.palette.onSurface.os900}`,"&:after":{width:"40px",height:"40px",borderRadius:"1000px"},...e(o,!0,1),transition:"box-shadow 0.3s ease-out","&, &:hover, &.Mui-active":{boxShadow:"none"},"&.Mui-focusVisible":{boxShadow:`0 0 0 2px ${o.palette.background.primary}`,"&.Mui-active":{boxShadow:"none",outline:`0px solid ${o.palette.background.primary}`,"&:before":{boxShadow:"none"}}}}),valueLabel:({theme:e})=>({maxWidth:"none",top:"-12px",backgroundColor:e.palette.text.primary,color:e.palette.background.primary,borderRadius:"2px",padding:"8px 12px",[e.breakpoints.up("xs")]:{fontSize:"12px",lineHeight:"16px",fontWeight:"400"}})}};export{a as flowSlider,t as flowThumbHeight,o as flowThumbWidth};
+import{getFocusRingStyle as e}from"../../components/focusring/focusring.js";const o=40,a=20,t={defaultProps:{min:0,max:100,step:1,valueLabelDisplay:"auto",marks:!1},styleOverrides:{root:({theme:e,ownerState:o})=>({display:"block",borderRadius:"0",padding:"13px 0","@media (pointer: coarse)":{padding:"13px 0"},..."vertical"===o.orientation?{width:"6px",height:"320px"}:{height:"6px"},"&.Mui-disabled":{"& .MuiSlider-rail":{color:e.palette.disabled.primary},"& .MuiSlider-track":{color:e.palette.disabled.tertiary},"& .MuiSlider-mark":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}},"& .MuiSlider-thumb":{borderColor:e.palette.disabled.tertiary}}}),rail:({theme:e})=>({borderRadius:"6px",opacity:"1",color:e.palette.onSurface.os500,transform:"translate3d(0px, -50%, 0px)"}),track:({theme:e})=>({borderRadius:"6px",border:"none",color:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,transform:"translate3d(0px, -50%, 0px)"}),mark:({theme:e})=>({height:"4px",width:"4px",borderRadius:"4px",opacity:"1",backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0,"&.MuiSlider-markActive":{backgroundColor:"dark"===e.palette.mode?e.palette.onSurface.os900:e.palette.onSurface.os0}}),thumb:({theme:o,ownerState:a})=>({..."vertical"===a.orientation?{width:"20px",height:"40px"}:{width:"40px",height:"20px"},borderRadius:"20px",backgroundColor:o.palette.onSurface.os0,border:`1px solid ${o.palette.onSurface.os900}`,"&:after":{width:"40px",height:"40px",borderRadius:"1000px"},...e(o,!0,1),transition:"box-shadow 0.3s ease-out","&, &:hover, &.Mui-active":{boxShadow:"none"},"&.Mui-focusVisible":{boxShadow:`0 0 0 2px ${o.palette.background.primary}`,"&.Mui-active":{boxShadow:"none",outline:`0px solid ${o.palette.background.primary}`,"&:before":{boxShadow:"none"}}}}),valueLabel:({theme:e})=>({maxWidth:"none",top:"-12px",backgroundColor:e.palette.text.primary,color:e.palette.background.primary,borderRadius:"2px",padding:"8px 12px",[e.breakpoints.up("xs")]:{fontSize:"12px",lineHeight:"16px",fontWeight:"400"}})}};export{t as flowSlider,a as flowThumbHeight,o as flowThumbWidth};
 //# sourceMappingURL=slider.theme.js.map

package/materialui/slider/slider.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.theme.js","sources":["../../../src/materialui/slider/slider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\n// make sure the value can be divided by 2\nexport const flowThumbWidth = 40;\nexport const flowThumbHeight = 20;\n\nexport const flowSlider: Components<Theme>['MuiSlider'] = {\n defaultProps: {\n // value properties\n min: 0,\n max: 100,\n step: 1,\n // display label with hover\n valueLabelDisplay: 'auto',\n // disable auto-generated marks, it is recommended to use ./getSliderMarks.ts function\n marks: false,\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n display: 'block',\n borderRadius: '0',\n // 32px height\n padding: '13px 0',\n ...(ownerState.orientation === 'vertical'\n ? {\n width: '6px',\n height: '320px',\n }\n : {\n height: '6px',\n }),\n // disabled state\n '&.Mui-disabled': {\n '& .MuiSlider-rail': {\n color: theme.palette.disabled.primary,\n },\n '& .MuiSlider-track': {\n color: theme.palette.disabled.tertiary,\n },\n '& .MuiSlider-mark': {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n '&.MuiSlider-markActive': {\n backgroundColor:\n theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n },\n },\n '& .MuiSlider-thumb': {\n borderColor: theme.palette.disabled.tertiary,\n },\n },\n }),\n // whole rail bellow the thumb\n rail: ({ theme }) => ({\n borderRadius: '6px',\n opacity: '1',\n color: theme.palette.onSurface.os500,\n // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n transform: 'translate3d(0px, -50%, 0px)',\n }),\n // track marking selected segment\n track: ({ theme }) => ({\n borderRadius: '6px',\n border: 'none',\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n transform: 'translate3d(0px, -50%, 0px)',\n }),\n // dot on the rail and track\n mark: ({ theme }) => ({\n height: '4px',\n width: '4px',\n borderRadius: '4px',\n opacity: '1',\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n '&.MuiSlider-markActive': {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n },\n }),\n // pointer\n thumb: ({ theme, ownerState }) => ({\n ...(ownerState.orientation === 'vertical'\n ? {\n width: `${flowThumbHeight}px`,\n height: `${flowThumbWidth}px`,\n }\n : {\n width: `${flowThumbWidth}px`,\n height: `${flowThumbHeight}px`,\n }),\n borderRadius: `${flowThumbHeight}px`,\n backgroundColor: theme.palette.onSurface.os0,\n border: `1px solid ${theme.palette.onSurface.os900}`,\n // hitbox target\n '&:after': {\n width: `${flowThumbWidth}px`,\n height: `${flowThumbWidth}px`,\n borderRadius: '1000px',\n },\n // focus style\n ...getFocusRingStyle(theme, true, 1),\n // extra shadow around\n transition: 'box-shadow 0.3s ease-out',\n '&, &:hover, &.Mui-active': {\n boxShadow: `none`,\n },\n '&.Mui-focusVisible': {\n // extra white border\n boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n // hide focus during dragging\n '&.Mui-active': {\n boxShadow: 'none',\n outline: `0px solid ${theme.palette.background.primary}`,\n '&:before': {\n boxShadow: 'none',\n },\n },\n },\n }),\n // label above thumb\n valueLabel: ({ theme }) => ({\n maxWidth: 'none',\n // increase space between thumb and tooltip\n top: '-12px',\n // style box\n backgroundColor: theme.palette.text.primary,\n color: theme.palette.background.primary,\n borderRadius: '2px',\n padding: '8px 12px',\n // custom font-size\n [theme.breakpoints.up('xs')]: {\n fontSize: '12px',\n lineHeight: '16px',\n fontWeight: '400',\n },\n }),\n },\n};\n"],"names":["flowThumbWidth","flowThumbHeight","flowSlider","defaultProps","min","max","step","valueLabelDisplay","marks","styleOverrides","root","theme","ownerState","display","borderRadius","padding","orientation","width","height","color","palette","disabled","primary","tertiary","backgroundColor","mode","onSurface","os900","os0","borderColor","rail","opacity","os500","transform","track","border","brand","secondary","mark","thumb","getFocusRingStyle","transition","boxShadow","background","outline","valueLabel","maxWidth","top","text","breakpoints","up","fontSize","lineHeight","fontWeight"],"mappings":"4EAKO,MAAMA,EAAiB,GACjBC,EAAkB,GAElBC,EAA6C,CACxDC,aAAc,CAEZC,IAAK,EACLC,IAAK,IACLC,KAAM,EAENC,kBAAmB,OAEnBC,OAAO,GAETC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAC1BC,QAAS,QACTC,aAAc,IAEdC,QAAS,~~YACsB~~,aAA3BH,EAAWI,YACX,CACEC,MAAO,MACPC,OAAQ,SAEV,CACEA,OAAQ,OAGd,iBAAkB,CAChB,oBAAqB,CACnBC,MAAOR,EAAMS,QAAQC,SAASC,SAEhC,qBAAsB,CACpBH,MAAOR,EAAMS,QAAQC,SAASE,UAEhC,oBAAqB,CACnBC,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBACyB,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,MAG9F,qBAAsB,CACpBC,YAAalB,EAAMS,QAAQC,SAASE,aAK1CO,KAAM,EAAGnB,YAAO,CACdG,aAAc,MACdiB,QAAS,IACTZ,MAAOR,EAAMS,QAAQM,UAAUM,MAE/BC,UAAW,gCAGbC,MAAO,EAAGvB,YAAO,CACfG,aAAc,MACdqB,OAAQ,OACRhB,MAA8B,SAAvBR,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQgB,MAAMC,UAAY1B,EAAMS,QAAQgB,MAAMd,QAE3FW,UAAW,gCAGbK,KAAM,EAAG3B,YAAO,CACdO,OAAQ,MACRD,MAAO,MACPH,aAAc,MACdiB,QAAS,IACTP,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,OAI7GW,MAAO,EAAG5B,QAAOC,iBAAY,IACI,aAA3BA,EAAWI,YACX,CACEC,MAAO,OACPC,OAAQ,QAEV,CACED,MAAO,OACPC,OAAQ,QAEdJ,aAAc,OACdU,gBAAiBb,EAAMS,QAAQM,UAAUE,IACzCO,OAAQ,aAAaxB,EAAMS,QAAQM,UAAUC,QAE7C,UAAW,CACTV,MAAO,OACPC,OAAQ,OACRJ,aAAc,aAGb0B,EAAkB7B,GAAO,EAAM,GAElC8B,WAAY,2BACZ,2BAA4B,CAC1BC,UAAW,QAEb,qBAAsB,CAEpBA,UAAW,aAAa/B,EAAMS,QAAQuB,WAAWrB,UAEjD,eAAgB,CACdoB,UAAW,OACXE,QAAS,aAAajC,EAAMS,QAAQuB,WAAWrB,UAC/C,WAAY,CACVoB,UAAW,YAMnBG,WAAY,EAAGlC,YAAO,CACpBmC,SAAU,OAEVC,IAAK,QAELvB,gBAAiBb,EAAMS,QAAQ4B,KAAK1B,QACpCH,MAAOR,EAAMS,QAAQuB,WAAWrB,QAChCR,aAAc,MACdC,QAAS,WAET,CAACJ,EAAMsC,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY"}
1	+ {"version":3,"file":"slider.theme.js","sources":["../../../src/materialui/slider/slider.theme.ts"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme } from '@mui/material';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\n// make sure the value can be divided by 2\nexport const flowThumbWidth = 40;\nexport const flowThumbHeight = 20;\n\nexport const flowSlider: Components<Theme>['MuiSlider'] = {\n defaultProps: {\n // value properties\n min: 0,\n max: 100,\n step: 1,\n // display label with hover\n valueLabelDisplay: 'auto',\n // disable auto-generated marks, it is recommended to use ./getSliderMarks.ts function\n marks: false,\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n display: 'block',\n borderRadius: '0',\n // 32px height\n padding: '13px 0',\n // overwrite MUI touch device styling to keep the same size on mobile\n '@media (pointer: coarse)': {\n padding: '13px 0',\n },\n ...(ownerState.orientation === 'vertical'\n ? {\n width: '6px',\n height: '320px',\n }\n : {\n height: '6px',\n }),\n // disabled state\n '&.Mui-disabled': {\n '& .MuiSlider-rail': {\n color: theme.palette.disabled.primary,\n },\n '& .MuiSlider-track': {\n color: theme.palette.disabled.tertiary,\n },\n '& .MuiSlider-mark': {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n '&.MuiSlider-markActive': {\n backgroundColor:\n theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n },\n },\n '& .MuiSlider-thumb': {\n borderColor: theme.palette.disabled.tertiary,\n },\n },\n }),\n // whole rail bellow the thumb\n rail: ({ theme }) => ({\n borderRadius: '6px',\n opacity: '1',\n color: theme.palette.onSurface.os500,\n // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n transform: 'translate3d(0px, -50%, 0px)',\n }),\n // track marking selected segment\n track: ({ theme }) => ({\n borderRadius: '6px',\n border: 'none',\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n // add translate3d, in addition to translateY(-50%), to prevent overflowing borderRadius\n transform: 'translate3d(0px, -50%, 0px)',\n }),\n // dot on the rail and track\n mark: ({ theme }) => ({\n height: '4px',\n width: '4px',\n borderRadius: '4px',\n opacity: '1',\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n '&.MuiSlider-markActive': {\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.onSurface.os0,\n },\n }),\n // pointer\n thumb: ({ theme, ownerState }) => ({\n ...(ownerState.orientation === 'vertical'\n ? {\n width: `${flowThumbHeight}px`,\n height: `${flowThumbWidth}px`,\n }\n : {\n width: `${flowThumbWidth}px`,\n height: `${flowThumbHeight}px`,\n }),\n borderRadius: `${flowThumbHeight}px`,\n backgroundColor: theme.palette.onSurface.os0,\n border: `1px solid ${theme.palette.onSurface.os900}`,\n // hitbox target\n '&:after': {\n width: `${flowThumbWidth}px`,\n height: `${flowThumbWidth}px`,\n borderRadius: '1000px',\n },\n // focus style\n ...getFocusRingStyle(theme, true, 1),\n // extra shadow around\n transition: 'box-shadow 0.3s ease-out',\n '&, &:hover, &.Mui-active': {\n boxShadow: `none`,\n },\n '&.Mui-focusVisible': {\n // extra white border\n boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n // hide focus during dragging\n '&.Mui-active': {\n boxShadow: 'none',\n outline: `0px solid ${theme.palette.background.primary}`,\n '&:before': {\n boxShadow: 'none',\n },\n },\n },\n }),\n // label above thumb\n valueLabel: ({ theme }) => ({\n maxWidth: 'none',\n // increase space between thumb and tooltip\n top: '-12px',\n // style box\n backgroundColor: theme.palette.text.primary,\n color: theme.palette.background.primary,\n borderRadius: '2px',\n padding: '8px 12px',\n // custom font-size\n [theme.breakpoints.up('xs')]: {\n fontSize: '12px',\n lineHeight: '16px',\n fontWeight: '400',\n },\n }),\n },\n};\n"],"names":["flowThumbWidth","flowThumbHeight","flowSlider","defaultProps","min","max","step","valueLabelDisplay","marks","styleOverrides","root","theme","ownerState","display","borderRadius","padding","orientation","width","height","color","palette","disabled","primary","tertiary","backgroundColor","mode","onSurface","os900","os0","borderColor","rail","opacity","os500","transform","track","border","brand","secondary","mark","thumb","getFocusRingStyle","transition","boxShadow","background","outline","valueLabel","maxWidth","top","text","breakpoints","up","fontSize","lineHeight","fontWeight"],"mappings":"4EAKO,MAAMA,EAAiB,GACjBC,EAAkB,GAElBC,EAA6C,CACxDC,aAAc,CAEZC,IAAK,EACLC,IAAK,IACLC,KAAM,EAENC,kBAAmB,OAEnBC,OAAO,GAETC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAC1BC,QAAS,QACTC,aAAc,IAEdC,QAAS,SAET,2BAA4B,CAC1BA,QAAS,aAEoB,aAA3BH,EAAWI,YACX,CACEC,MAAO,MACPC,OAAQ,SAEV,CACEA,OAAQ,OAGd,iBAAkB,CAChB,oBAAqB,CACnBC,MAAOR,EAAMS,QAAQC,SAASC,SAEhC,qBAAsB,CACpBH,MAAOR,EAAMS,QAAQC,SAASE,UAEhC,oBAAqB,CACnBC,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBACyB,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,MAG9F,qBAAsB,CACpBC,YAAalB,EAAMS,QAAQC,SAASE,aAK1CO,KAAM,EAAGnB,YAAO,CACdG,aAAc,MACdiB,QAAS,IACTZ,MAAOR,EAAMS,QAAQM,UAAUM,MAE/BC,UAAW,gCAGbC,MAAO,EAAGvB,YAAO,CACfG,aAAc,MACdqB,OAAQ,OACRhB,MAA8B,SAAvBR,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQgB,MAAMC,UAAY1B,EAAMS,QAAQgB,MAAMd,QAE3FW,UAAW,gCAGbK,KAAM,EAAG3B,YAAO,CACdO,OAAQ,MACRD,MAAO,MACPH,aAAc,MACdiB,QAAS,IACTP,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,IACzG,yBAA0B,CACxBJ,gBAAwC,SAAvBb,EAAMS,QAAQK,KAAkBd,EAAMS,QAAQM,UAAUC,MAAQhB,EAAMS,QAAQM,UAAUE,OAI7GW,MAAO,EAAG5B,QAAOC,iBAAY,IACI,aAA3BA,EAAWI,YACX,CACEC,MAAO,OACPC,OAAQ,QAEV,CACED,MAAO,OACPC,OAAQ,QAEdJ,aAAc,OACdU,gBAAiBb,EAAMS,QAAQM,UAAUE,IACzCO,OAAQ,aAAaxB,EAAMS,QAAQM,UAAUC,QAE7C,UAAW,CACTV,MAAO,OACPC,OAAQ,OACRJ,aAAc,aAGb0B,EAAkB7B,GAAO,EAAM,GAElC8B,WAAY,2BACZ,2BAA4B,CAC1BC,UAAW,QAEb,qBAAsB,CAEpBA,UAAW,aAAa/B,EAAMS,QAAQuB,WAAWrB,UAEjD,eAAgB,CACdoB,UAAW,OACXE,QAAS,aAAajC,EAAMS,QAAQuB,WAAWrB,UAC/C,WAAY,CACVoB,UAAW,YAMnBG,WAAY,EAAGlC,YAAO,CACpBmC,SAAU,OAEVC,IAAK,QAELvB,gBAAiBb,EAAMS,QAAQ4B,KAAK1B,QACpCH,MAAOR,EAAMS,QAAQuB,WAAWrB,QAChCR,aAAc,MACdC,QAAS,WAET,CAACJ,EAAMsC,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY"}

package/materialui/table/tablePagination.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tablePagination.theme.js","sources":["../../../src/materialui/table/tablePagination.theme.tsx"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme, Box } from '@mui/material';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { ChevronPreviousIcon } from '@/src/components/icon/stroke/ChevronPreviousIcon';\nimport { ChevronNextIcon } from '@/src/components/icon/stroke/ChevronNextIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowTablePagination: Components<Theme>['MuiTablePagination'] = {\n defaultProps: {\n // not recommended properties, <Pagination /> component should be utilized instead\n showFirstButton: false,\n showLastButton: false,\n // adjust label\n // we are obtaining max page from the available params\n // - first page, calculated from 'from' and 'to'\n // - other pages, calculated from 'from' - 1 and diving by current page\n labelDisplayedRows: ({ from, to, count, page }) => (\n <>\n <Box component=\"strong\">{page + 1}</Box>\n <Box component=\"span\" className=\"divider\">{` / `}</Box>\n <Box component=\"span\">{Math.ceil(count / (page >= 1 ? (from - 1) / page : to - from + 1)) \|\| 1}</Box>\n </>\n ),\n // correct icons\n slots: {\n actions: {\n // navigation arrows\n previousButtonIcon: ArrowLeftIcon,\n nextButtonIcon: ArrowRightIcon,\n // first & last extra arrow (hidden by default)\n firstButtonIcon: ChevronPreviousIcon,\n lastButtonIcon: ChevronNextIcon,\n },\n },\n slotProps: {\n actions: {\n previousButton: {\n size: 'medium',\n className: 'MuiTablePagination-actions-previous',\n },\n nextButton: {\n size: 'medium',\n className: 'MuiTablePagination-actions-next',\n },\n firstButton: {\n size: 'medium',\n },\n lastButton: {\n size: 'medium',\n },\n },\n },\n },\n styleOverrides: {\n root: ({ theme }) => ({\n // we are outside table\n border: `1px solid ${theme.palette.surface.secondary}`,\n borderRadius: '8px',\n // part of <TableFooter /> and <TableRow />\n '&td': {\n border: 'none',\n borderRadius: '0',\n },\n }),\n // wrapper under root\n toolbar: ({ theme }) => ({\n position: 'relative',\n justifyContent: 'center',\n // mimic style from tableCell.theme\n [theme.breakpoints.up('md')]: {\n minHeight: '80px',\n // right padding also affect position of displayedRows\n padding: '4px 24px',\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // support multiple rows\n flexWrap: 'wrap',\n // adjust proportions\n minHeight: '0',\n padding: '8px 16px',\n },\n }),\n // first element on left side\n spacer: ({ theme }) => ({\n // make sure to keep most of the space on the left\n flexGrow: '1',\n flexBasis: 'auto',\n // in case text is provided\n ...theme.typography.body,\n // tiny responsive\n [theme.breakpoints.down('sm')]: {\n // take whole row\n flexBasis: '100%',\n textAlign: 'center',\n },\n }),\n // 'row per page:' text\n selectLabel: {\n margin: '0',\n },\n // input field for amount of rows\n input: ({ theme }) => ({\n margin: '0',\n padding: '0',\n borderRadius: '4px',\n ...theme.typography.body,\n ...getFocusRingStyle(theme, false, '0px', '&.Mui-focused'),\n [theme.breakpoints.up('xs')]: {\n fontWeight: '700',\n },\n '&& .MuiSelect-select': {\n padding: '4px 26px 4px 4px',\n },\n }),\n // label of current page, 1/10\n displayedRows: ({ theme, ownerState }) => ({\n // move into actions\n position: 'absolute',\n // IconButton size + padding\n right: `${(ownerState.showLastButton ? 44 * 2 : 44) + 24}px`,\n // this requires fixed size, also prevents jumping\n width: '90px',\n textAlign: 'center',\n whiteSpace: 'nowrap',\n // match size of IconButtons\n height: '44px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // proportions and style\n margin: '0',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n strong: {\n color: theme.palette.text.primary,\n },\n '.divider': {\n fontWeight: '400',\n margin: '0 4px',\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // move to 2nd row (matches new padding from toolbar)\n bottom: '8px',\n // move to center\n right: '0',\n left: '0',\n margin: '0 auto',\n },\n }),\n // navigation arrows, < >\n actions: ({ theme }) => ({\n margin: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n // make sure to keep most of the space on the right\n flexGrow: '1',\n '& .MuiTablePagination-actions-next': {\n // extra space for displayedRows\n ...(theme.direction === \"rtl\" ? { marginRight: \"90px\" } : { marginLeft: '90px' }),\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // move to new row\n flexBasis: '100%',\n // center content\n justifyContent: 'center',\n },\n }),\n },\n};\n"],"names":["flowTablePagination","defaultProps","showFirstButton","showLastButton","labelDisplayedRows","from","to","count","page","_jsxs","_Fragment","children","_jsx","Box","component","className","Math","ceil","slots","actions","previousButtonIcon","ArrowLeftIcon","nextButtonIcon","ArrowRightIcon","firstButtonIcon","ChevronPreviousIcon","lastButtonIcon","ChevronNextIcon","slotProps","previousButton","size","nextButton","firstButton","lastButton","styleOverrides","root","theme","border","palette","surface","secondary","borderRadius","toolbar","position","justifyContent","breakpoints","up","minHeight","padding","down","flexWrap","spacer","flexGrow","flexBasis","typography","body","textAlign","selectLabel","margin","input","getFocusRingStyle","fontWeight","displayedRows","ownerState","right","width","whiteSpace","height","display","alignItems","color","mode","onSurface","os300","os700","strong","text","primary","bottom","left","direction","marginRight","marginLeft"],"mappings":"0fAQO,MAAMA,EAA+D,CAC1EC,aAAc,CAEZC,iBAAiB,EACjBC,gBAAgB,EAKhBC,mBAAoB,EAAGC,OAAMC,KAAIC,QAAOC,UACtCC,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAG,CAACC,UAAU,SAAQH,SAAEH,EAAO,IAChCI,EAACC,EAAG,CAACC,UAAU,OAAOC,UAAU,mBAAW,QAC3CH,EAACC,EAAG,CAACC,UAAU,OAAMH,SAAEK,KAAKC,KAAKV,GAASC,GAAQ,GAAKH,EAAO,GAAKG,EAAOF,EAAKD,EAAO,KAAO,OAIjGa,MAAO,CACLC,QAAS,CAEPC,mBAAoBC,EACpBC,eAAgBC,EAEhBC,gBAAiBC,EACjBC,eAAgBC,IAGpBC,UAAW,CACTT,QAAS,CACPU,eAAgB,CACdC,KAAM,SACNf,UAAW,uCAEbgB,WAAY,CACVD,KAAM,SACNf,UAAW,mCAEbiB,YAAa,CACXF,KAAM,UAERG,WAAY,CACVH,KAAM,aAKdI,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEdC,OAAQ,aAAaD,EAAME,QAAQC,QAAQC,YAC3CC,aAAc,MAEd,MAAO,CACLJ,OAAQ,OACRI,aAAc,OAIlBC,QAAS,EAAGN,YAAO,CACjBO,SAAU,WACVC,eAAgB,SAEhB,CAACR,EAAMS,YAAYC,GAAG,OAAQ,CAC5BC,UAAW,OAEXC,QAAS,YAGX,CAACZ,EAAMS,YAAYI,KAAK,OAAQ,CAE9BC,SAAU,OAEVH,UAAW,IACXC,QAAS,cAIbG,OAAQ,EAAGf,YAAO,CAEhBgB,SAAU,IACVC,UAAW,UAERjB,EAAMkB,WAAWC,KAEpB,CAACnB,EAAMS,YAAYI,KAAK,OAAQ,CAE9BI,UAAW,OACXG,UAAW,YAIfC,YAAa,CACXC,OAAQ,KAGVC,MAAO,EAAGvB,YAAO,CACfsB,OAAQ,IACRV,QAAS,IACTP,aAAc,SACXL,EAAMkB,WAAWC,QACjBK,EAAkBxB,GAAO,EAAO,MAAO,iBAC1C,CAACA,EAAMS,YAAYC,GAAG,OAAQ,CAC5Be,WAAY,OAEd,uBAAwB,CACtBb,QAAS,sBAIbc,cAAe,EAAG1B,QAAO2B,iBAAY,CAEnCpB,SAAU,WAEVqB,MAAsD,IAA3CD,EAAW5D,eAAiB,GAAS,IAAzC,KAEP8D,MAAO,OACPT,UAAW,SACXU,WAAY,SAEZC,OAAQ,OACRC,QAAS,OACTC,WAAY,SACZzB,eAAgB,SAEhBc,OAAQ,IACRY,MAA8B,SAAvBlC,EAAME,QAAQiC,KAAkBnC,EAAME,QAAQkC,UAAUC,MAAQrC,EAAME,QAAQkC,UAAUE,MAC/FC,OAAQ,CACNL,MAAOlC,EAAME,QAAQsC,KAAKC,SAE5B,WAAY,CACVhB,WAAY,MACZH,OAAQ,SAGV,CAACtB,EAAMS,YAAYI,KAAK,OAAQ,CAE9B6B,OAAQ,MAERd,MAAO,IACPe,KAAM,IACNrB,OAAQ,YAIZvC,QAAS,EAAGiB,YAAO,CACjBsB,OAAQ,IACRU,QAAS,OACTC,WAAY,SACZzB,eAAgB,WAEhBQ,SAAU,IACV,qCAAsC,IAEZ,QAApBhB,EAAM4C,UAAsB,CAAEC,YAAa,QAAW,CAAEC,WAAY,SAG1E,CAAC9C,EAAMS,YAAYI,KAAK,OAAQ,CAE9BI,UAAW,OAEXT,eAAgB"}
1	+ {"version":3,"file":"tablePagination.theme.js","sources":["../../../src/materialui/table/tablePagination.theme.tsx"],"sourcesContent":["import { Components } from '@mui/material/styles';\nimport { Theme, Box } from '@mui/material';\nimport { ArrowLeftIcon } from '@/src/components/icon/stroke/ArrowLeftIcon';\nimport { ArrowRightIcon } from '@/src/components/icon/stroke/ArrowRightIcon';\nimport { ChevronPreviousIcon } from '@/src/components/icon/stroke/ChevronPreviousIcon';\nimport { ChevronNextIcon } from '@/src/components/icon/stroke/ChevronNextIcon';\nimport { getFocusRingStyle } from '@/src/components/focusring/focusring';\n\nexport const flowTablePagination: Components<Theme>['MuiTablePagination'] = {\n defaultProps: {\n // not recommended properties, <Pagination /> component should be utilized instead\n showFirstButton: false,\n showLastButton: false,\n // adjust label\n // we are obtaining max page from the available params\n // - first page, calculated from 'from' and 'to'\n // - other pages, calculated from 'from' - 1 and diving by current page\n labelDisplayedRows: ({ from, to, count, page }) => (\n <>\n <Box component=\"strong\">{page + 1}</Box>\n <Box component=\"span\" className=\"divider\">{` / `}</Box>\n <Box component=\"span\">{Math.ceil(count / (page >= 1 ? (from - 1) / page : to - from + 1)) \|\| 1}</Box>\n </>\n ),\n // correct icons\n slots: {\n actions: {\n // navigation arrows\n previousButtonIcon: ArrowLeftIcon,\n nextButtonIcon: ArrowRightIcon,\n // first & last extra arrow (hidden by default)\n firstButtonIcon: ChevronPreviousIcon,\n lastButtonIcon: ChevronNextIcon,\n },\n },\n slotProps: {\n actions: {\n previousButton: {\n size: 'medium',\n className: 'MuiTablePagination-actions-previous',\n },\n nextButton: {\n size: 'medium',\n className: 'MuiTablePagination-actions-next',\n },\n firstButton: {\n size: 'medium',\n },\n lastButton: {\n size: 'medium',\n },\n },\n },\n },\n styleOverrides: {\n root: ({ theme }) => ({\n // we are outside table\n border: `1px solid ${theme.palette.surface.secondary}`,\n borderRadius: '8px',\n // part of <TableFooter /> and <TableRow />\n '&td': {\n border: 'none',\n borderRadius: '0',\n },\n }),\n // wrapper under root\n toolbar: ({ theme }) => ({\n position: 'relative',\n justifyContent: 'center',\n // mimic style from tableCell.theme\n [theme.breakpoints.up('md')]: {\n minHeight: '80px',\n // right padding also affect position of displayedRows\n padding: '4px 24px',\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // support multiple rows\n flexWrap: 'wrap',\n // adjust proportions\n minHeight: '0',\n padding: '8px 16px',\n },\n }),\n // first element on left side\n spacer: ({ theme }) => ({\n // make sure to keep most of the space on the left\n flexGrow: '1',\n flexBasis: 'auto',\n // in case text is provided\n ...theme.typography.body,\n // tiny responsive\n [theme.breakpoints.down('sm')]: {\n // take whole row\n flexBasis: '100%',\n textAlign: 'center',\n },\n }),\n // 'row per page:' text\n selectLabel: {\n margin: '0',\n },\n // input field for amount of rows\n input: ({ theme }) => ({\n margin: '0',\n padding: '0',\n borderRadius: '4px',\n ...theme.typography.body,\n ...getFocusRingStyle(theme, false, '0px', '&.Mui-focused'),\n [theme.breakpoints.up('xs')]: {\n fontWeight: '700',\n },\n '&& .MuiSelect-select': {\n padding: '4px 26px 4px 4px',\n },\n }),\n // label of current page, 1/10\n displayedRows: ({ theme, ownerState }) => ({\n // move into actions\n position: 'absolute',\n // IconButton size + padding\n right: `${(ownerState.showLastButton ? 44 * 2 : 44) + 24}px`,\n // this requires fixed size, also prevents jumping\n width: '90px',\n textAlign: 'center',\n whiteSpace: 'nowrap',\n // match size of IconButtons\n height: '44px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // proportions and style\n margin: '0',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n strong: {\n color: theme.palette.text.primary,\n },\n '.divider': {\n fontWeight: '400',\n margin: '0 4px',\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // move to 2nd row (matches new padding from toolbar)\n bottom: '8px',\n // move to center\n right: '0',\n left: '0',\n margin: '0 auto',\n },\n }),\n // navigation arrows, < >\n actions: ({ theme }) => ({\n margin: '0',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n // make sure to keep most of the space on the right\n flexGrow: '1',\n '& .MuiTablePagination-actions-next': {\n // extra space for displayedRows\n ...(theme.direction === 'rtl' ? { marginRight: '90px' } : { marginLeft: '90px' }),\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n // move to new row\n flexBasis: '100%',\n // center content\n justifyContent: 'center',\n },\n }),\n },\n};\n"],"names":["flowTablePagination","defaultProps","showFirstButton","showLastButton","labelDisplayedRows","from","to","count","page","_jsxs","_Fragment","children","_jsx","Box","component","className","Math","ceil","slots","actions","previousButtonIcon","ArrowLeftIcon","nextButtonIcon","ArrowRightIcon","firstButtonIcon","ChevronPreviousIcon","lastButtonIcon","ChevronNextIcon","slotProps","previousButton","size","nextButton","firstButton","lastButton","styleOverrides","root","theme","border","palette","surface","secondary","borderRadius","toolbar","position","justifyContent","breakpoints","up","minHeight","padding","down","flexWrap","spacer","flexGrow","flexBasis","typography","body","textAlign","selectLabel","margin","input","getFocusRingStyle","fontWeight","displayedRows","ownerState","right","width","whiteSpace","height","display","alignItems","color","mode","onSurface","os300","os700","strong","text","primary","bottom","left","direction","marginRight","marginLeft"],"mappings":"0fAQO,MAAMA,EAA+D,CAC1EC,aAAc,CAEZC,iBAAiB,EACjBC,gBAAgB,EAKhBC,mBAAoB,EAAGC,OAAMC,KAAIC,QAAOC,UACtCC,EAAAC,EAAA,CAAAC,SAAA,CACEC,EAACC,EAAG,CAACC,UAAU,SAAQH,SAAEH,EAAO,IAChCI,EAACC,EAAG,CAACC,UAAU,OAAOC,UAAU,mBAAW,QAC3CH,EAACC,EAAG,CAACC,UAAU,OAAMH,SAAEK,KAAKC,KAAKV,GAASC,GAAQ,GAAKH,EAAO,GAAKG,EAAOF,EAAKD,EAAO,KAAO,OAIjGa,MAAO,CACLC,QAAS,CAEPC,mBAAoBC,EACpBC,eAAgBC,EAEhBC,gBAAiBC,EACjBC,eAAgBC,IAGpBC,UAAW,CACTT,QAAS,CACPU,eAAgB,CACdC,KAAM,SACNf,UAAW,uCAEbgB,WAAY,CACVD,KAAM,SACNf,UAAW,mCAEbiB,YAAa,CACXF,KAAM,UAERG,WAAY,CACVH,KAAM,aAKdI,eAAgB,CACdC,KAAM,EAAGC,YAAO,CAEdC,OAAQ,aAAaD,EAAME,QAAQC,QAAQC,YAC3CC,aAAc,MAEd,MAAO,CACLJ,OAAQ,OACRI,aAAc,OAIlBC,QAAS,EAAGN,YAAO,CACjBO,SAAU,WACVC,eAAgB,SAEhB,CAACR,EAAMS,YAAYC,GAAG,OAAQ,CAC5BC,UAAW,OAEXC,QAAS,YAGX,CAACZ,EAAMS,YAAYI,KAAK,OAAQ,CAE9BC,SAAU,OAEVH,UAAW,IACXC,QAAS,cAIbG,OAAQ,EAAGf,YAAO,CAEhBgB,SAAU,IACVC,UAAW,UAERjB,EAAMkB,WAAWC,KAEpB,CAACnB,EAAMS,YAAYI,KAAK,OAAQ,CAE9BI,UAAW,OACXG,UAAW,YAIfC,YAAa,CACXC,OAAQ,KAGVC,MAAO,EAAGvB,YAAO,CACfsB,OAAQ,IACRV,QAAS,IACTP,aAAc,SACXL,EAAMkB,WAAWC,QACjBK,EAAkBxB,GAAO,EAAO,MAAO,iBAC1C,CAACA,EAAMS,YAAYC,GAAG,OAAQ,CAC5Be,WAAY,OAEd,uBAAwB,CACtBb,QAAS,sBAIbc,cAAe,EAAG1B,QAAO2B,iBAAY,CAEnCpB,SAAU,WAEVqB,MAAsD,IAA3CD,EAAW5D,eAAiB,GAAS,IAAzC,KAEP8D,MAAO,OACPT,UAAW,SACXU,WAAY,SAEZC,OAAQ,OACRC,QAAS,OACTC,WAAY,SACZzB,eAAgB,SAEhBc,OAAQ,IACRY,MAA8B,SAAvBlC,EAAME,QAAQiC,KAAkBnC,EAAME,QAAQkC,UAAUC,MAAQrC,EAAME,QAAQkC,UAAUE,MAC/FC,OAAQ,CACNL,MAAOlC,EAAME,QAAQsC,KAAKC,SAE5B,WAAY,CACVhB,WAAY,MACZH,OAAQ,SAGV,CAACtB,EAAMS,YAAYI,KAAK,OAAQ,CAE9B6B,OAAQ,MAERd,MAAO,IACPe,KAAM,IACNrB,OAAQ,YAIZvC,QAAS,EAAGiB,YAAO,CACjBsB,OAAQ,IACRU,QAAS,OACTC,WAAY,SACZzB,eAAgB,WAEhBQ,SAAU,IACV,qCAAsC,IAEZ,QAApBhB,EAAM4C,UAAsB,CAAEC,YAAa,QAAW,CAAEC,WAAY,SAG1E,CAAC9C,EAAMS,YAAYI,KAAK,OAAQ,CAE9BI,UAAW,OAEXT,eAAgB"}

package/materialui/tabs/Tab.d.ts CHANGED Viewed

@@ -5,4 +5,5 @@ import { ButtonBaseProps } from '@mui/material';
  */
 export declare const TabComponent: React.FC<ButtonBaseProps & {
     link?: boolean;
+    rovingTabIndex?: boolean;
 }>;

package/materialui/tabs/Tab.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{forwardRef as a,useMemo as t}from"react";import{ButtonBase as r,Box as l}from"@mui/material";const n=a(({children:a,link:n=!1,...o},s)=>{const c=t(()=>({display:"inherit",alignItems:"inherit",justifyContent:"inherit",flexDirection:"inherit",gap:"inherit"}),[]);return e(r,{ref:s,"aria-label":"navigation",...n&&{component:"a"},...o,tabIndex:o.className?.includes("Mui-disabled")?-1:0,children:i(l,{className:"FlowTab-labelWrapper",sx:{...c,position:"relative"},children:[e(l,{className:"FlowTab-label",sx:{...c,position:"absolute"},children:a}),e(l,{className:"FlowTab-selectedLabel",sx:{...c,fontWeight:"700",opacity:"0",position:"relative"},"aria-hidden":"true",children:a})]})})});export{n as TabComponent};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{forwardRef as t,useMemo as a}from"react";import{ButtonBase as r,Box as n}from"@mui/material";const l=t(({children:t,link:l=!1,rovingTabIndex:o=!1,...s},c)=>{const m=a(()=>({display:"inherit",alignItems:"inherit",justifyContent:"inherit",flexDirection:"inherit",gap:"inherit"}),[]);return e(r,{ref:c,...l&&{component:"a"},...s,...!o&&{tabIndex:s.className?.includes("Mui-disabled")?-1:0},children:i(n,{className:"FlowTab-labelWrapper",sx:{...m,position:"relative"},children:[e(n,{className:"FlowTab-label",sx:{...m,position:"absolute"},children:t}),e(n,{className:"FlowTab-selectedLabel",sx:{...m,fontWeight:"700",opacity:"0",position:"relative"},"aria-hidden":"true",children:t})]})})});export{l as TabComponent};
 //# sourceMappingURL=Tab.js.map

package/materialui/tabs/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../../../src/materialui/tabs/Tab.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/*\n Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const TabComponent: React.FC<ButtonBaseProps & { link?: boolean }> = forwardRef(\n ({ children, link = false, ...rest }, ref) => {\n // shared style between label and selectedLabel\n const sharedLabelSx = useMemo(\n () => ({\n display: 'inherit',\n alignItems: 'inherit',\n justifyContent: 'inherit',\n flexDirection: 'inherit',\n gap: 'inherit',\n }),\n [],\n );\n\n return (\n <ButtonBase\n ref={ref}\n ~~aria-label=\"navigation\"\n~~ {...(link && { component: 'a' })}\n {...rest}\n tabIndex={rest.className?.includes('Mui-disabled') ? -1 : 0}\n >\n <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n <Box\n className=\"FlowTab-label\"\n sx={{\n ...sharedLabelSx,\n position: 'absolute',\n // expands from center, can be changed to expand from left/right with left: 0;\n }}\n >\n {children}\n </Box>\n <Box\n className=\"FlowTab-selectedLabel\"\n sx={{\n ...sharedLabelSx,\n fontWeight: '700',\n // hidden by default, appears once Tab is selected (tab.theme)\n opacity: '0',\n position: 'relative',\n }}\n aria-hidden=\"true\"\n >\n {children}\n </Box>\n </Box>\n </ButtonBase>\n );\n },\n);\n"],"names":["TabComponent","forwardRef","children","link","rest","ref","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","component","tabIndex","className","includes","_jsxs","Box","sx","position","fontWeight","opacity"],"mappings":"~~4JAMaA~~,~~EAA+DC~~,~~EAC1E~~,EAAGC,WAAUC,QAAO,KAAUC,GAAQC,~~KAEpC~~,MAAMC,EAAgBC,EACpB,KAAA,CACEC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,YAEP,IAGF,OACEC,EAACC,EAAU,CACTT,IAAKA,~~EAAG~~,~~aACG,gBACNF,~~GAAQ,~~CAAEY~~,UAAW,QACtBX,~~EACJY~~,SAAUZ,EAAKa,WAAWC,SAAS,iBAAkB,EAAK,~~EAAChB~~,~~SAE3DiB~~,EAACC,EAAG,CAACH,UAAU,uBAAuBI,GAAI,IAAKf,EAAegB,SAAU,~~YAAYpB~~,SAAA,~~CAClFW~~,EAACO,~~EAAG~~,~~CACFH,~~UAAU,gBACVI,GAAI,IACCf,EACHgB,SAAU,~~YAEXpB~~,SAEAA,~~IAEHW~~,EAACO,EAAG,CACFH,UAAU,wBACVI,GAAI,IACCf,EACHiB,WAAY,MAEZC,QAAS,IACTF,SAAU,YACX,cACW,~~OAAMpB~~,SAEjBA"}
1	+ {"version":3,"file":"Tab.js","sources":["../../../src/materialui/tabs/Tab.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { Box, ButtonBase, ButtonBaseProps } from '@mui/material';\n\n/*\n Component used to render Tab, contains duplication of label to change font-weight without changing width\n */\nexport const TabComponent: React.FC<ButtonBaseProps & { link?: boolean; rovingTabIndex?: boolean }> = forwardRef(\n ({ children, link = false, rovingTabIndex = false, ...rest }, ref) => {\n // shared style between label and selectedLabel\n const sharedLabelSx = useMemo(\n () => ({\n display: 'inherit',\n alignItems: 'inherit',\n justifyContent: 'inherit',\n flexDirection: 'inherit',\n gap: 'inherit',\n }),\n [],\n );\n\n return (\n <ButtonBase\n ref={ref}\n {...(link && { component: 'a' })}\n {...rest}\n // every tab is a tab stop by default, tabs are also used as navigation links\n {...(!rovingTabIndex && { tabIndex: rest.className?.includes('Mui-disabled') ? -1 : 0 })}\n >\n <Box className=\"FlowTab-labelWrapper\" sx={{ ...sharedLabelSx, position: 'relative' }}>\n <Box\n className=\"FlowTab-label\"\n sx={{\n ...sharedLabelSx,\n position: 'absolute',\n // expands from center, can be changed to expand from left/right with left: 0;\n }}\n >\n {children}\n </Box>\n <Box\n className=\"FlowTab-selectedLabel\"\n sx={{\n ...sharedLabelSx,\n fontWeight: '700',\n // hidden by default, appears once Tab is selected (tab.theme)\n opacity: '0',\n position: 'relative',\n }}\n aria-hidden=\"true\"\n >\n {children}\n </Box>\n </Box>\n </ButtonBase>\n );\n },\n);\n"],"names":["TabComponent","forwardRef","children","link","rovingTabIndex","rest","ref","sharedLabelSx","useMemo","display","alignItems","justifyContent","flexDirection","gap","_jsx","ButtonBase","component","tabIndex","className","includes","_jsxs","Box","sx","position","fontWeight","opacity"],"mappings":"sJAMO,MAAMA,EAAyFC,EACpG,EAAGC,WAAUC,QAAO,EAAOC,kBAAiB,KAAUC,GAAQC,KAE5D,MAAMC,EAAgBC,EACpB,KAAA,CACEC,QAAS,UACTC,WAAY,UACZC,eAAgB,UAChBC,cAAe,UACfC,IAAK,YAEP,IAGF,OACEC,EAACC,EAAU,CACTT,IAAKA,KACAH,GAAQ,CAAEa,UAAW,QACtBX,MAEED,GAAkB,CAAEa,SAAUZ,EAAKa,WAAWC,SAAS,iBAAkB,EAAK,GAAIjB,SAExFkB,EAACC,EAAG,CAACH,UAAU,uBAAuBI,GAAI,IAAKf,EAAegB,SAAU,YAAYrB,SAAA,CAClFY,EAACO,GACCH,UAAU,gBACVI,GAAI,IACCf,EACHgB,SAAU,YAEXrB,SAEAA,IAEHY,EAACO,EAAG,CACFH,UAAU,wBACVI,GAAI,IACCf,EACHiB,WAAY,MAEZC,QAAS,IACTF,SAAU,YACX,cACW,OAAMrB,SAEjBA"}

package/materialui/tabs/TabsScrollButton.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 /**
  * This component renders a scroll button that changes based on the scroll direction
  */
-export declare const TabsScrollButton: ({ direction, slots, slotProps, ownerState, ...rest }: {
+export declare const TabsScrollButton: ({ direction, slots, slotProps, ownerState, scrollLeftTitle, scrollRightTitle, ...rest }: {
     [x: string]: any;
     direction: any;
     slots: any;
     slotProps: any;
     ownerState: any;
+    scrollLeftTitle?: string;
+    scrollRightTitle?: string;
 }) => import("react").JSX.Element;

package/materialui/tabs/TabsScrollButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{IconButton as t}from"@mui/material";import{ChevronLeftIcon as r}from"../../components/icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as e}from"../../components/icon/stroke/ChevronRightIcon.js";const i=({direction:i,slots:l,slotProps:s,ownerState:n,...m})=>o(t,{"aria-label":"left"===i?"Scroll left":"Scroll right","data-testid":`TabsScrollButton-${i}`,size:"small",sx:{m:"4px"},...m,children:o("left"===i?r:e,{})});export{i as TabsScrollButton};
+import{jsx as o}from"react/jsx-runtime";import{IconButton as t}from"@mui/material";import{ChevronLeftIcon as r}from"../../components/icon/stroke/ChevronLeftIcon.js";import{ChevronRightIcon as e}from"../../components/icon/stroke/ChevronRightIcon.js";const l=({direction:l,slots:i,slotProps:s,ownerState:n,scrollLeftTitle:c="Scroll left",scrollRightTitle:m="Scroll right",...a})=>o(t,{"aria-label":"left"===l?c:m,"data-testid":`TabsScrollButton-${l}`,size:"small",sx:{m:"4px"},...a,children:o("left"===l?r:e,{})});export{l as TabsScrollButton};
 //# sourceMappingURL=TabsScrollButton.js.map

package/materialui/tabs/TabsScrollButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsScrollButton.js","sources":["../../../src/materialui/tabs/TabsScrollButton.tsx"],"sourcesContent":["import { IconButton } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/*\n This component renders a scroll button that changes based on the scroll direction\n */\nexport const TabsScrollButton = ({ direction, slots, slotProps, ownerState, ...rest }) => {\n return (\n <IconButton\n aria-label={direction === 'left' ? ~~'Scroll~~ ~~left'~~ : ~~'Scroll right'~~}\n data-testid={`TabsScrollButton-${direction}`}\n size=\"small\"\n sx={{ m: '4px' }}\n {...rest}\n >\n {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n </IconButton>\n );\n};\n"],"names":["TabsScrollButton","direction","slots","slotProps","ownerState","rest","_jsx","IconButton","size","sx","m","children","ChevronLeftIcon","ChevronRightIcon"],"mappings":"yPAOO,MAAMA,EAAmB,~~EAAGC~~,~~YAAWC~~,~~QAAOC~~,~~YAAWC~~,~~gBAAeC~~,~~KAE3EC~~,EAACC,EAAU,CAAA,aACiB,~~SAAdN~~,~~EAAuB~~,~~cAAgB~~,~~eAAc~~,~~cACpD~~,~~oBAAoBA~~,~~IACjCO~~,KAAK,QACLC,GAAI,CAAEC,EAAG,UACLL,EAAIM,SAEgBL,EAAT,~~SAAdL~~,~~EAAwBW~~,EAAsBC,EAAP,CAAA"}
1	+ {"version":3,"file":"TabsScrollButton.js","sources":["../../../src/materialui/tabs/TabsScrollButton.tsx"],"sourcesContent":["import { IconButton } from '@mui/material';\nimport { ChevronLeftIcon } from '@/src/components/icon/stroke/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/src/components/icon/stroke/ChevronRightIcon';\n\n/*\n This component renders a scroll button that changes based on the scroll direction\n */\nexport const TabsScrollButton = ({\n direction,\n slots,\n slotProps,\n ownerState,\n scrollLeftTitle = 'Scroll left',\n scrollRightTitle = 'Scroll right',\n ...rest\n}) => {\n return (\n <IconButton\n aria-label={direction === 'left' ? scrollLeftTitle : scrollRightTitle}\n data-testid={`TabsScrollButton-${direction}`}\n size=\"small\"\n sx={{ m: '4px' }}\n {...rest}\n >\n {direction === 'left' ? <ChevronLeftIcon /> : <ChevronRightIcon />}\n </IconButton>\n );\n};\n"],"names":["TabsScrollButton","direction","slots","slotProps","ownerState","scrollLeftTitle","scrollRightTitle","rest","_jsx","IconButton","size","sx","m","children","ChevronLeftIcon","ChevronRightIcon"],"mappings":"yPAOO,MAAMA,EAAmB,EAC9BC,YACAC,QACAC,YACAC,aACAC,kBAAkB,cAClBC,mBAAmB,kBAChBC,KAGDC,EAACC,EAAU,CAAA,aACiB,SAAdR,EAAuBI,EAAkBC,EAAgB,cACxD,oBAAoBL,IACjCS,KAAK,QACLC,GAAI,CAAEC,EAAG,UACLL,EAAIM,SAEgBL,EAAT,SAAdP,EAAwBa,EAAsBC,EAAP,CAAA"}

package/materialui/textfield/FormControl.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useImperativeHandle as n,useState as t}from"react";import{Box as c}from"@mui/material";const i=r(({onFocus:r,onBlur:i,onPointerDown:u,className:a,...l},s)=>{const m=o(null);n(s,()=>m.current);const w=o(null),[D,P]=t(!1);return e(c,{ref:m,onPointerDown:e=>{w.current="onPointerDown",u?.(e)},onFocus:e=>{["onFocus","onPointerDown"].includes(w.current)||P(!0),w.current="onFocus",r?.(e)},onBlur:e=>{"onPointerDown"===w.current||m?.current?.matches?.(':has(.MuiSelect-select[aria-expanded="true"])')||e?.relatedTarget?.matches?.(".MuiSelect-select")||e?.relatedTarget?.matches?.('[class^="MuiPickers"]')||e?.relatedTarget?.matches?.(".MuiMultiSectionDigitalClockSection-item")?w.current="onPointerDown":(P(!1),w.current="onBlur"),i?.(e)},className:[a,D?"":"Flow-NoFocusRing"].filter(Boolean).join(" "),...l})});export{i as FormControl};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,useRef as r,useState as n}from"react";import{useForkRef as t,Box as c}from"@mui/material";const i=o(({onFocus:o,onBlur:i,onPointerDown:u,className:a,...l},s)=>{const m=r(null),w=t(s,m),D=r(null),[P,d]=n(!1);return e(c,{ref:w,onPointerDown:e=>{D.current="onPointerDown",u?.(e)},onFocus:e=>{["onFocus","onPointerDown"].includes(D.current)||d(!0),D.current="onFocus",o?.(e)},onBlur:e=>{"onPointerDown"===D.current||m?.current?.matches?.(':has(.MuiSelect-select[aria-expanded="true"])')||e?.relatedTarget?.matches?.(".MuiSelect-select")||e?.relatedTarget?.matches?.('[class^="MuiPickers"]')||e?.relatedTarget?.matches?.(".MuiMultiSectionDigitalClockSection-item")?D.current="onPointerDown":(d(!1),D.current="onBlur"),i?.(e)},className:[a,P?"":"Flow-NoFocusRing"].filter(Boolean).join(" "),...l})});export{i as FormControl};
 //# sourceMappingURL=FormControl.js.map

package/materialui/textfield/FormControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.js","sources":["../../../src/materialui/textfield/FormControl.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, useRef, ~~useImperativeHandle~~ } from 'react';\nimport { Box, FormControlProps } from '@mui/material';\n\n/*\n Custom extension of FormControl component to show FocusRing only with Tab focus\n */\nexport const FormControl: FC<FormControlProps> = forwardRef(\n ({ onFocus, onBlur, onPointerDown, className, ...rest }, forwardedRef) => {\n const ref = useRef<HTMLDivElement>(null);\n ~~useImperativeHandle~~(forwardedRef, ~~() =>~~ ref~~.current~~);\n // detect events to skip focus ring\n const previousEvent = useRef<string \| null>(null);\n // append style with focus ring\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n return (\n <Box\n ref={~~ref~~}\n onPointerDown={(e) => {\n previousEvent.current = 'onPointerDown';\n onPointerDown?.(e);\n }}\n onFocus={(e) => {\n if (!['onFocus', 'onPointerDown'].includes(previousEvent.current)) {\n // if not clicked or repeated event, we will show focus ring (force rerender to update class)\n setFocusVisible(true);\n }\n previousEvent.current = 'onFocus';\n onFocus?.(e);\n }}\n onBlur={(e) => {\n // perform cleanup\n if (\n // skip cleanup as onPointerDown might happen after onFocus\n previousEvent.current !== 'onPointerDown' &&\n // focus is not in opened select\n !ref?.current?.matches?.(':has(.MuiSelect-select[aria-expanded=\"true\"])') &&\n // blur does not come from the opened select and now goes into select\n !e?.relatedTarget?.matches?.('.MuiSelect-select') &&\n // blur does not come from datepicker\n !e?.relatedTarget?.matches?.('[class^=\"MuiPickers\"]') &&\n // blur does not come form timepicker\n !e?.relatedTarget?.matches?.('.MuiMultiSectionDigitalClockSection-item')\n ) {\n // cleanup with blur\n setFocusVisible(false);\n previousEvent.current = 'onBlur';\n } else {\n // act with skip that click just happened\n previousEvent.current = 'onPointerDown';\n }\n onBlur?.(e);\n }}\n className={[\n className,\n // we are utilizing class to support <FormControl component='div' /> fallback to always show focus ring\n focusVisible ? '' : 'Flow-NoFocusRing',\n ]\n .filter(Boolean)\n .join(' ')}\n {...rest}\n />\n );\n },\n);\n"],"names":["FormControl","forwardRef","onFocus","onBlur","onPointerDown","className","rest","forwardedRef","ref","useRef","~~useImperativeHandle~~","~~current~~","previousEvent","focusVisible","setFocusVisible","useState","_jsx","Box","e","includes","matches","relatedTarget","filter","Boolean","join"],"mappings":"~~wKAMaA~~,EAAoCC,EAC/C,EAAGC,UAASC,SAAQC,gBAAeC,eAAcC,GAAQC,KACvD,MAAMC,EAAMC,EAAuB,~~MACnCC~~,~~EAAoBH~~,~~EAAc~~,~~IAAMC~~,~~EAAIG~~,~~SAE5C,MAAMC,~~EAAgBH,EAAsB,OAErCI,EAAcC,GAAmBC,GAAkB,GAE1D,OACEC,EAACC,EAAG,CACFT,~~IAAKA~~,~~EACLJ~~,cAAgBc,IACdN,~~EAAcD~~,QAAU,~~gBACxBP~~,IAAgBc,IAElBhB,QAAUgB,IACH,CAAC,UAAW,~~iBAAiBC~~,~~SAASP~~,~~EAAcD~~,~~UAEvDG~~,GAAgB,GAElBF,~~EAAcD~~,QAAU,~~UACxBT~~,IAAUgB,IAEZf,OAASe,IAIqB,kBAA1BN,~~EAAcD~~,~~SAEbH~~,~~GAAKG~~,~~SAASS~~,UAAU,~~kDAExBF~~,~~GAAGG~~,eAAeD,UAAU,~~sBAE5BF~~,~~GAAGG~~,eAAeD,UAAU,~~0BAE5BF~~,~~GAAGG~~,eAAeD,UAAU,~~4CAO7BR~~,~~EAAcD~~,QAAU,~~iBAJxBG~~,GAAgB,GAChBF,~~EAAcD~~,QAAU,~~UAK1BR~~,IAASe,IAEXb,UAAW,CACTA,EAEAQ,EAAe,GAAK,~~oBAEnBS~~,OAAOC,SACPC,KAAK,~~QACJlB~~"}
1	+ {"version":3,"file":"FormControl.js","sources":["../../../src/materialui/textfield/FormControl.tsx"],"sourcesContent":["import React, { FC, useState, forwardRef, useRef } from 'react';\nimport { Box, FormControlProps, useForkRef } from '@mui/material';\n\n/*\n Custom extension of FormControl component to show FocusRing only with Tab focus\n */\nexport const FormControl: FC<FormControlProps> = forwardRef(\n ({ onFocus, onBlur, onPointerDown, className, ...rest }, forwardedRef) => {\n const ref = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(forwardedRef, ref);\n // detect events to skip focus ring\n const previousEvent = useRef<string \| null>(null);\n // append style with focus ring\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n return (\n <Box\n ref={handleRef}\n onPointerDown={(e) => {\n previousEvent.current = 'onPointerDown';\n onPointerDown?.(e);\n }}\n onFocus={(e) => {\n if (!['onFocus', 'onPointerDown'].includes(previousEvent.current)) {\n // if not clicked or repeated event, we will show focus ring (force rerender to update class)\n setFocusVisible(true);\n }\n previousEvent.current = 'onFocus';\n onFocus?.(e);\n }}\n onBlur={(e) => {\n // perform cleanup\n if (\n // skip cleanup as onPointerDown might happen after onFocus\n previousEvent.current !== 'onPointerDown' &&\n // focus is not in opened select\n !ref?.current?.matches?.(':has(.MuiSelect-select[aria-expanded=\"true\"])') &&\n // blur does not come from the opened select and now goes into select\n !e?.relatedTarget?.matches?.('.MuiSelect-select') &&\n // blur does not come from datepicker\n !e?.relatedTarget?.matches?.('[class^=\"MuiPickers\"]') &&\n // blur does not come form timepicker\n !e?.relatedTarget?.matches?.('.MuiMultiSectionDigitalClockSection-item')\n ) {\n // cleanup with blur\n setFocusVisible(false);\n previousEvent.current = 'onBlur';\n } else {\n // act with skip that click just happened\n previousEvent.current = 'onPointerDown';\n }\n onBlur?.(e);\n }}\n className={[\n className,\n // we are utilizing class to support <FormControl component='div' /> fallback to always show focus ring\n focusVisible ? '' : 'Flow-NoFocusRing',\n ]\n .filter(Boolean)\n .join(' ')}\n {...rest}\n />\n );\n },\n);\n"],"names":["FormControl","forwardRef","onFocus","onBlur","onPointerDown","className","rest","forwardedRef","ref","useRef","handleRef","useForkRef","previousEvent","focusVisible","setFocusVisible","useState","_jsx","Box","e","current","includes","matches","relatedTarget","filter","Boolean","join"],"mappings":"+JAMaA,EAAoCC,EAC/C,EAAGC,UAASC,SAAQC,gBAAeC,eAAcC,GAAQC,KACvD,MAAMC,EAAMC,EAAuB,MAC7BC,EAAYC,EAAWJ,EAAcC,GAErCI,EAAgBH,EAAsB,OAErCI,EAAcC,GAAmBC,GAAkB,GAE1D,OACEC,EAACC,EAAG,CACFT,IAAKE,EACLN,cAAgBc,IACdN,EAAcO,QAAU,gBACxBf,IAAgBc,IAElBhB,QAAUgB,IACH,CAAC,UAAW,iBAAiBE,SAASR,EAAcO,UAEvDL,GAAgB,GAElBF,EAAcO,QAAU,UACxBjB,IAAUgB,IAEZf,OAASe,IAIqB,kBAA1BN,EAAcO,SAEbX,GAAKW,SAASE,UAAU,kDAExBH,GAAGI,eAAeD,UAAU,sBAE5BH,GAAGI,eAAeD,UAAU,0BAE5BH,GAAGI,eAAeD,UAAU,4CAO7BT,EAAcO,QAAU,iBAJxBL,GAAgB,GAChBF,EAAcO,QAAU,UAK1BhB,IAASe,IAEXb,UAAW,CACTA,EAEAQ,EAAe,GAAK,oBAEnBU,OAAOC,SACPC,KAAK,QACJnB"}

package/materialui/textfield/FormHelperText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useImperativeHandle as l,useState as n}from"react";import{Tooltip as i,Box as s,ButtonBase as a}from"@mui/material";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";import{WarningFilledIcon as m}from"../../components/icon/filled/WarningFilledIcon.js";import{useElementScrollable as p}from"../../utils/useElementScrollable/useElementScrollable.js";import{getFocusRingStyle as x}from"../../components/focusring/focusring.js";const d=t(({children:t,sx:d,className:u,truncate:f,...h},b)=>{const w=o(null);l(b,()=>w.current);const[,g]=n(0),{isScrollable:v,elementRef:j}=p("x",e=>g(e?.offsetWidth||0)),F=u?.includes("Mui-error")&&!1!==f&&(v||!!w?.current?.querySelector(".Flow-scrollable"));return e(i,{title:t,placement:"bottom-start",slotProps:{tooltip:{sx:{maxWidth:w?.current?.getBoundingClientRect()?.width?w.current.getBoundingClientRect().width-24+"px":"398px","& .FlowHelperTextContent-textRight":{display:"none"}}},arrow:{sx:{transform:"none !important",left:"17px !important"}}},...!F&&{open:!1},children:r(s,{component:"p",className:u,sx:d,...u?.includes("Mui-error")&&{role:"alert",sx:c({"&&":{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",...!1!==f&&{overflow:"visible"}}},d)},ref:w,...h,children:[u?.includes("Mui-error")&&e(a,{sx:e=>({cursor:"default",borderRadius:"1px",ml:"2px",mr:"4px",...x(e,!0,"0px")}),"aria-label":"Error",className:"FlowHelperText-error-button-active",...!F&&{tabIndex:-1,className:"FlowHelperText-error-button"},children:e(m,{sx:{fontSize:"17px"}})}),e(s,{sx:{display:"block",overflow:!1!==f?"hidden":"inherit",textOverflow:"inherit",whiteSpace:"inherit",flexGrow:"1"},component:"span","data-testid":"FormHelperText-content",ref:j,children:t})]})},F?"long-error-message":"disabled-tooltip")});export{d as FormHelperText};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useState as l}from"react";import{useForkRef as i,Tooltip as n,Box as s,ButtonBase as a}from"@mui/material";import{sxOverride as c}from"../../utils/sxOverride/sxOverride.js";import{WarningFilledIcon as m}from"../../components/icon/filled/WarningFilledIcon.js";import{useElementScrollable as p}from"../../utils/useElementScrollable/useElementScrollable.js";import{getFocusRingStyle as d}from"../../components/focusring/focusring.js";const x=t(({children:t,sx:x,className:u,truncate:f,...h},b)=>{const w=o(null),g=i(b,w),[,v]=l(0),{isScrollable:j,elementRef:F}=p("x",e=>v(e?.offsetWidth||0)),S=u?.includes("Mui-error")&&!1!==f&&(j||!!w?.current?.querySelector(".Flow-scrollable"));return e(n,{title:t,placement:"bottom-start",slotProps:{tooltip:{sx:{maxWidth:w?.current?.getBoundingClientRect()?.width?w.current.getBoundingClientRect().width-24+"px":"398px","& .FlowHelperTextContent-textRight":{display:"none"}}},arrow:{sx:{transform:"none !important",left:"17px !important"}}},...!S&&{open:!1},children:r(s,{component:"p",className:u,sx:x,...u?.includes("Mui-error")&&{role:"alert",sx:c({"&&":{display:"flex",alignItems:"flex-start",justifyContent:"flex-start",...!1!==f&&{overflow:"visible"}}},x)},ref:g,...h,children:[u?.includes("Mui-error")&&e(a,{sx:e=>({cursor:"default",borderRadius:"1px",ml:"2px",mr:"4px",...d(e,!0,"0px")}),"aria-label":"Error",className:"FlowHelperText-error-button-active",...!S&&{tabIndex:-1,"aria-hidden":!0,className:"FlowHelperText-error-button"},children:e(m,{sx:{fontSize:"17px"}})}),e(s,{sx:{display:"block",overflow:!1!==f?"hidden":"inherit",textOverflow:"inherit",whiteSpace:"inherit",flexGrow:"1"},component:"span","data-testid":"FormHelperText-content",ref:F,children:t})]})},S?"long-error-message":"disabled-tooltip")});export{x as FormHelperText};
 //# sourceMappingURL=FormHelperText.js.map

package/materialui/textfield/FormHelperText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormHelperText.js","sources":["../../../src/materialui/textfield/FormHelperText.tsx"],"sourcesContent":["import React, { FC, forwardRef, ~~useImperativeHandle,~~ useRef, useState } from 'react';\nimport { Box, FormHelperTextProps, Tooltip, ButtonBase } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingStyle } from '@/src/components/focusring';\n\n/*\n Custom extension of FormHelperText component to add interactive error icon\n */\nexport const FormHelperText: FC<FormHelperTextProps> = forwardRef(\n ({ children, sx, className, truncate, ...rest }, forwardedRef) => {\n const ref = useRef<HTMLParagraphElement>(null);\n ~~useImperativeHandle~~(forwardedRef, ~~() =>~~ ref~~.current~~);\n // changing width triggers re-render and updates max-width of tooltip that uses parent\n const [, setWidth] = useState(0);\n const { isScrollable, elementRef } = useElementScrollable('x', (el) => setWidth(el?.offsetWidth \|\| 0));\n const tooltipActive =\n // contains error\n className?.includes('Mui-error') &&\n // we are truncating\n truncate !== false &&\n // HelperText or HelperTextContent scrollable\n (isScrollable \|\| !!ref?.current?.querySelector('.Flow-scrollable'));\n\n return (\n <Tooltip\n title={children}\n placement=\"bottom-start\"\n slotProps={{\n tooltip: {\n sx: {\n // match size of helper text\n maxWidth: ref?.current?.getBoundingClientRect()?.width\n ? `${ref.current.getBoundingClientRect().width - 24}px`\n : '398px',\n // hide right side of HelperTextContent\n '& .FlowHelperTextContent-textRight': {\n display: 'none',\n },\n },\n },\n arrow: {\n sx: {\n // remove default transform\n transform: 'none !important',\n // align with icon\n left: '17px !important',\n },\n },\n }}\n key={tooltipActive ? 'long-error-message' : 'disabled-tooltip'}\n {...(!tooltipActive && {\n open: false,\n })}\n >\n <Box\n component=\"p\"\n className={className}\n sx={sx}\n {...(className?.includes('Mui-error') && {\n role: 'alert',\n sx: sxOverride(\n {\n '&&': {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n ...(truncate !== false && {\n // make sure interactive FocusRing from error is visible\n overflow: 'visible',\n }),\n },\n },\n sx,\n ),\n })}\n ref={~~ref~~}\n {...rest}\n >\n {className?.includes('Mui-error') && (\n <ButtonBase\n sx={(theme) => ({\n cursor: 'default',\n borderRadius: '1px',\n ml: '2px',\n mr: '4px',\n ...getFocusRingStyle(theme, true, '0px'),\n })}\n aria-label=\"Error\"\n className=\"FlowHelperText-error-button-active\"\n {...(!tooltipActive && { tabIndex: -1, className: 'FlowHelperText-error-button' })}\n >\n <WarningFilledIcon sx={{ fontSize: '17px' }} />\n </ButtonBase>\n )}\n <Box\n sx={{\n display: 'block',\n overflow: truncate !== false ? 'hidden' : 'inherit',\n textOverflow: 'inherit',\n whiteSpace: 'inherit',\n flexGrow: '1',\n }}\n component=\"span\"\n data-testid=\"FormHelperText-content\"\n ref={elementRef}\n >\n {children}\n </Box>\n </Box>\n </Tooltip>\n );\n },\n);\n"],"names":["FormHelperText","forwardRef","children","sx","className","truncate","rest","forwardedRef","ref","useRef","~~useImperativeHandle~~","~~current~~","setWidth","useState","isScrollable","elementRef","useElementScrollable","el","offsetWidth","tooltipActive","includes","querySelector","_jsx","Tooltip","title","placement","slotProps","tooltip","maxWidth","getBoundingClientRect","width","display","arrow","transform","left","open","_jsxs","Box","component","role","sxOverride","alignItems","justifyContent","overflow","ButtonBase","theme","cursor","borderRadius","ml","mr","getFocusRingStyle","tabIndex","WarningFilledIcon","fontSize","textOverflow","whiteSpace","flexGrow"],"mappings":"~~mhBAUaA~~,EAA0CC,EACrD,EAAGC,WAAUC,KAAIC,YAAWC,cAAaC,GAAQC,KAC/C,MAAMC,EAAMC,EAA6B,~~MACzCC~~,~~EAAoBH~~,~~EAAc~~,~~IAAMC~~,~~EAAIG~~,~~SAE5C,OAASC,~~GAAYC,EAAS,IACxBC,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,IAAMC,GAAOL,EAASK,GAAIC,aAAe,IAC7FC,EAEJf,GAAWgB,SAAS,eAEP,IAAbf,IAECS,KAAkBN,~~GAAKG~~,~~SAASU~~,cAAc,qBAEjD,OACEC,EAACC,EAAO,CACNC,~~MAAOtB~~,~~EACPuB~~,UAAU,eACVC,UAAW,CACTC,QAAS,~~CACPxB~~,GAAI,~~CAEFyB~~,~~SAAUpB~~,~~GAAKG~~,~~SAASkB~~,yBAAyBC,~~MAC1CtB~~,~~EAAIG~~,~~QAAQkB~~,wBAAwBC,MAAQ,GAA/C,KACA,QAEJ,qCAAsC,CACpCC,QAAS,UAIfC,MAAO,~~CACL7B~~,GAAI,~~CAEF8B~~,UAAW,kBAEXC,KAAM,~~yBAKNf~~,GAAiB,~~CACrBgB~~,MAAM,~~GACNjC~~,~~SAEFkC~~,EAACC,EAAG,CACFC,UAAU,~~IACVlC~~,UAAWA,EACXD,GAAIA,KACCC,GAAWgB,SAAS,cAAgB,~~CACvCmB~~,KAAM,~~QACNpC~~,~~GAAIqC~~,EACF,CACE,KAAM,CACJT,QAAS,OACTU,WAAY,aACZC,eAAgB,iBACC,~~IAAbrC~~,GAAsB,~~CAExBsC~~,SAAU,~~aAIhBxC~~,IAGJK,~~IAAKA~~,~~KACDF~~,EAAIJ,SAAA,CAEPE,GAAWgB,SAAS,~~cACnBE~~,EAACsB,EAAU,~~CACTzC~~,~~GAAK0C~~,IAAK,CACRC,OAAQ,UACRC,aAAc,MACdC,GAAI,MACJC,GAAI,SACDC,EAAkBL,GAAO,EAAM,~~sBAEzB~~,~~QACXzC~~,UAAU,~~yCACJe~~,GAAiB,~~CAAEgC~~,UAAU,EAAI/C,UAAW,~~wCAElDkB~~,EAAC8B,~~GAAkBjD~~,GAAI,~~CAAEkD~~,SAAU,YAGvC/B,EAACe,EAAG,~~CACFlC~~,GAAI,~~CACF4B~~,QAAS,QACTY,UAAuB,~~IAAbtC~~,EAAqB,SAAW,~~UAC1CiD~~,aAAc,UACdC,WAAY,UACZC,SAAU,KAEZlB,UAAU,OAAM,cACJ,~~yBACZ9B~~,IAAKO,EAAUb,SAEdA,~~QAzDAiB~~,EAAgB,qBAAuB"}
1	+ {"version":3,"file":"FormHelperText.js","sources":["../../../src/materialui/textfield/FormHelperText.tsx"],"sourcesContent":["import React, { FC, forwardRef, useRef, useState } from 'react';\nimport { Box, FormHelperTextProps, Tooltip, ButtonBase, useForkRef } from '@mui/material';\nimport { sxOverride } from '@/src/utils/sxOverride';\nimport { WarningFilledIcon } from '@/src/components/icon/filled/WarningFilledIcon';\nimport { useElementScrollable } from '@/src/utils/useElementScrollable';\nimport { getFocusRingStyle } from '@/src/components/focusring';\n\n/*\n Custom extension of FormHelperText component to add interactive error icon\n */\nexport const FormHelperText: FC<FormHelperTextProps> = forwardRef(\n ({ children, sx, className, truncate, ...rest }, forwardedRef) => {\n const ref = useRef<HTMLParagraphElement>(null);\n const handleRef = useForkRef(forwardedRef, ref);\n // changing width triggers re-render and updates max-width of tooltip that uses parent\n const [, setWidth] = useState(0);\n const { isScrollable, elementRef } = useElementScrollable('x', (el) => setWidth(el?.offsetWidth \|\| 0));\n const tooltipActive =\n // contains error\n className?.includes('Mui-error') &&\n // we are truncating\n truncate !== false &&\n // HelperText or HelperTextContent scrollable\n (isScrollable \|\| !!ref?.current?.querySelector('.Flow-scrollable'));\n\n return (\n <Tooltip\n title={children}\n placement=\"bottom-start\"\n slotProps={{\n tooltip: {\n sx: {\n // match size of helper text\n maxWidth: ref?.current?.getBoundingClientRect()?.width\n ? `${ref.current.getBoundingClientRect().width - 24}px`\n : '398px',\n // hide right side of HelperTextContent\n '& .FlowHelperTextContent-textRight': {\n display: 'none',\n },\n },\n },\n arrow: {\n sx: {\n // remove default transform\n transform: 'none !important',\n // align with icon\n left: '17px !important',\n },\n },\n }}\n key={tooltipActive ? 'long-error-message' : 'disabled-tooltip'}\n {...(!tooltipActive && {\n open: false,\n })}\n >\n <Box\n component=\"p\"\n className={className}\n sx={sx}\n {...(className?.includes('Mui-error') && {\n role: 'alert',\n sx: sxOverride(\n {\n '&&': {\n display: 'flex',\n alignItems: 'flex-start',\n justifyContent: 'flex-start',\n ...(truncate !== false && {\n // make sure interactive FocusRing from error is visible\n overflow: 'visible',\n }),\n },\n },\n sx,\n ),\n })}\n ref={handleRef}\n {...rest}\n >\n {className?.includes('Mui-error') && (\n <ButtonBase\n sx={(theme) => ({\n cursor: 'default',\n borderRadius: '1px',\n ml: '2px',\n mr: '4px',\n ...getFocusRingStyle(theme, true, '0px'),\n })}\n aria-label=\"Error\"\n className=\"FlowHelperText-error-button-active\"\n // without the tooltip the icon is decorative, the message itself is announced by role=\"alert\"\n {...(!tooltipActive && { tabIndex: -1, 'aria-hidden': true, className: 'FlowHelperText-error-button' })}\n >\n <WarningFilledIcon sx={{ fontSize: '17px' }} />\n </ButtonBase>\n )}\n <Box\n sx={{\n display: 'block',\n overflow: truncate !== false ? 'hidden' : 'inherit',\n textOverflow: 'inherit',\n whiteSpace: 'inherit',\n flexGrow: '1',\n }}\n component=\"span\"\n data-testid=\"FormHelperText-content\"\n ref={elementRef}\n >\n {children}\n </Box>\n </Box>\n </Tooltip>\n );\n },\n);\n"],"names":["FormHelperText","forwardRef","children","sx","className","truncate","rest","forwardedRef","ref","useRef","handleRef","useForkRef","setWidth","useState","isScrollable","elementRef","useElementScrollable","el","offsetWidth","tooltipActive","includes","current","querySelector","_jsx","Tooltip","title","placement","slotProps","tooltip","maxWidth","getBoundingClientRect","width","display","arrow","transform","left","open","_jsxs","Box","component","role","sxOverride","alignItems","justifyContent","overflow","ButtonBase","theme","cursor","borderRadius","ml","mr","getFocusRingStyle","tabIndex","WarningFilledIcon","fontSize","textOverflow","whiteSpace","flexGrow"],"mappings":"0gBAUaA,EAA0CC,EACrD,EAAGC,WAAUC,KAAIC,YAAWC,cAAaC,GAAQC,KAC/C,MAAMC,EAAMC,EAA6B,MACnCC,EAAYC,EAAWJ,EAAcC,KAElCI,GAAYC,EAAS,IACxBC,aAAEA,EAAYC,WAAEA,GAAeC,EAAqB,IAAMC,GAAOL,EAASK,GAAIC,aAAe,IAC7FC,EAEJf,GAAWgB,SAAS,eAEP,IAAbf,IAECS,KAAkBN,GAAKa,SAASC,cAAc,qBAEjD,OACEC,EAACC,EAAO,CACNC,MAAOvB,EACPwB,UAAU,eACVC,UAAW,CACTC,QAAS,CACPzB,GAAI,CAEF0B,SAAUrB,GAAKa,SAASS,yBAAyBC,MAC1CvB,EAAIa,QAAQS,wBAAwBC,MAAQ,GAA/C,KACA,QAEJ,qCAAsC,CACpCC,QAAS,UAIfC,MAAO,CACL9B,GAAI,CAEF+B,UAAW,kBAEXC,KAAM,yBAKNhB,GAAiB,CACrBiB,MAAM,GACNlC,SAEFmC,EAACC,EAAG,CACFC,UAAU,IACVnC,UAAWA,EACXD,GAAIA,KACCC,GAAWgB,SAAS,cAAgB,CACvCoB,KAAM,QACNrC,GAAIsC,EACF,CACE,KAAM,CACJT,QAAS,OACTU,WAAY,aACZC,eAAgB,iBACC,IAAbtC,GAAsB,CAExBuC,SAAU,aAIhBzC,IAGJK,IAAKE,KACDJ,EAAIJ,SAAA,CAEPE,GAAWgB,SAAS,cACnBG,EAACsB,EAAU,CACT1C,GAAK2C,IAAK,CACRC,OAAQ,UACRC,aAAc,MACdC,GAAI,MACJC,GAAI,SACDC,EAAkBL,GAAO,EAAM,SAClC,aACS,QACX1C,UAAU,yCAEJe,GAAiB,CAAEiC,UAAU,EAAI,eAAe,EAAMhD,UAAW,+BAAgCF,SAEvGqB,EAAC8B,EAAiB,CAAClD,GAAI,CAAEmD,SAAU,YAGvC/B,EAACe,EAAG,CACFnC,GAAI,CACF6B,QAAS,QACTY,UAAuB,IAAbvC,EAAqB,SAAW,UAC1CkD,aAAc,UACdC,WAAY,UACZC,SAAU,KAEZlB,UAAU,OAAM,cACJ,yBACZ/B,IAAKO,EAAUb,SAEdA,QA1DAiB,EAAgB,qBAAuB"}

package/materialui/theme/sxConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sxConfig.js","sources":["../../../src/materialui/theme/sxConfig.ts"],"sourcesContent":["import { unstable_defaultSxConfig as defaultSxConfig, SxConfig } from '@mui/system';\n\n/*\n When a palette group object (e.g. `palette.transparent`) is resolved instead of a string,\n * fall back to the original user value so CSS keywords like `'transparent'` pass through as-is.\n * Preserves MUI's built-in grey fallback behaviour.\n * https://github.com/mui/material-ui/blob/master/packages/mui-system/src/palette/palette.js\n */\nconst paletteColorTransform = (value: unknown, userValue: unknown): unknown => {\n if (userValue === 'grey') return userValue;\n if (typeof value === 'object' && value !== null) return userValue;\n return value;\n};\n\nexport const flowSxConfig: SxConfig = Object.fromEntries(\n [\n 'color',\n 'bgcolor',\n 'backgroundColor',\n 'borderColor',\n 'borderTopColor',\n 'borderRightColor',\n 'borderBottomColor',\n 'borderLeftColor',\n 'outlineColor',\n ].map(prop => [prop, { ...defaultSxConfig[prop], transform: paletteColorTransform }])\n);\n"],"names":["paletteColorTransform","value","userValue","flowSxConfig","Object","fromEntries","map","prop","defaultSxConfig","transform"],"mappings":"uDAQA,MAAMA,EAAwB,CAACC,EAAgBC,IAC3B,SAAdA,GACiB,iBAAVD,GAAgC,OAAVA,EADAC,EAE1BD,EAGIE,EAAyBC,OAAOC,YAC3C,CACE,QACA,UACA,kBACA,cACA,iBACA,mBACA,oBACA,kBACA,gBACAC,~~IAAIC~~,~~GAAQ~~,CAACA,EAAM,IAAKC,EAAgBD,GAAOE,UAAWT"}
1	+ {"version":3,"file":"sxConfig.js","sources":["../../../src/materialui/theme/sxConfig.ts"],"sourcesContent":["import { unstable_defaultSxConfig as defaultSxConfig, SxConfig } from '@mui/system';\n\n/*\n When a palette group object (e.g. `palette.transparent`) is resolved instead of a string,\n * fall back to the original user value so CSS keywords like `'transparent'` pass through as-is.\n * Preserves MUI's built-in grey fallback behaviour.\n * https://github.com/mui/material-ui/blob/master/packages/mui-system/src/palette/palette.js\n */\nconst paletteColorTransform = (value: unknown, userValue: unknown): unknown => {\n if (userValue === 'grey') return userValue;\n if (typeof value === 'object' && value !== null) return userValue;\n return value;\n};\n\nexport const flowSxConfig: SxConfig = Object.fromEntries(\n [\n 'color',\n 'bgcolor',\n 'backgroundColor',\n 'borderColor',\n 'borderTopColor',\n 'borderRightColor',\n 'borderBottomColor',\n 'borderLeftColor',\n 'outlineColor',\n ].map((prop) => [prop, { ...defaultSxConfig[prop], transform: paletteColorTransform }]),\n);\n"],"names":["paletteColorTransform","value","userValue","flowSxConfig","Object","fromEntries","map","prop","defaultSxConfig","transform"],"mappings":"uDAQA,MAAMA,EAAwB,CAACC,EAAgBC,IAC3B,SAAdA,GACiB,iBAAVD,GAAgC,OAAVA,EADAC,EAE1BD,EAGIE,EAAyBC,OAAOC,YAC3C,CACE,QACA,UACA,kBACA,cACA,iBACA,mBACA,oBACA,kBACA,gBACAC,IAAKC,GAAS,CAACA,EAAM,IAAKC,EAAgBD,GAAOE,UAAWT"}

package/materialui/theme/theme.extensions.d.ts CHANGED Viewed

@@ -319,7 +319,28 @@ declare module '@mui/material/Avatar' {
         border?: 'auto' | 'on' | 'off';
     }
 }
+declare module '@mui/material/Tab' {
+    interface TabOwnProps {
+        /**
+         * Only the selected tab is a tab stop, the others are reached with arrow keys
+         * @default false
+         */
+        rovingTabIndex?: boolean;
+    }
+}
 declare module '@mui/material/Tabs' {
+    interface TabsScrollButtonsSlotPropsOverrides {
+        /**
+         * Label of the button scrolling to the start
+         * @default Scroll left
+         */
+        scrollLeftTitle?: string;
+        /**
+         * Label of the button scrolling to the end
+         * @default Scroll right
+         */
+        scrollRightTitle?: string;
+    }
     interface TabsOwnProps {
         /**
          * Default or rounded buttons variant
@@ -400,7 +421,7 @@ declare module '@mui/material/Card' {
          */
         iconSlots?: {
             icon?: ComponentType<SvgIconProps>;
-            selected?: ComponentType<SvgIconProps>;
+            selectedIcon?: ComponentType<SvgIconProps>;
             hoverIcon?: ComponentType<SvgIconProps>;
             hoverSelectedIcon?: ComponentType<SvgIconProps>;
         };
@@ -455,6 +476,14 @@ declare module '@mui/material/InputLabel' {
         'data-variant'?: 'standard' | 'static';
     }
 }
+declare module '@mui/material/AccordionSummary' {
+    interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {
+        /**
+         * Properties applied to expand/collapse IconButton
+         */
+        iconButtonProps?: IconButtonProps;
+    }
+}
 declare module '@mui/material/DialogTitle' {
     interface DialogTitleOwnProps {
         /**
@@ -485,6 +514,16 @@ declare module '@mui/material/LinearProgress' {
         size?: 'small' | 'medium';
     }
 }
+declare module '@mui/material/Pagination' {
+    interface PaginationPropsVariantOverrides {
+        dots: true;
+    }
+}
+declare module '@mui/material/PaginationItem' {
+    interface PaginationItemPropsVariantOverrides {
+        dots: true;
+    }
+}
 declare module '@mui/x-date-pickers' {
     /**
      * Extend pickers shortcut with chip properties that are applied in code already

package/materialui/typography/typography.theme.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createBreakpoints as t}from"@mui/system";import e from"@skodaflow/web-tokens/src/tokens.json";const o=t=>["SKODA Next"+(t?" R2L":""),"Helvetica","Arial","system-ui","sans-serif"].join(","),i=(t,i,n)=>{const s=e["flow-typography"].find(e=>e.name===`${n??"small"}-${t}`);return s?{...s.style,fontFamily:o(i)}:null},n=(e,o,n)=>{const s=t(o);return{...i(e,n,"small"),[s.up("md")]:{...i(e,n,"medium")},[s.up("xl")]:{...i(e,n,"large")}}},s=(t,e)=>{const i=n("body",t,e);return{fontFamily:o(e),body:i,...Object.fromEntries(["h1","h2","h3","h4","subheadline","subtitle1","subtitle2","display","list","disclaimer","disclaimer1","disclaimer2","caption1","caption2"].map(o=>[o,n(o,t,e)])),body1:i,body2:i,h5:n("subheadline",t,e),h6:n("caption1",t,e),caption:n("caption2",t,e),overline:n("caption1",t,e),button:{fontFamily:o(e),letterSpacing:"0.75px",textTransform:"none",textDecoration:"none",fontSize:"16px",fontWeight:"700",lineHeight:"16px"}}};export{n as generateTypography,o as getFontFamily,i as getTypography,s as getTypographyOptions};
+import{createBreakpoints as t}from"@mui/system";import e from"@skodaflow/web-tokens/src/tokens.json";const i=t=>["SKODA Next"+(t?" R2L":""),"Helvetica","Arial","system-ui","sans-serif"].join(","),n=(t,n,o)=>{const a=e["flow-typography"].find(e=>e.name===`${o??"small"}-${t}`);return a?{...a.style,fontFamily:i(n),...["h1","h2","h3","h4","display","subheadline"].includes(t)&&{textWrap:"balance"}}:null},o=(e,i,o)=>{const a=t(i);return{...n(e,o,"small"),[a.up("md")]:{...n(e,o,"medium")},[a.up("xl")]:{...n(e,o,"large")}}},a=(t,e)=>{const n=o("body",t,e);return{fontFamily:i(e),body:n,...Object.fromEntries(["h1","h2","h3","h4","subheadline","subtitle1","subtitle2","display","list","disclaimer","disclaimer1","disclaimer2","caption1","caption2"].map(i=>[i,o(i,t,e)])),body1:n,body2:n,h5:o("subheadline",t,e),h6:o("caption1",t,e),caption:o("caption2",t,e),overline:o("caption1",t,e),button:{fontFamily:i(e),letterSpacing:"0.75px",textTransform:"none",textDecoration:"none",fontSize:"16px",fontWeight:"700",lineHeight:"16px"}}};export{o as generateTypography,i as getFontFamily,n as getTypography,a as getTypographyOptions};
 //# sourceMappingURL=typography.theme.js.map

package/materialui/typography/typography.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.theme.js","sources":["../../../src/materialui/typography/typography.theme.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { BreakpointsOptions, createBreakpoints } from '@mui/system';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\n\nexport type TypographySize = 'small' \| 'medium' \| 'large';\n\n/*\n Obtain fontFamily for SKODA Next font with fallbacks\n /\nexport const getFontFamily = (rtl: boolean) => {\n return [`SKODA Next${rtl ? ' R2L' : ''}`, 'Helvetica', 'Arial', 'system-ui', 'sans-serif'].join(',');\n};\n\n/\n Obtain style for element for the certain size\n /\nexport const getTypography = (element: string, rtl: boolean, size?: TypographySize) => {\n const typo = tokens['flow-typography'].find((el) => el.name === `${size ?? 'small'}-${element}`);\n if (typo)\n return {\n ...typo['style'],\n fontFamily: getFontFamily(rtl),\n } as CSSProperties;\n else return null;\n};\n\n/\n Generate responsive typography style with the media queries\n /\nexport const generateTypography = (element: string, breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n const breakpoints = createBreakpoints(breakpointsOptions);\n\n return {\n ...getTypography(element, rtl, 'small'),\n [breakpoints.up('md')]: {\n ...getTypography(element, rtl, 'medium'),\n },\n [breakpoints.up('xl')]: {\n ...getTypography(element, rtl, 'large'),\n },\n };\n};\n\n/\n Build the typography theme options\n */\nexport const getTypographyOptions = (breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n const bodyTypo = generateTypography('body', breakpointsOptions, rtl);\n\n return {\n fontFamily: getFontFamily(rtl),\n body: bodyTypo,\n ...Object.fromEntries(\n [\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'subheadline',\n 'subtitle1',\n 'subtitle2',\n 'display',\n 'list',\n 'disclaimer',\n 'disclaimer1',\n 'disclaimer2',\n 'caption1',\n 'caption2',\n ].map((element) => [element, generateTypography(element, breakpointsOptions, rtl)]),\n ),\n // original @mui properties\n body1: bodyTypo,\n body2: bodyTypo,\n h5: generateTypography('subheadline', breakpointsOptions, rtl),\n h6: generateTypography('caption1', breakpointsOptions, rtl),\n caption: generateTypography('caption2', breakpointsOptions, rtl),\n overline: generateTypography('caption1', breakpointsOptions, rtl),\n // button, later this definition should come from @skodaflow/web-tokens\n button: {\n fontFamily: getFontFamily(rtl),\n letterSpacing: '0.75px',\n textTransform: 'none',\n textDecoration: 'none',\n fontSize: '16px',\n fontWeight: '700',\n lineHeight: '16px',\n },\n };\n};\n"],"names":["getFontFamily","rtl","join","getTypography","element","size","typo","tokens","find","el","name","fontFamily","generateTypography","breakpointsOptions","breakpoints","createBreakpoints","up","getTypographyOptions","bodyTypo","body","Object","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"qGASO,MAAMA,EAAiBC,GACrB,CAAC,cAAaA,EAAM,OAAS,IAAM,YAAa,QAAS,YAAa,cAAcC,KAAK,KAMrFC,EAAgB,CAACC,EAAiBH,EAAcI,KAC3D,MAAMC,EAAOC,EAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,GAAQ,WAAWD,~~KACtF~~,OAAIE,EACK,IACFA,EAAY,MACfK,WAAYX,EAAcC,~~IAElB~~,~~MAMDW~~,EAAqB,~~CAACR~~,~~EAAiBS~~,~~EAAwCZ~~,KAC1F,~~MAAMa~~,EAAcC,EAAkBF,GAEtC,MAAO,~~IACFV~~,EAAcC,EAASH,EAAK,SAC/B,~~CAACa~~,EAAYE,GAAG,OAAQ,~~IACnBb~~,EAAcC,EAASH,EAAK,WAEjC,~~CAACa~~,EAAYE,GAAG,OAAQ,~~IACnBb~~,EAAcC,EAASH,EAAK,~~YAQxBgB~~,EAAuB,CAACJ,~~EAAwCZ~~,KAC3E,~~MAAMiB~~,EAAWN,EAAmB,OAAQC,~~EAAoBZ~~,GAEhE,MAAO,CACLU,WAAYX,EAAcC,~~GAC1BkB~~,KAAMD,KACHE,OAAOC,YACR,CACE,KACA,KACA,KACA,KACA,cACA,YACA,YACA,UACA,OACA,aACA,cACA,cACA,WACA,YACAC,~~IAAKlB~~,GAAY,CAACA,~~EAASQ~~,~~EAAmBR~~,~~EAASS~~,~~EAAoBZ~~,MAG/~~EsB~~,MAAOL,EACPM,MAAON,EACPO,GAAIb,EAAmB,cAAeC,~~EAAoBZ~~,~~GAC1DyB~~,GAAId,EAAmB,WAAYC,~~EAAoBZ~~,~~GACvD0B~~,QAASf,EAAmB,WAAYC,~~EAAoBZ~~,~~GAC5D2B~~,SAAUhB,EAAmB,WAAYC,~~EAAoBZ~~,~~GAE7D4B~~,OAAQ,~~CACNlB~~,WAAYX,EAAcC,~~GAC1B6B~~,cAAe,SACfC,cAAe,OACfC,eAAgB,OAChBC,SAAU,OACVC,WAAY,MACZC,WAAY"}
1	+ {"version":3,"file":"typography.theme.js","sources":["../../../src/materialui/typography/typography.theme.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { BreakpointsOptions, createBreakpoints } from '@mui/system';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\n\nexport type TypographySize = 'small' \| 'medium' \| 'large';\n\n/*\n Obtain fontFamily for SKODA Next font with fallbacks\n /\nexport const getFontFamily = (rtl: boolean) => {\n return [`SKODA Next${rtl ? ' R2L' : ''}`, 'Helvetica', 'Arial', 'system-ui', 'sans-serif'].join(',');\n};\n\n/\n Obtain style for element for the certain size\n /\nexport const getTypography = (element: string, rtl: boolean, size?: TypographySize) => {\n const typo = tokens['flow-typography'].find((el) => el.name === `${size ?? 'small'}-${element}`);\n const headlines = ['h1', 'h2', 'h3', 'h4', 'display', 'subheadline'];\n if (typo)\n return {\n ...typo['style'],\n fontFamily: getFontFamily(rtl),\n ...(headlines.includes(element) && { textWrap: 'balance' }),\n } as CSSProperties;\n else return null;\n};\n\n/\n Generate responsive typography style with the media queries\n /\nexport const generateTypography = (element: string, breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n const breakpoints = createBreakpoints(breakpointsOptions);\n\n return {\n ...getTypography(element, rtl, 'small'),\n [breakpoints.up('md')]: {\n ...getTypography(element, rtl, 'medium'),\n },\n [breakpoints.up('xl')]: {\n ...getTypography(element, rtl, 'large'),\n },\n };\n};\n\n/\n Build the typography theme options\n */\nexport const getTypographyOptions = (breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n const bodyTypo = generateTypography('body', breakpointsOptions, rtl);\n\n return {\n fontFamily: getFontFamily(rtl),\n body: bodyTypo,\n ...Object.fromEntries(\n [\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'subheadline',\n 'subtitle1',\n 'subtitle2',\n 'display',\n 'list',\n 'disclaimer',\n 'disclaimer1',\n 'disclaimer2',\n 'caption1',\n 'caption2',\n ].map((element) => [element, generateTypography(element, breakpointsOptions, rtl)]),\n ),\n // original @mui properties\n body1: bodyTypo,\n body2: bodyTypo,\n h5: generateTypography('subheadline', breakpointsOptions, rtl),\n h6: generateTypography('caption1', breakpointsOptions, rtl),\n caption: generateTypography('caption2', breakpointsOptions, rtl),\n overline: generateTypography('caption1', breakpointsOptions, rtl),\n // button, later this definition should come from @skodaflow/web-tokens\n button: {\n fontFamily: getFontFamily(rtl),\n letterSpacing: '0.75px',\n textTransform: 'none',\n textDecoration: 'none',\n fontSize: '16px',\n fontWeight: '700',\n lineHeight: '16px',\n },\n };\n};\n"],"names":["getFontFamily","rtl","join","getTypography","element","size","typo","tokens","find","el","name","fontFamily","includes","textWrap","generateTypography","breakpointsOptions","breakpoints","createBreakpoints","up","getTypographyOptions","bodyTypo","body","Object","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"qGASO,MAAMA,EAAiBC,GACrB,CAAC,cAAaA,EAAM,OAAS,IAAM,YAAa,QAAS,YAAa,cAAcC,KAAK,KAMrFC,EAAgB,CAACC,EAAiBH,EAAcI,KAC3D,MAAMC,EAAOC,EAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,GAAQ,WAAWD,KAEtF,OAAIE,EACK,IACFA,EAAY,MACfK,WAAYX,EAAcC,MAJZ,CAAC,KAAM,KAAM,KAAM,KAAM,UAAW,eAKpCW,SAASR,IAAY,CAAES,SAAU,YAEvC,MAMDC,EAAqB,CAACV,EAAiBW,EAAwCd,KAC1F,MAAMe,EAAcC,EAAkBF,GAEtC,MAAO,IACFZ,EAAcC,EAASH,EAAK,SAC/B,CAACe,EAAYE,GAAG,OAAQ,IACnBf,EAAcC,EAASH,EAAK,WAEjC,CAACe,EAAYE,GAAG,OAAQ,IACnBf,EAAcC,EAASH,EAAK,YAQxBkB,EAAuB,CAACJ,EAAwCd,KAC3E,MAAMmB,EAAWN,EAAmB,OAAQC,EAAoBd,GAEhE,MAAO,CACLU,WAAYX,EAAcC,GAC1BoB,KAAMD,KACHE,OAAOC,YACR,CACE,KACA,KACA,KACA,KACA,cACA,YACA,YACA,UACA,OACA,aACA,cACA,cACA,WACA,YACAC,IAAKpB,GAAY,CAACA,EAASU,EAAmBV,EAASW,EAAoBd,MAG/EwB,MAAOL,EACPM,MAAON,EACPO,GAAIb,EAAmB,cAAeC,EAAoBd,GAC1D2B,GAAId,EAAmB,WAAYC,EAAoBd,GACvD4B,QAASf,EAAmB,WAAYC,EAAoBd,GAC5D6B,SAAUhB,EAAmB,WAAYC,EAAoBd,GAE7D8B,OAAQ,CACNpB,WAAYX,EAAcC,GAC1B+B,cAAe,SACfC,cAAe,OACfC,eAAgB,OAChBC,SAAU,OACVC,WAAY,MACZC,WAAY"}

package/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@skodaflow/web-library","version":"8.3.2","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.10 \|\| ^9.0.0","@mui/system":"^7.3.10 \|\| ^9.0.0","@mui/x-date-pickers":"^9.0.0","country-flag-icons":"^1.6.15","react":"^18.3.1 \|\| ^19.2.4","react-dom":"^18.3.1 \|\| ^19.2.4","swiper":"^12.1.3"},"dependencies":{"@skodaflow/web-tokens":"3.2.0","stylis":"4.4.0","stylis-plugin-rtl":"2.1.1","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}
1	+ {"name":"@skodaflow/web-library","version":"8.5.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","type":"module","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.10 \|\| ^9.0.0","@mui/system":"^7.3.10 \|\| ^9.0.0","@mui/x-date-pickers":"^9.0.0","country-flag-icons":"^1.6.15","react":"^18.3.1 \|\| ^19.2.4","react-dom":"^18.3.1 \|\| ^19.2.4","swiper":"^12.1.3 \|\| ^14.0.0"},"dependencies":{"@skodaflow/web-tokens":"3.2.0","stylis":"4.4.0","stylis-plugin-rtl":"2.1.1","tslib":"2.9.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}