igloo-d2c-components 1.1.6-non-prod → 1.1.8-non-prod

package/dist/cjs/index.js

@@ -5242,19 +5242,73 @@ const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed =
     return (jsxRuntime.jsx(ButtonContainer, { isFixed: fixed, desktopRightAligned: desktopRightAligned, sx: sx, children: jsxRuntime.jsx(StyledButton, { type: type, disabled: disabled || loading, isDisabled: disabled || loading, desktopWidth: desktopWidth, onClick: onClick, children: loading ? 'Processing...' : text }) }));
 };
 
+const ChecklistContainer = styles.styled(material.Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+});
+const ChecklistTitle = styles.styled(material.Typography)({
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    color: '#13131B',
+    wordSpacing: '0px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+});
+const ChecklistGrid = styles.styled(material.Box)({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+    columnGap: '8px',
+    rowGap: '0px',
+});
+const ChecklistOptionLabel = styles.styled(material.Typography)({
+    fontSize: '12px',
+    fontWeight: 400,
+    lineHeight: '16px',
+    color: '#5F5E62',
+    wordSpacing: '0px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+});
+
+const HealthConditionChecklist = ({ title, options, selected, onToggle, error, }) => (jsxRuntime.jsxs(ChecklistContainer, { children: [jsxRuntime.jsx(ChecklistTitle, { children: title }), jsxRuntime.jsx(ChecklistGrid, { children: options.map((option) => (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.FormControlLabel, { control: (jsxRuntime.jsx(material.Checkbox, { checked: selected.includes(option.value), onChange: () => onToggle(option.value), sx: {
+                            color: '#464555',
+                            padding: '4px 8px 4px 0',
+                            '& .MuiSvgIcon-root': {
+                                fontSize: '20px',
+                            },
+                            '&.Mui-checked': {
+                                color: '#0090DA',
+                            },
+                        } })), label: (jsxRuntime.jsx(ChecklistOptionLabel, { children: option.label })), sx: {
+                        alignItems: 'flex-start',
+                        margin: 0,
+                        '& .MuiFormControlLabel-label': {
+                            marginTop: '5px',
+                        },
+                    } }) }, option.value))) }), error && (jsxRuntime.jsx(material.Typography, { sx: {
+                color: 'error.main',
+                fontSize: '12px',
+                mt: 0.5,
+                wordSpacing: '0px',
+            }, children: error }))] }));
+
 const QuestionContainer = styles.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
     gap: '16px',
 });
-const QuestionText = styles.styled(material.Typography)({
+const QuestionText = styles.styled(material.Typography)(({ theme }) => ({
     fontSize: '16px',
     fontWeight: 400,
     color: '#13131B',
     lineHeight: '24px',
     wordSpacing: '0px',
     fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
-});
+    [theme.breakpoints.down('md')]: {
+        fontSize: '14px',
+        lineHeight: '20px',
+    },
+}));
 const OptionsContainer = styles.styled(material.Box)({
     display: 'flex',
     gap: '16px',
@@ -5286,10 +5340,31 @@ styles.styled(material.Typography)(({ selected }) => ({
     wordSpacing: '0px',
 }));
 
-const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, }) => {
+const HealthQuestionGroup = ({ description, bullets, question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, followUp, }) => {
     const yesLabel = labels.yes || 'Yes';
     const noLabel = labels.no || 'No';
-    return (jsxRuntime.jsxs(QuestionContainer, { sx: sx, children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), error && (jsxRuntime.jsx(material.Typography, { sx: {
+    return (jsxRuntime.jsxs(QuestionContainer, { sx: sx, children: [description && (jsxRuntime.jsx(material.Typography, { sx: {
+                    fontSize: '14px',
+                    fontWeight: 400,
+                    color: '#13131B',
+                    lineHeight: '20px',
+                    wordSpacing: '0px',
+                    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+                }, children: description })), jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsxRuntime.jsx("ul", { style: {
+                    margin: '0',
+                    paddingInlineStart: '20px',
+                    listStyleType: 'disc',
+                    listStylePosition: 'outside',
+                }, children: bullets?.map((bullet) => (jsxRuntime.jsx("li", { style: {
+                        marginBottom: '2px',
+                    }, children: jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                            fontSize: '14px',
+                            fontWeight: 400,
+                            color: '#13131B',
+                            lineHeight: '20px',
+                            wordSpacing: '0px',
+                            fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+                        }, children: bullet }) }, bullet))) })), jsxRuntime.jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsxRuntime.jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), followUp && value === 'yes' && (jsxRuntime.jsx(HealthConditionChecklist, { title: followUp.title, options: followUp.options, selected: followUp.selected, onToggle: followUp.onToggle, error: followUp.error })), error && (jsxRuntime.jsx(material.Typography, { sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
@@ -5565,7 +5640,7 @@ const MeasurementFieldsGrid = styles.styled(material.Box)({
 
 const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
-    return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.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)))] }) }) }));
+    return (jsxRuntime.jsx(material.Box, { ref: formRef, component: "form", onSubmit: onSubmit, children: jsxRuntime.jsx(Container, { sx: sx, children: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column', gap: '24px' }, children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { description: question.description, bullets: question.bullets, question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, followUp: question.followUp, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] }) }) }));
 };
 
 const FormContainer = styles.styled(material.Box)({
@@ -6419,6 +6494,7 @@ exports.ErrorBoundary = ErrorBoundary;
 exports.FAQAccordion = FAQAccordion;
 exports.Footer = Footer;
 exports.Header = Header$1;
+exports.HealthConditionChecklist = HealthConditionChecklist;
 exports.HealthInformationForm = HealthInformationForm;
 exports.HealthQuestionGroup = HealthQuestionGroup;
 exports.ICON_PATHS = ICON_PATHS;
@@ -6467,3 +6543,4 @@ exports.useTenantId = useTenantId;
 exports.useTenantLogo = useTenantLogo;
 exports.useTenantTheme = useTenantTheme;
 exports.withErrorBoundary = withErrorBoundary;
+//# sourceMappingURL=index.js.map