igloo-d2c-components 1.0.22 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/index.js +67 -61
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +67 -61
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -101,7 +101,7 @@ function useIsTenant(checkTenantId) {
101
101
  * Igloo Typography Configuration
102
102
  */
103
103
  const iglooTypography = {
104
- fontFamily: 'Montserrat',
104
+ fontFamily: 'Inter, sans-serif',
105
105
  fontWeightRegular: 400,
106
106
  fontWeightMedium: 500,
107
107
  fontWeightSemiBold: 600,
@@ -1994,14 +1994,16 @@ const CategoryIcon = styles.styled(material.Box)(({ theme }) => ({
1994
1994
  justifyContent: 'center',
1995
1995
  }));
1996
1996
  const TitleText = styles.styled(material.Typography)(({ theme }) => ({
1997
- fontFamily: '"Montserrat", sans-serif',
1998
1997
  fontWeight: 700,
1999
- fontSize: '20px',
1998
+ fontSize: '28px',
2000
1999
  lineHeight: '28px',
2001
2000
  color: '#13131B',
2001
+ [theme.breakpoints.down('md')]: {
2002
+ fontSize: '20px',
2003
+ lineHeight: '24px',
2004
+ },
2002
2005
  }));
2003
2006
  const SubtitleText = styles.styled(material.Typography)(({ theme }) => ({
2004
- fontFamily: '"Montserrat", sans-serif',
2005
2007
  fontWeight: 400,
2006
2008
  fontSize: '14px',
2007
2009
  lineHeight: '18px',
@@ -2019,7 +2021,6 @@ const PrimaryButton = styles.styled(material.Button)(({ theme }) => ({
2019
2021
  borderRadius: '24px',
2020
2022
  height: '48px',
2021
2023
  textTransform: 'none',
2022
- fontFamily: '"Montserrat", sans-serif',
2023
2024
  fontWeight: 500,
2024
2025
  fontSize: '14px',
2025
2026
  lineHeight: '18px',
@@ -2032,7 +2033,6 @@ const SecondaryButton = styles.styled(material.Button)(({ theme }) => ({
2032
2033
  borderRadius: '8px',
2033
2034
  height: '40px',
2034
2035
  textTransform: 'none',
2035
- fontFamily: '"Montserrat", sans-serif',
2036
2036
  fontWeight: 500,
2037
2037
  fontSize: '14px',
2038
2038
  lineHeight: '18px',
@@ -2251,24 +2251,34 @@ const QuestionHeader = styles.styled(material.Box)(({ theme }) => ({
2251
2251
  width: '100%',
2252
2252
  }));
2253
2253
  const QuestionTitle = styles.styled(material.Typography)(({ theme }) => ({
2254
- fontFamily: '"Montserrat", sans-serif',
2255
2254
  fontWeight: 700,
2256
- fontSize: '14px',
2257
- lineHeight: '20px',
2255
+ fontSize: '18px',
2256
+ lineHeight: '24px',
2258
2257
  color: '#13131B',
2258
+ [theme.breakpoints.down('md')]: {
2259
+ fontSize: '14px',
2260
+ lineHeight: '20px',
2261
+ },
2259
2262
  }));
2260
2263
  const QuestionSubtext = styles.styled(material.Typography)(({ theme }) => ({
2261
- fontFamily: '"Montserrat", sans-serif',
2262
2264
  fontWeight: 400,
2263
- fontSize: '12px',
2264
- lineHeight: '16px',
2265
+ fontSize: '16px',
2266
+ lineHeight: '20px',
2265
2267
  color: '#5F5E62',
2268
+ [theme.breakpoints.down('md')]: {
2269
+ fontSize: '12px',
2270
+ lineHeight: '14px',
2271
+ },
2266
2272
  }));
2267
2273
  const OptionsContainer$1 = styles.styled(material.Box)(({ theme }) => ({
2268
2274
  display: 'flex',
2269
- flexDirection: 'column',
2275
+ flexDirection: 'row',
2276
+ flexWrap: 'wrap',
2270
2277
  gap: '8px',
2271
2278
  width: '100%',
2279
+ [theme.breakpoints.down('md')]: {
2280
+ flexDirection: 'column',
2281
+ },
2272
2282
  }));
2273
2283
 
2274
2284
  /**
@@ -2322,7 +2332,9 @@ const variantColors = {
2322
2332
  hoverBorder: '#5f5e62',
2323
2333
  },
2324
2334
  };
2325
- const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
2335
+ const StyledOptionButton = styles.styled(material.ButtonBase, {
2336
+ shouldForwardProp: (prop) => prop !== 'colorVariant',
2337
+ })(({ theme, selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
2326
2338
  const heights = {
2327
2339
  small: '32px',
2328
2340
  medium: '40px',
@@ -2331,6 +2343,7 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size
2331
2343
  const colors = variantColors[colorVariant];
2332
2344
  return {
2333
2345
  height: heights[size],
2346
+ // On desktop: auto width (inline), on mobile: full width
2334
2347
  width: fullWidth ? '100%' : 'auto',
2335
2348
  borderRadius: '24px',
2336
2349
  border: selected
@@ -2353,6 +2366,10 @@ const StyledOptionButton = styles.styled(material.ButtonBase)(({ selected, size
2353
2366
  cursor: 'not-allowed',
2354
2367
  opacity: 0.6,
2355
2368
  },
2369
+ // Mobile: always full width
2370
+ [theme.breakpoints.down('md')]: {
2371
+ width: '100%',
2372
+ },
2356
2373
  };
2357
2374
  });
2358
2375
  const OptionContent = styles.styled(material.Box)(() => ({
@@ -2367,14 +2384,18 @@ const OptionIcon = styles.styled('span')(() => ({
2367
2384
  lineHeight: 1,
2368
2385
  flexShrink: 0,
2369
2386
  }));
2370
- const OptionLabel = styles.styled(material.Typography)(({ selected, colorVariant = 'default' }) => {
2387
+ const OptionLabel = styles.styled(material.Typography)(({ theme, selected, colorVariant = 'default' }) => {
2371
2388
  const colors = variantColors[colorVariant];
2372
2389
  return {
2373
- fontWeight: selected ? 600 : 500,
2390
+ fontWeight: selected ? 700 : 500,
2374
2391
  fontSize: '16px',
2375
- lineHeight: '20px',
2392
+ lineHeight: '24px',
2376
2393
  color: selected ? '#0090DA' : colors.unselectedText,
2377
2394
  textAlign: 'center',
2395
+ [theme.breakpoints.down('md')]: {
2396
+ lineHeight: '20px',
2397
+ fontWeight: 500,
2398
+ },
2378
2399
  };
2379
2400
  });
2380
2401
 
@@ -2401,7 +2422,7 @@ const OptionLabel = styles.styled(material.Typography)(({ selected, colorVariant
2401
2422
  * />
2402
2423
  * ```
2403
2424
  */
2404
- function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
2425
+ function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = false, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
2405
2426
  const handleClick = () => {
2406
2427
  if (!disabled && onClick) {
2407
2428
  onClick(value);
@@ -2591,8 +2612,7 @@ const ToggleButton = styles.styled(material.Box)(({ theme, active }) => {
2591
2612
  const ToggleText = styles.styled(material.Typography)(({ theme }) => {
2592
2613
  var _a, _b, _c, _d, _e, _f;
2593
2614
  return ({
2594
- fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2595
- "'Montserrat', sans-serif",
2615
+ fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
2596
2616
  fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
2597
2617
  fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
2598
2618
  lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
@@ -2671,23 +2691,30 @@ const CalloutIcon = styles.styled(InfoIcon)(({ theme }) => {
2671
2691
  const CalloutTitle = styles.styled(material.Typography)(({ theme }) => {
2672
2692
  var _a, _b, _c, _d, _e, _f, _g, _h;
2673
2693
  return ({
2674
- fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2675
- "'Montserrat', sans-serif",
2676
- fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
2677
- fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
2694
+ fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
2695
+ fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '16px',
2696
+ fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 700,
2678
2697
  lineHeight: ((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _e === void 0 ? void 0 : _e.bodyMedium) === null || _f === void 0 ? void 0 : _f.lineHeight) || '20px',
2679
2698
  color: ((_h = (_g = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _g === void 0 ? void 0 : _g.natural) === null || _h === void 0 ? void 0 : _h.dim) || '#13131b',
2699
+ [theme.breakpoints.down('md')]: {
2700
+ fontSize: '14px',
2701
+ lineHeight: '20px',
2702
+ },
2680
2703
  });
2681
2704
  });
2682
2705
  const CalloutText = styles.styled(material.Typography)(({ theme }) => {
2683
2706
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2684
2707
  return ({
2685
2708
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2686
- "'Montserrat', sans-serif",
2687
- fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
2709
+ '',
2710
+ fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
2688
2711
  fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
2689
2712
  lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
2690
2713
  color: ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _h === void 0 ? void 0 : _h.natural) === null || _j === void 0 ? void 0 : _j.dark) || '#5f5e62',
2714
+ [theme.breakpoints.down('md')]: {
2715
+ fontSize: '12px',
2716
+ lineHeight: '14px',
2717
+ },
2691
2718
  });
2692
2719
  });
2693
2720
 
@@ -2741,7 +2768,7 @@ const InputLabel = styles.styled(material.Typography)(({ theme }) => {
2741
2768
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2742
2769
  return ({
2743
2770
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2744
- "'Montserrat', sans-serif",
2771
+ '',
2745
2772
  fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodySmall) === null || _c === void 0 ? void 0 : _c.fontSize) || '12px',
2746
2773
  fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodySmall) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
2747
2774
  lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodySmall) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
@@ -2768,7 +2795,7 @@ const InputValue = styles.styled(material.Typography)(({ theme }) => {
2768
2795
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2769
2796
  return ({
2770
2797
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2771
- "'Montserrat', sans-serif",
2798
+ '',
2772
2799
  fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.bodyMedium) === null || _c === void 0 ? void 0 : _c.fontSize) || '14px',
2773
2800
  fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.bodyMedium) === null || _e === void 0 ? void 0 : _e.fontWeight) || 400,
2774
2801
  lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.bodyMedium) === null || _g === void 0 ? void 0 : _g.lineHeight) || '18px',
@@ -2856,7 +2883,7 @@ const RangeLabel = styles.styled(material.Typography)(({ theme }) => {
2856
2883
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2857
2884
  return ({
2858
2885
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2859
- "'Montserrat', sans-serif",
2886
+ '',
2860
2887
  fontSize: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _b === void 0 ? void 0 : _b.smallText) === null || _c === void 0 ? void 0 : _c.fontSize) || '8px',
2861
2888
  fontWeight: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.smallText) === null || _e === void 0 ? void 0 : _e.fontWeight) || 500,
2862
2889
  lineHeight: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _f === void 0 ? void 0 : _f.smallText) === null || _g === void 0 ? void 0 : _g.lineHeight) || '16px',
@@ -3071,7 +3098,6 @@ const ProgressFill = styles.styled(material.Box)(({ width, progressBarTheme }) =
3071
3098
  transition: 'width 0.3s ease',
3072
3099
  }));
3073
3100
  const ProgressText = styles.styled(material.Typography)({
3074
- fontFamily: 'Montserrat',
3075
3101
  fontSize: '12px',
3076
3102
  color: '#5F5E62',
3077
3103
  fontWeight: 400,
@@ -3114,14 +3140,12 @@ const ProductInfo = styles.styled(material.Box)({
3114
3140
  marginLeft: '4px',
3115
3141
  });
3116
3142
  const ProductName = styles.styled(material.Typography)({
3117
- fontFamily: 'Montserrat',
3118
3143
  fontSize: '14px',
3119
3144
  fontWeight: 600,
3120
3145
  color: '#13131B',
3121
3146
  lineHeight: '20px',
3122
3147
  });
3123
3148
  const PlanName = styles.styled(material.Typography)({
3124
- fontFamily: 'Montserrat',
3125
3149
  fontSize: '12px',
3126
3150
  fontWeight: 400,
3127
3151
  color: '#13131B',
@@ -3133,14 +3157,12 @@ const PriceContainer = styles.styled(material.Box)({
3133
3157
  gap: '2px',
3134
3158
  });
3135
3159
  const Price = styles.styled(material.Typography)({
3136
- fontFamily: 'Montserrat',
3137
3160
  fontSize: '14px',
3138
3161
  fontWeight: 600,
3139
3162
  color: '#13131B',
3140
3163
  lineHeight: '20px',
3141
3164
  });
3142
3165
  const PricePeriod = styles.styled(material.Typography)({
3143
- fontFamily: 'Montserrat',
3144
3166
  fontSize: '12px',
3145
3167
  fontWeight: 400,
3146
3168
  color: '#13131B',
@@ -3160,7 +3182,6 @@ const SectionHeader = styles.styled(material.Box)({
3160
3182
  padding: '0 16px 24px',
3161
3183
  });
3162
3184
  const SectionTitle$2 = styles.styled(material.Typography)({
3163
- fontFamily: 'Montserrat',
3164
3185
  fontSize: '20px',
3165
3186
  fontWeight: 700,
3166
3187
  color: '#13131B',
@@ -3168,7 +3189,6 @@ const SectionTitle$2 = styles.styled(material.Typography)({
3168
3189
  marginBottom: '8px',
3169
3190
  });
3170
3191
  const SectionDescription = styles.styled(material.Typography)({
3171
- fontFamily: 'Montserrat',
3172
3192
  fontSize: '14px',
3173
3193
  fontWeight: 400,
3174
3194
  color: '#5F5E62',
@@ -3195,7 +3215,7 @@ const ButtonContainer = styles.styled(material.Box)(({ isFixed, desktopRightAlig
3195
3215
  justifyContent: 'flex-end',
3196
3216
  maxWidth: '938px',
3197
3217
  margin: '0 auto',
3198
- padding: '24px 24px',
3218
+ padding: '24px 0',
3199
3219
  backgroundColor: 'transparent',
3200
3220
  boxShadow: 'none',
3201
3221
  position: 'relative',
@@ -3211,7 +3231,6 @@ const StyledButton = styles.styled('button')(({ isDisabled, desktopWidth }) => (
3211
3231
  ? '#E1E2EB'
3212
3232
  : '#0090DA',
3213
3233
  color: isDisabled ? '#929094' : '#fff',
3214
- fontFamily: 'Montserrat',
3215
3234
  fontSize: '14px',
3216
3235
  fontWeight: 500,
3217
3236
  lineHeight: '18px',
@@ -3267,7 +3286,6 @@ styles.styled(material.Box)(({ selected }) => ({
3267
3286
  },
3268
3287
  }));
3269
3288
  styles.styled(material.Typography)(({ selected }) => ({
3270
- fontFamily: 'Montserrat',
3271
3289
  fontSize: '14px',
3272
3290
  fontWeight: 600,
3273
3291
  color: selected ? '#13131B' : '#5F5E62',
@@ -3315,7 +3333,7 @@ const FieldsGridContainer$2 = styles.styled(material.Box)({
3315
3333
  /**
3316
3334
  * Full width field - spans both columns on desktop grid
3317
3335
  */
3318
- const FullWidthField$2 = styles.styled(material.Box)({
3336
+ const FullWidthField$1 = styles.styled(material.Box)({
3319
3337
  '@media (min-width: 900px)': {
3320
3338
  gridColumn: '1 / -1',
3321
3339
  },
@@ -3331,7 +3349,6 @@ const CheckboxContainer$1 = styles.styled(material.Box)({
3331
3349
  },
3332
3350
  });
3333
3351
  const CheckboxLabel$1 = styles.styled(material.Typography)({
3334
- fontFamily: 'Montserrat',
3335
3352
  fontSize: '14px',
3336
3353
  fontWeight: 400,
3337
3354
  color: '#5F5E62',
@@ -3352,8 +3369,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
3352
3369
  ml: 2,
3353
3370
  color: '#5F5E62',
3354
3371
  fontSize: '12px',
3355
- fontFamily: 'Montserrat',
3356
- } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$2, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
3372
+ } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.salutation), renderField(fields.nationality), renderField(fields.occupation), renderField(fields.industry), renderField(fields.crediting_bank_name), renderField(fields.crediting_bank_account_number), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(CheckboxContainer$1, { children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.bank_account_confirmation.checked, onChange: (e) => consents.bank_account_confirmation.onChange(e.target.checked), name: "bank_account_confirmation" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.bank_account_confirmation.label ||
3357
3373
  defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
3358
3374
  color: 'error.main',
3359
3375
  fontSize: '12px',
@@ -3365,7 +3381,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
3365
3381
  fontSize: '12px',
3366
3382
  mt: 0.5,
3367
3383
  ml: 4,
3368
- } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$2, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
3384
+ } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }) })) : (jsxRuntime.jsx(CheckboxContainer$1, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: consents.marketing_consent.checked, onChange: (e) => consents.marketing_consent.onChange(e.target.checked), name: "marketing_consent" }), label: jsxRuntime.jsx(CheckboxLabel$1, { children: consents.marketing_consent.label || defaultMarketingLabel }) }) }))] })) })));
3369
3385
  };
3370
3386
 
3371
3387
  const FormContainer$2 = styles.styled(material.Box)({
@@ -3401,7 +3417,7 @@ const FieldsGridContainer$1 = styles.styled(material.Box)({
3401
3417
  /**
3402
3418
  * Full width field - spans both columns on desktop grid
3403
3419
  */
3404
- const FullWidthField$1 = styles.styled(material.Box)({
3420
+ const FullWidthField = styles.styled(material.Box)({
3405
3421
  '@media (min-width: 900px)': {
3406
3422
  gridColumn: '1 / -1',
3407
3423
  },
@@ -3420,14 +3436,12 @@ const CheckboxContainer = styles.styled(material.Box)({
3420
3436
  },
3421
3437
  });
3422
3438
  const CheckboxLabel = styles.styled(material.Typography)({
3423
- fontFamily: 'Montserrat',
3424
3439
  fontSize: '14px',
3425
3440
  fontWeight: 400,
3426
3441
  color: '#5F5E62',
3427
3442
  lineHeight: '18px',
3428
3443
  });
3429
3444
  const SectionTitle$1 = styles.styled(material.Typography)({
3430
- fontFamily: 'Montserrat',
3431
3445
  fontSize: '16px',
3432
3446
  fontWeight: 600,
3433
3447
  color: '#13131B',
@@ -3440,7 +3454,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3440
3454
  // Helper to render field with or without full width wrapper
3441
3455
  const renderFieldWithLayout = (field, fullWidth = false) => {
3442
3456
  if (desktopGridLayout && fullWidth) {
3443
- return jsxRuntime.jsx(FullWidthField$1, { children: renderField(field) });
3457
+ return jsxRuntime.jsx(FullWidthField, { children: renderField(field) });
3444
3458
  }
3445
3459
  return renderField(field);
3446
3460
  };
@@ -3451,14 +3465,13 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3451
3465
  mt: 0.5,
3452
3466
  color: '#5F5E62',
3453
3467
  fontSize: '12px',
3454
- fontFamily: 'Montserrat',
3455
3468
  } }, { children: field.helperText })))] }));
3456
3469
  if (desktopGridLayout && fullWidth) {
3457
- return jsxRuntime.jsx(FullWidthField$1, { children: content });
3470
+ return jsxRuntime.jsx(FullWidthField, { children: content });
3458
3471
  }
3459
3472
  return content;
3460
3473
  };
3461
- return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) }), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }) }), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
3474
+ return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxRuntime.jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }) }), renderFieldWithHelperText(fields.residential_address_line1, false), renderFieldWithHelperText(fields.residential_address_line2, false), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }) }), renderFieldWithHelperText(mailingFields.mailing_address_line1, false), renderFieldWithHelperText(mailingFields.mailing_address_line2, false), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(FullWidthField, { children: jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
3462
3475
  color: '#929094',
3463
3476
  '&.Mui-checked': {
3464
3477
  color: '#317abc',
@@ -3469,31 +3482,26 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3469
3482
  ml: 2,
3470
3483
  color: '#5F5E62',
3471
3484
  fontSize: '12px',
3472
- fontFamily: 'Montserrat',
3473
3485
  } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), jsxRuntime.jsx(SectionTitle$1, { children: "Residential address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line1), fields.residential_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3474
3486
  display: 'block',
3475
3487
  mt: 0.5,
3476
3488
  color: '#5F5E62',
3477
3489
  fontSize: '12px',
3478
- fontFamily: 'Montserrat',
3479
3490
  } }, { children: fields.residential_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3480
3491
  display: 'block',
3481
3492
  mt: 0.5,
3482
3493
  color: '#5F5E62',
3483
3494
  fontSize: '12px',
3484
- fontFamily: 'Montserrat',
3485
3495
  } }, { children: fields.residential_address_line2.helperText })))] }), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsxRuntime.jsx(material.Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionTitle$1, { children: "Mailing address" }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3486
3496
  display: 'block',
3487
3497
  mt: 0.5,
3488
3498
  color: '#5F5E62',
3489
3499
  fontSize: '12px',
3490
- fontFamily: 'Montserrat',
3491
3500
  } }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxRuntime.jsxs(material.Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3492
3501
  display: 'block',
3493
3502
  mt: 0.5,
3494
3503
  color: '#5F5E62',
3495
3504
  fontSize: '12px',
3496
- fontFamily: 'Montserrat',
3497
3505
  } }, { children: mailingFields.mailing_address_line2.helperText })))] }), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_state)] })), mailingAddressSame && (jsxRuntime.jsx(CheckboxContainer, { children: jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Checkbox, { checked: mailingAddressSame.checked, onChange: (e) => mailingAddressSame.onChange(e.target.checked), name: "mailing_not_same_as_residential", sx: {
3498
3506
  color: '#929094',
3499
3507
  '&.Mui-checked': {
@@ -3568,7 +3576,7 @@ const FieldsGridContainer = styles.styled(material.Box)({
3568
3576
  /**
3569
3577
  * Full width field - spans both columns on desktop grid
3570
3578
  */
3571
- const FullWidthField = styles.styled(material.Box)({
3579
+ styles.styled(material.Box)({
3572
3580
  '@media (min-width: 900px)': {
3573
3581
  gridColumn: '1 / -1',
3574
3582
  },
@@ -3578,14 +3586,13 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
3578
3586
  const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
3579
3587
  // Desktop layout with 2-column grid
3580
3588
  if (desktopGridLayout) {
3581
- return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [jsxRuntime.jsxs(FullWidthField, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3589
+ return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(FieldsGridContainer, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
3582
3590
  display: 'block',
3583
3591
  mt: 0.5,
3584
3592
  ml: 2,
3585
3593
  color: '#5F5E62',
3586
3594
  fontSize: '12px',
3587
- fontFamily: 'Montserrat',
3588
- } }, { children: fields.full_name.helperText })))] }), fields.nric && (jsxRuntime.jsx(FullWidthField, { children: renderField(fields.nric) })), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
3595
+ } }, { children: fields.full_name.helperText })))] }), fields.nric ? renderField(fields.nric) : renderField(fields.date_of_birth), fields.nric && renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
3589
3596
  }
3590
3597
  // Mobile layout - single column
3591
3598
  return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxRuntime.jsxs(material.Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsxRuntime.jsx(material.Box, Object.assign({ component: "span", sx: {
@@ -3594,7 +3601,6 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
3594
3601
  ml: 2,
3595
3602
  color: '#5F5E62',
3596
3603
  fontSize: '12px',
3597
- fontFamily: 'Montserrat',
3598
3604
  } }, { children: fields.full_name.helperText })))] }), fields.nric && renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
3599
3605
  };
3600
3606