igloo-d2c-components 1.0.56-non-prod → 1.1.1
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/dist/cjs/index.js +185 -118
- package/dist/esm/index.js +186 -119
- package/dist/types/components/BenefitsSummary/styled.d.ts +3 -3
- package/dist/types/components/BillingToggle/styled.d.ts +1 -1
- package/dist/types/components/CheckoutHeader/styled.d.ts +2 -2
- package/dist/types/components/CheckoutProgress/styled.d.ts +1 -1
- package/dist/types/components/ContactDetailsForm/styled.d.ts +2 -2
- package/dist/types/components/CoverageAmountSlider/styled.d.ts +4 -4
- package/dist/types/components/DesktopHeaderMenuBar/styled.d.ts +2 -2
- package/dist/types/components/FAQAccordion/styled.d.ts +2 -2
- package/dist/types/components/Footer/styled.d.ts +2 -2
- package/dist/types/components/Header/styled.d.ts +3 -3
- package/dist/types/components/HealthQuestionGroup/styled.d.ts +2 -2
- package/dist/types/components/InfoCallout/styled.d.ts +2 -2
- package/dist/types/components/OptionButton/styled.d.ts +1 -1
- package/dist/types/components/PersonalInformationForm/styled.d.ts +1 -1
- package/dist/types/components/ProductCard/styled.d.ts +4 -4
- package/dist/types/components/ProductSelectionDrawer/styled.d.ts +9 -9
- package/dist/types/components/QuestionSection/styled.d.ts +2 -2
- package/dist/types/components/RecommendationsDrawer/styled.d.ts +2 -2
- package/dist/types/components/ToggleGroup/styled.d.ts +1 -1
- package/dist/types/context/TenantThemeContext.d.ts +2 -1
- package/dist/types/types/tenant.d.ts +2 -0
- package/package.json +5 -2
package/dist/esm/index.js
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { createContext, useMemo, useContext, useState, useEffect, Component } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
|
|
6
|
+
import { useTheme, Button as Button$1, Card as Card$1, CardHeader, CardContent, CardActions, Box, Typography, Menu, MenuItem, Avatar, Drawer, IconButton, FormControlLabel, useMediaQuery, Toolbar, RadioGroup, Radio, AppBar as AppBar$1, Divider, List, ListItem, ListItemButton, ListItemText, styled as styled$1, Dialog, ButtonBase, Slider, Checkbox, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
|
|
6
7
|
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
|
7
8
|
import CloseIcon from '@mui/icons-material/Close';
|
|
8
9
|
import AppBar from '@mui/material/AppBar';
|
|
9
|
-
import { styled } from '@mui/material/styles';
|
|
10
10
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
11
11
|
import Container from '@mui/material/Container';
|
|
12
12
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
@@ -471,6 +471,8 @@ const iglooTheme = {
|
|
|
471
471
|
calloutBorder: '#ffffff',
|
|
472
472
|
inputBackground: '#ffffff',
|
|
473
473
|
inputBorder: '#eeeeee',
|
|
474
|
+
buttonPrimary: '#5656F6',
|
|
475
|
+
buttonPrimaryHover: 'rgba(86, 86, 246, 0.7)',
|
|
474
476
|
},
|
|
475
477
|
motor: {
|
|
476
478
|
main: '#00CCFF',
|
|
@@ -512,11 +514,11 @@ const ammetlifeTheme = {
|
|
|
512
514
|
palette: {
|
|
513
515
|
primary: {
|
|
514
516
|
dark: '#2869a8',
|
|
515
|
-
main: '#
|
|
517
|
+
main: '#0090DA',
|
|
516
518
|
light: '#42A5F5',
|
|
517
519
|
bright: '#90CAF9',
|
|
518
520
|
plain: '#E3F2FD',
|
|
519
|
-
border: '#
|
|
521
|
+
border: '#0090DA',
|
|
520
522
|
},
|
|
521
523
|
secondary: {
|
|
522
524
|
dim: '#E65100',
|
|
@@ -547,13 +549,15 @@ const ammetlifeTheme = {
|
|
|
547
549
|
sliderActive: '#317abc',
|
|
548
550
|
sliderInactive: '#c8c5ca',
|
|
549
551
|
sliderBackground: '#f9f9f9',
|
|
550
|
-
toggleActive: '
|
|
552
|
+
toggleActive: 'rgb(0, 144, 218)',
|
|
551
553
|
toggleActiveText: '#fefbff',
|
|
552
|
-
toggleInactiveText: '#
|
|
554
|
+
toggleInactiveText: '#0090DA',
|
|
553
555
|
calloutBackground: '#f9f9f9',
|
|
554
556
|
calloutBorder: '#ffffff',
|
|
555
557
|
inputBackground: '#ffffff',
|
|
556
558
|
inputBorder: '#eeeeee',
|
|
559
|
+
buttonPrimary: '#0090da',
|
|
560
|
+
buttonPrimaryHover: 'rgba(0, 144, 218, 0.7)',
|
|
557
561
|
},
|
|
558
562
|
motor: {
|
|
559
563
|
main: '#1976D2',
|
|
@@ -630,6 +634,7 @@ const TenantThemeContext = createContext(undefined);
|
|
|
630
634
|
/**
|
|
631
635
|
* TenantThemeProvider
|
|
632
636
|
* Wraps components to provide tenant-specific theming
|
|
637
|
+
* Creates MUI theme from tenant configuration
|
|
633
638
|
*
|
|
634
639
|
* @example
|
|
635
640
|
* ```tsx
|
|
@@ -641,12 +646,74 @@ const TenantThemeContext = createContext(undefined);
|
|
|
641
646
|
* </TenantThemeProvider>
|
|
642
647
|
* ```
|
|
643
648
|
*/
|
|
644
|
-
function TenantThemeProvider({ children, tenantId, theme, }) {
|
|
649
|
+
function TenantThemeProvider({ children, tenantId, theme: tenantTheme, }) {
|
|
650
|
+
// Create MUI theme with tenant brand + defaults
|
|
651
|
+
const muiTheme = useMemo(() => createTheme({
|
|
652
|
+
palette: {
|
|
653
|
+
// Tenant brand colors
|
|
654
|
+
primary: {
|
|
655
|
+
main: tenantTheme.palette.primary.main,
|
|
656
|
+
dark: tenantTheme.palette.primary.dark || tenantTheme.palette.primary.main,
|
|
657
|
+
light: tenantTheme.palette.primary.light || tenantTheme.palette.primary.main,
|
|
658
|
+
contrastText: '#fff',
|
|
659
|
+
},
|
|
660
|
+
secondary: {
|
|
661
|
+
main: tenantTheme.palette.secondary.main,
|
|
662
|
+
dark: tenantTheme.palette.secondary.dark || tenantTheme.palette.secondary.main,
|
|
663
|
+
light: tenantTheme.palette.secondary.light || tenantTheme.palette.secondary.main,
|
|
664
|
+
},
|
|
665
|
+
// MUI defaults for common patterns
|
|
666
|
+
background: {
|
|
667
|
+
default: '#ffffff',
|
|
668
|
+
paper: '#f9f9f9',
|
|
669
|
+
},
|
|
670
|
+
text: {
|
|
671
|
+
primary: '#13131B',
|
|
672
|
+
secondary: '#5F5E62',
|
|
673
|
+
},
|
|
674
|
+
divider: '#E1E2EB',
|
|
675
|
+
// Standard grey palette
|
|
676
|
+
grey: {
|
|
677
|
+
50: '#FAFAFA',
|
|
678
|
+
100: '#F5F5F5',
|
|
679
|
+
200: '#EEEEEE',
|
|
680
|
+
300: '#E0E0E0',
|
|
681
|
+
400: '#BDBDBD',
|
|
682
|
+
500: '#9E9E9E',
|
|
683
|
+
600: '#757575',
|
|
684
|
+
700: '#616161',
|
|
685
|
+
800: '#424242',
|
|
686
|
+
900: '#212121',
|
|
687
|
+
},
|
|
688
|
+
common: {
|
|
689
|
+
white: '#ffffff',
|
|
690
|
+
black: '#000000',
|
|
691
|
+
},
|
|
692
|
+
// Add tenant UI colors to MUI theme
|
|
693
|
+
ui: tenantTheme.palette.ui,
|
|
694
|
+
},
|
|
695
|
+
typography: {
|
|
696
|
+
fontFamily: tenantTheme.typography?.fontFamily || 'Roboto, sans-serif',
|
|
697
|
+
},
|
|
698
|
+
spacing: 8,
|
|
699
|
+
shape: {
|
|
700
|
+
borderRadius: 8,
|
|
701
|
+
},
|
|
702
|
+
breakpoints: {
|
|
703
|
+
values: {
|
|
704
|
+
xs: 0,
|
|
705
|
+
sm: 600,
|
|
706
|
+
md: 900,
|
|
707
|
+
lg: 1200,
|
|
708
|
+
xl: 1536,
|
|
709
|
+
},
|
|
710
|
+
},
|
|
711
|
+
}), [tenantTheme]);
|
|
645
712
|
const value = useMemo(() => ({
|
|
646
713
|
tenantId,
|
|
647
|
-
theme,
|
|
648
|
-
}), [tenantId,
|
|
649
|
-
return (jsx(TenantThemeContext.Provider, { value: value, children: children }));
|
|
714
|
+
theme: tenantTheme,
|
|
715
|
+
}), [tenantId, tenantTheme]);
|
|
716
|
+
return (jsx(ThemeProvider, { theme: muiTheme, children: jsx(TenantThemeContext.Provider, { value: value, children: children }) }));
|
|
650
717
|
}
|
|
651
718
|
/**
|
|
652
719
|
* Hook to access tenant theme configuration
|
|
@@ -706,21 +773,20 @@ function useIsTenant(checkTenantId) {
|
|
|
706
773
|
* ```
|
|
707
774
|
*/
|
|
708
775
|
const Button = React__default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
|
|
776
|
+
const theme = useTheme();
|
|
709
777
|
const tenantTheme = useTenantTheme();
|
|
710
|
-
const
|
|
711
|
-
const baseWordSpacingSx = { wordSpacing: '0px' };
|
|
712
|
-
const buttonSx = tenantColored && theme
|
|
778
|
+
const buttonSx = tenantColored && tenantTheme?.theme
|
|
713
779
|
? {
|
|
714
|
-
|
|
715
|
-
backgroundColor: theme.palette?.primary?.main,
|
|
716
|
-
color:
|
|
780
|
+
wordSpacing: 0,
|
|
781
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.main,
|
|
782
|
+
color: theme.palette.common.white,
|
|
717
783
|
'&:hover': {
|
|
718
|
-
backgroundColor: theme.palette?.primary?.dark || theme.palette?.primary?.main,
|
|
784
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.dark || tenantTheme.theme.palette?.primary?.main,
|
|
719
785
|
},
|
|
720
786
|
...sx,
|
|
721
787
|
}
|
|
722
788
|
: {
|
|
723
|
-
|
|
789
|
+
wordSpacing: 0,
|
|
724
790
|
...sx,
|
|
725
791
|
};
|
|
726
792
|
return (jsx(Button$1, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
|
|
@@ -740,11 +806,11 @@ const Button = React__default.memo(function Button({ tenantColored = false, vari
|
|
|
740
806
|
* ```
|
|
741
807
|
*/
|
|
742
808
|
const Card = React__default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
|
|
809
|
+
const theme = useTheme();
|
|
743
810
|
const tenantTheme = useTenantTheme();
|
|
744
|
-
const
|
|
745
|
-
const cardSx = tenantAccent && theme
|
|
811
|
+
const cardSx = tenantAccent && tenantTheme?.theme
|
|
746
812
|
? {
|
|
747
|
-
borderTop: `4px solid ${theme.palette?.primary?.main ||
|
|
813
|
+
borderTop: `4px solid ${tenantTheme.theme.palette?.primary?.main || theme.palette.primary.main}`,
|
|
748
814
|
...sx,
|
|
749
815
|
}
|
|
750
816
|
: sx;
|
|
@@ -765,18 +831,18 @@ const Card = React__default.memo(function Card({ title, headerAction, content, a
|
|
|
765
831
|
* ```
|
|
766
832
|
*/
|
|
767
833
|
const Banner = React__default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
|
|
834
|
+
const theme = useTheme();
|
|
768
835
|
const tenantTheme = useTenantTheme();
|
|
769
|
-
const
|
|
770
|
-
const
|
|
771
|
-
const lightColor = theme?.palette?.primary?.light || primaryColor;
|
|
836
|
+
const primaryColor = tenantTheme?.theme?.palette?.primary?.main || theme.palette.primary.main;
|
|
837
|
+
const lightColor = tenantTheme?.theme?.palette?.primary?.light || theme.palette.primary.light;
|
|
772
838
|
const background = gradient
|
|
773
839
|
? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
|
|
774
840
|
: primaryColor;
|
|
775
841
|
return (jsxs(Box, { sx: {
|
|
776
842
|
background,
|
|
777
|
-
color:
|
|
778
|
-
padding:
|
|
779
|
-
borderRadius:
|
|
843
|
+
color: theme.palette.common.white,
|
|
844
|
+
padding: theme.spacing(4),
|
|
845
|
+
borderRadius: `${theme.shape.borderRadius}px`,
|
|
780
846
|
textAlign: 'center',
|
|
781
847
|
...sx,
|
|
782
848
|
}, ...props, children: [jsx(Typography, { variant: "h4", component: "h2", gutterBottom: true, fontWeight: "bold", children: title }), description && (jsx(Typography, { variant: "body1", sx: { opacity: 0.95, mb: action ? 2 : 0 }, children: description })), action && jsx(Box, { sx: { mt: 2 }, children: action })] }));
|
|
@@ -2019,16 +2085,16 @@ function sanitizeUrl(url, fallback = '#') {
|
|
|
2019
2085
|
return fallback;
|
|
2020
2086
|
}
|
|
2021
2087
|
|
|
2022
|
-
const DivFooter = styled('div')(() => ({
|
|
2023
|
-
backgroundColor:
|
|
2024
|
-
padding:
|
|
2025
|
-
'
|
|
2026
|
-
padding:
|
|
2088
|
+
const DivFooter = styled('div')(({ theme }) => ({
|
|
2089
|
+
backgroundColor: theme.palette.grey[800],
|
|
2090
|
+
padding: theme.spacing(2.5, 2),
|
|
2091
|
+
[theme.breakpoints.up('md')]: {
|
|
2092
|
+
padding: theme.spacing(8.75, 0),
|
|
2027
2093
|
},
|
|
2028
2094
|
}));
|
|
2029
2095
|
const DivFooterConterResponsiveLayout = styled('div')(({ theme }) => ({
|
|
2030
|
-
color:
|
|
2031
|
-
[theme.breakpoints.up(
|
|
2096
|
+
color: theme.palette.common.white,
|
|
2097
|
+
[theme.breakpoints.up('lg')]: {
|
|
2032
2098
|
minWidth: '1128px',
|
|
2033
2099
|
maxWidth: '1128px',
|
|
2034
2100
|
margin: '0 auto',
|
|
@@ -2038,68 +2104,64 @@ const FooterHiddenContent = styled('div')(({ simplifiedLayout }) => simplifiedLa
|
|
|
2038
2104
|
const DivIglooIntro = styled('div')(({ theme }) => ({
|
|
2039
2105
|
display: 'flex',
|
|
2040
2106
|
flexDirection: 'column',
|
|
2041
|
-
gap:
|
|
2042
|
-
color: theme
|
|
2043
|
-
'
|
|
2107
|
+
gap: theme.spacing(3),
|
|
2108
|
+
color: theme.palette.common.white,
|
|
2109
|
+
[theme.breakpoints.up('md')]: {
|
|
2044
2110
|
width: 320,
|
|
2045
2111
|
marginRight: 194,
|
|
2046
2112
|
},
|
|
2047
2113
|
}));
|
|
2048
|
-
const DivSocial = styled('div')(() => ({
|
|
2114
|
+
const DivSocial = styled('div')(({ theme }) => ({
|
|
2049
2115
|
display: 'flex',
|
|
2050
2116
|
alignItems: 'center',
|
|
2051
2117
|
margin: '0 auto',
|
|
2052
|
-
columnGap:
|
|
2118
|
+
columnGap: theme.spacing(4),
|
|
2053
2119
|
flexDirection: 'row',
|
|
2054
|
-
'
|
|
2120
|
+
[theme.breakpoints.up('md')]: {
|
|
2055
2121
|
margin: 'initial',
|
|
2056
2122
|
},
|
|
2057
2123
|
}));
|
|
2058
2124
|
const ButtonIcon = styled(Button$1)(({ theme }) => ({
|
|
2059
|
-
color: theme.palette.common
|
|
2060
|
-
padding:
|
|
2061
|
-
minWidth: 'auto
|
|
2125
|
+
color: theme.palette.common.white,
|
|
2126
|
+
padding: 0,
|
|
2127
|
+
minWidth: 'auto',
|
|
2062
2128
|
}));
|
|
2063
|
-
const TypographyIntro = styled(Typography)(() => ({
|
|
2129
|
+
const TypographyIntro = styled(Typography)(({ theme }) => ({
|
|
2064
2130
|
textAlign: 'center',
|
|
2065
|
-
color:
|
|
2066
|
-
'
|
|
2131
|
+
color: theme.palette.common.white,
|
|
2132
|
+
[theme.breakpoints.up('md')]: {
|
|
2067
2133
|
textAlign: 'left',
|
|
2068
2134
|
},
|
|
2069
2135
|
}));
|
|
2070
|
-
const TypographyAddressFooter = styled(Typography)(() => ({
|
|
2071
|
-
marginTop:
|
|
2136
|
+
const TypographyAddressFooter = styled(Typography)(({ theme }) => ({
|
|
2137
|
+
marginTop: theme.spacing(2),
|
|
2072
2138
|
textAlign: 'center',
|
|
2073
|
-
color:
|
|
2074
|
-
'
|
|
2139
|
+
color: theme.palette.common.white,
|
|
2140
|
+
[theme.breakpoints.up('md')]: {
|
|
2075
2141
|
textAlign: 'left',
|
|
2076
2142
|
},
|
|
2077
2143
|
}));
|
|
2078
|
-
const DivLogos = styled('div')(() => ({
|
|
2144
|
+
const DivLogos = styled('div')(({ theme }) => ({
|
|
2079
2145
|
display: 'flex',
|
|
2080
2146
|
flexDirection: 'column',
|
|
2081
|
-
gap:
|
|
2147
|
+
gap: theme.spacing(2),
|
|
2082
2148
|
alignItems: 'center',
|
|
2083
|
-
marginTop:
|
|
2084
|
-
'
|
|
2149
|
+
marginTop: theme.spacing(2),
|
|
2150
|
+
[theme.breakpoints.up('md')]: {
|
|
2085
2151
|
width: '100%',
|
|
2086
2152
|
marginTop: 0,
|
|
2087
2153
|
gap: 'initial',
|
|
2088
2154
|
alignItems: 'baseline',
|
|
2089
2155
|
},
|
|
2090
2156
|
}));
|
|
2091
|
-
const DivFirstRow = styled('div')(() => ({
|
|
2157
|
+
const DivFirstRow = styled('div')(({ theme }) => ({
|
|
2092
2158
|
display: 'flex',
|
|
2093
2159
|
flexDirection: 'row',
|
|
2094
|
-
gap:
|
|
2160
|
+
gap: theme.spacing(2),
|
|
2095
2161
|
}));
|
|
2096
2162
|
const ButtonOjkLink = styled(Button$1)(() => ({
|
|
2097
2163
|
display: 'flex',
|
|
2098
2164
|
justifyContent: 'flex-start',
|
|
2099
|
-
'@media (min-width: 769px)': {
|
|
2100
|
-
display: 'flex !important',
|
|
2101
|
-
justifyContent: 'flex-start !important ',
|
|
2102
|
-
},
|
|
2103
2165
|
}));
|
|
2104
2166
|
const ImageOjkLicense = styled('img')(() => ({
|
|
2105
2167
|
alignSelf: 'flex-start',
|
|
@@ -2112,53 +2174,53 @@ const ButtonSolisoustamaLink = styled(Button$1)(() => ({
|
|
|
2112
2174
|
const ImageSolisoustama = styled('img')(() => ({
|
|
2113
2175
|
height: 'auto',
|
|
2114
2176
|
}));
|
|
2115
|
-
const DivLinks = styled('div')(() => ({
|
|
2177
|
+
const DivLinks = styled('div')(({ theme }) => ({
|
|
2116
2178
|
display: 'flex',
|
|
2117
2179
|
flex: 1,
|
|
2118
2180
|
alignItems: 'center',
|
|
2119
|
-
gap:
|
|
2181
|
+
gap: theme.spacing(2),
|
|
2120
2182
|
justifyContent: 'center',
|
|
2121
|
-
'
|
|
2183
|
+
[theme.breakpoints.up('md')]: {
|
|
2122
2184
|
flex: '1 1',
|
|
2123
2185
|
alignItems: 'normal',
|
|
2124
2186
|
},
|
|
2125
2187
|
}));
|
|
2126
|
-
const DivSection = styled('div')(() => ({
|
|
2188
|
+
const DivSection = styled('div')(({ theme }) => ({
|
|
2127
2189
|
display: 'flex',
|
|
2128
2190
|
flexDirection: 'column',
|
|
2129
|
-
gap:
|
|
2191
|
+
gap: theme.spacing(2),
|
|
2130
2192
|
flex: 1,
|
|
2131
2193
|
alignItems: 'flex-start',
|
|
2132
|
-
'
|
|
2133
|
-
gap:
|
|
2194
|
+
[theme.breakpoints.up('md')]: {
|
|
2195
|
+
gap: theme.spacing(3),
|
|
2134
2196
|
'&:not(:first-of-type)': {
|
|
2135
2197
|
marginLeft: 194,
|
|
2136
2198
|
},
|
|
2137
2199
|
},
|
|
2138
2200
|
}));
|
|
2139
|
-
const ButtonBottomLink = styled(Button$1)(() => ({
|
|
2140
|
-
color:
|
|
2201
|
+
const ButtonBottomLink = styled(Button$1)(({ theme }) => ({
|
|
2202
|
+
color: theme.palette.common.white,
|
|
2141
2203
|
textTransform: 'capitalize',
|
|
2142
|
-
'
|
|
2143
|
-
padding:
|
|
2144
|
-
textAlign: 'left
|
|
2145
|
-
minWidth: 'auto
|
|
2204
|
+
[theme.breakpoints.up('md')]: {
|
|
2205
|
+
padding: 0,
|
|
2206
|
+
textAlign: 'left',
|
|
2207
|
+
minWidth: 'auto',
|
|
2146
2208
|
},
|
|
2147
2209
|
}));
|
|
2148
|
-
const StyledDivider = styled(Divider)(() => ({
|
|
2149
|
-
margin:
|
|
2150
|
-
borderColor: '#5F5E62
|
|
2210
|
+
const StyledDivider = styled(Divider)(({ theme }) => ({
|
|
2211
|
+
margin: theme.spacing(3, 0, 2),
|
|
2212
|
+
borderColor: '#5F5E62',
|
|
2151
2213
|
}));
|
|
2152
2214
|
const DivBottom = styled('div')(() => ({
|
|
2153
2215
|
display: 'flex',
|
|
2154
2216
|
justifyContent: 'space-between',
|
|
2155
2217
|
alignItems: 'center',
|
|
2156
2218
|
}));
|
|
2157
|
-
const DivSep = styled('div')(() => ({
|
|
2219
|
+
const DivSep = styled('div')(({ theme }) => ({
|
|
2158
2220
|
width: '1px',
|
|
2159
2221
|
height: 10,
|
|
2160
2222
|
borderRadius: '1px',
|
|
2161
|
-
backgroundColor:
|
|
2223
|
+
backgroundColor: theme.palette.common.white,
|
|
2162
2224
|
}));
|
|
2163
2225
|
const AnchorLink = styled('a')(() => ({
|
|
2164
2226
|
color: 'inherit',
|
|
@@ -2336,9 +2398,9 @@ const BackArrowButton = styled(IconButton)(() => ({
|
|
|
2336
2398
|
function RecommendationsDrawer({ open, onClose, children, headerIcon, title, subtitle, showBackButton = false, onBack, primaryButtonText, onPrimaryAction, primaryButtonDisabled = false, secondaryButtonText, onSecondaryAction, showFooter = true, customFooter, formatMessage = (descriptor) => descriptor.id, }) {
|
|
2337
2399
|
useTheme();
|
|
2338
2400
|
const tenantTheme = useTenantTheme();
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2401
|
+
const primaryColor = tenantTheme?.theme?.palette?.ui?.buttonPrimary
|
|
2402
|
+
|| tenantTheme?.theme?.palette?.primary?.main
|
|
2403
|
+
|| '#0090DA';
|
|
2342
2404
|
const hexToRgba = (hex, alpha) => {
|
|
2343
2405
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
2344
2406
|
if (result) {
|
|
@@ -2347,7 +2409,7 @@ function RecommendationsDrawer({ open, onClose, children, headerIcon, title, sub
|
|
|
2347
2409
|
const b = parseInt(result[3], 16);
|
|
2348
2410
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
2349
2411
|
}
|
|
2350
|
-
return `rgba(
|
|
2412
|
+
return `rgba(0, 144, 218, ${alpha})`;
|
|
2351
2413
|
};
|
|
2352
2414
|
const handleClose = () => {
|
|
2353
2415
|
onClose();
|
|
@@ -3119,7 +3181,7 @@ const ToggleButton = styled(Box)(({ theme, active }) => ({
|
|
|
3119
3181
|
: 'transparent',
|
|
3120
3182
|
color: active
|
|
3121
3183
|
? theme?.palette?.ui?.toggleActiveText || '#fefbff'
|
|
3122
|
-
: theme?.palette?.ui?.toggleInactiveText || '#
|
|
3184
|
+
: theme?.palette?.ui?.toggleInactiveText || '#0090DA',
|
|
3123
3185
|
transition: 'all 0.2s ease',
|
|
3124
3186
|
'&:hover': {
|
|
3125
3187
|
opacity: 0.9,
|
|
@@ -3728,42 +3790,47 @@ const ButtonContainer = styled(Box)(({ isFixed, desktopRightAligned }) => ({
|
|
|
3728
3790
|
position: 'relative',
|
|
3729
3791
|
},
|
|
3730
3792
|
}));
|
|
3731
|
-
const StyledButton = styled('button')(({ isDisabled, desktopWidth }) =>
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3793
|
+
const StyledButton = styled('button')(({ theme, isDisabled, desktopWidth }) => {
|
|
3794
|
+
const extendedTheme = theme;
|
|
3795
|
+
const buttonPrimary = extendedTheme?.palette?.ui?.buttonPrimary || '#0090da';
|
|
3796
|
+
const buttonPrimaryHover = extendedTheme?.palette?.ui?.buttonPrimaryHover || 'rgba(0, 144, 218, 0.7)';
|
|
3797
|
+
return {
|
|
3798
|
+
width: '100%',
|
|
3799
|
+
minHeight: '48px',
|
|
3800
|
+
padding: '14px 32px',
|
|
3801
|
+
borderRadius: '100px',
|
|
3802
|
+
border: 'none',
|
|
3803
|
+
backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimary,
|
|
3804
|
+
color: isDisabled ? '#75787b' : '#ffffff',
|
|
3805
|
+
fontFamily: '"MetLifeCircular", "Roboto", "Helvetica", "Arial", sans-serif',
|
|
3806
|
+
fontSize: '16px',
|
|
3807
|
+
fontWeight: 500,
|
|
3808
|
+
lineHeight: '20px',
|
|
3809
|
+
letterSpacing: 0,
|
|
3810
|
+
textTransform: 'none',
|
|
3811
|
+
wordSpacing: '0px',
|
|
3812
|
+
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
|
3813
|
+
transition: 'all 0.2s ease-in-out',
|
|
3814
|
+
boxSizing: 'border-box',
|
|
3815
|
+
'&:hover': {
|
|
3816
|
+
backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimaryHover,
|
|
3817
|
+
},
|
|
3818
|
+
'&:focus': {
|
|
3819
|
+
outline: isDisabled ? 'none' : `2px solid ${buttonPrimary}`,
|
|
3820
|
+
outlineOffset: '2px',
|
|
3821
|
+
},
|
|
3822
|
+
'&:active': {
|
|
3823
|
+
backgroundColor: isDisabled ? '#f2f2f2' : buttonPrimaryHover,
|
|
3824
|
+
},
|
|
3825
|
+
// Desktop styles for fixed width button
|
|
3826
|
+
'@media (min-width: 900px)': desktopWidth
|
|
3827
|
+
? {
|
|
3828
|
+
width: desktopWidth,
|
|
3829
|
+
minWidth: desktopWidth,
|
|
3830
|
+
}
|
|
3831
|
+
: {},
|
|
3832
|
+
};
|
|
3833
|
+
});
|
|
3767
3834
|
|
|
3768
3835
|
const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed = true, type = 'button', sx, loading = false, desktopRightAligned = false, desktopWidth = '180px', }) => {
|
|
3769
3836
|
return (jsx(ButtonContainer, { isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx, children: jsx(StyledButton, { type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopWidth, onClick: onClick, children: loading ? 'Processing...' : text }) }));
|
|
@@ -8,7 +8,7 @@ export declare const SectionContainer: import("@emotion/styled").StyledComponent
|
|
|
8
8
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
9
9
|
export declare const SectionTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
10
10
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
11
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
11
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
12
12
|
export declare const BenefitsList: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
13
13
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
14
14
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -23,7 +23,7 @@ export declare const BenefitContent: import("@emotion/styled").StyledComponent<i
|
|
|
23
23
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
24
24
|
export declare const BenefitTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
25
25
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
26
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
26
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
27
27
|
export declare const BenefitDescription: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
28
28
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
29
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
29
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -10,4 +10,4 @@ export declare const ToggleButton: import("@emotion/styled").StyledComponent<imp
|
|
|
10
10
|
}, {}, {}>;
|
|
11
11
|
export declare const ToggleText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
12
12
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
13
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
13
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
|
|
@@ -9,7 +9,7 @@ export declare const SectionHeader: import("@emotion/styled").StyledComponent<im
|
|
|
9
9
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
10
10
|
export declare const SectionTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
11
11
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
12
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
12
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
13
13
|
export declare const SectionDescription: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
14
14
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
15
|
-
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "
|
|
15
|
+
}, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "lineHeight" | "letterSpacing" | "border" | "children" | "zIndex" | "typography" | "borderRadius" | "p" | "style" | "className" | "classes" | "sx" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|