igloo-d2c-components 1.0.25 → 1.0.26

package/dist/esm/index.js

@@ -2341,19 +2341,21 @@ const StyledOptionButton = styled(ButtonBase, {
     const colors = variantColors[colorVariant];
     return {
         height: heights[size],
-        // On desktop: auto width (inline), on mobile: full width
+        // Allow flex to control width when in flex container, otherwise auto or full
         width: fullWidth ? '100%' : 'auto',
+        minWidth: 0,
         borderRadius: '24px',
         border: selected
             ? '2px solid #0090DA'
             : `1px solid ${colors.unselectedBorder}`,
         backgroundColor: selected ? colors.selectedBg : colors.unselectedBg,
-        padding: '10px 24px',
+        padding: '12px 24px',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
         transition: 'all 0.2s ease',
+        boxSizing: 'border-box',
         '&:hover': {
             backgroundColor: selected ? colors.selectedBg : colors.hoverBg,
             borderColor: selected ? '#0090DA' : colors.hoverBorder,
@@ -2386,12 +2388,12 @@ const OptionLabel = styled(Typography)(({ theme, selected, colorVariant = 'defau
     const colors = variantColors[colorVariant];
     return {
         fontWeight: selected ? 700 : 500,
-        fontSize: '16px',
-        lineHeight: '24px',
+        fontSize: '14px',
+        lineHeight: '20px',
         color: selected ? '#0090DA' : colors.unselectedText,
         textAlign: 'center',
+        fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
         [theme.breakpoints.down('md')]: {
-            lineHeight: '20px',
             fontWeight: 500,
         },
     };
@@ -3255,18 +3257,22 @@ const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed =
 const QuestionContainer = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: '16px',
 });
 const QuestionText = styled(Typography)({
-    fontSize: '14px',
+    fontSize: '16px',
     fontWeight: 400,
     color: '#13131B',
-    lineHeight: '20px',
+    lineHeight: '24px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
 const OptionsContainer = styled(Box)({
     display: 'flex',
     gap: '16px',
-    marginTop: '12px',
+    // Make children fill equal width
+    '& > *': {
+        flex: 1,
+    },
 });
 styled(Box)(({ selected }) => ({
     flex: 1,
@@ -3291,7 +3297,7 @@ styled(Typography)(({ selected }) => ({
 }));
 
 const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form" }), jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form" })] }), error && (jsx(Typography, Object.assign({ sx: {
+    return (jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxs(OptionsContainer, { children: [jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] }), error && (jsx(Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,