@foodpilot/foods 2.11.32 → 2.11.34

package/dist/components/Banner/Banner.js

@@ -7,7 +7,7 @@ const Banner = (props) => {
     return /* @__PURE__ */ jsx(ClassicBanner, { variant, stylePresetOverride: props.stylePresetOverride, children: props.children });
   }
   if (variant === "themed") {
-    return /* @__PURE__ */ jsx(ThemedBanner, { variant, children: props.children });
+    return /* @__PURE__ */ jsx(ThemedBanner, { variant, colors: props.colors, children: props.children });
   }
 };
 export {

package/dist/components/Banner/banner.types.d.ts

@@ -6,9 +6,15 @@ export type StylePreset = {
     icon: keyof typeof iconMapping;
     color: string;
 };
+export type ThemedBannerColors = {
+    backgroundColor?: string;
+    color?: string;
+    sideBorder?: string;
+};
 export type BannerVariantProps = {
     variant?: ClassicBannerType;
     stylePresetOverride?: Partial<StylePreset>;
 } | {
     variant?: ThemedBannerType;
+    colors?: ThemedBannerColors;
 };

package/dist/components/Banner/index.d.ts

@@ -1 +1,2 @@
 export { Banner } from './Banner';
+export * from './banner.types';

package/dist/components/Banner/variants/ThemedBanner.d.ts

@@ -1,8 +1,9 @@
-import { ThemedBannerType } from '../banner.types';
+import { ThemedBannerColors, ThemedBannerType } from '../banner.types';
 import { ReactNode } from 'react';
 type Props = {
     children?: ReactNode;
     variant?: ThemedBannerType;
+    colors?: ThemedBannerColors;
 };
 export declare const ThemedBanner: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Banner/variants/ThemedBanner.js

@@ -3,6 +3,8 @@ import { useTheme, Stack, Box, Typography } from "@mui/material";
 import { FoodsIcon } from "../../Icons/FoodsIcon.js";
 const ThemedBanner = (props) => {
   const theme = useTheme();
+  const { colors } = props;
+  const { backgroundColor = "#EDF5FF", color = "#1976D2", sideBorder = "#398BDB" } = colors || {};
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -10,14 +12,14 @@ const ThemedBanner = (props) => {
       padding: theme.spacing(2),
       gap: theme.spacing(1.5),
       borderRadius: "8px",
-      borderLeft: `4px solid #398BDB`,
+      borderLeft: `4px solid ${sideBorder}`,
       sx: {
-        backgroundColor: "#EDF5FF",
-        color: "#1976D2"
+        backgroundColor,
+        color
       },
       children: [
         /* @__PURE__ */ jsx(Box, { paddingTop: "2px", children: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: "information" }) }),
-        /* @__PURE__ */ jsx(Typography, { variant: "small-medium", children: typeof props.children === "string" ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Typography, { variant: "small-medium", sx: { width: "100%" }, children: typeof props.children === "string" ? /* @__PURE__ */ jsx(
           Box,
           {
             sx: {

package/dist/main.js

@@ -141,7 +141,7 @@ import { Textarea } from "./components/Textarea/Textarea.js";
 import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
 import { FoodsTooltip } from "./components/Tooltip/FoodsTooltip.js";
 import { FoodsTreeview } from "./components/Treeview/Treeview.js";
-import { allTypographyVariants, typographyConfig } from "./themes/common/MUIComponents/typography.js";
+import { allTypographyVariants, deprecatedVariants, typographyConfig } from "./themes/common/MUIComponents/typography.js";
 import { allColors, allMainColors, dataVisualizationColors, extraColors, greenTheme, greyTheme, orangeTheme, redTheme, shadows, yellowTheme } from "./themes/common/colors.js";
 import { components } from "./themes/common/components.js";
 import { custom, numbers } from "./themes/common/custom.js";
@@ -321,6 +321,7 @@ export {
   computeSize,
   custom,
   dataVisualizationColors,
+  deprecatedVariants,
   extraColors,
   getThemeLogo,
   greenTheme,

package/dist/themes/common/MUIComponents/typography.d.ts

@@ -1,5 +1,6 @@
 import { ThemeOptions } from '@mui/material';
-export declare const allTypographyVariants: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "huge-bold", "huge-medium", "huge", "big-bold", "big-medium", "big", "body-bold", "body-medium", "body", "small-bold", "small-medium", "small", "cta", "number-huge", "number-big", "number-inter", "number-small", "number-micro"];
+export declare const deprecatedVariants: readonly ["small", "body", "big", "huge", "number-huge"];
+export declare const allTypographyVariants: readonly ["small", "body", "big", "huge", "number-huge", "h1", "h2", "h3", "h4", "h5", "h6", "small-regular", "small-medium", "small-semibold", "small-bold", "body-regular", "body-medium", "body-semibold", "body-bold", "big-regular", "big-medium", "big-semibold", "big-bold", "huge-regular", "huge-medium", "huge-semibold", "huge-bold", "cta", "number-big", "number-inter", "number-small", "number-micro"];
 export type customTypographyVariants = (typeof allTypographyVariants)[number];
 type TypographyNewVariants = Record<customTypographyVariants, React.CSSProperties>;
 type TypographyPropsNewVariants = Record<customTypographyVariants, true>;

package/dist/themes/common/MUIComponents/typography.js

@@ -1,216 +1,332 @@
 import { greyTheme } from "../colors.js";
+const deprecatedVariants = ["small", "body", "big", "huge", "number-huge"];
 const allTypographyVariants = [
+  // Legacy, but I duplicate them to avoid breaking changes
+  ...deprecatedVariants,
   "h1",
   "h2",
   "h3",
   "h4",
   "h5",
   "h6",
-  "huge-bold",
-  "huge-medium",
-  "huge",
-  "big-bold",
-  "big-medium",
-  "big",
-  "body-bold",
-  "body-medium",
-  "body",
-  "small-bold",
+  "small-regular",
   "small-medium",
-  "small",
+  "small-semibold",
+  "small-bold",
+  "body-regular",
+  "body-medium",
+  "body-semibold",
+  "body-bold",
+  "big-regular",
+  "big-medium",
+  "big-semibold",
+  "big-bold",
+  "huge-regular",
+  "huge-medium",
+  "huge-semibold",
+  "huge-bold",
   "cta",
-  "number-huge",
   "number-big",
   "number-inter",
   "number-small",
   "number-micro"
 ];
-const typographyConfig = (_palette) => ({
-  fontFamily: ["Montserrat", "serif"].join(","),
-  h1: {
-    fontStyle: "normal",
-    fontWeight: "700",
-    fontSize: "1.75rem",
-    // 28px mobile (base)
-    lineHeight: "2.8rem",
-    color: greyTheme[2800]
-  },
-  h2: {
-    fontStyle: "normal",
-    fontWeight: "700",
-    fontSize: "1.375rem",
-    // 22px mobile (base)
-    lineHeight: "2.2rem",
-    color: greyTheme[2800]
-  },
-  h3: {
-    fontStyle: "normal",
-    fontWeight: "700",
-    fontSize: "1.125rem",
-    // 18px mobile (base)
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  h4: {
-    fontStyle: "normal",
-    fontWeight: "700",
-    fontSize: "1rem",
-    // 16px mobile (base) = body niveau
-    lineHeight: "1.6rem",
-    color: greyTheme[2800]
-  },
-  h5: {
-    fontStyle: "normal",
-    fontWeight: "700",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.6rem",
-    color: greyTheme[2800]
-  },
-  h6: {
-    fontStyle: "normal",
-    fontWeight: "700",
+const typographyConfig = (_palette) => {
+  const defaultOption = {
+    // I am thinking we may want to use `color: inherit` or something like that.
+    // Still unsure
+    color: greyTheme[2800],
+    fontStyle: "normal"
+  };
+  const smallDefaults = {
+    fontSize: "0.75rem",
+    lineHeight: "160%",
+    letterSpacing: "0%",
+    "@media (max-width:1200px)": {
+      fontSize: "0.6rem",
+      lineHeight: "160%"
+    }
+  };
+  const smallFonts = {
+    small: {
+      ...defaultOption,
+      ...smallDefaults,
+      fontWeight: 400
+    },
+    "small-regular": {
+      ...defaultOption,
+      ...smallDefaults,
+      fontWeight: 400
+    },
+    "small-medium": {
+      ...defaultOption,
+      ...smallDefaults,
+      fontWeight: 500
+    },
+    "small-semibold": {
+      ...defaultOption,
+      ...smallDefaults,
+      fontWeight: 600
+    },
+    "small-bold": {
+      ...defaultOption,
+      ...smallDefaults,
+      fontWeight: 700
+    }
+  };
+  const bodyDefaults = {
     fontSize: "0.875rem",
-    // 14px - Minimum lisible
-    lineHeight: "1.4rem",
-    color: greyTheme[2800]
-  },
-  "huge-bold": {
-    fontStyle: "bold",
-    fontWeight: 600,
-    fontSize: "1.125rem",
-    lineHeight: "2.025rem",
-    color: greyTheme[2800]
-  },
-  "huge-medium": {
-    fontStyle: "normal",
-    fontWeight: 500,
-    fontSize: "1.125rem",
-    lineHeight: "2.025rem",
-    color: greyTheme[2800]
-  },
-  huge: {
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: "1.125rem",
-    lineHeight: "2.025rem",
-    color: greyTheme[2800]
-  },
-  "big-bold": {
-    fontStyle: "bold",
-    fontWeight: "600",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  "big-medium": {
-    fontStyle: "normal",
-    fontWeight: "500",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  big: {
-    fontStyle: "normal",
-    fontWeight: "400",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  "body-bold": {
-    fontStyle: "bold",
-    fontWeight: "600",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  "body-medium": {
-    fontStyle: "normal",
-    fontWeight: "500",
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  body: {
-    fontStyle: "normal",
-    fontWeight: "400",
+    lineHeight: "160%",
+    letterSpacing: "0%",
+    "@media (max-width:1200px)": {
+      fontSize: "0.75rem",
+      lineHeight: "160%"
+    }
+  };
+  const bodyFonts = {
+    body: {
+      ...defaultOption,
+      ...bodyDefaults,
+      fontWeight: 400
+    },
+    "body-regular": {
+      ...defaultOption,
+      ...bodyDefaults,
+      fontWeight: 400
+    },
+    "body-medium": {
+      ...defaultOption,
+      ...bodyDefaults,
+      fontWeight: 500
+    },
+    "body-semibold": {
+      ...defaultOption,
+      ...bodyDefaults,
+      fontWeight: 600
+    },
+    "body-bold": {
+      ...defaultOption,
+      ...bodyDefaults,
+      fontWeight: 700
+    }
+  };
+  const bigDefaults = {
     fontSize: "1rem",
-    // 16px
-    lineHeight: "1.8rem",
-    color: greyTheme[2800]
-  },
-  "small-bold": {
-    fontStyle: "bold",
-    fontWeight: 600,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: "1.575rem",
-    color: greyTheme[2800]
-  },
-  "small-medium": {
-    fontStyle: "normal",
-    fontWeight: 500,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: "1.575rem",
-    color: greyTheme[2800]
-  },
-  small: {
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: "0.875rem",
-    // 14px
-    color: greyTheme[2800]
-  },
-  cta: {
-    fontStyle: "bold",
-    fontWeight: 700,
-    fontSize: "0.875rem",
-    color: greyTheme[2800]
-  },
-  "number-huge": {
-    fontStyle: "normal",
-    fontWeight: 700,
-    fontSize: "2rem",
-    lineHeight: "3.2rem",
-    color: greyTheme[2800]
-  },
-  "number-big": {
-    fontStyle: "normal",
-    fontWeight: 700,
-    fontSize: "2rem",
-    lineHeight: "3.2rem",
-    color: greyTheme[2800]
-  },
-  "number-inter": {
-    fontStyle: "normal",
-    fontWeight: 700,
-    fontSize: "1.5rem",
-    lineHeight: "2.4rem",
-    color: greyTheme[2800]
-  },
-  "number-small": {
-    fontStyle: "normal",
-    fontWeight: 700,
-    fontSize: "1rem",
-    lineHeight: "1.4rem",
-    color: greyTheme[2800]
-  },
-  "number-micro": {
-    fontStyle: "normal",
-    fontWeight: 700,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: "1.4rem",
-    color: greyTheme[2800]
-  }
-});
+    lineHeight: "160%",
+    letterSpacing: "0%",
+    "@media (max-width:1200px)": {
+      fontSize: "0.875rem",
+      lineHeight: "160%"
+    }
+  };
+  const bigFonts = {
+    big: {
+      ...defaultOption,
+      ...bigDefaults,
+      fontWeight: "400"
+    },
+    "big-regular": {
+      ...defaultOption,
+      ...bigDefaults,
+      fontWeight: "400"
+    },
+    "big-medium": {
+      ...defaultOption,
+      ...bigDefaults,
+      fontWeight: "500"
+    },
+    "big-semibold": {
+      ...defaultOption,
+      ...bigDefaults,
+      fontWeight: "600"
+    },
+    "big-bold": {
+      ...defaultOption,
+      ...bigDefaults,
+      fontWeight: "700"
+    }
+  };
+  const hugeDefaults = {
+    fontSize: "1.125rem",
+    lineHeight: "160%",
+    letterSpacing: "0%",
+    "@media (max-width:1200px)": {
+      fontSize: "1rem",
+      lineHeight: "160%"
+    }
+  };
+  const hugeFonts = {
+    huge: {
+      ...defaultOption,
+      ...hugeDefaults,
+      fontWeight: 400
+    },
+    "huge-regular": {
+      ...defaultOption,
+      ...hugeDefaults,
+      fontWeight: 400
+    },
+    "huge-medium": {
+      ...defaultOption,
+      ...hugeDefaults,
+      fontWeight: 500
+    },
+    "huge-semibold": {
+      ...defaultOption,
+      ...hugeDefaults,
+      fontWeight: 600
+    },
+    "huge-bold": {
+      ...defaultOption,
+      ...hugeDefaults,
+      fontWeight: 700
+    }
+  };
+  const numberFonts = {
+    "number-huge": {
+      // Same as big because huge has disappeared
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "2rem",
+      lineHeight: "116%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.75rem"
+      }
+    },
+    "number-big": {
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "2rem",
+      lineHeight: "116%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.75rem"
+      }
+    },
+    "number-inter": {
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "1.25rem",
+      lineHeight: "140%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.125rem"
+      }
+    },
+    "number-small": {
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "1rem",
+      lineHeight: "150%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "0.75rem"
+      }
+    },
+    "number-micro": {
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "0.875rem",
+      lineHeight: "1.4rem",
+      color: greyTheme[2800]
+    }
+  };
+  const headers = {
+    h1: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "2rem",
+      lineHeight: "160%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.375rem",
+        lineHeight: "140%"
+      }
+    },
+    h2: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "1.5rem",
+      lineHeight: "160%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.25rem",
+        lineHeight: "140%"
+      }
+    },
+    h3: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "1.25rem",
+      lineHeight: "160%",
+      letterSpace: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1.125rem",
+        lineHeight: "140%"
+      }
+    },
+    h4: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "1.125rem",
+      lineHeight: "160%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1rem",
+        lineHeight: "150%"
+      }
+    },
+    h5: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "1rem",
+      lineHeight: "160%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "0.875rem",
+        lineHeight: "150%"
+      }
+    },
+    // Deprecated
+    h6: {
+      ...defaultOption,
+      fontWeight: "700",
+      fontSize: "1rem",
+      lineHeight: "160%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "0.875rem",
+        lineHeight: "150%"
+      }
+    }
+  };
+  const ctaAndLinks = {
+    cta: {
+      ...defaultOption,
+      fontWeight: 700,
+      fontSize: "0.875rem",
+      lineHeight: "150%",
+      letterSpacing: "0%",
+      "@media (max-width:1200px)": {
+        fontSize: "1rem"
+      }
+    }
+  };
+  const typographyOptions = {
+    fontFamily: ["Montserrat", "serif"].join(","),
+    ...headers,
+    ...smallFonts,
+    ...bodyFonts,
+    ...bigFonts,
+    ...hugeFonts,
+    ...ctaAndLinks,
+    ...numberFonts
+  };
+  return typographyOptions;
+};
 export {
   allTypographyVariants,
+  deprecatedVariants,
   typographyConfig
 };

package/dist/themes/common/components.js

@@ -720,43 +720,6 @@ const components = {
         }
       })
     }
-  },
-  MuiTypography: {
-    styleOverrides: {
-      h1: ({ theme }) => ({
-        [theme.breakpoints.up("md")]: {
-          fontSize: "2rem",
-          // 32px desktop (au lieu de 28px mobile)
-          lineHeight: "3.2rem"
-          // Proportionnel
-        }
-      }),
-      h2: ({ theme }) => ({
-        [theme.breakpoints.up("md")]: {
-          fontSize: "1.5rem",
-          // 24px desktop (au lieu de 22px mobile)
-          lineHeight: "2.4rem"
-          // Proportionnel
-        }
-      }),
-      h3: ({ theme }) => ({
-        [theme.breakpoints.up("md")]: {
-          fontSize: "1.25rem",
-          // 20px desktop (au lieu de 18px mobile)
-          lineHeight: "2rem"
-          // Proportionnel
-        }
-      }),
-      h4: ({ theme }) => ({
-        [theme.breakpoints.up("md")]: {
-          fontSize: "1.125rem",
-          // 18px desktop (au lieu de 16px mobile)
-          lineHeight: "1.8rem"
-          // Proportionnel
-        }
-      })
-      // H5, H6, body, big, small restent à 16px sur tous écrans
-    }
   }
 };
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.11.32",
+  "version": "2.11.34",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",
@@ -210,7 +210,7 @@
     "@mui/x-date-pickers": "^7.0.0",
     "@mui/x-tree-view": "^7.0.0",
     "i18next": "^23.0.0 || ^25.0.0",
-    "lodash": "^4.17.0",
+    "lodash": "^4.17.23",
     "material-react-table": "^2.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -278,9 +278,9 @@
     "react-dom": "^19.0.0",
     "rollup-plugin-visualizer": "^6.0.4",
     "size-limit": "^11.2.0",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.17",
     "typescript": "^5.3.3",
-    "vite": "^6.3.6",
+    "vite": "^6.4.1",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-svgr": "^3"
@@ -311,7 +311,7 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.2",
     "lexical": "^0.21.0",
-    "lodash": "^4.17.0",
+    "lodash": "^4.17.23",
     "material-react-table": "^3.2.1",
     "material-ui-popup-state": "^5.3.1",
     "prettier": "^3.1.1",