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/esm/index.js CHANGED
@@ -81,7 +81,7 @@ function useIsTenant(checkTenantId) {
81
81
  * Igloo Typography Configuration
82
82
  */
83
83
  const iglooTypography = {
84
- fontFamily: 'Montserrat',
84
+ fontFamily: 'Inter, sans-serif',
85
85
  fontWeightRegular: 400,
86
86
  fontWeightMedium: 500,
87
87
  fontWeightSemiBold: 600,
@@ -1974,14 +1974,16 @@ const CategoryIcon = styled(Box)(({ theme }) => ({
1974
1974
  justifyContent: 'center',
1975
1975
  }));
1976
1976
  const TitleText = styled(Typography)(({ theme }) => ({
1977
- fontFamily: '"Montserrat", sans-serif',
1978
1977
  fontWeight: 700,
1979
- fontSize: '20px',
1978
+ fontSize: '28px',
1980
1979
  lineHeight: '28px',
1981
1980
  color: '#13131B',
1981
+ [theme.breakpoints.down('md')]: {
1982
+ fontSize: '20px',
1983
+ lineHeight: '24px',
1984
+ },
1982
1985
  }));
1983
1986
  const SubtitleText = styled(Typography)(({ theme }) => ({
1984
- fontFamily: '"Montserrat", sans-serif',
1985
1987
  fontWeight: 400,
1986
1988
  fontSize: '14px',
1987
1989
  lineHeight: '18px',
@@ -1999,7 +2001,6 @@ const PrimaryButton = styled(Button$1)(({ theme }) => ({
1999
2001
  borderRadius: '24px',
2000
2002
  height: '48px',
2001
2003
  textTransform: 'none',
2002
- fontFamily: '"Montserrat", sans-serif',
2003
2004
  fontWeight: 500,
2004
2005
  fontSize: '14px',
2005
2006
  lineHeight: '18px',
@@ -2012,7 +2013,6 @@ const SecondaryButton = styled(Button$1)(({ theme }) => ({
2012
2013
  borderRadius: '8px',
2013
2014
  height: '40px',
2014
2015
  textTransform: 'none',
2015
- fontFamily: '"Montserrat", sans-serif',
2016
2016
  fontWeight: 500,
2017
2017
  fontSize: '14px',
2018
2018
  lineHeight: '18px',
@@ -2231,24 +2231,34 @@ const QuestionHeader = styled(Box)(({ theme }) => ({
2231
2231
  width: '100%',
2232
2232
  }));
2233
2233
  const QuestionTitle = styled(Typography)(({ theme }) => ({
2234
- fontFamily: '"Montserrat", sans-serif',
2235
2234
  fontWeight: 700,
2236
- fontSize: '14px',
2237
- lineHeight: '20px',
2235
+ fontSize: '18px',
2236
+ lineHeight: '24px',
2238
2237
  color: '#13131B',
2238
+ [theme.breakpoints.down('md')]: {
2239
+ fontSize: '14px',
2240
+ lineHeight: '20px',
2241
+ },
2239
2242
  }));
2240
2243
  const QuestionSubtext = styled(Typography)(({ theme }) => ({
2241
- fontFamily: '"Montserrat", sans-serif',
2242
2244
  fontWeight: 400,
2243
- fontSize: '12px',
2244
- lineHeight: '16px',
2245
+ fontSize: '16px',
2246
+ lineHeight: '20px',
2245
2247
  color: '#5F5E62',
2248
+ [theme.breakpoints.down('md')]: {
2249
+ fontSize: '12px',
2250
+ lineHeight: '14px',
2251
+ },
2246
2252
  }));
2247
2253
  const OptionsContainer$1 = styled(Box)(({ theme }) => ({
2248
2254
  display: 'flex',
2249
- flexDirection: 'column',
2255
+ flexDirection: 'row',
2256
+ flexWrap: 'wrap',
2250
2257
  gap: '8px',
2251
2258
  width: '100%',
2259
+ [theme.breakpoints.down('md')]: {
2260
+ flexDirection: 'column',
2261
+ },
2252
2262
  }));
2253
2263
 
2254
2264
  /**
@@ -2302,7 +2312,9 @@ const variantColors = {
2302
2312
  hoverBorder: '#5f5e62',
2303
2313
  },
2304
2314
  };
2305
- const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
2315
+ const StyledOptionButton = styled(ButtonBase, {
2316
+ shouldForwardProp: (prop) => prop !== 'colorVariant',
2317
+ })(({ theme, selected, size = 'medium', fullWidth, colorVariant = 'default' }) => {
2306
2318
  const heights = {
2307
2319
  small: '32px',
2308
2320
  medium: '40px',
@@ -2311,6 +2323,7 @@ const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', full
2311
2323
  const colors = variantColors[colorVariant];
2312
2324
  return {
2313
2325
  height: heights[size],
2326
+ // On desktop: auto width (inline), on mobile: full width
2314
2327
  width: fullWidth ? '100%' : 'auto',
2315
2328
  borderRadius: '24px',
2316
2329
  border: selected
@@ -2333,6 +2346,10 @@ const StyledOptionButton = styled(ButtonBase)(({ selected, size = 'medium', full
2333
2346
  cursor: 'not-allowed',
2334
2347
  opacity: 0.6,
2335
2348
  },
2349
+ // Mobile: always full width
2350
+ [theme.breakpoints.down('md')]: {
2351
+ width: '100%',
2352
+ },
2336
2353
  };
2337
2354
  });
2338
2355
  const OptionContent = styled(Box)(() => ({
@@ -2347,14 +2364,18 @@ const OptionIcon = styled('span')(() => ({
2347
2364
  lineHeight: 1,
2348
2365
  flexShrink: 0,
2349
2366
  }));
2350
- const OptionLabel = styled(Typography)(({ selected, colorVariant = 'default' }) => {
2367
+ const OptionLabel = styled(Typography)(({ theme, selected, colorVariant = 'default' }) => {
2351
2368
  const colors = variantColors[colorVariant];
2352
2369
  return {
2353
- fontWeight: selected ? 600 : 500,
2370
+ fontWeight: selected ? 700 : 500,
2354
2371
  fontSize: '16px',
2355
- lineHeight: '20px',
2372
+ lineHeight: '24px',
2356
2373
  color: selected ? '#0090DA' : colors.unselectedText,
2357
2374
  textAlign: 'center',
2375
+ [theme.breakpoints.down('md')]: {
2376
+ lineHeight: '20px',
2377
+ fontWeight: 500,
2378
+ },
2358
2379
  };
2359
2380
  });
2360
2381
 
@@ -2381,7 +2402,7 @@ const OptionLabel = styled(Typography)(({ selected, colorVariant = 'default' })
2381
2402
  * />
2382
2403
  * ```
2383
2404
  */
2384
- function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = true, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
2405
+ function OptionButton({ value, label, icon, selected = false, disabled = false, onClick, size = 'medium', fullWidth = false, variant = 'default', formatMessage = (descriptor) => descriptor.id, }) {
2385
2406
  const handleClick = () => {
2386
2407
  if (!disabled && onClick) {
2387
2408
  onClick(value);
@@ -2571,8 +2592,7 @@ const ToggleButton = styled(Box)(({ theme, active }) => {
2571
2592
  const ToggleText = styled(Typography)(({ theme }) => {
2572
2593
  var _a, _b, _c, _d, _e, _f;
2573
2594
  return ({
2574
- fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2575
- "'Montserrat', sans-serif",
2595
+ fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
2576
2596
  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',
2577
2597
  fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
2578
2598
  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',
@@ -2651,23 +2671,30 @@ const CalloutIcon = styled(InfoIcon)(({ theme }) => {
2651
2671
  const CalloutTitle = styled(Typography)(({ theme }) => {
2652
2672
  var _a, _b, _c, _d, _e, _f, _g, _h;
2653
2673
  return ({
2654
- fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2655
- "'Montserrat', sans-serif",
2656
- 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',
2657
- fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 600,
2674
+ fontFamily: (_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily,
2675
+ 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',
2676
+ fontWeight: ((_d = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _d === void 0 ? void 0 : _d.fontWeightSemiBold) || 700,
2658
2677
  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',
2659
2678
  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',
2679
+ [theme.breakpoints.down('md')]: {
2680
+ fontSize: '14px',
2681
+ lineHeight: '20px',
2682
+ },
2660
2683
  });
2661
2684
  });
2662
2685
  const CalloutText = styled(Typography)(({ theme }) => {
2663
2686
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2664
2687
  return ({
2665
2688
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2666
- "'Montserrat', sans-serif",
2667
- 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',
2689
+ '',
2690
+ 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',
2668
2691
  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,
2669
2692
  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',
2670
2693
  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',
2694
+ [theme.breakpoints.down('md')]: {
2695
+ fontSize: '12px',
2696
+ lineHeight: '14px',
2697
+ },
2671
2698
  });
2672
2699
  });
2673
2700
 
@@ -2721,7 +2748,7 @@ const InputLabel = styled(Typography)(({ theme }) => {
2721
2748
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2722
2749
  return ({
2723
2750
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2724
- "'Montserrat', sans-serif",
2751
+ '',
2725
2752
  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',
2726
2753
  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,
2727
2754
  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',
@@ -2748,7 +2775,7 @@ const InputValue = styled(Typography)(({ theme }) => {
2748
2775
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2749
2776
  return ({
2750
2777
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2751
- "'Montserrat', sans-serif",
2778
+ '',
2752
2779
  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',
2753
2780
  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,
2754
2781
  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',
@@ -2836,7 +2863,7 @@ const RangeLabel = styled(Typography)(({ theme }) => {
2836
2863
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
2837
2864
  return ({
2838
2865
  fontFamily: ((_a = theme === null || theme === void 0 ? void 0 : theme.typography) === null || _a === void 0 ? void 0 : _a.fontFamily) ||
2839
- "'Montserrat', sans-serif",
2866
+ '',
2840
2867
  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',
2841
2868
  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,
2842
2869
  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',
@@ -3051,7 +3078,6 @@ const ProgressFill = styled(Box)(({ width, progressBarTheme }) => ({
3051
3078
  transition: 'width 0.3s ease',
3052
3079
  }));
3053
3080
  const ProgressText = styled(Typography)({
3054
- fontFamily: 'Montserrat',
3055
3081
  fontSize: '12px',
3056
3082
  color: '#5F5E62',
3057
3083
  fontWeight: 400,
@@ -3094,14 +3120,12 @@ const ProductInfo = styled(Box)({
3094
3120
  marginLeft: '4px',
3095
3121
  });
3096
3122
  const ProductName = styled(Typography)({
3097
- fontFamily: 'Montserrat',
3098
3123
  fontSize: '14px',
3099
3124
  fontWeight: 600,
3100
3125
  color: '#13131B',
3101
3126
  lineHeight: '20px',
3102
3127
  });
3103
3128
  const PlanName = styled(Typography)({
3104
- fontFamily: 'Montserrat',
3105
3129
  fontSize: '12px',
3106
3130
  fontWeight: 400,
3107
3131
  color: '#13131B',
@@ -3113,14 +3137,12 @@ const PriceContainer = styled(Box)({
3113
3137
  gap: '2px',
3114
3138
  });
3115
3139
  const Price = styled(Typography)({
3116
- fontFamily: 'Montserrat',
3117
3140
  fontSize: '14px',
3118
3141
  fontWeight: 600,
3119
3142
  color: '#13131B',
3120
3143
  lineHeight: '20px',
3121
3144
  });
3122
3145
  const PricePeriod = styled(Typography)({
3123
- fontFamily: 'Montserrat',
3124
3146
  fontSize: '12px',
3125
3147
  fontWeight: 400,
3126
3148
  color: '#13131B',
@@ -3140,7 +3162,6 @@ const SectionHeader = styled(Box)({
3140
3162
  padding: '0 16px 24px',
3141
3163
  });
3142
3164
  const SectionTitle$2 = styled(Typography)({
3143
- fontFamily: 'Montserrat',
3144
3165
  fontSize: '20px',
3145
3166
  fontWeight: 700,
3146
3167
  color: '#13131B',
@@ -3148,7 +3169,6 @@ const SectionTitle$2 = styled(Typography)({
3148
3169
  marginBottom: '8px',
3149
3170
  });
3150
3171
  const SectionDescription = styled(Typography)({
3151
- fontFamily: 'Montserrat',
3152
3172
  fontSize: '14px',
3153
3173
  fontWeight: 400,
3154
3174
  color: '#5F5E62',
@@ -3175,7 +3195,7 @@ const ButtonContainer = styled(Box)(({ isFixed, desktopRightAligned }) => ({
3175
3195
  justifyContent: 'flex-end',
3176
3196
  maxWidth: '938px',
3177
3197
  margin: '0 auto',
3178
- padding: '24px 24px',
3198
+ padding: '24px 0',
3179
3199
  backgroundColor: 'transparent',
3180
3200
  boxShadow: 'none',
3181
3201
  position: 'relative',
@@ -3191,7 +3211,6 @@ const StyledButton = styled('button')(({ isDisabled, desktopWidth }) => ({
3191
3211
  ? '#E1E2EB'
3192
3212
  : '#0090DA',
3193
3213
  color: isDisabled ? '#929094' : '#fff',
3194
- fontFamily: 'Montserrat',
3195
3214
  fontSize: '14px',
3196
3215
  fontWeight: 500,
3197
3216
  lineHeight: '18px',
@@ -3247,7 +3266,6 @@ styled(Box)(({ selected }) => ({
3247
3266
  },
3248
3267
  }));
3249
3268
  styled(Typography)(({ selected }) => ({
3250
- fontFamily: 'Montserrat',
3251
3269
  fontSize: '14px',
3252
3270
  fontWeight: 600,
3253
3271
  color: selected ? '#13131B' : '#5F5E62',
@@ -3295,7 +3313,7 @@ const FieldsGridContainer$2 = styled(Box)({
3295
3313
  /**
3296
3314
  * Full width field - spans both columns on desktop grid
3297
3315
  */
3298
- const FullWidthField$2 = styled(Box)({
3316
+ const FullWidthField$1 = styled(Box)({
3299
3317
  '@media (min-width: 900px)': {
3300
3318
  gridColumn: '1 / -1',
3301
3319
  },
@@ -3311,7 +3329,6 @@ const CheckboxContainer$1 = styled(Box)({
3311
3329
  },
3312
3330
  });
3313
3331
  const CheckboxLabel$1 = styled(Typography)({
3314
- fontFamily: 'Montserrat',
3315
3332
  fontSize: '14px',
3316
3333
  fontWeight: 400,
3317
3334
  color: '#5F5E62',
@@ -3332,8 +3349,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
3332
3349
  ml: 2,
3333
3350
  color: '#5F5E62',
3334
3351
  fontSize: '12px',
3335
- fontFamily: 'Montserrat',
3336
- } }, { 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 ? (jsx(FullWidthField$2, { 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 ||
3352
+ } }, { 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 ? (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 ||
3337
3353
  defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsx(Typography, Object.assign({ sx: {
3338
3354
  color: 'error.main',
3339
3355
  fontSize: '12px',
@@ -3345,7 +3361,7 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
3345
3361
  fontSize: '12px',
3346
3362
  mt: 0.5,
3347
3363
  ml: 4,
3348
- } }, { children: consents.bank_account_confirmation.error })))] })), desktopGridLayout ? (jsx(FullWidthField$2, { 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 }) }) }))] })) })));
3364
+ } }, { 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 }) }) }))] })) })));
3349
3365
  };
3350
3366
 
3351
3367
  const FormContainer$2 = styled(Box)({
@@ -3381,7 +3397,7 @@ const FieldsGridContainer$1 = styled(Box)({
3381
3397
  /**
3382
3398
  * Full width field - spans both columns on desktop grid
3383
3399
  */
3384
- const FullWidthField$1 = styled(Box)({
3400
+ const FullWidthField = styled(Box)({
3385
3401
  '@media (min-width: 900px)': {
3386
3402
  gridColumn: '1 / -1',
3387
3403
  },
@@ -3400,14 +3416,12 @@ const CheckboxContainer = styled(Box)({
3400
3416
  },
3401
3417
  });
3402
3418
  const CheckboxLabel = styled(Typography)({
3403
- fontFamily: 'Montserrat',
3404
3419
  fontSize: '14px',
3405
3420
  fontWeight: 400,
3406
3421
  color: '#5F5E62',
3407
3422
  lineHeight: '18px',
3408
3423
  });
3409
3424
  const SectionTitle$1 = styled(Typography)({
3410
- fontFamily: 'Montserrat',
3411
3425
  fontSize: '16px',
3412
3426
  fontWeight: 600,
3413
3427
  color: '#13131B',
@@ -3420,7 +3434,7 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3420
3434
  // Helper to render field with or without full width wrapper
3421
3435
  const renderFieldWithLayout = (field, fullWidth = false) => {
3422
3436
  if (desktopGridLayout && fullWidth) {
3423
- return jsx(FullWidthField$1, { children: renderField(field) });
3437
+ return jsx(FullWidthField, { children: renderField(field) });
3424
3438
  }
3425
3439
  return renderField(field);
3426
3440
  };
@@ -3431,14 +3445,13 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3431
3445
  mt: 0.5,
3432
3446
  color: '#5F5E62',
3433
3447
  fontSize: '12px',
3434
- fontFamily: 'Montserrat',
3435
3448
  } }, { children: field.helperText })))] }));
3436
3449
  if (desktopGridLayout && fullWidth) {
3437
- return jsx(FullWidthField$1, { children: content });
3450
+ return jsx(FullWidthField, { children: content });
3438
3451
  }
3439
3452
  return content;
3440
3453
  };
3441
- return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), jsx(FullWidthField$1, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), jsx(FullWidthField$1, { children: 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), jsx(FullWidthField$1, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(FullWidthField$1, { children: 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 && (jsx(FullWidthField$1, { 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: {
3454
+ return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: desktopGridLayout ? (jsxs(FieldsGridContainer$1, { children: [renderFieldWithHelperText(fields.phone_number, false), renderFieldWithLayout(fields.email_address, false), 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), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsx(FullWidthField, { children: jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }) }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(FullWidthField, { children: 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 && (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: {
3442
3455
  color: '#929094',
3443
3456
  '&.Mui-checked': {
3444
3457
  color: '#317abc',
@@ -3449,31 +3462,26 @@ const ContactDetailsForm = ({ renderField, fields, mailingFields, mailingAddress
3449
3462
  ml: 2,
3450
3463
  color: '#5F5E62',
3451
3464
  fontSize: '12px',
3452
- fontFamily: 'Montserrat',
3453
3465
  } }, { children: fields.phone_number.helperText })))] }), renderField(fields.email_address), 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, Object.assign({ component: "span", sx: {
3454
3466
  display: 'block',
3455
3467
  mt: 0.5,
3456
3468
  color: '#5F5E62',
3457
3469
  fontSize: '12px',
3458
- fontFamily: 'Montserrat',
3459
3470
  } }, { children: fields.residential_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(fields.residential_address_line2), fields.residential_address_line2.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
3460
3471
  display: 'block',
3461
3472
  mt: 0.5,
3462
3473
  color: '#5F5E62',
3463
3474
  fontSize: '12px',
3464
- fontFamily: 'Montserrat',
3465
3475
  } }, { children: fields.residential_address_line2.helperText })))] }), renderField(fields.postal_code), renderField(fields.city), renderField(fields.state), jsx(Divider, { sx: { borderColor: 'rgba(0,0,0,0.1)' } }), (mailingAddressSame === null || mailingAddressSame === void 0 ? void 0 : mailingAddressSame.checked) && mailingFields && (jsxs(Fragment, { children: [jsx(SectionTitle$1, { children: "Mailing address" }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line1), mailingFields.mailing_address_line1.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
3466
3476
  display: 'block',
3467
3477
  mt: 0.5,
3468
3478
  color: '#5F5E62',
3469
3479
  fontSize: '12px',
3470
- fontFamily: 'Montserrat',
3471
3480
  } }, { children: mailingFields.mailing_address_line1.helperText })))] }), jsxs(Box, { children: [renderField(mailingFields.mailing_address_line2), mailingFields.mailing_address_line2.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
3472
3481
  display: 'block',
3473
3482
  mt: 0.5,
3474
3483
  color: '#5F5E62',
3475
3484
  fontSize: '12px',
3476
- fontFamily: 'Montserrat',
3477
3485
  } }, { children: mailingFields.mailing_address_line2.helperText })))] }), renderField(mailingFields.mailing_postal_code), renderField(mailingFields.mailing_city), renderField(mailingFields.mailing_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: {
3478
3486
  color: '#929094',
3479
3487
  '&.Mui-checked': {
@@ -3548,7 +3556,7 @@ const FieldsGridContainer = styled(Box)({
3548
3556
  /**
3549
3557
  * Full width field - spans both columns on desktop grid
3550
3558
  */
3551
- const FullWidthField = styled(Box)({
3559
+ styled(Box)({
3552
3560
  '@media (min-width: 900px)': {
3553
3561
  gridColumn: '1 / -1',
3554
3562
  },
@@ -3558,14 +3566,13 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
3558
3566
  const Container = desktopGridLayout ? DesktopFormContainer : FormContainer;
3559
3567
  // Desktop layout with 2-column grid
3560
3568
  if (desktopGridLayout) {
3561
- return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(FieldsGridContainer, { children: [jsxs(FullWidthField, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
3569
+ return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(FieldsGridContainer, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
3562
3570
  display: 'block',
3563
3571
  mt: 0.5,
3564
3572
  ml: 2,
3565
3573
  color: '#5F5E62',
3566
3574
  fontSize: '12px',
3567
- fontFamily: 'Montserrat',
3568
- } }, { children: fields.full_name.helperText })))] }), fields.nric && (jsx(FullWidthField, { children: renderField(fields.nric) })), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] }) })));
3575
+ } }, { 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)] }) })));
3569
3576
  }
3570
3577
  // Mobile layout - single column
3571
3578
  return (jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [jsxs(Box, { children: [renderField(fields.full_name), fields.full_name.helperText && (jsx(Box, Object.assign({ component: "span", sx: {
@@ -3574,7 +3581,6 @@ const ChildInformationForm = ({ renderField, fields, onSubmit, formRef, sx, desk
3574
3581
  ml: 2,
3575
3582
  color: '#5F5E62',
3576
3583
  fontSize: '12px',
3577
- fontFamily: 'Montserrat',
3578
3584
  } }, { children: fields.full_name.helperText })))] }), fields.nric && renderField(fields.nric), renderField(fields.date_of_birth), renderField(fields.gender), renderField(fields.nationality)] })) })));
3579
3585
  };
3580
3586