igloo-d2c-components 1.0.39 → 1.0.41

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 CHANGED
@@ -1813,7 +1813,7 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
1813
1813
  }
1814
1814
 
1815
1815
  const StyledAppBar = styles.styled(material.AppBar)(({ theme }) => ({
1816
- backgroundColor: '#FFFFFF',
1816
+ backgroundColor: '#fff',
1817
1817
  boxShadow: '0px 2px 20px 4px rgba(0, 0, 0, 0.14)',
1818
1818
  zIndex: theme.zIndex.drawer + 1,
1819
1819
  }));
@@ -3765,8 +3765,19 @@ const FullWidthField$1 = styles.styled(material.Box)({
3765
3765
  gridColumn: '1 / -1',
3766
3766
  },
3767
3767
  });
3768
- const CheckboxContainer$1 = styles.styled(material.Box)({
3768
+ /**
3769
+ * Wrapper for consent checkboxes - 28px gap between them on desktop (per design)
3770
+ */
3771
+ const ConsentCheckboxesWrapper = styles.styled(material.Box)({
3772
+ display: 'flex',
3773
+ flexDirection: 'column',
3774
+ gap: '24px',
3769
3775
  marginTop: '12px',
3776
+ '@media (min-width: 900px)': {
3777
+ gap: '28px',
3778
+ },
3779
+ });
3780
+ const CheckboxContainer$1 = styles.styled(material.Box)({
3770
3781
  '& .MuiFormControlLabel-root': {
3771
3782
  alignItems: 'center',
3772
3783
  marginLeft: 0,
@@ -3798,21 +3809,23 @@ const PersonalInformationForm = ({ renderField, fields, consents, onSubmit, form
3798
3809
  color: '#5F5E62',
3799
3810
  fontSize: '12px',
3800
3811
  wordSpacing: '-5px',
3801
- } }, { 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 ? (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 ||
3802
- defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
3803
- color: 'error.main',
3804
- fontSize: '12px',
3805
- mt: 0.5,
3806
- ml: 4,
3807
- wordSpacing: '-5px',
3808
- } }, { children: consents.bank_account_confirmation.error })))] }) })) : (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 ||
3809
- defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
3810
- color: 'error.main',
3811
- fontSize: '12px',
3812
- mt: 0.5,
3813
- ml: 4,
3814
- wordSpacing: '-5px',
3815
- } }, { 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 }) }) }))] })) })));
3812
+ } }, { children: fields.full_name.helperText })))] }), renderField(fields.nric), renderField(fields.salutation), renderField(fields.date_of_birth), renderField(fields.gender), 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 ? (jsxRuntime.jsx(FullWidthField$1, { children: jsxRuntime.jsxs(ConsentCheckboxesWrapper, { 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 ||
3813
+ defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
3814
+ color: 'error.main',
3815
+ fontSize: '12px',
3816
+ mt: 0.5,
3817
+ ml: 4,
3818
+ wordSpacing: '-5px',
3819
+ } }, { children: consents.bank_account_confirmation.error })))] }), 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 ||
3820
+ defaultMarketingLabel }) }) })] }) })) : (jsxRuntime.jsxs(ConsentCheckboxesWrapper, { 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 ||
3821
+ defaultBankConfirmationLabel }) }), consents.bank_account_confirmation.error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
3822
+ color: 'error.main',
3823
+ fontSize: '12px',
3824
+ mt: 0.5,
3825
+ ml: 4,
3826
+ wordSpacing: '-5px',
3827
+ } }, { children: consents.bank_account_confirmation.error })))] }), 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 ||
3828
+ defaultMarketingLabel }) }) })] }))] })) })));
3816
3829
  };
3817
3830
 
3818
3831
  const FormContainer$2 = styles.styled(material.Box)({