@skodaflow/web-library 8.3.1 → 8.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/advancedTable/agGrid.js +1 -1
- package/cjs/components/advancedTable/agGrid.js.map +1 -1
- package/cjs/components/advancedTable/agGridSkodaTheme.d.ts +3 -0
- package/cjs/components/advancedTable/agGridSkodaTheme.js +1 -1
- package/cjs/components/advancedTable/agGridSkodaTheme.js.map +1 -1
- package/cjs/components/advancedTable/agGridUniformRowHeight.d.ts +36 -0
- package/cjs/components/advancedTable/agGridUniformRowHeight.js +2 -0
- package/cjs/components/advancedTable/agGridUniformRowHeight.js.map +1 -0
- package/cjs/components/advancedTable/agGridVariables.js +1 -1
- package/cjs/components/advancedTable/agGridVariables.js.map +1 -1
- package/cjs/components/advancedTable/index.d.ts +1 -0
- package/cjs/components/alert/AlertIconButton.d.ts +8 -0
- package/cjs/components/alert/AlertIconButton.js +2 -0
- package/cjs/components/alert/AlertIconButton.js.map +1 -0
- package/cjs/components/alert/index.d.ts +1 -0
- package/cjs/components/copyButton/CopyButton.d.ts +39 -0
- package/cjs/components/copyButton/CopyButton.js +2 -0
- package/cjs/components/copyButton/CopyButton.js.map +1 -0
- package/cjs/components/copyButton/CopyIconButton.d.ts +8 -0
- package/cjs/components/copyButton/CopyIconButton.js +2 -0
- package/cjs/components/copyButton/CopyIconButton.js.map +1 -0
- package/cjs/components/copyButton/index.d.ts +3 -0
- package/cjs/components/copyButton/useCopyAction.d.ts +31 -0
- package/cjs/components/copyButton/useCopyAction.js +2 -0
- package/cjs/components/copyButton/useCopyAction.js.map +1 -0
- package/cjs/components/footer/FooterMenuCollapse.js +1 -1
- package/cjs/components/footer/FooterMenuCollapse.js.map +1 -1
- package/cjs/components/header/Header.d.ts +16 -2
- package/cjs/components/header/Header.js +1 -1
- package/cjs/components/header/Header.js.map +1 -1
- package/cjs/components/header/HeaderButton.d.ts +1 -0
- package/cjs/components/header/HeaderButton.js +1 -1
- package/cjs/components/header/HeaderButton.js.map +1 -1
- package/cjs/components/header/HeaderContext.d.ts +22 -0
- package/cjs/components/header/HeaderContext.js +2 -0
- package/cjs/components/header/HeaderContext.js.map +1 -0
- package/cjs/components/header/HeaderLanguageSelect.js.map +1 -1
- package/cjs/components/header/HeaderLogo.js +1 -1
- package/cjs/components/header/HeaderLogo.js.map +1 -1
- package/cjs/components/header/HeaderNavigationHero.js +1 -1
- package/cjs/components/header/HeaderNavigationHero.js.map +1 -1
- package/cjs/components/header/HeaderNavigationLink.d.ts +1 -0
- package/cjs/components/header/HeaderNavigationLink.js +1 -1
- package/cjs/components/header/HeaderNavigationLink.js.map +1 -1
- package/cjs/components/header/HeaderNavigationMenu.js +1 -1
- package/cjs/components/header/HeaderNavigationMenu.js.map +1 -1
- package/cjs/components/header/index.d.ts +1 -0
- package/cjs/components/index.d.ts +1 -0
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/cjs/index.js +1 -1
- package/cjs/materialui/alert/alert.theme.js +1 -1
- package/cjs/materialui/alert/alert.theme.js.map +1 -1
- package/cjs/materialui/alert/alertTitle.theme.js +1 -1
- package/cjs/materialui/alert/alertTitle.theme.js.map +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/cjs/materialui/button/button.theme.js.map +1 -1
- package/cjs/materialui/datepicker/datecalendar.theme.d.ts +102 -102
- package/cjs/materialui/datepicker/digitalclock.theme.d.ts +102 -102
- package/cjs/materialui/iconButton/iconButton.theme.js.map +1 -1
- package/cjs/materialui/tabs/tabs.theme.js +1 -1
- package/cjs/materialui/tabs/tabs.theme.js.map +1 -1
- package/cjs/materialui/textfield/inputLabel.theme.js +1 -1
- package/cjs/materialui/textfield/inputLabel.theme.js.map +1 -1
- package/cjs/materialui/theme/theme.extensions.d.ts +11 -1
- package/cjs/materialui/typography/typography.theme.js +1 -1
- package/cjs/materialui/typography/typography.theme.js.map +1 -1
- package/cjs/node_modules/swiper/shared/swiper-core.js +1 -1
- package/cjs/node_modules/swiper/shared/swiper-core.js.map +1 -1
- package/cjs/node_modules/swiper/swiper-react.js +1 -1
- package/cjs/node_modules/swiper/swiper-react.js.map +1 -1
- package/components/advancedTable/agGrid.js +1 -1
- package/components/advancedTable/agGrid.js.map +1 -1
- package/components/advancedTable/agGridSkodaTheme.d.ts +3 -0
- package/components/advancedTable/agGridSkodaTheme.js +1 -1
- package/components/advancedTable/agGridSkodaTheme.js.map +1 -1
- package/components/advancedTable/agGridUniformRowHeight.d.ts +36 -0
- package/components/advancedTable/agGridUniformRowHeight.js +2 -0
- package/components/advancedTable/agGridUniformRowHeight.js.map +1 -0
- package/components/advancedTable/agGridVariables.js +1 -1
- package/components/advancedTable/agGridVariables.js.map +1 -1
- package/components/advancedTable/index.d.ts +1 -0
- package/components/alert/AlertIconButton.d.ts +8 -0
- package/components/alert/AlertIconButton.js +2 -0
- package/components/alert/AlertIconButton.js.map +1 -0
- package/components/alert/index.d.ts +1 -0
- package/components/copyButton/CopyButton.d.ts +39 -0
- package/components/copyButton/CopyButton.js +2 -0
- package/components/copyButton/CopyButton.js.map +1 -0
- package/components/copyButton/CopyIconButton.d.ts +8 -0
- package/components/copyButton/CopyIconButton.js +2 -0
- package/components/copyButton/CopyIconButton.js.map +1 -0
- package/components/copyButton/index.d.ts +3 -0
- package/components/copyButton/useCopyAction.d.ts +31 -0
- package/components/copyButton/useCopyAction.js +2 -0
- package/components/copyButton/useCopyAction.js.map +1 -0
- package/components/footer/FooterMenuCollapse.js +1 -1
- package/components/footer/FooterMenuCollapse.js.map +1 -1
- package/components/header/Header.d.ts +16 -2
- package/components/header/Header.js +1 -1
- package/components/header/Header.js.map +1 -1
- package/components/header/HeaderButton.d.ts +1 -0
- package/components/header/HeaderButton.js +1 -1
- package/components/header/HeaderButton.js.map +1 -1
- package/components/header/HeaderContext.d.ts +22 -0
- package/components/header/HeaderContext.js +2 -0
- package/components/header/HeaderContext.js.map +1 -0
- package/components/header/HeaderLanguageSelect.js.map +1 -1
- package/components/header/HeaderLogo.js +1 -1
- package/components/header/HeaderLogo.js.map +1 -1
- package/components/header/HeaderNavigationHero.js +1 -1
- package/components/header/HeaderNavigationHero.js.map +1 -1
- package/components/header/HeaderNavigationLink.d.ts +1 -0
- package/components/header/HeaderNavigationLink.js +1 -1
- package/components/header/HeaderNavigationLink.js.map +1 -1
- package/components/header/HeaderNavigationMenu.js +1 -1
- package/components/header/HeaderNavigationMenu.js.map +1 -1
- package/components/header/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/index.js +1 -1
- package/materialui/alert/alert.theme.js +1 -1
- package/materialui/alert/alert.theme.js.map +1 -1
- package/materialui/alert/alertTitle.theme.js +1 -1
- package/materialui/alert/alertTitle.theme.js.map +1 -1
- package/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/materialui/button/button.theme.js.map +1 -1
- package/materialui/datepicker/datecalendar.theme.d.ts +102 -102
- package/materialui/datepicker/digitalclock.theme.d.ts +102 -102
- package/materialui/iconButton/iconButton.theme.js.map +1 -1
- package/materialui/tabs/tabs.theme.js +1 -1
- package/materialui/tabs/tabs.theme.js.map +1 -1
- package/materialui/textfield/inputLabel.theme.js +1 -1
- package/materialui/textfield/inputLabel.theme.js.map +1 -1
- package/materialui/theme/theme.extensions.d.ts +11 -1
- package/materialui/typography/typography.theme.js +1 -1
- package/materialui/typography/typography.theme.js.map +1 -1
- package/package.json +1 -1
|
@@ -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":"4GAKO,MAAMA,EAAqD,CAChEC,aAAc,CACZC,eAAe,EACfC,QAAS,WACTC,MAAO,YACPC,KAAM,UAERC,eAAgB,
|
|
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":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var t=require("./TabsScrollButton.js"),e=require("../../components/focusring/focusring.js"),o=require("../button/interactive.js"),r=require("../typography/typography.theme.js");const a={defaultProps:{template:"underlined",scrollButtons:"auto",allowScrollButtonsMobile:!0,visibleScrollbar:!1,variant:"scrollable",slots:{scrollButtons:t.TabsScrollButton},slotProps:{scroller:t=>!1===t.visibleScrollbar&&{style:{marginBottom:"0"}}}},styleOverrides:{root:({theme:t,ownerState:e})=>({minHeight:"0",alignItems:"center",gap:"0",...e.fullWidth||"fullWidth"===e.variant?{"& .MuiTab-root":{flexGrow:"1"}}:{},...e.centered?{justifyContent:"center"}:{},'&:not(:has(.MuiTab-root[aria-selected="true"]))':{"& .MuiTabs-indicator":{opacity:"0"}},"& .MuiTab-root .MuiTabs-indicator":{bottom:"-18px","&:before":{left:"0",right:"0"}},"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"16px",[t.breakpoints.up("md")]:{gap:"28px"}}}),indicator:({theme:t,ownerState:e})=>({maxWidth:"none",background:"transparent",display:"block",height:"3px",color:"dark"===t.palette.mode?t.palette.brand.secondary:t.palette.brand.primary,..."secondary"===e.indicatorColor&&{color:t.palette.text.primary},"&:before":{display:"block",content:'""',position:"absolute",left:"8px",right:"8px",top:"0",bottom:"0",backgroundColor:"currentColor"}}),scroller:({ownerState:t})=>({flexGrow:t.fullWidth||"fullWidth"===t.variant?"1":"0","&::-webkit-scrollbar:horizontal":{height:"24px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"10px"}}),scrollButtons:({theme:t})=>({color:t.palette.text.primary,"&.Mui-disabled":{opacity:"1",color:t.palette.disabled.primary}})},variants:[{props:{template:"underlined"},style:({theme:t})=>({marginLeft:"-6px",marginRight:"-6px",maxWidth:"none","& .MuiTabs-scroller":{"&::-webkit-scrollbar:horizontal":{height:"16px"},"&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal":{borderWidth:"6px"}},"& .MuiTabs-list, & .MuiTabs-flexContainer":{padding:"6px",gap:"0"},"& .MuiTabs-indicator":{bottom:"6px","&:before":{inset:"0"}},"& .MuiTab-root .MuiTabs-indicator":{bottom:"-12px",[t.breakpoints.down("md")]:{bottom:"-10px"},"&:before":{maxWidth:"none",left:"-24px",right:"-24px"}},"& .MuiTab-root":{margin:"0",padding:"12px 24px",[t.breakpoints.down("md")]:{paddingTop:"10px",paddingBottom:"10px"},borderRadius:"0",color:"dark"===t.palette.mode?t.palette.onSurface.os300:t.palette.onSurface.os700,...t.typography.subheadline,[t.breakpoints.up("xs")]:{fontWeight:"300"},"&:after":{content:'""',position:"absolute",left:"0",right:"0",bottom:"0",height:"1px",backgroundColor:t.palette.onSurface.os500},"&:hover, &.Mui-focusVisible":{"&:after":{height:"2px"}},"&.Mui-selected":{color:"dark"===t.palette.mode?t.palette.brand.secondary:t.palette.brand.primary,backgroundColor:"dark"===t.palette.mode?t.palette.surface.primary:t.palette.transparent.primary},"&.Mui-disabled":{color:t.palette.disabled.tertiary},"&.Mui-focusVisible":{zIndex:"10",boxShadow:`0 0 0 2px ${t.palette.background.primary}`,"&:before":{inset:"-2px",borderRadius:"4px"}}}})},{props:{template:"buttons"},style:({theme:t})=>({"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTabs-indicator":{display:"none"},"& .MuiTab-root":{border:"1px solid transparent",padding:"6px 16px",borderRadius:"1000px",transition:"all 0.3s ease-out",fontSize:"14px",fontWeight:"700",marginBottom:"2px",...e.updateFocusRingStyle("0px",!1),...o.getInteractiveStyle({backgroundColor:"transparent",color:t.palette.onSurface.os500},{backgroundColor:t.palette.surface.primary,color:t.palette.text.primary}),"&.Mui-selected":{...o.getInteractiveStyle({backgroundColor:t.palette.brand.quarternary,color:t.palette.text.primary,borderColor:t.palette.brand.primary},{backgroundColor:t.palette.brand.quarternary,color:t.palette.brand.primary,borderColor:t.palette.brand.primary})},[t.breakpoints.down("md")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}}}})},{props:{template:"navigation"},style:({theme:t})=>({"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"4px"},paddingTop:"11px",[t.breakpoints.down("xl")]:{paddingTop:"13px"},[t.breakpoints.down("lg")]:{paddingTop:"8px"},"& .MuiTab-root":{marginBottom:"11px",[t.breakpoints.down("xl")]:{marginBottom:"13px"},[t.breakpoints.down("lg")]:{marginBottom:"8px"},...t.typography.list},"& .MuiTab-root .MuiTabs-indicator":{bottom:"-19px",[t.breakpoints.down("xl")]:{bottom:"-21px"},[t.breakpoints.down("lg")]:{bottom:"-16px"}}})},{props:{template:"segmented"},style:({theme:t})=>({color:"dark"===t.palette.mode?t.palette.surface.primary:t.palette.transparent.secondary,"& .MuiTabs-scroller":{backgroundColor:"currentColor",borderRadius:"1000px"},"& .MuiTabs-list, & .MuiTabs-flexContainer":{gap:"8px"},"& .MuiTab-root .MuiTabs-indicator":{display:"none"},"& .MuiTabs-indicator":{color:"dark"===t.palette.mode?t.palette.surface.secondary:t.palette.common.white,height:"100%",zIndex:"10",borderRadius:"1000px",overflow:"hidden","&:before":{inset:"0",borderRadius:"inherit",border:`2px solid ${"dark"===t.palette.mode?t.palette.brand.secondary:t.palette.text.primary}`}},"& .MuiTab-root":{margin:"0",borderRadius:"1000px",transition:"all 0.3s ease-out",padding:"6px 16px",gap:"10px",zIndex:"20","& .MuiSvgIcon-root":{fontSize:"20px",marginTop:"4px",marginBottom:"4px"},color:t.palette.text.primary,...r.getTypography("subheadline","rtl"===t.direction,"small"),[t.breakpoints.up("md")]:{...r.getTypography("subheadline","rtl"===t.direction,"large"),padding:"8px 16px"},[t.breakpoints.up("xs")]:{"&, &.Mui-selected, & .FlowTab-selectedLabel":{fontWeight:"400"}},"&:hover, &.Mui-focusVisible":{backgroundColor:t.palette.surface.primary},"&.Mui-selected":{color:"dark"===t.palette.mode?t.palette.brand.secondary:t.palette.text.primary,"&:hover, &.Mui-focusVisible":{backgroundColor:"transparent"}},"&.Mui-disabled":{color:t.palette.disabled.tertiary}}})}]};exports.flowTabs=a;
|
|
2
2
|
//# sourceMappingURL=tabs.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.theme.js","sources":["../../../../../src/materialui/tabs/tabs.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabsScrollButton } from './TabsScrollButton';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport const flowTabs: Components<Theme>['MuiTabs'] = {\n defaultProps: {\n template: 'underlined',\n // for the A11y reflow-4x-zoom-scroll show scrollButtons instead of scrollbar\n scrollButtons: 'auto',\n allowScrollButtonsMobile: true,\n visibleScrollbar: false,\n variant: 'scrollable',\n slots: {\n scrollButtons: TabsScrollButton,\n },\n slotProps: {\n // removes @mui marginBottom outdated method to hide scrollbar, which might cause overflow issues\n // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Tabs/Tabs.js#L515\n scroller: (ownerState) =>\n ownerState.visibleScrollbar === false && {\n style: { marginBottom: '0' },\n },\n },\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n minHeight: '0',\n alignItems: 'center',\n // space between tabs and scroll buttons (FlowScrollButton already contains 4px)\n gap: '0',\n ...(ownerState.fullWidth || ownerState.variant === 'fullWidth'\n ? {\n '& .MuiTab-root': {\n flexGrow: '1',\n },\n }\n : {}),\n // @mui omits centered property with variant scrollable,\n // therefore code bellow has no effect. In docs, we recommend utilizing sx property.\n ...(ownerState.centered ? { justifyContent: 'center' } : {}),\n // check if we don't have any tab selected\n '&:not(:has(.MuiTab-root[aria-selected=\"true\"]))': {\n // hide indicator\n '& .MuiTabs-indicator': {\n opacity: '0',\n },\n },\n // container\n // note: once we stop supporting @mui v7, can be moved directly under list: {}\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n gap: '16px',\n [theme.breakpoints.up('md')]: {\n gap: '28px',\n },\n },\n }),\n indicator: ({ theme, ownerState }) => ({\n maxWidth: 'none',\n background: 'transparent',\n display: 'block',\n height: '3px',\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n ...(ownerState.indicatorColor === 'secondary' && {\n color: theme.palette.text.primary,\n }),\n // actual indicator line\n '&:before': {\n display: 'block',\n content: '\"\"',\n position: 'absolute',\n left: '8px',\n right: '8px',\n top: '0',\n bottom: '0',\n backgroundColor: 'currentColor',\n },\n }),\n scroller: ({ ownerState }) => ({\n flexGrow: ownerState.fullWidth || ownerState.variant === 'fullWidth' ? '1' : '0',\n // restyle horizontal scrollbar\n '&::-webkit-scrollbar:horizontal': {\n height: '24px',\n },\n '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n borderWidth: '10px',\n },\n }),\n scrollButtons: ({ theme }) => ({\n color: theme.palette.text.primary,\n // do not hide disabled scroll buttons\n '&.Mui-disabled': {\n opacity: '1',\n color: theme.palette.disabled.primary,\n },\n }),\n },\n variants: [\n {\n props: { template: 'underlined' },\n style: ({ theme }) => ({\n // align with rest of the page, due to extra space\n marginLeft: '-6px',\n marginRight: '-6px',\n maxWidth: 'none',\n // scroll container\n '& .MuiTabs-scroller': {\n '&::-webkit-scrollbar:horizontal': {\n height: '16px',\n },\n '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n borderWidth: '6px',\n },\n },\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // extra space for the focus indicator\n padding: '6px',\n // remove gap between tabs\n gap: '0',\n },\n // indicator line\n '& .MuiTabs-indicator': {\n // move directly into tab border\n bottom: '6px',\n '&:before': {\n // make full-width\n inset: '0',\n },\n },\n // Tabs itself\n '& .MuiTab-root': {\n // remove space around tab in favor of padding\n margin: '0',\n // increase spacing\n padding: '12px 24px',\n // responsive\n [theme.breakpoints.down('md')]: {\n paddingTop: '10px',\n paddingBottom: '10px',\n },\n // style adjust\n borderRadius: '0',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n // font\n ...theme.typography.subheadline,\n [theme.breakpoints.up('xs')]: {\n fontWeight: '300',\n },\n // bottom border\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n left: '0',\n right: '0',\n bottom: '0',\n height: '1px',\n backgroundColor: theme.palette.onSurface.os500,\n },\n // hover effect\n '&:hover, &.Mui-focusVisible': {\n // increase size of the border\n '&:after': {\n height: '2px',\n },\n },\n // active\n '&.Mui-selected': {\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n backgroundColor:\n theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n },\n // disabled\n '&.Mui-disabled': {\n color: theme.palette.disabled.tertiary,\n },\n // focused style\n '&.Mui-focusVisible': {\n // higher z-index than others\n zIndex: '10',\n // extra white border\n boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n '&:before': {\n // move outside\n inset: '-2px',\n // add extra border radius\n borderRadius: '4px',\n },\n },\n },\n }),\n },\n {\n props: { template: 'buttons' },\n style: ({ theme }) => ({\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '8px',\n },\n // hide bottom line\n '& .MuiTabs-indicator': {\n display: 'none',\n },\n // restyle tabs to buttons\n '& .MuiTab-root': {\n border: '1px solid transparent',\n padding: '6px 16px',\n borderRadius: '1000px',\n transition: 'all 0.3s ease-out',\n fontSize: '14px',\n fontWeight: '700',\n marginBottom: '2px',\n ...updateFocusRingStyle('0px', false),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os500,\n },\n {\n backgroundColor: theme.palette.surface.primary,\n color: theme.palette.text.primary,\n },\n ),\n '&.Mui-selected': {\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.brand.quarternary,\n color: theme.palette.text.primary,\n borderColor: theme.palette.brand.primary,\n },\n {\n backgroundColor: theme.palette.brand.quarternary,\n color: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n },\n ),\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n fontWeight: '400',\n },\n },\n },\n }),\n },\n {\n // variant used in the SecondaryNavigation\n props: { template: 'navigation' },\n style: ({ theme }) => ({\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '4px',\n },\n // manual align\n paddingTop: '11px',\n [theme.breakpoints.down('xl')]: {\n paddingTop: '13px',\n },\n [theme.breakpoints.down('lg')]: {\n paddingTop: '8px',\n },\n // restyle tabs typography\n '& .MuiTab-root': {\n marginBottom: '11px',\n [theme.breakpoints.down('xl')]: {\n marginBottom: '13px',\n },\n [theme.breakpoints.down('lg')]: {\n marginBottom: '8px',\n },\n ...theme.typography.list,\n },\n }),\n },\n {\n props: { template: 'segmented' },\n style: ({ theme }) => ({\n // used for background\n color: theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.secondary,\n // container\n '& .MuiTabs-scroller': {\n backgroundColor: 'currentColor',\n borderRadius: '1000px',\n },\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '8px',\n },\n // restyle indicator to white bordered travelling background\n '& .MuiTabs-indicator': {\n color: theme.palette.mode === 'dark' ? theme.palette.surface.secondary : theme.palette.common.white,\n // proportion\n height: '100%',\n // z-index bellow <Tab />\n zIndex: '10',\n borderRadius: '1000px',\n // make sure border from :before is not visible when no tab is selected\n overflow: 'hidden',\n '&:before': {\n inset: '0',\n borderRadius: 'inherit',\n border: `2px solid ${theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary}`,\n },\n },\n // restyle tabs\n '& .MuiTab-root': {\n margin: '0',\n borderRadius: '1000px',\n transition: 'all 0.3s ease-out',\n // proportions\n padding: '6px 16px',\n // space between icon and text\n gap: '10px',\n // z-index above indicator\n zIndex: '20',\n // icon inside\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n marginTop: '4px',\n marginBottom: '4px',\n },\n // change typography\n color: theme.palette.text.primary,\n ...getTypography('subheadline', theme.direction === 'rtl', 'small'),\n [theme.breakpoints.up('md')]: {\n ...getTypography('subheadline', theme.direction === 'rtl', 'large'),\n // update proportions\n padding: '8px 16px',\n },\n [theme.breakpoints.up('xs')]: {\n '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n fontWeight: '400',\n },\n },\n // hover and focus\n '&:hover, &.Mui-focusVisible': {\n backgroundColor: theme.palette.surface.primary,\n },\n // active\n '&.Mui-selected': {\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary,\n '&:hover, &.Mui-focusVisible': {\n backgroundColor: 'transparent',\n },\n },\n // disabled\n '&.Mui-disabled': {\n color: theme.palette.disabled.tertiary,\n },\n },\n }),\n },\n ],\n};\n"],"names":["flowTabs","defaultProps","template","scrollButtons","allowScrollButtonsMobile","visibleScrollbar","variant","slots","TabsScrollButton","slotProps","scroller","ownerState","style","marginBottom","styleOverrides","root","theme","minHeight","alignItems","gap","fullWidth","flexGrow","centered","justifyContent","opacity","breakpoints","up","indicator","maxWidth","background","display","height","color","palette","mode","brand","secondary","primary","indicatorColor","text","content","position","left","right","top","bottom","backgroundColor","borderWidth","disabled","variants","props","marginLeft","marginRight","padding","inset","margin","down","paddingTop","paddingBottom","borderRadius","onSurface","os300","os700","typography","subheadline","fontWeight","os500","surface","transparent","tertiary","zIndex","boxShadow","border","transition","fontSize","updateFocusRingStyle","getInteractiveStyle","quarternary","borderColor","list","common","white","overflow","marginTop","getTypography","direction"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.theme.js","sources":["../../../../../src/materialui/tabs/tabs.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\nimport { TabsScrollButton } from './TabsScrollButton';\nimport { updateFocusRingStyle } from '@/src/components/focusring/focusring';\nimport { getInteractiveStyle } from '@/src/materialui/button/interactive';\nimport { getTypography } from '@/src/materialui/typography/typography.theme';\n\nexport const flowTabs: Components<Theme>['MuiTabs'] = {\n defaultProps: {\n template: 'underlined',\n // for the A11y reflow-4x-zoom-scroll show scrollButtons instead of scrollbar\n scrollButtons: 'auto',\n allowScrollButtonsMobile: true,\n visibleScrollbar: false,\n variant: 'scrollable',\n slots: {\n scrollButtons: TabsScrollButton,\n },\n slotProps: {\n // removes @mui marginBottom outdated method to hide scrollbar, which might cause overflow issues\n // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Tabs/Tabs.js#L515\n scroller: (ownerState) =>\n ownerState.visibleScrollbar === false && {\n style: { marginBottom: '0' },\n },\n },\n },\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n minHeight: '0',\n alignItems: 'center',\n // space between tabs and scroll buttons (FlowScrollButton already contains 4px)\n gap: '0',\n ...(ownerState.fullWidth || ownerState.variant === 'fullWidth'\n ? {\n '& .MuiTab-root': {\n flexGrow: '1',\n },\n }\n : {}),\n // @mui omits centered property with variant scrollable,\n // therefore code bellow has no effect. In docs, we recommend utilizing sx property.\n ...(ownerState.centered ? { justifyContent: 'center' } : {}),\n // check if we don't have any tab selected\n '&:not(:has(.MuiTab-root[aria-selected=\"true\"]))': {\n // hide indicator\n '& .MuiTabs-indicator': {\n opacity: '0',\n },\n },\n // before hydration @mui renders indicator inside the label of the selected tab,\n // compensate bottom margin and padding of tab from tab.theme.tsx to keep SSR output correct\n '& .MuiTab-root .MuiTabs-indicator': {\n bottom: '-18px',\n // label already excludes tab padding\n '&:before': {\n left: '0',\n right: '0',\n },\n },\n // container\n // note: once we stop supporting @mui v7, can be moved directly under list: {}\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n gap: '16px',\n [theme.breakpoints.up('md')]: {\n gap: '28px',\n },\n },\n }),\n indicator: ({ theme, ownerState }) => ({\n maxWidth: 'none',\n background: 'transparent',\n display: 'block',\n height: '3px',\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n ...(ownerState.indicatorColor === 'secondary' && {\n color: theme.palette.text.primary,\n }),\n // actual indicator line\n '&:before': {\n display: 'block',\n content: '\"\"',\n position: 'absolute',\n left: '8px',\n right: '8px',\n top: '0',\n bottom: '0',\n backgroundColor: 'currentColor',\n },\n }),\n scroller: ({ ownerState }) => ({\n flexGrow: ownerState.fullWidth || ownerState.variant === 'fullWidth' ? '1' : '0',\n // restyle horizontal scrollbar\n '&::-webkit-scrollbar:horizontal': {\n height: '24px',\n },\n '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n borderWidth: '10px',\n },\n }),\n scrollButtons: ({ theme }) => ({\n color: theme.palette.text.primary,\n // do not hide disabled scroll buttons\n '&.Mui-disabled': {\n opacity: '1',\n color: theme.palette.disabled.primary,\n },\n }),\n },\n variants: [\n {\n props: { template: 'underlined' },\n style: ({ theme }) => ({\n // align with rest of the page, due to extra space\n marginLeft: '-6px',\n marginRight: '-6px',\n maxWidth: 'none',\n // scroll container\n '& .MuiTabs-scroller': {\n '&::-webkit-scrollbar:horizontal': {\n height: '16px',\n },\n '&::-webkit-scrollbar-thumb:horizontal, &::-webkit-scrollbar-track:horizontal': {\n borderWidth: '6px',\n },\n },\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // extra space for the focus indicator\n padding: '6px',\n // remove gap between tabs\n gap: '0',\n },\n // indicator line\n '& .MuiTabs-indicator': {\n // move directly into tab border\n bottom: '6px',\n '&:before': {\n // make full-width\n inset: '0',\n },\n },\n // SSR handling\n '& .MuiTab-root .MuiTabs-indicator': {\n bottom: '-12px',\n [theme.breakpoints.down('md')]: {\n bottom: '-10px',\n },\n '&:before': {\n // expand from label back to full tab width, prevent clamping by global baseline\n maxWidth: 'none',\n left: '-24px',\n right: '-24px',\n },\n },\n // Tabs itself\n '& .MuiTab-root': {\n // remove space around tab in favor of padding\n margin: '0',\n // increase spacing\n padding: '12px 24px',\n // responsive\n [theme.breakpoints.down('md')]: {\n paddingTop: '10px',\n paddingBottom: '10px',\n },\n // style adjust\n borderRadius: '0',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os300 : theme.palette.onSurface.os700,\n // font\n ...theme.typography.subheadline,\n [theme.breakpoints.up('xs')]: {\n fontWeight: '300',\n },\n // bottom border\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n left: '0',\n right: '0',\n bottom: '0',\n height: '1px',\n backgroundColor: theme.palette.onSurface.os500,\n },\n // hover effect\n '&:hover, &.Mui-focusVisible': {\n // increase size of the border\n '&:after': {\n height: '2px',\n },\n },\n // active\n '&.Mui-selected': {\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n backgroundColor:\n theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.primary,\n },\n // disabled\n '&.Mui-disabled': {\n color: theme.palette.disabled.tertiary,\n },\n // focused style\n '&.Mui-focusVisible': {\n // higher z-index than others\n zIndex: '10',\n // extra white border\n boxShadow: `0 0 0 2px ${theme.palette.background.primary}`,\n '&:before': {\n // move outside\n inset: '-2px',\n // add extra border radius\n borderRadius: '4px',\n },\n },\n },\n }),\n },\n {\n props: { template: 'buttons' },\n style: ({ theme }) => ({\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '8px',\n },\n // hide bottom line\n '& .MuiTabs-indicator': {\n display: 'none',\n },\n // restyle tabs to buttons\n '& .MuiTab-root': {\n border: '1px solid transparent',\n padding: '6px 16px',\n borderRadius: '1000px',\n transition: 'all 0.3s ease-out',\n fontSize: '14px',\n fontWeight: '700',\n marginBottom: '2px',\n ...updateFocusRingStyle('0px', false),\n ...getInteractiveStyle(\n {\n backgroundColor: 'transparent',\n color: theme.palette.onSurface.os500,\n },\n {\n backgroundColor: theme.palette.surface.primary,\n color: theme.palette.text.primary,\n },\n ),\n '&.Mui-selected': {\n ...getInteractiveStyle(\n {\n backgroundColor: theme.palette.brand.quarternary,\n color: theme.palette.text.primary,\n borderColor: theme.palette.brand.primary,\n },\n {\n backgroundColor: theme.palette.brand.quarternary,\n color: theme.palette.brand.primary,\n borderColor: theme.palette.brand.primary,\n },\n ),\n },\n // responsive\n [theme.breakpoints.down('md')]: {\n '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n fontWeight: '400',\n },\n },\n },\n }),\n },\n {\n // variant used in the SecondaryNavigation\n props: { template: 'navigation' },\n style: ({ theme }) => ({\n // container\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '4px',\n },\n // manual align\n paddingTop: '11px',\n [theme.breakpoints.down('xl')]: {\n paddingTop: '13px',\n },\n [theme.breakpoints.down('lg')]: {\n paddingTop: '8px',\n },\n // restyle tabs typography\n '& .MuiTab-root': {\n marginBottom: '11px',\n [theme.breakpoints.down('xl')]: {\n marginBottom: '13px',\n },\n [theme.breakpoints.down('lg')]: {\n marginBottom: '8px',\n },\n ...theme.typography.list,\n },\n // SSR handling\n '& .MuiTab-root .MuiTabs-indicator': {\n bottom: '-19px',\n [theme.breakpoints.down('xl')]: {\n bottom: '-21px',\n },\n [theme.breakpoints.down('lg')]: {\n bottom: '-16px',\n },\n },\n }),\n },\n {\n props: { template: 'segmented' },\n style: ({ theme }) => ({\n // used for background\n color: theme.palette.mode === 'dark' ? theme.palette.surface.primary : theme.palette.transparent.secondary,\n // container\n '& .MuiTabs-scroller': {\n backgroundColor: 'currentColor',\n borderRadius: '1000px',\n },\n '& .MuiTabs-list, & .MuiTabs-flexContainer': {\n // reduce gap between tabs\n gap: '8px',\n },\n // SSR handling\n '& .MuiTab-root .MuiTabs-indicator': {\n display: 'none',\n },\n // restyle indicator to white bordered travelling background\n '& .MuiTabs-indicator': {\n color: theme.palette.mode === 'dark' ? theme.palette.surface.secondary : theme.palette.common.white,\n // proportion\n height: '100%',\n // z-index bellow <Tab />\n zIndex: '10',\n borderRadius: '1000px',\n // make sure border from :before is not visible when no tab is selected\n overflow: 'hidden',\n '&:before': {\n inset: '0',\n borderRadius: 'inherit',\n border: `2px solid ${theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary}`,\n },\n },\n // restyle tabs\n '& .MuiTab-root': {\n margin: '0',\n borderRadius: '1000px',\n transition: 'all 0.3s ease-out',\n // proportions\n padding: '6px 16px',\n // space between icon and text\n gap: '10px',\n // z-index above indicator\n zIndex: '20',\n // icon inside\n '& .MuiSvgIcon-root': {\n fontSize: '20px',\n marginTop: '4px',\n marginBottom: '4px',\n },\n // change typography\n color: theme.palette.text.primary,\n ...getTypography('subheadline', theme.direction === 'rtl', 'small'),\n [theme.breakpoints.up('md')]: {\n ...getTypography('subheadline', theme.direction === 'rtl', 'large'),\n // update proportions\n padding: '8px 16px',\n },\n [theme.breakpoints.up('xs')]: {\n '&, &.Mui-selected, & .FlowTab-selectedLabel': {\n fontWeight: '400',\n },\n },\n // hover and focus\n '&:hover, &.Mui-focusVisible': {\n backgroundColor: theme.palette.surface.primary,\n },\n // active\n '&.Mui-selected': {\n color: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.text.primary,\n '&:hover, &.Mui-focusVisible': {\n backgroundColor: 'transparent',\n },\n },\n // disabled\n '&.Mui-disabled': {\n color: theme.palette.disabled.tertiary,\n },\n },\n }),\n },\n ],\n};\n"],"names":["flowTabs","defaultProps","template","scrollButtons","allowScrollButtonsMobile","visibleScrollbar","variant","slots","TabsScrollButton","slotProps","scroller","ownerState","style","marginBottom","styleOverrides","root","theme","minHeight","alignItems","gap","fullWidth","flexGrow","centered","justifyContent","opacity","bottom","left","right","breakpoints","up","indicator","maxWidth","background","display","height","color","palette","mode","brand","secondary","primary","indicatorColor","text","content","position","top","backgroundColor","borderWidth","disabled","variants","props","marginLeft","marginRight","padding","inset","down","margin","paddingTop","paddingBottom","borderRadius","onSurface","os300","os700","typography","subheadline","fontWeight","os500","surface","transparent","tertiary","zIndex","boxShadow","border","transition","fontSize","updateFocusRingStyle","getInteractiveStyle","quarternary","borderColor","list","common","white","overflow","marginTop","getTypography","direction"],"mappings":"8LAMO,MAAMA,EAAyC,CACpDC,aAAc,CACZC,SAAU,aAEVC,cAAe,OACfC,0BAA0B,EAC1BC,kBAAkB,EAClBC,QAAS,aACTC,MAAO,CACLJ,cAAeK,EAAAA,kBAEjBC,UAAW,CAGTC,SAAWC,IACuB,IAAhCA,EAAWN,kBAA8B,CACvCO,MAAO,CAAEC,aAAc,QAI/BC,eAAgB,CACdC,KAAM,EAAGC,QAAOL,iBAAY,CAC1BM,UAAW,IACXC,WAAY,SAEZC,IAAK,OACDR,EAAWS,WAAoC,cAAvBT,EAAWL,QACnC,CACE,iBAAkB,CAChBe,SAAU,MAGd,MAGAV,EAAWW,SAAW,CAAEC,eAAgB,UAAa,CAAA,EAEzD,kDAAmD,CAEjD,uBAAwB,CACtBC,QAAS,MAKb,oCAAqC,CACnCC,OAAQ,QAER,WAAY,CACVC,KAAM,IACNC,MAAO,MAKX,4CAA6C,CAC3CR,IAAK,OACL,CAACH,EAAMY,YAAYC,GAAG,OAAQ,CAC5BV,IAAK,WAIXW,UAAW,EAAGd,QAAOL,iBAAY,CAC/BoB,SAAU,OACVC,WAAY,cACZC,QAAS,QACTC,OAAQ,MACRC,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQE,MAAMC,UAAYvB,EAAMoB,QAAQE,MAAME,WACzD,cAA9B7B,EAAW8B,gBAAkC,CAC/CN,MAAOnB,EAAMoB,QAAQM,KAAKF,SAG5B,WAAY,CACVP,QAAS,QACTU,QAAS,KACTC,SAAU,WACVlB,KAAM,MACNC,MAAO,MACPkB,IAAK,IACLpB,OAAQ,IACRqB,gBAAiB,kBAGrBpC,SAAU,EAAGC,iBAAY,CACvBU,SAAUV,EAAWS,WAAoC,cAAvBT,EAAWL,QAA0B,IAAM,IAE7E,kCAAmC,CACjC4B,OAAQ,QAEV,+EAAgF,CAC9Ea,YAAa,UAGjB5C,cAAe,EAAGa,YAAO,CACvBmB,MAAOnB,EAAMoB,QAAQM,KAAKF,QAE1B,iBAAkB,CAChBhB,QAAS,IACTW,MAAOnB,EAAMoB,QAAQY,SAASR,YAIpCS,SAAU,CACR,CACEC,MAAO,CAAEhD,SAAU,cACnBU,MAAO,EAAGI,YAAO,CAEfmC,WAAY,OACZC,YAAa,OACbrB,SAAU,OAEV,sBAAuB,CACrB,kCAAmC,CACjCG,OAAQ,QAEV,+EAAgF,CAC9Ea,YAAa,QAIjB,4CAA6C,CAE3CM,QAAS,MAETlC,IAAK,KAGP,uBAAwB,CAEtBM,OAAQ,MACR,WAAY,CAEV6B,MAAO,MAIX,oCAAqC,CACnC7B,OAAQ,QACR,CAACT,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B9B,OAAQ,SAEV,WAAY,CAEVM,SAAU,OACVL,KAAM,QACNC,MAAO,UAIX,iBAAkB,CAEhB6B,OAAQ,IAERH,QAAS,YAET,CAACrC,EAAMY,YAAY2B,KAAK,OAAQ,CAC9BE,WAAY,OACZC,cAAe,QAGjBC,aAAc,IACdxB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQwB,UAAUC,MAAQ7C,EAAMoB,QAAQwB,UAAUE,SAE5F9C,EAAM+C,WAAWC,YACpB,CAAChD,EAAMY,YAAYC,GAAG,OAAQ,CAC5BoC,WAAY,OAGd,UAAW,CACTtB,QAAS,KACTC,SAAU,WACVlB,KAAM,IACNC,MAAO,IACPF,OAAQ,IACRS,OAAQ,MACRY,gBAAiB9B,EAAMoB,QAAQwB,UAAUM,OAG3C,8BAA+B,CAE7B,UAAW,CACThC,OAAQ,QAIZ,iBAAkB,CAChBC,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQE,MAAMC,UAAYvB,EAAMoB,QAAQE,MAAME,QAC3FM,gBACyB,SAAvB9B,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQ+B,QAAQ3B,QAAUxB,EAAMoB,QAAQgC,YAAY5B,SAG9F,iBAAkB,CAChBL,MAAOnB,EAAMoB,QAAQY,SAASqB,UAGhC,qBAAsB,CAEpBC,OAAQ,KAERC,UAAW,aAAavD,EAAMoB,QAAQJ,WAAWQ,UACjD,WAAY,CAEVc,MAAO,OAEPK,aAAc,YAMxB,CACET,MAAO,CAAEhD,SAAU,WACnBU,MAAO,EAAGI,YAAO,CAEf,4CAA6C,CAE3CG,IAAK,OAGP,uBAAwB,CACtBc,QAAS,QAGX,iBAAkB,CAChBuC,OAAQ,wBACRnB,QAAS,WACTM,aAAc,SACdc,WAAY,oBACZC,SAAU,OACVT,WAAY,MACZpD,aAAc,SACX8D,EAAAA,qBAAqB,OAAO,MAC5BC,sBACD,CACE9B,gBAAiB,cACjBX,MAAOnB,EAAMoB,QAAQwB,UAAUM,OAEjC,CACEpB,gBAAiB9B,EAAMoB,QAAQ+B,QAAQ3B,QACvCL,MAAOnB,EAAMoB,QAAQM,KAAKF,UAG9B,iBAAkB,IACboC,sBACD,CACE9B,gBAAiB9B,EAAMoB,QAAQE,MAAMuC,YACrC1C,MAAOnB,EAAMoB,QAAQM,KAAKF,QAC1BsC,YAAa9D,EAAMoB,QAAQE,MAAME,SAEnC,CACEM,gBAAiB9B,EAAMoB,QAAQE,MAAMuC,YACrC1C,MAAOnB,EAAMoB,QAAQE,MAAME,QAC3BsC,YAAa9D,EAAMoB,QAAQE,MAAME,WAKvC,CAACxB,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B,8CAA+C,CAC7CU,WAAY,YAMtB,CAEEf,MAAO,CAAEhD,SAAU,cACnBU,MAAO,EAAGI,YAAO,CAEf,4CAA6C,CAE3CG,IAAK,OAGPsC,WAAY,OACZ,CAACzC,EAAMY,YAAY2B,KAAK,OAAQ,CAC9BE,WAAY,QAEd,CAACzC,EAAMY,YAAY2B,KAAK,OAAQ,CAC9BE,WAAY,OAGd,iBAAkB,CAChB5C,aAAc,OACd,CAACG,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B1C,aAAc,QAEhB,CAACG,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B1C,aAAc,UAEbG,EAAM+C,WAAWgB,MAGtB,oCAAqC,CACnCtD,OAAQ,QACR,CAACT,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B9B,OAAQ,SAEV,CAACT,EAAMY,YAAY2B,KAAK,OAAQ,CAC9B9B,OAAQ,aAKhB,CACEyB,MAAO,CAAEhD,SAAU,aACnBU,MAAO,EAAGI,YAAO,CAEfmB,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQ+B,QAAQ3B,QAAUxB,EAAMoB,QAAQgC,YAAY7B,UAEjG,sBAAuB,CACrBO,gBAAiB,eACjBa,aAAc,UAEhB,4CAA6C,CAE3CxC,IAAK,OAGP,oCAAqC,CACnCc,QAAS,QAGX,uBAAwB,CACtBE,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQ+B,QAAQ5B,UAAYvB,EAAMoB,QAAQ4C,OAAOC,MAE9F/C,OAAQ,OAERoC,OAAQ,KACRX,aAAc,SAEduB,SAAU,SACV,WAAY,CACV5B,MAAO,IACPK,aAAc,UACda,OAAQ,aAAoC,SAAvBxD,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQE,MAAMC,UAAYvB,EAAMoB,QAAQM,KAAKF,YAI5G,iBAAkB,CAChBgB,OAAQ,IACRG,aAAc,SACdc,WAAY,oBAEZpB,QAAS,WAETlC,IAAK,OAELmD,OAAQ,KAER,qBAAsB,CACpBI,SAAU,OACVS,UAAW,MACXtE,aAAc,OAGhBsB,MAAOnB,EAAMoB,QAAQM,KAAKF,WACvB4C,EAAAA,cAAc,cAAmC,QAApBpE,EAAMqE,UAAqB,SAC3D,CAACrE,EAAMY,YAAYC,GAAG,OAAQ,IACzBuD,EAAAA,cAAc,cAAmC,QAApBpE,EAAMqE,UAAqB,SAE3DhC,QAAS,YAEX,CAACrC,EAAMY,YAAYC,GAAG,OAAQ,CAC5B,8CAA+C,CAC7CoC,WAAY,QAIhB,8BAA+B,CAC7BnB,gBAAiB9B,EAAMoB,QAAQ+B,QAAQ3B,SAGzC,iBAAkB,CAChBL,MAA8B,SAAvBnB,EAAMoB,QAAQC,KAAkBrB,EAAMoB,QAAQE,MAAMC,UAAYvB,EAAMoB,QAAQM,KAAKF,QAC1F,8BAA+B,CAC7BM,gBAAiB,gBAIrB,iBAAkB,CAChBX,MAAOnB,EAAMoB,QAAQY,SAASqB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.flowInputLabel={defaultProps:{},styleOverrides:{root:({theme:t,ownerState:a})=>({pointerEvents:"none",transition:"inherit",color:"inherit",[t.breakpoints.up("xs")]:{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},..."static"===a["data-variant"]&&{...t.typography.caption1,position:"static","&, &&.MuiInputLabel-shrink":{transform:"none"},userSelect:"text",cursor:"auto",pointerEvents:"auto",transition:"none",padding:"0 8px 4px","&:not(.Mui-disabled):not(.Mui-error)":{color:t.palette.text.primary}}}),filled:t=>({transform:"translate(12px, 18px) scale(1)","&.MuiInputLabel-shrink":{transform:"translate(12px, 7px) scale(0.75)"},"&.MuiInputLabel-sizeSmall":{transform:"translate(12px, 13px) scale(1)","&.MuiInputLabel-shrink":{transform:"translate(12px, 7px) scale(0.75)"}},..."static"!==t["data-variant"]&&{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)":{transform:"translate(44px, 18px) scale(1)","&.MuiInputLabel-sizeSmall":{transform:"translate(44px, 13px) scale(1);"},"&.MuiInputLabel-shrink":{transform:"translate(44px, 7px) scale(0.75)"}}}}),outlined:t=>({..."static"===t["data-variant"]?{"& + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend":{width:"0"}}:{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)":{transform:"translate(44px, 16px) scale(1);","&.MuiInputLabel-sizeSmall":{transform:"translate(44px, 9px) scale(1);"},"&.MuiInputLabel-shrink":{transform:"translate(14px, -9px) scale(0.75);"}}}}),standard:({ownerState:t})=>({..."static"===t["data-variant"]?{padding:"0","& + .MuiInputBase-root":{marginTop:"0"}}:{"&:has(+ .MuiInputBase-adornedStart)":{transform:"translate(32px, 20px) scale(1);","&.MuiInputLabel-sizeSmall":{transform:"translate(32px, 18px) scale(1);"},"&.MuiInputLabel-shrink":{transform:"translate(0, -1.5px) scale(0.75)"}}}})}};
|
|
1
|
+
"use strict";exports.flowInputLabel={defaultProps:{},styleOverrides:{root:({theme:t,ownerState:a})=>({pointerEvents:"none",transition:"inherit",color:"inherit",[t.breakpoints.up("xs")]:{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},..."static"===a["data-variant"]&&{...t.typography.caption1,position:"static","&, &&.MuiInputLabel-shrink":{transform:"none"},userSelect:"text",cursor:"auto",pointerEvents:"auto",transition:"none",padding:"0 8px 4px","&:not(.Mui-disabled):not(.Mui-error)":{color:t.palette.text.primary}},..."static"!==a["data-variant"]&&{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart):not(:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)) + .MuiInputBase-root .MuiInputBase-input::-webkit-input-placeholder":{opacity:"0"}}}),filled:t=>({transform:"translate(12px, 18px) scale(1)","&.MuiInputLabel-shrink":{transform:"translate(12px, 7px) scale(0.75)"},"&.MuiInputLabel-sizeSmall":{transform:"translate(12px, 13px) scale(1)","&.MuiInputLabel-shrink":{transform:"translate(12px, 7px) scale(0.75)"}},..."static"!==t["data-variant"]&&{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)":{transform:"translate(44px, 18px) scale(1)","&.MuiInputLabel-sizeSmall":{transform:"translate(44px, 13px) scale(1);"},"&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)":{transform:"translate(44px, 7px) scale(0.75)"}}}}),outlined:t=>({..."static"===t["data-variant"]?{"& + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend":{width:"0"}}:{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)":{transform:"translate(44px, 16px) scale(1);","&.MuiInputLabel-sizeSmall":{transform:"translate(44px, 9px) scale(1);"},"&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)":{transform:"translate(14px, -9px) scale(0.75);"},"&:not(:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)) + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend":{maxWidth:"0.01px"}}}}),standard:({ownerState:t})=>({..."static"===t["data-variant"]?{padding:"0","& + .MuiInputBase-root":{marginTop:"0"}}:{"&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)":{transform:"translate(32px, 20px) scale(1);","&.MuiInputLabel-sizeSmall":{transform:"translate(32px, 18px) scale(1);"},"&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)":{transform:"translate(0, -1.5px) scale(0.75)"}}}})}};
|
|
2
2
|
//# sourceMappingURL=inputLabel.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputLabel.theme.js","sources":["../../../../../src/materialui/textfield/inputLabel.theme.ts"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowInputLabel: Components<Theme>['MuiInputLabel'] = {\n defaultProps: {},\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n // remove pointer events to prevent blur and focus formControl\n pointerEvents: 'none',\n transition: 'inherit',\n color: 'inherit',\n [theme.breakpoints.up('xs')]: {\n fontSize: '16px',\n lineHeight: '24px',\n fontWeight: '400',\n },\n ...(ownerState['data-variant'] === 'static' && {\n ...theme.typography.caption1,\n position: 'static',\n '&, &&.MuiInputLabel-shrink': {\n transform: 'none',\n },\n userSelect: 'text',\n cursor: 'auto',\n pointerEvents: 'auto',\n transition: 'none',\n padding: '0 8px 4px',\n // overwrite higher priority style from formLabel\n '&:not(.Mui-disabled):not(.Mui-error)': {\n color: theme.palette.text.primary,\n },\n }),\n }),\n filled: (ownerState) => ({\n transform: 'translate(12px, 18px) scale(1)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(12px, 7px) scale(0.75)',\n },\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(12px, 13px) scale(1)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(12px, 7px) scale(0.75)',\n },\n },\n ...(ownerState['data-variant'] !== 'static' && {\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)': {\n transform: 'translate(44px, 18px) scale(1)',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(44px, 13px) scale(1);',\n },\n '&.MuiInputLabel-shrink': {\n transform: 'translate(44px, 7px) scale(0.75)',\n },\n },\n }),\n }),\n outlined: (ownerState) => ({\n ...(ownerState['data-variant'] === 'static'\n ? {\n // do not show 'border space' created by legend where normally labels go in\n '& + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend': {\n width: '0',\n },\n }\n : {\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)': {\n transform: 'translate(44px, 16px) scale(1);',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(44px, 9px) scale(1);',\n },\n '&.MuiInputLabel-shrink': {\n transform: 'translate(14px, -9px) scale(0.75);',\n },\n },\n }),\n }),\n standard: ({ ownerState }) => ({\n ...(ownerState['data-variant'] === 'static'\n ? {\n padding: '0',\n '& + .MuiInputBase-root': {\n marginTop: '0',\n },\n }\n : {\n '&:has(+ .MuiInputBase-adornedStart)': {\n transform: 'translate(32px, 20px) scale(1);',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(32px, 18px) scale(1);',\n },\n '&.MuiInputLabel-shrink': {\n transform: 'translate(0, -1.5px) scale(0.75)',\n },\n },\n }),\n }),\n },\n};\n"],"names":["defaultProps","styleOverrides","root","theme","ownerState","pointerEvents","transition","color","breakpoints","up","fontSize","lineHeight","fontWeight","typography","caption1","position","transform","userSelect","cursor","padding","palette","text","primary","filled","outlined","width","standard","marginTop"],"mappings":"oCAEkE,CAChEA,aAAc,CAAA,EACdC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAE1BC,cAAe,OACfC,WAAY,UACZC,MAAO,UACP,CAACJ,EAAMK,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY,UAEqB,WAA/BR,EAAW,iBAAgC,IAC1CD,EAAMU,WAAWC,SACpBC,SAAU,SACV,6BAA8B,CAC5BC,UAAW,QAEbC,WAAY,OACZC,OAAQ,OACRb,cAAe,OACfC,WAAY,OACZa,QAAS,YAET,uCAAwC,CACtCZ,MAAOJ,EAAMiB,QAAQC,KAAKC,
|
|
1
|
+
{"version":3,"file":"inputLabel.theme.js","sources":["../../../../../src/materialui/textfield/inputLabel.theme.ts"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowInputLabel: Components<Theme>['MuiInputLabel'] = {\n defaultProps: {},\n styleOverrides: {\n root: ({ theme, ownerState }) => ({\n // remove pointer events to prevent blur and focus formControl\n pointerEvents: 'none',\n transition: 'inherit',\n color: 'inherit',\n [theme.breakpoints.up('xs')]: {\n fontSize: '16px',\n lineHeight: '24px',\n fontWeight: '400',\n },\n ...(ownerState['data-variant'] === 'static' && {\n ...theme.typography.caption1,\n position: 'static',\n '&, &&.MuiInputLabel-shrink': {\n transform: 'none',\n },\n userSelect: 'text',\n cursor: 'auto',\n pointerEvents: 'auto',\n transition: 'none',\n padding: '0 8px 4px',\n // overwrite higher priority style from formLabel\n '&:not(.Mui-disabled):not(.Mui-error)': {\n color: theme.palette.text.primary,\n },\n }),\n ...(ownerState['data-variant'] !== 'static' && {\n // hide placeholder in all variants while the label with startAdornment rests over the input,\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart):not(:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)) + .MuiInputBase-root .MuiInputBase-input::-webkit-input-placeholder':\n {\n opacity: '0',\n },\n }),\n }),\n filled: (ownerState) => ({\n transform: 'translate(12px, 18px) scale(1)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(12px, 7px) scale(0.75)',\n },\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(12px, 13px) scale(1)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(12px, 7px) scale(0.75)',\n },\n },\n ...(ownerState['data-variant'] !== 'static' && {\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)': {\n transform: 'translate(44px, 18px) scale(1)',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(44px, 13px) scale(1);',\n },\n // float only with real focus, value or the Flow-ForceShrink opt-out class,\n // @mui otherwise forces shrink with startAdornment, see https://github.com/mui/material-ui/issues/13898\n '&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)': {\n transform: 'translate(44px, 7px) scale(0.75)',\n },\n },\n }),\n }),\n outlined: (ownerState) => ({\n ...(ownerState['data-variant'] === 'static'\n ? {\n // do not show 'border space' created by legend where normally labels go in\n '& + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend': {\n width: '0',\n },\n }\n : {\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)': {\n transform: 'translate(44px, 16px) scale(1);',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(44px, 9px) scale(1);',\n },\n // float only with real focus, value or the Flow-ForceShrink opt-out class,\n // @mui otherwise forces shrink with startAdornment, see https://github.com/mui/material-ui/issues/13898\n '&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)': {\n transform: 'translate(14px, -9px) scale(0.75);',\n },\n // close the border notch while the label rests, 0.01px matches the @mui closed notch value\n '&:not(:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)) + .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline legend':\n {\n maxWidth: '0.01px',\n },\n },\n }),\n }),\n standard: ({ ownerState }) => ({\n ...(ownerState['data-variant'] === 'static'\n ? {\n padding: '0',\n '& + .MuiInputBase-root': {\n marginTop: '0',\n },\n }\n : {\n '&:has(+ .MuiInputBase-adornedStart .MuiInputAdornment-positionStart)': {\n transform: 'translate(32px, 20px) scale(1);',\n '&.MuiInputLabel-sizeSmall': {\n transform: 'translate(32px, 18px) scale(1);',\n },\n // float only with real focus, value or the Flow-ForceShrink opt-out class,\n // @mui otherwise forces shrink with startAdornment, see https://github.com/mui/material-ui/issues/13898\n '&.MuiInputLabel-shrink:where(.Mui-focused, .MuiFormLabel-filled, .Flow-ForceShrink)': {\n transform: 'translate(0, -1.5px) scale(0.75)',\n },\n },\n }),\n }),\n },\n};\n"],"names":["defaultProps","styleOverrides","root","theme","ownerState","pointerEvents","transition","color","breakpoints","up","fontSize","lineHeight","fontWeight","typography","caption1","position","transform","userSelect","cursor","padding","palette","text","primary","opacity","filled","outlined","width","maxWidth","standard","marginTop"],"mappings":"oCAEkE,CAChEA,aAAc,CAAA,EACdC,eAAgB,CACdC,KAAM,EAAGC,QAAOC,iBAAY,CAE1BC,cAAe,OACfC,WAAY,UACZC,MAAO,UACP,CAACJ,EAAMK,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY,UAEqB,WAA/BR,EAAW,iBAAgC,IAC1CD,EAAMU,WAAWC,SACpBC,SAAU,SACV,6BAA8B,CAC5BC,UAAW,QAEbC,WAAY,OACZC,OAAQ,OACRb,cAAe,OACfC,WAAY,OACZa,QAAS,YAET,uCAAwC,CACtCZ,MAAOJ,EAAMiB,QAAQC,KAAKC,aAGK,WAA/BlB,EAAW,iBAAgC,CAE7C,8MACE,CACEmB,QAAS,QAIjBC,OAASpB,IAAU,CACjBY,UAAW,iCACX,yBAA0B,CACxBA,UAAW,oCAEb,4BAA6B,CAC3BA,UAAW,iCACX,yBAA0B,CACxBA,UAAW,wCAGoB,WAA/BZ,EAAW,iBAAgC,CAC7C,uEAAwE,CACtEY,UAAW,iCACX,4BAA6B,CAC3BA,UAAW,mCAIb,sFAAuF,CACrFA,UAAW,wCAKnBS,SAAWrB,IAAU,IACgB,WAA/BA,EAAW,gBACX,CAEE,qEAAsE,CACpEsB,MAAO,MAGX,CACE,uEAAwE,CACtEV,UAAW,kCACX,4BAA6B,CAC3BA,UAAW,kCAIb,sFAAuF,CACrFA,UAAW,sCAGb,wIACE,CACEW,SAAU,cAKxBC,SAAU,EAAGxB,iBAAY,IACY,WAA/BA,EAAW,gBACX,CACEe,QAAS,IACT,yBAA0B,CACxBU,UAAW,MAGf,CACE,uEAAwE,CACtEb,UAAW,kCACX,4BAA6B,CAC3BA,UAAW,mCAIb,sFAAuF,CACrFA,UAAW"}
|
|
@@ -400,7 +400,7 @@ declare module '@mui/material/Card' {
|
|
|
400
400
|
*/
|
|
401
401
|
iconSlots?: {
|
|
402
402
|
icon?: ComponentType<SvgIconProps>;
|
|
403
|
-
|
|
403
|
+
selectedIcon?: ComponentType<SvgIconProps>;
|
|
404
404
|
hoverIcon?: ComponentType<SvgIconProps>;
|
|
405
405
|
hoverSelectedIcon?: ComponentType<SvgIconProps>;
|
|
406
406
|
};
|
|
@@ -485,6 +485,16 @@ declare module '@mui/material/LinearProgress' {
|
|
|
485
485
|
size?: 'small' | 'medium';
|
|
486
486
|
}
|
|
487
487
|
}
|
|
488
|
+
declare module '@mui/material/Pagination' {
|
|
489
|
+
interface PaginationPropsVariantOverrides {
|
|
490
|
+
dots: true;
|
|
491
|
+
}
|
|
492
|
+
}
|
|
493
|
+
declare module '@mui/material/PaginationItem' {
|
|
494
|
+
interface PaginationItemPropsVariantOverrides {
|
|
495
|
+
dots: true;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
488
498
|
declare module '@mui/x-date-pickers' {
|
|
489
499
|
/**
|
|
490
500
|
* Extend pickers shortcut with chip properties that are applied in code already
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("@mui/system");function t(e){return e&&e.__esModule?e:{default:e}}var
|
|
1
|
+
"use strict";var e=require("@mui/system");function t(e){return e&&e.__esModule?e:{default:e}}var n=t(require("@skodaflow/web-tokens/src/tokens.json"));const i=e=>["SKODA Next"+(e?" R2L":""),"Helvetica","Arial","system-ui","sans-serif"].join(","),o=(e,t,o)=>{const a=n.default["flow-typography"].find(t=>t.name===`${o??"small"}-${e}`);return a?{...a.style,fontFamily:i(t),...["h1","h2","h3","h4","display","subheadline"].includes(e)&&{textWrap:"balance"}}:null},a=(t,n,i)=>{const a=e.createBreakpoints(n);return{...o(t,i,"small"),[a.up("md")]:{...o(t,i,"medium")},[a.up("xl")]:{...o(t,i,"large")}}};exports.generateTypography=a,exports.getFontFamily=i,exports.getTypography=o,exports.getTypographyOptions=(e,t)=>{const n=a("body",e,t);return{fontFamily:i(t),body:n,...Object.fromEntries(["h1","h2","h3","h4","subheadline","subtitle1","subtitle2","display","list","disclaimer","disclaimer1","disclaimer2","caption1","caption2"].map(n=>[n,a(n,e,t)])),body1:n,body2:n,h5:a("subheadline",e,t),h6:a("caption1",e,t),caption:a("caption2",e,t),overline:a("caption1",e,t),button:{fontFamily:i(t),letterSpacing:"0.75px",textTransform:"none",textDecoration:"none",fontSize:"16px",fontWeight:"700",lineHeight:"16px"}}};
|
|
2
2
|
//# sourceMappingURL=typography.theme.js.map
|
|
@@ -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","bodyTypo","body","Object","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"uJASO,MAAMA,EAAiBC,GACrB,CAAC,cAAaA,EAAM,OAAS,IAAM,YAAa,QAAS,YAAa,cAAcC,KAAK,KAMrFC,EAAgB,CAACC,EAAiBH,EAAcI,KAC3D,MAAMC,EAAOC,EAAAA,QAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,GAAQ,WAAWD,
|
|
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","bodyTypo","body","Object","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"uJASO,MAAMA,EAAiBC,GACrB,CAAC,cAAaA,EAAM,OAAS,IAAM,YAAa,QAAS,YAAa,cAAcC,KAAK,KAMrFC,EAAgB,CAACC,EAAiBH,EAAcI,KAC3D,MAAMC,EAAOC,EAAAA,QAAO,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,EAAAA,kBAAkBF,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,sHAQD,CAACc,EAAwCd,KAC3E,MAAMkB,EAAWL,EAAmB,OAAQC,EAAoBd,GAEhE,MAAO,CACLU,WAAYX,EAAcC,GAC1BmB,KAAMD,KACHE,OAAOC,YACR,CACE,KACA,KACA,KACA,KACA,cACA,YACA,YACA,UACA,OACA,aACA,cACA,cACA,WACA,YACAC,IAAKnB,GAAY,CAACA,EAASU,EAAmBV,EAASW,EAAoBd,MAG/EuB,MAAOL,EACPM,MAAON,EACPO,GAAIZ,EAAmB,cAAeC,EAAoBd,GAC1D0B,GAAIb,EAAmB,WAAYC,EAAoBd,GACvD2B,QAASd,EAAmB,WAAYC,EAAoBd,GAC5D4B,SAAUf,EAAmB,WAAYC,EAAoBd,GAE7D6B,OAAQ,CACNnB,WAAYX,EAAcC,GAC1B8B,cAAe,SACfC,cAAe,OACfC,eAAgB,OAChBC,SAAU,OACVC,WAAY,MACZC,WAAY"}
|