igloo-d2c-components 1.0.55-non-prod → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +192 -136
- package/dist/esm/index.js +193 -137
- 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 +5 -5
- package/dist/types/components/DesktopHeaderMenuBar/styled.d.ts +7 -7
- package/dist/types/components/FAQAccordion/styled.d.ts +5 -18
- package/dist/types/components/Footer/styled.d.ts +6 -6
- package/dist/types/components/Header/styled.d.ts +13 -13
- package/dist/types/components/HealthQuestionGroup/styled.d.ts +2 -2
- package/dist/types/components/InfoCallout/styled.d.ts +2 -2
- package/dist/types/components/NewHeader/styled.d.ts +3 -3
- package/dist/types/components/OptionButton/styled.d.ts +2 -2
- 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 +6 -6
- package/dist/types/components/ToggleGroup/styled.d.ts +2 -2
- package/dist/types/context/TenantThemeContext.d.ts +2 -1
- package/package.json +15 -15
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';
|
|
@@ -630,6 +630,7 @@ const TenantThemeContext = createContext(undefined);
|
|
|
630
630
|
/**
|
|
631
631
|
* TenantThemeProvider
|
|
632
632
|
* Wraps components to provide tenant-specific theming
|
|
633
|
+
* Creates MUI theme from tenant configuration
|
|
633
634
|
*
|
|
634
635
|
* @example
|
|
635
636
|
* ```tsx
|
|
@@ -641,12 +642,72 @@ const TenantThemeContext = createContext(undefined);
|
|
|
641
642
|
* </TenantThemeProvider>
|
|
642
643
|
* ```
|
|
643
644
|
*/
|
|
644
|
-
function TenantThemeProvider({ children, tenantId, theme, }) {
|
|
645
|
+
function TenantThemeProvider({ children, tenantId, theme: tenantTheme, }) {
|
|
646
|
+
// Create MUI theme with tenant brand + defaults
|
|
647
|
+
const muiTheme = useMemo(() => createTheme({
|
|
648
|
+
palette: {
|
|
649
|
+
// Tenant brand colors
|
|
650
|
+
primary: {
|
|
651
|
+
main: tenantTheme.palette.primary.main,
|
|
652
|
+
dark: tenantTheme.palette.primary.dark || tenantTheme.palette.primary.main,
|
|
653
|
+
light: tenantTheme.palette.primary.light || tenantTheme.palette.primary.main,
|
|
654
|
+
contrastText: '#fff',
|
|
655
|
+
},
|
|
656
|
+
secondary: {
|
|
657
|
+
main: tenantTheme.palette.secondary.main,
|
|
658
|
+
dark: tenantTheme.palette.secondary.dark || tenantTheme.palette.secondary.main,
|
|
659
|
+
light: tenantTheme.palette.secondary.light || tenantTheme.palette.secondary.main,
|
|
660
|
+
},
|
|
661
|
+
// MUI defaults for common patterns
|
|
662
|
+
background: {
|
|
663
|
+
default: '#ffffff',
|
|
664
|
+
paper: '#f9f9f9',
|
|
665
|
+
},
|
|
666
|
+
text: {
|
|
667
|
+
primary: '#13131B',
|
|
668
|
+
secondary: '#5F5E62',
|
|
669
|
+
},
|
|
670
|
+
divider: '#E1E2EB',
|
|
671
|
+
// Standard grey palette
|
|
672
|
+
grey: {
|
|
673
|
+
50: '#FAFAFA',
|
|
674
|
+
100: '#F5F5F5',
|
|
675
|
+
200: '#EEEEEE',
|
|
676
|
+
300: '#E0E0E0',
|
|
677
|
+
400: '#BDBDBD',
|
|
678
|
+
500: '#9E9E9E',
|
|
679
|
+
600: '#757575',
|
|
680
|
+
700: '#616161',
|
|
681
|
+
800: '#424242',
|
|
682
|
+
900: '#212121',
|
|
683
|
+
},
|
|
684
|
+
common: {
|
|
685
|
+
white: '#ffffff',
|
|
686
|
+
black: '#000000',
|
|
687
|
+
},
|
|
688
|
+
},
|
|
689
|
+
typography: {
|
|
690
|
+
fontFamily: tenantTheme.typography?.fontFamily || 'Roboto, sans-serif',
|
|
691
|
+
},
|
|
692
|
+
spacing: 8,
|
|
693
|
+
shape: {
|
|
694
|
+
borderRadius: 8,
|
|
695
|
+
},
|
|
696
|
+
breakpoints: {
|
|
697
|
+
values: {
|
|
698
|
+
xs: 0,
|
|
699
|
+
sm: 600,
|
|
700
|
+
md: 900,
|
|
701
|
+
lg: 1200,
|
|
702
|
+
xl: 1536,
|
|
703
|
+
},
|
|
704
|
+
},
|
|
705
|
+
}), [tenantTheme]);
|
|
645
706
|
const value = useMemo(() => ({
|
|
646
707
|
tenantId,
|
|
647
|
-
theme,
|
|
648
|
-
}), [tenantId,
|
|
649
|
-
return (jsx(TenantThemeContext.Provider, { value: value, children: children }));
|
|
708
|
+
theme: tenantTheme,
|
|
709
|
+
}), [tenantId, tenantTheme]);
|
|
710
|
+
return (jsx(ThemeProvider, { theme: muiTheme, children: jsx(TenantThemeContext.Provider, { value: value, children: children }) }));
|
|
650
711
|
}
|
|
651
712
|
/**
|
|
652
713
|
* Hook to access tenant theme configuration
|
|
@@ -706,21 +767,20 @@ function useIsTenant(checkTenantId) {
|
|
|
706
767
|
* ```
|
|
707
768
|
*/
|
|
708
769
|
const Button = React__default.memo(function Button({ tenantColored = false, variant = 'contained', sx, color, ...props }) {
|
|
770
|
+
const theme = useTheme();
|
|
709
771
|
const tenantTheme = useTenantTheme();
|
|
710
|
-
const
|
|
711
|
-
const baseWordSpacingSx = { wordSpacing: '0px' };
|
|
712
|
-
const buttonSx = tenantColored && theme
|
|
772
|
+
const buttonSx = tenantColored && tenantTheme?.theme
|
|
713
773
|
? {
|
|
714
|
-
|
|
715
|
-
backgroundColor: theme.palette?.primary?.main,
|
|
716
|
-
color:
|
|
774
|
+
wordSpacing: 0,
|
|
775
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.main,
|
|
776
|
+
color: theme.palette.common.white,
|
|
717
777
|
'&:hover': {
|
|
718
|
-
backgroundColor: theme.palette?.primary?.dark || theme.palette?.primary?.main,
|
|
778
|
+
backgroundColor: tenantTheme.theme.palette?.primary?.dark || tenantTheme.theme.palette?.primary?.main,
|
|
719
779
|
},
|
|
720
780
|
...sx,
|
|
721
781
|
}
|
|
722
782
|
: {
|
|
723
|
-
|
|
783
|
+
wordSpacing: 0,
|
|
724
784
|
...sx,
|
|
725
785
|
};
|
|
726
786
|
return (jsx(Button$1, { variant: variant, color: tenantColored ? undefined : color, sx: buttonSx, ...props }));
|
|
@@ -740,11 +800,11 @@ const Button = React__default.memo(function Button({ tenantColored = false, vari
|
|
|
740
800
|
* ```
|
|
741
801
|
*/
|
|
742
802
|
const Card = React__default.memo(function Card({ title, headerAction, content, actions, tenantAccent = false, sx, children, ...props }) {
|
|
803
|
+
const theme = useTheme();
|
|
743
804
|
const tenantTheme = useTenantTheme();
|
|
744
|
-
const
|
|
745
|
-
const cardSx = tenantAccent && theme
|
|
805
|
+
const cardSx = tenantAccent && tenantTheme?.theme
|
|
746
806
|
? {
|
|
747
|
-
borderTop: `4px solid ${theme.palette?.primary?.main ||
|
|
807
|
+
borderTop: `4px solid ${tenantTheme.theme.palette?.primary?.main || theme.palette.primary.main}`,
|
|
748
808
|
...sx,
|
|
749
809
|
}
|
|
750
810
|
: sx;
|
|
@@ -765,18 +825,18 @@ const Card = React__default.memo(function Card({ title, headerAction, content, a
|
|
|
765
825
|
* ```
|
|
766
826
|
*/
|
|
767
827
|
const Banner = React__default.memo(function Banner({ title, description, action, gradient = true, sx, ...props }) {
|
|
828
|
+
const theme = useTheme();
|
|
768
829
|
const tenantTheme = useTenantTheme();
|
|
769
|
-
const
|
|
770
|
-
const
|
|
771
|
-
const lightColor = theme?.palette?.primary?.light || primaryColor;
|
|
830
|
+
const primaryColor = tenantTheme?.theme?.palette?.primary?.main || theme.palette.primary.main;
|
|
831
|
+
const lightColor = tenantTheme?.theme?.palette?.primary?.light || theme.palette.primary.light;
|
|
772
832
|
const background = gradient
|
|
773
833
|
? `linear-gradient(135deg, ${primaryColor} 0%, ${lightColor} 100%)`
|
|
774
834
|
: primaryColor;
|
|
775
835
|
return (jsxs(Box, { sx: {
|
|
776
836
|
background,
|
|
777
|
-
color:
|
|
778
|
-
padding:
|
|
779
|
-
borderRadius:
|
|
837
|
+
color: theme.palette.common.white,
|
|
838
|
+
padding: theme.spacing(4),
|
|
839
|
+
borderRadius: `${theme.shape.borderRadius}px`,
|
|
780
840
|
textAlign: 'center',
|
|
781
841
|
...sx,
|
|
782
842
|
}, ...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 +2079,16 @@ function sanitizeUrl(url, fallback = '#') {
|
|
|
2019
2079
|
return fallback;
|
|
2020
2080
|
}
|
|
2021
2081
|
|
|
2022
|
-
const DivFooter = styled('div')(() => ({
|
|
2023
|
-
backgroundColor:
|
|
2024
|
-
padding:
|
|
2025
|
-
'
|
|
2026
|
-
padding:
|
|
2082
|
+
const DivFooter = styled('div')(({ theme }) => ({
|
|
2083
|
+
backgroundColor: theme.palette.grey[800],
|
|
2084
|
+
padding: theme.spacing(2.5, 2),
|
|
2085
|
+
[theme.breakpoints.up('md')]: {
|
|
2086
|
+
padding: theme.spacing(8.75, 0),
|
|
2027
2087
|
},
|
|
2028
2088
|
}));
|
|
2029
2089
|
const DivFooterConterResponsiveLayout = styled('div')(({ theme }) => ({
|
|
2030
|
-
color:
|
|
2031
|
-
[theme.breakpoints.up(
|
|
2090
|
+
color: theme.palette.common.white,
|
|
2091
|
+
[theme.breakpoints.up('lg')]: {
|
|
2032
2092
|
minWidth: '1128px',
|
|
2033
2093
|
maxWidth: '1128px',
|
|
2034
2094
|
margin: '0 auto',
|
|
@@ -2038,68 +2098,64 @@ const FooterHiddenContent = styled('div')(({ simplifiedLayout }) => simplifiedLa
|
|
|
2038
2098
|
const DivIglooIntro = styled('div')(({ theme }) => ({
|
|
2039
2099
|
display: 'flex',
|
|
2040
2100
|
flexDirection: 'column',
|
|
2041
|
-
gap:
|
|
2042
|
-
color: theme
|
|
2043
|
-
'
|
|
2101
|
+
gap: theme.spacing(3),
|
|
2102
|
+
color: theme.palette.common.white,
|
|
2103
|
+
[theme.breakpoints.up('md')]: {
|
|
2044
2104
|
width: 320,
|
|
2045
2105
|
marginRight: 194,
|
|
2046
2106
|
},
|
|
2047
2107
|
}));
|
|
2048
|
-
const DivSocial = styled('div')(() => ({
|
|
2108
|
+
const DivSocial = styled('div')(({ theme }) => ({
|
|
2049
2109
|
display: 'flex',
|
|
2050
2110
|
alignItems: 'center',
|
|
2051
2111
|
margin: '0 auto',
|
|
2052
|
-
columnGap:
|
|
2112
|
+
columnGap: theme.spacing(4),
|
|
2053
2113
|
flexDirection: 'row',
|
|
2054
|
-
'
|
|
2114
|
+
[theme.breakpoints.up('md')]: {
|
|
2055
2115
|
margin: 'initial',
|
|
2056
2116
|
},
|
|
2057
2117
|
}));
|
|
2058
2118
|
const ButtonIcon = styled(Button$1)(({ theme }) => ({
|
|
2059
|
-
color: theme.palette.common
|
|
2060
|
-
padding:
|
|
2061
|
-
minWidth: 'auto
|
|
2119
|
+
color: theme.palette.common.white,
|
|
2120
|
+
padding: 0,
|
|
2121
|
+
minWidth: 'auto',
|
|
2062
2122
|
}));
|
|
2063
|
-
const TypographyIntro = styled(Typography)(() => ({
|
|
2123
|
+
const TypographyIntro = styled(Typography)(({ theme }) => ({
|
|
2064
2124
|
textAlign: 'center',
|
|
2065
|
-
color:
|
|
2066
|
-
'
|
|
2125
|
+
color: theme.palette.common.white,
|
|
2126
|
+
[theme.breakpoints.up('md')]: {
|
|
2067
2127
|
textAlign: 'left',
|
|
2068
2128
|
},
|
|
2069
2129
|
}));
|
|
2070
|
-
const TypographyAddressFooter = styled(Typography)(() => ({
|
|
2071
|
-
marginTop:
|
|
2130
|
+
const TypographyAddressFooter = styled(Typography)(({ theme }) => ({
|
|
2131
|
+
marginTop: theme.spacing(2),
|
|
2072
2132
|
textAlign: 'center',
|
|
2073
|
-
color:
|
|
2074
|
-
'
|
|
2133
|
+
color: theme.palette.common.white,
|
|
2134
|
+
[theme.breakpoints.up('md')]: {
|
|
2075
2135
|
textAlign: 'left',
|
|
2076
2136
|
},
|
|
2077
2137
|
}));
|
|
2078
|
-
const DivLogos = styled('div')(() => ({
|
|
2138
|
+
const DivLogos = styled('div')(({ theme }) => ({
|
|
2079
2139
|
display: 'flex',
|
|
2080
2140
|
flexDirection: 'column',
|
|
2081
|
-
gap:
|
|
2141
|
+
gap: theme.spacing(2),
|
|
2082
2142
|
alignItems: 'center',
|
|
2083
|
-
marginTop:
|
|
2084
|
-
'
|
|
2143
|
+
marginTop: theme.spacing(2),
|
|
2144
|
+
[theme.breakpoints.up('md')]: {
|
|
2085
2145
|
width: '100%',
|
|
2086
2146
|
marginTop: 0,
|
|
2087
2147
|
gap: 'initial',
|
|
2088
2148
|
alignItems: 'baseline',
|
|
2089
2149
|
},
|
|
2090
2150
|
}));
|
|
2091
|
-
const DivFirstRow = styled('div')(() => ({
|
|
2151
|
+
const DivFirstRow = styled('div')(({ theme }) => ({
|
|
2092
2152
|
display: 'flex',
|
|
2093
2153
|
flexDirection: 'row',
|
|
2094
|
-
gap:
|
|
2154
|
+
gap: theme.spacing(2),
|
|
2095
2155
|
}));
|
|
2096
2156
|
const ButtonOjkLink = styled(Button$1)(() => ({
|
|
2097
2157
|
display: 'flex',
|
|
2098
2158
|
justifyContent: 'flex-start',
|
|
2099
|
-
'@media (min-width: 769px)': {
|
|
2100
|
-
display: 'flex !important',
|
|
2101
|
-
justifyContent: 'flex-start !important ',
|
|
2102
|
-
},
|
|
2103
2159
|
}));
|
|
2104
2160
|
const ImageOjkLicense = styled('img')(() => ({
|
|
2105
2161
|
alignSelf: 'flex-start',
|
|
@@ -2112,53 +2168,53 @@ const ButtonSolisoustamaLink = styled(Button$1)(() => ({
|
|
|
2112
2168
|
const ImageSolisoustama = styled('img')(() => ({
|
|
2113
2169
|
height: 'auto',
|
|
2114
2170
|
}));
|
|
2115
|
-
const DivLinks = styled('div')(() => ({
|
|
2171
|
+
const DivLinks = styled('div')(({ theme }) => ({
|
|
2116
2172
|
display: 'flex',
|
|
2117
2173
|
flex: 1,
|
|
2118
2174
|
alignItems: 'center',
|
|
2119
|
-
gap:
|
|
2175
|
+
gap: theme.spacing(2),
|
|
2120
2176
|
justifyContent: 'center',
|
|
2121
|
-
'
|
|
2177
|
+
[theme.breakpoints.up('md')]: {
|
|
2122
2178
|
flex: '1 1',
|
|
2123
2179
|
alignItems: 'normal',
|
|
2124
2180
|
},
|
|
2125
2181
|
}));
|
|
2126
|
-
const DivSection = styled('div')(() => ({
|
|
2182
|
+
const DivSection = styled('div')(({ theme }) => ({
|
|
2127
2183
|
display: 'flex',
|
|
2128
2184
|
flexDirection: 'column',
|
|
2129
|
-
gap:
|
|
2185
|
+
gap: theme.spacing(2),
|
|
2130
2186
|
flex: 1,
|
|
2131
2187
|
alignItems: 'flex-start',
|
|
2132
|
-
'
|
|
2133
|
-
gap:
|
|
2188
|
+
[theme.breakpoints.up('md')]: {
|
|
2189
|
+
gap: theme.spacing(3),
|
|
2134
2190
|
'&:not(:first-of-type)': {
|
|
2135
2191
|
marginLeft: 194,
|
|
2136
2192
|
},
|
|
2137
2193
|
},
|
|
2138
2194
|
}));
|
|
2139
|
-
const ButtonBottomLink = styled(Button$1)(() => ({
|
|
2140
|
-
color:
|
|
2195
|
+
const ButtonBottomLink = styled(Button$1)(({ theme }) => ({
|
|
2196
|
+
color: theme.palette.common.white,
|
|
2141
2197
|
textTransform: 'capitalize',
|
|
2142
|
-
'
|
|
2143
|
-
padding:
|
|
2144
|
-
textAlign: 'left
|
|
2145
|
-
minWidth: 'auto
|
|
2198
|
+
[theme.breakpoints.up('md')]: {
|
|
2199
|
+
padding: 0,
|
|
2200
|
+
textAlign: 'left',
|
|
2201
|
+
minWidth: 'auto',
|
|
2146
2202
|
},
|
|
2147
2203
|
}));
|
|
2148
|
-
const StyledDivider = styled(Divider)(() => ({
|
|
2149
|
-
margin:
|
|
2150
|
-
borderColor: '#5F5E62
|
|
2204
|
+
const StyledDivider = styled(Divider)(({ theme }) => ({
|
|
2205
|
+
margin: theme.spacing(3, 0, 2),
|
|
2206
|
+
borderColor: '#5F5E62',
|
|
2151
2207
|
}));
|
|
2152
2208
|
const DivBottom = styled('div')(() => ({
|
|
2153
2209
|
display: 'flex',
|
|
2154
2210
|
justifyContent: 'space-between',
|
|
2155
2211
|
alignItems: 'center',
|
|
2156
2212
|
}));
|
|
2157
|
-
const DivSep = styled('div')(() => ({
|
|
2213
|
+
const DivSep = styled('div')(({ theme }) => ({
|
|
2158
2214
|
width: '1px',
|
|
2159
2215
|
height: 10,
|
|
2160
2216
|
borderRadius: '1px',
|
|
2161
|
-
backgroundColor:
|
|
2217
|
+
backgroundColor: theme.palette.common.white,
|
|
2162
2218
|
}));
|
|
2163
2219
|
const AnchorLink = styled('a')(() => ({
|
|
2164
2220
|
color: 'inherit',
|
|
@@ -3888,28 +3944,28 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
|
|
|
3888
3944
|
const fieldsWrapperProps = desktopGridLayout
|
|
3889
3945
|
? {}
|
|
3890
3946
|
: { sx: { display: 'flex', flexDirection: 'column', gap: '24px' } };
|
|
3891
|
-
return (jsx(
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3947
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(FieldsWrapper, { ...fieldsWrapperProps, children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Typography, { variant: "caption", sx: {
|
|
3948
|
+
display: 'block',
|
|
3949
|
+
mt: 0.5,
|
|
3950
|
+
ml: 2,
|
|
3951
|
+
color: '#5F5E62',
|
|
3952
|
+
fontSize: '12px',
|
|
3953
|
+
wordSpacing: '0px',
|
|
3954
|
+
}, children: fields.full_name.helperText }))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
|
|
3955
|
+
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, { sx: {
|
|
3956
|
+
color: 'error.main',
|
|
3957
|
+
fontSize: '12px',
|
|
3958
|
+
mt: 0.5,
|
|
3959
|
+
ml: 4,
|
|
3960
|
+
wordSpacing: '0px',
|
|
3961
|
+
}, children: consents.bank_account_confirmation.error }))] }) })) : (jsxs(CheckboxContainer$1, { children: [jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
|
|
3899
3962
|
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, { sx: {
|
|
3900
3963
|
color: 'error.main',
|
|
3901
3964
|
fontSize: '12px',
|
|
3902
3965
|
mt: 0.5,
|
|
3903
3966
|
ml: 4,
|
|
3904
3967
|
wordSpacing: '0px',
|
|
3905
|
-
}, children: consents.bank_account_confirmation.error }))] }) })) : (
|
|
3906
|
-
defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, { sx: {
|
|
3907
|
-
color: 'error.main',
|
|
3908
|
-
fontSize: '12px',
|
|
3909
|
-
mt: 0.5,
|
|
3910
|
-
ml: 4,
|
|
3911
|
-
wordSpacing: '0px',
|
|
3912
|
-
}, children: consents.bank_account_confirmation.error }))] })), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] }) }));
|
|
3968
|
+
}, children: consents.bank_account_confirmation.error }))] })), desktopGridLayout ? (jsx(FullWidthField$1, { children: jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsx(CheckboxContainer$1, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] }) }) }));
|
|
3913
3969
|
};
|
|
3914
3970
|
|
|
3915
3971
|
const FormContainer$2 = styled(Box)({
|
|
@@ -4003,12 +4059,53 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
4003
4059
|
}
|
|
4004
4060
|
return content;
|
|
4005
4061
|
};
|
|
4006
|
-
return (jsx(
|
|
4062
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [isForChild && (jsx(FullWidthField, { children: jsx(SectionTitle$1, { children: "Policyowner contact details" }) })), renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), (mailingAddressSame?.checked && !isForChild) && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: jsx(SectionTitle$1, { children: "Residential address" }) })] })), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame?.checked && mailingFields && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }) }), isForChild && mailingFields.mailing_phone_number && (renderFieldWithHelperText(mailingFields.mailing_phone_number, false)), isForChild && mailingFields.mailing_email_address && (renderFieldWithLayout(mailingFields.mailing_email_address, false)), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), childContactNotSame?.checked && childContactFields && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField, { children: jsx(SectionTitle$1, { children: "Child's contact details" }) }), renderFieldWithHelperText(childContactFields.child_phone_number, false), renderFieldWithLayout(childContactFields.child_email_address, false), renderFieldWithHelperText(childContactFields.child_address_line1, false), renderFieldWithHelperText(childContactFields.child_address_line2, false), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsx(FullWidthField, { children: jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
4063
|
+
color: '#929094',
|
|
4064
|
+
'&.Mui-checked': {
|
|
4065
|
+
color: '#317abc',
|
|
4066
|
+
},
|
|
4067
|
+
} }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) }) })), childContactNotSame && (jsx(FullWidthField, { children: jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4068
|
+
color: '#929094',
|
|
4069
|
+
'&.Mui-checked': {
|
|
4070
|
+
color: '#317abc',
|
|
4071
|
+
},
|
|
4072
|
+
} }), label: jsxs(Box, { children: [jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsx(Box, { component: "span", sx: {
|
|
4073
|
+
display: 'block',
|
|
4074
|
+
fontSize: '12px',
|
|
4075
|
+
color: '#5F5E62',
|
|
4076
|
+
mt: 0.5,
|
|
4077
|
+
}, children: childContactHelperText })] }) }) }) }))] })) : (jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [isForChild && (jsx(SectionTitle$1, { children: "Policyowner contact details" })), jsxs(Box, { children: [renderField(fields.phone_number), fields.phone_number.helperText && (jsx(Box, { component: "span", sx: {
|
|
4078
|
+
display: 'block',
|
|
4079
|
+
mt: 0.5,
|
|
4080
|
+
ml: 2,
|
|
4081
|
+
color: '#5F5E62',
|
|
4082
|
+
fontSize: '12px',
|
|
4083
|
+
}, children: fields.phone_number.helperText }))] }), renderField(fields.email_address), (mailingAddressSame?.checked && !isForChild) && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Residential address" })] })), jsxs(Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsx(Box, { component: "span", sx: {
|
|
4084
|
+
display: 'block',
|
|
4085
|
+
mt: 0.5,
|
|
4086
|
+
color: '#5F5E62',
|
|
4087
|
+
fontSize: '12px',
|
|
4088
|
+
}, children: fields.residential_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsx(Box, { component: "span", sx: {
|
|
4089
|
+
display: 'block',
|
|
4090
|
+
mt: 0.5,
|
|
4091
|
+
color: '#5F5E62',
|
|
4092
|
+
fontSize: '12px',
|
|
4093
|
+
}, children: fields.residential_address_line2.helperText }))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame?.checked && mailingFields && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxs(Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' }, children: mailingFields.mailing_phone_number.helperText }))] })), isForChild && mailingFields.mailing_email_address && (renderField(mailingFields.mailing_email_address)), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, { component: "span", sx: {
|
|
4094
|
+
display: 'block',
|
|
4095
|
+
mt: 0.5,
|
|
4096
|
+
color: '#5F5E62',
|
|
4097
|
+
fontSize: '12px',
|
|
4098
|
+
}, children: mailingFields.mailing_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsx(Box, { component: "span", sx: {
|
|
4099
|
+
display: 'block',
|
|
4100
|
+
mt: 0.5,
|
|
4101
|
+
color: '#5F5E62',
|
|
4102
|
+
fontSize: '12px',
|
|
4103
|
+
}, children: mailingFields.mailing_address_line2.helperText }))] }), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), childContactNotSame?.checked && childContactFields && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Child's contact details" }), jsxs(Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_phone_number.helperText }))] }), renderField(childContactFields.child_email_address), jsxs(Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line2.helperText }))] }), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
4007
4104
|
color: '#929094',
|
|
4008
4105
|
'&.Mui-checked': {
|
|
4009
4106
|
color: '#317abc',
|
|
4010
4107
|
},
|
|
4011
|
-
} }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })
|
|
4108
|
+
} }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4012
4109
|
color: '#929094',
|
|
4013
4110
|
'&.Mui-checked': {
|
|
4014
4111
|
color: '#317abc',
|
|
@@ -4018,48 +4115,7 @@ const ContactDetailsForm = ({ renderField, fields, isForChild = false, mailingFi
|
|
|
4018
4115
|
fontSize: '12px',
|
|
4019
4116
|
color: '#5F5E62',
|
|
4020
4117
|
mt: 0.5,
|
|
4021
|
-
}, children: childContactHelperText })] }) }) })
|
|
4022
|
-
display: 'block',
|
|
4023
|
-
mt: 0.5,
|
|
4024
|
-
ml: 2,
|
|
4025
|
-
color: '#5F5E62',
|
|
4026
|
-
fontSize: '12px',
|
|
4027
|
-
}, children: fields.phone_number.helperText }))] }), renderField(fields.email_address), (mailingAddressSame?.checked && !isForChild) && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Residential address" })] })), jsxs(Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsx(Box, { component: "span", sx: {
|
|
4028
|
-
display: 'block',
|
|
4029
|
-
mt: 0.5,
|
|
4030
|
-
color: '#5F5E62',
|
|
4031
|
-
fontSize: '12px',
|
|
4032
|
-
}, children: fields.residential_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsx(Box, { component: "span", sx: {
|
|
4033
|
-
display: 'block',
|
|
4034
|
-
mt: 0.5,
|
|
4035
|
-
color: '#5F5E62',
|
|
4036
|
-
fontSize: '12px',
|
|
4037
|
-
}, children: fields.residential_address_line2.helperText }))] }), fields.country && renderField(fields.country), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), mailingAddressSame?.checked && mailingFields && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: isForChild ? 'Policyowner mailing address' : 'Mailing address' }), isForChild && mailingFields.mailing_phone_number && (jsxs(Box, { children: [renderField(mailingFields.mailing_phone_number), mailingFields.mailing_phone_number.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' }, children: mailingFields.mailing_phone_number.helperText }))] })), isForChild && mailingFields.mailing_email_address && (renderField(mailingFields.mailing_email_address)), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, { component: "span", sx: {
|
|
4038
|
-
display: 'block',
|
|
4039
|
-
mt: 0.5,
|
|
4040
|
-
color: '#5F5E62',
|
|
4041
|
-
fontSize: '12px',
|
|
4042
|
-
}, children: mailingFields.mailing_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsx(Box, { component: "span", sx: {
|
|
4043
|
-
display: 'block',
|
|
4044
|
-
mt: 0.5,
|
|
4045
|
-
color: '#5F5E62',
|
|
4046
|
-
fontSize: '12px',
|
|
4047
|
-
}, children: mailingFields.mailing_address_line2.helperText }))] }), mailingFields.mailing_country && renderField(mailingFields.mailing_country), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), childContactNotSame?.checked && childContactFields && (jsxs(Fragment, { children: [jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsx(SectionTitle$1, { children: "Child's contact details" }), jsxs(Box, { children: [renderField(childContactFields.child_phone_number), childContactFields.child_phone_number.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, ml: 2, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_phone_number.helperText }))] }), renderField(childContactFields.child_email_address), jsxs(Box, { children: [renderField(childContactFields.child_address_line1), childContactFields.child_address_line1.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line1.helperText }))] }), jsxs(Box, { children: [renderField(childContactFields.child_address_line2), childContactFields.child_address_line2.helperText && (jsx(Box, { component: "span", sx: { display: 'block', mt: 0.5, color: '#5F5E62', fontSize: '12px' }, children: childContactFields.child_address_line2.helperText }))] }), renderField(childContactFields.child_postal_code), childContactFields.child_country && renderField(childContactFields.child_country), renderField(childContactFields.child_city), renderField(childContactFields.child_state)] })), mailingAddressSame && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
|
|
4048
|
-
color: '#929094',
|
|
4049
|
-
'&.Mui-checked': {
|
|
4050
|
-
color: '#317abc',
|
|
4051
|
-
},
|
|
4052
|
-
} }), label: jsx(CheckboxLabel, { children: mailingAddressSame.label || defaultMailingLabel }) }) })), childContactNotSame && (jsx(CheckboxContainer, { children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: childContactNotSame.checked, onChange: (e) => childContactNotSame.onChange(e.target.checked), name: "child_contact_not_same", sx: {
|
|
4053
|
-
color: '#929094',
|
|
4054
|
-
'&.Mui-checked': {
|
|
4055
|
-
color: '#317abc',
|
|
4056
|
-
},
|
|
4057
|
-
} }), label: jsxs(Box, { children: [jsx(CheckboxLabel, { children: childContactNotSame.label || defaultChildContactLabel }), jsx(Box, { component: "span", sx: {
|
|
4058
|
-
display: 'block',
|
|
4059
|
-
fontSize: '12px',
|
|
4060
|
-
color: '#5F5E62',
|
|
4061
|
-
mt: 0.5,
|
|
4062
|
-
}, children: childContactHelperText })] }) }) }))] })) }));
|
|
4118
|
+
}, children: childContactHelperText })] }) }) }))] })) }) }));
|
|
4063
4119
|
};
|
|
4064
4120
|
|
|
4065
4121
|
const FormContainer$1 = styled(Box)({
|
|
@@ -4092,7 +4148,7 @@ const MeasurementFieldsGrid = styled(Box)({
|
|
|
4092
4148
|
|
|
4093
4149
|
const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
|
|
4094
4150
|
const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
|
|
4095
|
-
return (jsx(
|
|
4151
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxs(Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] }) }) }));
|
|
4096
4152
|
};
|
|
4097
4153
|
|
|
4098
4154
|
const FormContainer = styled(Box)({
|
|
@@ -4154,10 +4210,10 @@ const ChildInformationForm = ({ renderField, fields, consents, onSubmit, formRef
|
|
|
4154
4210
|
const renderAdditionalFields = () => (jsxs(Fragment, { children: [fields.place_of_birth && renderField(fields.place_of_birth), fields.marital_status && renderField(fields.marital_status), fields.race && renderField(fields.race), fields.religion && renderField(fields.religion), fields.occupation && renderField(fields.occupation), fields.industry && renderField(fields.industry), fields.crediting_bank_name && renderField(fields.crediting_bank_name), fields.crediting_bank_account_number && renderField(fields.crediting_bank_account_number), fields.annual_income && renderField(fields.annual_income)] }));
|
|
4155
4211
|
// Desktop layout with 2-column grid
|
|
4156
4212
|
if (desktopGridLayout) {
|
|
4157
|
-
return (jsx(
|
|
4213
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(FieldsGridContainer, { children: [renderHelperField(fields.full_name), fields.nric ? renderHelperField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) }) }));
|
|
4158
4214
|
}
|
|
4159
4215
|
// Mobile layout - single column
|
|
4160
|
-
return (jsx(
|
|
4216
|
+
return (jsx(Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsx(Container, { sx: sx, children: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [renderHelperField(fields.full_name), fields.nric && renderHelperField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), fields.salutation && renderField(fields.salutation), renderField(fields.nationality), renderAdditionalFields(), renderConsents()] }) }) }));
|
|
4161
4217
|
};
|
|
4162
4218
|
|
|
4163
4219
|
/**
|
|
@@ -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>, {}, {}>;
|