@skodaflow/web-library 8.3.0 → 8.3.2
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.d.ts +15 -0
- package/cjs/components/advancedTable/agGrid.js +1 -1
- package/cjs/components/advancedTable/agGrid.js.map +1 -1
- package/cjs/components/advancedTable/agGridIcons.d.ts +8 -2
- package/cjs/components/advancedTable/agGridIcons.js +1 -1
- package/cjs/components/advancedTable/agGridIcons.js.map +1 -1
- package/cjs/components/bottomSheet/BottomSheet.d.ts +3 -0
- package/cjs/components/bottomSheet/BottomSheet.js.map +1 -1
- package/cjs/components/carousel/Autoplay.d.ts +4 -4
- package/cjs/components/carousel/Navigation.d.ts +2 -2
- package/cjs/components/carousel/Navigation.js +1 -1
- package/cjs/components/carousel/Navigation.js.map +1 -1
- package/cjs/components/code/Code.d.ts +8 -0
- package/cjs/components/code/Code.js +2 -0
- package/cjs/components/code/Code.js.map +1 -0
- package/cjs/components/code/index.d.ts +1 -0
- package/cjs/components/errorContent/ErrorContent.js +1 -1
- package/cjs/components/errorContent/ErrorContent.js.map +1 -1
- package/cjs/components/footer/FooterIconButton.d.ts +1 -1
- package/cjs/components/footer/FooterIconButton.js.map +1 -1
- package/cjs/components/footer/FooterMenu.js +1 -1
- package/cjs/components/footer/FooterMenu.js.map +1 -1
- package/cjs/components/footer/FooterMenuCollapse.d.ts +25 -0
- package/cjs/components/footer/FooterMenuCollapse.js +2 -0
- package/cjs/components/footer/FooterMenuCollapse.js.map +1 -0
- 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.d.ts +1 -1
- package/cjs/components/header/HeaderLogo.js +1 -1
- package/cjs/components/header/HeaderLogo.js.map +1 -1
- package/cjs/components/header/HeaderNavigationHero.d.ts +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/label/Label.js +1 -1
- package/cjs/components/label/Label.js.map +1 -1
- package/cjs/components/notification/NotificationCenterHeaderButton.d.ts +1 -1
- package/cjs/components/playPauseButton/PlayPauseButton.d.ts +1 -1
- package/cjs/components/promptBar/PromptAttachments.js +1 -1
- package/cjs/components/promptBar/PromptAttachments.js.map +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.d.ts +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.js +1 -1
- package/cjs/components/promptBar/PromptSubmitIconButton.js.map +1 -1
- package/cjs/components/quickLink/QuickLink.js +1 -1
- package/cjs/components/quickLink/QuickLink.js.map +1 -1
- package/cjs/components/search/Search.js +1 -1
- package/cjs/components/search/Search.js.map +1 -1
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/cjs/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/cjs/components/skodaThemeProvider/SkodaThemeProvider.js +1 -1
- package/cjs/components/skodaThemeProvider/SkodaThemeProvider.js.map +1 -1
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.d.ts +1 -2
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.js +1 -1
- package/cjs/components/skodaThemeProvider/plugins/stylisContainerPlugin.js.map +1 -1
- package/cjs/components/textAndCta/AppStoreButton.js +1 -1
- package/cjs/components/textAndCta/AppStoreButton.js.map +1 -1
- package/cjs/components/textAndCta/TextAndCta.d.ts +1 -1
- package/cjs/components/tooltipHeader/TooltipHeader.d.ts +2 -1
- package/cjs/components/upload/Upload.d.ts +1 -1
- package/cjs/components/upload/components/uploadList/UploadListItem.d.ts +1 -1
- package/cjs/components/upload/components/uploadPreview/UploadPreviewImage.d.ts +1 -1
- package/cjs/components/upload/components/uploadWrapper/UploadContent.d.ts +2 -2
- package/cjs/components/upload/components/uploadWrapper/UploadWrapper.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/cjs/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/cjs/materialui/badge/badge.theme.js +1 -1
- package/cjs/materialui/badge/badge.theme.js.map +1 -1
- package/cjs/materialui/button/button.theme.js.map +1 -1
- package/cjs/materialui/button/buttonBase.theme.js +1 -1
- package/cjs/materialui/button/buttonBase.theme.js.map +1 -1
- package/cjs/materialui/dialog/DialogTitle.js +1 -1
- package/cjs/materialui/dialog/DialogTitle.js.map +1 -1
- package/cjs/materialui/slider/SliderValues.d.ts +5 -0
- package/cjs/materialui/slider/SliderValues.js +1 -1
- package/cjs/materialui/slider/SliderValues.js.map +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.d.ts +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.js +1 -1
- package/cjs/materialui/stepper/StepLabelIcon.js.map +1 -1
- package/cjs/materialui/table/stories/actions.d.ts +1 -1
- package/cjs/materialui/table/stories/basic.d.ts +1 -1
- package/cjs/materialui/table/stories/interactive.d.ts +1 -1
- package/cjs/materialui/table/stories/pagination.d.ts +3 -3
- package/cjs/materialui/table/stories/scrollbar.d.ts +1 -1
- package/cjs/materialui/table/stories/selectSort.d.ts +1 -1
- package/cjs/materialui/table/stories/small.d.ts +1 -1
- package/cjs/materialui/table/tablePagination.theme.js +1 -1
- package/cjs/materialui/table/tablePagination.theme.js.map +1 -1
- package/cjs/materialui/tabs/TabPanel.d.ts +2 -2
- package/cjs/materialui/tabs/TabsScrollButton.d.ts +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/inputBase.theme.js +1 -1
- package/cjs/materialui/textfield/inputBase.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 +1 -1
- package/cjs/materialui/themeProvider/baseline.theme.js +1 -1
- package/cjs/materialui/themeProvider/baseline.theme.js.map +1 -1
- package/components/advancedTable/agGrid.d.ts +15 -0
- package/components/advancedTable/agGrid.js +1 -1
- package/components/advancedTable/agGrid.js.map +1 -1
- package/components/advancedTable/agGridIcons.d.ts +8 -2
- package/components/advancedTable/agGridIcons.js +1 -1
- package/components/advancedTable/agGridIcons.js.map +1 -1
- package/components/bottomSheet/BottomSheet.d.ts +3 -0
- package/components/bottomSheet/BottomSheet.js.map +1 -1
- package/components/carousel/Autoplay.d.ts +4 -4
- package/components/carousel/Navigation.d.ts +2 -2
- package/components/carousel/Navigation.js +1 -1
- package/components/carousel/Navigation.js.map +1 -1
- package/components/code/Code.d.ts +8 -0
- package/components/code/Code.js +2 -0
- package/components/code/Code.js.map +1 -0
- package/components/code/index.d.ts +1 -0
- package/components/errorContent/ErrorContent.js +1 -1
- package/components/errorContent/ErrorContent.js.map +1 -1
- package/components/footer/FooterIconButton.d.ts +1 -1
- package/components/footer/FooterIconButton.js.map +1 -1
- package/components/footer/FooterMenu.js +1 -1
- package/components/footer/FooterMenu.js.map +1 -1
- package/components/footer/FooterMenuCollapse.d.ts +25 -0
- package/components/footer/FooterMenuCollapse.js +2 -0
- package/components/footer/FooterMenuCollapse.js.map +1 -0
- 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.d.ts +1 -1
- package/components/header/HeaderLogo.js +1 -1
- package/components/header/HeaderLogo.js.map +1 -1
- package/components/header/HeaderNavigationHero.d.ts +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/label/Label.js +1 -1
- package/components/label/Label.js.map +1 -1
- package/components/notification/NotificationCenterHeaderButton.d.ts +1 -1
- package/components/playPauseButton/PlayPauseButton.d.ts +1 -1
- package/components/promptBar/PromptAttachments.js +1 -1
- package/components/promptBar/PromptAttachments.js.map +1 -1
- package/components/promptBar/PromptSubmitIconButton.d.ts +1 -1
- package/components/promptBar/PromptSubmitIconButton.js +1 -1
- package/components/promptBar/PromptSubmitIconButton.js.map +1 -1
- package/components/quickLink/QuickLink.js +1 -1
- package/components/quickLink/QuickLink.js.map +1 -1
- package/components/search/Search.js +1 -1
- package/components/search/Search.js.map +1 -1
- package/components/secondaryNavigation/SecondaryNavigationCta.js +1 -1
- package/components/secondaryNavigation/SecondaryNavigationCta.js.map +1 -1
- package/components/skodaThemeProvider/SkodaThemeProvider.js +1 -1
- package/components/skodaThemeProvider/SkodaThemeProvider.js.map +1 -1
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.d.ts +1 -2
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.js +1 -1
- package/components/skodaThemeProvider/plugins/stylisContainerPlugin.js.map +1 -1
- package/components/textAndCta/AppStoreButton.js +1 -1
- package/components/textAndCta/AppStoreButton.js.map +1 -1
- package/components/textAndCta/TextAndCta.d.ts +1 -1
- package/components/tooltipHeader/TooltipHeader.d.ts +2 -1
- package/components/upload/Upload.d.ts +1 -1
- package/components/upload/components/uploadList/UploadListItem.d.ts +1 -1
- package/components/upload/components/uploadPreview/UploadPreviewImage.d.ts +1 -1
- package/components/upload/components/uploadWrapper/UploadContent.d.ts +2 -2
- package/components/upload/components/uploadWrapper/UploadWrapper.d.ts +1 -1
- package/index.js +1 -1
- package/materialui/autocomplete/autocomplete.theme.js +1 -1
- package/materialui/autocomplete/autocomplete.theme.js.map +1 -1
- package/materialui/badge/badge.theme.js +1 -1
- package/materialui/badge/badge.theme.js.map +1 -1
- package/materialui/button/button.theme.js.map +1 -1
- package/materialui/button/buttonBase.theme.js +1 -1
- package/materialui/button/buttonBase.theme.js.map +1 -1
- package/materialui/dialog/DialogTitle.js +1 -1
- package/materialui/dialog/DialogTitle.js.map +1 -1
- package/materialui/slider/SliderValues.d.ts +5 -0
- package/materialui/slider/SliderValues.js +1 -1
- package/materialui/slider/SliderValues.js.map +1 -1
- package/materialui/stepper/StepLabelIcon.d.ts +1 -1
- package/materialui/stepper/StepLabelIcon.js +1 -1
- package/materialui/stepper/StepLabelIcon.js.map +1 -1
- package/materialui/table/stories/actions.d.ts +1 -1
- package/materialui/table/stories/basic.d.ts +1 -1
- package/materialui/table/stories/interactive.d.ts +1 -1
- package/materialui/table/stories/pagination.d.ts +3 -3
- package/materialui/table/stories/scrollbar.d.ts +1 -1
- package/materialui/table/stories/selectSort.d.ts +1 -1
- package/materialui/table/stories/small.d.ts +1 -1
- package/materialui/table/tablePagination.theme.js +1 -1
- package/materialui/table/tablePagination.theme.js.map +1 -1
- package/materialui/tabs/TabPanel.d.ts +2 -2
- package/materialui/tabs/TabsScrollButton.d.ts +1 -1
- package/materialui/tabs/tabs.theme.js +1 -1
- package/materialui/tabs/tabs.theme.js.map +1 -1
- package/materialui/textfield/inputBase.theme.js +1 -1
- package/materialui/textfield/inputBase.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 +1 -1
- package/materialui/themeProvider/baseline.theme.js +1 -1
- package/materialui/themeProvider/baseline.theme.js.map +1 -1
- package/package.json +1 -1
|
@@ -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 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","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,
|
|
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,4 +1,4 @@
|
|
|
1
|
-
import { ElementType } from 'react';
|
|
1
|
+
import React, { ElementType } from 'react';
|
|
2
2
|
import { BoxProps } from '@mui/material';
|
|
3
3
|
export interface TabPanelProps extends BoxProps<ElementType> {
|
|
4
4
|
/**
|
|
@@ -18,4 +18,4 @@ export interface TabPanelProps extends BoxProps<ElementType> {
|
|
|
18
18
|
/**
|
|
19
19
|
* Show or hide content based on the provided value and index
|
|
20
20
|
*/
|
|
21
|
-
export declare function TabPanel({ children, sx, value, index, keepMounted, ...rest }: TabPanelProps):
|
|
21
|
+
export declare function TabPanel({ children, sx, value, index, keepMounted, ...rest }: TabPanelProps): React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TabsScrollButton as
|
|
1
|
+
import{TabsScrollButton as t}from"./TabsScrollButton.js";import{updateFocusRingStyle as e}from"../../components/focusring/focusring.js";import{getInteractiveStyle as o}from"../button/interactive.js";import{getTypography as r}from"../typography/typography.theme.js";const a={defaultProps:{template:"underlined",scrollButtons:"auto",allowScrollButtonsMobile:!0,visibleScrollbar:!1,variant:"scrollable",slots:{scrollButtons:t},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("0px",!1),...o({backgroundColor:"transparent",color:t.palette.onSurface.os500},{backgroundColor:t.palette.surface.primary,color:t.palette.text.primary}),"&.Mui-selected":{...o({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("subheadline","rtl"===t.direction,"small"),[t.breakpoints.up("md")]:{...r("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}}})}]};export{a as flowTabs};
|
|
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 },\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","styleOverrides","root","theme","ownerState","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","scroller","borderWidth","disabled","variants","props","style","marginLeft","marginRight","padding","inset","margin","down","paddingTop","paddingBottom","borderRadius","onSurface","os300","os700","typography","subheadline","fontWeight","os500","surface","transparent","tertiary","zIndex","boxShadow","border","transition","fontSize","marginBottom","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":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e={defaultProps:{},styleOverrides:{root:({theme:e})=>({color:"inherit",caretColor:e.palette.brand.primary,[e.breakpoints.up("xs")]:{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"&.Mui-focused":{color:e.palette.text.primary},"&&":{"&:before":{borderColor:"currentColor"},"&:after":{borderColor:"currentColor"}}}),input:({theme:e})=>({height:"auto","&[type=password]":{fontFamily:"Arial"},"&::-webkit-input-placeholder":{opacity:"1",color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600},"&.Mui-disabled":{WebkitTextFillColor:"unset","&::-webkit-input-placeholder":{color:"inherit"}}})}};export{e as flowInputBase};
|
|
1
|
+
const e={defaultProps:{},styleOverrides:{root:({theme:e})=>({color:"inherit",caretColor:"dark"===e.palette.mode?e.palette.brand.secondary:e.palette.brand.primary,[e.breakpoints.up("xs")]:{fontSize:"16px",lineHeight:"24px",fontWeight:"400"},"&.Mui-focused":{color:e.palette.text.primary},"&&":{"&:before":{borderColor:"currentColor"},"&:after":{borderColor:"currentColor"}}}),input:({theme:e})=>({height:"auto","&[type=password]":{fontFamily:"Arial"},"&::-webkit-input-placeholder":{opacity:"1",color:"dark"===e.palette.mode?e.palette.onSurface.os200:e.palette.onSurface.os600},"&.Mui-disabled":{WebkitTextFillColor:"unset","&::-webkit-input-placeholder":{color:"inherit"}}})}};export{e as flowInputBase};
|
|
2
2
|
//# sourceMappingURL=inputBase.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputBase.theme.js","sources":["../../../src/materialui/textfield/inputBase.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowInputBase: Components<Theme>['MuiInputBase'] = {\n defaultProps: {},\n styleOverrides: {\n root: ({ theme }) => ({\n color: 'inherit',\n caretColor: theme.palette.brand.primary,\n [theme.breakpoints.up('xs')]: {\n fontSize: '16px',\n lineHeight: '24px',\n fontWeight: '400',\n },\n '&.Mui-focused': {\n color: theme.palette.text.primary,\n },\n '&&': {\n '&:before': {\n borderColor: 'currentColor',\n },\n '&:after': {\n borderColor: 'currentColor',\n },\n },\n }),\n input: ({ theme }) => ({\n height: 'auto',\n // change font for password field, SkodaNext font uses '>>>' instead '***' symbol for the password\n '&[type=password]': {\n fontFamily: 'Arial',\n },\n // placeholder\n '&::-webkit-input-placeholder': {\n opacity: '1',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n },\n '&.Mui-disabled': {\n // remove default @mui style and use currentColor instead\n WebkitTextFillColor: 'unset',\n // placeholder\n '&::-webkit-input-placeholder': {\n color: 'inherit',\n },\n },\n }),\n },\n};\n"],"names":["flowInputBase","defaultProps","styleOverrides","root","theme","color","caretColor","palette","brand","primary","breakpoints","up","fontSize","lineHeight","fontWeight","text","borderColor","input","height","fontFamily","opacity","
|
|
1
|
+
{"version":3,"file":"inputBase.theme.js","sources":["../../../src/materialui/textfield/inputBase.theme.tsx"],"sourcesContent":["import { Components, Theme } from '@mui/material/styles';\n\nexport const flowInputBase: Components<Theme>['MuiInputBase'] = {\n defaultProps: {},\n styleOverrides: {\n root: ({ theme }) => ({\n color: 'inherit',\n caretColor: theme.palette.mode === 'dark' ? theme.palette.brand.secondary : theme.palette.brand.primary,\n [theme.breakpoints.up('xs')]: {\n fontSize: '16px',\n lineHeight: '24px',\n fontWeight: '400',\n },\n '&.Mui-focused': {\n color: theme.palette.text.primary,\n },\n '&&': {\n '&:before': {\n borderColor: 'currentColor',\n },\n '&:after': {\n borderColor: 'currentColor',\n },\n },\n }),\n input: ({ theme }) => ({\n height: 'auto',\n // change font for password field, SkodaNext font uses '>>>' instead '***' symbol for the password\n '&[type=password]': {\n fontFamily: 'Arial',\n },\n // placeholder\n '&::-webkit-input-placeholder': {\n opacity: '1',\n color: theme.palette.mode === 'dark' ? theme.palette.onSurface.os200 : theme.palette.onSurface.os600,\n },\n '&.Mui-disabled': {\n // remove default @mui style and use currentColor instead\n WebkitTextFillColor: 'unset',\n // placeholder\n '&::-webkit-input-placeholder': {\n color: 'inherit',\n },\n },\n }),\n },\n};\n"],"names":["flowInputBase","defaultProps","styleOverrides","root","theme","color","caretColor","palette","mode","brand","secondary","primary","breakpoints","up","fontSize","lineHeight","fontWeight","text","borderColor","input","height","fontFamily","opacity","onSurface","os200","os600","WebkitTextFillColor"],"mappings":"AAEO,MAAMA,EAAmD,CAC9DC,aAAc,CAAA,EACdC,eAAgB,CACdC,KAAM,EAAGC,YAAO,CACdC,MAAO,UACPC,WAAmC,SAAvBF,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQE,MAAMC,UAAYN,EAAMG,QAAQE,MAAME,QAChG,CAACP,EAAMQ,YAAYC,GAAG,OAAQ,CAC5BC,SAAU,OACVC,WAAY,OACZC,WAAY,OAEd,gBAAiB,CACfX,MAAOD,EAAMG,QAAQU,KAAKN,SAE5B,KAAM,CACJ,WAAY,CACVO,YAAa,gBAEf,UAAW,CACTA,YAAa,mBAInBC,MAAO,EAAGf,YAAO,CACfgB,OAAQ,OAER,mBAAoB,CAClBC,WAAY,SAGd,+BAAgC,CAC9BC,QAAS,IACTjB,MAA8B,SAAvBD,EAAMG,QAAQC,KAAkBJ,EAAMG,QAAQgB,UAAUC,MAAQpB,EAAMG,QAAQgB,UAAUE,OAEjG,iBAAkB,CAEhBC,oBAAqB,QAErB,+BAAgC,CAC9BrB,MAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const t={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)"}}}})}};export{t as flowInputLabel};
|
|
1
|
+
const t={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)"}}}})}};export{t as flowInputLabel};
|
|
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":["flowInputLabel","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":"AAEO,MAAMA,EAAqD,CAChEC,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":["flowInputLabel","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":"AAEO,MAAMA,EAAqD,CAChEC,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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BoxProps, SvgIconProps, DialogProps, IconButtonProps, ChipProps } from '@mui/material';
|
|
2
2
|
import { ComponentType, CSSProperties, ElementType } from 'react';
|
|
3
|
-
import type { SpinnerProps } from '
|
|
3
|
+
import type { SpinnerProps } from '../../components/progress/Spinner';
|
|
4
4
|
declare module '@mui/material/styles' {
|
|
5
5
|
interface TypographyVariants {
|
|
6
6
|
display: CSSProperties;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"@skodaflow/web-tokens/src/tokens.json";import{generateTypography as o}from"../typography/typography.theme.js";import{fonts as r}from"./fonts.js";const n=(n,f,l
|
|
1
|
+
import t from"@skodaflow/web-tokens/src/tokens.json";import{generateTypography as o}from"../typography/typography.theme.js";import{fonts as r}from"./fonts.js";const n=(n,e,f,l)=>{const a={...n?{background:"unset",color:l.palette.text.primary,...o("body",e,f)}:{body:{background:"dark"===l.palette.mode?l.palette.onSurface.os900:l.palette.common.white,color:l.palette.text.primary}},[n?"&, *":"*"]:{"@supports not selector(::-webkit-scrollbar)":{scrollbarWidth:"thin",scrollbarColor:l.palette.onSurface.os500},"::-webkit-scrollbar":{border:"2px solid transparent",width:"8px",height:"8px"},"::-webkit-scrollbar-thumb":{border:"2px solid transparent",borderRadius:"100px",background:l.palette.onSurface.os500,backgroundClip:"content-box"},":not(.notracks)::-webkit-scrollbar-track":{border:"2px solid transparent",borderRadius:"100px",background:l.palette.surface.primary,backgroundClip:"content-box"},"::-webkit-scrollbar-button":{display:"none"},"::-webkit-scrollbar-corner":{backgroundColor:"transparent"},"@media not all and (min-resolution: 0.001dpcm)":{"@supports (-webkit-appearance: none)":{"[style*='overflow:hidden'], [style*='overflow: hidden']":{touchAction:"none"}}}},code:{fontFamily:"monospace",fontSize:"12px",fontWeight:"400",lineHeight:"18px",whiteSpace:"pre"},blockquote:{margin:0,paddingLeft:l.spacing(2),borderLeft:`4px solid ${l.palette.brand.secondary}`},fallbacks:Object.values(r).filter(Boolean).length?[{"@font-face":{fontFamily:"SKODA Next"+(f?" R2L":""),src:`\n url('${f?r?.rtlFontLightWoff2:r?.fontLightWoff2}') format('woff2'),\n url('${f?r?.rtlFontLightWoff:r?.fontLightWoff}') format('woff'),\n url('${f?r?.rtlFontLightTtf:r?.fontLightTtf}') format('truetype')\n `,fontStyle:"normal",fontWeight:"300",fontDisplay:"swap"}},{"@font-face":{fontFamily:"SKODA Next"+(f?" R2L":""),src:`\n url('${f?r?.rtlFontRegularWoff2:r?.fontRegularWoff2}') format('woff2'),\n url('${f?r?.rtlFontRegularWoff:r?.fontRegularWoff}') format('woff'),\n url('${f?r?.rtlFontRegularTtf:r?.fontRegularTtf}') format('truetype')\n `,fontStyle:"normal",fontWeight:"400",fontDisplay:"swap"}},{"@font-face":{fontFamily:"SKODA Next"+(f?" R2L":""),src:`\n url('${f?r?.rtlFontBoldWoff2:r?.fontBoldWoff2}') format('woff2'),\n url('${f?r?.rtlFontBoldWoff:r?.fontBoldWoff}') format('woff'),\n url('${f?r?.rtlFontBoldTtf:r?.fontBoldTtf}') format('truetype')\n `,fontStyle:"normal",fontWeight:"700",fontDisplay:"swap"}},{"@font-face":{fontFamily:"SKODA Next"+(f?" R2L":""),src:`\n url('${f?r?.rtlFontBlackWoff2:r?.fontBlackWoff2}') format('woff2'),\n url('${f?r?.rtlFontBlackWoff:r?.fontBlackWoff}') format('woff'),\n url('${f?r?.rtlFontBlackTtf:r?.fontBlackTtf}') format('truetype')\n `,fontStyle:"normal",fontWeight:"900",fontDisplay:"swap"}}]:[]};return t["flow-typography"].forEach(t=>{const r=`${"list"===t.name.split("-")[1]?"typography-":""}${t.name.split("-")[1]}`;a[`${r}${n?':not([class^="Mui"])':""}, .${r}`]=o(r,e,f)}),a},e=(t,o)=>({styleOverrides:{root:({theme:r})=>n(!0,t,o,r)}}),f=(t,o)=>({styleOverrides:r=>n(!1,t,o,r)});export{f as getFlowCssBaseline,n as getFlowCssBaselineRoot,e as getFlowScopedCssBaseline};
|
|
2
2
|
//# sourceMappingURL=baseline.theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"baseline.theme.js","sources":["../../../src/materialui/themeProvider/baseline.theme.ts"],"sourcesContent":["import tokens from '@skodaflow/web-tokens/src/tokens.json';\nimport { generateTypography } from '../typography/typography.theme';\nimport { BreakpointsOptions, Components, Theme, CSSObject } from '@mui/material';\nimport { fonts } from './fonts';\n\nexport const getFlowCssBaselineRoot = (\n scoped: boolean,\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n theme: Theme,\n // eslint-disable-next-line sonarjs/cognitive-complexity\n) => {\n const baseline: CSSObject = {\n ...(scoped\n ? {\n background: 'unset',\n color: theme.palette.text.primary,\n ...generateTypography('body', breakpointsOptions, rtl),\n }\n : {\n body: {\n background: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.common.white,\n color: theme.palette.text.primary,\n },\n }),\n [scoped ? `&, *` : `*`]: {\n // apply scrollbar-* properties only when webkit-scrollbar is not supported\n // otherwise Chrome since version 121 will not apply style https://stackoverflow.com/a/77931548\n '@supports not selector(::-webkit-scrollbar)': {\n scrollbarWidth: 'thin',\n scrollbarColor: theme.palette.onSurface.os500,\n },\n '::-webkit-scrollbar': {\n border: '2px solid transparent',\n width: '8px',\n height: '8px',\n },\n '::-webkit-scrollbar-thumb': {\n border: '2px solid transparent',\n borderRadius: '100px',\n background: theme.palette.onSurface.os500,\n backgroundClip: 'content-box',\n },\n ':not(.notracks)::-webkit-scrollbar-track': {\n border: '2px solid transparent',\n borderRadius: '100px',\n background: theme.palette.surface.primary,\n backgroundClip: 'content-box',\n },\n '::-webkit-scrollbar-button': {\n display: 'none',\n },\n '::-webkit-scrollbar-corner': {\n backgroundColor: 'transparent',\n },\n // Fix scroll bug on Safari\n // https://github.com/mui/material-ui/issues/5750\n '@media not all and (min-resolution: 0.001dpcm)': {\n '@supports (-webkit-appearance: none)': {\n \"[style*='overflow:hidden'], [style*='overflow: hidden']\": {\n touchAction: 'none',\n },\n },\n },\n },\n // provide fonts\n fallbacks: !Object.values(fonts).filter(Boolean).length\n ? []\n : [\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontLightWoff2 : fonts?.fontLightWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontLightWoff : fonts?.fontLightWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontLightTtf : fonts?.fontLightTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '300',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontRegularWoff2 : fonts?.fontRegularWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontRegularWoff : fonts?.fontRegularWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontRegularTtf : fonts?.fontRegularTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '400',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontBoldWoff2 : fonts?.fontBoldWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontBoldWoff : fonts?.fontBoldWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontBoldTtf : fonts?.fontBoldTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '700',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontBlackWoff2 : fonts?.fontBlackWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontBlackWoff : fonts?.fontBlackWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontBlackTtf : fonts?.fontBlackTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '900',\n fontDisplay: 'swap',\n },\n },\n ],\n };\n\n tokens['flow-typography'].forEach((t) => {\n const el = `${t.name.split('-')[1] === 'list' ? 'typography-' : ''}${t.name.split('-')[1]}`;\n // apply style to plain html tags h1 and classes (.h1)\n // for ScopedCssBaseline we are applying to tags that outside mui in order\n // not to introduce css selector with too importance that does not allow overwrites\n // with direct sx styling\n const key = `${el}${scoped ? ':not([class^=\"Mui\"])' : ''}, .${el}`;\n baseline[key] = generateTypography(el, breakpointsOptions, rtl);\n });\n\n return baseline;\n};\n\nexport const getFlowScopedCssBaseline = (\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n): Components<Theme>['MuiScopedCssBaseline'] => ({\n styleOverrides: {\n root: ({ theme }) => getFlowCssBaselineRoot(true, breakpointsOptions, rtl, theme),\n },\n});\n\nexport const getFlowCssBaseline = (\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n): Components<Theme>['MuiCssBaseline'] => ({\n styleOverrides: (theme) => getFlowCssBaselineRoot(false, breakpointsOptions, rtl, theme),\n});\n"],"names":["getFlowCssBaselineRoot","scoped","breakpointsOptions","rtl","theme","baseline","background","color","palette","text","primary","generateTypography","body","mode","onSurface","os900","common","white","scrollbarWidth","scrollbarColor","os500","border","width","height","borderRadius","backgroundClip","surface","display","backgroundColor","touchAction","fallbacks","Object","values","fonts","filter","Boolean","length","
|
|
1
|
+
{"version":3,"file":"baseline.theme.js","sources":["../../../src/materialui/themeProvider/baseline.theme.ts"],"sourcesContent":["import tokens from '@skodaflow/web-tokens/src/tokens.json';\nimport { generateTypography } from '../typography/typography.theme';\nimport { BreakpointsOptions, Components, Theme, CSSObject } from '@mui/material';\nimport { fonts } from './fonts';\n\nexport const getFlowCssBaselineRoot = (\n scoped: boolean,\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n theme: Theme,\n // eslint-disable-next-line sonarjs/cognitive-complexity\n) => {\n const baseline: CSSObject = {\n ...(scoped\n ? {\n background: 'unset',\n color: theme.palette.text.primary,\n ...generateTypography('body', breakpointsOptions, rtl),\n }\n : {\n body: {\n background: theme.palette.mode === 'dark' ? theme.palette.onSurface.os900 : theme.palette.common.white,\n color: theme.palette.text.primary,\n },\n }),\n [scoped ? `&, *` : `*`]: {\n // apply scrollbar-* properties only when webkit-scrollbar is not supported\n // otherwise Chrome since version 121 will not apply style https://stackoverflow.com/a/77931548\n '@supports not selector(::-webkit-scrollbar)': {\n scrollbarWidth: 'thin',\n scrollbarColor: theme.palette.onSurface.os500,\n },\n '::-webkit-scrollbar': {\n border: '2px solid transparent',\n width: '8px',\n height: '8px',\n },\n '::-webkit-scrollbar-thumb': {\n border: '2px solid transparent',\n borderRadius: '100px',\n background: theme.palette.onSurface.os500,\n backgroundClip: 'content-box',\n },\n ':not(.notracks)::-webkit-scrollbar-track': {\n border: '2px solid transparent',\n borderRadius: '100px',\n background: theme.palette.surface.primary,\n backgroundClip: 'content-box',\n },\n '::-webkit-scrollbar-button': {\n display: 'none',\n },\n '::-webkit-scrollbar-corner': {\n backgroundColor: 'transparent',\n },\n // Fix scroll bug on Safari\n // https://github.com/mui/material-ui/issues/5750\n '@media not all and (min-resolution: 0.001dpcm)': {\n '@supports (-webkit-appearance: none)': {\n \"[style*='overflow:hidden'], [style*='overflow: hidden']\": {\n touchAction: 'none',\n },\n },\n },\n },\n // monospace baseline for inline and block code, not a component, just a global style like the scrollbar above\n code: {\n fontFamily: 'monospace',\n fontSize: '12px',\n fontWeight: '400',\n lineHeight: '18px',\n whiteSpace: 'pre',\n },\n blockquote: {\n margin: 0,\n paddingLeft: theme.spacing(2),\n borderLeft: `4px solid ${theme.palette.brand.secondary}`,\n },\n // provide fonts\n fallbacks: !Object.values(fonts).filter(Boolean).length\n ? []\n : [\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontLightWoff2 : fonts?.fontLightWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontLightWoff : fonts?.fontLightWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontLightTtf : fonts?.fontLightTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '300',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontRegularWoff2 : fonts?.fontRegularWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontRegularWoff : fonts?.fontRegularWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontRegularTtf : fonts?.fontRegularTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '400',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontBoldWoff2 : fonts?.fontBoldWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontBoldWoff : fonts?.fontBoldWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontBoldTtf : fonts?.fontBoldTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '700',\n fontDisplay: 'swap',\n },\n },\n {\n '@font-face': {\n fontFamily: `SKODA Next${rtl ? ' R2L' : ''}`,\n src: `\n url('${rtl ? fonts?.rtlFontBlackWoff2 : fonts?.fontBlackWoff2}') format('woff2'),\n url('${rtl ? fonts?.rtlFontBlackWoff : fonts?.fontBlackWoff}') format('woff'),\n url('${rtl ? fonts?.rtlFontBlackTtf : fonts?.fontBlackTtf}') format('truetype')\n `,\n fontStyle: 'normal',\n fontWeight: '900',\n fontDisplay: 'swap',\n },\n },\n ],\n };\n\n tokens['flow-typography'].forEach((t) => {\n const el = `${t.name.split('-')[1] === 'list' ? 'typography-' : ''}${t.name.split('-')[1]}`;\n // apply style to plain html tags h1 and classes (.h1)\n // for ScopedCssBaseline we are applying to tags that outside mui in order\n // not to introduce css selector with too importance that does not allow overwrites\n // with direct sx styling\n const key = `${el}${scoped ? ':not([class^=\"Mui\"])' : ''}, .${el}`;\n baseline[key] = generateTypography(el, breakpointsOptions, rtl);\n });\n\n return baseline;\n};\n\nexport const getFlowScopedCssBaseline = (\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n): Components<Theme>['MuiScopedCssBaseline'] => ({\n styleOverrides: {\n root: ({ theme }) => getFlowCssBaselineRoot(true, breakpointsOptions, rtl, theme),\n },\n});\n\nexport const getFlowCssBaseline = (\n breakpointsOptions: BreakpointsOptions,\n rtl: boolean,\n): Components<Theme>['MuiCssBaseline'] => ({\n styleOverrides: (theme) => getFlowCssBaselineRoot(false, breakpointsOptions, rtl, theme),\n});\n"],"names":["getFlowCssBaselineRoot","scoped","breakpointsOptions","rtl","theme","baseline","background","color","palette","text","primary","generateTypography","body","mode","onSurface","os900","common","white","scrollbarWidth","scrollbarColor","os500","border","width","height","borderRadius","backgroundClip","surface","display","backgroundColor","touchAction","code","fontFamily","fontSize","fontWeight","lineHeight","whiteSpace","blockquote","margin","paddingLeft","spacing","borderLeft","brand","secondary","fallbacks","Object","values","fonts","filter","Boolean","length","src","rtlFontLightWoff2","fontLightWoff2","rtlFontLightWoff","fontLightWoff","rtlFontLightTtf","fontLightTtf","fontStyle","fontDisplay","rtlFontRegularWoff2","fontRegularWoff2","rtlFontRegularWoff","fontRegularWoff","rtlFontRegularTtf","fontRegularTtf","rtlFontBoldWoff2","fontBoldWoff2","rtlFontBoldWoff","fontBoldWoff","rtlFontBoldTtf","fontBoldTtf","rtlFontBlackWoff2","fontBlackWoff2","rtlFontBlackWoff","fontBlackWoff","rtlFontBlackTtf","fontBlackTtf","tokens","forEach","t","el","name","split","getFlowScopedCssBaseline","styleOverrides","root","getFlowCssBaseline"],"mappings":"+JAKO,MAAMA,EAAyB,CACpCC,EACAC,EACAC,EACAC,KAGA,MAAMC,EAAsB,IACtBJ,EACA,CACEK,WAAY,QACZC,MAAOH,EAAMI,QAAQC,KAAKC,WACvBC,EAAmB,OAAQT,EAAoBC,IAEpD,CACES,KAAM,CACJN,WAAmC,SAAvBF,EAAMI,QAAQK,KAAkBT,EAAMI,QAAQM,UAAUC,MAAQX,EAAMI,QAAQQ,OAAOC,MACjGV,MAAOH,EAAMI,QAAQC,KAAKC,UAGlC,CAACT,EAAS,OAAS,KAAM,CAGvB,8CAA+C,CAC7CiB,eAAgB,OAChBC,eAAgBf,EAAMI,QAAQM,UAAUM,OAE1C,sBAAuB,CACrBC,OAAQ,wBACRC,MAAO,MACPC,OAAQ,OAEV,4BAA6B,CAC3BF,OAAQ,wBACRG,aAAc,QACdlB,WAAYF,EAAMI,QAAQM,UAAUM,MACpCK,eAAgB,eAElB,2CAA4C,CAC1CJ,OAAQ,wBACRG,aAAc,QACdlB,WAAYF,EAAMI,QAAQkB,QAAQhB,QAClCe,eAAgB,eAElB,6BAA8B,CAC5BE,QAAS,QAEX,6BAA8B,CAC5BC,gBAAiB,eAInB,iDAAkD,CAChD,uCAAwC,CACtC,0DAA2D,CACzDC,YAAa,WAMrBC,KAAM,CACJC,WAAY,YACZC,SAAU,OACVC,WAAY,MACZC,WAAY,OACZC,WAAY,OAEdC,WAAY,CACVC,OAAQ,EACRC,YAAalC,EAAMmC,QAAQ,GAC3BC,WAAY,aAAapC,EAAMI,QAAQiC,MAAMC,aAG/CC,UAAYC,OAAOC,OAAOC,GAAOC,OAAOC,SAASC,OAE7C,CACE,CACE,aAAc,CACZlB,WAAY,cAAa5B,EAAM,OAAS,IACxC+C,IAAK,0BACI/C,EAAM2C,GAAOK,kBAAoBL,GAAOM,2DACxCjD,EAAM2C,GAAOO,iBAAmBP,GAAOQ,yDACvCnD,EAAM2C,GAAOS,gBAAkBT,GAAOU,oDAE/CC,UAAW,SACXxB,WAAY,MACZyB,YAAa,SAGjB,CACE,aAAc,CACZ3B,WAAY,cAAa5B,EAAM,OAAS,IACxC+C,IAAK,0BACI/C,EAAM2C,GAAOa,oBAAsBb,GAAOc,6DAC1CzD,EAAM2C,GAAOe,mBAAqBf,GAAOgB,2DACzC3D,EAAM2C,GAAOiB,kBAAoBjB,GAAOkB,sDAEjDP,UAAW,SACXxB,WAAY,MACZyB,YAAa,SAGjB,CACE,aAAc,CACZ3B,WAAY,cAAa5B,EAAM,OAAS,IACxC+C,IAAK,0BACI/C,EAAM2C,GAAOmB,iBAAmBnB,GAAOoB,0DACvC/D,EAAM2C,GAAOqB,gBAAkBrB,GAAOsB,wDACtCjE,EAAM2C,GAAOuB,eAAiBvB,GAAOwB,mDAE9Cb,UAAW,SACXxB,WAAY,MACZyB,YAAa,SAGjB,CACE,aAAc,CACZ3B,WAAY,cAAa5B,EAAM,OAAS,IACxC+C,IAAK,0BACI/C,EAAM2C,GAAOyB,kBAAoBzB,GAAO0B,2DACxCrE,EAAM2C,GAAO2B,iBAAmB3B,GAAO4B,yDACvCvE,EAAM2C,GAAO6B,gBAAkB7B,GAAO8B,oDAE/CnB,UAAW,SACXxB,WAAY,MACZyB,YAAa,UAnDnB,IAmEN,OAVAmB,EAAO,mBAAmBC,QAASC,IACjC,MAAMC,EAAK,GAA4B,SAAzBD,EAAEE,KAAKC,MAAM,KAAK,GAAgB,cAAgB,KAAKH,EAAEE,KAAKC,MAAM,KAAK,KAMvF7E,EADY,GAAG2E,IAAK/E,EAAS,uBAAyB,QAAQ+E,KAC9CrE,EAAmBqE,EAAI9E,EAAoBC,KAGtDE,GAGI8E,EAA2B,CACtCjF,EACAC,KAAY,CAEZiF,eAAgB,CACdC,KAAM,EAAGjF,WAAYJ,GAAuB,EAAME,EAAoBC,EAAKC,MAIlEkF,EAAqB,CAChCpF,EACAC,KAAY,CAEZiF,eAAiBhF,GAAUJ,GAAuB,EAAOE,EAAoBC,EAAKC"}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@skodaflow/web-library","version":"8.3.
|
|
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"}
|