igloo-d2c-components 1.0.25 → 1.0.27

package/dist/cjs/index.js

@@ -929,8 +929,8 @@ const LogoContainer$2 = styles.styled(material.Box)({
  * Width: 126px, height: 16px (per Figma)
  */
 const LogoImage$1 = styles.styled('img')({
-    width: '126px',
-    height: '16px',
+    width: '94px',
+    height: '32px',
     objectFit: 'contain',
 });
 /**
@@ -2361,19 +2361,21 @@ const StyledOptionButton = styles.styled(material.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,
@@ -2406,12 +2408,12 @@ const OptionLabel = styles.styled(material.Typography)(({ theme, selected, color
     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,
         },
     };
@@ -3275,18 +3277,22 @@ const CheckoutFormButton = ({ text = 'Next', disabled = false, onClick, fixed =
 const QuestionContainer = styles.styled(material.Box)({
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: '16px',
 });
 const QuestionText = styles.styled(material.Typography)({
-    fontSize: '14px',
+    fontSize: '16px',
     fontWeight: 400,
     color: '#13131B',
-    lineHeight: '20px',
+    lineHeight: '24px',
+    fontFamily: '"MetLifeCircular", "Montserrat", sans-serif',
 });
 const OptionsContainer = styles.styled(material.Box)({
     display: 'flex',
     gap: '16px',
-    marginTop: '12px',
+    // Make children fill equal width
+    '& > *': {
+        flex: 1,
+    },
 });
 styles.styled(material.Box)(({ selected }) => ({
     flex: 1,
@@ -3311,7 +3317,7 @@ styles.styled(material.Typography)(({ selected }) => ({
 }));
 
 const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form" }), jsxRuntime.jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form" })] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,