@heycater/qualification-funnel 1.3.8 → 1.3.10

package/dist/index.esm.js

@@ -5117,7 +5117,7 @@ const numberOfVegetariansQuestion = createQuestion({
   content: {
     titleEn: "Vegetarians",
     titleDe: "Vegetarier",
-    image: getAssetUrl(`${DIETARY_PATH}/vegetarian.svg`)
+    image: `${DIETARY_PATH}/vegetarian.svg`
   }
 });
 const numberOfVegansQuestion = createQuestion({
@@ -5126,7 +5126,7 @@ const numberOfVegansQuestion = createQuestion({
   content: {
     titleEn: "Vegans",
     titleDe: "Veganer",
-    image: getAssetUrl(`${DIETARY_PATH}/vegan.svg`)
+    image: `${DIETARY_PATH}/vegan.svg`
   }
 });
 const numberOfCarnivoresQuestion = createQuestion({
@@ -5135,7 +5135,7 @@ const numberOfCarnivoresQuestion = createQuestion({
   content: {
     titleEn: "Carnivore",
     titleDe: "Fleischesser",
-    image: getAssetUrl(`${DIETARY_PATH}/meat.svg`)
+    image: `${DIETARY_PATH}/meat.svg`
   }
 });
 function _typeof$1(o) {
@@ -9520,7 +9520,7 @@ const EmbeddedQuestionLayout = ({
                               " "
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsx(Box, { my: "auto", children: content }),
+                          /* @__PURE__ */ jsx(Box, { my: isFullscreen ? "auto" : 2, children: content }),
                           !isFullscreen && /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(EmbeddedQuestionControls, { onBackground: "light", mode: "embedded" }) })
                         ]
                       }
@@ -9763,10 +9763,10 @@ const StepperIconButton$1 = styled(IconButton$2)`
   }
 `;
 const IconButtonRight$1 = styled(StepperIconButton$1)`
-  margin-left: ${(props) => props.theme.spacing(1)}px;
+  margin-left: ${(props) => props.theme.spacing(2)}px;
 `;
 const IconButtonLeft$1 = styled(StepperIconButton$1)`
-  margin-right: ${(props) => props.theme.spacing(1)}px;
+  margin-right: ${(props) => props.theme.spacing(2)}px;
 `;
 function PeopleCountStepper() {
   const { actions, state, answerOf, errorsOf } = useQualification();
@@ -10187,7 +10187,7 @@ const BudgetRangeTiles = ({
           onSelect(item.value);
         },
         children: [
-          /* @__PURE__ */ jsx(IconWrapper$4, { children: /* @__PURE__ */ jsx(BudgetText, { children: item.display }) }),
+          /* @__PURE__ */ jsx(IconWrapper$5, { children: /* @__PURE__ */ jsx(BudgetText, { children: item.display }) }),
           /* @__PURE__ */ jsx(TileTypography, { children: label })
         ]
       },
@@ -10198,7 +10198,7 @@ const BudgetRangeTiles = ({
 const BudgetTile = styled(Tile)`
   text-align: center;
 `;
-const IconWrapper$4 = styled(Box)`
+const IconWrapper$5 = styled(Box)`
   min-width: 50px;
   display: grid;
   place-content: center;
@@ -10487,7 +10487,7 @@ function DatePickerEmbedded() {
             mode: "single"
           }
         ) }),
-        minDateMessage && /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(TypographyCaption, { children: [
+        minDateMessage && /* @__PURE__ */ jsx(Box, { textAlign: "center", mt: 2, children: /* @__PURE__ */ jsxs(TypographyCaption, { children: [
           "*",
           minDateMessage
         ] }) })
@@ -10723,7 +10723,7 @@ const DeliveryFrequencyTiles = ({
           onSelect(item.value);
         },
         children: [
-          /* @__PURE__ */ jsx(IconWrapper$3, { opacity: isNotSure ? 0.4 : 1, children: isNotSure ? /* @__PURE__ */ jsx(QuestionMark, { height: "1em" }) : /* @__PURE__ */ jsx(FrequencyText, { children: getTextForFrequency(item.value) }) }),
+          /* @__PURE__ */ jsx(IconWrapper$4, { opacity: isNotSure ? 0.4 : 1, children: isNotSure ? /* @__PURE__ */ jsx(QuestionMark, { height: "1em" }) : /* @__PURE__ */ jsx(FrequencyText, { children: getTextForFrequency(item.value) }) }),
           /* @__PURE__ */ jsx(TileTypography, { children: label })
         ]
       },
@@ -10746,7 +10746,7 @@ function getTextForFrequency(frequency) {
 const FrequencyTile = styled(Tile)`
   text-align: center;
 `;
-const IconWrapper$3 = styled(Box)`
+const IconWrapper$4 = styled(Box)`
   min-width: 50px;
   display: grid;
   place-content: center;
@@ -10762,7 +10762,6 @@ const FrequencyText = styled.span`
   font-weight: 400;
   color: ${({ theme }) => theme.palette.primary.main};
 `;
-const ICON_SIZE_IN_PX = 36;
 SCHEMA_STEPS.dietary_restrictions;
 const DietaryStepper = ({ question, autoFocus }) => {
   const { localizedAttributeName } = useLocalizedFieldName();
@@ -10771,7 +10770,7 @@ const DietaryStepper = ({ question, autoFocus }) => {
     () => {
       var _a2, _b;
       return {
-        image: (_a2 = question == null ? void 0 : question.content) == null ? void 0 : _a2.image,
+        image: ((_a2 = question == null ? void 0 : question.content) == null ? void 0 : _a2.image) ? getAssetUrl(question.content.image) : void 0,
         label: (_b = question.content) == null ? void 0 : _b[localizedAttributeName("title")]
       };
     },
@@ -10792,13 +10791,13 @@ const DietaryStepper = ({ question, autoFocus }) => {
         alignItems: "center",
         justifyContent: { xs: "center", sm: "start" },
         children: [
-          (localizedOptions == null ? void 0 : localizedOptions.image) && /* @__PURE__ */ jsx(
+          (localizedOptions == null ? void 0 : localizedOptions.image) && /* @__PURE__ */ jsx(IconWrapper$3, { children: /* @__PURE__ */ jsx(
             StyledImg$1,
             {
               alt: "",
               src: localizedOptions == null ? void 0 : localizedOptions.image
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx(Typography, { variant: "body1", pl: 1, children: localizedOptions.label })
         ]
       }
@@ -10815,11 +10814,18 @@ const DietaryStepper = ({ question, autoFocus }) => {
     ) })
   ] }) });
 };
+const IconWrapper$3 = styled.div`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
 const StyledImg$1 = styled.img`
-  width: ${ICON_SIZE_IN_PX}px;
-  height: ${ICON_SIZE_IN_PX}px;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
-  flex-shrink: 0;
 `;
 const GridWrapper$1 = styled.div`
   display: grid;
@@ -11198,12 +11204,12 @@ const SubtitleText = styled(Typography)`
 const ICON_BASE_PATH = "/artifacts/icons/catering_category";
 const getIconUrl = (name) => getAssetUrl(`${ICON_BASE_PATH}/${name}.svg`);
 const DEFAULT_IMAGE_SIZE = {
-  SM: 54,
-  MD: 84
+  SM: 40,
+  MD: 60
 };
 const IMAGE_WRAPPER_SIZE = {
-  SM: 70,
-  MD: 124
+  SM: 50,
+  MD: 80
 };
 const CateringCategoryTiles = ({
   onSelect,
@@ -11512,7 +11518,7 @@ const EmbeddedQuestion = ({
           subtitle: t2(
             "qualification:embeddedFunnel.dietaryRestrictions.subtitle"
           ),
-          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { pt: 2, mb: -2, pl: 2, pr: 2, pb: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) }),
+          content: /* @__PURE__ */ jsx(Container, { size: MAX_WIDTH_OF_WHITE_WRAPPER, children: /* @__PURE__ */ jsx(WhiteWrapper, { children: /* @__PURE__ */ jsx(Box, { py: 3, px: 2, children: /* @__PURE__ */ jsx(DietaryDistribution, {}) }) }) }),
           side: selectedMenu && /* @__PURE__ */ jsx(SelectedMenuCard, { ...selectedMenu })
         }
       );