igloo-d2c-components 1.1.9 → 1.1.10

package/dist/esm/index.js

@@ -5220,12 +5220,15 @@ const ChecklistTitle = styled(Typography)({
     wordSpacing: '0px',
     fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
-const ChecklistGrid = styled(Box)({
+const ChecklistGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
     gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
     columnGap: '8px',
     rowGap: '0px',
-});
+    [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+    },
+}));
 const ChecklistOptionLabel = styled(Typography)({
     fontSize: '12px',
     fontWeight: 400,
@@ -5308,6 +5311,11 @@ styled(Typography)(({ selected }) => ({
 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';
+    const bulletSplitIndex = Math.ceil((bullets?.length || 0) / 2);
+    const bulletColumns = [
+        bullets?.slice(0, bulletSplitIndex) || [],
+        bullets?.slice(bulletSplitIndex) || [],
+    ];
     return (jsxs(QuestionContainer, { sx: sx, children: [description && (jsx(Typography, { sx: {
                     fontSize: '14px',
                     fontWeight: 400,
@@ -5315,21 +5323,26 @@ const HealthQuestionGroup = ({ description, bullets, question, questionNumber, v
                     lineHeight: '20px',
                     wordSpacing: '0px',
                     fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
-                }, children: description })), jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsx("ul", { style: {
-                    margin: '0',
-                    paddingInlineStart: '20px',
-                    listStyleType: 'disc',
-                    listStylePosition: 'outside',
-                }, children: bullets?.map((bullet) => (jsx("li", { style: {
-                        marginBottom: '2px',
-                    }, children: jsx(Typography, { component: "span", sx: {
-                            fontSize: '14px',
-                            fontWeight: 400,
-                            color: '#13131B',
-                            lineHeight: '20px',
-                            wordSpacing: '0px',
-                            fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
-                        }, children: bullet }) }, bullet))) })), jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxs(Fragment, { children: [jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxs(Fragment, { children: [jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), followUp && value === 'yes' && (jsx(HealthConditionChecklist, { title: followUp.title, options: followUp.options, selected: followUp.selected, onToggle: followUp.onToggle, error: followUp.error })), error && (jsx(Typography, { sx: {
+                }, children: description })), jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), Boolean(bullets?.length) && (jsx(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: { xs: 'column', md: 'row' },
+                    gap: '16px',
+                    width: '100%',
+                }, children: bulletColumns.map((columnBullets, columnIndex) => (jsx(Box, { sx: { flex: '1 0 0', minWidth: 0 }, children: jsx("ul", { style: {
+                            margin: '0',
+                            paddingInlineStart: '20px',
+                            listStyleType: 'disc',
+                            listStylePosition: 'outside',
+                        }, children: columnBullets.map((bullet, bulletIndex) => (jsx("li", { style: {
+                                marginBottom: '2px',
+                            }, children: jsx(Typography, { component: "span", sx: {
+                                    fontSize: '14px',
+                                    fontWeight: 400,
+                                    color: '#13131B',
+                                    lineHeight: '20px',
+                                    wordSpacing: '0px',
+                                    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
+                                }, children: bullet }) }, `${bullet}-${bulletIndex}`))) }) }, `column-${columnIndex}`))) })), jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxs(Fragment, { children: [jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true, children: yesLabel }), jsx(OptionButtonComponent, { variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true, children: noLabel })] })) : (jsxs(Fragment, { children: [jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), followUp && value === 'yes' && (jsx(HealthConditionChecklist, { title: followUp.title, options: followUp.options, selected: followUp.selected, onToggle: followUp.onToggle, error: followUp.error })), error && (jsx(Typography, { sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,