@heycater/qualification-funnel 1.19.21 → 1.19.22

package/dist/index.esm.js

@@ -9532,7 +9532,7 @@ const EmbeddedQuestionLayout = ({
   title,
   subtitle,
   content,
-  containerSize = "sm",
+  containerSize,
   disableGutters,
   answerContainerSize = 826,
   side,
@@ -9541,6 +9541,7 @@ const EmbeddedQuestionLayout = ({
   ...boxProps
 }) => {
   const isFullscreen = mode === "fullscreen";
+  const effectiveContainerSize = containerSize ?? (isFullscreen ? "md" : "sm");
   const { state } = useQualification();
   const isMobile = useBreakpointDown("sm");
   if (state.status !== QUALIFICATION_STATUS.answered && state.status !== QUALIFICATION_STATUS.answering && state.status !== QUALIFICATION_STATUS.qualifiedForRequest) {
@@ -9553,7 +9554,7 @@ const EmbeddedQuestionLayout = ({
   return /* @__PURE__ */ jsxs(
     Container,
     {
-      size: containerSize,
+      size: effectiveContainerSize,
       disableGutters,
       ...isFullscreen ? { style: { display: "flex", flexDirection: "column", flexGrow: 1 } } : {},
       ...boxProps,
@@ -9704,6 +9705,10 @@ const FullscreenTitle = styled.h2`
   ${({ theme }) => theme.breakpoints.up("md")} {
     font-size: 30px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 34px;
+  }
 `;
 const StickyFooter = styled.div`
   position: sticky;
@@ -10558,6 +10563,11 @@ const TilesWrapper = styled(Box)`
     flex-wrap: wrap;
     justify-content: center;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    max-width: 1200px;
+    gap: ${({ theme, $size }) => $size === "sm" ? theme.spacing(2) : theme.spacing(3)}px;
+  }
 `;
 const StyledTileTypography = styled(Typography)`
   line-height: 172.5%;
@@ -11491,6 +11501,11 @@ const ServiceTile = styled(Tile)`
     flex-shrink: 0;
     gap: ${({ theme }) => theme.spacing(1)}px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    height: 220px;
+    width: 220px;
+  }
 `;
 const IconWrapper$2 = styled(Box)`
   min-width: 32px;
@@ -11503,6 +11518,11 @@ const IconWrapper$2 = styled(Box)`
     height: 40px;
     font-size: 36px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    height: 48px;
+    font-size: 42px;
+  }
 `;
 const ServiceTileLabel = styled(Typography)`
   font-size: 11px;
@@ -11512,6 +11532,10 @@ const ServiceTileLabel = styled(Typography)`
   ${({ theme }) => theme.breakpoints.up("sm")} {
     font-size: 15px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 16px;
+  }
 `;
 const SubtitleText = styled(Typography)`
   font-size: 9px;
@@ -11523,6 +11547,11 @@ const SubtitleText = styled(Typography)`
   ${({ theme }) => theme.breakpoints.up("sm")} {
     font-size: 12px;
   }
+
+  ${({ theme }) => theme.breakpoints.up("lg")} {
+    font-size: 13px;
+    max-width: 180px;
+  }
 `;
 const ICON_BASE_PATH = "/artifacts/icons/catering_category";
 const getIconUrl = (name) => getAssetUrl(`${ICON_BASE_PATH}/${name}.svg`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycater/qualification-funnel",
-  "version": "1.19.21",
+  "version": "1.19.22",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",