@thefittingroom/shop-ui 5.0.6 → 5.0.8

package/dist/index.js

@@ -19035,7 +19035,8 @@ const en$1 = {
   "sign-in": { "email": "Email", "password": "Password", "forgot_password": "Forgot password?", "sign_in": "Sign in", "no_account": "Don’t have an account?", "download_app": "Download the app.", "invalid_email": "Please enter a valid email address.", "missing_password": "Please enter your password.", "login_failed": "Incorrect email or password." },
   "forgot-password": { "title": "Forgot password", "description": "We’ll send you an email with a link to reset your password.", "send_link": "Send link", "link_sent": "Link sent! Please check your email.", "need_help": "Need help?", "contact_us": "Contact us." },
   "vto-single": { "avatar_loading": "Finding your perfect fit...", "slide_to_rotate": "Slide to rotate", "sign_out": "Sign out", "color_label": "Color:", "add_to_cart": "Add to cart", "view_product_details": "View product details", "hide_product_details": "Hide product details" },
-  "size-rec": { "recommended_size": "Recommended Size: {{size}}", "item_fit": "This item is {{fit}}", "select_size": "Select a size to see how it fits", "fitClassification": { "form_fitting": "Form Fitting", "slim_fit": "Slim Fit", "regular_fit": "Regular Fit", "relaxed_fit": "Relaxed Fit", "oversized_fit": "Oversized Fit" }, "measurementLocation": { "neck_base": "Neck", "across_shoulder": "Shoulders", "cb_neck_to_wrist": "Neck to Wrist", "sleeve_length_from_shoulder_point": "Sleeve", "bust": "Bust", "waist": "Waist", "low_waist": "Low Waist", "low_hip": "Low Hip", "high_hip": "High Hip", "thigh": "Thigh", "inseam": "Inseam", "hsp_to_low_hip": "HSP to Low Hip", "hsp_to_crotch": "HSP to Crotch", "low_hip_bottoms": "Low Hip (Bottoms)", "high_hip_bottoms": "High Hip (Bottoms)" }, "fit": { "too_tight": "Too Tight", "tight": "Tight", "slightly_tight": "Slightly Tight", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose", "loose": "Loose", "oversized": "Oversized", "too_short": "Too Short", "short": "Short", "slightly_short": "Slightly Short", "slightly_long": "Slightly Long", "long": "Long", "too_long": "Too Long" } }
+  "size-rec": { "recommended_size": "Recommended Size: {{size}}", "item_fit": "This item is {{fit}}", "select_size": "Select a size to see how it fits", "fitClassification": { "form_fitting": "Form Fitting", "slim_fit": "Slim Fit", "regular_fit": "Regular Fit", "relaxed_fit": "Relaxed Fit", "oversized_fit": "Oversized Fit" }, "measurementLocation": { "neck_base": "Neck", "across_shoulder": "Shoulders", "cb_neck_to_wrist": "Neck to Wrist", "sleeve_length_from_shoulder_point": "Sleeve", "bust": "Bust", "waist": "Waist", "low_waist": "Low Waist", "high_hip": "High Hip", "low_hip": "Low Hip", "thigh": "Thigh", "inseam": "Inseam", "hsp_to_low_hip": "HSP to Low Hip", "hsp_to_crotch": "HSP to Crotch", "low_hip_bottoms": "Low Hip (Bottoms)", "high_hip_bottoms": "High Hip (Bottoms)" }, "fit": { "too_tight": "Too Tight", "tight": "Tight", "slightly_tight": "Slightly Tight", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose", "loose": "Loose", "oversized": "Oversized", "too_short": "Too Short", "short": "Short", "slightly_short": "Slightly Short", "slightly_long": "Slightly Long", "long": "Long", "too_long": "Too Long" } },
+  "fit-chart": { "fit_scale": "Fit Scale", "fit": { "poor_fit": "Poor Fit", "acceptable_fit": "Acceptable Fit", "too_tight": "Too Tight", "tight": "Tight or More Fitted", "slightly_tight": "Slightly Tight or Fitted", "perfect_fit": "Perfect Fit", "slightly_loose": "Slightly Loose or Less Fitted", "loose": "Loose or Not Fitted", "oversized": "Oversized" }, "measurement_points": "Measurement Points", "point": { "bust": "Chest/Bust", "waist": "Natural Waist", "pant_waist": "Pant Waist", "high_hip": "High Hip", "low_hip": "Low Hip", "thigh": "Thigh" } }
 };
 const try_it_on = "Essayez-le";
 const powered_by = "Alimenté par";
@@ -19050,7 +19051,8 @@ const fr = {
   "sign-in": { "email": "Email", "password": "Mot de passe", "forgot_password": "Mot de passe oublié ?", "sign_in": "Se connecter", "no_account": "Vous n'avez pas de compte ?", "download_app": "Téléchargez l'application.", "invalid_email": "Veuillez entrer une adresse e-mail valide.", "missing_password": "Veuillez entrer votre mot de passe.", "login_failed": "Email ou mot de passe incorrect." },
   "forgot-password": { "title": "Mot de passe oublié", "description": "Nous vous enverrons un e-mail avec un lien pour réinitialiser votre mot de passe.", "send_link": "Envoyer le lien", "link_sent": "Lien envoyé ! Veuillez vérifier votre e-mail.", "need_help": "Besoin d'aide ?", "contact_us": "Contactez-nous." },
   "vto-single": { "avatar_loading": "Trouver votre ajustement parfait...", "slide_to_rotate": "Faites glisser pour faire pivoter", "sign_out": "Se déconnecter", "color_label": "Couleur :", "add_to_cart": "Ajouter au panier", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit" },
-  "size-rec": { "recommended_size": "Taille recommandée : {{size}}", "item_fit": "Cet article est {{fit}}", "select_size": "Sélectionnez une taille pour voir comment elle s'adapte", "fitClassification": { "form_fitting": "Ajusté", "slim_fit": "Coupe slim", "regular_fit": "Coupe régulière", "relaxed_fit": "Coupe décontractée", "oversized_fit": "Coupe oversize" }, "measurementLocation": { "neck_base": "Cou", "across_shoulder": "Épaules", "cb_neck_to_wrist": "Cou jusqu'au poignet", "sleeve_length_from_shoulder_point": "Manche", "bust": "Buste", "waist": "Taille", "low_waist": "Bas de la taille", "low_hip": "Bas des hanches", "high_hip": "Haut des hanches", "thigh": "Cuisse", "inseam": "Entrejambe", "hsp_to_low_hip": "HSP au bas des hanches", "hsp_to_crotch": "HSP à l'entrejambe", "low_hip_bottoms": "Bas des hanches (bas)", "high_hip_bottoms": "Haut des hanches (bas)" }, "fit": { "too_tight": "Trop serré", "tight": "Serré", "slightly_tight": "Légèrement serré", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample", "loose": "Ample", "oversized": "Oversize", "too_short": "Trop court", "short": "Court", "slightly_short": "Légèrement court", "slightly_long": "Légèrement long", "long": "Long", "too_long": "Trop long" } }
+  "size-rec": { "recommended_size": "Taille recommandée : {{size}}", "item_fit": "Cet article est {{fit}}", "select_size": "Sélectionnez une taille pour voir comment elle s'adapte", "fitClassification": { "form_fitting": "Ajusté", "slim_fit": "Coupe slim", "regular_fit": "Coupe régulière", "relaxed_fit": "Coupe décontractée", "oversized_fit": "Coupe oversize" }, "measurementLocation": { "neck_base": "Cou", "across_shoulder": "Épaules", "cb_neck_to_wrist": "Cou jusqu'au poignet", "sleeve_length_from_shoulder_point": "Manche", "bust": "Buste", "waist": "Taille", "low_waist": "Bas de la taille", "high_hip": "Haut des hanches", "low_hip": "Bas des hanches", "thigh": "Cuisse", "inseam": "Entrejambe", "hsp_to_low_hip": "HSP au bas des hanches", "hsp_to_crotch": "HSP à l'entrejambe", "low_hip_bottoms": "Bas des hanches (bas)", "high_hip_bottoms": "Haut des hanches (bas)" }, "fit": { "too_tight": "Trop serré", "tight": "Serré", "slightly_tight": "Légèrement serré", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample", "loose": "Ample", "oversized": "Oversize", "too_short": "Trop court", "short": "Court", "slightly_short": "Légèrement court", "slightly_long": "Légèrement long", "long": "Long", "too_long": "Trop long" } },
+  "fit-chart": { "fit_scale": "Échelle d'ajustement", "fit": { "poor_fit": "Mauvais ajustement", "acceptable_fit": "Ajustement acceptable", "too_tight": "Trop serré", "tight": "Serré ou plus ajusté", "slightly_tight": "Légèrement serré ou ajusté", "perfect_fit": "Parfait", "slightly_loose": "Légèrement ample ou moins ajusté", "loose": "Ample ou non ajusté", "oversized": "Oversize" }, "measurement_points": "Points de mesure", "point": { "bust": "Poitrine/Buste", "waist": "Taille naturelle", "pant_waist": "Taille du pantalon", "high_hip": "Haut des hanches", "low_hip": "Bas des hanches", "thigh": "Cuisse" } }
 };
 instance.use(initReactI18next).init({
   lng: "en",
@@ -41399,6 +41401,302 @@ function SignInOverlay({
     ] })
   ] }) });
 }
+function FitChart({
+  onRequestClose
+}) {
+  const scrollToRef = reactExports.useRef(null);
+  const css2 = useCss((_theme) => ({
+    frame: {
+      position: "relative",
+      width: "100%",
+      border: "1px solid rgba(33, 32, 31, 0.2)",
+      borderRadius: "12px"
+    },
+    closeButton: {
+      position: "absolute",
+      top: "16px",
+      right: "16px"
+    },
+    closeIcon: {
+      width: "12px",
+      height: "12px"
+    },
+    contentContainer: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "16px 16px 0 16px"
+    },
+    titleContainer: {},
+    titleText: {
+      fontSize: "24px",
+      fontWeight: "bold",
+      color: "#209da7"
+    },
+    scaleContainer: {
+      position: "relative",
+      width: "95%",
+      marginTop: "16px",
+      marginLeft: "auto",
+      marginRight: "auto"
+    },
+    scaleSegment: {
+      position: "relative",
+      width: "100%",
+      display: "flex",
+      alignItems: "center"
+    },
+    scaleFitLabelRow: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    scaleFitLabelContainer: {
+      width: "100%",
+      lineHeight: "11px",
+      textAlign: "center"
+    },
+    scaleFitLabelPoorFitText: {
+      fontSize: "8px",
+      fontWeight: "500"
+    },
+    scaleFitLabelGoodFitText: {
+      fontSize: "8px",
+      fontWeight: "500",
+      color: "#209da7"
+    },
+    scaleFitLabelLeftContainer: {
+      marginTop: "4px",
+      position: "relative",
+      left: "-28px"
+    },
+    scaleFitLabelRightContainer: {
+      marginTop: "4px",
+      position: "relative",
+      right: "-28px"
+    },
+    scaleLineRow: {
+      marginTop: "8px",
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    scalePointPoorFit: {
+      width: "12px",
+      height: "12px",
+      borderRadius: "6px",
+      backgroundColor: "black"
+    },
+    scalePointGoodFit: {
+      width: "12px",
+      height: "12px",
+      borderRadius: "6px",
+      backgroundColor: "#209da7"
+    },
+    scaleLinePoorFit: {
+      width: "100%",
+      height: "2px",
+      backgroundColor: "black"
+    },
+    scaleLineGoodFit: {
+      width: "100%",
+      height: "2px",
+      backgroundColor: "#209da7"
+    },
+    scaleCategoryLabelRow: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    scaleCategoryLabelLeft: {
+      width: "100%",
+      paddingLeft: "16px",
+      textAlign: "left"
+    },
+    scaleCategoryLabelCenter: {
+      width: "100%",
+      textAlign: "center"
+    },
+    scaleCategoryLabelRight: {
+      width: "100%",
+      paddingRight: "16px",
+      textAlign: "right"
+    },
+    scaleCategoryLabelPoorFitText: {
+      fontSize: "12px",
+      fontWeight: "500"
+    },
+    scaleCategoryLabelGoodFitText: {
+      fontSize: "12px",
+      fontWeight: "500",
+      color: "#209da7"
+    },
+    chartTitleContainer: {
+      marginTop: "24px",
+      textAlign: "center"
+    },
+    chartTitleText: {
+      fontSize: "20px",
+      fontWeight: "bold",
+      color: "#7d7d7d"
+    },
+    chartContainer: {
+      position: "relative",
+      width: "300px",
+      height: "310px"
+    },
+    chartImage: {
+      display: "block",
+      position: "absolute",
+      top: "0",
+      left: "80px",
+      width: "135px",
+      height: "300px",
+      objectFit: "none"
+    },
+    chartLineBase: {
+      position: "absolute",
+      height: "1px",
+      backgroundColor: "black"
+    },
+    chartLine1: {
+      top: "142px",
+      left: "112px",
+      width: "72px"
+    },
+    chartLine2: {
+      top: "173px",
+      left: "117px",
+      width: "60px"
+    },
+    chartLine3: {
+      top: "193px",
+      left: "114px",
+      width: "67px"
+    },
+    chartLine4: {
+      top: "210px",
+      left: "102px",
+      width: "90px"
+    },
+    chartLine5: {
+      top: "243px",
+      left: "97px",
+      width: "101px"
+    },
+    chartLine6a: {
+      top: "272px",
+      left: "100px",
+      width: "44px"
+    },
+    chartLine6b: {
+      top: "272px",
+      left: "150px",
+      width: "44px"
+    },
+    chartLabelText: {
+      fontSize: "12px"
+    },
+    chartLabelBase: {
+      lineHeight: "20px",
+      position: "absolute",
+      borderBottom: "1px solid black",
+      textAlign: "center"
+    },
+    chartLabel1: {
+      top: "120px",
+      left: "209px"
+    },
+    chartLabel2: {
+      top: "151px",
+      left: "207px"
+    },
+    chartLabel3: {
+      top: "171px",
+      left: "20px"
+    },
+    chartLabel4: {
+      top: "188px",
+      left: "213px"
+    },
+    chartLabel5: {
+      top: "221px",
+      left: "215px"
+    },
+    chartLabel6: {
+      top: "250px",
+      left: "44px"
+    }
+  }));
+  reactExports.useEffect(() => {
+    if (scrollToRef.current) {
+      scrollToRef.current.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: scrollToRef, css: css2.frame, children: [
+    /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.closeButton, onClick: onRequestClose, children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.closeIcon }) }),
+    /* @__PURE__ */ jsxs("div", { css: css2.contentContainer, children: [
+      /* @__PURE__ */ jsx$1("div", { css: css2.titleContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.titleText, t: "fit-chart.fit_scale" }) }),
+      /* @__PURE__ */ jsxs("div", { css: css2.scaleContainer, children: [
+        /* @__PURE__ */ jsxs("div", { css: css2.scaleFitLabelRow, children: [
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleFitLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelPoorFitText, t: "fit-chart.fit.tight" }) }),
+            /* @__PURE__ */ jsx$1("div", { css: [css2.scaleFitLabelContainer, css2.scaleFitLabelLeftContainer, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelPoorFitText, t: "fit-chart.fit.too_tight" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleFitLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelGoodFitText, t: "fit-chart.fit.slightly_tight" }) }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleFitLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelGoodFitText, t: "fit-chart.fit.perfect_fit" }) }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleFitLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelGoodFitText, t: "fit-chart.fit.slightly_loose" }) }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleFitLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelPoorFitText, t: "fit-chart.fit.loose" }) }),
+            /* @__PURE__ */ jsx$1("div", { css: [css2.scaleFitLabelContainer, css2.scaleFitLabelRightContainer, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleFitLabelPoorFitText, t: "fit-chart.fit.oversized" }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { css: css2.scaleLineRow, children: [
+          /* @__PURE__ */ jsxs("div", { css: css2.scaleSegment, children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scalePointPoorFit, children: " " }),
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleLinePoorFit, children: " " })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { css: css2.scaleSegment, children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scalePointGoodFit, children: " " }),
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleLineGoodFit, children: " " })
+          ] }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleLineGoodFit, children: " " }) }),
+          /* @__PURE__ */ jsxs("div", { css: css2.scaleSegment, children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleLineGoodFit, children: " " }),
+            /* @__PURE__ */ jsx$1("div", { css: css2.scalePointGoodFit, children: " " })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { css: css2.scaleSegment, children: [
+            /* @__PURE__ */ jsx$1("div", { css: css2.scaleLinePoorFit, children: " " }),
+            /* @__PURE__ */ jsx$1("div", { css: css2.scalePointPoorFit, children: " " })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { css: css2.scaleCategoryLabelRow, children: [
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelLeft, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelPoorFitText, t: "fit-chart.fit.poor_fit" }) }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelCenter, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelGoodFitText, t: "fit-chart.fit.acceptable_fit" }) }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.scaleSegment, children: /* @__PURE__ */ jsx$1("div", { css: css2.scaleCategoryLabelRight, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.scaleCategoryLabelPoorFitText, t: "fit-chart.fit.poor_fit" }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.chartTitleContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartTitleText, t: "fit-chart.measurement_points" }) }),
+      /* @__PURE__ */ jsxs("div", { css: css2.chartContainer, children: [
+        /* @__PURE__ */ jsx$1("img", { src: getExternalAssetUrl("fit-chart-outline.png"), alt: "Fit Chart", css: css2.chartImage }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine1, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine2, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine3, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine4, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine5, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6a, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLineBase, css2.chartLine6b, "", ""], children: " " }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel1, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.bust" }) }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel2, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.waist" }) }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel3, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.pant_waist" }) }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel4, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.high_hip" }) }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel5, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.low_hip" }) }),
+        /* @__PURE__ */ jsx$1("div", { css: [css2.chartLabelBase, css2.chartLabel6, "", ""], children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.chartLabelText, t: "fit-chart.point.thigh" }) })
+      ] })
+    ] })
+  ] });
+}
 function Loading({
   t = "loading"
 }) {
@@ -41548,6 +41846,7 @@ async function getStyleGarmentCategoryById(styleGarmentCategoryId) {
 }
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
 const AVATAR_GUTTER_HEIGHT_PX = 100;
+const CONTENT_AREA_WIDTH_PX = 550;
 const logger$1 = getLogger("vto-single");
 function VtoSingleOverlay() {
   const {
@@ -41801,7 +42100,7 @@ function MobileLayout({
     bottomFrameOuter: {
       position: "absolute",
       width: "calc(100% - 16px)",
-      maxWidth: "450px",
+      maxWidth: `${CONTENT_AREA_WIDTH_PX}px`,
       bottom: "0",
       maxHeight: "95vh",
       left: "50%",
@@ -41851,34 +42150,6 @@ function MobileLayout({
       padding: "0 16px 16px 16px",
       backgroundColor: "#FFFFFF",
       overflowY: "auto"
-    },
-    sizeSelectorContainer: {},
-    colorSelectorContainer: {
-      marginTop: "16px"
-    },
-    itemFitTextContainer: {
-      marginTop: "8px"
-    },
-    itemFitText: {},
-    itemFitDetailsContainer: {
-      marginTop: "8px",
-      width: "70%"
-    },
-    buttonContainer: {
-      marginTop: "16px",
-      width: "100%"
-    },
-    productNameContainer: {
-      marginTop: "16px"
-    },
-    productNameText: {},
-    priceContainer: {},
-    priceText: {},
-    productDescriptionContainer: {
-      marginTop: "8px"
-    },
-    footerContainer: {
-      marginTop: "24px"
     }
   }));
   reactExports.useEffect(() => {
@@ -41994,11 +42265,12 @@ function MobileContentExpanded({
     itemFitText: {},
     itemFitDetailsContainer: {
       marginTop: "8px",
-      width: "70%"
+      width: "min(100%, 220px)"
     },
     buttonContainer: {
       marginTop: "24px",
-      width: "100%"
+      width: "100%",
+      maxWidth: "375px"
     },
     productDetailsContainer: {
       marginTop: "24px",
@@ -42034,13 +42306,15 @@ function MobileContentFull({
   onAddToCart,
   onSignOut
 }) {
+  const [fitChartOpen, setFitChartOpen] = reactExports.useState(false);
   const css2 = useCss((_theme) => ({
     sizeRecommendationFrame: {
       marginTop: "16px",
+      width: "min(100%, 375px)",
       display: "flex",
       flexDirection: "column",
       border: "1px solid rgba(33, 32, 31, 0.2)",
-      padding: "16px 56px",
+      padding: "16px",
       justifyContent: "center",
       alignItems: "center"
     },
@@ -42055,14 +42329,19 @@ function MobileContentFull({
     itemFitTextContainer: {
       marginTop: "8px"
     },
+    fitChartButton: {},
     itemFitText: {},
     itemFitDetailsContainer: {
       marginTop: "8px",
-      width: "100%"
+      width: "min(100%, 220px)"
+    },
+    fitChartContainer: {
+      marginTop: "16px"
     },
     buttonContainer: {
       marginTop: "16px",
-      width: "100%"
+      width: "100%",
+      maxWidth: "375px"
     },
     productDetailsContainer: {
       marginTop: "24px",
@@ -42085,13 +42364,27 @@ function MobileContentFull({
   const handleProductDetailsClick = reactExports.useCallback(() => {
     onChangeContentView("expanded");
   }, [onChangeContentView]);
+  const handleFitChartOpen = reactExports.useCallback(() => {
+    setFitChartOpen(true);
+  }, []);
+  const handleFitChartClose = reactExports.useCallback(() => {
+    setFitChartOpen(false);
+  }, []);
+  let fitChartNode = null;
+  if (fitChartOpen) {
+    fitChartNode = /* @__PURE__ */ jsx$1("div", { css: css2.fitChartContainer, children: /* @__PURE__ */ jsx$1(FitChart, { onRequestClose: handleFitChartClose }) });
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationFrame, children: [
       /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
       /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
-      /* @__PURE__ */ jsx$1("div", { css: css2.itemFitTextContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData }) }),
+      /* @__PURE__ */ jsxs("div", { css: css2.itemFitTextContainer, children: [
+        /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.fitChartButton, onClick: handleFitChartOpen, children: /* @__PURE__ */ jsx$1(SvgInfoIcon, {}) }),
+        /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData, textCss: css2.itemFitText })
+      ] }),
       /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
     ] }),
+    fitChartNode,
     /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.productDetailsContainer, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.productDetailsText, t: "vto-single.hide_product_details", onClick: handleProductDetailsClick }) }),
@@ -42117,6 +42410,7 @@ function DesktopLayout({
   const {
     t
   } = useTranslation();
+  const [fitChartOpen, setFitChartOpen] = reactExports.useState(false);
   const css2 = useCss((_theme) => ({
     mainContainer: {
       display: "flex",
@@ -42169,6 +42463,7 @@ function DesktopLayout({
     recommendedSizeText: {
       fontWeight: "600"
     },
+    fitChartButton: {},
     itemFitContainer: {
       marginTop: "8px",
       lineHeight: "normal"
@@ -42185,6 +42480,9 @@ function DesktopLayout({
       marginTop: "24px",
       width: "100%"
     },
+    fitChartContainer: {
+      marginTop: "16px"
+    },
     buttonContainer: {
       marginTop: "24px"
     },
@@ -42192,6 +42490,16 @@ function DesktopLayout({
       marginTop: "32px"
     }
   }));
+  const handleFitChartOpen = reactExports.useCallback(() => {
+    setFitChartOpen(true);
+  }, []);
+  const handleFitChartClose = reactExports.useCallback(() => {
+    setFitChartOpen(false);
+  }, []);
+  let fitChartNode = null;
+  if (fitChartOpen) {
+    fitChartNode = /* @__PURE__ */ jsx$1("div", { css: css2.fitChartContainer, children: /* @__PURE__ */ jsx$1(FitChart, { onRequestClose: handleFitChartClose }) });
+  }
   return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
     /* @__PURE__ */ jsx$1(Avatar, { frameUrls, setModalStyle }),
     /* @__PURE__ */ jsxs("div", { css: css2.rightContainer, children: [
@@ -42202,7 +42510,7 @@ function DesktopLayout({
         /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
         /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationFrame, children: [
           /* @__PURE__ */ jsxs("div", { css: css2.recommendedSizeContainer, children: [
-            /* @__PURE__ */ jsx$1(SvgInfoIcon, {}),
+            /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.fitChartButton, onClick: handleFitChartOpen, children: /* @__PURE__ */ jsx$1(SvgInfoIcon, {}) }),
             /* @__PURE__ */ jsx$1(RecommendedSizeText, { loadedProductData, textCss: css2.recommendedSizeText })
           ] }),
           /* @__PURE__ */ jsx$1("div", { css: css2.itemFitContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData, textCss: css2.itemFitText }) }),
@@ -42210,6 +42518,7 @@ function DesktopLayout({
           /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
           /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
         ] }),
+        fitChartNode,
         /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(ProductDescriptionText, { loadedProductData }) })
       ] }),
@@ -42332,6 +42641,7 @@ function Avatar({
         const bottomContainerHeightPx = AVATAR_GUTTER_HEIGHT_PX;
         const imageHeightPx = screenHeightPx - bottomContainerHeightPx;
         const imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
+        const modalWidthPx = imageWidthPx + CONTENT_AREA_WIDTH_PX;
         imageSize = {
           width: imageWidthPx,
           height: imageHeightPx
@@ -42340,7 +42650,9 @@ function Avatar({
           width: imageWidthPx,
           height: bottomContainerHeightPx
         };
-        modalStyle = {};
+        modalStyle = {
+          width: `min(${modalWidthPx}px, 100vw)`
+        };
       }
       const topContainerStyle = {
         width: imageSize.width + "px"
@@ -42377,7 +42689,7 @@ function Avatar({
         if (currentFrameIndex === 0) {
           clearInterval(intervalId);
         }
-      }, 200);
+      }, 500);
     }
   }, [frameUrls, selectedFrameIndex]);
   const rotateLeft = reactExports.useCallback(() => {
@@ -42959,9 +43271,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.6"}`,
-    commitHash: `${"e594d20"}`,
-    date: `${"2026-01-12T14:54:57.160Z"}`
+    version: `${"5.0.8"}`,
+    commitHash: `${"d1d0462"}`,
+    date: `${"2026-01-18T23:29:10.022Z"}`
   }
 };
 const CONFIGS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.6",
+  "version": "5.0.8",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",